@lingxiteam/ebe-utils 0.2.3 → 0.2.5

package/lib/h5public/src/components/factory/src/DynamicTable/components/HeaderCell.tsx

@@ -0,0 +1,18 @@
+import React, { FC } from 'react';
+import './index.less';
+
+interface CustomHeaderProps {
+  displayName: string;
+  style: React.CSSProperties;
+}
+
+const HeaderCell: FC<CustomHeaderProps> = props => {
+  const { style, displayName } = props;
+  return (
+    <div className="ag-custom-header-cell" style={style}>
+      {displayName}
+    </div>
+  );
+};
+
+export default HeaderCell;

package/lib/h5public/src/components/factory/src/DynamicTable/components/TypeCells.tsx

@@ -58,20 +58,8 @@ interface extendItem {
 
 const prefixCls = 'appDynamicTable-cell';
 
-const TypeCells: React.FC<CellProps> = (props) => {
-  const {
-    params,
-    item,
-    isEditor,
-    appId,
-    pageId,
-    tableRowKey,
-    sandBoxLoadModule,
-    $$componentItem,
-    extendActions,
-    getEngineApis,
-    renderIcon,
-  } = props;
+const TypeCells: React.FC<CellProps> = props => {
+  const { params, item, isEditor, appId, pageId, tableRowKey, sandBoxLoadModule, $$componentItem, extendActions, getEngineApis, renderIcon } = props;
   const engineApis = getEngineApis?.();
   const { colorFormatInfo, customRendering, extendInfo } = item;
   // console.log('TypeCell:', params);
@@ -79,6 +67,7 @@ const TypeCells: React.FC<CellProps> = (props) => {
     const { code, operator, value } = data;
 
     const toStringVal = (val: any) => `${val}`;
+    const toNumberVal = (val: any) => (!isNaN(Number(val)) ? Number(val) : toStringVal(val));
 
     switch (operator) {
       case OPERATOR_EQUAL:
@@ -86,9 +75,10 @@ const TypeCells: React.FC<CellProps> = (props) => {
       case OPERATOR_NOT_EQUAL:
         return toStringVal(row[code]) !== toStringVal(value);
       case OPERATOR_GREATER_THAN:
-        return row[code] > value;
+        // 优先转成数字类型比较大小
+        return toNumberVal(row[code]) > toNumberVal(value);
       case OPERATOR_LESS_THAN:
-        return row[code] < value;
+        return toNumberVal(row[code]) < toNumberVal(value);
       case OPERATOR_INCLUDE:
         if (typeof row[code].includes === 'function') {
           return row[code].includes(value);
@@ -110,24 +100,15 @@ const TypeCells: React.FC<CellProps> = (props) => {
         }
         return false;
       case OPERATOR_NULL:
-        return (
-          row[code] === undefined || row[code] === null || row[code] === ''
-        );
+        return row[code] === undefined || row[code] === null || row[code] === '';
       case OPERATOR_NOT_NULL:
-        return !(
-          row[code] === undefined ||
-          row[code] === null ||
-          row[code] === ''
-        );
+        return !(row[code] === undefined || row[code] === null || row[code] === '');
       default:
         return false;
     }
   };
 
-  const collectCondition: (data: string | any[], record: any) => any = (
-    data: string | any[],
-    record: any,
-  ) => {
+  const collectCondition: (data: string | any[], record: any) => any = (data: string | any[], record: any) => {
     if (!data || !data?.length) {
       return true;
     }
@@ -150,12 +131,7 @@ const TypeCells: React.FC<CellProps> = (props) => {
     return valid;
   };
 
-  const getRuningResultFunc = (
-    row: any,
-    index: number | null,
-    rowId: string | number,
-    funcitonString: string,
-  ) =>
+  const getRuningResultFunc = (row: any, index: number | null, rowId: string | number, funcitonString: string) =>
     engineApis?.sandBoxSafeRun?.(funcitonString, {
       ...row,
       row,
@@ -163,25 +139,15 @@ const TypeCells: React.FC<CellProps> = (props) => {
       rowId,
     });
 
-  const renderActionButtonView = (
-    list: extendItem[],
-    actionKeys: string[],
-    data: { rowId: string; row: any; rowIndex: number },
-  ) => {
+  const renderActionButtonView = (list: extendItem[], actionKeys: string[], data: { rowId: string; row: any; rowIndex: number }) => {
     return list.map((item: extendItem) => {
       let btnOnClick: any = () => {};
 
       if (actionKeys.includes(item?.value)) {
-        btnOnClick = () =>
-          extendActions?.[item.value](data.rowId, data.row, data.rowIndex);
+        btnOnClick = () => extendActions?.[item.value](data.rowId, data.row, data.rowIndex);
       }
       return (
-        <Button
-          color="primary"
-          fill="none"
-          disabled={(item.disabled || false) as boolean}
-          onClick={btnOnClick}
-        >
+        <Button color="primary" fill="none" disabled={(item.disabled || false) as boolean} onClick={btnOnClick}>
           <div className="buttonInsideView">
             {item.iconPos === 'left' &&
               item?.icon &&
@@ -204,16 +170,10 @@ const TypeCells: React.FC<CellProps> = (props) => {
     });
   };
 
-  const renderActionView = (
-    extendInfo: any,
-    params: any,
-    extendActions?: Record<string, any>,
-  ) => {
+  const renderActionView = (extendInfo: any, params: any, extendActions?: Record<string, any>) => {
     const { extend = [], extendNum = 0 } = extendInfo;
     const row = params?.data || {};
-    const rowId = tableRowKey
-      ? row[tableRowKey]
-      : params?.node?.id || params?.value;
+    const rowId = tableRowKey ? row[tableRowKey] : params?.node?.id || params?.value;
     const rowIndex = params?.rowIndex;
     const actionKeys = Object.keys(extendActions || {});
     // 最后用于显示的按钮
@@ -227,12 +187,7 @@ const TypeCells: React.FC<CellProps> = (props) => {
             if (item.disabled === 'false') {
               data.disabled = false;
             } else {
-              data.disabled = getRuningResultFunc(
-                row,
-                rowIndex,
-                rowId,
-                item.disabled,
-              );
+              data.disabled = getRuningResultFunc(row, rowIndex, rowId, item.disabled);
             }
           }
 
@@ -241,12 +196,7 @@ const TypeCells: React.FC<CellProps> = (props) => {
               data.visible = false;
             } else {
               // 当值为true时隐藏，false时显示
-              data.visible = !getRuningResultFunc(
-                row,
-                rowIndex,
-                rowId,
-                item.rule,
-              );
+              data.visible = !getRuningResultFunc(row, rowIndex, rowId, item.rule);
             }
           }
         }
@@ -296,9 +246,7 @@ const TypeCells: React.FC<CellProps> = (props) => {
     let cellFontColor = '';
     let cellBackgroundColor = '';
     let cellBorderColor = '';
-    const rowId = tableRowKey
-      ? params?.data?.[tableRowKey]
-      : params?.node?.id || params?.value;
+    const rowId = tableRowKey ? params?.data?.[tableRowKey] : params?.node?.id || params?.value;
     colorFormatInfo.forEach((item: any) => {
       // 遇到单元格样式作用范围一样的，取最后匹配的单元格样式
       // const formatInfo = [...colorFormatInfo];
@@ -332,10 +280,8 @@ const TypeCells: React.FC<CellProps> = (props) => {
 
         if (engineApis && !isEditor) {
           // 运行态才进行解析
-          const funcExpExecute = useFuncExpExecute(
-            engineApis?.sandBoxSafeRun || ({} as any),
-          );
-          const { onCellClick } = useFormatCell({
+          const funcExpExecute = useFuncExpExecute(engineApis?.sandBoxSafeRun || ({} as any));
+          const { handleCellContent, onCellClick } = useFormatCell({
             funcExpExecute,
             engineApis,
             appId,
@@ -351,8 +297,13 @@ const TypeCells: React.FC<CellProps> = (props) => {
             downloadUrl,
             modalWidth,
             modalHeight,
+            $$componentItemId: $$componentItem?.id,
           });
           myCellClick = onCellClick;
+
+          if (content) {
+            cellContent = handleCellContent(params?.data || {}, params?.rowIndex, params?.value || '');
+          }
         }
       }
     });
@@ -384,14 +335,8 @@ const TypeCells: React.FC<CellProps> = (props) => {
               }
             }}
           >
-            <span
-              className="point"
-              style={{ background: cellBackgroundColor }}
-            />
-            <span
-              className="customer-cell-common"
-              style={{ color: cellFontColor }}
-            >
+            <span className="point" style={{ background: cellBackgroundColor }} />
+            <span className="customer-cell-common" style={{ color: cellFontColor }}>
               {cellContent}
             </span>
           </div>
@@ -432,10 +377,7 @@ const TypeCells: React.FC<CellProps> = (props) => {
               }
             }}
           >
-            <span
-              className="span-cell"
-              style={{ background: cellBackgroundColor }}
-            >
+            <span className="span-cell" style={{ background: cellBackgroundColor }}>
               {cellContent}
             </span>
           </div>
@@ -491,10 +433,7 @@ const TypeCells: React.FC<CellProps> = (props) => {
                 }
               }}
             >
-              <div
-                className="progressBar"
-                style={{ backgroundColor: cellFontColor }}
-              >
+              <div className="progressBar" style={{ backgroundColor: cellFontColor }}>
                 <div
                   className="current"
                   style={{

package/lib/h5public/src/components/factory/src/DynamicTable/hooks/useCreateColumn.tsx

@@ -1,13 +1,8 @@
 import { EngineApisType, EngineBaseProps } from '@lingxiteam/types';
-import {
-  CellClassParams,
-  ICellRendererParams,
-  RowSpanParams,
-  ValueFormatterParams,
-  ValueGetterParams,
-} from 'ag-grid-community';
+import { CellClassParams, ICellRendererParams, RowSpanParams, ValueFormatterParams, ValueGetterParams } from 'ag-grid-community';
 import cloneDeep from 'lodash/cloneDeep';
-import { useEffect, useMemo, useRef, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import HeaderCell from '../components/HeaderCell';
 import TypeCells from '../components/TypeCells';
 
 export interface CreateColumnProps {
@@ -70,38 +65,33 @@ const useCreateColumn = (props: CreateColumnProps) => {
   const [aggregate, setAggregate] = useState<any>();
   // 静态编码
   const [staticAttrNbrs, setStaticAttrNbrs] = useState<any[]>([]);
-  const [columnList, setColumnList] = useState<any[]>([]);
+  // const [columnList, setColumnList] = useState<any[]>([]);
   const attrMapRef = useRef<any>();
 
-  const rowSpan = (params: RowSpanParams) => {
+  const rowSpan = (params: RowSpanParams, columnList: any) => {
     const key = params?.column?.getColId();
     const index = Number(params?.node?.rowIndex);
-    const numberObject = rowSpanNumber[index];
+    const numberObject = getRowSpanNumber(columnList)[index];
     if (numberObject?.[key] > 1) {
       return numberObject[key];
     }
     return 1;
   };
 
-  const tableCellClass = (params: CellClassParams) => {
+  const tableCellClass = (params: CellClassParams, columnList: any, align: string) => {
     // console.log('cellClass', params);
     const key = params?.column?.getColId();
     const index = Number(params?.node?.rowIndex);
-    const numberObject = rowSpanNumber[index];
+    const numberObject = getRowSpanNumber(columnList)[index];
     if (numberObject?.[key] > 1) {
-      return `${bordered}-span-cell`;
+      return `${bordered}-span-cell table-row-merge-${align}`;
     }
-    return null;
+    return `table-row-merge-${align}`;
   };
 
-  const cellValueFormatter = (
-    params: ValueFormatterParams,
-    options: [{ value?: string; label?: string }],
-  ) => {
+  const cellValueFormatter = (params: ValueFormatterParams, options: [{ value?: string; label?: string }]) => {
     const oldValue = params?.value;
-    const translateValue = options.find(
-      (item: any) => item?.value === oldValue,
-    );
+    const translateValue = options.find((item: any) => item?.value === oldValue);
     return translateValue ? translateValue?.label : oldValue;
   };
 
@@ -119,10 +109,7 @@ const useCreateColumn = (props: CreateColumnProps) => {
     }
   }, [staticAttrNbrs]);
 
-  const cellValueFormatterWithAttrMap = (
-    params: ValueFormatterParams,
-    attr: { childKeys?: any[]; attrNbr: string },
-  ) => {
+  const cellValueFormatterWithAttrMap = (params: ValueFormatterParams, attr: { childKeys?: any[]; attrNbr: string }) => {
     const oldValue = params?.value;
     let translateList = attrMapRef?.current?.[attr.attrNbr];
     let translateValue;
@@ -130,18 +117,14 @@ const useCreateColumn = (props: CreateColumnProps) => {
       // 设定了范围，就拿范围里的数据
       if (attr?.childKeys?.length) {
         translateList = translateList.filter?.(
-          (item: any) =>
-            attr?.childKeys?.includes(item?.attrValue) ||
-            attr?.childKeys?.includes(item?.attrValueCode),
+          (item: any) => attr?.childKeys?.includes(item?.attrValue) || attr?.childKeys?.includes(item?.attrValueCode)
         );
       }
       if (Array.isArray(oldValue)) {
         // 翻译字段里面的值如果是数组的话，分开进行翻译
         const newValue: any[] = [];
-        oldValue.forEach((itemValue) => {
-          const item = translateList?.find?.(
-            (c: any) => String(c?.attrValue) === String(itemValue),
-          );
+        oldValue.forEach(itemValue => {
+          const item = translateList?.find?.((c: any) => String(c?.attrValue) === String(itemValue));
           if (item) {
             newValue.push(item?.attrValueName || itemValue);
           } else {
@@ -150,20 +133,14 @@ const useCreateColumn = (props: CreateColumnProps) => {
         });
         translateValue = newValue.length ? newValue : oldValue;
       } else {
-        translateValue = translateList?.find?.(
-          (c: any) => String(c?.attrValue) === String(oldValue),
-        );
+        translateValue = translateList?.find?.((c: any) => String(c?.attrValue) === String(oldValue));
         translateValue = translateValue?.attrValueName;
       }
     }
     return translateValue || oldValue;
   };
 
-  const cellRenderer = (
-    params: ICellRendererParams,
-    item: any,
-    extendActions?: Record<string, any>,
-  ) => {
+  const cellRenderer = (params: ICellRendererParams, item: any, extendActions?: Record<string, any>) => {
     return (
       <TypeCells
         params={params}
@@ -193,7 +170,7 @@ const useCreateColumn = (props: CreateColumnProps) => {
   };
 
   // 记录所有设置了行合并的列
-  const rowSpanColMap = useMemo(() => {
+  const getRowSpanColMap = useCallback((columnList: any) => {
     const map: any = {};
     columnList.forEach((c: any) => {
       if (c.isRowSpan) {
@@ -201,51 +178,54 @@ const useCreateColumn = (props: CreateColumnProps) => {
       }
     });
     return map;
-  }, [columnList]);
+  }, []);
 
-  const rowSpanNumber = useMemo(() => {
-    const tableRowSpan = new WeakMap();
-    const rowNumber: any[] = [];
-    // 记录负责合并行的主行
-    const recursiveSet = (arr: any[]) => {
-      const parentSpanRowsMap: any = {};
-      (arr || []).forEach((d, i) => {
-        const newD = d;
-        const __rowSpan: any = {};
-        if (newD?.children?.length > 0) {
-          // newD.children = recursiveSet(newD.children);
-          recursiveSet(newD.children);
-        }
-        Object.keys(rowSpanColMap).forEach((rowIndex) => {
-          __rowSpan[rowIndex] = 1;
-          if (!parentSpanRowsMap[rowIndex]) {
-            parentSpanRowsMap[rowIndex] = {
-              preIndex: i,
-              row: newD,
-            };
-          } else {
-            const { preIndex, row } = parentSpanRowsMap[rowIndex];
-            // 当且仅当相邻行内容相同时才进行合并，否则把之前的主行换成当前行
-            if (preIndex === i - 1 && row[rowIndex] === newD[rowIndex]) {
-              const curRowSpan = tableRowSpan.get(row);
-              curRowSpan[rowIndex] += 1;
-              // 合并当前行
-              __rowSpan[rowIndex] = 0;
+  const getRowSpanNumber = useCallback(
+    (columnList: any) => {
+      const tableRowSpan = new WeakMap();
+      const rowNumber: any[] = [];
+      // 记录负责合并行的主行
+      const recursiveSet = (arr: any[]) => {
+        const parentSpanRowsMap: any = {};
+        (arr || []).forEach((d, i) => {
+          const newD = d;
+          const __rowSpan: any = {};
+          if (newD?.children?.length > 0) {
+            // newD.children = recursiveSet(newD.children);
+            recursiveSet(newD.children);
+          }
+          Object.keys(getRowSpanColMap(columnList)).forEach(rowIndex => {
+            __rowSpan[rowIndex] = 1;
+            if (!parentSpanRowsMap[rowIndex]) {
+              parentSpanRowsMap[rowIndex] = {
+                preIndex: i,
+                row: newD,
+              };
             } else {
-              parentSpanRowsMap[rowIndex].row = newD;
+              const { preIndex, row } = parentSpanRowsMap[rowIndex];
+              // 当且仅当相邻行内容相同时才进行合并，否则把之前的主行换成当前行
+              if (preIndex === i - 1 && row[rowIndex] === newD[rowIndex]) {
+                const curRowSpan = tableRowSpan.get(row);
+                curRowSpan[rowIndex] += 1;
+                // 合并当前行
+                __rowSpan[rowIndex] = 0;
+              } else {
+                parentSpanRowsMap[rowIndex].row = newD;
+              }
+              parentSpanRowsMap[rowIndex].preIndex = i;
             }
-            parentSpanRowsMap[rowIndex].preIndex = i;
-          }
+          });
+          tableRowSpan.set(newD, __rowSpan);
+          rowNumber.push(__rowSpan);
         });
-        tableRowSpan.set(newD, __rowSpan);
-        rowNumber.push(__rowSpan);
-      });
-    };
-    if (Array.isArray(data)) {
-      recursiveSet(cloneDeep(data));
-    }
-    return rowNumber;
-  }, [data, columnList]);
+      };
+      if (Array.isArray(data)) {
+        recursiveSet(cloneDeep(data));
+      }
+      return rowNumber;
+    },
+    [data, getRowSpanColMap]
+  );
 
   const myColumn = useMemo(() => {
     // console.log('column:', columns, twoDimension, bordered);
@@ -258,8 +238,8 @@ const useCreateColumn = (props: CreateColumnProps) => {
       columns.forEach((item: any, index: number) => {
         // 解析动态列配置，根据动态列数据源，得到真正的列配置数组数据
         if (item?.type === 'dynamicCol' && Array.isArray(item?.dataSource)) {
+          const data: any = cloneDeep(item);
           item.dataSource.forEach((c: any) => {
-            const data: any = cloneDeep(item);
             data.dataIndex = c?.[item?.dataIndex] || '';
             data.title = c?.[item?.title] || '';
             delete data.type;
@@ -271,14 +251,24 @@ const useCreateColumn = (props: CreateColumnProps) => {
           myColumnList.push(data);
         }
       });
-      setColumnList(myColumnList);
+      // setColumnList(myColumnList);
       myColumnList.forEach((item: any, index: number) => {
+        const textAlign = item.align || 'center';
         // 将数据字段转换一下
         const c: any = {
           field: item?.dataIndex || '',
           headerName: item?.title || '',
+          headerComponent: HeaderCell,
+          headerComponentParams: {
+            style: {
+              textAlign,
+            },
+          },
           width: item?.width,
           pinned: null,
+          cellStyle: {
+            textAlign,
+          },
         };
         // 有设置宽度的列设置不被自动宽度方法影响。
         if (typeof item?.width !== 'undefined') {
@@ -295,19 +285,17 @@ const useCreateColumn = (props: CreateColumnProps) => {
         }
         // item?.isRowSpan 行合并
         if (item?.isRowSpan) {
-          c.rowSpan = rowSpan;
-          c.cellClass = tableCellClass;
+          c.rowSpan = (params: any) => {
+            return rowSpan(params, myColumnList);
+          };
+          c.cellClass = (params: any) => {
+            return tableCellClass(params, myColumnList, textAlign);
+          };
         }
         // item?.colorFormatInfo 单元格内容
-        if (
-          item?.colorFormatInfo?.length > 0 ||
-          item?.customRendering?.length > 0
-        ) {
-          c.cellRenderer = (params: ICellRendererParams) =>
-            cellRenderer(params, item);
-          const hasOwnClick = item?.colorFormatInfo?.filter(
-            (c: any) => c?.clickType,
-          );
+        if (item?.colorFormatInfo?.length > 0 || item?.customRendering?.length > 0) {
+          c.cellRenderer = (params: ICellRendererParams) => cellRenderer(params, item);
+          const hasOwnClick = item?.colorFormatInfo?.filter((c: any) => c?.clickType);
           // lxHasOwnCellClick 用来标识自定义cell是否有点击事件
           if (hasOwnClick?.length) {
             c.lxHasOwnCellClick = true;
@@ -318,21 +306,24 @@ const useCreateColumn = (props: CreateColumnProps) => {
         // 字段翻译 item?.attr---静态编码  item?.options ---自定义
         // c.valueFormatter 用此方法进行字段翻译
         if (Array.isArray(item?.options)) {
-          c.valueFormatter = (params: ValueFormatterParams) =>
-            cellValueFormatter(params, item.options);
+          c.valueFormatter = (params: ValueFormatterParams) => cellValueFormatter(params, item.options);
         }
         if (item?.attr) {
           translateAttrs.push(item?.attr?.attrNbr);
-          c.valueFormatter = (params: ValueFormatterParams) =>
-            cellValueFormatterWithAttrMap(params, item.attr);
+          c.valueFormatter = (params: ValueFormatterParams) => cellValueFormatterWithAttrMap(params, item.attr);
         }
 
         if (index === 0) {
           // 二维表格将第一列数据背景颜色修改成和表头颜色一致
           if (twoDimension) {
-            c.cellStyle = { color: headerColor, background: headerBgColor };
+            c.cellStyle = {
+              ...c.cellStyle,
+              color: headerColor,
+              background: headerBgColor,
+            };
           } else if (firstColumnColor || firstColumnBgColor) {
             c.cellStyle = {
+              ...c.cellStyle,
               color: firstColumnColor,
               background: firstColumnBgColor,
             };
@@ -363,12 +354,7 @@ const useCreateColumn = (props: CreateColumnProps) => {
           field: '--Table-Action--',
           headerName: '操作列',
           pinned: fixedAction ? 'right' : null,
-          cellRenderer: (params: ICellRendererParams) =>
-            cellRenderer(
-              params,
-              { extendInfo: { extend, extendNum } },
-              extendActions,
-            ),
+          cellRenderer: (params: ICellRendererParams) => cellRenderer(params, { extendInfo: { extend, extendNum } }, extendActions),
         });
       }
       setStaticAttrNbrs([...new Set(translateAttrs)]);
@@ -391,6 +377,7 @@ const useCreateColumn = (props: CreateColumnProps) => {
     showExtend,
     extend,
     extendNum,
+    getRowSpanNumber,
   ]);
 
   return {