admin-sjzx/src/views/pqs/supervise/technology/detail.vue

<template>
    <!--工作流view的路径：/pqs/supervise/technology/detail-->
    <div class='default-main'>
        <!--        <h1>详细信息回显</h1>-->
        <el-descriptions :column='2' border>
            <el-descriptions-item :label='detailData.leafletType==1?"预警单名称":"告警单名称"'>
                {{ detailData.leafletName }}
            </el-descriptions-item>
            <el-descriptions-item :label='detailData.leafletType==1?"预警单":"告警单"+"问题来源"'>
                {{ getProblemType(detailData.problemType) }}
            </el-descriptions-item>
            <el-descriptions-item :span='2' :label='detailData.leafletType==1?"预警单":"告警单"+"问题描述"'>
                {{ detailData.issueDetail }}
            </el-descriptions-item>
            <template v-if='detailData.problemType == 4'>
                <el-descriptions-item :span='2' label='附件'>
                    <el-icon>
                        <Link />
                    </el-icon>
                    <a :href='detailData.problemPath' target='_blank'>{{ detailData.problemName }}</a>
                    <span @click="openFile(detailData.problemName)">预览</span>
                </el-descriptions-item>
            </template>
            <el-descriptions-item :span='2' label='采取措施'>
                {{ detailData.takeStep }}
            </el-descriptions-item>
            <el-descriptions-item :span='2' label='处理成效报告'>
                <el-icon>
                    <Link />
                </el-icon>
                <a :href='detailData.reportPath' target='_blank'>{{ detailData.reportName }}</a>
                <span @click="openFile(detailData.reportName)">预览</span>
            </el-descriptions-item>
        </el-descriptions>
    </div>
</template>
<script lang='ts' setup>
import { onMounted, ref } from 'vue'
import { useRoute } from 'vue-router'
import { propTypes } from '@/utils/propTypes'
import { getById } from '@/api/supervision-boot/leaflet'
import { getFileNameAndFilePath } from '@/api/system-boot/file'
import { Link } from '@element-plus/icons-vue'

defineOptions({ name: 'technology/detail' })
const openFile = (name: any) => {
    window.open(window.location.origin + '/#/previewFile?' + name)
}
const { query } = useRoute() // 查询参数

const props = defineProps({
    id: propTypes.string.def(undefined)
})
const detailLoading = ref(false) // 表单的加载中
const detailData = ref({}) // 详情数据
const queryId = query.id// 从 URL 传递过来的 id 编号
const getProblemType = (type: number) => {
    if (type === 1) {
        return '技术监督计划'
    }
    if (type === 2) {
        return '在线监测超标问题'
    }
    if (type === 3) {
        return '用户投诉问题'
    }
    if (type === 4) {
        return '现场测试超标问题'
    }
    return '现场测试超标问题'
}

/** 获得数据 */
const getInfo = async () => {
    detailLoading.value = true
    try {
        await getById(props.id || queryId).then(res => {
            detailData.value = res.data
            getFileData()
        })
    } finally {
        detailLoading.value = false
    }
}

const getFileData = async () => {
    //如果有问题附件
    if (detailData.value.problemPath) {
        await getFileNameAndFilePath({ filePath: detailData.value.problemPath }).then(res => {
            detailData.value.problemPath = res.data.url
            detailData.value.problemName = res.data.fileName
        })
    }

    await getFileNameAndFilePath({ filePath: detailData.value.reportPath }).then(res => {
        detailData.value.reportPath = res.data.url
        detailData.value.reportName = res.data.fileName
    })
}

defineExpose({ open: getInfo }) // 提供 open 方法，用于打开弹窗

/** 初始化 **/
onMounted(() => {
    getInfo()
})
</script>
<style scoped>

</style>