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

<template>
    <div class="default-main">
        <!--        <h1>详细信息回显</h1>-->
        <el-descriptions :column="2" border>
            <el-descriptions-item label="普测计划名称">
                {{ detailData?.planName }}
            </el-descriptions-item>
            <el-descriptions-item label="计划负责人">
                {{ detailData?.leader }}
            </el-descriptions-item>
            <el-descriptions-item label="计划开始时间">
                {{ detailData?.planStartTime }}
            </el-descriptions-item>
            <el-descriptions-item label="计划结束时间">
                {{ detailData?.planEndTime }}
            </el-descriptions-item>
            <el-descriptions-item label="审核状态">
                <el-tag :type="getDeviceStatusType(detailData?.status)">
                    {{ getDeviceStatus(detailData?.status) }}
                </el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="文件">
                <div v-for="(item, index) in aList">
                    <el-icon>
                        <Link />
                    </el-icon>
                    <a :href="item.url">
                        {{ item.fileName }}
                    </a>
                    <!-- <el-button type="primary" link @click="downloadFile(item.url, item.fileName)">
                        {{ item.fileName }}
                    </el-button> -->
                </div>
            </el-descriptions-item>
        </el-descriptions>
        <div style="height: 300px">
            <vxe-table
                v-bind="defaultAttribute"
                ref="vxeRef"
                class="mt10"
                height="auto"
                :data="detailData?.supervisionGeneralSurveyPlanDetailPOS"
            >
                <vxe-column field="subName" title="变电站名称"></vxe-column>
                <vxe-column field="voltageLevel" title="变电站电压等级" :formatter="formatter"></vxe-column>
                <vxe-column field="measurementPointId" title="在线监测点ID">
                    <template #default="{ row }">{{ row.measurementPointId ? row.measurementPointId : '/' }}</template>
                </vxe-column>

                <vxe-column field="isSurvey" title="是否实现监测">
                    <template #default="{ row }">{{ row.isSurvey === 1 ? '是' : '否' }}</template>
                </vxe-column>
            </vxe-table>
        </div>
    </div>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue'

defineOptions({ name: 'QuitRunningDeviceDetail' })
import { propTypes } from '@/utils/propTypes'
import { querySurveyDetail } from '@/api/process-boot/generalTest'
import { getFileNameAndFilePath } from '@/api/system-boot/file'
import { defaultAttribute } from '@/components/table/defaultAttribute'
import { useDictData } from '@/stores/dictData'
import { Link } from '@element-plus/icons-vue'
const { query } = useRoute() // 查询参数

const props = defineProps({
    id: propTypes.string.def(undefined)
})
const dictData = useDictData()
const detailLoading = ref(false) // 表单的加载中
const detailData: any = ref({}) // 详情数据
const levelList = dictData.getBasicData('Dev_Voltage_Stand')
const aList: any = ref([]) // 详情数据
const queryId = query.id // 从 URL 传递过来的 id 编号

/** 获得数据 */
const getInfo = async () => {
    detailLoading.value = true
    try {
        await querySurveyDetail({ id: props.id || queryId }).then(res => {
            detailData.value = res.data
            aList.value = []
            let arr = res.data.filePath.split(',')

            arr.slice(0, -1).forEach((item: any) => {
                getFileNameAndFilePath({ filePath: item }).then((res: any) => {
                    aList.value.push(res.data)
                })
            })
        })
    } finally {
        detailLoading.value = false
    }
}
// 下载文件
const downloadFile = (url: string, fileName: string) => {
    const link = document.createElement('a')
    link.href = url
    link.download = fileName
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)
}
const getDeviceStatus = (status: number) => {
    if (status === 1) {
        return '审批中'
    }
    if (status === 2) {
        return '审批通过'
    }
    if (status === 3) {
        return '审批不通过'
    }
    if (status === 4) {
        return '已取消'
    }
    return '审批通过'
}

const getDeviceStatusType = (status: number) => {
    if (status === 1) {
        return 'primary'
    }
    if (status === 2) {
        return 'success'
    }
    if (status === 3) {
        return 'danger'
    }
    if (status === 4) {
        return 'warning'
    }
    return 'success'
}
// 过滤数据
const formatter = (row: any) => {
    if (row.column.field == 'voltageLevel') {
        return levelList.filter(item => item.id == row.cellValue)[0].name
    } else {
        return row.cellValue
    }
}
defineExpose({ open: getInfo }) // 提供 open 方法，用于打开弹窗

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