@hw-component/table 1.1.7 → 1.1.9

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

@@ -3,31 +3,28 @@ import { Checkbox, Row, Space, Typography } from "antd";
 import type { ItemProps } from "./modal";
 import { useMemo } from "react";
 const { Link } = Typography;
-export const Title = ({ columns, onChange, checkKeys }: ItemProps) => {
+export const Title = ({ columns, onCheck, checkKeys, reset }: ItemProps) => {
   const title = useClassName("hw-table-body-option-setting-title");
-  const relLen = useMemo(() => {
-    const relArray = columns.filter(({ dataIndex }) => {
-      return !!dataIndex;
-    });
-    return relArray.length;
-  }, [columns]);
-  const allChange = (hideInTable: boolean) => {
-    const newCols = [...columns];
-    columns.forEach((item, index) => {
-      const { dataIndex } = item;
-      if (!dataIndex) {
+  const relArrayKeys = useMemo(() => {
+    const keys: string[] = [];
+    columns.forEach((value) => {
+      const { dataIndex, hideInTable } = value;
+      if (hideInTable || !dataIndex) {
         return;
       }
-      newCols[index] = {
-        ...item,
-        hideInTable,
-      };
+      const dataIndexStr = dataIndex.toString();
+      keys.push(dataIndexStr);
     });
-    onChange(newCols);
+    return keys;
+  }, [columns]);
+  const allKeys = columns;
+  const allCheck = () => {
+    onCheck(relArrayKeys, []);
   };
-  const reset = () => {
-    allChange(false);
+  const allNotCheck = () => {
+    onCheck([], relArrayKeys);
   };
+  const relLen = relArrayKeys.length;
   const indeterminate = relLen !== checkKeys.length && checkKeys.length > 0;
   return (
     <Row className={title} justify={"space-between"}>
@@ -36,7 +33,11 @@ export const Title = ({ columns, onChange, checkKeys }: ItemProps) => {
           checked={relLen === checkKeys.length}
           indeterminate={indeterminate}
           onChange={(e) => {
-            allChange(!e.target.checked);
+            if (e.target.checked) {
+              allCheck();
+              return;
+            }
+            allNotCheck();
           }}
         />
         <span>列展示</span>

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

@@ -0,0 +1,24 @@
+import { useMemo } from "react";
+import type { IProps } from "@/components/HTableBody/Options/modal";
+
+export const useCheckKeys = ({
+  columns,
+  colStatusValue,
+}: Pick<IProps, "colStatusValue" | "columns">) => {
+  return useMemo(() => {
+    const keys: string[] = [];
+    columns.forEach((value) => {
+      const { dataIndex, hideInTable } = value;
+      if (hideInTable || !dataIndex) {
+        return;
+      }
+      const dataIndexStr = dataIndex.toString();
+      const { show = true } = colStatusValue[dataIndexStr] || {};
+      if (!show) {
+        return;
+      }
+      keys.push(dataIndexStr);
+    });
+    return keys;
+  }, [colStatusValue, columns]);
+};

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

@@ -6,12 +6,11 @@ import {
   SettingOutlined,
 } from "@ant-design/icons";
 import type { SizeType } from "antd/lib/config-provider/SizeContext";
-import { useEffect, useRef, useState } from "react";
+import { useRef } from "react";
 import { ColsSettingContent } from "./Content";
 import { Title } from "./Title";
 import type { IProps } from "./modal";
-import { useHTableContext } from "../../context";
-import { defaultKeys } from "./utils";
+import { useCheckKeys } from "@/components/HTableBody/Options/hooks";
 export default ({
   reload,
   size = "middle",
@@ -19,22 +18,16 @@ export default ({
   setSizeChange,
   columns,
   onChange,
+  colStatusValue,
+  reset,
+  settingRender,
 }: IProps) => {
   const pointer = useClassName([
     "hw-table-pointer",
     "hw-table-body-option-icon",
   ]);
   const ref = useRef<HTMLDivElement>(null);
-  const [keys, setKeys] = useState<string[]>([]);
-  const { tableInstance } = useHTableContext();
-  useEffect(() => {
-    const { keys: changeKeys, allKeys, checkCols } = defaultKeys(columns);
-    tableInstance.table.settingKeys = {
-      keys: allKeys,
-      checkCols: checkCols,
-    };
-    setKeys(changeKeys);
-  }, [columns]); //同步改变
+  const checkKeys = useCheckKeys({ columns, colStatusValue });
   const SizeItem = () => {
     const MenuComponent = Menu as any;
     const MenuItem = Menu.Item as any;
@@ -58,8 +51,8 @@ export default ({
     );
   };
   return (
-    <Row justify={"end"} ref={ref}>
-      <Space size={20}>
+    <Row justify={"end"}>
+      <Space size={15}>
         {reload && (
           <Tooltip title="刷新">
             <ReloadOutlined
@@ -85,25 +78,29 @@ export default ({
             </Dropdown>
           </Tooltip>
         )}
-        <Tooltip title="列设置">
-          <Popover
+        <Popover
             content={
               <ColsSettingContent
-                columns={columns}
-                checkKeys={keys}
-                onChange={onChange}
+                  columns={columns}
+                  checkKeys={checkKeys}
+                  onCheck={onChange}
               />
             }
             title={
-              <Title columns={columns} checkKeys={keys} onChange={onChange} />
+              <Title
+                  columns={columns}
+                  reset={reset}
+                  checkKeys={checkKeys}
+                  onCheck={onChange}
+              />
             }
-            placement="bottomLeft"
+            placement="bottomRight"
             getPopupContainer={() => ref.current || document.body}
+            arrowPointAtCenter
             trigger="click"
-          >
-            <SettingOutlined className={pointer} width={24} />
-          </Popover>
-        </Tooltip>
+        >
+          {settingRender?settingRender():<Tooltip title="列设置"><SettingOutlined className={pointer} width={24} /></Tooltip>}
+        </Popover>
       </Space>
     </Row>
   );

package/src/components/HTableBody/Options/modal.d.ts

@@ -1,14 +1,22 @@
 import type { OptionConfig } from "@ant-design/pro-table/lib/components/ToolBar";
 import type { SizeType } from "antd/lib/config-provider/SizeContext";
 import type { ConfigDataModal } from "../../modal";
+import type { ColumnsState } from "@ant-design/pro-table/es/container";
+import React from "react";
 
 export interface IProps extends OptionConfig {
   size?: SizeType;
   setSizeChange: (size: SizeType) => void;
   columns: ConfigDataModal;
-  onChange: (cols: ConfigDataModal) => void;
+  onChange: (keys: string[], notCheck: string[]) => void;
+  colStatusValue: Record<string, ColumnsState>;
+  reset: VoidFunction;
+  settingRender?:()=>React.ReactNode
 }
 
-export interface ItemProps extends Omit<IProps, "setSizeChange"> {
+export interface ItemProps {
   checkKeys: string[];
+  onCheck: (keys: string[], notCheck: string[]) => void;
+  columns: ConfigDataModal;
+  reset?: VoidFunction;
 }

package/src/components/HTableBody/Options/utils.ts

@@ -1,5 +1,6 @@
 import type { ConfigDataModal, ConfigItemModal } from "../../modal";
 import React from "react";
+import { ColumnsState } from "@ant-design/pro-table/es/container";
 export const getItemValue = (data: ConfigItemModal) => {
   const { dataIndex, title, titleStr, ...oData } = data;
   let resultTitle = React.isValidElement(title) ? title.props.children : title;
@@ -12,57 +13,3 @@ export const getItemValue = (data: ConfigItemModal) => {
     ...oData,
   };
 };
-const childDataIndexProvider = (
-  data: ConfigItemModal[] | string[],
-  title?: string | React.ReactNode
-) => {
-  const keys: string[] = [];
-  const cols: ConfigDataModal = [];
-  data.forEach((value) => {
-    if (typeof value === "string") {
-      keys.push(value);
-      cols.push(
-        getItemValue({
-          title,
-          dataIndex: value,
-        })
-      );
-      return;
-    }
-    keys.push(value.dataIndex);
-    cols.push(getItemValue(value));
-  });
-  return {
-    keys,
-    cols,
-  };
-};
-export const defaultKeys = (cols: ConfigDataModal) => {
-  const keys: string[] = [];
-  const allKeys: string[] = [];
-  const checkCols: ConfigDataModal = [];
-  cols.forEach((value) => {
-    const { title, titleStr, dataIndex, hideInTable, childrenDataIndex } =
-      value;
-    if (hideInTable || !dataIndex) {
-      return;
-    }
-    keys.push(dataIndex.toString());
-    if (childrenDataIndex) {
-      const { keys: childKeys, cols: childCols } = childDataIndexProvider(
-        childrenDataIndex,
-        titleStr || title
-      );
-      allKeys.push(...childKeys);
-      checkCols.push(...childCols);
-      return;
-    }
-    allKeys.push(dataIndex.toString());
-    checkCols.push(getItemValue(value));
-  });
-  return {
-    keys,
-    allKeys,
-    checkCols,
-  };
-};

package/src/components/HTableBody/hooks.tsx

@@ -4,11 +4,14 @@ import type {
   HRowSelection,
   ConfigDataModal,
 } from "../modal";
-import React, { useEffect, useState } from "react";
+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";
 const rowSelectionCol = (rowSelection?: HRowSelection) => {
   const { allPageCheck, onChange, getCheckboxProps } = rowSelection || {};
   return {
@@ -58,12 +61,8 @@ export const useCols = ({ configData, rowSelection, table }: HTableProps) => {
   useEffect(() => {
     setCols(changeConfigData(configData));
   }, [configData, table, rowSelection]);
-  const changeCols = (cuCols: ConfigDataModal) => {
-    setCols(cuCols);
-  };
   return {
     cols,
-    changeCols,
   };
 };
 interface FilterKeysModal {
@@ -99,3 +98,48 @@ export const useSize = (size: SizeType) => {
     setCuSize,
   };
 };
+interface useColumnsStateTypeModal {
+  columnsState?: ColumnsStateType;
+  columns: ConfigDataModal;
+}
+export const useColumnsStateType = ({
+  columnsState,
+  columns,
+}: useColumnsStateTypeModal) => {
+  const { tableInstance } = useHTableContext();
+  const { persistenceType, persistenceKey, value, defaultValue, onChange } =
+    columnsState || {};
+  const [selfValue, setSelfValue] = useState<
+    Record<string, ColumnsState> | undefined
+  >(defaultValue);
+  const initTableColsVal = useMemo(() => {
+    return selfValue;
+  }, []);
+  useEffect(() => {
+    tableInstance.table.getColSettingKeys = () => {
+      return outColSetting(columns, selfValue);
+    };
+  }, [selfValue]);
+  useEffect(() => {
+    setSelfValue(mkChangeValue(columnsState));
+  }, [value]);
+
+  const change = (keys: string[], notCheck: string[]) => {
+    const newObj = {};
+    notCheck.forEach((key) => {
+      newObj[key] = { show: false };
+    });
+    setSelfValue(newObj);
+    onChange?.(newObj);
+  };
+  const reset = () => {
+    setSelfValue(initTableColsVal);
+  };
+  return {
+    persistenceType,
+    persistenceKey,
+    value: selfValue,
+    onChange: change,
+    reset,
+  };
+}; //设置选项

package/src/components/HTableBody/index.tsx

@@ -7,7 +7,12 @@ import type {
   HTableInstance,
   HRowSelection,
 } from "../modal";
-import { useCols, useSize, useSynchronousKeys } from "./hooks";
+import {
+  useCols,
+  useColumnsStateType,
+  useSize,
+  useSynchronousKeys,
+} from "./hooks";
 import { useHTableContext } from "../context";
 import React from "react";
 import { ConfigProvider, Empty, Alert } from "antd";
@@ -18,8 +23,13 @@ import AlertMsg from "./AlertMsg";
 import type { AffixProps } from "antd/lib/affix";
 import Options from "./Options";
 import HeaderTitle from "./HeaderTitle";
+import {OptionConfig} from "@ant-design/pro-table/lib/components/ToolBar";
+
+export interface OptionModal extends OptionConfig {
+  settingRender?:()=>React.ReactNode
+}
 export interface HTableBodyProps
-  extends Omit<ProTableProps<any, any>, "dataSource" | "rowSelection"> {
+  extends Omit<ProTableProps<any, any>, "dataSource" | "rowSelection"|"options"> {
   configData?: ConfigDataModal;
   onPageChange?: (params: ParamsModal) => void;
   emptyRender?: (tableInstance: HTableInstance) => React.ReactNode;
@@ -36,6 +46,7 @@ export interface HTableBodyProps
   optionsRender?: (node: React.ReactNode) => React.ReactNode;
   paginationActionRender?: (tableInstance: HTableInstance) => React.ReactNode;
   localSorter?: boolean;
+  options?:OptionModal|false
 }
 const defaultRender = () => {
   return <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />;
@@ -64,9 +75,9 @@ export default ({
   optionsRender,
   paginationActionRender,
   localSorter,
+  columnsState,
   ...props
 }: HTableBodyProps) => {
-  // @ts-ignore
   const { selectedRowKeys, alwaysShowAlert: configAlwaysShowAlert } =
     rowSelection || {};
   const {
@@ -86,12 +97,17 @@ export default ({
   const { cuSize, setCuSize } = useSize(size);
   const bodyConfigData = configData || contextConfigData;
   const { records } = data || {};
-  const { cols, changeCols } = useCols({
+
+  const { cols } = useCols({
     configData: bodyConfigData,
     table: tableInstance,
     rowSelection,
   });
 
+  const { value, onChange, reset, ...selfColStatus } = useColumnsStateType({
+    columnsState,
+    columns: cols,
+  });
   useSynchronousKeys({ selectedRowKeys, records, rowKey });
   const optionsNode = options && (
     <Options
@@ -102,7 +118,9 @@ export default ({
       size={cuSize}
       columns={cols}
       setSizeChange={setCuSize}
-      onChange={changeCols}
+      colStatusValue={value || {}}
+      onChange={onChange}
+      reset={reset}
     />
   );
   const { keys = [], selectAll } = selectedRowData;
@@ -136,6 +154,10 @@ export default ({
       >
         <ProTable
           {...props}
+          columnsState={{
+            ...selfColStatus,
+            value,
+          }}
           columns={cols as any}
           size={cuSize}
           search={false}
@@ -154,15 +176,16 @@ export default ({
               asc,
             });
           }}
-          options={false}
           tableStyle={{
             paddingBottom: 0,
           }}
+          options={false}
           rowSelection={false}
           loading={loading}
           rowKey={rowKey}
           dataSource={records}
           pagination={false}
+
         />
         {pagination !== false && (
           <HTablePagination

package/src/components/HTableBody/utils.ts

@@ -0,0 +1,93 @@
+import type { ColumnsStateType } from "@ant-design/pro-table/es/typing";
+import type { ConfigDataModal, ConfigItemModal } from "@/components/modal";
+import type React from "react";
+import { getItemValue } from "./Options/utils";
+
+const strToJson = (str: string | null) => {
+  if (!str) {
+    return {};
+  }
+  try {
+    const result = JSON.parse(str);
+    if (typeof result === "object") {
+      return result;
+    }
+    return {};
+  } catch (e) {
+    return {};
+  }
+};
+
+export const mkChangeValue = (columnsState?: ColumnsStateType) => {
+  const { persistenceType, persistenceKey, value, defaultValue, onChange } =
+    columnsState || {};
+  if (value) {
+    return value;
+  }
+  if (!persistenceKey) {
+    return {};
+  }
+  const cuPersistenceType = persistenceType || "localStorage";
+  const saveValStr = window[cuPersistenceType].getItem(persistenceKey);
+  return strToJson(saveValStr);
+}; //获取默认值
+
+const childDataIndexProvider = (
+  data: ConfigItemModal[] | string[],
+  title?: string | React.ReactNode
+) => {
+  const keys: string[] = [];
+  const cols: ConfigDataModal = [];
+  data.forEach((value) => {
+    if (typeof value === "string") {
+      keys.push(value);
+      cols.push(
+        getItemValue({
+          title,
+          dataIndex: value,
+        })
+      );
+      return;
+    }
+    keys.push(value.dataIndex);
+    cols.push(getItemValue(value));
+  });
+  return {
+    keys,
+    cols,
+  };
+};
+
+export const outColSetting = (
+  columns: ConfigDataModal,
+  columnsState: ColumnsStateType = {}
+) => {
+  const keys: string[] = [];
+  const checkCols: ConfigDataModal = [];
+  columns.forEach((value) => {
+    const { dataIndex, titleStr, title, hideInTable, childrenDataIndex } =
+      value;
+    if (hideInTable || !dataIndex) {
+      return;
+    }
+    const { show = true } = columnsState[dataIndex.toString()] || {};
+    if (!show) {
+      return;
+    }
+    if (childrenDataIndex) {
+      const { keys: childKeys, cols: childCols } = childDataIndexProvider(
+        childrenDataIndex,
+        titleStr || title
+      );
+      keys.push(...childKeys);
+      checkCols.push(...childCols);
+      return;
+    }
+    keys.push(dataIndex.toString());
+    checkCols.push(getItemValue(value));
+  });
+  return {
+    checkCols,
+    keys,
+  };
+};

package/src/components/HTableHeader/Context.tsx

@@ -1,9 +1,9 @@
-import React, {useContext} from "react";
-import {IHeaderProps} from "./modal";
-const Context=React.createContext<IHeaderProps>({});
+import React, { useContext } from "react";
+import type { IHeaderProps } from "./modal";
+const Context = React.createContext<IHeaderProps>({});
 
-export const HeaderProvider=Context.Provider;
+export const HeaderProvider = Context.Provider;
 
-export const useHeaderContext=()=>{
-    return useContext(Context);
-}
+export const useHeaderContext = () => {
+  return useContext(Context);
+};

package/src/components/HTableHeader/defaultSubComponent.tsx

@@ -4,7 +4,7 @@ import { useHTableContext } from "../context";
 import React, { useMemo } from "react";
 import { DownOutlined, UpOutlined } from "@ant-design/icons";
 import type { RowProps } from "antd/lib/grid/row";
-import {useHeaderContext} from "./Context";
+import { useHeaderContext } from "./Context";
 interface IProps {
   form: HFormInstance;
 }
@@ -36,7 +36,7 @@ const OpenComponent = () => {
 };
 export const DefaultSubComponent = ({ form }: IProps) => {
   const { loading, headerOpen } = useHTableContext();
-  const {onReset}=useHeaderContext();
+  const { onReset } = useHeaderContext();
   const hide = typeof headerOpen === "undefined";
   const { justify, style } = useMemo(() => {
     if (headerOpen === true || hide) {
@@ -71,7 +71,11 @@ export const DefaultSubComponent = ({ form }: IProps) => {
         <Button
           style={{ borderRadius: 4 }}
           onClick={() => {
-            onReset?onReset():form.resetFields();
+            if (onReset) {
+              onReset();
+              return;
+            }
+            form.resetFields();
           }}
         >
           重置

package/src/components/HTableHeader/index.tsx

@@ -5,7 +5,7 @@ import React from "react";
 import { useClassName } from "../hooks";
 import type { IHeaderProps } from "./modal";
 import { useHideMoreTitle } from "./hooks";
-import {HeaderProvider} from "./Context";
+import { HeaderProvider } from "./Context";
 
 const defaultSearchSpan = {
   xxl: 4,
@@ -22,7 +22,7 @@ export default ({
   initValues,
   hideLabel,
   labelWidth,
-  onReset
+  onReset,
 }: IHeaderProps) => {
   const {
     tableInstance,
@@ -55,20 +55,20 @@ export default ({
       className={`hw_table_header ${className}`}
       bodyStyle={{ paddingBottom: 0 }}
     >
-      <HeaderProvider value={{onReset}}>
+      <HeaderProvider value={{ onReset }}>
         <HForm
-            itemSpan={searchSpan}
-            onFinish={subOnFinish}
-            submitLoading={loading}
-            gutter={[20, 0]}
-            initialValues={initValues}
-            hideLabel={
-              typeof tableHideLabel === "undefined" ? true : tableHideLabel
-            }
-            configData={nConfigData}
-            form={form}
-            colon={true}
-            labelWidth={tableLabelWidth}
+          itemSpan={searchSpan}
+          onFinish={subOnFinish}
+          submitLoading={loading}
+          gutter={[20, 0]}
+          initialValues={initValues}
+          hideLabel={
+            typeof tableHideLabel === "undefined" ? true : tableHideLabel
+          }
+          configData={nConfigData}
+          form={form}
+          colon={true}
+          labelWidth={tableLabelWidth}
         />
       </HeaderProvider>
     </Card>

package/src/components/HTableHeader/modal.ts

@@ -13,7 +13,7 @@ export interface IHeaderProps {
   initValues?: Record<string, any>;
   hideLabel?: boolean;
   labelWidth?: number;
-  onReset?:VoidFunction;
+  onReset?: VoidFunction;
 }
 
 export interface FormConfigDataItemProviderModal extends ConfigItemModal {

package/src/components/hooks/useHTable.tsx

@@ -17,13 +17,15 @@ export default (): HTableInstance => {
       getParams: () => {
         return {} as any;
       },
-      settingKeys: {},
       getSelectedRowData: () => {
         return {};
       },
-      getTableSourceData:()=>{
+      getTableSourceData: () => {
         return [];
-      }
+      },
+      getColSettingKeys: () => {
+        return {};
+      },
     };
   }, []);
   return {