fix(BasicForm->Upload): setValue and defaultValue uncertain && rule about f...

Electrolux

2024-06-06 cca7f59faca52888340facd449d3a66ad0659ea3

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 @@

const DATE_TYPE = ['DatePicker', 'MonthPicker', 'WeekPicker', 'TimePicker'];

/**
 * 上传组件
 */
export const uploadItemType: ComponentType[] = [
  'Upload',
  'ImageUpload'
];


function genType() {
  return [...DATE_TYPE, 'RangePicker',"TimeRangePicker"];
}
@@ -45,7 +54,7 @@
  }
  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 { 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 @@
  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 @@
          }
        }
      }

      // 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);
      if(!isFirstRender.value){
      emit('change', values);
        isFirstRender.value = false
      }
    },
    { immediate: true },
    { 
      immediate: true, 
      deep: 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,7 +95,10 @@
        }) as UploadProps['fileList'];
      }
      emit('update:value', value);
      if(!isFirstRender.value){
      emit('change', value);
        isFirstRender.value = false
      }
    },
    {
      immediate: true,