加工内容历史版本优化

src/util/Component/Table.tsx

@@ -69,12 +69,13 @@ function FC<RowType extends object = any>({ width, maxHeight, pageSize, pageNum,
       setDefaultWidth(columns, contentWidth)
       paddingCol.current.width = 0
 
-      const cols = columns
+      const newCols = columns
         .map((col, index) => {
           const render = getRender(col);
           const colWidth = col.width ?? 100;
           return {
-            ...col, /* colRef: createRef(), */ width: colWidth, render, ellipsis: true,
+            ellipsis: true,
+            ...col, /* colRef: createRef(), */ width: colWidth, render,
             onHeaderCell: (column: any) => ({
               width: column.width,
               // colRef: column.colRef,
@@ -82,7 +83,8 @@ function FC<RowType extends object = any>({ width, maxHeight, pageSize, pageNum,
             }),
           };
         })
-      setCols(cols)
+
+      setCols(newCols)
     }
   }, [columns, tableWidth, width, extraColWidth])
 

src/view/Manage/Model/Component/VersionCompareProcess.jsx

-import { useEffect, useState } from 'react';
-import { Typography, Tooltip, Table } from 'antd';
+import { useEffect, useState, useRef } from 'react';
+import { Typography, Tooltip } from 'antd';
+import Table from '../../../../util/Component/Table';
 
 const { Text, Paragraph, Title } = Typography;
 
@@ -9,43 +10,74 @@ const VersionCompareProcess = (props) => {
   const [ columns, setColumns ] = useState([]);
   const [ tableData, setTableData ] = useState([]);
 
+  const compareTableDataRef = useRef();
+  const hiddenDivRef = useRef();
+
   useEffect(() => {
 
     const newColumns = [];
     (data?.heads?.processingHead||[]).forEach((item, index) => {
-      newColumns.push({
+      const newColumn = {
         title: item||'',
         dataIndex: `column${index}`,
-        render: (attrValue, record, index) => {
-
-          let stateClassName = '';
+        render: (attrValue, record, _index) => {
+          let stateClassName = '', height = 0, compareHeight = 0;
           if (attrValue?.state==='ADD' || attrValue?.state==='UPDATE') {
             stateClassName = 'add';
           } else if (attrValue?.state === 'DELETE') {
             stateClassName = 'delete';
           }
 
+          const compareValue = compareTableDataRef.current?.[_index]?.[`column${index}`]?.value;
+
+          console.log('compareValue', compareValue)
+
+          const _span = document.createElement('span');
+
+          _span.innerText = attrValue?.value??'';
+          hiddenDivRef.current?.appendChild(_span);
+          height = hiddenDivRef.current?.getBoundingClientRect().height
+          hiddenDivRef.current?.removeChild(_span);
+
+          _span.innerText = compareValue??'';
+          hiddenDivRef.current?.appendChild(_span);
+          compareHeight = hiddenDivRef.current?.getBoundingClientRect().height
+          hiddenDivRef.current?.removeChild(_span);
+
           return (
-            <Paragraph>
-              <Tooltip title={attrValue?.value||''}>
-                <Text className={stateClassName} ellipsis={true}>{attrValue?.value||''}</Text>
-              </Tooltip>
-            </Paragraph>
+            <div style={{ position: 'relative' }}>
+              {
+                (height>compareHeight) ? <div className={stateClassName}>{attrValue?.value||''}</div> : <>
+                  <div className={stateClassName} style={{ 
+                    position: 'absolute', 
+                    top: '50%',
+                    left: 0,
+                    transform: 'translateY(-50%)',
+                  }}>
+                    {attrValue?.value||''}
+                  </div>
+                  <div style={{ visibility: 'hidden' }}>{compareValue}</div>
+                </>
+              }
+            </div>
           );
         },
-        width: 60,
-        ellipsis: true,
-      });
+        ellipsis: false,
+      };
+
+      newColumns.push(newColumn);
     })
 
     setColumns(newColumns);
 
-    const newTableData = [];
-    let processingValue = [];
+    const newTableData = [], newCompareTableData = [];
+    let processingValue = [], compareProcessingValue = [];
     if (direction==='left') {
       processingValue = data?.left?.processingValue||[];
+      compareProcessingValue = data?.right?.processingValue||[];
     } else if (direction==='right') {
       processingValue = data?.right?.processingValue||[];
+      compareProcessingValue = data?.left?.processingValue||[];
     }
 
     (processingValue||[]).forEach((attrItem) => {
@@ -54,8 +86,17 @@ const VersionCompareProcess = (props) => {
         newAttrItem[`column${index}`] = item;
       })
       newTableData.push(newAttrItem);
-    })
+    });
 
+    (compareProcessingValue||[]).forEach((attrItem) => {
+      let newAttrItem = {};
+      (attrItem||[]).forEach((item, index) => {
+        newAttrItem[`column${index}`] = item;
+      })
+      newCompareTableData.push(newAttrItem);
+    });
+
+    compareTableDataRef.current = newCompareTableData;
     setTableData(newTableData);
     
     //eslint-disable-next-line react-hooks/exhaustive-deps
@@ -73,6 +114,9 @@ const VersionCompareProcess = (props) => {
         dataSource={tableData}
         pagination={false}
       />
+      <div style={{ width: 0, height: 0 }} >
+        <div style={{ width: 100 }} ref={hiddenDivRef}></div>
+      </div>
     </div>
   );
 }