@lingxiteam/ebe-utils 0.1.17 → 0.1.18

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

@@ -1,3 +1,4 @@
+import _ from 'lodash';
 import React from 'react';
 import {
   BODY_CELL_MODE_ED,
@@ -102,17 +103,19 @@ const MyBodyCell: React.FC<MyBodyCellProps> = (props) => {
     dataIndex,
     row: record,
     children,
+    width,
     colorFormatInfo = [],
     isCustomRendering,
     funcExpExecute,
     engineApis,
     onTableCellClick,
+    index,
     ...restProps
   } = props;
 
   const commonCellOnClick = () => {
     if (onTableCellClick) {
-      onTableCellClick(record, record?.[dataIndex], dataIndex);
+      onTableCellClick(record, _.get(record, dataIndex), dataIndex, index);
     }
   };
 
@@ -148,6 +151,10 @@ const MyBodyCell: React.FC<MyBodyCellProps> = (props) => {
         // 新窗口预览时，窗口的宽高信息
         modalWidth,
         modalHeight,
+        // 缩略图
+        imgMaxNum,
+        imgSize,
+        __isExeCondition__, // 判断配置态时是否执行判断条件
       } = item;
 
       // 背景相关
@@ -163,9 +170,9 @@ const MyBodyCell: React.FC<MyBodyCellProps> = (props) => {
          */
         if (
           (SET_ROW_SPECIAL_CELL_BACKGROUND_COLOR === formatStyle
-            ? dataIndex === field
+            ? `${dataIndex}` === `${field}`
             : true) &&
-          (mode === BODY_CELL_MODE_ED
+          (mode === BODY_CELL_MODE_ED && !__isExeCondition__
             ? true
             : collectCondition(conditions, record))
         ) {
@@ -205,9 +212,9 @@ const MyBodyCell: React.FC<MyBodyCellProps> = (props) => {
          */
         if (
           (SET_ROW_SPECIAL_CELL_CONTENT_STYLE === formatStyle
-            ? dataIndex === field
+            ? `${dataIndex}` === `${field}`
             : true) &&
-          (mode === BODY_CELL_MODE_ED
+          (mode === BODY_CELL_MODE_ED && !__isExeCondition__
             ? true
             : collectCondition(conditions, record))
         ) {
@@ -228,6 +235,9 @@ const MyBodyCell: React.FC<MyBodyCellProps> = (props) => {
             downloadUrl,
             modalWidth,
             modalHeight,
+            imgMaxNum,
+            imgSize,
+            field,
           };
 
           /**
@@ -262,6 +272,8 @@ const MyBodyCell: React.FC<MyBodyCellProps> = (props) => {
         funcExpExecute={funcExpExecute}
         engineApis={engineApis}
         commonCellClick={commonCellOnClick}
+        mode={mode}
+        width={width}
       >
         {children}
       </FormatCell>

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

@@ -7,7 +7,7 @@ import {
   Select,
   Switch,
 } from 'antd';
-import { cloneDeep } from 'lodash';
+import _, { cloneDeep } from 'lodash';
 import moment, { Moment } from 'moment';
 import React, { useCallback, useMemo, useState } from 'react';
 import ModalSelect from '../../ModalSelect';
@@ -125,7 +125,7 @@ const EditComponent: React.FC<MyEditComponent> = (props) => {
     return res;
   }, [startTime, endTime, format, timeMode]);
 
-  const initValue = rowData[dataIndex];
+  const initValue = _.get(rowData, dataIndex);
 
   const initialValue = useMemo(() => {
     switch (edittype) {
@@ -468,7 +468,14 @@ const EditComponent: React.FC<MyEditComponent> = (props) => {
           />
           // </WrapperInput>
         );
-      case 'SuperSelect':
+      case 'SuperSelect': {
+        let showLabel = rowData[`${c.dataIndex}_introduce`];
+        if (Array.isArray(c.dataIndex)) {
+          // 兼容层级字段情况
+          const pre = c.dataIndex.slice(0, c.dataIndex.length - 1);
+          const last = c.dataIndex[c.dataIndex.length - 1];
+          showLabel = _.get(rowData, [...pre, `${last}_introduce`]);
+        }
         return (
           <ComSelect
             {...c}
@@ -481,7 +488,7 @@ const EditComponent: React.FC<MyEditComponent> = (props) => {
             selectWidth="auto"
             ignoreValueType
             labelInValue
-            showLabel={rowData[`${c.dataIndex}_introduce`]}
+            showLabel={showLabel}
             label={c.title}
             value={initialValue}
             engineApis={engineApis}
@@ -496,6 +503,7 @@ const EditComponent: React.FC<MyEditComponent> = (props) => {
             }}
           />
         );
+      }
       case 'ModalSelect':
         return (
           <ModalSelect
@@ -532,9 +540,6 @@ const EditComponent: React.FC<MyEditComponent> = (props) => {
   };
 
   if (supportEditComponents.includes(edittype) && validateRules) {
-    // const fieldName = `${compId}_${currentRowKey}_${
-    //   rowData[currentRowKey] || rowId
-    // }_${dataIndex}`;
     const fieldName = getFormItemFieldName({
       compId,
       currentRowKey,

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

@@ -0,0 +1,284 @@
+import { Popover } from 'antd';
+import React, { useEffect, useMemo, useState } from 'react';
+import CommIcon from '../../../Icon';
+import IconPlaceholder from '../../assets/placeholder.png';
+import { BODY_CELL_MODE_ED } from '../../constant';
+
+export interface PureFadeColorTagProps {
+  row: any;
+  imgMaxNum?: number;
+  imgSize?: number;
+  field?: string;
+  engineApis?: any;
+  mode?: string;
+  width?: number;
+  appId: string;
+  pageId: string;
+}
+
+const thumbnailClassName = 'ued-table-cell-thumbnail';
+
+const Thumbnail: React.FC<PureFadeColorTagProps> = (props) => {
+  const {
+    row,
+    field,
+    imgSize: defaultImgSize,
+    imgMaxNum,
+    engineApis,
+    mode,
+    width, // 列宽度
+    appId,
+    pageId,
+  } = props;
+  const [splitNum, setSplitNum] = useState(0);
+  const [visible, setVisible] = useState(false);
+  const [imgs, setImgs] = useState<any[]>([]);
+
+  const imgSize = useMemo(() => defaultImgSize || 40, [defaultImgSize]);
+
+  const getImgs = async (datas: any) => {
+    let imgsData = datas;
+    try {
+      if (typeof datas === 'string') {
+        imgsData = JSON.parse(datas);
+      }
+    } catch {
+      imgsData = [];
+    }
+    if (!Array.isArray(imgsData) && imgsData) {
+      imgsData = [imgsData];
+    }
+    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 {
+            // 对回填url地址重新进行加密加签处理
+            src = engineApis?.securityWithUrl(src);
+          }
+          return {
+            ...img,
+            downloadUrl: src,
+            src: src || IconPlaceholder,
+          };
+        }),
+      );
+
+      setImgs(imgsData);
+    }
+  };
+
+  useEffect(() => {
+    getImgs(row?.[field || '']);
+  }, [row?.[field || '']]);
+
+  useEffect(() => {
+    const defaultImgMaxNum = imgMaxNum ?? imgs?.length ?? 0; // 没设置最大展示数量时展示全部
+    if (!width || !imgs?.length) {
+      // 比较图片数量 跟 最大展示数
+      setSplitNum(Math.min(imgs?.length || 0, defaultImgMaxNum));
+      return;
+    }
+
+    // 设置列宽时 判断图片数量是否足够展示
+    let restWidth = width;
+    let splitNum = 0;
+
+    for (let i = 0; i < imgs.length; i += 1) {
+      const lastWidth = restWidth;
+      restWidth = restWidth - imgSize - 2;
+      if (restWidth > 0 && splitNum < defaultImgMaxNum) {
+        splitNum = i + 1;
+      } else {
+        restWidth = lastWidth;
+        break;
+      }
+    }
+    if (splitNum < imgs?.length && splitNum > 0 && restWidth < imgSize) {
+      // 剩余宽度不能展示更多按钮
+      splitNum -= 1;
+    }
+    setSplitNum(splitNum);
+  }, [width, imgSize, imgMaxNum, imgs?.length]);
+
+  const download = (file: any) => {
+    const a = document.createElement('a');
+    a.href = file.downloadUrl;
+    a.download = file.fileName || file.name;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+  };
+
+  const onPreview = (fileIndex: number) => {
+    if (typeof engineApis?.BannerModal?.open === 'function') {
+      // 弹窗预览
+      const fileList = imgs?.map?.((file: any) => {
+        const fileId = file?.fileId || file?.url || file?.data || file?.src;
+        return {
+          fileId,
+          showDownLoad: true,
+          downloadClick: () => download(file),
+          file: {
+            fileId,
+          },
+          appId,
+          pageId,
+        };
+      });
+      engineApis.BannerModal.open({
+        fileIndex,
+        fileList,
+        previewIsShowPage: true,
+        viewMode: 'popUp',
+      });
+    }
+  };
+
+  const renderIcon = (
+    file: any,
+    fileIndex: number,
+    isShowDownload: boolean,
+  ) => {
+    return (
+      <div className={`${thumbnailClassName}-icons`}>
+        {isShowDownload && (
+          <CommIcon
+            onClick={() => {
+              if (mode !== BODY_CELL_MODE_ED) {
+                download(file);
+              }
+            }}
+            icon={{
+              type: 'download',
+              theme: 'outlined',
+              isIconFont: false,
+            }}
+            engineApis={engineApis}
+            $$componentItem={null as any}
+            className=""
+            getEngineApis={null as any}
+          />
+        )}
+        <CommIcon
+          onClick={() => {
+            if (mode !== BODY_CELL_MODE_ED) {
+              onPreview(fileIndex);
+              setVisible(false);
+            }
+          }}
+          icon={{
+            type: 'eye',
+            theme: 'outlined',
+            isIconFont: false,
+          }}
+          engineApis={engineApis}
+          $$componentItem={null as any}
+          className=""
+          getEngineApis={null as any}
+        />
+      </div>
+    );
+  };
+
+  // 加载错误时展示默认图片
+  const handleImgError = (index: number) => {
+    setImgs((pre) =>
+      pre.map((v, i) => {
+        if (i === index) {
+          return {
+            ...v,
+            src: IconPlaceholder,
+          };
+        }
+        return v;
+      }),
+    );
+  };
+
+  const renderPopoverContent = () => {
+    return (
+      <div className={`${thumbnailClassName}-popover-content`}>
+        {imgs?.map?.((c: any, index: number) => {
+          return (
+            <div
+              key={index}
+              className={`${thumbnailClassName}-popover-item`}
+              title={c.fileName || c.name}
+            >
+              <div className={`${thumbnailClassName}-popover-imgItem`}>
+                <img
+                  alt={IconPlaceholder}
+                  src={c.src}
+                  onError={() => handleImgError(index)}
+                />
+                {renderIcon(c, index, true)}
+              </div>
+              <span className={`${thumbnailClassName}-popover-imgName`}>
+                {c.fileName || c.name}
+              </span>
+            </div>
+          );
+        })}
+      </div>
+    );
+  };
+
+  const renderImg = () => {
+    const isShowDownload = imgSize >= 28;
+    if (Array.isArray(imgs)) {
+      const showImgs: any[] = imgs.slice(0, splitNum);
+      const resNum = imgs.length - splitNum;
+      const resSize = width && width < imgSize ? width : imgSize;
+      return (
+        <>
+          {showImgs.map((c: any, index: number) => {
+            return (
+              <div
+                key={index}
+                className={`${thumbnailClassName}-item`}
+                style={{ width: imgSize, height: imgSize }}
+                title={c.fileName || c.name}
+              >
+                <img alt="" src={c.src} onError={() => handleImgError(index)} />
+                {renderIcon(c, index, isShowDownload)}
+              </div>
+            );
+          })}
+          {!!resNum && (
+            <Popover
+              placement="leftTop"
+              overlayClassName={`${thumbnailClassName}-popover`}
+              content={renderPopoverContent()}
+              visible={visible}
+              mouseEnterDelay={0.5}
+              onVisibleChange={(v) => {
+                if (mode !== BODY_CELL_MODE_ED) {
+                  setVisible(v);
+                }
+              }}
+            >
+              <div
+                className={`${thumbnailClassName}-moreItem`}
+                style={{ width: resSize, height: resSize }}
+              >
+                +{resNum}
+              </div>
+            </Popover>
+          )}
+        </>
+      );
+    }
+    return null;
+  };
+
+  return (
+    <span className={thumbnailClassName} title="">
+      {renderImg()}
+    </span>
+  );
+};
+
+export default Thumbnail;

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

@@ -8,6 +8,7 @@ import {
   POINT_TAG,
   PURE_COLOUR_FILL,
   PURE_COLOUR_TAG,
+  THUMBNAIL,
 } from '../constant';
 import { useFormatCell } from '../hooks';
 import type { ContentStyle } from '../types/contentStyle';
@@ -16,6 +17,7 @@ import Hyperlink from './Hyperlink';
 import PointTag from './PointTag';
 import PureColourFill from './PureColourFill';
 import PureFadeColourTag from './PureFadeColourTag';
+import Thumbnail from './Thumbnail';
 
 export interface MyFormatCell {
   contentStyle: ContentStyle | undefined | {};
@@ -30,6 +32,8 @@ export interface MyFormatCell {
   funcExpExecute?: FuncExpExeCuteType;
   engineApis: any;
   commonCellClick?: () => void;
+  mode?: string;
+  width?: number;
 }
 
 export interface CellContentProps {
@@ -43,6 +47,10 @@ export interface CellContentProps {
   contentStyle: ContentStyle;
   funcExpExecute?: FuncExpExeCuteType;
   controllLineStyle?: CSSProperties | null;
+  mode?: string;
+  width?: number;
+  rowText?: any;
+  $$componentItemId: string;
 }
 
 const CellContent = (props: CellContentProps) => {
@@ -56,8 +64,13 @@ const CellContent = (props: CellContentProps) => {
     contentStyle,
     funcExpExecute,
     controllLineStyle,
+    mode,
+    width,
+    rowText,
+    $$componentItemId,
   } = props;
   const {
+    field,
     contentType,
     fontColor,
     borderColor,
@@ -73,6 +86,8 @@ const CellContent = (props: CellContentProps) => {
     downloadUrl,
     modalWidth,
     modalHeight,
+    imgMaxNum,
+    imgSize,
   } = contentStyle;
 
   let { children } = props;
@@ -94,9 +109,10 @@ const CellContent = (props: CellContentProps) => {
     downloadUrl,
     modalWidth,
     modalHeight,
+    $$componentItemId,
   });
 
-  children = content ? handleCellContent(row, rowIndex) : children;
+  children = content ? handleCellContent(row, rowIndex, rowText) : children;
 
   if (content && controllLineStyle) {
     children = (
@@ -174,6 +190,20 @@ const CellContent = (props: CellContentProps) => {
       );
     case HYPER_LINK:
       return <Hyperlink content={children} onClick={onClick} />;
+    case THUMBNAIL:
+      return (
+        <Thumbnail
+          imgMaxNum={imgMaxNum}
+          imgSize={imgSize}
+          row={row}
+          field={field}
+          engineApis={engineApis}
+          mode={mode}
+          width={width}
+          appId={appId}
+          pageId={pageId}
+        />
+      );
     default:
       break;
   }
@@ -190,6 +220,8 @@ const FormatCell: React.FC<MyFormatCell> = (props) => {
     funcExpExecute,
     engineApis,
     commonCellClick,
+    mode,
+    width,
   } = props;
 
   const { history, appId, pageId, row, rowId, rowIndex, ...restTdProps } =
@@ -225,6 +257,10 @@ const FormatCell: React.FC<MyFormatCell> = (props) => {
           rowId={rowId}
           rowIndex={rowIndex}
           controllLineStyle={props.tdProps?.controllLineStyle}
+          mode={mode}
+          width={width}
+          rowText={restTdProps?.title}
+          $$componentItemId={restTdProps?.$$componentItemId}
         >
           {children}
         </CellContent>

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

@@ -0,0 +1,120 @@
+import { Icon as LegacyIcon } from '@lingxiteam/icons';
+import { Button, Divider, Popconfirm, Tooltip } from 'antd';
+import classnames from 'classnames';
+import { Fragment, useState } from 'react';
+import type { SingleBtnProps } from '../types/OperationCell';
+
+// 操作项单个按钮
+const SingleBtn = (props: SingleBtnProps) => {
+  const {
+    onDeleteClick,
+    onBtnClick,
+    getLocale,
+    actionsMap,
+    setMorePopVisible,
+    BtnIcon,
+    c,
+    idx,
+    defaultBtnList,
+    isPopover = false,
+    popconfirmPlacement,
+  } = props;
+  const [popVisible, setPopVisible] = useState(false);
+
+  const renderBtn = () => {
+    const { visible: buttonVisible = true } = c;
+
+    const type = typeof c === 'string' ? c : c?.type;
+
+    let buildInBtn = (
+      <Button
+        type="link"
+        disabled={c.disabled}
+        className={classnames(
+          'ued-table-actions-antBtn',
+          type ? `ued-table-actions-${type}` : undefined,
+        )}
+        key={typeof c === 'string' ? c : c.type}
+        onClick={(e) => {
+          onBtnClick(e);
+          setPopVisible(false);
+          if (
+            isPopover &&
+            !(typeof c === 'string' ? c === 'delete' : c.type === 'delete')
+          ) {
+            setMorePopVisible(false);
+          }
+        }}
+        onDoubleClick={(e) => {
+          e.stopPropagation();
+        }}
+      >
+        {typeof c === 'string' ? (
+          <div className="ued-table-actions-extendBtn">
+            <LegacyIcon className="actIcon-left" type={actionsMap[c][1]} />
+            {actionsMap[c][0]}
+          </div>
+        ) : (
+          <div className="ued-table-actions-extendBtn">
+            {c.iconPos && c.iconPos === 'left' && BtnIcon}
+            {!c.isIcon && c.title}
+            {c.iconPos && c.iconPos === 'right' && BtnIcon}
+          </div>
+        )}
+      </Button>
+    );
+    buildInBtn = c.isIcon ? (
+      <Tooltip
+        title={c.title}
+        // @ts-ignore
+        visible={popVisible}
+        onVisibleChange={(v) => setPopVisible(v)}
+      >
+        {buildInBtn}
+      </Tooltip>
+    ) : (
+      buildInBtn
+    );
+
+    const btn = buttonVisible ? (
+      <Fragment key={idx}>
+        {(typeof c === 'string' ? c === 'delete' : c.type === 'delete') &&
+        !c.disabled ? (
+          <span
+            style={{ lineHeight: '0px' }}
+            onClick={(e) => {
+              e.stopPropagation();
+            }}
+            onDoubleClick={(e) => {
+              e.stopPropagation();
+            }}
+          >
+            <Popconfirm
+              onVisibleChange={(v) => v && setPopVisible(false)}
+              placement={popconfirmPlacement}
+              title={getLocale('deleteConfirm')}
+              onConfirm={(e: any) => {
+                onDeleteClick(e);
+                if (isPopover) {
+                  setMorePopVisible(false);
+                }
+              }}
+            >
+              {buildInBtn}
+            </Popconfirm>
+          </span>
+        ) : (
+          buildInBtn
+        )}
+        {!isPopover && idx !== defaultBtnList.length - 1 && (
+          <Divider type="vertical" />
+        )}
+      </Fragment>
+    ) : null;
+    return isPopover ? <div>{btn}</div> : btn;
+  };
+
+  return renderBtn();
+};
+
+export default SingleBtn;