A web update

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'],
     }
   }
 

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}) => (
+    <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

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 {
       <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}/>
-        <Table rowKey="id" loading={store.isFetching} dataSource={data} columns={this.columns}/>
-        {store.formVisible && <ComForm/>}
-      </React.Fragment>
     )
   }
 }

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

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 () {
         <Button type="primary" icon="plus" onClick={() => store.showForm()}>新建</Button>
       </div>
       <ComTable/>
+      {store.formVisible && <ComForm/>}
+      {store.permVisible && <Permission/>}
     </Card>
   )
 })

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

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