@bit-sun/business-component 4.0.12-alpha.4 → 4.0.12-alpha.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.esm.js +243 -38
- package/dist/index.js +243 -38
- package/package.json +1 -1
- package/src/components/Business/BsSulaQueryTable/index.md +113 -20
- package/src/components/Business/BsSulaQueryTable/index.tsx +109 -7
- package/src/components/Business/columnSettingTable/index.md +5 -8
- package/src/components/Business/columnSettingTable/sulaSettingTable.tsx +114 -10
- package/src/components/Functional/SearchSelect/index.less +7 -1
package/dist/index.esm.js
CHANGED
|
@@ -4075,7 +4075,7 @@ function ToCDB(str) {
|
|
|
4075
4075
|
return tmp;
|
|
4076
4076
|
}
|
|
4077
4077
|
|
|
4078
|
-
var css_248z$5 = ".search_select_show {\n display: flex;\n}\n.search_select_show .ant-select-clear {\n right: 33px;\n}\n.search_select_expand_button {\n position: relative;\n right: -11px;\n width: 30px;\n border-left: 1px solid #d9d9d9;\n height: 24px;\n cursor: pointer;\n font-size: 14px;\n font-weight: bolder;\n
|
|
4078
|
+
var css_248z$5 = ".search_select_show {\n display: flex;\n}\n.search_select_show .ant-select-clear {\n right: 33px;\n}\n.search_select_show .ant-select-multiple.ant-select-show-arrow .ant-select-selector,\n.search_select_show .ant-select-multiple.ant-select-allow-clear .ant-select-selector {\n padding-right: 28px;\n}\n.search_select_expand_button {\n position: relative;\n right: -11px;\n width: 30px;\n border-left: 1px solid #d9d9d9;\n height: 24px;\n cursor: pointer;\n font-size: 14px;\n font-weight: bolder;\n}\n.search_select_expand_button span {\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n}\n.search_select_expand_button:hover {\n background-color: #005cff;\n color: #fff;\n border-top-right-radius: 2px;\n border-bottom-right-radius: 2px;\n}\n.search_select_expand_button_disabled:hover {\n background-color: transparent;\n color: rgba(0, 0, 0, 0.25);\n cursor: not-allowed;\n}\n.search_select_dropdown_table .ant-table-cell .ant-table-selection-column .ant-radio,\n.search_select_dropdown_table table tr td.ant-table-selection-column .ant-radio-wrapper {\n display: none;\n}\n.search_select_dropdown_table .ant-table.ant-table-bordered > .ant-table-container > .ant-table-header > table {\n font-family: MiSans-Regular;\n font-weight: 400;\n font-size: 12px;\n}\n.search_select_dropdown_table .ant-table.ant-table-bordered > .ant-table-container > .ant-table-header > table thead > tr > th {\n color: #7F7F7F;\n}\n.search_select_dropdown_table .ant-table.ant-table-bordered > .ant-table-container > .ant-table-header > table .ant-table-thead .ant-table-selection .ant-checkbox-wrapper {\n justify-content: center;\n}\n.search_select_dropdown_table .ant-table.ant-table-bordered > .ant-table-container > .ant-table-header > table tbody > tr > td {\n color: #333333;\n}\n.search_select_dropdown_table1 .ant-table.ant-table-bordered > .ant-table-container .ant-table-body > table > tbody > tr > td.ant-table-selection-column,\n.search_select_dropdown_table1 .ant-table.ant-table-bordered > .ant-table-container .ant-table-header > table > thead > tr > th.ant-table-selection-column {\n display: none;\n}\n.search_select_modal_wrapper .ant-modal {\n top: 60px;\n}\n.search_select_modal_wrapper .ant-modal-header {\n padding: 6px 0px 6px 16px;\n}\n.search_select_modal_wrapper .ant-modal-header .ant-modal-title {\n height: 20px;\n color: #000000;\n line-height: 20px;\n}\n.search_select_modal_wrapper .ant-modal-close-x {\n width: 32px;\n height: 32px;\n line-height: 32px;\n}\n.search_select_modal_wrapper .ant-modal-body {\n padding: 0px;\n background: #F3F3F3;\n height: calc(100vh - 235px);\n overflow: hidden;\n}\n.search_select_modal_wrapper .ant-modal-footer .ant-btn.ant-btn-default {\n color: #005cff;\n border-color: #005cff;\n}\n.search_select_modal_wrapper .ant-modal-footer .ant-btn-primary,\n.search_select_modal_wrapper .ant-modal-footer .ant-btn-primary[disabled] {\n background: #005cff;\n border-color: #005cff;\n}\n.search_select_modal_wrapper .ant-modal-footer .ant-btn-primary[disabled] {\n opacity: 0.5;\n color: #fff;\n}\n.search_select_wrapper {\n position: relative;\n font-size: 14px;\n}\n.search_select_wrapper_topForm .select_list_columns {\n width: 100%;\n padding: 10px 6px 2px 16px;\n background-color: #fff;\n}\n.search_select_wrapper_topForm .select_list_columns .ant-form {\n padding: 0;\n overflow: hidden;\n display: flex;\n align-items: flex-start;\n}\n.search_select_wrapper_topForm .select_list_columns .ant-form .ant-row .ant-form-item,\n.search_select_wrapper_topForm .select_list_columns .ant-form .ant-row .ant-col .ant-space {\n font-size: 12px !important;\n margin-right: 0px !important;\n margin-bottom: 8px !important;\n}\n.search_select_wrapper_topForm .select_list_columns .ant-form .ant-row.ant-form-item-row {\n background-color: #fafafa;\n border: 0.8px solid #D9D9D9;\n border-radius: 2px;\n font-size: 12px;\n}\n.search_select_wrapper_topForm .select_list_columns .ant-form .ant-row {\n width: 100%;\n}\n.search_select_wrapper_topForm .select_list_columns .ant-form .ant-row .ant-form-item-label {\n width: 110px;\n order: 1;\n}\n.search_select_wrapper_topForm .select_list_columns .ant-form .ant-row .ant-form-item-label label {\n width: 100%;\n text-align: left;\n padding: 0 10px;\n color: #333333;\n font-size: 12px;\n font-family: PingFangSC-Regular;\n font-weight: 400;\n}\n.search_select_wrapper_topForm .select_list_columns .ant-form .ant-row .ant-form-item-control {\n order: 2;\n width: 100px;\n}\n.search_select_wrapper_topForm .select_list_columns .ant-form .ant-row .ant-form-item-control .ant-input-affix-wrapper {\n border: 0;\n font-size: 12px;\n background-color: #fafafa;\n padding: 0 11px;\n height: 24px;\n}\n.search_select_wrapper_topForm .select_list_columns .ant-form .ant-row .ant-form-item-control .ant-input-affix-wrapper .ant-input {\n background-color: #fafafa !important;\n border: 0;\n font-size: 12px;\n}\n.search_select_wrapper_topForm .select_list_columns .ant-form .ant-row .ant-form-item-control .ant-select-selector {\n border: 0 !important;\n background-color: #fafafa !important;\n font-size: 12px;\n}\n.search_select_wrapper_topForm .select_list_columns .ant-form .ant-row .ant-form-item-control .query_input .ant-input {\n background-color: #fafafa !important;\n border: 0;\n font-size: 12px;\n}\n.search_select_wrapper_topForm .select_list_columns .ant-form .ant-btn-primary {\n background: #005cff;\n}\n.search_select_wrapper_topForm .select_list_columns .ant-form > .ant-row > .ant-col {\n order: 2;\n padding-right: 10px;\n}\n.search_select_wrapper_topForm .select_list_button_space {\n margin-right: 10px;\n}\n.search_select_wrapper_bottomTable {\n margin: 10px;\n display: flex;\n justify-content: space-between;\n}\n.search_select_wrapper_bottomTable_wrapLeft1,\n.search_select_wrapper_bottomTable_wrapLeft2,\n.search_select_wrapper_bottomTable_wrapRight {\n background: #fff;\n width: calc(50% - 5px);\n}\n.search_select_wrapper_bottomTable_wrapLeft1 {\n width: 100%;\n}\n.search_select_wrapper_bottomTable_wrapRight {\n margin-left: 10px;\n}\n.search_select_wrapper_bottomTable .ant-tabs-nav {\n margin: 0;\n padding: 6px 18.5px;\n}\n.search_select_wrapper_bottomTable .ant-tabs-nav .ant-tabs-nav-wrap {\n height: 28px;\n font-size: 14px;\n}\n.search_select_wrapper_bottomTable .ant-tabs-nav .ant-tabs-tab {\n padding: 4px 0;\n}\n.search_select_wrapper_bottomTable .ant-tabs-nav .ant-tabs-ink-bar {\n left: 3px !important;\n width: 40px !important;\n background: #005cff;\n}\n.search_select_wrapper_bottomTable .ant-tabs-nav .ant-tabs-extra-content > span {\n color: #005cff;\n cursor: pointer;\n}\n.search_select_wrapper_bottomTable .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {\n color: #005cff;\n}\n.search_select_wrapper_bottomTable .ant-tabs-content-holder {\n padding: 10px 10px 7px;\n}\n.search_select_wrapper_bottomTable .ant-tabs-content-holder .ant-tabs-content .ant-table-wrapper .ant-table .ant-table-container .ant-table-content .ant-table-thead > tr > th {\n color: #7F7F7F;\n}\n.search_select_wrapper_bottomTable .ant-tabs-content-holder .ant-tabs-content .ant-table-wrapper .ant-table .ant-table-container .ant-table-content .ant-table-thead .ant-table-selection .ant-checkbox-wrapper {\n justify-content: center;\n}\n.search_select_wrapper_bottomTable .ant-tabs-content-holder .ant-tabs-content .ant-table-wrapper .ant-table .ant-table-container .ant-table-content .ant-table.ant-table-small .ant-table-tbody > tr > td {\n color: #333333;\n}\n.search_select_wrapper_bottomTable .ant-checkbox-checked .ant-checkbox-inner {\n color: #005cff;\n background: #005cff;\n}\n.search_select_wrapper_bottomTable .ant-pagination-item-active a {\n color: #005cff;\n}\n.search_select_wrapper_bottomTable .ant-pagination-item-active {\n border-color: #005cff;\n}\n.searchSelectSpin > div {\n height: 300px !important;\n}\n";
|
|
4079
4079
|
styleInject(css_248z$5);
|
|
4080
4080
|
|
|
4081
4081
|
var columnsPerRow = 4; // 每行的列数
|
|
@@ -14265,15 +14265,117 @@ var ColumnSettingSulaTable = /*#__PURE__*/function (_React$Component) {
|
|
|
14265
14265
|
var onResize = props.onResize,
|
|
14266
14266
|
width = props.width,
|
|
14267
14267
|
restProps = _objectWithoutProperties(props, _excluded$9);
|
|
14268
|
-
|
|
14269
|
-
|
|
14270
|
-
|
|
14268
|
+
var _useState = useState(width),
|
|
14269
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
14270
|
+
innerWidth = _useState2[0],
|
|
14271
|
+
setInnerWidth = _useState2[1];
|
|
14272
|
+
var _useState3 = useState(false),
|
|
14273
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
14274
|
+
isResizing = _useState4[0],
|
|
14275
|
+
setIsResizing = _useState4[1]; // 标记是否正在拖拽
|
|
14276
|
+
var _useState5 = useState(false),
|
|
14277
|
+
_useState6 = _slicedToArray(_useState5, 2),
|
|
14278
|
+
isDragging = _useState6[0],
|
|
14279
|
+
setIsDragging = _useState6[1]; // 标记拖拽句柄是否被拖拽
|
|
14280
|
+
var _useState7 = useState(0),
|
|
14281
|
+
_useState8 = _slicedToArray(_useState7, 2),
|
|
14282
|
+
startX = _useState8[0],
|
|
14283
|
+
setStartX = _useState8[1]; // 初始X坐标
|
|
14284
|
+
var markerPosition = useRef({
|
|
14285
|
+
left: 0,
|
|
14286
|
+
top: 0
|
|
14287
|
+
});
|
|
14288
|
+
var currentStart = useRef(0);
|
|
14289
|
+
var uuidref = useRef(uuid());
|
|
14290
|
+
var prevWidthRef = useRef(width);
|
|
14291
|
+
var handleMouseDown = function handleMouseDown(e) {
|
|
14292
|
+
currentStart.current = e.clientX;
|
|
14293
|
+
markerPosition.current = {
|
|
14294
|
+
left: e.clientX,
|
|
14295
|
+
top: e.clientY
|
|
14296
|
+
};
|
|
14297
|
+
setIsResizing(true);
|
|
14298
|
+
document.addEventListener('mousemove', handleMouseMove);
|
|
14299
|
+
document.addEventListener('mouseup', _handleMouseUp);
|
|
14300
|
+
};
|
|
14301
|
+
var handleMouseMove = function handleMouseMove(e) {
|
|
14302
|
+
e.stopPropagation();
|
|
14303
|
+
e.preventDefault();
|
|
14304
|
+
// 更新标记位置
|
|
14305
|
+
markerPosition.current = {
|
|
14306
|
+
left: e.clientX,
|
|
14307
|
+
top: e.clientY
|
|
14308
|
+
};
|
|
14309
|
+
var dom = document.getElementById('text1');
|
|
14310
|
+
if (dom && dom.style) {
|
|
14311
|
+
dom.style.left = "".concat(e.clientX, "px");
|
|
14312
|
+
dom.style.top = "".concat(e.clientY - 20, "px");
|
|
14313
|
+
}
|
|
14314
|
+
};
|
|
14315
|
+
var _handleMouseUp = function handleMouseUp(e) {
|
|
14316
|
+
document.removeEventListener('mousemove', handleMouseMove);
|
|
14317
|
+
document.removeEventListener('mouseup', _handleMouseUp);
|
|
14318
|
+
setIsResizing(false);
|
|
14319
|
+
};
|
|
14320
|
+
var handleresize = function handleresize(e, data, title) {
|
|
14321
|
+
var _data$size;
|
|
14322
|
+
var newWidth = (data === null || data === void 0 ? void 0 : (_data$size = data.size) === null || _data$size === void 0 ? void 0 : _data$size.width) || 0;
|
|
14323
|
+
setInnerWidth(newWidth); // 更新内部分宽度
|
|
14324
|
+
};
|
|
14325
|
+
var handleResizeStart = function handleResizeStart() {
|
|
14326
|
+
setIsResizing(true);
|
|
14327
|
+
};
|
|
14328
|
+
var handleResizeStop = function handleResizeStop(e, data) {
|
|
14329
|
+
setIsResizing(false);
|
|
14330
|
+
if (onResize) {
|
|
14331
|
+
onResize(e, data);
|
|
14332
|
+
}
|
|
14333
|
+
};
|
|
14334
|
+
useEffect(function () {
|
|
14335
|
+
if (width !== prevWidthRef.current) {
|
|
14336
|
+
prevWidthRef.current = width;
|
|
14337
|
+
setInnerWidth(width);
|
|
14338
|
+
}
|
|
14339
|
+
}, [width]);
|
|
14271
14340
|
return /*#__PURE__*/React$1.createElement(Resizable, {
|
|
14272
|
-
width:
|
|
14341
|
+
width: innerWidth,
|
|
14273
14342
|
height: 0,
|
|
14274
|
-
|
|
14343
|
+
handle: /*#__PURE__*/React$1.createElement("div", null, /*#__PURE__*/React$1.createElement("div", {
|
|
14344
|
+
style: {
|
|
14345
|
+
width: '10px',
|
|
14346
|
+
height: '30px',
|
|
14347
|
+
cursor: 'col-resize',
|
|
14348
|
+
position: 'absolute',
|
|
14349
|
+
zIndex: 10,
|
|
14350
|
+
top: 0,
|
|
14351
|
+
right: 0
|
|
14352
|
+
},
|
|
14353
|
+
onMouseDown: handleMouseDown
|
|
14354
|
+
}), isResizing && /*#__PURE__*/React$1.createElement("div", {
|
|
14355
|
+
id: "text1",
|
|
14356
|
+
style: {
|
|
14357
|
+
position: 'fixed',
|
|
14358
|
+
left: markerPosition.current.left,
|
|
14359
|
+
top: markerPosition.current.top - 20,
|
|
14360
|
+
backgroundColor: '#1890ff',
|
|
14361
|
+
color: 'white',
|
|
14362
|
+
borderRadius: '4px',
|
|
14363
|
+
zIndex: 9999,
|
|
14364
|
+
pointerEvents: 'none',
|
|
14365
|
+
height: '100px',
|
|
14366
|
+
width: 2
|
|
14367
|
+
}
|
|
14368
|
+
})),
|
|
14369
|
+
onResize: function onResize(e, data) {
|
|
14370
|
+
handleresize(e, data, restProps.title);
|
|
14371
|
+
},
|
|
14372
|
+
onResizeStart: handleResizeStart,
|
|
14373
|
+
onResizeStop: handleResizeStop,
|
|
14275
14374
|
draggableOpts: {
|
|
14276
|
-
enableUserSelectHack:
|
|
14375
|
+
enableUserSelectHack: true,
|
|
14376
|
+
grid: [20, 20],
|
|
14377
|
+
axis: 'x',
|
|
14378
|
+
bounds: 'parent'
|
|
14277
14379
|
}
|
|
14278
14380
|
}, /*#__PURE__*/React$1.createElement("th", _objectSpread2({}, restProps)));
|
|
14279
14381
|
};
|
|
@@ -14364,7 +14466,8 @@ var ColumnSettingSulaTable = /*#__PURE__*/function (_React$Component) {
|
|
|
14364
14466
|
y: 400
|
|
14365
14467
|
}, scroll), {}, {
|
|
14366
14468
|
x: restProps.overScrollX || this.getTableScrollXWidth(showCol)
|
|
14367
|
-
})
|
|
14469
|
+
}),
|
|
14470
|
+
sticky: true
|
|
14368
14471
|
}, showSummary ? {
|
|
14369
14472
|
summary: showSummary
|
|
14370
14473
|
} : {});
|
|
@@ -16565,15 +16668,117 @@ var ResizeableTitle$2 = function ResizeableTitle(props) {
|
|
|
16565
16668
|
var onResize = props.onResize,
|
|
16566
16669
|
width = props.width,
|
|
16567
16670
|
restProps = _objectWithoutProperties(props, _excluded$g);
|
|
16568
|
-
|
|
16569
|
-
|
|
16570
|
-
|
|
16671
|
+
var _useState = useState(width),
|
|
16672
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
16673
|
+
innerWidth = _useState2[0],
|
|
16674
|
+
setInnerWidth = _useState2[1];
|
|
16675
|
+
var _useState3 = useState(false),
|
|
16676
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
16677
|
+
isResizing = _useState4[0],
|
|
16678
|
+
setIsResizing = _useState4[1]; // 标记是否正在拖拽
|
|
16679
|
+
var _useState5 = useState(false),
|
|
16680
|
+
_useState6 = _slicedToArray(_useState5, 2),
|
|
16681
|
+
isDragging = _useState6[0],
|
|
16682
|
+
setIsDragging = _useState6[1]; // 标记拖拽句柄是否被拖拽
|
|
16683
|
+
var _useState7 = useState(0),
|
|
16684
|
+
_useState8 = _slicedToArray(_useState7, 2),
|
|
16685
|
+
startX = _useState8[0],
|
|
16686
|
+
setStartX = _useState8[1]; // 初始X坐标
|
|
16687
|
+
var markerPosition = useRef({
|
|
16688
|
+
left: 0,
|
|
16689
|
+
top: 0
|
|
16690
|
+
});
|
|
16691
|
+
var currentStart = useRef(0);
|
|
16692
|
+
var uuidref = useRef(uuid());
|
|
16693
|
+
var prevWidthRef = useRef(width);
|
|
16694
|
+
var handleMouseDown = function handleMouseDown(e) {
|
|
16695
|
+
currentStart.current = e.clientX;
|
|
16696
|
+
markerPosition.current = {
|
|
16697
|
+
left: e.clientX,
|
|
16698
|
+
top: e.clientY
|
|
16699
|
+
};
|
|
16700
|
+
setIsResizing(true);
|
|
16701
|
+
document.addEventListener('mousemove', handleMouseMove);
|
|
16702
|
+
document.addEventListener('mouseup', _handleMouseUp);
|
|
16703
|
+
};
|
|
16704
|
+
var handleMouseMove = function handleMouseMove(e) {
|
|
16705
|
+
e.stopPropagation();
|
|
16706
|
+
e.preventDefault();
|
|
16707
|
+
// 更新标记位置
|
|
16708
|
+
markerPosition.current = {
|
|
16709
|
+
left: e.clientX,
|
|
16710
|
+
top: e.clientY
|
|
16711
|
+
};
|
|
16712
|
+
var dom = document.getElementById('text1');
|
|
16713
|
+
if (dom && dom.style) {
|
|
16714
|
+
dom.style.left = "".concat(e.clientX, "px");
|
|
16715
|
+
dom.style.top = "".concat(e.clientY - 20, "px");
|
|
16716
|
+
}
|
|
16717
|
+
};
|
|
16718
|
+
var _handleMouseUp = function handleMouseUp(e) {
|
|
16719
|
+
document.removeEventListener('mousemove', handleMouseMove);
|
|
16720
|
+
document.removeEventListener('mouseup', _handleMouseUp);
|
|
16721
|
+
setIsResizing(false);
|
|
16722
|
+
};
|
|
16723
|
+
var handleresize = function handleresize(e, data, title) {
|
|
16724
|
+
var _data$size;
|
|
16725
|
+
var newWidth = (data === null || data === void 0 ? void 0 : (_data$size = data.size) === null || _data$size === void 0 ? void 0 : _data$size.width) || 0;
|
|
16726
|
+
setInnerWidth(newWidth); // 更新内部分宽度
|
|
16727
|
+
};
|
|
16728
|
+
var handleResizeStart = function handleResizeStart() {
|
|
16729
|
+
setIsResizing(true);
|
|
16730
|
+
};
|
|
16731
|
+
var handleResizeStop = function handleResizeStop(e, data) {
|
|
16732
|
+
setIsResizing(false);
|
|
16733
|
+
if (onResize) {
|
|
16734
|
+
onResize(e, data);
|
|
16735
|
+
}
|
|
16736
|
+
};
|
|
16737
|
+
useEffect(function () {
|
|
16738
|
+
if (width !== prevWidthRef.current) {
|
|
16739
|
+
prevWidthRef.current = width;
|
|
16740
|
+
setInnerWidth(width);
|
|
16741
|
+
}
|
|
16742
|
+
}, [width]);
|
|
16571
16743
|
return /*#__PURE__*/React$1.createElement(Resizable, {
|
|
16572
|
-
width:
|
|
16744
|
+
width: innerWidth,
|
|
16573
16745
|
height: 0,
|
|
16574
|
-
|
|
16746
|
+
handle: /*#__PURE__*/React$1.createElement("div", null, /*#__PURE__*/React$1.createElement("div", {
|
|
16747
|
+
style: {
|
|
16748
|
+
width: '10px',
|
|
16749
|
+
height: '30px',
|
|
16750
|
+
cursor: 'col-resize',
|
|
16751
|
+
position: 'absolute',
|
|
16752
|
+
zIndex: 10,
|
|
16753
|
+
top: 0,
|
|
16754
|
+
right: 0
|
|
16755
|
+
},
|
|
16756
|
+
onMouseDown: handleMouseDown
|
|
16757
|
+
}), isResizing && /*#__PURE__*/React$1.createElement("div", {
|
|
16758
|
+
id: "text1",
|
|
16759
|
+
style: {
|
|
16760
|
+
position: 'fixed',
|
|
16761
|
+
left: markerPosition.current.left,
|
|
16762
|
+
top: markerPosition.current.top - 20,
|
|
16763
|
+
backgroundColor: '#1890ff',
|
|
16764
|
+
color: 'white',
|
|
16765
|
+
borderRadius: '4px',
|
|
16766
|
+
zIndex: 9999,
|
|
16767
|
+
pointerEvents: 'none',
|
|
16768
|
+
height: '100px',
|
|
16769
|
+
width: 2
|
|
16770
|
+
}
|
|
16771
|
+
})),
|
|
16772
|
+
onResize: function onResize(e, data) {
|
|
16773
|
+
handleresize(e, data, restProps.title);
|
|
16774
|
+
},
|
|
16775
|
+
onResizeStart: handleResizeStart,
|
|
16776
|
+
onResizeStop: handleResizeStop,
|
|
16575
16777
|
draggableOpts: {
|
|
16576
|
-
enableUserSelectHack:
|
|
16778
|
+
enableUserSelectHack: true,
|
|
16779
|
+
grid: [20, 20],
|
|
16780
|
+
axis: 'x',
|
|
16781
|
+
bounds: 'parent'
|
|
16577
16782
|
}
|
|
16578
16783
|
}, /*#__PURE__*/React$1.createElement("th", _objectSpread2({}, restProps)));
|
|
16579
16784
|
};
|
|
@@ -16654,39 +16859,39 @@ var BsSulaQueryTable = (function (props) {
|
|
|
16654
16859
|
return _toConsumableArray(originConfig);
|
|
16655
16860
|
};
|
|
16656
16861
|
var refs = useRef(null);
|
|
16657
|
-
var
|
|
16658
|
-
|
|
16659
|
-
pagePath =
|
|
16660
|
-
setPagePath =
|
|
16862
|
+
var _useState9 = useState(''),
|
|
16863
|
+
_useState10 = _slicedToArray(_useState9, 2),
|
|
16864
|
+
pagePath = _useState10[0],
|
|
16865
|
+
setPagePath = _useState10[1];
|
|
16661
16866
|
var _useLocation = useLocation(),
|
|
16662
16867
|
pathname = _useLocation.pathname,
|
|
16663
16868
|
_useLocation$state = _useLocation.state,
|
|
16664
16869
|
state = _useLocation$state === void 0 ? {} : _useLocation$state;
|
|
16665
|
-
var
|
|
16666
|
-
|
|
16667
|
-
isFullScreen =
|
|
16668
|
-
setIsFnllScreen =
|
|
16870
|
+
var _useState11 = useState(false),
|
|
16871
|
+
_useState12 = _slicedToArray(_useState11, 2),
|
|
16872
|
+
isFullScreen = _useState12[0],
|
|
16873
|
+
setIsFnllScreen = _useState12[1];
|
|
16669
16874
|
// @ts-nocheck
|
|
16670
16875
|
var value = props;
|
|
16671
16876
|
var _props$fields = props.fields,
|
|
16672
16877
|
fields = _props$fields === void 0 ? [] : _props$fields;
|
|
16673
|
-
var
|
|
16674
|
-
|
|
16675
|
-
showColumn =
|
|
16676
|
-
setShowColumns =
|
|
16878
|
+
var _useState13 = useState([]),
|
|
16879
|
+
_useState14 = _slicedToArray(_useState13, 2),
|
|
16880
|
+
showColumn = _useState14[0],
|
|
16881
|
+
setShowColumns = _useState14[1]; // 列字段
|
|
16677
16882
|
var originSearchFields = getSettingFieldOrColumn(getConfigFromlocalstorage(ENUM.BROWSER_CACHE.SEARCH_FIELDS_CONDITION), fields, 'searchFields');
|
|
16678
|
-
var
|
|
16679
|
-
|
|
16680
|
-
showSearchFields =
|
|
16681
|
-
setShowSearchFields =
|
|
16682
|
-
var
|
|
16683
|
-
|
|
16684
|
-
showExportColumn =
|
|
16685
|
-
setShowExportColumns =
|
|
16686
|
-
var
|
|
16687
|
-
|
|
16688
|
-
height =
|
|
16689
|
-
setHeight =
|
|
16883
|
+
var _useState15 = useState(originSearchFields),
|
|
16884
|
+
_useState16 = _slicedToArray(_useState15, 2),
|
|
16885
|
+
showSearchFields = _useState16[0],
|
|
16886
|
+
setShowSearchFields = _useState16[1]; //搜索项字段
|
|
16887
|
+
var _useState17 = useState([]),
|
|
16888
|
+
_useState18 = _slicedToArray(_useState17, 2),
|
|
16889
|
+
showExportColumn = _useState18[0],
|
|
16890
|
+
setShowExportColumns = _useState18[1]; // 导出列字段
|
|
16891
|
+
var _useState19 = useState(''),
|
|
16892
|
+
_useState20 = _slicedToArray(_useState19, 2),
|
|
16893
|
+
height = _useState20[0],
|
|
16894
|
+
setHeight = _useState20[1];
|
|
16690
16895
|
var sortTableRef = useRef(null);
|
|
16691
16896
|
var searchTableRef = useRef(null);
|
|
16692
16897
|
var exportTableRef = useRef(null);
|
package/dist/index.js
CHANGED
|
@@ -4098,7 +4098,7 @@ function ToCDB(str) {
|
|
|
4098
4098
|
return tmp;
|
|
4099
4099
|
}
|
|
4100
4100
|
|
|
4101
|
-
var css_248z$5 = ".search_select_show {\n display: flex;\n}\n.search_select_show .ant-select-clear {\n right: 33px;\n}\n.search_select_expand_button {\n position: relative;\n right: -11px;\n width: 30px;\n border-left: 1px solid #d9d9d9;\n height: 24px;\n cursor: pointer;\n font-size: 14px;\n font-weight: bolder;\n
|
|
4101
|
+
var css_248z$5 = ".search_select_show {\n display: flex;\n}\n.search_select_show .ant-select-clear {\n right: 33px;\n}\n.search_select_show .ant-select-multiple.ant-select-show-arrow .ant-select-selector,\n.search_select_show .ant-select-multiple.ant-select-allow-clear .ant-select-selector {\n padding-right: 28px;\n}\n.search_select_expand_button {\n position: relative;\n right: -11px;\n width: 30px;\n border-left: 1px solid #d9d9d9;\n height: 24px;\n cursor: pointer;\n font-size: 14px;\n font-weight: bolder;\n}\n.search_select_expand_button span {\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n}\n.search_select_expand_button:hover {\n background-color: #005cff;\n color: #fff;\n border-top-right-radius: 2px;\n border-bottom-right-radius: 2px;\n}\n.search_select_expand_button_disabled:hover {\n background-color: transparent;\n color: rgba(0, 0, 0, 0.25);\n cursor: not-allowed;\n}\n.search_select_dropdown_table .ant-table-cell .ant-table-selection-column .ant-radio,\n.search_select_dropdown_table table tr td.ant-table-selection-column .ant-radio-wrapper {\n display: none;\n}\n.search_select_dropdown_table .ant-table.ant-table-bordered > .ant-table-container > .ant-table-header > table {\n font-family: MiSans-Regular;\n font-weight: 400;\n font-size: 12px;\n}\n.search_select_dropdown_table .ant-table.ant-table-bordered > .ant-table-container > .ant-table-header > table thead > tr > th {\n color: #7F7F7F;\n}\n.search_select_dropdown_table .ant-table.ant-table-bordered > .ant-table-container > .ant-table-header > table .ant-table-thead .ant-table-selection .ant-checkbox-wrapper {\n justify-content: center;\n}\n.search_select_dropdown_table .ant-table.ant-table-bordered > .ant-table-container > .ant-table-header > table tbody > tr > td {\n color: #333333;\n}\n.search_select_dropdown_table1 .ant-table.ant-table-bordered > .ant-table-container .ant-table-body > table > tbody > tr > td.ant-table-selection-column,\n.search_select_dropdown_table1 .ant-table.ant-table-bordered > .ant-table-container .ant-table-header > table > thead > tr > th.ant-table-selection-column {\n display: none;\n}\n.search_select_modal_wrapper .ant-modal {\n top: 60px;\n}\n.search_select_modal_wrapper .ant-modal-header {\n padding: 6px 0px 6px 16px;\n}\n.search_select_modal_wrapper .ant-modal-header .ant-modal-title {\n height: 20px;\n color: #000000;\n line-height: 20px;\n}\n.search_select_modal_wrapper .ant-modal-close-x {\n width: 32px;\n height: 32px;\n line-height: 32px;\n}\n.search_select_modal_wrapper .ant-modal-body {\n padding: 0px;\n background: #F3F3F3;\n height: calc(100vh - 235px);\n overflow: hidden;\n}\n.search_select_modal_wrapper .ant-modal-footer .ant-btn.ant-btn-default {\n color: #005cff;\n border-color: #005cff;\n}\n.search_select_modal_wrapper .ant-modal-footer .ant-btn-primary,\n.search_select_modal_wrapper .ant-modal-footer .ant-btn-primary[disabled] {\n background: #005cff;\n border-color: #005cff;\n}\n.search_select_modal_wrapper .ant-modal-footer .ant-btn-primary[disabled] {\n opacity: 0.5;\n color: #fff;\n}\n.search_select_wrapper {\n position: relative;\n font-size: 14px;\n}\n.search_select_wrapper_topForm .select_list_columns {\n width: 100%;\n padding: 10px 6px 2px 16px;\n background-color: #fff;\n}\n.search_select_wrapper_topForm .select_list_columns .ant-form {\n padding: 0;\n overflow: hidden;\n display: flex;\n align-items: flex-start;\n}\n.search_select_wrapper_topForm .select_list_columns .ant-form .ant-row .ant-form-item,\n.search_select_wrapper_topForm .select_list_columns .ant-form .ant-row .ant-col .ant-space {\n font-size: 12px !important;\n margin-right: 0px !important;\n margin-bottom: 8px !important;\n}\n.search_select_wrapper_topForm .select_list_columns .ant-form .ant-row.ant-form-item-row {\n background-color: #fafafa;\n border: 0.8px solid #D9D9D9;\n border-radius: 2px;\n font-size: 12px;\n}\n.search_select_wrapper_topForm .select_list_columns .ant-form .ant-row {\n width: 100%;\n}\n.search_select_wrapper_topForm .select_list_columns .ant-form .ant-row .ant-form-item-label {\n width: 110px;\n order: 1;\n}\n.search_select_wrapper_topForm .select_list_columns .ant-form .ant-row .ant-form-item-label label {\n width: 100%;\n text-align: left;\n padding: 0 10px;\n color: #333333;\n font-size: 12px;\n font-family: PingFangSC-Regular;\n font-weight: 400;\n}\n.search_select_wrapper_topForm .select_list_columns .ant-form .ant-row .ant-form-item-control {\n order: 2;\n width: 100px;\n}\n.search_select_wrapper_topForm .select_list_columns .ant-form .ant-row .ant-form-item-control .ant-input-affix-wrapper {\n border: 0;\n font-size: 12px;\n background-color: #fafafa;\n padding: 0 11px;\n height: 24px;\n}\n.search_select_wrapper_topForm .select_list_columns .ant-form .ant-row .ant-form-item-control .ant-input-affix-wrapper .ant-input {\n background-color: #fafafa !important;\n border: 0;\n font-size: 12px;\n}\n.search_select_wrapper_topForm .select_list_columns .ant-form .ant-row .ant-form-item-control .ant-select-selector {\n border: 0 !important;\n background-color: #fafafa !important;\n font-size: 12px;\n}\n.search_select_wrapper_topForm .select_list_columns .ant-form .ant-row .ant-form-item-control .query_input .ant-input {\n background-color: #fafafa !important;\n border: 0;\n font-size: 12px;\n}\n.search_select_wrapper_topForm .select_list_columns .ant-form .ant-btn-primary {\n background: #005cff;\n}\n.search_select_wrapper_topForm .select_list_columns .ant-form > .ant-row > .ant-col {\n order: 2;\n padding-right: 10px;\n}\n.search_select_wrapper_topForm .select_list_button_space {\n margin-right: 10px;\n}\n.search_select_wrapper_bottomTable {\n margin: 10px;\n display: flex;\n justify-content: space-between;\n}\n.search_select_wrapper_bottomTable_wrapLeft1,\n.search_select_wrapper_bottomTable_wrapLeft2,\n.search_select_wrapper_bottomTable_wrapRight {\n background: #fff;\n width: calc(50% - 5px);\n}\n.search_select_wrapper_bottomTable_wrapLeft1 {\n width: 100%;\n}\n.search_select_wrapper_bottomTable_wrapRight {\n margin-left: 10px;\n}\n.search_select_wrapper_bottomTable .ant-tabs-nav {\n margin: 0;\n padding: 6px 18.5px;\n}\n.search_select_wrapper_bottomTable .ant-tabs-nav .ant-tabs-nav-wrap {\n height: 28px;\n font-size: 14px;\n}\n.search_select_wrapper_bottomTable .ant-tabs-nav .ant-tabs-tab {\n padding: 4px 0;\n}\n.search_select_wrapper_bottomTable .ant-tabs-nav .ant-tabs-ink-bar {\n left: 3px !important;\n width: 40px !important;\n background: #005cff;\n}\n.search_select_wrapper_bottomTable .ant-tabs-nav .ant-tabs-extra-content > span {\n color: #005cff;\n cursor: pointer;\n}\n.search_select_wrapper_bottomTable .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {\n color: #005cff;\n}\n.search_select_wrapper_bottomTable .ant-tabs-content-holder {\n padding: 10px 10px 7px;\n}\n.search_select_wrapper_bottomTable .ant-tabs-content-holder .ant-tabs-content .ant-table-wrapper .ant-table .ant-table-container .ant-table-content .ant-table-thead > tr > th {\n color: #7F7F7F;\n}\n.search_select_wrapper_bottomTable .ant-tabs-content-holder .ant-tabs-content .ant-table-wrapper .ant-table .ant-table-container .ant-table-content .ant-table-thead .ant-table-selection .ant-checkbox-wrapper {\n justify-content: center;\n}\n.search_select_wrapper_bottomTable .ant-tabs-content-holder .ant-tabs-content .ant-table-wrapper .ant-table .ant-table-container .ant-table-content .ant-table.ant-table-small .ant-table-tbody > tr > td {\n color: #333333;\n}\n.search_select_wrapper_bottomTable .ant-checkbox-checked .ant-checkbox-inner {\n color: #005cff;\n background: #005cff;\n}\n.search_select_wrapper_bottomTable .ant-pagination-item-active a {\n color: #005cff;\n}\n.search_select_wrapper_bottomTable .ant-pagination-item-active {\n border-color: #005cff;\n}\n.searchSelectSpin > div {\n height: 300px !important;\n}\n";
|
|
4102
4102
|
styleInject(css_248z$5);
|
|
4103
4103
|
|
|
4104
4104
|
var columnsPerRow = 4; // 每行的列数
|
|
@@ -14288,15 +14288,117 @@ var ColumnSettingSulaTable = /*#__PURE__*/function (_React$Component) {
|
|
|
14288
14288
|
var onResize = props.onResize,
|
|
14289
14289
|
width = props.width,
|
|
14290
14290
|
restProps = _objectWithoutProperties(props, _excluded$9);
|
|
14291
|
-
|
|
14292
|
-
|
|
14293
|
-
|
|
14291
|
+
var _useState = React$1.useState(width),
|
|
14292
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
14293
|
+
innerWidth = _useState2[0],
|
|
14294
|
+
setInnerWidth = _useState2[1];
|
|
14295
|
+
var _useState3 = React$1.useState(false),
|
|
14296
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
14297
|
+
isResizing = _useState4[0],
|
|
14298
|
+
setIsResizing = _useState4[1]; // 标记是否正在拖拽
|
|
14299
|
+
var _useState5 = React$1.useState(false),
|
|
14300
|
+
_useState6 = _slicedToArray(_useState5, 2),
|
|
14301
|
+
isDragging = _useState6[0],
|
|
14302
|
+
setIsDragging = _useState6[1]; // 标记拖拽句柄是否被拖拽
|
|
14303
|
+
var _useState7 = React$1.useState(0),
|
|
14304
|
+
_useState8 = _slicedToArray(_useState7, 2),
|
|
14305
|
+
startX = _useState8[0],
|
|
14306
|
+
setStartX = _useState8[1]; // 初始X坐标
|
|
14307
|
+
var markerPosition = React$1.useRef({
|
|
14308
|
+
left: 0,
|
|
14309
|
+
top: 0
|
|
14310
|
+
});
|
|
14311
|
+
var currentStart = React$1.useRef(0);
|
|
14312
|
+
var uuidref = React$1.useRef(uuid());
|
|
14313
|
+
var prevWidthRef = React$1.useRef(width);
|
|
14314
|
+
var handleMouseDown = function handleMouseDown(e) {
|
|
14315
|
+
currentStart.current = e.clientX;
|
|
14316
|
+
markerPosition.current = {
|
|
14317
|
+
left: e.clientX,
|
|
14318
|
+
top: e.clientY
|
|
14319
|
+
};
|
|
14320
|
+
setIsResizing(true);
|
|
14321
|
+
document.addEventListener('mousemove', handleMouseMove);
|
|
14322
|
+
document.addEventListener('mouseup', _handleMouseUp);
|
|
14323
|
+
};
|
|
14324
|
+
var handleMouseMove = function handleMouseMove(e) {
|
|
14325
|
+
e.stopPropagation();
|
|
14326
|
+
e.preventDefault();
|
|
14327
|
+
// 更新标记位置
|
|
14328
|
+
markerPosition.current = {
|
|
14329
|
+
left: e.clientX,
|
|
14330
|
+
top: e.clientY
|
|
14331
|
+
};
|
|
14332
|
+
var dom = document.getElementById('text1');
|
|
14333
|
+
if (dom && dom.style) {
|
|
14334
|
+
dom.style.left = "".concat(e.clientX, "px");
|
|
14335
|
+
dom.style.top = "".concat(e.clientY - 20, "px");
|
|
14336
|
+
}
|
|
14337
|
+
};
|
|
14338
|
+
var _handleMouseUp = function handleMouseUp(e) {
|
|
14339
|
+
document.removeEventListener('mousemove', handleMouseMove);
|
|
14340
|
+
document.removeEventListener('mouseup', _handleMouseUp);
|
|
14341
|
+
setIsResizing(false);
|
|
14342
|
+
};
|
|
14343
|
+
var handleresize = function handleresize(e, data, title) {
|
|
14344
|
+
var _data$size;
|
|
14345
|
+
var newWidth = (data === null || data === void 0 ? void 0 : (_data$size = data.size) === null || _data$size === void 0 ? void 0 : _data$size.width) || 0;
|
|
14346
|
+
setInnerWidth(newWidth); // 更新内部分宽度
|
|
14347
|
+
};
|
|
14348
|
+
var handleResizeStart = function handleResizeStart() {
|
|
14349
|
+
setIsResizing(true);
|
|
14350
|
+
};
|
|
14351
|
+
var handleResizeStop = function handleResizeStop(e, data) {
|
|
14352
|
+
setIsResizing(false);
|
|
14353
|
+
if (onResize) {
|
|
14354
|
+
onResize(e, data);
|
|
14355
|
+
}
|
|
14356
|
+
};
|
|
14357
|
+
React$1.useEffect(function () {
|
|
14358
|
+
if (width !== prevWidthRef.current) {
|
|
14359
|
+
prevWidthRef.current = width;
|
|
14360
|
+
setInnerWidth(width);
|
|
14361
|
+
}
|
|
14362
|
+
}, [width]);
|
|
14294
14363
|
return /*#__PURE__*/React__default['default'].createElement(reactResizable.Resizable, {
|
|
14295
|
-
width:
|
|
14364
|
+
width: innerWidth,
|
|
14296
14365
|
height: 0,
|
|
14297
|
-
|
|
14366
|
+
handle: /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement("div", {
|
|
14367
|
+
style: {
|
|
14368
|
+
width: '10px',
|
|
14369
|
+
height: '30px',
|
|
14370
|
+
cursor: 'col-resize',
|
|
14371
|
+
position: 'absolute',
|
|
14372
|
+
zIndex: 10,
|
|
14373
|
+
top: 0,
|
|
14374
|
+
right: 0
|
|
14375
|
+
},
|
|
14376
|
+
onMouseDown: handleMouseDown
|
|
14377
|
+
}), isResizing && /*#__PURE__*/React__default['default'].createElement("div", {
|
|
14378
|
+
id: "text1",
|
|
14379
|
+
style: {
|
|
14380
|
+
position: 'fixed',
|
|
14381
|
+
left: markerPosition.current.left,
|
|
14382
|
+
top: markerPosition.current.top - 20,
|
|
14383
|
+
backgroundColor: '#1890ff',
|
|
14384
|
+
color: 'white',
|
|
14385
|
+
borderRadius: '4px',
|
|
14386
|
+
zIndex: 9999,
|
|
14387
|
+
pointerEvents: 'none',
|
|
14388
|
+
height: '100px',
|
|
14389
|
+
width: 2
|
|
14390
|
+
}
|
|
14391
|
+
})),
|
|
14392
|
+
onResize: function onResize(e, data) {
|
|
14393
|
+
handleresize(e, data, restProps.title);
|
|
14394
|
+
},
|
|
14395
|
+
onResizeStart: handleResizeStart,
|
|
14396
|
+
onResizeStop: handleResizeStop,
|
|
14298
14397
|
draggableOpts: {
|
|
14299
|
-
enableUserSelectHack:
|
|
14398
|
+
enableUserSelectHack: true,
|
|
14399
|
+
grid: [20, 20],
|
|
14400
|
+
axis: 'x',
|
|
14401
|
+
bounds: 'parent'
|
|
14300
14402
|
}
|
|
14301
14403
|
}, /*#__PURE__*/React__default['default'].createElement("th", _objectSpread2({}, restProps)));
|
|
14302
14404
|
};
|
|
@@ -14387,7 +14489,8 @@ var ColumnSettingSulaTable = /*#__PURE__*/function (_React$Component) {
|
|
|
14387
14489
|
y: 400
|
|
14388
14490
|
}, scroll), {}, {
|
|
14389
14491
|
x: restProps.overScrollX || this.getTableScrollXWidth(showCol)
|
|
14390
|
-
})
|
|
14492
|
+
}),
|
|
14493
|
+
sticky: true
|
|
14391
14494
|
}, showSummary ? {
|
|
14392
14495
|
summary: showSummary
|
|
14393
14496
|
} : {});
|
|
@@ -16588,15 +16691,117 @@ var ResizeableTitle$2 = function ResizeableTitle(props) {
|
|
|
16588
16691
|
var onResize = props.onResize,
|
|
16589
16692
|
width = props.width,
|
|
16590
16693
|
restProps = _objectWithoutProperties(props, _excluded$g);
|
|
16591
|
-
|
|
16592
|
-
|
|
16593
|
-
|
|
16694
|
+
var _useState = React$1.useState(width),
|
|
16695
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
16696
|
+
innerWidth = _useState2[0],
|
|
16697
|
+
setInnerWidth = _useState2[1];
|
|
16698
|
+
var _useState3 = React$1.useState(false),
|
|
16699
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
16700
|
+
isResizing = _useState4[0],
|
|
16701
|
+
setIsResizing = _useState4[1]; // 标记是否正在拖拽
|
|
16702
|
+
var _useState5 = React$1.useState(false),
|
|
16703
|
+
_useState6 = _slicedToArray(_useState5, 2),
|
|
16704
|
+
isDragging = _useState6[0],
|
|
16705
|
+
setIsDragging = _useState6[1]; // 标记拖拽句柄是否被拖拽
|
|
16706
|
+
var _useState7 = React$1.useState(0),
|
|
16707
|
+
_useState8 = _slicedToArray(_useState7, 2),
|
|
16708
|
+
startX = _useState8[0],
|
|
16709
|
+
setStartX = _useState8[1]; // 初始X坐标
|
|
16710
|
+
var markerPosition = React$1.useRef({
|
|
16711
|
+
left: 0,
|
|
16712
|
+
top: 0
|
|
16713
|
+
});
|
|
16714
|
+
var currentStart = React$1.useRef(0);
|
|
16715
|
+
var uuidref = React$1.useRef(uuid());
|
|
16716
|
+
var prevWidthRef = React$1.useRef(width);
|
|
16717
|
+
var handleMouseDown = function handleMouseDown(e) {
|
|
16718
|
+
currentStart.current = e.clientX;
|
|
16719
|
+
markerPosition.current = {
|
|
16720
|
+
left: e.clientX,
|
|
16721
|
+
top: e.clientY
|
|
16722
|
+
};
|
|
16723
|
+
setIsResizing(true);
|
|
16724
|
+
document.addEventListener('mousemove', handleMouseMove);
|
|
16725
|
+
document.addEventListener('mouseup', _handleMouseUp);
|
|
16726
|
+
};
|
|
16727
|
+
var handleMouseMove = function handleMouseMove(e) {
|
|
16728
|
+
e.stopPropagation();
|
|
16729
|
+
e.preventDefault();
|
|
16730
|
+
// 更新标记位置
|
|
16731
|
+
markerPosition.current = {
|
|
16732
|
+
left: e.clientX,
|
|
16733
|
+
top: e.clientY
|
|
16734
|
+
};
|
|
16735
|
+
var dom = document.getElementById('text1');
|
|
16736
|
+
if (dom && dom.style) {
|
|
16737
|
+
dom.style.left = "".concat(e.clientX, "px");
|
|
16738
|
+
dom.style.top = "".concat(e.clientY - 20, "px");
|
|
16739
|
+
}
|
|
16740
|
+
};
|
|
16741
|
+
var _handleMouseUp = function handleMouseUp(e) {
|
|
16742
|
+
document.removeEventListener('mousemove', handleMouseMove);
|
|
16743
|
+
document.removeEventListener('mouseup', _handleMouseUp);
|
|
16744
|
+
setIsResizing(false);
|
|
16745
|
+
};
|
|
16746
|
+
var handleresize = function handleresize(e, data, title) {
|
|
16747
|
+
var _data$size;
|
|
16748
|
+
var newWidth = (data === null || data === void 0 ? void 0 : (_data$size = data.size) === null || _data$size === void 0 ? void 0 : _data$size.width) || 0;
|
|
16749
|
+
setInnerWidth(newWidth); // 更新内部分宽度
|
|
16750
|
+
};
|
|
16751
|
+
var handleResizeStart = function handleResizeStart() {
|
|
16752
|
+
setIsResizing(true);
|
|
16753
|
+
};
|
|
16754
|
+
var handleResizeStop = function handleResizeStop(e, data) {
|
|
16755
|
+
setIsResizing(false);
|
|
16756
|
+
if (onResize) {
|
|
16757
|
+
onResize(e, data);
|
|
16758
|
+
}
|
|
16759
|
+
};
|
|
16760
|
+
React$1.useEffect(function () {
|
|
16761
|
+
if (width !== prevWidthRef.current) {
|
|
16762
|
+
prevWidthRef.current = width;
|
|
16763
|
+
setInnerWidth(width);
|
|
16764
|
+
}
|
|
16765
|
+
}, [width]);
|
|
16594
16766
|
return /*#__PURE__*/React__default['default'].createElement(reactResizable.Resizable, {
|
|
16595
|
-
width:
|
|
16767
|
+
width: innerWidth,
|
|
16596
16768
|
height: 0,
|
|
16597
|
-
|
|
16769
|
+
handle: /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement("div", {
|
|
16770
|
+
style: {
|
|
16771
|
+
width: '10px',
|
|
16772
|
+
height: '30px',
|
|
16773
|
+
cursor: 'col-resize',
|
|
16774
|
+
position: 'absolute',
|
|
16775
|
+
zIndex: 10,
|
|
16776
|
+
top: 0,
|
|
16777
|
+
right: 0
|
|
16778
|
+
},
|
|
16779
|
+
onMouseDown: handleMouseDown
|
|
16780
|
+
}), isResizing && /*#__PURE__*/React__default['default'].createElement("div", {
|
|
16781
|
+
id: "text1",
|
|
16782
|
+
style: {
|
|
16783
|
+
position: 'fixed',
|
|
16784
|
+
left: markerPosition.current.left,
|
|
16785
|
+
top: markerPosition.current.top - 20,
|
|
16786
|
+
backgroundColor: '#1890ff',
|
|
16787
|
+
color: 'white',
|
|
16788
|
+
borderRadius: '4px',
|
|
16789
|
+
zIndex: 9999,
|
|
16790
|
+
pointerEvents: 'none',
|
|
16791
|
+
height: '100px',
|
|
16792
|
+
width: 2
|
|
16793
|
+
}
|
|
16794
|
+
})),
|
|
16795
|
+
onResize: function onResize(e, data) {
|
|
16796
|
+
handleresize(e, data, restProps.title);
|
|
16797
|
+
},
|
|
16798
|
+
onResizeStart: handleResizeStart,
|
|
16799
|
+
onResizeStop: handleResizeStop,
|
|
16598
16800
|
draggableOpts: {
|
|
16599
|
-
enableUserSelectHack:
|
|
16801
|
+
enableUserSelectHack: true,
|
|
16802
|
+
grid: [20, 20],
|
|
16803
|
+
axis: 'x',
|
|
16804
|
+
bounds: 'parent'
|
|
16600
16805
|
}
|
|
16601
16806
|
}, /*#__PURE__*/React__default['default'].createElement("th", _objectSpread2({}, restProps)));
|
|
16602
16807
|
};
|
|
@@ -16677,39 +16882,39 @@ var BsSulaQueryTable = (function (props) {
|
|
|
16677
16882
|
return _toConsumableArray(originConfig);
|
|
16678
16883
|
};
|
|
16679
16884
|
var refs = React$1.useRef(null);
|
|
16680
|
-
var
|
|
16681
|
-
|
|
16682
|
-
pagePath =
|
|
16683
|
-
setPagePath =
|
|
16885
|
+
var _useState9 = React$1.useState(''),
|
|
16886
|
+
_useState10 = _slicedToArray(_useState9, 2),
|
|
16887
|
+
pagePath = _useState10[0],
|
|
16888
|
+
setPagePath = _useState10[1];
|
|
16684
16889
|
var _useLocation = umi.useLocation(),
|
|
16685
16890
|
pathname = _useLocation.pathname,
|
|
16686
16891
|
_useLocation$state = _useLocation.state,
|
|
16687
16892
|
state = _useLocation$state === void 0 ? {} : _useLocation$state;
|
|
16688
|
-
var
|
|
16689
|
-
|
|
16690
|
-
isFullScreen =
|
|
16691
|
-
setIsFnllScreen =
|
|
16893
|
+
var _useState11 = React$1.useState(false),
|
|
16894
|
+
_useState12 = _slicedToArray(_useState11, 2),
|
|
16895
|
+
isFullScreen = _useState12[0],
|
|
16896
|
+
setIsFnllScreen = _useState12[1];
|
|
16692
16897
|
// @ts-nocheck
|
|
16693
16898
|
var value = props;
|
|
16694
16899
|
var _props$fields = props.fields,
|
|
16695
16900
|
fields = _props$fields === void 0 ? [] : _props$fields;
|
|
16696
|
-
var
|
|
16697
|
-
|
|
16698
|
-
showColumn =
|
|
16699
|
-
setShowColumns =
|
|
16901
|
+
var _useState13 = React$1.useState([]),
|
|
16902
|
+
_useState14 = _slicedToArray(_useState13, 2),
|
|
16903
|
+
showColumn = _useState14[0],
|
|
16904
|
+
setShowColumns = _useState14[1]; // 列字段
|
|
16700
16905
|
var originSearchFields = getSettingFieldOrColumn(getConfigFromlocalstorage(ENUM.BROWSER_CACHE.SEARCH_FIELDS_CONDITION), fields, 'searchFields');
|
|
16701
|
-
var
|
|
16702
|
-
|
|
16703
|
-
showSearchFields =
|
|
16704
|
-
setShowSearchFields =
|
|
16705
|
-
var
|
|
16706
|
-
|
|
16707
|
-
showExportColumn =
|
|
16708
|
-
setShowExportColumns =
|
|
16709
|
-
var
|
|
16710
|
-
|
|
16711
|
-
height =
|
|
16712
|
-
setHeight =
|
|
16906
|
+
var _useState15 = React$1.useState(originSearchFields),
|
|
16907
|
+
_useState16 = _slicedToArray(_useState15, 2),
|
|
16908
|
+
showSearchFields = _useState16[0],
|
|
16909
|
+
setShowSearchFields = _useState16[1]; //搜索项字段
|
|
16910
|
+
var _useState17 = React$1.useState([]),
|
|
16911
|
+
_useState18 = _slicedToArray(_useState17, 2),
|
|
16912
|
+
showExportColumn = _useState18[0],
|
|
16913
|
+
setShowExportColumns = _useState18[1]; // 导出列字段
|
|
16914
|
+
var _useState19 = React$1.useState(''),
|
|
16915
|
+
_useState20 = _slicedToArray(_useState19, 2),
|
|
16916
|
+
height = _useState20[0],
|
|
16917
|
+
setHeight = _useState20[1];
|
|
16713
16918
|
var sortTableRef = React$1.useRef(null);
|
|
16714
16919
|
var searchTableRef = React$1.useRef(null);
|
|
16715
16920
|
var exportTableRef = React$1.useRef(null);
|
package/package.json
CHANGED
|
@@ -23,6 +23,28 @@ import { BsSulaQueryTable } from '../../../index.ts';
|
|
|
23
23
|
export default () => {
|
|
24
24
|
const config = {
|
|
25
25
|
needPageHeader: false,
|
|
26
|
+
remoteDataSource: {
|
|
27
|
+
url: `https://randomuser.me/api`,
|
|
28
|
+
method: 'GET',
|
|
29
|
+
convertParams({ params }) {
|
|
30
|
+
return {
|
|
31
|
+
results: params.pageSize,
|
|
32
|
+
...params,
|
|
33
|
+
};
|
|
34
|
+
},
|
|
35
|
+
converter({ data }) {
|
|
36
|
+
return {
|
|
37
|
+
list: data.results.map((item, index) => {
|
|
38
|
+
return {
|
|
39
|
+
...item,
|
|
40
|
+
id: `${index}`,
|
|
41
|
+
name: `${item.name.first} ${item.name.last}`,
|
|
42
|
+
};
|
|
43
|
+
}),
|
|
44
|
+
total: 100,
|
|
45
|
+
};
|
|
46
|
+
},
|
|
47
|
+
},
|
|
26
48
|
summary: [{
|
|
27
49
|
label: '总金额',
|
|
28
50
|
count: 100
|
|
@@ -72,26 +94,97 @@ export default () => {
|
|
|
72
94
|
],
|
|
73
95
|
columns: [
|
|
74
96
|
{
|
|
75
|
-
|
|
76
|
-
title: '
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
97
|
+
key: 'id',
|
|
98
|
+
title: 'ID',
|
|
99
|
+
},
|
|
100
|
+
{
|
|
101
|
+
key: 'name',
|
|
102
|
+
title: '姓名',
|
|
103
|
+
width: 30,
|
|
104
|
+
},
|
|
105
|
+
{
|
|
106
|
+
key: 'nat',
|
|
107
|
+
title: '国家',
|
|
108
|
+
},
|
|
109
|
+
{
|
|
110
|
+
key: 'gender',
|
|
111
|
+
title: '性别',
|
|
112
|
+
render: ({ text }) => {
|
|
113
|
+
return text === 'male' ? '男' : '女';
|
|
114
|
+
},
|
|
115
|
+
},
|
|
116
|
+
{
|
|
117
|
+
key: 'email',
|
|
118
|
+
title: '邮箱',
|
|
119
|
+
},
|
|
120
|
+
{
|
|
121
|
+
key: 'id',
|
|
122
|
+
title: 'ID',
|
|
123
|
+
},
|
|
124
|
+
{
|
|
125
|
+
key: 'name',
|
|
126
|
+
title: '姓名',
|
|
127
|
+
},
|
|
128
|
+
{
|
|
129
|
+
key: 'nat',
|
|
130
|
+
title: '国家',
|
|
131
|
+
},
|
|
132
|
+
{
|
|
133
|
+
key: 'gender',
|
|
134
|
+
title: '性别',
|
|
135
|
+
render: ({ text }) => {
|
|
136
|
+
return text === 'male' ? '男' : '女';
|
|
137
|
+
},
|
|
138
|
+
},
|
|
139
|
+
{
|
|
140
|
+
key: 'email',
|
|
141
|
+
title: '邮箱',
|
|
142
|
+
},
|
|
143
|
+
{
|
|
144
|
+
key: 'id',
|
|
145
|
+
title: 'ID',
|
|
146
|
+
},
|
|
147
|
+
{
|
|
148
|
+
key: 'name',
|
|
149
|
+
title: '姓名',
|
|
150
|
+
},
|
|
151
|
+
{
|
|
152
|
+
key: 'nat',
|
|
153
|
+
title: '国家',
|
|
154
|
+
},
|
|
155
|
+
{
|
|
156
|
+
key: 'gender',
|
|
157
|
+
title: '性别',
|
|
158
|
+
render: ({ text }) => {
|
|
159
|
+
return text === 'male' ? '男' : '女';
|
|
160
|
+
},
|
|
161
|
+
},
|
|
162
|
+
{
|
|
163
|
+
key: 'email',
|
|
164
|
+
title: '邮箱',
|
|
165
|
+
},
|
|
166
|
+
{
|
|
167
|
+
key: 'id',
|
|
168
|
+
title: 'ID',
|
|
169
|
+
},
|
|
170
|
+
{
|
|
171
|
+
key: 'name',
|
|
172
|
+
title: '姓名',
|
|
173
|
+
},
|
|
174
|
+
{
|
|
175
|
+
key: 'nat',
|
|
176
|
+
title: '国家',
|
|
177
|
+
},
|
|
178
|
+
{
|
|
179
|
+
key: 'gender',
|
|
180
|
+
title: '性别',
|
|
181
|
+
render: ({ text }) => {
|
|
182
|
+
return text === 'male' ? '男' : '女';
|
|
183
|
+
},
|
|
184
|
+
},
|
|
185
|
+
{
|
|
186
|
+
key: 'email',
|
|
187
|
+
title: '邮箱',
|
|
95
188
|
},
|
|
96
189
|
],
|
|
97
190
|
rowKey: 'id',
|
|
@@ -41,18 +41,120 @@ interface Field {
|
|
|
41
41
|
const MemoQueryTable = React.memo(QueryTable);
|
|
42
42
|
const { Text } = Typography;
|
|
43
43
|
|
|
44
|
-
const ResizeableTitle = (props) => {
|
|
44
|
+
const ResizeableTitle = (props: any) => {
|
|
45
45
|
const { onResize, width, ...restProps } = props;
|
|
46
|
+
|
|
47
|
+
const [innerWidth, setInnerWidth] = useState(width);
|
|
48
|
+
const [isResizing, setIsResizing] = useState(false); // 标记是否正在拖拽
|
|
49
|
+
const [isDragging, setIsDragging] = useState(false); // 标记拖拽句柄是否被拖拽
|
|
50
|
+
const [startX, setStartX] = useState(0); // 初始X坐标
|
|
51
|
+
const markerPosition = useRef({ left: 0, top: 0 });
|
|
52
|
+
const currentStart = useRef(0);
|
|
53
|
+
const uuidref = useRef(uuid());
|
|
54
|
+
|
|
55
|
+
const prevWidthRef = useRef(width);
|
|
56
|
+
|
|
57
|
+
const handleMouseDown = (e: any) => {
|
|
58
|
+
currentStart.current = e.clientX;
|
|
59
|
+
markerPosition.current = { left: e.clientX, top: e.clientY }
|
|
60
|
+
setIsResizing(true);
|
|
61
|
+
document.addEventListener('mousemove', handleMouseMove);
|
|
62
|
+
document.addEventListener('mouseup', handleMouseUp);
|
|
63
|
+
};
|
|
64
|
+
|
|
65
|
+
const handleMouseMove = (e: any) => {
|
|
66
|
+
e.stopPropagation();
|
|
67
|
+
e.preventDefault();
|
|
68
|
+
// 更新标记位置
|
|
69
|
+
markerPosition.current = { left: e.clientX, top: e.clientY }
|
|
70
|
+
const dom: HTMLElement | null = document.getElementById('text1');
|
|
71
|
+
|
|
72
|
+
if (dom && dom.style) {
|
|
73
|
+
dom.style.left = `${e.clientX}px`;
|
|
74
|
+
dom.style.top = `${e.clientY - 20}px`;
|
|
75
|
+
}
|
|
76
|
+
};
|
|
77
|
+
|
|
78
|
+
const handleMouseUp = (e: any) => {
|
|
79
|
+
document.removeEventListener('mousemove', handleMouseMove);
|
|
80
|
+
document.removeEventListener('mouseup', handleMouseUp);
|
|
81
|
+
setIsResizing(false);
|
|
82
|
+
};
|
|
83
|
+
|
|
84
|
+
const handleresize = (e: any, data: any, title: string) => {
|
|
85
|
+
const newWidth = data?.size?.width || 0;
|
|
86
|
+
setInnerWidth(newWidth); // 更新内部分宽度
|
|
87
|
+
};
|
|
88
|
+
|
|
89
|
+
const handleResizeStart = () => {
|
|
90
|
+
setIsResizing(true);
|
|
91
|
+
};
|
|
92
|
+
|
|
93
|
+
const handleResizeStop = (e: any, data: any) => {
|
|
94
|
+
setIsResizing(false);
|
|
95
|
+
if (onResize) {
|
|
96
|
+
onResize(e, data);
|
|
97
|
+
}
|
|
98
|
+
};
|
|
99
|
+
|
|
100
|
+
useEffect(() => {
|
|
101
|
+
if (width !== prevWidthRef.current) {
|
|
102
|
+
prevWidthRef.current = width;
|
|
103
|
+
setInnerWidth(width);
|
|
104
|
+
}
|
|
105
|
+
}, [width]);
|
|
106
|
+
|
|
107
|
+
const thStyle = {
|
|
108
|
+
boxShadow: isResizing ? '2px 2px 10px rgba(0, 0, 0, 0.3)' : 'none',
|
|
109
|
+
};
|
|
46
110
|
|
|
47
|
-
if (!width) {
|
|
48
|
-
return <th {...restProps} />;
|
|
49
|
-
}
|
|
50
111
|
return (
|
|
51
112
|
<Resizable
|
|
52
|
-
width={
|
|
113
|
+
width={innerWidth}
|
|
53
114
|
height={0}
|
|
54
|
-
|
|
55
|
-
|
|
115
|
+
handle={
|
|
116
|
+
<div>
|
|
117
|
+
<div
|
|
118
|
+
style={{
|
|
119
|
+
width: '10px',
|
|
120
|
+
height: '30px',
|
|
121
|
+
cursor: 'col-resize', // 拖动时改变鼠标样式
|
|
122
|
+
position: 'absolute',
|
|
123
|
+
zIndex: 10,
|
|
124
|
+
top: 0,
|
|
125
|
+
right: 0,
|
|
126
|
+
}}
|
|
127
|
+
onMouseDown={handleMouseDown}
|
|
128
|
+
// onDrag={handleDrag}
|
|
129
|
+
>
|
|
130
|
+
</div>
|
|
131
|
+
{isResizing && <div
|
|
132
|
+
id="text1"
|
|
133
|
+
style={{
|
|
134
|
+
position: 'fixed',
|
|
135
|
+
left: markerPosition.current.left, // 跟随鼠标偏移一点
|
|
136
|
+
top: markerPosition.current.top - 20,
|
|
137
|
+
backgroundColor: '#1890ff',
|
|
138
|
+
color: 'white',
|
|
139
|
+
borderRadius: '4px',
|
|
140
|
+
zIndex: 9999,
|
|
141
|
+
pointerEvents: 'none',
|
|
142
|
+
height: '100px',
|
|
143
|
+
width: 2
|
|
144
|
+
}}
|
|
145
|
+
>
|
|
146
|
+
</div>}
|
|
147
|
+
</div>
|
|
148
|
+
}
|
|
149
|
+
onResize={(e: any, data: any) => {handleresize(e, data, restProps.title)}}
|
|
150
|
+
onResizeStart={handleResizeStart}
|
|
151
|
+
onResizeStop={handleResizeStop}
|
|
152
|
+
draggableOpts={{
|
|
153
|
+
enableUserSelectHack: true,
|
|
154
|
+
grid: [20, 20],
|
|
155
|
+
axis: 'x',
|
|
156
|
+
bounds: 'parent',
|
|
157
|
+
}}
|
|
56
158
|
>
|
|
57
159
|
<th {...restProps} />
|
|
58
160
|
</Resizable>
|
|
@@ -111,7 +111,7 @@ export default () => {
|
|
|
111
111
|
x: '100%',
|
|
112
112
|
},
|
|
113
113
|
rowKey: 'id',
|
|
114
|
-
dataSource: [{},
|
|
114
|
+
dataSource: [{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{}],
|
|
115
115
|
pagination: {
|
|
116
116
|
showTotal: (total: any) => `共 ${total} 条`,
|
|
117
117
|
showQuickJumper: true,
|
|
@@ -291,17 +291,14 @@ export default () => {
|
|
|
291
291
|
]
|
|
292
292
|
const config = {
|
|
293
293
|
modeType: 'view',
|
|
294
|
-
scroll: {
|
|
295
|
-
x: '100%',
|
|
296
|
-
},
|
|
297
294
|
rowKey: 'id',
|
|
298
295
|
// initialDataSource: [{}, {}],
|
|
299
296
|
remoteDataSource: {
|
|
300
297
|
url: 'xxxxxx',
|
|
301
298
|
converter: ({ data }: any) => {
|
|
302
299
|
return {
|
|
303
|
-
list: [{},{}],
|
|
304
|
-
total:
|
|
300
|
+
list: [{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{}],
|
|
301
|
+
total: 40
|
|
305
302
|
};
|
|
306
303
|
},
|
|
307
304
|
},
|
|
@@ -310,8 +307,8 @@ export default () => {
|
|
|
310
307
|
showQuickJumper: true,
|
|
311
308
|
hideOnSinglePage: true,
|
|
312
309
|
current: 1,
|
|
313
|
-
pageSize:
|
|
314
|
-
total:
|
|
310
|
+
pageSize: 30,
|
|
311
|
+
total: 40,
|
|
315
312
|
size: 'small'
|
|
316
313
|
},
|
|
317
314
|
rowSelection: {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React, { useState } from 'react';
|
|
1
|
+
import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
|
2
2
|
import { Table as SulaTable, request } from 'bssula';
|
|
3
3
|
import { Resizable } from 'react-resizable';
|
|
4
4
|
import ColumnSetting from './columnSetting';
|
|
@@ -9,8 +9,9 @@ import {
|
|
|
9
9
|
Typography,
|
|
10
10
|
} from 'antd';
|
|
11
11
|
import ENUM from '@/utils/enumConfig';
|
|
12
|
-
import { handleBssulaColumnsSpecialParams, parseWidth } from '@/utils/utils';
|
|
12
|
+
import { handleBssulaColumnsSpecialParams, parseWidth, uuid } from '@/utils/utils';
|
|
13
13
|
const { Text } = Typography;
|
|
14
|
+
|
|
14
15
|
export default class ColumnSettingSulaTable extends React.Component {
|
|
15
16
|
sulaTableRef: React.RefObject<unknown>;
|
|
16
17
|
state: any;
|
|
@@ -126,21 +127,123 @@ export default class ColumnSettingSulaTable extends React.Component {
|
|
|
126
127
|
|
|
127
128
|
ResizeableTitle = (props: any) => {
|
|
128
129
|
const { onResize, width, ...restProps } = props;
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
130
|
+
|
|
131
|
+
const [innerWidth, setInnerWidth] = useState(width);
|
|
132
|
+
const [isResizing, setIsResizing] = useState(false); // 标记是否正在拖拽
|
|
133
|
+
const [isDragging, setIsDragging] = useState(false); // 标记拖拽句柄是否被拖拽
|
|
134
|
+
const [startX, setStartX] = useState(0); // 初始X坐标
|
|
135
|
+
const markerPosition = useRef({ left: 0, top: 0 });
|
|
136
|
+
const currentStart = useRef(0);
|
|
137
|
+
const uuidref = useRef(uuid());
|
|
138
|
+
|
|
139
|
+
const prevWidthRef = useRef(width);
|
|
140
|
+
|
|
141
|
+
const handleMouseDown = (e: any) => {
|
|
142
|
+
currentStart.current = e.clientX;
|
|
143
|
+
markerPosition.current = { left: e.clientX, top: e.clientY }
|
|
144
|
+
setIsResizing(true);
|
|
145
|
+
document.addEventListener('mousemove', handleMouseMove);
|
|
146
|
+
document.addEventListener('mouseup', handleMouseUp);
|
|
147
|
+
};
|
|
148
|
+
|
|
149
|
+
const handleMouseMove = (e: any) => {
|
|
150
|
+
e.stopPropagation();
|
|
151
|
+
e.preventDefault();
|
|
152
|
+
// 更新标记位置
|
|
153
|
+
markerPosition.current = { left: e.clientX, top: e.clientY }
|
|
154
|
+
const dom: HTMLElement | null = document.getElementById('text1');
|
|
155
|
+
|
|
156
|
+
if (dom && dom.style) {
|
|
157
|
+
dom.style.left = `${e.clientX}px`;
|
|
158
|
+
dom.style.top = `${e.clientY - 20}px`;
|
|
159
|
+
}
|
|
160
|
+
};
|
|
161
|
+
|
|
162
|
+
const handleMouseUp = (e: any) => {
|
|
163
|
+
document.removeEventListener('mousemove', handleMouseMove);
|
|
164
|
+
document.removeEventListener('mouseup', handleMouseUp);
|
|
165
|
+
setIsResizing(false);
|
|
166
|
+
};
|
|
167
|
+
|
|
168
|
+
const handleresize = (e: any, data: any, title: string) => {
|
|
169
|
+
const newWidth = data?.size?.width || 0;
|
|
170
|
+
setInnerWidth(newWidth); // 更新内部分宽度
|
|
171
|
+
};
|
|
172
|
+
|
|
173
|
+
const handleResizeStart = () => {
|
|
174
|
+
setIsResizing(true);
|
|
175
|
+
};
|
|
176
|
+
|
|
177
|
+
const handleResizeStop = (e: any, data: any) => {
|
|
178
|
+
setIsResizing(false);
|
|
179
|
+
if (onResize) {
|
|
180
|
+
onResize(e, data);
|
|
181
|
+
}
|
|
182
|
+
};
|
|
183
|
+
|
|
184
|
+
useEffect(() => {
|
|
185
|
+
if (width !== prevWidthRef.current) {
|
|
186
|
+
prevWidthRef.current = width;
|
|
187
|
+
setInnerWidth(width);
|
|
188
|
+
}
|
|
189
|
+
}, [width]);
|
|
190
|
+
|
|
191
|
+
const thStyle = {
|
|
192
|
+
boxShadow: isResizing ? '2px 2px 10px rgba(0, 0, 0, 0.3)' : 'none',
|
|
193
|
+
};
|
|
194
|
+
|
|
133
195
|
return (
|
|
134
196
|
<Resizable
|
|
135
|
-
width={
|
|
197
|
+
width={innerWidth}
|
|
136
198
|
height={0}
|
|
137
|
-
|
|
138
|
-
|
|
199
|
+
handle={
|
|
200
|
+
<div>
|
|
201
|
+
<div
|
|
202
|
+
style={{
|
|
203
|
+
width: '10px',
|
|
204
|
+
height: '30px',
|
|
205
|
+
cursor: 'col-resize', // 拖动时改变鼠标样式
|
|
206
|
+
position: 'absolute',
|
|
207
|
+
zIndex: 10,
|
|
208
|
+
top: 0,
|
|
209
|
+
right: 0,
|
|
210
|
+
}}
|
|
211
|
+
onMouseDown={handleMouseDown}
|
|
212
|
+
// onDrag={handleDrag}
|
|
213
|
+
>
|
|
214
|
+
</div>
|
|
215
|
+
{isResizing && <div
|
|
216
|
+
id="text1"
|
|
217
|
+
style={{
|
|
218
|
+
position: 'fixed',
|
|
219
|
+
left: markerPosition.current.left, // 跟随鼠标偏移一点
|
|
220
|
+
top: markerPosition.current.top - 20,
|
|
221
|
+
backgroundColor: '#1890ff',
|
|
222
|
+
color: 'white',
|
|
223
|
+
borderRadius: '4px',
|
|
224
|
+
zIndex: 9999,
|
|
225
|
+
pointerEvents: 'none',
|
|
226
|
+
height: '100px',
|
|
227
|
+
width: 2
|
|
228
|
+
}}
|
|
229
|
+
>
|
|
230
|
+
</div>}
|
|
231
|
+
</div>
|
|
232
|
+
}
|
|
233
|
+
onResize={(e: any, data: any) => {handleresize(e, data, restProps.title)}}
|
|
234
|
+
onResizeStart={handleResizeStart}
|
|
235
|
+
onResizeStop={handleResizeStop}
|
|
236
|
+
draggableOpts={{
|
|
237
|
+
enableUserSelectHack: true,
|
|
238
|
+
grid: [20, 20],
|
|
239
|
+
axis: 'x',
|
|
240
|
+
bounds: 'parent',
|
|
241
|
+
}}
|
|
139
242
|
>
|
|
140
243
|
<th {...restProps} />
|
|
141
244
|
</Resizable>
|
|
142
245
|
);
|
|
143
|
-
}
|
|
246
|
+
};
|
|
144
247
|
|
|
145
248
|
getTableScrollXWidth = (cols: any[]) => {
|
|
146
249
|
if (cols.every((item: any) => item.width)) {
|
|
@@ -197,6 +300,7 @@ export default class ColumnSettingSulaTable extends React.Component {
|
|
|
197
300
|
...scroll,
|
|
198
301
|
x: restProps.overScrollX || this.getTableScrollXWidth(showCol)
|
|
199
302
|
},
|
|
303
|
+
sticky: true,
|
|
200
304
|
...(
|
|
201
305
|
showSummary ? { summary: showSummary } : {}
|
|
202
306
|
)
|
|
@@ -9,6 +9,11 @@
|
|
|
9
9
|
.ant-select-clear {
|
|
10
10
|
right: 33px;
|
|
11
11
|
}
|
|
12
|
+
|
|
13
|
+
// 解决多选宽度不够 滑动会白一块的问题
|
|
14
|
+
.ant-select-multiple.ant-select-show-arrow .ant-select-selector, .ant-select-multiple.ant-select-allow-clear .ant-select-selector {
|
|
15
|
+
padding-right: 28px;
|
|
16
|
+
}
|
|
12
17
|
}
|
|
13
18
|
|
|
14
19
|
&_expand_button {
|
|
@@ -20,7 +25,6 @@
|
|
|
20
25
|
cursor: pointer;
|
|
21
26
|
font-size: 14px;
|
|
22
27
|
font-weight: bolder;
|
|
23
|
-
background: #fafafa;
|
|
24
28
|
|
|
25
29
|
span {
|
|
26
30
|
position: absolute;
|
|
@@ -32,6 +36,8 @@
|
|
|
32
36
|
&_expand_button:hover {
|
|
33
37
|
background-color: @primary-color;
|
|
34
38
|
color: #fff;
|
|
39
|
+
border-top-right-radius: 2px;
|
|
40
|
+
border-bottom-right-radius: 2px;
|
|
35
41
|
}
|
|
36
42
|
&_expand_button_disabled:hover {
|
|
37
43
|
background-color: transparent;
|