perf: 组件细节优化

BoBoooooo · Jan 2, 2021 · 019baf1 · 019baf1
1 parent fdfbcf0
commit 019baf1
Show file tree

Hide file tree

Showing 6 changed files with 60 additions and 24 deletions.
diff --git a/packages/crud-table/src/CrudTable.vue b/packages/crud-table/src/CrudTable.vue
@@ -201,7 +201,7 @@
                         :close_on_click_modal="dialogCloseOnClickModal"
                         :fullscreen="dialogFullscreen"
                         :width='dialogWidth'
-                        @btnonclick="formBtnOnClick">
+                        @btnOnClick="formBtnOnClick">
                         <template #dialogFooter>
                           <slot name="dialogFooter"></slot>
                         </template>
@@ -527,6 +527,21 @@ export default class CrudTable extends Vue {
   }
 
   created() {
+    if (!this.$PROCRUD.getTableDetail) {
+      this.$message.warning('请先设置getTableDetail方法,请求表格json');
+      this.tableConfig = {
+        columns: [{
+          prop: '',
+          label: '请先设置tableConfig',
+          minWidth: '100',
+          sortable: 'custom',
+          slotName: '',
+          align: 'center',
+          headerAlign: 'center',
+        }],
+      } as any;
+      return;
+    }
     // 请求表格设计json
     const promise = this.$PROCRUD.getTableDetail(this.tableDesignerName ? this.tableDesignerName : this.tableName);
     // 加载表格结构

diff --git a/packages/crud-table/src/GenerateFormDialog.vue b/packages/crud-table/src/GenerateFormDialog.vue
@@ -21,7 +21,7 @@
                   :setReadOnly="readOnly"
                   :remote="remoteFuncs"
                   :entity.sync="entity"
-                  @btnonclick="btnOnClick"
+                  @btnOnClick="btnOnClick"
                   :formTableConfig="formTableConfig" />
     <el-row type="flex"
             justify="end"

diff --git a/packages/form-designer/src/FormDesignerDialog.vue b/packages/form-designer/src/FormDesignerDialog.vue
@@ -96,23 +96,18 @@
         <el-header class="btn-bar" style="height: 60px;">
           <el-row :gutter="15">
             <!-- 对话框内动态表单 -->
-            <el-col :span="16">
+            <el-col :span="16" v-if="$PROCRUD.getTables">
               <GenerateForm
                 ref="generateDialogForm"
                 class="form"
                 v-if="visible"
+                hiddenDevModule
                 :value="formValues"
                 :data="formDesign"
                 :remote="remoteFuncs"
               />
             </el-col>
-            <el-col :span="8" style="text-align:right">
-              <el-button
-                type="text"
-                @click="btnSave_onClick"
-                :loading="btnSaveIsLoading"
-                >保存</el-button
-              >
+            <el-col :span="$PROCRUD.getTables ? 8 : 24" style="text-align:right">
               <el-button
                 type="text"
                 size="medium"
@@ -125,16 +120,24 @@
                 size="medium"
                 icon="el-icon-tickets"
                 @click="handleGenerateJson"
-                >JSON</el-button
+                >生成JSON</el-button
               >
               <el-button type="text" size="medium" icon="el-icon-delete" @click="handleClear">清空</el-button>
               <el-button
                 type="text"
                 size="medium"
                 icon="el-icon-form"
+                :disabled="!$PROCRUD.getTables"
                 @click="formVisible = true"
                 >自动绑定</el-button
               >
+              <el-button
+                type="text"
+                :disabled="!$PROCRUD.getTables"
+                @click="btnSave_onClick"
+                :loading="btnSaveIsLoading"
+                >保存</el-button
+              >
             </el-col>
           </el-row>
         </el-header>
@@ -233,7 +236,8 @@
         width="800px"
         :action="false"
       >
-        <el-select
+      <template v-if="allTables">
+          <el-select
           v-model="formKeys.tableName"
           filterable
           style="width:100%"
@@ -254,6 +258,12 @@
             @click="handleGenerateKey(true)"
             >自动生成表单</el-button
           >
+      </template>
+      <template v-else>
+        <p>
+          初始化时请先设置getTables方法
+        </p>
+      </template>
       </cus-dialog>
     </el-container>
   </el-dialog>
@@ -370,7 +380,7 @@ export default {
         success: [],
       },
       // 数据库所有表
-      allTables: [],
+      allTables: null,
     };
   },
   methods: {
@@ -571,11 +581,16 @@ export default {
       // 初始化右侧的配置区域
       this.widgetFormSelect = '';
       // 请求数据库所有表名
-      const { data } = await this.$PROCRUD.getTables();
-      this.allTables = data;
+      if (this.$PROCRUD.getTables) {
+        const { data } = await this.$PROCRUD.getTables();
+        this.allTables = data;
+      }
+
       // 请求对话框内的动态表单json
-      const res = await this.$PROCRUD.getFormDetail('dynamictables');
-      this.formDesign = JSON.parse(res.data.formJson);
+      if (this.$PROCRUD.getFormDetail) {
+        const res = await this.$PROCRUD.getFormDetail('dynamictables');
+        this.formDesign = JSON.parse(res.data.formJson);
+      }
       this.visible = true;
     },
     // 保存设计
@@ -700,7 +715,4 @@ export default {
 .form {
   margin-top: 6px;
 }
-.form >>> .dev-module{
-  display: none!important;
-}
 </style>
diff --git a/packages/form-designer/src/GenerateForm.vue b/packages/form-designer/src/GenerateForm.vue
@@ -11,7 +11,7 @@
 <template>
   <div class="table-form-wrapper">
       <!-- dev模式,支持直接修改表单,不需要可删除 -->
-      <div v-if="data.config && data.config.name && $store.getters.config && $store.getters.config.isDev === '1'" class="dev-module">
+      <div v-if="data.config && data.config.name && $store.getters.config && $store.getters.config.isDev === '1' && !hiddenDevModule" class="dev-module">
         <el-button type="text" @click="showFormDesignerDialog">当前表单: {{data.config.name}} [点此修改]</el-button>
         <FormDesignerDialog ref="formDesignerDialog"
                         tableName="dynamictables"
@@ -228,6 +228,13 @@ export default class GenerateForm extends Vue {
   })
   formTableConfig: any;
 
+  // 强制隐藏dev模式
+  @Prop({
+    type: Boolean,
+    default: false,
+  })
+  hiddenDevModule!: Boolean;
+
   models: any = {};
 
   rules: any = {};

diff --git a/packages/form-designer/src/componentsConfig.ts b/packages/form-designer/src/componentsConfig.ts
@@ -358,7 +358,7 @@ export const advanceComponents = [
   },
   {
     type: 'table',
-    name: '表格',
+    name: '子表格',
     icon: 'table',
     labelWidth: '',
     options: {

diff --git a/packages/table-designer/src/TableDesignerDialog.vue b/packages/table-designer/src/TableDesignerDialog.vue
@@ -1,8 +1,8 @@
 <!--
 @file 表格设计对话框
-@author ytyang
+@author BoBo
 @copyright BoBo
-@createDate 2018年12月8日19:28:09
+@createDate 2020年03月02日12:12:17
 -->
 <template>
   <!-- 对话框 -->
@@ -15,10 +15,12 @@
              append-to-body>
     <!-- 对话框内动态表单 -->
     <GenerateForm ref="generateDialogForm"
+                  hiddenDevModule
                   :value="formValues"
                   :entity.sync="entity"
                   :data="formDesign"
                   :remote="remoteFuncs"
+                  class="form"
                   style="float:left;width:50%" />
     <!-- 菜单栏 -->
     <MenuBar style="float:right"