@hw-component/table 1.10.17 → 1.10.19

package/src/components/HTableBody/hooks/useColMk.ts

@@ -1,83 +1,88 @@
-import type {ConfigItemModal, HRowSelection, HTableInstance, HTableProps} from "../../modal";
-import {useClassName} from "../../hooks";
-import {useHTableConfigContext} from "../../TableConfig";
-import {textTypes} from "../../render/config";
+import type {
+  ConfigItemModal,
+  HRowSelection,
+  HTableInstance,
+  HTableProps,
+} from "../../modal";
+import { useClassName } from "../../hooks";
+import { useHTableConfigContext } from "../../TableConfig";
+import { textTypes } from "../../render/config";
 import configRender from "../../render";
-import {useMemo} from "react";
-import {checkBoxSelectionCol, radioSelectionCol} from "./colsMk";
+import { useMemo } from "react";
+import { checkBoxSelectionCol, radioSelectionCol } from "./colsMk";
 
 const checkBoxMk = (rowSelection: HRowSelection) => {
-    const { type } = rowSelection;
-    if (type === "radio") {
-        return radioSelectionCol(rowSelection);
-    }
-    return checkBoxSelectionCol(rowSelection);
+  const { type } = rowSelection;
+  if (type === "radio") {
+    return radioSelectionCol(rowSelection);
+  }
+  return checkBoxSelectionCol(rowSelection);
 };
 
 export default ({
-                    configData,
-                    rowSelection,
-                    table,
-                    bordered,
-                    configItemRender,
-                }: HTableProps)=>{
-    const trClassname = useClassName("hw-table-col-hr");
-    const { valueTypeConfig } = useHTableConfigContext({});
-    const itemClassNameMk = (children: any[], lastChildren: any[]) => {
-        const lastChildLen = (lastChildren as any[]).length;
-        const childLen = children.length;
-        return !childLen && !!lastChildLen ? trClassname : "";
-    };
-    const colChild = (children?: ConfigItemModal[]) => {
-        if (!children) {
-            return children;
-        }
-        return children.map((item) => {
-            return itemProvider(item);
-        });
-    };
-    function itemProvider(item: ConfigItemModal, lastItem?: ConfigItemModal) {
-        const { children: lastChildren = [] } = lastItem || {};
-        const {
-            valueType = "",
-            valueTypeProps = {},
-            className = "",
-            children = [],
-        } = item;
+  configData,
+  rowSelection,
+  table,
+  bordered,
+  configItemRender,
+}: HTableProps) => {
+  const trClassname = useClassName("hw-table-col-hr");
+  const { valueTypeConfig } = useHTableConfigContext({});
+  const itemClassNameMk = (children: any[], lastChildren: any[]) => {
+    const lastChildLen = (lastChildren as any[]).length;
+    const childLen = children.length;
+    return !childLen && !!lastChildLen ? trClassname : "";
+  };
+  const colChild = (children?: ConfigItemModal[]) => {
+    if (!children) {
+      return children;
+    }
+    return children.map((item) => {
+      return itemProvider(item);
+    });
+  };
+  function itemProvider(item: ConfigItemModal, lastItem?: ConfigItemModal) {
+    const { children: lastChildren = [] } = lastItem || {};
+    const {
+      valueType = "",
+      valueTypeProps = {},
+      className = "",
+      children = [],
+    } = item;
 
-        const trClassName = bordered
-            ? ""
-            : itemClassNameMk(children as any[], lastChildren as any[]);
-        const itemType = valueType as string;
-        if (textTypes.indexOf(itemType) !== -1) {
-            const { ellipsis } = valueTypeProps;
-            return {
-                ...item,
-                ellipsis: ellipsis,
-                className: `${className} ${trClassName}`,
-                render: configRender(item, table as HTableInstance, valueTypeConfig),
-                children: colChild(children),
-            };
-        }
+    const trClassName = bordered
+      ? ""
+      : itemClassNameMk(children as any[], lastChildren as any[]);
+    const itemType = valueType as string;
+    if (textTypes.indexOf(itemType) !== -1) {
+      const { ellipsis } = valueTypeProps;
+      return {
+        ...item,
+        ellipsis: ellipsis,
+        className: `${className} ${trClassName}`,
+        render: configRender(item, table as HTableInstance, valueTypeConfig),
+        children: colChild(children),
+      };
+    }
 
-        return {
-            ...item,
-            className: `${className} ${trClassName}`,
-            render: configRender(item, table as HTableInstance, valueTypeConfig),
-            children: colChild(children),
-        };
+    return {
+      ...item,
+      className: `${className} ${trClassName}`,
+      render: configRender(item, table as HTableInstance, valueTypeConfig),
+      children: colChild(children),
+    };
+  }
+  return useMemo(() => {
+    const colsArray = configData.filter((item) => {
+      return !item.hideInTable;
+    });
+    if (rowSelection !== false) {
+      colsArray.splice(0, 0, checkBoxMk(rowSelection || {}) as any);
     }
-    return useMemo(()=>{
-        const colsArray = configData.filter((item) => {
-            return !item.hideInTable;
-        });
-        if (rowSelection !== false) {
-            colsArray.splice(0, 0, checkBoxMk(rowSelection || {}) as any);
-        }
-        return colsArray.map((item, index) => {
-            const lastItem = colsArray[index - 1];
-            const resultItem = itemProvider(item, lastItem);
-            return configItemRender ? configItemRender(resultItem) : resultItem;
-        });
-    },[configData, table, rowSelection])
-}
+    return colsArray.map((item, index) => {
+      const lastItem = colsArray[index - 1];
+      const resultItem = itemProvider(item, lastItem);
+      return configItemRender ? configItemRender(resultItem) : resultItem;
+    });
+  }, [configData, table, rowSelection]);
+};

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

@@ -66,10 +66,7 @@ export const useTableChange = ({
     const asc = typeof order === "undefined" ? undefined : order === "ascend";
     tableInstance?.table.reloadWithParams({
       current: 1,
-      orderByField,
-      asc,
-      ...filtersMk(filters),
-    });
+    },filtersMk(filters),{orderByField,asc});
   };
 };
 

package/src/components/HTableBody/index.tsx

@@ -5,7 +5,7 @@ import {
   useSynchronousKeys,
   useAlwaysShowAlert,
 } from "./hooks/useControl";
-import {  useColumnsStateType } from "./hooks/useColData";
+import { useColumnsStateType } from "./hooks/useColData";
 import { useHTableContext } from "../context";
 import React from "react";
 import { ConfigProvider, Alert, Space } from "antd";
@@ -85,7 +85,8 @@ export default (bodyProps: HTableBodyProps) => {
     bordered,
     configItemRender: tableConfigItemRender,
   });
-  const { value, onChange, resetCol,dropChange, ...selfColStatus } = useColumnsStateType({
+  const { value, onChange, resetCol, dropChange, ...selfColStatus } =
+    useColumnsStateType({
       columnsState,
       columns: cols,
     });

package/src/components/HTableBody/utils.ts

@@ -19,8 +19,7 @@ const strToJson = (str: string | null) => {
 };
 
 export const mkChangeValue = (columnsState?: ColumnsStateType) => {
-  const { persistenceType, persistenceKey, value, defaultValue, onChange } =
-    columnsState || {};
+  const { persistenceType, persistenceKey, value } = columnsState || {};
   if (value) {
     return value;
   }
@@ -91,8 +90,3 @@ export const outColSetting = (
     keys,
   };
 };
-interface RowItemFnModal {}
-
-export const rowItemFn = (action, record, index) => {
-  return typeof action === "function" ? action(record, index) : record[action];
-};

package/src/components/Table.tsx

@@ -53,16 +53,26 @@ export default ({
     table,
     reload: (params) => {
       rowSelectionReload();
-      return run(params);
+      return run({
+        params
+      });
     },
     changeRowData: rowOnChange,
     dispatch,
-    reloadWithParams: (reloadParams = {}) => {
+    reloadWithParams: (reloadParams = {},filters?:any,sorter?:any) => {
       rowSelectionReload();
-      return run({ ...saveParams.old, ...reloadParams });
+      return run({
+        params:reloadParams,
+        filters,
+        sorter
+      });
     },
     getTableParams: () => {
-      return saveParams.old;
+      return {
+        ... saveParams.oldParams,
+        ...saveParams.filters,
+        ...saveParams.sorter
+      }
     },
     selectedRowData,
     dataSource: data,
@@ -74,8 +84,10 @@ export default ({
       tableInstance={tableInstance}
       onFinish={(value) => {
         rowSelectionReload();
-        const { size } = saveParams.old as Record<string, any>;
-        return run({ ...value, current: 1, size });
+        const { size } = saveParams.oldParams as Record<string, any>;
+        return run({
+          params:{ ...value, current: 1, size }
+        });
       }}
       selectedRowData={selectedRowData}
       rowOnChange={rowOnChange}

package/src/components/TableCustomize.tsx

@@ -6,6 +6,7 @@ import type { IParamsModal } from "./hooks/useReq";
 import useReq from "./hooks/useReq";
 import useDispatch from "./hooks/useDispatch";
 import React, { useState } from "react";
+
 const Index: React.FC<HTableProps> = ({
   request,
   configData,
@@ -31,16 +32,26 @@ const Index: React.FC<HTableProps> = ({
     table,
     reload: (params) => {
       rowOnChange([], []);
-      return run(params);
+      return run({
+          params
+      });
     },
     changeRowData: rowOnChange,
     dispatch,
-    reloadWithParams: (reloadParams = {}) => {
+    reloadWithParams: (reloadParams = {},filters?:any,sorter?:any) => {
       rowOnChange([], []);
-      return run({ ...saveParams.old, ...reloadParams });
+      return run({
+          params:{ ...saveParams.oldParams, ...reloadParams },
+          filters,
+          sorter
+      });
     },
     getTableParams: () => {
-      return saveParams.old;
+      return {
+          ... saveParams.oldParams,
+          ...saveParams.filters,
+          ...saveParams.sorter
+      }
     },
     selectedRowData,
     dataSource: data,
@@ -57,10 +68,12 @@ const Index: React.FC<HTableProps> = ({
         allSelectChange,
         action,
         configData,
-        params: saveParams.old,
+        params: saveParams.oldParams,
         onFinish: (value) => {
           rowOnChange([], []);
-          return run({ ...saveParams.old, ...value, current: 1 });
+          return run({
+              params:{ ...saveParams.oldParams, ...value, current: 1 }
+          });
         },
         onPageChange: tableInstance.table.reloadWithParams,
         setSelectedRowData,

package/src/components/hooks/useReq.ts

@@ -58,6 +58,13 @@ const useDataSource = ({ reload, dataSource }: IParamsModal) => {
     dataSource: cpDataSource,
   };
 };
+
+interface RequestParams {
+  params?:Record<string, any>;
+  filters?:any;
+  sorter?:any;
+}
+
 export default ({
   request,
   loading,
@@ -69,25 +76,32 @@ export default ({
 }: IParamsModal) => {
   const saveParams = useMemo(() => {
     return {
-      old: {},
+      oldParams: {},
+      filters:{},
+      sorter:{}
     };
   }, []);
   const { reload: localReload, dataSource: localDataSource } = useDataSource({
     reload,
     dataSource,
   });
-  const reloadFn = async (params: Record<string, any> = {}) => {
+  const getReqParams=(reqParams?:RequestParams)=>{
+    const {params={},filters,sorter}=reqParams||{};
     const { size = "10", current = "1", ...oParams } = params;
     const requestParams = { size, current, ...oParams };
-    saveParams.old = requestParams;
-    return localReload(requestParams);
+    const cuFilters=filters||saveParams.filters;
+    const cuSorter=sorter||saveParams.sorter;
+    saveParams.oldParams = requestParams;
+    saveParams.filters = cuFilters;
+    saveParams.sorter = cuSorter;
+    return  { ...requestParams,...cuFilters,...cuSorter }
+  }
+  const reloadFn = async (reqParams?:RequestParams) => {
+    return localReload(getReqParams(reqParams));
   };
   const resultAction = useRequest(
-    (params = {}) => {
-      const { size = "10", current = "1", ...oParams } = params;
-      const reqParams = { size, current, ...oParams };
-      saveParams.old = reqParams;
-      return request?.(reqParams);
+    (reqParams?:RequestParams) => {
+      return request?.( getReqParams(reqParams));
     },
     { manual: true }
   );

package/src/components/modal.ts

@@ -129,7 +129,7 @@ export interface TableInstance {
   reload: (params?: ParamsModal) => Promise<any>;
   setSelectedRowData: (keys: React.Key[], data: any) => void;
   dispatch: (key: string, params: any) => void;
-  reloadWithParams: (params?: ParamsModal) => Promise<any>;
+  reloadWithParams: (params?: ParamsModal,filters?:any,sorter?:any) => Promise<any>;
   getParams: () => any;
   getSelectedRowData: () => RowObj;
   getTableSourceData: (full?: boolean) => any;

package/src/pages/EditTable/index.tsx

@@ -15,13 +15,7 @@ export default () => {
   console.log(defaultActionRef, "defaultActionRef");
   return (
     <div>
-      <div
-        onClick={() => {
-
-        }}
-      >
-        刷新
-      </div>
+      <div onClick={() => {}}>刷新</div>
       <HEditTable
         manual
         onAdd={async (data) => {

package/src/pages/ModalEditTable/index.tsx

@@ -41,21 +41,21 @@ export default () => {
       <HDwEditTable
         title="编辑"
         request={() => {
-          return new Promise(resolve => {
+          return new Promise((resolve) => {
             setTimeout(() => {
-               resolve( {
-                 records: [
-                   {
-                     id: "213213",
-                     title: "100",
-                   },
-                 ],
-                 current: "1",
-                 size: "10",
-                 total: "10",
-               })
-            },2000)
-          })
+              resolve({
+                records: [
+                  {
+                    id: "213213",
+                    title: "100",
+                  },
+                ],
+                current: "1",
+                size: "10",
+                total: "10",
+              });
+            }, 2000);
+          });
         }}
         editTableProps={{
           onAdd: async (data) => {},
@@ -69,28 +69,30 @@ export default () => {
             title: "操作",
             valueType: "option",
             align: "center",
-            render: (text: any, record: any, _: any, action: any) =>{
-              return <>
-                <a
+            render: (text: any, record: any, _: any, action: any) => {
+              return (
+                <>
+                  <a
                     key="editable"
                     type={"link"}
                     onClick={() => {
                       action?.startEditable?.(record.id);
                     }}
-                >
-                  编辑
-                </a>
-                <a
+                  >
+                    编辑
+                  </a>
+                  <a
                     key="editable"
                     type={"link"}
                     onClick={() => {
-                      action.reload()
+                      action.reload();
                     }}
-                >
-                  刷新
-                </a>
-              </>
-            }
+                  >
+                    刷新
+                  </a>
+                </>
+              );
+            },
           },
         ]}
       />

package/src/pages/Table/index.tsx

@@ -19,10 +19,10 @@ 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 { useEffect, useState } from "react";
+import {useEffect, useRef, useState} from "react";
 import TagsComponent from "@/components/render/TagsComponent";
 
-export const configData = ()=>{
+export const configData = () => {
   return [
     {
       title: "订单编号",
@@ -82,13 +82,15 @@ export const configData = ()=>{
     {
       title: "操作3",
       dataIndex: "op3",
+      fixed: "right",
       width: 120,
     },
   ];
-}
-const listReq=(params)=>{
-  return new Promise(resolve => {
-    setTimeout(()=>{
+};
+const listReq = (params) => {
+  console.log(params)
+  return new Promise((resolve) => {
+    setTimeout(() => {
       const { current } = params;
       const records = [];
       for (let i = 0; i < 10; i += 1) {
@@ -103,9 +105,9 @@ const listReq=(params)=>{
         total: "100",
         records,
       });
-    },2000)
-  })
-}
+    }, 2000);
+  });
+};
 export default () => {
   const hTable = useHTable();
   const [width, setWidth] = useState(0);
@@ -136,6 +138,7 @@ export default () => {
       }, 2000);
     });
   });
+  const ref=useRef();
   const [dataSource, setDataSource] = useState({
     records: [],
     total: "100",
@@ -147,6 +150,7 @@ export default () => {
       title: "操作1",
       dataIndex: "op1",
       width: 120,
+      sorter:true
     },
     {
       title: "操作2",
@@ -157,16 +161,18 @@ export default () => {
       title: "操作3",
       dataIndex: "op3",
       width: 120,
+      fixed: "right",
     },
   ]);
   return (
     <HFormConfigProvider>
       <ProTable
-          columns={cols}
-          columnsState={{
-            persistenceKey:"text",
-            persistenceType:"localStorage"
-          }}
+        columns={cols}
+        actionRef={ref}
+        columnsState={{
+          persistenceKey: "text",
+          persistenceType: "localStorage",
+        }}
       />
       <TagsComponent
         data={["213123"]}
@@ -185,48 +191,53 @@ export default () => {
           获取
         </div>
         <HTableConfig defaultSelectedRowClassName={null}>
-          <div onClick={()=>{
-            setCols([
-              {
-                title: "操作1",
-                dataIndex: "op1",
-                width: 120,
-              },
-              {
-                title: "操作10",
-                dataIndex: "op10",
-                width: 120,
-              },
-              {
-                title: "操作2",
-                dataIndex: "op2",
-                width: 120,
-              },
-              {
-                title: "操作100",
-                dataIndex: "op100",
-                width: 120,
-              },
-              {
-                title: "操作3",
-                dataIndex: "op3",
-                width: 120,
-              },
-              {
-                title: "操作1000",
-                dataIndex: "op1000",
-                width: 120,
-              },
-            ]);
-          }}>
+          <div
+            onClick={() => {
+              setCols([
+                {
+                  title: "操作1",
+                  dataIndex: "op1",
+                  width: 120,
+                },
+                {
+                  title: "操作10",
+                  dataIndex: "op10",
+                  width: 120,
+                },
+                {
+                  title: "操作2",
+                  dataIndex: "op2",
+                  width: 120,
+                },
+                {
+                  title: "操作100",
+                  dataIndex: "op100",
+                  width: 120,
+                },
+                {
+                  title: "操作3",
+                  dataIndex: "op3",
+                  width: 120,
+                },
+                {
+                  title: "操作1000",
+                  dataIndex: "op1000",
+                  width: 120,
+                },
+              ]);
+            }}
+          >
             点我修改
           </div>
           <HTable
             configData={cols}
             configItemRender={(d1) => {
-              console.log(d1);
               return d1;
             }}
+            columnsState={{
+              persistenceKey: "test",
+              persistenceType: "localStorage",
+            }}
             table={hTable}
             labelWidth={88}
             action={{
@@ -245,9 +256,6 @@ export default () => {
             affixProps={{
               target: () => document.querySelector(".body"),
             }}
-            scroll={{
-              x: 1000,
-            }}
             formInitValues={{
               select: "orderNo",
             }}