mirror of https://github.com/openspug/spug
A web update
parent
a61cc9e5df
commit
a36d1340d2
|
@ -10,8 +10,6 @@ class ComForm extends React.Component {
|
|||
super(props);
|
||||
this.state = {
|
||||
loading: false,
|
||||
type: null,
|
||||
body: store.record['body'],
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -0,0 +1,109 @@
|
|||
import React from 'react';
|
||||
import { observer } from 'mobx-react';
|
||||
import { Modal, Checkbox, Row, Col, message } from 'antd';
|
||||
import http from 'libs/http';
|
||||
import store from './store';
|
||||
import codes from './codes';
|
||||
import styles from './index.module.css';
|
||||
import lds from 'lodash';
|
||||
|
||||
@observer
|
||||
class Permission extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
loading: false,
|
||||
}
|
||||
}
|
||||
|
||||
handleSubmit = () => {
|
||||
console.log(JSON.stringify(store.permissions));
|
||||
// this.setState({loading: true});
|
||||
// const formData = this.props.form.getFieldsValue();
|
||||
// formData['id'] = store.record.id;
|
||||
// http.post('/api/account/role/', formData)
|
||||
// .then(res => {
|
||||
// message.success('操作成功');
|
||||
// store.formVisible = false;
|
||||
// store.fetchRecords()
|
||||
// }, () => this.setState({loading: false}))
|
||||
};
|
||||
|
||||
handleAllCheck = (e, mod, page) => {
|
||||
const checked = e.target.checked;
|
||||
if (checked) {
|
||||
const key = `${mod}.${page}`;
|
||||
store.permissions[mod][page] = lds.clone(store.allPerms[key])
|
||||
} else {
|
||||
store.permissions[mod][page] = []
|
||||
}
|
||||
};
|
||||
|
||||
handlePermCheck = (mod, page, perm) => {
|
||||
const perms = store.permissions[mod][page];
|
||||
if (perms.includes(perm)) {
|
||||
perms.splice(perms.indexOf(perm), 1)
|
||||
} else {
|
||||
perms.push(perm)
|
||||
}
|
||||
};
|
||||
|
||||
PermBox = observer(({mod, page, perm, children}) => (
|
||||
<Checkbox
|
||||
value={perm}
|
||||
onChange={() => this.handlePermCheck(mod, page, perm)}
|
||||
checked={store.permissions[mod][page].includes(perm)}>
|
||||
{children}
|
||||
</Checkbox>
|
||||
));
|
||||
|
||||
render() {
|
||||
const PermBox = this.PermBox;
|
||||
return (
|
||||
<Modal
|
||||
visible
|
||||
width={1000}
|
||||
maskClosable={false}
|
||||
title="功能权限设置"
|
||||
onCancel={() => store.permVisible = false}
|
||||
confirmLoading={this.state.loading}
|
||||
onOk={this.handleSubmit}>
|
||||
<table border="1" className={styles.container}>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>模块</th>
|
||||
<th>页面</th>
|
||||
<th>功能</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{codes.map(mod => (
|
||||
mod.pages.map((page, index) => (
|
||||
<tr key={page.key}>
|
||||
{index === 0 && <td rowSpan={mod.pages.length}>{mod.label}</td>}
|
||||
<td>
|
||||
<Checkbox onChange={e => this.handleAllCheck(e, mod.key, page.key)}>
|
||||
{page.label}
|
||||
</Checkbox>
|
||||
</td>
|
||||
<td>
|
||||
<Row>
|
||||
{page.perms.map(perm => (
|
||||
<Col key={perm.key} span={8}>
|
||||
<PermBox mod={mod.key} page={page.key} perm={perm.key}>{perm.label}</PermBox>
|
||||
</Col>
|
||||
))}
|
||||
</Row>
|
||||
</td>
|
||||
</tr>
|
||||
))
|
||||
))}
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
</Modal>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default Permission
|
|
@ -1,7 +1,6 @@
|
|||
import React from 'react';
|
||||
import { observer } from 'mobx-react';
|
||||
import { Table, Divider, Modal, message } from 'antd';
|
||||
import ComForm from './Form';
|
||||
import http from 'libs/http';
|
||||
import store from './store';
|
||||
import { LinkButton } from "components";
|
||||
|
@ -33,6 +32,8 @@ class ComTable extends React.Component {
|
|||
<span>
|
||||
<LinkButton onClick={() => store.showForm(info)}>编辑</LinkButton>
|
||||
<Divider type="vertical"/>
|
||||
<LinkButton onClick={() => store.showPerm(info)}>权限</LinkButton>
|
||||
<Divider type="vertical"/>
|
||||
<LinkButton onClick={() => this.handleDelete(info)}>删除</LinkButton>
|
||||
</span>
|
||||
)
|
||||
|
@ -58,10 +59,7 @@ class ComTable extends React.Component {
|
|||
data = data.filter(item => item['name'].toLowerCase().includes(store.f_name.toLowerCase()))
|
||||
}
|
||||
return (
|
||||
<React.Fragment>
|
||||
<Table rowKey="id" loading={store.isFetching} dataSource={data} columns={this.columns}/>
|
||||
{store.formVisible && <ComForm/>}
|
||||
</React.Fragment>
|
||||
<Table rowKey="id" loading={store.isFetching} dataSource={data} columns={this.columns}/>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
|
@ -0,0 +1,105 @@
|
|||
export default [{
|
||||
key: 'host',
|
||||
label: '主机管理',
|
||||
pages: [{
|
||||
key: 'host',
|
||||
label: '主机管理',
|
||||
perms: [
|
||||
{key: 'view', label: '查看主机'},
|
||||
{key: 'add', label: '新建主机'},
|
||||
{key: 'edit', label: '编辑主机'},
|
||||
{key: 'del', label: '删除主机'},
|
||||
{key: 'console', label: 'Console'},
|
||||
]
|
||||
}]
|
||||
}, {
|
||||
key: 'exec',
|
||||
label: '批量执行',
|
||||
pages: [{
|
||||
key: 'task',
|
||||
label: '执行任务',
|
||||
perms: [
|
||||
{key: 'do', label: '执行任务'}
|
||||
]
|
||||
}, {
|
||||
key: 'template',
|
||||
label: '模板管理',
|
||||
perms: [
|
||||
{key: 'view', label: '查看模板'},
|
||||
{key: 'add', label: '新建模板'},
|
||||
{key: 'edit', label: '编辑模板'},
|
||||
{key: 'del', label: '删除模板'},
|
||||
]
|
||||
}]
|
||||
}, {
|
||||
key: 'deploy',
|
||||
label: '应用发布',
|
||||
pages: [{
|
||||
key: 'app',
|
||||
label: '应用管理',
|
||||
perms: [
|
||||
{key: 'view', label: '查看应用'},
|
||||
{key: 'add', label: '新建应用'},
|
||||
{key: 'edit', label: '编辑应用'},
|
||||
{key: 'del', label: '删除应用'},
|
||||
]
|
||||
}, {
|
||||
key: 'request',
|
||||
label: '发布申请',
|
||||
perms: [
|
||||
{key: 'view', label: '查看申请'},
|
||||
{key: 'add', label: '新建申请'},
|
||||
{key: 'edit', label: '编辑申请'},
|
||||
{key: 'del', label: '删除申请'},
|
||||
{key: 'do', label: '执行发布'}
|
||||
]
|
||||
}]
|
||||
}, {
|
||||
key: 'schedule',
|
||||
label: '任务计划',
|
||||
pages: [{
|
||||
key: 'schedule',
|
||||
label: '任务计划',
|
||||
perms: [
|
||||
{key: 'view', label: '查看任务'},
|
||||
{key: 'add', label: '新建任务'},
|
||||
{key: 'edit', label: '编辑任务'},
|
||||
{key: 'del', label: '删除任务'},
|
||||
]
|
||||
}]
|
||||
}, {
|
||||
key: 'config',
|
||||
label: '配置中心',
|
||||
pages: [{
|
||||
key: 'env',
|
||||
label: '环境管理',
|
||||
perms: [
|
||||
{key: 'view', label: '查看环境'},
|
||||
{key: 'add', label: '新建环境'},
|
||||
{key: 'edit', label: '编辑环境'},
|
||||
{key: 'del', label: '删除环境'}
|
||||
]
|
||||
}, {
|
||||
key: 'service',
|
||||
label: '服务管理',
|
||||
perms: [
|
||||
{key: 'view', label: '查看服务'},
|
||||
{key: 'add', label: '新建服务'},
|
||||
{key: 'edit', label: '编辑服务'},
|
||||
{key: 'del', label: '删除服务'},
|
||||
{key: 'view_config', label: '查看配置'},
|
||||
{key: 'edit_config', label: '修改配置'},
|
||||
]
|
||||
}, {
|
||||
key: 'app',
|
||||
label: '应用管理',
|
||||
perms: [
|
||||
{key: 'view', label: '查看应用'},
|
||||
{key: 'add', label: '新建应用'},
|
||||
{key: 'edit', label: '编辑应用'},
|
||||
{key: 'del', label: '删除应用'},
|
||||
{key: 'view_config', label: '查看配置'},
|
||||
{key: 'edit_config', label: '修改配置'},
|
||||
]
|
||||
}]
|
||||
}]
|
|
@ -3,6 +3,8 @@ import { observer } from 'mobx-react';
|
|||
import { Card, Input, Button } from 'antd';
|
||||
import { SearchForm } from 'components';
|
||||
import ComTable from './Table';
|
||||
import ComForm from './Form';
|
||||
import Permission from './Permission';
|
||||
import store from './store';
|
||||
|
||||
export default observer(function () {
|
||||
|
@ -20,6 +22,8 @@ export default observer(function () {
|
|||
<Button type="primary" icon="plus" onClick={() => store.showForm()}>新建</Button>
|
||||
</div>
|
||||
<ComTable/>
|
||||
{store.formVisible && <ComForm/>}
|
||||
{store.permVisible && <Permission/>}
|
||||
</Card>
|
||||
)
|
||||
})
|
|
@ -0,0 +1,11 @@
|
|||
.container {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.container :global(.ant-checkbox-group) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.container td {
|
||||
padding: 5px 15px;
|
||||
}
|
|
@ -1,14 +1,23 @@
|
|||
import { observable } from "mobx";
|
||||
import http from 'libs/http';
|
||||
import codes from './codes';
|
||||
import lds from 'lodash';
|
||||
|
||||
class Store {
|
||||
allPerms = {};
|
||||
@observable records = [];
|
||||
@observable record = {};
|
||||
@observable permissions = lds.cloneDeep(codes);
|
||||
@observable isFetching = false;
|
||||
@observable formVisible = false;
|
||||
@observable permVisible = true;
|
||||
|
||||
@observable f_name;
|
||||
|
||||
constructor() {
|
||||
this.initPermissions()
|
||||
}
|
||||
|
||||
fetchRecords = () => {
|
||||
this.isFetching = true;
|
||||
http.get('/api/account/role/')
|
||||
|
@ -16,9 +25,26 @@ class Store {
|
|||
.finally(() => this.isFetching = false)
|
||||
};
|
||||
|
||||
initPermissions = () => {
|
||||
const tmp = {};
|
||||
for (let mod of codes) {
|
||||
tmp[mod.key] = {};
|
||||
for (let page of mod.pages) {
|
||||
tmp[mod.key][page.key] = [];
|
||||
this.allPerms[`${mod.key}.${page.key}`] = page.perms.map(x => x.key)
|
||||
}
|
||||
}
|
||||
this.permissions = tmp;
|
||||
};
|
||||
|
||||
showForm = (info = {}) => {
|
||||
this.formVisible = true;
|
||||
this.record = info
|
||||
};
|
||||
|
||||
showPerm = (info) => {
|
||||
this.record = info;
|
||||
this.permVisible = true;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in New Issue