Skip to content

S
szse
Commit acc89857 by zhaochengxiang
Options

调整

parent e23e98cb
Showing with 240 additions and 283 deletions
src/view/Manage/AssetManage/components/AssetDetail.jsx
......@@ -12,11 +12,11 @@ const AssetDetail = (props)=>{
useEffect(() => {
if ((id||'') !== '') {
if (visible && (id||'') !== '') {
getAssetThenGetAssetName();
}
//eslint-disable-next-line react-hooks/exhaustive-deps
}, [ id ])
}, [ visible ])
const getAssetThenGetAssetName = () => {
dispatch({
......
src/view/Manage/AssetManage/components/AssetEdit.jsx
......@@ -4,6 +4,8 @@ import { Modal, Form, Input, Space, Button } from 'antd';
import { showMessage } from '../../../../util';
import { dispatch } from '../../../../model';
import './AssetEdit.less';
const AssetEdit = (props) => {
const { onCancel, visible, action, id, nodeId } = props;
......@@ -118,6 +120,7 @@ const AssetEdit = (props) => {
return (
<Modal
forceRender
className='asset-edit'
title='资产信息'
visible={ visible }
width={ 600 }
......
src/view/Manage/AssetManage/components/AssetEdit.less 0 → 100644
.asset-edit {
.yy-form {
max-height: 500px !important;
overflow: auto !important;
}
}
\ No newline at end of file
src/view/Manage/AssetManage/components/AssetTable.jsx
......@@ -131,6 +131,10 @@ const AssetTable = (props) =>{
})
}
const importAsset = () => {
setImportAssetVisible(true);
}
const exportAsset = () => {
if ((selectedKeys||[]).length === 0) {
showMessage('warn', '请先选择资产');
......@@ -202,12 +206,12 @@ const AssetTable = (props) =>{
}
}
const onImportAssetVisibleChange = (visible = false, refresh = false) => {
const onImportAssetCancel = (visible = false, refresh = false) => {
setImportAssetVisible(visible);
refresh && getTable();
}
const onImportElementVisibleChange = (visible = false, tip = '') => {
const onImportElementCancel = (visible = false, tip = '') => {
setImportElementVisible(visible);
if (tip && tip!== '') {
......@@ -220,6 +224,10 @@ const AssetTable = (props) =>{
refresh && getTable();
}
const onImportElementBtnClick = () => {
setImportElementVisible(true);
}
const onExportElementBtnClick = () => {
window.open('/api/dataassetmanager/elementApi/export');
}
......@@ -254,15 +262,7 @@ const AssetTable = (props) =>{
<div>
<Space>
<span>资产要素:</span>
<Popover
placement="bottom"
content={<ImportElement onCancel={onImportElementVisibleChange} />}
title='资产要素导入'
visible={importElementVisible}
onVisibleChange={onImportElementVisibleChange}
trigger="hover">
<Button type="primary">导入</Button>
</Popover>
<Button type="primary" onClick={onImportElementBtnClick}>导入</Button>
<Button type="primary" onClick={onExportElementBtnClick}>导出</Button>
<Popover
placement="bottom"
......@@ -278,17 +278,7 @@ const AssetTable = (props) =>{
<span>资产:</span>
<Button type="primary" onClick={ addAsset }>新增</Button>
<Button type="primary" danger onClick={ deleteAssets } >删除</Button>
<Popover
placement="bottomRight"
content={ <ImportAsset nodeId={nodeId} onCancel={onImportAssetVisibleChange} /> }
title='资产导入'
visible={importAssetVisible}
onVisibleChange={onImportAssetVisibleChange}
trigger="hover">
<Button type="primary">
导入
</Button>
</Popover>
<Button type="primary" onClick={importAsset} >导入</Button>
<Button type="primary" onClick={exportAsset} >导出</Button>
</Space>
</div>
......@@ -349,7 +339,6 @@ const AssetTable = (props) =>{
showTotal={total => `共 ${total} 条`}
/>
</Checkbox.Group>
{/* <AssetModal visible={visible.visible} attrBox={attrBox} editBox={editBox} addType={visible.addtype} handleCancle={handleCancle} nodeId={nodeId} setPageNumber={setPageNumber} pageNumber={pageNumber}/> */}
<AssetEdit
visible={assetEditVisible}
action={assetEditAction}
......@@ -362,6 +351,15 @@ const AssetTable = (props) =>{
id={currentAssetId}
onCancel={onAssetDetailCancel}
/>
<ImportElement
visible={importElementVisible}
onCancel={onImportElementCancel}
/>
<ImportAsset
visible={importAssetVisible}
nodeId={nodeId}
onCancel={onImportAssetCancel}
/>
{contextHolder}
</Card>
)
......
src/view/Manage/AssetManage/components/ImportAsset.jsx
import React from 'react';
import { Button, Upload, Space } from 'antd';
import { Button, Upload, Modal } from 'antd';
import { DownloadOutlined, UploadOutlined } from '@ant-design/icons';
import { dispatch } from '../../../../model';
......@@ -43,7 +43,7 @@ class ImportAsset extends React.Component {
type: 'assetmanage.assetImport',
payload: { fileList: fileList[0], params: { parentPath: data.path||'' } },
callback: () => {
this.setState({ confirmLoading: false }, () => {
this.setState({ confirmLoading: false, fileList: [] }, () => {
onCancel && onCancel(false, true);
});
},
......@@ -58,7 +58,7 @@ class ImportAsset extends React.Component {
render() {
const { onCancel } = this.props;
const { onCancel, visible } = this.props;
const { fileList, confirmLoading } = this.state;
const uploadProps = {
......@@ -79,7 +79,18 @@ class ImportAsset extends React.Component {
};
return (
<div style={{ width: 300 }}>
<Modal
forceRender
visible={visible}
title='资产导入'
width={520}
confirmLoading={confirmLoading}
onCancel={() => {
this.reset();
onCancel && onCancel();
}}
onOk={this.onOk}
>
<div>
<Button icon={<DownloadOutlined />} onClick={ this.downloadTemplate }>
模版下载
......@@ -92,16 +103,7 @@ class ImportAsset extends React.Component {
</Button>
</Upload>
</div>
<div className='mt-3 d-flex pt-3' style={{ borderTop: '1px solid rgba(0, 0, 0, 0.06)' }} >
<Space style={{ marginLeft: 'auto' }}>
<Button onClick={() => {
this.reset();
onCancel && onCancel();
}}>取消</Button>
<Button type='primary' onClick={this.onOk} loading={confirmLoading} >确定</Button>
</Space>
</div>
</div>
</Modal>
)
}
}
......
src/view/Manage/AssetManage/components/ImportDirectory.jsx
......@@ -46,14 +46,14 @@ const ImportDirectory = (props) => {
let payload;
if (row.type === 'root') {
payload = {
fileList: fileList[0].originFileObj
fileList: fileList[0]
};
} else {
payload = {
params: {
parentPath: dir.path
},
fileList: fileList[0].originFileObj
fileList: fileList[0]
};
}
......
src/view/Manage/AssetManage/components/ImportElement.jsx
import React, { useState } from 'react';
import { Button, Upload, Space } from 'antd';
import { Button, Upload, Modal } from 'antd';
import { DownloadOutlined, UploadOutlined } from '@ant-design/icons';
import { dispatchLatest } from '../../../../model';
import { showMessage } from '../../../../util';
const ImportElement = (props) => {
const { onCancel } = props;
const { onCancel, visible } = props;
const [ fileList, setFileList ] = useState([]);
const [ confirmLoading, setConfirmLoading ] = useState(false);
......@@ -59,7 +59,18 @@ const ImportElement = (props) => {
}
return (
<div style={{ width: 300 }}>
<Modal
forceRender
visible={visible}
title='资产要素导入'
width={520}
confirmLoading={confirmLoading}
onCancel={() => {
reset();
onCancel && onCancel();
}}
onOk={handleOk}
>
<div>
<Button icon={<DownloadOutlined />} onClick={ downloadTemplate }>
模版下载
......@@ -72,16 +83,7 @@ const ImportElement = (props) => {
</Button>
</Upload>
</div>
<div className='mt-3 d-flex pt-3' style={{ borderTop: '1px solid rgba(0, 0, 0, 0.06)' }} >
<Space style={{ marginLeft: 'auto' }}>
<Button onClick={() => {
reset();
onCancel && onCancel();
}}>取消</Button>
<Button type='primary' onClick={handleOk} loading={confirmLoading} >确定</Button>
</Space>
</div>
</div>
</Modal>
)
}
......
src/view/Manage/Model/Component/ExportModal.jsx → src/view/Manage/Model/Component/ExportDDLModal.jsx
import React from 'react';
import { Modal, Radio, Button, Select, Input } from 'antd';
import copy from "copy-to-clipboard";
import { Modal, Button, Select, Input } from 'antd';
import { showMessage } from '../../../../util';
import { dispatch } from '../../../../model';
const { Option } = Select;
const modes = [
{
title: '导出DDL',
key: 'ddl',
},
{
title: '导出Erwin',
key: 'erwin',
},
{
title: '导出Excel',
key: 'excel',
},
{
title: '导出Word',
key: 'word',
},
]
class ExportModal extends React.Component {
class ExportDDLModal extends React.Component {
constructor() {
super();
this.state = {
selectedKey: '',
loadingDDLGenerators: false,
ddlGenerators: [],
selectDDLGeneratorName: null,
......@@ -61,93 +40,49 @@ class ExportModal extends React.Component {
})
}
onModeClick = (e) => {
this.setState({ selectedKey: e.target.value });
}
handleOk = () => {
const { onCancel, ids } = this.props;
const { selectedKey, ddlGenerators, loadingDDLGenerators, selectDDLGeneratorName } = this.state;
const { ids } = this.props;
const { ddlGenerators, loadingDDLGenerators, selectDDLGeneratorName } = this.state;
if (selectedKey === '') {
showMessage('info', '请先选择导出方式');
if (loadingDDLGenerators) {
showMessage('info', '正在加载ddl支持的数据库类型');
return;
}
if (selectedKey === 'excel') {
window.open(`/api/datamodeler/easyDataModelerExport/excel?ids=${ids.join(',')}`);
this.reset();
onCancel && onCancel();
} else if (selectedKey === 'word') {
window.open(`/api/datamodeler/easyDataModelerExport/word?ids=${ids.join(',')}`);
this.reset();
onCancel && onCancel();
} else if (selectedKey === 'ddl') {
if (loadingDDLGenerators) {
showMessage('info', '正在加载ddl支持的数据库类型');
return;
}
if ((ddlGenerators||[]).length===0) {
showMessage('info', 'ddl支持的数据库类型没有查找到,重新查找中');
this.getDDLGenerators();
return;
}
if (!selectDDLGeneratorName || selectDDLGeneratorName==='') {
showMessage('info', '请选择ddl支持的数据库类型');
return;
}
if ((ddlGenerators||[]).length===0) {
showMessage('info', 'ddl支持的数据库类型没有查找到,重新查找中');
this.getDDLGenerators();
return;
}
this.setState({ confirmLoading: true }, () => {
dispatch({
type: 'datamodel.exportDDLString',
payload: {
ids: ids.join(','),
ddlGeneratorName: selectDDLGeneratorName
},
callback: data => {
this.setState({ confirmLoading: false }, () => {
this.setState({ ddlExportSuccess: true, ddlExportStrings: data||[], selectModalerNameKey: 0, ddlExportString: data[0]||'' });
});
},
error: () => {
this.setState({ confirmLoading: false });
}
});
})
if (!selectDDLGeneratorName || selectDDLGeneratorName==='') {
showMessage('info', '请选择ddl支持的数据库类型');
return;
}
} else if (selectedKey === 'erwin') {
this.setState({ confirmLoading: true }, () => {
dispatch({
type: 'datamodel.exportERWinString',
payload: {
ids: ids.join(','),
},
callback: data => {
this.setState({ confirmLoading: false }, () => {
copy(JSON.stringify(data));
this.reset();
onCancel && onCancel(selectedKey);
});
},
error: () => {
this.setState({ confirmLoading: false });
}
});
})
this.setState({ confirmLoading: true }, () => {
dispatch({
type: 'datamodel.exportDDLString',
payload: {
ids: ids.join(','),
ddlGeneratorName: selectDDLGeneratorName
},
callback: data => {
this.setState({ confirmLoading: false }, () => {
this.setState({ ddlExportSuccess: true, ddlExportStrings: data||[], selectModalerNameKey: 0, ddlExportString: data[0]||'' });
});
},
error: () => {
this.setState({ confirmLoading: false });
}
});
})
}
}
reset = () => {
this.setState({ selectedKey: '', selectDDLGeneratorName: '', ddlExportSuccess: false, ddlExportStrings: [] });
this.setState({ selectDDLGeneratorName: '', ddlExportSuccess: false, ddlExportStrings: [] });
}
onModalerNameChange = (value) => {
......@@ -161,9 +96,9 @@ class ExportModal extends React.Component {
render() {
const { visible, onCancel, names } = this.props;
const { selectedKey, ddlGenerators, loadingDDLGenerators, confirmLoading, selectDDLGeneratorName, ddlExportSuccess, ddlExportString, selectModalerNameKey } = this.state;
const { ddlGenerators, loadingDDLGenerators, confirmLoading, selectDDLGeneratorName, ddlExportSuccess, ddlExportString, selectModalerNameKey } = this.state;
const title = ddlExportSuccess ? 'DDL导出详情' : '导出方式';
const title = ddlExportSuccess ? 'DDL导出详情' : 'DDL导出';
const footer = ddlExportSuccess ? ([
<Button
......@@ -228,35 +163,22 @@ class ExportModal extends React.Component {
</div>
<Input.TextArea value={ddlExportString||''} autoSize={{minRows:4,maxRows:20}} ></Input.TextArea>
</> : <>
<Radio.Group value={selectedKey} onChange={this.onModeClick}>
{
modes && modes.map((mode, index) => {
return (
<Radio key={index} value={mode.key||''}>
{ mode.title||'' }
</Radio>
);
})
}
</Radio.Group>
{
selectedKey==='ddl' && <div className='d-flex mt-5' style={{ alignItems: 'center' }}>
<span className='mr-2' >数据库类型: </span>
<Select
value={selectDDLGeneratorName}
loading={loadingDDLGenerators}
style={{ width: 180 }}
placeholder='请选择数据库类型'
onChange={this.onDDLGeneratorChange}
>
{
ddlGenerators && ddlGenerators.map((ddlGenerator, index) => {
return <Option key={index} value={ddlGenerator.name||''}>{ddlGenerator.cnName||''}</Option>
})
}
</Select>
</div>
}
<div className='d-flex' style={{ alignItems: 'center' }}>
<span className='mr-2' >数据库类型: </span>
<Select
value={selectDDLGeneratorName}
loading={loadingDDLGenerators}
style={{ width: 180 }}
placeholder='请选择数据库类型'
onChange={this.onDDLGeneratorChange}
>
{
ddlGenerators && ddlGenerators.map((ddlGenerator, index) => {
return <Option key={index} value={ddlGenerator.name||''}>{ddlGenerator.cnName||''}</Option>
})
}
</Select>
</div>
</>
}
</>
......@@ -265,4 +187,4 @@ class ExportModal extends React.Component {
}
}
export default ExportModal
\ No newline at end of file
export default ExportDDLModal;
\ No newline at end of file
src/view/Manage/Model/Component/ImportModal.jsx
import React, { useState, useEffect } from 'react';
import { Modal, Radio, Button, Form } from 'antd';
import { Modal, Button, Form } from 'antd';
// import ImportLog from './ImportLog';
import ImportExcel from './ImportExcel';
......@@ -10,29 +10,9 @@ import ImportAction from './ImportAction';
import { dispatchLatest } from '../../../../model';
import { showMessage } from '../../../../util';
const modes = [
{
title: 'Excel导入',
key: 'excel'
},
{
title: 'Excel复制粘贴',
key: 'excel-copy',
},
// {
// title: 'Erwin',
// key: 'erwin',
// },
// {
// title: '元数据输入',
// key: 'metadata',
// },
]
const ImportModal = (props) => {
const { catalogId, visible, onCancel, action, modelerId } = props;
const { catalogId, visible, onCancel, action, addMode, modelerId } = props;
const [ step, setStep ] = useState(0);
const [ radioValue, setRadioValue ] = useState('');
const [ excelFiles, setExcelFiles ] = useState([]);
const [ hints, setHints ] = useState([]);
const [ modelerData, setModelerData ] = useState({});
......@@ -46,33 +26,18 @@ const ImportModal = (props) => {
if (action === 'add') {
setStep(0);
} else {
setStep(2);
setStep(1);
}
}
}, [visible, catalogId, action])
const onRadioChange = e => {
setRadioValue(e.target.value);
};
const prev = () => {
setStep(step-1);
}
const next = () => {
if (step===0) {
if (radioValue === '') {
showMessage('warn', '请先选择创建方式');
} else {
setStep(step+1);
}
return;
}
if (step===1 && radioValue==='excel') {
if (step===0 && addMode==='excel') {
if ((excelFiles||[]).length === 0) {
showMessage('warn', '请先选择文件上传');
} else {
......@@ -93,7 +58,7 @@ const ImportModal = (props) => {
}
return;
} else if (step===1 && radioValue==='excel-copy') {
} else if (step===0 && addMode==='excel-copy') {
if ((hints||[]).length === 0) {
showMessage('warn', '请先从Excel文件中复制内容');
......@@ -157,7 +122,6 @@ const ImportModal = (props) => {
const reset = () => {
setStep(0);
setRadioValue('');
setExcelFiles([]);
setHints([]);
setModelerData({});
......@@ -178,15 +142,13 @@ const ImportModal = (props) => {
let title = '';
if (action === 'add') {
if (step === 0) {
title = '创建方式';
} else if (step===1 && radioValue==='excel') {
if (step===0 && addMode==='excel') {
title = 'excel导入';
} else if (step===1 && radioValue==='excel-copy') {
} else if (step===0 && addMode==='excel-copy') {
title = 'excel复制粘贴导入';
} else if (step===2 && radioValue==='excel') {
} else if (step===1 && addMode==='excel') {
title = '模型创建-excel导入';
} else if (step===2 && radioValue=== 'excel-copy') {
} else if (step===1 && addMode=== 'excel-copy') {
title = '模型创建-excel复制粘贴导入';
}
} else if (action === 'edit') {
......@@ -210,7 +172,7 @@ const ImportModal = (props) => {
key="1"
type="primary"
loading={confirmLoading}
style={{ display: (step<2)?'':'none' }}
style={{ display: (step===0)?'':'none' }}
onClick={next}
>
下一步
......@@ -219,7 +181,7 @@ const ImportModal = (props) => {
key="2"
type="primary"
loading={confirmLoading}
style={{ display: (step===2)?'':'none' }}
style={{ display: (step===1)?'':'none' }}
onClick={save}
>
保存
......@@ -260,7 +222,7 @@ const ImportModal = (props) => {
forceRender
visible={visible}
title={title}
width={step===2?1300:520}
width={step===1?1300:520}
maskClosable={false}
onCancel={() => {
reset();
......@@ -270,35 +232,19 @@ const ImportModal = (props) => {
>
<>
{
step===0 && <>
<Radio.Group value={radioValue} onChange={onRadioChange}>
{
modes && modes.map((mode, index) => {
return (
<Radio key={index} value={mode.key||''}>
{ mode.title||'' }
</Radio>
);
})
}
</Radio.Group>
{/* <ImportLog /> */}
</>
}
{
step===1 && radioValue==='excel' && <ImportExcel onChange={onImportExcelChange} />
step===0 && addMode==='excel' && <ImportExcel onChange={onImportExcelChange} />
}
{
step===1 && radioValue==='excel-copy' && <ImportExcelCopy onChange={onImportExcelCopyChange} />
step===0 && addMode==='excel-copy' && <ImportExcelCopy onChange={onImportExcelCopyChange} />
}
{
step===1 && radioValue==='erwin' && <></>
step===0 && addMode==='erwin' && <></>
}
{
step===1 && radioValue==='metadata' && <ImportMetadata />
step===0 && addMode==='metadata' && <ImportMetadata />
}
{
step===2 && <ImportAction hints={hints} onChange={onActionChange} action={action} modelerId={modelerId} form={form} />
step===1 && <ImportAction hints={hints} onChange={onActionChange} action={action} modelerId={modelerId} form={form} />
}
</>
</Modal>
......
src/view/Manage/Model/Component/ModelTable.less
.model-table {
.yy-table {
height: calc(100vh - 64px - 30px - 53px - 20px) !important;
height: calc(100vh - 64px - 30px - 53px - 53px - 20px) !important;
overflow: auto !important;
}
}
\ No newline at end of file
src/view/Manage/Model/index.jsx
import React from 'react';
import { Row, Col, Button, Input } from 'antd';
import { Row, Col, Button, Input, Space } from 'antd';
import copy from "copy-to-clipboard";
import ModelTree from './Component/ModelTree';
import ModelTable from './Component/ModelTable';
import ImportModal from './Component/ImportModal';
import ExportModal from './Component/ExportModal';
import ExportDDLModal from './Component/ExportDDLModal';
import { showMessage, showNotifaction } from '../../../util';
import { dispatch } from '../../../model';
......@@ -14,15 +15,17 @@ class Model extends React.Component {
super();
this.state = {
importModalVisible: false,
exportModalVisible: false,
exportDDLModalVisible: false,
catalogId: '',
importModalAction: '',
importModalAddMode: '',
tableData: [],
filterTableData: [],
loadingTableData: false,
selectModelerIds: [],
selectModelerNames: [],
keyword: '',
exportErwinLoading: false,
}
}
......@@ -80,17 +83,27 @@ class Model extends React.Component {
}
onImportBtnClick = () => {
onImportExcelBtnClick = () => {
const { catalogId } = this.state;
if (!catalogId || catalogId==='') {
showMessage('info', '请先选择目录');
return;
}
this.setState({ importModalVisible: true, importModalAction: 'add' });
this.setState({ importModalVisible: true, importModalAction: 'add', importModalAddMode: 'excel' });
}
onExportBtnClick = () => {
onImportExcelCopyBtnClick = () => {
const { catalogId } = this.state;
if (!catalogId || catalogId==='') {
showMessage('info', '请先选择目录');
return;
}
this.setState({ importModalVisible: true, importModalAction: 'add', importModalAddMode: 'excel-copy' });
}
onExportDDLBtnClick = () => {
const { selectModelerIds, tableData } = this.state;
if ((selectModelerIds||[]).length === 0) {
showMessage('info', '请先选择模型');
......@@ -105,7 +118,57 @@ class Model extends React.Component {
}
});
this.setState({ exportModalVisible: true, selectModelerNames: _selectModelerNames });
this.setState({ exportDDLModalVisible: true, selectModelerNames: _selectModelerNames });
}
onExportErwinBtnClick = () => {
const { selectModelerIds } = this.state;
if ((selectModelerIds||[]).length === 0) {
showMessage('info', '请先选择模型');
return;
}
this.setState({ exportErwinLoading: true }, () => {
dispatch({
type: 'datamodel.exportERWinString',
payload: {
ids: selectModelerIds.join(','),
},
callback: data => {
this.setState({ exportErwinLoading: false }, () => {
copy(JSON.stringify(data));
showNotifaction('提示', 'Erwin信息已成功复制到剪贴板', 5);
});
},
error: () => {
this.setState({ exportErwinLoading: false });
}
});
})
}
onExportExcelBtnClick = () => {
const { selectModelerIds } = this.state;
if ((selectModelerIds||[]).length === 0) {
showMessage('info', '请先选择模型');
return;
}
window.open(`/api/datamodeler/easyDataModelerExport/excel?ids=${selectModelerIds.join(',')}`);
}
onExportWordBtnClick = () => {
const { selectModelerIds } = this.state;
if ((selectModelerIds||[]).length === 0) {
showMessage('info', '请先选择模型');
return;
}
window.open(`/api/datamodeler/easyDataModelerExport/word?ids=${selectModelerIds.join(',')}`);
}
onImportExcelVisibleChange = (visible = false, hint = null) => {
this.setState({ importExcelVisible: visible });
}
onImportModalCancel = (refresh = false) => {
......@@ -113,16 +176,12 @@ class Model extends React.Component {
refresh && this.onTableChange();
}
onExportModalCancel = (selectedKey = '') => {
this.setState({ exportModalVisible: false });
if (selectedKey === 'erwin') {
showNotifaction('提示', 'Erwin信息已成功复制到剪贴板', 4);
}
onExportDDLModalCancel = () => {
this.setState({ exportDDLModalVisible: false });
}
render() {
const { importModalVisible, exportModalVisible, catalogId, importModalAction, loadingTableData, modelerId, selectModelerIds, keyword, filterTableData, selectModelerNames } = this.state;
const { importModalVisible, catalogId, importModalAction, loadingTableData, modelerId, selectModelerIds, keyword, filterTableData, selectModelerNames, importModalAddMode, exportErwinLoading, exportDDLModalVisible } = this.state;
return (
<div style={{ backgroundColor: '#ECEEF3' }}>
......@@ -141,8 +200,8 @@ class Model extends React.Component {
justifyContent: 'space-between'
}}
>
<div className='d-flex' style={{ alignItems: 'center' }}>
<span className='mr-3'>模型搜索:</span>
<Space>
<span>模型搜索:</span>
<Input
placeholder="请输入模型名称或者英文名称"
allowClear
......@@ -150,11 +209,27 @@ class Model extends React.Component {
onChange={this.onSearchInputChange}
style={{ width: 240, marginLeft: 'auto' }}
/>
</div>
<div className='d-flex' style={{ alignItems: 'center' }}>
<Button type="primary" onClick={this.onImportBtnClick}>模型创建</Button>
<Button type="primary" className='ml-3' onClick={this.onExportBtnClick}>模型导出</Button>
</div>
</Space>
</div>
<div
className='d-flex p-3'
style={{
borderBottom: '1px solid #EFEFEF',
justifyContent: 'space-between',
}}
>
<Space>
<span>模型创建:</span>
<Button type="primary" onClick={this.onImportExcelBtnClick}>Excel导入</Button>
<Button type="primary" onClick={this.onImportExcelCopyBtnClick}>Excel复制粘贴</Button>
</Space>
<Space className='ml-5'>
<span>模型导出:</span>
<Button type="primary" onClick={this.onExportDDLBtnClick}>导出DDL</Button>
<Button type="primary" onClick={this.onExportErwinBtnClick}loading={exportErwinLoading}>导出Erwin</Button>
<Button type="primary" onClick={this.onExportExcelBtnClick}>导出Excel</Button>
<Button type="primary" onClick={this.onExportWordBtnClick}>导出Word</Button>
</Space>
</div>
<div className='p-3'>
<ModelTable loading={loadingTableData} catalogId={catalogId} data={filterTableData} onChange={this.onTableChange} onSelect={this.onTableSelect} onItemAction={this.onTableItemAction} />
......@@ -166,17 +241,18 @@ class Model extends React.Component {
<ImportModal
visible={importModalVisible}
action={importModalAction}
addMode={importModalAddMode}
onCancel={this.onImportModalCancel}
catalogId={catalogId}
modelerId={modelerId}
/>
<ExportModal
visible={exportModalVisible}
<ExportDDLModal
visible={exportDDLModalVisible}
ids={selectModelerIds}
names={selectModelerNames}
onCancel={this.onExportModalCancel}
/>
onCancel={this.onExportDDLModalCancel}
/>
</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