[feature]{WidgetFormItem}: 修复事件冒泡bug

BoBoooooo · Mar 21, 2019 · cf8e874 · cf8e874
1 parent 082b6de
commit cf8e874
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 32 deletions.
diff --git a/src/components/CrudTable/components/GenerateFormDialog.vue b/src/components/CrudTable/components/GenerateFormDialog.vue
@@ -17,7 +17,7 @@
       <generate-form
         ref="generateForm"
         :data="jsonData"
-        :value="formValue"
+        :value="formValues"
         :entity.sync="models"
         :disabled="disabled"
       />
@@ -75,7 +75,7 @@ export default {
     },
     tableName: String,
     dialogStatus: String,
-    formValue: {
+    formValues: {
       type: Object,
       default: () => ({}),
     },
@@ -110,32 +110,37 @@ export default {
         });
     },
   },
-  created() {
-    // 如果select,radio,checkbox等组件为多选情况  后台返回逗号分隔字符串 => 数组
-    for (const row of this.jsonData.list) {
-      if (row.columns) {
-        for (const column of row.columns) {
-          const { list } = column;
-          if (Array.isArray(list)) {
-            list.forEach((citem) => {
-              if (citem.options.multiple) {
-                if (!Array.isArray(this.formValues[citem.model])
-                   && this.formValues[citem.model]) {
-                  this.formValues[citem.model] = this.formValues[citem.model].split(',');
-                }
+
+  watch: {
+    formValues: {
+      deep: true,
+      immediate: true,
+      handler() {
+        // 如果select,radio,checkbox等组件为多选情况  后台返回逗号分隔字符串 => 数组
+        for (const row of this.jsonData.list) {
+          if (row.columns) {
+            for (const column of row.columns) {
+              const { list } = column;
+              if (Array.isArray(list)) {
+                list.forEach((citem) => {
+                  if (citem.options.multiple) {
+                    if (!Array.isArray(this.formValues[citem.model])
+                      && this.formValues[citem.model]) {
+                      this.formValues[citem.model] = this.formValues[citem.model].split(',');
+                    }
+                  }
+                });
               }
-            });
+            }
+          } else if (row.options.multiple) {
+            if (!Array.isArray(this.formValues[row.model])
+                      && this.formValues[row.model]) {
+              this.formValues[row.model] = this.formValues[row.model].split(',');
+            }
           }
         }
-      } else if (row.options.multiple) {
-        if (!Array.isArray(this.formValues[row.model])
-                   && this.formValues[row.model]) {
-          this.formValues[row.model] = this.formValues[row.model].split(',');
-        }
-      }
-    }
-  },
-  watch: {
+      },
+    },
     dialogFormVisible(val) {
       this.visible = val;
     },
@@ -148,6 +153,7 @@ export default {
     },
   },
 }
+
 </script>
 <style lang="scss" scoped>
 

diff --git a/src/components/CrudTable/index.vue b/src/components/CrudTable/index.vue
@@ -52,7 +52,7 @@
     :disabled="disabled"
     :tableName="tableName"
     :dialogStatus="dialogStatus"
-    :formValue="formValue"
+    :formValues="formValues"
     @afterSave="Refresh"
     :jsonData="jsonData"
     :entity.sync="models"
@@ -82,7 +82,7 @@ export default {
     return {
       operation,
       models: {}, // 表单内部实体
-      formValue: {}, // 当前表单实体model
+      formValues: {}, // 当前表单实体model
       listQuery: {
         totalCount: null,
         pageSize: 10,
@@ -158,8 +158,8 @@ export default {
 
     New() {
       this.dialogStatus = 'create';
-      Object.keys(this.formValue).forEach((k) => {
-        this.formValue[k] = '';
+      Object.keys(this.formValues).forEach((k) => {
+        this.formValues[k] = '';
       });
       this.dialogFormVisible = true;
     },
@@ -185,13 +185,13 @@ export default {
     async Edit(id) {
       this.dialogStatus = 'update';
       const response = await this.crud('detail', this.tableName, { id });
-      this.formValue = response.data;
+      this.formValues = response.data;
       this.dialogFormVisible = true;
     },
     async Detail(id) {
       this.dialogStatus = 'update';
       const response = await this.crud('detail', this.tableName, { id });
-      this.formValue = response.data;
+      this.formValues = response.data;
       this.dialogFormVisible = true;
     },
   },

diff --git a/src/components/FormDesigner/WidgetFormItem.vue b/src/components/FormDesigner/WidgetFormItem.vue
@@ -4,7 +4,7 @@
     :class="{active: selectWidget.key == element.key, 'is_req': element.options.required}"
     :label="element.name"
     class="widget-view "
-    @click.native="handleSelectWidget(index)"
+    @click.native.stop="handleSelectWidget(index)"
     :label-width="element.name===''?'0px':''"
 
   >