模型版本对比

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

+import React from 'react';
+import { Drawer, Tabs } from 'antd';
+
+import VersionCompare from './VersionCompare';
+
+const { TabPane } = Tabs;
+
+const HistoryAndVersionDrawer = (props) => {
+  const { onCancel, visible, id } = props;
+
+  return (
+    <Drawer 
+      title=''
+      placement="right"
+      closable={true}
+      width={1200}
+      onClose={() => {
+        onCancel && onCancel();
+      }}
+      visible={visible}
+    >
+      <Tabs defaultActiveKey="1" type="card" size='small'>
+        <TabPane tab="版本历史" key="1">
+          
+        </TabPane>
+        <TabPane tab="版本对比" key="2">
+          <VersionCompare />
+        </TabPane>
+      </Tabs>
+    </Drawer>
+  );
+}
+
+export default HistoryAndVersionDrawer;
\ No newline at end of file

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

 import React, { useState, useEffect, useRef } from "react";
 import { Space, Button, Tooltip, Modal, Divider, Pagination, Table } from 'antd';
-import { EditOutlined, DeleteOutlined  } from '@ant-design/icons';
+import { EditOutlined, DeleteOutlined, DownOutlined, UpOutlined, HistoryOutlined } from '@ant-design/icons';
 import SmoothScroll from 'smooth-scroll';
+import classnames from 'classnames';
 
 import { dispatchLatest } from '../../../../model'; 
 import { showMessage, getQueryParam, paginate } from '../../../../util';
@@ -11,7 +12,7 @@ import './ModelTable.less';
 
 const ModelTable = (props) => {
 
-  const { data, onChange, onItemAction, onSelect, catalogId, keyword, onAutoCreateTable, offset = null } = props;
+  const { data, onChange, onItemAction, onSelect, onHistory , catalogId, keyword, onAutoCreateTable, offset = null, modelId = null } = props;
   
   const [ selectedRowKeys, setSelectedRowKeys ] = useState([]);
   const columns = [
@@ -80,16 +81,17 @@ const ModelTable = (props) => {
         return (  
           <Space size='small'>
             {
-              record.editable && (
-                <React.Fragment>
-                  <Tooltip placement='bottom' title={'修改'}>
-                    <Button icon={<EditOutlined />} size='small' onClick={() => { editItem(record); }} />
-                  </Tooltip>
-                  <Tooltip placement='bottom' title={'删除'}>
-                    <Button icon={<DeleteOutlined />} size='small' onClick={() => { deleteItem(record); }} />
-                  </Tooltip>
-                </React.Fragment>
-              )
+              <React.Fragment>
+                <Tooltip placement='bottom' title={'修改'}>
+                  <Button icon={<EditOutlined />} size='small' disabled={!record.editable} onClick={() => { editItem(record); }} />
+                </Tooltip>
+                <Tooltip placement='bottom' title={'删除'}>
+                  <Button icon={<DeleteOutlined />} size='small' disabled={!record.editable} onClick={() => { deleteItem(record); }} />
+                </Tooltip>
+                <Tooltip placement='bottom' title={'版本历史'}>
+                  <Button icon={<HistoryOutlined />} size='small' onClick={() => { historyItem(record); }} />
+                </Tooltip>
+              </React.Fragment>
             }
             {
               (record?.state?.supportedActions||[]).length>0 && record?.state?.supportedActions.map((item, index) => {
@@ -234,6 +236,10 @@ const ModelTable = (props) => {
     });
   }
 
+  const historyItem = (record) => {
+    onHistory && onHistory(record.id);
+  }
+
   const onSelectChange = keys => {
     setSelectedRowKeys(keys);
     onSelect && onSelect(keys);
@@ -244,49 +250,63 @@ const ModelTable = (props) => {
     onChange: onSelectChange,
   };
 
-  const AnchorRow = (props) => {
-
-    const id = props['data-row-key']||'';
-
-    return (
-      <tr id={`data-model-${id}`} {...props} style={{ backgroundColor: (id===anchorId)?'#e7f7ff':'transparent' }} />
-    );
-  }
-
   const _data = paginate(data||[], pageNum, pageSize);
 
+  const classes = classnames('model-table', {
+    'model-table-sub': modelId
+  });  
+
   return (
-    <div className='model-table'>
+    <div className={classes}>
       <Table
-        components={{
-          body: {
-            row: AnchorRow
-          }
-        }}
-        rowSelection={rowSelection} 
+        rowSelection={modelId?null:rowSelection} 
         columns={columns||[]} 
         rowKey={'id'}
         dataSource={_data||[]}
-        pagination={false} 
-        sticky
-      />
-      <Pagination
-        className="text-center mt-3"
-        showSizeChanger
-        showQuickJumper
-        onChange={(_pageNum, _pageSize) => {
-          setPagination({ pageNum: _pageNum, pageSize: _pageSize || 20 });
+        pagination={false}
+        onRow={(record) => {
+          return {
+            id: `data-model-${record.id}`,
+            style: { backgroundColor: (record.id===anchorId)?'#e7f7ff':'transparent' }
+          }
         }}
-        onShowSizeChange={(_pageNum, _pageSize) => {
-          setPagination({ pageNum: _pageNum || 1, pageSize: _pageSize });
+        expandable={{
+          expandedRowRender: record => <ModelTable 
+            modelId={record.id}
+            {...props} 
+          />,
+          expandIcon: ({ expanded, onExpand, record }) => {
+            if (modelId) return null;
+
+            return expanded ? <UpOutlined onClick={e => onExpand(record, e)} /> : <DownOutlined onClick={e => onExpand(record, e)} />
+          },
+          rowExpandable: record => {
+            if (modelId) return false;
+
+            return true;
+          }
         }}
-        current={pageNum}
-        pageSize={pageSize}
-        defaultCurrent={1}
-        total={(data||[]).length}
-        pageSizeOptions={[10,20]}
-        showTotal={total => `共 ${total} 条`}
+        sticky={!modelId}
       />
+      {
+        !modelId && <Pagination
+          className="text-center mt-3"
+          showSizeChanger
+          showQuickJumper
+          onChange={(_pageNum, _pageSize) => {
+            setPagination({ pageNum: _pageNum, pageSize: _pageSize || 20 });
+          }}
+          onShowSizeChange={(_pageNum, _pageSize) => {
+            setPagination({ pageNum: _pageNum || 1, pageSize: _pageSize });
+          }}
+          current={pageNum}
+          pageSize={pageSize}
+          defaultCurrent={1}
+          total={(data||[]).length}
+          pageSizeOptions={[10,20]}
+          showTotal={total => `共 ${total} 条`}
+        />
+      }
       { contextHolder }
     </div>
   );

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

@@ -14,4 +14,10 @@
   .yy-divider-vertical {
     margin: 0 2px !important;
   }
+}
+
+.model-table-sub {
+  .yy-table {
+    height: auto !important;
+  }
 }
\ No newline at end of file

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

+import React, { useState } from 'react';
+import { Form, Select } from 'antd';
+
+const { Option } = Select;
+
+const versions = [
+  't_branch-2021-09-24_08-49(当前版本)',
+  't_branch-2021-09-23_08-49',
+  't_branch-2021-09-22_08-49',
+  't_branch-2021-09-21_08-49',
+];
+
+const VersionCompare = (props) => {
+
+  const [ basicVersion, setBasicVersion ] = useState('');
+  const [ incVersion, setIncVersion ] = useState('');
+  const [ incVersions, setIncVersions ] = useState([]);
+
+  const onBasicChange = (value) => {
+    setBasicVersion(value);
+    setIncVersion('');
+
+    const index = (versions||[]).indexOf(value);
+    setIncVersions((versions||[]).slice(0, index));
+  }
+
+  const onIncChange = (value) => {
+    setIncVersion(value);
+  }
+
+  return (
+    <div>
+      <Form layout='inline'>
+        <Form.Item label='基线版本'>
+          <Select value={basicVersion} style={{ width: 300 }} onChange={onBasicChange}  >
+          {
+            (versions||[]).map((version, index) => {
+              return (
+                <Option key={index} value={version||''} disabled={index===0}>{version||''}</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||''}>{version||''}</Option>
+              );
+            })
+          }
+          </Select>
+        </Form.Item>
+      </Form>
+    </div>
+  );
+}
+
+export default VersionCompare;
\ No newline at end of file

src/view/Manage/Model/index.jsx

@@ -13,6 +13,7 @@ import ImportWordModal from './Component/ImportWordModal';
 import ImportStockWordDrawer from './Component/ImportStockWordDrawer';
 import ExportDDLModal from './Component/ExportDDLModal';
 import RecatalogModal from './Component/RecatalogModal';
+import HistoryAndVersionDrawer from './Component/HistoryAndVersionDrawer';
 import { showMessage, showNotifaction } from '../../../util';
 import { dispatch, dispatchLatest } from '../../../model'; 
 import { Action, CatalogId, ModelerId, Hints, ModelerData } from '../../../util/constant';
@@ -35,6 +36,7 @@ class Model extends React.Component {
       importStockWordDrawerVisible: false,
       exportDDLModalVisible: false,
       recatalogModalVisible: false,
+      historyAndVersionDrawerVisible: false,
       catalogId: '',
       importModalAction: '',
       importModalAddMode: '',
@@ -67,7 +69,9 @@ class Model extends React.Component {
         callback: data => {
           this.setState({
             loadingStates: false,
-            modelStates: [{ name: 'all', id: '', cnName: '所有状态' }, ...(data?.subCatalogs||[])]
+            // modelStates: [{ name: 'all', id: '', cnName: '所有状态' }, ...(data?.subCatalogs||[])]
+            modelStates: data?.subCatalogs||[],
+            currentModelState: (data?.subCatalogs||[]).length>1?data?.subCatalogs[0].id:''
           });
         },
         error: () => {
@@ -83,7 +87,7 @@ class Model extends React.Component {
 
   onModelStateChange = (value) => {
     this.setState({ currentModelState: value }, () => {
-      this.setFilterData();
+      this.onTableChange();
     })
   }
 
@@ -99,7 +103,7 @@ class Model extends React.Component {
   }
 
   onTableChange = () => {
-    const { currentView, catalogId, keyword } = this.state;
+    const { currentView, catalogId, keyword, currentModelState } = this.state;
 
     this.setState({ loadingTableData: true }, () => {
       if (keyword === '') {
@@ -107,12 +111,11 @@ class Model extends React.Component {
           dispatch({
             type: 'datamodel.getCurrentDataModelCatalog',
             payload: {
-              easyDataModelerCatalogId: catalogId
+              easyDataModelerCatalogId: catalogId,
+              stateId: currentModelState
             },
             callback: data => {
-              this.setState({ loadingTableData: false, tableData: data.easyDataModelerDataModels||[] }, () => {
-                this.setFilterData();
-              });
+              this.setState({ loadingTableData: false, tableData: data.easyDataModelerDataModels||[], filterTableData: data.easyDataModelerDataModels||[] });
             },
             error: () => {
               this.setState({ loadingTableData: false });
@@ -139,11 +142,10 @@ class Model extends React.Component {
           type: 'datamodel.searchModel',
           payload: {
             term: keyword,
+            stateId: currentModelState
           },
           callback: data => {
-            this.setState({ loadingTableData: false, tableData: data||[] }, () => {
-              this.setFilterData();
-            });
+            this.setState({ loadingTableData: false, tableData: data||[], filterTableData: data||[] });
           },
           error: () => {
             this.setState({ loadingTableData: false });
@@ -166,6 +168,10 @@ class Model extends React.Component {
     });
   }
 
+  onHistory = (id) => {
+    this.setState({ historyAndVersionDrawerVisible: true, modelerId: id });
+  }
+
   onSearchInputChange = (e) => {
     this.setState({ keyword: e.target.value||'', catalogId: '' }, () => {
       if (e.target.value !== '') {
@@ -389,6 +395,10 @@ class Model extends React.Component {
     }
   }
 
+  onHistoryAndVersionDrawerCancel = () => {
+    this.setState({ historyAndVersionDrawerVisible: false });
+  }
+
   importStockModel = () => {
     this.setState({ importStockWordDrawerVisible: true });
   }
@@ -433,7 +443,7 @@ class Model extends React.Component {
   }
 
   render() {
-    const { importModalVisible, catalogId, loadingTableData, selectModelerIds, keyword, filterTableData, selectModelerNames, importModalAddMode, exportDDLModalVisible, templateCURDDrawerVisible, wordTemplateModalVisible, constraintDetailDrawerVisible, importWordModalVisible, importStockWordDrawerVisible , loadingStates, modelStates, currentModelState, currentView, recatalogModalVisible, exportDDLModalReference, currentModel, offset } = this.state;
+    const { importModalVisible, catalogId, loadingTableData, selectModelerIds, keyword, filterTableData, selectModelerNames, importModalAddMode, exportDDLModalVisible, templateCURDDrawerVisible, wordTemplateModalVisible, constraintDetailDrawerVisible, importWordModalVisible, importStockWordDrawerVisible , loadingStates, modelStates, currentModelState, currentView, recatalogModalVisible, exportDDLModalReference, currentModel, offset, historyAndVersionDrawerVisible, modelerId } = this.state;
 
     const content = (
       <ModelTable 
@@ -445,6 +455,7 @@ class Model extends React.Component {
         onSelect={this.onTableSelect} 
         onItemAction={this.onTableItemAction} 
         onAutoCreateTable={this.onAutoCreateTable}
+        onHistory={this.onHistory}
         {...this.props} />
     );
 
@@ -637,14 +648,17 @@ class Model extends React.Component {
         }
         </AppContext.Consumer>
 
-
         <RecatalogModal
           visible={recatalogModalVisible}
           ids={selectModelerIds}
           onCancel={this.onRecatalogModalCancel}
-        >
+        />
         
-        </RecatalogModal>
+        <HistoryAndVersionDrawer
+          id={modelerId}
+          visible={historyAndVersionDrawerVisible}
+          onCancel={this.onHistoryAndVersionDrawerCancel}
+        />
       </div>
     );
   }