修改 预览展示页面

src/views/pqs/supervise/technology/detail.vue

@@ -1,46 +1,44 @@
 <template>
     <!--工作流view的路径：/pqs/supervise/technology/detail-->
-    <div class='default-main'>
+    <div class="default-main">
         <!--        <h1>详细信息回显</h1>-->
-        <el-descriptions :column='2' border>
-            <el-descriptions-item :label='detailData.leafletType==1?"预警单名称":"告警单名称"'>
+        <el-descriptions :column="2" border>
+            <el-descriptions-item :label="detailData.leafletType == 1 ? '预警单名称' : '告警单名称'">
                 {{ detailData.leafletName }}
             </el-descriptions-item>
-            <el-descriptions-item :label='detailData.leafletType==1?"预警单":"告警单"+"问题来源"'>
+            <el-descriptions-item :label="detailData.leafletType == 1 ? '预警单' : '告警单' + '问题来源'">
                 {{ getProblemType(detailData.problemType) }}
             </el-descriptions-item>
-            <el-descriptions-item :span='2' :label='detailData.leafletType==1?"预警单":"告警单"+"问题描述"'>
+            <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 />
+            <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>
-                    <span @click="openFile(detailData.problemName)">预览</span>
+                    <a :href="detailData.problemPath" target="_blank">{{ detailData.problemName }}</a>
                 </el-descriptions-item>
             </template>
-            <el-descriptions-item :span='2' label='采取措施'>
+            <el-descriptions-item :span="2" label="采取措施">
                 {{ detailData.takeStep }}
             </el-descriptions-item>
-            <el-descriptions-item :span='2' label='处理成效报告'>
-                <el-icon>
-                    <Link />
+            <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>
-                <span @click="openFile(detailData.reportName)">预览</span>
+                <a :href="detailData.reportPath" target="_blank">{{ detailData.reportName }}</a>
             </el-descriptions-item>
         </el-descriptions>
     </div>
 </template>
-<script lang='ts' setup>
+<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'
+import { Link, View } from '@element-plus/icons-vue'
 
 defineOptions({ name: 'technology/detail' })
 const openFile = (name: any) => {
@@ -52,8 +50,8 @@ const props = defineProps({
     id: propTypes.string.def(undefined)
 })
 const detailLoading = ref(false) // 表单的加载中
-const detailData = ref({}) // 详情数据
-const queryId = query.id// 从 URL 传递过来的 id 编号
+const detailData: any = ref({}) // 详情数据
+const queryId = query.id // 从 URL 传递过来的 id 编号
 const getProblemType = (type: number) => {
     if (type === 1) {
         return '技术监督计划'
@@ -105,6 +103,9 @@ onMounted(() => {
     getInfo()
 })
 </script>
-<style scoped>
-
-</style>
+<style lang="scss" scoped>
+.elView {
+    cursor: pointer;
+    margin-right: 5px;
+}
+</style>

src/views/pqs/supervise/technology/feedbackPopup.vue

@@ -13,11 +13,10 @@
                 </el-form-item>
 
                 <el-form-item label="问题附件：" v-if="showFile">
-                    <el-icon>
-                        <Link />
+                    <el-icon class="elView" v-if="problemDetail?.problemName">
+                        <View @click="openFile(problemDetail?.problemName)" />
                     </el-icon>
                     <a :href="problemDetail.problemPath" target="_blank">{{ problemDetail.problemName }}</a>
-                    <span @click="openFile(problemDetail.problemName )">预览</span>
                 </el-form-item>
 
                 <el-form-item label="采取的措施：" prop="takeStep">
@@ -63,7 +62,7 @@ import { ElMessage, genFileId, UploadProps, UploadRawFile } from 'element-plus'
 import TableStore from '@/utils/tableStore' // 若不是列表页面弹框可删除
 import { getFileNameAndFilePath, uploadFile } from '@/api/system-boot/file'
 import { addFeedback, updateFeedback } from '@/api/supervision-boot/leaflet'
-import { Link } from '@element-plus/icons-vue'
+import { Link, View } from '@element-plus/icons-vue'
 const openFile = (name: any) => {
     window.open(window.location.origin + '/#/previewFile?' + name)
 }
@@ -117,7 +116,7 @@ const open = async (
 ) => {
     title.value = text
     resetForm()
-    console.log(66666,reportPath);
+    console.log(66666, reportPath)
     if (takeStep) {
         form.value.takeStep = takeStep
     }
@@ -229,4 +228,8 @@ const uploadFileName = val => {
 .el-select {
     min-width: 180px;
 }
+.elView {
+    cursor: pointer;
+    margin-right: 5px;
+}
 </style>