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 @@ 确 定 + + + + @@ -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;