文件服务-上传下载进度条

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

@@ -2,6 +2,19 @@
 <template>
     <div :class="downLoading ? 'all_disabled' : ''">
         <el-dialog v-model="dialogVisible" title="文件信息" width="50%" @closed="handleClose">
+            <div class="download_progress" v-if="status != 0 && status != 100">
+                <div class="progress_left">
+                    正在下载：
+                    {{
+                        fileData?.prjDataPath
+                            ? fileData?.prjDataPath.split('/')[fileData?.prjDataPath.split('/').length - 1]
+                            : '/'
+                    }}
+                </div>
+                <div class="progress_right">
+                    <el-progress :percentage="status" />
+                </div>
+            </div>
             <el-descriptions title="" style="margin: 10px 0" :column="2" :border="true" v-loading="loading">
                 <el-descriptions-item label="文件名称">
                     {{
@@ -21,7 +34,7 @@
                 </el-descriptions-item>
             </el-descriptions>
             <template #footer>
-                <div class="dialog-footer">
+                <div class="dialog-footer download_status">
                     <el-button @click="handleClose">取消</el-button>
                     <el-button type="primary" @click="handleDownLoad" :disabled="loading" :loading="downLoading">
                         {{ downLoading ? '下载中...' : '下载' }}
@@ -32,7 +45,7 @@
     </div>
 </template>
 <script lang="ts" setup>
-import { ref, onMounted, defineExpose, onBeforeUnmount, onUnmounted, defineEmits } from 'vue'
+import { ref, onMounted, defineExpose, defineProps, onBeforeUnmount, onUnmounted, defineEmits, watch } from 'vue'
 import { getFileServiceFileOrDir, downLoadDeviceFile } from '@/api/cs-device-boot/fileService.ts'
 import { ElMessage } from 'element-plus'
 import { downLoadFile } from '@/api/cs-system-boot/manage.ts'
@@ -76,7 +89,6 @@ const handleDownLoad = () => {
         .then((res: any) => {
             if (res.code == 'A0000') {
                 downLoadFile(res.data).then((resp: any) => {
-                    console.log(resp, '999999999999')
                     if (resp.type != 'application/json') {
                         // 'application/vnd.ms-excel'
                         let blob = new Blob([resp], { type: resp.type })
@@ -89,11 +101,11 @@ const handleDownLoad = () => {
                         document.body.appendChild(link)
                         downLoading.value = false
                         link.click()
+                        status.value = 100
                         ElMessage.success('文件下载成功')
                         link.remove()
                         handleClose()
                     } else {
-                        console.log(6666)
                         if (resp.code == 'A0000') {
                             window.open(res.data, '_blank')
                             downLoading.value = false
@@ -112,10 +124,26 @@ const handleDownLoad = () => {
 }
 onMounted(() => {})
 onUnmounted(() => {})
-defineExpose({ open })
+const status = ref(0)
+const setStatus = (val: any) => {
+    status.value = val
+}
+defineExpose({ open, setStatus })
 </script>
 <style lang="scss" scoped>
-.all_disabled {
-    // pointer-events: none;
+.download_progress {
+    display: flex;
+    width: 100%;
+    margin: 10px 0;
+    align-items: center;
+    justify-content: space-between;
+    .progress_left{
+        width: auto;
+    }
+    .progress_right{
+        flex:1;
+        padding-left: 10px;
+        box-sizing: border-box;
+    }
 }
 </style>