U web update

pull/22/head
vapao 2020-01-12 00:57:05 +08:00
parent 2bd6136cb8
commit e845691eda
6 changed files with 118 additions and 15 deletions

View File

@ -13,7 +13,7 @@ class Store {
fetchRecords = () => {
this.isFetching = true;
http.get('/api/app/')
return http.get('/api/app/')
.then(res => this.records = res)
.finally(() => this.isFetching = false)
};

View File

@ -0,0 +1,96 @@
import React from 'react';
import {observer} from 'mobx-react';
import {Modal, Form, Transfer, message, Tabs, Alert} from 'antd';
import http from 'libs/http';
import envStore from 'pages/config/environment/store';
import appStore from 'pages/config/app/store';
import store from './store';
@observer
class DeployPerm extends React.Component {
constructor(props) {
super(props);
this.state = {
loading: false,
envs: [],
apps: []
}
}
componentDidMount() {
if (envStore.records.length === 0) {
envStore.fetchRecords().then(
() => this._updateRecords(envStore.records, 'envs')
)
} else {
this._updateRecords(envStore.records, 'envs')
}
if (appStore.records.length === 0) {
appStore.fetchRecords().then(
() => this._updateRecords(appStore.records, 'apps')
)
} else {
this._updateRecords(appStore.records, 'apps')
}
}
_updateRecords = (records, key) => {
const data = records.map(x => {
return {...x, key: x.id, _key: x.key}
});
this.setState({[key]: data})
};
handleSubmit = () => {
this.setState({loading: true});
const {app, service} = store.confRel;
http.patch('/api/app/', {id: store.record.id, rel_apps: app, rel_services: service})
.then(res => {
message.success('操作成功');
store.relVisible = false;
store.fetchRecords()
}, () => this.setState({loading: false}))
};
render() {
return (
<Modal
visible
width={800}
maskClosable={false}
title="发布权限设置"
onCancel={() => store.deployPermVisible = false}
confirmLoading={this.state.loading}
onOk={this.handleSubmit}>
<Alert closable style={{width: 600, margin: '0 auto 20px', color: '#31708f !important'}} type="info"
message="小提示: 发布权限仅影响可发布的对象,页面公共权限请在功能权限中设置。"/>
<Tabs tabPosition="left">
<Tabs.TabPane tab="环境权限" key="env">
<Form.Item label="设置可发布至哪个环境">
<Transfer
listStyle={{width: 280, minHeight: 300}}
titles={['所有环境', '已选环境']}
dataSource={this.state.envs}
targetKeys={store.deployRel.envs}
onChange={keys => store.deployRel.envs = keys}
render={item => `${item.name}(${item._key})`}/>
</Form.Item>
</Tabs.TabPane>
<Tabs.TabPane tab="应用权限" key="app">
<Form.Item label="设置可发布的应用">
<Transfer
listStyle={{width: 280, minHeight: 300}}
titles={['所有应用', '已选应用']}
dataSource={this.state.apps}
targetKeys={store.deployRel.apps}
onChange={keys => store.deployRel.apps = keys}
render={item => `${item.name}(${item._key})`}/>
</Form.Item>
</Tabs.TabPane>
</Tabs>
</Modal>
)
}
}
export default DeployPerm

View File

@ -8,7 +8,7 @@ import styles from './index.module.css';
import lds from 'lodash';
@observer
class Permission extends React.Component {
class PagePerm extends React.Component {
constructor(props) {
super(props);
this.state = {
@ -66,7 +66,7 @@ class Permission extends React.Component {
maskClosable={false}
title="功能权限设置"
className={styles.container}
onCancel={() => store.permVisible = false}
onCancel={() => store.pagePermVisible = false}
confirmLoading={this.state.loading}
onOk={this.handleSubmit}>
<Alert closable style={{width: 600, margin: '0 auto 20px', color: '#31708f !important'}} type="info"
@ -109,4 +109,4 @@ class Permission extends React.Component {
}
}
export default Permission
export default PagePerm

View File

@ -12,11 +12,6 @@ class ComTable extends React.Component {
}
columns = [{
title: '序号',
key: 'series',
render: (_, __, index) => index + 1,
width: 80,
}, {
title: '角色名称',
dataIndex: 'name',
}, {
@ -28,11 +23,14 @@ class ComTable extends React.Component {
ellipsis: true
}, {
title: '操作',
width: 300,
render: info => (
<span>
<LinkButton onClick={() => store.showForm(info)}>编辑</LinkButton>
<Divider type="vertical"/>
<LinkButton onClick={() => store.showPerm(info)}>权限</LinkButton>
<LinkButton onClick={() => store.showPagePerm(info)}>功能权限</LinkButton>
<Divider type="vertical"/>
<LinkButton onClick={() => store.showDeployPerm(info)}>发布权限</LinkButton>
<Divider type="vertical"/>
<LinkButton onClick={() => this.handleDelete(info)}>删除</LinkButton>
</span>

View File

@ -4,7 +4,8 @@ import { Card, Input, Button } from 'antd';
import { SearchForm } from 'components';
import ComTable from './Table';
import ComForm from './Form';
import Permission from './Permission';
import PagePerm from './PagePerm';
import DeployPerm from './DeployPerm';
import store from './store';
export default observer(function () {
@ -23,7 +24,8 @@ export default observer(function () {
</div>
<ComTable/>
{store.formVisible && <ComForm/>}
{store.permVisible && <Permission/>}
{store.pagePermVisible && <PagePerm/>}
{store.deployPermVisible && <DeployPerm/>}
</Card>
)
})

View File

@ -8,9 +8,11 @@ class Store {
@observable records = [];
@observable record = {};
@observable permissions = lds.cloneDeep(codes);
@observable deployRel = {}
@observable isFetching = false;
@observable formVisible = false;
@observable permVisible = true;
@observable pagePermVisible = false;
@observable deployPermVisible = true;
@observable f_name;
@ -42,9 +44,14 @@ class Store {
this.record = info
};
showPerm = (info) => {
showPagePerm = (info) => {
this.record = info;
this.permVisible = true;
this.pagePermVisible = true;
};
showDeployPerm = (info) => {
this.record = info;
this.deployPermVisible = true;
}
}