From 61296e41448f7fd3697f2645977d114fe6566dd1 Mon Sep 17 00:00:00 2001
From: Aaron.Liu <427787340@qq.com>
Date: Mon, 17 Jun 2019 02:02:39 +0800
Subject: [PATCH] 重构form组件

---
 examples/views/index.vue |  51 +++++++++++++++++++++++++++++++++++++++++++++++----
 packages/cform/index.vue | 271 -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
 packages/form/index.vue  | 271 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 packages/index.js        |   5 +++--
 4 files changed, 321 insertions(+), 277 deletions(-)
 delete mode 100644 packages/cform/index.vue
 create mode 100644 packages/form/index.vue

diff --git a/examples/views/index.vue b/examples/views/index.vue
index a8349b9..7fcdf1d 100644
--- a/examples/views/index.vue
+++ b/examples/views/index.vue
@@ -36,7 +36,7 @@
     </div>
     <div class="cpt-title">下拉选择 eagle-select</div>
     <div class="cpt-content">
-      <eagle-select v-model="selectValue" :dataSource="[{ label: '选项A', value: 'A' }, { label: '选项B', value: 'B' }]"></eagle-select>
+      <!-- <eagle-select v-model="selectValue" :dataSource="[{ label: '选项A', value: 'A' }, { label: '选项B', value: 'B' }]"></eagle-select> -->
     </div>
     <div class="cpt-title">状态指示点 eagle-status-indicator</div>
     <div class="cpt-content">
@@ -62,7 +62,21 @@
     </div>
     <div class="cpt-title">表单生成器 eagle-form</div>
     <div class="cpt-content">
-      <eagle-cform v-model="formValue" :list="formList"></eagle-cform>
+      {{ formValue }}
+      <eagle-form ref="form" v-model="formValue" :list="formList" :form-props="{ size: 'large', 'label-width': '80px' }" submit-pure>
+        <template #group-not-bad="{ label, list }">
+          <div style="background: deepskyblue">哎哟 - {{ label }} - 标题 [{{ list.length }} 项]</div>
+        </template>
+        <template #group-default="{ label }">
+          <div style="background: deeppink">{{ label }} - 默认标题</div>
+        </template>
+        <template #item-name="{ model, key }">
+          <el-select v-model="model[key]">
+            <el-option value="A">A</el-option>
+            <el-option value="B">B</el-option>
+          </el-select>
+        </template>
+      </eagle-form>
     </div>
   </div>
 </template>
@@ -79,19 +93,48 @@ export default {
         { id: 0, label: '一级菜单', children: [{ id: 1, label: '二级菜单-1' }, { id: 2, label: '二级菜单-2', children: [{ id: 3, label: '三级菜单' }] }] }
       ],
       formValue: {},
+      // formList: [
+      //   { type: 'el-input', key: 'name', label: '名称', group: '基本信息', span: 12 },
+      //   { type: 'el-input', key: 'gender', label: '性别', group: '基本信息', span: 12 },
+      //   { type: 'el-input', key: 'address', label: '住址', group: '家庭住址' },
+      //   { type: 'el-input', key: 'postcode', label: '邮编', group: '家庭住址' },
+      //   { type: 'el-input', key: 'political', label: '政治面貌', group: { key: 'pol', label: '政治审查' } },
+      // ]
       formList: [
-        { type: 'el-input' }
+        { type: 'el-input', key: 'name', label: '名称', group: '那啥' },
+        { type: 'el-input', key: 'gender', label: '性别', group: { label: '不错哦', key: 'not-bad' }, tip: '周某人说的', props: { disabled: true } },
+        { type: 'eagle-select', key: 'address', label: '住址', default: '123', props: { dataSource: [{ label: '第一个', value: 'No.1' }, { label: '第二个', value: 'No.2' }] } },
+        { type: 'el-input', key: 'postcode', label: '邮编', tip: { content: '随便挑', placement: "left" } },
+        { type: 'el-input', key: 'political', label: '政治面貌', visible: (model) => model.name === 'B' },
       ]
     }
   },
+  mounted() {
+    setTimeout(() => {
+      this.formValue.name = "B"
+      this.formValue.name2 = "B"
+      this.formValue.name3 = "B"
+      this.formValue.name4 = "B"
+      this.formValue.name5 = "B"
+      this.formValue.name6 = "B"
+      this.formValue.political = "B11111111111111111111111"
+    }, 5000)
+
+    // setTimeout(() => {
+    //   this.$refs.form.reset()
+    // }, 8000)
+  },
   methods: {
+    handleText(val) {
+      console.log(val)
+    },
     handleConfirm() {
       alert('确认')
     },
     handleCancel() {
       alert('取消')
     }
-  }
+  },
 }
 </script>
 
diff --git a/packages/cform/index.vue b/packages/cform/index.vue
deleted file mode 100644
index 4b60524..0000000
--- a/packages/cform/index.vue
+++ /dev/null
@@ -1,271 +0,0 @@
-<style scoped>
-.edit-form {
-  padding-right: 30px;
-}
-.group-title {
-  font-weight: bold;
-  padding: 15px 5px;
-  border-bottom: 1px solid #d9d9d9;
-  margin-bottom: 30px;
-  /* margin-top: 15px;
-  margin-bottom: 30px; */
-}
-/* .group-title:first-child {
-  margin-top: 0px;
-} */
-
-.group-content {
-  margin: 15px 0px;
-}
-</style>
-
-<template>
-  <el-form class="edit-form" size="small" ref="form" :model="model" :label-width="labelWidth">
-    <template v-if="groupList.group">
-      <!-- 这里可以合为一个代码段判断 -->
-      <template v-for="(data, index) in groupList.data">
-        <template v-if="data.list.length > 0">
-          <!-- 这里可以判断是否满足分组条件决定显示title，另外下面content的class也可以判断，div可以换满span的col代替 -->
-          <!-- 加上选项tips提示判断，类似avue -->
-          <div class="group-title" :key="index + 'title'">{{ data.title }}</div>
-          <el-row class="group-content" :key="index + 'list'" :gutter="15">
-            <template v-for="(item, index) in data.list">
-              <el-col v-if="componentVisible(item.visible)" v-show="componentShow(item.show)" :key="index + 'data'" :span="!item.span ? 24 : item.span">
-                <el-form-item :label="item.label" :label-width="item.label ? undefined : item.labelWidth || '0px'" :prop="item.key" :rules="item.rules">
-                  <component @input="(e) => handleComponentInput(e, item)" :is="item.type" @change="(e) => handleComponentChange(e, item)" v-on="handleComponentOn(item)" :style="componentStyle(item.style)" v-model="model[item.key]" v-bind="componentProps(item)"></component>
-                </el-form-item>
-              </el-col>
-            </template>
-          </el-row>
-        </template>
-      </template>
-    </template>
-    <template v-else>
-      <el-row :gutter="15">
-        <template v-for="(item, index) in list">
-          <el-col v-if="componentVisible(item.visible)" v-show="componentShow(item.show)" :key="index" :span="!item.span ? 24 : item.span">
-            <el-form-item :label="item.label" :label-width="item.label ? undefined : item.labelWidth || '0px'" :prop="item.key" :rules="item.rules">
-              <component @input="(e) => handleComponentInput(e, item)" :is="item.type" @change="(e) => handleComponentChange(e, item)" v-on="handleComponentOn(item)" :style="componentStyle(item.style)" v-model="model[item.key]" v-bind="componentProps(item)"></component>
-            </el-form-item>
-          </el-col>
-        </template>
-      </el-row>
-    </template>
-    <!-- 使用slot，不用slot时可定义对齐位置 -->
-    <div style="text-align: right">
-      <el-button type="primary" size="small" :loading="submitLoading" @click="handleSubmit">确定</el-button>
-      <el-button plain size="small" @click="handleCancel" style="margin-left: 8px">取消</el-button>
-    </div>
-  </el-form>
-</template>
-
-<script>
-export default { // ------------------------------------ 解决外部的v-model绑定值失效问题
-  name: 'Cform',
-  props: {
-    // 用于实例化本组件绑定v-model的值
-    value: {
-      type: Object,
-      default: () => {
-        return {};
-      }
-    },
-    // 配置列表 --------------------------------------------可换成对象，传list的同时传其它参数？是否跟formProps重复？？？
-    list: {
-      type: Array,
-      required: true
-    },
-    // 提交加载状态
-    submitLoading: Boolean, // --------------------------------- isLoading 或者loading，考虑骨架屏？
-    // 表单模式，一般结合外部模态框判断新增或修改使用 ------------------------------尽量去掉mode，在外部隐藏时销毁组件，避免历史值遗留问题
-    mode: String,
-    // 标签宽度 ------------------------------- form的props可以用单独的字段如formProps表示，动态传入，使用v-bind绑定
-    labelWidth: {
-      type: String,
-      default: '90px'
-    }
-  },
-  data() {
-    return {
-      // 编辑器表单模型
-      model: {}
-    };
-  },
-  watch: {
-    value: function(val) {
-      if (val) {
-        Object.keys(this.model).forEach(key => {
-          this.model[key] = val[key];
-        });
-      }
-    },
-    // 配置列表又改动时初始化表单模型
-    list: function(value) {
-      this.initModel(value);
-      const obj = {};
-      this.list.forEach(data => {
-        if (data.group) {
-          obj[data.group] = true;
-        }
-      });
-    }
-  },
-  computed: {
-    groupList() {
-      const obj = {};
-      this.list.forEach(data => {
-        if (data.group) {
-          if (!obj[data.group]) {
-            obj[data.group] = [];
-          }
-          obj[data.group].push(data);
-        }
-      });
-      return {
-        group: Object.keys(obj).length > 0,
-        data: Object.keys(obj).map(key => {
-          return { title: key, list: obj[key] };
-        })
-      };
-    }
-  },
-  created() {
-    // 初始化表单模型
-    this.initModel(this.list);
-  },
-  methods: {
-    handleComponentInput(e, item) {
-      if (item.oninput) {
-        item.oninput(e, this.model, this.mode);
-      }
-      this.emitModel();
-    },
-    handleComponentChange(e, item) {
-      if (item.onchange) {
-        item.onchange(e, this.model, this.mode);
-      }
-    },
-    handleComponentOn(item) {
-      if (item.on) {
-        if (typeof item.on === 'function') {
-          return item.on(this.model, this.mode);
-        } else {
-          return item.on
-        }
-      } else {
-        return undefined
-      }
-    },
-    // 向上推送表单值到实例化的组件的v-model中
-    emitModel() {
-      const result = {};
-      Object.keys(this.model).forEach(key => {
-        if (this.componentIsVisible(key)) {
-          let value = this.model[key];
-          if (this.model[key] === null) {
-            value = undefined;
-          }
-          result[key] = value;
-        }
-      });
-      this.$emit("input", result);
-    },
-    // 初始化表单模型
-    initModel(list) {
-      const model = {};
-      list.forEach(item => {
-        model[item.key] = item.default;
-      });
-      this.model = model;
-      this.emitModel();
-    },
-    // 设置表单模型值
-    setValue(value) {
-      this.reset();
-      Object.keys(value).forEach(key => {
-        this.model[key] = value[key];
-      });
-      this.emitModel();
-    },
-    // 判断名称为key的组件v-if是否为true
-    componentIsVisible(key) {
-      let visible = true;
-      this.list.forEach((item) => {
-        if (item.key === key) {
-          if (typeof item.visible === 'function') {
-            visible = item.visible(this.model, this.mode);
-          } else {
-            visible = item.visible === undefined ? true : item.visible;
-          }
-        }
-      });
-      return visible;
-    },
-    // 判断组件v-if状态
-    componentVisible(visible = true) {
-      let componentVisible = visible;
-      if (typeof visible === 'function') {
-        componentVisible = visible(this.model, this.mode);
-      }
-      return componentVisible;
-    },
-    // 判断组件v-show状态
-    componentShow(show = true) {
-      let componentShow = show;
-      if (typeof show === 'function') {
-        componentShow = show(this.model, this.mode);
-      }
-      return componentShow;
-    },
-    // 判断组件参数
-    componentProps(item) {
-      const { props = {}, propsEditor = {} } = item;
-      let connectedProps = { ...props, ...propsEditor };
-      Object.keys(connectedProps).forEach(key => {
-        if (typeof connectedProps[key] === 'function') {
-          connectedProps[key] = connectedProps[key](this.model, this.mode);
-        }
-      });
-      return connectedProps;
-    },
-    // 判断组件样式
-    componentStyle(style = {}) {
-      return {
-        width: "100%",
-        ...style
-      };
-    },
-    // 点击确定提交表单的操作
-    handleSubmit(name) {
-      this.$refs.form.validate(valid => {
-        if (valid) {
-          const result = {};
-          Object.keys(this.model).forEach(key => {
-            if (this.componentIsVisible(key)) {
-              let value = this.model[key];
-              if (this.model[key] === null) {
-                value = undefined;
-              }
-              result[key] = value;
-            }
-          });
-          this.$emit("submit", result);
-        }
-      });
-    },
-    // 重置表单
-    reset() {
-      Object.keys(this.model).forEach(key => {
-        this.model[key] = (this.list.find(item => item.key === key) || {}).default;
-      });
-      this.$nextTick(() => {
-        this.$refs.form.clearValidate();
-      });
-    },
-    // 点击取消的操作
-    handleCancel() {
-      this.$emit("cancel");
-    }
-  }
-};
-</script>
\ No newline at end of file
diff --git a/packages/form/index.vue b/packages/form/index.vue
new file mode 100644
index 0000000..80e88dd
--- /dev/null
+++ b/packages/form/index.vue
@@ -0,0 +1,271 @@
+<style scoped>
+.eagle-form {
+  padding: 0px;
+}
+.eagle-form__group-title {
+  font-weight: bold;
+  padding: 15px 5px;
+  border-bottom: 1px solid #d9d9d9;
+  margin-bottom: 30px;
+}
+.eagle-form__group-content {
+  margin: 15px 0px;
+}
+</style>
+
+<template>
+  <el-form class="eagle-form" ref="form" :model="model" v-bind="formProps">
+    <el-row :gutter="15">
+      <!-- 这里可以合为一个代码段判断 -->
+      <template v-for="(data, index) in listOption.dataList">
+        <!-- 这里可以判断是否满足分组条件决定显示title，另外下面content的class也可以判断，div可以换满span的col代替 -->
+        <!-- 加上选项tips提示判断，类似avue -->
+        <template v-if="listOption.isGroup">
+          <slot v-if="$scopedSlots[data.key] || $slots[data.key]" :name="data.key" v-bind="{...data}"></slot>
+          <el-col v-else class="eagle-form__group-title" :key="data.key" :span="24">{{ data.label }}</el-col>
+        </template>
+        <el-row :class="{ 'eagle-form__group-content': listOption.isGroup }" :key="'group-content-' + index" :gutter="15">
+          <template v-for="(item, index) in data.list">
+            <el-col v-if="bindItemVisible(item.visible)" v-show="bindItemShow(item.show)" :key="index + 'data'" :span="!item.span ? 24 : item.span">
+              <el-form-item :label="item.label" :label-width="item.label ? undefined : item.labelWidth || '0px'" :prop="item.key" :rules="item.rules">
+                <el-tooltip :disabled="!item.tip" v-bind="bindItemTip(item.tip)">
+                  <slot v-if="$scopedSlots[`item-${item.key}`] || $slots[`item-${item.key}`]" :name="`item-${item.key}`" :model="model" v-bind="item"></slot>
+                  <component v-else :is="item.type" v-model="model[item.key]" v-bind="bindItemProps(item)" v-on="bindItemEvent(item)" :style="bindItemStyle(item.style)"></component>
+                </el-tooltip>
+              </el-form-item>
+            </el-col>
+          </template>
+        </el-row>
+      </template>
+    </el-row>
+    <!-- 使用slot，不用slot时可定义对齐位置 -->
+    <div style="text-align: right">
+      <el-button type="primary" size="small" :loading="submitting" @click="handleSubmit">确定</el-button>
+      <el-button plain size="small" @click="handleCancel" style="margin-left: 8px">取消</el-button>
+    </div>
+  </el-form>
+</template>
+
+<script>
+export default {
+  name: 'Form',
+  props: {
+    // 用于实例化本组件绑定v-model的值
+    value: {
+      type: Object,
+      default: () => {
+        return {};
+      }
+    },
+    // 配置列表
+    list: {
+      type: Array,
+      required: true
+    },
+    // 提交加载状态
+    submitting: Boolean,
+    // 表单参数
+    formProps: {
+      type: Object,
+      default() {
+        return {
+          size: 'small',
+          'label-width': '70px'
+        }
+      }
+    },
+    // 纯净提交
+    submitPure: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      // 编辑器表单模型
+      model: {}
+    };
+  },
+  watch: {
+    // 组件外部v-model值更新后同步刷新model
+    value(val) {
+      Object.keys(this.model).forEach(key => {
+        this.model[key] = val ? val[key] : undefined;
+      });
+    },
+    // 配置列表又改动时初始化表单模型
+    list(value) {
+      this.initModel(value);
+    },
+    model: {
+      handler(val) {
+        this.$emit("input", val);
+      },
+      deep: true
+    }
+  },
+  computed: {
+    // 配置列表键值对形式
+    listKeySet() {
+      let result = {};
+      this.list.forEach(item => {
+        result[item.key] = item;
+      });
+      return result;
+    },
+    // 配置列表解析为渲染配置项
+    listOption() {
+      let groupSet = {};
+      this.list.forEach(data => {
+        if (data.group) {
+          if (typeof data.group === 'object') {
+            if (!groupSet[`group-${data.group.key}`]) {
+              groupSet[`group-${data.group.key}`] = {
+                label: data.group.label,
+                list: []
+              };
+            }
+            groupSet[`group-${data.group.key}`].list.push(data);
+          } else if (typeof data.group === 'string') {
+            if (!groupSet[data.group]) {
+              groupSet[data.group] = {
+                label: data.group,
+                list: []
+              };
+            }
+            groupSet[data.group].list.push(data);
+          }
+        } else {
+          if (!groupSet['group-default']) {
+            groupSet['group-default'] = {
+              label: '基本信息',
+              list: []
+            };
+          }
+          groupSet['group-default'].list.push(data); 
+        }
+      });
+      const isGroup = Object.keys(groupSet).length > 1;
+      const dataList = Object.keys(groupSet).map(key => {
+        return { key, ...groupSet[key] };
+      })
+      return { isGroup, dataList };
+    }
+  },
+  created() {
+    // 初始化表单模型
+    this.initModel(this.list);
+  },
+  methods: {
+    // 绑定提示组件参数
+    bindItemTip(tip) {
+      if (typeof tip === 'string') {
+        return { content: tip, effect: 'light' };
+      } else if (typeof tip === 'object') {
+        return tip;
+      } else {
+        return {};
+      }
+    },
+    // 绑定组件事件
+    bindItemEvent(item) {
+      if (item.on) {
+        if (typeof item.on === 'function') {
+          return item.on(this.model);
+        } else {
+          return item.on
+        }
+      } else {
+        return undefined
+      }
+    },
+    // 初始化表单模型
+    initModel(list) {
+      list.forEach(item => {
+        this.$set(this.model, item.key, item.default || undefined)
+      });
+    },
+    // 判断列表项是否存在
+    isItemVisible(key) {
+      let visible = true;
+      const item = this.listKeySet[key] || {};
+      if (typeof item.visible === 'function') {
+        visible = item.visible({ ...this.model }); // 返回model的复制结果，判断类属性禁止改变model，防止循环导致内存溢出
+      } else {
+        visible = item.visible === undefined ? true : item.visible; // 没有定义visible时返回true，否则返回visible定义的值。【注意：不可写成“ !item.visible ”】
+      }
+      return visible;
+    },
+    // 绑定组件v-if状态
+    bindItemVisible(visible = true) {
+      let result = visible;
+      if (typeof visible === 'function') {
+        result = visible(this.model);
+      }
+      return result;
+    },
+    // 绑定组件v-show状态
+    bindItemShow(show = true) {
+      let result = show;
+      if (typeof show === 'function') {
+        result = show(this.model);
+      }
+      return result;
+    },
+    // 绑定组件参数
+    bindItemProps(item) {
+      const { props = {} } = item;
+      let result = { ...props };
+      Object.keys(result).forEach(key => {
+        if (typeof result[key] === 'function') {
+          result[key] = result[key](this.model);
+        }
+      });
+      return result;
+    },
+    // 绑定组件样式
+    bindItemStyle(style = {}) {
+      return {
+        width: "100%",
+        ...style
+      };
+    },
+    // 点击确定提交表单的操作
+    handleSubmit(name) {
+      this.$refs.form.validate(valid => {
+        if (valid) {
+          const result = this.submitPure ? this.getPureModel() : JSON.parse(JSON.stringify(this.model));
+          this.$emit("submit", result);
+        }
+      });
+    },
+    // 重置表单
+    reset() {
+      Object.keys(this.model).forEach(key => {
+        this.model[key] = this.listKeySet[key] ? this.listKeySet[key].default : undefined;
+      });
+      this.$nextTick(() => {
+        this.$refs.form.clearValidate();
+      });
+    },
+    // 获取以初始list为准的纯净model值
+    getPureModel() {
+      const result = {};
+      Object.keys(this.listKeySet).forEach(key => {
+        if (this.isItemVisible(key)) {
+          let value = this.model[key];
+          if (this.model[key] === null) {
+            value = undefined;
+          }
+          result[key] = value;
+        }
+      });
+      return result;
+    },
+    // 点击取消的操作
+    handleCancel() {
+      this.$emit("cancel");
+    }
+  }
+};
+</script>
\ No newline at end of file
diff --git a/packages/index.js b/packages/index.js
index c17e6a2..969b75d 100644
--- a/packages/index.js
+++ b/packages/index.js
@@ -3,7 +3,7 @@ import Confirm from './confirm'
 import DistPicker from './dist-picker'
 import Editor from './editor'
 import FileUpload from './file-upload'
-import Cform from './cform'
+import Form from './form'
 import ImageUpload from './Image-upload'
 import ImageUploadMultiple from './Image-upload/multiple'
 import ImageView from './image-view'
@@ -14,12 +14,12 @@ import SwitchButton from './switch-button'
 import TreeSelect from './tree-select'
 
 const components = {
-  Cform,
   Code,
   Confirm,
   DistPicker,
   Editor,
   FileUpload,
+  Form,
   ImageUpload,
   ImageUploadMultiple,
   ImageView,
@@ -37,6 +37,7 @@ const install = function (Vue, opts = {}) {
     const prefix = opts.name || 'eagle'
     // 配置组件名称
     const name = prefix + component.name
+    component.name = name
     // 给每个子组件配置install方法
     component.install = function (Vue) {
       Vue.component(name, component)
--
libgit2 0.21.0