版本对比

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,68 +154,51 @@ 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}  >
-          {
-            (basicVersions||[]).map((version, index) => {
-
-              if (index === 0) {
-                return (
-                  <Option key={index} value={version.id||''} disabled={true}>
-                    <Tooltip title={'最近版本只能在增量版本中被选中'}>
+      <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) => {
+
+                  if (index === 0) {
+                    return (
+                      <Option key={index} value={version.id||''} disabled={true}>
+                        <Tooltip title={'最近版本只能在增量版本中被选中'}>
+                        {version.name||''}
+                        </Tooltip>
+                      </Option>
+                    )
+                  };
+
+                  return (
+                    <Option key={index} value={version.id||''}>
                     {version.name||''}
-                    </Tooltip>
-                  </Option>
-                )
-              };
-
-              return (
-                <Option key={index} value={version.id||''}>
-                {version.name||''}
-                </Option>
-              );
-
-            })
-          }
-          </Select>
-        </Form.Item>
-        <Form.Item label='增量版本'>
-          <Select value={incVersion} style={{ width: 300 }} disabled={basicVersion===''} onChange={onIncChange}>
-          {
-            (incVersions||[]).map((version, index) => {
-              return (
-                <Option key={index} value={version.id||''}>{version.name||''}</Option>
-              );
-            })
-          }
-          </Select>
-        </Form.Item>
-        <Form.Item>
-          <Space>
-            <Checkbox onChange={onOnlyShowChange} checked={onlyShowChange}>仅显示差异</Checkbox>
-            <Button onClick={onAlterClick}>生成ALTER</Button>
-          </Space>
-        </Form.Item>
+                    </Option>
+                  );
+
+                })
+              }
+              </Select> 
+            </Form.Item>
+          </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 (
+                    <Option key={index} value={version.id||''}>{version.name||''}</Option>
+                  );
+                })
+              }
+              </Select>
+            </Form.Item>
+          </Col>
+        </Row>
       </Form>
 
       <div className='py-5'>