工单图片在详情中展示

xiangpei

2024-09-17 1b40a298a0bc609f7864bb3d08822d20ddb2e6e4

工单图片在详情中展示

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

@@ -147,7 +147,18 @@
        <el-empty v-else description="未查到审核信息"></el-empty>
      </el-tab-pane>
    </el-tabs>

    <div class="work-order-img">
      <div class="img-info" v-for="(img, index) in workOrderInfo.imgList" :key="index">
        <div>
          <el-image
            style="width: 160px; height: 100px"
            :src="getImgUrl(img.imgUrl)"
            :preview-src-list="getImgUrl(img.imgUrl)">
          </el-image>
        </div>
        <div>{{img.createTime}}</div>
      </div>
    </div>
  </div>
</template>

@@ -189,6 +200,9 @@
    this.getWorkOrder()
  },
  methods: {
    getImgUrl(path) {
      return this.$img + path;
    },
    getWorkOrder() {
      this.loading1 = true
      getWorkOrderInfo(this.workOrderInfo.workOrderNo).then(res => {
@@ -248,6 +262,15 @@
</script>

<style scoped>
.img-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.work-order-img {
  margin-top: 15px;
}
.work-order-info {
  width: 100%;
  display: flex;