U web update

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

@@ -0,0 +1,94 @@
+import React from 'react';
+import {observer} from 'mobx-react';
+import {Modal, Form, Transfer, message, Tabs, Alert} from 'antd';
+import http from 'libs/http';
+import serviceStore from '../service/store';
+import store from './store';
+
+@observer
+class Rel extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      loading: false,
+      services: [],
+      apps: store.records.filter(x => x.id !== store.record.id).map(x => ({...x, key: x.id, _key: x.key}))
+    }
+  }
+
+  componentDidMount() {
+    if (serviceStore.records.length === 0) {
+      serviceStore.fetchRecords().then(this._updateRecords)
+    } else {
+      this._updateRecords()
+    }
+  }
+
+  _updateRecords = () => {
+    const services = serviceStore.records.map(x => {
+      return {...x, key: x.id, _key: x.key}
+    });
+    this.setState({services})
+  };
+
+  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.relVisible = false}
+        confirmLoading={this.state.loading}
+        onOk={this.handleSubmit}>
+        <Alert
+          closable
+          showIcon
+          type="info"
+          message="小提示"
+          style={{margin: '0 80px 20px'}}
+          description={[
+            <p key={1}>设置依赖的应用仅会获取到其<span style={{color: 'red'}}>公共</span>配置，私有配置并不会被其他应用所获取。</p>,
+            <p key={2}>服务不存在公共和私有配置的概念，所以会获取到依赖服务的所有配置信息。</p>
+          ]}/>
+        <Tabs tabPosition="left">
+          <Tabs.TabPane tab="应用依赖" key="app">
+            <Form.Item label="设置依赖的应用">
+              <Transfer
+                listStyle={{width: 280, minHeight: 300}}
+                titles={['所有应用', '已选应用']}
+                dataSource={this.state.apps}
+                targetKeys={store.confRel.app}
+                onChange={keys => store.confRel.app = keys}
+                render={item => `${item.name}(${item._key})`}/>
+            </Form.Item>
+          </Tabs.TabPane>
+          <Tabs.TabPane tab="服务依赖" key="service">
+            <Form.Item label="设置依赖的服务">
+              <Transfer
+                listStyle={{width: 280, minHeight: 300}}
+                titles={['所有服务', '已选服务']}
+                dataSource={this.state.services}
+                targetKeys={store.confRel.service}
+                onChange={keys => store.confRel.service = keys}
+                render={item => `${item.name}(${item._key})`}/>
+            </Form.Item>
+          </Tabs.TabPane>
+        </Tabs>
+      </Modal>
+    )
+  }
+}
+
+export default Rel

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

@@ -1,11 +1,10 @@
 import React from 'react';
-import { observer } from 'mobx-react';
+import {observer} from 'mobx-react';
-import { Link } from 'react-router-dom';
+import {Link} from 'react-router-dom';
-import { Table, Divider, Modal, message } from 'antd';
+import {Table, Divider, Modal, message} from 'antd';
-import ComForm from './Form';
 import http from 'libs/http';
 import store from './store';
-import { LinkButton } from "components";
+import {LinkButton} from "components";
 
 @observer
 class ComTable extends React.Component {
@@ -36,6 +35,8 @@ class ComTable extends React.Component {
         <Divider type="vertical"/>
         <LinkButton onClick={() => this.handleDelete(info)}>删除</LinkButton>
         <Divider type="vertical"/>
+        <LinkButton onClick={() => store.showRel(info)}>依赖</LinkButton>
+        <Divider type="vertical"/>
         <Link to={`/config/setting/app/${info.id}`}>配置</Link>
       </span>
     )
@@ -61,10 +62,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>
     )
   }
 }

spug_web/src/pages/config/app/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 Rel from './Rel';
 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.relVisible && <Rel />}
     </Card>
   )
 })

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

@@ -4,8 +4,10 @@ import http from 'libs/http';
 class Store {
   @observable records = [];
   @observable record = {};
+  @observable confRel = {};
   @observable isFetching = false;
   @observable formVisible = false;
+  @observable relVisible = false;
 
   @observable f_name;
 
@@ -19,6 +21,15 @@ class Store {
   showForm = (info = {}) => {
     this.formVisible = true;
     this.record = info
+  };
+
+  showRel = (info) => {
+    this.relVisible = true;
+    this.record = info;
+    this.confRel = {
+      app: info['rel_apps'],
+      service: info['rel_services']
+    }
   }
 }
 

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

@@ -11,7 +11,7 @@ class Store {
 
   fetchRecords = () => {
     this.isFetching = true;
-    http.get('/api/config/service/')
+    return http.get('/api/config/service/')
       .then(res => this.records = res)
       .finally(() => this.isFetching = false)
   };