@lingxiteam/ebe-utils 0.2.22 → 0.2.23

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

@@ -1,6 +1,6 @@
 /* eslint-disable no-nested-ternary */
+import { Button, Checkbox, Popover, Tree, Divider, Tooltip } from 'antd';
 import { Icon } from '@lingxiteam/icons';
-import { Button, Checkbox, Divider, Popover, Tooltip, Tree } from 'antd';
 import type { ButtonType } from 'antd/lib/button';
 import classnames from 'classnames';
 import React, { useMemo } from 'react';
@@ -47,6 +47,17 @@ export interface MyTableHeadProps {
   sandBoxSafeRun?: any;
   engineApis?: any;
   getEdEngineApi?: any;
+  getEngineApis?: any;
+  headIconType?: string;
+  headPrefixIcon?: {
+    prefixIconTheme?: string;
+    prefixIconType?: string;
+    prefixIconiconFile?: {
+      fileId: string;
+      fileCode: string;
+    }
+    prefixIconFontAddress?: string;
+  }
 }
 const TableHead: React.FC<MyTableHeadProps> = (props: any) => {
   const {
@@ -69,6 +80,8 @@ const TableHead: React.FC<MyTableHeadProps> = (props: any) => {
     headBtnNum = 3,
     sandBoxSafeRun,
     engineApis,
+    headIconType,
+    headPrefixIcon,
   } = props;
   const CommIcon = source === 'editor' ? CommIconEd : CommIconEg;
 
@@ -86,7 +99,7 @@ const TableHead: React.FC<MyTableHeadProps> = (props: any) => {
     iconFile: newIconFile,
     // 默认列
     defaultColumn,
-  } = !showCustom || typeof showCustom === 'boolean' ? ({} as any) : showCustom; // 兼容旧数据,旧数据是true、false、undefined
+  } = (!showCustom || typeof showCustom === 'boolean') ? {} as any : showCustom; // 兼容旧数据,旧数据是true、false、undefined
 
   const [checkedKeys, checkedMap] = useMemo(() => {
     const map: any = {};
@@ -107,7 +120,10 @@ const TableHead: React.FC<MyTableHeadProps> = (props: any) => {
         map[c.dataIndex] = c;
         keys.push(`${c.dataIndex || ''}`);
       });
-      return [keys, map];
+      return [
+        keys,
+        map,
+      ];
     }
     return [
       selectedCols.map((c: any) => {
@@ -138,7 +154,17 @@ const TableHead: React.FC<MyTableHeadProps> = (props: any) => {
       //   onHeadClickBtn5,
       // ] as FunctionHandleType[];
       return _headExtends.map((c, i) => {
-        const { icon, iconPos, id, btnType, btnSize, isIcon, rule, visible: buttonVisible = true, disabled } = c;
+        const {
+          icon,
+          iconPos,
+          id,
+          btnType,
+          btnSize,
+          isIcon,
+          rule,
+          visible: buttonVisible = true,
+          disabled,
+        } = c;
         const handleOnClick = (e: any) => {
           if (typeof onClicks[i] === 'function') {
             onClicks[i](e);
@@ -177,11 +203,10 @@ const TableHead: React.FC<MyTableHeadProps> = (props: any) => {
         }
 
         return (
-          <>
-            {' '}
-            {isPopover ? (
-              <div>
-                {buttonVisible ? (
+          <> {isPopover ? (
+            <div>
+              {
+                buttonVisible ? (
                   isIcon ? (
                     BtnIcon
                   ) : (
@@ -193,32 +218,29 @@ const TableHead: React.FC<MyTableHeadProps> = (props: any) => {
                       size={btnSize}
                       onClick={handleOnClick}
                     >
-                      {iconPos && iconPos === 'left' && icon && (
-                        <CommIcon
-                          icon={icon}
-                          className=""
-                          $$componentItem={props.$$componentItem}
-                          getEngineApis={props.getEngineApis}
-                          engineApis={engineApis}
-                          getEdEngineApi={props.getEdEngineApi}
-                        />
-                      )}
+                      {iconPos && iconPos === 'left' && icon && <CommIcon
+                        icon={icon}
+                        className=""
+                        $$componentItem={props.$$componentItem}
+                        getEngineApis={props.getEngineApis}
+                        engineApis={engineApis}
+                        getEdEngineApi={props.getEdEngineApi}
+                      />}
                       {c.title}
-                      {iconPos && iconPos === 'right' && icon && (
-                        <CommIcon
-                          icon={icon}
-                          className=""
-                          $$componentItem={props.$$componentItem}
-                          getEngineApis={props.getEngineApis}
-                          engineApis={engineApis}
-                          getEdEngineApi={props.getEdEngineApi}
-                        />
-                      )}
+                      {iconPos && iconPos === 'right' && icon && <CommIcon
+                        icon={icon}
+                        className=""
+                        $$componentItem={props.$$componentItem}
+                        getEngineApis={props.getEngineApis}
+                        engineApis={engineApis}
+                        getEdEngineApi={props.getEdEngineApi}
+                      />}
                     </Button>
                   )
-                ) : null}
-              </div>
-            ) : buttonVisible ? (
+                ) : null
+              }
+            </div>) : (
+            buttonVisible ? (
               isIcon ? (
                 BtnIcon
               ) : (
@@ -230,39 +252,41 @@ const TableHead: React.FC<MyTableHeadProps> = (props: any) => {
                   size={btnSize}
                   onClick={handleOnClick}
                 >
-                  {iconPos && iconPos === 'left' && icon && (
-                    <CommIcon
-                      icon={icon}
-                      className=""
-                      $$componentItem={props.$$componentItem}
-                      getEngineApis={props.getEngineApis}
-                      engineApis={engineApis}
-                      getEdEngineApi={props.getEdEngineApi}
-                    />
-                  )}
+                  {iconPos && iconPos === 'left' && icon && <CommIcon
+                    icon={icon}
+                    className=""
+                    $$componentItem={props.$$componentItem}
+                    getEngineApis={props.getEngineApis}
+                    engineApis={engineApis}
+                    getEdEngineApi={props.getEdEngineApi}
+                  />}
                   {c.title}
-                  {iconPos && iconPos === 'right' && icon && (
-                    <CommIcon
-                      icon={icon}
-                      className=""
-                      $$componentItem={props.$$componentItem}
-                      getEngineApis={props.getEngineApis}
-                      engineApis={engineApis}
-                      getEdEngineApi={props.getEdEngineApi}
-                    />
-                  )}
+                  {iconPos && iconPos === 'right' && icon && <CommIcon
+                    icon={icon}
+                    className=""
+                    $$componentItem={props.$$componentItem}
+                    getEngineApis={props.getEngineApis}
+                    engineApis={engineApis}
+                    getEdEngineApi={props.getEdEngineApi}
+                  />}
                 </Button>
               )
-            ) : null}
-          </>
-        );
+            ) : null
+          )}
+          </>);
       });
     }
     return undefined;
   };
   const renderHeaderBtn = () => {
     if (Array.isArray(headExtends) && headExtends.length) {
-      const onClicks = [onHeadClickBtn1, onHeadClickBtn2, onHeadClickBtn3, onHeadClickBtn4, onHeadClickBtn5] as FunctionHandleType[];
+      const onClicks = [
+        onHeadClickBtn1,
+        onHeadClickBtn2,
+        onHeadClickBtn3,
+        onHeadClickBtn4,
+        onHeadClickBtn5,
+      ] as FunctionHandleType[];
       const visibleClick: any = [];
       const visibleBtn: any = [];
       headExtends.forEach((item, index) => {
@@ -290,15 +314,17 @@ const TableHead: React.FC<MyTableHeadProps> = (props: any) => {
           {renderExtendBtn(preList, false, preClick)}
           <Divider type="vertical" />
           <Popover content={content} trigger="click">
-            <Button type="link" key="more">
+            <Button
+              type="link"
+              key="more"
+            >
               <div className="ued-table-actions-extendBtn">
                 {getLocale?.('more')}
                 <Icon className="actIcon-left" type="down" />
               </div>
             </Button>
           </Popover>
-        </>
-      );
+        </>);
 
       // }
     }
@@ -309,7 +335,7 @@ const TableHead: React.FC<MyTableHeadProps> = (props: any) => {
   const [indeterminate, checkAll] = useMemo(() => {
     const allLen = columns?.length;
     const selectedLen = checkedKeys?.length;
-    return [!!selectedLen && selectedLen < allLen, !!allLen && selectedLen === allLen];
+    return [(!!selectedLen && selectedLen < allLen), !!allLen && selectedLen === allLen];
   }, [columns?.length, checkedKeys?.length]);
 
   // 点击自定义列全选触发
@@ -340,14 +366,17 @@ const TableHead: React.FC<MyTableHeadProps> = (props: any) => {
     const tableSize = props.size || 'middle';
     return (
       <>
-        <Checkbox indeterminate={indeterminate} checked={checkAll} onChange={onCheckAllChange} className={classnames('checkAll', 'checkbox')}>
-          <span className={checkAll ? 'checkedText' : ''}>
-            {getLocale?.('all', '全选')}({checkedKeys?.length})
-          </span>
+        <Checkbox
+          indeterminate={indeterminate}
+          checked={checkAll}
+          onChange={onCheckAllChange}
+          className={classnames('checkAll', 'checkbox')}
+        >
+          <span className={checkAll ? 'checkedText' : ''}>{getLocale?.('all', '全选')}({checkedKeys?.length})</span>
         </Checkbox>
         <Tree
           selectable={false}
-          onCheck={keys => {
+          onCheck={(keys) => {
             setSelectedCols(keys);
           }}
           draggable={{ icon: false }}
@@ -368,9 +397,9 @@ const TableHead: React.FC<MyTableHeadProps> = (props: any) => {
                       extendCols.push(`${col.dataIndex}`);
                     }
                   });
-                  orders = orders.filter(o => orderMap[o]).concat(extendCols);
+                  orders = orders.filter((o) => orderMap[o]).concat(extendCols);
                 }
-                const index = orders.findIndex(o => o === dragNodesKeys[0]);
+                const index = orders.findIndex((o) => o === dragNodesKeys[0]);
                 const dropPos = dropPosition + (dragOverGapTop ? 1 : 0);
                 if (index === dropPos) {
                   return orders;
@@ -387,7 +416,7 @@ const TableHead: React.FC<MyTableHeadProps> = (props: any) => {
             }
           }}
         >
-          {columns?.map((col: { dataIndex: string | string[]; [key: string]: any }) => {
+          {columns?.map((col: { dataIndex: string | string[];[key: string]: any }) => {
             const dataIndex = `${col.dataIndex}`;
             const checked = checkedMap[dataIndex] !== undefined;
             return (
@@ -401,7 +430,7 @@ const TableHead: React.FC<MyTableHeadProps> = (props: any) => {
                     <Checkbox
                       checked={checked}
                       className="checkbox"
-                      onChange={e => {
+                      onChange={(e) => {
                         onCustomColumnChecked(dataIndex, e.target.checked);
                       }}
                     />
@@ -421,7 +450,11 @@ const TableHead: React.FC<MyTableHeadProps> = (props: any) => {
 
   const renderCustomBtn = () => {
     const Btn = (
-      <Button type={customStyle} size={(BtnSize as any)[props?.size || 'middle']} className={classnames('btn', `table-head-btn-${props.size}`)}>
+      <Button
+        type={customStyle}
+        size={(BtnSize as any)[props?.size || 'middle']}
+        className={classnames('btn', `table-head-btn-${props.size}`)}
+      >
         {iconPosition && iconPosition === 'left' && (
           <CommIcon
             icon={{
@@ -465,7 +498,9 @@ const TableHead: React.FC<MyTableHeadProps> = (props: any) => {
           title={
             <>
               <div className="popHead">
-                <span>{getLocale?.('Table.headCol')}</span>
+                <span>
+                  {getLocale?.('Table.headCol')}
+                </span>
                 <a
                   className="extend"
                   onClick={() => {
@@ -487,9 +522,61 @@ const TableHead: React.FC<MyTableHeadProps> = (props: any) => {
     return Btn;
   };
 
+  const tableHeader = useMemo(() => {
+    // { title: '无图标', value: 'none' },
+    // { title: '样式一', value: 'styleOne' },
+    // { title: '样式二', value: 'styleTwo' },
+    // { title: '自定义', value: 'custom' },
+    let header = <></>;
+    switch (headIconType) {
+      case 'none':
+        header = <div className={classnames('title', `${prefix}-title`, 'custom-title')}>{tableTitle}</div>;
+        break;
+      case 'styleOne':
+        header = (
+          <div className={classnames('title', `${prefix}-title`, 'custom-title')}>
+            <div className="head-style-one">{tableTitle}</div>
+          </div>
+        );
+        break;
+      case 'styleTwo':
+        header = (
+          <div className={classnames('title', `${prefix}-title`, 'custom-title')}>
+            <div className="head-style-two">{tableTitle}</div>
+          </div>
+        );
+        break;
+      case 'custom':
+        header = (
+          <div className={classnames('title', `${prefix}-title`, 'custom-title')}>
+            <CommIcon
+              icon={{
+                type: headPrefixIcon?.prefixIconType,
+                theme: headPrefixIcon?.prefixIconTheme,
+                fontAddress: headPrefixIcon?.prefixIconFontAddress,
+                iconFile: headPrefixIcon?.prefixIconiconFile,
+              }}
+              engineApis={props.engineApis}
+              getEngineApis={props.getEngineApis}
+              $$componentItem={props.$$componentItem}
+              className="head-style-custom"
+              getEdEngineApi={props.getEdEngineApi}
+            />
+            {tableTitle}
+          </div>
+        );
+        break;
+      default:
+        header = <div className={classnames('title', `${prefix}-title`)}>{tableTitle}</div>;
+        break;
+    }
+
+    return header;
+  }, [tableTitle, headIconType, headPrefixIcon]);
+
   return showHead ? (
     <div className={classnames(prefix, `${prefix}-${props.size}`)}>
-      <div className={classnames('title', `${prefix}-title`)}>{tableTitle}</div>
+      {tableHeader}
       <div className="extend">
         {renderHeaderBtn()}
         {(typeof showCustom === 'boolean' ? showCustom : hasCustom) && renderCustomBtn()}

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

@@ -1,11 +1,12 @@
-import { Table, TableProps } from 'antd';
+import React from 'react';
 import useSummaryCol, { SummaryProps } from '../hooks/useSummaryCol';
+import { Table, TableProps } from 'antd';
 import { SummaryConfig } from '../types/prop';
 
 const { Row, Cell } = Table.Summary;
 export interface SummaryRowProps<T> {
-  dataSource?: SummaryProps<T>['dataSource'];
-  columns?: SummaryProps<T>['columns'];
+  dataSource?: SummaryProps<T>['dataSource'],
+  columns?: SummaryProps<T>['columns'],
 
   /**
    * 合计行属性
@@ -20,34 +21,25 @@ export interface SummaryRowProps<T> {
   /**
    * 选择模式
    */
-  selectionType?: Required<TableProps<T>>['rowSelection']['type'];
+  selectionType?: Required<TableProps<T>>['rowSelection']['type']
 }
 const TableSummaryRow = <T, >(props: SummaryRowProps<T>) => {
   const { dataSource, columns, summaryConfig, summary, selectionType } = props;
   const { background } = summaryConfig || {};
-  const { summaryColList } = useSummaryCol({
-    dataSource,
-    columns,
-    summaryConfig,
-  });
+  const { summaryColList } = useSummaryCol({ dataSource, columns, summaryConfig });
 
-  return summaryColList?.length > 0 ? (
-    <Row
-      style={{
-        background,
-      }}
+  return (summaryColList?.length > 0) ? (
+    <Row style={{
+      background,
+    }}
     >
       {/* 开启选择模式时，预置一个占位单元格 */}
       {selectionType !== undefined && <Cell index={0} />}
       {summaryColList.map(({ colSpan, title, align }, i) => (
-        <Cell index={i} colSpan={colSpan || 1} align={align}>
-          {title}
-        </Cell>
+        <Cell index={i} colSpan={colSpan || 1} align={align}>{title}</Cell>
       ))}
     </Row>
-  ) : (
-    ((summary?.(dataSource as any[]) || null) as any)
-  );
+  ) : (summary?.(dataSource as any[]) || null) as any;
 };
 
 export default TableSummaryRow;

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

@@ -71,3 +71,6 @@ export const ROUTE_PUSH = 'push';
 export const ROUTE_REPLACE = 'replace';
 
 export const EDIT_COMPONENT_STOP_PROPAGATION_CLS = 'table-edit-component-stop-propagation';
+
+// 标记拖拽头部的字段
+export const TH_CELL_KEY = 'cellKey';

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

@@ -1,17 +1,17 @@
-import useCheckStrict from './useCheckStrict';
-import useCMDAction, { useCommonCMDAction } from './useCMDActions';
+import useExpandable from './useExpandable';
 import useColumns from './useColumns';
+import useFormatCell from './useFormatCell';
+import useCMDAction, { useCommonCMDAction } from './useCMDActions';
 import useCommon from './useCommon';
 import useDataSource from './useDataSource';
-import useExpandable from './useExpandable';
 import useFilter from './useFilter';
-import useFormatCell from './useFormatCell';
 import usePagination from './usePagination';
 import useRowEdit from './useRowEdit';
 import useRowMerge from './useRowMerge';
 import useScroll from './useScroll';
 import useSelection from './useSelection';
 import useSort from './useSort';
+import useCheckStrict from './useCheckStrict';
 
 export {
   useExpandable,

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

@@ -1,10 +1,10 @@
+import { useState, useImperativeHandle } from 'react';
+import { createEmptyRow, EMPTY_ROW_TEMP_KEY_ATTR, deleteTempRowProperties } from '../utils';
 import { EngineApisType } from '@lingxiteam/types';
 import merge from 'lodash/merge';
-import { useImperativeHandle, useState } from 'react';
-import { createEmptyRow, deleteTempRowProperties, EMPTY_ROW_TEMP_KEY_ATTR } from '../utils';
 
 interface UseCommonCMDAction {
-  ref: any;
+  ref: any,
   setCurrent?: React.SetStateAction<any>;
   setCurrentPage?: React.SetStateAction<any>;
   setTotal?: React.SetStateAction<any>;
@@ -74,11 +74,14 @@ const useCMDAction = (props: UseCMDActionPropsType) => {
   // 是否只更新内部数据源，从3.8.1开始只更新内部数据源
   const { tableUpdateInnerDataSource } = engineApis?.compatConfig?.cmd || {};
 
-  const { loading, colServiceData } = useCommonCMDAction(props);
+  const {
+    loading,
+    colServiceData,
+  } = useCommonCMDAction(props);
 
   const validateFormAndScroll = (compId: string, callback: any = () => {}) => {
     const formValues = form.getFieldsValue() || {};
-    const keys = Object.keys(formValues).filter(k => k.startsWith(compId));
+    const keys = Object.keys(formValues).filter((k) => k.startsWith(compId));
     form
       .validateFields(keys)
       .then(() => {
@@ -105,11 +108,9 @@ const useCMDAction = (props: UseCMDActionPropsType) => {
       }
       if (tableUpdateInnerDataSource) {
         // 主键不存在时需补上
-        setInnerDataSource(
-          (data?.dataSource || []).map((c: any, idx: number) => {
-            return setTableRowKey(c, idx);
-          })
-        );
+        setInnerDataSource((data?.dataSource || []).map((c: any, idx: number) => {
+          return setTableRowKey(c, idx);
+        }));
       } else {
         /**
          * 注意，不是直接使用 setInnerDataSource
@@ -118,7 +119,8 @@ const useCMDAction = (props: UseCMDActionPropsType) => {
          */
         setOuterDataSource(data?.dataSource || []);
       }
-      const isNumber = (num: any) => typeof num === 'number' || (typeof num === 'string' && !isNaN(Number(num)));
+      const isNumber = (num: any) => typeof num === 'number' ||
+      (typeof num === 'string' && !isNaN(Number(num)));
       if (isNumber(data?.total)) {
         setTotal?.(data?.total);
       }
@@ -151,16 +153,18 @@ const useCMDAction = (props: UseCMDActionPropsType) => {
     /**
      * 新增一行空白数据（绑定了数据源/没有绑定数据源通用）
      */
-    addTableEmptyRow: (updateData: Function, inlineeditnow?: boolean) => {
-      const newRowData: any = createEmptyRow();
-      if (tableUpdateInnerDataSource) {
+    addTableEmptyRow: (updateData: Function, inlineeditnow: boolean, updateDataSource?: boolean,) => {
+      // 是否需要上报数据源
+      const needUpdateDataSource = updateDataSource === true || !tableUpdateInnerDataSource;
+      const newRowData: any = createEmptyRow(needUpdateDataSource);
+      if (!needUpdateDataSource) {
         const newRowKey = newRowData[EMPTY_ROW_TEMP_KEY_ATTR];
         newRowData[currentRowKey] = newRowKey;
-        const newDataSource = innerDataSource.map(c => {
+        const newDataSource = innerDataSource.map((c) => {
           /**
-           * 移除空白行的临时属性
-           * 最后一条空白行，不允许自动移除临时属性（交由保存/取消逻辑手动移除）
-           */
+             * 移除空白行的临时属性
+             * 最后一条空白行，不允许自动移除临时属性（交由保存/取消逻辑手动移除）
+             */
           delete c[EMPTY_ROW_TEMP_KEY_ATTR];
           deleteTempRowProperties(c);
           return c;
@@ -168,7 +172,7 @@ const useCMDAction = (props: UseCMDActionPropsType) => {
         setInnerDataSource([newRowData, ...newDataSource]);
         // 是否开启行编辑
         if (inlineeditnow) {
-          // 设置当前行为编辑状态
+        // 设置当前行为编辑状态
           setNowEditingData({ ...newRowData });
           setNowInlineEditKey(newRowKey);
         }
@@ -230,11 +234,9 @@ const useCMDAction = (props: UseCMDActionPropsType) => {
     addTableRowData: (newRowData: any) => {
       if (tableUpdateInnerDataSource) {
         // 主键不存在时需补上
-        setInnerDataSource(
-          [newRowData, ...innerDataSource].map((c: any, idx: number) => {
-            return setTableRowKey(c, idx);
-          })
-        );
+        setInnerDataSource([newRowData, ...innerDataSource].map((c: any, idx: number) => {
+          return setTableRowKey(c, idx);
+        }));
         return;
       }
 
@@ -346,9 +348,9 @@ const useCommonCMDAction = (props: UseCommonCMDAction) => {
   useImperativeHandle(ref, () => ({
 
     /**
-     * 加载字段翻译数据
-     * @param serviceData
-     */
+   * 加载字段翻译数据
+   * @param serviceData
+   */
     addColServiceData: (serviceData: any = {}) => {
       setColServiceData({
         ...(colServiceData || {}),
@@ -411,4 +413,6 @@ const useCommonCMDAction = (props: UseCommonCMDAction) => {
 };
 
 export default useCMDAction;
-export { useCommonCMDAction };
+export {
+  useCommonCMDAction,
+};