@hw-component/form 1.9.85 → 1.9.87

package/src/components/Upload/index.tsx

@@ -22,7 +22,7 @@ const Index: React.ForwardRefRenderFunction<IUploadRefModal, IUpLoadProps> = (
     addFormat,
     thumbUrl,
     hideAddBtn,
-      children,
+    children,
     ...props
   },
   ref
@@ -49,9 +49,9 @@ const Index: React.ForwardRefRenderFunction<IUploadRefModal, IUpLoadProps> = (
   }, [maxRowNum, listType]);
 
   const preview = (file) => {
-      if (onPreview===null){
-          return;
-      }
+    if (onPreview === null) {
+      return;
+    }
     if (onPreview) {
       onPreview(file);
       return;
@@ -101,7 +101,7 @@ const Index: React.ForwardRefRenderFunction<IUploadRefModal, IUpLoadProps> = (
     },
   });
   const relVal = Array.isArray(value) ? value : [];
-  const upListType=listType===null?undefined:listType;
+  const upListType = listType === null ? undefined : listType;
   return (
     <div style={contentStyle}>
       <Upload
@@ -116,9 +116,9 @@ const Index: React.ForwardRefRenderFunction<IUploadRefModal, IUpLoadProps> = (
         {...props}
       >
         {hideAddBtn ? null : (
-            <Btn value={relVal} maxCount={maxCount} listType={upListType} >
-                {children}
-            </Btn>
+          <Btn value={relVal} maxCount={maxCount} listType={upListType}>
+            {children}
+          </Btn>
         )}
       </Upload>
       <Preview

package/src/components/Upload/modal.ts

@@ -5,9 +5,10 @@ import type { UploadChangeParam } from "antd/lib/upload/interface";
 import type { MediaTypeEnum } from "@/components/Upload/enums";
 import type { addFormatItemModal } from "@/components/Form/modal";
 import type React from "react";
-import {UploadListType} from "antd/lib/upload/interface";
+import { UploadListType } from "antd/lib/upload/interface";
 
-export interface IUpLoadProps extends Omit<UploadProps, "onChange"|"listType"|"onPreview"> {
+export interface IUpLoadProps
+  extends Omit<UploadProps, "onChange" | "listType" | "onPreview"> {
   exFiles?: string[] | null;
   request?: (
     file: Exclude<BeforeUploadFileType, File | boolean> | RcFile
@@ -20,8 +21,8 @@ export interface IUpLoadProps extends Omit<UploadProps, "onChange"|"listType"|"o
   addFormat?: (config: Record<string, addFormatItemModal>) => void;
   thumbUrl?: string;
   hideAddBtn?: boolean;
-  listType?:UploadListType|null;
-  onPreview?:UploadProps["onPreview"]|null
+  listType?: UploadListType | null;
+  onPreview?: UploadProps["onPreview"] | null;
 }
 export interface IMediaTypeEleProps {
   file?: UploadFile;

package/src/components/index.tsx

@@ -40,3 +40,5 @@ export const HTrimInput = FormConfig.trimInput;
 
 export const HTrimTextArea = FormConfig.trimTextArea;
 export const HInputNumberGroup = FormConfig.inputNumberGroup.Component;
+
+export const HTagSelect = FormConfig.tagSelect;

package/src/pages/DrawerForm/index.tsx

@@ -13,17 +13,19 @@ const data = [
       return <Test />;
     },
   },
-    {
-        type:'select',
-         label:"下啦",
-         name:"select",
-         itemProps:{
-            options:[{
-                value:"123",
-                key:1
-            }]
-         }
+  {
+    type: "select",
+    label: "下啦",
+    name: "select",
+    itemProps: {
+      options: [
+        {
+          value: "123",
+          key: 1,
+        },
+      ],
     },
+  },
 ];
 let num = 0;
 const Test1 = ({ formNode, dialogForm, params }) => {
@@ -65,11 +67,11 @@ export default () => {
       </Button>
       <Button
         onClick={() => {
-            modalForm.show({
-                 initialValues:{
-                     "input":"12312"
-                 }
-            });
+          modalForm.show({
+            initialValues: {
+              input: "12312",
+            },
+          });
         }}
       >
         打开

package/src/pages/Form/index.tsx

@@ -75,151 +75,168 @@ export default () => {
         <div style={{ width: 1000 }}>
           <HForm
             configData={[
-                {
-                    label:"文字",
-                    name:"wz"
-                },
-                {
-                    label:"文字1",
-                    name:"wz1"
-                },
-                {
-                    label: "inputSelect",
-                    type: "richEditor",
-                    name: "richEditor",
-                    rules: [
-                        {
-                            validator: (rule, value, callback) => {
-                                console.log(value);
-                                return Promise.resolve();
-                            },
-                        },
-                    ],
-                },
               {
-                label: "富文本",
-                type: "timePicker",
-                name: "textArea",
-                itemProps:{
-                    showCount:true,
-                    maxLength:100
-                },
-                rules: [
-                  {
-                    validator: (rule, value, callback) => {
-                      console.log(value);
-                      return Promise.resolve();
-                    },
-                  },
-                ],
-              },
-              {
-                label: "运营商账号",
-                name: "mobile",
-                type: "buttonInput",
-                flexBox: true,
-                itemProps: {
-                  children: "修改手机号",
-                  disabled: true,
-                  buttonProps: {
-                    type: "primary",
-                    ghost: true,
-                    style: {
-                      marginLeft: 8,
-                    },
-                    onClick: () => {},
-                  },
-                },
-              },
-              {
-                label: "验证码",
-                name: "newCode",
-                type: "verificationCodeInput",
-                itemProps: {
-                  request: async ({ newMobile }) => {
-                    return Promise.resolve();
+                label: "tagSelect",
+                type:"tagSelect",
+                name: "wz",
+                  dispatch: {
+                      fnKey: 'reload',
+                      dependencies: ['wz1'],
                   },
-                  buttonProps: {
-                    ghost: true,
-                  },
-                },
-              },
-              {
-                label: "你好",
-                noStyle: true,
-                render: () => {
-                  return (
-                    <div
-                      style={{
-                        width: "100%",
-                        backgroundColor: "red",
-                        height: "100%",
-                      }}
-                    >
-                      <div style={{ height: 200 }} />
-                    </div>
-                  );
-                },
-              },
-              {
-                label: "你好",
-                noStyle: true,
-                render: () => {
-                  return (
-                    <div
-                      style={{
-                        width: "100%",
-                        backgroundColor: "black",
-                        height: "100%",
-                      }}
-                    />
-                  );
-                },
-              },
-              {
-                label: "数字输入框",
-                name: "yyy",
-                type: "inputNumberGroup",
-                rules: [{ required: true }],
-                itemProps: {
-                  inputNumberProps: {
-                    precision: 2,
-                  },
-                },
+                itemProps:{
+                    request:()=>{
+                        return new Promise((resolve, reject)=>{
+                            setTimeout(()=>{
+                                resolve([{
+                                    value:"你好",
+                                    key:"1"
+                                }])
+                            },3000)
+                        })
+                    }
+                }
               },
               {
-                label: "文字",
-                type: "text",
-                name: "text",
-                  render:()=>{
-                      return <div>fff</div>
-                  },
-                  itemProps: {
-                  type: "danger",
-                  addonBefore: (
-                    <div style={{ height: 100, backgroundColor: "red" }}>
-                      nihao
-                    </div>
-                  ),
-                  addonAfter: (
-                    <div style={{ height: 200, backgroundColor: "red" }}>
-                      wohao
-                    </div>
-                  ),
-                    initValueProvider:(...data)=>{
-                        console.log("initValueProvider")
-                       return {
-                           text:"你好"
-                       }
-                    },
-                },
+                label: "文字1",
+                name: "wz1",
               },
+              // {
+              //   label: "inputSelect",
+              //   type: "richEditor",
+              //   name: "richEditor",
+              //   rules: [
+              //     {
+              //       validator: (rule, value, callback) => {
+              //         console.log(value);
+              //         return Promise.resolve();
+              //       },
+              //     },
+              //   ],
+              // },
+              // {
+              //   label: "富文本",
+              //   type: "timePicker",
+              //   name: "textArea",
+              //   itemProps: {
+              //     showCount: true,
+              //     maxLength: 100,
+              //   },
+              //   rules: [
+              //     {
+              //       validator: (rule, value, callback) => {
+              //         console.log(value);
+              //         return Promise.resolve();
+              //       },
+              //     },
+              //   ],
+              // },
+              // {
+              //   label: "运营商账号",
+              //   name: "mobile",
+              //   type: "buttonInput",
+              //   flexBox: true,
+              //   itemProps: {
+              //     children: "修改手机号",
+              //     disabled: true,
+              //     buttonProps: {
+              //       type: "primary",
+              //       ghost: true,
+              //       style: {
+              //         marginLeft: 8,
+              //       },
+              //       onClick: () => {},
+              //     },
+              //   },
+              // },
+              // {
+              //   label: "验证码",
+              //   name: "newCode",
+              //   type: "verificationCodeInput",
+              //   itemProps: {
+              //     request: async ({ newMobile }) => {
+              //       return Promise.resolve();
+              //     },
+              //     buttonProps: {
+              //       ghost: true,
+              //     },
+              //   },
+              // },
+              // {
+              //   label: "你好",
+              //   noStyle: true,
+              //   render: () => {
+              //     return (
+              //       <div
+              //         style={{
+              //           width: "100%",
+              //           backgroundColor: "red",
+              //           height: "100%",
+              //         }}
+              //       >
+              //         <div style={{ height: 200 }} />
+              //       </div>
+              //     );
+              //   },
+              // },
+              // {
+              //   label: "你好",
+              //   noStyle: true,
+              //   render: () => {
+              //     return (
+              //       <div
+              //         style={{
+              //           width: "100%",
+              //           backgroundColor: "black",
+              //           height: "100%",
+              //         }}
+              //       />
+              //     );
+              //   },
+              // },
+              // {
+              //   label: "数字输入框",
+              //   name: "yyy",
+              //   type: "inputNumberGroup",
+              //   rules: [{ required: true }],
+              //   itemProps: {
+              //     inputNumberProps: {
+              //       precision: 2,
+              //     },
+              //   },
+              // },
+              // {
+              //   label: "文字",
+              //   type: "text",
+              //   name: "text",
+              //   render: () => {
+              //     return <div>fff</div>;
+              //   },
+              //   itemProps: {
+              //     type: "danger",
+              //     addonBefore: (
+              //       <div style={{ height: 100, backgroundColor: "red" }}>
+              //         nihao
+              //       </div>
+              //     ),
+              //     addonAfter: (
+              //       <div style={{ height: 200, backgroundColor: "red" }}>
+              //         wohao
+              //       </div>
+              //     ),
+              //     initValueProvider: (...data) => {
+              //       console.log("initValueProvider");
+              //       return {
+              //         text: "你好",
+              //       };
+              //     },
+              //   },
+              // },
             ]}
             dismissOnPressEnter={false}
             labelWidth={88}
             form={form}
             initialValues={{
-                richEditor:"1312312"
+              richEditor: "1312312",
             }}
             labelAlign={"left"}
             onFinish={(value) => {
@@ -246,15 +263,15 @@ export default () => {
       >
         点我
       </div>
-        <div
-            onClick={() => {
-                form.setFieldsValue({
-                    wz:"你好"
-                })
-            }}
-        >
-            设置
-        </div>
+      <div
+        onClick={() => {
+          form.setFieldsValue({
+            wz: "你好",
+          });
+        }}
+      >
+        设置
+      </div>
       <div
         onClick={() => {
           form.submit();

package/src/pages/ModalForm/index.tsx

@@ -1,4 +1,4 @@
-import {Button, Input} from "antd";
+import { Button, Input } from "antd";
 import {
   HModalForm,
   useHDialogForm,
@@ -11,12 +11,16 @@ import { ShowParamsModal } from "@/components/DialogForm/modal";
 const Test = (props) => {
   return <HUrlUpload {...props} />;
 };
-const ITest=()=>{
-    return <Input onPressEnter={(e)=>{
+const ITest = () => {
+  return (
+    <Input
+      onPressEnter={(e) => {
         e.preventDefault();
-        console.log("ITest")
-    }}/>
-}
+        console.log("ITest");
+      }}
+    />
+  );
+};
 const data = [
   {
     label: "输入框",
@@ -207,12 +211,12 @@ export default () => {
           destroyOnClose={false}
           autoClear={false}
           onOk={() => {
-              console.log("fff")
+            console.log("fff");
             return false;
           }}
           labelAlign={"left"}
           request={(values, params) => {
-              console.log(values,params)
+            console.log(values, params);
             return Promise.resolve();
           }}
           dialogForm={modalForm}

package/src/pages/Select/index.tsx

@@ -1,10 +1,11 @@
-import { HSelect } from "../../components";
+import { HSelect ,HTagSelect} from "../../components";
 import { Form, Space } from "antd";
 import { useEffect, useState } from "react";
 export default () => {
   const [selectVal, setSelectVal] = useState([{ name: "11", id: -100 }]);
   const [op, setOp] = useState([{ label: "1", value: 1 }]);
   const [val, setVal] = useState([2, 3]);
+    const [tagVal, setTagVal] = useState([]);
 
   return (
     <Space size={"large"} direction={"vertical"} style={{ width: "100%" }}>
@@ -39,13 +40,33 @@ export default () => {
       />
       <HSelect
         value={val}
-        onChange={(v) => {
-          console.log(v);
+        onChange={(v,opts) => {
+            console.log(v,opts)
           setVal(v);
         }}
         mode="multiple"
-        options={op}
       />
+        <HTagSelect
+            value={tagVal}
+            collapseProps={{
+                defaultActiveKey:'1'
+            }}
+            request={()=>{
+                return new Promise((resolve, reject)=>{
+                    setTimeout(()=>{
+                       resolve([])
+                    },3000)
+                })
+            }}
+            onChange={(value, opts)=>{
+                setTagVal(value);
+                console.log(value,opts)
+            }}
+            fieldNames={{
+                label:"value",
+                value:"key"
+            }}
+        />
       <div
         onClick={() => {
           setOp([{ label: "2", value: 2 }]);

package/src/pages/Upload/index.tsx

@@ -1,4 +1,4 @@
-import {Button, Space} from "antd";
+import { Button, Space } from "antd";
 import { HUpload, HUrlUpload } from "../../components";
 import React, { useState } from "react";
 import { MediaTypeEnum } from "../../components/Upload/enums";
@@ -33,7 +33,7 @@ export default () => {
         }}
         onChange={setFiles1}
       >
-          <Button>按钮</Button>
+        <Button>按钮</Button>
       </HUpload>
       <HUrlUpload
         inputHelper="测试"