From 07b58b41c5e7d6be32a7a427d5a5cb3fc368d04e Mon Sep 17 00:00:00 2001
From: fit2-zhao <yong.zhao@fit2cloud.com>
Date: Tue, 9 Nov 2021 14:17:41 +0800
Subject: [PATCH] =?UTF-8?q?fix(=E6=8E=A5=E5=8F=A3=E5=AE=9A=E4=B9=89):=20cs?=
 =?UTF-8?q?v=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../io/metersphere/config/KafkaConfig.java    |   4 +-
 .../scenario/variable/CsvFileUpload.vue       | 219 ++++++++++--------
 .../scenario/variable/VariableList.vue        |  30 ++-
 3 files changed, 151 insertions(+), 102 deletions(-)

diff --git a/backend/src/main/java/io/metersphere/config/KafkaConfig.java b/backend/src/main/java/io/metersphere/config/KafkaConfig.java
index 61e8f7e699..c424fef520 100644
--- a/backend/src/main/java/io/metersphere/config/KafkaConfig.java
+++ b/backend/src/main/java/io/metersphere/config/KafkaConfig.java
@@ -7,9 +7,9 @@ import org.springframework.kafka.config.TopicBuilder;
 @Configuration
 public class KafkaConfig {
     // 执行内容监听
-    public final static String EXEC_TOPIC = "ms-automation-exec-topic";
+    public final static String EXEC_TOPIC = "ms-automation-exec-topic123";
     //执行结果回传
-    public static final String TOPICS = "ms-api-exec-topic";
+    public static final String TOPICS = "ms-api-exec-topic123";
 
     @Bean
     public NewTopic apiExecTopic() {
diff --git a/frontend/src/business/components/api/automation/scenario/variable/CsvFileUpload.vue b/frontend/src/business/components/api/automation/scenario/variable/CsvFileUpload.vue
index 69cb63c0b2..8c0c50e238 100644
--- a/frontend/src/business/components/api/automation/scenario/variable/CsvFileUpload.vue
+++ b/frontend/src/business/components/api/automation/scenario/variable/CsvFileUpload.vue
@@ -1,125 +1,152 @@
 <template>
     <span>
-       <el-upload
-         action="#"
-         class="api-body-upload"
-         list-type="picture-card"
-         :http-request="upload"
-         :beforeUpload="uploadValidate"
-         :file-list="parameter.files"
-         :limit="1"
-         :on-exceed="exceed"
-         ref="upload">
-
+      <el-row>
+        <el-col :span="18">
+           <el-upload
+             action="#"
+             class="api-body-upload"
+             list-type="picture-card"
+             :http-request="upload"
+             :beforeUpload="uploadValidate"
+             :file-list="parameter.files"
+             :limit="1"
+             :on-exceed="exceed"
+             ref="upload">
          <div class="upload-default">
            <i class="el-icon-plus"/>
          </div>
-           <div class="upload-item" slot="file" slot-scope="{file}">
-             <span>{{file.file ? file.file.name : file.name}}</span>
-             <span class="el-upload-list__item-actions">
-              <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
-                <i class="el-icon-delete"/>
-              </span>
-             </span>
-        </div>
-
+         <div class="upload-item" slot="file" slot-scope="{file}">
+           <span>{{ file.file ? file.file.name : file.name }}</span>
+           <span class="el-upload-list__item-actions">
+            <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
+              <i class="el-icon-delete"/>
+            </span>
+           </span>
+          </div>
       </el-upload>
+        </el-col>
+        <el-col :span="6">
+          <el-button size="small" style="margin: 3px 5px" @click="download">下载</el-button>
+        </el-col>
+      </el-row>
     </span>
 </template>
 
 <script>
-  export default {
-    name: "MsApiBodyFileUpload",
-    data() {
-      return {
-        disabled: false,
-      };
-    },
-    props: {
-      parameter: Object,
-      default() {
-        return {}
+export default {
+  name: "MsApiBodyFileUpload",
+  data() {
+    return {
+      disabled: false,
+    };
+  },
+  props: {
+    parameter: Object,
+    default() {
+      return {}
+    }
+  },
+  methods: {
+    download() {
+      // 本地文件
+      if (this.parameter.files && this.parameter.files.length > 0 && this.parameter.files[0].file) {
+        console.log("local",this.parameter.files[0].file)
+      }
+      // 远程下载文件
+      if (this.parameter.files && this.parameter.files.length > 0 && !this.parameter.files[0].file) {
+        let file = this.parameter.files[0];
+        let conf = {
+          url: "/api/automation/file/download",
+          method: 'post',
+          data: file,
+          responseType: 'blob',
+        };
+        this.result = this.$request(conf).then(response => {
+          const content = response.data;
+          const blob = new Blob([content]);
+          console.log(content)
+
+        });
       }
     },
-    methods: {
-      handleRemove(file) {
-        this.$refs.upload.handleRemove(file);
-        for (let i = 0; i < this.parameter.files.length; i++) {
-          let fileName = file.file ? file.file.name : file.name;
-          let paramFileName = this.parameter.files[i].file ?
-            this.parameter.files[i].file.name : this.parameter.files[i].name;
-          if (fileName === paramFileName) {
-            this.parameter.files.splice(i, 1);
-            this.$refs.upload.handleRemove(file);
-            break;
-          }
+    handleRemove(file) {
+      this.$refs.upload.handleRemove(file);
+      for (let i = 0; i < this.parameter.files.length; i++) {
+        let fileName = file.file ? file.file.name : file.name;
+        let paramFileName = this.parameter.files[i].file ?
+          this.parameter.files[i].file.name : this.parameter.files[i].name;
+        if (fileName === paramFileName) {
+          this.parameter.files.splice(i, 1);
+          this.$refs.upload.handleRemove(file);
+          break;
         }
-      },
-      exceed() {
-        this.$warning(this.$t('test_track.case.import.upload_limit_count'));
-      },
-      upload(file) {
-        this.parameter.files.push(file);
-      },
-      uploadValidate(file) {
-        if (file.size / 1024 / 1024 > 500) {
-          this.$warning(this.$t('api_test.request.body_upload_limit_size'));
-          return false;
-        }
-        if (!file.name.endsWith(".csv")) {
-          this.$warning(this.$t('variables.cvs_info'));
-          return false;
-        }
-        return true;
-      },
-    },
-    created() {
-      if (!this.parameter.files) {
-        this.parameter.files = [];
       }
+    },
+    exceed() {
+      this.$warning(this.$t('test_track.case.import.upload_limit_count'));
+    },
+    upload(file) {
+      this.parameter.files.push(file);
+    },
+    uploadValidate(file) {
+      if (file.size / 1024 / 1024 > 500) {
+        this.$warning(this.$t('api_test.request.body_upload_limit_size'));
+        return false;
+      }
+      if (!file.name.endsWith(".csv")) {
+        this.$warning(this.$t('variables.cvs_info'));
+        return false;
+      }
+      return true;
+    },
+  },
+  created() {
+    if (!this.parameter.files) {
+      this.parameter.files = [];
     }
   }
+}
 </script>
 
 <style scoped>
 
-  .el-upload {
-    background-color: black;
-  }
+.el-upload {
+  background-color: black;
+}
 
-  .api-body-upload >>> .el-upload {
-    height: 30px;
-    width: 32px;
-  }
+.api-body-upload >>> .el-upload {
+  height: 30px;
+  width: 32px;
+}
 
-  .upload-default {
-    min-height: 30px;
-    width: 32px;
-    line-height: 32px;
-  }
+.upload-default {
+  min-height: 30px;
+  width: 32px;
+  line-height: 32px;
+}
 
-  .el-icon-plus {
-    font-size: 16px;
-  }
+.el-icon-plus {
+  font-size: 16px;
+}
 
-  .api-body-upload >>> .el-upload-list__item {
-    height: 30px;
-    width: auto;
-    padding: 6px;
-    margin-bottom: 0px;
-  }
+.api-body-upload >>> .el-upload-list__item {
+  height: 30px;
+  width: auto;
+  padding: 6px;
+  margin-bottom: 0px;
+}
 
-  .api-body-upload >>> .el-upload-list--picture-card {
-  }
+.api-body-upload >>> .el-upload-list--picture-card {
+}
 
-  .api-body-upload {
-    min-height: 30px;
-    border: 1px solid #EBEEF5;
-    padding: 2px;
-    border-radius: 4px;
-  }
+.api-body-upload {
+  min-height: 30px;
+  border: 1px solid #EBEEF5;
+  padding: 2px;
+  border-radius: 4px;
+}
 
-  .upload-item {
-  }
+.upload-item {
+}
 
 </style>
diff --git a/frontend/src/business/components/api/automation/scenario/variable/VariableList.vue b/frontend/src/business/components/api/automation/scenario/variable/VariableList.vue
index d1ab9a5265..b762bded21 100644
--- a/frontend/src/business/components/api/automation/scenario/variable/VariableList.vue
+++ b/frontend/src/business/components/api/automation/scenario/variable/VariableList.vue
@@ -200,7 +200,7 @@ export default {
       if (data) {
         let keyValues = this._handleBatchVars(data);
         keyValues.forEach(item => {
-          this.format(this.headers,item);
+          this.format(this.headers, item);
         });
       }
     },
@@ -229,7 +229,7 @@ export default {
       }
     },
     handleClick(command) {
-      this.editData = {delimiter: ",",quotedData: 'false'};
+      this.editData = {delimiter: ",", quotedData: 'false'};
       this.editData.type = command;
       this.addParameters(this.editData);
     },
@@ -298,10 +298,32 @@ export default {
         this.$warning("请选择一条数据删除");
         return;
       }
+      let message = "";
       ids.forEach(row => {
-        const index = this.variables.findIndex(d => d.id === row);
-        this.variables.splice(index, 1);
+        const v = this.variables.find(d => d.id === row);
+        if (v && v.type === 'CSV' && v.name) {
+          message += v.name + ";";
+        }
       });
+      if (message !== "") {
+        message = message.substr(0, message.length - 1);
+        this.$alert('是否确认删除CSV：【 ' + message + " 】？", '', {
+          confirmButtonText: this.$t('commons.confirm'),
+          callback: (action) => {
+            if (action === 'confirm') {
+              ids.forEach(row => {
+                const index = this.variables.findIndex(d => d.id === row);
+                this.variables.splice(index, 1);
+              });
+            }
+          }
+        });
+      } else {
+        ids.forEach(row => {
+          const index = this.variables.findIndex(d => d.id === row);
+          this.variables.splice(index, 1);
+        });
+      }
       this.selection = [];
       this.editData = {type: "CONSTANT"};
     },