Skip to content

Commit

Permalink
perf: tab分组表单校验失败后在tab签上显示错误
Browse files Browse the repository at this point in the history
  • Loading branch information
@greper
greper committed Nov 5, 2022
1 parent 9640150 commit bc673fb
Show file tree
Hide file tree
Showing 6 changed files with 135 additions and 73 deletions.
46 changes: 36 additions & 10 deletions packages/fast-crud/src/components/crud/fs-form.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,8 @@
class="fs-form"
:class="{
'fs-form-grid': display === 'grid',
'fs-form-flex': display === 'flex'
'fs-form-flex': display === 'flex',
'fs-form-invalid': validRef === false
}"
:model="form"
>
Expand Down Expand Up @@ -46,10 +47,10 @@
v-if="groupItemShow(groupItem)"
:[$fsui.collapse.keyName]="groupKey"
v-bind="groupItem"
:class="{ 'fs-form-group-error': errorsRef['group.' + groupKey] }"
>
<!-- tabPane的slots -->
<template v-for="(item, slotName) of groupItem.slots" :key="slotName" #[slotName]="scope">
<fs-render :render-func="item" :scope="scope" />
<fs-render :render-func="item" :scope="{ ...scope, hasError: errorsRef['group.' + groupKey] }" />
</template>
<!-- row -->
<component :is="$fsui.row.name" class="fs-row">
Expand Down Expand Up @@ -326,13 +327,14 @@ export default {
return {};
}
//找出没有添加进分组的字段
const groupedKeys = new Set();
_.forEach(group?.groups, (groupItem) => {
const groupedKeys = {};
_.forEach(group?.groups, (groupItem, key) => {
_.forEach(groupItem.columns, (item) => {
if (computedColumns.value[item] == null) {
utils.logger.warn("无效的分组字段：" + item);
return;
}
groupedKeys.add(item);
groupedKeys[item] = key;
});
});
Expand Down Expand Up @@ -362,7 +364,7 @@ export default {
if (value.order == null) {
value.order = Constants.orderDefault;
}
if (!computedGroup.value?.groupedKeys?.has(key)) {
if (computedGroup.value?.groupedKeys == null || computedGroup.value?.groupedKeys[key] == null) {
columns.push(value);
}
value.col = mergeCol(value.col);
Expand All @@ -389,12 +391,31 @@ export default {
ctx.emit("reset");
}
const validRef = ref();
const errorsRef = ref({});
function fillGroupError(fieldErrors) {
for (let key in fieldErrors) {
const group = computedGroup.value.groupedKeys[key];
if (group != null) {
fieldErrors["group." + group] = true;
}
}
}
async function submit() {
const valid = await ui.form.validateWrap(formRef.value);
if (!valid) {
try {
errorsRef.value = {};
await ui.form.validateWrap(formRef.value);
validRef.value = true;
} catch (e) {
validRef.value = false;
const validateErrors = ui.form.transformValidateErrors(e);
fillGroupError(validateErrors);
errorsRef.value = validateErrors;
ctx.emit("validationError", scope.value);
return;
throw e;
}
const formData = _.cloneDeep(toRaw(form));
const submitScope = { ...scope.value, form: formData };
logger.debug("form submit", JSON.stringify(form));
Expand Down Expand Up @@ -495,6 +516,8 @@ export default {
_.set(form, key, value);
doValueChange(key, value);
},
validRef,
errorsRef,
formRef,
computedColumns,
computedDefaultColumns,
Expand Down Expand Up @@ -526,6 +549,9 @@ export default {
padding-left: 30px;
padding-right: 30px;
}
.fs-form-invalid {
}
}
.fs-form-grid {
.fs-row {
Expand Down
1 change: 1 addition & 0 deletions packages/fast-crud/src/components/render/fs-render.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ export default {
},
setup() {},
render() {
console.log("'render", this.scope);
return this.renderFunc(this.scope);
}
};
31 changes: 21 additions & 10 deletions packages/ui/ui-antdv/src/antdv.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,9 +48,9 @@ import { DividerCI, PopoverCI, TooltipCI } from "../../ui-interface/src/ui-inter

export class Antdv implements UiInterface {
constructor(target) {
this.notification.get = target.Notification;
this.message.get = target.Message;
this.messageBox.get = target.MessageBox;
this.notification.instance = target.Notification;
this.message.instance = target.Message;
this.messageBox.instance = target.MessageBox;
}

type = "antdv";
Expand Down Expand Up @@ -92,7 +92,7 @@ export class Antdv implements UiInterface {

messageBox: MessageBoxCI = {
name: "a-model",
get: undefined,
instance: undefined,
open: context => {
return this.messageBox.confirm(context);
},
Expand All @@ -113,20 +113,20 @@ export class Antdv implements UiInterface {
onOk,
onCancel
};
this.messageBox.get.confirm(newContext);
this.messageBox.instance.confirm(newContext);
});
}
};

message: MessageCI = {
get: undefined,
instance: undefined,
name: "a-message",
open: (type, context) => {
let content = context;
if (typeof context !== "string") {
content = context.message || context.content;
}
this.message.get[type](content);
this.message.instance[type](content);
},
success: context => {
this.message.open("success", context);
Expand All @@ -143,7 +143,7 @@ export class Antdv implements UiInterface {
};

notification: NotificationCI = {
get: undefined,
instance: undefined,
name: "a-notification",
open: (type, context) => {
if (typeof context === "string") {
Expand All @@ -153,9 +153,9 @@ export class Antdv implements UiInterface {
}
type = type || context.type;
if (type) {
this.notification.get[type](context);
this.notification.instance[type](context);
} else {
this.notification.get.open(context);
this.notification.instance.open(context);
}
},
success: context => {
Expand Down Expand Up @@ -294,6 +294,17 @@ export class Antdv implements UiInterface {
},
validateWrap: async formRef => {
return formRef.validate();
},
transformValidateErrors: (e: Error) => {
// @ts-ignore
const errorFields = e.errorFields;
const errors = {};
for (const errorField of errorFields) {
for (const name of errorField.name) {
errors[name] = true;
}
}
return errors;
}
};

Expand Down
46 changes: 28 additions & 18 deletions packages/ui/ui-element/src/element.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,9 +47,9 @@ import { DividerCI, FormCI, PopoverCI, TooltipCI } from "../../ui-interface/src/
export class Element implements UiInterface {
constructor(target) {
if (target) {
this.notification.get = target.Notification;
this.message.get = target.Message;
this.messageBox.get = target.MessageBox;
this.notification.instance = target.Notification;
this.message.instance = target.Message;
this.messageBox.instance = target.MessageBox;
}
}

Expand Down Expand Up @@ -88,52 +88,52 @@ export class Element implements UiInterface {

messageBox: MessageBoxCI = {
name: "el-message-box",
get: undefined,
instance: undefined,
open: async context => {
return this.messageBox.get(context);
return this.messageBox.instance(context);
},
confirm: async context => {
return this.messageBox.get(context);
return this.messageBox.instance(context);
}
};

message: MessageCI = {
get: undefined,
instance: undefined,
name: "el-message",
open: context => {
this.message.get.open(context);
this.message.instance.open(context);
},
success: msg => {
this.message.get.success(msg);
this.message.instance.success(msg);
},
error: msg => {
this.message.get.error(msg);
this.message.instance.error(msg);
},
warn: msg => {
this.message.get.warning(msg);
this.message.instance.warning(msg);
},
info: msg => {
this.message.get(msg);
this.message.instance(msg);
}
};

notification: NotificationCI = {
get: undefined,
instance: undefined,
name: "el-notification",
open: context => {
this.notification.get.open(context);
this.notification.instance.open(context);
},
success: msg => {
this.notification.get.success(msg);
this.notification.instance.success(msg);
},
error: msg => {
this.notification.get.error(msg);
this.notification.instance.error(msg);
},
warn: msg => {
this.notification.get.warn(msg);
this.notification.instance.warn(msg);
},
info: msg => {
this.notification.get.success(msg);
this.notification.instance.success(msg);
}
};

Expand Down Expand Up @@ -281,6 +281,16 @@ export class Element implements UiInterface {
},
validateWrap: async formRef => {
return formRef.validate();
},
transformValidateErrors: (e: Error) => {
// @ts-ignore
const errorFields = e.code;
const errors = {};
for (const errorField of errorFields) {
const name = errorField.field;
errors[name] = true;
}
return errors;
}
};

Expand Down
27 changes: 19 additions & 8 deletions packages/ui/ui-interface/src/ui-interface.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ export interface FormCI {
inlineLayout: Object;
resetWrap: Function;
validateWrap: Function;
transformValidateErrors: (e:Error) => { [key: string]: any }
}
export interface SelectCI extends CI {
modelValue;
Expand Down Expand Up @@ -52,12 +53,16 @@ export interface DialogCI extends CI {
footer: Function;
buildOnClosedBind: Function;
customClass;
titleSlotName?:string;
buildWidthBind?:any;
buildInitBind?:any;
}

export interface DrawerCI extends CI {
visible;
customClass;
width;
hasContentWrap?:string;
}

export interface TableColumnCI extends CI {
Expand All @@ -68,7 +73,7 @@ export interface TableColumnCI extends CI {
}

export interface TableCI extends CI {
defaultRowKey: string;
defaultRowKey?: (string|((rowData:any)=>any));
data;
fixedHeaderNeedComputeBodyHeight: boolean;
headerDomSelector: string; //用于计算高度
Expand All @@ -83,11 +88,11 @@ export interface TableCI extends CI {
/**
* render的方法名
*/
renderMethod: string;
renderMethod?: string;
/**
* render 方法触发时的参数构建出一个scope
*/
rebuildRenderScope: Function;
rebuildRenderScope?: Function;
}

export interface CheckboxGroupCI extends CI {
Expand Down Expand Up @@ -128,6 +133,8 @@ export interface MessageCI extends CI {
error;
warn;
info;
instance:any;
getInstance?:any
}

export type MessageBoxContextType = {
Expand All @@ -141,17 +148,21 @@ export type MessageBoxOpenType = (context: MessageBoxContextType) => Promise<voi
export interface MessageBoxCI extends CI {
open: MessageBoxOpenType;
confirm: MessageBoxOpenType;
instance:any;
getInstance?:any
}
export interface NotificationCI extends CI {
open;
success;
error;
warn;
info;
instance:any;
getInstance?:any
}
export interface IconCI extends CI {
isComponent: boolean;
circle: Record<string, any>;
circle?: Record<string, any>;
}
export interface FormItemCI extends CI {
prop: string;
Expand Down Expand Up @@ -179,7 +190,7 @@ export interface FormWrapperCI extends CI {
buildWidthBind: (is, width: any) => {};
buildInitBind: (is) => {};
buildInnerBind: (opts: any) => {};
hasContentWrap: (is) => string;
hasContentWrap?: (is) => string|undefined;
}
export interface DatePickerCI extends CI {
modelValue;
Expand All @@ -195,9 +206,9 @@ export interface DropdownCI extends CI {
* 选项的渲染模式，slot or config
*/
renderMode: string;
value: string;
label: string;
children: string;
value?: string;
label?: string;
children?: string;
}
export interface DropdownMenuCI extends CI {
command: Function;
Expand Down
Loading

0 comments on commit bc673fb

Please sign in to comment.