@lingxiteam/ebe-utils 0.0.27 → 0.0.29

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

@@ -547,6 +547,19 @@ const useColumns = (props: any) => {
                 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"
@@ -699,6 +712,113 @@ const useColumns = (props: any) => {
     return isPopover ? <div>{btn}</div> : btn;
   };
 
+  // 处理cell props
+  const createCellProps = (record: any, col: any, rowIndex: number) => {
+    const __rowSpan = rowSpanMap?.get(record) || {};
+    const __rowClass = rowClassMap?.get(record) || {};
+    const rowSpan =
+      __rowSpan && __rowSpan[col.dataIndex] === undefined
+        ? 1
+        : __rowSpan[col.dataIndex];
+    const rowClass = __rowClass && __rowClass[col.dataIndex];
+
+    // 表格单元格内-行数控制控制
+    let controllLineStyle = null;
+    const isLineNumSet =
+      col.lineNum && typeof col.lineNum === 'number' && col.lineNum > 0;
+    if (isLineNumSet) {
+      const lineHeight = size === 'small' ? 16 : 20;
+      controllLineStyle = {
+        lineHeight: `${lineHeight}px`,
+        maxHeight: `${lineHeight * col.lineNum}px`,
+        WebkitLineClamp: col.lineNum,
+      };
+    }
+    const cellProps: any = {
+      engineApis,
+      funcExpExecute,
+      appId,
+      pageId,
+      row: record,
+      rowId: record[currentRowKey],
+      rowIndex,
+      editable:
+        !!col.editoption &&
+        currentRowKey &&
+        nowInlineEditKey &&
+        record[currentRowKey] === nowInlineEditKey,
+      isExtend: col.isExtend,
+      dataIndex: col.dataIndex,
+      colorFormatInfo: [
+        ...(colorFormatInfo || []),
+        ...(col.colorFormatInfo || []),
+      ],
+      isCustomRendering: !!col.customRendering,
+      rowSpan,
+      className: rowClass,
+      onTableCellClick,
+      controllLineStyle,
+    };
+
+    if (col.filter) {
+      // 开启过滤时，在td元素上记录对应的字段编码
+      cellProps['td-dataIndex'] = col.dataIndex;
+    }
+
+    const { translateContent } = parseTranslateContent(col, {
+      text: record[col.dataIndex],
+      row: record,
+      index: rowIndex,
+    });
+
+    // 单元格提示 -> 默认提示
+    if (
+      col?.editContent?.edittype === 'title' &&
+      col?.editContent?.title &&
+      col.key !== ACTION_COL_KEY // 操作列不需要默认提示
+    ) {
+      if (col?.editContent?.title?.code && col?.editContent?.title?.jsx) {
+        cellProps.title = undefined;
+      } 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;}'
+        ) {
+          cellProps.title = translateContent;
+        } else {
+          // 以下这个方法执行'function main(text, row, index) { return text;}'会报错, 先不兼容处理，先使用新版的jsx进行
+          cellProps.title = funcExpExecute(col.editContent.title.code, [
+            {
+              key: 'rowId',
+              value: translateContent,
+            },
+            {
+              key: 'row',
+              value: record,
+            },
+            {
+              key: 'index',
+              value: rowIndex,
+            },
+          ]);
+        }
+      } else {
+        cellProps.title = col?.editContent?.title;
+      }
+      // 当editContent是false表示不提示，否则默认提示标题
+    } else if (col.editContent !== false) {
+      // 默认进行标题的提示
+      cellProps.title = translateContent;
+    }
+
+    return cellProps;
+  };
+
   // 递归解析列信息
   const recursiveColumns = (columns: any) => {
     const resolveColumns = columns
@@ -710,53 +830,61 @@ const useColumns = (props: any) => {
         // 解析动态列配置，根据动态列数据源，得到真正的列配置数组数据
         if (col.type === 'dynamicCol') {
           if (col?.dataSource?.length) {
-            return col.dataSource.map((c: any, index: number) => {
-              const dataIndex = 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,
-                }),
-              };
-              // 是否开启筛选
-              if (realCol.filter) {
-                realCol.onCell = (_: any, rowIndex: number) => ({
-                  'td-dataIndex': dataIndex,
-                  rowIndex,
-                });
-
-                realCol.filteredValue = filters[dataIndex];
-                realCol.filterDropdown = (filtersParams: FilterDropdownProps) =>
-                  renderFilterDropDown(
-                    filtersParams,
-                    dataIndex,
-                    resolveColumns,
-                  );
-                realCol.filterDropdownVisible = !!filterDropdownOpen[dataIndex];
-                realCol.onFilterDropdownVisibleChange = (open: boolean) => {
-                  onFilterDropdownVisibleChange(dataIndex, open);
+            const dynamicColumns = col.dataSource.map(
+              (c: any, index: number) => {
+                const dataIndex = 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;
-            });
+                // 动态列标记一下，合计行需要根据key处理
+                realCol.dynamicOriginKey = realCol.key;
+                // key增强，拼接index，防止重复
+                realCol.key = `${realCol.key}_${index}`;
+                // 移除动态列标识字段，和动态列数据源字段
+                // delete realCol.type;
+                delete realCol.dataSource;
+                return realCol;
+              },
+            );
+            return dynamicColumns;
           }
           return [];
         }
@@ -768,98 +896,7 @@ const useColumns = (props: any) => {
         return {
           ...col,
           onCell: (record: any, rowIndex: number) => {
-            const __rowSpan = rowSpanMap?.get(record) || {};
-            const __rowClass = rowClassMap?.get(record) || {};
-            const rowSpan =
-              __rowSpan && __rowSpan[col.dataIndex] === undefined
-                ? 1
-                : __rowSpan[col.dataIndex];
-            const rowClass = __rowClass && __rowClass[col.dataIndex];
-
-            const cellProps: any = {
-              engineApis,
-              funcExpExecute,
-              appId,
-              pageId,
-              row: record,
-              rowId: record[currentRowKey],
-              rowIndex,
-              editable:
-                !!col.editoption &&
-                currentRowKey &&
-                nowInlineEditKey &&
-                record[currentRowKey] === nowInlineEditKey,
-              isExtend: col.isExtend,
-              dataIndex: col.dataIndex,
-              colorFormatInfo: [
-                ...(colorFormatInfo || []),
-                ...(col.colorFormatInfo || []),
-              ],
-              isCustomRendering: !!col.customRendering,
-              rowSpan,
-              className: rowClass,
-              onTableCellClick,
-            };
-
-            if (col.filter) {
-              // 开启过滤时，在td元素上记录对应的字段编码
-              cellProps['td-dataIndex'] = col.dataIndex;
-            }
-
-            const { translateContent } = parseTranslateContent(col, {
-              text: record[col.dataIndex],
-              row: record,
-              index,
-            });
-
-            // 单元格提示 -> 默认提示
-            if (
-              col?.editContent?.edittype === 'title' &&
-              col?.editContent?.title &&
-              col.key !== ACTION_COL_KEY // 操作列不需要默认提示
-            ) {
-              if (
-                col?.editContent?.title?.code &&
-                col?.editContent?.title?.jsx
-              ) {
-                cellProps.title = undefined;
-              } 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;}'
-                ) {
-                  cellProps.title = translateContent;
-                } else {
-                  // 以下这个方法执行'function main(text, row, index) { return text;}'会报错, 先不兼容处理，先使用新版的jsx进行
-                  cellProps.title = funcExpExecute(col.editContent.title.code, [
-                    {
-                      key: 'rowId',
-                      value: translateContent,
-                    },
-                    {
-                      key: 'row',
-                      value: record,
-                    },
-                    {
-                      key: 'index',
-                      value: rowIndex,
-                    },
-                  ]);
-                }
-              } else {
-                cellProps.title = col?.editContent?.title;
-              }
-              // 当editContent是false表示不提示，否则默认提示标题
-            } else if (col.editContent !== false) {
-              // 默认进行标题的提示
-              cellProps.title = translateContent;
-            }
-
+            const cellProps = createCellProps(record, col, rowIndex);
             return cellProps;
           },
           onHeaderCell: (record: any) => ({
@@ -1008,7 +1045,6 @@ const useColumns = (props: any) => {
     const rowEditoption = JSON.parse(JSON.stringify(editoption || '{}'));
     // 此时为下拉框绑定表达式场景，需要通过沙箱编译
     const baseValName = rowEditoption?.selectoption?.valName;
-    const childKeys = rowEditoption?.selectoption?.attr?.childKeys; // 绑定静态数据时，可能选择了某几个项
 
     if (typeof baseValName === 'string') {
       editoption.selectoption.renderValName = (row: any, index: number) =>
@@ -1036,12 +1072,6 @@ const useColumns = (props: any) => {
         ...rowEditoption.selectoption,
         valName: Array.isArray(_valName) ? _valName : [],
       };
-    } else if (Array.isArray(childKeys) && childKeys.length) {
-      // 如果选项设置中设置了静态编码，并且指勾选了其中几项属性，则需要过滤
-      rowEditoption.selectoption.options =
-        rowEditoption.selectoption.options.filter((d: any) =>
-          childKeys.includes(d.value),
-        );
     } else if (
       rowEditoption?.selectoption?.staticService &&
       colServiceDataForEdit
@@ -1135,389 +1165,390 @@ const useColumns = (props: any) => {
     };
   };
 
-  const finalcolumns: any[] = useMemo(() => {
-    const newColumns = [...customCols];
-    let finalCols: ColumnProps<any>[] = [];
+  // 处理普通列和动态列属性、渲染逻辑
+  const generateTableCol = (colInfo: any) => {
+    const c = colInfo;
+    const { editoption, dataIndex, editContent } = c;
 
-    // 用于表格头分组的数据结构：左树根节点，为第0层
-    const leftTree: any = {
-      title: treeRootName,
-    };
-
-    newColumns.forEach((c, i) => {
-      const { editoption, dataIndex, editContent } = c;
-
-      // 按照条件，初始化生成实际的列定义
-      newColumns[i].render = (text: any, row: any, index: any) => {
-        const rowId = row[currentRowKey];
-        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, {
-                row,
-                rowId,
-                index,
-              });
-          }
-
-          if (typeof editoption.editable === 'function') {
-            isColEditable = editoption.editable(row, rowId, index);
-          }
-
-          // 弹窗选择控件，组件状态入参处理
-          const responseObj = editoption?.modalInfo?.responseObj;
-          if (
-            Array.isArray(responseObj) &&
-            editoption?.edittype === 'ModalSelect' &&
-            responseObj?.length
-          ) {
-            editoption.modalInfo.responseObj = (
-              row: any,
-              rowId: string | number,
-              index: number,
-            ) =>
-              responseObj?.map((d: any) => {
-                if (typeof d?.value === 'string') {
-                  const rule = d.value;
-                  d.value = sandBoxSafeRun(rule, {
-                    row,
-                    rowId,
-                    index,
-                  });
-                }
-                return d;
-              });
-          }
+    c.render = (text: any, row: any, index: any) => {
+      const rowId = row[currentRowKey];
+      const { translateContent, rowEditoption } = parseTranslateContent(c, {
+        text,
+        row,
+        index,
+      });
 
-          let modalSelectParams = [];
-          if (typeof editoption?.modalInfo?.responseObj === 'function') {
-            modalSelectParams = editoption?.modalInfo?.responseObj(
+      // 编辑内容
+      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, {
               row,
               rowId,
               index,
-            );
-          }
+            });
+        }
 
-          const editDisabled = !isColEditable || !isRowEditableCanUse;
-          const isWholeTableEdit = editMode === 'multiple'; // 整表：多行编辑模式
-          const isSingleRowEdit =
-            currentRowKey &&
-            nowInlineEditKey &&
-            row[currentRowKey] === nowInlineEditKey; // 单行编辑模式
+        if (typeof editoption.editable === 'function') {
+          isColEditable = editoption.editable(row, rowId, index);
+        }
 
-          if (isWholeTableEdit || isSingleRowEdit) {
-            const inlineVChange = (value: any, otherProps = {}) => {
-              if (typeof onRowAttrValsChange === 'function') {
-                onRowAttrValsChange(row, dataIndex, value, otherProps);
+        // 弹窗选择控件，组件状态入参处理
+        const responseObj = editoption?.modalInfo?.responseObj;
+        if (
+          Array.isArray(responseObj) &&
+          editoption?.edittype === 'ModalSelect' &&
+          responseObj?.length
+        ) {
+          editoption.modalInfo.responseObj = (
+            row: any,
+            rowId: string | number,
+            index: number,
+          ) =>
+            responseObj?.map((d: any) => {
+              if (typeof d?.value === 'string') {
+                const rule = d.value;
+                d.value = sandBoxSafeRun(rule, {
+                  row,
+                  rowId,
+                  index,
+                });
+                // 如果为空说明sandBoxSafeRun 执行异常应该直接给rule,不然直接输入字符串不行
+                if (d.value === undefined && rule) {
+                  d.value = rule;
+                }
               }
-            };
-
-            return (
-              <EditComponent
-                c={c}
-                disabled={editDisabled}
-                editoption={rowEditoption}
-                form={form}
-                appId={appId}
-                compId={compId}
-                currentRowKey={currentRowKey}
-                rowId={rowId}
-                rowData={isWholeTableEdit ? row : nowEditingData}
-                inlineVChange={inlineVChange}
-                modalSelectParams={modalSelectParams}
-                sandBoxSafeRun={sandBoxSafeRun}
-                engineApis={engineApis}
-              />
-            );
-          }
+              return d;
+            });
         }
 
-        let content = translateContent;
-
-        // 表格单元格内-行数控制控制
-        let controllLineStyle = {};
-        const isLineNumSet =
-          c.lineNum && typeof c.lineNum === 'number' && c.lineNum > 0;
-        if (isLineNumSet) {
-          // const lineHeight = size === 'small' ? 16 : 20;
-          controllLineStyle = {
-            // lineHeight: `${lineHeight}px`,
-            // maxHeight: `${lineHeight * c.lineNum}px`,
-            WebkitLineClamp: c.lineNum,
-          };
+        let modalSelectParams = [];
+        if (typeof editoption?.modalInfo?.responseObj === 'function') {
+          modalSelectParams = editoption?.modalInfo?.responseObj(
+            row,
+            rowId,
+            index,
+          );
         }
 
-        let shouldRenderEdittypeTitle = false;
+        const editDisabled = !isColEditable || !isRowEditableCanUse;
+        const isWholeTableEdit = editMode === 'multiple'; // 整表：多行编辑模式
+        const isSingleRowEdit =
+          currentRowKey &&
+          nowInlineEditKey &&
+          row[currentRowKey] === nowInlineEditKey; // 单行编辑模式
+
+        if (isWholeTableEdit || isSingleRowEdit) {
+          const inlineVChange = (value: any, otherProps = {}) => {
+            if (typeof onRowAttrValsChange === 'function') {
+              onRowAttrValsChange(row, dataIndex, value, otherProps);
+            }
+          };
 
-        if (
-          c?.editContent?.edittype === 'title' &&
-          c?.editContent?.title &&
-          c.key !== ACTION_COL_KEY // 操作列不需要默认提示
-        ) {
-          if (c?.editContent?.title?.code && c?.editContent?.title?.jsx) {
-            shouldRenderEdittypeTitle = true;
-          }
-        }
-        if (isLineNumSet && !c.customRendering) {
-          if (shouldRenderEdittypeTitle) {
-            content = (
-              <span
-                className="ued-control-line-number"
-                style={controllLineStyle}
-              >
-                <Tooltip
-                  title={
-                    <CustomModule
-                      code={c?.editContent?.title?.code}
-                      sandBoxLoadModule={engineApis.sandBoxLoadModule}
-                      errorInfo={{
-                        id: props.$$componentItem.id,
-                      }}
-                      compProps={{
-                        text: translateContent,
-                        item: row,
-                        index,
-                      }}
-                    />
-                  }
-                >
-                  <span>{translateContent}</span>
-                </Tooltip>
-              </span>
-            );
-          } else {
-            content = (
-              <span
-                className="ued-control-line-number"
-                style={controllLineStyle}
-              >
-                {translateContent}
-              </span>
-            );
-          }
+          return (
+            <EditComponent
+              c={c}
+              disabled={editDisabled}
+              editoption={rowEditoption}
+              form={form}
+              appId={appId}
+              compId={compId}
+              currentRowKey={currentRowKey}
+              rowId={rowId}
+              rowData={isWholeTableEdit ? row : nowEditingData}
+              inlineVChange={inlineVChange}
+              modalSelectParams={modalSelectParams}
+              sandBoxSafeRun={sandBoxSafeRun}
+              engineApis={engineApis}
+            />
+          );
         }
+      }
+
+      let content = translateContent;
+
+      // 表格单元格内-行数控制控制
+      let controllLineStyle = {};
+      const isLineNumSet =
+        c.lineNum && typeof c.lineNum === 'number' && c.lineNum > 0;
+      if (isLineNumSet) {
+        // const lineHeight = size === 'small' ? 16 : 20;
+        controllLineStyle = {
+          // lineHeight: `${lineHeight}px`,
+          // maxHeight: `${lineHeight * c.lineNum}px`,
+          WebkitLineClamp: c.lineNum,
+        };
+      }
+
+      let shouldRenderEdittypeTitle = false;
 
-        // 自定义渲染函数
-        if (c.jsx) {
+      if (
+        c?.editContent?.edittype === 'title' &&
+        c?.editContent?.title &&
+        c.key !== ACTION_COL_KEY // 操作列不需要默认提示
+      ) {
+        if (c?.editContent?.title?.code && c?.editContent?.title?.jsx) {
+          shouldRenderEdittypeTitle = true;
+        }
+      }
+      if (isLineNumSet && !c.customRendering) {
+        if (shouldRenderEdittypeTitle) {
           content = (
-            <CustomModule
-              code={c.customRendering}
-              sandBoxLoadModule={engineApis.sandBoxLoadModule}
-              errorInfo={{
-                id: props.$$componentItem.id,
-              }}
-              compProps={{
-                text: translateContent,
-                item: row,
-                index,
-              }}
-            />
+            <span className="ued-control-line-number" style={controllLineStyle}>
+              <Tooltip
+                title={
+                  <CustomModule
+                    code={c?.editContent?.title?.code}
+                    sandBoxLoadModule={engineApis.sandBoxLoadModule}
+                    errorInfo={{
+                      id: props.$$componentItem.id,
+                    }}
+                    compProps={{
+                      text: translateContent,
+                      item: row,
+                      index,
+                    }}
+                  />
+                }
+              >
+                <span>{translateContent}</span>
+              </Tooltip>
+            </span>
           );
-        } else if (c.customRendering && funcExpExecute) {
+        } else {
           content = (
-            <span
-              // eslint-disable-next-line react/no-danger
-              dangerouslySetInnerHTML={{
-                __html: funcExpExecute(c.customRendering, [
-                  {
-                    key: 'text',
-                    value: translateContent,
-                  },
-                  {
-                    key: 'row',
-                    value: row,
-                  },
-                  {
-                    key: 'index',
-                    value: index,
-                  },
-                ]),
-              }}
-              className={classnames({
-                'ued-control-line-number': isLineNumSet,
-              })}
-              style={controllLineStyle}
-            />
+            <span className="ued-control-line-number" style={controllLineStyle}>
+              {translateContent}
+            </span>
           );
         }
+      }
 
-        // 单元格提示 -> 气泡卡片
-        if (editContent?.edittype === 'Popover' && editContent?.selectoption) {
-          const { page, options } = editContent.selectoption;
-          // 页面
-          if (page && page.pageId && engineApis?.renderPopover) {
-            if (!Object.keys(pageData).length || !pageData[page.pageId]) {
-              return {
-                children: content,
-              };
-            }
+      // 自定义渲染函数
+      if (c.jsx) {
+        content = (
+          <CustomModule
+            code={c.customRendering}
+            sandBoxLoadModule={engineApis.sandBoxLoadModule}
+            errorInfo={{
+              id: props.$$componentItem.id,
+            }}
+            compProps={{
+              text: translateContent,
+              item: row,
+              index,
+            }}
+          />
+        );
+      } else if (c.customRendering && funcExpExecute) {
+        content = (
+          <span
+            // eslint-disable-next-line react/no-danger
+            dangerouslySetInnerHTML={{
+              __html: funcExpExecute(c.customRendering, [
+                {
+                  key: 'text',
+                  value: translateContent,
+                },
+                {
+                  key: 'row',
+                  value: row,
+                },
+                {
+                  key: 'index',
+                  value: index,
+                },
+              ]),
+            }}
+            className={classnames({ 'ued-control-line-number': isLineNumSet })}
+            style={controllLineStyle}
+          />
+        );
+      }
 
-            try {
-              const pageRule = page.rule;
-              if (pageRule) {
-                if (typeof pageRule === 'string') {
-                  page.rule = (row: any, rowId: string, index: number) =>
-                    sandBoxSafeRun(pageRule, {
-                      row,
-                      rowId,
-                      index,
-                    });
-                }
+      // 单元格提示 -> 气泡卡片
+      if (editContent?.edittype === 'Popover' && editContent?.selectoption) {
+        const { page, options } = editContent.selectoption;
+        // 页面
+        if (page && page.pageId && engineApis?.renderPopover) {
+          if (!Object.keys(pageData).length || !pageData[page.pageId]) {
+            return content;
+          }
 
-                if (
-                  typeof page?.rule === 'function' &&
-                  page.rule(row, rowId, index)
-                ) {
-                  return {
-                    children: content,
-                  };
-                }
+          try {
+            const pageRule = page.rule;
+            if (pageRule) {
+              if (typeof pageRule === 'string') {
+                page.rule = (row: any, rowId: string, index: number) =>
+                  sandBoxSafeRun(pageRule, {
+                    row,
+                    rowId,
+                    index,
+                  });
+              }
+
+              if (
+                typeof page?.rule === 'function' &&
+                page.rule(row, rowId, index)
+              ) {
+                return content;
               }
-            } catch (e) {
-              console.error(e);
             }
+          } catch (e) {
+            console.error(e);
+          }
 
-            const params: any = {};
-
-            if (page.options) {
-              page.options.forEach((_c: any) => {
-                try {
-                  const stateParamRule = _c?.paramFunc ?? _c?.stateParam;
-                  if (stateParamRule) {
-                    if (typeof stateParamRule === 'string') {
-                      _c.paramFunc = (row: any, rowId: string, index: number) =>
-                        sandBoxSafeRun(stateParamRule, {
-                          row,
-                          rowId,
-                          index,
-                        });
-                    }
+          const params: any = {};
+          let popoverOptions = page.options;
+          if (page.options) {
+            popoverOptions = page.options.map((_c: any) => {
+              const c = {
+                ..._c,
+              };
+              try {
+                const stateParamRule = c?.paramFunc ?? c?.stateParam;
+                if (stateParamRule) {
+                  if (typeof stateParamRule === 'string') {
+                    c.paramFunc = (row: any, rowId: string, index: number) =>
+                      sandBoxSafeRun(stateParamRule, {
+                        row,
+                        rowId,
+                        index,
+                      });
+                  }
 
-                    if (typeof _c.paramFunc === 'function') {
-                      params[_c.code] = _c.paramFunc(row, rowId, index);
-                      _c.stateParam = params[_c.code];
-                    }
+                  if (typeof c.paramFunc === 'function') {
+                    params[_c.code] = c.paramFunc(row, rowId, index);
+                    c.stateParam = params[_c.code];
                   }
-                } catch (e) {
-                  console.error(e);
                 }
-              });
-            }
-            content = engineApis.renderPopover({
-              childElement: content,
-              props,
-              popoverSetting: {
-                page,
-                options: page.options,
-                state: params,
-              },
-              uid: compId,
+              } catch (e) {
+                console.error(e);
+              }
+              return c;
             });
-          } 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, {
-                      row,
-                      rowId,
-                      index,
-                    });
-                }
+          }
+          content = engineApis.renderPopover({
+            childElement: content,
+            props,
+            popoverSetting: {
+              page: {
+                ...page,
+                options: popoverOptions,
+              },
+              options: popoverOptions,
+              state: params,
+            },
+            uid: compId,
+          });
+        } 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, {
+                    row,
+                    rowId,
+                    index,
+                  });
+              }
 
-                if (
-                  typeof options?.rule === 'function' &&
-                  options.rule(row, rowId, index)
-                ) {
-                  return {
-                    children: content,
-                  };
-                }
+              if (
+                typeof options?.rule === 'function' &&
+                options.rule(row, rowId, index)
+              ) {
+                return content;
               }
-            } catch (e) {
-              console.error(e);
             }
+          } catch (e) {
+            console.error(e);
+          }
 
-            let newPopContent = popContent;
-            try {
-              if (popContent) {
-                if (typeof popContent === 'string') {
-                  options.content = (row: any, rowId: string, index: number) =>
-                    sandBoxSafeRun(popContent, {
-                      row,
-                      rowId,
-                      index,
-                    });
-                }
+          let newPopContent = popContent;
+          try {
+            if (popContent) {
+              if (typeof popContent === 'string') {
+                options.content = (row: any, rowId: string, index: number) =>
+                  sandBoxSafeRun(popContent, {
+                    row,
+                    rowId,
+                    index,
+                  });
+              }
 
-                if (typeof options?.content === 'function') {
-                  newPopContent = options.content(row, rowId, index);
-                }
+              if (typeof options?.content === 'function') {
+                newPopContent = options.content(row, rowId, index);
               }
-            } catch (e) {
-              console.error(e);
             }
-
-            content = (
-              <Popover
-                overlayStyle={{
-                  maxWidth: maxWidth || 'none',
-                  wordBreak: 'break-word',
-                }}
-                content={newPopContent}
-                {...resOptions}
-                arrowPointAtCenter
-              >
-                {content}
-              </Popover>
-            );
+          } catch (e) {
+            console.error(e);
           }
+
+          content = (
+            <Popover
+              overlayStyle={{
+                maxWidth: maxWidth || 'none',
+                wordBreak: 'break-word',
+              }}
+              content={newPopContent}
+              {...resOptions}
+              arrowPointAtCenter
+            >
+              {content}
+            </Popover>
+          );
         }
+      }
 
-        return {
-          children: content,
+      return content;
+    };
+    // 是否开启排序（判断标准：1、配置态配置 sorter: true 2、存量数据存在 defaultSortOrder)
+    if (c.sorter || c.defaultSortOrder) {
+      // 判断是根据前端默认排序函数排序，还是受控排序
+      if (hasSortEvent || Object.keys(rowSpanColMap).length > 0) {
+        c.sorter = true;
+      } else {
+        c.sorter = (a: any, b: any) => {
+          return compareFn(a[c.dataIndex || c.key], b[c.dataIndex || c.key]);
         };
-      };
-
-      // 是否开启排序（判断标准：1、配置态配置 sorter: true 2、存量数据存在 defaultSortOrder)
-      if (c.sorter || c.defaultSortOrder) {
-        // 判断是根据前端默认排序函数排序，还是受控排序
-        if (hasSortEvent || Object.keys(rowSpanColMap).length > 0) {
-          newColumns[i].sorter = true;
-        } else {
-          newColumns[i].sorter = (a: any, b: any) => {
-            return compareFn(a[c.dataIndex || c.key], b[c.dataIndex || c.key]);
-          };
-        }
       }
+    }
+  };
+
+  const finalcolumns: any[] = useMemo(() => {
+    const newColumns = [...customCols];
+    let finalCols: ColumnProps<any>[] = [];
+
+    // 用于表格头分组的数据结构：左树根节点，为第0层
+    const leftTree: any = {
+      title: treeRootName,
+    };
+
+    newColumns.forEach((c, i) => {
+      const { dataIndex } = c;
+
+      // 按照条件，初始化生成实际的列定义
+      generateTableCol(c);
 
       // 是否开启筛选
       if (c.filter) {