查看检查图片

src/views/disaster/disaster-precaution/src/components/TemplateTableMerge.vue

@@ -27,7 +27,10 @@
                 :rows="3"
                 v-if="props.operationType === 'check'"
               />
-              <div class="inspection-result-approve" v-else-if="props.operationType === 'approve'">
+              <div
+                class="inspection-result-approve"
+                v-else-if="props.operationType === 'approve' || props.operationType === 'view'"
+              >
                 <div class="execute-result">{{ resultData.executeResult }}</div>
                 <div class="execute-person">
                   <span>检查人员：{{ resultData.executeName }}</span>
@@ -81,6 +84,19 @@
               :disabled="operationType !== 'check'"
               v-if="props.operationType !== 'template'"
             />
+            <div v-if="JSON.parse(scope.row.inspectImages).length > 0" class="image-icon">
+              <el-tooltip content="图片查看" effect="light">
+                <el-image
+                  :src="ImageIcon"
+                  :zoom-rate="1.2"
+                  :max-scale="7"
+                  :min-scale="0.2"
+                  :preview-src-list="JSON.parse(scope.row.inspectImages)"
+                  preview-teleported
+                  fit="cover"
+                />
+              </el-tooltip>
+            </div>
           </template>
         </el-table-column>
       </el-table-column>
@@ -98,6 +114,7 @@
   import type { ContentItem } from '@/types/disaster-precaution';
   import { useUserInfoHook } from '@/views/disaster/hooks/userInfo';
   import { COMPLIANCE } from '../constants/template-detail';
+  import ImageIcon from '../svg/image.svg';
 
   const { realname } = useUserInfoHook();
 
@@ -303,7 +320,7 @@
   );
 
   // 获取表格数据的方法，用于父组件通过ref调用
-  const getOpinionData = (operationType: 'view' | 'approve' | 'check') => {
+  const getOpinionData = (operationType: 'view' | 'approve' | 'check' | 'template') => {
     if (operationType !== 'approve') {
       return props.opinionData;
     }
@@ -315,7 +332,7 @@
     };
   };
 
-  const getResultData = (operationType: 'view' | 'approve' | 'check') => {
+  const getResultData = (operationType: 'view' | 'approve' | 'check' | 'template') => {
     if (operationType !== 'check') {
       return props.resultData;
     }
@@ -421,4 +438,8 @@
       flex: 1;
     }
   }
+  .image-icon {
+    margin-top: 10px;
+    cursor: pointer;
+  }
 </style>