@hw-component/form 0.0.4-beta-v4 → 0.0.4-beta-v6

package/src/components/Form/hooks/useInitConfigData.tsx

@@ -10,6 +10,8 @@ import type { Rule } from "rc-field-form/lib/interface";
 import type { FormInstance } from "antd";
 import { useDefaultComponents } from "../hooks";
 import type { ConfigComponentModal } from "../modal";
+import type { DispatchSourceDataModal } from "../modal";
+import type { DispatchModal } from "../modal";
 
 const mathRequired = (
   configItem: HFormItemProps,
@@ -98,13 +100,88 @@ const itemControl = (
     render,
   };
 };
+const itemDispatchProvider = (
+  name: string,
+  config: Required<DispatchModal<string>>,
+  dispatchSourceData: DispatchSourceDataModal
+) => {
+  const { dependencies, fnKey } = config;
+  const itemDispatch = dispatchSourceData[dependencies as string];
+  if (!itemDispatch) {
+    return {
+      [dependencies]: {
+        [name]: fnKey,
+      },
+    };
+  }
+  const itemNameDispatch = {
+    [name]: fnKey,
+  };
+  return {
+    [dependencies]: {
+      ...itemDispatch,
+      ...itemNameDispatch,
+    },
+  };
+};
+const dispatchProvider = (
+  item: HItemProps,
+  dispatchSourceData: DispatchSourceDataModal
+) => {
+  const { name = "", dispatch = {}, dependencies = "allDependencies" } = item;
+  const {
+    fnKey,
+    dependencies: dispatchDependencies = dependencies as string | string[],
+    manual = true,
+  } = dispatch;
+  if (!fnKey) {
+    return {};
+  }
+  if (Array.isArray(dispatchDependencies)) {
+    let allDispatch: DispatchSourceDataModal = {
+      ...dispatchSourceData,
+    };
+    dispatchDependencies.forEach((key) => {
+      const itemDispatch = itemDispatchProvider(
+        name,
+        { dependencies: key, fnKey, manual },
+        dispatchSourceData
+      );
+      allDispatch = {
+        ...allDispatch,
+        ...itemDispatch,
+      };
+    });
+    return allDispatch;
+  }
+  const itemDispatch = itemDispatchProvider(
+    name,
+    { dependencies: dispatchDependencies, fnKey, manual },
+    dispatchSourceData
+  );
+  return {
+    ...dispatchSourceData,
+    ...itemDispatch,
+  };
+};
 type InitConfigModal = Required<Pick<HFormProps, "configData" | "form">>;
 
 export default ({ configData, form }: InitConfigModal) => {
   const defaultComponents = useDefaultComponents();
   return useMemo(() => {
-    return configData.map((item) => {
-      return itemControl(item, form, defaultComponents);
+    const newConfigData:HItemProps[] = [];
+    let dispatchSourceData: DispatchSourceDataModal = {};
+    configData.forEach((item) => {
+      const itemDispatch = dispatchProvider(item, dispatchSourceData);
+      dispatchSourceData = {
+        ...dispatchSourceData,
+        ...itemDispatch,
+      };
+      newConfigData.push(itemControl(item, form, defaultComponents));
     });
+    return {
+      newConfigData,
+      dispatchSourceData,
+    };
   }, [configData]);
 };

package/src/components/Form/index.tsx

@@ -1,7 +1,7 @@
 import { Form } from "antd";
-import type { HFormProps } from "./modal";
+import type { HFormProps, HItemProps } from "./modal";
 import Item from "./FormItem";
-import { useCurrentForm, useInfoReq } from "./hooks";
+import { useCurrentForm, useInfoReq, useValuesChange } from "./hooks";
 import { FormContext } from "./Context";
 import PageHandler from "../PageHandler";
 import useInitConfigData from "./hooks/useInitConfigData";
@@ -18,10 +18,11 @@ export default ({
   valueType = "float",
   initialValues,
   params = {},
+  onValuesChange,
   ...props
 }: HFormProps) => {
   const hForm = useCurrentForm(form);
-  const newConfigData = useInitConfigData({
+  const { newConfigData, dispatchSourceData } = useInitConfigData({
     configData,
     form: hForm,
   });
@@ -34,7 +35,11 @@ export default ({
     infoRequest,
     params,
   });
-
+  const valuesChange = useValuesChange({
+    onValuesChange,
+    dispatch: dispatchSourceData,
+    form: hForm,
+  });
   const { run, loading } = subControl;
   const {
     run: infoRun,
@@ -56,8 +61,13 @@ export default ({
       reload={infoRun}
     >
       <FormContext.Provider value={{ loading, form: hForm, valueType }}>
-        <Form form={hForm} onFinish={run} {...props}>
-          {newConfigData.map((itemData, index) => {
+        <Form
+          form={hForm}
+          onFinish={run}
+          onValuesChange={valuesChange}
+          {...props}
+        >
+          {newConfigData.map((itemData: HItemProps, index) => {
             const { labelWidth: itemLabelWidth } = itemData;
             return (
               <Item

package/src/components/Form/modal.ts

@@ -27,6 +27,7 @@ import type {
 } from "../modal";
 import type { ForwardedRef } from "react";
 import type { DataFnProvider } from "../modal";
+
 type RenderFun = (
   props: HItemProps,
   node: React.ReactNode,
@@ -56,7 +57,12 @@ type HelperModal = (form: HFormInstance) => React.ReactNode | string;
 export type HideModal = (form: HFormInstance) => boolean;
 
 export type AddDispatchListenerFn = (action: ActionModal, fn: argsFn) => void;
-
+export type DispatchSourceDataModal = Record<string, Record<string, string>>;
+export interface DispatchModal<T = string | string[]> {
+  fnKey?: string;
+  dependencies?: T;
+  manual?: boolean;
+}
 export interface HItemProps extends Omit<FormItemProps, "name"> {
   type?: string;
   itemProps?: ItemPropsType;
@@ -69,6 +75,7 @@ export interface HItemProps extends Omit<FormItemProps, "name"> {
   placeholder?: string | string[];
   // formatKeys?: string[];
   name?: string;
+  dispatch?: DispatchModal;
 }
 
 export interface HFormProps<T = any, R = any>
@@ -82,7 +89,6 @@ export interface HFormProps<T = any, R = any>
   params?: any;
   onFinish?: (values: T, params?: any) => void;
 }
-
 export interface HFormItemProps extends HItemProps {
   required?: boolean;
   value?: any;
@@ -123,6 +129,7 @@ export interface IFormConfigContextProps {
 interface ActionModal {
   key: string;
   name?: string;
+  dispatch?: DispatchModal;
 }
 export interface HFormInstance extends FormInstance {
   addFormat: (name: string, formats?: FormatItemModal) => void;

package/src/components/Input/SelectInput.tsx

@@ -3,7 +3,6 @@ import type { HSelectInputProps } from "./modal";
 import HSelect from "../Select";
 import { defaultSelectStyle, defaultValueName } from "./defaultConfig";
 import HFormConnect from "../Form/HFormConnect";
-import { ConnectResultProps } from "@/components/Form/modal";
 export enum SelectInputType {
   input,
   select,

package/src/components/Select/hooks/norHooks.ts

@@ -4,6 +4,7 @@ import type {
   PartialHSelectProps,
 } from "@/components/Select/modal";
 import { useRequest } from "ahooks";
+import { useFormContext } from "../../Form/Context";
 
 interface ParamsModal {
   options?: OptionType[];
@@ -16,41 +17,43 @@ export const useOptionReq = ({
   serviceSearch,
   showSearch,
   onSearch: propsOnSearch,
+  dispatch = {},
 }: PartialHSelectProps) => {
+  const { manual: dispatchManual } = dispatch;
+  const { form } = useFormContext();
   const [data, setData] = useState<OptionType[] | undefined>();
   const { run, loading, error } = useRequest(
-    async (params = {}, type = "init") => {
+    async (requestParams = {}) => {
+      const { params = {}, values, type = "init" } = requestParams;
+      const formData = values || form?.getFieldsValue();
       if (type === "init") {
         setData(undefined);
       }
       if (request) {
-        return request(params);
+        return request(params, formData);
       }
       return Promise.resolve(options);
     },
     {
-      manual,
+      manual: dispatchManual === false ? true : manual,
       debounceInterval: 300,
       onSuccess: (resultData) => {
         setData(resultData);
       },
     }
   );
-  const reload = ({
-    options: changeOpts,
-    params: requestParams,
-  }: ParamsModal) => {
+  const reload = ({ options: changeOpts, params }: ParamsModal) => {
     if (changeOpts) {
       return setData(changeOpts);
     }
-    return run(requestParams);
+    return run({ params });
   };
   const onSearch = (inputValue: string) => {
     if (!serviceSearch) {
       propsOnSearch?.(inputValue);
       return;
     }
-    run({ inputValue });
+    run({ params: { inputValue } });
   };
   useEffect(() => {
     if (options) {

package/src/components/Select/index.tsx

@@ -31,6 +31,8 @@ const Index: React.FC<HSelectProps> = ({
   noMatchItemRender = defaultSelectConfig.noMatchItemRender,
   allSelect,
   addDispatchListener,
+  addFormat,
+  dispatch,
   ...props
 }) => {
   const { icon, render } = modeConfig?.[mode || ""] || {};
@@ -53,6 +55,7 @@ const Index: React.FC<HSelectProps> = ({
     serviceSearch,
     showSearch,
     onSearch: propsOnSearch,
+    dispatch,
   }); //options
 
   const data = useChangeOptions({ options: resultData, fieldNames });

package/src/components/Select/modal.ts

@@ -2,6 +2,8 @@ import type { SelectProps } from "antd";
 import type React from "react";
 import type { PromiseFnResult } from "../modal";
 import type { argsFn } from "@/components/Form/modal";
+import type { addFormatItemModal } from "@/components/Form/modal";
+import type { DispatchModal } from "@/components/Form/modal";
 export type OptionType = Record<string, any>;
 export type PartialHSelectProps = Partial<HSelectProps>;
 export type RenderFn = (data: OptionType) => React.ReactNode;
@@ -14,7 +16,8 @@ export interface ModeConfig {
   multiple?: ModeConfigItem;
   tags?: ModeConfigItem;
 }
-export interface HSelectProps extends Omit<SelectProps, "options"> {
+export interface HSelectProps
+  extends Omit<SelectProps, "options" | "placeholder"> {
   style?: React.CSSProperties;
   request?: PromiseFnResult<any, OptionType[]>;
   manual?: boolean;
@@ -25,6 +28,9 @@ export interface HSelectProps extends Omit<SelectProps, "options"> {
   noMatchItemRender?: RenderFn; //没有数据
   allSelect?: boolean; //显示全选
   addDispatchListener?: (key: string, fn: argsFn) => void;
+  addFormat?: (format: Record<string, addFormatItemModal>) => void;
+  placeholder?: string;
+  dispatch?: DispatchModal;
 }
 export interface FilterDataModal {
   value: any;

package/src/components/modal.ts

@@ -2,7 +2,10 @@ export interface ValueCheckMapModal {
   checked?: any;
   noChecked?: any;
 }
-export type PromiseFnResult<T = any, R = any> = (params: T) => Promise<R>;
+export type PromiseFnResult<T = any, R = any> = (
+  params: T,
+  formDataValues?: any
+) => Promise<R>;
 export interface ValueSwitchMapModal {
   open?: any;
   close?: any;

package/src/pages/Form/index.tsx

@@ -24,11 +24,18 @@ const formData = (options) => {
       label: "下拉框",
       name: "select",
       type: "select",
+      dispatch: {
+        fnKey: "reload",
+        dependencies: ["selectInput", "sz"],
+        manual: false,
+      },
       itemProps: {
-        request: (params = {}) => {
+        request: (params = {}, values) => {
+          console.log(values, "paramsparamsparams");
           const { label = "123", value = 1 } = params;
           return Promise.resolve([{ label, value }]);
         },
+        showSearch: true,
       },
       rules: [{ required: true }],
     },
@@ -144,11 +151,12 @@ export default () => {
           configData={formData(options)}
           labelWidth={200}
           form={form}
+          initialValues={{}}
           onFinish={(value) => {
             console.log(value);
           }}
           onValuesChange={(val) => {
-            console.log(val);
+            console.log(val, "onValuesChange");
           }}
           infoRequest={() => {
             return new Promise<any>((resolve) => {

package/src/pages/ModalForm/index.tsx

@@ -120,17 +120,6 @@ export default () => {
         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="测试"
       />

package/src/pages/Select/index.tsx

@@ -15,7 +15,6 @@ export default () => {
           { name: "测试2", value: 20, userId: 112321 },
         ]}
         placeholder="多选"
-        mode={"multiple"}
         onChange={(val, option) => {
           console.log(val, option);
         }}