@lingxiteam/ebe-utils 0.1.16 → 0.1.18

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

@@ -1,31 +1,21 @@
 /* eslint-disable no-nested-ternary */
-import { CloseOutlined, SaveOutlined } from '@ant-design/icons';
-import { Icon as LegacyIcon } from '@lingxiteam/icons';
-import {
-  Button,
-  Divider,
-  Popconfirm,
-  Popover,
-  Skeleton,
-  Table,
-  Tooltip,
-} from 'antd';
+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 } from 'lodash';
+import { cloneDeep, get } from 'lodash';
 import React, {
-  Fragment,
   useCallback,
   useEffect,
   useMemo,
   useRef,
   useState,
 } from 'react';
-import CommIcon from '../../Icon';
+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,
@@ -100,8 +90,8 @@ const useColumns = (props: any) => {
     onTableCellClick,
     getRealIndexById,
     showCustom,
+    scroll,
   } = props;
-
   const actionsMap: any = actionsMapFn(getLocale);
 
   const { customEngineApi, getUserInfo } = engineApis || {};
@@ -115,10 +105,10 @@ const useColumns = (props: any) => {
   const [pageData, setPageData] = useState<any>({});
   const [colCustomOrder, setColCustomOrder] = useState<any>([]); // 自定义列顺序记录
   const [customSelectedCols, setCustomSelectedCols] = useState<any>(); // 自定义列显隐记录
-  const [popVisible, setPopVisible] = useState({});
   const [columnWidth, setColumnWidth] = useState<any[]>([]);
   // 初始加载列宽
   const [initLoadColWidth, setInitLoadColWidth] = useState(false);
+  const { hasCustom, defaultColumn } = showCustom || {};
 
   const getInnerRowAction = (
     rowAction: any,
@@ -386,341 +376,20 @@ const useColumns = (props: any) => {
       setColumnWidth(newColumns);
     };
 
-  // 操作栏扩展按钮
-  const renderExtendBtns = (
-    btnList: any,
-    isPopover = false,
-    row: any,
-    index: number,
-  ) => {
-    return btnList.map((c: any, i: number) => {
-      if (c.type) {
-        return renderBuiltInSingleBtn(
-          c,
-          row,
-          index,
-          i,
-          btnList,
-          isPopover,
-          btnList?.slice(i),
-        );
-      }
-      const {
-        icon,
-        iconPos,
-        id,
-        isIcon,
-        onClick,
-        visible: buttonVisible = true,
-      } = c;
-      const iconClassName = iconPos
-        ? iconPos === 'left'
-          ? 'actIcon-left'
-          : 'actIcon-right'
-        : '';
-      const BtnIcon = icon ? (
-        <CommIcon
-          getEngineApis={props?.getEngineApis}
-          $$componentItem={props?.$$componentItem}
-          className={iconClassName}
-          icon={icon}
-          engineApis={engineApis}
-        />
-      ) : undefined;
-      return buttonVisible ? (
-        isPopover ? (
-          <div>
-            <Tooltip title={c.title} visible={!!isIcon && undefined}>
-              <Button
-                type="link"
-                className="ued-table-actions-antBtn"
-                disabled={c.disabled}
-                key={id}
-                onClick={(e) => {
-                  e.stopPropagation();
-                  if (typeof onClick === 'function') {
-                    onClick(
-                      currentRowKey ? row[currentRowKey] : row,
-                      row,
-                      index,
-                    );
-                  }
-                }}
-              >
-                <div className="ued-table-actions-extendBtn">
-                  {iconPos && iconPos === 'left' && BtnIcon}
-                  {!isIcon && c.title}
-                  {iconPos && iconPos === 'right' && BtnIcon}
-                </div>
-              </Button>
-            </Tooltip>
-          </div>
-        ) : (
-          <Fragment key={id}>
-            <Tooltip title={c.title} visible={!!isIcon && undefined}>
-              <Button
-                type="link"
-                className="ued-table-actions-antBtn"
-                disabled={c.disabled}
-                key={id}
-                onClick={(e) => {
-                  e.stopPropagation();
-                  if (typeof onClick === 'function') {
-                    onClick(
-                      currentRowKey ? row[currentRowKey] : row,
-                      row,
-                      index,
-                    );
-                  }
-                }}
-              >
-                <div className="ued-table-actions-extendBtn">
-                  {iconPos && iconPos === 'left' && BtnIcon}
-                  {!isIcon && c.title}
-                  {iconPos && iconPos === 'right' && BtnIcon}
-                </div>
-              </Button>
-            </Tooltip>
-            {i !== btnList.length - 1 && <Divider type="vertical" />}
-          </Fragment>
-        )
-      ) : null;
-    });
-  };
-
-  // 操作栏更多按钮
-  const renderExtendMoreBtns = (
-    showBuiltInBtns: any[],
-    showExtendBtns: any[],
-    moreBuiltInBtns: any[],
-    moreExtendBtns: any[],
-    row: any,
-    index: any,
-  ) => {
-    return (
-      <>
-        {
-          // 扩展
-          showExtendBtns?.length > 0 ? (
-            <>
-              {!!showBuiltInBtns?.length && <Divider type="vertical" />}
-              {renderExtendBtns(showExtendBtns, false, row, index)}
-            </>
-          ) : null
-        }
-        {
-          // 更多
-          moreBuiltInBtns?.length + moreExtendBtns?.length > 0 && (
-            <>
-              {/* TODO:  是什么？ showBuiltInBtns[showBuiltInBtns.length - 1]?.visible !== false */}
-              {(!!showBuiltInBtns?.length || !!showExtendBtns?.length) && (
-                <Divider type="vertical" />
-              )}
-              <Popover
-                overlayClassName="ued-table-more-pop"
-                content={
-                  <div
-                    style={{
-                      maxHeight: '300px',
-                      overflow: 'auto',
-                      padding: '12px 16px',
-                    }}
-                    onClick={(e) => e.stopPropagation()}
-                  >
-                    {moreBuiltInBtns?.length
-                      ? moreBuiltInBtns.map((child: any, idx: number) => {
-                          return renderBuiltInSingleBtn(
-                            child,
-                            row,
-                            index,
-                            idx,
-                            showBuiltInBtns,
-                            true,
-                          );
-                        })
-                      : null}
-                    {renderExtendBtns(moreExtendBtns, true, row, index)}
-                  </div>
-                }
-                trigger="click"
-                placement="topRight"
-                getPopupContainer={(triggerNode: HTMLElement) =>
-                  triggerNode?.parentNode as HTMLElement
-                }
-                onVisibleChange={(vis: boolean) => {
-                  if (fixedAction && tableRef?.current) {
-                    const fixedActionEle =
-                      tableRef.current?.querySelectorAll(
-                        '.ued-table-actions',
-                      )?.[index]?.parentNode;
-                    // 操作列固定时 此时fixedActionEle默认antd样式为 position: sticky;z-index: 2
-                    // 由于气泡卡片挂在fixedActionEle里面导致被后面的列遮盖
-                    if (fixedActionEle) {
-                      fixedActionEle.style.zIndex = vis ? 3 : 2;
-                    }
-                  }
-                }}
-              >
-                <Button
-                  type="link"
-                  className="ued-table-actions-antBtn"
-                  key="more"
-                  onClick={(e) => e.stopPropagation()}
-                >
-                  <div className="ued-table-actions-extendBtn">
-                    {getLocale?.('more')}
-                    <LegacyIcon className="actIcon-left" type="down" />
-                  </div>
-                </Button>
-              </Popover>
-            </>
-          )
-        }
-      </>
-    );
-  };
-
-  // 操作栏单个内置按钮
-  const renderBuiltInSingleBtn = (
-    c: any,
-    row: any,
-    rowIndex: number | null,
-    idx: number,
-    defaultBtnList: any,
-    isPopover = false,
-    showExtendBtns?: any[],
-    moreBuiltInBtns?: any[],
-    moreExtendBtns?: any[],
-  ) => {
-    // eslint-disable-next-line no-nested-ternary
-    const iconClassName = c?.iconPos
-      ? c.iconPos === 'left'
-        ? 'actIcon-left'
-        : 'actIcon-right'
-      : '';
-    const { visible: buttonVisible = true } = c;
-    const BtnIcon = c.icon ? (
-      <CommIcon
-        className={iconClassName}
-        icon={c.icon}
-        getEngineApis={props?.getEngineApis}
-        $$componentItem={props?.$$componentItem}
-      />
-    ) : undefined;
-
-    const type = typeof c === 'string' ? c : c?.type;
-
-    let buildInBtn = (
-      <Button
-        type="link"
-        disabled={c.disabled}
-        className={classnames(
-          'ued-table-actions-antBtn',
-          type ? `ued-table-actions-${type}` : undefined,
-        )}
-        key={typeof c === 'string' ? c : c.type}
-        onClick={(e) => {
-          e.stopPropagation();
-          if (
-            (typeof c === 'string' ? c === 'detail' : c.type === 'detail') &&
-            typeof onRowDetailClick === 'function'
-          ) {
-            onRowDetailClick(row, rowIndex);
-          } else if (
-            (typeof c === 'string' ? c === 'edit' : c.type === 'edit') &&
-            typeof onRowEditClick === 'function'
-          ) {
-            onRowEditClick(row, rowIndex);
-          }
-          setPopVisible({ ...popVisible, [popKey]: false });
-        }}
-        onDoubleClick={(e) => {
-          e.stopPropagation();
-        }}
-      >
-        {typeof c === 'string' ? (
-          <div className="ued-table-actions-extendBtn">
-            <LegacyIcon className="actIcon-left" type={actionsMap[c][1]} />
-            {actionsMap[c][0]}
-          </div>
-        ) : (
-          <div className="ued-table-actions-extendBtn">
-            {c.iconPos && c.iconPos === 'left' && BtnIcon}
-            {!c.isIcon && c.title}
-            {c.iconPos && c.iconPos === 'right' && BtnIcon}
-          </div>
-        )}
-      </Button>
-    );
-    const popKey = `${rowIndex}-${idx}`;
-    buildInBtn = c.isIcon ? (
-      <Tooltip
-        title={c.title}
-        // @ts-ignore
-        visible={popVisible?.[popKey]}
-        onVisibleChange={(v) => setPopVisible({ ...popVisible, [popKey]: v })}
-      >
-        {buildInBtn}
-      </Tooltip>
-    ) : (
-      buildInBtn
-    );
-
-    const btn = buttonVisible ? (
-      <Fragment key={idx}>
-        {(typeof c === 'string' ? c === 'delete' : c.type === 'delete') &&
-        !c.disabled ? (
-          <span
-            style={{ lineHeight: '0px' }}
-            onClick={(e) => {
-              e.stopPropagation();
-            }}
-            onDoubleClick={(e) => {
-              e.stopPropagation();
-            }}
-          >
-            <Popconfirm
-              onVisibleChange={(v) =>
-                v && setPopVisible({ ...popVisible, [popKey]: false })
-              }
-              placement={
-                moreBuiltInBtns?.length ||
-                moreExtendBtns?.length ||
-                showExtendBtns?.length
-                  ? 'top'
-                  : 'topRight'
-              }
-              title={getLocale('deleteConfirm')}
-              onConfirm={(e: any) => {
-                e.stopPropagation();
-                if (typeof onRowDeleteClick === 'function') {
-                  onRowDeleteClick(row, rowIndex);
-                }
-              }}
-            >
-              {buildInBtn}
-            </Popconfirm>
-          </span>
-        ) : (
-          buildInBtn
-        )}
-        {!isPopover && idx !== defaultBtnList.length - 1 && (
-          <Divider type="vertical" />
-        )}
-      </Fragment>
-    ) : null;
-    return isPopover ? <div>{btn}</div> : btn;
-  };
-
   // 处理cell props
-  const createCellProps = (record: any, col: 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}`;
     const rowSpan =
-      __rowSpan && __rowSpan[col.dataIndex] === undefined
+      __rowSpan && __rowSpan[dataIndex] === undefined
         ? 1
-        : __rowSpan[col.dataIndex];
-    const rowClass = __rowClass && __rowClass[col.dataIndex];
+        : __rowSpan[dataIndex];
+    const rowClass = __rowClass && __rowClass[dataIndex];
 
     // 表格单元格内-行数控制控制
     let controllLineStyle = null;
@@ -753,11 +422,14 @@ const useColumns = (props: any) => {
         ...(colorFormatInfo || []),
         ...(col.colorFormatInfo || []),
       ],
+      width: col.width,
       isCustomRendering: !!col.customRendering,
       rowSpan,
       className: rowClass,
       onTableCellClick,
       controllLineStyle,
+      $$componentItemId: props.$$componentItem.id,
+      index: getRealIndexById(record[currentRowKey]),
     };
 
     if (col.filter) {
@@ -766,7 +438,7 @@ const useColumns = (props: any) => {
     }
 
     const { translateContent } = parseTranslateContent(col, {
-      text: record[col.dataIndex],
+      text: get(record, col.dataIndex),
       row: record,
       index: rowIndex,
     });
@@ -832,7 +504,7 @@ const useColumns = (props: any) => {
           if (col?.dataSource?.length) {
             const dynamicColumns = col.dataSource.map(
               (c: any, index: number) => {
-                const dataIndex = c[col.dataIndex];
+                const dataIndex = get(c, col.dataIndex);
                 const realCol = {
                   ...col, // 动态列所有配置行为（排序、固定等）相同
                   dataIndex,
@@ -1016,16 +688,31 @@ const useColumns = (props: any) => {
       }
     });
     const customizableCols = newColumns.concat(extendCols);
+    const defaultColumnSet = new Set<string>();
+    if (hasCustom && defaultColumn?.length) {
+      defaultColumn.forEach((c: any) => {
+        defaultColumnSet.add(c.key);
+      });
+    }
     // 只展示选中列
-    let customCols = customizableCols.filter(
-      (c) =>
-        customSelectedCols === undefined ||
-        customSelectedCols?.includes(c.dataIndex),
-    );
+    let customCols = customizableCols.filter((c) => {
+      if (hasCustom) {
+        if (customSelectedCols === undefined) {
+          if (defaultColumn) {
+            // 没有缓存列，使用默认列
+            return defaultColumnSet.has(c.key);
+          }
+        } else {
+          // 有缓存列，使用缓存列
+          return customSelectedCols?.includes(`${c.dataIndex}`);
+        }
+      }
+      return true;
+    });
     // 固定列与自定义列拼接在一起组成最终展示列
     customCols = fixedLeft.concat(customCols).concat(fixedRight);
     return [customCols, customizableCols, group];
-  }, [columns, colCustomOrder, customSelectedCols]);
+  }, [columns, colCustomOrder, customSelectedCols, hasCustom, defaultColumn]);
 
   const actionRowFlag = useRef<boolean>(false);
 
@@ -1079,7 +766,10 @@ const useColumns = (props: any) => {
       // 绑定了服务
       const { labelKey, valueKey } = rowEditoption.selectoption.staticService;
       const optionskey = Object.keys(colServiceDataForEdit).find((k) => {
-        if (k === c.dataIndex && Array.isArray(colServiceDataForEdit[k])) {
+        if (
+          `${k}` === `${c.dataIndex}` &&
+          Array.isArray(colServiceDataForEdit[k])
+        ) {
           return true;
         }
         return false;
@@ -1117,7 +807,13 @@ const useColumns = (props: any) => {
         editoption.edittype === 'SuperSelect'
       ) {
         // 高级选择框选用后端翻译好的字段值
-        const _introduce = row[`${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;
@@ -1126,7 +822,8 @@ const useColumns = (props: any) => {
       if (staticService && colServiceData) {
         const { labelKey, valueKey } = staticService;
         const needtranskey = Object.keys(colServiceData).find(
-          (k) => k === c.dataIndex && Array.isArray(colServiceData[k]),
+          (k) =>
+            `${k}` === `${c.dataIndex}` && Array.isArray(colServiceData[k]),
         );
         if (needtranskey) {
           // 支持数组或逗号分支字符翻译
@@ -1144,7 +841,13 @@ const useColumns = (props: any) => {
         }
       }
       if (editoption?.edittype === 'ModalSelect') {
-        const _introduce = row[`${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;
@@ -1211,12 +914,14 @@ const useColumns = (props: any) => {
           editoption?.edittype === 'ModalSelect' &&
           responseObj?.length
         ) {
-          editoption.modalInfo.responseObj = (
+          // 保留原有配置 不然会导致首次解析结果会被再次解析
+          editoption.modalInfo.responseObjRun = (
             row: any,
             rowId: string | number,
             index: number,
           ) =>
-            responseObj?.map((d: any) => {
+            responseObj?.map((_d: any) => {
+              const d = { ..._d };
               if (typeof d?.value === 'string') {
                 const rule = d.value;
                 d.value = sandBoxSafeRun(rule, {
@@ -1234,8 +939,8 @@ const useColumns = (props: any) => {
         }
 
         let modalSelectParams = [];
-        if (typeof editoption?.modalInfo?.responseObj === 'function') {
-          modalSelectParams = editoption?.modalInfo?.responseObj(
+        if (typeof editoption?.modalInfo?.responseObjRun === 'function') {
+          modalSelectParams = editoption?.modalInfo?.responseObjRun(
             row,
             rowId,
             index,
@@ -1338,18 +1043,20 @@ const useColumns = (props: any) => {
       // 自定义渲染函数
       if (c.jsx) {
         content = (
-          <CustomModule
-            code={c.customRendering}
-            sandBoxLoadModule={engineApis.sandBoxLoadModule}
-            errorInfo={{
-              id: props.$$componentItem.id,
-            }}
-            compProps={{
-              text: translateContent,
-              item: row,
-              index,
-            }}
-          />
+          <span>
+            <CustomModule
+              code={c.customRendering}
+              sandBoxLoadModule={engineApis.sandBoxLoadModule}
+              errorInfo={{
+                id: props.$$componentItem.id,
+              }}
+              compProps={{
+                text: translateContent,
+                item: row,
+                index,
+              }}
+            />
+          </span>
         );
       } else if (c.customRendering && funcExpExecute) {
         content = (
@@ -1487,8 +1194,9 @@ const useColumns = (props: any) => {
           let newPopContent = popContent;
           try {
             if (popContent) {
+              let popoverContent = popContent;
               if (typeof popContent === 'string') {
-                options.content = (row: any, rowId: string, index: number) =>
+                popoverContent = (row: any, rowId: string, index: number) =>
                   sandBoxSafeRun(popContent, {
                     row,
                     rowId,
@@ -1496,13 +1204,21 @@ const useColumns = (props: any) => {
                   });
               }
 
-              if (typeof options?.content === 'function') {
-                newPopContent = options.content(row, rowId, index);
+              if (typeof popoverContent === 'function') {
+                newPopContent = popoverContent(row, rowId, index);
               }
             }
           } catch (e) {
             console.error(e);
           }
+          if (
+            newPopContent === undefined &&
+            typeof popContent === 'string' &&
+            !isDynamicProperty(popContent)
+          ) {
+            // 当表达式返回空，且不被$$包裹时，内容当成普通文本处理
+            newPopContent = popContent;
+          }
 
           content = (
             <Popover
@@ -1529,7 +1245,10 @@ const useColumns = (props: any) => {
         c.sorter = true;
       } else {
         c.sorter = (a: any, b: any) => {
-          return compareFn(a[c.dataIndex || c.key], b[c.dataIndex || c.key]);
+          return compareFn(
+            get(a, c.dataIndex || c.key),
+            get(b, c.dataIndex || c.key),
+          );
         };
       }
     }
@@ -1598,6 +1317,7 @@ const useColumns = (props: any) => {
       ((rowActions && rowActions.length) || (extend && extend.length))
     ) {
       actionRowFlag.current = true;
+      const isSmallPopover = innerDataSource?.length < 4;
       const actionColumn: any = {
         title: getLocale('ctrl'),
         key: ACTION_COL_KEY,
@@ -1612,114 +1332,28 @@ const useColumns = (props: any) => {
             nowInlineEditKey &&
             row[currentRowKey] === nowInlineEditKey;
 
-          // 过滤掉隐藏的按钮，得到真正的内置的默认按钮数据(详情、编辑、删除)
-          const builtInBtns = getRealRowActions(
-            row,
-            getRealIndexById(row[currentRowKey]),
-          );
-          // 过滤掉隐藏的扩展按钮，得到真正的扩展按钮数据
-          const extendBtns = getRealExtendRowActions(
-            row,
-            getRealIndexById(row[currentRowKey]),
-          );
-
-          const allBtns = [...builtInBtns, ...extendBtns]?.filter(
-            (btn) => btn?.checked !== false,
-          ); // 只展示选中的按钮;
-
-          let showBtns: any[] = [];
-          let moreBtns: any[] = [];
-
-          // 当按钮数量超过 设置最大展示的数量两个时，超过的两个及以上部分放到更多中
-          const allBtnsLen = allBtns?.length;
-          if (allBtnsLen > extendNum) {
-            showBtns = allBtns.slice(0, extendNum - 1);
-            moreBtns = allBtns.slice(extendNum - 1, allBtnsLen);
-          } else {
-            showBtns = allBtns;
-          }
-
-          const showBuiltInBtns = showBtns.filter(
-            (b) => b.btnType === 'builtIn',
-          );
-          const showExtendBtns = showBtns.filter((b) => b.btnType === 'extend');
-          const moreBuiltInBtns = moreBtns.filter(
-            (b) => b.btnType === 'builtIn',
-          );
-          const moreExtendBtns = moreBtns.filter((b) => b.btnType === 'extend');
-
           return (
-            <div className="ued-table-actions">
-              {
-                // 行内编辑部分
-                isNowEditRow ? (
-                  <>
-                    <div
-                      className="ued-table-actions-extendBtn"
-                      onClick={(e) => {
-                        e.stopPropagation();
-                        if (typeof onRowSaveClick === 'function') {
-                          onRowSaveClick(
-                            row,
-                            getRealIndexById(row[currentRowKey]),
-                            false,
-                          );
-                        }
-                      }}
-                    >
-                      <SaveOutlined rev="" className="actIcon-left" />
-                      {getLocale('save')}
-                    </div>
-                    <Divider type="vertical" />
-                    <Popconfirm
-                      title={getLocale('cancelConfirm')}
-                      placement="topRight"
-                      overlayClassName="ued-table-actions-overlay"
-                      onConfirm={(e: any) => {
-                        e.stopPropagation();
-                        if (typeof onRowCancelClick === 'function') {
-                          onRowCancelClick(row);
-                        }
-                      }}
-                    >
-                      <div
-                        className="ued-table-actions-extendBtn"
-                        onClick={(e) => {
-                          e.stopPropagation();
-                        }}
-                      >
-                        <CloseOutlined rev="" className="actIcon-left" />
-                        {getLocale('cancel')}
-                      </div>
-                    </Popconfirm>
-                  </>
-                ) : (
-                  <>
-                    {showBuiltInBtns.map((c: any, idx: number) => {
-                      return renderBuiltInSingleBtn(
-                        c,
-                        row,
-                        getRealIndexById(row[currentRowKey]),
-                        idx,
-                        showBuiltInBtns,
-                        false,
-                        showExtendBtns,
-                        moreBuiltInBtns,
-                        moreExtendBtns,
-                      );
-                    })}
-                    {renderExtendMoreBtns(
-                      showBuiltInBtns,
-                      showExtendBtns,
-                      moreBuiltInBtns,
-                      moreExtendBtns,
-                      row,
-                      getRealIndexById(row[currentRowKey]),
-                    )}
-                  </>
-                )
-              }
-            </div>
+            <OperationCell
+              row={row}
+              currentRowKey={currentRowKey}
+              isNowEditRow={isNowEditRow}
+              extendNum={extendNum}
+              engineApis={engineApis}
+              getRealIndexById={getRealIndexById}
+              getRealRowActions={getRealRowActions}
+              getRealExtendRowActions={getRealExtendRowActions}
+              onRowDeleteClick={onRowDeleteClick}
+              onRowSaveClick={onRowSaveClick}
+              onRowDetailClick={onRowDetailClick}
+              onRowEditClick={onRowEditClick}
+              onRowCancelClick={onRowCancelClick}
+              getLocale={getLocale}
+              actionsMap={actionsMap}
+              isSmallPopover={isSmallPopover}
+              fixedAction={fixedAction}
+              tableRef={tableRef}
+              $$componentItem={props.$$componentItem}
+            />
           );
         },
       };
@@ -1795,7 +1429,6 @@ const useColumns = (props: any) => {
     nowEditingData,
     nowInlineEditKey,
     pageData,
-    renderExtendMoreBtns,
     rowActions,
     onRowDetailClick,
     onRowDeleteClick,
@@ -1820,21 +1453,28 @@ const useColumns = (props: any) => {
 
   useEffect(() => {
     if (tableRef.current && isFlexColumn) {
-      // 当前执行时，antd表格列虽展示，但列宽按指定宽度渲染，需等下一次render，目前解决办法先延迟执行
-      setTimeout(() => {
-        const thList =
-          tableRef?.current?.querySelectorAll('colgroup')?.[1]?.children || [];
-        for (let i = 0; i < thList.length; i += 1) {
-          const rowWidth = thList[i].offsetWidth;
-          columnWidth[i] = rowWidth;
-        }
-        // TODO: 这里是啥意思？？
-        if (rowSelection) {
-          columnWidth.shift();
-        }
-        setColumnWidth([...columnWidth]);
+      // 如果开启了内容滚动， 但是没有配置内容宽度，则取表格项配置里的宽度，否则通过计算表格最终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]);
+          setInitLoadColWidth(true);
+        });
+      }
     }
   }, [tableRef.current, isFlexColumn]);
 
@@ -1846,23 +1486,6 @@ const useColumns = (props: any) => {
       (colCustomOrder?.length > 0 || customSelectedCols !== undefined) &&
       showCustom?.hasCustom
     ) {
-      // const tableStr: string = window.sessionStorage.getItem('TABLE_CUSTOM') || '{}';
-      // try {
-      //   const tableInfo = JSON.parse(tableStr);
-      //   if (!tableInfo[compId]) {
-      //     tableInfo[compId] = {};
-      //   }
-      //   const target = tableInfo[compId];
-      //   target.ORDER = colCustomOrder;
-      //   target.SELECTED = customSelectedCols;
-      //   const newRes = JSON.stringify(tableInfo);
-      //   if (tableStr !== newRes) {
-      //     window.sessionStorage.setItem('TABLE_CUSTOM', newRes);
-      //   }
-      // } catch (e) {
-      //   //
-      // }
-
       // 修改数据的存储方法
       getOrSaveData({
         appId: props?.appId || props?.$$componentItem?.appId || '',
@@ -1877,13 +1500,9 @@ const useColumns = (props: any) => {
     }
   }, [colCustomOrder, customSelectedCols, compId, showCustom]);
 
+  // 从缓存中取自定义列
   useEffect(() => {
     if (compId && showCustom?.hasCustom) {
-      // const tableStr: string = window.sessionStorage.getItem('TABLE_CUSTOM') || '{}';
-      // const tableInfo = JSON.parse(tableStr);
-      // const { ORDER = [], SELECTED } = tableInfo[compId] || {};
-      // setColCustomOrder(ORDER);
-      // setCustomSelectedCols(SELECTED);
       getOrSaveData({
         appId: props?.appId || props?.$$componentItem?.appId || '',
         userId,