测评上传上传样式改为列表展示

src/views/evaluation/evaluationUpload.vue

@@ -213,14 +213,49 @@
               </div>
             </div>
             <div class="bg_body_bt" v-if="btShowEdit" style="justify-content: flex-start;">
-              <div class="mbl_items12">
+              <a-table
+                :columns="columnsUpload"
+                :dataSource="uploadList"
+                rowKey="name"
+                size="small"
+                :pagination="false"
+                :scroll="{ x: '100%' }"
+                v-if="uploadList.length > 0"
+                style="margin-left: 16px;"
+              >
+                <template #status="{ record }">
+                  <div v-if="record.status"
+                    :style="{color: {uploading: '#1890ff', done: '#52c41a', error: '#f5222d'}[record.status] || '' }"
+                    >
+                    {{ {uploading: '正在上传', done: '上传完成', error: '报告错误'}[record.status] || '' }}
+                  </div>
+                </template>
+                <template #percent="{ record }">
+                  <div class="file_updata">
+                      <div class="updatabox" style="margin-right: 5px">
+                        <div
+                          :class="`${{uploading: 'updatacolor3', done: 'updatacolor' ,error: 'updatacolor2'}[record.status] || 'updatacolor'}`"
+                          :style="{width:`${record.status==='uploading'?parseInt(record.percent):100}%`}">
+                        </div>
+                      </div>
+                      {{Math.floor(record.percent)}}%
+                    </div>
+                </template>
+                <template #uploadAction="{record}">
+                  <a-button type="link" @click="failedDownload(record)">下载</a-button>
+                  <span style="margin-left: 10px"></span>
+                  <a-button type="link" @click="delUploadList(record)">删除</a-button>
+                </template>
+              </a-table>
+
+              <!-- <div class="mbl_items12">
                 <div
                   class="i12_box1"
                   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;">
@@ -248,9 +283,12 @@
                   </div>
                   <div class="file_operation btn_item" @click="delUploadList(index)" style="color: #4ea6ff;cursor: pointer">
                     <span style="width: 23px;height: 21px;" class="delete"></span>
+                    <span v-if="totalNumber?.failedEntries>0||totalNumber?.successfulEntries>0" @click="failedDownload" style="color: #4ea6ff;cursor: pointer;margin-left: 5px;">
+                            
+                          </span>
                   </div>
                 </div>
-              </div>
+              </div> -->
             </div>
             <div class="bg_body_bt" v-if="btShowEdit">
               <div class="bg_body_bttext">上传说明</div>
@@ -1087,6 +1125,35 @@ import {downLoadZip} from "@/utils/zipdownload";
         //   slots: { customRender: "addAuthority" },
         // },
       ])
+      const columnsUpload = ref([
+        {
+          title: '文件名称',
+          dataIndex: 'name',
+          width: '150px',
+          align: 'center',
+          ellipsis: true,
+        },
+        {
+          title: '上传状态',
+          dataIndex: 'status',
+          width: '60px',
+          align: 'center',
+          slots: { customRender: 'status' },
+        },
+        {
+          title: '上传进度',
+          dataIndex: 'percent',
+          width: '100px',
+          slots: { customRender: 'percent' },
+        },
+        {
+          title: '操作',
+          dataIndex: 'action',
+          width: '80px',
+          align: 'center',
+          slots: { customRender: 'uploadAction' },
+        },
+      ]);
       const textDisabled = async (record) => {
         await updateStatus({status:1,id:record.id}).then((res)=>{
           if(res.code === 200){
@@ -1393,6 +1460,7 @@ import {downLoadZip} from "@/utils/zipdownload";
         }
         if(state.stateUpload){
           state.uploadList = fileList.slice(-1)
+          console.log(state.uploadList,'uploadList')
         }
         state.stateUpload = true
       };
@@ -1593,6 +1661,7 @@ import {downLoadZip} from "@/utils/zipdownload";
         uploadAdmin,
         columns,
         columnsAdd,
+        columnsUpload,
         columns2,
         bgupload,
         of_exit,
@@ -1642,6 +1711,69 @@ import {downLoadZip} from "@/utils/zipdownload";
 </script>
 
 <style lang="scss" scoped>
+.file_updata {
+  display: flex;
+  align-items: center;
+
+  .updatabox {
+    position: relative;
+    width: 230px;
+    height: 5px;
+    background-color: rgba(192, 192, 192, 0.25);
+    border-radius: 3px;
+
+    .updatacolor {
+      position: absolute;
+      left: 0;
+      width: 100%;
+      height: 5px;
+      background-color: #57c887;
+      border-radius: 3px;
+    }
+
+    .updatacolor2 {
+      position: absolute;
+      left: 0;
+      width: 80%;
+      height: 5px;
+      background-color: #ff7474;
+      border-radius: 3px;
+    }
+
+    .updatacolor3 {
+      position: absolute;
+      left: 0;
+      width: 60%;
+      height: 5px;
+      background-color: #4ea6ff;
+      border-radius: 3px;
+    }
+    .updataxq1{
+      margin-top: 7px;
+    }
+
+    .updataxq {
+      position: absolute;
+      right: 2px;
+      top: -37px;
+      color: #57c887;
+    }
+
+    .updataxq2 {
+      position: absolute;
+      right: 2px;
+      top: -35px;
+      color: #ff7474;
+    }
+
+    .updataxq3 {
+      position: absolute;
+      right: 2px;
+      top: -30px;
+      color: #4ea6ff;
+    }
+  }
+}
 ::v-deep .ant-dropdown{
   left: 120px !important;
 }