@lingxiteam/ebe-utils 0.2.4 → 0.2.6

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

@@ -128,11 +128,7 @@ const TableHead: React.FC<MyTableHeadProps> = (props: any) => {
     return map;
   }, [colOrder]);
 
-  const renderExtendBtn = (
-    _headExtends: any,
-    isPopover = false,
-    onClicks: FunctionHandleType[] = [],
-  ) => {
+  const renderExtendBtn = (_headExtends: any, isPopover = false, onClicks: FunctionHandleType[] = []) => {
     if (Array.isArray(_headExtends)) {
       // const onClicks = visibleClick.length ? visibleClick : [
       //   onHeadClickBtn1,
@@ -142,17 +138,7 @@ 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);
@@ -161,10 +147,7 @@ const TableHead: React.FC<MyTableHeadProps> = (props: any) => {
         const BtnIcon = icon ? (
           <Tooltip title={c.title}>
             <Button
-              className={classnames(
-                'iconBtn',
-                `table-head-btn-${btnSize || 'default'}`,
-              )}
+              className={classnames('iconBtn', `table-head-btn-${btnSize || 'default'}`)}
               type="link"
               disabled={disabled}
               key={isIcon && id}
@@ -206,10 +189,7 @@ const TableHead: React.FC<MyTableHeadProps> = (props: any) => {
                       type="link"
                       disabled={disabled}
                       key={id}
-                      className={classnames(
-                        'btn',
-                        `table-head-btn-${btnSize || 'default'}`,
-                      )}
+                      className={classnames('btn', `table-head-btn-${btnSize || 'default'}`)}
                       size={btnSize}
                       onClick={handleOnClick}
                     >
@@ -245,10 +225,7 @@ const TableHead: React.FC<MyTableHeadProps> = (props: any) => {
                 <Button
                   disabled={disabled}
                   key={id}
-                  className={classnames(
-                    'btn',
-                    `table-head-btn-${btnSize || 'default'}`,
-                  )}
+                  className={classnames('btn', `table-head-btn-${btnSize || 'default'}`)}
                   type={btnType}
                   size={btnSize}
                   onClick={handleOnClick}
@@ -285,13 +262,7 @@ const TableHead: React.FC<MyTableHeadProps> = (props: any) => {
   };
   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) => {
@@ -313,11 +284,7 @@ const TableHead: React.FC<MyTableHeadProps> = (props: any) => {
       const tempList = [...visibleBtn];
       const preList = tempList.splice(0, headBtnNum);
       const preClick = visibleClick.splice(0, headBtnNum);
-      const content = (
-        <div style={{ maxHeight: '300px', overflow: 'auto' }}>
-          {renderExtendBtn(tempList, true, visibleClick)}
-        </div>
-      );
+      const content = <div style={{ maxHeight: '300px', overflow: 'auto' }}>{renderExtendBtn(tempList, true, visibleClick)}</div>;
       return (
         <>
           {renderExtendBtn(preList, false, preClick)}
@@ -337,104 +304,124 @@ const TableHead: React.FC<MyTableHeadProps> = (props: any) => {
     }
     return null;
   };
+
+  // indeterminate: 已选但未全选，checkAll：全选/全不选
+  const [indeterminate, checkAll] = useMemo(() => {
+    const allLen = columns?.length;
+    const selectedLen = checkedKeys?.length;
+    return [!!selectedLen && selectedLen < allLen, !!allLen && selectedLen === allLen];
+  }, [columns?.length, checkedKeys?.length]);
+
+  // 点击自定义列全选触发
+  const onCheckAllChange = (e: any) => {
+    if (typeof setSelectedCols === 'function') {
+      setSelectedCols(() => {
+        if (e.target.checked) {
+          return (columns || []).map((item: any) => item.dataIndex);
+        }
+        return [];
+      });
+    }
+  };
+
+  // 点击自定义列某列触发
+  const onCustomColumnChecked = (dataIndex: string, checked: boolean) => {
+    if (typeof setSelectedCols === 'function') {
+      setSelectedCols(() => {
+        if (checked) {
+          return [...(checkedKeys || []), dataIndex];
+        }
+        return (checkedKeys || []).filter((co: any) => co !== dataIndex);
+      });
+    }
+  };
+
   const renderCustomContent = () => {
+    const tableSize = props.size || 'middle';
     return (
-      <Tree
-        selectable={false}
-        onCheck={(keys) => {
-          setSelectedCols(keys);
-        }}
-        draggable={{ icon: false }}
-        onDrop={({ dragNodesKeys, dropPosition, node }) => {
-          const { dragOverGapTop = false } = (node as any)?.props || {};
-          if (typeof setColOrder === 'function') {
-            setColOrder((pre: any) => {
-              let orders: string[] = [...pre];
-              // 旧顺序列表为空时，表示是采用原始顺序
-              if (pre.length === 0) {
-                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}`);
-                  }
-                });
-                orders = orders.filter((o) => orderMap[o]).concat(extendCols);
-              }
-              const index = orders.findIndex((o) => o === dragNodesKeys[0]);
-              const dropPos = dropPosition + (dragOverGapTop ? 1 : 0);
-              if (index === dropPos) {
+      <>
+        <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 => {
+            setSelectedCols(keys);
+          }}
+          draggable={{ icon: false }}
+          onDrop={({ dragNodesKeys, dropPosition, node }) => {
+            const { dragOverGapTop = false } = (node as any)?.props || {};
+            if (typeof setColOrder === 'function') {
+              setColOrder((pre: any) => {
+                let orders: string[] = [...pre];
+                // 旧顺序列表为空时，表示是采用原始顺序
+                if (pre.length === 0) {
+                  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}`);
+                    }
+                  });
+                  orders = orders.filter(o => orderMap[o]).concat(extendCols);
+                }
+                const index = orders.findIndex(o => o === dragNodesKeys[0]);
+                const dropPos = dropPosition + (dragOverGapTop ? 1 : 0);
+                if (index === dropPos) {
+                  return orders;
+                }
+                if (index > dropPos) {
+                  orders.splice(index, 1);
+                  orders.splice(dropPos, 0, dragNodesKeys[0] as string);
+                } else {
+                  orders.splice(dropPos, 0, dragNodesKeys[0] as string);
+                  orders.splice(index, 1);
+                }
                 return orders;
-              }
-              if (index > dropPos) {
-                orders.splice(index, 1);
-                orders.splice(dropPos, 0, dragNodesKeys[0] as string);
-              } else {
-                orders.splice(dropPos, 0, dragNodesKeys[0] as string);
-                orders.splice(index, 1);
-              }
-              return orders;
-            });
-          }
-        }}
-      >
-        {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 (
               <TreeNode
                 selectable={false}
                 title={
                   <div className="title">
                     <div className="icon">
-                      <IconFont
-                        width={16}
-                        height={16}
-                        iconClass="lcdp-icon-tuozhuai"
-                      />
+                      <IconFont width={tableSize === 'small' ? 12 : 14} height={tableSize === 'small' ? 12 : 14} iconClass="lcdp-icon-tuozhuai" />
                     </div>
                     <Checkbox
-                      checked={checkedMap[dataIndex] !== undefined}
+                      checked={checked}
                       className="checkbox"
-                      onChange={(e) => {
-                        if (typeof setSelectedCols === 'function') {
-                          setSelectedCols(() => {
-                            if (e.target.checked) {
-                              return [...(checkedKeys || []), dataIndex];
-                            }
-                            return (checkedKeys || []).filter(
-                              (co: any) => co !== dataIndex,
-                            );
-                          });
-                        }
+                      onChange={e => {
+                        onCustomColumnChecked(dataIndex, e.target.checked);
                       }}
                     />
-                    {checkedMap[dataIndex] ? (
-                      <a>{col.originTitle}</a>
-                    ) : (
-                      col.originTitle
-                    )}
+                    <span className={checkedMap[dataIndex] ? 'checkedText' : ''} onClick={() => onCustomColumnChecked(dataIndex, !checked)}>
+                      {col.originTitle}
+                    </span>
                   </div>
                 }
                 key={dataIndex}
               />
             );
-          },
-        )}
-      </Tree>
+          })}
+        </Tree>
+      </>
     );
   };
 
   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={{
@@ -471,17 +458,14 @@ const TableHead: React.FC<MyTableHeadProps> = (props: any) => {
     if (source === 'engine') {
       return (
         <Popover
-          overlayClassName={`${prefix}-popContent`}
+          overlayClassName={classnames(`${prefix}-popContent`, `${prefix}-${props.size || 'middle'}-popContent`)}
           trigger="click"
           content={renderCustomContent()}
           placement="bottomRight"
           title={
             <>
               <div className="popHead">
-                <span>
-                  {getLocale?.('Table.headCol')}
-                  <a>({checkedKeys?.length})</a>
-                </span>
+                <span>{getLocale?.('Table.headCol')}</span>
                 <a
                   className="extend"
                   onClick={() => {
@@ -492,7 +476,7 @@ const TableHead: React.FC<MyTableHeadProps> = (props: any) => {
                   {getLocale?.('reset') || '重置'}
                 </a>
               </div>
-              <span className="tips">{getLocale?.('Table.headTips')}</span>
+              <div className="tips">{getLocale?.('Table.headTips')}</div>
             </>
           }
         >
@@ -508,8 +492,7 @@ const TableHead: React.FC<MyTableHeadProps> = (props: any) => {
       <div className={classnames('title', `${prefix}-title`)}>{tableTitle}</div>
       <div className="extend">
         {renderHeaderBtn()}
-        {(typeof showCustom === 'boolean' ? showCustom : hasCustom) &&
-          renderCustomBtn()}
+        {(typeof showCustom === 'boolean' ? showCustom : hasCustom) && renderCustomBtn()}
       </div>
     </div>
   ) : null;

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

@@ -22,7 +22,7 @@ export interface SummaryRowProps<T> {
    */
   selectionType?: Required<TableProps<T>>['rowSelection']['type'];
 }
-const TableSummaryRow = <T,>(props: SummaryRowProps<T>) => {
+const TableSummaryRow = <T, >(props: SummaryRowProps<T>) => {
   const { dataSource, columns, summaryConfig, summary, selectionType } = props;
   const { background } = summaryConfig || {};
   const { summaryColList } = useSummaryCol({

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

@@ -70,5 +70,4 @@ export const PREVIEW_NEW_TAB = 'newTab';
 export const ROUTE_PUSH = 'push';
 export const ROUTE_REPLACE = 'replace';
 
-export const EDIT_COMPONENT_STOP_PROPAGATION_CLS =
-  'table-edit-component-stop-propagation';
+export const EDIT_COMPONENT_STOP_PROPAGATION_CLS = 'table-edit-component-stop-propagation';

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

@@ -1,10 +1,7 @@
 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';
+import { createEmptyRow, deleteTempRowProperties, EMPTY_ROW_TEMP_KEY_ATTR } from '../utils';
 
 interface UseCommonCMDAction {
   ref: any;
@@ -68,6 +65,7 @@ const useCMDAction = (props: UseCMDActionPropsType) => {
     loadPrint,
     engineApis,
     expandTableData,
+    setTableRowKey, // 主键生成方法
   } = props;
 
   // 表格编辑格式为下拉框时，绑定的服务对应的数据
@@ -80,7 +78,7 @@ const useCMDAction = (props: UseCMDActionPropsType) => {
 
   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(() => {
@@ -96,6 +94,7 @@ const useCMDAction = (props: UseCMDActionPropsType) => {
   };
 
   useImperativeHandle(ref, () => ({
+
     /**
      * 加载表格数据（加载完之后，表格就脱离了数据源的控制了）
      */
@@ -105,7 +104,12 @@ const useCMDAction = (props: UseCMDActionPropsType) => {
         form.resetFields();
       }
       if (tableUpdateInnerDataSource) {
-        setInnerDataSource(data?.dataSource || []);
+        // 主键不存在时需补上
+        setInnerDataSource(
+          (data?.dataSource || []).map((c: any, idx: number) => {
+            return setTableRowKey(c, idx);
+          })
+        );
       } else {
         /**
          * 注意，不是直接使用 setInnerDataSource
@@ -114,9 +118,7 @@ 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);
       }
@@ -154,7 +156,7 @@ const useCMDAction = (props: UseCMDActionPropsType) => {
       if (tableUpdateInnerDataSource) {
         const newRowKey = newRowData[EMPTY_ROW_TEMP_KEY_ATTR];
         newRowData[currentRowKey] = newRowKey;
-        const newDataSource = innerDataSource.map((c) => {
+        const newDataSource = innerDataSource.map(c => {
           /**
            * 移除空白行的临时属性
            * 最后一条空白行，不允许自动移除临时属性（交由保存/取消逻辑手动移除）
@@ -193,10 +195,7 @@ const useCMDAction = (props: UseCMDActionPropsType) => {
         };
 
         if (dataArrs.length > 2) {
-          const childFiled = dataArrs.slice(
-            dataArrs.length - 1,
-            dataArrs.length,
-          );
+          const childFiled = dataArrs.slice(dataArrs.length - 1, dataArrs.length);
           params.otherObjectArrayOptions = {
             [childFiled]: {
               name: dataName,
@@ -230,7 +229,12 @@ const useCMDAction = (props: UseCMDActionPropsType) => {
      */
     addTableRowData: (newRowData: any) => {
       if (tableUpdateInnerDataSource) {
-        setInnerDataSource([newRowData, ...innerDataSource]);
+        // 主键不存在时需补上
+        setInnerDataSource(
+          [newRowData, ...innerDataSource].map((c: any, idx: number) => {
+            return setTableRowKey(c, idx);
+          })
+        );
         return;
       }
 
@@ -280,6 +284,25 @@ const useCMDAction = (props: UseCMDActionPropsType) => {
         callback(err);
       });
     },
+
+    /**
+     * 根据行id设置行数据
+     */
+    setTableRowData: (rowId: any, newRowData: any) => {
+      const newDataSource = (innerDataSource || []).map((row: any, idx: number) => {
+        if (`${row[currentRowKey]}` === `${rowId}`) {
+          return merge({}, row, newRowData);
+        }
+        return row;
+      });
+      if (tableUpdateInnerDataSource) {
+        setInnerDataSource(newDataSource);
+
+        return;
+      }
+
+      setOuterDataSource(newDataSource);
+    },
     loadPrint,
     expandTableData,
   }));
@@ -321,6 +344,7 @@ const useCommonCMDAction = (props: UseCommonCMDAction) => {
   const { tableUpdateInnerDataSource } = engineApis?.compatConfig?.cmd || {};
 
   useImperativeHandle(ref, () => ({
+
     /**
      * 加载字段翻译数据
      * @param serviceData