From 35c37891c3192ed7fe12449960675de991579827 Mon Sep 17 00:00:00 2001
From: Aaron <427787340@qq.com>
Date: Thu, 19 Dec 2019 14:04:30 +0800
Subject: [PATCH] 调整新式表单逻辑

---
 examples/views/page/form-new/form-render.vue |  81 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 examples/views/page/form-new/index.vue       | 103 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 examples/views/page/form/form-render.vue     |  56 --------------------------------------------------------
 examples/views/page/form/index.vue           |  86 --------------------------------------------------------------------------------------
 examples/views/page/other.vue                |  18 +++++++++++++++---
 5 files changed, 199 insertions(+), 145 deletions(-)
 create mode 100644 examples/views/page/form-new/form-render.vue
 create mode 100644 examples/views/page/form-new/index.vue
 delete mode 100644 examples/views/page/form/form-render.vue
 delete mode 100644 examples/views/page/form/index.vue

diff --git a/examples/views/page/form-new/form-render.vue b/examples/views/page/form-new/form-render.vue
new file mode 100644
index 0000000..12ce754
--- /dev/null
+++ b/examples/views/page/form-new/form-render.vue
@@ -0,0 +1,81 @@
+<template>
+  <!-- 在row上使用flex，防止表单组件大小不一导致错位 -->
+  <el-row type="flex" style="flex-wrap: wrap;" :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 :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>
+        </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>
+        </el-form-item>
+      </el-col>
+    </template>
+  </el-row>
+</template>
+
+<script>
+export default {
+  name: 'form-render',
+  props: {
+    list: Array,
+    model: Object,
+    itemKey: String,
+    titleClass: String,
+    contentClass: String,
+  },
+  methods: {
+    /**
+     * @description 根据表单项的key查询该值
+     * @param {Object} item 表单项配置
+     * @returns {Any} 返回值
+     */
+    itemValue(item) {
+      if (this.itemKey) { // 如果存在itemKey，即当前项位于嵌套分组内，查询分组名下对应key的值
+        const groupItem = this.model[this.itemKey] || {};
+        return groupItem[item.key];
+      } else { // 否则即意味着不在分组内，直接查询model下对应key的值
+        return this.model[item.key];
+      }
+    },
+    /**
+     * @description 组件有值输入时的事件
+     * @param {Object} data { value => '组件值'; item => '表单项配置' }
+     */
+    onInput({ value, item }) {
+      if (this.itemKey) {
+        this.$emit('item-change', { [this.itemKey]: { ...this.model[this.itemKey], [item.key]: value } });
+      } else {
+        this.$emit('item-change', { [item.key]: value });
+      }
+      this.$emit('form-item-change', { [item.fullKey]: value });
+    },
+    /**
+     * @description 当表单项有改动时的事件
+     * @param {Any} 表单项值
+     */
+    onItemChange(value) {
+      if (this.itemKey) {
+        this.$emit('item-change', { [this.itemKey]: { ...this.model[this.itemKey], ...value } });
+      } else {
+        this.$emit('item-change', value);
+      }
+    },
+    /**
+     * @description 当表单项校验值有改动时的事件
+     * @param {Any} 表单项校验值
+     */
+    onFormItemChange(value) {
+      this.$emit('form-item-change', value);
+    }
+  }
+}
+</script>
diff --git a/examples/views/page/form-new/index.vue b/examples/views/page/form-new/index.vue
new file mode 100644
index 0000000..118bf5a
--- /dev/null
+++ b/examples/views/page/form-new/index.vue
@@ -0,0 +1,103 @@
+<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>
+    {{ list }}
+  </el-form>
+</template>
+
+<script>
+import FormRender from './form-render';
+import { cloneDeep } from 'lodash';
+
+export default {
+  name: 'FormNew',
+  components: { FormRender },
+  props: {
+    value: Object,
+    list: Array,
+    formClass: String,
+    titleClass: String,
+    contentClass: String,
+  },
+  data() {
+    return {
+      model: {},
+      formModel: {},
+    }
+  },
+  watch: {
+    value(val = {}) {
+      this.model = val;
+      this.setFormModel(val)
+    },
+  },
+  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}`;
+            } else {
+              item.fullKey = item.key;
+            }
+            generateFullKey(item.list, item.fullKey);
+          } else {
+            item.fullKey = `${parentKey ? `${parentKey}-${item.key}` : item.key}`;
+          }
+        });
+      };
+      generateFullKey(newList);
+      return newList;
+    }
+  },
+  methods: {
+    /**
+     * @description 表单项值变化
+     * @param {Object} item 表单项值对象
+     */
+    onItemChange(item) {
+      this.$emit('input', { ...this.model, ...item });
+    },
+    /**
+     * @description 表单相校验值变化
+     * @param {Object} item 表单项校验值对象
+     */
+    onFormItemChange(item) {
+      this.formModel = { ...this.formModel, ...item };
+    },
+    /**
+     * @description 校验表单
+     */
+    validate() {
+      this.$refs.form.validate(valid => {
+        this.$emit("validate", valid);
+      });
+    },
+    /**
+     * @description 根据表单值设置表单校验值
+     * @param {Object} value 表单值
+     */
+    setFormModel(value) {
+      let formModel = {};
+      // 递归深度解析表单值，将表单值扁平化为一层的对象并设置为表单校验值对象
+      const setFormModelValue = (list, parentKey) => {
+        list.forEach(item => {
+          item.fullKey = `${parentKey ? `${parentKey}-${item.key}` : item.key}`;
+          if (item.value instanceof Object) {
+            setFormModelValue(Object.keys(item.value).map(key => ({ key, value: item.value[key] })), item.fullKey);
+          } else {
+            formModel[item.fullKey] = item.value;
+          }
+        });
+      };
+      setFormModelValue(Object.keys(value).map(key => ({ key, value: value[key] })));
+      this.formModel = formModel;
+    }
+  }
+}
+</script>
diff --git a/examples/views/page/form/form-render.vue b/examples/views/page/form/form-render.vue
deleted file mode 100644
index c17e420..0000000
--- a/examples/views/page/form/form-render.vue
+++ /dev/null
@@ -1,56 +0,0 @@
-<template>
-  <el-row :gutter="15" type="flex" style="flex-wrap: wrap;">
-    <template v-for="(item, index) in list">
-      <el-col v-if="item.group && item.list" :key="index" :span="item.group.span || 24">
-        <el-row :gutter="15" type="flex" style="flex-wrap: wrap;">
-          <el-col v-if="item.group.title" :span="24">{{ item.group.title || item.group }}</el-col>
-          <form-render :list="item.list" :model="itemKey ? model[itemKey] || {} : model" @item-change="onItemChange" @form-item-change="onFormItemChange" :itemKey="item.group.key"></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 => handleInput({ value: v, item })"></component>
-        </el-form-item>
-      </el-col>
-    </template>
-  </el-row>
-</template>
-
-<script>
-export default {
-  name: 'form-render',
-  props: {
-    list: Array,
-    model: Object,
-    itemKey: String,
-  },
-  methods: {
-    itemValue({ item }) {
-      if (this.itemKey) {
-        const groupItem = this.model[this.itemKey] || {};
-        return groupItem[item.key];
-      } else {
-        return this.model[item.key];
-      }
-    },
-    handleInput({ value, item }) {
-      if (this.itemKey) {
-        this.$emit('item-change', { [this.itemKey]: { ...this.model[this.itemKey], [item.key]: value } });
-      } else {
-        this.$emit('item-change', { [item.key]: value });
-      }
-      this.$emit('form-item-change', { [item.fullKey]: value });
-    },
-    onItemChange(value) {
-      if (this.itemKey) {
-        this.$emit('item-change', { [this.itemKey]: { ...this.model[this.itemKey], ...value } });
-      } else {
-        this.$emit('item-change', value);
-      }
-    },
-    onFormItemChange(value) {
-      this.$emit('form-item-change', value);
-    }
-  }
-}
-</script>
\ No newline at end of file
diff --git a/examples/views/page/form/index.vue b/examples/views/page/form/index.vue
deleted file mode 100644
index 9375d3e..0000000
--- a/examples/views/page/form/index.vue
+++ /dev/null
@@ -1,86 +0,0 @@
-<template>
-  <el-form ref="form" size="small" :model="formModel">
-    {{ formModel }}
-    <form-render :list="formList" :model="model" @item-change="onItemChange" @form-item-change="onFormItemChange"></form-render>
-  </el-form>
-</template>
-
-<script>
-import FormRender from './form-render';
-
-export default {
-  components: { FormRender },
-  props: {
-    value: Object,
-    list: Array,
-  },
-  data() {
-    return {
-      model: {},
-      formModel: {}
-    }
-  },
-  watch: {
-    value(val) {
-      const data = val || {};
-      this.model = data;
-      let formModel = {};
-      const setFormModelValue = (list, parentKey) => {
-        list.forEach(item => {
-          item.fullKey = `${parentKey ? `${parentKey}-${item.key}` : item.key}`;
-          if (item.value instanceof Object) {
-            setFormModelValue(Object.keys(item.value).map(key => ({ key, value: item.value[key] })), item.fullKey);
-          } else {
-            if (item.fullKey) {
-              formModel[item.fullKey] = item.value;
-            }
-          }
-        });
-      };
-      setFormModelValue(Object.keys(data).map(key => ({ key, value: data[key] })));
-      this.formModel = formModel;
-    },
-  },
-  computed: {
-    formList() {
-      const newList = [...new Set(this.list)]
-      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 = `${parentKey ? `${parentKey}-${item.key}` : item.key}`;
-          }
-        });
-      };
-      generateFullKey(newList);
-      return newList;
-    }
-  },
-  methods: {
-    // 表单项值变化
-    onItemChange(item) {
-      this.$emit('input', { ...this.model, ...item });
-    },
-    // 表单相校验值变化
-    onFormItemChange(item) {
-      this.formModel = { ...this.formModel, ...item };
-    },
-    // 校验表单
-    validate() {
-      this.$refs.form.validate(valid => {
-        this.$emit("validate", valid);
-      });
-    },
-  }
-}
-</script>
-
-<style>
-
-</style>
\ No newline at end of file
diff --git a/examples/views/page/other.vue b/examples/views/page/other.vue
index 7704acc..9539126 100644
--- a/examples/views/page/other.vue
+++ b/examples/views/page/other.vue
@@ -1,14 +1,26 @@
+<style>
+.custom-form {
+  background: #cfc;
+}
+.custom-title {
+  background: #ccf;
+}
+.custom-content {
+  background: #fcc;
+}
+</style>
+
 <template>
   <div>
     <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"></eg-form>
+    <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>
   </div>
 </template>
 
 <script>
-import EgForm from './form';
+import EgForm from './form-new';
 
 export default {
   name: 'other',
@@ -95,4 +107,4 @@ export default {
     }
   }
 }
-</script>
\ No newline at end of file
+</script>
--
libgit2 0.21.0