feat: 添加附件预览功能，支持在设备报修中查看上传的图片

yyb

19 小时以前 955f6dfb8f3e1b8a733ba47bfd69354f5269d1f6

feat: 添加附件预览功能，支持在设备报修中查看上传的图片

 src/views/equipmentManagement/repair/index.vue

@@ -155,6 +155,7 @@
            :before-upload="handleAttachmentBeforeUpload"
            :on-error="handleAttachmentUploadError"
            :on-success="handleAttachmentUploadSuccess"
            :on-preview="handleAttachmentPreview"
            :on-remove="handleAttachmentRemove"
            list-type="picture-card"
            :limit="9"
@@ -169,6 +170,22 @@
      <template #footer>
        <el-button @click="attachment.visible = false">关闭</el-button>
      </template>
    </el-dialog>

    <el-dialog
      v-model="attachment.previewVisible"
      title="图片预览"
      width="70%"
      append-to-body
    >
      <div class="attachment-preview-wrap">
        <img
          v-if="attachment.previewUrl"
          :src="attachment.previewUrl"
          alt="preview"
          class="attachment-preview-img"
        />
      </div>
    </el-dialog>
  </div>
</template>
@@ -208,6 +225,8 @@
  deviceRepairId: undefined,
  files: [],
  fileList: [],
  previewVisible: false,
  previewUrl: "",
});

const normalizeFileUrl = (rawUrl = '') => {
@@ -440,6 +459,8 @@
  attachment.deviceRepairId = undefined;
  attachment.files = [];
  attachment.fileList = [];
  attachment.previewVisible = false;
  attachment.previewUrl = "";
};

const handleAttachmentBeforeUpload = (file) => {
@@ -460,6 +481,16 @@

const handleAttachmentUploadError = () => {
  ElMessage.error("上传失败");
};

const handleAttachmentPreview = (file) => {
  const rawUrl = file?.url || file?.response?.data?.url || "";
  if (!rawUrl) {
    ElMessage.warning("图片地址无效，无法预览");
    return;
  }
  attachment.previewUrl = normalizeFileUrl(rawUrl);
  attachment.previewVisible = true;
};

const handleAttachmentRemove = async (file) => {
@@ -516,4 +547,17 @@
  margin-bottom: 12px;
}

.attachment-preview-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 360px;
}

.attachment-preview-img {
  max-width: 100%;
  max-height: 70vh;
  object-fit: contain;
}

</style>