fix(form): ensure that the DateTime component checked properly,fix #511

vbenjs · Apr 24, 2021 · cb35341 · cb35341
1 parent 16ecf71
commit cb35341
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 10 deletions.
diff --git 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
@@ -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,20 +29,35 @@ 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)) {
     rule.type = 'number';
   }
 }
 
+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
@@ -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
@@ -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 {