模块结构

模块结构

模块采用增删改查通用文件结构

• 页面头页面模式适用，基于 Operate 组件的通用页面头部
• 表单项
  1. 页面|弹框|抽屉三模式适用，支持组件传参与 Url 访问

     //挂载完成
     onMounted(() => {
         let id = proxy.$route.query.id || props.id || null;
         if (id) {
             //数据获取
             proxy.$axios.get('/api', { params: { id } }).then((result) => {
                 if (result.state == 'success') {
                     Object.assign(form, result.info);
                 } else {
                     ElMessage({
                         type: result.state,
                         message: result.message
                     });
                 }
             });
         } else {
             //自动编号
             proxy.$axios.get('/api', { params: { module: 'module' } }).then((result) => {
                 if (result.state == 'success') {
                     form.number = result.info;
                 } else {
                     ElMessage({
                         type: result.state,
                         message: result.message
                     });
                 }
             });
         }
     });
     
  2. 支持操作区域 Teleport

     <!-- props.to -->
     <Teleport v-if="props.to" :to="props.to">
         <el-button v-if="props.close" @click="props.close">取消</el-button>
         <el-button v-if="$helper.auth('model.edit')" type="primary" @click="save" :loading="load">保存</el-button>
         <el-button v-if="!props.close" class="ico-button" @click="refresh">
             <icon-park type="refresh" />
         </el-button>
     </Teleport>
     
  3. 负责模块数据的增加、修改

     //保存
     function save() {
         el.form.value.validate((valid) => {
             if (valid) {
                 load.value = true;
                 proxy.$axios.post('/api', form).then((result) => {
                     load.value = false;
                     if (result.state == 'success') {
                         form.id = result.info;
                         proxy.$bus.emit('modelRefresh', 0);
                         props.close && props.close();
                         ElMessage({ type: 'success', message: '保存成功' });
                     } else {
                         ElMessage({ type: result.state, message: result.message });
                     }
                 });
             }
         });
     }
     
• 列表项
  1. 基于 Search 组件的多数据搜索

     <search v-model="query.search.data" :field="query.search.field" @change="record(1)"></search>
     

     const query = reactive({
         search: {
             data: {
                 name: [],
                 number: [],
                 a: [],
                 b: [],
                 c: [],
                 d: [],
                 e: [],
                 data: []
             },
             field: {
                 name: '名称',
                 number: '编号',
                 a: field.state ? field.config.a.alias : 'a',
                 b: field.state ? field.config.b.alias : 'b',
                 c: field.state ? field.config.c.alias : 'c',
                 d: field.state ? field.config.d.alias : 'd',
                 e: field.state ? field.config.e.alias : 'e',
                 data: '备注信息'
             }
         }
     });
     
  2. 基于 Column 组件的表格项配置

     <column :ref="el.column" v-model="table.column" name="model" :hide="table.hide" :exclude="table.exclude" />
     

     const table = reactive({
         column: [
             { label: '名称', key: 'name', width: '200', show: true, align: store.theme.align },
             { label: '编号', key: 'number', width: '120', show: true, align: store.theme.align },
             { label: field.state ? field.config.a.alias : 'a', key: 'a', width: '160', show: false, align: store.theme.align },
             { label: field.state ? field.config.b.alias : 'b', key: 'b', width: '160', show: false, align: store.theme.align },
             { label: field.state ? field.config.c.alias : 'c', key: 'c', width: '160', show: false, align: store.theme.align },
             { label: field.state ? field.config.d.alias : 'd', key: 'd', width: '160', show: false, align: store.theme.align },
             { label: field.state ? field.config.e.alias : 'e', key: 'e', width: '160', show: false, align: store.theme.align },
             { label: '备注信息', key: 'data', width: '200', show: true, align: store.theme.align }
         ],
         hide: [],
         exclude: []
     });
     
  3. 支持数据分页查询

     <el-pagination v-model:current-page="table.page.page" v-model:page-size="table.page.size" :total="table.page.total" :page-sizes="table.page.sizes" :pager-count="table.page.count" :small="true" :background="true" @current-change="record(0)" @size-change="record(1)" layout="total,prev,pager,next,sizes" v-pagination />
     

     const table = reactive({
         data: [],
         page: {
             page: 1,
             size: 30,
             total: 0,
             sizes: [30, 60, 90, 150, 300],
             count: 5
         }
     });
     
  4. 支持数据多选操作
  5. 支持数据导入导出