@lingxiteam/ebe-utils 0.2.4 → 0.2.6

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

@@ -3,27 +3,14 @@ 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 } from 'lodash';
-import React, {
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from 'react';
+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 { compareFn, handleExpandColumn, handleMergeHeader, handleMultiLevelHeader, handleRecursiveParseColumns, treeRootName } from '../utils';
 import { getOrSaveData } from '../utils/indexedDBHelper';
 
 const ACTION_COL_KEY = '_actions';
@@ -75,6 +62,8 @@ const useColumns = (props: any) => {
     onRowSaveClick,
     onRowCancelClick,
     onRowAttrValsChange,
+    onValueChange, // 值变化事件
+    onValueBlur, // 失去焦点事件
     sandBoxSafeRun,
     funcExpExecute,
     engineApis,
@@ -102,7 +91,6 @@ const useColumns = (props: any) => {
   // const api = getApis();
 
   const tableRef = useRef<any>();
-  const [pageData, setPageData] = useState<any>({});
   const [colCustomOrder, setColCustomOrder] = useState<any>([]); // 自定义列顺序记录
   const [customSelectedCols, setCustomSelectedCols] = useState<any>(); // 自定义列显隐记录
   const [columnWidth, setColumnWidth] = useState<any[]>([]);
@@ -110,12 +98,7 @@ const useColumns = (props: any) => {
   const [initLoadColWidth, setInitLoadColWidth] = useState(false);
   const { hasCustom, defaultColumn } = showCustom || {};
 
-  const getInnerRowAction = (
-    rowAction: any,
-    row: any,
-    index: number | null,
-    rowId: any,
-  ) => {
+  const getInnerRowAction = (rowAction: any, row: any, index: number | null, rowId: any) => {
     let visible = false;
     let clickText = rowAction.value;
     rowAction.btnType = 'builtIn';
@@ -133,8 +116,7 @@ const useColumns = (props: any) => {
       }
 
       if (rowAction.type) {
-        visible =
-          typeof ruleFunc === 'function' ? !ruleFunc(row, index, rowId) : true;
+        visible = typeof ruleFunc === 'function' ? !ruleFunc(row, index, rowId) : true;
       }
     } catch (e) {
       console.log(e);
@@ -151,12 +133,7 @@ const useColumns = (props: any) => {
       detail: 'onRowDetailClick',
     };
     clickText = propsClickFn[rowAction.type] || clickText;
-    return [
-      typeof propsVisibleFn[rowAction.type] === 'function'
-        ? getEditVisible(row)
-        : visible,
-      clickText,
-    ];
+    return [typeof propsVisibleFn[rowAction.type] === 'function' ? getEditVisible(row) : visible, clickText];
   };
 
   const getRealRowActions = useCallback(
@@ -166,7 +143,7 @@ const useColumns = (props: any) => {
         let editVisible = false;
         let detailVisible = false;
         let deleteVisible = false;
-        rowActions.forEach((rowAction) => {
+        rowActions.forEach(rowAction => {
           const [visible] = getInnerRowAction(rowAction, row, index, rowId);
           switch (rowAction.type) {
             case 'edit': {
@@ -185,41 +162,24 @@ const useColumns = (props: any) => {
           }
         });
 
-        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'
-            ) {
+          .filter(btn => {
+            if (typeof btn === 'string' ? btn === 'delete' : btn.type === 'delete') {
               return deleteVisible && btn.checked;
             }
-            if (
-              typeof btn === 'string' ? btn === 'detail' : btn.type === 'detail'
-            ) {
+            if (typeof btn === 'string' ? btn === 'detail' : btn.type === 'detail') {
               return detailVisible && btn.checked;
             }
             return editVisible && btn.checked;
           })
-          .map((item) => {
+          .map(item => {
             if (item.disabled) {
-              const disabledFunc = (
-                row: any,
-                index: number | null,
-                rowId: string | number,
-              ) =>
+              const disabledFunc = (row: any, index: number | null, rowId: string | number) =>
                 sandBoxSafeRun(item.disabled, {
                   ...row,
                   row,
@@ -239,13 +199,7 @@ const useColumns = (props: any) => {
       }
       return [];
     },
-    [
-      rowActions,
-      sandBoxSafeRun,
-      getEditVisible,
-      getDetailVisible,
-      getDeleteVisible,
-    ],
+    [rowActions, sandBoxSafeRun, getEditVisible, getDetailVisible, getDeleteVisible]
   );
 
   const getRealExtendRowActions = useCallback(
@@ -288,20 +242,13 @@ const useColumns = (props: any) => {
                 });
             }
 
-            const ruleVis =
-              typeof extd.rule === 'function'
-                ? !extd.rule(row, index)
-                : !extd.rule;
+            const ruleVis = typeof extd.rule === 'function' ? !extd.rule(row, index) : !extd.rule;
 
             return btnVisible[i] === undefined ? ruleVis : btnVisible[i];
           })
-          .map((item) => {
+          .map(item => {
             if (item.disabled) {
-              const disabledFunc = (
-                row: any,
-                index: number | null,
-                rowId: string | number,
-              ) =>
+              const disabledFunc = (row: any, index: number | null, rowId: string | number) =>
                 sandBoxSafeRun(item.disabled, {
                   ...row,
                   row,
@@ -320,7 +267,7 @@ const useColumns = (props: any) => {
       }
       return [];
     },
-    [extend, sandBoxSafeRun],
+    [extend, sandBoxSafeRun]
   );
 
   const calcRowActionWidth = useCallback(
@@ -331,9 +278,7 @@ const useColumns = (props: any) => {
 
       if (actList?.length > extendNum) {
         // 只保留 extendNum 数量的按钮，其他在更多中
-        actList = actList.filter(
-          (_: any, index: number) => index + 2 <= extendNum,
-        );
+        actList = actList.filter((_: any, index: number) => index + 2 <= extendNum);
         actList = [...actList, { title: getLocale('more'), icon: true }];
       }
 
@@ -353,48 +298,34 @@ 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);
-    };
+      (_: React.SyntheticEvent<Element>, { size }: any) => {
+        const newColumns = [...columnWidth];
+        newColumns[index] = Number.isNaN(size.width) ? 200 : size.width;
+        setColumnWidth(newColumns);
+      };
 
   // 处理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}`;
-    const rowSpan =
-      __rowSpan && __rowSpan[dataIndex] === undefined
-        ? 1
-        : __rowSpan[dataIndex];
+    const rowSpan = __rowSpan && __rowSpan[dataIndex] === undefined ? 1 : __rowSpan[dataIndex];
     const rowClass = __rowClass && __rowClass[dataIndex];
 
     // 表格单元格内-行数控制控制
     let controllLineStyle = null;
-    const isLineNumSet =
-      col.lineNum && typeof col.lineNum === 'number' && col.lineNum > 0;
+    const isLineNumSet = col.lineNum && typeof col.lineNum === 'number' && col.lineNum > 0;
     if (isLineNumSet) {
       const lineHeight = size === 'small' ? 16 : 20;
       controllLineStyle = {
@@ -414,14 +345,11 @@ const useColumns = (props: any) => {
       editable:
         !!col.editoption &&
         currentRowKey &&
-        nowInlineEditKey &&
-        record[currentRowKey] === nowInlineEditKey,
+        // 整表或当前行编辑时
+        ((nowInlineEditKey && record[currentRowKey] === nowInlineEditKey) || editMode === 'multiple'),
       isExtend: col.isExtend,
       dataIndex: col.dataIndex,
-      colorFormatInfo: [
-        ...(colorFormatInfo || []),
-        ...(col.colorFormatInfo || []),
-      ],
+      colorFormatInfo: [...(colorFormatInfo || []), ...(col.colorFormatInfo || [])],
       width: col.width,
       isCustomRendering: !!col.customRendering,
       rowSpan,
@@ -451,16 +379,9 @@ const useColumns = (props: any) => {
     ) {
       if (col?.editContent?.title?.code && col?.editContent?.title?.jsx) {
         cellProps.title = undefined;
-      } else if (
-        col?.editContent?.title?.code &&
-        funcExpExecute &&
-        !col?.editContent?.title?.jsx
-      ) {
+      } else if (col?.editContent?.title?.code && funcExpExecute && !col?.editContent?.title?.jsx) {
         // 如果是这个函数表示默认名称（因为垃圾DSL中，如果是这个code表示提示标题）
-        if (
-          col.editContent.title.code ===
-          'function main(text, row, index) { return text;}'
-        ) {
+        if (col.editContent.title.code === 'function main(text, row, index) { return text;}') {
           cellProps.title = translateContent;
         } else {
           // 以下这个方法执行'function main(text, row, index) { return text;}'会报错, 先不兼容处理，先使用新版的jsx进行
@@ -483,7 +404,7 @@ const useColumns = (props: any) => {
         cellProps.title = col?.editContent?.title;
       }
       // 当editContent是false表示不提示，否则默认提示标题
-    } else if (col.editContent !== false) {
+    } else if (col.editContent !== false && !col?.editContent?.edittype) {
       // 默认进行标题的提示
       cellProps.title = translateContent;
     }
@@ -499,68 +420,6 @@ const useColumns = (props: any) => {
           return col;
         }
 
-        // 解析动态列配置，根据动态列数据源，得到真正的列配置数组数据
-        if (col.type === 'dynamicCol') {
-          if (col?.dataSource?.length) {
-            const dynamicColumns = col.dataSource.map(
-              (c: any, index: number) => {
-                const dataIndex = get(c, col.dataIndex);
-                const realCol = {
-                  ...col, // 动态列所有配置行为（排序、固定等）相同
-                  dataIndex,
-                  title: () => (
-                    <HeaderCellTitle
-                      size={size}
-                      column={{ ...col, title: c[col.title] }}
-                      mode="engine"
-                      funcExpExecute={funcExpExecute}
-                      engineApis={engineApis}
-                    />
-                  ),
-                  onHeaderCell: () => ({
-                    style: col?.style,
-                  }),
-                };
-                realCol.onCell = (record: any, rowIndex: number) => {
-                  // 动态列处理cell逻辑保持跟普通列一致
-                  const cellProps = createCellProps(record, realCol, rowIndex);
-                  return cellProps;
-                };
-                // 动态列重置render方法和排序等属性，取最新的dataIndex处理渲染逻辑，并保持其他功能跟普通列一致
-                generateTableCol(realCol);
-                // 是否开启筛选
-                if (realCol.filter) {
-                  realCol.filteredValue = filters[dataIndex];
-                  realCol.filterDropdown = (
-                    filtersParams: FilterDropdownProps,
-                  ) =>
-                    renderFilterDropDown(
-                      filtersParams,
-                      dataIndex,
-                      dynamicColumns,
-                    );
-                  realCol.filterDropdownVisible =
-                    !!filterDropdownOpen[dataIndex];
-                  realCol.onFilterDropdownVisibleChange = (open: boolean) => {
-                    onFilterDropdownVisibleChange(dataIndex, open);
-                  };
-                }
-
-                // 动态列标记一下，合计行需要根据key处理
-                realCol.dynamicOriginKey = realCol.key;
-                // key增强，拼接index，防止重复
-                realCol.key = `${realCol.key}_${index}`;
-                // 移除动态列标识字段，和动态列数据源字段
-                // delete realCol.type;
-                delete realCol.dataSource;
-                return realCol;
-              },
-            );
-            return dynamicColumns;
-          }
-          return [];
-        }
-
         if (col?.children?.length) {
           col.children = recursiveColumns(col?.children);
         }
@@ -576,6 +435,7 @@ const useColumns = (props: any) => {
             isFlexColumn,
             onResize: handleResize(index),
             style: record?.style,
+            columnIndex: record?.columnIndex,
           }),
         };
       })
@@ -598,23 +458,14 @@ const useColumns = (props: any) => {
         // 过滤掉隐藏的扩展按钮，得到真正的扩展按钮数据
         const actualExtendRowActions = getRealExtendRowActions(row, index);
 
-        const currRowActionWidth = calcRowActionWidth([
-          ...actualRowActions,
-          ...actualExtendRowActions,
-        ]);
+        const currRowActionWidth = calcRowActionWidth([...actualRowActions, ...actualExtendRowActions]);
         width = currRowActionWidth > width ? currRowActionWidth : width;
       });
 
       return width || undefined;
     }
     return actionWidth;
-  }, [
-    innerDataSource,
-    actionWidth,
-    getRealRowActions,
-    getRealExtendRowActions,
-    calcRowActionWidth,
-  ]);
+  }, [innerDataSource, actionWidth, getRealRowActions, getRealExtendRowActions, calcRowActionWidth]);
 
   /**
    * 符合非隐藏规则列
@@ -625,7 +476,7 @@ const useColumns = (props: any) => {
     const fixedLeft: any[] = [];
     const fixedRight: any[] = [];
     let newColumns = [...columns];
-    let hiddenCount = 0;
+    // let hiddenCount = 0;
     // 当前用户设置过的自定义列顺序
     const orderMap: any = {};
     // @ts-ignore
@@ -638,7 +489,9 @@ const useColumns = (props: any) => {
     const extendCols: any[] = [];
     // 记录每层分组的数量
     const group = new Map<number, number>();
-    columns.forEach((c: any, i: number) => {
+
+    // 解析column
+    const parseCol = (c: any) => {
       try {
         let isHidden;
         const colHiddenRule = c?.hiddenRule;
@@ -651,16 +504,13 @@ const useColumns = (props: any) => {
           originTitle: c.title,
         };
 
-        if (isHidden) {
-          newColumns.splice(i - hiddenCount, 1);
-          hiddenCount += 1;
-        } else if (c.fixed) {
+        if (!isHidden && c.fixed) {
           if (c.fixed === 'left') {
             fixedLeft.push(newCol);
           } else {
             fixedRight.push(newCol);
           }
-        } else {
+        } else if (!isHidden) {
           colMap[c.dataIndex] = newCol;
           if (orderMap[c.dataIndex] === undefined) {
             extendCols.push(newCol);
@@ -680,6 +530,33 @@ const useColumns = (props: any) => {
       } catch (e) {
         console.log(e);
       }
+    };
+    columns.forEach((col: any, i: number) => {
+      // 解析动态列
+      if (col.type === 'dynamicCol') {
+        if (col?.dataSource?.length) {
+          col.dataSource.forEach((c: any, index: number) => {
+            const dataIndex = get(c, col.dataIndex);
+            const realCol = {
+              ...col, // 动态列所有配置行为（排序、固定等）相同
+              dataIndex,
+              title: c[col.title],
+            };
+
+            // 动态列标记一下，合计行需要根据key处理
+            realCol.dynamicOriginKey = realCol.key;
+            // key增强，拼接index，防止重复
+            realCol.key = `${realCol.key}_${index}`;
+            // 移除动态列标识字段，和动态列数据源字段
+            // delete realCol.type;
+            delete realCol.dataSource;
+            parseCol(realCol);
+            return realCol;
+          });
+        }
+      } else {
+        parseCol(col);
+      }
     });
     newColumns = [];
     colCustomOrder.forEach((c: any) => {
@@ -695,7 +572,7 @@ const useColumns = (props: any) => {
       });
     }
     // 只展示选中列
-    let customCols = customizableCols.filter((c) => {
+    let customCols = customizableCols.filter(c => {
       if (hasCustom) {
         if (customSelectedCols === undefined) {
           if (defaultColumn) {
@@ -722,7 +599,7 @@ const useColumns = (props: any) => {
       text: any;
       row: any;
       index: number;
-    },
+    }
   ) => {
     const { text, row, index } = rowInfo;
     const { staticDataSource, staticService, editoption, dataIndex } = c;
@@ -746,9 +623,7 @@ const useColumns = (props: any) => {
         // eslint-disable-next-line eqeqeq
         editMode == 'multiple' && row[currentRowKey] === nowInlineEditKey
           ? nowEditingData
-          : innerDataSource.find(
-              (r: any) => r[currentRowKey] === row[currentRowKey],
-            );
+          : innerDataSource.find((r: any) => r[currentRowKey] === row[currentRowKey]);
       try {
         _valName = editoption.selectoption.renderValName(_row, index);
       } catch (e) {
@@ -759,25 +634,17 @@ const useColumns = (props: any) => {
         ...rowEditoption.selectoption,
         valName: Array.isArray(_valName) ? _valName : [],
       };
-    } else if (
-      rowEditoption?.selectoption?.staticService &&
-      colServiceDataForEdit
-    ) {
+    } else if (rowEditoption?.selectoption?.staticService && colServiceDataForEdit) {
       // 绑定了服务
       const { labelKey, valueKey } = rowEditoption.selectoption.staticService;
-      const optionskey = Object.keys(colServiceDataForEdit).find((k) => {
-        if (
-          `${k}` === `${c.dataIndex}` &&
-          Array.isArray(colServiceDataForEdit[k])
-        ) {
+      const optionskey = Object.keys(colServiceDataForEdit).find(k => {
+        if (`${k}` === `${c.dataIndex}` && Array.isArray(colServiceDataForEdit[k])) {
           return true;
         }
         return false;
       });
       if (optionskey) {
-        rowEditoption.selectoption.colServiceData = colServiceDataForEdit[
-          optionskey
-        ].map((o: any) => ({
+        rowEditoption.selectoption.colServiceData = colServiceDataForEdit[optionskey].map((o: any) => ({
           value: o[valueKey],
           label: o[labelKey],
           key: o[valueKey],
@@ -792,49 +659,31 @@ const useColumns = (props: any) => {
       // 静态数据翻译
       if (Array.isArray(staticDataSource)) {
         // 支持数组或逗号分支字符翻译
-        translateContent = (
-          Array.isArray(text) ? text : String(text).split(',')
-        )
-          .map((n) => {
+        translateContent = (Array.isArray(text) ? text : String(text).split(','))
+          .map(n => {
             // 弱等保证 Number 与 String 可比较
-            const obj = staticDataSource.find((o) => o.value == n); // eslint-disable-line
+            const obj = staticDataSource.find(o => o.value == n); // eslint-disable-line
             return obj ? obj.label : n;
           })
           .join(',');
-      } else if (
-        editoption &&
-        editoption?.__staticService__ &&
-        editoption.edittype === 'SuperSelect'
-      ) {
+      } 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.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;
+        translateContent = _introduce ? (Array.isArray(_introduce) ? _introduce : [_introduce]).join(',') : text;
       }
       // 服务数据翻译
       if (staticService && colServiceData) {
         const { labelKey, valueKey } = staticService;
-        const needtranskey = Object.keys(colServiceData).find(
-          (k) =>
-            `${k}` === `${c.dataIndex}` && Array.isArray(colServiceData[k]),
-        );
+        const needtranskey = Object.keys(colServiceData).find(k => `${k}` === `${c.dataIndex}` && Array.isArray(colServiceData[k]));
         if (needtranskey) {
           // 支持数组或逗号分支字符翻译
-          translateContent = (
-            Array.isArray(text) ? text : String(text).split(',')
-          )
-            .map((n) => {
+          translateContent = (Array.isArray(text) ? text : String(text).split(','))
+            .map(n => {
               // 弱等保证 Number 与 String 可比较
-              const obj = colServiceData[needtranskey].find(
-                (o: any) => o[valueKey] == n,
-              ); // eslint-disable-line
+              const obj = colServiceData[needtranskey].find((o: any) => o[valueKey] == n); // eslint-disable-line
               return obj ? obj[labelKey] : n;
             })
             .join(',');
@@ -842,23 +691,16 @@ 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.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;
+        translateContent = _introduce ? (Array.isArray(_introduce) ? _introduce : [_introduce]).join(',') : text;
       }
     }
 
     // 内置序号列，数据内容自增规则为 1 2 3 4
     if (isOrderCol) {
-      const beforeNums = page
-        ? (pagination.current - 1) * pagination.pageSize
-        : 0;
+      const beforeNums = page ? (pagination.current - 1) * pagination.pageSize : 0;
       translateContent = beforeNums + index + 1; // 暂不支持翻译（咨询欢姐），所以放在翻译后面，进行覆盖
     }
 
@@ -884,18 +726,13 @@ const useColumns = (props: any) => {
       // 编辑内容
       if (editoption && editoption.edittype) {
         // 行编辑规则
-        const isRowEditableCanUse =
-          !!handleIsRowEditableCanUse && handleIsRowEditableCanUse(row, index);
+        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,
-          ) =>
+          editoption.editable = (row: any, rowId: string | number, index: number) =>
             sandBoxSafeRun(editoptionEditableRule, {
               row,
               rowId,
@@ -909,17 +746,9 @@ 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') {
@@ -940,19 +769,12 @@ const useColumns = (props: any) => {
 
         let modalSelectParams = [];
         if (typeof editoption?.modalInfo?.responseObjRun === 'function') {
-          modalSelectParams = editoption?.modalInfo?.responseObjRun(
-            row,
-            rowId,
-            index,
-          );
+          modalSelectParams = editoption?.modalInfo?.responseObjRun(row, rowId, index);
         }
 
         const editDisabled = !isColEditable || !isRowEditableCanUse;
         const isWholeTableEdit = editMode === 'multiple'; // 整表：多行编辑模式
-        const isSingleRowEdit =
-          currentRowKey &&
-          nowInlineEditKey &&
-          row[currentRowKey] === nowInlineEditKey; // 单行编辑模式
+        const isSingleRowEdit = currentRowKey && nowInlineEditKey && row[currentRowKey] === nowInlineEditKey; // 单行编辑模式
 
         if (isWholeTableEdit || isSingleRowEdit) {
           const inlineVChange = (value: any, otherProps = {}) => {
@@ -961,6 +783,19 @@ const useColumns = (props: any) => {
             }
           };
 
+          const onChange = (value: any) => {
+            if (typeof onValueChange === 'function') {
+              set(row, dataIndex, value);
+              onValueChange(row, value, rowId, dataIndex, index);
+            }
+          };
+
+          const onBlur = (value: any) => {
+            if (typeof onValueBlur === 'function') {
+              onValueBlur(row, value, rowId, dataIndex, index);
+            }
+          };
+
           return (
             <EditComponent
               c={c}
@@ -976,6 +811,8 @@ const useColumns = (props: any) => {
               modalSelectParams={modalSelectParams}
               sandBoxSafeRun={sandBoxSafeRun}
               engineApis={engineApis}
+              onChange={onChange}
+              onBlur={onBlur}
             />
           );
         }
@@ -985,8 +822,7 @@ const useColumns = (props: any) => {
 
       // 表格单元格内-行数控制控制
       let controllLineStyle = {};
-      const isLineNumSet =
-        c.lineNum && typeof c.lineNum === 'number' && c.lineNum > 0;
+      const isLineNumSet = c.lineNum && typeof c.lineNum === 'number' && c.lineNum > 0;
       if (isLineNumSet) {
         // const lineHeight = size === 'small' ? 16 : 20;
         controllLineStyle = {
@@ -1089,10 +925,6 @@ const useColumns = (props: any) => {
         const { page, options } = editContent.selectoption;
         // 页面
         if (page && page.pageId && engineApis?.renderPopover) {
-          if (!Object.keys(pageData).length || !pageData[page.pageId]) {
-            return content;
-          }
-
           try {
             const pageRule = page.rule;
             if (pageRule) {
@@ -1105,10 +937,7 @@ const useColumns = (props: any) => {
                   });
               }
 
-              if (
-                typeof page?.rule === 'function' &&
-                page.rule(row, rowId, index)
-              ) {
+              if (typeof page?.rule === 'function' && page.rule(row, rowId, index)) {
                 return content;
               }
             }
@@ -1161,12 +990,7 @@ const useColumns = (props: any) => {
           });
         } else if (options.content) {
           // 自定义
-          const {
-            maxWidth,
-            content: popContent,
-            rule: popRule,
-            ...resOptions
-          } = options;
+          const { maxWidth, content: popContent, rule: popRule, ...resOptions } = options;
 
           // 隐藏规则
           try {
@@ -1180,10 +1004,7 @@ const useColumns = (props: any) => {
                   });
               }
 
-              if (
-                typeof options?.rule === 'function' &&
-                options.rule(row, rowId, index)
-              ) {
+              if (typeof options?.rule === 'function' && options.rule(row, rowId, index)) {
                 return content;
               }
             }
@@ -1211,11 +1032,7 @@ const useColumns = (props: any) => {
           } catch (e) {
             console.error(e);
           }
-          if (
-            newPopContent === undefined &&
-            typeof popContent === 'string' &&
-            !isDynamicProperty(popContent)
-          ) {
+          if (newPopContent === undefined && typeof popContent === 'string' && !isDynamicProperty(popContent)) {
             // 当表达式返回空，且不被$$包裹时，内容当成普通文本处理
             newPopContent = popContent;
           }
@@ -1245,10 +1062,7 @@ const useColumns = (props: any) => {
         c.sorter = true;
       } else {
         c.sorter = (a: any, b: any) => {
-          return compareFn(
-            get(a, c.dataIndex || c.key),
-            get(b, c.dataIndex || c.key),
-          );
+          return compareFn(get(a, c.dataIndex || c.key), get(b, c.dataIndex || c.key));
         };
       }
     }
@@ -1266,37 +1080,26 @@ const useColumns = (props: any) => {
     newColumns.forEach((c, i) => {
       const { dataIndex } = c;
 
+      newColumns[i].columnIndex = i;
+
       // 按照条件，初始化生成实际的列定义
       generateTableCol(c);
 
       // 是否开启筛选
       if (c.filter) {
         newColumns[i].filteredValue = filters[dataIndex];
-        newColumns[i].filterDropdown = (filtersParams: FilterDropdownProps) =>
-          renderFilterDropDown(filtersParams, dataIndex, newColumns);
+        newColumns[i].filterDropdown = (filtersParams: FilterDropdownProps) => renderFilterDropDown(filtersParams, dataIndex, newColumns);
         newColumns[i].filterDropdownVisible = !!filterDropdownOpen[dataIndex];
-        newColumns[i].onFilterDropdownVisibleChange = (open: boolean) =>
-          onFilterDropdownVisibleChange(dataIndex, open);
+        newColumns[i].onFilterDropdownVisibleChange = (open: boolean) => onFilterDropdownVisibleChange(dataIndex, open);
       }
 
-      // 处理表头标题（动态列单独处理）
-      if (c.type !== 'dynamicCol') {
-        newColumns[i].title = () => (
-          <HeaderCellTitle
-            size={size}
-            column={{ ...c, title: c.originTitle }}
-            mode="engine"
-            funcExpExecute={funcExpExecute}
-            engineApis={engineApis}
-          />
-        );
-      }
+      newColumns[i].title = () => (
+        <HeaderCellTitle size={size} column={{ ...c, title: c.originTitle }} mode="engine" funcExpExecute={funcExpExecute} engineApis={engineApis} />
+      );
 
       if (c?.group) {
         // 过滤掉整层为空的分组
-        c.group = c.group.filter(
-          (_: string, gi: number) => groupMark.get(gi) !== 0,
-        );
+        c.group = c.group.filter((_: string, gi: number) => groupMark.get(gi) !== 0);
       }
 
       // 处理分组逻辑
@@ -1310,12 +1113,10 @@ const useColumns = (props: any) => {
       finalCols.push(...newColumns);
     }
 
+    // 处理表头分组合并
     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 = {
@@ -1327,10 +1128,7 @@ const useColumns = (props: any) => {
         isExtend: true,
         id: ACTION_COL_KEY,
         render: (text: any, row: any, index: number | null) => {
-          const isNowEditRow =
-            currentRowKey &&
-            nowInlineEditKey &&
-            row[currentRowKey] === nowInlineEditKey;
+          const isNowEditRow = currentRowKey && nowInlineEditKey && row[currentRowKey] === nowInlineEditKey;
 
           return (
             <OperationCell
@@ -1375,11 +1173,7 @@ const useColumns = (props: any) => {
     // 处理表头背景色
     if (tableGroupColorInfo) {
       const { colIdMap }: any =
-        tableGroupColorInfo?.colorType === 'single'
-          ? {}
-          : handleRecursiveParseColumns(
-              tableGroupColorInfo?.customColorColumns,
-            );
+        tableGroupColorInfo?.colorType === 'single' ? {} : handleRecursiveParseColumns(tableGroupColorInfo?.customColorColumns);
       handleRecursiveParseColumns(finalCols, 1, {
         colorType: tableGroupColorInfo?.colorType,
         customColorSetting: colIdMap,
@@ -1428,7 +1222,6 @@ const useColumns = (props: any) => {
     hiddenAction,
     nowEditingData,
     nowInlineEditKey,
-    pageData,
     rowActions,
     onRowDetailClick,
     onRowDeleteClick,
@@ -1455,14 +1248,12 @@ const useColumns = (props: any) => {
     if (tableRef.current && isFlexColumn) {
       // 如果开启了内容滚动， 但是没有配置内容宽度，则取表格项配置里的宽度，否则通过计算表格最终th渲染的宽度
       if (scroll && !scroll.x) {
-        setColumnWidth(finalcolumns.map((item) => item.width || 100));
+        setColumnWidth(finalcolumns.map(item => item.width || 100));
         setInitLoadColWidth(true);
       } else {
         // 当前执行时，antd表格列虽展示，但列宽按指定宽度渲染，需等下一次render，目前解决办法先延迟执行
         setTimeout(() => {
-          const thList =
-            tableRef?.current?.querySelectorAll('.pcfactory-table-thead th') ||
-            [];
+          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;
@@ -1481,18 +1272,12 @@ const useColumns = (props: any) => {
   // 将自定义列地相关操作记录到sessionStorage中，刷新时保留
   useEffect(() => {
     // 需要开启自定义列才进行存储
-    if (
-      compId &&
-      (colCustomOrder?.length > 0 || customSelectedCols !== undefined) &&
-      showCustom?.hasCustom
-    ) {
+    if (compId && (colCustomOrder?.length > 0 || customSelectedCols !== undefined) && showCustom?.hasCustom) {
       // 修改数据的存储方法
       getOrSaveData({
         appId: props?.appId || props?.$$componentItem?.appId || '',
         userId,
-        compId: fatherBOFramerId
-          ? `${fatherBOFramerId}-${props.$$componentItem?.uid}`
-          : props.$$componentItem?.uid,
+        compId: fatherBOFramerId ? `${fatherBOFramerId}-${props.$$componentItem?.uid}` : props.$$componentItem?.uid,
         save: true,
         order: colCustomOrder,
         selected: customSelectedCols,
@@ -1506,9 +1291,7 @@ const useColumns = (props: any) => {
       getOrSaveData({
         appId: props?.appId || props?.$$componentItem?.appId || '',
         userId,
-        compId: fatherBOFramerId
-          ? `${fatherBOFramerId}-${props.$$componentItem?.uid}`
-          : props.$$componentItem?.uid,
+        compId: fatherBOFramerId ? `${fatherBOFramerId}-${props.$$componentItem?.uid}` : props.$$componentItem?.uid,
         save: false,
       }).then((result: any) => {
         const { ORDER = [], SELECTED } = result || {};
@@ -1518,28 +1301,6 @@ const useColumns = (props: any) => {
     }
   }, [compId, showCustom]);
 
-  useEffect(() => {
-    const newColumns = [...columns];
-    // const pages = {};
-    const popoverPageIds: any[] = [];
-    newColumns.forEach((c, i) => {
-      const { editContent } = c;
-      if (editContent) {
-        if (editContent.edittype === 'Popover' && editContent?.selectoption) {
-          const { page } = editContent.selectoption;
-          if (page?.pageId && !popoverPageIds.includes(page.pageId)) {
-            popoverPageIds.push(page.pageId);
-          }
-        }
-      }
-    });
-
-    popoverPageIds.forEach(async (c) => {
-      const res = await engineApis?.service?.getPageVersionById({ pageId: c });
-      setPageData((pre: any) => ({ ...pre, [c]: res }));
-    });
-  }, [columns.length]);
-
   return {
     tableRef,
     finalcolumns,