@hw-component/table 1.7.3 → 1.7.5

package/src/pages/Table/index.tsx

@@ -1,91 +1,99 @@
 import { HTable, useHTable, HTableConfig } from "@/components";
-import { Button, Card, Tooltip ,Typography,Tag,Row} from "antd";
+import { Button, Card, Tooltip, Typography, Tag, Row } from "antd";
 import { HFormConfigProvider } from "@hw-component/form";
 import { SettingOutlined } from "@ant-design/icons";
 import ProTable from "@ant-design/pro-table";
-import {useRequest} from "ahooks";
+import { useRequest } from "ahooks";
 
-const TagsComponent=({data,labelKey})=>{
-  const len=data?.length;
-  if (!len){
-    return <>-</>
+const TagsComponent = ({ data, labelKey }) => {
+  const len = data?.length;
+  if (!len) {
+    return <>-</>;
   }
-  console.log(data)
-  return   <>
-    {data?.map((item, index) => {
-      const label="483607ad55fc115ae45219f661248a42b6c40a487f95469b39ee49420a2dc";
-      console.log(label.length)
-      return (
-          <Tag key={index} style={{width:120}}>
+  console.log(data);
+  return (
+    <>
+      {data?.map((item, index) => {
+        const label =
+          "483607ad55fc115ae45219f661248a42b6c40a487f95469b39ee49420a2dc";
+        console.log(label.length);
+        return (
+          <Tag key={index} style={{ width: 120 }}>
             <Typography.Text ellipsis copyable>
               {label}
             </Typography.Text>
           </Tag>
-      );
-    })}
-  </>
-}
+        );
+      })}
+    </>
+  );
+};
 
-export const configData =[
+export const configData = [
   {
-    title: '报警联系人名称',
+    title: "报警联系人名称",
     width: 120,
-    dataIndex: 'name',
+    dataIndex: "name",
     valueType: "copy",
     valueTypeProps: {
-      ellipsis:{
-        rows:1,
-        tooltip:true
-      }
-    }
+      ellipsis: {
+        rows: 1,
+        tooltip: true,
+      },
+    },
   },
   {
-    title:"短信接收手机号",
-    dataIndex: 'mobileList',
+    title: "短信接收手机号",
+    dataIndex: "mobileList",
     width: 120,
-    valueType:"tags",
-    valueTypeProps:{
-      fieldNames:{
-        label:"name"
-      }
-    }
+    valueType: "tags",
+    valueTypeProps: {
+      fieldNames: {
+        label: "name",
+      },
+    },
   },
   {
-    title:"邮箱",
-    dataIndex: 'mailList',
-    valueType:"tags",
+    title: "邮箱",
+    dataIndex: "mailList",
+    valueType: "tags",
     width: 120,
   },
   {
-    title: '悠哉公众号openid',
-    dataIndex: 'openidList',
+    title: "悠哉公众号openid",
+    dataIndex: "openidList",
     width: 300,
     render: (_: any, data) => {
       const { openidList } = data;
-      return <TagsComponent data={openidList}/>
+      return <TagsComponent data={openidList} />;
     },
   },
   {
-    title: '钉钉机器人',
-    dataIndex: 'dingdingList',
+    title: "钉钉机器人",
+    dataIndex: "dingdingList",
     width: 300,
-    render:(_: any, data)=>{
+    render: (_: any, data) => {
       const { dingdingList } = data;
-      const newList=dingdingList?.filter((item)=>{
-        return typeof item !== 'string'
+      const newList = dingdingList?.filter((item) => {
+        return typeof item !== "string";
       });
-      return <TagsComponent data={newList} labelKey="webhook"/>
-    }
+      return <TagsComponent data={newList} labelKey="webhook" />;
+    },
   },
   {
-    title:"操作",
-    width:120,
-    align: 'center',
-    dataIndex:"op",
-    render: (_: any, data: TableItemModal,index:number,tableInstance:HTableInstance) => {
-      return <div></div>
+    title: "操作",
+    width: 120,
+    align: "center",
+    dataIndex: "op",
+    render: (
+      _: any,
+      data: TableItemModal,
+      index: number,
+      tableInstance: HTableInstance
+    ) => {
+      return <div />;
+    },
   },
-  }
 ];
 const Test = ({ name, selectedRowData }) => {
   console.log(selectedRowData);
@@ -93,24 +101,24 @@ const Test = ({ name, selectedRowData }) => {
 };
 export default () => {
   const hTable = useHTable();
-  const {loading,data}=useRequest(()=>{
-    const arrayData:any[] = [];
+  const { loading, data } = useRequest(() => {
+    const arrayData: any[] = [];
     for (let i = 0; i < 1; i = i + 1) {
       arrayData.push({
-        "id": i,
-        "name": "仙人仙人仙人仙人仙人仙人仙人仙人仙人仙人仙人仙人仙人仙人仙人仙人仙人仙人仙人仙人仙人仙人仙人仙人",
-        "mobileList": null,
-        "mailList": null,
-        "openidList": [
-          "okSMy58P_PE9sQkAG03gkpiTk-hs"
-        ],
-        "dingdingList": [
+        id: i,
+        name: "仙人仙人仙人仙人仙人仙人仙人仙人仙人仙人仙人仙人仙人仙人仙人仙人仙人仙人仙人仙人仙人仙人仙人仙人",
+        mobileList: null,
+        mailList: null,
+        openidList: ["okSMy58P_PE9sQkAG03gkpiTk-hs"],
+        dingdingList: [
           {
-            "webhook": "https://oapi.dingtalk.com/robot/send?access_token=fa1483607ad55fc115ae45219f661248a42b6c40a487f95469b39ee49420a2dc",
-            "secretkey": "SEC1603b7a13fec76f6ec9e1eedbd44279f61b4298142d42616a4a672c245a37f3d"
-          }
+            webhook:
+              "https://oapi.dingtalk.com/robot/send?access_token=fa1483607ad55fc115ae45219f661248a42b6c40a487f95469b39ee49420a2dc",
+            secretkey:
+              "SEC1603b7a13fec76f6ec9e1eedbd44279f61b4298142d42616a4a672c245a37f3d",
+          },
         ],
-        "notifyAll": 0
+        notifyAll: 0,
       });
     }
     return new Promise((resolve, reject) => {
@@ -130,101 +138,100 @@ export default () => {
         >
           获取
         </div>
-         <ProTable
+        <ProTable
           columns={configData}
-          scroll={{x:1000}}
+          scroll={{ x: 1000 }}
           loading={loading}
           dataSource={data}
-         />
-          <HTable
-            configData={configData}
-
-            rowKey={(data, index) => {
-              return index;
-            }}
-            table={hTable}
-            onReset={() => {
-              hTable.form.setFieldsValue({
-                name1: "ffff",
+        />
+        <HTable
+          configData={configData}
+          rowKey={(rowData, index) => {
+            return index;
+          }}
+          table={hTable}
+          onReset={() => {
+            hTable.form.setFieldsValue({
+              name1: "ffff",
+            });
+          }}
+          hideLabel={false}
+          labelWidth={88}
+          action={{
+            test: (params) => {
+              console.log(params, "lllll");
+            },
+          }}
+          rowSelection={false}
+          affixProps={{
+            target: () => document.querySelector(".body"),
+          }}
+          scroll={{
+            x: 1000,
+          }}
+          columnsState={{
+            persistenceKey: "test",
+            persistenceType: "localStorage",
+          }}
+          formInitValues={{
+            name2: 1,
+          }}
+          tableExtraRender={() => {
+            return <div>ffff</div>;
+          }}
+          headerTitle={
+            <Button
+              type={"primary"}
+              onClick={() => {
+                console.log(hTable.table.getColSettingKeys());
+              }}
+            >
+              操作
+            </Button>
+          }
+          request={(params) => {
+            const { current = 1, size = "10" } = params;
+            const arrayData: any[] = [];
+            for (let i = 0; i < 1; i = i + 1) {
+              arrayData.push({
+                id: i,
+                name: "仙人仙人仙人仙人仙人仙人仙人仙人仙人仙人仙人仙人仙人仙人仙人仙人仙人仙人仙人仙人仙人仙人仙人仙人仙人仙人",
+                mobileList: [{ name: "1" }, { name: "2" }],
+                mailList: null,
+                openidList: ["okSMy58P_PE9sQkAG03gkpiTk-hs"],
+                dingdingList: [
+                  {
+                    webhook:
+                      "https://oapi.dingtalk.com/robot/send?access_token=fa1483607ad55fc115ae45219f661248a42b6c40a487f95469b39ee49420a2dc",
+                    secretkey:
+                      "SEC1603b7a13fec76f6ec9e1eedbd44279f61b4298142d42616a4a672c245a37f3d",
+                  },
+                ],
+                notifyAll: 0,
               });
-            }}
-            hideLabel={false}
-            labelWidth={88}
-            action={{
-              test: (params) => {
-                console.log(params, "lllll");
-              },
-            }}
-            rowSelection={false}
-            affixProps={{
-              target: () => document.querySelector(".body"),
-            }}
-            scroll={{
-              x: 1000,
-            }}
-            columnsState={{
-              persistenceKey: "test",
-              persistenceType: "localStorage",
-            }}
-            formInitValues={{
-              name2: 1,
-            }}
-            tableExtraRender={()=>{
-              return <div>ffff</div>
-            }}
-            headerTitle={
-              <Button
-                type={"primary"}
-                onClick={() => {
-                  console.log(hTable.table.getColSettingKeys());
-                }}
-              >
-                操作
-              </Button>
             }
-            request={(params) => {
-              const { current = 1, size = "10" } = params;
-              const arrayData:any[] = [];
-              for (let i = 0; i < 1; i = i + 1) {
-                arrayData.push({
-                  "id": i,
-                  "name": "仙人仙人仙人仙人仙人仙人仙人仙人仙人仙人仙人仙人仙人仙人仙人仙人仙人仙人仙人仙人仙人仙人仙人仙人仙人仙人",
-                  "mobileList": [{name:"1"},{name:"2"}],
-                  "mailList": null,
-                  "openidList": [
-                    "okSMy58P_PE9sQkAG03gkpiTk-hs"
-                  ],
-                  "dingdingList": [
-                    {
-                      "webhook": "https://oapi.dingtalk.com/robot/send?access_token=fa1483607ad55fc115ae45219f661248a42b6c40a487f95469b39ee49420a2dc",
-                      "secretkey": "SEC1603b7a13fec76f6ec9e1eedbd44279f61b4298142d42616a4a672c245a37f3d"
-                    }
-                  ],
-                  "notifyAll": 0
+            return new Promise((resolve, reject) => {
+              setTimeout(() => {
+                // reject(new Error("错误"));
+                resolve({
+                  size: size,
+                  current: current.toString(10),
+                  total: "1000",
+                  records: arrayData,
                 });
-              }
-              return new Promise((resolve, reject) => {
-                setTimeout(() => {
-                  // reject(new Error("错误"));
-                  resolve({
-                    size: size,
-                    current: current.toString(10),
-                    total: "1000",
-                    records: arrayData,
-                  });
-                }, 2000);
-              });
-            }}
-            options={{
-              settingRender: () => {
-                return (
-                  <Tooltip title="321312312312321">
-                    <SettingOutlined width={24} />
-                  </Tooltip>
-                );
-              },
-            }}
-          />
+              }, 2000);
+            });
+          }}
+          options={{
+            settingRender: () => {
+              return (
+                <Tooltip title="321312312312321">
+                  <SettingOutlined width={24} />
+                </Tooltip>
+              );
+            },
+          }}
+        />
       </div>
     </HFormConfigProvider>
   );