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