From 656ffdc9715410d839811fbc1029b55b9f991612 Mon Sep 17 00:00:00 2001
From: hr121 <568127468@qq.com>
Date: Sat, 23 Aug 2025 23:03:52 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E9=A3=9E=E8=A1=8C=E5=99=A8?=
 =?UTF-8?q?=E4=BF=9D=E9=99=A9=E8=AE=B0=E5=BD=95=E9=99=84=E4=BB=B6=E6=97=A0?=
 =?UTF-8?q?=E6=B3=95=E6=9F=A5=E7=9C=8B=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/InsuranceRecord.vue            | 45 ++++++++++++++++++-
 1 file changed, 43 insertions(+), 2 deletions(-)

diff --git a/src/views/aircraft/aircraftDetail/components/InsuranceRecord.vue b/src/views/aircraft/aircraftDetail/components/InsuranceRecord.vue
index da847cd..8a3523c 100644
--- a/src/views/aircraft/aircraftDetail/components/InsuranceRecord.vue
+++ b/src/views/aircraft/aircraftDetail/components/InsuranceRecord.vue
@@ -116,7 +116,7 @@
             :auto-upload="false"
             :on-change="handleFileChange"
             :on-remove="handleFileRemove"
-            list-type="text"
+            :on-preview="handlePreview"
             multiple
             :disabled="isView"
           >
@@ -132,6 +132,16 @@
         <el-button v-if="!isView" type="primary" @click="submitForm">确 定</el-button>
       </div>
     </el-dialog>
+    <!-- 图片预览弹窗 -->
+    <el-dialog
+      :visible.sync="previewVisible"
+      append-to-body
+      :title="previewTitle"
+      width="60%"
+      class="image-preview-dialog"
+    >
+      <img :src="previewUrl" style="width: 100%; height: auto;" />
+    </el-dialog>
   </el-card>
 </template>
 
@@ -169,6 +179,9 @@ export default {
       dialogTitle: "新增保险",
       uploadDisabled: false,
       isView: false, // 是否为查看模式
+      previewVisible: false, // 图片预览弹窗显示状态
+      previewUrl: '', // 预览图片的URL
+      previewTitle: '', // 预览图片的标题
       form: {
         id: null,
         name: "",
@@ -209,7 +222,7 @@ export default {
           value: item.dictSort,
           label: item.value
         }))
-        console.log(this.insuranceTypes)
+        // console.log(this.insuranceTypes)
       } catch (error) {
         console.error('获取保险类型失败:', error)
         this.$message.error('获取保险类型失败')
@@ -284,6 +297,30 @@ export default {
         this.$message.error('获取保险详情失败');
       }
     },
+    // 处理文件预览
+    handlePreview(file) {
+      // 获取文件扩展名（转换为小写）
+      const fileExt = file.name.split('.').pop().toLowerCase();
+
+      // 判断文件类型
+      if(['jpg', 'jpeg', 'png', 'gif'].includes(fileExt)) {
+        // 图片预览
+        this.previewUrl = file.url;
+        this.previewTitle = file.name;
+        this.previewVisible = true;
+      } else if (fileExt === 'pdf') {
+        // PDF预览 - 在新窗口打开
+        window.open(file.url, '_blank');
+      } else {
+        // 其他文件类型 - 提示下载
+        this.$message.info('该文件类型不支持在线预览，请下载后查看');
+        const link = document.createElement('a');
+        link.href = file.url;
+        link.download = file.name;
+        link.click();
+      }
+    },
+
     handleDelete(row) {
       this.$confirm('此操作将永久删除该保险记录, 是否继续?', '提示', {
         confirmButtonText: '确定',
@@ -461,6 +498,10 @@ export default {
   margin-left: 2px;
 }
 
+::v-deep .el-dialog__body{
+  padding: 0 20px 10px 20px !important;
+}
+
 .dialog-footer {
   text-align: right;
   padding-top: 20px;