perf(BaseModule): 表单表格组件代码优化

Author: BoBoooooo

src/components/BaseDialog/FormDesignerDialog.vue

@@ -198,9 +198,9 @@
           </tbody>
         </table>
         <el-button type="success"
-                   @click="handleGenerateKey(true)">自动生成表单(初始化,暂时默认一行两列)</el-button>
-        <el-button type="primary"
-                   @click="handleGenerateKey()">自动绑定key(已有表单的情况)</el-button>
+                   @click="handleGenerateKey(true)">自动生成表单(根据数据库字段初始化,默认一行两列)</el-button>
+        <!-- <el-button type="primary"
+                   @click="handleGenerateKey()">自动绑定key(已有表单的情况)</el-button> -->
       </cus-dialog>
     </el-container>
   </el-dialog>

src/components/BaseDialog/GenerateFormDialog.vue

@@ -14,7 +14,6 @@
              :append-to-body="appendToBody"
              :fullscreen="fullscreen"
              :close-on-click-modal="closeOnClickModal">
-    <slot name="formTitle"></slot>
     <!-- 对话框内动态表单 -->
     <GenerateForm ref="generateDialogForm"
                   :value="formValues"
@@ -27,9 +26,6 @@
     <el-row type="flex"
             justify="end"
             slot="footer">
-      <slot name="footer"
-            v-if="!readOnly"
-            :save="btnSaveOnClick"></slot>
       <template v-if="readOnly">
         <el-button @click="visible=false">关 闭</el-button>
       </template>
@@ -66,9 +62,6 @@ const STATUS = {
   },
 })
 export default class GenerateFormDialog extends Vue {
-  // 异步更新表单数据
-  @Prop({ default: () => ({}), type: Object }) formValuesAsync!: any;
-
   // 子表tableConfig 详情看GenerateFormItem中解释
   @Prop({ default: () => ({}), type: Object }) formTableConfig!: any;
 
@@ -289,13 +282,5 @@ export default class GenerateFormDialog extends Vue {
       formDesign: this.formDesign,
     });
   }
-
-  @Watch('formValuesAsync', { deep: true })
-  onValueChange(value: any) {
-    Object.keys(value).forEach((k) => {
-      // 异步赋值
-      this.$set(this.formValues, k, value[k]);
-    });
-  }
 }
 </script>

src/components/BaseTable/BaseTable.vue

@@ -19,25 +19,16 @@
       <!-- 添加 -->
       <slot name="btnAdd" />
     </div>
-    <!--
-      高级搜索表单
-      submit-handler 用于接收查询按钮点击回调
-     -->
+
     <SearchForm ref="searchForm"
                 v-if="view.searchForm"
                 :columns="columns"
                 @click="fetchHandler(false,true)"
-                :showSeniorSearchForm="view.showSeniorSearchForm"
                 :searchFormCondition.sync="searchFormCondition"
                 :remoteFuncs="remoteFuncs"
                 :isLoading="loading"
                 @clear="dataChangeHandler(true)">
-      <template #SeniorSearchForm>
-        <slot name="SeniorSearchForm"></slot>
-      </template>
     </SearchForm>
-    <slot :loading="loading"
-          name="form" />
     <!-- 表格主体 -->
     <el-table v-loading.lock="loading"
               element-loading-text="加载中……"
@@ -140,8 +131,6 @@
                   :prop="column.prop"
                   :$index="scope.$index" />
           </span>
-          <el-input v-else-if="scope.row.isEdit"
-                    v-model="scope.row[column.prop]"></el-input>
           <span v-else>
             {{ scope.row[column.prop] }}
           </span>
@@ -216,7 +205,7 @@ export default class BaseTable extends Vue {
   maxHeight: string | number = '100%';
 
   // 表格高度
-  tableHeight:number|string = '100%';
+  tableHeight: number | string = '100%';
 
   // 是否需要多选
   @Prop({ default: false, type: Boolean }) isMultiple!: boolean;
@@ -336,25 +325,6 @@ export default class BaseTable extends Vue {
     default: () => ({}),
   }) tableParams!: any;
 
-  // 请求类型(远端,本地)
-  @Prop({
-    type: String,
-    default: 'remote',
-    validator(value) {
-      const types = ['remote', 'local'];
-      const validType = types.indexOf(value) !== -1;
-      if (!validType) {
-        throw new Error(`Invalid type of '${value}', please set one type of 'remote' or 'local'.`);
-      }
-      return validType;
-    },
-  }) type!: string;
-
-  // 表格数据data
-  @Prop({
-    type: Array,
-  }) data: any;
-
   // 表格设计json
   @Prop({
     type: Array,
@@ -393,7 +363,6 @@ export default class BaseTable extends Vue {
   get view() {
     return {
       searchForm: true,
-      showSeniorSearchForm: true,
       ...this.visibleList,
     };
   }
@@ -416,15 +385,12 @@ export default class BaseTable extends Vue {
   mounted() {
     // event: expand changed to `expand-change` in Element v2.x
     this.$refs.table.$on('expand', (row, expanded) => this.emitEventHandler('expand', row, expanded));
-    const { type, data } = this;
+
+    // 初始化表格高度
     this.setMaxHeight();
+    // 请求数据
+    this.fetchHandler(true);
 
-    // type为remote则加载远程数据,否则加载本地数据
-    if (type === 'remote') {
-      this.fetchHandler(true);
-    } else {
-      this.tableData = this.data;
-    }
     // 自适应分页组件按钮;
     window.addEventListener('resize', () => {
       this.setPagerByWidth();
@@ -624,14 +590,6 @@ export default class BaseTable extends Vue {
     // 最后再刷新表格
     this.dataChangeHandler();
   }
-
-  @Watch('data')
-  onDataChange(value: any, oldval: any) {
-    // 监听本地数据变动实时更新列表
-    if (Array.isArray(value) && this.type === 'local') {
-      this.tableData = this.data;
-    }
-  }
 }
 </script>
 <style scoped>

src/components/BaseTable/SearchForm.vue

@@ -23,8 +23,7 @@
              style="display:inline"></i>
         </el-tooltip>
         <!-- 高级查询表单 -->
-        <SeniorSearchForm v-if="showSeniorSearchForm"
-                          :remoteFuncs="remoteFuncs"
+        <SeniorSearchForm :remoteFuncs="remoteFuncs"
                           @fetchSearch="getFetchParamsSearch"
                           :columns="columns"> </SeniorSearchForm>
         <el-tooltip class="item"
@@ -37,8 +36,6 @@
         </el-tooltip>
       </div>
     </el-input>
-    <!-- 自定义高级查询表单-->
-    <slot name="SeniorSearchForm"></slot>
     <div class="tips">
       <!-- 提示当前查询内容 -->
       <template v-if="isArray">
@@ -72,9 +69,6 @@ export default class SearchForm extends Vue {
   // 远程数据方法
   @Prop({ default: () => ({}), type: Object }) remoteFuncs!: any;
 
-  // 是否显示高级查询按钮
-  @Prop({ default: true, type: Boolean }) showSeniorSearchForm!: boolean;
-
   // 表格设计json
   @Prop({
     type: Array,
@@ -86,7 +80,7 @@ export default class SearchForm extends Vue {
   searchContent = '';
 
   // 查询tips
-  paramsTips:any = null;
+  paramsTips: any = null;
 
   get isArray() {
     return Array.isArray(this.paramsTips);
@@ -123,7 +117,7 @@ export default class SearchForm extends Vue {
    * 获取查询条件
    */
   getParams() {
-    let params:any = [];
+    let params: any = [];
     // 拿到所有字段
     const props = this.columns.filter(item => item.searchable).map(item => item.prop);
     const str = props.toString();
@@ -149,7 +143,7 @@ export default class SearchForm extends Vue {
   // 获取高级查询组件中的查询条件
   getFetchParamsSearch(data) {
     this.paramsTips = [];
-    const params:any = [];
+    const params: any = [];
     Object.keys(data).forEach((key) => {
       if (key && data[key]) {
         if (Array.isArray(data[key])) {

src/components/BaseTable/SeniorSearchForm.vue

@@ -57,6 +57,10 @@ import {
   },
 })
 export default class SeniorSearchForm extends Vue {
+   $refs!: {
+    generateDialogForm: HTMLFormElement;
+  };
+
   visible = false;
 
   entity: any = {};
@@ -73,9 +77,6 @@ export default class SeniorSearchForm extends Vue {
   // 远程数据方法
   @Prop({ default: () => ({}), type: Object }) remoteFuncs!: any;
 
-  $refs!: {
-    generateDialogForm: HTMLFormElement;
-  };
 
   created() {
     this.autoGenerateFormByBackend();
@@ -183,7 +184,6 @@ export default class SeniorSearchForm extends Vue {
         row.columns.push(date);
       } else if (option && option.type === 'select') {
         row.columns.push(select);
-        console.log(select);
       } else {
         row.columns.push(input);
       }