feat: (任务处理/待办任务/开始任务) 新增上传文件

src/views/processing/unprocessed-review/components/dialog.vue

 <template>
   <el-dialog
     :visible.sync="dialogManger.dialogVisible"
-    title="选择测试场景"
-    width="80%"
+    title="开始车型校验子任务"
+    width="40%"
+    class="start_mession_dialog"
     append-to-body
     destroy-on-close
     :close-on-click-modal="false"
@@ -11,27 +12,29 @@
     <el-form v-loading="loading">
       <el-row :gutter="20">
         <el-col :span="24">
-          <el-form-item label="请选择测试场景(可多选)" prop="testScenarioList">
-            <footer-button
-              style="width: 80px; height: 25px"
-              type="primary"
-              @click="selectAll"
-            >
-              全部选择
-            </footer-button>
-            <div class="test-scenario-container">
-              <div
-                v-for="(item, index) in testScenarioList"
-                :key="index"
-                :class="{
-                  'test-scenario': item.check === false,
-                  'check-test-scenario': item.check === true
-                }"
-                @click="handleTestScenario(item)"
+          <el-form-item  prop="testScenarioList">
+            <span v-show="uploadVisble"   style="font-size: 15px;"><span style="color: red;">*</span>请上传检测方案</span>
+            <span v-show="!uploadVisble">已上传文件：{{  fileName  }}</span>
+            <br>
+            <el-button v-show="!uploadVisble" type="primary" size="default" @click="removeAll">撤销上传文件</el-button>
+            <el-upload
+              ref="upload"
+              class="upload-demo"
+              :action="uploadUrl"
+              :limit="1"
+              :on-exceed="handleExceed"
+              v-model:file-list="fileList"
+              :on-success="uploadSucess"
+              :on-change="uploadChange"
+              :on-error="handleError"
+              accept=".xls, .xlsx"
+              :headers="headers"
+              :show-file-list="false"
               >
-                <div>{{ item.label }}</div>
-              </div>
-            </div>
+              <el-button  v-show="uploadVisble"  size="medium " type="default" style="font-size: 15px;padding: 15px 30px;font-weight: bold;">上传文件</el-button>
+              <div v-show="uploadVisble"   slot="tip" class="el-upload__tip" style="font-size: 15px">支持格式: .xls .xlsx,单个文件不能超过20MB</div>
+            </el-upload>
+       
           </el-form-item>
         </el-col>
       </el-row>
@@ -49,6 +52,8 @@ import {
   createProject,
   getUseCaseListByScenario
 } from '@/api/task/task'
+import { getToken } from '@/utils/auth'
+
 export default {
   props: {
     dialogManger: {
@@ -63,13 +68,22 @@ export default {
   },
   data() {
     return {
+      uploadUrl:process.env.VUE_APP_BASE_API+'/task/uploadExcel',//上传文件接口
+      headers: {  // 头文件
+        Authorization: 'Bearer ' + getToken()
+      },
+      fileName: '',// 已上传文件名字
+   
       model: {
         searchFields: {
           scenario: []
         }
       },
       loading: false,
-      testScenarioList: []
+      testScenarioList: [],
+      fileList: [],// 文件集合
+      testCaseObj: [],// 用例编号数组
+      uploadVisble:true
     }
   },
   watch: {
@@ -82,27 +96,85 @@ export default {
           }
         }
       }
+    },
+    'fileList'(newValue){
+        if(newValue.length<1){
+          this.uploadVisble =  true
+        }else{
+          this.uploadVisble =  false
+        }
     }
   },
-  created() {},
   methods: {
     handleClose() {
       this.$emit('close', '123')
     },
-    async handleSubmit() {
-      this.loading = true
-      const params = {
-        id: this.dialogManger.item.id
+    uploadSucess(response,file,fileList){ // 当表中没有用例编号一列时清除所有文件，提示错误
+      if(response.code === 200){
+        this.testCaseObj = response.data
+        this.fileName =  file.name 
+      }else{
+        this.$message({
+          message: response.msg,
+          type: 'warning'
+        });
+        this.fileList = []
+        this.$refs.upload.clearFiles();
       }
-      const res = await getUseCaseListByScenario(this.model)
-      if (res.code === 200) {
-        const resp = await this.newFileTest({
+     
+    },
+    uploadChange(response,file,fileList){
+      /**
+       * 文件大小限制
+       */
+      console.log(file)
+      let imgSize = Number(file.size / 1024 / 1024);
+
+      if (imgSize > 20) {
+        this.$message({
+          title: "",
+          message: "文件大小不能超过20MB，请重新上传。",
+          type: "warning",
+        });
+        return;
+      } 
+
+      this.fileList = this.$refs.upload.uploadFiles
+    },
+    removeAll(){
+      this.fileList = []
+      this.$refs.upload.clearFiles();
+    },
+      handleExceed(files, fileList) {
+        this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
+      },
+      handleError(response,file,fileList){
+        this.$message.error('文件大小不能超过20MB');
+      },
+    async handleSubmit() {
+      if(this.fileList.length < 1){
+        this.$message({
+          message: '请导入一个文件',
+          type: 'warning'
+        });
+      }else{
+        this.loading = true
+        if(this.testCaseObj &&  this.testCaseList!=''){
+          console.log(this.testCaseObuseCaseListj)
+          const resp = await this.newFileTest({
           name: this.dialogManger.item.taskName,
-          caseIdList: res.data
+          caseIdList: this.testCaseObj.useCaseList
         })
+        const params = {
+        id: this.dialogManger.item.id
+        } 
         params.testSchemeId = resp.data
         this.startTaskModel(params)
+        }
+        //const res = await getUseCaseListByScenario(this.model)
+   
       }
+     
     },
     /**
      * 开始
@@ -163,7 +235,10 @@ export default {
       this.model.searchFields.scenario = this.testScenarioList.map(obj => {
         return obj.label
       })
-    }
+    },
+   
   }
 }
 </script>
+<style lang="scss" scoped>
+</style>