@para-ui/core 3.0.7 → 3.0.9

package/Table/index.js

@@ -4,9 +4,10 @@ import { _ as _slicedToArray } from '../_verture/slicedToArray-d7722f4b.js';
 import { r as regenerator } from '../_verture/index-342379c6.js';
 import { _ as __rest, a as __awaiter } from '../_verture/tslib.es6-55ed4bd2.js';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { useState, useEffect, useMemo, useCallback, Fragment as Fragment$1, useRef } from 'react';
+import { useRef, useState, useEffect, useMemo, useCallback, Fragment as Fragment$1 } from 'react';
 import { Get, Post, DeepClone, GetBrowserClass, ArrayToObject, Cancel } from '@paraview/lib';
 import { s as styleInject } from '../_verture/style-inject.es-300983ab.js';
+import { $ as $prefixCls } from '../_verture/constant-bf34e6fa.js';
 import { Popover } from '../Popover/index.js';
 import { Checkbox } from '../Checkbox/index.js';
 import { Button } from '../Button/index.js';
@@ -16,7 +17,6 @@ import SolidArrowUp from '@para-ui/icons/UpTriangleF';
 import SolidArrowDown from '@para-ui/icons/DownTriangleF';
 import Panel from '@para-ui/icons/Panel';
 import { u as useFormatMessage } from '../_verture/useFormatMessage-f4452258.js';
-import { $ as $prefixCls } from '../_verture/constant-bf34e6fa.js';
 import { _ as _defineProperty } from '../_verture/defineProperty-0590dc61.js';
 import { Radio } from '../Radio/index.js';
 import Empty from '../Empty/index.js';
@@ -172,6 +172,25 @@ var setLocalStorageSelectHead = function setLocalStorageSelectHead(key, val) {
   headJson[key] = val;
   window.localStorage.setItem('_paraui_table_head', JSON.stringify(headJson));
 };
+/**
+ * 查找元素
+ * @param el 当前元素
+ * @param selector 查找元素class
+ */
+
+var closest = function closest(el, selector) {
+  var matchesSelector = el.matches || el.webkitMatchesSelector || el.mozMatchesSelector || el.msMatchesSelector;
+
+  while (el) {
+    if (matchesSelector.call(el, selector)) {
+      break;
+    }
+
+    el = el.parentElement;
+  }
+
+  return el;
+};
 
 var css_248z$7 = ".table-head-element {\n  display: table-header-group;\n}";
 styleInject(css_248z$7);
@@ -219,39 +238,150 @@ var TrElement = function TrElement(props) {
   }));
 };
 
-var css_248z$5 = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2021/10/20 下午2:08\n* @description color\n*/\n/**\n* @author linhd\n* @date 2022/8/12 5:28 PM\n* @description 全局css前缀\n*/\n.th-element {\n  letter-spacing: 0.01071em;\n  line-height: 1.43;\n  padding: 0;\n  font-weight: 700;\n  font-size: 14px;\n  background-color: rgb(248, 249, 251);\n  border-bottom: 1px solid rgba(171, 176, 185, 0.12);\n  height: 100%;\n}\n.th-element:first-child {\n  border-top-left-radius: 4px;\n}\n.th-element:last-child {\n  border-top-right-radius: 4px;\n}\n.th-element:hover {\n  background-color: rgb(237, 241, 249);\n}\n.th-element.table-operate.table-operate-small {\n  width: 112px;\n}\n.th-element.table-operate.table-operate-small > .table-header-box {\n  width: 112px;\n}";
+var css_248z$5 = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2021/10/20 下午2:08\n* @description color\n*/\n/**\n* @author linhd\n* @date 2022/8/12 5:28 PM\n* @description 全局css前缀\n*/\n.th-element {\n  letter-spacing: 0.01071em;\n  line-height: 1.43;\n  padding: 0;\n  font-weight: 700;\n  font-size: 14px;\n  background-color: rgb(248, 249, 251);\n  border-bottom: 1px solid rgba(171, 176, 185, 0.12);\n  height: 100%;\n}\n.th-element.th-element-draggable {\n  position: relative;\n}\n.th-element:first-child {\n  border-top-left-radius: 4px;\n}\n.th-element:last-child {\n  border-top-right-radius: 4px;\n}\n.th-element:hover {\n  background-color: rgb(237, 241, 249);\n}\n.th-element.table-operate.table-operate-small {\n  width: 112px;\n}\n.th-element.table-operate.table-operate-small > .table-header-box {\n  width: 112px;\n}\n.th-element > .th-element-draggable-box {\n  width: 6px;\n  height: 100%;\n  position: absolute;\n  right: 0;\n  top: 0;\n}\n.th-element:hover > .th-element-draggable-box {\n  background-color: rgba(54, 102, 214, 0.2);\n  cursor: ew-resize;\n}";
 styleInject(css_248z$5);
 
 var ThElement = function ThElement(props) {
   var className = props.className,
       style = props.style,
       children = props.children,
-      otherProps = __rest(props, ["className", "style", "children"]);
+      draggable = props.draggable,
+      _props$lineWidth = props.lineWidth,
+      lineWidth = _props$lineWidth === void 0 ? 80 : _props$lineWidth,
+      headCell = props.headCell,
+      onDragDown = props.onDragDown,
+      otherProps = __rest(props, ["className", "style", "children", "draggable", "lineWidth", "headCell", "onDragDown"]);
+
+  var domRef = useRef(null);
+  var constData = useRef({
+    startX: 0,
+    moveX: 0,
+    table: null,
+    tableContainer: null,
+    lineDom: null,
+    th: null
+  }); // 处理最小宽度
+
+  var handMinWidth = function handMinWidth(e) {
+    var minWidth = lineWidth; // 自身设置列宽度小于默认列宽度,最小取自身的
+
+    if (headCell === null || headCell === void 0 ? void 0 : headCell.width) {
+      var width = getStringInNumber(headCell.width);
+      if (width < minWidth) minWidth = width;
+    }
+
+    var thWidth = constData.current.th.offsetWidth; // th宽度
+
+    var moveX = e.clientX - constData.current.startX; // 移动的位置
+
+    var handWidth = thWidth + moveX;
+    var initX = constData.current.th.offsetLeft + thWidth;
+    var left = initX + moveX; // 移动以后的宽度小于最小宽度,取最小宽度
+
+    if (handWidth < minWidth) {
+      // 超出大小限制
+      handWidth = minWidth;
+      left = constData.current.th.offsetLeft + handWidth;
+    }
+
+    return {
+      width: handWidth,
+      left: left // 定位线居左距离
+
+    };
+  }; // 鼠标移动事件
+
+
+  var mousemove = function mousemove(e) {
+    var result = handMinWidth(e);
+    constData.current.lineDom.style.left = result.left + 'px';
+  }; // 鼠标抬起
+
+
+  var mouseup = function mouseup(e) {
+    var _a, _b;
+
+    var dom = domRef.current;
+    var result = handMinWidth(e);
+    dom.style.width = result.width + 'px';
+    (_a = constData.current.tableContainer) === null || _a === void 0 ? void 0 : _a.removeChild(constData.current.lineDom);
+    (_b = constData.current.table) === null || _b === void 0 ? void 0 : _b.classList.remove("".concat($prefixCls, "-table-draggable"));
+    onDragDown && onDragDown(result);
+    window.removeEventListener('mousemove', mousemove);
+    window.removeEventListener('mouseup', mouseup);
+  }; // 鼠标按下
+
+
+  var onMouseDown = function onMouseDown(e) {
+    var _a;
+
+    constData.current.startX = e.clientX;
+    constData.current.table = closest(domRef.current, ".".concat($prefixCls, "-table"));
+    constData.current.tableContainer = closest(domRef.current, ".".concat($prefixCls, "-table .table-container"));
+    constData.current.th = closest(domRef.current, 'th');
+    (_a = constData.current.table) === null || _a === void 0 ? void 0 : _a.classList.add("".concat($prefixCls, "-table-draggable"));
+    appendLine();
+    window.addEventListener('mousemove', mousemove);
+    window.addEventListener('mouseup', mouseup);
+  };
+  /** 添加定位线 */
+
+
+  var appendLine = function appendLine() {
+    if (!constData.current.tableContainer || !constData.current.th) return;
+    var tableDom = closest(domRef.current, ".".concat($prefixCls, "-table .table-container table"));
+    var tableContainerHeight = constData.current.tableContainer.offsetHeight;
+    var tableDomHeight = tableDom.offsetHeight;
+    var div = document.createElement('div');
+    div.setAttribute('class', 'table-pos-line'); // 定位线高度
+
+    div.style.height = (tableDomHeight > tableContainerHeight ? tableContainerHeight : tableDomHeight) + 'px'; // 定位线的居左距离
+
+    div.style.left = constData.current.th.offsetLeft + constData.current.th.offsetWidth + 'px';
+    constData.current.lineDom = div;
+    constData.current.tableContainer.appendChild(div);
+  };
+  /** 拖动元素 */
+
+
+  var handDrag = function handDrag() {
+    if (!draggable) return null;
+    return jsx("div", {
+      className: "th-element-draggable-box",
+      onMouseDown: onMouseDown
+    });
+  }; // 处理className
+
 
   var handClass = function handClass() {
     var str = 'th-element';
+    if (draggable) str += ' th-element-draggable';
     if (className) str += ' ' + className;
     return str;
   };
 
-  return jsx("th", Object.assign({
+  return jsxs("th", Object.assign({
     className: handClass(),
     style: style
   }, otherProps, {
-    children: children
+    ref: domRef
+  }, {
+    children: [children, handDrag()]
   }));
 };
 
 var en = {
   empty: 'Empty',
   determine: 'Ok',
-  restoreDefault: 'Restore default'
+  restoreDefault: 'Restore default',
+  serial: 'Sort'
 };
 
 var zh = {
   empty: '清空',
   determine: '确定',
-  restoreDefault: '恢复默认'
+  restoreDefault: '恢复默认',
+  serial: '序号'
 };
 
 var localeJson = {
@@ -285,7 +415,11 @@ var TableHead$1 = function TableHead(props) {
       fixedTable = props.fixedTable,
       fixedColumn = props.fixedColumn,
       posFixed = props.posFixed,
-      beyondText = props.beyondText;
+      beyondText = props.beyondText,
+      lineWidth = props.lineWidth,
+      dragColumn = props.dragColumn,
+      changeColumnWidth = props.changeColumnWidth,
+      headDataConfig = props.headDataConfig;
 
   var _useState = useState(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -554,7 +688,8 @@ var TableHead$1 = function TableHead(props) {
 
       return jsx(ThElement, Object.assign({
         align: "center",
-        className: handCls()
+        className: handCls(),
+        draggable: false
       }, {
         children: jsx("div", Object.assign({
           className: "table-header-box"
@@ -587,7 +722,8 @@ var TableHead$1 = function TableHead(props) {
 
       return jsx(ThElement, Object.assign({
         align: "center",
-        className: handCls()
+        className: handCls(),
+        draggable: false
       }, {
         children: jsx("div", {
           className: "table-header-box"
@@ -614,7 +750,8 @@ var TableHead$1 = function TableHead(props) {
 
       return jsx(ThElement, Object.assign({
         align: "center",
-        className: handCls()
+        className: handCls(),
+        draggable: false
       }, {
         children: jsx("div", {
           className: "table-header-box"
@@ -670,6 +807,22 @@ var TableHead$1 = function TableHead(props) {
         }))]
       }))]
     }));
+  }; // 表格列拖拽放下
+
+
+  var onDragDown = function onDragDown(headCell) {
+    return function (result) {
+      changeColumnWidth && changeColumnWidth(headCell, result);
+    };
+  }; // 获取宽度
+
+
+  var getWidth = function getWidth(item) {
+    var w = item.width || '';
+    var name = item.name || '';
+    var wDrag = headDataConfig[name] && headDataConfig[name].width;
+    if (wDrag) w = wDrag + 'px';
+    return w;
   }; // 内容列memo
 
 
@@ -687,7 +840,7 @@ var TableHead$1 = function TableHead(props) {
       if (item.className) str += item.className;
 
       if (fixedColumn && item.fixed) {
-        str = 'table-fixed-dom-' + item.fixed; // 固定左边,判断是否是最后一个
+        str += ' table-fixed-dom-' + item.fixed; // 固定左边,判断是否是最后一个
 
         if (item.fixed === 'left' && item.paraui_fixed_left_last) {
           str += ' table-fixed-dom-left-last';
@@ -704,7 +857,7 @@ var TableHead$1 = function TableHead(props) {
 
     var handStyle = function handStyle(item) {
       var json = {
-        width: item.width
+        width: getWidth(item)
       };
 
       if (fixedColumn && item.fixed && item.width) {
@@ -738,13 +891,25 @@ var TableHead$1 = function TableHead(props) {
           })
         }))
       }));
+    }; // 处理拖拽
+
+
+    var handDrag = function handDrag(item) {
+      if (item.name === 'table-serial-number') return false; // 序号不拖拽
+
+      if (dragColumn && item.drag !== false) return true;
+      return false;
     };
 
     return headData.map(function (headCell, index) {
       return jsx(ThElement, Object.assign({
         className: handCls(headCell),
         align: headCell.align || align,
-        style: handStyle(headCell)
+        style: handStyle(headCell),
+        draggable: handDrag(headCell),
+        headCell: headCell,
+        onDragDown: onDragDown(headCell),
+        lineWidth: lineWidth
       }, {
         children: jsxs("div", Object.assign({
           className: handCellClass(headCell)
@@ -777,7 +942,7 @@ var TableHead$1 = function TableHead(props) {
         }))
       }), headCell.name || index);
     });
-  }, [headData, sortTable, filter, orderFieldArr, orderTypeArr, align, filterHead, selectFilterCom, beyondText, selectFilter, fixedColumn]); // 操作栏memo
+  }, [headData, sortTable, filter, orderFieldArr, orderTypeArr, align, filterHead, selectFilterCom, beyondText, selectFilter, fixedColumn, lineWidth, dragColumn, changeColumnWidth, headDataConfig]); // 操作栏memo
 
   var TableOperateMemo = useMemo(function () {
     if (operate) {
@@ -811,7 +976,8 @@ var TableHead$1 = function TableHead(props) {
       return jsx(ThElement, Object.assign({
         align: operate.align || align,
         style: handStyle(),
-        className: handCls()
+        className: handCls(),
+        draggable: false
       }, {
         children: jsx("div", Object.assign({
           className: "table-header-box"
@@ -893,7 +1059,8 @@ var TableHead$1 = function TableHead(props) {
       children: jsx(ThElement, Object.assign({
         align: "center",
         className: handCls(),
-        onClick: clickShowColums
+        onClick: clickShowColums,
+        draggable: false
       }, {
         children: jsx("div", Object.assign({
           className: "table-header-box"
@@ -1349,7 +1516,7 @@ var TableBody = function TableBody(props) {
     }));
   }, [expandable, expandableRow, rowKey, disabledExpandJson, onExpand, fixedColumn]); // 表格一行内容useCallback
 
-  var TableContentUseCallback = useCallback(function (row) {
+  var TableContentUseCallback = useCallback(function (row, rowIndex) {
     var params = {
       orderFieldArr: orderFieldArr,
       orderTypeArr: orderTypeArr
@@ -1376,7 +1543,7 @@ var TableBody = function TableBody(props) {
       }
 
       if (item.fixed && fixedColumn) {
-        str = 'table-fixed-dom-' + item.fixed; // 固定左边,判断是否是最后一个
+        str += ' table-fixed-dom-' + item.fixed; // 固定左边,判断是否是最后一个
 
         if (item.fixed === 'left' && item.paraui_fixed_left_last) {
           str += ' table-fixed-dom-left-last';
@@ -1410,8 +1577,8 @@ var TableBody = function TableBody(props) {
     return tableCell ? tableCell(row, params) : headData.map(function (item, index) {
       var text = row[item.name];
       var colSpan = 1;
-      if (item.render) text = item.render(row, item, row[item.name], index);
-      if (formatter) text = formatter(row, item, row[item.name], index); // 存在显示列,最后一列占两格
+      if (item.render) text = item.render(row, item, row[item.name], index, rowIndex);
+      if (formatter) text = formatter(row, item, row[item.name], index, rowIndex); // 存在显示列,最后一列占两格
 
       if (showColumns === 'inside' && !operate && index === headData.length - 1) {
         colSpan = 2;
@@ -1524,7 +1691,7 @@ var TableBody = function TableBody(props) {
           children: [jsxs(TrElement, Object.assign({
             className: "table-body-row"
           }, {
-            children: [TableCheckCallback(row), TableRadioCallback(row), TableExpandableMemo(row), TableContentUseCallback(row), TableOperateUseCallback(row)]
+            children: [TableCheckCallback(row), TableRadioCallback(row), TableExpandableMemo(row), TableContentUseCallback(row, index), TableOperateUseCallback(row)]
           }), row[rowKey]), TableExpandableContentUseCallback(row)]
         }, index);
       })
@@ -1635,7 +1802,7 @@ var TableElement = function TableElement(props) {
   }));
 };
 
-var css_248z = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2021/10/20 下午2:08\n* @description color\n*/\n/**\n* @author linhd\n* @date 2022/8/12 5:28 PM\n* @description 全局css前缀\n*/\n.paraui-v3-table {\n  width: 100%;\n  height: 100%;\n  overflow: auto;\n  background-color: white;\n  font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, PingFang SC, Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, WenQuanYi Micro Hei, sans-serif;\n  font-size: 14px;\n  font-weight: 400;\n}\n.paraui-v3-table.paraui-v3-table-fixed-table > .table-contain > table {\n  table-layout: fixed;\n}\n.paraui-v3-table.paraui-v3-table-fixed-cloumn > .table-contain > table .table-checkbox {\n  left: 0;\n}\n.paraui-v3-table.paraui-v3-table-fixed-cloumn > .table-contain > table .table-radio {\n  left: 0;\n}\n.paraui-v3-table.paraui-v3-table-fixed-cloumn > .table-contain > table .table-expandable {\n  left: 0;\n}\n.paraui-v3-table.paraui-v3-table-fixed-cloumn.paraui-v3-table-radio.paraui-v3-table-check .table-radio {\n  left: 48px;\n}\n.paraui-v3-table.paraui-v3-table-fixed-cloumn.paraui-v3-table-expandable.paraui-v3-table-check .table-expandable {\n  left: 48px;\n}\n.paraui-v3-table.paraui-v3-table-fixed-cloumn.paraui-v3-table-expandable.paraui-v3-table-check.paraui-v3-table-radio .table-expandable {\n  left: 80px;\n}\n.paraui-v3-table.paraui-v3-table-no-data > .table-container > table {\n  height: 100%;\n}\n.paraui-v3-table.paraui-v3-table-load.paraui-v3-table-no-data > .table-container > table {\n  height: auto;\n}\n.paraui-v3-table.paraui-v3-table-pagination > .table-contain {\n  height: calc(100% - 60px);\n}\n.paraui-v3-table.paraui-v3-table-pagination.table-load-more > .table-contain {\n  height: 100%;\n}\n.paraui-v3-table.paraui-v3-table-load-more.paraui-v3-table-pagination > .table-contain {\n  height: 100%;\n}\n.paraui-v3-table > .table-contain {\n  height: 100%;\n  position: relative;\n}\n.paraui-v3-table > .table-contain > table {\n  height: auto;\n}\n.paraui-v3-table > .table-contain > table .table-checkbox > label {\n  vertical-align: middle;\n}\n.paraui-v3-table > .table-contain > table .table-checkbox .table-header-box {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.paraui-v3-table > .table-contain > table .table-radio > label {\n  vertical-align: middle;\n}\n.paraui-v3-table > .table-contain > table .table-radio .table-header-box {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.paraui-v3-table > .table-contain > table .table-expandable > svg {\n  vertical-align: middle;\n}\n.paraui-v3-table > .table-contain > table > .table-head {\n  width: 100%;\n  white-space: nowrap;\n}\n.paraui-v3-table > .table-contain > table > .table-head > tr th {\n  height: 50px;\n}\n.paraui-v3-table > .table-contain > table > .table-head.table-head-scroll tr th {\n  max-width: 240px;\n}\n.paraui-v3-table > .table-contain > table > .table-head .table-header-box {\n  height: 49px;\n  line-height: 49px;\n  position: relative;\n  padding: 0 8px;\n  display: flex;\n}\n.paraui-v3-table > .table-contain > table > .table-head .table-header-box > .table-header-title {\n  max-width: 100%;\n  padding-right: 8px;\n  display: flex;\n}\n.paraui-v3-table > .table-contain > table > .table-head .table-header-box > .table-header-title > .table-header-title-label {\n  width: 100%;\n  color: rgba(46, 55, 67, 0.7);\n  font-weight: 700;\n  font-size: 14px;\n}\n.paraui-v3-table > .table-contain > table > .table-head .table-header-box > .table-sort-svg {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.paraui-v3-table > .table-contain > table > .table-head .table-header-box > .table-sort-svg > span {\n  width: 20px;\n  height: 20px;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  cursor: pointer;\n  border-radius: 2px;\n}\n.paraui-v3-table > .table-contain > table > .table-head .table-header-box > .table-sort-svg > span:hover {\n  background-color: rgb(227, 234, 247);\n}\n.paraui-v3-table > .table-contain > table > .table-head .table-header-box > .table-sort-svg > span:hover > svg {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-table > .table-contain > table > .table-head .table-header-box > .table-sort-svg > span > svg {\n  font-size: 12px;\n  color: rgba(46, 55, 67, 0.7);\n}\n.paraui-v3-table > .table-contain > table > .table-head .table-header-box > .table-sort-svg > span > .up-svg {\n  position: relative;\n  top: 2px;\n}\n.paraui-v3-table > .table-contain > table > .table-head .table-header-box > .table-sort-svg > span > .down-svg {\n  position: relative;\n  top: -3px;\n}\n.paraui-v3-table > .table-contain > table > .table-head .table-header-box > .table-header-filter {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.paraui-v3-table > .table-contain > table > .table-head .table-header-box > .table-header-filter > span {\n  width: 20px;\n  height: 20px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  cursor: pointer;\n  border-radius: 2px;\n}\n.paraui-v3-table > .table-contain > table > .table-head .table-header-box > .table-header-filter > span:hover {\n  background-color: rgb(227, 234, 247);\n}\n.paraui-v3-table > .table-contain > table > .table-head .table-header-box > .table-header-filter > span:hover > svg {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-table > .table-contain > table > .table-head .table-header-box > .table-header-filter > span > svg {\n  font-size: 14px;\n  color: rgba(46, 55, 67, 0.7);\n}\n.paraui-v3-table > .table-contain > table > .table-head .table-header-box > .table-header-filter.table-header-filter-show > span > svg {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-table > .table-contain > table > .table-head .table-header-box > .table-header-filter.table-header-filter-select > span > svg {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-table > .table-contain > table > .table-head .table-header-box > .table-header-filter.table-header-filter-select > span:after {\n  position: absolute;\n  width: 4px;\n  height: 4px;\n  border-radius: 50%;\n  background-color: rgb(235, 96, 84);\n  content: \"\";\n  right: 3px;\n  top: 2px;\n}\n.paraui-v3-table > .table-contain > table > .table-head .table-header-box.table-header-box-sort > .table-header-title {\n  max-width: calc(100% - 20px);\n}\n.paraui-v3-table > .table-contain > table > .table-head .table-header-box.table-header-box-filter > .table-header-title {\n  max-width: calc(100% - 20px);\n}\n.paraui-v3-table > .table-contain > table > .table-head .table-header-box.table-header-box-sort.table-header-box-filter > .table-header-title {\n  max-width: calc(100% - 40px);\n}\n.paraui-v3-table > .table-contain > table > .table-head .table-header-box.table-header-box-sort-asc > .table-sort-svg > span > .up-svg {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-table > .table-contain > table > .table-head .table-header-box.table-header-box-sort-desc > .table-sort-svg > span > .down-svg {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-table > .table-contain > table > .table-head .show-colums {\n  width: 56px;\n  cursor: pointer;\n  border-left: 1px solid rgba(171, 176, 185, 0.12);\n  right: 0;\n}\n.paraui-v3-table > .table-contain > table > .table-head .show-colums .table-header-box {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 55px;\n}\n.paraui-v3-table > .table-contain > table > .table-head .show-colums .table-header-box > svg {\n  font-size: 24px;\n  color: rgba(46, 55, 67, 0.7);\n}\n.paraui-v3-table > .table-contain > table > .table-head .show-colums .table-header-box:hover > svg {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-table > .table-contain > table > .table-head.table-head-no-btn tr th:first-child .table-header-box {\n  padding-left: 16px;\n}\n.paraui-v3-table > .table-contain > table > .table-head .table-head-btn {\n  width: 32px;\n  padding: 0;\n}\n.paraui-v3-table > .table-contain > table > .table-head .table-head-btn > .table-header-box {\n  width: 32px;\n}\n.paraui-v3-table > .table-contain > table > .table-head .table-head-btn:first-child {\n  width: 48px;\n}\n.paraui-v3-table > .table-contain > table > .table-head .table-head-btn:first-child > .table-header-box {\n  width: 48px;\n}\n.paraui-v3-table > .table-contain > table > .table-body {\n  width: 100%;\n}\n.paraui-v3-table > .table-contain > table > .table-body.table-body-scroll tr td {\n  max-width: 240px;\n}\n.paraui-v3-table > .table-contain > table > .table-body tr {\n  height: 56px;\n}\n.paraui-v3-table > .table-contain > table > .table-body tr td {\n  background-color: white;\n  color: rgba(46, 55, 67, 0.7);\n}\n.paraui-v3-table > .table-contain > table > .table-body tr:nth-of-type(2n) td {\n  background-color: rgb(249, 250, 251);\n}\n.paraui-v3-table > .table-contain > table > .table-body tr:hover td {\n  background-color: rgb(237, 241, 249);\n}\n.paraui-v3-table > .table-contain > table > .table-body tr .table-expandable > svg {\n  transition: all 0.3s;\n  cursor: pointer;\n  font-size: 16px;\n  color: rgba(46, 55, 67, 0.7);\n}\n.paraui-v3-table > .table-contain > table > .table-body tr .table-expandable > svg:hover {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-table > .table-contain > table > .table-body tr .table-expandable > .expand {\n  transform: rotate(180deg);\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-table > .table-contain > table > .table-body .more-table-row {\n  cursor: pointer;\n}\n.paraui-v3-table > .table-contain > table > .table-body .more-table-row .more-btn {\n  color: rgb(54, 102, 214);\n  font-size: 14px;\n}\n.paraui-v3-table > .table-contain > table > .table-body .more-table-row > .td-element {\n  bottom: 0;\n  background: white;\n  box-shadow: 4px -4px 8px 0px rgba(171, 176, 185, 0.12);\n}\n.paraui-v3-table > .table-contain > table > .table-body.table-body-no-btn tr td:first-child {\n  padding-left: 16px;\n}\n.paraui-v3-table > .table-contain > table > .table-body.table-body-no-btn > .table-no-data > td:first-child {\n  padding: 0;\n}\n.paraui-v3-table > .table-contain > table > .table-body .table-body-btn {\n  width: 32px;\n  padding: 0;\n}\n.paraui-v3-table > .table-contain > table > .table-body .table-body-btn:first-child {\n  width: 48px;\n}\n.paraui-v3-table > .table-contain > table > .table-body > .table-no-data {\n  height: calc(100% - 50px);\n}\n.paraui-v3-table > .table-contain > table > .table-body > .table-no-data:hover td {\n  background-color: white;\n}\n.paraui-v3-table > .table-contain > table > .table-body > .table-no-data > td {\n  padding: 56px 0 0 0;\n}\n.paraui-v3-table > .table-pagination {\n  width: 100%;\n  height: 60px;\n  padding-right: 10px;\n  display: flex;\n  align-items: flex-end;\n  justify-content: flex-end;\n}\n\n.paraui-v3-table-show-colums-popover > .component-popover-content {\n  width: 200px;\n}\n.paraui-v3-table-show-colums-popover > .component-popover-content .show-colums-select > .show-colums-select-box {\n  padding-top: 8px;\n  max-height: 224px;\n  overflow-y: auto;\n}\n.paraui-v3-table-show-colums-popover > .component-popover-content .show-colums-select > .show-colums-select-box > .show-colums-select-item {\n  height: 36px;\n  line-height: 36px;\n  cursor: pointer;\n  display: flex;\n  padding: 0 4px;\n}\n.paraui-v3-table-show-colums-popover > .component-popover-content .show-colums-select > .show-colums-select-box > .show-colums-select-item > label {\n  width: 32px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.paraui-v3-table-show-colums-popover > .component-popover-content .show-colums-select > .show-colums-select-box > .show-colums-select-item > span {\n  color: rgb(46, 55, 67);\n  font-size: 14px;\n  display: inline-block;\n  width: calc(100% - 32px);\n}\n.paraui-v3-table-show-colums-popover > .component-popover-content .show-colums-select > .show-colums-select-box > .show-colums-select-item:hover > span {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-table-show-colums-popover > .component-popover-content .show-colums-select > .show-colums-select-box > .show-colums-select-item:hover > label .checkbox-box-inner {\n  border-color: rgb(54, 102, 214);\n}\n.paraui-v3-table-show-colums-popover > .component-popover-content .show-colums-select > .show-colums-select-box > .show-colums-select-item.show-colums-select-item-select > span {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-table-show-colums-popover > .component-popover-content .show-colums-select > .show-colums-select-box > .show-colums-select-item.show-colums-select-item-select > label .checkbox-box-inner {\n  border-color: rgb(54, 102, 214);\n}\n.paraui-v3-table-show-colums-popover > .component-popover-content .show-colums-select > .show-colums-select-footer {\n  height: 45px;\n  border-top: 1px solid rgba(171, 176, 185, 0.2);\n  text-align: center;\n}\n.paraui-v3-table-show-colums-popover > .component-popover-content .show-colums-select > .show-colums-select-footer > button {\n  width: 100%;\n  height: 100%;\n  border: 0;\n}\n.paraui-v3-table-show-colums-popover > .component-popover-content .show-colums-select > .show-colums-select-footer > button > span {\n  font-size: 14px;\n}\n.paraui-v3-table-show-colums-popover > .component-popover-content .show-colums-select > .show-colums-select-footer > button > span > span {\n  margin-right: 5px;\n  color: rgb(46, 55, 67);\n}\n.paraui-v3-table-show-colums-popover > .component-popover-content .show-colums-select > .show-colums-select-footer > button > span > span svg {\n  font-size: 14px;\n  color: rgb(46, 55, 67);\n}\n.paraui-v3-table-show-colums-popover > .component-popover-content .show-colums-select > .show-colums-select-footer > button:hover > span > span svg {\n  color: rgb(54, 102, 214);\n}\n\n.paraui-v3-filter-popover > .component-popover-content {\n  width: 200px;\n}\n.paraui-v3-filter-popover > .component-popover-content .filter-select > .filter-select-box {\n  padding-top: 8px;\n  max-height: 224px;\n  overflow-y: auto;\n}\n.paraui-v3-filter-popover > .component-popover-content .filter-select > .filter-select-box > .filter-select-item {\n  height: 36px;\n  line-height: 36px;\n  cursor: pointer;\n  display: flex;\n  padding: 0 4px;\n}\n.paraui-v3-filter-popover > .component-popover-content .filter-select > .filter-select-box > .filter-select-item > label {\n  width: 32px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.paraui-v3-filter-popover > .component-popover-content .filter-select > .filter-select-box > .filter-select-item > span {\n  color: rgb(46, 55, 67);\n  font-size: 14px;\n  display: inline-block;\n  width: calc(100% - 32px);\n}\n.paraui-v3-filter-popover > .component-popover-content .filter-select > .filter-select-box > .filter-select-item:hover > span {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-filter-popover > .component-popover-content .filter-select > .filter-select-box > .filter-select-item:hover > label .checkbox-box-inner {\n  border-color: rgb(54, 102, 214);\n}\n.paraui-v3-filter-popover > .component-popover-content .filter-select > .filter-select-box > .filter-select-item.filter-select-item-select > span {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-filter-popover > .component-popover-content .filter-select > .filter-select-box > .filter-select-item.filter-select-item-select > label .checkbox-box-inner {\n  border-color: rgb(54, 102, 214);\n}\n.paraui-v3-filter-popover > .component-popover-content .filter-select > .filter-select-footer {\n  height: 45px;\n  border-top: 1px solid rgba(171, 176, 185, 0.2);\n  text-align: center;\n}\n.paraui-v3-filter-popover > .component-popover-content .filter-select > .filter-select-footer > button {\n  width: 50%;\n  height: 100%;\n  border: 0;\n}\n.paraui-v3-filter-popover > .component-popover-content .filter-select > .filter-select-footer > button > span {\n  font-size: 14px;\n}\n.paraui-v3-filter-popover > .component-popover-content .filter-select > .filter-select-footer > button > span > span {\n  margin-right: 5px;\n  color: rgb(46, 55, 67);\n}\n.paraui-v3-filter-popover > .component-popover-content .filter-select > .filter-select-footer > button > span > span svg {\n  font-size: 14px;\n  color: rgb(46, 55, 67);\n}\n.paraui-v3-filter-popover > .component-popover-content .filter-select > .filter-select-footer > button:hover > span > span svg {\n  color: rgb(54, 102, 214);\n}";
+var css_248z = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2021/10/20 下午2:08\n* @description color\n*/\n/**\n* @author linhd\n* @date 2022/8/12 5:28 PM\n* @description 全局css前缀\n*/\n.paraui-v3-table {\n  width: 100%;\n  height: 100%;\n  overflow: auto;\n  background-color: white;\n  font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, PingFang SC, Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, WenQuanYi Micro Hei, sans-serif;\n  font-size: 14px;\n  font-weight: 400;\n}\n.paraui-v3-table.paraui-v3-table-draggable * {\n  user-select: none !important;\n}\n.paraui-v3-table.paraui-v3-table-fixed-table > .table-contain > table {\n  table-layout: fixed;\n}\n.paraui-v3-table.paraui-v3-table-fixed-cloumn > .table-contain > table .table-checkbox {\n  left: 0;\n}\n.paraui-v3-table.paraui-v3-table-fixed-cloumn > .table-contain > table .table-radio {\n  left: 0;\n}\n.paraui-v3-table.paraui-v3-table-fixed-cloumn > .table-contain > table .table-expandable {\n  left: 0;\n}\n.paraui-v3-table.paraui-v3-table-fixed-cloumn.paraui-v3-table-radio.paraui-v3-table-check .table-radio {\n  left: 48px;\n}\n.paraui-v3-table.paraui-v3-table-fixed-cloumn.paraui-v3-table-expandable.paraui-v3-table-check .table-expandable {\n  left: 48px;\n}\n.paraui-v3-table.paraui-v3-table-fixed-cloumn.paraui-v3-table-expandable.paraui-v3-table-check.paraui-v3-table-radio .table-expandable {\n  left: 80px;\n}\n.paraui-v3-table.paraui-v3-table-no-data > .table-container > table {\n  height: 100%;\n}\n.paraui-v3-table.paraui-v3-table-load.paraui-v3-table-no-data > .table-container > table {\n  height: auto;\n}\n.paraui-v3-table.paraui-v3-table-pagination > .table-contain {\n  height: calc(100% - 60px);\n}\n.paraui-v3-table.paraui-v3-table-pagination.table-load-more > .table-contain {\n  height: 100%;\n}\n.paraui-v3-table.paraui-v3-table-load-more.paraui-v3-table-pagination > .table-contain {\n  height: 100%;\n}\n.paraui-v3-table > .table-contain {\n  height: 100%;\n  position: relative;\n}\n.paraui-v3-table > .table-contain > table {\n  height: auto;\n}\n.paraui-v3-table > .table-contain > table .table-checkbox > label {\n  vertical-align: middle;\n}\n.paraui-v3-table > .table-contain > table .table-checkbox .table-header-box {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.paraui-v3-table > .table-contain > table .table-radio > label {\n  vertical-align: middle;\n}\n.paraui-v3-table > .table-contain > table .table-radio .table-header-box {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.paraui-v3-table > .table-contain > table .table-expandable > svg {\n  vertical-align: middle;\n}\n.paraui-v3-table > .table-contain > table > .table-head {\n  width: 100%;\n  white-space: nowrap;\n}\n.paraui-v3-table > .table-contain > table > .table-head > tr th {\n  height: 50px;\n}\n.paraui-v3-table > .table-contain > table > .table-head.table-head-scroll tr th {\n  max-width: 240px;\n}\n.paraui-v3-table > .table-contain > table > .table-head .table-serial-number .table-header-box .table-header-title {\n  padding-right: 0;\n}\n.paraui-v3-table > .table-contain > table > .table-head .table-header-box {\n  height: 49px;\n  line-height: 49px;\n  position: relative;\n  padding: 0 8px;\n  display: flex;\n}\n.paraui-v3-table > .table-contain > table > .table-head .table-header-box > .table-header-title {\n  max-width: 100%;\n  display: flex;\n}\n.paraui-v3-table > .table-contain > table > .table-head .table-header-box > .table-header-title > .table-header-title-label {\n  width: 100%;\n  color: rgba(46, 55, 67, 0.7);\n  font-weight: 700;\n  font-size: 14px;\n}\n.paraui-v3-table > .table-contain > table > .table-head .table-header-box > .table-sort-svg {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.paraui-v3-table > .table-contain > table > .table-head .table-header-box > .table-sort-svg > span {\n  width: 20px;\n  height: 20px;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  cursor: pointer;\n  border-radius: 2px;\n}\n.paraui-v3-table > .table-contain > table > .table-head .table-header-box > .table-sort-svg > span:hover {\n  background-color: rgb(227, 234, 247);\n}\n.paraui-v3-table > .table-contain > table > .table-head .table-header-box > .table-sort-svg > span:hover > svg {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-table > .table-contain > table > .table-head .table-header-box > .table-sort-svg > span > svg {\n  font-size: 12px;\n  color: rgba(46, 55, 67, 0.7);\n}\n.paraui-v3-table > .table-contain > table > .table-head .table-header-box > .table-sort-svg > span > .up-svg {\n  position: relative;\n  top: 2px;\n}\n.paraui-v3-table > .table-contain > table > .table-head .table-header-box > .table-sort-svg > span > .down-svg {\n  position: relative;\n  top: -3px;\n}\n.paraui-v3-table > .table-contain > table > .table-head .table-header-box > .table-header-filter {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.paraui-v3-table > .table-contain > table > .table-head .table-header-box > .table-header-filter > span {\n  width: 20px;\n  height: 20px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  cursor: pointer;\n  border-radius: 2px;\n}\n.paraui-v3-table > .table-contain > table > .table-head .table-header-box > .table-header-filter > span:hover {\n  background-color: rgb(227, 234, 247);\n}\n.paraui-v3-table > .table-contain > table > .table-head .table-header-box > .table-header-filter > span:hover > svg {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-table > .table-contain > table > .table-head .table-header-box > .table-header-filter > span > svg {\n  font-size: 14px;\n  color: rgba(46, 55, 67, 0.7);\n}\n.paraui-v3-table > .table-contain > table > .table-head .table-header-box > .table-header-filter.table-header-filter-show > span > svg {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-table > .table-contain > table > .table-head .table-header-box > .table-header-filter.table-header-filter-select > span > svg {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-table > .table-contain > table > .table-head .table-header-box > .table-header-filter.table-header-filter-select > span:after {\n  position: absolute;\n  width: 4px;\n  height: 4px;\n  border-radius: 50%;\n  background-color: rgb(235, 96, 84);\n  content: \"\";\n  right: 3px;\n  top: 2px;\n}\n.paraui-v3-table > .table-contain > table > .table-head .table-header-box.table-header-box-sort > .table-header-title {\n  padding-right: 8px;\n  max-width: calc(100% - 20px);\n}\n.paraui-v3-table > .table-contain > table > .table-head .table-header-box.table-header-box-filter > .table-header-title {\n  padding-right: 8px;\n  max-width: calc(100% - 20px);\n}\n.paraui-v3-table > .table-contain > table > .table-head .table-header-box.table-header-box-sort.table-header-box-filter > .table-header-title {\n  max-width: calc(100% - 40px);\n}\n.paraui-v3-table > .table-contain > table > .table-head .table-header-box.table-header-box-sort-asc > .table-sort-svg > span > .up-svg {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-table > .table-contain > table > .table-head .table-header-box.table-header-box-sort-desc > .table-sort-svg > span > .down-svg {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-table > .table-contain > table > .table-head .show-colums {\n  width: 56px;\n  cursor: pointer;\n  border-left: 1px solid rgba(171, 176, 185, 0.12);\n  right: 0;\n}\n.paraui-v3-table > .table-contain > table > .table-head .show-colums .table-header-box {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 55px;\n}\n.paraui-v3-table > .table-contain > table > .table-head .show-colums .table-header-box > svg {\n  font-size: 24px;\n  color: rgba(46, 55, 67, 0.7);\n}\n.paraui-v3-table > .table-contain > table > .table-head .show-colums .table-header-box:hover > svg {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-table > .table-contain > table > .table-head.table-head-no-btn tr th:first-child .table-header-box {\n  padding-left: 16px;\n}\n.paraui-v3-table > .table-contain > table > .table-head .table-head-btn {\n  width: 32px;\n  padding: 0;\n}\n.paraui-v3-table > .table-contain > table > .table-head .table-head-btn > .table-header-box {\n  width: 32px;\n}\n.paraui-v3-table > .table-contain > table > .table-head .table-head-btn:first-child {\n  width: 48px;\n}\n.paraui-v3-table > .table-contain > table > .table-head .table-head-btn:first-child > .table-header-box {\n  width: 48px;\n}\n.paraui-v3-table > .table-contain > table > .table-body {\n  width: 100%;\n}\n.paraui-v3-table > .table-contain > table > .table-body.table-body-scroll tr td {\n  max-width: 240px;\n}\n.paraui-v3-table > .table-contain > table > .table-body tr {\n  height: 56px;\n}\n.paraui-v3-table > .table-contain > table > .table-body tr td {\n  background-color: white;\n  color: rgba(46, 55, 67, 0.7);\n}\n.paraui-v3-table > .table-contain > table > .table-body tr:nth-of-type(2n) td {\n  background-color: rgb(249, 250, 251);\n}\n.paraui-v3-table > .table-contain > table > .table-body tr:hover td {\n  background-color: rgb(237, 241, 249);\n}\n.paraui-v3-table > .table-contain > table > .table-body tr .table-expandable > svg {\n  transition: all 0.3s;\n  cursor: pointer;\n  font-size: 16px;\n  color: rgba(46, 55, 67, 0.7);\n}\n.paraui-v3-table > .table-contain > table > .table-body tr .table-expandable > svg:hover {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-table > .table-contain > table > .table-body tr .table-expandable > .expand {\n  transform: rotate(180deg);\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-table > .table-contain > table > .table-body .more-table-row {\n  cursor: pointer;\n}\n.paraui-v3-table > .table-contain > table > .table-body .more-table-row .more-btn {\n  color: rgb(54, 102, 214);\n  font-size: 14px;\n}\n.paraui-v3-table > .table-contain > table > .table-body .more-table-row > .td-element {\n  bottom: 0;\n  background: white;\n  box-shadow: 4px -4px 8px 0px rgba(171, 176, 185, 0.12);\n}\n.paraui-v3-table > .table-contain > table > .table-body.table-body-no-btn tr td:first-child {\n  padding-left: 16px;\n}\n.paraui-v3-table > .table-contain > table > .table-body.table-body-no-btn > .table-no-data > td:first-child {\n  padding: 0;\n}\n.paraui-v3-table > .table-contain > table > .table-body .table-body-btn {\n  width: 32px;\n  padding: 0;\n}\n.paraui-v3-table > .table-contain > table > .table-body .table-body-btn:first-child {\n  width: 48px;\n}\n.paraui-v3-table > .table-contain > table > .table-body > .table-no-data {\n  height: calc(100% - 50px);\n}\n.paraui-v3-table > .table-contain > table > .table-body > .table-no-data:hover td {\n  background-color: white;\n}\n.paraui-v3-table > .table-contain > table > .table-body > .table-no-data > td {\n  padding: 56px 0 0 0;\n}\n.paraui-v3-table > .table-contain > .table-pos-line {\n  position: absolute;\n  top: 0;\n  width: 1px;\n  background-color: rgb(54, 102, 214);\n  z-index: 1000;\n}\n.paraui-v3-table > .table-pagination {\n  width: 100%;\n  height: 60px;\n  padding-right: 10px;\n  display: flex;\n  align-items: flex-end;\n  justify-content: flex-end;\n}\n\n.paraui-v3-table-show-colums-popover > .component-popover-content {\n  width: 200px;\n}\n.paraui-v3-table-show-colums-popover > .component-popover-content .show-colums-select > .show-colums-select-box {\n  padding-top: 8px;\n  max-height: 224px;\n  overflow-y: auto;\n}\n.paraui-v3-table-show-colums-popover > .component-popover-content .show-colums-select > .show-colums-select-box > .show-colums-select-item {\n  height: 36px;\n  line-height: 36px;\n  cursor: pointer;\n  display: flex;\n  padding: 0 4px;\n}\n.paraui-v3-table-show-colums-popover > .component-popover-content .show-colums-select > .show-colums-select-box > .show-colums-select-item > label {\n  width: 32px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.paraui-v3-table-show-colums-popover > .component-popover-content .show-colums-select > .show-colums-select-box > .show-colums-select-item > span {\n  color: rgb(46, 55, 67);\n  font-size: 14px;\n  display: inline-block;\n  width: calc(100% - 32px);\n}\n.paraui-v3-table-show-colums-popover > .component-popover-content .show-colums-select > .show-colums-select-box > .show-colums-select-item:hover > span {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-table-show-colums-popover > .component-popover-content .show-colums-select > .show-colums-select-box > .show-colums-select-item:hover > label .checkbox-box-inner {\n  border-color: rgb(54, 102, 214);\n}\n.paraui-v3-table-show-colums-popover > .component-popover-content .show-colums-select > .show-colums-select-box > .show-colums-select-item.show-colums-select-item-select > span {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-table-show-colums-popover > .component-popover-content .show-colums-select > .show-colums-select-box > .show-colums-select-item.show-colums-select-item-select > label .checkbox-box-inner {\n  border-color: rgb(54, 102, 214);\n}\n.paraui-v3-table-show-colums-popover > .component-popover-content .show-colums-select > .show-colums-select-footer {\n  height: 45px;\n  border-top: 1px solid rgba(171, 176, 185, 0.2);\n  text-align: center;\n}\n.paraui-v3-table-show-colums-popover > .component-popover-content .show-colums-select > .show-colums-select-footer > button {\n  width: 100%;\n  height: 100%;\n  border: 0;\n}\n.paraui-v3-table-show-colums-popover > .component-popover-content .show-colums-select > .show-colums-select-footer > button > span {\n  font-size: 14px;\n}\n.paraui-v3-table-show-colums-popover > .component-popover-content .show-colums-select > .show-colums-select-footer > button > span > span {\n  margin-right: 5px;\n  color: rgb(46, 55, 67);\n}\n.paraui-v3-table-show-colums-popover > .component-popover-content .show-colums-select > .show-colums-select-footer > button > span > span svg {\n  font-size: 14px;\n  color: rgb(46, 55, 67);\n}\n.paraui-v3-table-show-colums-popover > .component-popover-content .show-colums-select > .show-colums-select-footer > button:hover > span > span svg {\n  color: rgb(54, 102, 214);\n}\n\n.paraui-v3-filter-popover > .component-popover-content {\n  width: 200px;\n}\n.paraui-v3-filter-popover > .component-popover-content .filter-select > .filter-select-box {\n  padding-top: 8px;\n  max-height: 224px;\n  overflow-y: auto;\n}\n.paraui-v3-filter-popover > .component-popover-content .filter-select > .filter-select-box > .filter-select-item {\n  height: 36px;\n  line-height: 36px;\n  cursor: pointer;\n  display: flex;\n  padding: 0 4px;\n}\n.paraui-v3-filter-popover > .component-popover-content .filter-select > .filter-select-box > .filter-select-item > label {\n  width: 32px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.paraui-v3-filter-popover > .component-popover-content .filter-select > .filter-select-box > .filter-select-item > span {\n  color: rgb(46, 55, 67);\n  font-size: 14px;\n  display: inline-block;\n  width: calc(100% - 32px);\n}\n.paraui-v3-filter-popover > .component-popover-content .filter-select > .filter-select-box > .filter-select-item:hover > span {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-filter-popover > .component-popover-content .filter-select > .filter-select-box > .filter-select-item:hover > label .checkbox-box-inner {\n  border-color: rgb(54, 102, 214);\n}\n.paraui-v3-filter-popover > .component-popover-content .filter-select > .filter-select-box > .filter-select-item.filter-select-item-select > span {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-filter-popover > .component-popover-content .filter-select > .filter-select-box > .filter-select-item.filter-select-item-select > label .checkbox-box-inner {\n  border-color: rgb(54, 102, 214);\n}\n.paraui-v3-filter-popover > .component-popover-content .filter-select > .filter-select-footer {\n  height: 45px;\n  border-top: 1px solid rgba(171, 176, 185, 0.2);\n  text-align: center;\n}\n.paraui-v3-filter-popover > .component-popover-content .filter-select > .filter-select-footer > button {\n  width: 50%;\n  height: 100%;\n  border: 0;\n}\n.paraui-v3-filter-popover > .component-popover-content .filter-select > .filter-select-footer > button > span {\n  font-size: 14px;\n}\n.paraui-v3-filter-popover > .component-popover-content .filter-select > .filter-select-footer > button > span > span {\n  margin-right: 5px;\n  color: rgb(46, 55, 67);\n}\n.paraui-v3-filter-popover > .component-popover-content .filter-select > .filter-select-footer > button > span > span svg {\n  font-size: 14px;\n  color: rgb(46, 55, 67);\n}\n.paraui-v3-filter-popover > .component-popover-content .filter-select > .filter-select-footer > button:hover > span > span svg {\n  color: rgb(54, 102, 214);\n}";
 styleInject(css_248z);
 
 var Table = function Table(propsInit) {
@@ -1702,6 +1869,8 @@ var Table = function Table(propsInit) {
       fixedTable = _props$fixedTable === void 0 ? true : _props$fixedTable,
       _props$fixedColumn = props.fixedColumn,
       fixedColumn = _props$fixedColumn === void 0 ? true : _props$fixedColumn,
+      _props$dragColumn = props.dragColumn,
+      dragColumn = _props$dragColumn === void 0 ? true : _props$dragColumn,
       formatter = props.formatter,
       _props$lineHeight = props.lineHeight,
       lineHeight = _props$lineHeight === void 0 ? 56 : _props$lineHeight,
@@ -1725,7 +1894,8 @@ var Table = function Table(propsInit) {
       _props$beyondText = props.beyondText,
       beyondText = _props$beyondText === void 0 ? true : _props$beyondText,
       loading = props.loading;
-  var dayNum = props.expirationTime ? props.expirationTime : 7; // 过期天数
+  var intl = useFormatMessage('Table', localeJson);
+  var dayNum = props.expirationTime ? props.expirationTime === 0 ? 100000000 : props.expirationTime : 7; // 过期天数
 
   var _useState = useState(props.page !== undefined ? props.page : 1),
       _useState2 = _slicedToArray(_useState, 2),
@@ -1858,14 +2028,22 @@ var Table = function Table(propsInit) {
   var _useState45 = useState({}),
       _useState46 = _slicedToArray(_useState45, 2),
       posFixed = _useState46[0],
-      setPosFixed = _useState46[1];
+      setPosFixed = _useState46[1]; // 固定位置
+
+
+  var _useState47 = useState({}),
+      _useState48 = _slicedToArray(_useState47, 2),
+      headDataConfig = _useState48[0],
+      setHeadDataConfig = _useState48[1]; // 表头配置
+
 
   var containerRef = useRef(); // 表格内容高度
 
   var tableRef = useRef(); // 表格
 
   var constData = useRef({
-    page: props.page !== undefined ? props.page : 1
+    page: props.page !== undefined ? props.page : 1,
+    headDataConfig: {}
   }); // 存储常量
 
   constData.current.loadMoreUrl = loadMore && url; // 用来判断加载更多请求是否放在表格里面
@@ -2161,26 +2339,39 @@ var Table = function Table(propsInit) {
     var json = getLocalStorageSelectHead(getTableHeadKey(), dayNum);
     return json;
   };
-  /** 设置本地表格列 */
+  /**
+   * 设置本地表格列
+   *
+   * */
 
 
-  var setLocalStorageHeadCom = function setLocalStorageHeadCom(headArr) {
+  var setLocalStorageHeadCom = function setLocalStorageHeadCom(obj) {
     if (props.rememberColumns === false) return;
-    var selectHeadJson = ArrayToObject('name', headArr);
+    var localStorageData = getLocalStorageHeadCom();
     var json = {
-      headName: {},
+      headName: localStorageData.headName || {},
+      headDataConfig: localStorageData.headDataConfig || {},
       storageTime: new Date().getTime(),
       validity: dayNum * (60 * 60 * 24)
-    };
+    }; // 设置固定列
 
-    for (var i = 0, l = showHeadList.length; i < l; i++) {
-      var item = showHeadList[i];
-      var name = item.name || '';
-      json.headName[name] = false;
+    if (obj.setFixed) {
+      var selectHeadJson = ArrayToObject('name', obj.headArr || []);
+
+      for (var i = 0, l = showHeadList.length; i < l; i++) {
+        var item = showHeadList[i];
+        var name = item.name || '';
+        json.headName[name] = false;
 
-      if (selectHeadJson[name]) {
-        json.headName[name] = true;
+        if (selectHeadJson[name]) {
+          json.headName[name] = true;
+        }
       }
+    } // 设置拖动列
+
+
+    if (obj.setDrag) {
+      json.headDataConfig = obj.headDataConfig || {};
     }
 
     setLocalStorageSelectHead(getTableHeadKey(), json);
@@ -2218,6 +2409,32 @@ var Table = function Table(propsInit) {
       }
     }
   };
+  /** 处理序号 */
+
+
+  var handSerial = function handSerial(arr) {
+    var defaultVal = {
+      label: intl({
+        id: 'serial'
+      }),
+      selected: true,
+      width: props.radio || props.check || props.expandable ? 45 : 55,
+      fixed: 'left',
+      className: 'table-serial-number',
+      name: 'table-serial-number',
+      render: function render(row, item, val, index, rowIndex) {
+        return Number(rowIndex) + 1;
+      }
+    };
+
+    if (props.serialNumber) {
+      if (typeof props.serialNumber === 'boolean') {
+        arr.unshift(defaultVal);
+      } else {
+        arr.unshift(Object.assign(Object.assign({}, defaultVal), props.serialNumber));
+      }
+    }
+  };
   /**
    * 初始化设置表头
    * @param arr {(HeadDataProps | HeadDataReqProps)[]} 表头数据
@@ -2232,14 +2449,16 @@ var Table = function Table(propsInit) {
 
     var json = {};
     var localHead = getLocalStorageHeadCom();
+    constData.current.headDataConfig = localHead.headDataConfig || {};
 
     for (var i = 0, l = arr.length; i < l; i++) {
       var item = arr[i];
-      if (typeof item.width === 'number') item.width += 'px';
+      var name = item.name || '';
+      if (typeof item.width === 'number') item.width = item.width + 'px';
       if (!bol) item.orderNum = i;
       handHeadShow(item, headShowArr, localHead);
       headArr.push(item);
-      json[item.name] = item;
+      json[name] = item;
     }
 
     if (bol) {
@@ -2251,9 +2470,15 @@ var Table = function Table(propsInit) {
       });
     }
 
-    handHeadDataCom(headShowArr);
-    setHeadDataCom(headShowArr);
-    setShowHeadList(headArr);
+    handSerial(headShowArr); // 处理序号
+
+    handHeadDataCom(headShowArr); // 处理显示列宽度
+
+    setHeadDataCom(headShowArr); // 表格当前显示列 集合本地数据
+
+    setShowHeadList(headArr); // 显示列下拉值 所有头部的配置
+
+    setHeadDataConfig(Object.assign({}, constData.current.headDataConfig));
     constData.current.headDataJson = json;
   }; // 计算左边的差量
 
@@ -2309,6 +2534,15 @@ var Table = function Table(propsInit) {
     }
 
     return rightNum;
+  }; // 获取宽度
+
+
+  var getWidth = function getWidth(item) {
+    var w = item.width || '';
+    var name = item.name || '';
+    var wDrag = constData.current.headDataConfig[name] && constData.current.headDataConfig[name].width;
+    if (wDrag) w = wDrag;
+    return w;
   };
   /**
    * 处理显示列宽度
@@ -2336,19 +2570,22 @@ var Table = function Table(propsInit) {
     for (var i = 0, l = arr.length; i < l; i++) {
       var item = arr[i];
       var itemWidth = 0;
+      var handW = getWidth(item); // 获取宽度,有拖动过后宽度,就用拖动的
 
-      if (item.width) {
-        itemWidth = getStringInNumber(item.width);
+      if (handW) {
+        itemWidth = getStringInNumber(handW);
         tableMinWidth += itemWidth;
       } else {
         tableMinWidth += lineWidth;
       }
 
       if (item.fixed === 'left' && item.width) {
+        // 固定列必须具有宽度
         leftArr.push(item);
       }
 
       if (item.fixed === 'right' && item.width) {
+        // 固定列必须具有宽度
         rightArr.push(item);
       }
     }
@@ -2362,7 +2599,10 @@ var Table = function Table(propsInit) {
         var _item = leftArr[_i];
 
         if (_item.width) {
-          var _itemWidth = getStringInNumber(_item.width);
+          var _handW = getWidth(_item); // 获取宽度,有拖动过后宽度,就用拖动的
+
+
+          var _itemWidth = getStringInNumber(_handW);
 
           _item.paraui_left_width = leftOps;
           leftOps += _itemWidth; // 最后一个
@@ -2385,7 +2625,10 @@ var Table = function Table(propsInit) {
         var _item2 = rightArr[_i2];
 
         if (_item2.width) {
-          var _itemWidth2 = getStringInNumber(_item2.width);
+          var _handW2 = getWidth(_item2); // 获取宽度,有拖动过后宽度,就用拖动的
+
+
+          var _itemWidth2 = getStringInNumber(_handW2);
 
           _item2.paraui_right_width = rightOps;
           rightOps += _itemWidth2; // 最后一个
@@ -2399,8 +2642,9 @@ var Table = function Table(propsInit) {
       }
     }
 
-    setTableMinWidth(tableMinWidth);
-    setPosFixed(posJson);
+    setTableMinWidth(tableMinWidth); // 表格最小宽度
+
+    setPosFixed(posJson); // 定位信息
   };
   /**
    * 处理过滤请求数据
@@ -2742,13 +2986,20 @@ var Table = function Table(propsInit) {
       handCheckValue({});
     }
   };
-  /** 改变选择列 */
+  /**
+   * 改变选择列
+   * @param arr {HeadDataProps[]} 当前显示列
+   * */
 
 
   var changeSelectHead = function changeSelectHead(arr, item) {
     handHeadDataCom(arr);
-    setHeadDataCom(arr);
-    setLocalStorageHeadCom(arr);
+    setHeadDataCom(arr); // 本地记住选择列
+
+    setLocalStorageHeadCom({
+      setFixed: true,
+      headArr: arr
+    });
     onClickColumns && onClickColumns(arr, item);
   };
   /**
@@ -2761,10 +3012,17 @@ var Table = function Table(propsInit) {
 
   var changeShowList = function changeShowList(headShowArr, bol, item) {
     if (bol) {
+      constData.current.headDataConfig = {};
+      setHeadDataConfig({}); // 重置拖拽列
+
       var arr = [];
 
-      for (var i = 0, l = showHeadList.length; i < l; i++) {
-        var _item3 = showHeadList[i];
+      var arrShow = _toConsumableArray(showHeadList);
+
+      handSerial(arrShow);
+
+      for (var i = 0, l = arrShow.length; i < l; i++) {
+        var _item3 = arrShow[i];
 
         if (_item3 && _item3.selected) {
           // 当前显示字段
@@ -2793,6 +3051,24 @@ var Table = function Table(propsInit) {
     constData.current.selectFilterCom = DeepClone(val);
     setSelectFilterCom(DeepClone(val));
     handPage(1);
+  };
+  /** 改变拖拽列width */
+
+
+  var changeColumnWidth = function changeColumnWidth(headCell, result) {
+    var name = headCell.name || '';
+    constData.current.headDataConfig[name] = {
+      width: result.width
+    };
+    setHeadDataConfig(Object.assign({}, constData.current.headDataConfig)); // 设置表格列配置,被拖动的width
+
+    handHeadDataCom(_toConsumableArray(headData)); // 重新计算表格的最小宽度
+    // 本地记住拖动列宽度
+
+    setLocalStorageHeadCom({
+      headDataConfig: constData.current.headDataConfig,
+      setDrag: true
+    });
   }; // 表格头部memo
 
 
@@ -2820,9 +3096,13 @@ var Table = function Table(propsInit) {
       fixedTable: fixedTable,
       fixedColumn: fixedColumn,
       posFixed: posFixed,
-      beyondText: beyondText
+      beyondText: beyondText,
+      lineWidth: lineWidth,
+      dragColumn: dragColumn,
+      headDataConfig: headDataConfig,
+      changeColumnWidth: changeColumnWidth
     });
-  }, [totalDataJson, showColumns, rowKey, rowData, checkJson, disabledJson, orderTypeArr, orderFieldArr, sortTable, filter, expandable, check, headSelectStatus, radio, align, showHeadList, headDataCom, selectFilterCom, operate, onClickColumns, sortTableRadio, fixedTable, posFixed, beyondText, fixedColumn]); // 表格内容memo
+  }, [totalDataJson, showColumns, rowKey, rowData, checkJson, disabledJson, orderTypeArr, orderFieldArr, sortTable, filter, expandable, check, headSelectStatus, radio, align, showHeadList, headDataCom, selectFilterCom, operate, onClickColumns, sortTableRadio, fixedTable, posFixed, beyondText, fixedColumn, lineWidth, dragColumn, headDataConfig]); // 表格内容memo
 
   var TableBodyMemo = useMemo(function () {
     return jsx(TableBody, {
@@ -2915,6 +3195,7 @@ var Table = function Table(propsInit) {
     if (loadMore) str += " ".concat($prefixCls, "-table-load-more");
     if (fixedTable) str += " ".concat($prefixCls, "-table-fixed-table");
     if (fixedColumn) str += " ".concat($prefixCls, "-table-fixed-cloumn");
+    if (dragColumn) str += " ".concat($prefixCls, "-table-drag-column");
     if (check) str += " ".concat($prefixCls, "-table-check");
     if (radio) str += " ".concat($prefixCls, "-table-radio");
     if (expandable) str += " ".concat($prefixCls, "-table-expandable");