From a36d1340d28e5a5ba5a1d4ac73ceac81ed73ebc6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=9B=B7=E4=BA=8C=E7=8C=9B?= Date: Sun, 29 Dec 2019 23:23:29 +0800 Subject: [PATCH] A web update --- spug_web/src/pages/system/role/Form.js | 2 - spug_web/src/pages/system/role/Permission.js | 109 ++++++++++++++++++ spug_web/src/pages/system/role/Table.js | 8 +- spug_web/src/pages/system/role/codes.js | 105 +++++++++++++++++ spug_web/src/pages/system/role/index.js | 4 + .../src/pages/system/role/index.module.css | 11 ++ spug_web/src/pages/system/role/store.js | 26 +++++ 7 files changed, 258 insertions(+), 7 deletions(-) create mode 100644 spug_web/src/pages/system/role/Permission.js create mode 100644 spug_web/src/pages/system/role/codes.js create mode 100644 spug_web/src/pages/system/role/index.module.css diff --git a/spug_web/src/pages/system/role/Form.js b/spug_web/src/pages/system/role/Form.js index 14b697c..92578e9 100644 --- a/spug_web/src/pages/system/role/Form.js +++ b/spug_web/src/pages/system/role/Form.js @@ -10,8 +10,6 @@ class ComForm extends React.Component { super(props); this.state = { loading: false, - type: null, - body: store.record['body'], } } diff --git a/spug_web/src/pages/system/role/Permission.js b/spug_web/src/pages/system/role/Permission.js new file mode 100644 index 0000000..9b9dab9 --- /dev/null +++ b/spug_web/src/pages/system/role/Permission.js @@ -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}) => ( + this.handlePermCheck(mod, page, perm)} + checked={store.permissions[mod][page].includes(perm)}> + {children} + + )); + + render() { + const PermBox = this.PermBox; + return ( + store.permVisible = false} + confirmLoading={this.state.loading} + onOk={this.handleSubmit}> + + + + + + + + + + {codes.map(mod => ( + mod.pages.map((page, index) => ( + + {index === 0 && } + + + {perm.label} + + ))} + + + + )) + ))} + + +
模块页面功能
{mod.label} + this.handleAllCheck(e, mod.key, page.key)}> + {page.label} + + + + {page.perms.map(perm => ( +
+ + ) + } +} + +export default Permission \ No newline at end of file diff --git a/spug_web/src/pages/system/role/Table.js b/spug_web/src/pages/system/role/Table.js index c8bc611..992fa9a 100644 --- a/spug_web/src/pages/system/role/Table.js +++ b/spug_web/src/pages/system/role/Table.js @@ -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 { store.showForm(info)}>编辑 + store.showPerm(info)}>权限 + this.handleDelete(info)}>删除 ) @@ -58,10 +59,7 @@ class ComTable extends React.Component { data = data.filter(item => item['name'].toLowerCase().includes(store.f_name.toLowerCase())) } return ( - - - {store.formVisible && } - +
) } } diff --git a/spug_web/src/pages/system/role/codes.js b/spug_web/src/pages/system/role/codes.js new file mode 100644 index 0000000..a3e5bf0 --- /dev/null +++ b/spug_web/src/pages/system/role/codes.js @@ -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: '修改配置'}, + ] + }] +}] \ No newline at end of file diff --git a/spug_web/src/pages/system/role/index.js b/spug_web/src/pages/system/role/index.js index dedf0d4..7943325 100644 --- a/spug_web/src/pages/system/role/index.js +++ b/spug_web/src/pages/system/role/index.js @@ -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 () { + {store.formVisible && } + {store.permVisible && } ) }) \ No newline at end of file diff --git a/spug_web/src/pages/system/role/index.module.css b/spug_web/src/pages/system/role/index.module.css new file mode 100644 index 0000000..f7b3079 --- /dev/null +++ b/spug_web/src/pages/system/role/index.module.css @@ -0,0 +1,11 @@ +.container { + width: 100%; +} + +.container :global(.ant-checkbox-group) { + width: 100%; +} + +.container td { + padding: 5px 15px; +} \ No newline at end of file diff --git a/spug_web/src/pages/system/role/store.js b/spug_web/src/pages/system/role/store.js index 9d2d3ef..248d601 100644 --- a/spug_web/src/pages/system/role/store.js +++ b/spug_web/src/pages/system/role/store.js @@ -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; } }