Skip to content

S
szse
Commit 0b033b6b by zhaochengxiang
Options

模型调整

parent cdef19b3
Showing with 159 additions and 106 deletions
src/view/Manage/Model/Component/ModelTable.jsx
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 SmoothScroll from 'smooth-scroll';
import { Resizable } from 'react-resizable';
......@@ -10,8 +10,6 @@ import { AnchorId, AnchorTimestamp } from '../../../../util/constant';
import './ModelTable.less';
const { Option } = Select;
const ResizeableHeaderCell = props => {
const { onResize, width, ...restProps } = props;
......@@ -33,7 +31,7 @@ const ResizeableHeaderCell = 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 [ columns, setColumns ] = useState([
......@@ -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);
return (
<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
components={{
body: {
......
src/view/Manage/Model/Component/ModelTable.less
@import '../../../../variables.less';
.model-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;
}
......
src/view/Manage/Model/index.jsx
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 { DownOutlined } from '@ant-design/icons';
import ModelTree from './Component/ModelTree';
import ModelTable from './Component/ModelTable';
......@@ -19,6 +20,8 @@ import { AppContext } from '../../../App';
import './index.less';
const { Option } = Select;
class Model extends React.Component {
constructor() {
......@@ -394,30 +397,107 @@ class Model extends React.Component {
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() {
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 = (
<ModelTable
loading={loadingTableData}
catalogId={catalogId}
data={filterTableData}
view={currentView}
loadingStates={loadingStates}
modelStates={modelStates}
currentModelState={currentModelState}
keyword={keyword}
offset={offset}
onChange={this.onTableChange}
onSelect={this.onTableSelect}
onItemAction={this.onTableItemAction}
onModelStateChange={this.onModelStateChange}
onSearchInputChange={this.onSearchInputChange}
onRecatalog={this.onRecatalogBtnClick}
onAutoCreateTable={this.onAutoCreateTable}
{...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 (
<div className='data-model'>
<div className='left'>
......@@ -431,43 +511,76 @@ class Model extends React.Component {
justifyContent: 'space-between',
alignItems: 'center'
}}
>
<span style={{
fontSize: 18,
fontWeight: 800,
color: '#767676'
}}>数据模型</span>
>
<Space>
<Button type="primary" onClick={this.onWordTemplateCURDClick}>Word模版配置</Button>
<Button type="primary" onClick={this.onTemplateCURDClick}>数据表类型配置</Button>
<Button type="primary" onClick={this.onConstraintDetailClick}>规范详情</Button>
<Space>
<span style={{
fontSize: 18,
fontWeight: 800,
color: '#767676'
}}>数据模型</span>
</Space>
<Space>
<Input
placeholder="请输入模型名称或者中文名称"
allowClear
value={keyword}
onChange={(e) => { this.onSearchInputChange(e); }}
style={{ width: 240, marginLeft: 'auto' }}
/>
</Space>
{
currentView==='dir' && <Space className='mr-3'>
<Select
style={{ width: 120 }}
onChange={(value) => {
this.onModelStateChange(value);
}}
loading={loadingStates}
value={currentModelState}
>
{
(modelStates||[]).map(item => {
return (
<Option key={item.id} value={item.id}>{item.cnName||''}</Option>
);
})
}
</Select>
</Space>
}
</Space>
</div>
<div
className='d-flex p-3'
style={{
borderBottom: '1px solid #EFEFEF',
justifyContent: (currentView==='dir')?'space-between':'flex-end',
}}
>
{
currentView==='dir' && <Space>
<span>模型创建:</span>
<Button type="primary" onClick={this.onImportExcelBtnClick}>Excel导入</Button>
<Button type="primary" onClick={this.onImportExcelCopyBtnClick}>Excel复制粘贴</Button>
<Button type="primary" onClick={this.onImportWordBtnClick}>Word导入</Button>
<Button type="primary" onClick={this.onImportModelBtnClick}>现有模型</Button>
{/* <Button type="primary" onClick={this.onImportDDLBtnClick}>DDL导入</Button> */}
</Space>
}
<Space>
<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>
{
currentView==='dir' && <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.onRecatalogBtnClick(); }}>
模型变更目录
</Button>
</Space>
<Space>
<Dropdown overlay={configModelMenu} placement="bottomLeft">
<Button type='primary'>模型配置<DownOutlined /></Button>
</Dropdown>
</Space>
</Space>
</div>
<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