Skip to content

Commit 925d9d2

Browse files
BingBlogBingBlog
committed
add function-field; add advaced doc section
1 parent 19c655d commit 925d9d2

File tree

19 files changed

+367
-364
lines changed

19 files changed

+367
-364
lines changed

‎build/webpack.website.dev.config.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ module.exports = merge(webpackBaseConfig, {
2323
devServer: {
2424
compress: true,
2525
port: 9000,
26-
host: 'localhost',
26+
host: '0.0.0.0',
2727
historyApiFallback: true,
2828
hot: true,
2929
inline: true,

‎form-generator.xmind‎

21.4 KB
Binary file not shown.

‎src/fieldGenerator.vue‎

Lines changed: 37 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -5,20 +5,20 @@
55
:style="itemStyle"
66
>
77
<component
8-
:is="getFieldCom(field.type)"
8+
:is="getFieldCom(computedField.type)"
99
:class="classes"
10-
:field="field"
10+
:field="computedField"
1111
:inline="inline"
12-
:size="field.size || size"
12+
:size="computedField.size || size"
1313
/>
1414
</div>
1515
<FormItem
1616
v-else-if="show"
17-
:label="field.label"
18-
:prop="field.model"
19-
:required="field.required"
17+
:label="computedField.label"
18+
:prop="computedField.model"
19+
:required="computedField.required"
2020
:rules="getRules"
21-
:label-width="field.labelWidth"
21+
:label-width="computedField.labelWidth"
2222
:class="itemClasses"
2323
:style="itemStyle"
2424
>
@@ -41,12 +41,12 @@
4141
/>
4242
</div>
4343
<component
44-
:is="getFieldCom(field.type)"
44+
:is="getFieldCom(computedField.type)"
4545
:class="classes"
46-
:field="field"
46+
:field="computedField"
4747
:inline="inline"
4848
:api-base="apiBase"
49-
:size="field.size || size"
49+
:size="computedField.size || size"
5050
:dynamic-config-data="requestInterceptor"
5151
:params-container="paramsContainer"
5252
@on-change="handleFieldChange"
@@ -67,6 +67,7 @@ import {classPrefix} from './utils/const';
6767
import {getValidType} from './utils/getValidType';
6868
import schema from 'async-validator';
6969
import axios from './utils/http';
70+
import {isFunction} from './utils/func';
7071
import {setValue} from './utils/processValue';
7172
7273
const notFormfields = ['Divider'];
@@ -88,7 +89,7 @@ export default {
8889
}
8990
},
9091
field: {
91-
type: [Object, Array],
92+
type: [Object, Array, Function],
9293
required: true,
9394
default() {
9495
return {};
@@ -115,7 +116,7 @@ export default {
115116
},
116117
computed: {
117118
classes() {
118-
return `${classPrefix}-${this.field.type.toLowerCase()}`;
119+
return `${classPrefix}-${this.computedField.type.toLowerCase()}`;
119120
},
120121
itemClasses() {
121122
return `${classPrefix}-form-item`;
@@ -127,12 +128,12 @@ export default {
127128
return `${classPrefix}-labelTip-content`;
128129
},
129130
notFormfield() {
130-
return notFormfields.includes(this.field.type);
131+
return notFormfields.includes(this.computedField.type);
131132
},
132133
itemStyle() {
133-
const inline = this.field.inline || this.inline;
134+
const inline = this.computedField.inline || this.inline;
134135
const itemWidth = inline ? this.itemWidth : (this.itemWidth || '100%');
135-
let width = this.field.width || itemWidth;
136+
let width = this.computedField.width || itemWidth;
136137
// 兼容老版本的字符串数值，如果是数值字符串，则转为int
137138
if (typeof width === 'string' && /^\d+$/.test(width)) {
138139
width = parseInt(width);
@@ -143,8 +144,17 @@ export default {
143144
// width: typeof width !== 'number' ? width + 'px' : width
144145
};
145146
},
146-
show() {
147+
computedField() {
147148
const field = this.field;
149+
if (field && isFunction(field)) {
150+
const params = Object.assign({}, this.form.model, this.paramsContainer);
151+
const newField = Object.assign({}, field(params));
152+
return newField;
153+
}
154+
return field;
155+
},
156+
show() {
157+
const field = this.computedField;
148158
const model = this.form.model;
149159
const validateValue = Object.assign({}, model || {}, this.paramsContainer || {});
150160
let show = true;
@@ -169,15 +179,15 @@ export default {
169179
return show;
170180
},
171181
labelTip() {
172-
let labelTip = this.field.labelTip || {};
182+
let labelTip = this.computedField.labelTip || {};
173183
return labelTip;
174184
},
175185
contentShow() {
176-
let content = this.field.labelTip && this.field.labelTip.content || {};
186+
let content = this.computedField.labelTip && this.computedField.labelTip.content || {};
177187
return content.ifShow;
178188
},
179189
getRules() {
180-
const field = this.field;
190+
const field = this.computedField;
181191
const type = field.type.toLowerCase();
182192
const subtype = field.subtype;
183193
@@ -249,7 +259,7 @@ export default {
249259
}
250260
},
251261
created() {
252-
let field = this.field;
262+
let field = this.computedField;
253263
// 老版本兼容
254264
if (field.subType) {
255265
field.subtype = field.subType;
@@ -266,14 +276,14 @@ export default {
266276
this.$emit('on-field-change', {
267277
model,
268278
value,
269-
field: this.field
279+
field: this.computedField
270280
});
271281
},
272282
handleFieldPreview(model, value) {
273283
this.$emit('on-field-preview', {
274284
model,
275285
value,
276-
field: this.field
286+
field: this.computedField
277287
});
278288
},
279289
handleSubmitClick(component) {
@@ -294,17 +304,17 @@ export default {
294304
},
295305
handleIconClick() {
296306
this.$emit('on-label-tip-click',{
297-
field: this.field
307+
field: this.computedField
298308
});
299309
},
300310
handleIconMouseEnter() {
301311
this.$emit('on-label-tip-mouseIn', {
302-
field: this.field
312+
field: this.computedField
303313
});
304314
},
305315
handleIconMouseLeave() {
306316
this.$emit('on-label-tip-mouseOut', {
307-
field: this.field
317+
field: this.computedField
308318
});
309319
},
310320
getFieldCom(comType = '') {
@@ -319,7 +329,7 @@ export default {
319329
320330
321331
submit(component) {
322-
let field = component.field;
332+
let field = component.computedField;
323333
return new Promise((resolve, reject) => {
324334
try {
325335
this.form.validate(
@@ -379,7 +389,7 @@ export default {
379389
},
380390
handleHttpRequest(component) {
381391
component.loading = true;
382-
let field = component.field;
392+
let field = component.computedField;
383393
this.doAjaxAction(component.field).then(() => {
384394
component.loading = false;
385395
this.$Message.info(`${field.text}成功!`);

‎src/formGenerator.vue‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -138,6 +138,7 @@
138138
<script>
139139
import FieldGenerator from './fieldGenerator';
140140
import {classPrefix} from './utils/const';
141+
import {isFunction} from './utils/func';
141142
import vClickOutside from 'v-click-outside';
142143
import {getValidType} from './utils/getValidType';
143144
import {setValue} from './utils/processValue';
@@ -384,6 +385,10 @@ export default {
384385
},
385386
386387
resetField(field) {
388+
if (field && isFunction(field)) {
389+
const params = Object.assign({}, this.form.model, this.paramsContainer);
390+
field = field(params);
391+
}
387392
let typeToResetValues = {
388393
string: '',
389394
array: [],

‎src/utils/func.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
export const isFunction = function checkIsFunction(f) {
2+
return f && {}.toString.call(f) === '[object Function]';
3+
};

‎website/code/advance/union-validate.js‎

Lines changed: 123 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,123 @@
1+
// validateForm
2+
let validateForm = {};
3+
4+
let validateFormFields = [
5+
{
6+
label: '查询方式',
7+
type: 'Radio',
8+
model: 'searchType',
9+
options: [
10+
{label: '立即', 'value': 'sync'},
11+
{label: '异步', 'value': 'async'}
12+
],
13+
required: true
14+
},
15+
function field(paramsContainer) {
16+
const config = {
17+
label: '条数上限',
18+
type: 'InputNumber',
19+
model: 'limit',
20+
required: true
21+
};
22+
if (paramsContainer.searchType === 'sync') {
23+
config.rules = [
24+
{
25+
type: 'number',
26+
max: 1000,
27+
message: '立即查询时，条数不可大于1千'
28+
}
29+
];
30+
}
31+
return config;
32+
},
33+
{
34+
type: 'Submit',
35+
subtype: 'primary',
36+
text: '提交',
37+
inline: true
38+
},
39+
{
40+
type: 'Reset',
41+
text: '重置',
42+
labelWidth: 0,
43+
inline: true
44+
}
45+
];
46+
47+
let validateFormModel = {
48+
searchType: 'async',
49+
limit: 2000,
50+
};
51+
52+
53+
validateForm.data = {
54+
fields: validateFormFields,
55+
model: validateFormModel
56+
};
57+
58+
validateForm.code = `
59+
<script>
60+
const fields = [
61+
{
62+
label: '查询方式',
63+
type: 'Radio',
64+
model: 'searchType',
65+
options: [
66+
{label: '立即', 'value': 'sync'},
67+
{label: '异步', 'value': 'async'}
68+
],
69+
required: true
70+
},
71+
function field(paramsContainer) {
72+
const config = {
73+
label: '条数上限',
74+
type: 'InputNumber',
75+
model: 'limit',
76+
required: true
77+
};
78+
if (paramsContainer.searchType === 'sync') {
79+
config.rules = [
80+
{
81+
type: 'number',
82+
max: 1000,
83+
message: '立即查询时，条数不可大于1千'
84+
}
85+
];
86+
}
87+
return config;
88+
},
89+
{
90+
type: 'Submit',
91+
subtype: 'primary',
92+
text: '提交',
93+
inline: true
94+
},
95+
{
96+
type: 'Reset',
97+
text: '重置',
98+
labelWidth: 0,
99+
inline: true
100+
}
101+
];
102+
const model = ${JSON.stringify(validateFormModel, null, 4)};
103+
export default {
104+
data() {
105+
return {
106+
fields,
107+
model
108+
};
109+
}
110+
};
111+
</script>
112+
<template>
113+
<FormGenerator
114+
:fields="fields"
115+
:model="model"
116+
/>
117+
</template>
118+
`;
119+
120+
121+
export default {
122+
validateForm,
123+
};

0 commit comments

Comments
 (0)