@lingxiteam/ebe-utils 0.5.11 → 0.6.2

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

@@ -70,7 +70,6 @@ const CellContent = (props: CellContentProps) => {
     $$componentItemId,
   } = props;
   const {
-    field,
     contentType,
     fontColor,
     borderColor,
@@ -93,7 +92,7 @@ const CellContent = (props: CellContentProps) => {
   let { children } = props;
 
   const isClickSetted = !!clickType;
-  const { handleCellContent, onCellClick } = useFormatCell({
+  const { handleCellContent, onCellClick, handleDataInput } = useFormatCell({
     funcExpExecute,
     engineApis,
     appId,
@@ -185,19 +184,33 @@ const CellContent = (props: CellContentProps) => {
         />
       );
     case HYPER_LINK:
-      return <Hyperlink content={children} onClick={onClick} />;
+      return (
+        <Hyperlink
+          onClick={(singleObjData: any) => {
+            if (typeof onCellClick === 'function') {
+              onCellClick(row, rowId, rowIndex, singleObjData);
+            }
+          }}
+          clickType={clickType}
+          data={rowText}
+          controllLineStyle={controllLineStyle}
+          getFileName={(singleObjData: any) => handleDataInput({ dataInput: filename, row, rowIndex, singleObjData })}
+          handleCellContent={(singleObjData: any) => {
+            return handleCellContent(row, rowIndex, rowText, singleObjData);
+          }}
+        />
+      );
     case THUMBNAIL:
       return (
         <Thumbnail
           imgMaxNum={imgMaxNum}
           imgSize={imgSize}
-          row={row}
-          field={field}
           engineApis={engineApis}
           mode={mode}
           width={width}
           appId={appId}
           pageId={pageId}
+          data={rowText}
         />
       );
     default:
@@ -263,7 +276,8 @@ const FormatCell: React.FC<MyFormatCell> = (props) => {
             controllLineStyle={props.tdProps?.controllLineStyle}
             mode={mode}
             width={width}
-            rowText={restTdProps?.title}
+            // title为文字提示文案，文字提示不配置时为空，使用rowText作文单元格翻译后文本字段
+            rowText={restTdProps?.rowText}
             $$componentItemId={restTdProps?.$$componentItemId}
           >
             {children}

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

@@ -94,6 +94,7 @@ const SingleBtn = (
                 onVisibleChange={v => v && setPopVisible(false)}
                 placement={popconfirmPlacement}
                 title={getLocale('deleteConfirm')}
+                overlayClassName="ued-pop-confirm"
                 onConfirm={(e: any) => {
                   onDeleteClick(e);
                   if (isPopover) {

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

@@ -5,22 +5,29 @@
 /* eslint-disable no-underscore-dangle */
 import { Table, Form } from 'antd';
 import classnames from 'classnames';
-import React, { useRef, useMemo } from 'react';
+import React, { useRef, useMemo, useImperativeHandle } from 'react';
 import BodyCell from './BodyCell';
 import HeaderCell from './HeaderCell';
 import TableHead from './TableHead';
 import { useFuncExpExecute } from '../utils/hooks/useFuncExpExecute';
-import { useColumns, useRowMerge, useScroll } from './hooks';
+import {
+  useColumns,
+  useRowMerge,
+  useScroll,
+} from './hooks';
 import type { MyTableProps, WrapperTablePropsTypes } from './types/prop';
 import EmptyComp from '../utils/Empty';
 import { usePrintMode, PrintContainer } from '../utils';
 import { useLocale } from '../utils/hooks/useLocale';
-import { useCreation } from '../utils/ahooks';
 import TableSummaryRow from './TableSummaryRow';
 import { LingxiForwardRef } from '@lingxiteam/types';
 import useBackgroundStyle from '../View/useBackgroundStyle';
+import { TableContextProvider } from './hooks/useTableContext';
+import useLevelTable from './hooks/useLevelTable';
+import MyBodyRow from './BodyRow';
 
-const MyTable = LingxiForwardRef<any, Omit<MyTableProps, keyof WrapperTablePropsTypes> & WrapperTablePropsTypes>((props) => {
+const MyTable = LingxiForwardRef<any, Omit<MyTableProps, keyof WrapperTablePropsTypes>
+& WrapperTablePropsTypes & { getRealIndexById:(rowId: string) => number}>((props) => {
   const {
     dataSource: boundDataSource,
     visible = true,
@@ -68,8 +75,11 @@ const MyTable = LingxiForwardRef<any, Omit<MyTableProps, keyof WrapperTableProps
     hasPageChangeEvent,
     setCurrentPage,
     form,
+    getRealIndexById,
+    tableRef: tableRefFromProps,
     ...restProps
   } = props;
+  
 
   const { uid: compId } = $$componentItem;
   const { size, sortDirections, sticky, summary, tableLayout, title, rowClassName, showHeader = true } = restProps || {};
@@ -86,7 +96,11 @@ const MyTable = LingxiForwardRef<any, Omit<MyTableProps, keyof WrapperTableProps
   const engineApis = getEngineApis?.();
   const { backgroundStyle } = useBackgroundStyle({ backgroundType, engineApis, appId: $$componentItem?.appId, mode: 'engine' });
 
-  const { sandBoxSafeRun, dataState } = engineApis || {};
+  const {
+    sandBoxSafeRun,
+    dataState,
+  } = engineApis || {};
+
 
   const { getLocale } = useLocale(engineApis || {});
 
@@ -95,7 +109,11 @@ const MyTable = LingxiForwardRef<any, Omit<MyTableProps, keyof WrapperTableProps
   const appId = props?.appId || $$componentItem?.appId;
   const pageId = props?.pageId || $$componentItem?.pageId;
 
-  const { rowSpanColMap, rowSpanMap, rowClassMap } = useRowMerge({
+  const {
+    rowSpanColMap,
+    rowSpanMap,
+    rowClassMap,
+  } = useRowMerge({
     ...props,
     currentPageDataSource,
     nowInlineEditKey,
@@ -104,23 +122,6 @@ const MyTable = LingxiForwardRef<any, Omit<MyTableProps, keyof WrapperTableProps
 
   const { showPrintContainer, selectorKey, printData } = usePrintMode(props.$$componentItem.uid);
 
-  // 根据id获取真实的下标，避免过滤和排序后影响下标
-  const { getRealIndexById } = useCreation(() => {
-    const indexMap = new Map<string | number, number>();
-    return {
-      getRealIndexById: (id: string | number) => {
-        if (indexMap.has(id)) {
-          return indexMap.get(id);
-        }
-        const index = (innerDataSource || []).findIndex((c: any) => c[currentRowKey] === id);
-        if (index !== -1) {
-          indexMap.set(id, index);
-        }
-        return index;
-      },
-    };
-  }, [innerDataSource, currentRowKey]);
-
   const {
     tableRef,
     finalcolumns,
@@ -132,7 +133,8 @@ const MyTable = LingxiForwardRef<any, Omit<MyTableProps, keyof WrapperTableProps
     setColumnWidth,
     initLoadColWidth,
     printColumns,
-    fixedAction,
+    customCols,
+    hasLevelData,
   } = useColumns({
     ...props,
     sandBoxSafeRun,
@@ -170,11 +172,13 @@ const MyTable = LingxiForwardRef<any, Omit<MyTableProps, keyof WrapperTableProps
     getLocale,
     getRealIndexById,
     childrenColumnName: realExpandable.childrenColumnName,
+    isBordered,
   });
 
   const {
     scroll,
     tableWrapRef,
+    scrollClassName,
     // initTableWrapWidthRef,
     // getTableWrapWidth,
   } = useScroll({
@@ -185,6 +189,7 @@ const MyTable = LingxiForwardRef<any, Omit<MyTableProps, keyof WrapperTableProps
     setColumnWidth,
     sortDataSource,
     pageId,
+    pageNum: pagination?.current,
   });
 
   const superSelectTranslationMapRef: any = useRef(); // 防止state更新不及时，导致翻译无法获取翻译数据
@@ -198,7 +203,12 @@ const MyTable = LingxiForwardRef<any, Omit<MyTableProps, keyof WrapperTableProps
     innerTableStyle.overflowY = styles.overflowY;
   }
 
-  const handleTableChange = (newPagination: any, newFilters: any, newSorter: any, newExtra: any) => {
+  const handleTableChange = (
+    newPagination: any,
+    newFilters: any,
+    newSorter: any,
+    newExtra: any,
+  ) => {
     if (typeof onChange === 'function') {
       onChange(newPagination, newFilters, newSorter, newExtra);
     }
@@ -209,7 +219,7 @@ const MyTable = LingxiForwardRef<any, Omit<MyTableProps, keyof WrapperTableProps
           newPagination?.current,
           newPagination?.pageSize,
           newSorter?.order === 'ascend' ? newSorter?.field : undefined,
-          newSorter?.order === 'descend' ? newSorter?.field : undefined
+          newSorter?.order === 'descend' ? newSorter?.field : undefined,
         );
         return;
       }
@@ -248,15 +258,13 @@ const MyTable = LingxiForwardRef<any, Omit<MyTableProps, keyof WrapperTableProps
   // }, [columnWidth]);
 
   const InnerHeaderCell = useMemo(() => {
-    return (info: any) => (
-      <HeaderCell
-        {...info}
-        key={info.columnIndex}
-        tableData={sortDataSource}
-        hasExpandContent={hasExpandContent}
-        childrenColumnName={realExpandable.childrenColumnName}
-      />
-    );
+    return (info: any) => <HeaderCell
+      {...info}
+      key={info.columnIndex}
+      tableData={sortDataSource}
+      hasExpandContent={hasExpandContent}
+      childrenColumnName={realExpandable.childrenColumnName}
+    />;
   }, [sortDataSource, hasExpandContent, realExpandable.childrenColumnName]);
   const eleProps = {
     appId,
@@ -266,9 +274,25 @@ const MyTable = LingxiForwardRef<any, Omit<MyTableProps, keyof WrapperTableProps
 
   const isEmptyLoading = useMemo(() => loading && sortDataSource?.length === 0, [loading, sortDataSource]);
 
+  const { levelTableColSpanMap } = useLevelTable({ visibleColumns: customCols, hasLevelData });
+
+  useImperativeHandle(tableRefFromProps, () => ({
+    // 获取最终的column
+    getFinalColumns: () => finalcolumns,
+  }));
+
   return visible ? (
-    <>
-      <div {...eleProps} style={{ ...backgroundStyle, ...styles }} className={classnames('ued-table-wrap', className)} ref={tableWrapRef}>
+    <TableContextProvider loading={loading} levelTableColSpanMap={levelTableColSpanMap}>
+      <div
+        {...eleProps}
+        style={{ ...backgroundStyle, ...styles }}
+        className={classnames(
+          'ued-table-wrap',
+          className,
+          scrollClassName
+        )}
+        ref={tableWrapRef}
+      >
         <TableHead
           {...restProps}
           source="engine"
@@ -281,38 +305,32 @@ const MyTable = LingxiForwardRef<any, Omit<MyTableProps, keyof WrapperTableProps
         />
         <Form form={form}>
           <Table
-            // {...restProps} // TODO: 不要这么透传，需要什么传什么，先注释，之后缺什么再补
+          // {...restProps} // TODO: 不要这么透传，需要什么传什么，先注释，之后缺什么再补
             {...tableProps}
             showHeader={showHeader}
             locale={{
               emptyText: <EmptyComp dataState={dataState} getLocale={getLocale} />,
             }}
             ref={tableRef}
-            // loading={loading}
+          // loading={loading}
             bordered={isBordered}
             className={innerClassName}
             style={innerTableStyle}
             components={{
               body: {
                 cell: BodyCell,
+                row: MyBodyRow,
               },
               header: {
                 cell: InnerHeaderCell,
               },
             }}
-            columns={finalcolumns.map((item, index) => {
-              // 固定列最后一项宽度根据本身计算返回
-              if (fixedAction && finalcolumns.length - 1 === index) {
-                return item;
-              }
-              item.width = columnWidth[item?.key] || item.width;
-              return item;
-            })}
+            columns={finalcolumns}
             rowKey={currentRowKey}
             scroll={scroll}
             onChange={handleTableChange}
             onRow={(record) => {
-              return {
+              return ({
                 onClick: (event) => {
                   const hasOnRowClick = onRowClick(event, record, getRealIndexById(record[currentRowKey]));
                   !hasOnRowClick && onRowSelectClick(record, getRealIndexById(record[currentRowKey]));
@@ -320,13 +338,15 @@ const MyTable = LingxiForwardRef<any, Omit<MyTableProps, keyof WrapperTableProps
                 onDoubleClick: (event) => {
                   onRowDoubleClick(event, record, getRealIndexById(record[currentRowKey]));
                 },
-                onContextMenu: (event) => {},
-                onMouseEnter: (event) => {}, // 鼠标移入行
-                onMouseLeave: (event) => {},
-              };
+                onContextMenu: (event) => { },
+                onMouseEnter: (event) => { }, // 鼠标移入行
+                onMouseLeave: (event) => { },
+                // 配置了点击事件后，点击行后需要有激活状态
+                clickActive: typeof onRowClick === 'function',
+              });
             }}
-            rowSelection={rowSelection && rowSelection?.type ? rowSelection : false}
-            // loading没有数据的时候模拟3个数据,当数据为空时依然展示骨架屏
+            rowSelection={rowSelection}
+          // loading没有数据的时候模拟3个数据,当数据为空时依然展示骨架屏
             dataSource={isEmptyLoading ? [{}, {}, {}] : sortDataSource}
             expandable={realExpandable}
             pagination={isEmptyLoading ? false : page && pagination}
@@ -377,14 +397,12 @@ const MyTable = LingxiForwardRef<any, Omit<MyTableProps, keyof WrapperTableProps
                   cell: BodyCell,
                 },
                 header: {
-                  cell: (info: any) => (
-                    <HeaderCell
-                      {...info}
-                      tableData={printData?.dataSource?.length > 0 ? printData.dataSource : sortDataSource}
-                      childrenColumnName={realExpandable.childrenColumnName}
-                      hasExpandContent={hasExpandContent}
-                    />
-                  ),
+                  cell: (info: any) => <HeaderCell
+                    {...info}
+                    tableData={printData?.dataSource?.length > 0 ? printData.dataSource : sortDataSource}
+                    childrenColumnName={realExpandable.childrenColumnName}
+                    hasExpandContent={hasExpandContent}
+                  />,
                 },
               }}
               columns={printColumns.map((item, index) => {
@@ -410,7 +428,7 @@ const MyTable = LingxiForwardRef<any, Omit<MyTableProps, keyof WrapperTableProps
           </Form>
         </PrintContainer>
       )}
-    </>
+    </TableContextProvider>
   ) : null;
 });
 

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

@@ -9,6 +9,7 @@ import CommIconEg from '../../Icon';
 import CommIconEd from '../../Icon/IconED';
 import IconFont from '../../IconFont';
 import { useLocale } from '../../utils/hooks/useLocale';
+import { WrapperButton } from '../../Button';
 
 const prefix = 'table-head';
 const { TreeNode } = Tree;
@@ -172,23 +173,25 @@ const TableHead: React.FC<MyTableHeadProps> = (props: any) => {
         };
         const BtnIcon = icon ? (
           <Tooltip title={c.title}>
-            <Button
-              className={classnames('iconBtn', `table-head-btn-${btnSize || 'default'}`)}
-              type="link"
-              disabled={disabled}
-              key={isIcon && id}
-              size={btnSize}
-              onClick={isIcon && handleOnClick}
-            >
-              <CommIcon
-                icon={icon}
-                className=""
-                $$componentItem={props.$$componentItem}
-                getEngineApis={props.getEngineApis}
-                engineApis={engineApis}
-                getEdEngineApi={props.getEdEngineApi}
-              />
-            </Button>
+            <WrapperButton>
+              <Button
+                className={classnames('iconBtn', `table-head-btn-${btnSize || 'default'}`)}
+                type="link"
+                disabled={disabled}
+                key={isIcon && id}
+                size={btnSize}
+                onClick={isIcon && handleOnClick}
+              >
+                <CommIcon
+                  icon={icon}
+                  className=""
+                  $$componentItem={props.$$componentItem}
+                  getEngineApis={props.getEngineApis}
+                  engineApis={engineApis}
+                  getEdEngineApi={props.getEdEngineApi}
+                />
+              </Button>
+            </WrapperButton>
           </Tooltip>
         ) : undefined;
         if (source === 'engine') {
@@ -210,32 +213,34 @@ const TableHead: React.FC<MyTableHeadProps> = (props: any) => {
                   isIcon ? (
                     BtnIcon
                   ) : (
-                    <Button
-                      type="link"
-                      disabled={disabled}
-                      key={id}
-                      className={classnames('btn', `table-head-btn-${btnSize || 'default'}`)}
-                      size={btnSize}
-                      onClick={handleOnClick}
-                    >
-                      {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}
-                      />}
-                    </Button>
+                    <WrapperButton>
+                      <Button
+                        type="link"
+                        disabled={disabled}
+                        key={id}
+                        className={classnames('btn', `table-head-btn-${btnSize || 'default'}`)}
+                        size={btnSize}
+                        onClick={handleOnClick}
+                      >
+                        {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}
+                        />}
+                      </Button>
+                    </WrapperButton>
                   )
                 ) : null
               }
@@ -244,32 +249,35 @@ const TableHead: React.FC<MyTableHeadProps> = (props: any) => {
               isIcon ? (
                 BtnIcon
               ) : (
-                <Button
-                  disabled={disabled}
-                  key={id}
-                  className={classnames('btn', `table-head-btn-${btnSize || 'default'}`)}
-                  type={btnType}
-                  size={btnSize}
-                  onClick={handleOnClick}
-                >
-                  {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}
-                  />}
-                </Button>
+                <WrapperButton>
+                  <Button
+                    disabled={disabled}
+                    key={id}
+                    className={classnames('btn', `table-head-btn-${btnSize || 'default'}`)}
+                    type={btnType}
+                    size={btnSize}
+                    onClick={handleOnClick}
+                  >
+                    {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}
+                    />}
+                  </Button>
+                </WrapperButton>
+
               )
             ) : null
           )}
@@ -290,7 +298,8 @@ const TableHead: React.FC<MyTableHeadProps> = (props: any) => {
       const visibleClick: any = [];
       const visibleBtn: any = [];
       headExtends.forEach((item, index) => {
-        if (item.visible !== false && item?.checked !== false) {
+        // rule为隐藏规则解析后的值，如果为true，则表示隐藏， visible存量数据？
+        if (item.visible !== false && item?.checked !== false && (typeof item.rule === 'undefined' || !item.rule)) {
           visibleBtn.push(item);
           if (item?.value) {
             visibleClick.push(props[item?.value]); // 对应的value 直接获取扩展按钮当中对应的value
@@ -453,7 +462,7 @@ const TableHead: React.FC<MyTableHeadProps> = (props: any) => {
       <Button
         type={customStyle}
         size={(BtnSize as any)[props?.size || 'middle']}
-        className={classnames('btn', `table-head-btn-${props.size}`)}
+        className={classnames('btn', `table-head-btn-${props.size}`, 'ued-button-wrap')}
       >
         {iconPosition && iconPosition === 'left' && (
           <CommIcon
@@ -530,7 +539,7 @@ const TableHead: React.FC<MyTableHeadProps> = (props: any) => {
     let header = <></>;
     switch (headIconType) {
       case 'none':
-        header = <div className={classnames('title', `${prefix}-title`, 'custom-title')}>{tableTitle}</div>;
+        header = <div className={classnames('title', `${prefix}-title`, 'custom-title', 'none-style-title')}>{tableTitle}</div>;
         break;
       case 'styleOne':
         header = (
@@ -567,7 +576,7 @@ const TableHead: React.FC<MyTableHeadProps> = (props: any) => {
         );
         break;
       default:
-        header = <div className={classnames('title', `${prefix}-title`)}>{tableTitle}</div>;
+        header = <div className={classnames('title', `${prefix}-title`, 'none-style-title')}>{tableTitle}</div>;
         break;
     }
 

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

@@ -0,0 +1,15 @@
+import useColumns from './useColumns';
+import useCommon from './useCommon';
+import useDataSource from './useDataSource';
+import usePagination from './usePagination';
+import useScroll from './useScroll';
+import useSelection from './useSelection';
+
+export {
+  useColumns,
+  useCommon,
+  useDataSource,
+  usePagination,
+  useScroll,
+  useSelection,
+};