模型对比

src/model/datamodel.js

@@ -210,6 +210,10 @@ export function* dataModelRollback(payload) {
   return yield call(datamodelerService.dataModelRollback, payload);
 }
 
+export function* compareOtherModel(payload) {
+  return yield call(datamodelerService.compareOtherModel, payload);
+}
+
 export function* getDataModelLocation(payload) {
   return yield call(datamodelerService.getDataModelLocation, payload);
 }

src/service/datamodeler.js

@@ -201,6 +201,10 @@ export function dataModelRollback(payload) {
   return PostJSON("/datamodeler/easyDataModelerCURD/reset", payload);
 }
 
+export function compareOtherModel(payload) {
+  return PostJSON("/datamodeler/easyDataModelerCURD/compareOtherModel", payload);
+}
+
 export function ddlGenerators() {
   return GetJSON("/datamodeler/easyDataModelerExport/ddlGenerators");
 }

src/view/Manage/Model/Component/branch-model-sync.jsx

@@ -57,7 +57,7 @@ const FC = (props) => {
       onCancel={() => { close() }}
     >
       <Spin spinning={waiting}>
-        <Diff item={item} />
+        <Basic item={item} />
       </Spin>
     </Modal>
   )
@@ -65,7 +65,7 @@ const FC = (props) => {
 
 export default FC
 
-const Diff = ({ item }) => {
+const Basic = ({ item }) => {
   const [loading, setLoading] = React.useState(false)
   const [data, setData] = React.useState()
   const [onlyShowChange, setOnlyShowChange] = React.useState(true)

src/view/Manage/Model/Component/model-compare-select-model.jsx

@@ -5,12 +5,18 @@ import { useDebounceEffect } from "ahooks"
 import { dispatch } from '../../../../model'
 import Table from '../../ResizeableTable'
 import produce from 'immer'
-import { paginate } from '../../../../util'
+import { paginate, showMessage } from '../../../../util'
+import ModelCompare from './model-compare'
 
 import './branch-select-model.less'
 
 const FC = ({ visible, item, onCancel }) => {
   const [animated, setAnimated] = React.useState(true)
+  const [modelCompareParams, setModelCompareParams] = React.useState({
+    visible: false,
+    leftItem: undefined,
+    rightItem: undefined
+  })
   const basicRef = React.useRef()
 
   React.useEffect(() => {
@@ -21,13 +27,23 @@ const FC = ({ visible, item, onCancel }) => {
     }
   }, [visible])
 
-  const close = (val = null) => {
+  const close = () => {
     setAnimated(true)
-    onCancel?.(val)
+    onCancel?.()
   }
 
   const save = () => {
-    close(basicRef.current.selectedRows??[])
+    const selectedRows = basicRef.current.selectedRows??[]
+    if ((selectedRows??[]).length === 0) {
+      showMessage('warn', '请选选择模型')
+      return
+    }
+    
+    setModelCompareParams({
+      visible: true,
+      leftItem: item,
+      rightItem: selectedRows[0]
+    })
   }
 
   const footer = React.useMemo(() => {
@@ -42,6 +58,7 @@ const FC = ({ visible, item, onCancel }) => {
   }, [close, save])
 
   return (
+    <>
       <Modal
         title='模型对比设置'
         visible={visible}
@@ -53,6 +70,17 @@ const FC = ({ visible, item, onCancel }) => {
       >
         { !animated && <Basic ref={basicRef} /> }
       </Modal>
+      <ModelCompare
+        {...modelCompareParams}
+        onCancel={() => {
+          setModelCompareParams({
+            visible: false,
+            leftItem: undefined,
+            rightItem: undefined,
+          })
+        }}
+      />
+    </>
   )
 }
 

src/view/Manage/Model/Component/model-compare.jsx

+import React from 'react'
+import { Modal, Checkbox, Spin } from 'antd'
+
+import { CompareDetail } from './VersionCompare'
+import { dispatch } from '../../../../model'
+
+const FC = ({ visible, leftItem, rightItem, onCancel }) => {
+  const close = () => {
+    onCancel?.()
+  }
+
+  return (
+    <Modal
+      title='模型对比'
+      visible={visible}
+      footer={null}
+      width='70%'
+      bodyStyle={{ padding: '15px', overflowX: 'auto', height: '80vh' }}
+      centered destroyOnClose
+      onCancel={() => { close() }}
+    >
+      <Basic leftItem={leftItem} rightItem={rightItem} /> 
+    </Modal>
+  )
+}
+
+export default FC
+
+const Basic = ({ leftItem, rightItem }) => {
+  const [loading, setLoading] = React.useState(false)
+  const [data, setData] = React.useState()
+  const [onlyShowChange, setOnlyShowChange] = React.useState(true)
+
+  React.useEffect(() => {
+    if (leftItem && rightItem) {
+      compareOtherModel()
+    }
+  }, [leftItem, rightItem, onlyShowChange])
+
+  const onOnlyShowChange = (e) => {
+    setOnlyShowChange(e.target.checked)
+  }
+
+  const compareOtherModel = () => {
+    setLoading(true)
+    dispatch({
+      type: 'datamodel.compareOtherModel',
+      payload: {
+        params: {
+          leftEasyDataModelerDataModelId: leftItem?.id,
+          rightEasyDataModelerDataModelId: rightItem?.id,
+          includeSame: !onlyShowChange,
+        }
+      },
+      callback: data => {
+        setLoading(false)
+        setData(data)
+      },
+      error: () => {
+        setLoading(false)
+      }
+    })
+  }
+
+  return (
+    <div className='model-version-compare'>
+      <div className='flex'>
+        <div style={{ flex: 1, paddingRight: 10, overflow: 'hidden'}}>
+          {`模型：${leftItem?.path}/${leftItem?.name}`}
+        </div>
+        <div style={{ flex: 1, paddingLeft: 10, overflow: 'hidden'}}>
+          <div className='flex' style={{ justifyContent: 'space-between', alignItems: 'center' }}>
+            <span>{`模型：${rightItem?.path}/${rightItem?.name}`}</span>
+            <Checkbox onChange={onOnlyShowChange} checked={onlyShowChange}>
+              仅显示差异
+            </Checkbox>
+          </div>
+        </div>
+      </div>
+
+      <div className='py-5'>    
+        <Spin spinning={loading} >
+          <CompareDetail data={data} />
+        </Spin>
+      </div>
+    </div>
+  )
+}
\ No newline at end of file