From 6c7617549bf7f6b69b94b0af05ebdc43f7595eec Mon Sep 17 00:00:00 2001
From: vapao <live1989@foxmail.com>
Date: Thu, 14 Apr 2022 22:46:02 +0800
Subject: [PATCH] =?UTF-8?q?A=20=E6=96=B0=E5=BB=BA=E5=8F=91=E5=B8=83?=
 =?UTF-8?q?=E7=94=B3=E8=AF=B7=E6=96=87=E4=BB=B6=E6=94=AF=E6=8C=81=E6=8B=96?=
 =?UTF-8?q?=E6=8B=BD=E4=B8=8A=E4=BC=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 spug_web/src/libs/functools.js                      |  4 ++++
 spug_web/src/pages/deploy/request/Ext2Form.js       | 13 +++++++------
 spug_web/src/pages/deploy/request/index.module.less | 13 ++++++++++++-
 3 files changed, 23 insertions(+), 7 deletions(-)

diff --git a/spug_web/src/libs/functools.js b/spug_web/src/libs/functools.js
index 8bc5359..66c58d1 100644
--- a/spug_web/src/libs/functools.js
+++ b/spug_web/src/libs/functools.js
@@ -35,6 +35,10 @@ export function hasPermission(strCode) {
   return false
 }
 
+export function clsNames(...args) {
+  return args.filter(x => x).join(' ')
+}
+
 export function includes(s, key) {
   key = key.toLowerCase();
   if (Array.isArray(s)) {
diff --git a/spug_web/src/pages/deploy/request/Ext2Form.js b/spug_web/src/pages/deploy/request/Ext2Form.js
index 56d697a..ff8cdb4 100644
--- a/spug_web/src/pages/deploy/request/Ext2Form.js
+++ b/spug_web/src/pages/deploy/request/Ext2Form.js
@@ -9,7 +9,7 @@ import { UploadOutlined } from '@ant-design/icons';
 import { Modal, Form, Input, Upload, DatePicker, message, Button } from 'antd';
 import hostStore from 'pages/host/store';
 import HostSelector from './HostSelector';
-import { http, X_TOKEN } from 'libs';
+import { http, clsNames, X_TOKEN } from 'libs';
 import styles from './index.module.less';
 import store from './store';
 import lds from 'lodash';
@@ -91,11 +91,12 @@ export default observer(function () {
           <Input placeholder="请输入环境变量 SPUG_RELEASE 的值"/>
         </Form.Item>
         {require_upload && (
-          <Form.Item required label="上传数据" tooltip="通过数据传输动作来使用上传的文件。" className={styles.upload}>
-            <Upload name="file" fileList={fileList} headers={{'X-Token': X_TOKEN}} beforeUpload={handleUpload}
-                    data={{deploy_id}} onChange={handleUploadChange}>
-              {fileList.length === 0 ? <Button loading={uploading} icon={<UploadOutlined/>}>点击上传</Button> : null}
-            </Upload>
+          <Form.Item required label="上传数据" tooltip="通过数据传输动作来使用上传的文件。"
+                     className={clsNames(styles.upload, fileList.length ? styles.uploadHide : null)}>
+            <Upload.Dragger name="file" fileList={fileList} headers={{'X-Token': X_TOKEN}} beforeUpload={handleUpload}
+                            data={{deploy_id}} onChange={handleUploadChange}>
+              <Button type="link" loading={uploading} icon={<UploadOutlined/>}>点击或拖动文件至此区域上传</Button>
+            </Upload.Dragger>
           </Form.Item>
         )}
         <Form.Item required label="目标主机" tooltip="可以通过创建多个发布申请单，选择主机分批发布。">
diff --git a/spug_web/src/pages/deploy/request/index.module.less b/spug_web/src/pages/deploy/request/index.module.less
index 3ff3d9f..56ec90d 100644
--- a/spug_web/src/pages/deploy/request/index.module.less
+++ b/spug_web/src/pages/deploy/request/index.module.less
@@ -99,8 +99,19 @@
   padding: 0;
 }
 
-.upload :global(.ant-upload-list-item) {
+.upload {
+  :global(.ant-upload-btn) {
+    padding: 0 !important;
+  }
+}
+
+.uploadHide {
+  :global(.ant-upload-drag) {
+    display: none;
+  }
+  :global(.ant-upload-list-item) {
     margin: 0;
+  }
 }
 
 .min120 {