canrd-outside / order-erp-front · Commits

Commit cb35341b8fd44eb649a79c3a2ae799c7bab8c4f6

Authored by Vben
1 parent 16ecf718

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

Inline Side-by-side
Showing 4 changed files with 43 additions and 10 deletions
src/components/Form/src/components/FormItem.vue
  View file @cb35341
... ... @@ -170,8 +170,8 @@
170 170 if (component.includes('Input') || component.includes('Textarea')) {
171 171 rule.whitespace = true;
172 172 }
173   -
174   - setComponentRuleType(rule, component);
  173 + const valueFormat = unref(getComponentsProps)?.valueFormat;
  174 + setComponentRuleType(rule, component, valueFormat);
175 175 }
176 176 }
177 177  
... ... @@ -203,9 +203,7 @@
203 203 if (propsData[eventKey]) {
204 204 propsData[eventKey](e);
205 205 }
206   -
207 206 const target = e ? e.target : null;
208   -
209 207 const value = target ? (isCheck ? target.checked : target.value) : e;
210 208 props.setFormModel(field, value);
211 209 },
... ...
src/components/Form/src/helper.ts
  View file @cb35341
1 1 import type { ValidationRule } from 'ant-design-vue/lib/form/Form';
2 2 import type { ComponentType } from './types/index';
3 3 import { useI18n } from '/@/hooks/web/useI18n';
4   -import { isNumber } from '/@/utils/is';
  4 +import { dateUtil } from '/@/utils/dateUtil';
  5 +import { isNumber, isObject } from '/@/utils/is';
5 6  
6 7 const { t } = useI18n();
7 8  
... ... @@ -28,13 +29,19 @@ export function createPlaceholderMessage(component: ComponentType) {
28 29 return '';
29 30 }
30 31  
  32 +const DATE_TYPE = ['DatePicker', 'MonthPicker', 'WeekPicker', 'TimePicker'];
  33 +
31 34 function genType() {
32   - return ['DatePicker', 'MonthPicker', 'RangePicker', 'WeekPicker', 'TimePicker'];
  35 + return [...DATE_TYPE, 'RangePicker'];
33 36 }
34 37  
35   -export function setComponentRuleType(rule: ValidationRule, component: ComponentType) {
  38 +export function setComponentRuleType(
  39 + rule: ValidationRule,
  40 + component: ComponentType,
  41 + valueFormat: string
  42 +) {
36 43 if (['DatePicker', 'MonthPicker', 'WeekPicker', 'TimePicker'].includes(component)) {
37   - rule.type = 'object';
  44 + rule.type = valueFormat ? 'string' : 'object';
38 45 } else if (['RangePicker', 'Upload', 'CheckboxGroup', 'TimePicker'].includes(component)) {
39 46 rule.type = 'array';
40 47 } else if (['InputNumber'].includes(component)) {
... ... @@ -42,6 +49,15 @@ export function setComponentRuleType(rule: ValidationRule, component: ComponentT
42 49 }
43 50 }
44 51  
  52 +export function processDateValue(attr: Recordable, component: string) {
  53 + const { valueFormat, value } = attr;
  54 + if (valueFormat) {
  55 + attr.value = isObject(value) ? dateUtil(value).format(valueFormat) : value;
  56 + } else if (DATE_TYPE.includes(component) && value) {
  57 + attr.value = dateUtil(attr.value);
  58 + }
  59 +}
  60 +
45 61 export function handleInputNumberValue(component?: ComponentType, val?: any) {
46 62 if (!component) return val;
47 63 if (['Input', 'InputPassword', 'InputSearch', 'InputTextArea'].includes(component)) {
... ...
src/components/Form/src/hooks/useFormEvents.ts
  View file @cb35341
... ... @@ -73,7 +73,12 @@ export function useFormEvents({
73 73 }
74 74 formModel[key] = arr;
75 75 } else {
76   - formModel[key] = value ? dateUtil(value) : null;
  76 + const { componentProps } = schema || {};
  77 + let _props = componentProps as any;
  78 + if (typeof componentProps === 'function') {
  79 + _props = _props();
  80 + }
  81 + formModel[key] = value ? (_props?.valueFormat ? value : dateUtil(value)) : null;
77 82 }
78 83 } else {
79 84 formModel[key] = value;
... ...
src/views/demo/form/RuleForm.vue
  View file @cb35341
... ... @@ -56,6 +56,18 @@
56 56 required: true,
57 57 },
58 58 {
  59 + field: 'field33',
  60 + component: 'DatePicker',
  61 + label: '字段33',
  62 + colProps: {
  63 + span: 8,
  64 + },
  65 + componentProps: {
  66 + valueFormat: 'YYYY-MM-DD',
  67 + },
  68 + rules: [{ required: true, type: 'string' }],
  69 + },
  70 + {
59 71 field: 'field44',
60 72 component: 'InputCountDown',
61 73 label: '验证码',
... ... @@ -95,7 +107,7 @@
95 107 ],
96 108 },
97 109 {
98   - field: 'field44',
  110 + field: 'field441',
99 111 component: 'Input',
100 112 label: '自定义校验',
101 113 colProps: {
... ... @@ -198,6 +210,8 @@
198 210 field1: 1111,
199 211 field5: ['1'],
200 212 field7: '1',
  213 + field33: '2020-12-12',
  214 + field3: '2020-12-12',
201 215 });
202 216 }
203 217 return {
... ...