Skip to content

S
szse
Commit e0e0c4fe by zhaochengxiang
Options

样式调整

parent 6b3d874f
Showing with 128 additions and 96 deletions
src/index.less
......@@ -10,7 +10,7 @@ body {
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background-color: #fff;
background-color: #ECEEF3;
}
code {
......@@ -67,15 +67,15 @@ div[id^='__qiankun_microapp_wrapper_'] {
}
//ant design
.ant-layout {
background-color: #eee !important;
.yy-layout {
background-color: #ECEEF3 !important;
}
.yy-tabs-content-holder {
height: 100% !important;
}
.yy-tabs-content {
.yy-tabs-content, .yy-table {
height: 100% !important;
overflow: auto !important;
}
......
src/layout/index.js
......@@ -5,7 +5,7 @@ import { connect } from 'react-redux';
import classnames from 'classnames';
import { UserOutlined, LogoutOutlined, MenuFoldOutlined, MenuUnfoldOutlined, HomeOutlined, FileOutlined, AppstoreOutlined } from "@ant-design/icons";
import { ContextPath, Open } from '../util';
import { ContextPath, Open, showMessage } from '../util';
import { routes, routeMap } from '../routes';
......@@ -30,7 +30,7 @@ const _Logout = ({session, isHome, location}) => session ?
>
<Menu.Item key="SignOut"
onClick={e => dispatchLatest({type: 'user.signout', callback: e => {
message.success('退出成功!')
showMessage('success', '退出成功!');
window.setTimeout(e => Open(`${ContextPath}/login`, { target: '_self' }), 1000);
}})}>
<LogoutOutlined />
......@@ -105,7 +105,7 @@ export const ManageLayout = function ({ content, location }) {
</Menu>
</Sider>
<Content className="m-3" style={{ backgroundColor: '#eee' }}>
<Content className="m-3" style={{ backgroundColor: '#ECEEF3', height: '100%' }}>
{content}
</Content>
......
src/util/axios.js
import axios from 'axios';
import { message } from 'antd';
import { IsArr } from './index';
import { showMessage } from './index';
const CancelToken = axios.CancelToken;
const baseURL = '/api/';
......@@ -85,7 +87,7 @@ export const SetSource = function (source) {
const callback = resp => {
if (resp.status === 401) {
message.warning("session过期,请重新登录!");
showMessage('warn', "session过期,请重新登录!");
//外网
window.location.href="/center-home/view/login"
//内网
......
src/view/Manage/Model/Component/ModelTable.jsx
import React, { useState } from "react";
import { Table, Space, Button, Tooltip, message } from 'antd';
import { Table, Space, Button, Tooltip, Modal } from 'antd';
import { EditOutlined, CheckOutlined, ReconciliationOutlined, DeleteOutlined } from '@ant-design/icons';
import { dispatchLatest } from '../../../../model';
import { showMessage } from '../../../../util';
import './ModelTable.less';
const ModelTable = (props) => {
const { data, onChange } = props;
const { data, onChange, loading } = props;
const [ selectedRowKeys, setSelectedRowKeys ] = useState([]);
const [modal, contextHolder] = Modal.useModal();
const columns = [
{
title: '模型名称',
......@@ -47,6 +51,11 @@ const ModelTable = (props) => {
];
const deleteItem = (record) => {
modal.confirm({
title: '提示!',
content: '您确定要删除该模型吗?',
onOk: () => {
dispatchLatest({
type: 'datamodel.deleteDataModel',
payload: {
......@@ -55,11 +64,13 @@ const ModelTable = (props) => {
}
},
callback: () => {
message.success('模型删除成功');
showMessage('success', '模型删除成功');
onChange && onChange();
}
})
}
});
}
const onSelectChange = keys => {
setSelectedRowKeys(keys);
......@@ -71,15 +82,17 @@ const ModelTable = (props) => {
};
return (
<>
<div className='model-table'>
<Table
loading={loading}
rowSelection={rowSelection}
columns={columns}
rowKey={'id'}
dataSource={data}
pagination={false}
/>
</>
{ contextHolder }
</div>
);
}
......
src/view/Manage/Model/Component/ModelTable.less 0 → 100644
.model-table {
.yy-table {
height: calc(100vh - 64px - 20px - 53px - 20px) !important;
overflow: auto !important;
}
}
\ No newline at end of file
src/view/Manage/Model/Component/ModelTree.jsx
import React from "react";
import { Tooltip, Tree, message, Button } from "antd";
import React, { useState, useEffect } from "react";
import { Tooltip, Tree, Button, Modal, Spin } from "antd";
import { PlusOutlined, EditOutlined, SyncOutlined, DeleteOutlined } from '@ant-design/icons';
import UpdateTreeItemModal from './UpdateTreeItemModal';
import { dispatchLatest } from '../../../../model';
import { showMessage } from '../../../../util';
import './ModelTree.less';
class ModelTree extends React.Component {
const ModelTree = (props) => {
constructor() {
super();
this.state = {
loading: false,
treeData: null,
item: null,
visible: false,
type: null
};
}
const { onSelect } = props;
const [ loading, setLoading ] = useState(false);
const [ treeData, setTreeData ] = useState(null);
const [ item, setItem ] = useState(null);
const [ visible, setVisible ] = useState(false);
const [ type, setType ] = useState(null);
componentDidMount() {
this.getTreeData();
}
const [modal, contextHolder] = Modal.useModal();
getTreeData = () => {
const { onSelect } = this.props;
useEffect(() => {
getTreeData();
}, [])
this.setState({ loading: true }, () => {
const getTreeData = () => {
setLoading(true);
dispatchLatest({
type: 'datamodel.loadDataModelCatalog',
callback: data => {
......@@ -48,55 +46,51 @@ class ModelTree extends React.Component {
}
recursion(data.subCatalogs);
this.setState({ loading: false, treeData: [ data ], item: data }, () => {
if (onSelect) {
onSelect(data.key);
}
});
setLoading(false);
setTreeData([ data||{} ]);
setItem(data);
onSelect && onSelect(data.key||'');
}
})
})
}
onTreeSelect = (keys,data) => {
const { onSelect } = this.props;
const onTreeSelect = (keys,data) => {
const _item = {...data.selectedNodes[0]||[]};
this.setState({ item: _item }, () => {
if (onSelect) {
onSelect(_item.key);
}
});
setItem(_item);
onSelect && onSelect(_item.key);
}
add = () => {
this.setState({ visible: true, type: 'add' });
const add = () => {
setVisible(true);
setType('add');
}
update = () => {
const update = () => {
const { item } = this.state;
if (!item) {
message.info('请先选择目录');
showMessage('info', '请先选择目录');
return;
}
this.setState({ visible: true, type: 'update' });
setVisible(true);
setType('update');
}
refresh = () => {
this.getTreeData();
const refresh = () => {
getTreeData();
}
delete = () => {
const { item } = this.state;
const deleteNode = () => {
if (!item) {
message.info('请先选择目录');
showMessage('info', '请先选择目录');
return;
}
modal.confirm({
title: '提示!',
content: '删除目录会删除相关的模型,您确定删除吗?',
onOk: () => {
dispatchLatest({
type: 'datamodel.deleteDataModelCatalog',
payload: {
......@@ -105,28 +99,26 @@ class ModelTree extends React.Component {
}
},
callback: () => {
message.success('删除目录成功');
this.getTreeData();
showMessage('success', '删除目录成功');
getTreeData();
}
});
}
});
onUpdateTreeItemModalOk = () => {
this.setState({ visible: false }, () => {
this.getTreeData();
})
}
onUpdateTreeItemModalCancel = () => {
this.setState({ visible: false });
const onUpdateTreeItemModalOk = () => {
setVisible(false);
getTreeData();
}
render() {
const { loading, treeData, visible, type, item } = this.state;
const onUpdateTreeItemModalCancel = () => {
setVisible(false);
}
return (
<>
<div className='model-tree'>
<div
className='p-3'
style={{
......@@ -136,52 +128,58 @@ class ModelTree extends React.Component {
>
<Tooltip title="新增目录">
<Button
type="primary"
shape="circle"
icon={<PlusOutlined />}
onClick={this.add}
onClick={add}
/>
</Tooltip>
<Tooltip title="修改" className='ml-3'>
<Button
type="primary"
shape="circle"
icon={<EditOutlined />}
onClick={this.update}
onClick={update}
/>
</Tooltip>
<Tooltip title="刷新" className='ml-3'>
<Button
type="primary"
shape="circle"
icon={<SyncOutlined />}
onClick={this.refresh}
onClick={refresh}
/>
</Tooltip>
<Tooltip title="删除" className='ml-3'>
<Button
type="primary"
shape="circle"
icon={<DeleteOutlined />}
onClick={this.delete}
onClick={deleteNode}
/>
</Tooltip>
</div>
<div
className='overflow-auto p-3'
className='p-3'
>
<Tree loading={loading} showLine showIcon={false} onSelect={this.onTreeSelect} treeData={treeData} selectedKeys={[item?item.key:'']} />
{
loading? <Spin /> : (
<Tree
showLine
showIcon={false}
onSelect={onTreeSelect}
treeData={treeData}
selectedKeys={[item?item.key:'']}
/>
)
}
</div>
<UpdateTreeItemModal
visible={visible}
type={type}
item={item}
onOk={this.onUpdateTreeItemModalOk}
onCancel={this.onUpdateTreeItemModalCancel}
onOk={onUpdateTreeItemModalOk}
onCancel={onUpdateTreeItemModalCancel}
/>
</>
{contextHolder}
</div>
);
}
}
export default ModelTree;
\ No newline at end of file
src/view/Manage/Model/Component/ModelTree.less 0 → 100644
.model-tree {
.yy-tree-list {
height: calc(100vh - 64px - 20px - 53px - 20px) !important;
overflow: auto !important;
}
}
\ No newline at end of file
src/view/Manage/Model/index.jsx
......@@ -17,7 +17,8 @@ class Model extends React.Component {
exportModalVisible: false,
catalogId: '',
importModalAction: '',
tableData: []
tableData: [],
loadingTableData: false,
}
}
......@@ -30,15 +31,17 @@ class Model extends React.Component {
onTableChange = () => {
const { catalogId } = this.state;
this.setState({ loadingTableData: true }, () => {
dispatchLatest({
type: 'datamodel.getCurrentDataModelCatalog',
payload: {
easyDataModelerCatalogId: catalogId
},
callback: data => {
this.setState({ tableData: data.easyDataModelerDataModels||[] });
this.setState({ loadingTableData: false, tableData: data.easyDataModelerDataModels||[] });
}
})
})
}
onImportBtnClick = () => {
......@@ -59,15 +62,18 @@ class Model extends React.Component {
}
render() {
const { importModalVisible, exportModalVisible, catalogId, importModalAction, tableData } = this.state;
const { importModalVisible, exportModalVisible, catalogId, importModalAction, tableData, loadingTableData } = this.state;
return (
<div style={{ backgroundColor: '#fff', height: '100%' }}>
<Row gutter={10} style={{ height: '100%' }}>
<Col span={6}>
<div style={{ backgroundColor: '#ECEEF3', height: '100%' }}>
<Row style={{ height: '100%' }}>
<Col span={6} style={{ height: '100%' }} >
<div className='mr-3' style={{ backgroundColor: '#fff' }}>
<ModelTree onSelect={this.onTreeSelect} />
</div>
</Col>
<Col span={18}>
<div style={{ backgroundColor: '#fff' }}>
<div
className='p-3'
style={{
......@@ -75,13 +81,13 @@ class Model extends React.Component {
borderBottom: "1px solid #EFEFEF",
}}
>
<Button type="primary" style={{marginLeft: 'auto'}}>全选</Button>
<Button type="primary" className='ml-3'>提交审核</Button>
<Button type="primary" style={{ marginLeft: 'auto' }}>提交审核</Button>
<Button type="primary" className='ml-3' onClick={this.onImportBtnClick}>模型创建</Button>
<Button type="primary" className='ml-3' onClick={this.onExportBtnClick}>模型导出</Button>
</div>
<div className='p-3'>
<ModelTable data={tableData} onChange={this.onTableChange} />
<ModelTable loading={loadingTableData} data={tableData} onChange={this.onTableChange} />
</div>
</div>
</Col>
</Row>
......
src/view/Signin/index.jsx
......@@ -4,7 +4,7 @@ import { connect } from 'react-redux';
import CryptoJS from "crypto-js";
import { UserOutlined, LockOutlined } from "@ant-design/icons";
import { Open, Assert, ContextPath } from '../../util';
import { Open, Assert, ContextPath, showMessage } from '../../util';
import { dispatchLatest } from '../../model';
import loginBG from "../../assets/login_bg.png";
......@@ -26,7 +26,7 @@ class Signin extends Component {
return;
}
Assert(sess === "ok", "用户名或密码不正确");
message.success('登录成功');
showMessage('success', '登录成功');
history.push(referer || `${ContextPath}/home`);
}
});
......
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