规则配置历史版本

src/view/Manage/ModelConfig/Component/rule-catalog-compare.jsx

@@ -2,6 +2,7 @@ import React from 'react'
 import { Row, Col, Select, Space, Tooltip, Spin, Typography } from 'antd'
 
 import { dispatch } from '../../../../model'
+import Table from '../../../../util/Component/Table'
 
 import '../../Model/Component/VersionCompare.less'
 
@@ -156,6 +157,11 @@ const FC = ({ item }) => {
                 header={compareData?.headers?.ruleHeader} 
                 data={compareData?.left?.ruleValue} 
               /> 
+              <Attribute 
+                title='规则信息'
+                header={compareData?.headers?.attributeHeader} 
+                data={compareData?.left?.attributeValue}  
+              />
             </div>
             <div style={{ flex: 1, paddingLeft: 7.5}}>
               <Basic 
@@ -163,6 +169,11 @@ const FC = ({ item }) => {
                 header={compareData?.headers?.ruleHeader} 
                 data={compareData?.right?.ruleValue} 
               /> 
+              <Attribute 
+                title='规则信息'
+                header={compareData?.headers?.attributeHeader} 
+                data={compareData?.right?.attributeValue}  
+              />
             </div>
           </div>     
         }
@@ -210,3 +221,64 @@ export const Basic = ({ header, data, title }) => {
     </Typography>
   )
 }
+
+export const Attribute = ({ header, data, title }) => {
+  const [columns, tableData] = React.useMemo(() => {
+    const newTableData = [], newColumns = [{
+      title: '序号',
+      dataIndex: 'index',
+      width: 100,
+      render: (_, __, index) => `${index+1}`
+    }]
+
+    for (const [index, item] of (header||[]).entries()) {
+      newColumns.push({
+        title: item??'',
+        dataIndex: `column${index}`,
+        render: (item, record) => {
+          let stateClassName = '';
+          if (item?.state==='ADD' || item?.state==='UPDATE') {
+            stateClassName = 'add';
+          } else if (item?.state === 'DELETE') {
+            stateClassName = 'delete';
+          }
+
+          return (
+            <Typography.Paragraph>
+              <Tooltip title={item?.value}>
+                <Typography.Text className={stateClassName} ellipsis={true}>{item?.value||''}</Typography.Text>
+              </Tooltip>
+            </Typography.Paragraph>
+          );
+        },
+        ellipsis: true,
+        option: true,
+      })
+    }
+ 
+    for (const item of data??[]) {
+      let newAttrItem = {}
+      for (const [index, _item] of item.entries()) {
+        newAttrItem[`column${index}`] = _item
+      }
+      newTableData.push(newAttrItem)
+    }
+
+    return [newColumns, newTableData]
+  }, [header, data])
+
+  return (
+    <div>
+      <div className='my-3'>
+        <Typography>
+          <Typography.Title level={5}>{title}</Typography.Title>
+        </Typography>
+      </div>
+      <Table
+        columns={columns||[]}
+        dataSource={tableData}
+        pagination={false}
+      />
+    </div>
+  )
+}
\ No newline at end of file