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