@lingxiteam/ebe-utils 0.5.11 → 0.6.1

package/lib/pcpublic/src/components/pcfactory/src/Table/BodyCell/LevelTdCell.tsx

@@ -0,0 +1,134 @@
+import React, { useMemo } from 'react';
+import { MyBodyCellProps } from '../types/bodyCell';
+import { LEVEL_COL_KEY } from '../hooks/useColumns';
+import { generateChildDataIndex } from '../utils';
+import { useTableContext } from '../hooks/useTableContext';
+import MyBodyCell from './index';
+import { Table } from 'antd';
+
+const LevelTdCell: React.FC<MyBodyCellProps> = (props) => {
+  const {
+    mode,
+    editable,
+    isExtend,
+    dataIndex,
+    row: record,
+    children,
+    width,
+    isCustomRendering,
+    funcExpExecute,
+    engineApis,
+    onTableCellClick,
+    index,
+    type,
+    parentKey = '',
+    defaultColWidthMap,
+    originRow,
+    originDataIndex,
+    createCellPropsFn,
+    originIndex,
+    size,
+    isBordered,
+    colKey,
+    ...rest
+  } = props;
+  const { levelTableColSpanMap } = useTableContext();
+
+  // 层级表格渲染数据组装
+  const { isLevelArray, dataSource, columns, colSpan } = useMemo(() => {
+    let colSpan;
+    let childrenColumn: any[] | undefined = [];
+    const realDataIndex = originDataIndex || dataIndex;
+    if (Array.isArray(realDataIndex) && type === LEVEL_COL_KEY) {
+      colSpan = 0;
+      const childDataIndex = generateChildDataIndex(realDataIndex, parentKey);
+      const [parentIndex] = childDataIndex;
+      const nextParentKey = parentKey ? `${parentKey},${parentIndex}` : parentIndex;
+      const key = String(realDataIndex);
+      const levelList = levelTableColSpanMap?.[nextParentKey];
+      const levelItem = (levelList || []).find((l: any) => l.colKey === `${key}_${colKey}`);
+      // 从表首列开始合并
+      if (levelItem) {
+        const { colSpan: _colSpan, childrenColumn: _childrenColumn } = levelItem;
+        childrenColumn = _childrenColumn;
+        colSpan = _colSpan;
+      }
+      if (childrenColumn?.length) {
+        const parentData = Array.isArray(record[parentIndex]) ? record[parentIndex] : [record[parentIndex]];
+        const columns = childrenColumn.map((c: any) => {
+          const nextChildDataIndex = generateChildDataIndex(c.dataIndex, nextParentKey);
+          return {
+            ...c,
+            dataIndex: nextChildDataIndex,
+            // 宽度保持跟主表列一致
+            width: c.width || defaultColWidthMap?.[c?.key],
+            render: (text: any) => {
+              return c?.render ? c?.render(text, originRow || record, originIndex || index) : text;
+            },
+            onCell: (childRecord: any) => {
+              const cellProps = createCellPropsFn?.(originRow || record, c,
+                index, { record: childRecord, dataIndex: nextChildDataIndex });
+              const originDataIndex = c.dataIndex;
+              if (c.filter && (nextChildDataIndex?.length <= 1)) {
+                // 开启过滤时，在td元素上记录对应的字段编码
+                cellProps['td-dataIndex'] = `${originDataIndex}-${c.key}`;
+              }
+              return { ...cellProps,
+                dataIndex: nextChildDataIndex,
+                createCellPropsFn,
+                type: nextChildDataIndex.length > 1 ? 'children' : undefined,
+                originRow: originRow || record,
+                originDataIndex,
+                originIndex: originIndex || index,
+                parentKey: nextParentKey };
+            },
+          };
+        });
+        return {
+          isLevelArray: true,
+          dataSource: parentData,
+          columns,
+          colSpan,
+        };
+      }
+    }
+    return {
+      colSpan,
+    };
+  }, [type, record, dataIndex, originRow, originIndex,
+    levelTableColSpanMap, defaultColWidthMap, colKey]);
+
+  const restProps = {
+    ...rest,
+    colSpan,
+  };
+  // colSpan为0的单元格不渲染
+  if (restProps?.colSpan === 0) {
+    return null;
+  }
+
+  if (isLevelArray) {
+    // 从表形式的数组节点
+    return (
+      <td {...restProps} className="ued-table-levelTable-td">
+        <Table
+          pagination={false}
+          dataSource={dataSource}
+          columns={columns}
+          size={size as any}
+          bordered={isBordered}
+          components={{
+            body: {
+              cell: MyBodyCell,
+            },
+          }}
+          className="ued-table-levelTable-wrap"
+        />
+      </td>
+    );
+  }
+
+  return null;
+};
+
+export default LevelTdCell;

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

@@ -1,75 +1,106 @@
+import _ from 'lodash';
 import React from 'react';
-import { MyBodyCellProps } from '../types/bodyCell';
-import FormatCell from '../FormatCell';
 import {
-  SET_ROW_SPECIAL_CELL_BACKGROUND_COLOR,
+  BODY_CELL_MODE_ED, OPERATOR_ENDS_WITH, OPERATOR_EQUAL, OPERATOR_GREATER_THAN,
+  OPERATOR_INCLUDE, OPERATOR_LESS_THAN, OPERATOR_NOT_EQUAL, OPERATOR_NOT_INCLUDE,
+  OPERATOR_NOT_NULL, OPERATOR_NULL, OPERATOR_STARTS_WITH, RELATION_OR, SET_ROW_ALL_CELL_BACKGROUND_COLOR,
+  SET_ROW_ALL_CELL_CONTENT_STYLE, SET_ROW_SPECIAL_CELL_BACKGROUND_COLOR,
   SET_ROW_SPECIAL_CELL_CONTENT_STYLE,
-  RELATION_OR,
-  OPERATOR_EQUAL,
-  OPERATOR_NOT_EQUAL,
-  OPERATOR_GREATER_THAN,
-  OPERATOR_LESS_THAN,
-  OPERATOR_INCLUDE,
-  OPERATOR_NOT_INCLUDE,
-  OPERATOR_STARTS_WITH,
-  OPERATOR_ENDS_WITH,
-  OPERATOR_NULL,
-  OPERATOR_NOT_NULL,
-  BODY_CELL_MODE_ED,
-  SET_ROW_ALL_CELL_BACKGROUND_COLOR,
-  SET_ROW_ALL_CELL_CONTENT_STYLE,
 } from '../constant';
-import _ from 'lodash';
+import FormatCell from '../FormatCell';
+import { MyBodyCellProps } from '../types/bodyCell';
 import type { ContentStyle } from '../types/contentStyle';
+import { LEVEL_COL_KEY } from '../hooks/useColumns';
+import LevelTdCell from './LevelTdCell';
+import { Skeleton } from 'antd';
+import { useTableContext } from '../hooks/useTableContext';
 
-const validateCondition = (data: any, row: any) => {
-  const { code, operator, value } = data;
-
-  const toStringVal = (val: any) => `${val}`;
-  const toNumberVal = (val: any) => !isNaN(Number(val)) ? Number(val) : toStringVal(val);
 
+const toStringVal = (val: any) => `${val}`;
+const toNumberVal = (val: any) => !isNaN(Number(val)) ? Number(val) : toStringVal(val);
+const validateFn = (operator: string, left: any, right: any) => {
   switch (operator) {
     case OPERATOR_EQUAL:
-      return toStringVal(row[code]) === toStringVal(value);
+      return toStringVal(left) === toStringVal(right);
     case OPERATOR_NOT_EQUAL:
-      return toStringVal(row[code]) !== toStringVal(value);
+      return toStringVal(left) !== toStringVal(right);
     case OPERATOR_GREATER_THAN:
       // 优先转成数字类型比较大小
-      return toNumberVal(row[code]) > toNumberVal(value);
+      return toNumberVal(left) > toNumberVal(right);
     case OPERATOR_LESS_THAN:
-      return toNumberVal(row[code]) < toNumberVal(value);
+      return toNumberVal(left) < toNumberVal(right);
     case OPERATOR_INCLUDE:
-      if (typeof row[code].includes === 'function') {
-        return row[code].includes(value);
+      if (typeof left.includes === 'function') {
+        return left.includes(right);
       }
       return false;
     case OPERATOR_NOT_INCLUDE:
-      if (typeof row[code].includes === 'function') {
-        return !row[code].includes(value);
+      if (typeof left.includes === 'function') {
+        return !left.includes(right);
       }
       return false;
     case OPERATOR_STARTS_WITH:
-      if (typeof row[code].startsWith === 'function') {
-        return row[code].startsWith(value);
+      if (typeof left.startsWith === 'function') {
+        return left.startsWith(right);
       }
       return false;
     case OPERATOR_ENDS_WITH:
-      if (typeof row[code].endsWith === 'function') {
-        return row[code].endsWith(value);
+      if (typeof left.endsWith === 'function') {
+        return left.endsWith(right);
       }
       return false;
     case OPERATOR_NULL:
-      return row[code] === undefined || row[code] === null || row[code] === '';
+      return left === undefined || left === null || left === '';
     case OPERATOR_NOT_NULL:
-      return !(row[code] === undefined || row[code] === null || row[code] === '');
+      return !(left === undefined || left === null || left === '');
     default:
       return false;
   }
 };
+const validateCondition = (data: any, row: any, curCol: {
+  colKey?: string
+  rowText?: string,
+}) => {
+  const { code, operator, value } = data;
+
+  const rowData = _.get(row, code);
+  if (Array.isArray(code) && row) {
+    // 层级列特殊处理
+    const dataList: any = code.reduce((p, n, i) => {
+      if (!p) {
+        return p;
+      }
+      let current = p[n];
+      if (Array.isArray(p)) {
+        current = [];
+        p.forEach((pp) => {
+          const next = Array.isArray(pp[n]) && i !== code.length - 1 ? [...pp[n]] : [pp[n]];
+          current.push(...next);
+        });
+      }
+      return current;
+    }, row);
+    // 层级表格中时，只要有任意数据匹配上条件，就视为整行匹配
+    if (Array.isArray(dataList)) {
+      const flag = dataList.find((c) => validateFn(operator, c, value));
+      return !!flag;
+    }
+  }
+  let flag = validateFn(operator, rowData, value);
+  if (curCol.colKey === code) {
+    // 当前列时，用翻译值进行判断
+    flag = flag || validateFn(operator, curCol.rowText, value);
+  }
+  return flag;
+};
 
-const collectCondition: (data: string | any[], record: any) => any = (
+const collectCondition: (data: string | any[], record: any, curCol: {
+  colKey?: string
+  rowText?: string,
+}) => any = (
   data: string | any[],
   record: any,
+  curCol,
 ) => {
   if (!data || !data?.length) {
     return true;
@@ -80,14 +111,14 @@ const collectCondition: (data: string | any[], record: any) => any = (
     const conditon = data[i];
     if (conditon.operator) {
       if (data[i - 1]?.relation === RELATION_OR) {
-        valid = valid || validateCondition(conditon, record);
+        valid = valid || validateCondition(conditon, record, curCol);
       } else {
-        valid = valid && validateCondition(conditon, record);
+        valid = valid && validateCondition(conditon, record, curCol);
       }
     } else if (data[i - 1]?.relation === RELATION_OR) {
-      valid = valid || collectCondition(conditon.items, record);
+      valid = valid || collectCondition(conditon.items, record, curCol);
     } else {
-      valid = valid && collectCondition(conditon.items, record);
+      valid = valid && collectCondition(conditon.items, record, curCol);
     }
   }
   return valid;
@@ -108,20 +139,51 @@ const MyBodyCell: React.FC<MyBodyCellProps> = (props) => {
     engineApis,
     onTableCellClick,
     index,
+    type,
+    defaultColWidthMap,
+    originRow,
+    originDataIndex,
+    createCellPropsFn,
+    originIndex,
+    size,
+    isBordered,
+    colKey,
     ...restProps
   } = props;
 
+  const { rowText } = props;
+
 
+  const { loading } = useTableContext();
   const commonCellOnClick = () => {
     if (onTableCellClick) {
-      onTableCellClick(record, _.get(record, dataIndex), dataIndex, index);
+      onTableCellClick(originRow || record, _.get(record, dataIndex), String(originDataIndex || dataIndex),
+        originIndex !== undefined ? originIndex : index);
     }
   };
 
+  // 层级表格单元格
+  if (Array.isArray(originDataIndex || dataIndex) && type === LEVEL_COL_KEY) {
+    return <LevelTdCell {...props} />;
+  }
+
+  // 加载中状态统一展示骨架屏
+  if (loading) {
+    return (
+      <td {...restProps}>
+        <Skeleton.Input active size="small" />
+      </td>);
+  }
+
+
   // 编辑单元格和扩展单元格忽略样式
   if (editable || isExtend) {
     if (editable) {
-      return <td {...restProps}><div className="ued-table-edit-cell">{children}</div></td>;
+      return (
+        <td {...restProps}>
+          <div className="ued-table-edit-cell">{children}</div>
+        </td>
+      );
     }
     return <td {...restProps}>{children}</td>;
   }
@@ -171,8 +233,15 @@ const MyBodyCell: React.FC<MyBodyCellProps> = (props) => {
          * 2、运行态时，单元格背景样式配置符合条件才生效
          */
         if (
-          (SET_ROW_SPECIAL_CELL_BACKGROUND_COLOR === formatStyle ? `${dataIndex}` === `${field}` : true) &&
-          (mode === BODY_CELL_MODE_ED && !__isExeCondition__ ? true : collectCondition(conditions, record))
+          (SET_ROW_SPECIAL_CELL_BACKGROUND_COLOR === formatStyle
+            ? `${originDataIndex || dataIndex}` === `${field}`
+            : true) &&
+          (mode === BODY_CELL_MODE_ED && !__isExeCondition__
+            ? true
+            : collectCondition(conditions, originRow || record, {
+              colKey: String(dataIndex),
+              rowText,
+            }))
         ) {
           bgColorStyle = {
             formatStyle,
@@ -184,7 +253,10 @@ const MyBodyCell: React.FC<MyBodyCellProps> = (props) => {
            * 兼容存量：
            * 如果前面的内容样式不存在 contentType，说明是旧版配置，此时，需要让前面的内容样式配置置空，不能同时生效
            */
-          if (contentStyle && typeof (contentStyle as ContentStyle)?.contentType === 'undefined') {
+          if (
+            contentStyle &&
+            typeof (contentStyle as ContentStyle)?.contentType === 'undefined'
+          ) {
             contentStyle = undefined;
           }
         }
@@ -206,8 +278,15 @@ const MyBodyCell: React.FC<MyBodyCellProps> = (props) => {
          * 2、运行态时，单元格内容样式配置符合条件才生效
          */
         if (
-          (SET_ROW_SPECIAL_CELL_CONTENT_STYLE === formatStyle ? `${dataIndex}` === `${field}` : true) &&
-          (mode === BODY_CELL_MODE_ED && !__isExeCondition__ ? true : collectCondition(conditions, record))
+          (SET_ROW_SPECIAL_CELL_CONTENT_STYLE === formatStyle
+            ? `${originDataIndex || dataIndex}` === `${field}`
+            : true) &&
+          (mode === BODY_CELL_MODE_ED && !__isExeCondition__
+            ? true
+            : collectCondition(conditions, originRow || record, {
+              colKey: String(dataIndex),
+              rowText,
+            }))
         ) {
           contentStyle = {
             formatStyle,
@@ -252,30 +331,30 @@ const MyBodyCell: React.FC<MyBodyCellProps> = (props) => {
       }
     }
 
-
     return (
       <FormatCell
         bgColorStyle={bgColorStyle}
         contentStyle={contentStyle}
         tdProps={{
           ...restProps,
-          row: record,
+          dataIndex: originDataIndex || dataIndex,
+          index: originIndex || index,
+          row: originRow || record,
         }}
         funcExpExecute={funcExpExecute}
         engineApis={engineApis}
         commonCellClick={commonCellOnClick}
         mode={mode}
         width={width}
-      >{children}
+      >
+        {children}
       </FormatCell>
     );
   }
 
   return (
-    <td
-      {...restProps}
-      onClick={commonCellOnClick}
-    >{children}
+    <td {...restProps} onClick={commonCellOnClick}>
+      {children}
     </td>
   );
 };

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

@@ -0,0 +1,33 @@
+import React, { useRef } from 'react';
+import { useClickAway } from 'ahooks';
+
+const MyBodyRow: React.FC<{
+    clickActive?: boolean;
+    onClick?: Function;
+}> = (props) => {
+  const { children, onClick, clickActive, ...restProps } = props || {};
+  const trRef = useRef<HTMLTableRowElement>(null);
+
+  useClickAway(() => {
+    if (clickActive) {
+      trRef.current?.classList.remove('ued-table-click-active');
+    }
+  }, trRef);
+  return (
+    <tr
+      ref={trRef}
+      {...restProps}
+      onClick={(e) => {
+        if (onClick) {
+          onClick(e);
+        }
+        if (clickActive) {
+          trRef.current?.classList.add('ued-table-click-active');
+        }
+      }}
+    >
+      {children}
+    </tr>);
+};
+
+export default MyBodyRow;

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

@@ -37,7 +37,7 @@ export interface MyEditComponent {
 }
 
 type LimitRangeType = '' | 'no' | 'afterToday' | 'beforeToday' | 'period' | 'custom';
-const supportEditComponents = ['Select', 'Radio', 'TimePicker', 'DatePicker', 'Switch', 'InputNumber', 'TextArea', 'Input', 'SuperSelect', 'ModalSelect'];
+const supportEditComponents = ['Select', 'MultipleSelect', 'Radio', 'TimePicker', 'DatePicker', 'Switch', 'InputNumber', 'TextArea', 'Input', 'SuperSelect', 'ModalSelect'];
 
 const EditComponent: React.FC<MyEditComponent> = (props) => {
   const {
@@ -117,6 +117,7 @@ const EditComponent: React.FC<MyEditComponent> = (props) => {
       case 'Input':
       case 'SuperSelect':
       case 'ModalSelect':
+      case 'MultipleSelect':
         return initValue;
       case 'TimePicker': {
         const value = initValue ? moment(initValue, format || 'YYYY-MM-DD HH:mm:ss') : null;
@@ -268,6 +269,7 @@ const EditComponent: React.FC<MyEditComponent> = (props) => {
     const commonProps: any = isFormItem ? {} : { value: tempInputValue ?? initialValue, className: EDIT_COMPONENT_STOP_PROPAGATION_CLS };
     switch (edittype) {
       case 'Select':
+      case 'MultipleSelect':
         // eslint-disable-next-line no-case-declarations
         let sltoptions = selectoption.options || [];
         if (Array.isArray(selectoption.valName)) {
@@ -280,6 +282,7 @@ const EditComponent: React.FC<MyEditComponent> = (props) => {
           // <WrapperSelect>
           <Select
             // style={{ minWidth: '100px' }}
+            mode={edittype === 'MultipleSelect' ? 'multiple' : undefined}
             {...commonProps}
             disabled={disabled}
             onChange={(v: any) => {

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

@@ -1,28 +1,91 @@
 import classNames from 'classnames';
-import React from 'react';
+import React, { useMemo, CSSProperties } from 'react';
+import { DOWNLOAD_FILE } from '../../constant';
 
 export interface HyperlinkProps {
-  content?: any;
+  data?: any;
   onClick: any;
+  controllLineStyle?: CSSProperties | null;
+  handleCellContent: (obj: any) => any;
+  getFileName: (obj: any) => string;
+  clickType?: string;
 }
 
 const hyperlinkClassName = 'ued-table-cell-hyperlink';
 
 const Hyperlink: React.FC<HyperlinkProps> = (props) => {
   const {
-    content,
     onClick,
+    data,
+    handleCellContent,
+    getFileName,
+    controllLineStyle,
+    clickType,
   } = props;
 
+  const getFileNameFunc = (c: any) => {
+    const fileName = getFileName(c);
+    return Object.prototype.toString.call(fileName) === '[object Object]' ? '' : fileName;
+  };
+
+  const doloadFileDatas = useMemo(() => {
+    let linksData = data || [];
+    try {
+      if (typeof data === 'string') {
+        linksData = JSON.parse(data);
+      }
+    } catch {
+      linksData = [data];
+    }
+    if (!Array.isArray(linksData) && linksData) {
+      linksData = [linksData];
+    }
+    return linksData;
+  }, [data]);
+
+  if (clickType !== DOWNLOAD_FILE) {
+    return (
+      <span className={`${hyperlinkClassName}-wrap`}>
+        <span
+          className={classNames(
+            hyperlinkClassName,
+            { [`${hyperlinkClassName}-click`]: !!onClick }
+          )}
+          onClick={(e) => {
+            e.stopPropagation();
+            onClick(data);
+          }}
+        >
+          <span style={controllLineStyle || {}} className={controllLineStyle ? 'ued-control-line-number' : ''}>
+            {handleCellContent(data)}
+          </span>
+        </span>
+      </span>
+    );
+  }
+
   return (
-    <span
-      className={classNames(
-        hyperlinkClassName,
-        { [`${hyperlinkClassName}-click`]: !!onClick }
-      )}
-      onClick={onClick}
-    >
-      {content}
+    <span className={`${hyperlinkClassName}-wrap`} title="">
+      {doloadFileDatas.map((c: any, i: number) => (
+        <span
+          key={i}
+          className={classNames(
+            hyperlinkClassName,
+            {
+              [`${hyperlinkClassName}-click`]: !!onClick,
+            }
+          )}
+          onClick={(e) => {
+            e.stopPropagation();
+            onClick(c);
+          }}
+          title={getFileNameFunc(c)}
+        >
+          <span style={controllLineStyle || {}} className={controllLineStyle ? 'ued-control-line-number' : ''}>
+            {handleCellContent(c)}
+          </span>
+        </span>
+      ))}
     </span>
   );
 };

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

@@ -5,10 +5,9 @@ import CommIcon from '../../../Icon';
 import { BODY_CELL_MODE_ED } from '../../constant';
 
 export interface PureFadeColorTagProps {
-  row: any;
+  data: any;
   imgMaxNum?: number;
   imgSize?: number;
-  field?: string;
   engineApis?: any;
   mode?: string;
   width?: number;
@@ -20,8 +19,7 @@ const thumbnailClassName = 'ued-table-cell-thumbnail';
 
 const Thumbnail: React.FC<PureFadeColorTagProps> = (props) => {
   const {
-    row,
-    field,
+    data,
     imgSize: defaultImgSize,
     imgMaxNum,
     engineApis,
@@ -48,27 +46,29 @@ const Thumbnail: React.FC<PureFadeColorTagProps> = (props) => {
     if (!Array.isArray(imgsData) && imgsData) {
       imgsData = [imgsData];
     }
-    imgsData = await Promise.all(imgsData?.map?.(async (img: any) => {
-      let src = img.url || img.data;
-      if (img.fileId) {
-        src = engineApis?.getAppFileUrlById(img.fileId);
-      } else if (img.url) {
-        // 对回填url地址重新进行加密加签处理
-        src = engineApis?.securityWithUrl(src);
-      }
-      return {
-        ...img,
-        downloadUrl: src,
-        src: src || IconPlaceholder,
-      };
-    }));
+    if (imgsData) {
+      imgsData = await Promise.all(imgsData?.map?.(async (img: any) => {
+        let src = img.url || img.data;
+        if (img.fileId) {
+          src = engineApis?.getAppFileUrlById(img.fileId);
+        } else if (img.url) {
+          // 对回填url地址重新进行加密加签处理
+          src = engineApis?.securityWithUrl(src);
+        }
+        return {
+          ...img,
+          downloadUrl: src,
+          src: src || IconPlaceholder,
+        };
+      }));
+    }
 
     setImgs(imgsData);
   };
 
   useEffect(() => {
-    getImgs(row?.[field || '']);
-  }, [row?.[field || '']]);
+    getImgs(data);
+  }, [data]);
 
   useEffect(() => {
     const defaultImgMaxNum = imgMaxNum ?? imgs?.length ?? 0; // 没设置最大展示数量时展示全部