Skip to content

Commit a19d922

Browse files
yidalhyidalh
committed
新增表单自定义布局 #34 
1 parent 0f72bc8 commit a19d922

File tree

18 files changed

+202
-176
lines changed

18 files changed

+202
-176
lines changed

‎public/app.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎public/mix-manifest.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
2-
"/app.js": "/app.js?id=d686e3c8b0aaf5de7960",
2+
"/app.js": "/app.js?id=d84a73a821faafc47d53",
33
"/manifest.js": "/manifest.js?id=8991394a854ee5cdffc3",
44
"/vendor.js": "/vendor.js?id=df0be4950fcb717193ba"
55
}

‎resources/js/components.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,15 @@ Vue.component("Column", require("@/components/layout/Column").default);
99
Vue.component("Grid", require("@/components/grid/Table").default);
1010
Vue.component("Tree", require("@/components/grid/Tree").default);
1111
Vue.component("Form", require("@/components/form/Form").default);
12+
Vue.component("FormItem", require("@/components/form/FormItem").default);
13+
1214
Vue.component("BaseForm", require("@/components/form/BaseForm").default);
1315
Vue.component("MenuItem", require("@/components/layout/MenuItem").default);
1416

1517
//Form
18+
19+
20+
1621
Vue.component("Input", require("@/components/widgets/Form/Input").default);
1722
Vue.component(
1823
"RadioGroup",

‎resources/js/components/form/Form.vue

Lines changed: 25 additions & 92 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,6 @@
11
<template>
22
<div class="form-page">
3-
<component
4-
v-if="attrs.top"
5-
:is="attrs.top.componentName"
6-
:attrs="attrs.top"
7-
/>
3+
<component v-if="attrs.top" :is="attrs.top.componentName" :attrs="attrs.top" />
84
<component
95
:is="attrs.attrs.isDialog ? 'div' : 'el-card'"
106
shadow="never"
@@ -37,73 +33,18 @@
3733
v-for="tab in attrs.tabs"
3834
:key="tab"
3935
>
40-
<template v-for="(item, index) in attrs.formItems">
41-
<ItemIf
42-
v-if="tab == item.tab"
43-
:key="index"
44-
:form_item="item"
45-
:form_items="attrs.formItems"
46-
:form_data="formData"
47-
>
48-
<component
49-
v-if="item.topComponent"
50-
:is="item.topComponent.componentName"
51-
:attrs="item.topComponent"
52-
/>
53-
54-
<el-form-item
55-
:prop="item.prop"
56-
:label-width="item.labelWidth"
57-
:error="item.error"
58-
:show-message="item.showMessage"
59-
:inline-message="item.inlineMessage"
60-
:size="item.size"
61-
>
62-
<span slot="label" v-if="!item.hideLabel">
63-
{{ item.label }}
64-
</span>
65-
<template>
66-
<el-col :span="item.inputWidth">
67-
<template v-if="item.relationName">
68-
<ItemDiaplsy
69-
v-model="
70-
formData[item.relationName][item.relationValueKey]
71-
"
72-
:form-item="item"
73-
:form-items="attrs.formItems"
74-
:form-data="formData"
75-
/>
76-
</template>
77-
<template v-else>
78-
<ItemDiaplsy
79-
v-model="formData[item.prop]"
80-
:form-item="item"
81-
:form-items="attrs.formItems"
82-
:form-data="formData"
83-
/>
84-
</template>
85-
86-
<div
87-
v-if="item.help"
88-
class="form-item-help"
89-
v-html="item.help"
90-
></div>
91-
</el-col>
92-
</template>
93-
</el-form-item>
94-
<component
95-
v-if="item.footerComponent"
96-
:is="item.footerComponent.componentName"
97-
:attrs="item.footerComponent"
98-
/>
99-
</ItemIf>
100-
</template>
36+
<component
37+
v-for="(row, index) in attrs.formItemLayout"
38+
:key="index"
39+
:is="row.componentName"
40+
:attrs="row"
41+
:formData="formData"
42+
:formItems="attrs.formItems"
43+
:tab="tab"
44+
/>
10145
</component>
10246
</component>
103-
<component
104-
:is="attrs.actions.fixed ? 'Affix' : 'div'"
105-
:offset-bottom="20"
106-
>
47+
<component :is="attrs.actions.fixed ? 'Affix' : 'div'" :offset-bottom="20">
10748
<div
10849
class="form-bottom-actions flex padding-tb"
10950
:class="{ 'form-bottom-actions-fixedxxx': attrs.actions.fixed }"
@@ -137,9 +78,12 @@
13778
:autofocus="attrs.actions.cancelButton.autofocus"
13879
:loading="loading"
13980
@click="onCancel"
140-
><template v-if="attrs.actions.cancelButton.content">{{
81+
>
82+
<template v-if="attrs.actions.cancelButton.content">
83+
{{
14184
attrs.actions.cancelButton.content
142-
}}</template>
85+
}}
86+
</template>
14387
</el-button>
14488

14589
<el-button
@@ -156,33 +100,29 @@
156100
:autofocus="attrs.actions.submitButton.autofocus"
157101
:loading="loading"
158102
@click="submitForm(attrs.ref || 'form')"
159-
><template v-if="attrs.actions.submitButton.content">{{
103+
>
104+
<template v-if="attrs.actions.submitButton.content">
105+
{{
160106
attrs.actions.submitButton.content
161-
}}</template>
107+
}}
108+
</template>
162109
</el-button>
163110
</div>
164111
</div>
165112
</component>
166113
</el-form>
167114
</component>
168-
<component
169-
v-if="attrs.bottom"
170-
:is="attrs.bottom.componentName"
171-
:attrs="attrs.bottom"
172-
/>
115+
<component v-if="attrs.bottom" :is="attrs.bottom.componentName" :attrs="attrs.bottom" />
173116
</div>
174117
</template>
175118
<script>
176119
import { BaseComponent } from "@/mixins.js";
177-
import ItemDiaplsy from "./ItemDiaplsy";
178-
import ItemIf from "./ItemIf";
120+
179121
import { isNull } from "../../utils";
180122
import Affix from "../widgets/common/affix";
181123
export default {
182124
mixins: [BaseComponent],
183125
components: {
184-
ItemDiaplsy,
185-
ItemIf,
186126
Affix,
187127
},
188128
props: {
@@ -192,14 +132,6 @@ export default {
192132
isEdit() {
193133
return this.attrs.mode == "edit";
194134
},
195-
ignoreKey() {
196-
return this._.map(
197-
this.attrs.formItems.filter(
198-
(e) => !e.ignoreEmpty || !isNull(this.formData[e.prop])
199-
),
200-
"prop"
201-
);
202-
},
203135
},
204136
data() {
205137
return {
@@ -250,7 +182,8 @@ export default {
250182
this.$refs[formName].validate((valid) => {
251183
if (valid) {
252184
this.loading = true;
253-
const formatData = this._.pick(this.formData, this.ignoreKey);
185+
console.log(this.ignoreKey);
186+
const formatData = this._.omit(this.formData, this.attrs.ignoreEmptyProps);
254187
if (this.isEdit) {
255188
this.$http
256189
.put(this.attrs.action, formatData)

‎resources/js/components/form/FormItem.vue

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
<template>
2+
<ItemIf v-if="tab == item.tab" :form_item="item" :form_items="formItems" :form_data="formData">
3+
<component
4+
v-if="item.topComponent"
5+
:is="item.topComponent.componentName"
6+
:attrs="item.topComponent"
7+
/>
8+
9+
<el-form-item
10+
:prop="item.prop"
11+
:label-width="item.labelWidth"
12+
:error="item.error"
13+
:show-message="item.showMessage"
14+
:inline-message="item.inlineMessage"
15+
:size="item.size"
16+
>
17+
<span slot="label" v-if="!item.hideLabel">{{ item.label }}</span>
18+
<template>
19+
<el-col :span="item.inputWidth">
20+
<template v-if="item.relationName">
21+
<ItemDiaplsy
22+
v-model="
23+
formData[item.relationName][item.relationValueKey]
24+
"
25+
:form-item="item"
26+
:form-items="formItems"
27+
:form-data="formData"
28+
v-bind="$attrs"
29+
/>
30+
</template>
31+
<template v-else>
32+
<ItemDiaplsy
33+
v-model="formData[item.prop]"
34+
:form-item="item"
35+
:form-items="formItems"
36+
:form-data="formData"
37+
v-bind="$attrs"
38+
/>
39+
</template>
40+
41+
<div v-if="item.help" class="form-item-help" v-html="item.help"></div>
42+
</el-col>
43+
</template>
44+
</el-form-item>
45+
<component
46+
v-if="item.footerComponent"
47+
:is="item.footerComponent.componentName"
48+
:attrs="item.footerComponent"
49+
/>
50+
</ItemIf>
51+
</template>
52+
<script>
53+
import ItemDiaplsy from "./ItemDiaplsy";
54+
import ItemIf from "./ItemIf";
55+
export default {
56+
props: ["attrs", "tab", "formData", "formItems"],
57+
components: {
58+
ItemDiaplsy,
59+
ItemIf,
60+
},
61+
mounted() {},
62+
computed: {
63+
item() {
64+
return this.attrs;
65+
},
66+
},
67+
};
68+
</script>

‎resources/js/components/grid/ColumnDisplay.vue

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,24 +2,24 @@
22
<div class="display-column">
33
<template v-if="_.isArray(value)">
44
<template v-for="(item, key) in value">
5-
<Value :value="item" :column-attr="columnAttr" :key="key" :row="row" :column-value="value" />
5+
<Column :value="item" :column-attr="columnAttr" :key="key" :row="row" :column-value="value" />
66
</template>
77
</template>
88
<template v-else>
9-
<Value :value="value" :column-attr="columnAttr" :row="row" :column-value="value" />
9+
<Column :value="value" :column-attr="columnAttr" :row="row" :column-value="value" />
1010
</template>
1111
</div>
1212
</template>
1313
<script>
1414
import { getArrayValue } from "@/utils";
15-
import Value from "./Column";
15+
import Column from "./Column";
1616
export default {
1717
props: {
1818
scope: Object,
1919
columns: Array
2020
},
2121
components: {
22-
Value
22+
Column
2323
},
2424
data() {
2525
return {};

‎resources/js/components/grid/Table.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -515,10 +515,10 @@ export default {
515515
background-color: #ebeef5;
516516
}
517517
.filter-form {
518-
padding: 10px;
518+
padding: 10px 10px 0 10px;
519519
background-color: #ffffff;
520520
.el-form-item {
521-
margin-bottom: 0px;
521+
margin-bottom: 10px;
522522
.el-form-item__label {
523523
padding: 0;
524524
}

‎resources/js/components/layout/Column.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
:key="index"
1414
:is="content.componentName"
1515
:attrs="content"
16-
v-bind="$props"
16+
v-bind="$attrs"
1717
/>
1818
</el-col>
1919
</template>

‎resources/js/components/layout/Content.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
:key="index"
1414
:is="row.componentName"
1515
:attrs="row"
16-
v-bind="$props"
16+
v-bind="$attrs"
1717
/>
1818
</div>
1919
</div>

‎resources/js/components/layout/Row.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
:key="index"
1414
:is="column.componentName"
1515
:attrs="column"
16-
v-bind="$props"
16+
v-bind="$attrs"
1717
/>
1818
</el-row>
1919
</template>

0 commit comments

Comments
 (0)