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

<!-- 设备文件下载 -->
<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]
                        //     : '/'
                        fileName
                    }}
                </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="文件名称">
                    {{
                        fileData?.prjDataPath
                            ? fileData?.prjDataPath.split('/')[fileData?.prjDataPath.split('/').length - 1]
                            : '/'
                    }}
                </el-descriptions-item>
                <el-descriptions-item label="文件大小">
                    {{ fileData?.size ? fileData?.size + '字节' : '/' }}
                </el-descriptions-item>
                <el-descriptions-item label="文件时间">
                    {{ fileData?.startTime ? fileData?.startTime : '/' }}
                </el-descriptions-item>
                <el-descriptions-item label="文件校验码">
                    {{ fileData?.fileCheck ? fileData?.fileCheck : '/' }}
                </el-descriptions-item>
            </el-descriptions>
            <template #footer>
                <div class="dialog-footer download_status">
                    <el-button @click="handleClose">取消</el-button>
                    <el-button type="primary" @click="handleDownLoad" :disabled="loading" :loading="downLoading">
                        {{ downLoading ? '下载中...' : '下载' }}
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>
<script lang="ts" setup>
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'
const dialogVisible = ref(false)
const loading = ref(false)
const downLoading = ref(false)
const emit = defineEmits(['downLoadFile'])
const handleClose = () => {
    dialogVisible.value = false
}
//文件信息
const fileData: any = ref({})
const open = async (row: any, id: any) => {
    status.value = 0
    fileData.value = {}
    dialogVisible.value = true
    loading.value = true
    const obj = {
        nDid: id,
        name: row.prjDataPath,
        type: row.type
    }
    await getFileServiceFileOrDir(obj).then(res => {
        if (res.code == 'A0000') {
            if (res.data && res.data.length != 0) {
                fileData.value = res.data[0]
                fileData.value.nDid = id
            }
            loading.value = false
        }
    })
}
const handleDownLoad = () => {
    const obj = {
        nDid: fileData.value.nDid,
        name: fileData.value.prjDataPath,
        size: fileData.value.size,
        fileCheck: fileData.value.fileCheck
    }
    downLoading.value = true
    downLoadDeviceFile(obj)
        .then((res: any) => {
            if (res.code == 'A0000') {
                downLoadFile(res.data).then((resp: any) => {
                    if (resp.type != 'application/json') {
                        // 'application/vnd.ms-excel'
                        let blob = new Blob([resp], { type: resp.type })
                        const url = window.URL.createObjectURL(blob)
                        const link = document.createElement('a')
                        link.href = url
                        link.download = fileData.value?.prjDataPath
                            ? fileData.value?.prjDataPath.split('/')[fileData.value?.prjDataPath.split('/').length - 1]
                            : '/'
                        document.body.appendChild(link)
                        downLoading.value = false
                        link.click()
                        status.value = 100
                        ElMessage.success('文件下载成功')
                        link.remove()
                        handleClose()
                    } else {
                        if (resp.code == 'A0000') {
                            window.open(res.data, '_blank')
                            downLoading.value = false
                            ElMessage.success(resp.message)
                            handleClose()
                        }
                    }
                })
            }
        })
        .catch(e => {
            if (e) {
                downLoading.value = false
            }
        })
}
onMounted(() => {})
onUnmounted(() => {})
const status = ref(0)
const fileName = ref('')
const setStatus = (val: any) => {
    status.value = parseInt(Number((val.nowStep / val.allStep) * 100))
    fileName.value = val.fileName
}
defineExpose({ open, setStatus })
</script>
<style lang="scss" scoped>
.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>