Skip to content

Commit 4385f45

Browse files
BingBlogBingBlog
committed
update Button Submit and docs
1 parent 925d9d2 commit 4385f45

File tree

22 files changed

+514
-297
lines changed

22 files changed

+514
-297
lines changed

‎src/fieldGenerator.vue‎

Lines changed: 80 additions & 97 deletions
Original file line numberDiff line numberDiff line change
@@ -267,6 +267,9 @@ export default {
267267
return field;
268268
},
269269
methods: {
270+
/**
271+
* 子组件value变更时触发
272+
*/
270273
handleFieldChange(model, value) {
271274
setValue.call(this, {
272275
originModel: this.form.model,
@@ -279,20 +282,17 @@ export default {
279282
field: this.computedField
280283
});
281284
},
282-
handleFieldPreview(model, value) {
285+
/**
286+
* Upload组件预览时触发
287+
*/
288+
handleFieldPreview(model, file) {
283289
this.$emit('on-field-preview', {
284290
model,
285-
value,
291+
file,
286292
field: this.computedField
287293
});
288294
},
289-
handleSubmitClick(component) {
290-
this.submit(component).then(() => {
291-
292-
}).catch(() => {
293295
294-
});
295-
},
296296
handleResetClick() {
297297
this.$emit('on-reset');
298298
},
@@ -327,110 +327,93 @@ export default {
327327
this.$emit('on-list-item-click', value);
328328
},
329329
330-
331-
submit(component) {
332-
let field = component.computedField;
333-
return new Promise((resolve, reject) => {
334-
try {
335-
this.form.validate(
336-
valid => {
337-
if (valid) {
338-
this.$emit('on-submit', {
339-
status: 'start',
340-
model: this.form.model,
341-
field
342-
});
343-
// 如果有api则需要在此处理请求
344-
if (field.action && field.action.api) {
345-
component.loading = true;
346-
this.doAjaxAction(field).then(res => {
347-
resolve(this.form.model);
348-
component.loading = false;
349-
if (field.action.onSuccess) {
350-
this.$emit('on-submit', {
351-
status: 'success',
352-
model: this.form.model,
353-
field,
354-
info: res
355-
});
356-
} else {
357-
this.$Message.info(`${field.text}成功!`);
358-
359-
}
360-
}).catch(e => {
361-
component.loading = false;
362-
if (field.action.onFail) {
363-
this.$emit('on-submit', {
364-
status: 'fail',
365-
model: this.form.model,
366-
field,
367-
info: e
368-
});
369-
} else {
370-
this.$Message.info(`${field.text}失败!`);
371-
372-
}
373-
reject();
374-
});
375-
}
376-
}
377-
else {
378-
reject(valid);
379-
}
380-
}
381-
);
382-
}
383-
catch(err) {
384-
// eslint-disable-next-line no-console
385-
console.log(err);
386-
reject(err);
387-
}
330+
/**
331+
* 处理子组件的提交行为，涉及到的子组件包含 Submit
332+
* 提交行为最终会emit到父组件
333+
*
334+
* @param {Object} component 触发提交事件的组件
335+
*/
336+
handleSubmitClick(component) {
337+
component.loading = true;
338+
let field = component.field;
339+
this.submit(field).then(({valid, model, res}) => {
340+
this.$emit('on-submit', {valid, model, field, res});
341+
component.loading = false;
342+
}).catch(({valid, model, error}) => {
343+
component.loading = false;
344+
this.$emit('on-submit', {valid, model, field, error});
388345
});
389346
},
347+
348+
/**
349+
* 处理子组件触发请求的行为，涉及到的子组件包含 Button
350+
* 请求行为最终会emit到父组件
351+
*
352+
* @param {Object} component 触发提交事件的组件
353+
*/
390354
handleHttpRequest(component) {
391355
component.loading = true;
392-
let field = component.computedField;
393-
this.doAjaxAction(component.field).then(() => {
356+
const field = component.field;
357+
const name = (field.action && field.action.name) || null;
358+
this.doAjaxAction(field).then(res => {
394359
component.loading = false;
395-
this.$Message.info(`${field.text}成功!`);
396-
}).catch(() => {
360+
this.$emit('on-button-event', {name, field, res});
361+
}).catch(res => {
397362
component.loading = false;
398-
this.$Message.info(`${field.text}失败!`);
363+
this.$emit('on-button-event', {name, field, res});
399364
});
400365
},
401366
402-
doAjaxAction(field) {
367+
/**
368+
* 提交处理，需要对表单进行校验，如果有请求行为，则触发请求，返回Promise
369+
*
370+
* @param {Object} field 触发提交事件的组件field配置
371+
* @return {Promise} 承诺提交的结果
372+
*/
373+
submit(field) {
403374
return new Promise((resolve, reject) => {
404-
try {
405-
let apiBase = this.apiBase || '';
406-
let finalApi = apiBase + field.action.api;
407-
const method = field.action.method || 'get';
408-
409-
this.requestMethod(method.toLowerCase(), finalApi, this.getParams(field)).then(res => {
410-
if (this.requestResolve(res)) {
411-
resolve(res);
412-
this.$emit('on-button-event', {
413-
name: 'ajaxSuccess',
414-
field,
415-
res
375+
this.form.validate().then(valid => {
376+
const model = this.form.model;
377+
if (valid) {
378+
// 如果提交配置了请求行为
379+
if (field.action && field.action.api) {
380+
this.doAjaxAction(field).then(res => {
381+
resolve({valid, model, res});
382+
}).catch(e => {
383+
reject({valid, model, res: e});
416384
});
385+
return;
417386
}
418-
else {
419-
reject(res);
420-
}
421-
}).catch(e => {
422-
reject(e);
423-
});
424-
}
425-
catch(err) {
426-
// eslint-disable-next-line no-console
427-
console.log(err);
428-
reject(err);
429-
}
387+
resolve({valid, model, res: null});
388+
}
389+
else {
390+
reject({valid, model: null, res: null});
391+
}
392+
});
393+
});
394+
},
395+
396+
397+
doAjaxAction(field) {
398+
return new Promise((resolve, reject) => {
399+
let apiBase = this.apiBase || '';
400+
let finalApi = apiBase + field.action.api;
401+
const method = field.action.method || 'get';
402+
const params = this.getParams(field.apiParams || 'all');
403+
this.requestMethod(method.toLowerCase(), finalApi, params).then(res => {
404+
if (this.requestResolve(res)) {
405+
resolve(res);
406+
}
407+
else {
408+
reject(res);
409+
}
410+
}).catch(e => {
411+
reject(e);
412+
});
430413
});
431414
},
432415
433-
getParams({apiParams}) {
416+
getParams(apiParams) {
434417
let formModel = this.form.model || {};
435418
// put current formModel and outside param into paramsContainer
436419
let paramsContainer = Object.assign({}, formModel, this.paramsContainer || {});

‎src/fields/fieldButton.vue‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -36,10 +36,6 @@ export default {
3636
field: {
3737
type: Object,
3838
required: true
39-
},
40-
apiBase: {
41-
type: String,
42-
default: ''
4339
}
4440
},
4541
data() {

‎src/fields/fieldCarousel.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,7 @@ export default {
6565
return this.options.length > 0 ? this.options : fieldOptions;
6666
},
6767
computedArrow() {
68-
if (this.computedOptions.length > 1) {
68+
if (this.computedOptions && this.computedOptions.length > 1) {
6969
return this.field.arrow || 'hover';
7070
}
7171
return 'never';

‎src/fields/fieldSubmit.vue‎

Lines changed: 27 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,33 @@
11
<template>
2+
<Poptip
3+
v-if="field.confirmPoptip"
4+
confirm
5+
:title="field.confirmPoptip.title"
6+
:placement="field.confirmPoptip.placement"
7+
:class="classes"
8+
:ok-text="field.confirmPoptip.okText"
9+
:cancel-text="field.confirmPoptip.cancelText"
10+
@on-ok="handleClick"
11+
>
12+
<Button
13+
:type="field.subtype || 'default'"
14+
:size="field.size || 'default'"
15+
:disabled="field.disabled || false"
16+
:loading="loading"
17+
>{{ field.text }}</Button>
18+
</Poptip>
219
<Button
20+
v-else
321
:type="field.subtype || 'default'"
422
:size="field.size || 'default'"
23+
:disabled="field.disabled || false"
24+
:class="classes"
525
:loading="loading"
626
@click="handleClick"
7-
>{{ field.text || '提交' }}</Button>
27+
>{{ field.text }}</Button>
828
</template>
929
<script>
30+
import {classPrefix} from '../utils/const';
1031
export default {
1132
props: {
1233
field: {
@@ -19,6 +40,11 @@ export default {
1940
loading: false
2041
};
2142
},
43+
computed: {
44+
classes() {
45+
return `${classPrefix}-${this.field.type.toLowerCase()}`;
46+
},
47+
},
2248
methods: {
2349
handleClick() {
2450
this.$emit('on-submit-click', this);

‎src/fields/fieldUpload.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -153,4 +153,4 @@ export default {
153153
}
154154
}
155155
};
156-
</script>
156+
</script>

0 commit comments

Comments
 (0)