@hw-component/table 1.9.59 → 1.9.61

package/src/components/HTableBody/{hooks.tsx → hooks/useColData.tsx}

@@ -1,22 +1,25 @@
+import { useHTableContext } from "@/components/context";
+import React, { useEffect, useMemo, useState } from "react";
+import { GetRowKey } from "rc-table/lib/interface";
 import type {
-  HTableInstance,
-  HTableProps,
-  HRowSelection,
   ConfigDataModal,
   ConfigItemModal,
-} from "../modal";
-import React, { useEffect, useMemo, useState } from "react";
-import { useHTableContext } from "../context";
-import type { GetRowKey } from "rc-table/lib/interface";
-import { RowSelectionBox, RowSelectionTitle } from "./RowSelection";
-import type { SizeType } from "antd/lib/config-provider/SizeContext";
-import type { ColumnsStateType } from "@ant-design/pro-table/es/typing";
-import type { ColumnsState } from "@ant-design/pro-table/es/container";
-import { mkChangeValue, outColSetting } from "./utils";
-import configRender from "../render";
+  HRowSelection,
+  HTableInstance,
+  HTableProps,
+} from "@/components/modal";
+import { useClassName } from "@/components/hooks";
 import { useHTableConfigContext } from "@/components/TableConfig";
 import { textTypes } from "@/components/render/config";
-import { useClassName } from "@/components/hooks";
+import configRender from "@/components/render";
+import {
+  RowSelectionBox,
+  RowSelectionTitle,
+} from "@/components/HTableBody/RowSelection";
+import type { ColumnsState } from "@ant-design/pro-table/es/container";
+import { mkChangeValue, outColSetting } from "@/components/HTableBody/utils";
+import type { ColumnsStateType } from "@ant-design/pro-table/es/typing";
+
 const rowSelectionCol = (rowSelection?: HRowSelection) => {
   const { allPageCheck, onChange, getCheckboxProps } = rowSelection || {};
   return {
@@ -44,7 +47,12 @@ const rowSelectionCol = (rowSelection?: HRowSelection) => {
   };
 };
 
-export const useCols = ({ configData, rowSelection, table ,bordered}: HTableProps) => {
+export const useCols = ({
+  configData,
+  rowSelection,
+  table,
+  bordered,
+}: HTableProps) => {
   const trClassname = useClassName("hw-table-col-hr");
   const [cols, setCols] = useState<ConfigDataModal>([]);
   const { valueTypeConfig } = useHTableConfigContext({});
@@ -61,10 +69,9 @@ export const useCols = ({ configData, rowSelection, table ,bordered}: HTableProp
       className = "",
       children = [],
     } = item;
-    const trClassName =bordered?"":itemClassNameMk(
-      children as any[],
-      lastChildren as any[]
-    );
+    const trClassName = bordered
+      ? ""
+      : itemClassNameMk(children as any[], lastChildren as any[]);
     const itemType = valueType as string;
     if (textTypes.indexOf(itemType) !== -1) {
       const { ellipsis } = valueTypeProps;
@@ -100,52 +107,11 @@ export const useCols = ({ configData, rowSelection, table ,bordered}: HTableProp
     cols,
   };
 };
-interface FilterKeysModal {
-  selectedRowKeys?: React.Key[];
-  records?: any[];
-  rowKey?: string | GetRowKey<any>;
-}
-export const useSynchronousKeys = ({
-  selectedRowKeys,
-  records,
-  rowKey,
-}: FilterKeysModal) => {
-  const { rowOnChange } = useHTableContext();
-  const findId = (key) => {
-    const msRecords = records as any[];
-    const rowIndex = msRecords.findIndex((item, index) => {
-      const id =
-        typeof rowKey === "function"
-          ? rowKey(item, index)
-          : item[rowKey as string];
-      return id === key;
-    });
-    return msRecords[rowIndex];
-  };
-  useEffect(() => {
-    if (selectedRowKeys && records && rowKey) {
-      const resultData = selectedRowKeys.map((key) => {
-        return findId(key);
-      });
-      rowOnChange(selectedRowKeys, resultData);
-    }
-  }, [selectedRowKeys, records, rowKey]);
-};
-
-export const useSize = (size: SizeType) => {
-  const [cuSize, setCuSize] = useState(size);
-  useEffect(() => {
-    setCuSize(size);
-  }, [size]);
-  return {
-    cuSize,
-    setCuSize,
-  };
-};
 interface useColumnsStateTypeModal {
   columnsState?: ColumnsStateType;
   columns: ConfigDataModal;
 }
+
 export const useColumnsStateType = ({
   columnsState,
   columns,

package/src/components/HTableBody/hooks/useControl.tsx

@@ -0,0 +1,106 @@
+import type React from "react";
+import { useEffect, useMemo, useState } from "react";
+import type { SizeType } from "antd/lib/config-provider/SizeContext";
+import type { HTableBodyProps } from "../modal";
+import { useHTableContext } from "@/components/context";
+import type { GetRowKey } from "rc-table/lib/interface";
+
+export const useSize = (size: SizeType) => {
+  const [cuSize, setCuSize] = useState(size);
+  useEffect(() => {
+    setCuSize(size);
+  }, [size]);
+  return {
+    cuSize,
+    setCuSize,
+  };
+};
+
+export const useTableChange = ({
+  columns,
+  onChange,
+  localSorter,
+  table: tableInstance,
+}: HTableBodyProps) => {
+  const filtersObj = useMemo(() => {
+    const obj = {};
+    columns?.forEach(({ filterMultiple = true, filters, dataIndex }) => {
+      if (!filters || !dataIndex) {
+        return;
+      }
+      if (Array.isArray(dataIndex)) {
+        obj[dataIndex.join(",")] = filterMultiple;
+        return;
+      }
+      obj[dataIndex] = filterMultiple;
+    });
+    return obj;
+  }, [columns]);
+  const filtersMk = (filters) => {
+    const keys = Object.keys(filters);
+    const len = keys.length;
+    if (!len) {
+      return {};
+    }
+    const paramsObj = {};
+    keys.forEach((key) => {
+      if (filtersObj[key]) {
+        paramsObj[key] = filters[key];
+        return;
+      }
+      paramsObj[key] = filters[key]?.[0];
+    });
+    return paramsObj;
+  };
+  return (page, filters, sorter, extra) => {
+    if (onChange) {
+      return onChange(page, filters, sorter, extra);
+    }
+    const { field, order, column } = sorter as any;
+    const { sorter: colSorter } = column || {};
+    if (localSorter || typeof colSorter === "function") {
+      return;
+    }
+    const orderByField = typeof order === "undefined" ? undefined : field;
+    const asc = typeof order === "undefined" ? undefined : order === "ascend";
+    tableInstance?.table.reloadWithParams({
+      current: 1,
+      orderByField,
+      asc,
+      ...filtersMk(filters),
+    });
+  };
+};
+
+interface FilterKeysModal {
+  selectedRowKeys?: React.Key[];
+  records?: any[];
+  rowKey?: string | GetRowKey<any>;
+}
+
+export const useSynchronousKeys = ({
+  selectedRowKeys,
+  records,
+  rowKey,
+}: FilterKeysModal) => {
+  const { rowOnChange } = useHTableContext();
+  const findId = (key) => {
+    const msRecords = records as any[];
+    const rowIndex = msRecords.findIndex((item, index) => {
+      const id =
+        typeof rowKey === "function"
+          ? rowKey(item, index)
+          : item[rowKey as string];
+      return id === key;
+    });
+    return msRecords[rowIndex];
+  };
+  useEffect(() => {
+    if (selectedRowKeys && records && rowKey) {
+      const resultData = selectedRowKeys.map((key) => {
+        return findId(key);
+      });
+      rowOnChange(selectedRowKeys, resultData);
+    }
+  }, [selectedRowKeys, records, rowKey]);
+};

package/src/components/HTableBody/index.tsx

@@ -1,59 +1,21 @@
-import type { ProTableProps } from "@ant-design/pro-table";
 import ProTable from "@ant-design/pro-table";
-import type {
-  ActionRenderFn,
-  ConfigDataModal,
-  ParamsModal,
-  HTableInstance,
-  HRowSelection,
-} from "../modal";
 import {
-  useCols,
-  useColumnsStateType,
   useSize,
+  useTableChange,
   useSynchronousKeys,
-} from "./hooks";
+} from "./hooks/useControl";
+import { useCols, useColumnsStateType } from "./hooks/useColData";
 import { useHTableContext } from "../context";
 import React from "react";
 import { ConfigProvider, Alert, Space } from "antd";
 import { useHTableConfigContext } from "../TableConfig";
-import type { IPaginationProps } from "../HTablePagination";
 import HTablePagination from "../HTablePagination";
 import { useClassName } from "../hooks";
 import AlertMsg from "./AlertMsg";
-import type { AffixProps } from "antd/lib/affix";
 import Options from "./Options";
 import HeaderTitle from "./HeaderTitle";
-import type { OptionConfig } from "@ant-design/pro-table/lib/components/ToolBar";
 import { errorDefaultRender, emptyDefaultRender } from "./defaultRender";
-export interface OptionModal extends OptionConfig {
-  settingRender?: () => React.ReactNode;
-}
-export interface HTableBodyProps
-  extends Omit<
-    ProTableProps<any, any>,
-    "dataSource" | "rowSelection" | "options" | "pagination"
-  > {
-  configData?: ConfigDataModal;
-  onPageChange?: (params: ParamsModal) => void;
-  emptyRender?: (tableInstance: HTableInstance) => React.ReactNode;
-  errorRender?: (
-    tableInstance: HTableInstance,
-    error: Error
-  ) => React.ReactNode;
-  tableStyle?: React.CSSProperties;
-  paginationStyle?: React.CSSProperties;
-  actionRender?: ActionRenderFn;
-  rowSelection?: HRowSelection | false;
-  affixProps?: AffixProps | false;
-  goTop?: boolean;
-  optionsRender?: (node: React.ReactNode) => React.ReactNode;
-  paginationActionRender?: (tableInstance: HTableInstance) => React.ReactNode;
-  localSorter?: boolean;
-  options?: OptionModal | false;
-  table?: HTableInstance;
-  pagination?: IPaginationProps | false;
-}
+import type { HTableBodyProps } from "./modal";
 
 export default (bodyProps: HTableBodyProps) => {
   const {
@@ -104,13 +66,14 @@ export default (bodyProps: HTableBodyProps) => {
     configData: bodyConfigData,
     table: tableInstance,
     rowSelection,
-    bordered
+    bordered,
   });
 
   const { value, onChange, reset, ...selfColStatus } = useColumnsStateType({
     columnsState,
     columns: cols,
   });
+
   useSynchronousKeys({ selectedRowKeys, records, rowKey });
   const optionsNode = options && (
     <Options
@@ -135,6 +98,12 @@ export default (bodyProps: HTableBodyProps) => {
   const { tableStyle: defaultTableStyle } = useHTableConfigContext({
     tableStyle,
   });
+  const change = useTableChange({
+    columns: cols as any,
+    onChange: tableOnchange,
+    table: tableInstance,
+    localSorter,
+  });
   return (
     <div style={defaultTableStyle} className={`hw_table_body  ${className}`}>
       <Space size={16} direction={"vertical"} style={{ width: "100%" }}>
@@ -164,25 +133,7 @@ export default (bodyProps: HTableBodyProps) => {
             columns={cols as any}
             size={cuSize}
             search={false}
-            onChange={(page, filters, sorter, extra) => {
-              if (tableOnchange) {
-                return tableOnchange(page, filters, sorter, extra);
-              }
-              const { field, order, column } = sorter as any;
-              const { sorter: colSorter } = column || {};
-              if (localSorter || typeof colSorter === "function") {
-                return;
-              }
-              const orderByField =
-                typeof order === "undefined" ? undefined : field;
-              const asc =
-                typeof order === "undefined" ? undefined : order === "ascend";
-              tableInstance.table.reloadWithParams({
-                current: 1,
-                orderByField,
-                asc,
-              });
-            }}
+            onChange={change}
             tableStyle={{
               paddingBottom: 0,
             }}

package/src/components/HTableBody/modal.ts

@@ -0,0 +1,41 @@
+import type { OptionConfig } from "@ant-design/pro-table/lib/components/ToolBar";
+import type React from "react";
+import type { ProTableProps } from "@ant-design/pro-table";
+import type {
+  ActionRenderFn,
+  ConfigDataModal,
+  HRowSelection,
+  HTableInstance,
+  ParamsModal,
+} from "@/components/modal";
+import type { AffixProps } from "antd/lib/affix";
+import type { IPaginationProps } from "@/components/HTablePagination";
+
+export interface OptionModal extends OptionConfig {
+  settingRender?: () => React.ReactNode;
+}
+export interface HTableBodyProps
+  extends Omit<
+    ProTableProps<any, any>,
+    "dataSource" | "rowSelection" | "options" | "pagination"
+  > {
+  configData?: ConfigDataModal;
+  onPageChange?: (params: ParamsModal) => void;
+  emptyRender?: (tableInstance: HTableInstance) => React.ReactNode;
+  errorRender?: (
+    tableInstance: HTableInstance,
+    error: Error
+  ) => React.ReactNode;
+  tableStyle?: React.CSSProperties;
+  paginationStyle?: React.CSSProperties;
+  actionRender?: ActionRenderFn;
+  rowSelection?: HRowSelection | false;
+  affixProps?: AffixProps | false;
+  goTop?: boolean;
+  optionsRender?: (node: React.ReactNode) => React.ReactNode;
+  paginationActionRender?: (tableInstance: HTableInstance) => React.ReactNode;
+  localSorter?: boolean;
+  options?: OptionModal | false;
+  table?: HTableInstance;
+  pagination?: IPaginationProps | false;
+}

package/src/components/Table.tsx

@@ -19,7 +19,7 @@ export default ({
   tableStyle,
   action = {},
   spaceSize = 15,
-  className,
+  className = "",
   paginationStyle,
   rowKey = "id",
   onFinish,

package/src/components/index.less

@@ -122,7 +122,7 @@
 
 .@{ant-prefix}-hw-table-render-copy{
  margin-bottom: 0 !important;
- color:#1890ff !important;
+ color:@primary-color !important;
  cursor: pointer;
 }
 

package/src/components/modal.ts

@@ -9,7 +9,7 @@ import type React from "react";
 import type { ModalProps } from "antd";
 import type { TableProps } from "antd/lib/table";
 import type { AffixProps } from "antd/lib/affix";
-import type { OptionModal } from "./HTableBody";
+import type { OptionModal } from "./HTableBody/modal";
 import type { DrawerProps } from "antd";
 import type { IPaginationProps } from "@/components/HTablePagination";
 

package/src/components/render/config.tsx

@@ -99,7 +99,7 @@ const textRender = (config: ConfigItemModal, itemData: any) => {
     emptyNode = "-",
   } = valueTypeProps;
   const tableVal = getTableVal(config, itemData);
-  const content=tableVal===null?emptyNode:tableVal;
+  const content = tableVal === null ? emptyNode : tableVal;
   return (
     <Paragraph
       type={type}

package/src/components/styles/local.less

@@ -1 +1,2 @@
 @ant-prefix: ant;
+@primary-color: #1890ff;

package/src/pages/Table/index.tsx

@@ -39,10 +39,16 @@ export const configData = [
   {
     title: "报警联系人名称",
     width: 120,
-    dataIndex: "name",
+    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,
@@ -65,6 +71,7 @@ export const configData = [
     title: "id",
     dataIndex: "id",
     width: 120,
+    valueType: "copy",
     sorter: (a, b) => {
       const { id: aNum } = a;
       const { id: bNum } = b;
@@ -131,7 +138,7 @@ const Test = ({ name, selectedRowData }) => {
 };
 const maker = (name) => {
   const data = [];
-  for (let i = 0; i < 10; i += 1) {
+  for (let i = 0; i < 100; i += 1) {
     data.push({
       name,
       id: i,
@@ -220,7 +227,13 @@ export default () => {
             mobileList: "mobileList",
           }}
           request={(params) => {
-            return Promise.reject(new Error("错误"));
+            console.log(params);
+            return Promise.resolve({
+              current: 1,
+              records: maker(`第${100}页`),
+              size: 10,
+              total: 100,
+            });
           }}
           tableExtraRender={() => {
             return <div>ffff</div>;
@@ -239,17 +252,6 @@ export default () => {
               </div>
             </div>
           }
-          reload={(params) => {
-            const { size, current } = params;
-            setDataSource({
-              records: maker(`第${current}页`),
-              size,
-              current,
-              total: "100",
-            });
-            return Promise.resolve();
-          }}
-          dataSource={dataSource}
           options={{
             settingRender: () => {
               return (