@hw-component/table 1.3.8 → 1.6.6

package/es/HTableBody/hooks.js

@@ -121,7 +121,7 @@ var useColumnsStateType = function useColumnsStateType(_ref4) {
     selfValue = _useState6[0],
     setSelfValue = _useState6[1];
   var initTableColsVal = useMemo(function () {
-    return selfValue;
+    return selfValue || {};
   }, []);
   useEffect(function () {
     tableInstance.table.getColSettingKeys = function () {

package/lib/HTableBody/hooks.js

@@ -122,7 +122,7 @@ var useColumnsStateType = function useColumnsStateType(_ref4) {
     selfValue = _useState6[0],
     setSelfValue = _useState6[1];
   var initTableColsVal = React.useMemo(function () {
-    return selfValue;
+    return selfValue || {};
   }, []);
   React.useEffect(function () {
     tableInstance.table.getColSettingKeys = function () {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hw-component/table",
-  "version": "1.3.8",
+  "version": "1.6.6",
   "description": "基于antd二次开发table组件",
   "keywords": [
     "table"
@@ -31,7 +31,7 @@
   "dependencies": {
     "@ant-design/icons": "4.6.2",
     "@ant-design/pro-table": "2.70.0",
-    "@hw-component/form": "1.6.1",
+    "@hw-component/form": "1.6.2",
     "ahooks": "2.10.9",
     "antd": "4.20.7",
     "copy-to-clipboard": "3.3.1",

package/src/components/HTableBody/hooks.tsx

@@ -111,7 +111,7 @@ export const useColumnsStateType = ({
     Record<string, ColumnsState> | undefined
   >(defaultValue);
   const initTableColsVal = useMemo(() => {
-    return selfValue;
+    return selfValue||{};
   }, []);
   useEffect(() => {
     tableInstance.table.getColSettingKeys = () => {

package/src/pages/Table/index.tsx

@@ -1,126 +1,79 @@
 import { HTable, useHTable, HTableConfig } from "@/components";
-import { Button, Card, Tooltip } 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";
 
-const configData = [
-  {
-    title: "座位21321",
-    showSearch: true,
-    searchType: "rangePicker",
-    dataIndex: "id",
-    sorter: true,
-    itemProps: {
-      options: [{ label: "1", value: 1 }],
-      placeholder: ["测试", "测试"],
-      valueMap: {
-        start: "start",
-        end: "end",
-      },
-    },
-  },
-  {
-    title: "座位断开",
-    dataIndex: "name1",
-    childrenDataIndex: [
-      {
-        dataIndex: "name2",
-        title: "座位断开2",
-      },
-      {
-        dataIndex: "name3",
-        title: "座位断开3",
-      },
-    ],
-    itemProps: {
-      options: [{ label: "1", value: 1 }],
-    },
-    valueType: "date",
-  },
-  {
-    title: <div>座位fff</div>,
-    titleStr: "座位",
-    dataIndex: "name2",
-    searchType: "select",
-    itemProps: {
-      options: [{ label: "name2", value: 1 }],
-    },
-  },
+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}}>
+            <Typography.Text ellipsis copyable>
+              {label}
+            </Typography.Text>
+          </Tag>
+      );
+    })}
+  </>
+}
+
+export const configData =[
   {
-    title: <div>标签</div>,
-    dataIndex: "tag",
-    sorter: true,
-    valueType: "tags",
-    width: 200,
-    valueTypeProps: {
-      closable: true,
-      tooltip: true,
-      onClose: (key) => {
-        console.log(key);
-      },
-      maxLen: 2,
-    },
+    title: '报警联系人名称',
+    width: 120,
+    dataIndex: 'name',
   },
   {
-    title: "可以复制",
-    dataIndex: "copy",
-    sorter: true,
-    valueType: "copy",
-    width: 100,
-    valueTypeProps: {
-      text: () => {
-        return "你大爷";
-      },
-    },
+    title:"短信接收手机号",
+    dataIndex: 'mobileList',
+    width: 120,
+    valueType:"tags",
   },
   {
-    title: "link",
-    dataIndex: "link",
-    sorter: true,
-    valueType: "link",
-    width: 100,
-    valueTypeProps: {
-      href: () => {
-        return "https://ant-design.antgroup.com/docs/react/i18n-cn";
-      },
-    },
+    title:"邮箱",
+    dataIndex: 'mailList',
+    valueType:"tags",
+    width: 120,
   },
   {
-    title: "text",
-    dataIndex: "text",
-    sorter: true,
-    valueType: "text",
-    width: 80,
-    valueTypeProps: {
-      type: "secondary",
-      ellipsis: {
-        tooltip: true,
-      },
+    title: '悠哉公众号openid',
+    dataIndex: 'openidList',
+    width: 300,
+    render: (_: any, data) => {
+      const { openidList } = data;
+      return <TagsComponent data={openidList}/>
     },
   },
   {
-    title: "userInfo",
-    dataIndex: "userInfo",
-    sorter: true,
-    valueType: "userInfo",
-    width: 80,
-  },
-  {
-    title: "avatar",
-    dataIndex: "avatar",
-    sorter: true,
-    valueType: "avatar",
-    width: 80,
+    title: '钉钉机器人',
+    dataIndex: 'dingdingList',
+    width: 300,
+    render:(_: any, data)=>{
+      const { dingdingList } = data;
+      const newList=dingdingList?.filter((item)=>{
+        return typeof item !== 'string'
+      });
+      return <TagsComponent data={newList} labelKey="webhook"/>
+    }
   },
   {
-    title: "操作",
-    name: "aaa",
-    fixed: "right",
-    width: 200,
-    render: () => {
-      return <Card>fff</Card>;
-    },
+    title:"操作",
+    width:120,
+    align: 'center',
+    dataIndex:"op",
+    render: (_: any, data: TableItemModal,index:number,tableInstance:HTableInstance) => {
+      return <div></div>
   },
+  }
 ];
 const Test = ({ name, selectedRowData }) => {
   console.log(selectedRowData);
@@ -128,6 +81,33 @@ const Test = ({ name, selectedRowData }) => {
 };
 export default () => {
   const hTable = useHTable();
+  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": [
+          {
+            "webhook": "https://oapi.dingtalk.com/robot/send?access_token=fa1483607ad55fc115ae45219f661248a42b6c40a487f95469b39ee49420a2dc",
+            "secretkey": "SEC1603b7a13fec76f6ec9e1eedbd44279f61b4298142d42616a4a672c245a37f3d"
+          }
+        ],
+        "notifyAll": 0
+      });
+    }
+    return new Promise((resolve, reject) => {
+      setTimeout(() => {
+        // reject(new Error("错误"));
+        resolve(arrayData);
+      }, 2000);
+    });
+  });
   return (
     <HFormConfigProvider>
       <div>
@@ -138,15 +118,15 @@ export default () => {
         >
           获取
         </div>
-        <HTableConfig
-          valueTypeConfig={{
-            userInfo: () => {
-              return <div>userInfo</div>;
-            },
-          }}
-        >
+         <ProTable
+          columns={configData}
+          scroll={{x:1000}}
+          loading={loading}
+          dataSource={data}
+         />
           <HTable
             configData={configData}
+
             rowKey={(data, index) => {
               return index;
             }}
@@ -163,9 +143,7 @@ export default () => {
                 console.log(params, "lllll");
               },
             }}
-            rowSelection={{
-              allPageCheck: false,
-            }}
+            rowSelection={false}
             affixProps={{
               target: () => document.querySelector(".body"),
             }}
@@ -192,27 +170,25 @@ export default () => {
                 操作
               </Button>
             }
-            paginationActionRender={() => {
-              return <div>你大爷</div>;
-            }}
             request={(params) => {
               const { current = 1, size = "10" } = params;
-              const arrayData = [];
-              for (let i = 0; i < 100; i = i + 1) {
+              const arrayData:any[] = [];
+              for (let i = 0; i < 1; i = i + 1) {
                 arrayData.push({
-                  id: i,
-                  name: "11",
-                  name1: "1721730221",
-                  tag: [
-                    { value: "1", label: "你好" },
-                    { value: "2", label: "你好1" },
-                    { value: "3", label: "你好2" },
+                  "id": i,
+                  "name": "仙人",
+                  "mobileList": null,
+                  "mailList": null,
+                  "openidList": [
+                    "okSMy58P_PE9sQkAG03gkpiTk-hs"
+                  ],
+                  "dingdingList": [
+                    {
+                      "webhook": "https://oapi.dingtalk.com/robot/send?access_token=fa1483607ad55fc115ae45219f661248a42b6c40a487f95469b39ee49420a2dc",
+                      "secretkey": "SEC1603b7a13fec76f6ec9e1eedbd44279f61b4298142d42616a4a672c245a37f3d"
+                    }
                   ],
-                  copy: "复制复制复制复制复制复制复制复制",
-                  link: "https://www.baidu.com/",
-                  text: "文本文本文本文本",
-                  avatar:
-                    "https://img-1304033052.cos.ap-chengdu.myqcloud.com/b75979ace44aed0928f4e359709f60e6",
+                  "notifyAll": 0
                 });
               }
               return new Promise((resolve, reject) => {
@@ -237,7 +213,6 @@ export default () => {
               },
             }}
           />
-        </HTableConfig>
       </div>
     </HFormConfigProvider>
   );