perf: 细节优化,修改演示demo

BoBoooooo · Jan 7, 2021 · f277a96 · f277a96
1 parent 4c8c127
commit f277a96
Show file tree

Hide file tree

Showing 8 changed files with 322 additions and 1,020 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "element-pro-crud",
-  "version": "0.8.0-2",
+  "version": "0.8.0-5",
   "main": "lib/ProCrud.umd.min.js",
   "files": [
     "lib",

diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/src/component/crud-table/src/CrudTable.vue b/src/component/crud-table/src/CrudTable.vue
@@ -15,11 +15,11 @@
         <h4>{{tableTitle}}</h4>
       </div>
       <!--dev模式可直接编辑表格-->
-      <div v-if="$store.getters && $store.getters.config && $store.getters.config.isDev === '1'" class="dev-module">
+      <!-- <div v-if="$store.getters && $store.getters.config && $store.getters.config.isDev === '1'" class="dev-module">
         <el-button type="text" @click="showTableDesigner">当前表格: {{this.tableDesignerName || this.tableName}}  [点此修改]</el-button>
         <TableDesigner ref="TableDesigner"
                          @after-save="tableOnSave"/>
-      </div>
+      </div> -->
       <!-- table右上角按钮 -->
       <div class="btn-bar">
         <slot name="btnBarPrevBtn" />

diff --git a/src/component/form-designer/src/FormDesigner.vue b/src/component/form-designer/src/FormDesigner.vue
@@ -60,14 +60,14 @@
           <el-row :gutter="15">
             <!-- 对话框内动态表单 -->
             <el-col :span="12">
-              <el-form :inline="true" :model="formValues" class="inline-form">
-                <el-form-item label="名称">
-                  <el-select v-if="allTables" filterable allow-create v-model="formValues.tableName" placeholder="名称">
+              <el-form size="small" :inline="true" :model="formValues" class="inline-form">
+                <el-form-item label="表单名">
+                  <el-select  v-if="allTables" filterable allow-create v-model="formValues.tableName" placeholder="名称">
                     <el-option v-for="(item, index) in allTables" :label="item.label" :value="item.value" :key="index"></el-option>
                   </el-select>
                   <el-input v-else v-model="formValues.tableName" placeholder="请输入表单名称"></el-input>
                 </el-form-item>
-                <el-form-item label="使用位置">
+                <el-form-item>
                   <el-input v-model="formValues.position" placeholder="使用位置"></el-input>
                 </el-form-item>
               </el-form>
@@ -78,7 +78,7 @@
               <el-button type="text" size="small" icon="el-icon-tickets" @click="handleGenerateJson">生成JSON</el-button>
               <el-button type="text" size="small" icon="el-icon-document" @click="handleGenerateCode">生成代码</el-button>
               <el-button type="text" size="small" icon="el-icon-delete" @click="handleClear">清空</el-button>
-              <el-button type="text" size="small" icon="el-icon-form" :disabled="!allTables || !getFormKey" @click="formVisible = true">自动绑定</el-button>
+              <el-button type="text" size="small" icon="el-icon-form" :disabled="!(allTables && getFormKey)" @click="formVisible = true">自动绑定</el-button>
               <slot name="custom-btn"></slot>
             </el-col>
           </el-row>
@@ -290,14 +290,14 @@ export default {
   methods: {
     // 返回当前表单设计器对象
     getData() {
-      return {
-        ...this.formValues,
-        formJson: JSON.stringify(this.widgetForm),
-      };
+      this.widgetForm.name = this.formValues.tableName;
+      this.widgetForm.position = this.formValues.position;
+      return this.widgetForm;
     },
     setJSON(json) {
       this.widgetForm = json;
-
+      this.$set(this.formValues, 'tableName', json.name);
+      this.$set(this.formValues, 'position', json.position);
       if (json.list.length > 0) {
         [this.widgetFormSelect] = json.list;
       }

diff --git a/src/component/table-designer/src/MenuBar.vue b/src/component/table-designer/src/MenuBar.vue
@@ -61,8 +61,6 @@ export default {
     return {
       // 选中的表名
       selectedForm: null,
-      // 所有动态表单json
-      formList: [],
     };
   },
   props: {
@@ -77,11 +75,11 @@ export default {
       type: Number,
       default: 140,
     },
-  },
-  created() {
-    this.$PROCRUD.crud(DML.SELECT, 'form').then((res) => {
-      this.formList = res.data.list;
-    });
+    // formList
+    formList: {
+      type: Array,
+      default: () => [],
+    },
   },
   methods: {
     autoSetSearchOption() {