perf: @0.2.3 优化表单设计器组件交互性能

BoBoooooo · Nov 9, 2020 · 7651aa8 · 7651aa8
1 parent 94f00e3
commit 7651aa8
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 32 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "element-pro-crud",
-  "version": "0.2.2",
+  "version": "0.2.3",
   "main": "lib/ProCrud.umd.min.js",
   "files": [
     "lib",

diff --git a/packages/form-designer/src/GenerateForm.vue b/packages/form-designer/src/GenerateForm.vue
@@ -56,7 +56,7 @@
                 <GenerateFormItem v-else
                                   @selection="getTableSelection($event,citem)"
                                   :key="citem.key"
-                                  :models.sync="models"
+                                  :models="models"
                                   :remote="remote"
                                   :rules="rules"
                                   :widget="citem"
@@ -108,7 +108,7 @@
         <!-- 普通行布局方式 -->
         <template v-else>
           <GenerateFormItem :key="item.key"
-                            :models.sync="models"
+                            :models="models"
                             :remote="remote"
                             @selection="getTableSelection($event,item)"
                             :widget="item"
@@ -147,8 +147,8 @@
 import {
   Component, Vue, Prop, Watch,
 } from 'vue-property-decorator';
-import { DML, crud } from '@/api/public/crud';
 import GenerateFormItem from './GenerateFormItem.vue';
+import _cloneDeep from 'lodash/cloneDeep';
 
 @Component({
   components: {
@@ -335,23 +335,12 @@ export default class GenerateForm extends Vue {
     }
   }
 
-  // 多选情况下数组转字符串
-  formValueToString() {
-    const model = { ...this.models };
-    Object.keys(model).forEach((k) => {
-      if (Array.isArray(model[k])) {
-        model[k] = model[k].toString();
-      }
-    });
-    return model;
-  }
-
   // 先验证再获取表单内容
   getData() {
     return new Promise((resolve, reject) => {
       this.$refs.generateForm.validate((valid) => {
         if (valid) {
-          resolve(this.formValueToString());
+          resolve(_cloneDeep(this.models));
         } else {
           // 校验失败时focus到文本框
           // 注意此处没有考虑textarea的情况,多行文本会失败
@@ -372,7 +361,7 @@ export default class GenerateForm extends Vue {
 
   // 不经过验证直接获取表单内容
   getDataWithoutValidate() {
-    return new Promise(resolve => resolve(this.formValueToString()));
+    return new Promise(resolve => resolve(_cloneDeep(this.models)));
   }
 
   // 生成的按钮点击
@@ -405,7 +394,6 @@ export default class GenerateForm extends Vue {
 
   @Watch('value', {
     deep: true,
-    immediate: true,
   })
   valueOnChange(val) {
     this.$nextTick(() => {

diff --git a/packages/form-designer/src/GenerateFormItem.vue b/packages/form-designer/src/GenerateFormItem.vue
@@ -343,7 +343,7 @@ export default class GenerateFormItem extends Vue {
   readOnly: any;
 
   // 当前组件对象
-  dataModel: any = '';
+  dataModel: any = this.models[this.widget.model];
 
   copyOption: any = []; // 备份一份初始选项
 
@@ -681,25 +681,24 @@ export default class GenerateFormItem extends Vue {
     this.$emit('selection', selection);
   }
 
-  @Watch('dataModel', {
-    // deep: true,
-  })
+  @Watch('dataModel')
   dataModelHandler(val) {
-    this.$emit('update:models', {
-      ...this.models,
-      [this.widget.model]: val,
-    });
+    const value = Array.isArray(val) ? val.join(',') : val;
+    this.$set(this.models, this.widget.model, value);
   }
 
   @Watch('models', {
-    // deep: true,
+    deep: true,
   })
   modelsHandler(val) {
-    if (this.widget.options.multiple || 'cascader,checkbox'.includes(this.widget.type)) {
-      const value = val[this.widget.model];
-      this.dataModel = typeof value === 'string' ? value.split(',') : value;
-    } else {
-      this.dataModel = val[this.widget.model];
+    const updateVal = val[this.widget.model];
+    if (updateVal !== this.dataModel) {
+      if (this.widget.options.multiple || 'cascader,checkbox'.includes(this.widget.type)) {
+        const value = val[this.widget.model];
+        this.dataModel = typeof value === 'string' ? value.split(',') : value;
+      } else {
+        this.dataModel = val[this.widget.model];
+      }
     }
   }