上传添加进度条

src/views/govern/device/fileService/index.vue

@@ -28,6 +28,7 @@
                 <el-button type="primary" @click="handleSearch">搜索</el-button>
                 <el-button @click="handleRefresh">重置</el-button>
                 <el-upload
+                    v-if="!progressVisibile"
                     action=""
                     :auto-upload="false"
                     :show-file-list="false"
@@ -38,9 +39,13 @@
                                 "
                 >
                     <el-button>
-                                文件上传<el-icon class="el-icon--right"><Upload /></el-icon>
+                        文件上传
+                        <el-icon class="el-icon--right"><Upload /></el-icon>
                     </el-button>
                 </el-upload>
+                <div class="upload_progress" v-if="progressVisibile">
+                   {{ fileName }} <el-progress :percentage="30" :indeterminate="true"><el-button text>上传中...</el-button></el-progress>
+                </div>
             </div>
             <div class="list" v-if="dirList.length != 0 && !loading">
                 <div class="list_item" v-for="(item, index) in dirList" :key="index">
@@ -123,7 +128,8 @@ const nodeClick = (e: any) => {
     loading.value = true
     if (e.level == 2) {
         nDid.value = e.ndid
-        getDeviceRootPath(nDid.value).then(res => {
+        getDeviceRootPath(nDid.value)
+            .then(res => {
                 loading.value = false
                 dirList.value = [res.data]
                 activePath.value = res.data.prjDataPath
@@ -132,7 +138,8 @@ const nodeClick = (e: any) => {
                         activePathList.value.push({ path: activePath.value })
                     }
                 })
-        }).catch((e)=>{
+            })
+            .catch(e => {
                 loading.value = false
             })
     }
@@ -231,15 +238,20 @@ const handleDownLoad = async (row: any) => {
     ;(await nDid.value) && fileRef.value && fileRef.value.open(row, nDid.value)
 }
 //上传文件
+const progressVisibile = ref<boolean>(false)
+const fileName = ref<string>('')
 const handleUpload = (e: any, fileList: any, row: any) => {
+    fileName.value = e.name
     const obj = {
         id: nDid.value,
         file: e.raw,
         filePath: row || row.prjDataPath
     }
+    progressVisibile.value = true
     uploadDeviceFile(obj).then(res => {
         if (res.code == 'A0000') {
             ElMessage.success(res.message)
+            progressVisibile.value = false
         }
     })
 }
@@ -300,6 +312,18 @@ watch(
             .el-button {
                 margin-left: 10px;
             }
+            .upload_progress {
+                flex: 1;
+                height: 30px;
+                display: flex;
+                align-items: center;
+                justify-content: flex-start;
+                margin-left: 10px;
+                .el-progress {
+                    width: 300px;
+                    margin-left: 10px;
+                }
+            }
         }
         .list {
             display: flex;