A web update

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

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

spug_web/src/pages/config/routes.js

@@ -1,9 +1,11 @@
 import { makeRoute } from 'libs/router';
 import Environment from './environment';
 import Service from './service';
+import Setting from './setting';
 
 
 export default [
   makeRoute('/environment', Environment),
   makeRoute('/service', Service),
+  makeRoute('/setting/:type/:id', Setting),
 ]

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import { observer } from 'mobx-react';
+import { Link } from 'react-router-dom';
 import { Table, Divider, Modal, message } from 'antd';
 import ComForm from './Form';
 import http from 'libs/http';
@@ -34,6 +35,8 @@ class ComTable extends React.Component {
         <LinkButton onClick={() => store.showForm(info)}>编辑</LinkButton>
         <Divider type="vertical"/>
         <LinkButton onClick={() => this.handleDelete(info)}>删除</LinkButton>
+        <Divider type="vertical"/>
+        <Link to={`/config/setting/src/${info.id}`}>配置</Link>
       </span>
     )
   }];

spug_web/src/pages/config/setting/Form.js

@@ -0,0 +1,105 @@
+import React from 'react';
+import { observer } from 'mobx-react';
+import { Modal, Form, Input, Checkbox, Row, Col, message } from 'antd';
+import http from 'libs/http';
+import store from './store';
+import envStore from '../environment/store'
+import lds from 'lodash';
+
+@observer
+class ComForm extends React.Component {
+  constructor(props) {
+    super(props);
+    this.isModify = store.record.id !== undefined;
+    this.state = {
+      loading: false,
+      envs: this.isModify ? [store.env.id] : []
+    }
+  }
+
+  handleSubmit = () => {
+    this.setState({loading: true});
+    const formData = this.props.form.getFieldsValue();
+    let request;
+    if (this.isModify) {
+      formData['id'] = store.record.id;
+      request = http.patch('/api/config/', formData)
+    } else {
+      formData['type'] = store.type;
+      formData['o_id'] = store.id;
+      formData['envs'] = this.state.envs;
+      formData['is_public'] = true;
+      request = http.post('/api/config/', formData)
+    }
+    request.then(res => {
+      message.success('操作成功');
+      store.formVisible = false;
+      store.fetchRecords()
+    }, () => this.setState({loading: false}))
+  };
+
+  handleEnvCheck = (id) => {
+    if (!this.isModify) {
+      const index = this.state.envs.indexOf(id);
+      if (index !== -1) {
+        this.state.envs.splice(index, 1);
+      } else {
+        this.state.envs.push(id);
+      }
+      this.setState({envs: this.state.envs})
+    }
+  };
+
+  render() {
+    const info = store.record;
+    const {envs} = this.state;
+    const {getFieldDecorator} = this.props.form;
+    const itemLayout = {
+      labelCol: {span: 6},
+      wrapperCol: {span: 14}
+    };
+    return (
+      <Modal
+        visible
+        width={800}
+        maskClosable={false}
+        title={store.record.id ? '更新配置' : '新增配置'}
+        onCancel={() => store.formVisible = false}
+        confirmLoading={this.state.loading}
+        onOk={this.handleSubmit}>
+        <Form>
+          <Form.Item {...itemLayout} required label="Key">
+            {getFieldDecorator('key', {initialValue: info['key']})(
+              <Input disabled={this.isModify} placeholder="请输入"/>
+            )}
+          </Form.Item>
+          <Form.Item {...itemLayout} label="Value">
+            {getFieldDecorator('value', {initialValue: info['value']})(
+              <Input.TextArea placeholder="请输入"/>
+            )}
+          </Form.Item>
+          <Form.Item {...itemLayout} label="备注">
+            {getFieldDecorator('desc', {initialValue: info['desc']})(
+              <Input.TextArea placeholder="请输入备注信息"/>
+            )}
+          </Form.Item>
+          <Form.Item {...itemLayout} label="选择环境">
+            {envStore.records.map((item, index) => (
+              <Row
+                key={item.id}
+                onClick={() => this.handleEnvCheck(item.id)}
+                style={{cursor: 'pointer', borderTop: index ? '1px solid #e8e8e8' : ''}}>
+                <Col span={2}><Checkbox disabled={this.isModify} checked={envs.includes(item.id)}/></Col>
+                <Col span={3}>{item.key}</Col>
+                <Col span={4}>{item.name}</Col>
+                <Col span={15}>{item.desc}</Col>
+              </Row>
+            ))}
+          </Form.Item>
+        </Form>
+      </Modal>
+    )
+  }
+}
+
+export default Form.create()(ComForm)

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

@@ -0,0 +1,61 @@
+import React from 'react';
+import { observer } from 'mobx-react';
+import { Table, Divider, Modal, message } from 'antd';
+import { LinkButton } from 'components';
+import ComForm from './Form';
+import http from 'libs/http';
+import store from './store';
+import lds from 'lodash';
+
+@observer
+class ComTable extends React.Component {
+  columns = [{
+    title: 'Key',
+    dataIndex: 'key',
+  }, {
+    title: 'Value',
+    dataIndex: 'value',
+  }, {
+    title: '描述信息',
+    dataIndex: 'desc',
+    ellipsis: true
+  }, {
+    title: '操作',
+    render: info => (
+      <span>
+        <LinkButton onClick={() => store.showForm(info)}>编辑</LinkButton>
+        <Divider type="vertical"/>
+        <LinkButton onClick={() => this.handleDelete(info)}>删除</LinkButton>
+      </span>
+    )
+  }];
+
+  handleDelete = (text) => {
+    Modal.confirm({
+      title: '删除确认',
+      content: `确定要删除【${store.env.name}】环境下的配置【${text['key']}】?`,
+      onOk: () => {
+        return http.delete('/api/config/', {params: {id: text.id}})
+          .then(() => {
+            message.success('删除成功');
+            store.fetchRecords()
+          })
+      }
+    })
+  };
+
+  render() {
+    let data = store.records;
+    if (store.f_name) {
+      data = data.filter(item => item['key'].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>
+    )
+  }
+}
+
+export default ComTable

spug_web/src/pages/config/setting/index.js

@@ -0,0 +1,72 @@
+import React from 'react';
+import { observer } from 'mobx-react';
+import { Menu, Input, Button } from 'antd';
+import envStore from '../environment/store';
+import styles from './index.module.css';
+import { SearchForm } from 'components';
+import ComTable from './Table';
+import store from './store';
+
+@observer
+class Index extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      // envId: 0
+    }
+  }
+
+  componentDidMount() {
+    const {type, id} = this.props.match.params;
+    store.type = type;
+    store.id = id;
+    if (envStore.records.length === 0) {
+      envStore.fetchRecords().then(() => this.updateEnv())
+    } else {
+      this.updateEnv()
+    }
+  }
+
+  updateEnv = (env) => {
+    store.env = env || envStore.records[0];
+    store.fetchRecords()
+  };
+
+  render() {
+    return (
+      <div className={styles.container}>
+        <div className={styles.left}>
+          <Menu
+            mode="inline"
+            selectedKeys={[String(store.env.id)]}
+            style={{border: 'none'}}
+            onSelect={({item}) => this.updateEnv(item.props.env)}>
+            {envStore.records.map(item => (
+              <Menu.Item key={item.id} env={item}>{item.name} ({item.key})</Menu.Item>
+            ))}
+          </Menu>
+        </div>
+        <div className={styles.right}>
+          <SearchForm>
+            <SearchForm.Item span={8} title="Key">
+              <Input allowClear onChange={e => store.f_name = e.target.value} placeholder="请输入"/>
+            </SearchForm.Item>
+            <SearchForm.Item span={4}>
+              <Button type="primary" icon="sync" onClick={store.fetchRecords}>刷新</Button>
+            </SearchForm.Item>
+            <SearchForm.Item span={4}>
+              <Button type="primary" style={{backgroundColor: 'orange', borderColor: 'orange'}} icon="history"
+                      onClick={store.fetchRecords}>更改历史</Button>
+            </SearchForm.Item>
+            <SearchForm.Item span={8} style={{textAlign: 'right'}}>
+              <Button type="primary" icon="plus" onClick={() => store.showForm()}>新增配置</Button>
+            </SearchForm.Item>
+          </SearchForm>
+          <ComTable/>
+        </div>
+      </div>
+    )
+  }
+}
+
+export default Index

spug_web/src/pages/config/setting/index.module.css

@@ -0,0 +1,25 @@
+.container {
+    display: flex;
+    background-color: #fff;
+    padding: 16px 0;
+}
+.left {
+    flex: 2;
+    border-right: 1px solid #e8e8e8;
+}
+.right {
+    flex: 7;
+    padding: 8px 40px;
+}
+
+.title {
+    margin-bottom: 12px;
+    color: rgba(0, 0, 0, .85);
+    font-weight: 500;
+    font-size: 20px;
+    line-height: 28px;
+}
+
+.form {
+    max-width: 320px;
+}

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

@@ -0,0 +1,29 @@
+import { observable } from "mobx";
+import http from 'libs/http';
+
+class Store {
+  @observable records = [];
+  @observable record = {};
+  @observable env = {};
+  @observable type;
+  @observable id;
+  @observable isFetching = false;
+  @observable formVisible = false;
+
+  @observable f_name;
+
+  fetchRecords = () => {
+    const params = {type: this.type, id: this.id, env_id: this.env.id};
+    this.isFetching = true;
+    http.get('/api/config/', {params})
+      .then(res => this.records = res)
+      .finally(() => this.isFetching = false)
+  };
+
+  showForm = (info) => {
+    this.formVisible = true;
+    this.record = info || {};
+  }
+}
+
+export default new Store()