Skip to content

S
szse
Commit b2a56000 by zhaochengxiang
Options

模型版本对比

parent aab96e06
Showing with 197 additions and 59 deletions
src/view/Manage/Model/Component/HistoryAndVersionDrawer.jsx 0 → 100644
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 0 → 100644
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>
);
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment