版本对比

src/service/datamodeler.js

@@ -158,7 +158,7 @@ export function getVersions(payload) {
 }
 
 export function compare(payload) {
-  return PostJSON("/datamodeler/easyDataModelerCURD/compare", payload);
+  return PostJSON("/datamodeler/easyDataModelerCURD/compareVersion", payload);
 }
 
 export function getDataModelByVersionId(payload) {

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

 import React, { useEffect, useState } from 'react';
 import { Form, Select, Spin, Tooltip, Checkbox } from 'antd';
-import showdown from 'showdown';
 
 import { dispatch, dispatchLatest } from '../../../../model'; 
 import { formatVersionDate } from '../../../../util';
+import VersionCompareHeader from './VersionCompareHeader';
+import VersionCompareTable from './VersionCompareTable';
+import VersionCompareIndex from './VersionCompareIndex';
 
 import './VersionCompare.less';
 
@@ -97,34 +99,7 @@ const VersionCompare = (props) => {
       },
       callback: data => {
         setLoadingCompare(false);
-
         setCompareData(data);
-
-        if (data?.left) {
-          Object.keys(data?.left).forEach((key, index) => {
-            var target = document.getElementById(`model-version-compare-left${index+1}`);
-            var converter = new showdown.Converter({});
-
-            converter.setFlavor('github');
-
-            var html = converter.makeHtml((data?.left[key]||'').toString());
-          
-            target.innerHTML = html;
-          })
-        }
-
-        if (data?.right) {
-          Object.keys(data?.right).forEach((key, index) => {
-            var target = document.getElementById(`model-version-compare-right${index+1}`);
-            var converter = new showdown.Converter({});
-
-            converter.setFlavor('github');
-
-            var html = converter.makeHtml((data?.right[key]||'').toString());
-
-            target.innerHTML = html;
-          })
-        }
       },
       error: () => {
         setLoadingCompare(false);
@@ -187,21 +162,15 @@ const VersionCompare = (props) => {
         <Spin spinning={loadingCompare} >
         {
           compareData && <div className='flex'>
-            <div style={{ flex: 1, borderRight: '1px solid #EFEFEF', paddingRight: 10}}>
-              <h4>基本信息</h4>
-              <div id="model-version-compare-left1"></div>
-              <h4>数据表结构</h4>
-              <div id="model-version-compare-left2"></div>
-              <h4>数据表索引</h4>
-              <div id="model-version-compare-left3"></div>
+            <div style={{ flex: 1, borderRight: '1px solid #EFEFEF', paddingRight: 10, overflow: 'hidden'}}>
+              <VersionCompareHeader data={compareData} />
+              <VersionCompareTable data={compareData} />
+              <VersionCompareIndex data={compareData} />
             </div>
-            <div style={{ flex: 1, paddingLeft: 10}}>
-              <h4>基本信息</h4>
-              <div id="model-version-compare-right1"></div>
-              <h4>数据表结构</h4>
-              <div id="model-version-compare-right2"></div>
-              <h4>数据表索引</h4>
-              <div id="model-version-compare-right3"></div>
+            <div style={{ flex: 1, paddingLeft: 10, overflow: 'hidden'}}>
+              <VersionCompareHeader data={compareData} direction='right' />
+              <VersionCompareTable data={compareData} direction='right' />
+              <VersionCompareIndex data={compareData} direction='right'/>
             </div>
           </div>
         }

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

 .model-version-compare {
-  table {
-    background: #fff;
-    border: solid 1px #ddd;
-    margin-bottom: 15px;
-    table-layout: auto;
-    display: table;
-    border-collapse: separate;
-    border-spacing: 2px;
-  }
-
-  table thead {
-    background: #F5F5F5;
-  }
-
-  table thead tr th, table tfoot tr th, table tfoot tr td, table tbody tr th, table tbody tr td, table tr td {
-    display: table-cell;
-    line-height: 1.125rem;
-  }
-
-  table tr th, table tr td {
-    color: #222;
-    font-size: 0.875rem;
-    padding: 0.5625rem 0.625rem;
-    text-align: left;
-  }
-
-  table thead tr th, table thead tr td {
-    color: #222;
-    font-size: 0.875rem;
-    font-weight: bold;
-    padding: 0.5rem 0.625rem 0.625rem;
-  }
-
-  table tr.even, table tr.alt, table tr:nth-of-type(even) {
-    background: #F9F9F9;
-  }
-
-  del {
+  .delete {
     color: red;
   }
 
-  strong {
-    em {
-      font-style: normal;
-      color: #0069ac;
-    }
+  .add {
+    color: #0069ac;
   }
 }
\ No newline at end of file

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

+
+import { Typography, Tooltip } from 'antd';
+
+const { Text, Paragraph, Title } = Typography;
+
+const VersionCompareHeader = (props) => {
+
+  const { data, direction = 'left' } = props;
+
+  return (
+    <Typography>
+      <Title level={5}>基本信息</Title>
+      {
+        (data?.heads?.tableHead||[]).map((item, index) => {
+
+          let columnValue = {};
+          if (direction==='left' && (data?.left?.tableValue||[]).length>index) {
+            columnValue = data?.left?.tableValue[index];
+          } else if (direction==='right' && (data?.left?.tableValue||[]).length>index) {
+            columnValue = data?.left?.tableValue[index];
+          }
+
+          let stateClassName = '';
+          if (columnValue?.state==='ADD' || columnValue?.state==='UPDATE') {
+            stateClassName = 'add';
+          } else if (columnValue?.state === 'DELETE') {
+            stateClassName = 'delete';
+          }
+
+          return (
+            <Paragraph>
+              <Tooltip key={index} title={columnValue.value||''}>
+                <Text ellipsis={true}>
+                {item||''}:&nbsp;<Text className={stateClassName}>{columnValue.value||''}</Text>
+                </Text>
+              </Tooltip>
+            </Paragraph>
+          );
+        })
+      }
+    </Typography>
+  );
+}
+
+export default VersionCompareHeader;

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

+import { useEffect, useState } from 'react';
+import { Typography, Tooltip, Table } from 'antd';
+
+const { Text, Paragraph, Title } = Typography;
+
+const VersionCompareIndex = (props) => {
+
+  const { data, direction = 'left' } = props;
+  const [ columns, setColumns ] = useState([]);
+  const [ tableData, setTableData ] = useState([]);
+
+  useEffect(() => {
+
+    const newColumns = [];
+    (data?.heads?.indexHead||[]).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 indexValue = [];
+    if (direction==='left') {
+      indexValue = data?.left?.indexValue||[];
+    } else if (direction==='right') {
+      indexValue = data?.right?.indexValue||[];
+    }
+
+    (indexValue||[]).forEach((attrItem) => {
+      let newAttrItem = {};
+      (attrItem||[]).forEach((item, index) => {
+        newAttrItem[`column${index}`] = item;
+      })
+      newTableData.push(newAttrItem);
+    })
+
+    setTableData(newTableData);
+
+  }, [ data ])
+
+  return (
+    <div>
+      <Typography>
+        <Title level={5}>数据表索引</Title>
+      </Typography>
+      <Table
+        columns={columns||[]}
+        dataSource={tableData}
+        pagination={false}
+      />
+    </div>
+  );
+}
+
+export default VersionCompareIndex;
\ No newline at end of file

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

+import { useEffect, useState } from 'react';
+import { Typography, Tooltip, Table } from 'antd';
+
+const { Text, Paragraph, Title } = Typography;
+
+const VersionCompareTable = (props) => {
+
+  const { data, direction = 'left' } = props;
+  const [ columns, setColumns ] = useState([]);
+  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') {
+      columnValue = data?.left?.columnValue||[];
+    } else if (direction==='right') {
+      columnValue = data?.right?.columnValue||[];
+    }
+
+    (columnValue||[]).forEach((attrItem) => {
+      let newAttrItem = {};
+      (attrItem||[]).forEach((item, index) => {
+        newAttrItem[`column${index}`] = item;
+      })
+      newTableData.push(newAttrItem);
+    })
+
+    setTableData(newTableData);
+
+  }, [ data ])
+
+  return (
+    <div>
+      <Typography>
+        <Title level={5}>数据表结构</Title>
+      </Typography>
+      <Table
+        columns={columns||[]}
+        dataSource={tableData}
+        pagination={false}
+      />
+    </div>
+  );
+}
+
+export default VersionCompareTable;
\ No newline at end of file