@hw-component/table 1.10.16 → 1.10.17

package/src/components/HTableBody/Options/index.tsx

@@ -10,7 +10,7 @@ import { useRef } from "react";
 import { ColsSettingContent } from "./Content";
 import { Title } from "./Title";
 import type { IProps } from "./modal";
-import { useCheckKeys } from "@/components/HTableBody/Options/hooks";
+import {useTreeValue} from "./hooks";
 
 export default ({
   reload,
@@ -29,7 +29,7 @@ export default ({
     "hw-table-body-option-icon",
   ]);
   const ref = useRef<HTMLDivElement>(null);
-  const checkKeys = useCheckKeys({ columns, colStatusValue });
+  const {checkKeys,cols} = useTreeValue({ columns, colStatusValue });
   const SizeItem = () => {
     const MenuComponent = Menu as any;
     const MenuItem = Menu.Item as any;
@@ -83,7 +83,7 @@ export default ({
         <Popover
           content={
             <ColsSettingContent
-              columns={columns}
+              columns={cols}
               checkKeys={checkKeys}
               onCheck={onChange}
               onDrop={onDrop}

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

@@ -1,109 +1,11 @@
-import { useHTableContext } from "@/components/context";
+import { useHTableContext } from "../../context";
 import { useEffect, useMemo, useState } from "react";
 import type {
   ConfigDataModal,
-  ConfigItemModal,
-  HRowSelection,
-  HTableInstance,
-  HTableProps,
 } from "../../modal";
-import { useClassName } from "@/components/hooks";
-import { useHTableConfigContext } from "@/components/TableConfig";
-import { textTypes } from "@/components/render/config";
-import configRender from "@/components/render";
 import type { ColumnsState } from "@ant-design/pro-table/es/container";
-import { mkChangeValue, outColSetting } from "@/components/HTableBody/utils";
+import { mkChangeValue, outColSetting } from "../utils";
 import type { ColumnsStateType } from "@ant-design/pro-table/es/typing";
-import { radioSelectionCol, checkBoxSelectionCol } from "./colsMk";
-
-const checkBoxMk = (rowSelection: HRowSelection) => {
-  const { type } = rowSelection;
-  if (type === "radio") {
-    return radioSelectionCol(rowSelection);
-  }
-  return checkBoxSelectionCol(rowSelection);
-};
-export const useCols = ({
-  configData,
-  rowSelection,
-  table,
-  bordered,
-  configItemRender,
-}: HTableProps) => {
-  const trClassname = useClassName("hw-table-col-hr");
-  const [cols, setCols] = useState<ConfigDataModal>([]);
-  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),
-      };
-    }
-
-    return {
-      ...item,
-      className: `${className} ${trClassName}`,
-      render: configRender(item, table as HTableInstance, valueTypeConfig),
-      children: colChild(children),
-    };
-  }
-
-  const changeConfigData = (data: ConfigDataModal) => {
-    const colsArray = data.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;
-    });
-  };
-  useEffect(() => {
-    setCols(changeConfigData(configData));
-  }, [configData, table, rowSelection]);
-  const resetCols = () => {
-    setCols(changeConfigData(configData));
-  };
-  return {
-    cols,
-    setCols,
-    resetCols,
-  };
-};
 
 interface useColumnsStateTypeModal {
   columnsState?: ColumnsStateType;
@@ -115,12 +17,8 @@ export const useColumnsStateType = ({
   columns,
 }: useColumnsStateTypeModal) => {
   const { tableInstance } = useHTableContext();
-  const { persistenceType, persistenceKey, value, defaultValue, onChange } =
-    columnsState || {};
-  const [selfValue, setSelfValue] = useState<
-    Record<string, ColumnsState> | undefined
-  >(defaultValue);
-
+  const { persistenceType, persistenceKey, value, defaultValue, onChange } = columnsState || {};
+  const [selfValue, setSelfValue] = useState<Record<string, ColumnsState> | undefined>(defaultValue);
   const initTableColsVal = useMemo(() => {
     return selfValue || {};
   }, []);
@@ -129,27 +27,57 @@ export const useColumnsStateType = ({
       return outColSetting(columns, selfValue);
     };
   }, [selfValue]);
+
   useEffect(() => {
     setSelfValue(mkChangeValue(columnsState));
   }, [value]);
 
+  const dropChange = (list:ConfigDataModal)=>{
+    setSelfValue((oldVal)=>{
+      const newValue={...oldVal};
+      let notMatchNum=0;
+      console.log(list,"li")
+      list.forEach((item,index) => {
+        const {dataIndex}=item;
+        if (!dataIndex){
+          notMatchNum+=1;
+        }
+        if (dataIndex){
+          const key=dataIndex as string;
+          const oldItemObj=newValue[key];
+          newValue[key] ={
+            ...oldItemObj,
+            order:index-notMatchNum
+          }
+        }
+      });
+      return newValue;
+    });
+  }
   const change = (keys: string[], notCheck: string[]) => {
     const newObj = {};
+    const newValue={...selfValue};
+    keys.forEach((key) => {
+      const oldItem=newValue[key];
+      newObj[key] = {...oldItem,show: true };
+    })
     notCheck.forEach((key) => {
-      newObj[key] = { show: false };
+      const oldItem=newValue[key];
+      newObj[key] = {...oldItem, show: false };
     });
     setSelfValue(newObj);
     onChange?.(newObj);
   };
 
-  const resetCheckCol = () => {
+  const resetCol = () => {
     setSelfValue(initTableColsVal);
   };
   return {
     persistenceType,
     persistenceKey,
-    value: selfValue,
+    value:selfValue,
     onChange: change,
-    resetCheckCol,
+    resetCol,
+    dropChange
   };
 }; //设置选项

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

@@ -0,0 +1,83 @@
+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";
+
+const checkBoxMk = (rowSelection: HRowSelection) => {
+    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;
+
+        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 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])
+}

package/src/components/HTableBody/index.tsx

@@ -5,7 +5,7 @@ import {
   useSynchronousKeys,
   useAlwaysShowAlert,
 } from "./hooks/useControl";
-import { useCols, useColumnsStateType } from "./hooks/useColData";
+import {  useColumnsStateType } from "./hooks/useColData";
 import { useHTableContext } from "../context";
 import React from "react";
 import { ConfigProvider, Alert, Space } from "antd";
@@ -17,7 +17,8 @@ import Options from "./Options";
 import HeaderTitle from "./HeaderTitle";
 import { errorDefaultRender, emptyDefaultRender } from "./defaultRender";
 import type { HTableBodyProps } from "./modal";
-import useRowClassName from "@/components/HTableBody/hooks/useRowClassName";
+import useRowClassName from "./hooks/useRowClassName";
+import useColMk from "./hooks/useColMk";
 
 export default (bodyProps: HTableBodyProps) => {
   const {
@@ -77,15 +78,14 @@ export default (bodyProps: HTableBodyProps) => {
   const { records } = data || {};
   const tableInstance = table || contextTableInstance;
 
-  const { cols, setCols, resetCols } = useCols({
+  const cols = useColMk({
     configData: bodyConfigData,
     table: tableInstance,
     rowSelection,
     bordered,
     configItemRender: tableConfigItemRender,
   });
-  const { value, onChange, resetCheckCol, ...selfColStatus } =
-    useColumnsStateType({
+  const { value, onChange, resetCol,dropChange, ...selfColStatus } = useColumnsStateType({
       columnsState,
       columns: cols,
     });
@@ -102,11 +102,8 @@ export default (bodyProps: HTableBodyProps) => {
       setSizeChange={setCuSize}
       colStatusValue={value || {}}
       onChange={onChange}
-      reset={() => {
-        resetCheckCol();
-        resetCols();
-      }}
-      onDrop={setCols}
+      reset={resetCol}
+      onDrop={dropChange}
     />
   );
   const defaultOptionsNode = optionsRender

package/src/pages/Table/index.tsx

@@ -22,90 +22,90 @@ import { useRequest } from "ahooks";
 import { useEffect, useState } from "react";
 import TagsComponent from "@/components/render/TagsComponent";
 
-const Testd = (props) => {
-  return (
-    <div>
-      <HRangePicker {...props} />
-    </div>
-  );
-};
-export const configData = [
-  {
-    title: "订单编号",
-    dataIndex: "childOrderNo",
-    showSearch: true,
-    valueType: "copy",
-    width: 120,
-    searchType: "selectInput",
-    name: "selectInput",
-    itemProps: {
-      placeholder: "请输入",
-      selectProps: {
-        options: [
-          {
-            label: "订单编号",
-            value: "orderNo",
-          },
-          {
-            label: "用户id",
-            value: "userId",
-          },
-        ],
-        style: { width: 88 },
+export const configData = ()=>{
+  return [
+    {
+      title: "订单编号",
+      dataIndex: "childOrderNo",
+      showSearch: true,
+      valueType: "copy",
+      width: 120,
+      searchType: "selectInput",
+      name: "selectInput",
+      itemProps: {
+        placeholder: "请输入",
+        selectProps: {
+          options: [
+            {
+              label: "订单编号",
+              value: "orderNo",
+            },
+            {
+              label: "用户id",
+              value: "userId",
+            },
+          ],
+          style: { width: 88 },
+        },
       },
     },
-  },
-  {
-    title: "短信接收手机号",
-    dataIndex: "mobileList",
-    width: 120,
-    searchType: "rangePicker",
-    showSearch: true,
-    shouldUpdate: (p, c) => {
-      return true;
+    {
+      title: "短信接收手机号",
+      dataIndex: "mobileList",
+      width: 120,
+      searchType: "rangePicker",
+      showSearch: true,
+      shouldUpdate: (p, c) => {
+        return true;
+      },
     },
-  },
-  {
-    title: "321312",
-    dataIndex: "img",
-    width: 120,
-  },
-  {
-    title: "操作",
-    dataIndex: "op",
-    width: 120,
-    fixed: "right",
-  },
-  {
-    title: "操作1",
-    dataIndex: "op1",
-    width: 120,
-    fixed: "right",
-  },
-  {
-    title: "操作2",
-    dataIndex: "op2",
-    width: 120,
-    fixed: "left",
-  },
-  {
-    title: "操作3",
-    dataIndex: "op3",
-    width: 120,
-    fixed: "left",
-  },
-];
-const maker = (name) => {
-  const data = [];
-  for (let i = 0; i < 100; i += 1) {
-    data.push({
-      name,
-      id: i,
-      img: "",
-    });
-  }
-  return data;
-};
+    {
+      title: "321312",
+      dataIndex: "img",
+      width: 120,
+    },
+    {
+      title: "操作",
+      dataIndex: "op",
+      width: 120,
+    },
+    {
+      title: "操作1",
+      dataIndex: "op1",
+      width: 120,
+    },
+    {
+      title: "操作2",
+      dataIndex: "op2",
+      width: 120,
+    },
+    {
+      title: "操作3",
+      dataIndex: "op3",
+      width: 120,
+    },
+  ];
+}
+const listReq=(params)=>{
+  return new Promise(resolve => {
+    setTimeout(()=>{
+      const { current } = params;
+      const records = [];
+      for (let i = 0; i < 10; i += 1) {
+        records.push({
+          id: `${current}-${i}`,
+          lastPullGroupTime: 1760420231,
+        });
+      }
+      resolve({
+        current: "1",
+        size: "10",
+        total: "100",
+        records,
+      });
+    },2000)
+  })
+}
 export default () => {
   const hTable = useHTable();
   const [width, setWidth] = useState(0);
@@ -142,9 +142,32 @@ export default () => {
     size: "10",
     current: "1",
   });
-  const [keys, setKeys] = useState([]);
+  const [cols, setCols] = useState([
+    {
+      title: "操作1",
+      dataIndex: "op1",
+      width: 120,
+    },
+    {
+      title: "操作2",
+      dataIndex: "op2",
+      width: 120,
+    },
+    {
+      title: "操作3",
+      dataIndex: "op3",
+      width: 120,
+    },
+  ]);
   return (
     <HFormConfigProvider>
+      <ProTable
+          columns={cols}
+          columnsState={{
+            persistenceKey:"text",
+            persistenceType:"localStorage"
+          }}
+      />
       <TagsComponent
         data={["213123"]}
         tooltip={() => {
@@ -162,8 +185,44 @@ 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>
           <HTable
-            configData={configData}
+            configData={cols}
             configItemRender={(d1) => {
               console.log(d1);
               return d1;
@@ -189,30 +248,10 @@ export default () => {
             scroll={{
               x: 1000,
             }}
-            columnsState={{
-              persistenceKey: "test",
-              persistenceType: "localStorage",
-            }}
             formInitValues={{
               select: "orderNo",
             }}
-            request={(params) => {
-              const { current } = params;
-              const records = [];
-              for (let i = 0; i < 10; i += 1) {
-                records.push({
-                  id: `${current}-${i}`,
-                  lastPullGroupTime: 1760420231,
-                });
-              }
-              console.log(records);
-              return Promise.resolve({
-                current: "1",
-                size: "10",
-                total: "100",
-                records,
-              });
-            }}
+            request={listReq}
             headerTitle={
               <Space size={8}>
                 <Button