A web update

pull/22/head
雷二猛 2019-12-29 23:23:29 +08:00
parent a61cc9e5df
commit a36d1340d2
7 changed files with 258 additions and 7 deletions

View File

@ -10,8 +10,6 @@ class ComForm extends React.Component {
super(props);
this.state = {
loading: false,
type: null,
body: store.record['body'],
}
}

View File

@ -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

View File

@ -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}/>
)
}
}

View File

@ -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: '修改配置'},
]
}]
}]

View File

@ -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>
)
})

View File

@ -0,0 +1,11 @@
.container {
width: 100%;
}
.container :global(.ant-checkbox-group) {
width: 100%;
}
.container td {
padding: 5px 15px;
}

View File

@ -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;
}
}