fix(BasicForm->Upload): setValue and defaultValue uncertain && rule about first render (#3900)

* chore: upload component defaulttype should be array

* chore: upload component setFieldsValue  should be array

* chore(upload): split event between change and  update:value

* update

* update

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,

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';

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<FormSchema[]>;
   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);

src/components/Upload/src/BasicUpload.vue

@@ -85,6 +85,9 @@
     const value = { ...attrs, ...props };
     return omit(value, 'onChange');
   });
+
+  const isFirstRender = ref<boolean>(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保存操作

src/components/Upload/src/components/ImageUpload.vue

@@ -63,6 +63,7 @@
   const fileList = ref<UploadProps['fileList']>([]);
   const isLtMsg = ref<boolean>(true);
   const isActMsg = ref<boolean>(true);
+  const isFirstRender = ref<boolean>(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,
     },
   );