Merge pull request #837 from TMBigGroup/local/dev

feat: 明细表列宽可拖拽及溢出隐藏
running-elephant · Feb 23, 2022 · fee8878 · fee8878
2 parents 723bda0 + 489f7d0
commit fee8878
Show file tree

Hide file tree

Showing 2 changed files with 165 additions and 93 deletions.
diff --git a/frontend/src/app/components/ChartGraph/BasicTableChart/BasicTableChart.tsx b/frontend/src/app/components/ChartGraph/BasicTableChart/BasicTableChart.tsx
@@ -37,7 +37,7 @@ import {
   getCustomBodyRowStyle,
 } from './conditionStyle';
 import Config from './config';
-import { TableComponentsTd } from './TableComponents';
+import { ResizableTitle, TableComponentsTd } from './TableComponents';
 
 class BasicTableChart extends ReactChart {
   useIFrame = false;
@@ -47,8 +47,9 @@ class BasicTableChart extends ReactChart {
   dataColumnWidths = {};
   tablePadding = 16;
   tableCellBorder = 1;
-  cachedAntTableOptions = {};
+  cachedAntTableOptions: any = {};
   cachedDatartConfig: ChartConfig = {};
+  cacheContext: any = null;
   showSummaryRow = false;
   rowNumberUniqKey = `@datart@rowNumberKey`;
   totalWidth = 0;
@@ -91,12 +92,19 @@ class BasicTableChart extends ReactChart {
         );
         this.cachedAntTableOptions = tableOptions;
         this.cachedDatartConfig = options.config;
+        this.cacheContext = context;
         this.adapter?.updated(tableOptions, context);
       },
       false,
     );
   }
 
+  public onUnMount(options: any, context?: any): void {
+    this.cachedAntTableOptions = {};
+    this.cachedDatartConfig = {};
+    this.cacheContext = null;
+  }
+
   public onResize(options, context?): void {
     const columns = this.getDataColumnWidths(options, context);
     const tableOptions = Object.assign(
@@ -449,8 +457,8 @@ class BasicTableChart extends ReactChart {
           columnWidthValue: getUseColumnWidth
             ? columnWidth || 100
             : (datas.length ? Math.max(...datas) : 0) +
-              this.tablePadding * 2 +
-              this.tableCellBorder * 2,
+            this.tablePadding * 2 +
+            this.tableCellBorder * 2,
           getUseColumnWidth,
         },
       };
@@ -459,14 +467,14 @@ class BasicTableChart extends ReactChart {
       [this.rowNumberUniqKey]: {
         columnWidthValue: enableRowNumber
           ? Math.max(
-              rowNumberUniqKeyWidth,
-              rowNumberUniqKeyHeaderWidth +
-                this.tablePadding * 2 +
-                this.tableCellBorder * 2,
-              rowSummaryWidth +
-                this.tablePadding * 2 +
-                this.tableCellBorder * 2,
-            )
+            rowNumberUniqKeyWidth,
+            rowNumberUniqKeyHeaderWidth +
+            this.tablePadding * 2 +
+            this.tableCellBorder * 2,
+            rowSummaryWidth +
+            this.tablePadding * 2 +
+            this.tableCellBorder * 2,
+          )
           : 0,
       },
     });
@@ -534,7 +542,12 @@ class BasicTableChart extends ReactChart {
               { ...fontStyle },
             );
           }
-          return <th {...rest} style={Object.assign(cellCssStyle, style)} />;
+          return (
+            <ResizableTitle
+              {...rest}
+              style={Object.assign(cellCssStyle, style)}
+            />
+          );
         },
       },
       body: {
@@ -581,6 +594,19 @@ class BasicTableChart extends ReactChart {
     };
   }
 
+  private updateTableColumns(e, { size }, index) {
+    const { columns } = this.cachedAntTableOptions;
+    const nextColumns = [...columns];
+    nextColumns[index] = {
+      ...nextColumns[index],
+      width: size.width,
+    };
+    const tableOptions = Object.assign(this.cachedAntTableOptions, {
+      columns: nextColumns,
+    });
+    this.adapter?.updated(tableOptions, this.cacheContext);
+  }
+
   protected getColumns(
     mixedSectionConfigRows,
     styleConfigs,
@@ -601,34 +627,34 @@ class BasicTableChart extends ReactChart {
     const columnsList =
       !tableHeaderStyles || tableHeaderStyles.length === 0
         ? this.getFlatColumns(
-            mixedSectionConfigRows,
-            chartDataSet,
-            styleConfigs,
-          )
+        mixedSectionConfigRows,
+        chartDataSet,
+        styleConfigs,
+        )
         : this.getGroupColumns(
-            mixedSectionConfigRows,
-            tableHeaderStyles,
-            chartDataSet,
-            styleConfigs,
-          );
+        mixedSectionConfigRows,
+        tableHeaderStyles,
+        chartDataSet,
+        styleConfigs,
+        );
     const rowNumbers = enableRowNumber
       ? [
-          {
-            key: `${DATARTSEPERATOR}id`,
-            title: context?.translator?.('viz.palette.graph.number'),
-            width:
-              this.dataColumnWidths?.[this.rowNumberUniqKey]
-                ?.columnWidthValue || 0,
-            fixed: leftFixedColumns || rightFixedColumns ? 'left' : null,
-            render: (value, row, rowIndex) => {
-              return (
-                (this.pageInfo.pageNo - 1) * this.pageInfo.pageSize +
-                rowIndex +
-                1
-              );
-            },
-          } as any,
-        ]
+        {
+          key: `${DATARTSEPERATOR}id`,
+          title: context?.translator?.('viz.palette.graph.number'),
+          width:
+            this.dataColumnWidths?.[this.rowNumberUniqKey]
+              ?.columnWidthValue || 0,
+          fixed: leftFixedColumns || rightFixedColumns ? 'left' : null,
+          render: (value, row, rowIndex) => {
+            return (
+              (this.pageInfo.pageNo - 1) * this.pageInfo.pageSize +
+              rowIndex +
+              1
+            );
+          },
+        } as any,
+      ]
       : [];
     return rowNumbers.concat(columnsList);
   }
@@ -639,33 +665,33 @@ class BasicTableChart extends ReactChart {
       ['style'],
       ['autoMergeFields'],
     );
-    const columnList = dataConfigs.map(c => {
+    const columnList = dataConfigs.map((c, cIndex) => {
       const colName = c.colName;
       const columnRowSpans = (autoMergeFields || []).includes(c.uid)
         ? chartDataSet
-            ?.map(dc => dc.getCell(c))
-            .reverse()
-            .reduce((acc, cur, index, array) => {
-              if (array[index + 1] === cur) {
-                let prevRowSpan = 0;
-                if (acc.length === index && index > 0) {
-                  prevRowSpan = acc[index - 1].nextRowSpan;
-                }
-                return acc.concat([
-                  { rowSpan: 0, nextRowSpan: prevRowSpan + 1 },
-                ]);
-              } else {
-                let prevRowSpan = 0;
-                if (acc.length === index && index > 0) {
-                  prevRowSpan = acc[index - 1].nextRowSpan;
-                }
-                return acc.concat([
-                  { rowSpan: prevRowSpan + 1, nextRowSpan: 0 },
-                ]);
+          ?.map(dc => dc.getCell(c))
+          .reverse()
+          .reduce((acc, cur, index, array) => {
+            if (array[index + 1] === cur) {
+              let prevRowSpan = 0;
+              if (acc.length === index && index > 0) {
+                prevRowSpan = acc[index - 1].nextRowSpan;
               }
-            }, [] as any[])
-            .map(x => x.rowSpan)
-            .reverse()
+              return acc.concat([
+                { rowSpan: 0, nextRowSpan: prevRowSpan + 1 },
+              ]);
+            } else {
+              let prevRowSpan = 0;
+              if (acc.length === index && index > 0) {
+                prevRowSpan = acc[index - 1].nextRowSpan;
+              }
+              return acc.concat([
+                { rowSpan: prevRowSpan + 1, nextRowSpan: 0 },
+              ]);
+            }
+          }, [] as any[])
+          .map(x => x.rowSpan)
+          .reverse()
         : [];
       const columnConfig = this.dataColumnWidths?.[chartDataSet.getFieldKey(c)];
       const colMaxWidth =
@@ -674,8 +700,8 @@ class BasicTableChart extends ReactChart {
           this.dataColumnWidths,
         ).some(item => item.getUseColumnWidth)
           ? columnConfig?.getUseColumnWidth
-            ? columnConfig?.columnWidthValue
-            : ''
+          ? columnConfig?.columnWidthValue
+          : ''
           : columnConfig?.columnWidthValue;
       return {
         sorter: true,
@@ -686,6 +712,9 @@ class BasicTableChart extends ReactChart {
         colName,
         width: colMaxWidth,
         fixed: null,
+        ellipsis: {
+          showTitle: false,
+        },
         onHeaderCell: record => {
           return {
             ...Omit(record, [
@@ -697,6 +726,9 @@ class BasicTableChart extends ReactChart {
               'sorter',
             ]),
             uid: c.uid,
+            onResize: (e, node) => {
+              this.updateTableColumns(e, node, cIndex);
+            },
           };
         },
         onCell: (record, rowIndex) => {
@@ -737,22 +769,22 @@ class BasicTableChart extends ReactChart {
     );
     let columnsList = CloneValueDeep(list);
     leftFixedColumns &&
-      (columnsList = columnsList.map((item, index) => {
-        if (index < Math.min(leftFixedColumns, columnsList.length - 1)) {
-          item.fixed = 'left';
+    (columnsList = columnsList.map((item, index) => {
+      if (index < Math.min(leftFixedColumns, columnsList.length - 1)) {
+        item.fixed = 'left';
+      }
+      return item;
+    }));
+    rightFixedColumns &&
+    (columnsList = columnsList
+      .reverse()
+      .map((item, index) => {
+        if (index < rightFixedColumns && !item.fixed) {
+          item.fixed = 'right';
         }
         return item;
-      }));
-    rightFixedColumns &&
-      (columnsList = columnsList
-        .reverse()
-        .map((item, index) => {
-          if (index < rightFixedColumns && !item.fixed) {
-            item.fixed = 'right';
-          }
-          return item;
-        })
-        .reverse());
+      })
+      .reverse());
     return columnsList;
   }
 
@@ -900,25 +932,25 @@ class BasicTableChart extends ReactChart {
       ((font?.fontSize || 0) * TABLE_LINE_HEIGHT +
         HEADER_PADDING[tableSize || 'default'] +
         (showTableBorder ? this.tableCellBorder : 0)) *
-        _getMaxHeaderHierarchy(tableHeaderStyles) +
+      _getMaxHeaderHierarchy(tableHeaderStyles) +
       this.tableCellBorder;
     return {
       scroll: Object.assign({
         scrollToFirstRowOnChange: true,
         x: !enableFixedHeader
           ? '100%'
           : this.exceedMaxContent
-          ? this.totalWidth
-          : '100%',
+            ? this.totalWidth
+            : '100%',
         y: !enableFixedHeader
           ? '100%'
           : context?.height -
-            (this.showSummaryRow
-              ? SUMMRAY_ROW_HEIGHT[tableSize || 'default'] +
-                (summaryFont?.fontSize || 0) * TABLE_LINE_HEIGHT
-              : 0) -
-            headerHeight -
-            (enablePaging ? PAGINATION_HEIGHT[tableSize || 'default'] : 0),
+          (this.showSummaryRow
+            ? SUMMRAY_ROW_HEIGHT[tableSize || 'default'] +
+            (summaryFont?.fontSize || 0) * TABLE_LINE_HEIGHT
+            : 0) -
+          headerHeight -
+          (enablePaging ? PAGINATION_HEIGHT[tableSize || 'default'] : 0),
       }),
       bordered: !!showTableBorder,
       size: tableSize || 'default',
@@ -934,11 +966,11 @@ class BasicTableChart extends ReactChart {
     this.pageInfo = pageInfo;
     return enablePaging
       ? Object.assign({
-          showSizeChanger: false,
-          current: pageInfo?.pageNo,
-          pageSize: pageInfo?.pageSize,
-          total: pageInfo?.total,
-        })
+        showSizeChanger: false,
+        current: pageInfo?.pageNo,
+        pageSize: pageInfo?.pageSize,
+        total: pageInfo?.total,
+      })
       : false;
   }
 

diff --git a/frontend/src/app/components/ChartGraph/BasicTableChart/TableComponents.tsx b/frontend/src/app/components/ChartGraph/BasicTableChart/TableComponents.tsx
@@ -1,11 +1,51 @@
+import { Tooltip } from 'antd';
 import React from 'react';
+import { Resizable } from 'react-resizable';
 import styled from 'styled-components/macro';
 import { BLUE } from 'styles/StyleConstants';
 
-export const TableComponentsTd = (props: any) => {
-  return <Td {...props} />;
+export const TableComponentsTd = ({ children, ...rest }: any) => {
+  return (
+    <Tooltip placement="topLeft" title={children}>
+      <Td {...rest}>{children}</Td>
+    </Tooltip>
+  );
 };
 
+export const ResizableTitle = props => {
+  const { onResize, width, ...restProps } = props;
+
+  if (!width) {
+    return <th {...restProps} />;
+  }
+
+  return (
+    <Resizable
+      width={width}
+      height={0}
+      handle={
+        <ResizableHandleStyle
+          onClick={e => {
+            e.stopPropagation();
+          }}
+        />
+      }
+      onResize={onResize}
+    >
+      <th {...restProps} />
+    </Resizable>
+  );
+};
+
+const ResizableHandleStyle = styled.span`
+  position: absolute;
+  right: -5px;
+  bottom: 0;
+  z-index: 1;
+  width: 10px;
+  height: 100%;
+  cursor: col-resize;
+`;
 const Td = styled.td<any>`
   ${p =>
     p.isLinkCell