diff --git a/src/components/Form/src/BasicForm.vue b/src/components/Form/src/BasicForm.vue index 13ce15db..63e942c9 100644 --- a/src/components/Form/src/BasicForm.vue +++ b/src/components/Form/src/BasicForm.vue @@ -54,7 +54,7 @@ import { useFormValues } from './hooks/useFormValues'; import useAdvanced from './hooks/useAdvanced'; - import { useFormEvents } from './hooks/useFormEvents'; + import { itemIsUploadComponent, useFormEvents } from './hooks/useFormEvents'; import { createFormContext } from './hooks/useFormContext'; import { useAutoFocus } from './hooks/useAutoFocus'; import { useModalContext } from '@/components/Modal'; @@ -64,7 +64,7 @@ import { useDesign } from '@/hooks/web/useDesign'; import { cloneDeep } from 'lodash-es'; import { TableActionType } from '@/components/Table'; - import { isFunction } from '@/utils/is'; + import { isArray, isFunction } from '@/utils/is'; defineOptions({ name: 'BasicForm' }); @@ -165,14 +165,17 @@ schema.defaultValue = def; } } + // handle upload type + if (defaultValue && itemIsUploadComponent(schema?.component)) { + if (isArray(defaultValue)) { + schema.defaultValue = defaultValue; + } else if (typeof defaultValue == 'string') { + schema.defaultValue = [defaultValue]; + } + } // handle schema.valueFormat - if ( - isHandleDefaultValue && - defaultValue && - component && - isFunction(valueFormat) - ) { + if (isHandleDefaultValue && defaultValue && component && isFunction(valueFormat)) { schema.defaultValue = valueFormat({ value: defaultValue, schema, diff --git a/src/components/Form/src/helper.ts b/src/components/Form/src/helper.ts index 53d068fb..09f3c4a3 100644 --- a/src/components/Form/src/helper.ts +++ b/src/components/Form/src/helper.ts @@ -31,6 +31,15 @@ export function createPlaceholderMessage(component: ComponentType) { const DATE_TYPE = ['DatePicker', 'MonthPicker', 'WeekPicker', 'TimePicker']; +/** + * 上传组件 + */ +export const uploadItemType: ComponentType[] = [ + 'Upload', + 'ImageUpload' +]; + + function genType() { return [...DATE_TYPE, 'RangePicker',"TimeRangePicker"]; } @@ -45,7 +54,7 @@ export function setComponentRuleType( } if (['DatePicker', 'MonthPicker', 'WeekPicker', 'TimePicker'].includes(component)) { rule.type = valueFormat ? 'string' : 'object'; - } else if (['RangePicker', 'Upload', 'CheckboxGroup'].includes(component)) { + } else if (['RangePicker', 'CheckboxGroup'].includes(component)) { rule.type = 'array'; } else if (['InputNumber'].includes(component)) { rule.type = 'number'; diff --git a/src/components/Form/src/hooks/useFormEvents.ts b/src/components/Form/src/hooks/useFormEvents.ts index 150efa91..a664ae9f 100644 --- a/src/components/Form/src/hooks/useFormEvents.ts +++ b/src/components/Form/src/hooks/useFormEvents.ts @@ -4,10 +4,16 @@ import type { NamePath } from 'ant-design-vue/lib/form/interface'; import { unref, toRaw, nextTick } from 'vue'; import { isArray, isFunction, isObject, isString, isNil } from '@/utils/is'; import { deepMerge } from '@/utils'; -import { dateItemType, defaultValueComponents, isIncludeSimpleComponents } from '../helper'; +import { + dateItemType, + defaultValueComponents, + isIncludeSimpleComponents, + uploadItemType, +} from '../helper'; import { dateUtil } from '@/utils/dateUtil'; import { cloneDeep, has, uniqBy, get, set } from 'lodash-es'; import { error } from '@/utils/log'; +import { ComponentProps } from '../types'; interface UseFormActionContext { emit: EmitType; @@ -19,7 +25,12 @@ interface UseFormActionContext { schemaRef: Ref; handleFormValues: Fn; } - + /** + * @description: Is it upload + */ + export function itemIsUploadComponent(key: keyof ComponentProps) { + return uploadItemType.includes(key); + } function tryConstructArray(field: string, values: Recordable = {}): any[] | undefined { const pattern = /^\[(.+)\]$/; if (pattern.test(field)) { @@ -123,7 +134,20 @@ export function useFormEvents({ } } } - + // Adapt upload component + if (itemIsUploadComponent(schema?.component)) { + constructValue = get(value, key); + const fieldValue = constructValue || value; + if (fieldValue) { + if (isArray(fieldValue)) { + unref(formModel)[key] = fieldValue; + } else if (typeof fieldValue == 'string') { + unref(formModel)[key] = [fieldValue]; + } + } + validKeys.push(key); + return + } // Adapt common component if (hasKey) { constructValue = get(value, key); diff --git a/src/components/Upload/src/BasicUpload.vue b/src/components/Upload/src/BasicUpload.vue index 06fe69b1..36f9eb93 100644 --- a/src/components/Upload/src/BasicUpload.vue +++ b/src/components/Upload/src/BasicUpload.vue @@ -85,6 +85,9 @@ const value = { ...attrs, ...props }; return omit(value, 'onChange'); }); + + const isFirstRender = ref(true) + function getValue(valueKey="url") { const list = (fileList.value || []).map((item: any) => { return item[valueKey]; @@ -124,9 +127,15 @@ }) as any; } emit('update:value', values); - emit('change', values); + if(!isFirstRender.value){ + emit('change', values); + isFirstRender.value = false + } + }, + { + immediate: true, + deep: true, }, - { immediate: true }, ); // 上传modal保存操作 diff --git a/src/components/Upload/src/components/ImageUpload.vue b/src/components/Upload/src/components/ImageUpload.vue index 74acd21a..6e833094 100644 --- a/src/components/Upload/src/components/ImageUpload.vue +++ b/src/components/Upload/src/components/ImageUpload.vue @@ -63,6 +63,7 @@ const fileList = ref([]); const isLtMsg = ref(true); const isActMsg = ref(true); + const isFirstRender = ref(true) watch( () => props.value, @@ -94,10 +95,13 @@ }) as UploadProps['fileList']; } emit('update:value', value); - emit('change', value); + if(!isFirstRender.value){ + emit('change', value); + isFirstRender.value = false + } }, - { - immediate: true, + { + immediate: true, deep: true, }, );