From 5bbd40ed2fc288108fa039dffa3a6d3c35236982 Mon Sep 17 00:00:00 2001
From: Aaron <427787340@qq.com>
Date: Tue, 24 Dec 2019 16:23:48 +0800
Subject: [PATCH] 新式表单支持两种布局模式

---
 examples/views/page/form-new/form-render.vue | 46 ++++++++++++++++++++++++++++++++++------------
 examples/views/page/form-new/index.vue       | 38 ++++++++++++++++++++++++++++++++++----
 examples/views/page/form-new/util.js         | 26 +++++++++++++++++++++-----
 examples/views/page/other.vue                | 41 ++++++++++++++++++++++++++++++++---------
 4 files changed, 121 insertions(+), 30 deletions(-)

diff --git a/examples/views/page/form-new/form-render.vue b/examples/views/page/form-new/form-render.vue
index c1ad65c..3af4c9a 100644
--- a/examples/views/page/form-new/form-render.vue
+++ b/examples/views/page/form-new/form-render.vue
@@ -1,25 +1,37 @@
 <template>
   <!-- 在row上使用flex，防止表单组件大小不一导致错位 -->
-  <el-row type="flex" style="flex-wrap: wrap;width: 100%;" :class="contentClass || 'eagle-form__group-content'">
+  <component :is="rowComponent" class="eagle-form__flex-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 || span">
-        <el-row type="flex" style="flex-wrap: wrap;width: 100%;">
+      <component :is="colComponent" v-if="item.group && item.list" :key="index"
+        :span="type === 'div' ? undefined : item.group.span || 24" :style="{ width: type === 'div' ? '100%' : undefined }"
+      >
+        <component :is="rowComponent" class="eagle-form__flex-wrap">
           <!-- 表单分组标题 -->
-          <el-col :class="titleClass || 'eagle-form__group-title'" v-if="item.group.title" :span="24">{{ item.group.title || item.group }}</el-col>
+          <component :is="rowComponent" :class="titleClass || 'eagle-form__group-title'" v-if="item.group.title" style="width: 100%;">
+            {{ item.group.title || item.group }}
+          </component>
           <!-- 递归本组件 -->
-          <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>
+          <form-render :title-class="titleClass" :item-class="itemClass" :list="item.list" :value="value"
+            :model="itemKey ? model[itemKey] || {} : model" :itemKey="item.group.key" :type="type"
+            @item-change="onItemChange" @form-item-change="onFormItemChange" @item-update="onItemUpdate"
+            :span="type === 'div' ? undefined : span * (24 / (item.group.span || 24))"
+          ></form-render>
+        </component>
+      </component>
       <!-- 正常无分组表单项 -->
-      <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="colComponent" v-else :span="type === 'div' ? undefined : item.span || span" :key="index"
+        :style="{ width: type === 'div' && item.style && item.style.width.indexOf('%') > -1 ? item.style.width : undefined, paddingRight: '10px' }"
+      >
+        <el-form-item :label="item.label" :label-width="item.labelWidth" :prop="item.fullKey" :rules="item.rules" :class="itemClass || 'eagle-form__item'">
           <!-- 自定义组件 -->
-          <component :is="item.type" :value="itemValue(item)" @input="v => onInput({ value: v, item })" v-on="bindItemEvent(item)"></component>
+          <component :is="item.type" :value="itemValue(item)" @input="v => onInput({ value: v, item })"
+            v-on="bindItemEvent(item)" v-bind="item.props" :style="item.style || { maxWidth: '100%' }"
+          ></component>
         </el-form-item>
-      </el-col>
+      </component>
     </template>
-  </el-row>
+  </component>
 </template>
 
 <script>
@@ -32,8 +44,18 @@ export default {
     itemKey: String,
     titleClass: String,
     contentClass: String,
+    itemClass: String,
+    type: String,
     span: Number,
   },
+  computed: {
+    rowComponent() {
+      return this.type === 'div' ? 'div' : 'el-row';
+    },
+    colComponent() {
+      return this.type === 'div' ? 'div' : 'el-col';
+    },
+  },
   methods: {
     /**
      * @description 根据表单项的key查询该值
diff --git a/examples/views/page/form-new/index.vue b/examples/views/page/form-new/index.vue
index 9d287fb..4161a36 100644
--- a/examples/views/page/form-new/index.vue
+++ b/examples/views/page/form-new/index.vue
@@ -1,8 +1,33 @@
+<style>
+.el-input .el-input__inner, .el-textarea__inner {
+  border-radius: 0;
+}
+</style>
+
+<style>
+.eagle-form__flex-wrap {
+  display: flex;
+  flex-wrap: wrap;
+  width: 100%;
+}
+.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 ref="form" size="small" :class="formClass" :model="formModel">
+  <el-form ref="form" size="mini" :class="formClass" :model="formModel" :label-width="labelWidth" :label-position="labelPosition || labelWidth ? 'right' : 'top'">
     {{ formModel }}
-    <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>
+    <form-render :title-class="titleClass" :content-class="contentClass" :item-class="itemClass" :list="formList" :value="model"
+      :model="model" :span="span" :type="type"
+      @item-change="onItemChange" @form-item-change="onFormItemChange" @item-update="onItemUpdate"
+    ></form-render>
     {{ list }}
   </el-form>
 </template>
@@ -20,6 +45,10 @@ export default {
     formClass: String,
     titleClass: String,
     contentClass: String,
+    itemClass: String,
+    labelWidth: String,
+    labelPosition: String,
+    type: String,
     span: {
       type: Number,
       default: 24
@@ -85,7 +114,7 @@ export default {
      */
     validate() {
       this.$refs.form.validate(valid => {
-        this.$emit("validate", valid);
+        this.$emit("validate", valid, this.model);
       });
     },
     /**
@@ -112,6 +141,7 @@ export default {
      * @description 手动更新某一表单项的值
      * @param {Object} param 需要更新的参数对象或者对象数组 { name => 表单项key,可嵌套; value => 更新的值 }
      * @example { name: 'a.b.c', value: 123 }
+     * @example { name: 'd.0.e', value: ['f'] }
      */
     onItemUpdate(param) {
       this.$nextTick(() => {
diff --git a/examples/views/page/form-new/util.js b/examples/views/page/form-new/util.js
index 262aea3..4a266e3 100644
--- a/examples/views/page/form-new/util.js
+++ b/examples/views/page/form-new/util.js
@@ -1,3 +1,8 @@
+/**
+ * 深度克隆对象
+ * @param {Object} obj 目标对象
+ * @returns {Object} 克隆的新对象
+ */
 export const cloneDeep = (obj) => {
   if (typeof obj !== 'object') {
     return obj;
@@ -35,19 +40,31 @@ export const cloneDeep = (obj) => {
   return newObj;
 };
 
+/**
+ * 对象深度取值
+ * @desctiption 来源于"typy.js"中src/util的getNestedObject函数
+ * @param {Object} obj 目标对象
+ * @param {String} dotSeparatedKeys 用分隔符".", "[", "]", "'", """隔开的取值路径
+ * @example get({ a: { b: { c: ['d'] } } }, 'a.b.c.0')
+ */
 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 splitRegex = /[.\[\]'"]/g;
     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;
 };
 
+/**
+ * 对象深度赋值
+ * @description 改写自get方法
+ * @param {Object} obj 目标对像
+ * @param {String} dotSeparatedKeys 用分隔符".", "[", "]", "'", """隔开的赋值路径
+ * @param {*} value 目标值
+ * @example set(obj, 'a.b.c', 'd')
+ */
 export const set = (obj, dotSeparatedKeys, value) => {
   const splitRegex = /[.\[\]'"]/g;
   const pathArr = dotSeparatedKeys.split(splitRegex).filter(k => k !== '');
@@ -58,7 +75,6 @@ export const set = (obj, dotSeparatedKeys, value) => {
     }
     return o[k]
   }, obj)[key] = value
-  // pathArr.reduce((o, key) => (o && o[key] !== 'undefined' ? o[key] : undefined), obj)[key] = value
 };
 
 export default {
diff --git a/examples/views/page/other.vue b/examples/views/page/other.vue
index 299eab5..0c51c40 100644
--- a/examples/views/page/other.vue
+++ b/examples/views/page/other.vue
@@ -15,7 +15,11 @@
     <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" :span="12" 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" label-width="80px" :span="6" type="div"></eg-form> -->
+    <eg-form
+      ref="form" v-model="model" :list="option.list" @validate="onValidate" :span="4"
+      form-class="custom-form" title-class="custom-title" content-class="custom-content" item-class="custom-item"
+    ></eg-form>
   </div>
 </template>
 
@@ -36,14 +40,14 @@ export default {
       option: {
         list: [
           {
-            group: { title: '基础信息' },
+            group: { title: '基础信息', span: 12 },
             list: [
               { type: 'el-input', label: '名称', key: 'name' },
               { type: 'el-input-number', label: '年龄', key: 'age' },
             ],
           },
           {
-            group: { title: '' },
+            group: { title: '', span: 12 },
           },
           {
             group: { title: '住址', key: 'location', span: 24 },
@@ -52,19 +56,20 @@ export default {
               {
                 group: { key: 'district' },
                 list: [
-                  { type: 'el-input', label: '省', key: 'province', rules: [{ required: true, message: '请输入省' }], span: 12 },
-                  { type: 'el-input', label: '市', key: 'city', span: 12 },
+                  { type: 'el-input', label: '省', key: 'province', rules: [{ required: true, message: '请输入省' }] },
+                  { type: 'el-input', label: '市', key: 'city' },
                 ],
               },
               {
                 group: { title: '小区信息' },
                 list: [
-                  { type: 'el-input', label: '小区名', key: 'areaName', span: 12 },
-                  { type: 'el-input', label: '门牌号', key: 'homeNum', span: 12 },
+                  { type: 'el-input', label: '小区名', key: 'areaName' },
+                  { type: 'el-input', label: '门牌号', key: 'homeNum' },
                   {
                     group: { title: 'A栋' },
                     list: [
                       { type: 'el-input-number', label: '人数', key: 'anumber',
+                        props: { 'controls-position': 'right' },
                         on: {
                           change(value) {
                             console.log(value);
@@ -94,6 +99,24 @@ export default {
               }
             ],
           },
+          { type: 'el-input', label: '身高', key: 'height', props: { type: 'textarea', min: 3 }, style: { width: '100%' }, span: 24 },
+          { type: 'el-input', label: '体重', key: 'weight' },
+          { type: 'el-input', label: '身高', key: 'height' },
+          { type: 'el-input', label: '体重', key: 'weight' },
+          { type: 'el-input', label: '身高', key: 'height' },
+          { type: 'el-input', label: '体重', key: 'weight' },
+          { type: 'el-input', label: '身高', key: 'height' },
+          { type: 'el-input', label: '体重', key: 'weight' },
+          { type: 'el-input', label: '身高', key: 'height' },
+          { type: 'el-input', label: '体重', key: 'weight' },
+          { type: 'el-input', label: '身高', key: 'height' },
+          { type: 'el-input', label: '体重', key: 'weight' },
+          { type: 'el-input', label: '身高', key: 'height' },
+          { type: 'el-input', label: '体重', key: 'weight' },
+          { type: 'el-input', label: '身高', key: 'height' },
+          { type: 'el-input', label: '体重', key: 'weight' },
+          { type: 'el-input', label: '身高', key: 'height' },
+          { type: 'el-input', label: '体重', key: 'weight' },
           { type: 'el-input', label: '身高', key: 'height' },
           { type: 'el-input', label: '体重', key: 'weight' },
         ]
@@ -124,8 +147,8 @@ export default {
     }, 3000);
   },
   methods: {
-    onValidate(v) {
-      console.log(v);
+    onValidate(isValidated, model) {
+      console.log(isValidated, model);
     },
     handleGetValue() {
       this.$refs.form.validate();
--
libgit2 0.21.0