From d65307d7515bcf07bdc3a44700ba2155b6d6264f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=9B=B7=E4=BA=8C=E7=8C=9B?= <live1989@foxmail.com>
Date: Sun, 22 Dec 2019 11:31:21 +0800
Subject: [PATCH] A web update

---
 spug_web/src/pages/deploy/request/Approve.js  | 55 +++++++++++++++++++
 spug_web/src/pages/deploy/request/Ext1Form.js |  2 +-
 spug_web/src/pages/deploy/request/Ext2Form.js |  2 +-
 spug_web/src/pages/deploy/request/Table.js    | 54 ++++++++++++++----
 spug_web/src/pages/deploy/request/index.js    |  8 ++-
 spug_web/src/pages/deploy/request/store.js    |  6 ++
 6 files changed, 111 insertions(+), 16 deletions(-)
 create mode 100644 spug_web/src/pages/deploy/request/Approve.js

diff --git a/spug_web/src/pages/deploy/request/Approve.js b/spug_web/src/pages/deploy/request/Approve.js
new file mode 100644
index 0000000..7a9aaeb
--- /dev/null
+++ b/spug_web/src/pages/deploy/request/Approve.js
@@ -0,0 +1,55 @@
+import React from 'react';
+import { observer } from 'mobx-react';
+import { Modal, Form, Input, Switch, message } from 'antd';
+import http from 'libs/http';
+import store from './store';
+
+@observer
+class Approve extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      loading: false,
+    }
+  }
+
+  handleSubmit = () => {
+    this.setState({loading: true});
+    const formData = this.props.form.getFieldsValue();
+    http.patch(`/api/deploy/request/${store.record.id}/`, formData)
+      .then(res => {
+        message.success('操作成功');
+        store.approveVisible = false;
+        store.fetchRecords()
+      }, () => this.setState({loading: false}))
+  };
+
+  render() {
+    const {getFieldDecorator, getFieldValue} = this.props.form;
+    return (
+      <Modal
+        visible
+        width={600}
+        maskClosable={false}
+        title="审核发布申请"
+        onCancel={() => store.approveVisible = false}
+        confirmLoading={this.state.loading}
+        onOk={this.handleSubmit}>
+        <Form labelCol={{span: 6}} wrapperCol={{span: 14}}>
+          <Form.Item required label="审批结果">
+            {getFieldDecorator('is_pass', {initialValue: true, valuePropName: "checked"})(
+              <Switch checkedChildren="通过" unCheckedChildren="驳回"/>
+            )}
+          </Form.Item>
+          <Form.Item required={getFieldValue('is_pass') === false} label={getFieldValue('is_pass') ? '审批意见' : '驳回原因'}>
+            {getFieldDecorator('reason')(
+              <Input.TextArea placeholder={getFieldValue('is_pass') ? '请输入审批意见' : '请输入驳回原因'}/>
+            )}
+          </Form.Item>
+        </Form>
+      </Modal>
+    )
+  }
+}
+
+export default Form.create()(Approve)
\ No newline at end of file
diff --git a/spug_web/src/pages/deploy/request/Ext1Form.js b/spug_web/src/pages/deploy/request/Ext1Form.js
index 145c600..887a5b7 100644
--- a/spug_web/src/pages/deploy/request/Ext1Form.js
+++ b/spug_web/src/pages/deploy/request/Ext1Form.js
@@ -18,7 +18,7 @@ class Ext1Form extends React.Component {
       extra1: lds.get(store.record, 'extra.1'),
       extra2: lds.get(store.record, 'extra.2'),
       versions: {},
-      host_ids: store.record['host_ids'].concat()
+      host_ids: store.record['app_host_ids'].concat()
     }
   }
 
diff --git a/spug_web/src/pages/deploy/request/Ext2Form.js b/spug_web/src/pages/deploy/request/Ext2Form.js
index a7b159d..4c3698d 100644
--- a/spug_web/src/pages/deploy/request/Ext2Form.js
+++ b/spug_web/src/pages/deploy/request/Ext2Form.js
@@ -13,7 +13,7 @@ class Ext2Form extends React.Component {
     this.state = {
       loading: false,
       type: null,
-      host_ids: store.record['host_ids'].concat()
+      host_ids: store.record['app_host_ids'].concat()
     }
   }
 
diff --git a/spug_web/src/pages/deploy/request/Table.js b/spug_web/src/pages/deploy/request/Table.js
index f810aac..6ad63bf 100644
--- a/spug_web/src/pages/deploy/request/Table.js
+++ b/spug_web/src/pages/deploy/request/Table.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 import { observer } from 'mobx-react';
-import { Table, Divider, Modal, Icon, message } from 'antd';
+import { Table, Divider, Modal, Icon, Popover, message } from 'antd';
 import http from 'libs/http';
 import store from './store';
 import { LinkButton } from "components";
@@ -43,7 +43,19 @@ class ComTable extends React.Component {
     }
   }, {
     title: '状态',
-    dataIndex: 'status_alias'
+    render: info => {
+      if (info.status === '-1' && info.reason) {
+        return <Popover title="驳回原因:" content={info.reason}>
+          <span style={{color: '#1890ff'}}>{info['status_alias']}</span>
+        </Popover>
+      } else if (info.status === '2' && info.reason) {
+        return <Popover title="审核意见:" content={info.reason}>
+          <span style={{color: '#1890ff'}}>{info['status_alias']}</span>
+        </Popover>
+      } else {
+        return info['status_alias']
+      }
+    }
   }, {
     title: '申请人',
     dataIndex: 'created_by_user',
@@ -52,15 +64,35 @@ class ComTable extends React.Component {
     dataIndex: 'created_at'
   }, {
     title: '操作',
-    render: info => (
-      <span>
-        <Link to={`/deploy/do/${info.id}`}>发布</Link>
-        <Divider type="vertical"/>
-        <LinkButton onClick={() => store.showForm(info)}>编辑</LinkButton>
-        <Divider type="vertical"/>
-        <LinkButton onClick={() => this.handleDelete(info)}>删除</LinkButton>
-      </span>
-    )
+    render: info => {
+      switch (info.status) {
+        case '-3':
+        case '3':
+          return <LinkButton onClick={() => store.showForm(info)}>回滚</LinkButton>;
+        case '-1':
+          return <React.Fragment>
+            <LinkButton onClick={() => store.showForm(info)}>编辑</LinkButton>
+            <Divider type="vertical"/>
+            <LinkButton onClick={() => this.handleDelete(info)}>删除</LinkButton>
+          </React.Fragment>;
+        case '1':
+          return <React.Fragment>
+            <LinkButton onClick={() => store.showApprove(info)}>审核</LinkButton>
+            <Divider type="vertical"/>
+            <LinkButton onClick={() => store.showForm(info)}>编辑</LinkButton>
+            <Divider type="vertical"/>
+            <LinkButton onClick={() => this.handleDelete(info)}>删除</LinkButton>
+          </React.Fragment>
+        case '2':
+          return <React.Fragment>
+            <Link to={`/deploy/do/${info.id}`}>发布</Link>
+            <Divider type="vertical"/>
+            <LinkButton onClick={() => this.handleDelete(info)}>删除</LinkButton>
+          </React.Fragment>;
+        default:
+          return null
+      }
+    }
   }];
 
   handleDelete = (text) => {
diff --git a/spug_web/src/pages/deploy/request/index.js b/spug_web/src/pages/deploy/request/index.js
index f6fc7a1..cd11aac 100644
--- a/spug_web/src/pages/deploy/request/index.js
+++ b/spug_web/src/pages/deploy/request/index.js
@@ -5,6 +5,7 @@ import { SearchForm } from 'components';
 import SelectApp from './SelectApp';
 import Ext1Form from './Ext1Form';
 import Ext2Form from './Ext2Form';
+import Approve from './Approve';
 import ComTable from './Table';
 import store from './store';
 
@@ -26,9 +27,10 @@ export default observer(function () {
         <Button type="primary" icon="plus" onClick={() => store.addVisible = true}>新建发布申请</Button>
       </div>
       <ComTable/>
-      {store.addVisible && <SelectApp />}
-      {store.ext1Visible && <Ext1Form />}
-      {store.ext2Visible && <Ext2Form />}
+      {store.addVisible && <SelectApp/>}
+      {store.ext1Visible && <Ext1Form/>}
+      {store.ext2Visible && <Ext2Form/>}
+      {store.approveVisible && <Approve/>}
     </Card>
   )
 })
\ No newline at end of file
diff --git a/spug_web/src/pages/deploy/request/store.js b/spug_web/src/pages/deploy/request/store.js
index 1fb9172..cbe513b 100644
--- a/spug_web/src/pages/deploy/request/store.js
+++ b/spug_web/src/pages/deploy/request/store.js
@@ -9,6 +9,7 @@ class Store {
   @observable addVisible = false;
   @observable ext1Visible = false;
   @observable ext2Visible = false;
+  @observable approveVisible = false;
 
   @observable f_name;
   @observable f_app_name;
@@ -27,6 +28,11 @@ class Store {
     } else {
       this.ext2Visible = true
     }
+  };
+
+  showApprove = (info) => {
+    this.record = info;
+    this.approveVisible = true;
   }
 }