Skip to content

S
szse
Commit 1cc1346c by zhaochengxiang
Options

样式调整

parent 07df24dc
Showing with 160 additions and 134 deletions
src/view/Manage/AssetBrowse/index.jsx
import React, { useState } from 'react'; import React, { useState } from 'react';
import { Row, Col } from 'antd';
import AssetTable from "../AssetManage/Component/AssetTable"; import AssetTable from "../AssetManage/Component/AssetTable";
import AssetTree from '../AssetManage/Component/AssetTree'; import AssetTree from '../AssetManage/Component/AssetTree';
import '../AssetManage/index.less';
const AssetBrowse = (props) => { const AssetBrowse = (props) => {
const [ nodeId, setNodeId ] = useState(''); const [ nodeId, setNodeId ] = useState('');
...@@ -12,14 +13,14 @@ const AssetBrowse = (props) => { ...@@ -12,14 +13,14 @@ const AssetBrowse = (props) => {
} }
return ( return (
<Row gutter={15} style={{backgroundColor:'#ededed'}}> <div className='asset-manage'>
<Col span={6}> <div className='left'>
<AssetTree onSelect={onTreeSelect} readOnly {...props} /> <AssetTree onSelect={onTreeSelect} readOnly {...props} />
</Col> </div>
<Col span={18}> <div className='right'>
<AssetTable nodeId={nodeId} readOnly {...props} /> <AssetTable nodeId={nodeId} readOnly {...props} />
</Col> </div>
</Row> </div>
) )
} }
......
src/view/Manage/AssetManage/Component/AssetTree.jsx
import React, { useEffect, useState } from 'react'; import React, { useEffect, useState } from 'react';
import {Card, Spin, Button, Tooltip, Tree, Input, Dropdown, Menu, Space, Modal} from 'antd'; import {Card, Spin, Tooltip, Tree, Input, Dropdown, Menu, Modal} from 'antd';
import { PlusOutlined, ImportOutlined,EditOutlined,DeleteOutlined,ExportOutlined,SyncOutlined, SettingOutlined } from '@ant-design/icons'; import { PlusOutlined, ImportOutlined,EditOutlined,DeleteOutlined,ExportOutlined,SyncOutlined, SettingOutlined } from '@ant-design/icons';
import classNames from 'classnames'; import classNames from 'classnames';
...@@ -178,6 +178,8 @@ const AssetTree = (props) => { ...@@ -178,6 +178,8 @@ const AssetTree = (props) => {
} }
const addDir = () => { const addDir = () => {
if (currentDirType==='custom-root'||currentDirType==='custom') return;
setUpdateDirectoryAction('add'); setUpdateDirectoryAction('add');
setUpdateDirectoryModalVisible(true); setUpdateDirectoryModalVisible(true);
} }
...@@ -202,6 +204,8 @@ const AssetTree = (props) => { ...@@ -202,6 +204,8 @@ const AssetTree = (props) => {
} }
const importDir = () => { const importDir = () => {
if (currentDirType==='custom-root'||currentDirType==='custom') return;
setImportDirectoryVisible(true); setImportDirectoryVisible(true);
} }
...@@ -356,35 +360,42 @@ const AssetTree = (props) => { ...@@ -356,35 +360,42 @@ const AssetTree = (props) => {
<Card <Card
className={classes} className={classes}
title={ readOnly ? null : ( title={ readOnly ? null : (
<Space size={5}> <div
className='p-3'
style={{
display: 'flex',
height: 52,
alignItems: 'center'
}}
>
<Tooltip title="新增目录"> <Tooltip title="新增目录">
<Button shape="circle" icon={<PlusOutlined />} onClick={addDir} disabled={currentDirType==='custom-root'||currentDirType==='custom'} /> <PlusOutlined onClick={addDir} style={{ fontSize:16,cursor: (currentDirType==='custom-root'||currentDirType==='custom')?'not-allowed':'pointer', color: (currentDirType==='custom-root'||currentDirType==='custom')?'#bfbfbf': '' }}/>
</Tooltip> </Tooltip>
<Tooltip title="修改"> <Tooltip title="修改" className='ml-3'>
<Button shape="circle" icon={<EditOutlined />} onClick={editDir} /> <EditOutlined onClick={editDir} style={{ fontSize:16,cursor:'pointer' }} />
</Tooltip> </Tooltip>
<Tooltip title="刷新"> <Tooltip title="刷新" className='ml-3'>
<Button shape="circle" icon={<SyncOutlined />} onClick={refreshTree} /> <SyncOutlined onClick={refreshTree} style={{ fontSize:16,cursor:'pointer' }} />
</Tooltip> </Tooltip>
<Tooltip title="导入"> <Tooltip title="导入" className='ml-3'>
<Button shape="circle" icon={<ImportOutlined />} onClick={importDir} disabled={currentDirType==='custom-root'||currentDirType==='custom'} /> <ImportOutlined onClick={importDir} style={{ fontSize:16,cursor:(currentDirType==='custom-root'||currentDirType==='custom')?'not-allowed':'pointer', color: (currentDirType==='custom-root'||currentDirType==='custom')?'#bfbfbf': '' }} />
</Tooltip> </Tooltip>
<Dropdown overlay={exportMenu} placement="bottomLeft"> <Dropdown overlay={exportMenu} placement="bottomLeft" className='ml-3'>
<Tooltip title="导出"> <Tooltip title="导出">
<Button shape="circle" icon={<ExportOutlined />} /> <ExportOutlined style={{ fontSize:16,cursor:'pointer' }} />
</Tooltip> </Tooltip>
</Dropdown> </Dropdown>
<Tooltip title="删除"> <Tooltip title="删除" className='ml-3'>
<Button shape="circle" icon={<DeleteOutlined />} onClick={deleteDir} disabled={currentDirType==='custom'} /> <DeleteOutlined onClick={deleteDir} style={{ fontSize:16,cursor:'pointer' }} disabled={currentDirType==='custom'} />
</Tooltip> </Tooltip>
<Tooltip title="自定义"> <Tooltip title="自定义" className='ml-3'>
<Button shape="circle" icon={<SettingOutlined />} onClick={customDir} /> <SettingOutlined onClick={customDir} style={{ fontSize:16,cursor:'pointer' }} />
</Tooltip> </Tooltip>
</Space> </div>
)} )}
bordered={false} bordered={false}
bodyStyle={{ padding: 10 }} bodyStyle={{ padding: 10 }}
headStyle={{ padding: 10 }} headStyle={{ padding: 0 }}
style={{ width: '100%' }} style={{ width: '100%' }}
> >
<Spin spinning={loading}> <Spin spinning={loading}>
......
src/view/Manage/AssetManage/index.jsx
import React, { useState } from 'react'; import React, { useState } from 'react';
import { Row, Col } from 'antd';
import AssetTable from './Component/AssetTable'; import AssetTable from './Component/AssetTable';
import AssetTree from './Component/AssetTree'; import AssetTree from './Component/AssetTree';
import './index.less';
const AssetManage = (props) => { const AssetManage = (props) => {
const [ nodeId, setNodeId ] = useState(''); const [ nodeId, setNodeId ] = useState('');
...@@ -12,14 +14,14 @@ const AssetManage = (props) => { ...@@ -12,14 +14,14 @@ const AssetManage = (props) => {
} }
return ( return (
<Row gutter={15} style={{backgroundColor:'#ededed'}}> <div className='asset-manage'>
<Col span={6}> <div className='left'>
<AssetTree onSelect={onTreeSelect} {...props} /> <AssetTree onSelect={onTreeSelect} {...props} />
</Col> </div>
<Col span={18}> <div className='right'>
<AssetTable nodeId={nodeId} {...props} /> <AssetTable nodeId={nodeId} {...props} />
</Col> </div>
</Row> </div>
) )
} }
......
src/view/Manage/AssetManage/index.less 0 → 100644
.asset-manage {
display: flex;
background-color: #ECEEF3;
.left {
width: 230px;
background-color: #fff;
margin-right: 10px;
}
.right {
width:calc(100% - 240px);
background-color: #fff;
}
}
\ No newline at end of file
src/view/Manage/Model/Component/ModelTree.jsx
import React, { useState, useEffect, useRef } from "react"; import React, { useState, useEffect, useRef } from "react";
import { Tooltip, Tree, Button, Modal, Spin } from "antd"; import { Tooltip, Tree, Modal, Spin } from "antd";
import { PlusOutlined, EditOutlined, SyncOutlined, DeleteOutlined } from '@ant-design/icons'; import { PlusOutlined, EditOutlined, SyncOutlined, DeleteOutlined } from '@ant-design/icons';
import UpdateTreeItemModal from './UpdateTreeItemModal'; import UpdateTreeItemModal from './UpdateTreeItemModal';
...@@ -237,56 +237,40 @@ const ModelTree = (props) => { ...@@ -237,56 +237,40 @@ const ModelTree = (props) => {
return ( return (
<div className='model-tree'> <div className='model-tree'>
<div <div
className='p-3' className='p-4'
style={{ style={{
display: 'flex', display: 'flex',
borderBottom: "1px solid #EFEFEF", borderBottom: "1px solid #EFEFEF",
height: 52,
alignItems: 'center'
}} }}
> >
<Tooltip title="新增目录"> <Tooltip title="新增目录">
<Button <PlusOutlined onClick={add} style={{ fontSize:16,cursor:'pointer' }} />
shape="circle"
icon={<PlusOutlined />}
onClick={add}
/>
</Tooltip> </Tooltip>
<Tooltip title="修改" className='ml-3'> <Tooltip title="修改" className='ml-4'>
<Button <EditOutlined onClick={update} style={{ fontSize:16,cursor:'pointer' }} />
shape="circle"
icon={<EditOutlined />}
onClick={update}
/>
</Tooltip> </Tooltip>
<Tooltip title="刷新" className='ml-3'> <Tooltip title="刷新" className='ml-4'>
<Button <SyncOutlined onClick={refresh} style={{ fontSize:16,cursor:'pointer' }} />
shape="circle"
icon={<SyncOutlined />}
onClick={refresh}
/>
</Tooltip> </Tooltip>
<Tooltip title="删除" className='ml-3'> <Tooltip title="删除" className='ml-4'>
<Button <DeleteOutlined onClick={deleteNode} style={{ fontSize:16,cursor:'pointer' }} />
shape="circle"
icon={<DeleteOutlined />}
onClick={deleteNode}
/>
</Tooltip> </Tooltip>
</div> </div>
<div <div className='p-3'>
className='p-3' <Spin spinning={loading} >
> <Tree
<Spin spinning={loading} > onExpand={onExpand}
<Tree expandedKeys={expandedKeys}
onExpand={onExpand} autoExpandParent={autoExpandParent}
expandedKeys={expandedKeys} showLine
autoExpandParent={autoExpandParent} showIcon={false}
showLine onSelect={onTreeSelect}
showIcon={false} treeData={treeData}
onSelect={onTreeSelect} selectedKeys={[item?item.key:'']}
treeData={treeData} />
selectedKeys={[item?item.key:'']} </Spin>
/>
</Spin>
</div> </div>
<UpdateTreeItemModal <UpdateTreeItemModal
visible={visible} visible={visible}
......
src/view/Manage/Model/index.jsx
import React from 'react'; import React from 'react';
import { Row, Col, Button, Input, Space, Spin } from 'antd'; import { Button, Input, Space, Spin } from 'antd';
import copy from "copy-to-clipboard"; import copy from "copy-to-clipboard";
import ModelTree from './Component/ModelTree'; import ModelTree from './Component/ModelTree';
...@@ -12,6 +12,8 @@ import ExportDDLModal from './Component/ExportDDLModal'; ...@@ -12,6 +12,8 @@ import ExportDDLModal from './Component/ExportDDLModal';
import { showMessage, showNotifaction } from '../../../util'; import { showMessage, showNotifaction } from '../../../util';
import { dispatch } from '../../../model'; import { dispatch } from '../../../model';
import './index.less';
class Model extends React.Component { class Model extends React.Component {
constructor() { constructor() {
...@@ -225,68 +227,62 @@ class Model extends React.Component { ...@@ -225,68 +227,62 @@ class Model extends React.Component {
); );
return ( return (
<div style={{ backgroundColor: '#ECEEF3' }}> <div className='data-model'>
<Row> <div className='left'>
<Col span={6} > <ModelTree onSelect={this.onTreeSelect} {...this.props} />
<div className='mr-4' style={{ backgroundColor: '#fff' }}> </div>
<ModelTree onSelect={this.onTreeSelect} {...this.props} /> <div className='right'>
</div> <div
</Col> className='d-flex p-3'
<Col span={18}> style={{
<div style={{ backgroundColor: '#fff' }}> borderBottom: '1px solid #EFEFEF',
<div justifyContent: 'space-between'
className='d-flex p-3' }}
style={{ >
borderBottom: '1px solid #EFEFEF', <Space>
justifyContent: 'space-between' <span>模型搜索:</span>
}} <Input
> placeholder="请输入模型名称或者中文名称"
<Space> allowClear
<span>模型搜索:</span> value={keyword}
<Input onChange={this.onSearchInputChange}
placeholder="请输入模型名称或者中文名称" style={{ width: 240, marginLeft: 'auto' }}
allowClear />
value={keyword} </Space>
onChange={this.onSearchInputChange} <Space>
style={{ width: 240, marginLeft: 'auto' }} <Button type="primary" onClick={this.onWordTemplateCURDClick}>Word模版配置</Button>
/> <Button type="primary" onClick={this.onTemplateCURDClick}>字段追加配置</Button>
</Space> <Button type="primary" onClick={this.onConstraintDetailClick}>规范详情</Button>
<Space> </Space>
<Button type="primary" onClick={this.onWordTemplateCURDClick}>Word模版配置</Button> </div>
<Button type="primary" onClick={this.onTemplateCURDClick}>字段追加配置</Button> <div
<Button type="primary" onClick={this.onConstraintDetailClick}>规范详情</Button> className='d-flex p-3'
</Space> style={{
</div> borderBottom: '1px solid #EFEFEF',
<div justifyContent: 'space-between',
className='d-flex p-3' }}
style={{ >
borderBottom: '1px solid #EFEFEF', <Space>
justifyContent: 'space-between', <span>模型创建:</span>
}} <Button type="primary" onClick={this.onImportExcelBtnClick}>Excel导入</Button>
> <Button type="primary" onClick={this.onImportExcelCopyBtnClick}>Excel复制粘贴</Button>
<Space> </Space>
<span>模型创建:</span> <Space>
<Button type="primary" onClick={this.onImportExcelBtnClick}>Excel导入</Button> <span>模型导出:</span>
<Button type="primary" onClick={this.onImportExcelCopyBtnClick}>Excel复制粘贴</Button> <Button type="primary" onClick={this.onExportDDLBtnClick}>导出DDL</Button>
</Space> <Button type="primary" onClick={this.onExportErwinBtnClick}loading={exportErwinLoading}>导出Erwin</Button>
<Space> <Button type="primary" onClick={this.onExportExcelBtnClick}>导出Excel</Button>
<span>模型导出:</span> <Button type="primary" onClick={this.onExportWordBtnClick}>导出Word</Button>
<Button type="primary" onClick={this.onExportDDLBtnClick}>导出DDL</Button> </Space>
<Button type="primary" onClick={this.onExportErwinBtnClick}loading={exportErwinLoading}>导出Erwin</Button> </div>
<Button type="primary" onClick={this.onExportExcelBtnClick}>导出Excel</Button> <div className='p-3'>
<Button type="primary" onClick={this.onExportWordBtnClick}>导出Word</Button> {
</Space> loadingTableData ? <Spin spinning={loadingTableData}>
</div> { content }
<div className='p-3'> </Spin> : content
{ }
loadingTableData ? <Spin spinning={loadingTableData}> </div>
{ content } </div>
</Spin> : content
}
</div>
</div>
</Col>
</Row>
<WordTemplateModal <WordTemplateModal
visible={wordTemplateModalVisible} visible={wordTemplateModalVisible}
......
src/view/Manage/Model/index.less 0 → 100644
.data-model {
display: flex;
background-color: #ECEEF3;
.left {
width: 230px;
background-color: #fff;
margin-right: 10px;
}
.right {
width:calc(100% - 240px);
background-color: #fff;
}
}
\ 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