@hw-component/table 1.9.79 → 1.9.81

package/src/components/render/CopyComponent.tsx

@@ -2,7 +2,7 @@ import copy from "copy-to-clipboard";
 import { message, Typography } from "antd";
 import type { EllipsisConfig } from "antd/lib/typography/Base";
 import { useClassName } from "../hooks";
-import {useMemo} from "react";
+import { useMemo } from "react";
 const { Paragraph } = Typography;
 interface IProps {
   text: string;
@@ -12,14 +12,14 @@ interface IProps {
 }
 export default ({ cpText, text, successMsg, ellipsis }: IProps) => {
   const className = useClassName("hw-table-render-copy");
-  const propsEllipsis=useMemo(()=>{
-       if (ellipsis===true){
-          return  {
-               tooltip:text
-           }
-       }
-       return ellipsis;
-  },[ellipsis,text]);
+  const propsEllipsis = useMemo(() => {
+    if (ellipsis === true) {
+      return {
+        tooltip: text,
+      };
+    }
+    return ellipsis;
+  }, [ellipsis, text]);
   return (
     <Paragraph
       ellipsis={propsEllipsis}

package/src/components/render/TagsComponent.tsx

@@ -13,9 +13,9 @@ interface IProps {
   fieldNames?: { label?: string; value?: string };
   tableInstance?: HTableInstance;
   maxLen?: number | null;
-  popoverContentRender?:(node:React.ReactNode)=>React.ReactNode;
-  contentItemRender?:(item:any)=>React.ReactNode;
-  extra?:React.ReactNode;
+  popoverContentRender?: (node: React.ReactNode) => React.ReactNode;
+  contentItemRender?: (item: any) => React.ReactNode;
+  extra?: React.ReactNode;
 }
 const getTooltipProps = (
   title: string,
@@ -48,7 +48,7 @@ const TagsComponent = (props: IProps) => {
     tableInstance,
     maxLen,
     popoverContentRender,
-    extra
+    extra,
   } = props;
   const { label = "label", value = "value" } = fieldNames;
   const { tagData, moreTag } = useMemo(() => {
@@ -65,7 +65,7 @@ const TagsComponent = (props: IProps) => {
     };
   }, [data, maxLen]);
   const moreLen = moreTag?.length;
-  const {contentItemRender,...childProps}=props;
+  const { contentItemRender, ...childProps } = props;
   return (
     <Row gutter={[0, 8]}>
       {tagData?.map((tagItem, index) => {
@@ -88,7 +88,7 @@ const TagsComponent = (props: IProps) => {
                   onClose?.(indexKey, tableInstance);
                 }}
               >
-                {contentItemRender?contentItemRender(tagItem):tagItem}
+                {contentItemRender ? contentItemRender(tagItem) : tagItem}
               </Tag>
             </Tooltip>
           );
@@ -110,13 +110,23 @@ const TagsComponent = (props: IProps) => {
                 cuTagProps?.onClose(cuKey, tableInstance);
               }}
             >
-              {contentItemRender?contentItemRender(tagLabel):tagLabel}
+              {contentItemRender ? contentItemRender(tagLabel) : tagLabel}
             </Tag>
           </Tooltip>
         );
       })}
       {!moreLen ? null : (
-        <Popover content={popoverContentRender?popoverContentRender(<TagsComponent {...childProps} maxLen={null} />):<TagsComponent {...childProps} maxLen={null} />}>
+        <Popover
+          content={
+            popoverContentRender ? (
+              popoverContentRender(
+                <TagsComponent {...childProps} maxLen={null} />
+              )
+            ) : (
+              <TagsComponent {...childProps} maxLen={null} />
+            )
+          }
+        >
           <Tag>...等{data.length}个</Tag>
         </Popover>
       )}

package/src/components/render/config.tsx

@@ -114,8 +114,15 @@ const textRender = (config: ConfigItemModal, itemData: any) => {
 };
 const imageRender = (config: ConfigItemModal, itemData: any) => {
   const { valueTypeProps = {} } = config;
+  const {fallback}=valueTypeProps;
   const tableVal = getTableVal(config, itemData);
-  return <Image src={tableVal} width={48} {...valueTypeProps} />;
+  if (!fallback&&tableVal===null){
+    return  "-"
+  }
+  return <Image src={tableVal||""}
+                width={48}
+                {...valueTypeProps}
+  />;
 };
 const avatarRender = (config: ConfigItemModal, itemData: any) => {
   const { valueTypeProps = {} } = config;

package/src/pages/DwTable/index.tsx

@@ -1,5 +1,5 @@
 import { Button } from "antd";
-import {HDwTable, HModalTable, HTable, useHDialogTable} from "@/components";
+import { HDwTable, HModalTable, HTable, useHDialogTable } from "@/components";
 const configData = [
   {
     title: "座位",
@@ -100,9 +100,9 @@ const Test = () => {
         title="111"
         configData={configData}
         tableProps={{
-          rowSelection:{
-            type:"radio"
-          }
+          rowSelection: {
+            type: "radio",
+          },
         }}
         request={req2}
         contentRender={(node) => {

package/src/pages/Table/index.tsx

@@ -5,12 +5,12 @@ import {
   HTableHeaderSubBtn,
   HTableHeader,
 } from "@/components";
-import {Button, Card, Tooltip, Typography, Tag, Row, Space} from "antd";
-import { HFormConfigProvider } from "@hw-component/form";
+import { Button, Card, Tooltip, Typography, Tag, Row, Space } from "antd";
+import { HFormConfigProvider, HRangePicker } from "@hw-component/form";
 import { SettingOutlined } from "@ant-design/icons";
 import ProTable from "@ant-design/pro-table";
 import { useRequest } from "ahooks";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 
 const TagsComponent = ({ data, labelKey }) => {
   const len = data?.length;
@@ -34,114 +34,43 @@ const TagsComponent = ({ data, labelKey }) => {
     </>
   );
 };
-
+const Testd = (props) => {
+  return (
+    <div>
+      <HRangePicker {...props} />
+    </div>
+  );
+};
 export const configData = [
-  {
-    title: "报警联系人名称",
-    width: 120,
-    dataIndex: ["name", "1"],
-    valueType: "text",
-    searchType: "rangePicker",
-    showSearch: true,
-    sorter: true,
-    filterMultiple: false,
-    filters: [
-      { value: 1, text: "123" },
-      { value: 2, text: "2222" },
-    ],
-    valueTypeProps: {
-      ellipsis: {
-        tooltip: true,
-      },
-    },
-  },
   {
     title: "短信接收手机号",
     dataIndex: "mobileList",
     width: 120,
     valueType: "tags",
+    searchType: "rangePicker",
     showSearch: true,
-    valueTypeProps: {
-      fieldNames: {
-        label: "name",
-      },
+    shouldUpdate: (p, c) => {
+      return true;
     },
   },
   {
-    title: "id",
-    dataIndex: "id",
+    title: "图片",
+    dataIndex: "img",
     width: 120,
-    valueType: "copy",
-    sorter: (a, b) => {
-      const { id: aNum } = a;
-      const { id: bNum } = b;
-      return aNum - bNum;
-    },
-  },
-  {
-    title: "悠哉公众号openid",
-    dataIndex: "openidList",
-    width: 300,
-    render: (_: any, data) => {
-      const { openidList } = data;
-      return <TagsComponent data={openidList} />;
-    },
-  },
-  {
-    title: "升级规则",
-    dataIndex: "rule",
-    children: [
-      {
-        title: "邀请总人数",
-        dataIndex: "upInviteCount",
-        width: 100,
-        align: "center",
-      },
-      {
-        title: "订单笔数",
-        dataIndex: "upOrderCount",
-        width: 100,
-        align: "center",
-      },
-    ],
-  },
-  {
-    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: "操作",
-    width: 120,
-    align: "center",
-    dataIndex: "op",
-    render: (
-      _: any,
-      data: TableItemModal,
-      index: number,
-      tableInstance: HTableInstance
-    ) => {
-      return <div />;
-    },
+    valueType: "image",
+    valueTypeProps:{
+      fallback:"data:image/png;base64,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"
+
+    }
   },
 ];
-const Test = ({ name, selectedRowData }) => {
-  console.log(selectedRowData);
-  return <div>{name}</div>;
-};
 const maker = (name) => {
   const data = [];
   for (let i = 0; i < 100; i += 1) {
     data.push({
       name,
       id: i,
+      img:""
     });
   }
   return data;
@@ -181,11 +110,10 @@ export default () => {
     size: "10",
     current: "1",
   });
-  const [keys,setKeys]=useState([]);
+  const [keys, setKeys] = useState([]);
   return (
     <HFormConfigProvider>
       <div>
-        <HTableHeader configData={[]} />
         <div
           onClick={() => {
             console.log(hTable.table.getTableSourceData());
@@ -207,7 +135,7 @@ export default () => {
           }}
           rowSelection={{
             allPageCheck: false,
-            preserveSelectedRowKeys:true,
+            preserveSelectedRowKeys: true,
           }}
           affixProps={{
             target: () => document.querySelector(".body"),
@@ -220,9 +148,10 @@ export default () => {
             persistenceType: "localStorage",
           }}
           formInitValues={{
-            mobileList: "mobileList",
+            deviceType: "1",
           }}
           request={(params) => {
+            console.log(params, "params");
             return Promise.resolve({
               current: 1,
               records: maker(`第${100}页`),
@@ -232,26 +161,26 @@ export default () => {
           }}
           headerTitle={
             <Space size={8}>
-             <div style={{width:2000}}>
-               <Button
-                   onClick={() => {
-                     console.log(hTable.table.getColSettingKeys());
-                   }}
-               >
-                 操作
-               </Button>
-             </div>
-              <Button
+              <div style={{ width: 1000 }}>
+                <Button
                   onClick={() => {
                     console.log(hTable.table.getColSettingKeys());
                   }}
+                >
+                  操作
+                </Button>
+              </div>
+              <Button
+                onClick={() => {
+                  console.log(hTable.table.getColSettingKeys());
+                }}
               >
                 操作
               </Button>
               <Button
-                  onClick={() => {
-                    console.log(hTable.table.getColSettingKeys());
-                  }}
+                onClick={() => {
+                  console.log(hTable.table.getColSettingKeys());
+                }}
               >
                 操作
               </Button>