mirror of https://github.com/openspug/spug
U web update
parent
2bd6136cb8
commit
e845691eda
|
@ -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)
|
||||
};
|
||||
|
|
|
@ -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
|
|
@ -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
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
)
|
||||
})
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in New Issue