U web update

spug_web/src/pages/config/app/store.js

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

spug_web/src/pages/system/role/DeployPerm.js

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

spug_web/src/pages/system/role/PagePerm.js

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

spug_web/src/pages/system/role/Table.js

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

spug_web/src/pages/system/role/index.js

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

spug_web/src/pages/system/role/store.js

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