From dacb0f55ee2ba3a77dd6dee12743974c1aa8ce48 Mon Sep 17 00:00:00 2001
From: vapao <live1989@foxmail.com>
Date: Thu, 28 May 2020 18:58:56 +0800
Subject: [PATCH] =?UTF-8?q?A=20=E4=B8=BB=E6=9C=BA=E7=BC=96=E8=BE=91?=
 =?UTF-8?q?=E6=96=B0=E5=A2=9E=E4=BF=AE=E6=94=B9=E7=B1=BB=E5=88=AB=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 spug_api/apps/host/views.py     | 13 +++++++
 spug_web/src/pages/host/Form.js | 68 +++++++++++++++++++++++----------
 2 files changed, 60 insertions(+), 21 deletions(-)

diff --git a/spug_api/apps/host/views.py b/spug_api/apps/host/views.py
index 329a740..ef8e270 100644
--- a/spug_api/apps/host/views.py
+++ b/spug_api/apps/host/views.py
@@ -46,6 +46,19 @@ class HostView(View):
                 Host.objects.create(created_by=request.user, **form)
         return json_response(error=error)
 
+    def patch(self, request):
+        form, error = JsonParser(
+            Argument('id', type=int, required=False),
+            Argument('zone', help='请输入主机类别')
+        ).parse(request.body)
+        if error is None:
+            host = Host.objects.filter(pk=form.id).first()
+            if not host:
+                return json_response(error='未找到指定主机')
+            count = Host.objects.filter(zone=host.zone, deleted_by_id__isnull=True).update(zone=form.zone)
+            return json_response(count)
+        return json_response(error=error)
+
     def delete(self, request):
         form, error = JsonParser(
             Argument('id', type=int, help='请指定操作对象')
diff --git a/spug_web/src/pages/host/Form.js b/spug_web/src/pages/host/Form.js
index b25cdb4..c610d10 100644
--- a/spug_web/src/pages/host/Form.js
+++ b/spug_web/src/pages/host/Form.js
@@ -16,7 +16,8 @@ class ComForm extends React.Component {
     this.state = {
       loading: false,
       password: null,
-      zone: null,
+      addZone: null,
+      editZone: store.record.zone,
     }
   }
 
@@ -65,26 +66,48 @@ class ComForm extends React.Component {
   };
 
   handleAddZone = () => {
-    Modal.confirm({
-      icon: 'exclamation-circle',
-      title: '添加主机类别',
-      content: this.addZoneForm,
-      onOk: () => {
-        if (this.state.zone) {
-          store.zones.push(this.state.zone);
-          this.props.form.setFieldsValue({'zone': this.state.zone})
-        }
-      },
-    })
+    this.setState({zone: ''}, () => {
+      Modal.confirm({
+        icon: 'exclamation-circle',
+        title: '添加主机类别',
+        content: (
+          <Form>
+            <Form.Item required label="主机类别">
+              <Input onChange={e => this.setState({addZone: e.target.value})}/>
+            </Form.Item>
+          </Form>
+        ),
+        onOk: () => {
+          if (this.state.addZone) {
+            store.zones.push(this.state.addZone);
+            this.props.form.setFieldsValue({'zone': this.state.addZone})
+          }
+        },
+      })
+    });
   };
 
-  addZoneForm = (
-    <Form>
-      <Form.Item required label="主机类别">
-        <Input onChange={val => this.setState({zone: val.target.value})}/>
-      </Form.Item>
-    </Form>
-  );
+  handleEditZone = () => {
+    this.setState({zone: store.record.zone}, () => {
+      Modal.confirm({
+        icon: 'exclamation-circle',
+        title: '编辑主机类别',
+        content: (
+          <Form>
+            <Form.Item required label="主机类别" help="该操作将批量更新所有属于该类别的主机并立即生效，如过只是想修改单个主机的类别请使用添加类别或下拉框选择切换类别。">
+              <Input defaultValue={store.record.zone} onChange={e => this.setState({editZone: e.target.value})}/>
+            </Form.Item>
+          </Form>
+        ),
+        onOk: () => http.patch('/api/host/', {id: store.record.id, zone: this.state.editZone})
+          .then(res => {
+            message.success(`成功修改${res}条记录`);
+            store.fetchRecords();
+            this.props.form.setFieldsValue({'zone': this.state.editZone})
+          })
+      })
+    });
+  };
 
   render() {
     const info = store.record;
@@ -101,7 +124,7 @@ class ComForm extends React.Component {
         onOk={this.handleSubmit}>
         <Form labelCol={{span: 6}} wrapperCol={{span: 14}}>
           <Form.Item required label="主机类别">
-            <Col span={16}>
+            <Col span={14}>
               {getFieldDecorator('zone', {initialValue: info['zone']})(
                 <Select placeholder="请选择主机类别/区域/分组">
                   {store.zones.map(item => (
@@ -110,9 +133,12 @@ class ComForm extends React.Component {
                 </Select>
               )}
             </Col>
-            <Col span={6} offset={2}>
+            <Col span={4} offset={1}>
               <Button type="link" onClick={this.handleAddZone}>添加类别</Button>
             </Col>
+            <Col span={4} offset={1}>
+              <Button type="link" onClick={this.handleEditZone}>编辑类别</Button>
+            </Col>
           </Form.Item>
           <Form.Item required label="主机名称">
             {getFieldDecorator('name', {initialValue: info['name']})(