diff --git a/src/components/Form/src/hooks/useFormValues.ts b/src/components/Form/src/hooks/useFormValues.ts index a45373ad1ae96dacb735d93e6c4e393f95dbbce6..0bae86ac5be9744a9aab93a168b7f7e1392bff83 100644 --- a/src/components/Form/src/hooks/useFormValues.ts +++ b/src/components/Form/src/hooks/useFormValues.ts @@ -11,6 +11,43 @@ interface UseFormValuesContext { getProps: ComputedRef; formModel: Recordable; } + +/** + * @desription deconstruct array-link key. This method will mutate the target. + */ +function tryDeconstructArray(key: string, value: any, target: Recordable) { + const pattern = /^\[(.+)\]$/; + if (pattern.test(key)) { + const match = key.match(pattern); + if (match && match[1]) { + const keys = match[1].split(','); + value = Array.isArray(value) ? value : [value]; + keys.forEach((k, index) => { + set(target, k.trim(), value[index]); + }); + return true; + } + } +} + +/** + * @desription deconstruct object-link key. This method will mutate the target. + */ +function tryDeconstructObject(key: string, value: any, target: Recordable) { + const pattern = /^\{(.+)\}$/; + if (pattern.test(key)) { + const match = key.match(pattern); + if (match && match[1]) { + const keys = match[1].split(','); + value = isObject(value) ? value : {}; + keys.forEach((k) => { + set(target, k.trim(), value[k.trim()]); + }); + return true; + } + } +} + export function useFormValues({ defaultValueRef, getSchema, @@ -41,7 +78,10 @@ export function useFormValues({ if (isString(value)) { value = value.trim(); } - set(res, key, value); + if (!tryDeconstructArray(key, value, res) && !tryDeconstructObject(key, value, res)) { + // 没有解构成功的,按原样赋值 + set(res, key, value); + } } return handleRangeTimeValue(res); } diff --git a/src/views/demo/form/index.vue b/src/views/demo/form/index.vue index 7188f7255f1571727347240112297ca92dd2a1b2..675b51b60ff61d6ea3e18e7b7414acddb97bd4a4 100644 --- a/src/views/demo/form/index.vue +++ b/src/views/demo/form/index.vue @@ -530,6 +530,22 @@ span: 8, }, }, + { + field: 'divider-deconstruct', + component: 'Divider', + label: '字段解构', + helpMessage: ['如果组件的值是 array 或者 object', '可以根据 ES6 的解构语法分别取值'], + }, + { + field: '[startTime, endTime]', + label: '时间范围', + component: 'RangePicker', + componentProps: { + format: 'YYYY-MM-DD HH:mm:ss', + placeholder: ['开始时间', '结束时间'], + showTime: { format: 'HH:mm:ss' }, + }, + }, { field: 'divider-others', component: 'Divider', @@ -602,6 +618,7 @@ keyword.value = ''; }, handleSubmit: (values: any) => { + console.log('values', values); createMessage.success('click search,values:' + JSON.stringify(values)); }, check,