fix: schema field nesting error

buqiyuan · Apr 10, 2023 · 31b6da7 · 31b6da7 · vercel · Apr 10, 2023
1 parent 6b03bdc
commit 31b6da7
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 31 deletions.
diff --git a/src/components/core/schema-form/src/schema-form-item.vue b/src/components/core/schema-form/src/schema-form-item.vue
@@ -7,7 +7,7 @@
       v-else
       v-bind="{ ...schema.formItemProps }"
       :label="renderLabelHelpMessage"
-      :name="schema.field.split('.')"
+      :name="schema.field"
       :label-col="itemLabelWidthProp.labelCol"
       :wrapper-col="itemLabelWidthProp.wrapperCol"
       :rules="getRules"
@@ -18,7 +18,7 @@
         v-else-if="getComponent"
         :ref="setItemRef(schema.field)"
         v-bind="getComponentProps"
-        v-model:[modelValueType]="modelValue"
+        v-model:[modelValueType]="formModel[schema.field]"
         :allow-clear="true"
         :disabled="getDisable"
         :loading="schema.loading"
@@ -64,8 +64,6 @@
 
   const props = defineProps(schemaFormItemProps);
 
-  const emit = defineEmits(['update:formModel']);
-
   // schemaForm组件实例
   const formContext = useFormContext();
   const { formPropsRef, setItemRef, updateSchema, getSchemaByFiled, appendSchemaByField } =
@@ -75,20 +73,6 @@
 
   const { schema } = toRefs(props);
 
-  const modelValue = computed({
-    get() {
-      const namePath = schema.value.field.split('.');
-      return namePath.reduce((prev, field) => prev[field], props.formModel);
-    },
-    set(val) {
-      const namePath = schema.value.field.split('.');
-      const prop = namePath.pop()!;
-      const target = namePath.reduce((prev, field) => prev[field], props.formModel);
-      target[prop] = val;
-      emit('update:formModel', props.formModel);
-    },
-  });
-
   // @ts-ignore
   const itemLabelWidthProp = useItemLabelWidth(schema, formPropsRef);
 

diff --git a/src/hooks/useModal/useFormModal.tsx b/src/hooks/useModal/useFormModal.tsx
@@ -23,19 +23,17 @@ export function useFormModal<T = any>() {
 
     const onOk = async () => {
       // const values = (formRef?.formModel || {}) as any;
-      let values: any;
       try {
-        values = await formRef.value?.validate();
-        await modalProps?.onFinish?.(values);
-        formRef.value?.resetFields();
+        await formRef.value?.submit();
       } catch (error) {
-        modalProps?.onFail?.(values);
+        modalProps?.onFail?.({} as any);
         return Promise.reject(error);
       }
     };
 
-    const onSubmit = async () => {
-      await onOk();
+    const onSubmit = async (values) => {
+      await modalProps?.onFinish?.(values);
+      formRef.value?.resetFields();
       ModalRender.hide();
     };
 

diff --git a/src/utils/request.ts b/src/utils/request.ts
@@ -83,7 +83,7 @@ service.interceptors.response.use(
   (error) => {
     // 处理 422 或者 500 的错误异常提示
     const errMsg = error?.response?.data?.message ?? UNKNOWN_ERROR;
-    $message.error(errMsg);
+    $message.error({ content: errMsg, key: errMsg });
     error.message = errMsg;
     return Promise.reject(error);
   },

diff --git a/src/views/demos/form/rule-form/form-schema.ts b/src/views/demos/form/rule-form/form-schema.ts
@@ -2,7 +2,7 @@ import type { FormSchema } from '@/components/core/schema-form/';
 
 export const schemas: FormSchema[] = [
   {
-    field: 'field1',
+    field: 'field1.dd.cc',
     component: 'Input',
     label: '字段1',
     colProps: {

diff --git a/src/views/demos/form/rule-form/index.vue b/src/views/demos/form/rule-form/index.vue
@@ -42,10 +42,10 @@
   const formProps: SchemaFormProps = { schemas, labelWidth: 120, actionColOptions: { span: 24 } };
 
   // 点击提交
-  function confirm() {
-    console.log('dynamicForm.value', dynamicForm.value?.formModel);
-
-    dynamicForm.value?.validate().then(() => message.success('验证通过！'));
+  function confirm(values) {
+    dynamicForm.value?.validate().then(() => {
+      message.success(JSON.stringify(values));
+    });
   }
 </script>