style migrate v3

spug_web/src/pages/deploy/request/Ext1Form.js

@@ -105,8 +105,9 @@ export default observer(function () {
     if (index === -1) {
       setHostIds([id, ...host_ids])
     } else {
-      host_ids.splice(index, 1);
+      const tmp = lds.clone(host_ids);
-      setHostIds(host_ids)
+      tmp.splice(index, 1);
+      setHostIds(tmp)
     }
   }
 

spug_web/src/pages/deploy/request/Ext2Form.js

@@ -3,130 +3,119 @@
  * Copyright (c) <spug.dev@gmail.com>
  * Released under the AGPL-3.0 License.
  */
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import { observer } from 'mobx-react';
+import { UploadOutlined } from '@ant-design/icons';
 import { Modal, Form, Input, Tag, Upload, message, Button } from 'antd';
 import hostStore from 'pages/host/store';
 import { http, X_TOKEN } from 'libs';
 import store from './store';
 import lds from 'lodash';
 
-@observer
+export default observer(function () {
-class Ext2Form extends React.Component {
+  const [form] = Form.useForm();
-  constructor(props) {
+  const [loading, setLoading] = useState(false);
-    super(props);
+  const [uploading, setUploading] = useState(false);
-    this.state = {
+  const [fileList, setFileList] = useState([]);
-      loading: false,
+  const [host_ids, setHostIds] = useState(lds.clone(store.record.app_host_ids));
-      uploading: false,
-      fileList: [],
-      host_ids: store.record['app_host_ids'].concat()
-    }
-  }
 
-  componentDidMount() {
+  useEffect(() => {
     if (hostStore.records.length === 0) {
       hostStore.fetchRecords()
     }
     const file = lds.get(store, 'record.extra.1');
     if (file) {
       file.uid = '0';
-      this.setState({fileList: [file]})
+      setFileList([file])
     }
-  }
+  }, [])
 
-  handleSubmit = () => {
+  function handleSubmit() {
-    if (this.state.host_ids.length === 0) {
+    if (host_ids.length === 0) {
       return message.error('请至少选择一个要发布的目标主机')
     }
-    this.setState({loading: true});
+    setLoading(true);
-    const formData = this.props.form.getFieldsValue();
+    const formData = form.getFieldsValue();
     formData['id'] = store.record.id;
     formData['deploy_id'] = store.record.deploy_id;
     formData['extra'] = [formData['extra']];
-    if (this.state.fileList.length > 0) {
+    if (fileList.length > 0) {
-      formData['extra'].push(lds.pick(this.state.fileList[0], ['path', 'name']))
+      formData['extra'].push(lds.pick(fileList[0], ['path', 'name']))
     }
-    formData['host_ids'] = this.state.host_ids;
+    formData['host_ids'] = host_ids;
     http.post('/api/deploy/request/', formData)
       .then(res => {
         message.success('操作成功');
         store.ext2Visible = false;
         store.fetchRecords()
-      }, () => this.setState({loading: false}))
+      }, () => setLoading(false))
-  };
+  }
 
-  handleChange = (id, v) => {
+  function handleChange(id, v) {
-    const host_ids = this.state.host_ids;
     const index = host_ids.indexOf(id);
     if (index === -1) {
-      this.setState({host_ids: [id, ...host_ids]})
+      setHostIds([id, ...host_ids])
     } else {
-      host_ids.splice(index, 1);
+      const tmp = lds.clone(host_ids);
-      this.setState({host_ids})
+      tmp.splice(index, 1);
+      setHostIds(tmp)
     }
-  };
+  }
 
-  handleUploadChange = (v) => {
+  function handleUploadChange(v) {
     if (v.fileList.length === 0) {
-      this.setState({fileList: []})
+      setFileList([])
     }
-  };
+  }
 
-  handleUpload = (file, fileList) => {
+  function handleUpload(file, fileList) {
-    this.setState({uploading: true});
+    setUploading(true);
     const formData = new FormData();
     formData.append('file', file);
     formData.append('deploy_id', store.record.deploy_id);
     http.post('/api/deploy/request/upload/', formData, {timeout: 120000})
       .then(res => {
         file.path = res;
-        this.setState({fileList: [file]})
+        setFileList([file])
       })
-      .finally(() => this.setState({uploading: false}))
+      .finally(() => setUploading(false))
     return false
-  };
-
-  render() {
-    const info = store.record;
-    const {host_ids, fileList, uploading} = this.state;
-    const {getFieldDecorator} = this.props.form;
-    return (
-      <Modal
-        visible
-        width={800}
-        maskClosable={false}
-        title="新建发布申请"
-        onCancel={() => store.ext2Visible = false}
-        confirmLoading={this.state.loading}
-        onOk={this.handleSubmit}>
-        <Form labelCol={{span: 6}} wrapperCol={{span: 14}}>
-          <Form.Item required label="申请标题">
-            {getFieldDecorator('name', {initialValue: info['name']})(
-              <Input placeholder="请输入申请标题"/>
-            )}
-          </Form.Item>
-          <Form.Item label="环境变量（SPUG_RELEASE）" help="可以在自定义脚本中引用该变量，用于设置本次发布相关的动态变量，在脚本中通过 $SPUG_RELEASE 来使用该值。">
-            {getFieldDecorator('extra', {initialValue: lds.get(info, 'extra.0')})(
-              <Input placeholder="请输入环境变量 SPUG_RELEASE 的值"/>
-            )}
-          </Form.Item>
-          <Form.Item label="上传数据" help="通过数据传输动作来使用上传的文件。">
-            <Upload name="file" fileList={fileList} headers={{'X-Token': X_TOKEN}} beforeUpload={this.handleUpload}
-                    data={{deploy_id: info.deploy_id}} onChange={this.handleUploadChange}>
-              {fileList.length === 0 ? <Button loading={uploading} icon="upload">点击上传</Button> : null}
-            </Upload>
-          </Form.Item>
-          <Form.Item required label="发布目标主机" help="通过点击主机名称自由选择本次发布的主机。">
-            {info['app_host_ids'].map(id => (
-              <Tag.CheckableTag key={id} checked={host_ids.includes(id)} onChange={v => this.handleChange(id, v)}>
-                {lds.get(hostStore.idMap, `${id}.name`)}({lds.get(hostStore.idMap, `${id}.hostname`)}:{lds.get(hostStore.idMap, `${id}.port`)})
-              </Tag.CheckableTag>
-            ))}
-          </Form.Item>
-        </Form>
-      </Modal>
-    )
   }
-}
 
-export default Form.create()(Ext2Form)
+  return (
+    <Modal
+      visible
+      width={800}
+      maskClosable={false}
+      title="新建发布申请"
+      onCancel={() => store.ext2Visible = false}
+      confirmLoading={loading}
+      onOk={handleSubmit}>
+      <Form form={form} labelCol={{span: 6}} wrapperCol={{span: 14}}>
+        <Form.Item required name="name" initialValue={store.record.name} label="申请标题">
+          <Input placeholder="请输入申请标题"/>
+        </Form.Item>
+        <Form.Item
+          name="extra"
+          initialValue={lds.get(store.record, 'extra.0')}
+          label="环境变量（SPUG_RELEASE）"
+          help="可以在自定义脚本中引用该变量，用于设置本次发布相关的动态变量，在脚本中通过 $SPUG_RELEASE 来使用该值。">
+          <Input placeholder="请输入环境变量 SPUG_RELEASE 的值"/>
+        </Form.Item>
+        <Form.Item label="上传数据" help="通过数据传输动作来使用上传的文件。">
+          <Upload name="file" fileList={fileList} headers={{'X-Token': X_TOKEN}} beforeUpload={handleUpload}
+                  data={{deploy_id: store.record.deploy_id}} onChange={handleUploadChange}>
+            {fileList.length === 0 ? <Button loading={uploading} icon={<UploadOutlined/>}>点击上传</Button> : null}
+          </Upload>
+        </Form.Item>
+        <Form.Item required label="发布目标主机" help="通过点击主机名称自由选择本次发布的主机。">
+          {store.record['app_host_ids'].map(id => (
+            <Tag.CheckableTag key={id} checked={host_ids.includes(id)} onChange={v => handleChange(id, v)}>
+              {lds.get(hostStore.idMap, `${id}.name`)}({lds.get(hostStore.idMap, `${id}.hostname`)}:{lds.get(hostStore.idMap, `${id}.port`)})
+            </Tag.CheckableTag>
+          ))}
+        </Form.Item>
+      </Form>
+    </Modal>
+  )
+})

spug_web/src/pages/deploy/request/Table.js

@@ -69,11 +69,11 @@ class ComTable extends React.Component {
     render: info => {
       if (info.status === '-1' && info.reason) {
         return <Popover title="驳回原因:" content={info.reason}>
-          <span style={{color: '#1890ff'}}>{info['status_alias']}</span>
+          <Tag color="#f50">{info['status_alias']}</Tag>
         </Popover>
       } else if (info.status === '1' && info.reason) {
         return <Popover title="审核意见:" content={info.reason}>
-          <span style={{color: '#1890ff'}}>{info['status_alias']}</span>
+          <Tag color="#87d068">{info['status_alias']}</Tag>
         </Popover>
       } else if (info.status === '2') {
         return <Tag color="orange">{info['status_alias']}</Tag>