From 2db4f03a6f5111d97fa7f3304fbb635b0137f63c Mon Sep 17 00:00:00 2001
From: Aaron <427787340@qq.com>
Date: Mon, 23 Dec 2019 18:05:29 +0800
Subject: [PATCH] 优化表单动态更新赋值

---
 examples/views/page/form-new/form-render.vue | 11 ++++++-----
 examples/views/page/form-new/index.vue       | 74 ++++++++++++++++++++++++++++++++++++++++++++------------------------------
 examples/views/page/form-new/util.js         | 68 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 examples/views/page/other.vue                | 40 ++++++++++++++++++++++++----------------
 4 files changed, 142 insertions(+), 51 deletions(-)
 create mode 100644 examples/views/page/form-new/util.js

diff --git a/examples/views/page/form-new/form-render.vue b/examples/views/page/form-new/form-render.vue
index a8d8bf9..c1ad65c 100644
--- a/examples/views/page/form-new/form-render.vue
+++ b/examples/views/page/form-new/form-render.vue
@@ -1,10 +1,10 @@
 <template>
   <!-- 在row上使用flex，防止表单组件大小不一导致错位 -->
-  <el-row type="flex" style="flex-wrap: wrap;" :class="contentClass || 'eagle-form__group-content'">
+  <el-row type="flex" style="flex-wrap: wrap;width: 100%;" :class="contentClass || 'eagle-form__group-content'">
     <template v-for="(item, index) in list">
       <!-- 表单项有设置分组时 -->
-      <el-col v-if="item.group && item.list" :key="index" :span="item.group.span || 24">
-        <el-row type="flex" style="flex-wrap: wrap;">
+      <el-col v-if="item.group && item.list" :key="index" :span="item.group.span || span">
+        <el-row type="flex" style="flex-wrap: wrap;width: 100%;">
           <!-- 表单分组标题 -->
           <el-col :class="titleClass || 'eagle-form__group-title'" v-if="item.group.title" :span="24">{{ item.group.title || item.group }}</el-col>
           <!-- 递归本组件 -->
@@ -12,7 +12,7 @@
         </el-row>
       </el-col>
       <!-- 正常无分组表单项 -->
-      <el-col v-else :span="item.span || 12" :key="index">
+      <el-col v-else :span="item.span || span" :key="index">
         <el-form-item :label="item.label" :label-width="item.labelWidth || '120px'" :prop="item.fullKey" :rules="item.rules">
           <!-- 自定义组件 -->
           <component :is="item.type" :value="itemValue(item)" @input="v => onInput({ value: v, item })" v-on="bindItemEvent(item)"></component>
@@ -32,6 +32,7 @@ export default {
     itemKey: String,
     titleClass: String,
     contentClass: String,
+    span: Number,
   },
   methods: {
     /**
@@ -92,7 +93,7 @@ export default {
     bindItemEvent(item) {
       if (item.on) {
         if (typeof item.on === 'function') {
-          return item.on({ model: this.value, update: ({ name, value }) => this.$emit('item-update', { name, value }) });
+          return item.on({ model: this.value, update: e => this.$emit('item-update', e) });
         } else {
           return item.on
         }
diff --git a/examples/views/page/form-new/index.vue b/examples/views/page/form-new/index.vue
index ae82625..9d287fb 100644
--- a/examples/views/page/form-new/index.vue
+++ b/examples/views/page/form-new/index.vue
@@ -1,14 +1,15 @@
 <template>
   <el-form ref="form" size="small" :class="formClass" :model="formModel">
     {{ formModel }}
-    <form-render :title-class="titleClass" :content-class="contentClass" :list="formList" :value="model" :model="model" @item-change="onItemChange" @form-item-change="onFormItemChange" @item-update="onItemUpdate"></form-render>
+    <form-render :title-class="titleClass" :content-class="contentClass" :list="formList" :value="model" :model="model" :span="span"
+      @item-change="onItemChange" @form-item-change="onFormItemChange" @item-update="onItemUpdate"></form-render>
     {{ list }}
   </el-form>
 </template>
 
 <script>
 import FormRender from './form-render';
-import { cloneDeep, set } from 'lodash';
+import { cloneDeep, set } from './util';
 
 export default {
   name: 'FormNew',
@@ -19,40 +20,49 @@ export default {
     formClass: String,
     titleClass: String,
     contentClass: String,
+    span: {
+      type: Number,
+      default: 24
+    }
   },
   data() {
     return {
       model: {},
       formModel: {},
+      formList: []
     }
   },
   watch: {
-    value(val = {}) {
-      this.model = val;
-      this.setFormModel(val)
+    value: {
+      handler(val = {}) {
+        this.model = val;
+        this.setFormModel(val)
+      },
+      immediate: true
     },
-  },
-  computed: {
-    formList() {
-      // 深度克隆传入的列表，避免原始值被修改
-      const newList = cloneDeep(this.list);
-      // 生成列表值的全路径key，即列表项为对象时，对象内的key与上一级的key合并作为全路径key
-      const generateFullKey = (list, parentKey) => {
-        list.forEach(item => {
-          if (item.group && item.list) {
-            if (item.group.key) {
-              item.fullKey = `${parentKey ? `${parentKey}-${item.group.key}` : item.group.key}`;
+    list: {
+      handler(val) {
+        // 深度克隆传入的列表，避免原始值被修改
+        const newList = cloneDeep(this.list);
+        // 生成列表值的全路径key，即列表项为对象时，对象内的key与上一级的key合并作为全路径key
+        const generateFullKey = (list, parentKey) => {
+          list.forEach(item => {
+            if (item.group && item.list) {
+              if (item.group.key) {
+                item.fullKey = `${parentKey ? `${parentKey}-${item.group.key}` : item.group.key}`;
+              } else {
+                item.fullKey = item.key;
+              }
+              generateFullKey(item.list, item.fullKey);
             } else {
-              item.fullKey = item.key;
+              item.fullKey = `${parentKey ? `${parentKey}-${item.key}` : item.key}`;
             }
-            generateFullKey(item.list, item.fullKey);
-          } else {
-            item.fullKey = `${parentKey ? `${parentKey}-${item.key}` : item.key}`;
-          }
-        });
-      };
-      generateFullKey(newList);
-      return newList;
+          });
+        };
+        generateFullKey(newList);
+        this.formList = newList;
+      },
+      immediate: true
     }
   },
   methods: {
@@ -100,13 +110,17 @@ export default {
     },
     /**
      * @description 手动更新某一表单项的值
-     * @param {Object} { name => 表单项key,可嵌套; value => 更新的值 }
+     * @param {Object} param 需要更新的参数对象或者对象数组 { name => 表单项key,可嵌套; value => 更新的值 }
      * @example { name: 'a.b.c', value: 123 }
      */
-    onItemUpdate({ name, value }) {
-      const newModel = cloneDeep(this.model);
-      set(newModel, name, value);
-      this.$emit('input', newModel);
+    onItemUpdate(param) {
+      this.$nextTick(() => {
+        const newModel = cloneDeep(this.model);
+        Object.entries(param).forEach(entry => {
+          set(newModel, entry[0], entry[1]);
+        });
+        this.$emit('input', newModel);
+      });
     }
   }
 }
diff --git a/examples/views/page/form-new/util.js b/examples/views/page/form-new/util.js
new file mode 100644
index 0000000..262aea3
--- /dev/null
+++ b/examples/views/page/form-new/util.js
@@ -0,0 +1,68 @@
+export const cloneDeep = (obj) => {
+  if (typeof obj !== 'object') {
+    return obj;
+  }
+  if (!obj) {
+    return obj;
+  }
+  if (obj instanceof  Date) {
+    return new Date(obj);
+  } 
+  if (obj instanceof  RegExp) {
+    return new RegExp(obj);
+  } 
+  if (obj instanceof  Function) {
+    return obj;
+  } 
+  let newObj;
+  if (obj instanceof Array) {
+    newObj = [];
+    for(let i = 0, len = obj.length; i < len; i++){
+      newObj.push(cloneDeep(obj[i]));
+    }
+    return newObj;
+  }
+  newObj = {};
+  for(let key in obj) {
+    if (obj.hasOwnProperty(key)) {
+      if (typeof obj[key] !== 'object') {
+        newObj[key] = obj[key];
+      } else {
+        newObj[key] = cloneDeep(obj[key]);
+      }
+    }
+  }
+  return newObj;
+};
+
+export const get = (obj, dotSeparatedKeys) => {
+  if (dotSeparatedKeys !== undefined && typeof dotSeparatedKeys !== 'string') return undefined;
+  if (typeof obj !== 'undefined' && typeof dotSeparatedKeys === 'string') {
+    // split on ".", "[", "]", "'", """ and filter out empty elements
+    const splitRegex = /[.\[\]'"]/g; // eslint-disable-line no-useless-escape
+    const pathArr = dotSeparatedKeys.split(splitRegex).filter(k => k !== '');
+
+    // eslint-disable-next-line no-param-reassign, no-confusing-arrow
+    obj = pathArr.reduce((o, key) => (o && o[key] !== undefined ? o[key] : undefined), obj);
+  }
+  return obj;
+};
+
+export const set = (obj, dotSeparatedKeys, value) => {
+  const splitRegex = /[.\[\]'"]/g;
+  const pathArr = dotSeparatedKeys.split(splitRegex).filter(k => k !== '');
+  const key = pathArr.pop();
+  pathArr.reduce((o, k) => {
+    if (o && o[k] === undefined || o[k] === null) {
+      o[k] = !isNaN(Number(key)) ? [] : {}
+    }
+    return o[k]
+  }, obj)[key] = value
+  // pathArr.reduce((o, key) => (o && o[key] !== 'undefined' ? o[key] : undefined), obj)[key] = value
+};
+
+export default {
+  cloneDeep,
+  get,
+  set
+}
\ No newline at end of file
diff --git a/examples/views/page/other.vue b/examples/views/page/other.vue
index 56e8e1f..299eab5 100644
--- a/examples/views/page/other.vue
+++ b/examples/views/page/other.vue
@@ -15,7 +15,7 @@
     <p>这是一个非markdown页面</p>
     <pre>{{ model }}</pre>
     <el-button size="mini" @click="handleGetValue">校验</el-button>
-    <eg-form ref="form" v-model="model" :list="option.list" @validate="onValidate" form-class="custom-form" title-class="custom-title" content-class="custom-content"></eg-form>
+    <eg-form ref="form" v-model="model" :list="option.list" @validate="onValidate" :span="12" form-class="custom-form" title-class="custom-title" content-class="custom-content"></eg-form>
   </div>
 </template>
 
@@ -27,36 +27,44 @@ export default {
   components: { EgForm },
   data() {
     return {
-      model: {},
+      model: {
+        name: 'name',
+        location: {
+          areaName: 'hahhhahaa',
+        },
+      },
       option: {
         list: [
           {
-            group: { title: '基础信息', span: 12 },
+            group: { title: '基础信息' },
             list: [
               { type: 'el-input', label: '名称', key: 'name' },
               { type: 'el-input-number', label: '年龄', key: 'age' },
             ],
           },
           {
-            group: { title: '住址', span: 24, key: 'location' },
+            group: { title: '' },
+          },
+          {
+            group: { title: '住址', key: 'location', span: 24 },
             list: [
               { type: 'el-input', label: '地址简称', key: 'locationMin' },
               {
-                group: { span: 12, key: 'district' },
+                group: { key: 'district' },
                 list: [
-                  { type: 'el-input', label: '省', key: 'province', span: 24, rules: [{ required: true, message: '请输入省' }] },
-                  { type: 'el-input', label: '市', key: 'city', span: 24 },
+                  { type: 'el-input', label: '省', key: 'province', rules: [{ required: true, message: '请输入省' }], span: 12 },
+                  { type: 'el-input', label: '市', key: 'city', span: 12 },
                 ],
               },
               {
-                group: { title: '小区信息', span: 24 },
+                group: { title: '小区信息' },
                 list: [
-                  { type: 'el-input', label: '小区名', key: 'areaName', span: 24 },
-                  { type: 'el-input', label: '门牌号', key: 'homeNum', span: 24 },
+                  { type: 'el-input', label: '小区名', key: 'areaName', span: 12 },
+                  { type: 'el-input', label: '门牌号', key: 'homeNum', span: 12 },
                   {
-                    group: { title: 'A栋', span: 24 },
+                    group: { title: 'A栋' },
                     list: [
-                      { type: 'el-input-number', label: '人数', key: 'anumber', span: 24,
+                      { type: 'el-input-number', label: '人数', key: 'anumber',
                         on: {
                           change(value) {
                             console.log(value);
@@ -66,15 +74,15 @@ export default {
                     ],
                   },
                   {
-                    group: { title: 'B栋', span: 24, key: 'bside' },
+                    group: { title: 'B栋', key: 'bside' },
                     list: [
-                      { type: 'el-input-number', label: '人数', key: 'bnumber', span: 24,
+                      { type: 'el-input-number', label: '人数', key: 'bnumber',
                         on({ model, update }) {
                           return {
                             change(value) {
                               if (value === 18 && model.age === 18) {
-                                // TODO update后本值不变的BUG
-                                update({ name: 'location.areaName', value: 'haha' });
+                                console.log(model)
+                                update({ 'location.areaName': 'hehe', name: 'aaa', 'text.0': 'abc', 'ttt.0': 'abc' });
                               }
                             }
                           }
--
libgit2 0.21.0