xiamen-sb-uniapp/pages/check-detail/check-detail.vue

<template>
  <view class="container py2">
    <view class="mx3 p3 bg-color-white" style="border-radius: 16rpx">
      <!-- <view class="f-size-32 f-weight-6 py2 mb-2 title">任务信息</view> -->
      <equipment-line title="任务名称" :content="infoData.name" />
      <equipment-line title="计划名称" :content="infoData.planName" />
      <equipment-line title="设备" :content="infoData.sbName" />
      <equipment-line title="部件" :content="infoData.partName" />
      <equipment-line title="部件编号" :content="infoData.partNo" />
      <equipment-line title="任务开始时间" :content="infoData.startTime" />
      <equipment-line title="任务结束时间" :content="infoData.endTime" />
      <equipment-line
        title="实际开始时间"
        :content="infoData.actualStartTime"
      />
      <equipment-line title="实际结束时间" :content="infoData.actualEndTime" />
      <equipment-line
        title="设备状态"
        :content="sbStatusMap[infoData.sbStatus]"
      />
      <equipment-line title="任务状态" :content="statusMap[infoData.status]" />
      <equipment-line title="要求" :content="infoData.requirement" />
      <equipment-line title="检查结果" :content="infoData.feedback" />
      <equipment-line title="备注" :content="infoData.remark" />
        <view class="d-flex py3 border-bottom">
            <view class="f-size-26 text-color-9 w200">图片</view>
            <view class="f-size-26 text-color-3 d-flex">
                <block v-for="(item,index) in imagesList" :key='index'>
                    <u-image width="100" class="mr-2" :src="item" @click="handlePre(index)"  mode="widthFix"><u-loading slot="loading"></u-loading></u-image>
                </block>
            </view>
        </view>
    </view>
    <view class="p-fixed d-flex j-around a-center footer">
      <view class="main-color-bg text-color-white common" @tap="handleUpdate"
        >执行</view
      >
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      infoData: {},
      detailId: "",
      statusMap: null,
      sbStatusMap: null,
      imagesList: []
    };
  },
  onLoad(options) {
    this.detailId = options.detailId;
    this.statusMap = this.$DictCache.getLabelByValueMapByType(
      this.$DictCache.TYPE.CHECK_JOB_STATUS
    );
    this.sbStatusMap = this.$DictCache.getLabelByValueMapByType(
      this.$DictCache.TYPE.SB_INFO_STATUS
    );
  },
  onShow() {
    this.initData();
  },

  methods: {
    handleUpdate() {
      this.$Http.execute(this.infoData).then((res) => {
          uni.navigateTo({
              url: "/pages/check-add/check-add?detailId=" + this.detailId,
          });
      });
    },
    handlePre(index) {
      uni.previewImage({
          urls: this.imagesList,
          current:this.imagesList[index],
          success() {

          }
      });
    },
    initData() {
      this.$Http
        .fetchCheckJob({
          id: this.detailId,
        })
        .then((res) => {
          this.infoData = res.data;
          if(res.data.fileList != null && res.data.fileList.length >0){
            this.imagesList = res.data.fileList.map(item => {
                return this.$BaseTool.UserUtil.getFileUrl(item.url);
            })
          }
        });
    },
  },
};
</script>

<style lang="less">
page {
  background-color: #f4f4f4;
}

.container {
  padding-bottom: 100rpx;

  .footer {
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #fff;
    z-index: 10000;
  }

  .title {
    border-bottom: 1rpx solid #f4f4f4;
  }

  .img {
    width: 100rpx;
    height: 100rpx;
  }

  .p-fixed {
    border-top: 1rpx solid #f4f4f4;
    height: 100rpx;

    .common {
      padding: 15rpx 200rpx;
      border-radius: 30rpx;
      background-color: #0082ff;
      color: #fff;
    }
  }
}
</style>