impr: 表单赋值逻辑优化

JackySoft · Nov 4, 2024 · fbdface · fbdface
1 parent 3c96204
commit fbdface
Show file tree

Hide file tree

Showing 56 changed files with 328 additions and 349 deletions.
diff --git a/packages/editor/src/packages/Container/Form/Form.tsx b/packages/editor/src/packages/Container/Form/Form.tsx
@@ -1,13 +1,14 @@
 import { ComponentType, IDragTargetItem } from '@/packages/types';
 import { Form } from 'antd';
-import { forwardRef, memo, useImperativeHandle, useState } from 'react';
+import { forwardRef, memo, useCallback, useImperativeHandle, useState } from 'react';
 import { useDrop } from 'react-dnd';
 import { useShallow } from 'zustand/react/shallow';
 import { getComponent } from '@/packages/index';
 import MarsRender from '@/packages/MarsRender/MarsRender';
 import { usePageStore } from '@/stores/pageStore';
 import { FormContext } from '@/packages/utils/context';
-import { dateFormat } from '@/packages/utils/util';
+import { dateFormat, getDateByType, getDateRangeByType, isNotEmpty } from '@/packages/utils/util';
+import dayjs from 'dayjs';
 /**
  *
  * @param props 组件本身属性
@@ -26,6 +27,7 @@ const MForm = ({ id, type, config, elements, onFinish, onChange }: ComponentType
   );
 
   const [visible, setVisible] = useState(true);
+  const [initialValues, setInitialValues] = useState({});
 
   // 拖拽接收
   const [, drop] = useDrop({
@@ -95,10 +97,10 @@ const MForm = ({ id, type, config, elements, onFinish, onChange }: ComponentType
       },
       init(values: any = {}) {
         const initData = dateFormat(elements, values);
-        form.setFieldsValue(initData);
+        form.setFieldsValue({ ...initData });
         setFormData({
           name: id,
-          value: initData,
+          value: { ...initData },
           type: 'override',
         });
       },
@@ -110,16 +112,34 @@ const MForm = ({ id, type, config, elements, onFinish, onChange }: ComponentType
       },
     };
   });
+
+  // 设置默认值
+  const initValues = useCallback((type: string, name: string, value: any) => {
+    if (name && isNotEmpty(value)) {
+      let initValue = value;
+      if (type === 'InputNumber') initValue = Number(value);
+      if (type === 'DatePicker') initValue = getDateByType(value);
+      if (type === 'DatePickerRange') initValue = getDateRangeByType(value);
+      if (type === 'TimePicker') initValue = dayjs(value, 'HH:mm:ss');
+      setInitialValues({ [name]: initValue });
+      form.setFieldValue([name], initValue);
+      setFormData({
+        name: id,
+        value: { [name]: initValue },
+      });
+    }
+  }, []);
   return (
     visible && (
-      <FormContext.Provider value={{ form, formId: id, setFormData }}>
+      <FormContext.Provider value={{ initValues }}>
         <div ref={drop}>
           <Form
             form={form}
             style={config.style}
             {...config.props}
             data-id={id}
             data-type={type}
+            initialValues={initialValues}
             onFinish={handleFinish}
             onValuesChange={handleChange}
           >

diff --git a/packages/editor/src/packages/FeedBack/Modal/Modal.tsx b/packages/editor/src/packages/FeedBack/Modal/Modal.tsx
@@ -17,7 +17,11 @@ const AntdModal = forwardRef(({ id, type, config, elements, onLoad, onOk, onCanc
   const [visible, setVisible] = useState(false);
   const [confirmLoading, setConfirmLoading] = useState(config.props.confirmLoading || false);
   const [loading, setLoading] = useState(false);
-  const { mode, addChildElements } = usePageStore((state) => ({ mode: state.mode, addChildElements: state.addChildElements }));
+  const { mode, addChildElements, setSelectedElement } = usePageStore((state) => ({
+    mode: state.mode,
+    addChildElements: state.addChildElements,
+    setSelectedElement: state.setSelectedElement,
+  }));
   // 拖拽接收
   const [, drop] = useDrop({
     accept: 'MENU_ITEM',
@@ -54,10 +58,14 @@ const AntdModal = forwardRef(({ id, type, config, elements, onLoad, onOk, onCanc
         // 打开弹框
         open: () => {
           return new Promise((resolve) => {
-            setVisible(() => {
+            setVisible(true);
+            setTimeout(() => {
               resolve(true);
-              return true;
-            });
+              setSelectedElement({
+                id,
+                type,
+              });
+            }, 0);
           });
         },
         // 显示确认Loading
@@ -97,6 +105,9 @@ const AntdModal = forwardRef(({ id, type, config, elements, onLoad, onOk, onCanc
     onCancel?.();
     // 取消事件
     setVisible(false);
+    setTimeout(() => {
+      setSelectedElement(undefined);
+    }, 0);
   };
   /**
    * 开发模式下处理弹框根样式

diff --git a/packages/editor/src/packages/FormItems/Cascader/Cascader.tsx b/packages/editor/src/packages/FormItems/Cascader/Cascader.tsx
@@ -25,7 +25,7 @@ interface Option {
  * @returns 返回组件
  */
 const MCascader = ({ id, type, config, onChange }: ComponentType<IConfig>, ref: any) => {
-  const { form, formId, setFormData } = useFormContext();
+  const { initValues } = useFormContext();
   const [data, setData] = useState<Option[]>([]);
   const [visible, setVisible] = useState(true);
   const [disabled, setDisabled] = useState<boolean | undefined>();
@@ -34,11 +34,7 @@ const MCascader = ({ id, type, config, onChange }: ComponentType<IConfig>, ref:
   useEffect(() => {
     const name: string = config.props.formItem?.name;
     const value = config.props.defaultValue;
-    // 日期组件初始化值
-    if (name && !isNull(value)) {
-      form?.setFieldValue(name, value);
-      setFormData({ name: formId, value: { [name]: value } });
-    }
+    initValues(type, name, value);
   }, [config.props.defaultValue]);
 
   // 启用和禁用

diff --git a/packages/editor/src/packages/FormItems/CheckBox/CheckBox.tsx b/packages/editor/src/packages/FormItems/CheckBox/CheckBox.tsx
@@ -27,7 +27,7 @@ const MCheckBox = ({ id, type, config, onChange }: ComponentType<IConfig>, ref:
   const [data, setData] = useState<Array<{ label: string; value: any }>>([]);
   const [visible, setVisible] = useState(true);
   const [disabled, setDisabled] = useState<boolean | undefined>();
-  const { form, formId, setFormData } = useFormContext();
+  const { initValues } = useFormContext();
   const variableData = usePageStore((state) => state.page.variableData);
 
   /**
@@ -37,10 +37,7 @@ const MCheckBox = ({ id, type, config, onChange }: ComponentType<IConfig>, ref:
   useEffect(() => {
     const name: string = config.props.formItem?.name;
     const value = config.props.defaultValue || [];
-    if (name && !isNull(value)) {
-      form?.setFieldValue(name, value);
-      setFormData({ name: formId, value: { [name]: value } });
-    }
+    initValues(type, name, value);
   }, [JSON.stringify(config.props.defaultValue)]);
 
   // 启用和禁用

diff --git a/packages/editor/src/packages/FormItems/DatePicker/DatePicker.tsx b/packages/editor/src/packages/FormItems/DatePicker/DatePicker.tsx
@@ -16,19 +16,14 @@ export interface IConfig {
  * @returns 返回组件
  */
 const MDatePicker = ({ id, type, config, onChange }: ComponentType<IConfig> & { form: FormInstance }, ref: any) => {
-  const { form, formId, setFormData } = useFormContext();
+  const { initValues } = useFormContext();
   const [visible, setVisible] = useState(true);
   const [disabled, setDisabled] = useState<boolean | undefined>();
   // 初始化默认值
   useEffect(() => {
     const name: string = config.props.formItem?.name;
     const value = config.props.defaultValue;
-    // 日期组件初始化值
-    if (name && !isNull(value)) {
-      const date = getDateByType(value);
-      form?.setFieldValue(name, date);
-      setFormData({ name: formId, value: { [name]: date } });
-    }
+    initValues(type, name, value);
   }, [config.props.defaultValue]);
 
   // 启用和禁用

diff --git a/packages/editor/src/packages/FormItems/DatePickerRange/DatePickerRange.tsx b/packages/editor/src/packages/FormItems/DatePickerRange/DatePickerRange.tsx
@@ -19,19 +19,14 @@ export interface IConfig {
  */
 const MDatePickerRange = ({ id, type, config, onChange }: ComponentType<IConfig>, ref: any) => {
   const { RangePicker } = DatePicker;
-  const { form, formId, setFormData } = useFormContext();
+  const { initValues } = useFormContext();
   const [visible, setVisible] = useState(true);
   const [disabled, setDisabled] = useState<boolean | undefined>();
   // 初始化默认值
   useEffect(() => {
     const name: string = config.props.formItem?.name;
     const value = config.props.defaultValue;
-    // 日期组件初始化值
-    if (name && !isNull(value)) {
-      const date = getDateRangeByType(value);
-      form?.setFieldValue(name, date);
-      setFormData({ name: formId, value: { [name]: date } });
-    }
+    initValues(type, name, value);
   }, [config.props.defaultValue]);
 
   // 启用和禁用

diff --git a/packages/editor/src/packages/FormItems/EditTable/EditTable.tsx b/packages/editor/src/packages/FormItems/EditTable/EditTable.tsx
@@ -12,7 +12,6 @@ import { message } from '@/utils/AntdGlobal';
  */
 function EditTable({ id, type, config }: ComponentType, ref: any) {
   const [visible, setVisible] = useState(true);
-  const { form } = useFormContext();
 
   useImperativeHandle(ref, () => ({
     show() {
@@ -26,15 +25,16 @@ function EditTable({ id, type, config }: ComponentType, ref: any) {
   return (
     visible && (
       <Form.Item {...config.props.formItem} data-id={id} data-type={type}>
-        <TableForm config={config} form={form} />
+        <TableForm config={config} />
       </Form.Item>
     )
   );
 }
 
-function TableForm({ config, form }: any) {
-  const [data, setData] = useState<any[]>([]);
+function TableForm({ config }: any) {
   const updateToolbar = usePageStore((state) => state.updateToolbar);
+  const [data, setData] = useState<any[]>([]);
+  const { form } = useFormContext();
 
   const initRow = useMemo(() => {
     const dataMap: { [key: string]: any } = { key: util.createId('key') };

diff --git a/packages/editor/src/packages/FormItems/FormItem/FormItem.tsx b/packages/editor/src/packages/FormItems/FormItem/FormItem.tsx
@@ -23,17 +23,13 @@ export interface IConfig {
  */
 const MFormItem = ({ id, type, config, elements }: ComponentType<IConfig>, ref: any) => {
   const addChildElements = usePageStore((state) => state.addChildElements);
-  const { form, formId, setFormData } = useFormContext();
+  const { initValues } = useFormContext();
   const [visible, setVisible] = useState(true);
   // 初始化默认值
   useEffect(() => {
     const name: string = config.props.formItem?.name;
     const value = config.props.defaultValue;
-    // 日期组件初始化值
-    if (name && !isNull(value)) {
-      form?.setFieldValue(name, value);
-      setFormData({ name: formId, value: { [name]: value } });
-    }
+    initValues(type, name, value);
   }, [config.props.defaultValue]);
 
   // 拖拽接收

diff --git a/packages/editor/src/packages/FormItems/FormList/FormList.tsx b/packages/editor/src/packages/FormItems/FormList/FormList.tsx
@@ -22,10 +22,10 @@ export interface IConfig {
  */
 const MFormList = ({ id, type, config, elements }: ComponentType<IConfig>, ref: any) => {
   const [visible, setVisible] = useState(true);
-  const { form } = useFormContext();
+  const { initValues } = useFormContext();
   // 初始化默认值
   useEffect(() => {
-    form?.setFieldValue(config.props.formItem.name, [{}]);
+    initValues(type, config.props.formItem.name, [{}]);
   }, []);
 
   useImperativeHandle(ref, () => {

diff --git a/packages/editor/src/packages/FormItems/Input/Input.tsx b/packages/editor/src/packages/FormItems/Input/Input.tsx
@@ -19,18 +19,14 @@ export interface IConfig {
  * @returns 返回组件
  */
 const MInput = ({ id, type, config, onChange, onBlur, onPressEnter }: ComponentType<IConfig>, ref: any) => {
-  const { form, formId, setFormData } = useFormContext();
+  const { initValues } = useFormContext();
   const [visible, setVisible] = useState(true);
   const [disabled, setDisabled] = useState<boolean | undefined>();
   // 初始化默认值
   useEffect(() => {
     const name: string = config.props.formItem?.name;
     const value = config.props.defaultValue;
-    // 日期组件初始化值
-    if (name && !isNull(value)) {
-      form?.setFieldValue(name, value);
-      setFormData({ name: formId, value: { [name]: value } });
-    }
+    initValues(type, name, value);
   }, [config.props.defaultValue]);
 
   // 启用和禁用

diff --git a/packages/editor/src/packages/FormItems/InputNumber/InputNumber.tsx b/packages/editor/src/packages/FormItems/InputNumber/InputNumber.tsx
@@ -1,7 +1,6 @@
 import { Form, FormItemProps, InputNumber, InputNumberProps } from 'antd';
 import { useEffect, useState, useImperativeHandle, forwardRef } from 'react';
 import { ComponentType } from '@/packages/types';
-import { isNull } from '@/packages/utils/util';
 import { useFormContext } from '@/packages/utils/context';
 
 /* 泛型只需要定义组件本身用到的属性，当然也可以不定义，默认为any */
@@ -17,18 +16,14 @@ export interface IConfig {
  * @returns 返回组件
  */
 const MInputNumber = ({ id, type, config, onChange }: ComponentType<IConfig>, ref: any) => {
-  const { form, formId, setFormData } = useFormContext();
+  const { initValues } = useFormContext();
   const [visible, setVisible] = useState(true);
   const [disabled, setDisabled] = useState<boolean | undefined>();
   // 初始化默认值
   useEffect(() => {
     const name: string = config.props.formItem?.name;
     const value = config.props.defaultValue;
-    // 日期组件初始化值
-    if (name && !isNull(value)) {
-      form?.setFieldValue(name, Number(value));
-      setFormData({ name: formId, value: { [name]: Number(value) } });
-    }
+    initValues(type, name, value);
   }, [config.props.defaultValue]);
 
   // 启用和禁用

diff --git a/packages/editor/src/packages/FormItems/InputOTP/InputOTP.tsx b/packages/editor/src/packages/FormItems/InputOTP/InputOTP.tsx
@@ -21,18 +21,14 @@ export interface IConfig {
  * @returns 返回组件
  */
 const MInputPassword = ({ id, type, config, onChange }: ComponentType<IConfig>, ref: any) => {
-  const { form, formId, setFormData } = useFormContext();
+  const { initValues } = useFormContext();
   const [visible, setVisible] = useState(true);
   const [disabled, setDisabled] = useState<boolean | undefined>();
   // 初始化默认值
   useEffect(() => {
     const name: string = config.props.formItem?.name;
     const value = config.props.defaultValue;
-    // 日期组件初始化值
-    if (name && !isNull(value)) {
-      form?.setFieldValue(name, value);
-      setFormData({ name: formId, value: { [name]: value } });
-    }
+    initValues(type, name, value);
   }, [config.props.defaultValue]);
 
   // 启用和禁用

diff --git a/packages/editor/src/packages/FormItems/InputPassword/InputPassword.tsx b/packages/editor/src/packages/FormItems/InputPassword/InputPassword.tsx
@@ -1,7 +1,6 @@
 import { Form, Input, InputProps, FormItemProps } from 'antd';
 import { forwardRef, useEffect, useImperativeHandle, useState } from 'react';
 import { ComponentType } from '@/packages/types';
-import { isNull } from '@/packages/utils/util';
 import { useFormContext } from '@/packages/utils/context';
 
 /* 泛型只需要定义组件本身用到的属性，当然也可以不定义，默认为any */
@@ -17,18 +16,14 @@ export interface IConfig {
  * @returns 返回组件
  */
 const MInputPassword = ({ id, type, config, onChange, onBlur }: ComponentType<IConfig>, ref: any) => {
-  const { form, formId, setFormData } = useFormContext();
+  const { initValues } = useFormContext();
   const [visible, setVisible] = useState(true);
   const [disabled, setDisabled] = useState<boolean | undefined>();
   // 初始化默认值
   useEffect(() => {
     const name: string = config.props.formItem?.name;
     const value = config.props.defaultValue;
-    // 日期组件初始化值
-    if (name && !isNull(value)) {
-      form?.setFieldValue(name, value);
-      setFormData({ name: formId, value: { [name]: value } });
-    }
+    initValues(type, name, value);
   }, [config.props.defaultValue]);
 
   // 启用和禁用

diff --git a/packages/editor/src/packages/FormItems/Radio/Radio.tsx b/packages/editor/src/packages/FormItems/Radio/Radio.tsx
@@ -2,7 +2,7 @@ import { ComponentType } from '@/packages/types';
 import { Form, Radio, FormItemProps, RadioProps } from 'antd';
 import { forwardRef, useEffect, useImperativeHandle, useState } from 'react';
 import { handleApi } from '@/packages/utils/handleApi';
-import { isNotEmpty, isNull } from '@/packages/utils/util';
+import { isNotEmpty } from '@/packages/utils/util';
 import { useFormContext } from '@/packages/utils/context';
 import { usePageStore } from '@/stores/pageStore';
 
@@ -27,17 +27,13 @@ const MRadio = ({ id, type, config, onChange }: ComponentType<IConfig>, ref: any
   const [data, setData] = useState<Array<{ label: string; value: any }>>([]);
   const [visible, setVisible] = useState(true);
   const [disabled, setDisabled] = useState<boolean | undefined>();
-  const { form, formId, setFormData } = useFormContext();
+  const { initValues } = useFormContext();
   const variableData = usePageStore((state) => state.page.variableData);
   // 初始化默认值
   useEffect(() => {
     const name: string = config.props.formItem?.name;
     const value = config.props.defaultValue;
-    // 日期组件初始化值
-    if (name && !isNull(value)) {
-      form?.setFieldValue(name, value);
-      setFormData({ name: formId, value: { [name]: value } });
-    }
+    initValues(type, name, value);
   }, [config.props.defaultValue]);
 
   // 启用和禁用