文件上传组件图片预览、工单详情页图片预览

fuliqi

2025-02-11 da7b9833e734332d47a42fb8ba30daf263864b27

 src/views/system/work-order/detail/index.vue

@@ -16,7 +16,16 @@
              <div class="item-warp">
                <div>故障类型：</div>
                <div>
                  <el-tag style="margin-right: 5px;height:24px;overflow:auto" effect="dark" v-for="(error, index) in workOrderInfo.errorTypeList" :key="index" size="small" type="warning">{{ error }}</el-tag>
                  <el-tag
                    style="margin-right: 5px;height:24px;overflow:auto" effect="dark"
                    v-for="(error, index) in workOrderInfo.errorTypeList"
                    :key="index" size="small"
                    :type="error === '图像异常'
                     || error ===  '点位信息错误'
                     || error ===  '时钟偏差'
                     || error ===  'OSD异常'
                     ? 'danger' : 'warning'">{{ error }}
                  </el-tag>
                </div>
              </div>
              <div class="item-warp">
@@ -100,10 +109,24 @@
                  <el-tag :type="report.reportType === '事前报备' ? 'warning' : 'danger'">{{report.reportType}}</el-tag>
                </div>
                <div style="margin: 8px 0">
                  <el-link
                  <div
                    v-for="item in report.reportMaterials != null ? report.reportMaterials.split(',') : report.reportMaterials"
                    :underline="false" type="primary" :key="item" @click="handleDownload(item)">{{ item.substring(item.lastIndexOf("/") + 1)
                    }}</el-link>
                    :key="item">
                    <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
                      :underline="false" type="primary" @click="handleDownload(item)">{{
                        item.substring(item.lastIndexOf("/") + 1)
                      }}
                    </el-link>
                  </div>
                </div>
                <div v-html="report.reportContent"></div>
              </div>
@@ -122,10 +145,24 @@
              :timestamp="yw.createTime">
              <div>
                <div style="margin: 8px 0">
                  <el-link
                  <div
                    v-for="item in yw.ywProofMaterials != null ? yw.ywProofMaterials.split(',') : yw.ywProofMaterials"
                    :underline="false" type="primary" :key="item" @click="handleDownload(item)">{{ item.substring(item.lastIndexOf("/") + 1)
                    }}</el-link>
                    :key="item">
                    <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
                      :underline="false" type="primary" @click="handleDownload(item)">{{
                        item.substring(item.lastIndexOf("/") + 1)
                      }}
                    </el-link>
                  </div>
                </div>
                <div v-html="yw.ywCondition"></div>
              </div>
@@ -156,12 +193,13 @@
      <div class="img-info" v-for="(img, index) in workOrderInfo.imgList" :key="index">
        <div>
          <el-image
            style="width: 160px; height: 100px"
            style="width: 100%; height: auto"
            :src="getImgUrl(img.imgUrl)"
            :preview-src-list="getImgUrl(img.imgUrl)">
            :preview-src-list="workOrderInfo.imgList.map(i => getImgUrl(i.imgUrl))"
            >
          </el-image>
        </div>
        <div style="margin-top: 8px">{{img.createTime}}</div>
        <div style="margin-top: 8px;text-align: center">{{img.createTime}}</div>
      </div>
    </div>

@@ -213,6 +251,16 @@
    this.getWorkOrder()
  },
  methods: {
    getPreview(url) {
      // 使用全局配置的图片前缀
      return this.$img + url;
    },
    isImageFile(url) {
      const imageExtensions = ['.jpg', '.jpeg', '.png', '.gif', '.webp'];
      return imageExtensions.some(ext =>
        url.toLowerCase().endsWith(ext)
      );
    },
    closeAuditing() {
      this.auditingOpen = false
    },
@@ -287,14 +335,15 @@

<style scoped>
.img-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0 5px;
  flex: 0 0 calc(20% - 8px); /* 每行五个，所以每个占20%，减去间距 */
  box-sizing: border-box;
}

.work-order-img {
  margin-top: 15px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px; /* 可选：设置图片之间的间距 */
}
.work-order-info {
  width: 100%;