fix(schema-form): nested field setting failed

buqiyuan · Mar 9, 2024 · 58d99f7 · 58d99f7
1 parent d4837c6
commit 58d99f7
Show file tree

Hide file tree

Showing 8 changed files with 40 additions and 71 deletions.
diff --git a/src/components/core/draggable-modal/index.vue b/src/components/core/draggable-modal/index.vue
@@ -4,7 +4,7 @@
       <div ref="modalWrapRef" class="draggable-modal" :class="{ fullscreen: fullscreenModel }">
         <Modal
           v-bind="omit(props, ['open', 'onCancel', 'onOk', 'onUpdate:open'])"
-          v-model:open="visibleModel"
+          v-model:open="openModel"
           :mask-closable="false"
           :get-container="() => modalWrapRef"
           :width="innerWidth || width"
@@ -39,11 +39,10 @@
 </template>
 
 <script lang="ts" setup>
-  import { ref, watch, nextTick } from 'vue';
+  import { ref, watch, nextTick, defineModel } from 'vue';
   import { useRoute } from 'vue-router';
   import { modalProps } from 'ant-design-vue/es/modal/Modal';
   import { CloseOutlined, FullscreenOutlined, FullscreenExitOutlined } from '@ant-design/icons-vue';
-  import { useVModel } from '@vueuse/core';
   import { throttle, omit } from 'lodash-es';
   import { Modal, Space } from 'ant-design-vue';
 
@@ -62,7 +61,7 @@
   const emit = defineEmits(['update:open', 'update:fullscreen', 'ok', 'cancel']);
 
   const route = useRoute();
-  const visibleModel = useVModel(props, 'open');
+  const openModel = defineModel<boolean>('open');
   const fullscreenModel = ref(props.fullscreen);
   const innerWidth = ref('');
 
@@ -83,7 +82,7 @@
   const modalWrapRef = ref<HTMLDivElement>();
 
   const closeModal = () => {
-    visibleModel.value = false;
+    openModel.value = false;
     emit('cancel');
   };
 
@@ -274,7 +273,7 @@
     inited = true;
   };
 
-  watch(visibleModel, async (val) => {
+  watch(openModel, async (val) => {
     if ((val && Object.is(inited, false)) || props.destroyOnClose) {
       initDrag();
     }

diff --git a/src/components/core/schema-form/src/hooks/useFormEvents.ts b/src/components/core/schema-form/src/hooks/useFormEvents.ts
@@ -1,5 +1,5 @@
 import { unref, toRaw } from 'vue';
-import { cloneDeep, isNil, uniqBy } from 'lodash-es';
+import { cloneDeep, isNil, set, uniqBy, unset } from 'lodash-es';
 import dayjs from 'dayjs';
 import { dateItemType, handleInputNumberValue } from '../helper';
 import type { UnwrapFormSchema } from '../types/form';
@@ -52,7 +52,7 @@ export function useFormEvents(formActionContext: UseFormActionContext) {
   /**
    * @description: 设置表单字段值
    */
-  async function setFieldsValue(values: Recordable): Promise<void> {
+  async function setFieldsValue(values: Recordable) {
     const schemas = unref(formSchemasRef);
     // @ts-ignore
     const fields = schemas.map((item) => item.field).filter(Boolean);
@@ -76,22 +76,23 @@ export function useFormEvents(formActionContext: UseFormActionContext) {
             for (const ele of value) {
               arr.push(ele ? dayjs(ele) : null);
             }
-            formModel[key] = arr;
+            set(formModel, key, arr);
           } else {
             const { componentProps } = schema || {};
             let _props = componentProps as any;
             if (isFunction(componentProps)) {
               _props = _props({ formPropsRef, formModel });
             }
-            formModel[key] = value ? (_props?.valueFormat ? value : dayjs(value)) : null;
+            set(formModel, key, value ? (_props?.valueFormat ? value : dayjs(value)) : null);
           }
         } else {
-          formModel[key] = value;
+          set(formModel, key, value);
         }
         validKeys.push(key);
       }
     });
-    validateFields(validKeys);
+    // console.log('formModel', formModel);
+    await validateFields(validKeys).catch((_) => {});
   }
 
   async function resetSchema(data: Partial<FormSchema> | Partial<FormSchema>[]) {
@@ -115,16 +116,14 @@ export function useFormEvents(formActionContext: UseFormActionContext) {
 
     if (!prefixField || index === -1 || first) {
       first ? schemaList.unshift(schemaItem) : schemaList.push(schemaItem);
-      formModel[schemaItem.field] = schemaItem.defaultValue;
       formPropsRef.value.schemas = schemaList;
       return;
     }
     if (index !== -1) {
       schemaList.splice(index + 1, 0, schemaItem);
     }
-    formModel[schemaItem.field] = schemaItem.defaultValue;
     formPropsRef.value.schemas = schemaList;
-    _setDefaultValue(formPropsRef.value.schemas);
+    setDefaultValue(formPropsRef.value.schemas);
   }
 
   /**
@@ -145,7 +144,7 @@ export function useFormEvents(formActionContext: UseFormActionContext) {
       if (isString(field)) {
         const index = schemaList.findIndex((schema) => schema.field === field);
         if (index !== -1) {
-          Reflect.deleteProperty(formModel, field);
+          unset(formModel, field);
           schemaList.splice(index, 1);
         }
       }
@@ -211,11 +210,12 @@ export function useFormEvents(formActionContext: UseFormActionContext) {
         schemas.push(val);
       }
     });
-    _setDefaultValue(updatedSchemas);
+
+    setDefaultValue(updatedSchemas);
     formPropsRef.value.schemas = uniqBy<UnwrapFormSchema>(schemas, 'field');
   };
 
-  function _setDefaultValue(data: FormSchema | FormSchema[]) {
+  function setDefaultValue(data: FormSchema | FormSchema[]) {
     let schemas: FormSchema[] = [];
     if (isObject(data)) {
       schemas.push(data as FormSchema);
@@ -245,7 +245,7 @@ export function useFormEvents(formActionContext: UseFormActionContext) {
     resetFunc && isFunction(resetFunc) && (await resetFunc());
 
     Object.keys(formModel).forEach((key) => {
-      formModel[key] = defaultFormValues[key];
+      set(formModel, key, defaultFormValues[key]);
     });
 
     emit('reset', formModel);
@@ -314,5 +314,6 @@ export function useFormEvents(formActionContext: UseFormActionContext) {
     resetFields,
     setFieldsValue,
     scrollToField,
+    setDefaultValue,
   };
 }
diff --git a/src/components/core/schema-form/src/hooks/useFormMethods.ts b/src/components/core/schema-form/src/hooks/useFormMethods.ts
@@ -1,25 +1,18 @@
 import { unref } from 'vue';
-import { set } from 'lodash-es';
+import { set, unset } from 'lodash-es';
 import type { FormState } from './useFormState';
 import type { SchemaFormProps } from '../schema-form';
 import { deepMerge } from '@/utils/';
-import { isFunction, isDef, isObject, isArray, isString } from '@/utils/is';
+import { isFunction, isObject, isArray, isString } from '@/utils/is';
 import { dateUtil } from '@/utils/dateUtil';
 
 type UseFormMethodsContext = FormState;
 
 export type FormMethods = ReturnType<typeof useFormMethods>;
 
 export const useFormMethods = (formMethodsContext: UseFormMethodsContext) => {
-  const {
-    compRefMap,
-    formModel,
-    formPropsRef,
-    cacheFormModel,
-    defaultFormValues,
-    schemaFormRef,
-    getFormProps,
-  } = formMethodsContext;
+  const { compRefMap, formModel, formPropsRef, cacheFormModel, schemaFormRef, getFormProps } =
+    formMethodsContext;
 
   // 将所有的表单组件实例保存起来, 方便外面通过表单组件实例操作
   const setItemRef = (field: string) => {
@@ -32,8 +25,8 @@ export const useFormMethods = (formMethodsContext: UseFormMethodsContext) => {
 
   // 设置某个字段的值
   const setFormModel = (key: Key, value: any) => {
-    formModel[key] = value;
-    cacheFormModel[key] = value;
+    set(formModel, key, value);
+    set(cacheFormModel, key, value);
     const { validateTrigger } = unref(getFormProps);
     if (!validateTrigger || validateTrigger === 'change') {
       schemaFormRef.value?.validateFields([key]);
@@ -42,7 +35,7 @@ export const useFormMethods = (formMethodsContext: UseFormMethodsContext) => {
 
   // 删除某个字段
   const delFormModel = (key: Key) => {
-    return Reflect.deleteProperty(formModel, key);
+    return unset(formModel, key);
   };
 
   const setSchemaFormProps = (formProps: Partial<SchemaFormProps>) => {
@@ -103,21 +96,8 @@ export const useFormMethods = (formMethodsContext: UseFormMethodsContext) => {
     return values;
   }
 
-  // 初始化数据
-  const initFormValues = () => {
-    unref(formPropsRef).schemas?.forEach((item) => {
-      const { defaultValue } = item;
-      if (isDef(defaultValue)) {
-        formModel[item.field] = defaultValue;
-        defaultFormValues[item.field] = defaultValue;
-        cacheFormModel[item.field] = defaultValue;
-      }
-    });
-  };
-
   return {
     setItemRef,
-    initFormValues,
     setFormModel,
     delFormModel,
     setSchemaFormProps,

diff --git a/src/components/core/schema-form/src/schema-form.vue b/src/components/core/schema-form/src/schema-form.vue
@@ -38,7 +38,7 @@
 </template>
 
 <script lang="ts" setup>
-  import { useAttrs } from 'vue';
+  import { useAttrs, onMounted } from 'vue';
   import { pick } from 'lodash-es';
   import { Form, Row } from 'ant-design-vue';
   import SchemaFormItem from './schema-form-item.vue';
@@ -74,14 +74,11 @@
 
   // 表单内部方法
   const formMethods = useFormMethods({ ...formState });
-  const { initFormValues, handleFormValues } = formMethods;
-
-  // 初始化表单默认值
-  initFormValues();
+  const { handleFormValues } = formMethods;
 
   // a-form表单事件二次封装和扩展
   const formEvents = useFormEvents({ ...formState, emit, handleFormValues });
-  const { handleEnterPress } = formEvents;
+  const { handleEnterPress, setDefaultValue } = formEvents;
 
   // 当前组件所有的状态和方法
   const instance = {
@@ -101,4 +98,9 @@
   createFormContext(instance);
 
   defineExpose(instance);
+
+  onMounted(() => {
+    // 初始化表单默认值
+    setDefaultValue(formSchemasRef.value);
+  });
 </script>
diff --git a/src/components/core/schema-form/src/types/form.ts b/src/components/core/schema-form/src/types/form.ts
@@ -64,20 +64,12 @@ type ComponentSchema<T extends object = Recordable> =
         /** 表单组件属性 */
         componentProps?:
           | ComponentProps<K>
-          | {
-              (opt: RenderCallbackParams<T, ComponentProps<K>>): ComponentProps<K>;
-              requestResult: ComponentProps['requestResult'];
-            };
+          | ((opt: RenderCallbackParams<T, ComponentProps<K>>) => ComponentProps<K>);
       };
     }[ComponentType]
   | {
       component: CustomRenderFn<T> | ((opt: RenderCallbackParams<T>) => Component);
-      componentProps?:
-        | ComponentProps
-        | {
-            (opt: RenderCallbackParams<T>): ComponentProps;
-            requestResult: ComponentProps['requestResult'];
-          };
+      componentProps?: ComponentProps | ((opt: RenderCallbackParams<T>) => ComponentProps);
     };
 
 /** 表单项 */

diff --git a/src/router/routes/modules/demos.ts b/src/router/routes/modules/demos.ts
@@ -161,7 +161,7 @@ const routes: Array<RouteRecordRaw> = [
             meta: {
               title: '英雄详情',
               icon: 'ant-design:desktop-outlined',
-              hideInMenu: false,
+              hideInMenu: true,
               keepAlive: false,
               activeMenu: `${moduleName}-table-lol`,
             },

diff --git a/src/views/demos/tables/edit-row-table/columns.tsx b/src/views/demos/tables/edit-row-table/columns.tsx
@@ -17,7 +17,6 @@ export type ListItemType = (typeof tableData)[number];
 export const columns: TableColumn<ListItemType>[] = [
   {
     title: '姓名',
-
     dataIndex: 'name',
     sorter: true,
     /** 默认开启编辑, 仅`editableType`为`cell`时有效 */
@@ -38,7 +37,6 @@ export const columns: TableColumn<ListItemType>[] = [
   },
   {
     title: '性别',
-
     dataIndex: 'gender',
     /** 搜索表单配置 */
     formItemProps: {
@@ -75,8 +73,6 @@ export const columns: TableColumn<ListItemType>[] = [
       rules: [{ required: true, type: 'number', message: '请选择性别' }],
       componentProps: ({ formInstance, formModel, tableRowKey }) => ({
         onChange() {
-          console.log('formModel', formModel);
-
           // 根据当前选择的性别，更新衣服可选项
           formInstance?.updateSchema({
             field: `${tableRowKey}.clothes`,
@@ -92,7 +88,6 @@ export const columns: TableColumn<ListItemType>[] = [
   },
   {
     title: '衣服',
-
     dataIndex: 'clothes',
     formItemProps: {
       component: 'Select',
@@ -136,7 +131,6 @@ export const columns: TableColumn<ListItemType>[] = [
   },
   {
     title: '价格',
-
     dataIndex: 'price',
     editFormItemProps: {
       component: 'InputNumber',
@@ -146,7 +140,6 @@ export const columns: TableColumn<ListItemType>[] = [
   },
   {
     title: '状态',
-
     dataIndex: 'status',
     formItemProps: {
       component: 'Select',

diff --git a/src/views/system/role/index.vue b/src/views/system/role/index.vue
@@ -113,7 +113,9 @@
             perm: 'system:role:update',
             effect: 'disable',
           },
-          onClick: () => openMenuModal(record),
+          onClick: () => {
+            openMenuModal(record);
+          },
         },
         {
           label: '删除',