测评上传列表展示

src/views/evaluation/evaluationUpload.vue

@@ -199,48 +199,56 @@
               <div class="bg_body_input">
                 <a-upload
                   name="file"
+                  v-model:file-list="fileList"
                   :headers="headers"
-                  :file-list="filesList"
+                  :show-upload-list="false"
                   :before-upload="beforeUpload3"
+                  @change="handleChange"
+                  action="/activityApi/evaluation/import"
                   >
-                  <!-- @change="handleChange" -->
-                  <!-- action="/activityApi/evaluation/import" -->
                   <div class="upload_box">
                     <span>选择文件</span>
                   </div>
                 </a-upload>
               </div>
-              <span v-if="valueAll.length!=0" style="margin-right: 276px;">上传完成</span>
             </div>
-            <!-- <div class="bg_body_bt" v-if="btShowEdit" style="justify-content: flex-start;">
+            <div class="bg_body_bt" v-if="btShowEdit" style="justify-content: flex-start;">
               <div class="mbl_items12">
                 <div
                   class="i12_box1"
-                  v-for="(item, index) in valueAll"
+                  v-for="(item, index) in uploadList"
+                  style="align-items: flex-end"
                   :key="index"
                 >
-                  <div class="file_img"></div>
+                  <!-- <div class="file_img"></div> -->
                   <div class="file_detail">
+                    <div class="file_name">
+                      <span style="color: #6f6f6f;width:200px;display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;">
+                        {{ item.name }}
+                      </span>
+                    </div>
                     <div class="file_updata">
                       <div class="updatabox">
-                        <div class="updatacolor"></div>
-                        <div class="updataxq">上传完成</div>
+                        <div
+                            :class="`${{uploading: 'updatacolor3', done: 'updatacolor' ,error: 'updatacolor2'}[item.status] || 'updatacolor'}`"
+                            :style="{width:`${item.status==='uploading'?parseInt(item.percent):100}%`}"></div>
+                        <div v-if="item.status"
+                            style="right:-62px"
+                            :class="`${{uploading: 'updataxq1', done: 'updataxq' ,error: 'updataxq2'}[item.status] || 'updataxq'}`">
+                          {{ {uploading: '正在上传', done: '上传完成', error: '上传失败'}[item.status] || '' }}
+                        </div>
                       </div>
-                      <div class="upjd">
-                        <span style="margin: auto 5px">100%</span>
+                      <div class="upjd" v-if="item.percent">
+                        <span style="margin: auto 5px">{{ item.status === 'uploading' ? parseInt(item.percent) : 100 }}%</span>
                       </div>
                     </div>
                   </div>
-                  <div class="file_operation">
-                    <div class="fobox">
-                      <span style="color: #4ea6ff" @click="handleDel2(index)">
-                        删除
-                      </span>
-                    </div>
+                  <div class="file_operation" @click="delUploadList(index)" style="color: #4ea6ff">
+                    删除
                   </div>
                 </div>
               </div>
-            </div> -->
+            </div>
             <div class="bg_body_bt" v-if="btShow">
               <div class="bg_body_bttext">备注</div>
               <div class="bg_body_input">
@@ -693,6 +701,7 @@ import {timeoutUpload} from "@/api/configPublic";
       const userInfo = computed(() => store.state.userInfo);
       const router = useRouter();
       const state = reactive({
+        uploadList: [],
         isRegularAdministrator: '',
         loadNewDown:false,
         totalNumber: {},
@@ -1106,6 +1115,7 @@ import {timeoutUpload} from "@/api/configPublic";
         state.downloadUrl = null
         state.uploadId = ''
         state.valueAll = []
+        state.uploadList = []
         state.btShow = true
         state.bg_check = true;
         state.formData = {}
@@ -1114,6 +1124,7 @@ import {timeoutUpload} from "@/api/configPublic";
         state.loadNewDown = true
         state.downloadUrl = null
         state.valueAll = []
+        state.uploadList = []
         state.uploadDownId =record.id
         state.btShowEdit = trueFalse(record.permission,2)
         state.uploadId = record.id
@@ -1358,24 +1369,20 @@ import {timeoutUpload} from "@/api/configPublic";
               state.totalNumber = res.data
               state.totalNumber.importTrue = res.data.failedIds
               state.valueAll = res.data.evaluationDetailList
+              console.log(res.data,'res.data')
             }
             state.uploadDownLoad = false
           }
         })
-        return false
+        // return false
       }
-      const handleChange = (info) => {
-        let resFileList = [...info.fileList];
-
-        resFileList = resFileList.slice(-2);
-
-        resFileList = resFileList.map(file => {
-          if (file.response) {
-            file.url = file.response.url;
-          }
-          return file;
-        });
-        state.filesList = resFileList;
+      const handleChange = ({file, fileList}) => {
+        file.response && file.response.code === 200 && (file.url = file.response.data)
+        state.uploadList = fileList.slice(-1)
+      };
+      const delUploadList = () => {
+        state.uploadList = []
+        state.valueAll = []
       }
       const deleteItem = (record) => {
         dialog({
@@ -1584,6 +1591,7 @@ import {timeoutUpload} from "@/api/configPublic";
         beforeUpload,
         beforeUpload3,
         handleChange,
+        delUploadList,
         bgcheck,
         deleteItem,
         emptyItem,