上传添加进度条

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

@@ -28,19 +28,24 @@
                 <el-button type="primary" @click="handleSearch">搜索</el-button>
                 <el-button @click="handleRefresh">重置</el-button>
                 <el-upload
-                        action=""
-                        :auto-upload="false"
-                        :show-file-list="false"
-                        :on-change="
+                    v-if="!progressVisibile"
+                    action=""
+                    :auto-upload="false"
+                    :show-file-list="false"
+                    :on-change="
                                     (file:any, fileList:any) => {
                                         handleUpload(file, fileList, activePath)
                                     }
                                 "
-                    >
-                        <el-button>
-                                文件上传<el-icon class="el-icon--right"><Upload /></el-icon>
-                        </el-button>
-                    </el-upload>
+                >
+                    <el-button>
+                        文件上传
+                        <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">
@@ -87,7 +92,7 @@
                     </p>
                 </div>
             </div>
-            <el-empty v-if="dirList.length == 0||!dirList[0].type" />
+            <el-empty v-if="dirList.length == 0 || !dirList[0].type" />
         </div>
         <popup ref="fileRef"></popup>
     </div>
@@ -123,18 +128,20 @@ const nodeClick = (e: any) => {
     loading.value = true
     if (e.level == 2) {
         nDid.value = e.ndid
-        getDeviceRootPath(nDid.value).then(res => {
-            loading.value = false
-            dirList.value = [res.data]
-            activePath.value = res.data.prjDataPath
-            activePathList.value.map((item: any, index: any) => {
-                if (item.path.indexOf(res.data.prjDataPath) == -1) {
-                    activePathList.value.push({ path: activePath.value })
-                }
+        getDeviceRootPath(nDid.value)
+            .then(res => {
+                loading.value = false
+                dirList.value = [res.data]
+                activePath.value = res.data.prjDataPath
+                activePathList.value.map((item: any, index: any) => {
+                    if (item.path.indexOf(res.data.prjDataPath) == -1) {
+                        activePathList.value.push({ path: activePath.value })
+                    }
+                })
+            })
+            .catch(e => {
+                loading.value = false
             })
-        }).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
+        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;