修改 预览展示页面

src/views/pqs/supervise/harmonicSurvey/test/detail.vue

@@ -1,69 +1,68 @@
 <template>
-  <div class='default-main'>
-    <el-descriptions :column='2' border>
-      <el-descriptions-item label='技术监督计划名称'>
-        {{ detailData?.planName }}
-      </el-descriptions-item>
-      <el-descriptions-item label='计划负责单位'>
-        {{ detailData?.deptName }}
-      </el-descriptions-item>
-      <el-descriptions-item label='监督类型'>
-        {{
-          supvTypeList.find(item => {
-            return item.id == detailData?.supvType
-          })?.name
-        }}
-      </el-descriptions-item>
-      <el-descriptions-item label='监督对象名称'>
-        {{ detailData?.supvObjectName }}
-      </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='变电站'>
-        {{ detailData?.substationName }}
-      </el-descriptions-item>
-      <el-descriptions-item label='变电站电压等级'>
-        {{ detailData?.voltageLevel }}
-      </el-descriptions-item>
-      <el-descriptions-item label='变电站来源'>
-        {{ detailData?.voltageLevel == '/' ? '自定义变电站' : '系统内台账变电站' }}
-      </el-descriptions-item>
-      <el-descriptions-item label='实际完成时间'>
-        {{ detailData?.completeTime }}
-      </el-descriptions-item>
-      <el-descriptions-item label='负责人'>
-        {{ detailData?.completeBy }}
-      </el-descriptions-item>
-      <el-descriptions-item label='是否有问题'>
-        <el-tag :type='getProblemFlag(detailData?.problemFlag)'>
-          {{ getProblemFlagDetail(detailData?.problemFlag) }}
-        </el-tag>
-      </el-descriptions-item>
-      <el-descriptions-item v-if='detailData?.problemFlag == 1' :span='2' label='问题描述'>
-        {{ detailData?.problemDetail }}
-      </el-descriptions-item>
+    <div class="default-main">
+        <el-descriptions :column="2" border>
+            <el-descriptions-item label="技术监督计划名称">
+                {{ detailData?.planName }}
+            </el-descriptions-item>
+            <el-descriptions-item label="计划负责单位">
+                {{ detailData?.deptName }}
+            </el-descriptions-item>
+            <el-descriptions-item label="监督类型">
+                {{
+                    supvTypeList.find(item => {
+                        return item.id == detailData?.supvType
+                    })?.name
+                }}
+            </el-descriptions-item>
+            <el-descriptions-item label="监督对象名称">
+                {{ detailData?.supvObjectName }}
+            </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="变电站">
+                {{ detailData?.substationName }}
+            </el-descriptions-item>
+            <el-descriptions-item label="变电站电压等级">
+                {{ detailData?.voltageLevel }}
+            </el-descriptions-item>
+            <el-descriptions-item label="变电站来源">
+                {{ detailData?.voltageLevel == '/' ? '自定义变电站' : '系统内台账变电站' }}
+            </el-descriptions-item>
+            <el-descriptions-item label="实际完成时间">
+                {{ detailData?.completeTime }}
+            </el-descriptions-item>
+            <el-descriptions-item label="负责人">
+                {{ detailData?.completeBy }}
+            </el-descriptions-item>
+            <el-descriptions-item label="是否有问题">
+                <el-tag :type="getProblemFlag(detailData?.problemFlag)">
+                    {{ getProblemFlagDetail(detailData?.problemFlag) }}
+                </el-tag>
+            </el-descriptions-item>
+            <el-descriptions-item v-if="detailData?.problemFlag == 1" :span="2" label="问题描述">
+                {{ detailData?.problemDetail }}
+            </el-descriptions-item>
 
-      <el-descriptions-item :span='2' label='测试报告'>
-        <el-icon>
-          <Link />
-        </el-icon>
-        <a :href='detailData.testReport' target='_blank'>{{ detailData.testReportName }}</a>
-        <span @click="openFile(detailData.testReportName )">预览</span>
-      </el-descriptions-item>
+            <el-descriptions-item :span="2" label="测试报告">
+                <el-icon class="elView" v-if="detailData?.testReportName">
+                    <View @click="openFile(detailData?.testReportName)" />
+                </el-icon>
+                <a :href="detailData.testReport" target="_blank">{{ detailData.testReportName }}</a>
+            </el-descriptions-item>
 
-      <el-descriptions-item label='流程状态'>
-        <el-tag :type='getDeviceStatusType(detailData?.status)'>
-          {{ getDeviceStatus(detailData?.status) }}
-        </el-tag>
-      </el-descriptions-item>
-    </el-descriptions>
-  </div>
+            <el-descriptions-item label="流程状态">
+                <el-tag :type="getDeviceStatusType(detailData?.status)">
+                    {{ getDeviceStatus(detailData?.status) }}
+                </el-tag>
+            </el-descriptions-item>
+        </el-descriptions>
+    </div>
 </template>
-<script setup lang='ts'>
+<script setup lang="ts">
 import { onMounted, ref } from 'vue'
 import { useDictData } from '@/stores/dictData'
 const dictData = useDictData()
@@ -73,13 +72,13 @@ import { propTypes } from '@/utils/propTypes'
 import { defaultAttribute } from '@/components/table/defaultAttribute'
 import { getTestById } from '@/api/supervision-boot/survey/test'
 import { getFileNameAndFilePath } from '@/api/system-boot/file'
-import { Link } from '@element-plus/icons-vue'
-const openFile = (name:any) => {
-    window.open(window.location.origin + '/#/previewFile?'+name)
+import { Link ,View} from '@element-plus/icons-vue'
+const openFile = (name: any) => {
+    window.open(window.location.origin + '/#/previewFile?' + name)
 }
 const { query } = useRoute() // 查询参数
 const props = defineProps({
-  id: propTypes.string.def(undefined)
+    id: propTypes.string.def(undefined)
 })
 const detailLoading = ref(false) // 表单的加载中
 const detailData: any = ref({}) // 详情数据
@@ -87,90 +86,92 @@ const queryId = query.id // 从 URL 传递过来的 id 编号
 
 /** 获得数据 */
 const getInfo = async () => {
-  detailLoading.value = true
-  try {
-    await getTestById(props.id || queryId).then(res => {
-      detailData.value = res.data
-      getFileData()
-    })
-  } finally {
-    detailLoading.value = false
-  }
+    detailLoading.value = true
+    try {
+        await getTestById(props.id || queryId).then(res => {
+            detailData.value = res.data
+            getFileData()
+        })
+    } finally {
+        detailLoading.value = false
+    }
 }
 
 const getFileData = async () => {
-
-  await getFileNameAndFilePath({ filePath: detailData.value.testReport }).then(res => {
-    detailData.value.testReport = res.data.url
-    detailData.value.testReportName = res.data.fileName
-  })
+    await getFileNameAndFilePath({ filePath: detailData.value.testReport }).then(res => {
+        detailData.value.testReport = res.data.url
+        detailData.value.testReportName = res.data.fileName
+    })
 }
 
 const getProblemFlagDetail = (status: number) => {
-  if (status === 1) {
-    return '存在问题'
-  }
-  return '合格'
+    if (status === 1) {
+        return '存在问题'
+    }
+    return '合格'
 }
 
 const getProblemFlag = (status: number) => {
-  if (status === 1) {
-    return 'danger'
-  }
-  return 'success'
+    if (status === 1) {
+        return 'danger'
+    }
+    return 'success'
 }
 
-
 const getDeviceStatus = (status: number) => {
-  if (status === 1) {
-    return '审批中'
-  }
-  if (status === 2) {
+    if (status === 1) {
+        return '审批中'
+    }
+    if (status === 2) {
+        return '审批通过'
+    }
+    if (status === 3) {
+        return '审批不通过'
+    }
+    if (status === 4) {
+        return '已取消'
+    }
     return '审批通过'
-  }
-  if (status === 3) {
-    return '审批不通过'
-  }
-  if (status === 4) {
-    return '已取消'
-  }
-  return '审批通过'
 }
 
 const getDeviceStatusType = (status: number) => {
-  if (status === 1) {
-    return 'primary'
-  }
-  if (status === 2) {
+    if (status === 1) {
+        return 'primary'
+    }
+    if (status === 2) {
+        return 'success'
+    }
+    if (status === 3) {
+        return 'danger'
+    }
+    if (status === 4) {
+        return 'warning'
+    }
     return 'success'
-  }
-  if (status === 3) {
-    return 'danger'
-  }
-  if (status === 4) {
-    return 'warning'
-  }
-  return 'success'
 }
 
-
 const formatterSource = (row: any) => {
-  if (row.column.field == 'dataSource') {
-    if (row.cellValue == 0) {
-      return '系统内台账变电站'
+    if (row.column.field == 'dataSource') {
+        if (row.cellValue == 0) {
+            return '系统内台账变电站'
+        } else {
+            return '自定义变电站'
+        }
     } else {
-      return '自定义变电站'
+        return row.cellValue
     }
-  } else {
-    return row.cellValue
-  }
 }
 
-
 defineExpose({ open: getInfo }) // 提供 open 方法，用于打开弹窗
 
 /** 初始化 **/
 onMounted(() => {
-  getInfo()
+    getInfo()
 })
 </script>
+<style lang="scss" scoped>
+.elView {
+    cursor: pointer;
+    margin-right: 5px;
+}
+</style>