@lingxiteam/ebe-utils 0.2.22 → 0.2.24

package/lib/pcpublic/src/components/pcfactory/src/Table/hooks/useColumns.tsx

@@ -1,17 +1,19 @@
 /* eslint-disable no-nested-ternary */
+import CustomModule from '../../utils/CustomModule';
 import { Popover, Skeleton, Table, Tooltip } from 'antd';
 import type { ColumnProps } from 'antd/lib/table';
 import { FilterDropdownProps } from 'antd/lib/table/interface';
 import classnames from 'classnames';
 import { cloneDeep, get, set } from 'lodash';
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { isDynamicProperty } from '../../utils/common';
-import CustomModule from '../../utils/CustomModule';
 import EditComponent from '../EditComponent';
 import HeaderCellTitle from '../HeaderCell/HeaderCellTitle';
-import OperationCell from '../OperationCell';
 import { compareFn, handleExpandColumn, handleMergeHeader, handleMultiLevelHeader, handleRecursiveParseColumns, treeRootName } from '../utils';
 import { getOrSaveData } from '../utils/indexedDBHelper';
+import OperationCell from '../OperationCell';
+import { isDynamicProperty } from '../../utils/common';
+import { TH_CELL_KEY } from '../constant';
+import { translateStaticData } from '../utils/translate';
 
 const ACTION_COL_KEY = '_actions';
 
@@ -73,7 +75,6 @@ const useColumns = (props: any) => {
     filterDropdownOpen,
     onFilterDropdownVisibleChange,
     renderFilterDropDown,
-    rowSelection,
     tableGroupColorInfo,
     getLocale,
     onTableCellClick,
@@ -83,7 +84,10 @@ const useColumns = (props: any) => {
   } = props;
   const actionsMap: any = actionsMapFn(getLocale);
 
-  const { customEngineApi, getUserInfo } = engineApis || {};
+  const {
+    customEngineApi,
+    getUserInfo,
+  } = engineApis || {};
 
   const { userId = '' } = getUserInfo?.() || {};
   const fatherBOFramerId = customEngineApi?.getFatherComId?.();
@@ -93,7 +97,9 @@ const useColumns = (props: any) => {
   const tableRef = useRef<any>();
   const [colCustomOrder, setColCustomOrder] = useState<any>([]); // 自定义列顺序记录
   const [customSelectedCols, setCustomSelectedCols] = useState<any>(); // 自定义列显隐记录
-  const [columnWidth, setColumnWidth] = useState<any[]>([]);
+  const [columnWidth, setColumnWidth] = useState<Record<string, number>>({});
+
+  const initRef = useRef(false);
   // 初始加载列宽
   const [initLoadColWidth, setInitLoadColWidth] = useState(false);
   const { hasCustom, defaultColumn } = showCustom || {};
@@ -136,139 +142,130 @@ const useColumns = (props: any) => {
     return [typeof propsVisibleFn[rowAction.type] === 'function' ? getEditVisible(row) : visible, clickText];
   };
 
-  const getRealRowActions = useCallback(
-    (row: any, index: number | null) => {
-      const rowId = row[currentRowKey];
-      if (Array.isArray(rowActions) && rowActions.length) {
-        let editVisible = false;
-        let detailVisible = false;
-        let deleteVisible = false;
-        rowActions.forEach(rowAction => {
-          const [visible] = getInnerRowAction(rowAction, row, index, rowId);
-          switch (rowAction.type) {
-            case 'edit': {
-              editVisible = visible;
-              break;
-            }
-            case 'detail': {
-              detailVisible = visible;
-              break;
-            }
-            case 'delete': {
-              deleteVisible = visible;
-              break;
-            }
-            default:
+  const getRealRowActions = useCallback((row: any, index: number | null) => {
+    const rowId = row[currentRowKey];
+    if (Array.isArray(rowActions) && rowActions.length) {
+      let editVisible = false;
+      let detailVisible = false;
+      let deleteVisible = false;
+      rowActions.forEach((rowAction) => {
+        const [visible] = getInnerRowAction(rowAction, row, index, rowId);
+        switch (rowAction.type) {
+          case 'edit': {
+            editVisible = visible;
+            break;
           }
-        });
+          case 'detail': {
+            detailVisible = visible;
+            break;
+          }
+          case 'delete': {
+            deleteVisible = visible;
+            break;
+          }
+          default:
+        }
+      });
 
-        editVisible = typeof getEditVisible === 'function' ? getEditVisible(row) : editVisible;
-        detailVisible = typeof getDetailVisible === 'function' ? getDetailVisible(row) : detailVisible;
-        deleteVisible = typeof getDeleteVisible === 'function' ? getDeleteVisible(row) : deleteVisible;
+      editVisible = typeof getEditVisible === 'function' ? getEditVisible(row) : editVisible;
+      detailVisible =
+        typeof getDetailVisible === 'function' ? getDetailVisible(row) : detailVisible;
+      deleteVisible =
+        typeof getDeleteVisible === 'function' ? getDeleteVisible(row) : deleteVisible;
 
-        // 过滤掉隐藏的按钮，得到真正的按钮数据
-        const actualRowActions = (rowActions || [])
-          .filter(btn => {
-            if (typeof btn === 'string' ? btn === 'delete' : btn.type === 'delete') {
-              return deleteVisible && btn.checked;
-            }
-            if (typeof btn === 'string' ? btn === 'detail' : btn.type === 'detail') {
-              return detailVisible && btn.checked;
-            }
-            return editVisible && btn.checked;
-          })
-          .map(item => {
-            if (item.disabled) {
-              const disabledFunc = (row: any, index: number | null, rowId: string | number) =>
-                sandBoxSafeRun(item.disabled, {
-                  ...row,
-                  row,
-                  index,
-                  rowId,
-                });
-
-              return {
-                ...item,
-                disabled: disabledFunc(row, index, rowId),
-              };
-            }
-            return item;
+      // 过滤掉隐藏的按钮，得到真正的按钮数据
+      const actualRowActions = (rowActions || []).filter((btn) => {
+        if (typeof btn === 'string' ? btn === 'delete' : btn.type === 'delete') {
+          return deleteVisible && btn.checked;
+        }
+        if (typeof btn === 'string' ? btn === 'detail' : btn.type === 'detail') {
+          return detailVisible && btn.checked;
+        }
+        return editVisible && btn.checked;
+      }).map(item => {
+        if (item.disabled) {
+          const disabledFunc = (row: any, index: number | null, rowId: string | number) => sandBoxSafeRun(item.disabled, {
+            ...row,
+            row,
+            index,
+            rowId,
           });
 
-        return actualRowActions;
-      }
-      return [];
-    },
-    [rowActions, sandBoxSafeRun, getEditVisible, getDetailVisible, getDeleteVisible]
-  );
+          return {
+            ...item,
+            disabled: disabledFunc(row, index, rowId),
+          };
+        }
+        return item;
+      });
 
-  const getRealExtendRowActions = useCallback(
-    (row: any, index: number | null) => {
-      const rowId = row[currentRowKey];
-      if (Array.isArray(extend) && extend.length) {
-        const btnVisible: any = [];
-        let eventIndex = 0;
-        extend.forEach((item, i) => {
-          // 扩展的按钮事件改成动态生成，而不是固定的5个
-          if (!item.type) {
-            eventIndex += 1;
-          }
-          const visibleText = `getBtn${eventIndex}Visible`;
-          let clickText = item?.value || `onClickBtn${eventIndex}`; // 兼容旧数据
-          let visible;
-          if (props[visibleText] && typeof props[visibleText] === 'function') {
-            visible = props[visibleText](row);
-          } else if (item.type) {
-            // 内置按钮合并到extend中，当存在type时，表示为内置按钮
-            [visible, clickText] = getInnerRowAction(item, row, index, rowId);
-          }
-          btnVisible.push(visible);
+      return actualRowActions;
+    }
+    return [];
+  }, [rowActions, sandBoxSafeRun, getEditVisible, getDetailVisible, getDeleteVisible]);
+
+  const getRealExtendRowActions = useCallback((row: any, index: number | null) => {
+    const rowId = row[currentRowKey];
+    if (Array.isArray(extend) && extend.length) {
+      const btnVisible: any = [];
+      let eventIndex = 0;
+      extend.forEach((item, i) => { // 扩展的按钮事件改成动态生成，而不是固定的5个
+        if (!item.type) {
+          eventIndex += 1;
+        }
+        const visibleText = `getBtn${eventIndex}Visible`;
+        let clickText = item?.value || `onClickBtn${eventIndex}`; // 兼容旧数据
+        let visible;
+        if (props[visibleText] && typeof props[visibleText] === 'function') {
+          visible = props[visibleText](row);
+        } else if (item.type) {
+          // 内置按钮合并到extend中，当存在type时，表示为内置按钮
+          [visible, clickText] = getInnerRowAction(item, row, index, rowId);
+        }
+        btnVisible.push(visible);
 
-          if (props[clickText]) {
-            item.onClick = props[clickText];
-          }
-          item.btnType = 'extend';
-        });
-        // 过滤掉隐藏的扩展按钮，得到真正的扩展按钮数据
-        const actualExtendData = extend
-          .filter((extd, i) => {
-            if (typeof extd.rule === 'string') {
-              const stringrule = extd.rule;
-              extd.rule = (row: any, index: number) =>
-                sandBoxSafeRun(stringrule, {
-                  ...row,
-                  row,
-                  index,
-                });
-            }
+        if (props[clickText]) {
+          item.onClick = props[clickText];
+        }
+        item.btnType = 'extend';
+      });
+      // 过滤掉隐藏的扩展按钮，得到真正的扩展按钮数据
+      const actualExtendData = extend.filter((extd, i) => {
+        if (typeof extd.rule === 'string') {
+          const stringrule = extd.rule;
+          extd.rule = (row: any, index: number, id: string | number) => sandBoxSafeRun(stringrule, {
+            ...row,
+            row,
+            index,
+            rowId: id,
+          });
+        }
 
-            const ruleVis = typeof extd.rule === 'function' ? !extd.rule(row, index) : !extd.rule;
-
-            return btnVisible[i] === undefined ? ruleVis : btnVisible[i];
-          })
-          .map(item => {
-            if (item.disabled) {
-              const disabledFunc = (row: any, index: number | null, rowId: string | number) =>
-                sandBoxSafeRun(item.disabled, {
-                  ...row,
-                  row,
-                  index,
-                  rowId,
-                });
-
-              return {
-                ...item,
-                disabled: disabledFunc(row, index, rowId),
-              };
-            }
-            return item;
+        const ruleVis = typeof extd.rule === 'function' ? !extd.rule(row, index, rowId) : !extd.rule;
+
+        return btnVisible[i] === undefined
+          ? ruleVis
+          : btnVisible[i];
+      }).map(item => {
+        if (item.disabled) {
+          const disabledFunc = (row: any, index: number | null, rowId: string | number) => sandBoxSafeRun(item.disabled, {
+            ...row,
+            row,
+            index,
+            rowId,
           });
-        return actualExtendData;
-      }
-      return [];
-    },
-    [extend, sandBoxSafeRun]
-  );
+
+          return {
+            ...item,
+            disabled: disabledFunc(row, index, rowId),
+          };
+        }
+        return item;
+      });
+      return actualExtendData;
+    }
+    return [];
+  }, [extend, sandBoxSafeRun]);
 
   const calcRowActionWidth = useCallback(
     (actions = []) => {
@@ -298,25 +295,27 @@ const useColumns = (props: any) => {
       const defaultPadding = 20; // 默认左右 padding
       const mdsmPadding = 16; // 中小尺寸左右 padding
       const dividerWidth = 17; // 分割线占位宽度（含margin）
-      const realPadding = ['small', 'middle'].includes(size || '') ? mdsmPadding : defaultPadding;
+      const realPadding = ['small', 'middle'].includes(size || '')
+        ? mdsmPadding
+        : defaultPadding;
       const realFontWidth = size === 'small' ? smFontWidth : fontWidth;
       const realDividerWidth = dividerWidth * (titleArr.length - 1);
-      width = realDividerWidth + (defaultIconWidth + space) * iconNum + realFontWidth * titleArr.join('').length + realPadding;
+      width =
+        realDividerWidth +
+        (defaultIconWidth + space) * iconNum +
+        realFontWidth * titleArr.join('').length +
+        realPadding;
       return width;
     },
-    [size]
+    [size],
   );
 
-  const handleResize =
-    (index: number) =>
-      (_: React.SyntheticEvent<Element>, { size }: any) => {
-        const newColumns = [...columnWidth];
-        newColumns[index] = Number.isNaN(size.width) ? 200 : size.width;
-        setColumnWidth(newColumns);
-      };
+  const handleResize = (key: string) => (_: React.SyntheticEvent<Element>, { size }: any) => {
+    setColumnWidth(pre => ({ ...pre, [key]: Number.isNaN(size.width) ? 200 : size.width }));
+  };
 
   // 处理cell props
-  const createCellProps = (record: any, col: { dataIndex: string | string[]; [key: string]: any }, rowIndex: number) => {
+  const createCellProps = (record: any, col: {dataIndex: string | string[], [key:string]: any}, rowIndex:number) => {
     const __rowSpan = rowSpanMap?.get(record) || {};
     const __rowClass = rowClassMap?.get(record) || {};
     const dataIndex = `${col.dataIndex}`;
@@ -343,10 +342,10 @@ const useColumns = (props: any) => {
       rowId: record[currentRowKey],
       rowIndex,
       editable:
-        !!col.editoption &&
-        currentRowKey &&
-        // 整表或当前行编辑时
-        ((nowInlineEditKey && record[currentRowKey] === nowInlineEditKey) || editMode === 'multiple'),
+              !!col.editoption &&
+              currentRowKey &&
+              // 整表或当前行编辑时
+              ((nowInlineEditKey && record[currentRowKey] === nowInlineEditKey) || editMode === 'multiple'),
       isExtend: col.isExtend,
       dataIndex: col.dataIndex,
       colorFormatInfo: [...(colorFormatInfo || []), ...(col.colorFormatInfo || [])],
@@ -365,17 +364,13 @@ const useColumns = (props: any) => {
       cellProps['td-dataIndex'] = col.dataIndex;
     }
 
-    const { translateContent } = parseTranslateContent(col, {
-      text: get(record, col.dataIndex),
-      row: record,
-      index: rowIndex,
-    });
+    const { translateContent } = parseTranslateContent(col, { text: get(record, col.dataIndex), row: record, index: rowIndex });
 
     // 单元格提示 -> 默认提示
     if (
       col?.editContent?.edittype === 'title' &&
-      col?.editContent?.title &&
-      col.key !== ACTION_COL_KEY // 操作列不需要默认提示
+            col?.editContent?.title &&
+            col.key !== ACTION_COL_KEY // 操作列不需要默认提示
     ) {
       if (col?.editContent?.title?.code && col?.editContent?.title?.jsx) {
         cellProps.title = undefined;
@@ -414,33 +409,33 @@ const useColumns = (props: any) => {
 
   // 递归解析列信息
   const recursiveColumns = (columns: any) => {
-    const resolveColumns = columns
-      .map((col: any, index: number) => {
-        if (col === Table.EXPAND_COLUMN) {
-          return col;
-        }
+    const resolveColumns = columns.map((col: any, index: number) => {
+      if (col === Table.EXPAND_COLUMN) {
+        return col;
+      }
 
-        if (col?.children?.length) {
-          col.children = recursiveColumns(col?.children);
-        }
+      if (col?.children?.length) {
+        col.children = recursiveColumns(col?.children);
+      }
 
-        return {
-          ...col,
-          onCell: (record: any, rowIndex: number) => {
-            const cellProps = createCellProps(record, col, rowIndex);
-            return cellProps;
-          },
-          onHeaderCell: (record: any) => ({
-            width: record.width,
-            isFlexColumn,
-            onResize: handleResize(index),
-            style: record?.style,
-            columnIndex: record?.columnIndex,
-          }),
-        };
-      })
+      return {
+        ...col,
+        onCell: (record: any, rowIndex: number) => {
+          const cellProps = createCellProps(record, col, rowIndex);
+          return cellProps;
+        },
+        onHeaderCell: (record: any) => ({
+          width: record.width,
+          isFlexColumn,
+          onResize: handleResize(col?.key),
+          style: record?.style,
+          columnIndex: record?.columnIndex,
+          [TH_CELL_KEY]: col?.key,
+        }),
+      };
+    })
       .reduce((prev: any, curr: any) => {
-        // 将动态列的列配置数组数据打平
+      // 将动态列的列配置数组数据打平
         if (Array.isArray(curr)) {
           return [...prev, ...curr];
         }
@@ -458,7 +453,10 @@ const useColumns = (props: any) => {
         // 过滤掉隐藏的扩展按钮，得到真正的扩展按钮数据
         const actualExtendRowActions = getRealExtendRowActions(row, index);
 
-        const currRowActionWidth = calcRowActionWidth([...actualRowActions, ...actualExtendRowActions]);
+        const currRowActionWidth = calcRowActionWidth([
+          ...actualRowActions,
+          ...actualExtendRowActions,
+        ]);
         width = currRowActionWidth > width ? currRowActionWidth : width;
       });
 
@@ -489,7 +487,7 @@ const useColumns = (props: any) => {
     const extendCols: any[] = [];
     // 记录每层分组的数量
     const group = new Map<number, number>();
-
+    
     // 解析column
     const parseCol = (c: any) => {
       try {
@@ -516,7 +514,7 @@ const useColumns = (props: any) => {
             extendCols.push(newCol);
           }
         }
-        if (!isHidden && newCol?.group) {
+        if (!isHidden && Array.isArray(newCol?.group)) {
           newCol.group.forEach((c: string, gi: number) => {
             if (!group.has(gi)) {
               group.set(gi, 0);
@@ -542,7 +540,7 @@ const useColumns = (props: any) => {
               dataIndex,
               title: c[col.title],
             };
-
+  
             // 动态列标记一下，合计行需要根据key处理
             realCol.dynamicOriginKey = realCol.key;
             // key增强，拼接index，防止重复
@@ -572,20 +570,22 @@ const useColumns = (props: any) => {
       });
     }
     // 只展示选中列
-    let customCols = customizableCols.filter(c => {
-      if (hasCustom) {
-        if (customSelectedCols === undefined) {
-          if (defaultColumn) {
-            // 没有缓存列，使用默认列
-            return defaultColumnSet.has(c.key);
+    let customCols = customizableCols.filter(
+      (c) => {
+        if (hasCustom) {
+          if (customSelectedCols === undefined) {
+            if (defaultColumn) {
+              // 没有缓存列，使用默认列
+              return defaultColumnSet.has(c.key);
+            }
+          } else {
+            // 有缓存列，使用缓存列
+            return customSelectedCols?.includes(`${c.dataIndex}`);
           }
-        } else {
-          // 有缓存列，使用缓存列
-          return customSelectedCols?.includes(`${c.dataIndex}`);
         }
-      }
-      return true;
-    });
+        return true;
+      },
+    );
     // 固定列与自定义列拼接在一起组成最终展示列
     customCols = fixedLeft.concat(customCols).concat(fixedRight);
     return [customCols, customizableCols, group];
@@ -659,18 +659,10 @@ const useColumns = (props: any) => {
       // 静态数据翻译
       if (Array.isArray(staticDataSource)) {
         // 支持数组或逗号分支字符翻译
-        translateContent = (Array.isArray(text) ? text : String(text).split(','))
-          .map(n => {
-            // 弱等保证 Number 与 String 可比较
-            const obj = staticDataSource.find(o => o.value == n); // eslint-disable-line
-            return obj ? obj.label : n;
-          })
-          .join(',');
+        translateContent = translateStaticData(text, staticDataSource);
       } else if (editoption && editoption?.__staticService__ && editoption.edittype === 'SuperSelect') {
         // 高级选择框选用后端翻译好的字段值
-        const realDataIndex = Array.isArray(dataIndex)
-          ? [...dataIndex.slice(0, dataIndex.length - 1), `${dataIndex[dataIndex.length - 1]}_introduce`]
-          : `${dataIndex}_introduce`;
+        const realDataIndex = Array.isArray(dataIndex) ? [...(dataIndex.slice(0, dataIndex.length - 1)), `${dataIndex[dataIndex.length - 1]}_introduce`] : `${dataIndex}_introduce`;
         const _introduce = get(row, realDataIndex);
         translateContent = _introduce ? (Array.isArray(_introduce) ? _introduce : [_introduce]).join(',') : text;
       }
@@ -690,9 +682,7 @@ const useColumns = (props: any) => {
         }
       }
       if (editoption?.edittype === 'ModalSelect') {
-        const realDataIndex = Array.isArray(dataIndex)
-          ? [...dataIndex.slice(0, dataIndex.length - 1), `${dataIndex[dataIndex.length - 1]}_introduce`]
-          : `${dataIndex}_introduce`;
+        const realDataIndex = Array.isArray(dataIndex) ? [...(dataIndex.slice(0, dataIndex.length - 1)), `${dataIndex[dataIndex.length - 1]}_introduce`] : `${dataIndex}_introduce`;
         const _introduce = get(row, realDataIndex);
         translateContent = _introduce ? (Array.isArray(_introduce) ? _introduce : [_introduce]).join(',') : text;
       }
@@ -713,31 +703,33 @@ const useColumns = (props: any) => {
   // 处理普通列和动态列属性、渲染逻辑
   const generateTableCol = (colInfo: any) => {
     const c = colInfo;
-    const { editoption, dataIndex, editContent } = c;
+    const {
+      editoption,
+      dataIndex,
+      editContent,
+    } = c;
 
     c.render = (text: any, row: any, index: any) => {
       const rowId = row[currentRowKey];
-      const { translateContent, rowEditoption } = parseTranslateContent(c, {
-        text,
-        row,
-        index,
-      });
+      const { translateContent, rowEditoption } = parseTranslateContent(c, { text, row, index });
 
       // 编辑内容
       if (editoption && editoption.edittype) {
-        // 行编辑规则
+      // 行编辑规则
         const isRowEditableCanUse = !!handleIsRowEditableCanUse && handleIsRowEditableCanUse(row, index);
 
         // 列可编辑规则
         let isColEditable = true;
         if (typeof editoption.editable === 'string') {
           const editoptionEditableRule = editoption.editable;
-          editoption.editable = (row: any, rowId: string | number, index: number) =>
-            sandBoxSafeRun(editoptionEditableRule, {
+          editoption.editable = (row: any, rowId: string | number, index: number) => sandBoxSafeRun(
+            editoptionEditableRule,
+            {
               row,
               rowId,
               index,
-            });
+            }
+          );
         }
 
         if (typeof editoption.editable === 'function') {
@@ -746,25 +738,33 @@ const useColumns = (props: any) => {
 
         // 弹窗选择控件，组件状态入参处理
         const responseObj = editoption?.modalInfo?.responseObj;
-        if (Array.isArray(responseObj) && editoption?.edittype === 'ModalSelect' && responseObj?.length) {
+        if (
+          Array.isArray(responseObj) &&
+        editoption?.edittype === 'ModalSelect' &&
+        responseObj?.length
+        ) {
           // 保留原有配置 不然会导致首次解析结果会被再次解析
-          editoption.modalInfo.responseObjRun = (row: any, rowId: string | number, index: number) =>
+          editoption.modalInfo.responseObjRun = (row: any, rowId: string | number, index: number) => (
             responseObj?.map((_d: any) => {
               const d = { ..._d };
               if (typeof d?.value === 'string') {
                 const rule = d.value;
-                d.value = sandBoxSafeRun(rule, {
-                  row,
-                  rowId,
-                  index,
-                });
+                d.value = sandBoxSafeRun(
+                  rule,
+                  {
+                    row,
+                    rowId,
+                    index,
+                  }
+                );
                 // 如果为空说明sandBoxSafeRun 执行异常应该直接给rule,不然直接输入字符串不行
                 if (d.value === undefined && rule) {
                   d.value = rule;
                 }
               }
               return d;
-            });
+            })
+          );
         }
 
         let modalSelectParams = [];
@@ -824,10 +824,10 @@ const useColumns = (props: any) => {
       let controllLineStyle = {};
       const isLineNumSet = c.lineNum && typeof c.lineNum === 'number' && c.lineNum > 0;
       if (isLineNumSet) {
-        // const lineHeight = size === 'small' ? 16 : 20;
+      // const lineHeight = size === 'small' ? 16 : 20;
         controllLineStyle = {
-          // lineHeight: `${lineHeight}px`,
-          // maxHeight: `${lineHeight * c.lineNum}px`,
+        // lineHeight: `${lineHeight}px`,
+        // maxHeight: `${lineHeight * c.lineNum}px`,
           WebkitLineClamp: c.lineNum,
         };
       }
@@ -836,8 +836,8 @@ const useColumns = (props: any) => {
 
       if (
         c?.editContent?.edittype === 'title' &&
-        c?.editContent?.title &&
-        c.key !== ACTION_COL_KEY // 操作列不需要默认提示
+      c?.editContent?.title &&
+      c.key !== ACTION_COL_KEY // 操作列不需要默认提示
       ) {
         if (c?.editContent?.title?.code && c?.editContent?.title?.jsx) {
           shouldRenderEdittypeTitle = true;
@@ -861,7 +861,7 @@ const useColumns = (props: any) => {
                       index,
                     }}
                   />
-                }
+              }
               >
                 <span>{translateContent}</span>
               </Tooltip>
@@ -897,7 +897,7 @@ const useColumns = (props: any) => {
       } else if (c.customRendering && funcExpExecute) {
         content = (
           <span
-            // eslint-disable-next-line react/no-danger
+          // eslint-disable-next-line react/no-danger
             dangerouslySetInnerHTML={{
               __html: funcExpExecute(c.customRendering, [
                 {
@@ -929,15 +929,20 @@ const useColumns = (props: any) => {
             const pageRule = page.rule;
             if (pageRule) {
               if (typeof pageRule === 'string') {
-                page.rule = (row: any, rowId: string, index: number) =>
-                  sandBoxSafeRun(pageRule, {
+                page.rule = (row: any, rowId: string, index: number) => sandBoxSafeRun(
+                  pageRule,
+                  {
                     row,
                     rowId,
                     index,
-                  });
+                  }
+                );
               }
 
-              if (typeof page?.rule === 'function' && page.rule(row, rowId, index)) {
+              if (
+                typeof page?.rule === 'function' &&
+                page.rule(row, rowId, index)
+              ) {
                 return content;
               }
             }
@@ -956,12 +961,14 @@ const useColumns = (props: any) => {
                 const stateParamRule = c?.paramFunc ?? c?.stateParam;
                 if (stateParamRule) {
                   if (typeof stateParamRule === 'string') {
-                    c.paramFunc = (row: any, rowId: string, index: number) =>
-                      sandBoxSafeRun(stateParamRule, {
+                    c.paramFunc = (row: any, rowId: string, index: number) => sandBoxSafeRun(
+                      stateParamRule,
+                      {
                         row,
                         rowId,
                         index,
-                      });
+                      }
+                    );
                   }
 
                   if (typeof c.paramFunc === 'function') {
@@ -988,23 +995,26 @@ const useColumns = (props: any) => {
             },
             uid: compId,
           });
-        } else if (options.content) {
-          // 自定义
+        } else if (options.content) { // 自定义
           const { maxWidth, content: popContent, rule: popRule, ...resOptions } = options;
 
           // 隐藏规则
           try {
             if (popRule) {
               if (typeof popRule === 'string') {
-                options.rule = (row: any, rowId: string, index: number) =>
-                  sandBoxSafeRun(popRule, {
+                options.rule = (row: any, rowId: string, index: number) => sandBoxSafeRun(
+                  popRule,
+                  {
                     row,
                     rowId,
                     index,
-                  });
+                  }
+                );
               }
-
-              if (typeof options?.rule === 'function' && options.rule(row, rowId, index)) {
+              if (
+                typeof options?.rule === 'function' &&
+              options.rule(row, rowId, index)
+              ) {
                 return content;
               }
             }
@@ -1017,12 +1027,14 @@ const useColumns = (props: any) => {
             if (popContent) {
               let popoverContent = popContent;
               if (typeof popContent === 'string') {
-                popoverContent = (row: any, rowId: string, index: number) =>
-                  sandBoxSafeRun(popContent, {
+                popoverContent = (row: any, rowId: string, index: number) => sandBoxSafeRun(
+                  popContent,
+                  {
                     row,
                     rowId,
                     index,
-                  });
+                  }
+                );
               }
 
               if (typeof popoverContent === 'function') {
@@ -1039,10 +1051,7 @@ const useColumns = (props: any) => {
 
           content = (
             <Popover
-              overlayStyle={{
-                maxWidth: maxWidth || 'none',
-                wordBreak: 'break-word',
-              }}
+              overlayStyle={{ maxWidth: maxWidth || 'none', wordBreak: 'break-word' }}
               content={newPopContent}
               {...resOptions}
               arrowPointAtCenter
@@ -1057,7 +1066,7 @@ const useColumns = (props: any) => {
     };
     // 是否开启排序（判断标准：1、配置态配置 sorter: true 2、存量数据存在 defaultSortOrder)
     if (c.sorter || c.defaultSortOrder) {
-      // 判断是根据前端默认排序函数排序，还是受控排序
+    // 判断是根据前端默认排序函数排序，还是受控排序
       if (hasSortEvent || Object.keys(rowSpanColMap).length > 0) {
         c.sorter = true;
       } else {
@@ -1078,7 +1087,9 @@ const useColumns = (props: any) => {
     };
 
     newColumns.forEach((c, i) => {
-      const { dataIndex } = c;
+      const {
+        dataIndex,
+      } = c;
 
       newColumns[i].columnIndex = i;
 
@@ -1094,10 +1105,16 @@ const useColumns = (props: any) => {
       }
 
       newColumns[i].title = () => (
-        <HeaderCellTitle size={size} column={{ ...c, title: c.originTitle }} mode="engine" funcExpExecute={funcExpExecute} engineApis={engineApis} />
+        <HeaderCellTitle
+          size={size}
+          column={{ ...c, title: c.originTitle }}
+          mode="engine"
+          funcExpExecute={funcExpExecute}
+          engineApis={engineApis}
+        />
       );
 
-      if (c?.group) {
+      if (Array.isArray(c?.group)) {
         // 过滤掉整层为空的分组
         c.group = c.group.filter((_: string, gi: number) => groupMark.get(gi) !== 0);
       }
@@ -1116,7 +1133,10 @@ const useColumns = (props: any) => {
     // 处理表头分组合并
     finalCols = handleMergeHeader(finalCols as any[]) || finalCols;
 
-    if (!hiddenAction && ((rowActions && rowActions.length) || (extend && extend.length))) {
+    if (
+      !hiddenAction &&
+      ((rowActions && rowActions.length) || (extend && extend.length))
+    ) {
       actionRowFlag.current = true;
       const isSmallPopover = innerDataSource?.length < 4;
       const actionColumn: any = {
@@ -1172,8 +1192,8 @@ const useColumns = (props: any) => {
 
     // 处理表头背景色
     if (tableGroupColorInfo) {
-      const { colIdMap }: any =
-        tableGroupColorInfo?.colorType === 'single' ? {} : handleRecursiveParseColumns(tableGroupColorInfo?.customColorColumns);
+      const { colIdMap }: any = tableGroupColorInfo?.colorType === 'single' ? {}
+        : handleRecursiveParseColumns(tableGroupColorInfo?.customColorColumns);
       handleRecursiveParseColumns(finalCols, 1, {
         colorType: tableGroupColorInfo?.colorType,
         customColorSetting: colIdMap,
@@ -1245,27 +1265,37 @@ const useColumns = (props: any) => {
   }, [finalcolumns]);
 
   useEffect(() => {
-    if (tableRef.current && isFlexColumn) {
+    if (!initRef.current) {
+      if (tableRef.current && isFlexColumn) {
       // 如果开启了内容滚动， 但是没有配置内容宽度，则取表格项配置里的宽度，否则通过计算表格最终th渲染的宽度
-      if (scroll && !scroll.x) {
-        setColumnWidth(finalcolumns.map(item => item.width || 100));
-        setInitLoadColWidth(true);
-      } else {
-        // 当前执行时，antd表格列虽展示，但列宽按指定宽度渲染，需等下一次render，目前解决办法先延迟执行
-        setTimeout(() => {
-          const thList = tableRef?.current?.querySelectorAll('.pcfactory-table-thead th') || [];
-          for (let i = 0; i < thList.length; i += 1) {
-            const rowWidth = thList[i].offsetWidth;
-            columnWidth[i] = rowWidth;
-          }
-          // TODO: 这里是啥意思？？
-          if (rowSelection) {
-            columnWidth.shift();
-          }
-          setColumnWidth([...columnWidth]);
+        if (scroll && !scroll.x) {
+          setColumnWidth(pre => {
+            const obj = { ...pre };
+            finalcolumns.forEach(item => {
+              obj[item.key] = item.width || 100;
+            });
+            return pre;
+          });
           setInitLoadColWidth(true);
-        });
+        } else {
+        // 当前执行时，antd表格列虽展示，但列宽按指定宽度渲染，需等下一次render，目前解决办法先延迟执行
+          setTimeout(() => {
+            setColumnWidth(pre => {
+              const p = { ...pre };
+              const thList = tableRef?.current?.querySelectorAll('.pcfactory-table-thead th.react-resizable') || [];
+              for (let i = 0; i < thList.length; i += 1) {
+                const rowWidth = thList[i].offsetWidth;
+                // 根据唯一key标识拖拽宽度
+                const cellKey = thList[i].getAttribute(TH_CELL_KEY);
+                p[cellKey] = rowWidth;
+              }
+              return p;
+            });
+            setInitLoadColWidth(true);
+          });
+        }
       }
+      initRef.current = true;
     }
   }, [tableRef.current, isFlexColumn]);