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">
            <el-descriptions title="" style="margin: 10px 0" :column="2" :border="true" v-loading="loading">
                <el-descriptions-item label="文件名称">
                    {{ fileData?.prjDataPath ? fileData?.prjDataPath : '/' }}
                </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">
                    <el-button @click="handleClose">取消</el-button>
                    <el-button type="primary" @click="handleDownLoad" :loading="downLoading">
                        {{ downLoading ? '下载中...' : '下载' }}
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>
<script lang="ts" setup>
import { ref, onMounted, defineExpose, onBeforeUnmount, onUnmounted, defineEmits } from 'vue'
import { getFileServiceFileOrDir, downLoadDeviceFile } from '@/api/cs-device-boot/fileService.ts'
import { ElMessage } from 'element-plus'
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) => {
    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 => {
            if (res.code == 'A0000') {
                window.open(res.data, '_blank')
                downLoading.value = false
                ElMessage.success(res.message)
                handleClose()
            }
        })
        .catch(e => {
            if (e) {
                downLoading.value = false
            }
        })
}
onMounted(() => {})
onUnmounted(() => {})
defineExpose({ open })
</script>
<style lang="scss" scoped>
.all_disabled {
    pointer-events: none;
}
</style>