Skip to content

S
szse
Commit 3ca37456 by zhaochengxiang
Options

模型主页面调整

parent 8bf3bfa0
Showing with 294 additions and 324 deletions
src/view/Manage/Model/Component/ImportExcel.jsx
import React from 'react';
import { Button, Upload } from 'antd';
import { Button, Upload, Form, Row, Col } from 'antd';
import { DownloadOutlined, UploadOutlined } from '@ant-design/icons';
class ImportExcel extends React.Component {
......@@ -50,20 +50,36 @@ class ImportExcel extends React.Component {
};
return (
<>
<div>
<Button icon={<DownloadOutlined />} onClick={ this.downloadTemplate }>
模版下载
</Button>
</div>
<div className='mt-3'>
<Upload {...uploadProps}>
<Button icon={<UploadOutlined />}>
选择文件上传
<Form.Item
name='upload'
label='文件上传'
>
<Row>
<Col span={9}>
<Form.Item
noStyle
rules={[
{
required: true,
message: '请选择文件上传',
},
]}
>
<Upload {...uploadProps}>
<Button icon={<UploadOutlined />}>
选择文件上传
</Button>
</Upload>
</Form.Item>
</Col>
<Col span={6}>
<Button icon={<DownloadOutlined />} onClick={ this.downloadTemplate }>
模版下载
</Button>
</Upload>
</div>
</>
</Col>
</Row>
</Form.Item>
)
}
}
......
src/view/Manage/Model/Component/ImportModal.jsx
import React, { useState } from 'react';
import { Modal, Button } from 'antd';
import { Modal, Button, Form, Radio } from 'antd';
import ImportWord from './ImportWord';
import ImportExcel from './ImportExcel';
import ImportExcelCopy from './ImportExcelCopy';
import { dispatchLatest } from '../../../../model';
import { showMessage } from '../../../../util';
const importModes = [
{ name: 'Word导入', key: 'word' },
{ name: 'Excel导入', key: 'excel' },
{ name: 'Excel复制粘贴', key: 'excel-copy' },
]
const ImportModal = (props) => {
const { visible, onCancel, addMode } = props;
const { catalogId, visible, onCancel } = props;
const [ excelFiles, setExcelFiles ] = useState([]);
const [ modeKey, setModeKey ] = useState('');
const [ files, setFiles ] = useState([]);
const [ hints, setHints ] = useState([]);
const [ confirmLoading, setConfirmLoading ] = useState(false);
const onOk = () => {
if (addMode==='excel') {
if ((excelFiles||[]).length === 0) {
showMessage('warn', '请先选择文件上传');
const [ form ] = Form.useForm();
const onModeChange = (e) => {
setModeKey(e.target?.value);
}
const onOk = async() => {
if (modeKey === '') {
form.setFields([{ name: 'mode', errors: ['请选择导入方式'] }]);
return;
}
if (modeKey==='word') {
if ((files||[]).length === 0) {
form.setFields([{ name: 'upload', errors: ['请选择文件上传'] }]);
} else {
setConfirmLoading(true);
dispatchLatest({
type: 'datamodel.importWordGenerateModelDraft',
payload: {
params: {
catalogId,
},
files
},
callback: data => {
setConfirmLoading(false);
reset();
onCancel && onCancel(true, [], data||{});
},
error: () => {
setConfirmLoading(false);
}
});
}
} else if (modeKey==='excel') {
if ((files||[]).length === 0) {
form.setFields([{ name: 'upload', errors: ['请选择文件上传'] }]);
} else {
setConfirmLoading(true);
dispatchLatest({
type: 'datamodel.extractExcelContent',
payload: { fileList: excelFiles },
payload: { fileList: files },
callback: data => {
setConfirmLoading(false);
onCancel && onCancel(data||[]);
onCancel && onCancel(false, data||[]);
},
error: () => {
setConfirmLoading(false);
......@@ -33,17 +79,14 @@ const ImportModal = (props) => {
})
}
return;
} else if (addMode==='excel-copy') {
} else if (modeKey==='excel-copy') {
if ((hints||[]).length === 0) {
showMessage('warn', '请先从Excel文件中复制内容');
} else {
onCancel && onCancel(hints||[]);
onCancel && onCancel(false, hints||[]);
}
return;
}
}
......@@ -53,28 +96,24 @@ const ImportModal = (props) => {
}
const reset = () => {
setExcelFiles([]);
setModeKey('');
setFiles([]);
setHints([]);
setConfirmLoading(false);
}
const onImportWordChange = (files) => {
setFiles(files||[]);
}
const onImportExcelChange = (files) => {
setExcelFiles(files||[]);
setFiles(files||[]);
}
const onImportExcelCopyChange = (data) => {
setHints(data||[]);
}
let title = '';
if (addMode==='excel') {
title = 'Excel导入';
} else if (addMode==='excel-copy') {
title = 'Excel复制粘贴导入';
} else if (addMode==='ddl') {
title = 'DDL导入';
}
const footer = [
<Button
key="0"
......@@ -97,21 +136,40 @@ const ImportModal = (props) => {
<Modal
forceRender
visible={visible}
title={title}
title='模型导入'
width={520}
onCancel={cancel}
footer={footer}
>
{
addMode==='excel' && (
<ImportExcel onChange={onImportExcelChange} {...props} />
)
}
{
addMode==='excel-copy' && (
<ImportExcelCopy onChange={onImportExcelCopyChange} {...props} />
)
}
<Form form={form}>
<Form.Item
name='mode'
label='导入方式'
>
<Radio.Group onChange={onModeChange} value={modeKey}>
{
importModes.map((item, index) => {
return <Radio value={item.key} key={index}>{item.name}</Radio>;
})
}
</Radio.Group>
</Form.Item>
{
modeKey==='word' && (
<ImportWord onChange={onImportWordChange} {...props} />
)
}
{
modeKey==='excel' && (
<ImportExcel onChange={onImportExcelChange} {...props} />
)
}
{
modeKey==='excel-copy' && (
<ImportExcelCopy onChange={onImportExcelCopyChange} {...props} />
)
}
</Form>
</Modal>
)
}
......
src/view/Manage/Model/Component/ImportWord.jsx 0 → 100644
import React, { useState, useEffect } from 'react';
import { Button, Upload, Form } from 'antd';
import { UploadOutlined } from '@ant-design/icons';
const ImportWord = (props) => {
const { onChange, visible } = props;
const [ fileList, setFileList ] = useState([]);
useEffect(() => {
setFileList([]);
}, [visible])
const uploadProps = {
onRemove: file => {
const index = fileList.indexOf(file);
const newFileList = fileList.slice();
newFileList.splice(index, 1);
onChange && onChange(newFileList);
setFileList(newFileList);
},
beforeUpload: file => {
setFileList([file]);
return false;
},
fileList: fileList||[],
accept:".doc,.docx",
};
return (
<Form.Item
name='upload'
label='文件上传'
>
<Upload {...uploadProps}>
<Button icon={<UploadOutlined />}>
选择文件上传
</Button>
</Upload>
</Form.Item>
)
}
export default ImportWord;
\ No newline at end of file
src/view/Manage/Model/Component/ImportWordModal.jsx deleted 100644 → 0
import React, { useState } from 'react';
import { Button, Upload, Modal } from 'antd';
import { UploadOutlined } from '@ant-design/icons';
import { dispatchLatest } from '../../../../model';
import { showMessage } from '../../../../util';
const ImportWordModal = (props) => {
const { onCancel, visible, catalogId } = props;
const [ fileList, setFileList ] = useState([]);
const [ confirmLoading, setConfirmLoading ] = useState(false);
const uploadProps = {
onRemove: file => {
const index = fileList.indexOf(file);
const newFileList = fileList.slice();
newFileList.splice(index, 1);
setFileList(newFileList);
},
beforeUpload: file => {
setFileList([file]);
return false;
},
fileList: fileList||[],
accept:".doc,.docx",
};
const handleOk = () => {
if ((fileList||[]).length === 0) {
showMessage('info', '请先选择Word文件上传');
return;
}
setConfirmLoading(true);
dispatchLatest({
type: 'datamodel.importWordGenerateModelDraft',
payload: {
params: {
catalogId,
},
fileList
},
callback: data => {
setConfirmLoading(false);
reset();
if (onCancel) {
onCancel(true, data||[]);
}
},
error: () => {
setConfirmLoading(false);
}
})
}
const reset = () => {
setConfirmLoading(false);
setFileList([]);
}
return (
<Modal
forceRender
visible={visible}
title='Word导入'
width={520}
confirmLoading={confirmLoading}
onCancel={() => {
reset();
onCancel && onCancel();
}}
onOk={handleOk}
>
<div className='mt-3'>
<span className='mr-3'>Word上传:</span>
<Upload {...uploadProps}>
<Button icon={<UploadOutlined />}>
选择文件上传
</Button>
</Upload>
</div>
</Modal>
)
}
export default ImportWordModal;
\ No newline at end of file
src/view/Manage/Model/Component/ModelTable.less
......@@ -5,6 +5,10 @@
overflow: auto !important;
}
.yy-table-thead > tr > th {
background-color: #F2F5FC !important;
}
.yy-pro-table {
.yy-card-body {
padding: 0 !important;
......
src/view/Manage/Model/index.jsx
import React from 'react';
import { Button, Space, Spin, Dropdown, Menu, Input, Select } from 'antd';
import copy from "copy-to-clipboard";
import { DownOutlined } from '@ant-design/icons';
import { DownOutlined, CaretLeftOutlined, CaretRightOutlined } from '@ant-design/icons';
import classNames from 'classnames';
import ModelTree from './Component/ModelTree';
import ModelTable from './Component/ModelTable';
......@@ -9,7 +10,6 @@ import WordTemplateModal from './Component/WordTemplateModal';
import TemplateCURDDrawer from './Component/TemplateCURDDrawer';
import ConstraintDetailDrawer from './Component/ConstraintDetailDrawer';
import ImportModal from './Component/ImportModal';
import ImportWordModal from './Component/ImportWordModal';
import ImportStockWordDrawer from './Component/ImportStockWordDrawer';
import ExportDDLModal from './Component/ExportDDLModal';
import RecatalogModal from './Component/RecatalogModal';
......@@ -33,7 +33,6 @@ class Model extends React.Component {
templateCURDDrawerVisible: false,
constraintDetailDrawerVisible: false,
importModalVisible: false,
importWordModalVisible: false,
importStockWordDrawerVisible: false,
exportDDLModalVisible: false,
recatalogModalVisible: false,
......@@ -41,7 +40,6 @@ class Model extends React.Component {
startFlowModalVisible: false,
catalogId: '',
importModalAction: '',
importModalAddMode: '',
tableData: [],
filterTableData: [],
loadingTableData: false,
......@@ -56,7 +54,8 @@ class Model extends React.Component {
currentView: '',
exportDDLModalReference: 'exportDDL',
currentModel: {},
offset: null
offset: null,
expandTree: true,
}
}
......@@ -203,24 +202,16 @@ class Model extends React.Component {
window.open(`/data-govern/data-model-action?${Action}=add&${CatalogId}=${(currentView==='dir')?(catalogId||''):''}`);
}
onImportExcelBtnClick = () => {
this.setState({ importModalVisible: true, importModalAction: 'add', importModalAddMode: 'excel' });
}
onImportExcelCopyBtnClick = () => {
this.setState({ importModalVisible: true, importModalAction: 'add', importModalAddMode: 'excel-copy' });
}
onImportWordBtnClick = () => {
const { catalogId, currentView } = this.state;
// onImportWordBtnClick = () => {
// const { catalogId, currentView } = this.state;
if (currentView!=='dir' || (catalogId||'') === '') {
showMessage('info', '请先选择模型目录');
return;
}
// if (currentView!=='dir' || (catalogId||'') === '') {
// showMessage('info', '请先选择模型目录');
// return;
// }
this.setState({ importWordModalVisible: true });
}
// this.setState({ importWordModalVisible: true });
// }
onImportModelBtnClick = () => {
const { catalogId, selectModelerIds, currentView } = this.state;
......@@ -238,10 +229,6 @@ class Model extends React.Component {
window.open(`/data-govern/data-model-action?${Action}=add&${CatalogId}=${(currentView==='dir')?(catalogId||''):''}&${ModelerId}=${selectModelerIds[0]}`);
}
onImportDDLBtnClick = () => {
this.setState({ importModalVisible: true, importModalAction: 'add', importModalAddMode: 'ddl' });
}
onExportDDLBtnClick = () => {
const { selectModelerIds, tableData } = this.state;
if ((selectModelerIds||[]).length === 0) {
......@@ -353,43 +340,37 @@ class Model extends React.Component {
this.setState({ constraintDetailDrawerVisible: false });
}
onImportModalCancel = (hints = []) => {
onImportModalCancel = (refresh = false, hints = [], wordData = {}) => {
const { catalogId, importModalAction, currentView } = this.state;
this.setState({ importModalVisible: false }, () => {
refresh && this.onTableChange();
if ((hints||[]).length > 0) {
setTimeout(() => {
window.open(`/data-govern/data-model-action?${Action}=${importModalAction}&${CatalogId}=${(currentView==='dir')?(catalogId||''):''}&${Hints}=${encodeURIComponent((hints||[]).join(','))}`);
}, 1000);
}
});
}
onImportWordModalCancel = (refresh = false, data = {}) => {
const { catalogId } = this.state;
this.setState({ importWordModalVisible: false });
refresh && this.onTableChange();
if (data && (data.msg||''!=='')) {
showNotifaction('提示', data.msg, 5);
}
if (data && (data.content||[]).length > 0) {
if ((data.content||[]).length > 5) {
showMessage('info', '最多只能同时编辑5条信息');
if (wordData && (wordData.msg||''!=='')) {
showNotifaction('提示', wordData.msg, 5);
}
setTimeout(() => {
data.content.slice(0, 5).forEach(data => {
window.open(`/data-govern/data-model-action?${Action}=add&${CatalogId}=${catalogId}&${ModelerData}=${encodeURIComponent(JSON.stringify(data))}`, '_blank');
})
}, 2000);
}
if (wordData && (wordData.content||[]).length > 0) {
if ((wordData.content||[]).length > 5) {
showMessage('info', '最多只能同时编辑5条信息');
}
setTimeout(() => {
wordData.content.slice(0, 5).forEach(data => {
window.open(`/data-govern/data-model-action?${Action}=add&${CatalogId}=${catalogId}&${ModelerData}=${encodeURIComponent(JSON.stringify(data))}`, '_blank');
})
}, 2000);
}
});
}
onImportStockWordDrawerCancel = () => {
......@@ -436,47 +417,23 @@ class Model extends React.Component {
this.setState({ importStockWordDrawerVisible: true });
}
onCreateModelMenuClick = (e) => {
onMoreMenuClick = (e) => {
const { key } = e;
if (key === 'uncondition') {
this.onImportUnconditionBtnClick();
} else if (key === 'excel') {
this.onImportExcelBtnClick();
} else if (key === 'excel-copy') {
this.onImportExcelCopyBtnClick();
} else if (key === 'word') {
this.onImportWordBtnClick();
} else if (key === 'model') {
this.onImportModelBtnClick();
}
}
onExportModelMenuClick = (e) => {
const { key } = e;
if (key === 'ddl') {
if (key === 'export-ddl') {
this.onExportDDLBtnClick();
} else if (key === 'erwin') {
this.onExportErwinBtnClick();
} else if (key === 'excel') {
this.onExportExcelBtnClick();
} else if (key === 'word') {
this.onExportWordBtnClick();
} else if (key === 'export-other') {
} else if (key === 'catalog-change') {
this.onRecatalogBtnClick();
}
}
onConfigModelMenuClick = (e) => {
const { key } = e;
if (key === 'word') {
this.onWordTemplateCURDClick();
} else if (key === 'template') {
this.onTemplateCURDClick();
} else if (key === 'constraint') {
this.onConstraintDetailClick();
}
treeToggleClick = () => {
this.setState({ expandTree: !this.state.expandTree });
}
render() {
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, startFlowModalVisible } = this.state;
const { importModalVisible, catalogId, loadingTableData, selectModelerIds, keyword, filterTableData, selectModelerNames, exportDDLModalVisible, templateCURDDrawerVisible, wordTemplateModalVisible, constraintDetailDrawerVisible, importStockWordDrawerVisible , loadingStates, modelStates, currentModelState, currentView, recatalogModalVisible, exportDDLModalReference, currentModel, offset, historyAndVersionDrawerVisible, modelerId, startFlowModalVisible, expandTree } = this.state;
const content = (
<ModelTable
......@@ -492,62 +449,34 @@ class Model extends React.Component {
{...this.props} />
);
const createModelMenu = (
<Menu onClick={this.onCreateModelMenuClick}>
<Menu.Item key='uncondition'>
新增
</Menu.Item>
<Menu.Item key='excel'>
Excel导入
</Menu.Item>
<Menu.Item key='excel-copy'>
Excel复制粘贴
</Menu.Item>
<Menu.Item key='word'>
Word导入
</Menu.Item>
<Menu.Item key='model'>
现有模型
</Menu.Item>
</Menu>
);
const exportModelMenu = (
<Menu onClick={this.onExportModelMenuClick}>
<Menu.Item key='ddl'>
const moreMenu = (
<Menu onClick={this.onMoreMenuClick}>
<Menu.Item key='export-ddl'>
导出DDL
</Menu.Item>
<Menu.Item key='erwin'>
导出Erwin
<Menu.Item key='export-other'>
导出其他
</Menu.Item>
<Menu.Item key='excel'>
导出Excel
</Menu.Item>
<Menu.Item key='word'>
导出Word
</Menu.Item>
</Menu>
);
const configModelMenu = (
<Menu onClick={this.onConfigModelMenuClick}>
<Menu.Item key='word'>
Word模版配置
</Menu.Item>
<Menu.Item key='template'>
数据表类型配置
</Menu.Item>
<Menu.Item key='constraint'>
规范详情
<Menu.Item key='catalog-change'>
变更目录
</Menu.Item>
</Menu>
)
const classes = classNames('data-model', {
'data-model-collapse': !expandTree
});
return (
<div className='data-model'>
<div className={classes}>
<div className='left'>
<ModelTree onViewChange={this.onViewChange} onSelect={this.onTreeSelect} importStockModel={this.importStockModel} keyword={keyword} {...this.props} />
</div>
<div className='tree-toggle-wrap'>
<div className='tree-toggle' onClick={this.treeToggleClick}>
{ expandTree ? <CaretLeftOutlined /> : <CaretRightOutlined /> }
</div>
</div>
<div className='right'>
<div
className='d-flex p-3'
......@@ -559,25 +488,24 @@ class Model extends React.Component {
>
<Space>
<Space>
<span style={{
fontSize: 18,
fontWeight: 800,
color: '#767676'
}}>数据模型</span>
<Button onClick={this.onImportUnconditionBtnClick}>新建</Button>
</Space>
<Space>
<Input
placeholder="请输入关键字"
allowClear
value={keyword}
onChange={(e) => { this.onSearchInputChange(e); }}
style={{ width: 240, marginLeft: 'auto' }}
/>
<Button onClick={() => { this.setState({ importModalVisible: true }); }}>导入</Button>
</Space>
<Space>
<Button onClick={this.startFlow} disabled={currentModelState!=='1'}>送审</Button>
</Space>
<Space>
<Dropdown overlay={moreMenu} placement="bottomLeft">
<Button>更多<DownOutlined /></Button>
</Dropdown>
</Space>
</Space>
<Space>
{
(currentView==='dir'||keyword!=='') && <Space className='mr-3'>
(currentView==='dir'||keyword!=='') && <Space>
<Select
style={{ width: 120 }}
onChange={(value) => {
......@@ -595,36 +523,17 @@ class Model extends React.Component {
}
</Select>
</Space>
}
</Space>
<Space>
<Space>
<Dropdown overlay={createModelMenu} placement="bottomLeft">
<Button type='primary'>模型创建<DownOutlined /></Button>
</Dropdown>
</Space>
<Space>
<Dropdown overlay={exportModelMenu} placement="bottomLeft">
<Button type='primary'>模型导出<DownOutlined /></Button>
</Dropdown>
</Space>
<Space>
<Button type='primary' onClick={this.startFlow} disabled={currentModelState!=='1'}>模型送审</Button>
</Space>
}
<Space>
<Button type='primary' onClick={this.onRecatalogBtnClick}>
模型变更目录
</Button>
<Input
placeholder="请输入关键字"
allowClear
value={keyword}
onChange={(e) => { this.onSearchInputChange(e); }}
style={{ width: 240, marginLeft: 'auto' }}
/>
</Space>
<Space>
<Dropdown overlay={configModelMenu} placement="bottomLeft">
<Button type='primary'>模型配置<DownOutlined /></Button>
</Dropdown>
</Space>
</Space>
</div>
......@@ -652,15 +561,8 @@ class Model extends React.Component {
<ImportModal
visible={importModalVisible}
addMode={importModalAddMode}
onCancel={this.onImportModalCancel}
/>
<ImportWordModal
visible={importWordModalVisible}
onCancel={this.onImportWordModalCancel}
catalogId={catalogId}
/>
<ImportStockWordDrawer
visible={importStockWordDrawerVisible}
......
src/view/Manage/Model/index.less
.data-model {
display: flex;
background-color: #F0F2F5;
background-color: #fff;
height: 100%;
.left {
width: 230px;
background-color: #fff;
margin-right: 10px;
border-right: 1px solid #EFEFEF;
overflow: hidden;
}
.tree-toggle-wrap {
position: relative;
width: 20px;
height: calc(100vh - 94px);
.tree-toggle {
display: flex;
justify-content: center;
align-items: center;
left: 0;
right: 0;
background: #f2f5fc;
position: absolute;
top: calc(50% - 40px);
width: 12px;
height: 80px;
border-radius: 0 12px 12px 0;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
cursor: pointer;
}
}
.right {
width: calc(100% - 250px);
}
}
.data-model-collapse {
.left {
width: 0;
}
.right {
width:calc(100% - 240px);
background-color: #fff;
width: calc(100% - 20px);
}
}
\ No newline at end of file
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