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 143  
144 144 ```html
145 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 179 </template>
152 180  
153 181 <script>
... ...
examples/views/docs/component/scheme.md
  Diff comments   View file @bb0daa9
... ... @@ -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 14 .eagle-form__group-content {
15 15 margin: 15px 0px;
16 16 }
  17 +.eagle-form__collapse * {
  18 + outline: none;
  19 +}
17 20 </style>
18 21  
19 22 <template>
20 23 <el-form class="eagle-form" ref="form" :model="model" v-bind="{ size: 'small', 'label-width': '100px', ...formProps }">
21 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 56 <template v-if="listOption.isGroup">
24 57 <el-tooltip :disabled="!data.tip" v-bind="bindItemTip(data.tip)" :key="data.key">
25 58 <slot v-if="$scopedSlots[data.key] || $slots[data.key]" :name="data.key" v-bind="data"></slot>
... ... @@ -97,11 +130,22 @@ export default {
97 130 type: Boolean,
98 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 144 data() {
102 145 return {
103 146 // 编辑器表单模型
104   - model: {}
  147 + model: {},
  148 + activeNames: []
105 149 };
106 150 },
107 151 created() {
... ... @@ -110,6 +154,10 @@ export default {
110 154 },
111 155 mounted() {
112 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 162 computed: {
115 163 // 配置列表键值对形式
... ... @@ -157,7 +205,7 @@ export default {
157 205 const isGroup = Object.keys(groupSet).length > 1;
158 206 const dataList = Object.keys(groupSet).map(key => {
159 207 return { key, ...groupSet[key] };
160   - })
  208 + });
161 209 return { isGroup, dataList };
162 210 }
163 211 },
... ...