Merge branch 'main' of https://github.com/vbenjs/vue-vben-admin into dev
This commit is contained in:
@@ -473,6 +473,8 @@ export interface FormSchema<
|
|||||||
fieldName: string;
|
fieldName: string;
|
||||||
/** 帮助信息 */
|
/** 帮助信息 */
|
||||||
help?: CustomRenderType;
|
help?: CustomRenderType;
|
||||||
|
/** 是否隐藏表单项 */
|
||||||
|
hide?: boolean;
|
||||||
/** 表单的标签(如果是一个string,会用于默认必选规则的消息提示) */
|
/** 表单的标签(如果是一个string,会用于默认必选规则的消息提示) */
|
||||||
label?: CustomRenderType;
|
label?: CustomRenderType;
|
||||||
/** 自定义组件内部渲染 */
|
/** 自定义组件内部渲染 */
|
||||||
|
|||||||
@@ -360,7 +360,6 @@ export class FormApi {
|
|||||||
return true;
|
return true;
|
||||||
});
|
});
|
||||||
const filteredFields = fieldMergeFn(fields, form.values);
|
const filteredFields = fieldMergeFn(fields, form.values);
|
||||||
this.handleStringToArrayFields(filteredFields);
|
|
||||||
form.setValues(filteredFields, shouldValidate);
|
form.setValues(filteredFields, shouldValidate);
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -370,7 +369,6 @@ export class FormApi {
|
|||||||
const form = await this.getForm();
|
const form = await this.getForm();
|
||||||
await form.submitForm();
|
await form.submitForm();
|
||||||
const rawValues = toRaw(await this.getValues());
|
const rawValues = toRaw(await this.getValues());
|
||||||
this.handleArrayToStringFields(rawValues);
|
|
||||||
await this.state?.handleSubmit?.(rawValues);
|
await this.state?.handleSubmit?.(rawValues);
|
||||||
|
|
||||||
return rawValues;
|
return rawValues;
|
||||||
@@ -470,16 +468,31 @@ export class FormApi {
|
|||||||
return this.form;
|
return this.form;
|
||||||
}
|
}
|
||||||
|
|
||||||
private handleArrayToStringFields = (originValues: Record<string, any>) => {
|
private handleMultiFields = (originValues: Record<string, any>) => {
|
||||||
const arrayToStringFields = this.state?.arrayToStringFields;
|
const arrayToStringFields = this.state?.arrayToStringFields;
|
||||||
if (!arrayToStringFields || !Array.isArray(arrayToStringFields)) {
|
if (!arrayToStringFields || !Array.isArray(arrayToStringFields)) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
const processFields = (fields: string[], separator: string = ',') => {
|
const processFields = (fields: string[], separator: string = ',') => {
|
||||||
this.processFields(fields, separator, originValues, (value, sep) =>
|
this.processFields(fields, separator, originValues, (value, sep) => {
|
||||||
Array.isArray(value) ? value.join(sep) : value,
|
if (Array.isArray(value)) {
|
||||||
|
return value.join(sep);
|
||||||
|
} else if (typeof value === 'string') {
|
||||||
|
// 处理空字符串的情况
|
||||||
|
if (value === '') {
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
// 处理复杂分隔符的情况
|
||||||
|
const escapedSeparator = sep.replaceAll(
|
||||||
|
/[.*+?^${}()|[\]\\]/g,
|
||||||
|
String.raw`\$&`,
|
||||||
);
|
);
|
||||||
|
return value.split(new RegExp(escapedSeparator));
|
||||||
|
} else {
|
||||||
|
return value;
|
||||||
|
}
|
||||||
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
// 处理简单数组格式 ['field1', 'field2', ';'] 或 ['field1', 'field2']
|
// 处理简单数组格式 ['field1', 'field2', ';'] 或 ['field1', 'field2']
|
||||||
@@ -515,8 +528,7 @@ export class FormApi {
|
|||||||
const values = { ...originValues };
|
const values = { ...originValues };
|
||||||
const fieldMappingTime = this.state?.fieldMappingTime;
|
const fieldMappingTime = this.state?.fieldMappingTime;
|
||||||
|
|
||||||
this.handleStringToArrayFields(values);
|
this.handleMultiFields(values);
|
||||||
|
|
||||||
if (!fieldMappingTime || !Array.isArray(fieldMappingTime)) {
|
if (!fieldMappingTime || !Array.isArray(fieldMappingTime)) {
|
||||||
return values;
|
return values;
|
||||||
}
|
}
|
||||||
@@ -562,65 +574,6 @@ export class FormApi {
|
|||||||
return values;
|
return values;
|
||||||
};
|
};
|
||||||
|
|
||||||
private handleStringToArrayFields = (originValues: Record<string, any>) => {
|
|
||||||
const arrayToStringFields = this.state?.arrayToStringFields;
|
|
||||||
if (!arrayToStringFields || !Array.isArray(arrayToStringFields)) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const processFields = (fields: string[], separator: string = ',') => {
|
|
||||||
this.processFields(fields, separator, originValues, (value, sep) => {
|
|
||||||
if (typeof value !== 'string') {
|
|
||||||
return value;
|
|
||||||
}
|
|
||||||
// 处理空字符串的情况
|
|
||||||
if (value === '') {
|
|
||||||
return [];
|
|
||||||
}
|
|
||||||
// 处理复杂分隔符的情况
|
|
||||||
const escapedSeparator = sep.replaceAll(
|
|
||||||
/[.*+?^${}()|[\]\\]/g,
|
|
||||||
String.raw`\$&`,
|
|
||||||
);
|
|
||||||
return value.split(new RegExp(escapedSeparator));
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
// 处理简单数组格式 ['field1', 'field2', ';'] 或 ['field1', 'field2']
|
|
||||||
if (arrayToStringFields.every((item) => typeof item === 'string')) {
|
|
||||||
const lastItem =
|
|
||||||
arrayToStringFields[arrayToStringFields.length - 1] || '';
|
|
||||||
const fields =
|
|
||||||
lastItem.length === 1
|
|
||||||
? arrayToStringFields.slice(0, -1)
|
|
||||||
: arrayToStringFields;
|
|
||||||
const separator = lastItem.length === 1 ? lastItem : ',';
|
|
||||||
processFields(fields, separator);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 处理嵌套数组格式 [['field1'], ';']
|
|
||||||
arrayToStringFields.forEach((fieldConfig) => {
|
|
||||||
if (Array.isArray(fieldConfig)) {
|
|
||||||
const [fields, separator = ','] = fieldConfig;
|
|
||||||
if (Array.isArray(fields)) {
|
|
||||||
processFields(fields, separator);
|
|
||||||
} else if (typeof originValues[fields] === 'string') {
|
|
||||||
const value = originValues[fields];
|
|
||||||
if (value === '') {
|
|
||||||
originValues[fields] = [];
|
|
||||||
} else {
|
|
||||||
const escapedSeparator = separator.replaceAll(
|
|
||||||
/[.*+?^${}()|[\]\\]/g,
|
|
||||||
String.raw`\$&`,
|
|
||||||
);
|
|
||||||
originValues[fields] = value.split(new RegExp(escapedSeparator));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
private processFields = (
|
private processFields = (
|
||||||
fields: string[],
|
fields: string[],
|
||||||
separator: string,
|
separator: string,
|
||||||
|
|||||||
@@ -41,6 +41,7 @@ const {
|
|||||||
emptyStateValue,
|
emptyStateValue,
|
||||||
fieldName,
|
fieldName,
|
||||||
formFieldProps,
|
formFieldProps,
|
||||||
|
hide,
|
||||||
label,
|
label,
|
||||||
labelClass,
|
labelClass,
|
||||||
labelWidth,
|
labelWidth,
|
||||||
@@ -95,7 +96,7 @@ const currentRules = computed(() => {
|
|||||||
});
|
});
|
||||||
|
|
||||||
const visible = computed(() => {
|
const visible = computed(() => {
|
||||||
return isIf.value && isShow.value;
|
return !hide && isIf.value && isShow.value;
|
||||||
});
|
});
|
||||||
|
|
||||||
const shouldRequired = computed(() => {
|
const shouldRequired = computed(() => {
|
||||||
@@ -285,7 +286,7 @@ onUnmounted(() => {
|
|||||||
|
|
||||||
<template>
|
<template>
|
||||||
<FormField
|
<FormField
|
||||||
v-if="isIf"
|
v-if="!hide && isIf"
|
||||||
v-bind="fieldProps"
|
v-bind="fieldProps"
|
||||||
v-slot="slotProps"
|
v-slot="slotProps"
|
||||||
:name="fieldName"
|
:name="fieldName"
|
||||||
|
|||||||
@@ -257,6 +257,8 @@ export interface FormSchema<
|
|||||||
fieldName: string;
|
fieldName: string;
|
||||||
/** 帮助信息 */
|
/** 帮助信息 */
|
||||||
help?: CustomRenderType;
|
help?: CustomRenderType;
|
||||||
|
/** 是否隐藏表单项 */
|
||||||
|
hide?: boolean;
|
||||||
/** 表单项 */
|
/** 表单项 */
|
||||||
label?: CustomRenderType;
|
label?: CustomRenderType;
|
||||||
// 自定义组件内部渲染
|
// 自定义组件内部渲染
|
||||||
@@ -279,7 +281,8 @@ export interface FormRenderProps<
|
|||||||
*/
|
*/
|
||||||
arrayToStringFields?: ArrayToStringFields;
|
arrayToStringFields?: ArrayToStringFields;
|
||||||
/**
|
/**
|
||||||
* 是否展开,在showCollapseButton=true下生效
|
* 是否折叠,在showCollapseButton=true下生效
|
||||||
|
* true:折叠 false:展开
|
||||||
*/
|
*/
|
||||||
collapsed?: boolean;
|
collapsed?: boolean;
|
||||||
/**
|
/**
|
||||||
|
|||||||
Reference in New Issue
Block a user