diff --git a/src/components/Form/src/components/FormItem.vue b/src/components/Form/src/components/FormItem.vue index ca13ff56c2d295b26445148c8a941573a3df4648..fb83223fcfc32e6fc02dff6d09c83040cfe44584 100644 --- a/src/components/Form/src/components/FormItem.vue +++ b/src/components/Form/src/components/FormItem.vue @@ -170,8 +170,8 @@ if (component.includes('Input') || component.includes('Textarea')) { rule.whitespace = true; } - - setComponentRuleType(rule, component); + const valueFormat = unref(getComponentsProps)?.valueFormat; + setComponentRuleType(rule, component, valueFormat); } } @@ -203,9 +203,7 @@ if (propsData[eventKey]) { propsData[eventKey](e); } - const target = e ? e.target : null; - const value = target ? (isCheck ? target.checked : target.value) : e; props.setFormModel(field, value); }, diff --git a/src/components/Form/src/helper.ts b/src/components/Form/src/helper.ts index 4a00e4612f2e641f63d7aa29ed3286344a2adf56..d56ed5cec3148f109036823e2014869260c8c9ef 100644 --- a/src/components/Form/src/helper.ts +++ b/src/components/Form/src/helper.ts @@ -1,7 +1,8 @@ import type { ValidationRule } from 'ant-design-vue/lib/form/Form'; import type { ComponentType } from './types/index'; import { useI18n } from '/@/hooks/web/useI18n'; -import { isNumber } from '/@/utils/is'; +import { dateUtil } from '/@/utils/dateUtil'; +import { isNumber, isObject } from '/@/utils/is'; const { t } = useI18n(); @@ -28,13 +29,19 @@ export function createPlaceholderMessage(component: ComponentType) { return ''; } +const DATE_TYPE = ['DatePicker', 'MonthPicker', 'WeekPicker', 'TimePicker']; + function genType() { - return ['DatePicker', 'MonthPicker', 'RangePicker', 'WeekPicker', 'TimePicker']; + return [...DATE_TYPE, 'RangePicker']; } -export function setComponentRuleType(rule: ValidationRule, component: ComponentType) { +export function setComponentRuleType( + rule: ValidationRule, + component: ComponentType, + valueFormat: string +) { if (['DatePicker', 'MonthPicker', 'WeekPicker', 'TimePicker'].includes(component)) { - rule.type = 'object'; + rule.type = valueFormat ? 'string' : 'object'; } else if (['RangePicker', 'Upload', 'CheckboxGroup', 'TimePicker'].includes(component)) { rule.type = 'array'; } else if (['InputNumber'].includes(component)) { @@ -42,6 +49,15 @@ export function setComponentRuleType(rule: ValidationRule, component: ComponentT } } +export function processDateValue(attr: Recordable, component: string) { + const { valueFormat, value } = attr; + if (valueFormat) { + attr.value = isObject(value) ? dateUtil(value).format(valueFormat) : value; + } else if (DATE_TYPE.includes(component) && value) { + attr.value = dateUtil(attr.value); + } +} + export function handleInputNumberValue(component?: ComponentType, val?: any) { if (!component) return val; if (['Input', 'InputPassword', 'InputSearch', 'InputTextArea'].includes(component)) { diff --git a/src/components/Form/src/hooks/useFormEvents.ts b/src/components/Form/src/hooks/useFormEvents.ts index ce34911b56090af3e4a9a4d760fadb3996e3808b..0045dfc420b4a99d6f08a4c31c84c31d504d78a0 100644 --- a/src/components/Form/src/hooks/useFormEvents.ts +++ b/src/components/Form/src/hooks/useFormEvents.ts @@ -73,7 +73,12 @@ export function useFormEvents({ } formModel[key] = arr; } else { - formModel[key] = value ? dateUtil(value) : null; + const { componentProps } = schema || {}; + let _props = componentProps as any; + if (typeof componentProps === 'function') { + _props = _props(); + } + formModel[key] = value ? (_props?.valueFormat ? value : dateUtil(value)) : null; } } else { formModel[key] = value; diff --git a/src/views/demo/form/RuleForm.vue b/src/views/demo/form/RuleForm.vue index efe02bb5edb2e6fba664472f67e26f250ea2c3be..6af3232c76891ce639baf5d6064024270bfcfe30 100644 --- a/src/views/demo/form/RuleForm.vue +++ b/src/views/demo/form/RuleForm.vue @@ -55,6 +55,18 @@ }, required: true, }, + { + field: 'field33', + component: 'DatePicker', + label: '字段33', + colProps: { + span: 8, + }, + componentProps: { + valueFormat: 'YYYY-MM-DD', + }, + rules: [{ required: true, type: 'string' }], + }, { field: 'field44', component: 'InputCountDown', @@ -95,7 +107,7 @@ ], }, { - field: 'field44', + field: 'field441', component: 'Input', label: '自定义校验', colProps: { @@ -198,6 +210,8 @@ field1: 1111, field5: ['1'], field7: '1', + field33: '2020-12-12', + field3: '2020-12-12', }); } return {