对比加工步骤

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

@@ -9,6 +9,7 @@ import VersionCompareIndex from './VersionCompareIndex';
 import FilterColumnAction from './FilterColumnAction';
 
 import './VersionCompare.less';
+import VersionCompareProcess from './VersionCompareProcess';
 
 const { Text, Paragraph } = Typography;
 const { Option } = Select;
@@ -241,11 +242,13 @@ const VersionCompare = (props) => {
               <VersionCompareHeader data={compareData} />
               <VersionCompareTable data={compareData} columns={attrFilterColumns} />
               <VersionCompareIndex data={compareData} />
+              <VersionCompareProcess data={compareData} />
             </div>
             <div style={{ flex: 1, paddingLeft: 10, overflow: 'hidden'}}>
               <VersionCompareHeader data={compareData} direction='right' />
               <VersionCompareTable data={compareData} columns={attrFilterColumns} direction='right' />
-              <VersionCompareIndex data={compareData} direction='right'/>
+              <VersionCompareIndex data={compareData} direction='right' />
+              <VersionCompareProcess data={compareData} direction='right' />
             </div>
           </div>
         }

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

+import { useEffect, useState } from 'react';
+import { Typography, Tooltip, Table } from 'antd';
+
+const { Text, Paragraph, Title } = Typography;
+
+const VersionCompareProcess = (props) => {
+
+  const { data, direction = 'left' } = props;
+  const [ columns, setColumns ] = useState([]);
+  const [ tableData, setTableData ] = useState([]);
+
+  useEffect(() => {
+
+    const newColumns = [];
+    (data?.heads?.processingHead||[]).forEach((item, index) => {
+      newColumns.push({
+        title: item||'',
+        dataIndex: `column${index}`,
+        render: (attrValue, record, index) => {
+
+          let stateClassName = '';
+          if (attrValue?.state==='ADD' || attrValue?.state==='UPDATE') {
+            stateClassName = 'add';
+          } else if (attrValue?.state === 'DELETE') {
+            stateClassName = 'delete';
+          }
+
+          return (
+            <Paragraph>
+              <Tooltip title={attrValue?.value||''}>
+                <Text className={stateClassName} ellipsis={true}>{attrValue?.value||''}</Text>
+              </Tooltip>
+            </Paragraph>
+          );
+        },
+        width: 60,
+        ellipsis: true,
+      });
+    })
+
+    setColumns(newColumns);
+
+    const newTableData = [];
+    let processingValue = [];
+    if (direction==='left') {
+      processingValue = data?.left?.processingValue||[];
+    } else if (direction==='right') {
+      processingValue = data?.right?.processingValue||[];
+    }
+
+    (processingValue||[]).forEach((attrItem) => {
+      let newAttrItem = {};
+      (attrItem||[]).forEach((item, index) => {
+        newAttrItem[`column${index}`] = item;
+      })
+      newTableData.push(newAttrItem);
+    })
+
+    setTableData(newTableData);
+    
+    //eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [ data ])
+
+  return (
+    <div>
+      <div className='my-3'>
+        <Typography>
+          <Title level={5}>加工步骤</Title>
+        </Typography>
+      </div>
+      <Table
+        columns={columns||[]}
+        dataSource={tableData}
+        pagination={false}
+      />
+    </div>
+  );
+}
+
+export default VersionCompareProcess;
\ No newline at end of file