@bit-sun/business-component 4.0.12-alpha.5 → 4.0.12-alpha.7

package/dist/index.esm.js

@@ -14265,15 +14265,117 @@ var ColumnSettingSulaTable = /*#__PURE__*/function (_React$Component) {
       var onResize = props.onResize,
         width = props.width,
         restProps = _objectWithoutProperties(props, _excluded$9);
-      if (!width) {
-        return /*#__PURE__*/React$1.createElement("th", _objectSpread2({}, restProps));
-      }
+      var _useState = useState(width),
+        _useState2 = _slicedToArray(_useState, 2),
+        innerWidth = _useState2[0],
+        setInnerWidth = _useState2[1];
+      var _useState3 = useState(false),
+        _useState4 = _slicedToArray(_useState3, 2),
+        isResizing = _useState4[0],
+        setIsResizing = _useState4[1]; // 标记是否正在拖拽
+      var _useState5 = useState(false),
+        _useState6 = _slicedToArray(_useState5, 2),
+        isDragging = _useState6[0],
+        setIsDragging = _useState6[1]; // 标记拖拽句柄是否被拖拽
+      var _useState7 = useState(0),
+        _useState8 = _slicedToArray(_useState7, 2),
+        startX = _useState8[0],
+        setStartX = _useState8[1]; // 初始X坐标
+      var markerPosition = useRef({
+        left: 0,
+        top: 0
+      });
+      var currentStart = useRef(0);
+      var uuidref = useRef(uuid());
+      var prevWidthRef = useRef(width);
+      var handleMouseDown = function handleMouseDown(e) {
+        currentStart.current = e.clientX;
+        markerPosition.current = {
+          left: e.clientX,
+          top: e.clientY
+        };
+        setIsResizing(true);
+        document.addEventListener('mousemove', handleMouseMove);
+        document.addEventListener('mouseup', _handleMouseUp);
+      };
+      var handleMouseMove = function handleMouseMove(e) {
+        e.stopPropagation();
+        e.preventDefault();
+        // 更新标记位置
+        markerPosition.current = {
+          left: e.clientX,
+          top: e.clientY
+        };
+        var dom = document.getElementById('text1');
+        if (dom && dom.style) {
+          dom.style.left = "".concat(e.clientX, "px");
+          dom.style.top = "".concat(e.clientY - 20, "px");
+        }
+      };
+      var _handleMouseUp = function handleMouseUp(e) {
+        document.removeEventListener('mousemove', handleMouseMove);
+        document.removeEventListener('mouseup', _handleMouseUp);
+        setIsResizing(false);
+      };
+      var handleresize = function handleresize(e, data, title) {
+        var _data$size;
+        var newWidth = (data === null || data === void 0 ? void 0 : (_data$size = data.size) === null || _data$size === void 0 ? void 0 : _data$size.width) || 0;
+        setInnerWidth(newWidth); // 更新内部分宽度
+      };
+      var handleResizeStart = function handleResizeStart() {
+        setIsResizing(true);
+      };
+      var handleResizeStop = function handleResizeStop(e, data) {
+        setIsResizing(false);
+        if (onResize) {
+          onResize(e, data);
+        }
+      };
+      useEffect(function () {
+        if (width !== prevWidthRef.current) {
+          prevWidthRef.current = width;
+          setInnerWidth(width);
+        }
+      }, [width]);
       return /*#__PURE__*/React$1.createElement(Resizable, {
-        width: width,
+        width: innerWidth,
         height: 0,
-        onResize: onResize,
+        handle: /*#__PURE__*/React$1.createElement("div", null, /*#__PURE__*/React$1.createElement("div", {
+          style: {
+            width: '10px',
+            height: '30px',
+            cursor: 'col-resize',
+            position: 'absolute',
+            zIndex: 10,
+            top: 0,
+            right: 0
+          },
+          onMouseDown: handleMouseDown
+        }), isResizing && /*#__PURE__*/React$1.createElement("div", {
+          id: "text1",
+          style: {
+            position: 'fixed',
+            left: markerPosition.current.left,
+            top: markerPosition.current.top - 20,
+            backgroundColor: '#1890ff',
+            color: 'white',
+            borderRadius: '4px',
+            zIndex: 9999,
+            pointerEvents: 'none',
+            height: '40px',
+            width: 2
+          }
+        })),
+        onResize: function onResize(e, data) {
+          handleresize(e, data, restProps.title);
+        },
+        onResizeStart: handleResizeStart,
+        onResizeStop: handleResizeStop,
         draggableOpts: {
-          enableUserSelectHack: false
+          enableUserSelectHack: true,
+          grid: [20, 20],
+          axis: 'x',
+          bounds: 'parent'
         }
       }, /*#__PURE__*/React$1.createElement("th", _objectSpread2({}, restProps)));
     };
@@ -14364,7 +14466,8 @@ var ColumnSettingSulaTable = /*#__PURE__*/function (_React$Component) {
           y: 400
         }, scroll), {}, {
           x: restProps.overScrollX || this.getTableScrollXWidth(showCol)
-        })
+        }),
+        sticky: true
       }, showSummary ? {
         summary: showSummary
       } : {});
@@ -16565,15 +16668,117 @@ var ResizeableTitle$2 = function ResizeableTitle(props) {
   var onResize = props.onResize,
     width = props.width,
     restProps = _objectWithoutProperties(props, _excluded$g);
-  if (!width) {
-    return /*#__PURE__*/React$1.createElement("th", _objectSpread2({}, restProps));
-  }
+  var _useState = useState(width),
+    _useState2 = _slicedToArray(_useState, 2),
+    innerWidth = _useState2[0],
+    setInnerWidth = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isResizing = _useState4[0],
+    setIsResizing = _useState4[1]; // 标记是否正在拖拽
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    isDragging = _useState6[0],
+    setIsDragging = _useState6[1]; // 标记拖拽句柄是否被拖拽
+  var _useState7 = useState(0),
+    _useState8 = _slicedToArray(_useState7, 2),
+    startX = _useState8[0],
+    setStartX = _useState8[1]; // 初始X坐标
+  var markerPosition = useRef({
+    left: 0,
+    top: 0
+  });
+  var currentStart = useRef(0);
+  var uuidref = useRef(uuid());
+  var prevWidthRef = useRef(width);
+  var handleMouseDown = function handleMouseDown(e) {
+    currentStart.current = e.clientX;
+    markerPosition.current = {
+      left: e.clientX,
+      top: e.clientY
+    };
+    setIsResizing(true);
+    document.addEventListener('mousemove', handleMouseMove);
+    document.addEventListener('mouseup', _handleMouseUp);
+  };
+  var handleMouseMove = function handleMouseMove(e) {
+    e.stopPropagation();
+    e.preventDefault();
+    // 更新标记位置
+    markerPosition.current = {
+      left: e.clientX,
+      top: e.clientY
+    };
+    var dom = document.getElementById('text1');
+    if (dom && dom.style) {
+      dom.style.left = "".concat(e.clientX, "px");
+      dom.style.top = "".concat(e.clientY - 20, "px");
+    }
+  };
+  var _handleMouseUp = function handleMouseUp(e) {
+    document.removeEventListener('mousemove', handleMouseMove);
+    document.removeEventListener('mouseup', _handleMouseUp);
+    setIsResizing(false);
+  };
+  var handleresize = function handleresize(e, data, title) {
+    var _data$size;
+    var newWidth = (data === null || data === void 0 ? void 0 : (_data$size = data.size) === null || _data$size === void 0 ? void 0 : _data$size.width) || 0;
+    setInnerWidth(newWidth); // 更新内部分宽度
+  };
+  var handleResizeStart = function handleResizeStart() {
+    setIsResizing(true);
+  };
+  var handleResizeStop = function handleResizeStop(e, data) {
+    setIsResizing(false);
+    if (onResize) {
+      onResize(e, data);
+    }
+  };
+  useEffect(function () {
+    if (width !== prevWidthRef.current) {
+      prevWidthRef.current = width;
+      setInnerWidth(width);
+    }
+  }, [width]);
   return /*#__PURE__*/React$1.createElement(Resizable, {
-    width: width,
+    width: innerWidth,
     height: 0,
-    onResize: onResize,
+    handle: /*#__PURE__*/React$1.createElement("div", null, /*#__PURE__*/React$1.createElement("div", {
+      style: {
+        width: '10px',
+        height: '30px',
+        cursor: 'col-resize',
+        position: 'absolute',
+        zIndex: 10,
+        top: 0,
+        right: 0
+      },
+      onMouseDown: handleMouseDown
+    }), isResizing && /*#__PURE__*/React$1.createElement("div", {
+      id: "text1",
+      style: {
+        position: 'fixed',
+        left: markerPosition.current.left,
+        top: markerPosition.current.top - 20,
+        backgroundColor: '#1890ff',
+        color: 'white',
+        borderRadius: '4px',
+        zIndex: 9999,
+        pointerEvents: 'none',
+        height: '40px',
+        width: 2
+      }
+    })),
+    onResize: function onResize(e, data) {
+      handleresize(e, data, restProps.title);
+    },
+    onResizeStart: handleResizeStart,
+    onResizeStop: handleResizeStop,
     draggableOpts: {
-      enableUserSelectHack: false
+      enableUserSelectHack: true,
+      grid: [20, 20],
+      axis: 'x',
+      bounds: 'parent'
     }
   }, /*#__PURE__*/React$1.createElement("th", _objectSpread2({}, restProps)));
 };
@@ -16654,39 +16859,39 @@ var BsSulaQueryTable = (function (props) {
     return _toConsumableArray(originConfig);
   };
   var refs = useRef(null);
-  var _useState = useState(''),
-    _useState2 = _slicedToArray(_useState, 2),
-    pagePath = _useState2[0],
-    setPagePath = _useState2[1];
+  var _useState9 = useState(''),
+    _useState10 = _slicedToArray(_useState9, 2),
+    pagePath = _useState10[0],
+    setPagePath = _useState10[1];
   var _useLocation = useLocation(),
     pathname = _useLocation.pathname,
     _useLocation$state = _useLocation.state,
     state = _useLocation$state === void 0 ? {} : _useLocation$state;
-  var _useState3 = useState(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    isFullScreen = _useState4[0],
-    setIsFnllScreen = _useState4[1];
+  var _useState11 = useState(false),
+    _useState12 = _slicedToArray(_useState11, 2),
+    isFullScreen = _useState12[0],
+    setIsFnllScreen = _useState12[1];
   // @ts-nocheck
   var value = props;
   var _props$fields = props.fields,
     fields = _props$fields === void 0 ? [] : _props$fields;
-  var _useState5 = useState([]),
-    _useState6 = _slicedToArray(_useState5, 2),
-    showColumn = _useState6[0],
-    setShowColumns = _useState6[1]; // 列字段
+  var _useState13 = useState([]),
+    _useState14 = _slicedToArray(_useState13, 2),
+    showColumn = _useState14[0],
+    setShowColumns = _useState14[1]; // 列字段
   var originSearchFields = getSettingFieldOrColumn(getConfigFromlocalstorage(ENUM.BROWSER_CACHE.SEARCH_FIELDS_CONDITION), fields, 'searchFields');
-  var _useState7 = useState(originSearchFields),
-    _useState8 = _slicedToArray(_useState7, 2),
-    showSearchFields = _useState8[0],
-    setShowSearchFields = _useState8[1]; //搜索项字段
-  var _useState9 = useState([]),
-    _useState10 = _slicedToArray(_useState9, 2),
-    showExportColumn = _useState10[0],
-    setShowExportColumns = _useState10[1]; // 导出列字段
-  var _useState11 = useState(''),
-    _useState12 = _slicedToArray(_useState11, 2),
-    height = _useState12[0],
-    setHeight = _useState12[1];
+  var _useState15 = useState(originSearchFields),
+    _useState16 = _slicedToArray(_useState15, 2),
+    showSearchFields = _useState16[0],
+    setShowSearchFields = _useState16[1]; //搜索项字段
+  var _useState17 = useState([]),
+    _useState18 = _slicedToArray(_useState17, 2),
+    showExportColumn = _useState18[0],
+    setShowExportColumns = _useState18[1]; // 导出列字段
+  var _useState19 = useState(''),
+    _useState20 = _slicedToArray(_useState19, 2),
+    height = _useState20[0],
+    setHeight = _useState20[1];
   var sortTableRef = useRef(null);
   var searchTableRef = useRef(null);
   var exportTableRef = useRef(null);

package/dist/index.js

@@ -14288,15 +14288,117 @@ var ColumnSettingSulaTable = /*#__PURE__*/function (_React$Component) {
       var onResize = props.onResize,
         width = props.width,
         restProps = _objectWithoutProperties(props, _excluded$9);
-      if (!width) {
-        return /*#__PURE__*/React__default['default'].createElement("th", _objectSpread2({}, restProps));
-      }
+      var _useState = React$1.useState(width),
+        _useState2 = _slicedToArray(_useState, 2),
+        innerWidth = _useState2[0],
+        setInnerWidth = _useState2[1];
+      var _useState3 = React$1.useState(false),
+        _useState4 = _slicedToArray(_useState3, 2),
+        isResizing = _useState4[0],
+        setIsResizing = _useState4[1]; // 标记是否正在拖拽
+      var _useState5 = React$1.useState(false),
+        _useState6 = _slicedToArray(_useState5, 2),
+        isDragging = _useState6[0],
+        setIsDragging = _useState6[1]; // 标记拖拽句柄是否被拖拽
+      var _useState7 = React$1.useState(0),
+        _useState8 = _slicedToArray(_useState7, 2),
+        startX = _useState8[0],
+        setStartX = _useState8[1]; // 初始X坐标
+      var markerPosition = React$1.useRef({
+        left: 0,
+        top: 0
+      });
+      var currentStart = React$1.useRef(0);
+      var uuidref = React$1.useRef(uuid());
+      var prevWidthRef = React$1.useRef(width);
+      var handleMouseDown = function handleMouseDown(e) {
+        currentStart.current = e.clientX;
+        markerPosition.current = {
+          left: e.clientX,
+          top: e.clientY
+        };
+        setIsResizing(true);
+        document.addEventListener('mousemove', handleMouseMove);
+        document.addEventListener('mouseup', _handleMouseUp);
+      };
+      var handleMouseMove = function handleMouseMove(e) {
+        e.stopPropagation();
+        e.preventDefault();
+        // 更新标记位置
+        markerPosition.current = {
+          left: e.clientX,
+          top: e.clientY
+        };
+        var dom = document.getElementById('text1');
+        if (dom && dom.style) {
+          dom.style.left = "".concat(e.clientX, "px");
+          dom.style.top = "".concat(e.clientY - 20, "px");
+        }
+      };
+      var _handleMouseUp = function handleMouseUp(e) {
+        document.removeEventListener('mousemove', handleMouseMove);
+        document.removeEventListener('mouseup', _handleMouseUp);
+        setIsResizing(false);
+      };
+      var handleresize = function handleresize(e, data, title) {
+        var _data$size;
+        var newWidth = (data === null || data === void 0 ? void 0 : (_data$size = data.size) === null || _data$size === void 0 ? void 0 : _data$size.width) || 0;
+        setInnerWidth(newWidth); // 更新内部分宽度
+      };
+      var handleResizeStart = function handleResizeStart() {
+        setIsResizing(true);
+      };
+      var handleResizeStop = function handleResizeStop(e, data) {
+        setIsResizing(false);
+        if (onResize) {
+          onResize(e, data);
+        }
+      };
+      React$1.useEffect(function () {
+        if (width !== prevWidthRef.current) {
+          prevWidthRef.current = width;
+          setInnerWidth(width);
+        }
+      }, [width]);
       return /*#__PURE__*/React__default['default'].createElement(reactResizable.Resizable, {
-        width: width,
+        width: innerWidth,
         height: 0,
-        onResize: onResize,
+        handle: /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement("div", {
+          style: {
+            width: '10px',
+            height: '30px',
+            cursor: 'col-resize',
+            position: 'absolute',
+            zIndex: 10,
+            top: 0,
+            right: 0
+          },
+          onMouseDown: handleMouseDown
+        }), isResizing && /*#__PURE__*/React__default['default'].createElement("div", {
+          id: "text1",
+          style: {
+            position: 'fixed',
+            left: markerPosition.current.left,
+            top: markerPosition.current.top - 20,
+            backgroundColor: '#1890ff',
+            color: 'white',
+            borderRadius: '4px',
+            zIndex: 9999,
+            pointerEvents: 'none',
+            height: '40px',
+            width: 2
+          }
+        })),
+        onResize: function onResize(e, data) {
+          handleresize(e, data, restProps.title);
+        },
+        onResizeStart: handleResizeStart,
+        onResizeStop: handleResizeStop,
         draggableOpts: {
-          enableUserSelectHack: false
+          enableUserSelectHack: true,
+          grid: [20, 20],
+          axis: 'x',
+          bounds: 'parent'
         }
       }, /*#__PURE__*/React__default['default'].createElement("th", _objectSpread2({}, restProps)));
     };
@@ -14387,7 +14489,8 @@ var ColumnSettingSulaTable = /*#__PURE__*/function (_React$Component) {
           y: 400
         }, scroll), {}, {
           x: restProps.overScrollX || this.getTableScrollXWidth(showCol)
-        })
+        }),
+        sticky: true
       }, showSummary ? {
         summary: showSummary
       } : {});
@@ -16588,15 +16691,117 @@ var ResizeableTitle$2 = function ResizeableTitle(props) {
   var onResize = props.onResize,
     width = props.width,
     restProps = _objectWithoutProperties(props, _excluded$g);
-  if (!width) {
-    return /*#__PURE__*/React__default['default'].createElement("th", _objectSpread2({}, restProps));
-  }
+  var _useState = React$1.useState(width),
+    _useState2 = _slicedToArray(_useState, 2),
+    innerWidth = _useState2[0],
+    setInnerWidth = _useState2[1];
+  var _useState3 = React$1.useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isResizing = _useState4[0],
+    setIsResizing = _useState4[1]; // 标记是否正在拖拽
+  var _useState5 = React$1.useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    isDragging = _useState6[0],
+    setIsDragging = _useState6[1]; // 标记拖拽句柄是否被拖拽
+  var _useState7 = React$1.useState(0),
+    _useState8 = _slicedToArray(_useState7, 2),
+    startX = _useState8[0],
+    setStartX = _useState8[1]; // 初始X坐标
+  var markerPosition = React$1.useRef({
+    left: 0,
+    top: 0
+  });
+  var currentStart = React$1.useRef(0);
+  var uuidref = React$1.useRef(uuid());
+  var prevWidthRef = React$1.useRef(width);
+  var handleMouseDown = function handleMouseDown(e) {
+    currentStart.current = e.clientX;
+    markerPosition.current = {
+      left: e.clientX,
+      top: e.clientY
+    };
+    setIsResizing(true);
+    document.addEventListener('mousemove', handleMouseMove);
+    document.addEventListener('mouseup', _handleMouseUp);
+  };
+  var handleMouseMove = function handleMouseMove(e) {
+    e.stopPropagation();
+    e.preventDefault();
+    // 更新标记位置
+    markerPosition.current = {
+      left: e.clientX,
+      top: e.clientY
+    };
+    var dom = document.getElementById('text1');
+    if (dom && dom.style) {
+      dom.style.left = "".concat(e.clientX, "px");
+      dom.style.top = "".concat(e.clientY - 20, "px");
+    }
+  };
+  var _handleMouseUp = function handleMouseUp(e) {
+    document.removeEventListener('mousemove', handleMouseMove);
+    document.removeEventListener('mouseup', _handleMouseUp);
+    setIsResizing(false);
+  };
+  var handleresize = function handleresize(e, data, title) {
+    var _data$size;
+    var newWidth = (data === null || data === void 0 ? void 0 : (_data$size = data.size) === null || _data$size === void 0 ? void 0 : _data$size.width) || 0;
+    setInnerWidth(newWidth); // 更新内部分宽度
+  };
+  var handleResizeStart = function handleResizeStart() {
+    setIsResizing(true);
+  };
+  var handleResizeStop = function handleResizeStop(e, data) {
+    setIsResizing(false);
+    if (onResize) {
+      onResize(e, data);
+    }
+  };
+  React$1.useEffect(function () {
+    if (width !== prevWidthRef.current) {
+      prevWidthRef.current = width;
+      setInnerWidth(width);
+    }
+  }, [width]);
   return /*#__PURE__*/React__default['default'].createElement(reactResizable.Resizable, {
-    width: width,
+    width: innerWidth,
     height: 0,
-    onResize: onResize,
+    handle: /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement("div", {
+      style: {
+        width: '10px',
+        height: '30px',
+        cursor: 'col-resize',
+        position: 'absolute',
+        zIndex: 10,
+        top: 0,
+        right: 0
+      },
+      onMouseDown: handleMouseDown
+    }), isResizing && /*#__PURE__*/React__default['default'].createElement("div", {
+      id: "text1",
+      style: {
+        position: 'fixed',
+        left: markerPosition.current.left,
+        top: markerPosition.current.top - 20,
+        backgroundColor: '#1890ff',
+        color: 'white',
+        borderRadius: '4px',
+        zIndex: 9999,
+        pointerEvents: 'none',
+        height: '40px',
+        width: 2
+      }
+    })),
+    onResize: function onResize(e, data) {
+      handleresize(e, data, restProps.title);
+    },
+    onResizeStart: handleResizeStart,
+    onResizeStop: handleResizeStop,
     draggableOpts: {
-      enableUserSelectHack: false
+      enableUserSelectHack: true,
+      grid: [20, 20],
+      axis: 'x',
+      bounds: 'parent'
     }
   }, /*#__PURE__*/React__default['default'].createElement("th", _objectSpread2({}, restProps)));
 };
@@ -16677,39 +16882,39 @@ var BsSulaQueryTable = (function (props) {
     return _toConsumableArray(originConfig);
   };
   var refs = React$1.useRef(null);
-  var _useState = React$1.useState(''),
-    _useState2 = _slicedToArray(_useState, 2),
-    pagePath = _useState2[0],
-    setPagePath = _useState2[1];
+  var _useState9 = React$1.useState(''),
+    _useState10 = _slicedToArray(_useState9, 2),
+    pagePath = _useState10[0],
+    setPagePath = _useState10[1];
   var _useLocation = umi.useLocation(),
     pathname = _useLocation.pathname,
     _useLocation$state = _useLocation.state,
     state = _useLocation$state === void 0 ? {} : _useLocation$state;
-  var _useState3 = React$1.useState(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    isFullScreen = _useState4[0],
-    setIsFnllScreen = _useState4[1];
+  var _useState11 = React$1.useState(false),
+    _useState12 = _slicedToArray(_useState11, 2),
+    isFullScreen = _useState12[0],
+    setIsFnllScreen = _useState12[1];
   // @ts-nocheck
   var value = props;
   var _props$fields = props.fields,
     fields = _props$fields === void 0 ? [] : _props$fields;
-  var _useState5 = React$1.useState([]),
-    _useState6 = _slicedToArray(_useState5, 2),
-    showColumn = _useState6[0],
-    setShowColumns = _useState6[1]; // 列字段
+  var _useState13 = React$1.useState([]),
+    _useState14 = _slicedToArray(_useState13, 2),
+    showColumn = _useState14[0],
+    setShowColumns = _useState14[1]; // 列字段
   var originSearchFields = getSettingFieldOrColumn(getConfigFromlocalstorage(ENUM.BROWSER_CACHE.SEARCH_FIELDS_CONDITION), fields, 'searchFields');
-  var _useState7 = React$1.useState(originSearchFields),
-    _useState8 = _slicedToArray(_useState7, 2),
-    showSearchFields = _useState8[0],
-    setShowSearchFields = _useState8[1]; //搜索项字段
-  var _useState9 = React$1.useState([]),
-    _useState10 = _slicedToArray(_useState9, 2),
-    showExportColumn = _useState10[0],
-    setShowExportColumns = _useState10[1]; // 导出列字段
-  var _useState11 = React$1.useState(''),
-    _useState12 = _slicedToArray(_useState11, 2),
-    height = _useState12[0],
-    setHeight = _useState12[1];
+  var _useState15 = React$1.useState(originSearchFields),
+    _useState16 = _slicedToArray(_useState15, 2),
+    showSearchFields = _useState16[0],
+    setShowSearchFields = _useState16[1]; //搜索项字段
+  var _useState17 = React$1.useState([]),
+    _useState18 = _slicedToArray(_useState17, 2),
+    showExportColumn = _useState18[0],
+    setShowExportColumns = _useState18[1]; // 导出列字段
+  var _useState19 = React$1.useState(''),
+    _useState20 = _slicedToArray(_useState19, 2),
+    height = _useState20[0],
+    setHeight = _useState20[1];
   var sortTableRef = React$1.useRef(null);
   var searchTableRef = React$1.useRef(null);
   var exportTableRef = React$1.useRef(null);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bit-sun/business-component",
-  "version": "4.0.12-alpha.5",
+  "version": "4.0.12-alpha.7",
   "scripts": {
     "start": "dumi dev",
     "docs:build": "dumi build",

package/src/components/Business/BsSulaQueryTable/index.md

@@ -23,6 +23,28 @@ import { BsSulaQueryTable } from '../../../index.ts';
 export default () => {
   const config = {
     needPageHeader: false,
+    remoteDataSource: {
+      url: `https://randomuser.me/api`,
+      method: 'GET',
+      convertParams({ params }) {
+    return {
+      results: params.pageSize,
+      ...params,
+    };
+  },
+  converter({ data }) {
+    return {
+      list: data.results.map((item, index) => {
+        return {
+          ...item,
+          id: `${index}`,
+          name: `${item.name.first} ${item.name.last}`,
+        };
+      }),
+      total: 100,
+    };
+  },
+    },
     summary: [{
       label: '总金额',
       count: 100
@@ -72,26 +94,97 @@ export default () => {
     ],
     columns: [
       {
-        dataIndex: 'code',
-        title: '应用编码',
-        tableHeadFilterKey: 'qp-code-eq',
-      },
-      {
-        dataIndex: 'operator',
-        title: '操作',
-        fixed: 'right',
-        render: [
-          {
-            type: 'link',
-            code: 'User_ApplicationList_edit',
-            props: {
-              type: 'primary',
-              children: '编辑',
-            },
-            visible: '#{record.status === 1}',
-            action: ['refreshTable'],
-          },
-        ],
+        key: 'id',
+        title: 'ID',
+      },
+      {
+        key: 'name',
+        title: '姓名',
+        width: 30,
+      },
+      {
+        key: 'nat',
+        title: '国家',
+      },
+      {
+        key: 'gender',
+        title: '性别',
+        render: ({ text }) => {
+          return text === 'male' ? '男' : '女';
+        },
+      },
+      {
+        key: 'email',
+        title: '邮箱',
+      },
+      {
+        key: 'id',
+        title: 'ID',
+      },
+      {
+        key: 'name',
+        title: '姓名',
+      },
+      {
+        key: 'nat',
+        title: '国家',
+      },
+      {
+        key: 'gender',
+        title: '性别',
+        render: ({ text }) => {
+          return text === 'male' ? '男' : '女';
+        },
+      },
+      {
+        key: 'email',
+        title: '邮箱',
+      },
+      {
+        key: 'id',
+        title: 'ID',
+      },
+      {
+        key: 'name',
+        title: '姓名',
+      },
+      {
+        key: 'nat',
+        title: '国家',
+      },
+      {
+        key: 'gender',
+        title: '性别',
+        render: ({ text }) => {
+          return text === 'male' ? '男' : '女';
+        },
+      },
+      {
+        key: 'email',
+        title: '邮箱',
+      },
+      {
+        key: 'id',
+        title: 'ID',
+      },
+      {
+        key: 'name',
+        title: '姓名',
+      },
+      {
+        key: 'nat',
+        title: '国家',
+      },
+      {
+        key: 'gender',
+        title: '性别',
+        render: ({ text }) => {
+          return text === 'male' ? '男' : '女';
+        },
+      },
+      {
+        key: 'email',
+        title: '邮箱',
       },
     ],
     rowKey: 'id',

package/src/components/Business/BsSulaQueryTable/index.tsx

@@ -41,18 +41,120 @@ interface Field {
 const MemoQueryTable = React.memo(QueryTable);
 const { Text } = Typography;
 
-const ResizeableTitle = (props) => {
+const ResizeableTitle = (props: any) => {
   const { onResize, width, ...restProps } = props;
+  
+  const [innerWidth, setInnerWidth] = useState(width);
+  const [isResizing, setIsResizing] = useState(false); // 标记是否正在拖拽
+  const [isDragging, setIsDragging] = useState(false); // 标记拖拽句柄是否被拖拽
+  const [startX, setStartX] = useState(0); // 初始X坐标
+  const markerPosition = useRef({ left: 0, top: 0 });
+  const currentStart = useRef(0);
+  const uuidref = useRef(uuid());
+  
+  const prevWidthRef = useRef(width);
+
+  const handleMouseDown = (e: any) => {
+    currentStart.current = e.clientX;
+    markerPosition.current = { left: e.clientX, top: e.clientY }
+    setIsResizing(true);
+    document.addEventListener('mousemove', handleMouseMove);
+    document.addEventListener('mouseup', handleMouseUp);
+  };
+
+  const handleMouseMove = (e: any) => {
+    e.stopPropagation();
+    e.preventDefault();
+    // 更新标记位置
+    markerPosition.current = { left: e.clientX, top: e.clientY }
+    const dom: HTMLElement | null =  document.getElementById('text1');
+
+    if (dom && dom.style) {
+      dom.style.left = `${e.clientX}px`;
+      dom.style.top = `${e.clientY - 20}px`;
+    }
+  };
+
+  const handleMouseUp = (e: any) => {
+    document.removeEventListener('mousemove', handleMouseMove);
+    document.removeEventListener('mouseup', handleMouseUp);
+    setIsResizing(false);
+  };
+  
+  const handleresize = (e: any, data: any, title: string) => {
+    const newWidth = data?.size?.width || 0;
+    setInnerWidth(newWidth); // 更新内部分宽度
+  };
+
+  const handleResizeStart = () => {
+    setIsResizing(true);
+  };
+
+  const handleResizeStop = (e: any, data: any) => {
+    setIsResizing(false);
+    if (onResize) {
+      onResize(e, data);
+    }
+  };
+
+  useEffect(() => {
+    if (width !== prevWidthRef.current) {
+      prevWidthRef.current = width;
+      setInnerWidth(width);
+    }
+  }, [width]);
+
+  const thStyle = {
+    boxShadow: isResizing ? '2px 2px 10px rgba(0, 0, 0, 0.3)' : 'none',
+  };
 
-  if (!width) {
-    return <th {...restProps} />;
-  }
   return (
     <Resizable
-      width={width}
+      width={innerWidth}
       height={0}
-      onResize={onResize}
-      draggableOpts={{ enableUserSelectHack: false }}
+      handle={
+        <div>
+          <div
+        style={{
+          width: '10px',
+          height: '30px',
+          cursor: 'col-resize', // 拖动时改变鼠标样式
+          position: 'absolute',
+          zIndex: 10,
+          top: 0,
+          right: 0,
+        }}
+        onMouseDown={handleMouseDown}
+        // onDrag={handleDrag}
+      >
+      </div>
+      {isResizing && <div
+          id="text1"
+          style={{
+            position: 'fixed',
+            left: markerPosition.current.left, // 跟随鼠标偏移一点
+            top: markerPosition.current.top - 20,
+            backgroundColor: '#1890ff',
+            color: 'white',
+            borderRadius: '4px',
+            zIndex: 9999,
+            pointerEvents: 'none',
+            height: '40px',
+            width: 2
+          }}
+        >
+        </div>}
+        </div>
+      }
+      onResize={(e: any, data: any) => {handleresize(e, data, restProps.title)}}
+      onResizeStart={handleResizeStart}
+      onResizeStop={handleResizeStop}
+      draggableOpts={{
+        enableUserSelectHack: true,
+        grid: [20, 20],
+        axis: 'x',
+        bounds: 'parent',
+      }}
     >
       <th {...restProps} />
     </Resizable>

package/src/components/Business/columnSettingTable/index.md

@@ -111,7 +111,7 @@ export default () => {
       x: '100%',
     },
     rowKey: 'id',
-    dataSource: [{}, {}],
+    dataSource: [{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{}],
     pagination: {
       showTotal: (total: any) => `共 ${total} 条`,
       showQuickJumper: true,
@@ -291,17 +291,14 @@ export default () => {
     ]
   const config = {
     modeType: 'view',
-    scroll: {
-      x: '100%',
-    },
     rowKey: 'id',
     // initialDataSource: [{}, {}],
     remoteDataSource: {
       url: 'xxxxxx',
       converter: ({ data }: any) => {
         return {
-          list: [{},{}],
-          total: 2
+          list: [{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{}],
+          total: 40
         };
       },
     },
@@ -310,8 +307,8 @@ export default () => {
       showQuickJumper: true,
       hideOnSinglePage: true,
       current: 1,
-      pageSize: 10,
-      total: 10,
+      pageSize: 30,
+      total: 40,
       size: 'small'
     },
     rowSelection: {

package/src/components/Business/columnSettingTable/sulaSettingTable.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Table as SulaTable, request } from 'bssula';
 import { Resizable } from 'react-resizable';
 import ColumnSetting from './columnSetting';
@@ -9,8 +9,9 @@ import {
   Typography,
 } from 'antd';
 import ENUM from '@/utils/enumConfig';
-import { handleBssulaColumnsSpecialParams, parseWidth } from '@/utils/utils';
+import { handleBssulaColumnsSpecialParams, parseWidth, uuid } from '@/utils/utils';
 const { Text } = Typography;
+
 export default class ColumnSettingSulaTable extends React.Component {
   sulaTableRef: React.RefObject<unknown>;
   state: any;
@@ -126,21 +127,123 @@ export default class ColumnSettingSulaTable extends React.Component {
 
   ResizeableTitle = (props: any) => {
     const { onResize, width, ...restProps } = props;
-
-    if (!width) {
-      return <th {...restProps} />;
-    }
+    
+    const [innerWidth, setInnerWidth] = useState(width);
+    const [isResizing, setIsResizing] = useState(false); // 标记是否正在拖拽
+    const [isDragging, setIsDragging] = useState(false); // 标记拖拽句柄是否被拖拽
+    const [startX, setStartX] = useState(0); // 初始X坐标
+    const markerPosition = useRef({ left: 0, top: 0 });
+    const currentStart = useRef(0);
+    const uuidref = useRef(uuid());
+    
+    const prevWidthRef = useRef(width);
+  
+    const handleMouseDown = (e: any) => {
+      currentStart.current = e.clientX;
+      markerPosition.current = { left: e.clientX, top: e.clientY }
+      setIsResizing(true);
+      document.addEventListener('mousemove', handleMouseMove);
+      document.addEventListener('mouseup', handleMouseUp);
+    };
+  
+    const handleMouseMove = (e: any) => {
+      e.stopPropagation();
+      e.preventDefault();
+      // 更新标记位置
+      markerPosition.current = { left: e.clientX, top: e.clientY }
+      const dom: HTMLElement | null =  document.getElementById('text1');
+  
+      if (dom && dom.style) {
+        dom.style.left = `${e.clientX}px`;
+        dom.style.top = `${e.clientY - 20}px`;
+      }
+    };
+  
+    const handleMouseUp = (e: any) => {
+      document.removeEventListener('mousemove', handleMouseMove);
+      document.removeEventListener('mouseup', handleMouseUp);
+      setIsResizing(false);
+    };
+    
+    const handleresize = (e: any, data: any, title: string) => {
+      const newWidth = data?.size?.width || 0;
+      setInnerWidth(newWidth); // 更新内部分宽度
+    };
+  
+    const handleResizeStart = () => {
+      setIsResizing(true);
+    };
+  
+    const handleResizeStop = (e: any, data: any) => {
+      setIsResizing(false);
+      if (onResize) {
+        onResize(e, data);
+      }
+    };
+  
+    useEffect(() => {
+      if (width !== prevWidthRef.current) {
+        prevWidthRef.current = width;
+        setInnerWidth(width);
+      }
+    }, [width]);
+  
+    const thStyle = {
+      boxShadow: isResizing ? '2px 2px 10px rgba(0, 0, 0, 0.3)' : 'none',
+    };
+  
     return (
       <Resizable
-        width={width}
+        width={innerWidth}
         height={0}
-        onResize={onResize}
-        draggableOpts={{ enableUserSelectHack: false }}
+        handle={
+          <div>
+            <div
+          style={{
+            width: '10px',
+            height: '30px',
+            cursor: 'col-resize', // 拖动时改变鼠标样式
+            position: 'absolute',
+            zIndex: 10,
+            top: 0,
+            right: 0,
+          }}
+          onMouseDown={handleMouseDown}
+          // onDrag={handleDrag}
+        >
+        </div>
+        {isResizing && <div
+            id="text1"
+            style={{
+              position: 'fixed',
+              left: markerPosition.current.left, // 跟随鼠标偏移一点
+              top: markerPosition.current.top - 20,
+              backgroundColor: '#1890ff',
+              color: 'white',
+              borderRadius: '4px',
+              zIndex: 9999,
+              pointerEvents: 'none',
+              height: '40px',
+              width: 2
+            }}
+          >
+          </div>}
+          </div>
+        }
+        onResize={(e: any, data: any) => {handleresize(e, data, restProps.title)}}
+        onResizeStart={handleResizeStart}
+        onResizeStop={handleResizeStop}
+        draggableOpts={{
+          enableUserSelectHack: true,
+          grid: [20, 20],
+          axis: 'x',
+          bounds: 'parent',
+        }}
       >
         <th {...restProps} />
       </Resizable>
     );
-  }
+  };
 
   getTableScrollXWidth = (cols: any[]) => {
     if (cols.every((item: any) => item.width)) {
@@ -197,6 +300,7 @@ export default class ColumnSettingSulaTable extends React.Component {
         ...scroll,
         x: restProps.overScrollX || this.getTableScrollXWidth(showCol)
       },
+      sticky: true,
       ...(
         showSummary ? { summary: showSummary } : {}
       )