模型版本对比

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

+import { useState } from 'react';
+import { Popover, Table } from 'antd';
+import { MenuOutlined } from '@ant-design/icons';
+
+const { Column } = Table;
+
+const ColumnSelect = (props) => {
+  const { columns, onChange, defaultSelectedKeys } = props;
+
+  const [ selectedKeys, setSelectedKeys ] = useState(defaultSelectedKeys);
+
+  const changeSelect = (selectedRowKeys) => {
+    setSelectedKeys(selectedRowKeys);
+    onChange && onChange(selectedRowKeys);
+  }
+
+  const rowSelection = {
+    selectedRowKeys: selectedKeys,
+    onChange:changeSelect
+  }
+
+  return(
+    <div style={{width:230}}>
+      <Table
+        rowKey="title"
+        rowSelection={rowSelection}
+        showHeader={true}
+        pagination={false}
+        size="small"
+        scroll={{ y:350 }}
+        dataSource={columns}
+      >
+        <Column title="字段名字" dataIndex="title" key="title" />
+      </Table>
+    </div>
+  )
+}
+
+const FilterColumnAction = (props) => {
+  return (
+    <Popover 
+      title="选择显示字段" 
+      placement="leftTop" 
+      content={
+        <ColumnSelect {...props} />
+      }>
+      <MenuOutlined />
+    </Popover>
+  );
+}
+
+export default FilterColumnAction;
\ No newline at end of file

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

-import React, { useEffect, useState } from 'react';
-import { Form, Select, Spin, Tooltip, Checkbox } from 'antd';
+import React, { useEffect, useState, useRef } from 'react';
+import { Form, Select, Spin, Tooltip, Checkbox, Typography } from 'antd';
 
 import { dispatch, dispatchLatest } from '../../../../model'; 
 import { formatVersionDate } from '../../../../util';
 import VersionCompareHeader from './VersionCompareHeader';
 import VersionCompareTable from './VersionCompareTable';
 import VersionCompareIndex from './VersionCompareIndex';
+import FilterColumnAction from './FilterColumnAction';
 
 import './VersionCompare.less';
 
+const { Text, Paragraph } = Typography;
 const { Option } = Select;
+const defaultColumnTitles = ['序号', '中文名称', '英文名称', '类型', '业务含义'];
 
 const VersionCompare = (props) => {
 
@@ -22,8 +25,12 @@ const VersionCompare = (props) => {
   const [ loading, setLoading ] = useState(false);
   const [ compareData, setCompareData ] = useState(null);
   const [ loadingCompare, setLoadingCompare ] = useState(false);
-  const [ onlyShowChange, setOnlyShowChange ] = useState(false);
+  const [ onlyShowChange, setOnlyShowChange ] = useState(true);
+  const [ attrFilterColumns, setAttrFilterColumns ] = useState([]);
+  const [ attrSelectedTitles, setAttrSelectedTitles ] = useState(defaultColumnTitles);
  
+  const attrColumnsRef = useRef([]);
+
   useEffect(() => {
     if ((id||'') !== '') {
       getVersions();
@@ -100,6 +107,51 @@ const VersionCompare = (props) => {
       callback: data => {
         setLoadingCompare(false);
         setCompareData(data);
+
+        const newAttrOptionColumns = [];
+        (data?.heads?.columnHead||[]).forEach((item, index) => {
+          newAttrOptionColumns.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: (item==='序号')?60: 150,
+            ellipsis: true,
+            option: true,
+          });
+        })
+
+        const newAttrColumns = [...newAttrOptionColumns, { 
+          title: <FilterColumnAction columns={newAttrOptionColumns} defaultSelectedKeys={defaultColumnTitles} onChange={onFilterChange} />,
+          dataIndex: 'columnFilter',
+          render: (_, record, index) => {
+            return '';
+          },
+          width: 40,
+          ellipsis: true,
+          option: false
+        }];
+
+        attrColumnsRef.current = newAttrColumns;
+
+        const newFilterColumns = newAttrColumns.filter(column => column.option===false || attrSelectedTitles.indexOf(column.title) !== -1);
+
+        setAttrFilterColumns(newFilterColumns);
       },
       error: () => {
         setLoadingCompare(false);
@@ -107,6 +159,13 @@ const VersionCompare = (props) => {
     })
   }
 
+  const onFilterChange = (values) => {
+    const newFilterColumns = attrColumnsRef.current.filter(column => column.option===false || values.indexOf(column.title) !== -1);
+
+    setAttrSelectedTitles(values);
+    setAttrFilterColumns(newFilterColumns);
+  }
+
   const onOnlyShowChange = (e) => {
     setOnlyShowChange(e.target.checked);
     if (basicVersion!=='' && incVersion!=='') {
@@ -164,12 +223,12 @@ const VersionCompare = (props) => {
           compareData && <div className='flex'>
             <div style={{ flex: 1, borderRight: '1px solid #EFEFEF', paddingRight: 10, overflow: 'hidden'}}>
               <VersionCompareHeader data={compareData} />
-              <VersionCompareTable data={compareData} />
+              <VersionCompareTable data={compareData} columns={attrFilterColumns} />
               <VersionCompareIndex data={compareData} />
             </div>
             <div style={{ flex: 1, paddingLeft: 10, overflow: 'hidden'}}>
               <VersionCompareHeader data={compareData} direction='right' />
-              <VersionCompareTable data={compareData} direction='right' />
+              <VersionCompareTable data={compareData} columns={attrFilterColumns} direction='right' />
               <VersionCompareIndex data={compareData} direction='right'/>
             </div>
           </div>

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

 .model-version-compare {
   .delete {
     color: red;
+    text-decoration: line-through;
   }
 
   .add {

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

 import { useEffect, useState } from 'react';
-import { Typography, Tooltip, Table } from 'antd';
+import { Typography, Table } from 'antd';
 
-const { Text, Paragraph, Title } = Typography;
+const { Title } = Typography;
 
 const VersionCompareTable = (props) => {
 
-  const { data, direction = 'left' } = props;
-  const [ columns, setColumns ] = useState([]);
+  const { data, direction = 'left', columns } = props;
   const [ tableData, setTableData ] = useState([]);
-
+  
   useEffect(() => {
-
-    const newColumns = [];
-    (data?.heads?.columnHead||[]).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 columnValue = [];
     if (direction==='left') {