xueyitt
1 day ago
committed by
GitHub
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with
25 additions and
2 deletions
-
packages/@core/ui-kit/form-ui/src/form-render/form-field.vue
-
packages/@core/ui-kit/form-ui/src/types.ts
-
playground/src/views/examples/form/basic.vue
|
|
@ -48,6 +48,7 @@ const { |
|
|
modelPropName, |
|
|
modelPropName, |
|
|
renderComponentContent, |
|
|
renderComponentContent, |
|
|
rules, |
|
|
rules, |
|
|
|
|
|
help, |
|
|
} = defineProps< |
|
|
} = defineProps< |
|
|
Props & { |
|
|
Props & { |
|
|
commonComponentProps: MaybeComponentProps; |
|
|
commonComponentProps: MaybeComponentProps; |
|
|
@ -174,6 +175,18 @@ const computedProps = computed(() => { |
|
|
}; |
|
|
}; |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
// 自定义帮助信息 |
|
|
|
|
|
const computedHelp = computed(() => { |
|
|
|
|
|
return help ? onHelpFunc : undefined; |
|
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
const onHelpFunc = () => { |
|
|
|
|
|
if (!help) { |
|
|
|
|
|
return undefined; |
|
|
|
|
|
} |
|
|
|
|
|
return isFunction(help) ? help(values.value, formApi!) : help; |
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
watch( |
|
|
watch( |
|
|
() => computedProps.value?.autofocus, |
|
|
() => computedProps.value?.autofocus, |
|
|
(value) => { |
|
|
(value) => { |
|
|
@ -322,7 +335,7 @@ onUnmounted(() => { |
|
|
labelClass, |
|
|
labelClass, |
|
|
) |
|
|
) |
|
|
" |
|
|
" |
|
|
:help="help" |
|
|
:help="computedHelp" |
|
|
:colon="colon" |
|
|
:colon="colon" |
|
|
:label="label" |
|
|
:label="label" |
|
|
:required="shouldRequired && !hideRequiredMark" |
|
|
:required="shouldRequired && !hideRequiredMark" |
|
|
|
|
|
@ -67,6 +67,14 @@ export type FormActions = FormContext<GenericObject>; |
|
|
|
|
|
|
|
|
export type CustomRenderType = (() => Component | string) | string; |
|
|
export type CustomRenderType = (() => Component | string) | string; |
|
|
|
|
|
|
|
|
|
|
|
// 动态渲染参数
|
|
|
|
|
|
export type CustomParamsRenderType = |
|
|
|
|
|
| (( |
|
|
|
|
|
value: Partial<Record<string, any>>, |
|
|
|
|
|
actions: FormActions, |
|
|
|
|
|
) => Component | string) |
|
|
|
|
|
| string; |
|
|
|
|
|
|
|
|
export type FormSchemaRuleType = |
|
|
export type FormSchemaRuleType = |
|
|
| 'required' |
|
|
| 'required' |
|
|
| 'selectRequired' |
|
|
| 'selectRequired' |
|
|
@ -254,7 +262,7 @@ export interface FormSchema< |
|
|
/** 字段名 */ |
|
|
/** 字段名 */ |
|
|
fieldName: string; |
|
|
fieldName: string; |
|
|
/** 帮助信息 */ |
|
|
/** 帮助信息 */ |
|
|
help?: CustomRenderType; |
|
|
help?: CustomParamsRenderType; |
|
|
/** 是否隐藏表单项 */ |
|
|
/** 是否隐藏表单项 */ |
|
|
hide?: boolean; |
|
|
hide?: boolean; |
|
|
/** 表单项 */ |
|
|
/** 表单项 */ |
|
|
|
|
|
@ -281,6 +281,8 @@ const [BaseForm, baseFormApi] = useVbenForm({ |
|
|
{ |
|
|
{ |
|
|
component: 'DatePicker', |
|
|
component: 'DatePicker', |
|
|
fieldName: 'datePicker', |
|
|
fieldName: 'datePicker', |
|
|
|
|
|
help: (values) => |
|
|
|
|
|
[`这是一个可输出其他字段值的帮助信息${values?.rate}`].map((v) => h('p', v)), |
|
|
label: '日期选择框', |
|
|
label: '日期选择框', |
|
|
}, |
|
|
}, |
|
|
{ |
|
|
{ |
|
|
|