@lingxiteam/ebe-utils 0.1.16 → 0.1.18

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

@@ -2,6 +2,7 @@ import { useEffect, useState } from 'react';
 import CommIconEG from '../../Icon';
 import { handleIsValidIconCfg } from '../../Icon/hooks';
 import CommIconED from '../../Icon/IconED';
+import { useUpdateEffect } from '../../utils/ahooks';
 import { useLocale } from '../../utils/hooks/useLocale';
 
 const useExpandable = (expandCfg: any, isED?: boolean) => {
@@ -34,6 +35,7 @@ const useExpandable = (expandCfg: any, isED?: boolean) => {
 
   const hasExpandContent =
     Array.isArray(expandComponents) && expandComponents.length;
+  const [isExpandAllRows, setIsExpandAllRows] = useState<boolean>();
   const [expandedRowKeys, setExpandedRowKeys] = useState(() => {
     if (!defaultExpandAllRows && defaultExpandedRowKeys) {
       try {
@@ -306,18 +308,55 @@ const useExpandable = (expandCfg: any, isED?: boolean) => {
     return currPageRowKeys || [];
   };
 
-  useEffect(() => {
-    // 设置了全部展开，则展开当前页所有行
-    if (innerDataSource.length && defaultExpandAllRows) {
+  const expandAllDataSource = () => {
+    if (innerDataSource.length) {
       const currPageRowKeys = handleAllExpandRowKeys(innerDataSource);
       setExpandedRowKeys(currPageRowKeys);
     }
+  };
+
+  useEffect(() => {
+    // 设置了全部展开，则展开当前页所有行
+    if (isExpandAllRows) {
+      expandAllDataSource();
+    }
   }, [innerDataSource]);
 
+  // 全部展开属性可绑定数据源变动
+  useEffect(() => {
+    setIsExpandAllRows(defaultExpandAllRows);
+  }, [defaultExpandAllRows]);
+
+  // 展开/收起方法
+  const setExpanded = () => {
+    if (!isExpandAllRows) {
+      setExpandedRowKeys([]);
+    } else if (isExpandAllRows) {
+      expandAllDataSource();
+    }
+  };
+
+  // 表格全部展开/收起动作调用该方法
+  const expandTableData = (isExpanded: boolean | 'toggle') => {
+    const isExpand =
+      isExpanded === 'toggle' ? !isExpandAllRows : Boolean(isExpanded);
+    setIsExpandAllRows(isExpand);
+
+    // 当传入的状态与以前一致时，不触发下面的useEffect，手动调一下方法
+    if (isExpand === isExpandAllRows) {
+      setExpanded();
+    }
+  };
+
+  useUpdateEffect(() => {
+    setExpanded();
+  }, [isExpandAllRows]);
+
   return {
     expandable,
     childrenColumnName: realChildrenColumnName,
     setChildrenColumnName,
+    expandTableData,
   };
 };
 

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

@@ -1,6 +1,7 @@
 /* eslint-disable react/no-danger-with-children */
 import { Button, Checkbox } from 'antd';
 import { FilterDropdownProps } from 'antd/lib/table/interface';
+import _ from 'lodash';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
 const useFilter = (props: any) => {
@@ -79,7 +80,7 @@ const useFilter = (props: any) => {
     const originDataMap: any = {};
     let prevTdInfo: any = null;
     innerDataSource.forEach((d: any) => {
-      originDataMap[d[rowKey]] = d[dataIndex];
+      originDataMap[d[rowKey]] = _.get(d, dataIndex);
       // 由于表格存在单元格渲染和自定义渲染的情况，所以筛选列表从td元素获取innerText作为最终展示
       let td: any = tableDom?.querySelector(
         `tr[data-row-key='${d[rowKey]}'] > td[td-dataIndex='${dataIndex}']`,
@@ -148,7 +149,7 @@ const useFilter = (props: any) => {
         const rowKeys = currentFilter[k]?.rowKeyList.filter(
           (rowKey: string) => {
             return Object.keys(filters || {}).every((dataKey: string) => {
-              if (dataKey !== dataIndex) {
+              if (dataKey !== `${dataIndex}`) {
                 const v = filters[dataKey];
                 if (v?.length) {
                   const rowVal =

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

@@ -0,0 +1,326 @@
+import { message } from 'antd';
+import CustomModule from '../../utils/CustomModule';
+import type { FuncExpExeCuteType } from '../../utils/hooks/useFuncExpExecute';
+import {
+  CUSTOM,
+  DOWNLOAD_FILE,
+  OPEN_MODAL,
+  PAGE_JUMP,
+  PREVIEW_FILE,
+  ROUTE_PUSH,
+  ROUTE_REPLACE,
+} from '../constant';
+import type { ContentClick, FuncCode } from '../types/contentStyle';
+
+interface useFormatCellProps extends ContentClick {
+  appId: string;
+  pageId: string;
+  modalHeight?: number;
+  modalWidth?: number;
+  funcExpExecute?: FuncExpExeCuteType;
+  engineApis: any;
+  $$componentItemId: string;
+}
+
+const useFormatCell = (props: useFormatCellProps) => {
+  const {
+    funcExpExecute,
+    engineApis,
+    appId,
+    pageId,
+    content,
+    clickType,
+    page,
+    modal,
+    openType,
+    fileIds,
+    filename,
+    previewType,
+    downloadUrl,
+    modalHeight,
+    modalWidth,
+    $$componentItemId,
+  } = props;
+
+  const realAppId = appId;
+  const realPageId = pageId;
+
+  const handleCellContent = (row: any, rowIndex: number, rowText?: any) => {
+    if ((content as FuncCode)?.jsx) {
+      return (
+        <div>
+          <CustomModule
+            code={(content as FuncCode)?.code}
+            sandBoxLoadModule={engineApis.sandBoxLoadModule}
+            compProps={{ text: rowText, item: row, index: rowIndex }}
+            errorInfo={{
+              id: $$componentItemId,
+            }}
+          />
+        </div>
+      );
+    }
+    if ((content as FuncCode)?.code && funcExpExecute) {
+      return funcExpExecute((content as FuncCode).code, [
+        {
+          key: 'row',
+          value: row,
+        },
+        {
+          key: 'index',
+          value: rowIndex,
+        },
+      ]);
+    }
+
+    return content;
+  };
+
+  const handlePageJump = async (
+    row: any,
+    rowId: string | number,
+    rowIndex: number,
+  ) => {
+    if (page) {
+      const { pagePath, searchParams = {} } = page;
+      const newSearchParams: any = {};
+
+      Object.keys(searchParams).forEach((key) => {
+        if (typeof searchParams[key] === 'string') {
+          const exp = searchParams[key];
+          searchParams[key] = (
+            row: any,
+            rowId: string | number,
+            index: number,
+          ) =>
+            engineApis?.sandBoxSafeRun(exp, {
+              row,
+              rowId,
+              index,
+            });
+        }
+
+        if (typeof searchParams[key] === 'function') {
+          try {
+            newSearchParams[key] = searchParams[key](row, rowId, rowIndex);
+          } catch (e) {
+            console.error(e);
+          }
+        }
+      });
+
+      let newPath = pagePath || '';
+      Object.keys(newSearchParams).forEach((key) => {
+        if (!newPath.includes(`${key}=`)) {
+          newPath += `${newPath.includes('?') ? '&' : '?'}${key}=${
+            newSearchParams[key]
+          }`;
+        }
+      });
+
+      switch (openType) {
+        case ROUTE_PUSH:
+          if (typeof engineApis?.historyPush === 'function') {
+            engineApis.historyPush(newPath);
+          }
+          break;
+        case ROUTE_REPLACE:
+          if (typeof engineApis?.historyReplace === 'function') {
+            engineApis.historyReplace(newPath);
+          }
+          break;
+        default:
+          break;
+      }
+    }
+  };
+
+  const handleOpenModal = async (
+    row: any,
+    rowId: string | number,
+    rowIndex: number,
+  ) => {
+    if (modal) {
+      const { pageId, compStates = {} } = modal;
+
+      const newCompStates: any = {};
+      Object.keys(compStates).forEach((key) => {
+        if (typeof compStates[key] === 'string') {
+          const exp = compStates[key];
+          compStates[key] = (row: any, rowId: string | number, index: number) =>
+            engineApis?.sandBoxSafeRun(exp, {
+              row,
+              rowId,
+              index,
+            });
+        }
+
+        if (typeof compStates[key] === 'function') {
+          try {
+            newCompStates[key] = compStates[key](row, rowId, rowIndex);
+          } catch (e) {
+            console.error(e);
+          }
+        }
+      });
+
+      if (engineApis?.openModal) {
+        engineApis.openModal({
+          pageId,
+          params: newCompStates,
+        });
+      }
+    }
+  };
+
+  const handleDownloadFile = async (row: any, rowIndex: number) => {
+    if (typeof engineApis?.batchDownloadFileByIds === 'function') {
+      try {
+        let realFilename = filename;
+        let realFileIds = fileIds;
+
+        if ((filename as FuncCode)?.code && funcExpExecute) {
+          realFilename = funcExpExecute((filename as FuncCode).code, [
+            {
+              key: 'row',
+              value: row,
+            },
+            {
+              key: 'index',
+              value: rowIndex,
+            },
+          ]);
+        }
+
+        if ((fileIds as FuncCode)?.code && funcExpExecute) {
+          realFileIds = funcExpExecute((fileIds as FuncCode).code, [
+            {
+              key: 'row',
+              value: row,
+            },
+            {
+              key: 'index',
+              value: rowIndex,
+            },
+          ]);
+        }
+
+        realFileIds = Array.isArray(realFileIds) ? realFileIds[0] : realFileIds;
+
+        engineApis.batchDownloadFileByIds({
+          fileIds: realFileIds,
+          newFileName: realFilename,
+          onError: (errorMessage: string) => {
+            message.error(errorMessage);
+          },
+        });
+      } catch (e) {
+        console.error(e);
+      }
+    }
+  };
+
+  const handlePreviewFile = async (row: any, rowIndex: number) => {
+    let realFileIds: any = fileIds;
+
+    if ((fileIds as FuncCode)?.code && funcExpExecute) {
+      realFileIds = funcExpExecute((fileIds as FuncCode).code, [
+        {
+          key: 'row',
+          value: row,
+        },
+        {
+          key: 'index',
+          value: rowIndex,
+        },
+      ]);
+    }
+
+    if (typeof engineApis?.BannerModal?.open === 'function') {
+      // 弹窗预览
+      realFileIds =
+        typeof realFileIds === 'string' ? [realFileIds] : realFileIds;
+      const fileList = realFileIds.map((fileId: string | number) => {
+        return {
+          fileId,
+          file: {
+            fileId,
+          },
+        };
+      });
+      engineApis.BannerModal.open({
+        fileIndex: 0,
+        fileList,
+        viewMode: previewType,
+        modalHeight,
+        pageId: realPageId,
+        appId: realAppId,
+        modalWidth,
+      });
+    } else if (
+      previewType !== undefined &&
+      typeof engineApis?.previewFile === 'function'
+    ) {
+      // 新窗口预览
+      realFileIds = Array.isArray(realFileIds) ? realFileIds[0] : realFileIds;
+      try {
+        engineApis.previewFile({
+          fileId: realFileIds,
+          appId: realAppId,
+          pageId: realPageId,
+        });
+      } catch (e) {
+        console.error(e);
+      }
+    }
+  };
+
+  const onCellClick = async (
+    row: any,
+    rowId: string | number,
+    rowIndex: number,
+  ) => {
+    switch (clickType) {
+      case PAGE_JUMP:
+        handlePageJump(row, rowId, rowIndex);
+        break;
+      case OPEN_MODAL:
+        handleOpenModal(row, rowId, rowIndex);
+        break;
+      case DOWNLOAD_FILE:
+        handleDownloadFile(row, rowIndex);
+        break;
+      case PREVIEW_FILE:
+        handlePreviewFile(row, rowIndex);
+        break;
+      case CUSTOM: {
+        let realDownloadUrl: any = downloadUrl;
+
+        if ((downloadUrl as FuncCode)?.code && funcExpExecute) {
+          realDownloadUrl = funcExpExecute((downloadUrl as FuncCode).code, [
+            {
+              key: 'row',
+              value: row,
+            },
+            {
+              key: 'index',
+              value: rowIndex,
+            },
+          ]);
+        }
+
+        window.open(realDownloadUrl, openType);
+        break;
+      }
+      default:
+        break;
+    }
+  };
+
+  return {
+    onCellClick,
+    handleCellContent,
+  };
+};
+
+export default useFormatCell;

package/lib/pcpublic/src/components/pcfactory/src/Table/hooks/useRowEdit.ts

@@ -1,3 +1,4 @@
+import _ from 'lodash';
 import { useState } from 'react';
 import { EDIT_COMPONENT_STOP_PROPAGATION_CLS } from '../constant';
 import {
@@ -61,16 +62,20 @@ const useRowEdit = (props: any) => {
     const trow: any = innerDataSource.find(
       (i: any) => i[currentRowKey] === nowInlineEditKey,
     );
-    Object.assign(trow, nowEditingData);
-    deleteTempRowProperties(trow);
+    if (trow) {
+      Object.assign(trow, nowEditingData);
+      deleteTempRowProperties(trow);
+    }
 
     if (!tableUpdateInnerDataSource) {
       // 单行保存编辑时，需要将修改后的值同步到绑定的数据源
       const syncPropsDataSourceRow = props.dataSource?.find(
         (r: any) => r[currentRowKey] === nowInlineEditKey,
       );
-      Object.assign(syncPropsDataSourceRow, nowEditingData);
-      deleteTempRowProperties(syncPropsDataSourceRow);
+      if (syncPropsDataSourceRow) {
+        Object.assign(syncPropsDataSourceRow, nowEditingData);
+        deleteTempRowProperties(syncPropsDataSourceRow);
+      }
     }
 
     setInnerDataSource([...innerDataSource]);
@@ -204,8 +209,9 @@ const useRowEdit = (props: any) => {
         );
       }
 
-      editRow[attr] = newAttrVal;
-      syncPropsDataSourceRow[attr] = newAttrVal;
+      // 兼容attr(表格的dataIndex)为层级的情况
+      _.set(editRow, attr, newAttrVal);
+      _.set(syncPropsDataSourceRow, attr, newAttrVal);
 
       Object.keys(otherAttrVals).forEach((op) => {
         editRow[op] = otherAttrVals[op];
@@ -215,7 +221,7 @@ const useRowEdit = (props: any) => {
       return;
     }
 
-    nowEditingData[attr] = newAttrVal;
+    _.set(nowEditingData, attr, newAttrVal);
     Object.keys(otherAttrVals).forEach((op) => {
       nowEditingData[op] = otherAttrVals[op];
     });

package/lib/pcpublic/src/components/pcfactory/src/Table/hooks/useRowMerge.ts

@@ -1,7 +1,9 @@
+import _ from 'lodash';
 import { useMemo } from 'react';
 
 const useRowMerge = (props: any) => {
-  const { sortDataSource, columns, nowInlineEditKey, currentRowKey } = props;
+  const { currentPageDataSource, columns, nowInlineEditKey, currentRowKey } =
+    props;
 
   // 记录所有设置了行合并的列
   const rowSpanColMap = useMemo(() => {
@@ -51,8 +53,10 @@ const useRowMerge = (props: any) => {
             };
           } else {
             const { preIndex, row } = parentSpanRowsMap[rowIndex];
+            // 兼容层级表格场景
+            const path = rowIndex.split(',');
             // 当且仅当相邻行内容相同时才进行合并，否则把之前的主行换成当前行
-            if (preIndex === i - 1 && row[rowIndex] === newD[rowIndex]) {
+            if (preIndex === i - 1 && _.get(row, path) === _.get(newD, path)) {
               const curRowSpan = tableRowSpan.get(row);
               curRowSpan[rowIndex] += 1;
               // 合并当前行
@@ -75,13 +79,14 @@ const useRowMerge = (props: any) => {
       });
       return newData;
     };
-    recursiveSet(sortDataSource);
+    // 仅合并当前页的数据
+    recursiveSet(currentPageDataSource);
     // // loading没有数据的时候模拟3个数据
     // if(loading && d?.length === 0) {
     //   d = [{}, {}, {}];
     // }
     return [tableRowSpan, tableRowClass];
-  }, [sortDataSource, rowSpanColMap, nowInlineEditKey, currentRowKey]);
+  }, [currentPageDataSource, rowSpanColMap, nowInlineEditKey, currentRowKey]);
 
   return {
     rowSpanColMap,

package/lib/pcpublic/src/components/pcfactory/src/Table/hooks/useSort.ts

@@ -1,3 +1,4 @@
+import _ from 'lodash';
 import { useMemo, useState } from 'react';
 import { compareFn } from '../utils';
 
@@ -21,10 +22,12 @@ const useSort = (props: any) => {
       return innerDataSource;
     }
     return [...innerDataSource].sort((a, b) => {
+      const prev = _.get(a, sortOrder?.field);
+      const next = _.get(b, sortOrder?.field);
       if (sortOrder?.order === 'ascend') {
-        return compareFn(a[sortOrder?.field], b[sortOrder?.field]);
+        return compareFn(prev, next);
       }
-      return compareFn(b[sortOrder?.field], a[sortOrder?.field]);
+      return compareFn(next, prev);
     });
   }, [innerDataSource, sortOrder]);
 

package/lib/pcpublic/src/components/pcfactory/src/Table/hooks/useSummaryCol.ts

@@ -16,7 +16,7 @@ export type ColItem = {
 
 export type Column = {
   key?: string;
-  dataIndex: string;
+  dataIndex: string | string[];
   type?: 'orderCol' | 'dynamicCol';
 
   /**
@@ -52,7 +52,7 @@ const useSummaryCol = <T>(props: SummaryProps<T>) => {
     };
   }, [summaryConfig]);
 
-  // 真实的字段columns
+  // 拉平后真实的字段columns
   const fieldColumns = useMemo(() => {
     const colList: typeof columns = [];
     const recursive = (arr: typeof columns) => {
@@ -165,7 +165,7 @@ const useSummaryCol = <T>(props: SummaryProps<T>) => {
             // 合并分组
             col.push(item);
           }
-          item?.dataIndexList?.push?.(dataIndex);
+          item?.dataIndexList?.push?.(`${dataIndex}`);
           item.colSpan = (item.colSpan || 0) + 1;
           if (item.colSpan > 1) {
             item.align = 'center';
@@ -182,13 +182,26 @@ const useSummaryCol = <T>(props: SummaryProps<T>) => {
       }
     });
     const dataMap: Record<string, any[]> = {};
-    dataSource?.forEach((v) => {
-      Object.keys(v || {}).forEach((key: string) => {
-        if (!dataMap[key]) {
-          dataMap[key] = [];
+    const recursiveCollectValueByDataIndex = (
+      row: Record<string, any>,
+      keyPath: string[] = [],
+    ) => {
+      Object.keys(row || {}).forEach((key: string) => {
+        const dataIndex = [...keyPath, key];
+        if (!dataMap[`${dataIndex}`]) {
+          dataMap[`${dataIndex}`] = [];
+        }
+        const val = row[key];
+        if (typeof val === 'object' && !Array.isArray(val)) {
+          // 存在层级对象，继续收集下层的值列表
+          recursiveCollectValueByDataIndex(val, dataIndex);
         }
-        dataMap[key].push((v as any)[key]);
+        dataMap[`${dataIndex}`].push(val);
       });
+    };
+    // 收集每个dataIndex
+    dataSource?.forEach((v) => {
+      recursiveCollectValueByDataIndex(v as Record<string, any>);
     });
     return col.map((c) => {
       const { operateType, dataIndexList = [] } = c;

package/lib/pcpublic/src/components/pcfactory/src/Table/index.tsx

@@ -150,7 +150,7 @@ const MyTable = React.forwardRef<any, MyTableProps>((props, ref) => {
     innerDataSource: filterDataSource,
   });
 
-  const { expandable: realExpandable } = useExpandable({
+  const { expandable: realExpandable, expandTableData } = useExpandable({
     ...props,
     dataSource: sortDataSource,
     currentRowKey,
@@ -216,7 +216,7 @@ const MyTable = React.forwardRef<any, MyTableProps>((props, ref) => {
 
   const { rowSpanColMap, rowSpanMap, rowClassMap } = useRowMerge({
     ...props,
-    sortDataSource,
+    currentPageDataSource,
     nowInlineEditKey,
     currentRowKey,
   });
@@ -254,6 +254,7 @@ const MyTable = React.forwardRef<any, MyTableProps>((props, ref) => {
     onRowSaveClick,
     loadPrint,
     engineApis,
+    expandTableData,
   });
 
   // 根据id获取真实的下标，避免过滤和排序后影响下标

package/lib/pcpublic/src/components/pcfactory/src/Table/types/OperationCell.d.ts

@@ -0,0 +1,38 @@
+import { LocaleFunction } from '@lingxiteam/types';
+import React from 'react';
+
+export interface OperationCellProps {
+  row: any;
+  currentRowKey: string;
+  isNowEditRow: boolean;
+  extendNum: number;
+  engineApis: any;
+  getRealIndexById: (id: string | number) => number;
+  getRealRowActions: (row: any, index: number | null) => any[];
+  getRealExtendRowActions: (row: any, index: number | null) => any[];
+  onRowDeleteClick: (row: any, index: number | null) => void;
+  onRowSaveClick: (row: any, index: number | null, isForce: any) => void;
+  onRowDetailClick: (row: any, index: number | null) => void;
+  onRowEditClick: (row: any, index: number | null) => void;
+  onRowCancelClick: (row: any) => void;
+  getLocale: LocaleFunction;
+  actionsMap: any;
+  fixedAction?: boolean;
+  isSmallPopover: boolean;
+  tableRef: any;
+  $$componentItem: any;
+}
+
+export interface SingleBtnProps {
+  onDeleteClick: (e: any) => void;
+  onBtnClick: (e: any) => void;
+  getLocale: LocaleFunction;
+  actionsMap: any;
+  setMorePopVisible: (vis: boolean) => void;
+  BtnIcon?: React.ReactElement;
+  c: any;
+  idx: number;
+  defaultBtnList: any[];
+  isPopover?: boolean;
+  popconfirmPlacement: 'top' | 'topRight';
+}

package/lib/pcpublic/src/components/pcfactory/src/Table/types/bodyCell.d.ts

@@ -18,5 +18,8 @@ export interface MyBodyCellProps {
     row: Record<string, any>,
     cell: any,
     cellId: string | number,
+    rowIndex: number,
   ) => void;
+  width?: number;
+  index: number;
 }

package/lib/pcpublic/src/components/pcfactory/src/Table/types/contentStyle.d.ts

@@ -14,6 +14,7 @@ interface Modal {
 export interface FuncCode {
   code: string;
   originCode: string;
+  jsx?: any;
 }
 
 type DataBindType = FuncCode | string | undefined;
@@ -38,4 +39,7 @@ export interface ContentStyle extends ContentClick {
   backgroundColor: string;
   modalWidth?: number;
   modalHeight?: number;
+  imgMaxNum?: number;
+  imgSize?: number;
+  field?: string;
 }