aiot-app/pages/maintain_service/components/maintain_course.vue

<template>
  <view class="">
    <!-- 步骤条 -->
    <Step>
      <StepItem
        v-for="(item, index) in repairInfoLogList"
        :key="index"
        :active="index == 0"
        :hideContent="Boolean(item.content)"
      >
        <template v-slot:header>
          <view class="step-title">
            <view class="s1">
              {{
                item.type &&
                item.type.desc + (item.createNum ? `第${item.createNum}次` : '')
              }}
            </view>
            <view class="s2">
              {{ item.createTime }}
            </view>
          </view>
        </template>
        <template v-slot:content v-if="item.content">
          <!-- 转派 -->
          <view class="list-xs" v-if="item.type.desc == '转派'">
            <view class="list-xs-item">
              <view class="label"> 转派人 </view>
              <view class="value">
                {{ item.content.reassignName }}
              </view>
            </view>
            <view class="list-xs-item">
              <view class="label"> 接收人 </view>
              <view class="value">
                {{ item.content.executorName }}
              </view>
            </view>
            <view class="list-xs-item">
              <view class="label"> 转派原因 </view>
              <view class="value">
                {{ item.content.reassignExplain }}
              </view>
            </view>
          </view>
          <!-- 默认 -->
          <view class="list-xs" v-else>
            <template v-for="(itm, index1) in Object.entries(item.content)">
              <view
                class="img-wrap"
                v-if="itm[0] == 'workOrderImgList' && itm[1]"
              >
                <image
                  class="img"
                  @click="clickImg(itm[1].split(','), el)"
                  :src="apiUrl + el"
                  v-for="(el, index2) in itm[1].split(',')"
                  :key="index2"
                ></image>
              </view>
              <view class="list-xs-item" v-else-if="itm[0] == 'workOrderId'">
                <view class="label"> </view>
                <view class="value bj" @click="handlbjsymx('备件使用明细')">
                  {{ dictProcess[itm[0]] }}
                </view>
              </view>
              <view
                class="list-xs-item"
                v-else-if="
                  [
                    'examineResult',
                    'acceptanceResult',
                    'approvalResult'
                  ].includes(itm[0])
                "
              >
                <view class="label">
                  {{ dictProcess[itm[0]] }}
                </view>
                <view class="value">
                  {{ itm[1] ? '通过' : '未通过' }}
                </view>
              </view>
              <view class="list-xs-item" v-else-if="itm[0] == 'sparePartsCode'">
                <view class="label">
                  {{ dictProcess[itm[0]] }}
                </view>
                <view class="value">
                  {{ itm[1] }}
                  <span
                    class="list-xs-item-btn"
                    @click="handlbjsymx('备件明细', itm[1])"
                    >备件明细</span
                  >
                </view>
              </view>
              <view
                class="list-xs-item"
                v-else-if="
                  [
                    'approvalUserName',
                    'applyUserName',
                    'stockOutCode',
                    'executorName',
                    'repairReportExplain',
                    'userName',
                    'acceptanceInstructions',
                    'createUserName',
                    'planCode',
                    'planName',
                    'examinePlanUserName',
                    'examineExplain',
                    'workOrderCode',
                    'maintenanceContent',
                    'plannedTime',
                    'workOrderExecutorName'
                  ].includes(itm[0])
                "
              >
                <view class="label">
                  {{ dictProcess[itm[0]] }}
                </view>
                <view class="value">
                  {{ itm[1] }}
                </view>
              </view>
            </template>
          </view>
        </template>
      </StepItem>
    </Step>
    <PopSparePart
      ref="PopSparePart"
      :workOrderCode="workOrderCode"
      :sparePartsJson="sparePartsJson"
      :noRequest="true"
    ></PopSparePart>
  </view>
</template>

<script>
import Step from '@/components/Step/Step.vue'
import StepItem from '@/components/Step/StepItem.vue'
import PopSparePart from '../components/PopSparePart.vue'
export default {
  props: {
    repairInfoLogList: {
      type: Array,
      default () {
        return []
      }
    },
    planEquiList: {
      type: Array,
      default () {
        return []
      }
    },
    workOrderCode: {
      type: String,
      default () {
        return ''
      }
    }
  },
  components: {
    Step,
    StepItem,
    PopSparePart
  },
  computed: {
    // 报工备品备件
    sparePartsJson () {
      if (this.planEquiList && this.planEquiList.length > 0) {
        return JSON.parse(this.planEquiList[0].sparePartsJson || '[]')
      } else {
        return []
      }
    }
  },
  data () {
    return {
      // 维修历程映射
      dictProcess: {
        executorName: '执行人',
        repairReportExplain: '处理说明',
        workOrderId: '备件使用明细',
        userName: '验收人',
        acceptanceResult: '验收结果',
        acceptanceInstructions: '验收说明',
        createUserName: '创建人',
        planCode: '计划单号',
        planName: '计划名称',
        examinePlanUserName: '审核人',
        examineResult: '审核结果',
        examineExplain: '审核说明',
        workOrderCode: '工单编号',
        maintenanceContent: '维修方案',
        plannedTime: '执行完成时间',
        workOrderExecutorName: '执行人',
        reassignName: '转派人',
        reassignExplain: '转派原因',
        stockOutCode: '出库单号',
        approvalUserName: '审核人',
        approvalResult: '审核结果',
        applyUserName: '申请人',
        sparePartsCode: '申领单号'
      }
    }
  },
  methods: {
    // 备件使用明细
    handlbjsymx (value, code) {
      // if(value==='使用'){

      // }
      this.$refs.PopSparePart.open(value, code)
    },
    // 查看图片
    clickImg (urls, indexUrl) {
      urls = urls.map(n => {
        return this.apiUrl + n
      })
      wx.previewImage({
        urls: urls, //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
        current: this.apiUrl + indexUrl, // 当前显示图片的http链接，默认是第一个
        success: function (res) {},
        fail: function (res) {},
        complete: function (res) {}
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.step-title {
  display: flex;
  justify-content: space-between;

  .s1 {
  }
}

.list-xs {
  .list-xs-item {
    color: #7f7f7f;
    display: flex;

    .label {
      font-size: 28rpx;
      width: 120rpx;
      text-align: right;
      margin-right: 20rpx;
    }

    .value {
      font-size: 28rpx;

      &.bj {
        padding: 10rpx 0;
        color: #4f7f00;
      }
    }
    & + .list-xs-item {
      margin-top: 10rpx;
      .list-xs-item-btn {
        color: #47975a;
        margin-left: 30rpx;
      }
    }
  }

  .img-wrap {
    padding-left: 140rpx;
    margin-top: 20rpx;
    display: flex;
    flex-wrap: wrap;
    margin-left: -20rpx;

    .img {
      width: 160rpx;
      height: 120rpx;
      margin-left: 20rpx;
      margin-bottom: 20rpx;
    }
  }
}
</style>