版本对比

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

 import React from 'react';
-import { Drawer, Tabs } from 'antd';
+import { Drawer, Tabs, Space, Checkbox, Button } from 'antd';
 
 import VersionHistory from './VersionHistory';
 import VersionCompare from './VersionCompare';
@@ -8,6 +8,17 @@ const { TabPane } = Tabs;
 
 const HistoryAndVersionDrawer = (props) => {
   const { onCancel, visible, id } = props;
+  const [activeKey, setActiveKey] = React.useState('1')
+  const [onlyShowChange, setOnlyShowChange] = React.useState(false)
+  const [alterTrigger, setAlterTrigger] = React.useState(false)
+
+  const onOnlyShowChange = (e) => {
+    setOnlyShowChange(e.target.checked);
+  }
+
+  const onAlterClick = () => {
+    setAlterTrigger(!alterTrigger)
+  }
 
   return (
     <Drawer 
@@ -16,17 +27,25 @@ const HistoryAndVersionDrawer = (props) => {
       closable={true}
       width={'90%'}
       onClose={() => {
+        setActiveKey('1');
         onCancel && onCancel();
       }}
       visible={visible}
     >
     {
-      visible && <Tabs defaultActiveKey="1" type="card" size='small'>
+      visible && <Tabs activeKey={activeKey} type="card" size='small' tabBarExtraContent={
+        activeKey==='2'?<Space>
+          <Checkbox onChange={onOnlyShowChange} checked={onlyShowChange}>仅显示差异</Checkbox>
+          <Button size='small' onClick={onAlterClick}>生成ALTER</Button>
+        </Space>:null
+      }
+      onChange={(val) => { setActiveKey(val) }}
+      >
         <TabPane tab="版本历史" key="1">
           <VersionHistory id={id} />
         </TabPane>
         <TabPane tab="版本对比" key="2">
-          <VersionCompare id={id} />
+          <VersionCompare id={id} onlyShowChange={onlyShowChange} alterTrigger={alterTrigger} />
         </TabPane>
       </Tabs>
     }

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

 import React, { useEffect, useState, useRef } from 'react';
-import { Form, Select, Spin, Tooltip, Checkbox, Typography, Space, Button } from 'antd';
+import { Form, Select, Spin, Tooltip, Checkbox, Typography, Space, Button, Row, Col } from 'antd';
 
 import { dispatch, dispatchLatest } from '../../../../model'; 
 import { formatVersionDate, showMessage } from '../../../../util';
@@ -15,7 +15,7 @@ const { Option } = Select;
 
 const VersionCompare = (props) => {
 
-  const { id } = props;
+  const { id, onlyShowChange, alterTrigger } = props;
 
   const [ basicVersion, setBasicVersion ] = useState('');
   const [ basicVersions, setBasicVersions ] = useState([]);
@@ -24,7 +24,6 @@ const VersionCompare = (props) => {
   const [ loading, setLoading ] = useState(false);
   const [ compareData, setCompareData ] = useState(null);
   const [ loadingCompare, setLoadingCompare ] = useState(false);
-  const [ onlyShowChange, setOnlyShowChange ] = useState(true);
   const [ddlAlterParams, setAlterParams] = useState({
     visible: false,
     id: undefined,
@@ -33,6 +32,8 @@ const VersionCompare = (props) => {
     incVersion: undefined,
   })
 
+  const mountRef = React.useRef(false)
+
   useEffect(() => {
     if ((id||'') !== '') {
       getVersions();
@@ -41,6 +42,26 @@ const VersionCompare = (props) => {
     //eslint-disable-next-line react-hooks/exhaustive-deps
   }, [ id ])
 
+  useEffect(() => {
+    if (basicVersion!=='' && incVersion!=='') {
+      getCompare(basicVersion, incVersion, onlyShowChange);
+    }
+  }, [onlyShowChange])
+
+  useEffect(() => {
+    if (mountRef.current) {
+      setAlterParams({
+        visible: true,
+        id,
+        versions: basicVersions,
+        defaultBasicVersion: basicVersion,
+        defaultIncVersion: incVersion,
+      })
+    }
+
+    mountRef.current = true
+  }, [alterTrigger])
+
   const getVersions = () => {
     setLoading(true);
     dispatch({
@@ -133,28 +154,13 @@ const VersionCompare = (props) => {
     })
   }
 
-  const onAlterClick = () => {
-    setAlterParams({
-      visible: true,
-      id,
-      versions: basicVersions,
-      defaultBasicVersion: basicVersion,
-      defaultIncVersion: incVersion,
-    })
-  }
-
-  const onOnlyShowChange = (e) => {
-    setOnlyShowChange(e.target.checked);
-    if (basicVersion!=='' && incVersion!=='') {
-      getCompare(basicVersion, incVersion, e.target.checked);
-    }
-  }
-
   return (
     <div className='model-version-compare'>
-      <Form layout='inline'>
-        <Form.Item label='基线版本'>
-          <Select loading={loading} value={basicVersion} style={{ width: 300 }} onChange={onBasicChange}  >
+      <Form>
+        <Row gutter={15}>
+          <Col span={12}>
+            <Form.Item label='基线版本' style={{ marginBottom: 0 }}>
+              <Select loading={loading} value={basicVersion} style={{ width: '100%' }} onChange={onBasicChange}  >
               {
                 (basicVersions||[]).map((version, index) => {
 
@@ -178,8 +184,10 @@ const VersionCompare = (props) => {
               }
               </Select> 
             </Form.Item>
-        <Form.Item label='增量版本'>
-          <Select value={incVersion} style={{ width: 300 }} disabled={basicVersion===''} onChange={onIncChange}>
+          </Col>
+          <Col span={12}>
+            <Form.Item label='增量版本' style={{ marginBottom: 0 }}>
+              <Select value={incVersion} style={{ width: '100%' }} disabled={basicVersion===''} onChange={onIncChange}>
               {
                 (incVersions||[]).map((version, index) => {
                   return (
@@ -189,12 +197,8 @@ const VersionCompare = (props) => {
               }
               </Select>
             </Form.Item>
-        <Form.Item>
-          <Space>
-            <Checkbox onChange={onOnlyShowChange} checked={onlyShowChange}>仅显示差异</Checkbox>
-            <Button onClick={onAlterClick}>生成ALTER</Button>
-          </Space>
-        </Form.Item>
+          </Col>
+        </Row>
       </Form>
 
       <div className='py-5'>