Skip to content

S
szse
Commit 0b033b6b by zhaochengxiang
Options

模型调整

parent cdef19b3
Showing with 147 additions and 94 deletions
src/view/Manage/Model/Component/ModelTable.jsx
import React, { useState, useEffect, useRef } from "react"; import React, { useState, useEffect, useRef } from "react";
import { Space, Button, Tooltip, Modal, Select, Input, Divider, Pagination, Table } from 'antd'; import { Space, Button, Tooltip, Modal, Divider, Pagination, Table } from 'antd';
import { EditOutlined, ReconciliationOutlined, DeleteOutlined } from '@ant-design/icons'; import { EditOutlined, ReconciliationOutlined, DeleteOutlined } from '@ant-design/icons';
import SmoothScroll from 'smooth-scroll'; import SmoothScroll from 'smooth-scroll';
import { Resizable } from 'react-resizable'; import { Resizable } from 'react-resizable';
...@@ -10,8 +10,6 @@ import { AnchorId, AnchorTimestamp } from '../../../../util/constant'; ...@@ -10,8 +10,6 @@ import { AnchorId, AnchorTimestamp } from '../../../../util/constant';
import './ModelTable.less'; import './ModelTable.less';
const { Option } = Select;
const ResizeableHeaderCell = props => { const ResizeableHeaderCell = props => {
const { onResize, width, ...restProps } = props; const { onResize, width, ...restProps } = props;
...@@ -33,7 +31,7 @@ const ResizeableHeaderCell = props => { ...@@ -33,7 +31,7 @@ const ResizeableHeaderCell = props => {
const ModelTable = (props) => { const ModelTable = (props) => {
const { data, onChange, onItemAction, onSelect, catalogId, onSearchInputChange, onModelStateChange, loadingStates, currentModelState, modelStates, view, keyword, onRecatalog, onAutoCreateTable, offset = null } = props; const { data, onChange, onItemAction, onSelect, catalogId, keyword, onAutoCreateTable, offset = null } = props;
const [ selectedRowKeys, setSelectedRowKeys ] = useState([]); const [ selectedRowKeys, setSelectedRowKeys ] = useState([]);
const [ columns, setColumns ] = useState([ const [ columns, setColumns ] = useState([
...@@ -265,68 +263,10 @@ const ModelTable = (props) => { ...@@ -265,68 +263,10 @@ const ModelTable = (props) => {
); );
} }
const TitleComponent = (
<div
className='d-flex'
style={{
fontSize: 14,
color: 'rgba(0, 0, 0, 0.65)',
fontWeight: 'normal'
}}
>
{
view==='dir' && <Space className='mr-3'>
<span>模型状态:</span>
<Select
style={{ width: 120 }}
onChange={(value) => {
onModelStateChange && onModelStateChange(value);
}}
loading={loadingStates}
value={currentModelState}
>
{
(modelStates||[]).map(item => {
return (
<Option key={item.id} value={item.id}>{item.cnName||''}</Option>
);
})
}
</Select>
</Space>
}
<Space>
<span>模型搜索:</span>
<Input
placeholder="请输入模型名称或者中文名称"
allowClear
value={keyword}
onChange={(e) => { onSearchInputChange && onSearchInputChange(e); }}
style={{ width: 240, marginLeft: 'auto' }}
/>
</Space>
</div>
);
const _data = paginate(data||[], pageNum, pageSize); const _data = paginate(data||[], pageNum, pageSize);
return ( return (
<div className='model-table'> <div className='model-table'>
<div
className='flex pb-3'
style={{
height: 40,
alignItems: 'center',
justifyContent: 'space-between',
}}
>
{
TitleComponent
}
<Button type='primary' onClick={() => { onRecatalog && onRecatalog(); }}>
模型变更目录
</Button>
</div>
<Table <Table
components={{ components={{
body: { body: {
......
src/view/Manage/Model/Component/ModelTable.less
@import '../../../../variables.less'; @import '../../../../variables.less';
.model-table { .model-table {
.yy-table { .yy-table {
height: calc(100vh - @header-height - @pm-4 - @pm-3 - @pm-3 - 37px - 37px - 48px - @pm-3 - 42px) !important; height: calc(100vh - @header-height - @pm-4 - 57px - @pm-3 - 42px) !important;
overflow: auto !important; overflow: auto !important;
} }
......
src/view/Manage/Model/index.jsx
import React from 'react'; import React from 'react';
import { Button, Space, Spin } from 'antd'; import { Button, Space, Spin, Dropdown, Menu, Input, Select } from 'antd';
import copy from "copy-to-clipboard"; import copy from "copy-to-clipboard";
import { DownOutlined } from '@ant-design/icons';
import ModelTree from './Component/ModelTree'; import ModelTree from './Component/ModelTree';
import ModelTable from './Component/ModelTable'; import ModelTable from './Component/ModelTable';
...@@ -19,6 +20,8 @@ import { AppContext } from '../../../App'; ...@@ -19,6 +20,8 @@ import { AppContext } from '../../../App';
import './index.less'; import './index.less';
const { Option } = Select;
class Model extends React.Component { class Model extends React.Component {
constructor() { constructor() {
...@@ -394,30 +397,107 @@ class Model extends React.Component { ...@@ -394,30 +397,107 @@ class Model extends React.Component {
this.setState({ importStockWordDrawerVisible: true }); this.setState({ importStockWordDrawerVisible: true });
} }
onCreateModelMenuClick = (e) => {
const { key } = e;
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') {
this.onExportDDLBtnClick();
} else if (key === 'erwin') {
this.onExportErwinBtnClick();
} else if (key === 'excel') {
this.onExportExcelBtnClick();
} else if (key === 'word') {
this.onExportWordBtnClick();
}
}
onConfigModelMenuClick = (e) => {
const { key } = e;
if (key === 'word') {
this.onWordTemplateCURDClick();
} else if (key === 'template') {
this.onTemplateCURDClick();
} else if (key === 'constraint') {
this.onConstraintDetailClick();
}
}
render() { render() {
const { importModalVisible, catalogId, loadingTableData, selectModelerIds, keyword, filterTableData, selectModelerNames, importModalAddMode, exportErwinLoading, 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 } = this.state;
const content = ( const content = (
<ModelTable <ModelTable
loading={loadingTableData} loading={loadingTableData}
catalogId={catalogId} catalogId={catalogId}
data={filterTableData} data={filterTableData}
view={currentView}
loadingStates={loadingStates}
modelStates={modelStates}
currentModelState={currentModelState}
keyword={keyword}
offset={offset} offset={offset}
onChange={this.onTableChange} onChange={this.onTableChange}
onSelect={this.onTableSelect} onSelect={this.onTableSelect}
onItemAction={this.onTableItemAction} onItemAction={this.onTableItemAction}
onModelStateChange={this.onModelStateChange}
onSearchInputChange={this.onSearchInputChange}
onRecatalog={this.onRecatalogBtnClick}
onAutoCreateTable={this.onAutoCreateTable} onAutoCreateTable={this.onAutoCreateTable}
{...this.props} /> {...this.props} />
); );
const createModelMenu = (
<Menu onClick={this.onCreateModelMenuClick}>
<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'>
导出DDL
</Menu.Item>
<Menu.Item key='erwin'>
导出Erwin
</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>
</Menu>
)
return ( return (
<div className='data-model'> <div className='data-model'>
<div className='left'> <div className='left'>
...@@ -432,42 +512,75 @@ class Model extends React.Component { ...@@ -432,42 +512,75 @@ class Model extends React.Component {
alignItems: 'center' alignItems: 'center'
}} }}
> >
<Space>
<Space>
<span style={{ <span style={{
fontSize: 18, fontSize: 18,
fontWeight: 800, fontWeight: 800,
color: '#767676' color: '#767676'
}}>数据模型</span> }}>数据模型</span>
</Space>
<Space> <Space>
<Button type="primary" onClick={this.onWordTemplateCURDClick}>Word模版配置</Button> <Input
<Button type="primary" onClick={this.onTemplateCURDClick}>数据表类型配置</Button> placeholder="请输入模型名称或者中文名称"
<Button type="primary" onClick={this.onConstraintDetailClick}>规范详情</Button> allowClear
value={keyword}
onChange={(e) => { this.onSearchInputChange(e); }}
style={{ width: 240, marginLeft: 'auto' }}
/>
</Space> </Space>
</div>
<div {
className='d-flex p-3' currentView==='dir' && <Space className='mr-3'>
style={{ <Select
borderBottom: '1px solid #EFEFEF', style={{ width: 120 }}
justifyContent: (currentView==='dir')?'space-between':'flex-end', onChange={(value) => {
this.onModelStateChange(value);
}} }}
loading={loadingStates}
value={currentModelState}
> >
{ {
currentView==='dir' && <Space> (modelStates||[]).map(item => {
<span>模型创建:</span> return (
<Button type="primary" onClick={this.onImportExcelBtnClick}>Excel导入</Button> <Option key={item.id} value={item.id}>{item.cnName||''}</Option>
<Button type="primary" onClick={this.onImportExcelCopyBtnClick}>Excel复制粘贴</Button> );
<Button type="primary" onClick={this.onImportWordBtnClick}>Word导入</Button> })
<Button type="primary" onClick={this.onImportModelBtnClick}>现有模型</Button> }
</Select>
</Space>
}
{/* <Button type="primary" onClick={this.onImportDDLBtnClick}>DDL导入</Button> */} </Space>
<Space>
{
currentView==='dir' && <Space>
<Dropdown overlay={createModelMenu} placement="bottomLeft">
<Button type='primary'>模型创建<DownOutlined /></Button>
</Dropdown>
</Space> </Space>
} }
<Space> <Space>
<span>模型导出:</span> <Dropdown overlay={exportModelMenu} placement="bottomLeft">
<Button type="primary" onClick={this.onExportDDLBtnClick}>导出DDL</Button> <Button type='primary'>模型导出<DownOutlined /></Button>
<Button type="primary" onClick={this.onExportErwinBtnClick}loading={exportErwinLoading}>导出Erwin</Button> </Dropdown>
<Button type="primary" onClick={this.onExportExcelBtnClick}>导出Excel</Button> </Space>
<Button type="primary" onClick={this.onExportWordBtnClick}>导出Word</Button>
<Space>
<Button type='primary' onClick={() => { this.onRecatalogBtnClick(); }}>
模型变更目录
</Button>
</Space> </Space>
<Space>
<Dropdown overlay={configModelMenu} placement="bottomLeft">
<Button type='primary'>模型配置<DownOutlined /></Button>
</Dropdown>
</Space>
</Space>
</div> </div>
<div className='p-3'> <div className='p-3'>
{ {
......
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