@lingxiteam/ebe-utils 0.1.17 → 0.1.18

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

@@ -0,0 +1,436 @@
+import { CloseOutlined, SaveOutlined } from '@ant-design/icons';
+import { Icon as LegacyIcon } from '@lingxiteam/icons';
+import { Button, Divider, Popconfirm, Popover, Tooltip } from 'antd';
+import React, { Fragment, useMemo, useRef, useState } from 'react';
+import CommIcon from '../../Icon';
+import type { OperationCellProps } from '../types/OperationCell';
+import SingleBtn from './SingleBtn';
+
+// 操作列
+const OperationCell = (props: OperationCellProps) => {
+  const {
+    row,
+    currentRowKey,
+    isNowEditRow,
+    extendNum,
+    engineApis,
+    getRealIndexById,
+    getRealRowActions,
+    getRealExtendRowActions,
+    onRowDeleteClick,
+    onRowSaveClick,
+    onRowDetailClick,
+    onRowEditClick,
+    getLocale,
+    onRowCancelClick,
+    actionsMap,
+    fixedAction,
+    isSmallPopover,
+    tableRef,
+  } = props;
+  const [morePopVisible, setMorePopVisible] = useState<boolean>(false); // 更多操作按钮气泡卡片显隐
+  const timerRef = useRef<any>();
+
+  const { showBuiltInBtns, showExtendBtns, moreBuiltInBtns, moreExtendBtns } =
+    useMemo(() => {
+      // 过滤掉隐藏的按钮，得到真正的内置的默认按钮数据(详情、编辑、删除)
+      const builtInBtns = getRealRowActions(
+        row,
+        getRealIndexById(row[currentRowKey]),
+      );
+      // 过滤掉隐藏的扩展按钮，得到真正的扩展按钮数据
+      const extendBtns = getRealExtendRowActions(
+        row,
+        getRealIndexById(row[currentRowKey]),
+      );
+
+      const allBtns = [...builtInBtns, ...extendBtns]?.filter(
+        (btn) => btn?.checked !== false,
+      ); // 只展示选中的按钮;
+
+      let showBtns: any[] = [];
+      let moreBtns: any[] = [];
+
+      // 当按钮数量超过 设置最大展示的数量两个时，超过的两个及以上部分放到更多中
+      const allBtnsLen = allBtns?.length;
+      if (allBtnsLen > extendNum) {
+        showBtns = allBtns.slice(0, extendNum - 1);
+        moreBtns = allBtns.slice(extendNum - 1, allBtnsLen);
+      } else {
+        showBtns = allBtns;
+      }
+
+      const showBuiltInBtns = showBtns.filter((b) => b.btnType === 'builtIn');
+      const showExtendBtns = showBtns.filter((b) => b.btnType === 'extend');
+      const moreBuiltInBtns = moreBtns.filter((b) => b.btnType === 'builtIn');
+      const moreExtendBtns = moreBtns.filter((b) => b.btnType === 'extend');
+
+      return {
+        showBuiltInBtns,
+        showExtendBtns,
+        moreBuiltInBtns,
+        moreExtendBtns,
+      };
+    }, [
+      row,
+      currentRowKey,
+      extendNum,
+      getRealRowActions,
+      getRealExtendRowActions,
+      getRealIndexById,
+    ]);
+
+  const renderBtnIcon = (c: any) => {
+    const { icon, iconPos } = c;
+    let iconClassName = '';
+    if (iconPos) {
+      iconClassName = iconPos === 'left' ? 'actIcon-left' : 'actIcon-right';
+    }
+    const BtnIcon = icon ? (
+      <CommIcon
+        getEngineApis={() => (engineApis || {}) as any}
+        $$componentItem={props?.$$componentItem}
+        className={iconClassName}
+        icon={icon}
+        engineApis={engineApis}
+      />
+    ) : undefined;
+    return BtnIcon;
+  };
+
+  // 操作栏单个内置按钮
+  const renderBuiltInSingleBtn = (
+    c: any,
+    row: any,
+    rowIndex: number | null,
+    idx: number,
+    defaultBtnList: any,
+    isPopover = false,
+    showExtendBtns?: any[],
+    moreBuiltInBtns?: any[],
+    moreExtendBtns?: any[],
+  ) => {
+    const BtnIcon = renderBtnIcon(c);
+
+    const popconfirmPlacement =
+      moreBuiltInBtns?.length ||
+      moreExtendBtns?.length ||
+      showExtendBtns?.length
+        ? 'top'
+        : 'topRight';
+
+    const onBtnClick = (e: any) => {
+      e.stopPropagation();
+      if (
+        (typeof c === 'string' ? c === 'detail' : c.type === 'detail') &&
+        typeof onRowDetailClick === 'function'
+      ) {
+        onRowDetailClick(row, rowIndex);
+      } else if (
+        (typeof c === 'string' ? c === 'edit' : c.type === 'edit') &&
+        typeof onRowEditClick === 'function'
+      ) {
+        onRowEditClick(row, rowIndex);
+      }
+    };
+
+    const onDeleteClick = (e: any) => {
+      e.stopPropagation();
+      if (typeof onRowDeleteClick === 'function') {
+        onRowDeleteClick(row, rowIndex);
+      }
+    };
+
+    return (
+      <SingleBtn
+        getLocale={getLocale}
+        actionsMap={actionsMap}
+        setMorePopVisible={setMorePopVisible}
+        BtnIcon={BtnIcon}
+        c={c}
+        idx={idx}
+        defaultBtnList={defaultBtnList}
+        isPopover={isPopover}
+        popconfirmPlacement={popconfirmPlacement}
+        onBtnClick={onBtnClick}
+        onDeleteClick={onDeleteClick}
+      />
+    );
+  };
+
+  // 操作栏扩展按钮
+  const renderExtendBtns = (
+    btnList: any,
+    isPopover = false,
+    row: any,
+    index: number,
+    buttonStyle?: React.CSSProperties,
+  ) => {
+    return btnList.map((c: any, i: number) => {
+      if (c.type) {
+        return renderBuiltInSingleBtn(
+          c,
+          row,
+          index,
+          i,
+          btnList,
+          isPopover,
+          btnList?.slice(i),
+        );
+      }
+      const { iconPos, id, isIcon, onClick, visible: buttonVisible = true } = c;
+
+      const BtnIcon = renderBtnIcon(c);
+
+      if (!buttonVisible) {
+        return null;
+      }
+
+      return isPopover ? (
+        <div>
+          <Tooltip title={c.title} visible={!!isIcon && undefined}>
+            <Button
+              type="link"
+              className="ued-table-actions-antBtn"
+              disabled={c.disabled}
+              key={id}
+              onClick={(e) => {
+                e.stopPropagation();
+                if (typeof onClick === 'function') {
+                  onClick(currentRowKey ? row[currentRowKey] : row, row, index);
+                }
+                setMorePopVisible(false);
+              }}
+            >
+              <div className="ued-table-actions-extendBtn" style={buttonStyle}>
+                {iconPos && iconPos === 'left' && BtnIcon}
+                {!isIcon && c.title}
+                {iconPos && iconPos === 'right' && BtnIcon}
+              </div>
+            </Button>
+          </Tooltip>
+        </div>
+      ) : (
+        <Fragment key={id}>
+          <Tooltip title={c.title} visible={!!isIcon && undefined}>
+            <Button
+              type="link"
+              className="ued-table-actions-antBtn"
+              disabled={c.disabled}
+              key={id}
+              onClick={(e) => {
+                e.stopPropagation();
+                if (typeof onClick === 'function') {
+                  onClick(currentRowKey ? row[currentRowKey] : row, row, index);
+                }
+              }}
+            >
+              <div className="ued-table-actions-extendBtn">
+                {iconPos && iconPos === 'left' && BtnIcon}
+                {!isIcon && c.title}
+                {iconPos && iconPos === 'right' && BtnIcon}
+              </div>
+            </Button>
+          </Tooltip>
+          {i !== btnList.length - 1 && <Divider type="vertical" />}
+        </Fragment>
+      );
+    });
+  };
+
+  // 操作栏更多按钮
+  const renderExtendMoreBtns = (
+    showBuiltInBtns: any[],
+    showExtendBtns: any[],
+    moreBuiltInBtns: any[],
+    moreExtendBtns: any[],
+    row: any,
+    index: number,
+  ) => {
+    return (
+      <>
+        {
+          // 扩展
+          showExtendBtns?.length > 0 ? (
+            <>
+              {!!showBuiltInBtns?.length && <Divider type="vertical" />}
+              {renderExtendBtns(showExtendBtns, false, row, index)}
+            </>
+          ) : null
+        }
+        {
+          // 更多
+          moreBuiltInBtns?.length + moreExtendBtns?.length > 0 && (
+            <>
+              {/* TODO:  是什么？ showBuiltInBtns[showBuiltInBtns.length - 1]?.visible !== false */}
+              {(!!showBuiltInBtns?.length || !!showExtendBtns?.length) && (
+                <Divider type="vertical" />
+              )}
+              <Popover
+                overlayClassName="ued-table-more-pop"
+                content={
+                  <div
+                    style={{
+                      maxHeight: '300px',
+                      overflow: 'auto',
+                      padding: isSmallPopover ? '5px 5px' : '12px 16px',
+                    }}
+                    onClick={(e) => e.stopPropagation()}
+                  >
+                    {moreBuiltInBtns?.length
+                      ? moreBuiltInBtns.map((child: any, idx: number) => {
+                          return renderBuiltInSingleBtn(
+                            child,
+                            row,
+                            index,
+                            idx,
+                            showBuiltInBtns,
+                            true,
+                          );
+                        })
+                      : null}
+                    {renderExtendBtns(
+                      moreExtendBtns,
+                      true,
+                      row,
+                      index,
+                      isSmallPopover ? { fontSize: '12px' } : {},
+                    )}
+                  </div>
+                }
+                trigger="click"
+                placement="topRight"
+                open={morePopVisible}
+                // eslint-disable-next-line max-len
+                getPopupContainer={
+                  isSmallPopover
+                    ? () =>
+                        document.getElementById('lcdpApp-root') || document.body
+                    : (triggerNode: HTMLElement) =>
+                        triggerNode?.parentNode as HTMLElement
+                }
+                onOpenChange={(vis: boolean) => {
+                  setMorePopVisible(vis);
+                  if (fixedAction && tableRef?.current) {
+                    const fixedActionEle =
+                      tableRef.current?.querySelectorAll(
+                        '.ued-table-actions',
+                      )?.[index]?.parentNode;
+                    // 操作列固定时 此时fixedActionEle默认antd样式为 position: sticky;z-index: 2
+                    // 由于气泡卡片挂在fixedActionEle里面导致被后面的列遮盖
+                    if (fixedActionEle) {
+                      if (timerRef.current) {
+                        clearTimeout(timerRef.current);
+                      }
+                      if (!vis) {
+                        // 防止卡片部分被遮盖再隐藏
+                        timerRef.current = setTimeout(() => {
+                          fixedActionEle.style.zIndex = 2;
+                          timerRef.current = null;
+                        }, 200);
+                        return;
+                      }
+                      fixedActionEle.style.zIndex = 3;
+                    }
+                  }
+                }}
+              >
+                <Button
+                  type="link"
+                  className="ued-table-actions-antBtn"
+                  key="more"
+                  onClick={(e) => e.stopPropagation()}
+                >
+                  <div className="ued-table-actions-extendBtn">
+                    {getLocale?.('more')}
+                    <LegacyIcon className="actIcon-left" type="down" />
+                  </div>
+                </Button>
+              </Popover>
+            </>
+          )
+        }
+      </>
+    );
+  };
+
+  return (
+    <div className="ued-table-actions">
+      {
+        // 行内编辑部分
+        isNowEditRow ? (
+          <>
+            <div
+              className="ued-table-actions-extendBtn"
+              onClick={(e) => {
+                e.stopPropagation();
+                if (typeof onRowSaveClick === 'function') {
+                  onRowSaveClick(
+                    row,
+                    getRealIndexById(row[currentRowKey]),
+                    false,
+                  );
+                }
+              }}
+            >
+              <SaveOutlined rev="" className="actIcon-left" />
+              {getLocale('save')}
+            </div>
+            <Divider type="vertical" />
+            <Popconfirm
+              title={getLocale('cancelConfirm')}
+              placement="topRight"
+              overlayClassName="ued-table-actions-overlay"
+              onConfirm={(e: any) => {
+                e.stopPropagation();
+                if (typeof onRowCancelClick === 'function') {
+                  onRowCancelClick(row);
+                }
+              }}
+              onCancel={(e) => {
+                e?.preventDefault();
+                e?.stopPropagation();
+              }}
+            >
+              <div
+                className="ued-table-actions-extendBtn"
+                onClick={(e) => {
+                  e.stopPropagation();
+                }}
+              >
+                <CloseOutlined rev="" className="actIcon-left" />
+                {getLocale('cancel')}
+              </div>
+            </Popconfirm>
+          </>
+        ) : (
+          <>
+            {showBuiltInBtns.map((c: any, idx: number) => {
+              return renderBuiltInSingleBtn(
+                c,
+                row,
+                getRealIndexById(row[currentRowKey]),
+                idx,
+                showBuiltInBtns,
+                false,
+                showExtendBtns,
+                moreBuiltInBtns,
+                moreExtendBtns,
+              );
+            })}
+            {renderExtendMoreBtns(
+              showBuiltInBtns,
+              showExtendBtns,
+              moreBuiltInBtns,
+              moreExtendBtns,
+              row,
+              getRealIndexById(row[currentRowKey]),
+            )}
+          </>
+        )
+      }
+    </div>
+  );
+};
+
+export default OperationCell;

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

@@ -84,18 +84,30 @@ const TableHead: React.FC<MyTableHeadProps> = (props: any) => {
     customTitle,
     customStyle,
     iconFile: newIconFile,
+    // 默认列
+    defaultColumn,
   } = !showCustom || typeof showCustom === 'boolean' ? ({} as any) : showCustom; // 兼容旧数据,旧数据是true、false、undefined
 
   const [checkedKeys, checkedMap] = useMemo(() => {
     const map: any = {};
+    // 缓存没有自定义列时
     if (selectedCols === undefined) {
-      return [
-        columns?.map((c: any) => {
-          map[c.dataIndex] = c;
-          return c.dataIndex;
-        }),
-        map,
-      ];
+      const defaultColumnSet = new Set<string>();
+      if (defaultColumn?.length) {
+        defaultColumn.forEach((c: any) => {
+          defaultColumnSet.add(c.key);
+        });
+      }
+      const keys: string[] = [];
+      columns?.forEach((c: any) => {
+        // 如果有默认列，没有缓存列时，按照默认列初始化自定义列内容
+        if (defaultColumn && !defaultColumnSet.has(c.key)) {
+          return;
+        }
+        map[c.dataIndex] = c;
+        keys.push(`${c.dataIndex || ''}`);
+      });
+      return [keys, map];
     }
     return [
       selectedCols.map((c: any) => {
@@ -340,14 +352,14 @@ const TableHead: React.FC<MyTableHeadProps> = (props: any) => {
               let orders: string[] = [...pre];
               // 旧顺序列表为空时，表示是采用原始顺序
               if (pre.length === 0) {
-                orders = columns?.map((c: any) => c.dataIndex) || [];
+                orders = columns?.map((c: any) => `${c.dataIndex}`) || [];
               }
               if (pre.length !== columns?.length) {
                 // 前后顺序列表不一致时，表格列发生变化
                 const extendCols: any[] = [];
                 columns?.forEach((col: any) => {
                   if (!orderMap[col.dataIndex]) {
-                    extendCols.push(col.dataIndex);
+                    extendCols.push(`${col.dataIndex}`);
                   }
                 });
                 orders = orders.filter((o) => orderMap[o]).concat(extendCols);
@@ -369,44 +381,49 @@ const TableHead: React.FC<MyTableHeadProps> = (props: any) => {
           }
         }}
       >
-        {columns?.map((col: any) => (
-          <TreeNode
-            selectable={false}
-            title={
-              <div className="title">
-                <div className="icon">
-                  <IconFont
-                    width={16}
-                    height={16}
-                    iconClass="lcdp-icon-tuozhuai"
-                  />
-                </div>
-                <Checkbox
-                  checked={checkedMap[col.dataIndex] !== undefined}
-                  className="checkbox"
-                  onChange={(e) => {
-                    if (typeof setSelectedCols === 'function') {
-                      setSelectedCols(() => {
-                        if (e.target.checked) {
-                          return [...(checkedKeys || []), col.dataIndex];
+        {columns?.map(
+          (col: { dataIndex: string | string[]; [key: string]: any }) => {
+            const dataIndex = `${col.dataIndex}`;
+            return (
+              <TreeNode
+                selectable={false}
+                title={
+                  <div className="title">
+                    <div className="icon">
+                      <IconFont
+                        width={16}
+                        height={16}
+                        iconClass="lcdp-icon-tuozhuai"
+                      />
+                    </div>
+                    <Checkbox
+                      checked={checkedMap[dataIndex] !== undefined}
+                      className="checkbox"
+                      onChange={(e) => {
+                        if (typeof setSelectedCols === 'function') {
+                          setSelectedCols(() => {
+                            if (e.target.checked) {
+                              return [...(checkedKeys || []), dataIndex];
+                            }
+                            return (checkedKeys || []).filter(
+                              (co: any) => co !== dataIndex,
+                            );
+                          });
                         }
-                        return (checkedKeys || []).filter(
-                          (co: any) => co !== col.dataIndex,
-                        );
-                      });
-                    }
-                  }}
-                />
-                {checkedMap[col.dataIndex] ? (
-                  <a>{col.originTitle}</a>
-                ) : (
-                  col.originTitle
-                )}
-              </div>
-            }
-            key={col.dataIndex}
-          />
-        ))}
+                      }}
+                    />
+                    {checkedMap[dataIndex] ? (
+                      <a>{col.originTitle}</a>
+                    ) : (
+                      col.originTitle
+                    )}
+                  </div>
+                }
+                key={dataIndex}
+              />
+            );
+          },
+        )}
       </Tree>
     );
   };
@@ -468,7 +485,7 @@ const TableHead: React.FC<MyTableHeadProps> = (props: any) => {
                 <a
                   className="extend"
                   onClick={() => {
-                    setSelectedCols(columns?.map((c: any) => c.dataIndex));
+                    setSelectedCols(columns?.map((c: any) => `${c.dataIndex}`));
                     setColOrder([]);
                   }}
                 >

package/lib/pcpublic/src/components/pcfactory/src/Table/constant.ts

@@ -16,6 +16,7 @@ export const GHOST_TAG = 'ghostTag';
 export const FADE_COLOUR_TAG = 'fadeColourTag';
 export const PURE_COLOUR_TAG = 'pureColourTag';
 export const HYPER_LINK = 'hyperlink';
+export const THUMBNAIL = 'thumbnail';
 
 export const ROW_CELL_CONTENT_STYLE_MAP = {
   [PURE_COLOUR_FILL]: '纯色填充',

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

@@ -1,6 +1,10 @@
 import { EngineApisType } from '@lingxiteam/types';
 import { useImperativeHandle, useState } from 'react';
-import { createEmptyRow, EMPTY_ROW_TEMP_KEY_ATTR } from '../utils';
+import {
+  createEmptyRow,
+  deleteTempRowProperties,
+  EMPTY_ROW_TEMP_KEY_ATTR,
+} from '../utils';
 
 interface UseCommonCMDAction {
   ref: any;
@@ -63,6 +67,7 @@ const useCMDAction = (props: UseCMDActionPropsType) => {
     onRowSaveClick,
     loadPrint,
     engineApis,
+    expandTableData,
   } = props;
 
   // 表格编辑格式为下拉框时，绑定的服务对应的数据
@@ -149,8 +154,16 @@ const useCMDAction = (props: UseCMDActionPropsType) => {
       if (tableUpdateInnerDataSource) {
         const newRowKey = newRowData[EMPTY_ROW_TEMP_KEY_ATTR];
         newRowData[currentRowKey] = newRowKey;
-        delete newRowData[EMPTY_ROW_TEMP_KEY_ATTR];
-        setInnerDataSource([newRowData, ...innerDataSource]);
+        const newDataSource = innerDataSource.map((c) => {
+          /**
+           * 移除空白行的临时属性
+           * 最后一条空白行，不允许自动移除临时属性（交由保存/取消逻辑手动移除）
+           */
+          delete c[EMPTY_ROW_TEMP_KEY_ATTR];
+          deleteTempRowProperties(c);
+          return c;
+        });
+        setInnerDataSource([newRowData, ...newDataSource]);
         // 是否开启行编辑
         if (inlineeditnow) {
           // 设置当前行为编辑状态
@@ -268,6 +281,7 @@ const useCMDAction = (props: UseCMDActionPropsType) => {
       });
     },
     loadPrint,
+    expandTableData,
   }));
 
   return {