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 class="elView" v-if="detailData?.problemName">
                        <View @click="openFile(detailData?.problemName)" />
                    </el-icon>
                    <a :href="detailData.problemPath" target="_blank">{{ detailData.problemName }}</a>
                </el-descriptions-item>
            </template>
            <el-descriptions-item :span="2" label="采取措施">
                {{ detailData.takeStep }}
            </el-descriptions-item>
            <el-descriptions-item :span="2" label="处理成效报告">
                <el-icon class="elView" v-if="detailData?.reportName">
                    <View @click="openFile(detailData?.reportName)" />
                </el-icon>
                <a :href="detailData.reportPath" target="_blank">{{ detailData.reportName }}</a>
            </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, View } 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: any = 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 lang="scss" scoped>
.elView {
    cursor: pointer;
    margin-right: 5px;
}
</style>