@hw-component/form 0.0.3-beta-v1 → 0.0.3-beta-v3

package/src/components/DialogForm/DrawerForm/Footer.tsx

@@ -1,11 +1,16 @@
 import { Row, Space, Button } from "antd";
-import type { DialogFormProps } from "../modal";
+
+interface IProps{
+  onOk?:VoidFunction;
+  onCancel?:VoidFunction;
+  confirmLoading?:boolean;
+}
 
 export default ({
   onCancel,
   onOk,
   confirmLoading,
-}: Omit<DialogFormProps, "configData">) => {
+}: IProps) => {
   return (
     <Row justify={"end"}>
       <Space size={"middle"}>

package/src/components/DialogForm/DrawerForm/index.tsx

@@ -21,6 +21,7 @@ export default ({
   size,
   form,
   footer,
+  params,
   ...props
 }: DialogFormProps) => {
   const currentForm = useCurrentForm(dialogForm);
@@ -30,16 +31,18 @@ export default ({
     setModalVisible,
     initValue,
     onAfterClose,
+    formParams
   } = useModifyProps({
     configData,
     visible,
     initialValues,
     dialogForm: currentForm,
+    params
   });
-  const cancel = (e) => {
+  const cancel = () => {
     onAfterClose();
     if (onCancel) {
-      return onCancel?.(e);
+      return onCancel?.();
     }
     setModalVisible(false);
   };
@@ -73,9 +76,14 @@ export default ({
         initialValues={initValue}
         {...props}
         form={currentForm}
-        onFinish={async (values) => {
-          await run(values);
-          setModalVisible(false);
+        params={formParams}
+        onFinish={async (values,subParams) => {
+          const result = await run(values,subParams);
+          const close = onOk?.(result,subParams);
+          if (close === false) {
+            return;
+          }
+          cancel();
         }}
         infoRequest={infoRequest}
         labelWidth={labelWidth}

package/src/components/DialogForm/ModalForm.tsx

@@ -13,19 +13,22 @@ export default ({
   dialogForm,
   initialValues = {},
   onFinish,
+  params,
+  onOk,
   ...props
 }: DialogFormProps) => {
   const currentForm = useCurrentForm(dialogForm);
-  const { modalVisible, modalFormData, setModalVisible, initValue } =
+  const { modalVisible, modalFormData, setModalVisible, initValue ,formParams} =
     useModifyProps({
       configData,
       visible,
       initialValues,
       dialogForm: currentForm,
+      params
     });
-  const cancel = (e) => {
+  const cancel = () => {
     if (onCancel) {
-      return onCancel?.(e);
+      return onCancel?.();
     }
     setModalVisible(false);
   };
@@ -47,11 +50,16 @@ export default ({
       <HForm
         configData={modalFormData}
         initialValues={initValue}
-        onFinish={async (values) => {
-          await run(values);
-          setModalVisible(false);
+        onFinish={async (values,params) => {
+          const result = await run(values,params);
+          const close = onOk?.(result,params);
+          if (close === false) {
+            return;
+          }
+          cancel();
         }}
         {...props}
+        params={formParams}
         form={currentForm}
         infoRequest={infoRequest}
       />

package/src/components/DialogForm/hooks.ts

@@ -13,31 +13,43 @@ export const useModifyProps = ({
   initialValues,
   dialogForm,
   afterClose,
+  params
 }: ModifyPropsModal) => {
   const [modalVisible, setModalVisible] = useState(visible);
   const [modalFormData, setModalFormData] = useState(configData);
   const [initValue, setInitValue] = useState(initialValues);
+  const [formParams,setFormParams]=useState(params);
   const onAfterClose = () => {
     setTimeout(() => {
       dialogForm.resetFields();
       afterClose?.();
-    }, 0);
+    }, 100);
   };
+
   useEffect(() => {
     setModalVisible(visible);
   }, [visible]);
+
   useEffect(() => {
     setModalFormData(configData);
   }, [configData]);
+  useEffect(()=>{
+     setFormParams(params)
+  },[params])
+
   useEffect(() => {
-    dialogForm.show = (params = {}) => {
+    dialogForm.show = (showParams = {}) => {
       const {
         configData: changeConfigData,
         initialValues: changeInitialValues,
-      } = params;
+        params
+      } = showParams;
       if (!!changeConfigData) {
         setModalFormData(changeConfigData);
       }
+      if (!!params){
+        setFormParams(params);
+      }
       setInitValue(changeInitialValues);
       setModalVisible(true);
     };
@@ -54,6 +66,7 @@ export const useModifyProps = ({
     initValue,
     setInitValue,
     onAfterClose,
+    formParams
   };
 };
 export const useHDialogForm = () => {
@@ -74,12 +87,12 @@ export const useCurrentForm = (hDialogForm?: HDialogFormInstance) => {
 
 export const useSub = ({ request, onFinish }: Partial<DialogFormProps>) => {
   return useRequest(
-    async (values) => {
+    async (values,params) => {
       if (onFinish) {
-        return onFinish(values);
+        return onFinish(values,params);
       }
       if (request) {
-        return request(values);
+        return request(values,params);
       }
     },
     { manual: true }

package/src/components/DialogForm/modal.ts

@@ -4,24 +4,31 @@ import type { PromiseFnResult } from "../modal";
 
 type RootProps = HFormProps & ModalProps;
 
-export interface ModifyPropsModal {
+export interface ModifyPropsModal<P = any> {
   configData: HItemProps[];
   visible?: boolean;
   initialValues?: Record<string, any>;
   dialogForm: HDialogFormInstance;
   afterClose?: VoidFunction;
+  params?: P;
 }
-export interface ShowParamsModal {
+export interface ShowParamsModal<P = any, T = any> {
   configData?: HItemProps[];
   visible?: boolean;
   initialValues?: Record<string, any>;
+  infoRequest?: PromiseFnResult<P, T>;
+  params?: P;
 }
 
-export interface HDialogFormInstance extends HFormInstance {
-  show: (data?: ShowParamsModal) => void;
+export interface HDialogFormInstance<P = any, T = any> extends HFormInstance {
+  show: (data?: ShowParamsModal<P, T>) => void;
   hide: VoidFunction;
 }
-export interface DialogFormProps extends Omit<RootProps, "onFinish"> {
+export interface DialogFormProps<P = any, T = any>
+  extends Omit<RootProps, "onFinish" | "onCancel" | "onOk" | "infoRequest"> {
   dialogForm?: HDialogFormInstance;
-  onFinish?: PromiseFnResult;
+  onFinish?:(values:T,params:P)=>Promise<any>;
+  onCancel?: VoidFunction;
+  onOk?: (data: T,params:P) => boolean | undefined;
+  infoRequest?: (params: P) => Promise<T>;
 }

package/src/components/Form/FormItem/UpFormItem.tsx

@@ -13,7 +13,7 @@ export default ({
   return (
     <Item shouldUpdate={resultShouldUpdate} dependencies={dependencies} noStyle>
       {() => {
-        return <BasicItem hide={hide} {...props}/>;
+        return <BasicItem hide={hide} {...props} />;
       }}
     </Item>
   );

package/src/components/Form/hooks/index.ts

@@ -1,22 +1,61 @@
 import { useRequest } from "ahooks";
-import type { HFormProps } from "@/components/Form/modal";
+import type { HFormProps, HFormInstance } from "../modal";
 import useHForm from "./useHForm";
-import type { HFormInstance } from "@/components/Form/modal";
+import {useEffect, useMemo} from "react";
 export const useCurrentForm = (form?: HFormInstance) => {
   const selfForm = useHForm();
   return form || selfForm;
 };
 type ParamsModal = Omit<HFormProps, "configData">;
 
-export const useSub = ({ request, onFinish, form }: ParamsModal) => {
-  return useRequest(
+export const useInfoReq = ({
+  initialValues,
+  infoRequest,
+  form,
+  params,
+  request,
+  onFinish,
+}: ParamsModal) => {
+  const reqData = useMemo(() => {
+    const saveParams = params || {};
+    return {
+      params: saveParams,
+    };
+  }, [params]);
+
+  const subControl = useRequest(
     async (value) => {
       const subVal = form?.outputValues(value);
       if (request) {
-        await request(subVal);
+        await request(subVal,reqData.params);
       }
-      onFinish?.(subVal);
+      onFinish?.(subVal,reqData.params);
     },
     { manual: true }
   );
-}; //提交
+  const infoControl = useRequest(async (reqParams = reqData.params) => {
+    let setValue = initialValues;
+    reqData.params = reqParams;
+    if (!initialValues && !infoRequest) {
+      return {};
+    }
+    if (infoRequest) {
+      setValue = await infoRequest(reqParams);
+    }
+    form?.setFieldsValue(setValue);
+    return setValue || {};
+  });
+  const {run,mutate}=infoControl;
+  useEffect(()=>{
+    if (form){
+      form.reload=(params)=>{
+        mutate(undefined);
+        return run(params);
+      };
+    }
+  },[]);
+  return {
+    subControl,
+    infoControl,
+  };
+};

package/src/components/Form/hooks/useHForm.ts

@@ -14,7 +14,7 @@ export default () => {
     const formatSourceData: Record<string, FormatItemModal> = {};
     let dispatchSourceData: Record<string, DispatchItemData> = {};
     let cacheValues: Record<string, any> = {};
-    let isLoading=false;
+    let isLoading = false;
     const norAddItemDispatch = (name, fn) => {
       if (!name) {
         return {
@@ -30,12 +30,15 @@ export default () => {
       };
     };
     return {
+      reload:(params)=>{
+         return Promise.resolve(params);
+      },
       initValues() {
         if (cacheValues) {
           const newValue = this.formatValues(cacheValues);
           form.setFieldsValue(newValue);
         }
-        isLoading=true;
+        isLoading = true;
       },
       addFormat(name: string, format?: FormatItemModal) {
         if (!format) {
@@ -127,7 +130,7 @@ export default () => {
       },
       ...form,
       setFieldsValue(values) {
-        if (!isLoading){
+        if (!isLoading) {
           cacheValues = values;
           return;
         }

package/src/components/Form/index.tsx

@@ -1,12 +1,11 @@
 import { Form } from "antd";
 import type { HFormProps } from "./modal";
 import Item from "./FormItem";
-import { useCurrentForm, useSub } from "./hooks";
+import { useCurrentForm, useInfoReq } from "./hooks";
 import { FormContext } from "./Context";
 import PageHandler from "../PageHandler";
 import useInitConfigData from "./hooks/useInitConfigData";
 import { useEffect } from "react";
-import { useRequest } from "ahooks";
 import InitSet from "./InitSet";
 
 export default ({
@@ -18,6 +17,7 @@ export default ({
   infoRequest,
   valueType = "float",
   initialValues,
+  params = {},
   ...props
 }: HFormProps) => {
   const hForm = useCurrentForm(form);
@@ -25,28 +25,24 @@ export default ({
     configData,
     form: hForm,
   });
-  const { run, loading } = useSub({
+  const { subControl, infoControl } = useInfoReq({
+    initialValues,
     request,
     onFinish,
     valueType,
     form: hForm,
+    infoRequest,
+    params,
   });
+
+  const { run, loading } = subControl;
   const {
     run: infoRun,
     loading: infoLoading,
     error: infoErr,
     data: infoData,
-  } = useRequest(async () => {
-    let setValue = initialValues;
-    if (!initialValues && !infoRequest) {
-      return {};
-    }
-    if (infoRequest) {
-      setValue = await infoRequest();
-    }
-    hForm.setFieldsValue(setValue);
-    return setValue||{};
-  });
+  } = infoControl;
+
   useEffect(() => {
     return () => {
       hForm.removeDispatchListener();

package/src/components/Form/modal.ts

@@ -70,13 +70,15 @@ export interface HItemProps extends Omit<FormItemProps, "name"> {
   name?: string;
 }
 
-export interface HFormProps<T = any, R = any> extends Omit<FormProps, "form"> {
+export interface HFormProps<T = any, R = any> extends Omit<FormProps, "form"|"onFinish"> {
   configData: HItemProps[];
   labelWidth?: number;
-  request?: PromiseFnResult<T, R>;
-  infoRequest?: () => Promise<T>;
+  request?: (values:T,params?:any)=>Promise<R>;
+  infoRequest?: PromiseFnResult;
   valueType?: string;
   form?: HFormInstance;
+  params?: any;
+  onFinish?:(values:T,params?:any)=>void;
 }
 
 export interface HFormItemProps extends HItemProps {
@@ -122,6 +124,7 @@ export interface HFormInstance extends FormInstance {
   outputValues: (values?: Record<string, any>) => Record<string, any>;
   addDispatchListener: AddDispatchListenerFn;
   removeDispatchListener: (action?: ActionModal, fn?: argsFn) => void;
+  reload:PromiseFnResult;
 }
 
 export interface ConnectConfigModal {

package/src/components/Input/ButtonInput.tsx

@@ -32,7 +32,13 @@ const Index: React.FC<HButtonInputProps> = ({
   return (
     <Input.Group compact style={{ display: "flex" }}>
       <Input {...props} style={{ flex: 1 }} value={value} onChange={change} />
-      <Button {...oProps} type={type} onClick={click} loading={loading} style={{marginLeft:4}}>
+      <Button
+        {...oProps}
+        type={type}
+        onClick={click}
+        loading={loading}
+        style={{ marginLeft: 4 }}
+      >
         {children}
       </Button>
     </Input.Group>

package/src/components/Input/modal.ts

@@ -24,7 +24,7 @@ export interface HSelectInputProps
 export interface HButtonProps extends Omit<ButtonProps, "onClick"> {
   onClick: (
     value: string | readonly string[] | number | undefined,
-    onChange?:(val:any)=>void
+    onChange?: (val: any) => void
   ) => void;
 }
 export interface HButtonInputProps extends HInputProps {

package/src/components/Upload/index.tsx

@@ -61,7 +61,8 @@ const Index: React.ForwardRefRenderFunction<IUploadRefModal, IUpLoadProps> = (
       inputValue: (item, initValue) => {
         const { name = "" } = item;
         const initFileList = initValue[name] || [];
-        const relInitFileList=typeof initFileList==="string"?[initFileList]:initFileList;
+        const relInitFileList =
+          typeof initFileList === "string" ? [initFileList] : initFileList;
         const fileList = relInitFileList.map((url, index) => {
           return {
             name: url,
@@ -84,7 +85,7 @@ const Index: React.ForwardRefRenderFunction<IUploadRefModal, IUpLoadProps> = (
           return fileItem.response.url;
         });
         return {
-          [valueName]: maxCount===1?urls[0]:urls,
+          [valueName]: maxCount === 1 ? urls[0] : urls,
         };
       },
     },

package/src/components/index.tsx

@@ -4,6 +4,8 @@ import PageHandler from "./PageHandler";
 export { default as HForm } from "./Form";
 export { default as useHForm } from "./Form/hooks/useHForm";
 export { useHDialogForm } from "./DialogForm/hooks";
+export { default as HFormConnect } from "./Form/HFormConnect";
+
 import ModalForm from "./DialogForm/ModalForm";
 import DrawerForm from "./DialogForm/DrawerForm";
 export const HSelect = FormConfig.select;

package/src/pages/Form/index.tsx

@@ -128,7 +128,8 @@ export default () => {
                   testEnd: "1693538359",
                   op: 1,
                   opInput: "12121",
-                  upload:  "https://img2.baidu.com/it/u=2048195462,703560066&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=333",
+                  upload:
+                    "https://img2.baidu.com/it/u=2048195462,703560066&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=333",
                 });
               }, 3000);
             });

package/src/pages/ModalForm/index.tsx

@@ -97,20 +97,18 @@ const data = [
     rules: [{ required: true }],
   },
 ];
+let num=0;
 export default () => {
   const modalForm = useHDialogForm();
   return (
     <>
       <Button
         onClick={() => {
+          num++
           modalForm.show({
-            initialValues: {
-              check1: 1,
-              testStart: "1694747960",
-              testEnd: "1693538359",
-              op: 1,
-              opInput: "12121",
-            },
+            params:{
+              name:num
+            }
           });
         }}
       >
@@ -119,7 +117,21 @@ export default () => {
       <HModalForm
         configData={data}
         labelWidth={88}
-        modalForm={modalForm}
+        request={(val,params)=>{
+           console.log(val,params);
+        }}
+        infoRequest={(ppp) => {
+          console.log(ppp)
+          return Promise.resolve({
+            check1: 1,
+            testStart: "1694747960",
+            testEnd: "1693538359",
+            op: 1,
+            opInput: "12121",
+            name:ppp.name
+          });
+        }}
+        dialogForm={modalForm}
         title="测试"
       />
     </>