framework / eagle-web-toolkit

Download as
Browse Code »

Commit bb0daa97d03d05756197bce1963def1727b8c47d

Authored by Aaron
1 parent 8be61249
Exists in master and in 1 other branch legacy

Form支持分组折叠

Showing 3 changed files with 120 additions and 8 deletions   Show diff stats
examples/views/docs/component/form.md
  Diff comments   View file @bb0daa9
@@ -143,11 +143,39 @@ export default { @@ -143,11 +143,39 @@ export default {
143 143
144 ```html 144 ```html
145 <template> 145 <template>
146 - <eagle-form :list="formList" style="width: 500px;">  
147 - <template #label-gender="{ label }">  
148 - <span>自定义 - {{ label }}</span>  
149 - </template>  
150 - </eagle-form> 146 + <eagle-form :list="formList" style="width: 500px;"></eagle-form>
  147 +</template>
  148 +
  149 +<script>
  150 +export default {
  151 + data() {
  152 + return {
  153 + formList: [
  154 + { type: 'el-input', key: 'name', label: '姓名', rules: [{ required: true, message: '请输入名称' }] },
  155 + { type: 'el-input-number', key: 'age', label: '年龄', span: 12, group: '健康信息' },
  156 + { type: 'el-input-number', key: 'weight', label: '体重', span: 12, group: '健康信息' },
  157 + { type: 'el-input', key: 'experience', label: '简历',
  158 + group: { key: 'experience', icon: 'edit-outline', label: '工作经历' },
  159 + props: { type: 'textarea', min: 3 }
  160 + },
  161 + ]
  162 + }
  163 + }
  164 +}
  165 +</script>
  166 +```
  167 +
  168 +:::
  169 +
  170 +## 分组折叠
  171 +
  172 +已经分组的表单可以折叠显示
  173 +
  174 +::: snippet `collapse`配置折叠、`accordion`设置手风琴模式
  175 +
  176 +```html
  177 +<template>
  178 + <eagle-form collapse accordion :list="formList" style="width: 500px;"></eagle-form>
151 </template> 179 </template>
152 180
153 <script> 181 <script>
examples/views/docs/component/scheme.md
  Diff comments   View file @bb0daa9
@@ -40,6 +40,42 @@ export default { @@ -40,6 +40,42 @@ export default {
40 40
41 ::: 41 :::
42 42
  43 +## 表单分组
  44 +
  45 +与Form组件配置类似，将表单分组显示。
  46 +
  47 +::: snippet 组件`formProps`设置表单参数，在配置项属性中设置`group`参数配置分组。
  48 +
  49 +```html
  50 +<template>
  51 + <eagle-scheme v-model="tableData" :list="list" :formProps="{ collapse: true }"></eagle-scheme>
  52 +</template>
  53 +
  54 +<script>
  55 +export default {
  56 + data() {
  57 + return {
  58 + tableData: [
  59 + { name: '产品A', code: 'P0001', type: 'NORMAL', sort: 0, status: '0' },
  60 + { name: '产品B', code: 'P0002', type: 'BROKEN', sort: 1, status: '1' },
  61 + { name: '产品C', code: 'P0003', type: 'NORMAL', sort: 0, status: '0' },
  62 + { name: '产品D', code: 'P0004', type: 'BROKEN', sort: 1, status: '1' },
  63 + ],
  64 + list: [
  65 + { type: 'el-input', key: 'name', label: '名称', rules: [{ required: true, message: '请输入名称' }] },
  66 + { type: 'el-input', key: 'code', label: '编码', rules: [{ required: true, message: '请输入编码' }], exclude: 'search' },
  67 + { type: 'el-input', key: 'type', label: '类型', include: ['table', 'form'], group: '其它信息' },
  68 + { type: 'el-input-number', key: 'sort', label: '排序', include: 'form', sortable: true, group: '其它信息' },
  69 + { type: 'el-input', key: 'status', label: '状态', group: { key: 'sys', icon: 'edit-outline', label: '系统信息' } },
  70 + ],
  71 + }
  72 + },
  73 +}
  74 +</script>
  75 +```
  76 +
  77 +:::
  78 +
43 ## 动态列 79 ## 动态列
44 80
45 设置表格列可以动态的控制显示状态 81 设置表格列可以动态的控制显示状态
packages/form/index.vue
  Diff comments   View file @bb0daa9
@@ -14,12 +14,45 @@ @@ -14,12 +14,45 @@
14 .eagle-form__group-content { 14 .eagle-form__group-content {
15 margin: 15px 0px; 15 margin: 15px 0px;
16 } 16 }
  17 +.eagle-form__collapse * {
  18 + outline: none;
  19 +}
17 </style> 20 </style>
18 21
19 <template> 22 <template>
20 <el-form class="eagle-form" ref="form" :model="model" v-bind="{ size: 'small', 'label-width': '100px', ...formProps }"> 23 <el-form class="eagle-form" ref="form" :model="model" v-bind="{ size: 'small', 'label-width': '100px', ...formProps }">
21 <el-row :gutter="15"> 24 <el-row :gutter="15">
22 - <template v-for="(data, index) in listOption.dataList"> 25 + <el-collapse v-if="(formProps.collapse || collapse) && listOption.isGroup" v-model="activeNames" :accordion="(formProps.accordion || accordion)" class="eagle-form__collapse">
  26 + <template v-for="(data, index) in listOption.dataList">
  27 + <el-collapse-item :key="`collapse-${index}`" :name="data.key">
  28 + <template slot="title">
  29 + <template v-if="listOption.isGroup">
  30 + <el-tooltip :disabled="!data.tip" v-bind="bindItemTip(data.tip)" :key="data.key">
  31 + <slot v-if="$scopedSlots[data.key] || $slots[data.key]" :name="data.key" v-bind="data"></slot>
  32 + <el-col v-else :span="24">
  33 + <i v-if="data.icon" :class="`el-icon-${data.icon} eagle-form__group-icon`"></i>
  34 + <span>{{ data.label }}</span>
  35 + </el-col>
  36 + </el-tooltip>
  37 + </template>
  38 + </template>
  39 + <el-row :class="{ 'eagle-form__group-content': listOption.isGroup }" :key="'group-content-' + index" :gutter="15">
  40 + <template v-for="(item, index) in data.list">
  41 + <el-col v-if="bindItemVisible(item.visible)" v-show="bindItemShow(item.show)" :key="index + 'data'" :span="!item.span ? span : item.span">
  42 + <el-form-item :label="item.label" :label-width="item.label ? undefined : item.labelWidth || '0px'" :prop="item.key" :rules="bindItemRules(item)">
  43 + <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>
  44 + <el-tooltip :disabled="!item.tip" v-bind="bindItemTip(item.tip)">
  45 + <slot v-if="$scopedSlots[`item-${item.key}`] || $slots[`item-${item.key}`]" :name="`item-${item.key}`" :model="model" v-bind="item"></slot>
  46 + <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>
  47 + </el-tooltip>
  48 + </el-form-item>
  49 + </el-col>
  50 + </template>
  51 + </el-row>
  52 + </el-collapse-item>
  53 + </template>
  54 + </el-collapse>
  55 + <template v-else v-for="(data, index) in listOption.dataList">
23 <template v-if="listOption.isGroup"> 56 <template v-if="listOption.isGroup">
24 <el-tooltip :disabled="!data.tip" v-bind="bindItemTip(data.tip)" :key="data.key"> 57 <el-tooltip :disabled="!data.tip" v-bind="bindItemTip(data.tip)" :key="data.key">
25 <slot v-if="$scopedSlots[data.key] || $slots[data.key]" :name="data.key" v-bind="data"></slot> 58 <slot v-if="$scopedSlots[data.key] || $slots[data.key]" :name="data.key" v-bind="data"></slot>
@@ -97,11 +130,22 @@ export default { @@ -97,11 +130,22 @@ export default {
97 type: Boolean, 130 type: Boolean,
98 default: true 131 default: true
99 }, 132 },
  133 + // 折叠
  134 + collapse: {
  135 + type: Boolean,
  136 + default: false,
  137 + },
  138 + // 折叠手风琴
  139 + accordion: {
  140 + type: Boolean,
  141 + default: false,
  142 + },
100 }, 143 },
101 data() { 144 data() {
102 return { 145 return {
103 // 编辑器表单模型 146 // 编辑器表单模型
104 - model: {} 147 + model: {},
  148 + activeNames: []
105 }; 149 };
106 }, 150 },
107 created() { 151 created() {
@@ -110,6 +154,10 @@ export default { @@ -110,6 +154,10 @@ export default {
110 }, 154 },
111 mounted() { 155 mounted() {
112 this.setModelValue(this.value); 156 this.setModelValue(this.value);
  157 + if (this.listOption.isGroup && (this.collapse || this.formProps.collapse)) {
  158 + this.activeNames = this.accordion || this.formProps.accordion ? this.listOption.dataList[0].key : this.listOption.dataList.map(item => item.key);
  159 + console.log(this.activeNames);
  160 + }
113 }, 161 },
114 computed: { 162 computed: {
115 // 配置列表键值对形式 163 // 配置列表键值对形式
@@ -157,7 +205,7 @@ export default { @@ -157,7 +205,7 @@ export default {
157 const isGroup = Object.keys(groupSet).length > 1; 205 const isGroup = Object.keys(groupSet).length > 1;
158 const dataList = Object.keys(groupSet).map(key => { 206 const dataList = Object.keys(groupSet).map(key => {
159 return { key, ...groupSet[key] }; 207 return { key, ...groupSet[key] };
160 - }) 208 + });
161 return { isGroup, dataList }; 209 return { isGroup, dataList };
162 } 210 }
163 }, 211 },