From bb0daa97d03d05756197bce1963def1727b8c47d Mon Sep 17 00:00:00 2001
From: Aaron <427787340@qq.com>
Date: Tue, 3 Sep 2019 14:59:23 +0800
Subject: [PATCH] Form支持分组折叠

---
 examples/views/docs/component/form.md   | 38 +++++++++++++++++++++++++++++++++-----
 examples/views/docs/component/scheme.md | 36 ++++++++++++++++++++++++++++++++++++
 packages/form/index.vue                 | 54 +++++++++++++++++++++++++++++++++++++++++++++++++++---
 3 files changed, 120 insertions(+), 8 deletions(-)

diff --git a/examples/views/docs/component/form.md b/examples/views/docs/component/form.md
index 7320de5..050e0f3 100644
--- a/examples/views/docs/component/form.md
+++ b/examples/views/docs/component/form.md
@@ -143,11 +143,39 @@ export default {
 
 ```html
 <template>
-  <eagle-form :list="formList" style="width: 500px;">
-    <template #label-gender="{ label }">
-      <span>自定义 - {{ label }}</span>
-    </template>
-  </eagle-form>
+  <eagle-form :list="formList" style="width: 500px;"></eagle-form>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      formList: [
+        { type: 'el-input', key: 'name', label: '姓名', rules: [{ required: true, message: '请输入名称' }] },
+        { type: 'el-input-number', key: 'age', label: '年龄', span: 12, group: '健康信息' },
+        { type: 'el-input-number', key: 'weight', label: '体重', span: 12, group: '健康信息' },
+        { type: 'el-input', key: 'experience', label: '简历',
+          group: { key: 'experience', icon: 'edit-outline', label: '工作经历' },
+          props: { type: 'textarea', min: 3 }
+        },
+      ]
+    }
+  }
+}
+</script>
+```
+
+:::
+
+## 分组折叠
+
+已经分组的表单可以折叠显示
+
+::: snippet `collapse`配置折叠、`accordion`设置手风琴模式
+
+```html
+<template>
+  <eagle-form collapse accordion :list="formList" style="width: 500px;"></eagle-form>
 </template>
 
 <script>
diff --git a/examples/views/docs/component/scheme.md b/examples/views/docs/component/scheme.md
index da6f5e5..3490322 100644
--- a/examples/views/docs/component/scheme.md
+++ b/examples/views/docs/component/scheme.md
@@ -40,6 +40,42 @@ export default {
 
 :::
 
+## 表单分组
+
+与Form组件配置类似，将表单分组显示。
+
+::: snippet 组件`formProps`设置表单参数，在配置项属性中设置`group`参数配置分组。
+
+```html
+<template>
+  <eagle-scheme v-model="tableData" :list="list" :formProps="{ collapse: true }"></eagle-scheme>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      tableData: [
+        { name: '产品A', code: 'P0001', type: 'NORMAL', sort: 0, status: '0' },
+        { name: '产品B', code: 'P0002', type: 'BROKEN', sort: 1, status: '1' },
+        { name: '产品C', code: 'P0003', type: 'NORMAL', sort: 0, status: '0' },
+        { name: '产品D', code: 'P0004', type: 'BROKEN', sort: 1, status: '1' },
+      ],
+      list: [
+        { type: 'el-input', key: 'name', label: '名称', rules: [{ required: true, message: '请输入名称' }] },
+        { type: 'el-input', key: 'code', label: '编码', rules: [{ required: true, message: '请输入编码' }], exclude: 'search' },
+        { type: 'el-input', key: 'type', label: '类型', include: ['table', 'form'], group: '其它信息' },
+        { type: 'el-input-number', key: 'sort', label: '排序', include: 'form', sortable: true, group: '其它信息' },
+        { type: 'el-input', key: 'status', label: '状态', group: { key: 'sys', icon: 'edit-outline', label: '系统信息' } },
+      ],
+    }
+  },
+}
+</script>
+```
+
+:::
+
 ## 动态列
 
 设置表格列可以动态的控制显示状态
diff --git a/packages/form/index.vue b/packages/form/index.vue
index 41dadb9..09c168b 100644
--- a/packages/form/index.vue
+++ b/packages/form/index.vue
@@ -14,12 +14,45 @@
 .eagle-form__group-content {
   margin: 15px 0px;
 }
+.eagle-form__collapse * {
+  outline: none;
+}
 </style>
 
 <template>
   <el-form class="eagle-form" ref="form" :model="model" v-bind="{ size: 'small', 'label-width': '100px', ...formProps }">
     <el-row :gutter="15">
-      <template v-for="(data, index) in listOption.dataList">
+      <el-collapse v-if="(formProps.collapse || collapse) && listOption.isGroup" v-model="activeNames" :accordion="(formProps.accordion || accordion)" class="eagle-form__collapse">
+        <template v-for="(data, index) in listOption.dataList">
+          <el-collapse-item :key="`collapse-${index}`" :name="data.key">
+            <template slot="title">
+              <template v-if="listOption.isGroup">
+                <el-tooltip :disabled="!data.tip" v-bind="bindItemTip(data.tip)" :key="data.key">
+                  <slot v-if="$scopedSlots[data.key] || $slots[data.key]" :name="data.key" v-bind="data"></slot>
+                  <el-col v-else :span="24">
+                    <i v-if="data.icon" :class="`el-icon-${data.icon} eagle-form__group-icon`"></i>
+                    <span>{{ data.label }}</span>
+                  </el-col>
+                </el-tooltip>
+              </template>
+            </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 ? span : item.span">
+                  <el-form-item :label="item.label" :label-width="item.label ? undefined : item.labelWidth || '0px'" :prop="item.key" :rules="bindItemRules(item)">
+                    <slot v-if="$scopedSlots[`label-${item.key}`] || $slots[`label-${item.key}`]" :name="`label-${item.key}`" slot="label" :model="model" :value="model[item.key]" v-bind="item"></slot>
+                    <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 || 'el-input'" 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>
+          </el-collapse-item>
+        </template>
+      </el-collapse>
+      <template v-else v-for="(data, index) in listOption.dataList">
         <template v-if="listOption.isGroup">
           <el-tooltip :disabled="!data.tip" v-bind="bindItemTip(data.tip)" :key="data.key">
             <slot v-if="$scopedSlots[data.key] || $slots[data.key]" :name="data.key" v-bind="data"></slot>
@@ -97,11 +130,22 @@ export default {
       type: Boolean,
       default: true
     },
+    // 折叠
+    collapse: {
+      type: Boolean,
+      default: false,
+    },
+    // 折叠手风琴
+    accordion: {
+      type: Boolean,
+      default: false,
+    },
   },
   data() {
     return {
       // 编辑器表单模型
-      model: {}
+      model: {},
+      activeNames: []
     };
   },
   created() {
@@ -110,6 +154,10 @@ export default {
   },
   mounted() {
     this.setModelValue(this.value);
+    if (this.listOption.isGroup && (this.collapse || this.formProps.collapse)) {
+      this.activeNames = this.accordion || this.formProps.accordion ? this.listOption.dataList[0].key : this.listOption.dataList.map(item => item.key);
+      console.log(this.activeNames);
+    }
   },
   computed: {
     // 配置列表键值对形式
@@ -157,7 +205,7 @@ export default {
       const isGroup = Object.keys(groupSet).length > 1;
       const dataList = Object.keys(groupSet).map(key => {
         return { key, ...groupSet[key] };
-      })
+      });
       return { isGroup, dataList };
     }
   },
--
libgit2 0.21.0