新式表单支持事件内联与外联

Aaron
1 parent 35c37891
Showing 3 changed files with 59 additions and 8 deletions Show diff stats
examples/views/page/form-new/form-render.vue
examples/views/page/form-new/index.vue
examples/views/page/other.vue
@@ -8,14 +8,14 @@
           <!-- 表单分组标题 -->
           <el-col :class="titleClass || 'eagle-form__group-title'" v-if="item.group.title" :span="24">{{ item.group.title || item.group }}</el-col>
           <!-- 递归本组件 -->
-          <form-render :title-class="titleClass" :list="item.list" :model="itemKey ? model[itemKey] || {} : model" @item-change="onItemChange" @form-item-change="onFormItemChange" :itemKey="item.group.key"></form-render>
+          <form-render :title-class="titleClass" :list="item.list" :value="value" :model="itemKey ? model[itemKey] || {} : model" @item-change="onItemChange" @form-item-change="onFormItemChange" :itemKey="item.group.key" @item-update="onItemUpdate"></form-render>
         </el-row>
       </el-col>
       <!-- 正常无分组表单项 -->
       <el-col v-else :span="item.span || 12" :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 })"></component>
+          <component :is="item.type" :value="itemValue(item)" @input="v => onInput({ value: v, item })" v-on="bindItemEvent(item)"></component>
         </el-form-item>
       </el-col>
     </template>
@@ -28,6 +28,7 @@ export default {
   props: {
     list: Array,
     model: Object,
+    value: Object,
     itemKey: String,
     titleClass: String,
     contentClass: String,
@@ -48,7 +49,7 @@ export default {
     },
     /**
      * @description 组件有值输入时的事件
-     * @param {Object} data { value => '组件值'; item => '表单项配置' }
+     * @param {Object} data { value => 组件值; item => 表单项配置 }
      */
     onInput({ value, item }) {
       if (this.itemKey) {
@@ -75,7 +76,30 @@ export default {
      */
     onFormItemChange(value) {
       this.$emit('form-item-change', value);
-    }
+    },
+    /**
+     * @description 当表单项有手动更新时的事件
+     * @param {Any} 表单项值
+     */
+    onItemUpdate(value) {
+      this.$emit('item-update', value);
+    },
+    /**
+     * @description 绑定表单项事件
+     * @param {Object} item 表单项配置
+     * @returns {Function} 事件函数
+     */
+    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 }) });
+        } else {
+          return item.on
+        }
+      } else {
+        return undefined
+      }
+    },
   }
 }
 </script>
 <template>
   <el-form ref="form" size="small" :class="formClass" :model="formModel">
     {{ formModel }}
-    <form-render :title-class="titleClass" :content-class="contentClass" :list="formList" :model="model" @item-change="onItemChange" @form-item-change="onFormItemChange"></form-render>
+    <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>
     {{ list }}
   </el-form>
 </template>
 <script>
 import FormRender from './form-render';
-import { cloneDeep } from 'lodash';
+import { cloneDeep, set } from 'lodash';
 export default {
   name: 'FormNew',
@@ -97,6 +97,16 @@ export default {
       };
       setFormModelValue(Object.keys(value).map(key => ({ key, value: value[key] })));
       this.formModel = formModel;
+    },
+    /**
+     * @description 手动更新某一表单项的值
+     * @param {Object} { 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);
     }
   }
 }
@@ -56,13 +56,30 @@ export default {
                   {
                     group: { title: 'A栋', span: 24 },
                     list: [
-                      { type: 'el-input', label: '人数', key: 'anumber', span: 24 },
+                      { type: 'el-input-number', label: '人数', key: 'anumber', span: 24,
+                        on: {
+                          change(value) {
+                            console.log(value);
+                          }
+                        }
+                      },
                     ],
                   },
                   {
                     group: { title: 'B栋', span: 24, key: 'bside' },
                     list: [
-                      { type: 'el-input', label: '人数', key: 'bnumber', span: 24 },
+                      { type: 'el-input-number', label: '人数', key: 'bnumber', span: 24,
+                        on({ model, update }) {
+                          return {
+                            change(value) {
+                              if (value === 18 && model.age === 18) {
+                                // TODO update后本值不变的BUG
+                                update({ name: 'location.areaName', value: 'haha' });
+                              }
+                            }
+                          }
+                        }
+                      },
                     ],
                   }
                 ],
	@@ -56,13 +56,30 @@ export default {		@@ -56,13 +56,30 @@ export default {
56	{	56	{
57	group: { title: 'A栋', span: 24 },	57	group: { title: 'A栋', span: 24 },
58	list: [	58	list: [
59	- { type: 'el-input', label: '人数', key: 'anumber', span: 24 },	59	+ { type: 'el-input-number', label: '人数', key: 'anumber', span: 24,
		60	+ on: {
		61	+ change(value) {
		62	+ console.log(value);
		63	+ }
		64	+ }
		65	+ },
60	],	66	],
61	},	67	},
62	{	68	{
63	group: { title: 'B栋', span: 24, key: 'bside' },	69	group: { title: 'B栋', span: 24, key: 'bside' },
64	list: [	70	list: [
65	- { type: 'el-input', label: '人数', key: 'bnumber', span: 24 },	71	+ { type: 'el-input-number', label: '人数', key: 'bnumber', span: 24,
		72	+ on({ model, update }) {
		73	+ return {
		74	+ change(value) {
		75	+ if (value === 18 && model.age === 18) {
		76	+ // TODO update后本值不变的BUG
		77	+ update({ name: 'location.areaName', value: 'haha' });
		78	+ }
		79	+ }
		80	+ }
		81	+ }
		82	+ },
66	],	83	],
67	}	84	}
68	],	85	],