工单、报备，图片预览功能

fuliqi

2025-02-11 c4ec0fac48c9bef59fadba87404ea3d4bf9e087c

 src/components/WorkOrder/WorkOrderAuditing.vue

@@ -32,11 +32,25 @@
            >
              <el-card>
                <div v-html="condition.ywCondition"></div>
                <el-link type="primary"
                         v-for="item in condition.ywProofMaterials != null ? condition.ywProofMaterials.split(',') : condition.ywProofMaterials"
                         :underline="false" :key="item.id" @click="handleDownload(item)"
                >{{ item.substring(item.lastIndexOf('/') + 1) }}
                </el-link>
                <div v-for="item in condition.ywProofMaterials != null ? condition.ywProofMaterials.split(',') : condition.ywProofMaterials"
                     :key="item.id">
                  <el-image
                    v-if="isImageFile(item)"
                    :src="getPreview(item)"
                    :preview-src-list="[getPreview(item)]"
                    fit="cover"
                    style="width: 100px; height: 100px; margin: 5px;"
                  >
                  </el-image>
                  <el-link
                    v-else
                    type="primary"
                    :underline="false"
                    @click="handleDownload(item)"
                  >
                    {{ getFileName(item) }}
                  </el-link>
                </div>
              </el-card>
            </el-timeline-item>
          </el-timeline>
@@ -82,6 +96,19 @@
    }
  },
  methods: {
    getPreview(url) {
      // 使用全局配置的图片前缀
      return this.$img + url;
    },
    isImageFile(url) {
      const imageExtensions = ['.jpg', '.jpeg', '.png', '.gif', '.webp'];
      return imageExtensions.some(ext =>
        url.toLowerCase().endsWith(ext)
      );
    },
    getFileName(url) {
      return url.substring(url.lastIndexOf('/') + 1);
    },
    /** 下载按钮操作 */
    handleDownload(data) {
      this.$download.resource(data)
@@ -116,5 +143,4 @@
</script>

<style scoped>

</style>