@hw-component/table 1.9.90 → 1.9.92

package/lib/HTableBody/Options/hooks.js

@@ -1,7 +1,11 @@
 'use strict';
 
 var _forEachInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/for-each');
+var _indexOfInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/index-of');
+var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
+var utils = require('./utils.js');
+var index = require('../../hooks/index.js');
 
 var useCheckKeys = function useCheckKeys(_ref) {
   var columns = _ref.columns,
@@ -26,6 +30,56 @@ var useCheckKeys = function useCheckKeys(_ref) {
     return keys;
   }, [colStatusValue, columns]);
 };
+var useContentTree = function useContentTree(_ref3) {
+  var columns = _ref3.columns,
+    matchKey = _ref3.matchKey;
+  var titleClass = index.useClassName("hw-table-body-option-setting-content-title");
+  return React.useMemo(function () {
+    var treeData = [];
+    _forEachInstanceProperty(columns).call(columns, function (_ref4) {
+      var dataIndex = _ref4.dataIndex,
+        title = _ref4.title,
+        titleStr = _ref4.titleStr,
+        fixed = _ref4.fixed;
+      if (!dataIndex) {
+        return;
+      }
+      if (fixed !== matchKey) {
+        return;
+      }
+      var _getItemValue = utils.getItemValue({
+          titleStr: titleStr,
+          title: title
+        }),
+        cuTitleStr = _getItemValue.title;
+      treeData.push({
+        title: jsxRuntime.jsx("div", {
+          className: titleClass,
+          children: cuTitleStr
+        }),
+        key: dataIndex.toString()
+      });
+    });
+    return treeData;
+  }, [columns]);
+};
+var useTreeKeys = function useTreeKeys(_ref5) {
+  var treeData = _ref5.treeData,
+    checkKeys = _ref5.checkKeys;
+  return React.useMemo(function () {
+    var newKeys = [];
+    _forEachInstanceProperty(treeData).call(treeData, function (_ref6) {
+      var key = _ref6.key;
+      var index = _indexOfInstanceProperty(checkKeys).call(checkKeys, key);
+      if (index !== -1) {
+        newKeys.push(key);
+      }
+    });
+    return newKeys;
+  }, [treeData, checkKeys]);
+};
 
 exports.useCheckKeys = useCheckKeys;
+exports.useContentTree = useContentTree;
+exports.useTreeKeys = useTreeKeys;
 // powered by h

package/lib/HTableBody/Options/index.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import type { IProps } from "./modal";
-declare const _default: ({ reload, size, density, setSizeChange, columns, onChange, colStatusValue, reset, settingRender, }: IProps) => JSX.Element;
+declare const _default: ({ reload, size, density, setSizeChange, columns, onChange, colStatusValue, reset, settingRender, onDrop, }: IProps) => JSX.Element;
 export default _default;

package/lib/HTableBody/Options/index.js

@@ -22,7 +22,8 @@ var Options = (function (_ref) {
     onChange = _ref.onChange,
     colStatusValue = _ref.colStatusValue,
     reset = _ref.reset,
-    settingRender = _ref.settingRender;
+    settingRender = _ref.settingRender,
+    onDrop = _ref.onDrop;
   var pointer = index.useClassName(["hw-table-pointer", "hw-table-body-option-icon"]);
   var ref = React.useRef(null);
   var checkKeys = hooks.useCheckKeys({
@@ -87,7 +88,8 @@ var Options = (function (_ref) {
         content: jsxRuntime.jsx(Content.ColsSettingContent, {
           columns: columns,
           checkKeys: checkKeys,
-          onCheck: onChange
+          onCheck: onChange,
+          onDrop: onDrop
         }),
         title: jsxRuntime.jsx(Title.Title, {
           columns: columns,

package/lib/HTableBody/Options/utils.d.ts

@@ -1,4 +1,4 @@
-import type { ConfigItemModal } from "../../modal";
+import type { ConfigDataModal, ConfigItemModal } from "../../modal";
 import React from "react";
 export declare const getItemValue: (data: ConfigItemModal) => {
     name?: string | any[] | undefined;
@@ -806,3 +806,10 @@ export declare const getItemValue: (data: ConfigItemModal) => {
     title: any;
     dataIndex: ((string | number | (string | number)[]) & import("rc-table/lib/interface").DataIndex) | undefined;
 };
+interface MoveColProps {
+    startKey: string;
+    endKey: string;
+    data: ConfigDataModal;
+}
+export declare const moveCol: ({ startKey, endKey, data }: MoveColProps) => ConfigItemModal[];
+export {};

package/lib/HTableBody/Options/utils.js

@@ -4,12 +4,14 @@ var _Object$keys = require('@babel/runtime-corejs3/core-js-stable/object/keys');
 var _Object$getOwnPropertySymbols = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols');
 var _filterInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/filter');
 var _Object$getOwnPropertyDescriptor = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor');
-var _forEachInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/for-each');
 var _Object$getOwnPropertyDescriptors = require('@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors');
 var _Object$defineProperties = require('@babel/runtime-corejs3/core-js-stable/object/define-properties');
 var _Object$defineProperty = require('@babel/runtime-corejs3/core-js-stable/object/define-property');
+var _toConsumableArray = require('@babel/runtime-corejs3/helpers/toConsumableArray');
 var _defineProperty = require('@babel/runtime-corejs3/helpers/defineProperty');
 var _objectWithoutProperties = require('@babel/runtime-corejs3/helpers/objectWithoutProperties');
+var _forEachInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/for-each');
+var _spliceInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/splice');
 var React = require('react');
 
 var _excluded = ["dataIndex", "title", "titleStr"];
@@ -29,6 +31,32 @@ var getItemValue = function getItemValue(data) {
     dataIndex: dataIndex
   }, oData);
 };
+var moveCol = function moveCol(_ref) {
+  var startKey = _ref.startKey,
+    endKey = _ref.endKey,
+    data = _ref.data;
+  var indexArray = [-1, -1];
+  _forEachInstanceProperty(data).call(data, function (item, index) {
+    var dataIndex = item.dataIndex;
+    if (!dataIndex) {
+      return;
+    }
+    if (dataIndex === startKey) {
+      indexArray[0] = index;
+    }
+    if (dataIndex === endKey) {
+      indexArray[1] = index;
+    }
+  });
+  var oldIndex = indexArray[0],
+    newIndex = indexArray[1];
+  var newData = _toConsumableArray(data);
+  var oldItem = data[oldIndex];
+  _spliceInstanceProperty(newData).call(newData, oldIndex, 1);
+  _spliceInstanceProperty(newData).call(newData, newIndex, 0, oldItem);
+  return newData;
+};
 
 exports.getItemValue = getItemValue;
+exports.moveCol = moveCol;
 // powered by h

package/lib/HTableBody/RowCheckBox/RowItem.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
-import { RowRadioSelectionProps } from "@/components/HTableBody/modal";
+import type { RowRadioSelectionProps } from "@/components/HTableBody/modal";
 declare const _default: ({ data, onChange, index, getCheckboxProps, }: RowRadioSelectionProps) => JSX.Element;
 export default _default;

package/lib/HTableBody/RowCheckBox/hooks.d.ts

@@ -1,5 +1,5 @@
 import type { Key } from "react";
-import { RowRadioSelectionProps } from '../modal';
+import type { RowRadioSelectionProps } from "../modal";
 export declare const useAllChecked: (keys?: Key[], data?: any[]) => boolean;
 export declare const useCheckControl: (data: any[] | undefined, onChange: RowRadioSelectionProps["onChange"]) => {
     checkChange: (e: any) => void;

package/lib/HTableBody/RowRadioBoxSelection.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
-import { RowRadioSelectionProps } from './modal';
+import type { RowRadioSelectionProps } from "./modal";
 export declare const RowRadioSelection: ({ data, onChange, index, getCheckboxProps, }: RowRadioSelectionProps) => JSX.Element;

package/lib/HTableBody/hooks/useColData.d.ts

@@ -1,8 +1,11 @@
+/// <reference types="react" />
 import type { ConfigDataModal, HTableProps } from "@/components/modal";
 import type { ColumnsState } from "@ant-design/pro-table/es/container";
 import type { ColumnsStateType } from "@ant-design/pro-table/es/typing";
 export declare const useCols: ({ configData, rowSelection, table, bordered, }: HTableProps) => {
     cols: ConfigDataModal;
+    setCols: import("react").Dispatch<import("react").SetStateAction<ConfigDataModal>>;
+    resetCols: () => void;
 };
 interface useColumnsStateTypeModal {
     columnsState?: ColumnsStateType;
@@ -13,6 +16,6 @@ export declare const useColumnsStateType: ({ columnsState, columns, }: useColumn
     persistenceKey: string | undefined;
     value: Record<string, ColumnsState> | undefined;
     onChange: (keys: string[], notCheck: string[]) => void;
-    reset: () => void;
+    resetCheckCol: () => void;
 };
 export {};

package/lib/HTableBody/hooks/useColData.js

@@ -93,8 +93,13 @@ var useCols = function useCols(_ref) {
   React.useEffect(function () {
     setCols(changeConfigData(configData));
   }, [configData, table, rowSelection]);
+  var resetCols = function resetCols() {
+    setCols(changeConfigData(configData));
+  };
   return {
-    cols: cols
+    cols: cols,
+    setCols: setCols,
+    resetCols: resetCols
   };
 };
 var useColumnsStateType = function useColumnsStateType(_ref3) {
@@ -133,7 +138,7 @@ var useColumnsStateType = function useColumnsStateType(_ref3) {
     setSelfValue(newObj);
     onChange === null || onChange === void 0 || onChange(newObj);
   };
-  var reset = function reset() {
+  var resetCheckCol = function resetCheckCol() {
     setSelfValue(initTableColsVal);
   };
   return {
@@ -141,7 +146,7 @@ var useColumnsStateType = function useColumnsStateType(_ref3) {
     persistenceKey: persistenceKey,
     value: selfValue,
     onChange: change,
-    reset: reset
+    resetCheckCol: resetCheckCol
   };
 };
 

package/lib/HTableBody/index.js

@@ -28,7 +28,7 @@ var defaultRender = require('./defaultRender.js');
 var useRowClassName = require('./hooks/useRowClassName.js');
 
 var _excluded = ["configData", "pagination", "onPageChange", "rowSelection", "rowKey", "emptyRender", "errorRender", "tableStyle", "paginationStyle", "headerTitle", "options", "actionRender", "affixProps", "goTop", "size", "optionsRender", "paginationActionRender", "localSorter", "columnsState", "tableExtraRender", "table", "onChange", "bordered", "rowClassName"],
-  _excluded2 = ["value", "onChange", "reset"];
+  _excluded2 = ["value", "onChange", "resetCheckCol"];
 function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
 var Body = (function (bodyProps) {
@@ -92,14 +92,16 @@ var Body = (function (bodyProps) {
       rowSelection: rowSelection,
       bordered: bordered
     }),
-    cols = _useCols.cols;
+    cols = _useCols.cols,
+    setCols = _useCols.setCols,
+    resetCols = _useCols.resetCols;
   var _useColumnsStateType = useColData.useColumnsStateType({
       columnsState: columnsState,
       columns: cols
     }),
     value = _useColumnsStateType.value,
     onChange = _useColumnsStateType.onChange,
-    reset = _useColumnsStateType.reset,
+    resetCheckCol = _useColumnsStateType.resetCheckCol,
     selfColStatus = _objectWithoutProperties(_useColumnsStateType, _excluded2);
   useControl.useSynchronousKeys({
     selectedRowKeys: selectedRowKeys,
@@ -116,7 +118,11 @@ var Body = (function (bodyProps) {
     setSizeChange: setCuSize,
     colStatusValue: value || {},
     onChange: onChange,
-    reset: reset
+    reset: function reset() {
+      resetCheckCol();
+      resetCols();
+    },
+    onDrop: setCols
   }));
   var defaultOptionsNode = optionsRender ? optionsRender(optionsNode) : optionsNode;
   var alwaysShowAlert = useControl.useAlwaysShowAlert(selectedRowData, configAlwaysShowAlert);

package/lib/HTableBody/modal.d.ts

@@ -1,5 +1,6 @@
 import type { OptionConfig } from "@ant-design/pro-table/lib/components/ToolBar";
-import React, { Key } from "react";
+import type { Key } from "react";
+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";

package/lib/index.css

@@ -83,6 +83,10 @@
   display: -ms-flexbox;
   display: flex;
 }
+.ant-hw-table-op-tree-content {
+  padding: 6px 6px 6px 0px;
+  width: 100%;
+}
 .ant-hw-table-body-option-tree .ant-tree-treenode {
   width: 100%;
   padding-left: 24px !important;

package/lib/modal.d.ts

@@ -2,7 +2,8 @@ import type { ProColumns } from "@ant-design/pro-table/lib/typing";
 import type { ProTableProps } from "@ant-design/pro-table";
 import type { HItemProps, HFormInstance } from "@hw-component/form/es/Form/modal";
 import type { ColProps, FormInstance } from "antd";
-import React, { Key } from "react";
+import type { Key } from "react";
+import type React from "react";
 import type { ModalProps } from "antd";
 import type { TableProps } from "antd/lib/table";
 import type { AffixProps } from "antd/lib/affix";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hw-component/table",
-  "version": "1.9.90",
+  "version": "1.9.92",
   "description": "基于antd二次开发table组件",
   "keywords": [
     "table"

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

@@ -1,47 +1,52 @@
-import {MutableRefObject, useEffect, useLayoutEffect, useState} from "react";
+import type { MutableRefObject} from "react";
+import { useEffect, useLayoutEffect, useState } from "react";
 
 interface HeaderStyleParams {
-    bodyRef:MutableRefObject<HTMLDivElement|null>;
-    titleContentRef:MutableRefObject<HTMLDivElement|null>;
-    rightNodeRef:MutableRefObject<HTMLDivElement|null>;
+  bodyRef: MutableRefObject<HTMLDivElement | null>;
+  titleContentRef: MutableRefObject<HTMLDivElement | null>;
+  rightNodeRef: MutableRefObject<HTMLDivElement | null>;
 }
 
-export const useHeaderStyle = ({bodyRef,titleContentRef,rightNodeRef}:HeaderStyleParams) => {
-    const [style, setStyle] = useState({});
-    const setHeaderStyle = () => {
-        const headerWidth = bodyRef.current?.clientWidth || 0;
-        const titleWidth = titleContentRef.current?.clientWidth || 0;
-        const rightNodeWidth = rightNodeRef.current?.clientWidth || 0;
-        if (rightNodeWidth + titleWidth >= headerWidth) {
-            setStyle({
-                overflow: "auto",
-            });
-            return;
-        }
-        setStyle({});
+export const useHeaderStyle = ({
+  bodyRef,
+  titleContentRef,
+  rightNodeRef,
+}: HeaderStyleParams) => {
+  const [style, setStyle] = useState({});
+  const setHeaderStyle = () => {
+    const headerWidth = bodyRef.current?.clientWidth || 0;
+    const titleWidth = titleContentRef.current?.clientWidth || 0;
+    const rightNodeWidth = rightNodeRef.current?.clientWidth || 0;
+    if (rightNodeWidth + titleWidth >= headerWidth) {
+      setStyle({
+        overflow: "auto",
+      });
+      return;
+    }
+    setStyle({});
+  };
+  useLayoutEffect(() => {
+    setHeaderStyle();
+  }, []);
+  useEffect(() => {
+    const resizeFn = () => {
+      setHeaderStyle();
     };
-    useLayoutEffect(() => {
-        setHeaderStyle();
-    }, []);
-    useEffect(() => {
-        const resizeFn = () => {
-            setHeaderStyle();
-        };
-        window.addEventListener("resize", resizeFn);
-        return () => {
-            window.removeEventListener("resize", resizeFn);
-        };
-    }, []);
-    useEffect(() => {
-        const element = titleContentRef.current;
-        if (!element||!window.ResizeObserver) return;
-        const observer = new ResizeObserver(() => {
-           setHeaderStyle();
-        });
-        observer.observe(element);
-        return () => {
-          observer.disconnect();
-        }
-    }, []);
-    return style;
-}
+    window.addEventListener("resize", resizeFn);
+    return () => {
+      window.removeEventListener("resize", resizeFn);
+    };
+  }, []);
+  useEffect(() => {
+    const element = titleContentRef.current;
+    if (!element || !window.ResizeObserver) return;
+    const observer = new ResizeObserver(() => {
+      setHeaderStyle();
+    });
+    observer.observe(element);
+    return () => {
+      observer.disconnect();
+    };
+  }, []);
+  return style;
+};

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

@@ -1,9 +1,10 @@
 import type { HTableBodyProps } from "../modal";
-import {DetailedReactHTMLElement, useLayoutEffect} from "react";
+import type { DetailedReactHTMLElement} from "react";
+import { useLayoutEffect } from "react";
 import React, { useRef } from "react";
 import { useHTableContext } from "../../context";
 import { useClassName } from "../../hooks";
-import {useHeaderStyle} from "./hooks";
+import { useHeaderStyle } from "./hooks";
 
 interface IProps {
   headerTitle: HTableBodyProps["headerTitle"];
@@ -11,7 +12,8 @@ interface IProps {
   rNode?: React.ReactNode;
 }
 export default ({ headerTitle, contentStyle, rNode }: IProps) => {
-  const { tableInstance, selectedRowData, rowOnChange, allSelectChange } = useHTableContext();
+  const { tableInstance, selectedRowData, rowOnChange, allSelectChange } =
+    useHTableContext();
   const bodyRef = useRef<any>();
   const titleContentRef = useRef<any>();
   const rightNodeRef = useRef<any>();
@@ -19,10 +21,10 @@ export default ({ headerTitle, contentStyle, rNode }: IProps) => {
   const headerBoxContent = useClassName("hw-table-header-title-box-content");
   const titleClassname = useClassName("hw-table-header-title");
   const rightNodeClassname = useClassName("hw-table-header-right-node");
-  const style=useHeaderStyle({
+  const style = useHeaderStyle({
     bodyRef,
     titleContentRef,
-    rightNodeRef
+    rightNodeRef,
   });
   if (!headerTitle && !rNode) {
     return null;

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

@@ -1,37 +1,40 @@
 import { useClassName } from "../../hooks";
-import { useMemo } from "react";
-import type { ConfigDataModal } from "../../modal";
-import { Tree } from "antd";
 import type { ItemProps } from "./modal";
-import { getItemValue } from "./utils";
+import { moveCol } from "./utils";
+import ContentTree from "./ContentTree";
+import { useContentTree, useTreeKeys } from "./hooks";
 
 export const ColsSettingContent = ({
   columns,
   onCheck,
   checkKeys,
+  onDrop,
 }: ItemProps) => {
   const content = useClassName("hw-table-body-option-setting-content");
-  const titleClass = useClassName("hw-table-body-option-setting-content-title");
-  const treeClass = useClassName("hw-table-body-option-tree");
-  const contentTreeData = useMemo(() => {
-    const treeData: ConfigDataModal = [];
-    columns.forEach(({ dataIndex, title, titleStr }) => {
-      if (dataIndex) {
-        const { title: cuTitleStr } = getItemValue({
-          titleStr,
-          title,
-        });
-        treeData.push({
-          title: <div className={titleClass}>{cuTitleStr}</div>,
-          key: dataIndex.toString(),
-        });
-      }
-    });
-    return treeData;
-  }, [columns]);
+  const norContentTreeData = useContentTree({ columns });
+  const leftContentTreeData = useContentTree({ columns, matchKey: "left" });
+  const rightContentTreeData = useContentTree({ columns, matchKey: "right" });
+  const norCheckKeys = useTreeKeys({
+    treeData: norContentTreeData,
+    checkKeys,
+  });
+  const leftCheckKeys = useTreeKeys({
+    treeData: leftContentTreeData,
+    checkKeys,
+  });
+  const rightCheckKeys = useTreeKeys({
+    treeData: rightContentTreeData,
+    checkKeys,
+  });
+
   const check = (keys: string[]) => {
     const notCheck: string[] = [];
-    contentTreeData.forEach(({ key }) => {
+    const allTreeData = [
+      ...leftContentTreeData,
+      ...norContentTreeData,
+      ...rightContentTreeData,
+    ];
+    allTreeData.forEach(({ key }) => {
       const cuKey = key as string;
       const index = keys.indexOf(cuKey);
       if (index === -1) {
@@ -40,20 +43,64 @@ export const ColsSettingContent = ({
     });
     onCheck(keys, notCheck);
   };
+  const onDropEnd = ({ dragNodesKeys, dropPosition }) => {
+    if (dropPosition < 1) {
+      return;
+    }
+    const allTreeData = [
+      ...leftContentTreeData,
+      ...norContentTreeData,
+      ...rightContentTreeData,
+    ];
+    const [key] = dragNodesKeys;
+    const sourceKey = allTreeData[dropPosition - 1].key;
+    const newData = moveCol({
+      startKey: key,
+      endKey: sourceKey as string,
+      data: columns,
+    });
+    onDrop(newData);
+  };
   return (
     <div className={content}>
-      <div style={{ paddingTop: 6, paddingBottom: 6 }}>
-        <Tree
-          checkable
-          className={treeClass}
-          checkedKeys={checkKeys}
-          onCheck={(key) => {
-            check(key as string[]);
-          }}
-          height={268}
-          treeData={contentTreeData}
-        />
-      </div>
+      <ContentTree
+        title="固定在左侧"
+        treeData={leftContentTreeData}
+        checkedKeys={leftCheckKeys}
+        onDrop={onDropEnd}
+        onCheck={(key) => {
+          const curKey = key as string[];
+          check([...curKey,...norCheckKeys,...rightCheckKeys]);
+        }}
+      />
+      <ContentTree
+        title="不固定"
+        treeData={norContentTreeData}
+        checkedKeys={norCheckKeys}
+        onDrop={({ dragNodesKeys, dropPosition })=>{
+          const cuDropPosition=leftContentTreeData.length+dropPosition;
+          onDropEnd({dragNodesKeys, dropPosition:cuDropPosition});
+        }}
+        onCheck={(key) => {
+          const curKey = key as string[];
+          check([...leftCheckKeys,...curKey,...rightCheckKeys]);
+        }}
+      />
+      <ContentTree
+        title="固定在右侧"
+        treeData={rightContentTreeData}
+        checkedKeys={rightCheckKeys}
+        onDrop={({ dragNodesKeys, dropPosition })=>{
+          const leftLen=leftContentTreeData.length;
+          const norLen=norContentTreeData.length;
+          const cuDropPosition=leftLen+norLen+dropPosition;
+          onDropEnd({dragNodesKeys, dropPosition:cuDropPosition});
+        }}
+        onCheck={(key) => {
+          const curKey = key as string[];
+          check([...leftCheckKeys,...norCheckKeys,...curKey]);
+        }}
+      />
     </div>
   );
 };

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

@@ -0,0 +1,38 @@
+import React from "react";
+import { Space, Tree, Typography } from "antd";
+import { useClassName } from "@/components/hooks";
+import type { TreeProps } from "antd/lib/tree/Tree";
+
+interface IProps extends TreeProps {
+  title: string;
+}
+
+export default ({ treeData, checkedKeys, onDrop, onCheck, title }: IProps) => {
+  const treeClass = useClassName("hw-table-body-option-tree");
+  const treeItemContent = useClassName("hw-table-op-tree-content");
+
+  if (!treeData?.length) {
+    return null;
+  }
+  return (
+    <Space
+      className={treeItemContent}
+      direction="vertical"
+      size={12}
+    >
+      <Typography.Text type={"secondary"} style={{ paddingLeft: 24 }}>
+        {title}
+      </Typography.Text>
+      <Tree
+        checkable
+        className={treeClass}
+        draggable
+        checkedKeys={checkedKeys}
+        onDrop={onDrop}
+        onCheck={onCheck}
+        height={268}
+        treeData={treeData}
+      />
+    </Space>
+  );
+};

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

@@ -2,8 +2,14 @@ import { useClassName } from "../../hooks";
 import { Checkbox, Row, Space, Typography } from "antd";
 import type { ItemProps } from "./modal";
 import { useMemo } from "react";
+
 const { Link } = Typography;
-export const Title = ({ columns, onCheck, checkKeys, reset }: ItemProps) => {
+export const Title = ({
+  columns,
+  onCheck,
+  checkKeys,
+  reset,
+}: Omit<ItemProps, "onDrop">) => {
   const title = useClassName("hw-table-body-option-setting-title");
   const relArrayKeys = useMemo(() => {
     const keys: string[] = [];
@@ -17,7 +23,6 @@ export const Title = ({ columns, onCheck, checkKeys, reset }: ItemProps) => {
     });
     return keys;
   }, [columns]);
-  const allKeys = columns;
   const allCheck = () => {
     onCheck(relArrayKeys, []);
   };