linkmore-design 1.0.32 → 1.0.33

package/dist/index.umd.js

@@ -74018,7 +74018,7 @@
 	  editConfig: editConfig
 	};
 
-	var _excluded$_ = ["dataSource", "autoSize", "columns", "rowClick", "onDoubleClick", "checkConfig", "summary", "pagination", "hiddenPage", "loading", "virtual", "customCheck", "rowSelection"];
+	var _excluded$_ = ["dataSource", "autoSize", "columns", "rowClick", "onDoubleClick", "checkConfig", "summary", "pagination", "hiddenPage", "loading", "virtual", "customCheck", "rowSelection", "columnsState", "tableRowType"];
 	var Summary = ProviderWarp.Summary;
 	var ResetTable = /*#__PURE__*/React.forwardRef(function (props, ref) {
 	  var dataSource = props.dataSource,
@@ -74035,6 +74035,9 @@
 	      virtual = _props$virtual === void 0 ? false : _props$virtual,
 	      customCheck = props.customCheck,
 	      rowSelection = props.rowSelection,
+	      columnsState = props.columnsState,
+	      _props$tableRowType = props.tableRowType,
+	      tableRowType = _props$tableRowType === void 0 ? 'default' : _props$tableRowType,
 	      resetProps = _objectWithoutProperties(props, _excluded$_);
 
 	  var _resetProps$rowKey = resetProps.rowKey,
@@ -74080,7 +74083,9 @@
 	  };
 
 	  var resetColumns = React.useCallback(function () {
-	    return useColumns.map(function (col, index) {
+	    return useColumns.filter(function (item) {
+	      return item.show !== false;
+	    }).map(function (col, index) {
 	      return _objectSpread(_objectSpread({}, col), {}, {
 	        width: col.width,
 	        onHeaderCell: function onHeaderCell(column) {
@@ -74103,20 +74108,25 @@
 	        trigger = _Object$assign.trigger,
 	        highlight = _Object$assign.highlight;
 
+	    console.log(trigger, highlight, 'rowclick');
+
 	    if (highlight) {
 	      setActiveKey(record[rowKey]);
 	    }
 
 	    if (trigger === 'row') {
 	      var selectedRows = useSelectedRows.selectedRows;
-	      var selectedRowKeys = selectedRows.map(function (v) {
-	        return v[rowKey];
-	      });
-	      var Idx = selectedRowKeys.indexOf(record[rowKey]);
-	      Idx >= 0 ? selectedRows.splice(Idx, 1) : selectedRows.push(record);
-	      setSelectedRows({
-	        selectedRows: selectedRows
-	      });
+
+	      if (tableRowType === 'select' || tableRowType === 'default' && selectedRows.length) {
+	        var selectedRowKeys = selectedRows.map(function (v) {
+	          return v[rowKey];
+	        });
+	        var Idx = selectedRowKeys.indexOf(record[rowKey]);
+	        Idx >= 0 ? selectedRows.splice(Idx, 1) : selectedRows.push(record);
+	        setSelectedRows({
+	          selectedRows: selectedRows
+	        });
+	      }
 	    }
 
 	    rowClick === null || rowClick === void 0 ? void 0 : rowClick(record);
@@ -74138,7 +74148,7 @@
 	      debounceTime: 300,
 	      revalidateOnFocus: false,
 	      options: {
-	        setting: false,
+	        setting: true,
 	        density: false,
 	        fullScreen: false,
 	        reload: false
@@ -74146,6 +74156,7 @@
 	      columnsState: {
 	        value: columnsStateMap,
 	        onChange: function onChange(k) {
+	          console.log(k, 'kkk');
 	          setColumnsStateMap(k);
 	        }
 	      },
@@ -74222,7 +74233,8 @@
 	  // }, [columns, autoSize.width])
 
 	  React.useEffect(function () {
-	    var obj = {};
+	    var obj = _objectSpread({}, columnsState);
+
 	    columns === null || columns === void 0 ? void 0 : columns.forEach(function (item) {
 	      if (item.fixed) {
 	        obj[item.dataIndex || item.key] = {
@@ -74232,6 +74244,10 @@
 	    });
 	    setColumnsStateMap(obj);
 	  }, []); // useEffect(() => {
+	  //   console.log(props.columnsStateValue, 'v vv')
+	  //   setColumnsStateMap(props.columnsStateValue)
+	  // }, [props.columnsStateValue])
+	  // useEffect(() => {
 	  //   rowClick?.()
 	  // }, [useSelectedRows])
 	  // 将节点方法给外部使用
@@ -74375,7 +74391,6 @@
 	        _tableWarpRef$current7 = _tableWarpRef$current5.height,
 	        height = _tableWarpRef$current7 === void 0 ? '100%' : _tableWarpRef$current7;
 
-	    console.log(width, height, '--tableWarpReftableWarpRef', tableWarpRef.current);
 	    var value = summary ? 48 : 0;
 	    resizeRef.current = window.addEventListener('resize', handResize);
 	    setTableSize({
@@ -81039,7 +81054,7 @@
 	LmTree.DirectoryTree = _Tree__default['default'].DirectoryTree;
 
 	var _excluded$1g = ["className", "color"];
-	var PresetColorTypes = ['pink', 'red', 'yellow', 'orange', 'cyan', 'green', 'blue', 'purple', 'geekblue', 'magenta', 'volcano', 'gold', 'lime'];
+	var PresetColorTypes = ['pink', 'red', 'yellow', 'orange', 'cyan', 'green', 'blue', 'purple', 'geekblue', 'magenta', 'volcano', 'gold', 'lime', 'theme'];
 	var prefixCls$7 = 'lm_tag';
 	var LmTag = /*#__PURE__*/React.forwardRef(function (props, ref) {
 	  var className = props.className,
@@ -81052,7 +81067,7 @@
 	    color: color,
 	    className: classnames(prefixCls$7, {
 	      lm_tag_noborder: !!props.noborder
-	    }, className, PresetColorTypes.includes(color) && "lm_tag_main_color")
+	    }, className, PresetColorTypes.includes(color) && "lm_tag_main_color lm_tag_main_".concat(color))
 	  }));
 	});
 	LmTag.CheckableTag = _Tag__default['default'].CheckableTag;
@@ -81073,6 +81088,614 @@
 
 	LMTabs.TabPane = _Tabs__default['default'].TabPane;
 
+	var SortItem = function SortItem(props) {
+	  var _props$item, _props$item2, _props$item3, _props$item4;
+
+	  var _useSortable = useSortable({
+	    id: "".concat(props.id)
+	  }),
+	      attributes = _useSortable.attributes,
+	      listeners = _useSortable.listeners,
+	      setNodeRef = _useSortable.setNodeRef,
+	      transform = _useSortable.transform,
+	      transition = _useSortable.transition;
+
+	  var style = {
+	    transform: CSS.Transform.toString(transform),
+	    transition: transition
+	  };
+	  return /*#__PURE__*/React__default['default'].createElement("div", _extends({
+	    ref: setNodeRef,
+	    className: "lm_custom_item",
+	    style: style
+	  }, attributes), /*#__PURE__*/React__default['default'].createElement(linkmoreDesign.Checkbox, {
+	    checked: ((_props$item = props.item) === null || _props$item === void 0 ? void 0 : _props$item.show) === false ? false : true,
+	    onChange: function onChange(e) {
+	      return props.toggleShow(e.target.checked, props.id);
+	    },
+	    className: "filter_item-content"
+	  }, (_props$item2 = props.item) === null || _props$item2 === void 0 ? void 0 : _props$item2.title), /*#__PURE__*/React__default['default'].createElement("div", null, ((_props$item3 = props.item) === null || _props$item3 === void 0 ? void 0 : _props$item3.fixed) && /*#__PURE__*/React__default['default'].createElement(linkmoreDesign.IconFont, {
+	    type: "lmweb-vertical-align-middl",
+	    className: "lm_custom_icon hover_show",
+	    onClick: function onClick(e) {
+	      e.stopPropagation();
+	      props.clearFiexd(props.id);
+	    }
+	  }), !((_props$item4 = props.item) === null || _props$item4 === void 0 ? void 0 : _props$item4.fixed) && /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(linkmoreDesign.IconFont, {
+	    type: "lmweb-vertical-align-top",
+	    className: "lm_custom_icon hover_show icon_top",
+	    onClick: function onClick(e) {
+	      console.log(e, 'eee');
+	      e.stopPropagation();
+	      props.addFiexd(props.id, 'left');
+	    }
+	  }), /*#__PURE__*/React__default['default'].createElement(linkmoreDesign.IconFont, {
+	    type: "lmweb-vertical-align-botto",
+	    className: "lm_custom_icon hover_show icon_bottom",
+	    onClick: function onClick(e) {
+	      e.stopPropagation();
+	      props.addFiexd(props.id, 'right');
+	    }
+	  })), /*#__PURE__*/React__default['default'].createElement(HolderOutlined$2, _extends({}, listeners, {
+	    className: "lm_custom_icon sort_item",
+	    style: {
+	      color: 'var(--tip-text-color)'
+	    }
+	  }))));
+	};
+	/** order show fixed */
+
+
+	var ColumnsSort = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+	  var _sortMenu$leftSortIte, _sortMenu$leftSortIte2, _sortMenu$items, _sortMenu$items2, _sortMenu$items3, _sortMenu$rigthSortIt, _sortMenu$rigthSortIt2;
+
+	  var _ref$columns = _ref.columns,
+	      columns = _ref$columns === void 0 ? [] : _ref$columns,
+	      _ref$ColumnsStateValu = _ref.ColumnsStateValue,
+	      ColumnsStateValue = _ref$ColumnsStateValu === void 0 ? {} : _ref$ColumnsStateValu;
+
+	  var _useState = React.useState([]),
+	      _useState2 = _slicedToArray(_useState, 2),
+	      localColumns = _useState2[0],
+	      setLocalColumns = _useState2[1];
+
+	  var _useState3 = React.useState({}),
+	      _useState4 = _slicedToArray(_useState3, 2),
+	      colStateValue = _useState4[0],
+	      setColStateValue = _useState4[1];
+
+	  var sortMenu = React.useMemo(function () {
+	    var cloneCol = lodash.cloneDeep(localColumns);
+	    cloneCol.forEach(function (item, index) {
+	      var _ColumnsStateValue$it, _ColumnsStateValue$it2;
+
+	      var fixed = (_ColumnsStateValue$it = ColumnsStateValue[item.dataIndex]) === null || _ColumnsStateValue$it === void 0 ? void 0 : _ColumnsStateValue$it.fixed;
+	      var order = (_ColumnsStateValue$it2 = ColumnsStateValue[item.dataIndex]) === null || _ColumnsStateValue$it2 === void 0 ? void 0 : _ColumnsStateValue$it2.order;
+
+	      if (!!fixed) {
+	        item.fixed = fixed;
+	      }
+
+	      item.order = order !== undefined && order !== null ? order : index;
+	    });
+	    var leftSortItem = [];
+	    var rigthSortItem = [];
+	    var items = [];
+	    cloneCol === null || cloneCol === void 0 ? void 0 : cloneCol.forEach(function (item) {
+	      if ((item === null || item === void 0 ? void 0 : item.fixed) === 'right') {
+	        rigthSortItem.push(item);
+	      } else if (!(item === null || item === void 0 ? void 0 : item.fixed)) {
+	        items.push(item);
+	      } else {
+	        leftSortItem.push(item);
+	      }
+	    });
+	    return {
+	      leftSortItem: leftSortItem,
+	      rigthSortItem: rigthSortItem,
+	      items: items
+	    };
+	  }, [localColumns, colStateValue]);
+	  var isCheckAll = React.useMemo(function () {
+	    var showLength = localColumns.filter(function (item) {
+	      return item.show !== false;
+	    });
+	    return {
+	      indeterminate: (showLength === null || showLength === void 0 ? void 0 : showLength.length) && showLength.length !== localColumns.length ? true : false,
+	      checkAll: showLength.length === localColumns.length
+	    };
+	  }, [localColumns]);
+	  React.useEffect(function () {
+	    setLocalColumns(columns);
+	    setColStateValue(ColumnsStateValue);
+	  }, []);
+	  var leftSensors = useSensors(useSensor(PointerSensor), useSensor(KeyboardSensor, {
+	    coordinateGetter: sortableKeyboardCoordinates
+	  }));
+	  var sensors = useSensors(useSensor(PointerSensor), useSensor(KeyboardSensor, {
+	    coordinateGetter: sortableKeyboardCoordinates
+	  }));
+	  var rightSensors = useSensors(useSensor(PointerSensor), useSensor(KeyboardSensor, {
+	    coordinateGetter: sortableKeyboardCoordinates
+	  }));
+	  /** 排序结束回调 */
+
+	  var handleDragEnd = function handleDragEnd(event) {
+	    var active = event.active,
+	        over = event.over;
+
+	    if (active.id !== over.id) {
+	      setLocalColumns(function (items) {
+	        var oldIndex = items.findIndex(function (s) {
+	          return s.dataIndex === active.id;
+	        });
+	        var newIndex = items.findIndex(function (s) {
+	          return s.dataIndex === over.id;
+	        });
+	        console.log(arrayMove(items, oldIndex, newIndex), 77);
+	        return arrayMove(items, oldIndex, newIndex).map(function (item, index) {
+	          return _objectSpread(_objectSpread({}, item), {}, {
+	            order: index
+	          });
+	        });
+	      });
+	    }
+	  };
+	  /** 取消固定 */
+
+
+	  var clearFiexd = function clearFiexd(id) {
+	    var resultColumns = localColumns.map(function (item) {
+	      if (item.dataIndex === id) {
+	        return _objectSpread(_objectSpread({}, item), {}, {
+	          fixed: undefined
+	        });
+	      }
+
+	      return _objectSpread({}, item);
+	    });
+	    setLocalColumns(resultColumns);
+	  };
+	  /** 添加是否显示 */
+
+
+	  var toggleShow = function toggleShow(value, id) {
+	    var resultColumns = localColumns.map(function (item) {
+	      if (item.dataIndex === id) {
+	        return _objectSpread(_objectSpread({}, item), {}, {
+	          show: item.show === false ? true : false
+	        });
+	      }
+
+	      return _objectSpread({}, item);
+	    });
+	    setLocalColumns(resultColumns);
+	  };
+	  /** 添加左右固定 */
+
+
+	  var addFiexd = function addFiexd(id, type) {
+	    var resultColumns = localColumns.map(function (item) {
+	      if (item.dataIndex === id) {
+	        return _objectSpread(_objectSpread({}, item), {}, {
+	          fixed: type
+	        });
+	      }
+
+	      return _objectSpread({}, item);
+	    });
+	    setLocalColumns(resultColumns);
+	  };
+	  /** 切换是否全选 */
+
+
+	  var onCheckAllChange = function onCheckAllChange() {
+	    var resultColumns = localColumns.map(function (item) {
+	      return _objectSpread(_objectSpread({}, item), {}, {
+	        show: isCheckAll.checkAll ? false : true
+	      });
+	    });
+	    setLocalColumns(resultColumns);
+	  };
+
+	  React.useImperativeHandle(ref, function () {
+	    return {
+	      getColumns: function getColumns() {
+	        return localColumns;
+	      },
+	      getColStateValue: function getColStateValue() {
+	        var obj = {};
+	        localColumns.forEach(function (item) {
+	          obj[item.dataIndex] = {};
+
+	          if (![undefined, null].includes(item.order)) {
+	            obj[item.dataIndex]['order'] = item.order;
+	          }
+
+	          if (![undefined, null].includes(item.order)) {
+	            obj[item.dataIndex]['show'] = item.show;
+	          }
+
+	          if (![undefined, null].includes(item.fixed)) {
+	            obj[item.dataIndex]['fixed'] = item.fixed;
+	          }
+	        });
+	        return obj;
+	      }
+	    };
+	  });
+	  return /*#__PURE__*/React__default['default'].createElement("div", {
+	    className: "lm_custom_option_columns"
+	  }, /*#__PURE__*/React__default['default'].createElement("div", {
+	    className: "global_setting"
+	  }, /*#__PURE__*/React__default['default'].createElement(linkmoreDesign.Checkbox, {
+	    indeterminate: isCheckAll.indeterminate,
+	    onChange: onCheckAllChange,
+	    checked: isCheckAll.checkAll
+	  }, "\u5168\u9009"), /*#__PURE__*/React__default['default'].createElement("span", {
+	    onClick: function onClick() {
+	      return setLocalColumns(columns);
+	    }
+	  }, "\u91CD\u7F6E")), !!((_sortMenu$leftSortIte = sortMenu.leftSortItem) === null || _sortMenu$leftSortIte === void 0 ? void 0 : _sortMenu$leftSortIte.length) && /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement("label", {
+	    className: "fixed_title"
+	  }, "\u56FA\u5B9A\u5728\u5DE6\u4FA7"), /*#__PURE__*/React__default['default'].createElement(DndContext, {
+	    sensors: leftSensors,
+	    collisionDetection: closestCenter,
+	    onDragEnd: handleDragEnd
+	  }, /*#__PURE__*/React__default['default'].createElement(SortableContext, {
+	    items: (_sortMenu$leftSortIte2 = sortMenu.leftSortItem) === null || _sortMenu$leftSortIte2 === void 0 ? void 0 : _sortMenu$leftSortIte2.map(function (v) {
+	      return "".concat(v.dataIndex);
+	    }),
+	    strategy: verticalListSortingStrategy
+	  }, sortMenu.leftSortItem.map(function (item) {
+	    return /*#__PURE__*/React__default['default'].createElement(SortItem, {
+	      key: item.dataIndex,
+	      item: item,
+	      toggleShow: toggleShow,
+	      clearFiexd: clearFiexd,
+	      id: item.dataIndex
+	    });
+	  })))), !!((_sortMenu$items = sortMenu.items) === null || _sortMenu$items === void 0 ? void 0 : _sortMenu$items.length) && /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement("label", {
+	    className: "fixed_title"
+	  }, " \u4E0D\u56FA\u5B9A "), /*#__PURE__*/React__default['default'].createElement(DndContext, {
+	    sensors: sensors,
+	    collisionDetection: closestCenter,
+	    onDragEnd: handleDragEnd
+	  }, /*#__PURE__*/React__default['default'].createElement(SortableContext, {
+	    items: (_sortMenu$items2 = sortMenu.items) === null || _sortMenu$items2 === void 0 ? void 0 : _sortMenu$items2.map(function (v) {
+	      return "".concat(v.dataIndex);
+	    }),
+	    strategy: verticalListSortingStrategy
+	  }, (_sortMenu$items3 = sortMenu.items) === null || _sortMenu$items3 === void 0 ? void 0 : _sortMenu$items3.map(function (item) {
+	    return /*#__PURE__*/React__default['default'].createElement(SortItem, {
+	      key: item.dataIndex,
+	      addFiexd: addFiexd,
+	      toggleShow: toggleShow,
+	      item: item,
+	      id: item.dataIndex
+	    });
+	  })))), !!((_sortMenu$rigthSortIt = sortMenu.rigthSortItem) === null || _sortMenu$rigthSortIt === void 0 ? void 0 : _sortMenu$rigthSortIt.length) && /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement("label", {
+	    className: "fixed_title"
+	  }, "\u56FA\u5B9A\u5728\u53F3\u4FA7"), /*#__PURE__*/React__default['default'].createElement(DndContext, {
+	    sensors: rightSensors,
+	    collisionDetection: closestCenter,
+	    onDragEnd: handleDragEnd
+	  }, /*#__PURE__*/React__default['default'].createElement(SortableContext, {
+	    items: (_sortMenu$rigthSortIt2 = sortMenu.rigthSortItem) === null || _sortMenu$rigthSortIt2 === void 0 ? void 0 : _sortMenu$rigthSortIt2.map(function (v) {
+	      return "".concat(v.dataIndex);
+	    }),
+	    strategy: verticalListSortingStrategy
+	  }, sortMenu.rigthSortItem.map(function (item) {
+	    return /*#__PURE__*/React__default['default'].createElement(SortItem, {
+	      key: item.dataIndex,
+	      toggleShow: toggleShow,
+	      clearFiexd: clearFiexd,
+	      item: item,
+	      id: item.dataIndex
+	    });
+	  })))));
+	});
+
+	var UNLLVALUE = [null, undefined];
+
+	var SortItem$1 = function SortItem(props) {
+	  var _props$item, _props$item2;
+
+	  var _useSortable = useSortable({
+	    id: "".concat(props.id)
+	  }),
+	      attributes = _useSortable.attributes,
+	      listeners = _useSortable.listeners,
+	      setNodeRef = _useSortable.setNodeRef,
+	      transform = _useSortable.transform,
+	      transition = _useSortable.transition;
+
+	  var style = {
+	    transform: CSS.Transform.toString(transform),
+	    transition: transition
+	  };
+	  return /*#__PURE__*/React__default['default'].createElement("div", _extends({
+	    ref: setNodeRef,
+	    className: "lm_custom_item",
+	    style: style
+	  }, attributes), /*#__PURE__*/React__default['default'].createElement(linkmoreDesign.Checkbox, {
+	    checked: ((_props$item = props.item) === null || _props$item === void 0 ? void 0 : _props$item.show) === false ? false : true,
+	    onChange: function onChange(e) {
+	      return props.toggleShow(e.target.checked, props.id);
+	    },
+	    className: "filter_item-content"
+	  }, (_props$item2 = props.item) === null || _props$item2 === void 0 ? void 0 : _props$item2.title), /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement(HolderOutlined$2, _extends({}, listeners, {
+	    className: "lm_custom_icon sort_item"
+	  }))));
+	};
+	/** order show fixed */
+
+
+	var FilterSort = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+	  var _ref$filter = _ref.filter,
+	      filter = _ref$filter === void 0 ? [] : _ref$filter,
+	      _ref$filterStateValue = _ref.filterStateValue,
+	      filterStateValue = _ref$filterStateValue === void 0 ? {} : _ref$filterStateValue;
+
+	  var _useState = React.useState([]),
+	      _useState2 = _slicedToArray(_useState, 2),
+	      localFilter = _useState2[0],
+	      setLocalFilter = _useState2[1];
+
+	  var _useState3 = React.useState({}),
+	      _useState4 = _slicedToArray(_useState3, 2),
+	      colStateValue = _useState4[0],
+	      setColStateValue = _useState4[1];
+
+	  var sortMenu = React.useMemo(function () {
+	    var cloneCol = lodash.cloneDeep(localFilter);
+	    cloneCol.forEach(function (item, index) {
+	      var _filterStateValue$ite, _filterStateValue$ite2;
+
+	      var order = (_filterStateValue$ite = filterStateValue[item.field]) === null || _filterStateValue$ite === void 0 ? void 0 : _filterStateValue$ite.order;
+	      item.order = order !== undefined && order !== null ? order : UNLLVALUE.includes(item.order) ? index : item.order;
+	      item.show = ((_filterStateValue$ite2 = filterStateValue[item.field]) === null || _filterStateValue$ite2 === void 0 ? void 0 : _filterStateValue$ite2.show) === false ? false : UNLLVALUE.includes(item.show) ? true : !!item.show;
+	    });
+	    return cloneCol;
+	  }, [localFilter, colStateValue]);
+	  var isCheckAll = React.useMemo(function () {
+	    var showLength = localFilter.filter(function (item) {
+	      return item.show !== false;
+	    });
+	    return {
+	      indeterminate: (showLength === null || showLength === void 0 ? void 0 : showLength.length) && showLength.length !== localFilter.length ? true : false,
+	      checkAll: showLength.length === localFilter.length
+	    };
+	  }, [localFilter]);
+	  React.useEffect(function () {
+	    console.log(localFilter, 'localFilter');
+	  }, [localFilter]);
+	  React.useEffect(function () {
+	    setLocalFilter(filter);
+	    setColStateValue(filterStateValue);
+	  }, []);
+	  var sensors = useSensors(useSensor(PointerSensor), useSensor(KeyboardSensor, {
+	    coordinateGetter: sortableKeyboardCoordinates
+	  }));
+	  /** 排序结束回调 */
+
+	  var handleDragEnd = function handleDragEnd(event) {
+	    var active = event.active,
+	        over = event.over;
+
+	    if (active.id !== over.id) {
+	      setLocalFilter(function (items) {
+	        var oldIndex = items.findIndex(function (s) {
+	          return s.field === active.id;
+	        });
+	        var newIndex = items.findIndex(function (s) {
+	          return s.field === over.id;
+	        });
+	        console.log(arrayMove(items, oldIndex, newIndex), 77);
+	        return arrayMove(items, oldIndex, newIndex).map(function (item, index) {
+	          return _objectSpread(_objectSpread({}, item), {}, {
+	            order: index
+	          });
+	        });
+	      });
+	    }
+	  };
+	  /** 添加是否显示 */
+
+
+	  var toggleShow = function toggleShow(value, id) {
+	    var resultColumns = localFilter.map(function (item) {
+	      if (item.field === id) {
+	        return _objectSpread(_objectSpread({}, item), {}, {
+	          show: item.show === false ? true : false
+	        });
+	      }
+
+	      return _objectSpread({}, item);
+	    });
+	    setLocalFilter(resultColumns);
+	  };
+	  /** 切换是否全选 */
+
+
+	  var onCheckAllChange = function onCheckAllChange() {
+	    var resultColumns = localFilter.map(function (item) {
+	      return _objectSpread(_objectSpread({}, item), {}, {
+	        show: isCheckAll.checkAll ? false : true
+	      });
+	    });
+	    console.log(resultColumns, 'resultColumns');
+	    setLocalFilter(resultColumns);
+	  };
+
+	  React.useImperativeHandle(ref, function () {
+	    return {
+	      getLocalFilter: function getLocalFilter() {
+	        return localFilter;
+	      },
+	      getFilterStateValue: function getFilterStateValue() {
+	        var obj = {};
+	        localFilter.forEach(function (item) {
+	          obj[item.field] = {};
+
+	          if (![undefined, null].includes(item.order)) {
+	            obj[item.field]['order'] = item.order;
+	          }
+
+	          if (![undefined, null].includes(item.order)) {
+	            obj[item.field]['show'] = item.show;
+	          }
+	        });
+	        return obj;
+	      }
+	    };
+	  });
+	  return /*#__PURE__*/React__default['default'].createElement("div", {
+	    className: "lm_custom_option_columns"
+	  }, /*#__PURE__*/React__default['default'].createElement("div", {
+	    className: "global_setting"
+	  }, /*#__PURE__*/React__default['default'].createElement(linkmoreDesign.Checkbox, {
+	    indeterminate: isCheckAll.indeterminate,
+	    onChange: onCheckAllChange,
+	    checked: isCheckAll.checkAll
+	  }, "\u5168\u9009"), /*#__PURE__*/React__default['default'].createElement("span", {
+	    onClick: function onClick() {
+	      return setLocalFilter(filter);
+	    }
+	  }, "\u91CD\u7F6E")), !!(sortMenu === null || sortMenu === void 0 ? void 0 : sortMenu.length) && /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(DndContext, {
+	    sensors: sensors,
+	    collisionDetection: closestCenter,
+	    onDragEnd: handleDragEnd
+	  }, /*#__PURE__*/React__default['default'].createElement(SortableContext, {
+	    items: sortMenu === null || sortMenu === void 0 ? void 0 : sortMenu.map(function (v) {
+	      return "".concat(v.field);
+	    }),
+	    strategy: verticalListSortingStrategy
+	  }, sortMenu === null || sortMenu === void 0 ? void 0 : sortMenu.map(function (item) {
+	    return /*#__PURE__*/React__default['default'].createElement(SortItem$1, {
+	      key: item.field,
+	      toggleShow: toggleShow,
+	      item: item,
+	      id: item.field
+	    });
+	  })))));
+	});
+
+	var TabPane$1 = linkmoreDesign.Tabs.TabPane;
+	var optionsWithDisabled = [{
+	  label: '紧凑型',
+	  value: 'small'
+	}, {
+	  label: '默认',
+	  value: 'default'
+	}, {
+	  label: '中等',
+	  value: 'middle'
+	}];
+	var prefixCls$9 = 'lm_custom-table-option';
+	var LMCustomTableOption = /*#__PURE__*/React.forwardRef(function (props, ref) {
+	  var className = props.className;
+	  var filterRef = React.useRef(null);
+	  var columnsRef = React.useRef(null); // const sizeRef = useRef(null)
+
+	  var _useState = React.useState(false),
+	      _useState2 = _slicedToArray(_useState, 2),
+	      visible = _useState2[0],
+	      setVisible = _useState2[1];
+
+	  var _useState3 = React.useState({
+	    filter: [],
+	    columns: [],
+	    size: 'small'
+	  }),
+	      _useState4 = _slicedToArray(_useState3, 2),
+	      lmOptions = _useState4[0],
+	      setLmOptions = _useState4[1];
+
+	  var openSetting = function openSetting() {
+	    setVisible(true);
+	  };
+
+	  React.useEffect(function () {
+	    setLmOptions({
+	      filter: props.filter,
+	      columns: props.columns,
+	      size: props.size
+	    });
+	  }, []);
+	  /** 提交按钮 */
+
+	  var onOk = function onOk() {
+	    var _columnsRef$current, _columnsRef$current2, _filterRef$current, _filterRef$current2, _props$onSave;
+
+	    /** tableInfo */
+	    var columnsData = (_columnsRef$current = columnsRef.current) === null || _columnsRef$current === void 0 ? void 0 : _columnsRef$current.getColumns();
+	    var ColStateValue = (_columnsRef$current2 = columnsRef.current) === null || _columnsRef$current2 === void 0 ? void 0 : _columnsRef$current2.getColStateValue();
+	    /** filterInfo */
+
+	    var filterData = (_filterRef$current = filterRef.current) === null || _filterRef$current === void 0 ? void 0 : _filterRef$current.getLocalFilter();
+	    var filterStateValue = (_filterRef$current2 = filterRef.current) === null || _filterRef$current2 === void 0 ? void 0 : _filterRef$current2.getFilterStateValue();
+	    console.log('--columnsData:', columnsData, ColStateValue, '--filterData:', filterData, filterStateValue, 'size:', lmOptions.size);
+	    (_props$onSave = props.onSave) === null || _props$onSave === void 0 ? void 0 : _props$onSave.call(props, {
+	      columnsData: columnsData,
+	      ColStateValue: ColStateValue,
+	      filterData: filterData,
+	      filterStateValue: filterStateValue,
+	      size: lmOptions.size
+	    });
+	  };
+
+	  return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(linkmoreDesign.IconFont, {
+	    type: "lmweb-setting",
+	    style: {
+	      fontSize: '20px'
+	    },
+	    onClick: openSetting
+	  }), /*#__PURE__*/React__default['default'].createElement(linkmoreDesign.Drawer, {
+	    className: classnames(className, prefixCls$9),
+	    title: "\u4E2A\u6027\u5316\u8BBE\u7F6E",
+	    visible: visible,
+	    extra: /*#__PURE__*/React__default['default'].createElement(linkmoreDesign.Space, null, /*#__PURE__*/React__default['default'].createElement(linkmoreDesign.Button, {
+	      size: "small",
+	      onClick: function onClick() {
+	        return setVisible(false);
+	      }
+	    }, "\u53D6\u6D88"), /*#__PURE__*/React__default['default'].createElement(linkmoreDesign.Button, {
+	      size: "small",
+	      onClick: onOk,
+	      type: "primary"
+	    }, "\u786E\u8BA4")),
+	    onClose: function onClose() {
+	      return setVisible(false);
+	    }
+	  }, /*#__PURE__*/React__default['default'].createElement(linkmoreDesign.Tabs, {
+	    defaultActiveKey: "1"
+	  }, /*#__PURE__*/React__default['default'].createElement(TabPane$1, {
+	    tab: "\u4E2A\u6027\u5316\u7B5B\u9009",
+	    key: "1"
+	  }, /*#__PURE__*/React__default['default'].createElement(FilterSort, {
+	    ref: filterRef,
+	    filter: lmOptions.filter
+	  })), /*#__PURE__*/React__default['default'].createElement(TabPane$1, {
+	    tab: "\u5217\u5B57\u6BB5\u8BBE\u7F6E",
+	    key: "2"
+	  }, /*#__PURE__*/React__default['default'].createElement(ColumnsSort, {
+	    ref: columnsRef,
+	    columns: lmOptions.columns
+	  })), /*#__PURE__*/React__default['default'].createElement(TabPane$1, {
+	    tab: "\u5176\u4ED6",
+	    key: "3"
+	  }, /*#__PURE__*/React__default['default'].createElement("div", null, "\u5217\u8868\u6837\u5F0F"), /*#__PURE__*/React__default['default'].createElement(linkmoreDesign.Radio.Group, {
+	    options: optionsWithDisabled,
+	    onChange: function onChange(e) {
+	      return setLmOptions(_objectSpread(_objectSpread({}, lmOptions), {}, {
+	        size: e.target.value
+	      }));
+	    },
+	    value: lmOptions.size
+	  })))));
+	});
+
 	Object.defineProperty(exports, 'Card', {
 		enumerable: true,
 		get: function () {
@@ -81131,6 +81754,7 @@
 	exports.ButtonTags = ButtonTags;
 	exports.Checkbox = LMCheckBox;
 	exports.CkFilter = Filter$1;
+	exports.CustomTableOption = LMCustomTableOption;
 	exports.CustomerService = CustomerService;
 	exports.Drawer = LMDrawer;
 	exports.Dropdown = LMDropdown;