aiot-app/pages/repair/detail/detail.vue

<template>
  <view>
    <uni-nav-bar
      fixed="true"
      statusBar="true"
      left-icon="back"
      title="报修详情"
      @clickLeft="back"
    >
    </uni-nav-bar>
    <view class="tab-title">
      <view
        v-for="(item, index) in tabList"
        :key="index"
        class="tab-item"
        v-text="item.label"
        :class="index === pickTabIndex ? 'active' : ''"
        @click="changeChartsTab(index)"
      ></view>
    </view>
    <view class="main">
      <!-- 报修信息 -->
      <view class="bg" v-show="pickTabIndex == 0">
        <CellInfo
          label="报修记录编号"
          :value="worksheetInfo.repairsCode"
        ></CellInfo>

        <CellInfo label="报修时间" :value="worksheetInfo.createTime"></CellInfo>
        <CellInfo
          label="来源"
          :value="worksheetInfo.source.desc"
          v-if="worksheetInfo.source"
        ></CellInfo>
        <!-- <CellInfo label="报修单号" :value="worksheetInfo.createUserName"></CellInfo> -->
        <CellInfo label="来源编码" :value="worksheetInfo.sourceCode"></CellInfo>
        <CellInfo
          label="报修部门"
          :value="worksheetInfo.repairsDeptName"
        ></CellInfo>
        <CellInfo
          label="报修人"
          :value="worksheetInfo.repairsPerson"
        ></CellInfo>
        <CellInfo
          label="报修人电话"
          :value="worksheetInfo.repairsDeptPhone"
        ></CellInfo>
        <CellInfo
          label="期望完成时间"
          :value="worksheetInfo.expectedTime"
        ></CellInfo>
        <CellInfo
          label="故障描述"
          :value="worksheetInfo.repairsDescription"
        ></CellInfo>
        <view class="CellInfo">
          <view class="label"> 接收人 </view>
          <view class="wrap">
            <view
              class="jbr"
              v-for="item in worksheetInfo.receiveUser"
              :key="item.receiveUserId"
            >
              {{ item.receiveUserName }}
            </view>
          </view>
        </view>
        <view class="CellInfo">
          <view class="label"> 图片 </view>
          <view class="wrap">
            <image
              @click="clickImg(worksheetInfo.repairsImg, item)"
              class="img"
              :src="apiUrl + item"
              v-for="(item, index) in worksheetInfo.repairsImg"
              :key="index"
            ></image>
          </view>
        </view>
      </view>
      <!-- 设备信息 -->
      <view class="" v-show="pickTabIndex == 1">
        <CellInfo label="设备编码" :value="device.assetCode"></CellInfo>

        <CellInfo label="设备名称" :value="device.assetName"></CellInfo>
        <CellInfo
          label="设备分类"
          :value="device.assetTypeDESC"
        ></CellInfo>
        <!-- <CellInfo label="报修单号" :value="worksheetInfo.createUserName"></CellInfo> -->
        <CellInfo label="固资编码" :value="device.fixAssetCode"></CellInfo>
        <CellInfo label="规格型号" :value="device.specification"></CellInfo>
        <CellInfo label="权属部门" :value="device.ownershipDeptName"></CellInfo>
        <CellInfo label="权属人" :value="device.ownershipUserName"></CellInfo>
        <CellInfo label="权属人电话" :value="device.ownershipUserMobile"></CellInfo>
        <CellInfo label="设备地址" :value="position"></CellInfo>
      </view>
      <!-- 维修信息 -->
      <view class="wxxx" v-show="pickTabIndex == 2">
        <!-- 步骤条 -->
        <maintain_course
          :repairInfoLogList="worksheetInfo.repairInfoLogs"
        ></maintain_course>
      </view>
    </view>
  </view>
</template>

<script>
import CellInfo from '@/components/CellInfo.vue'
import Step from '@/components/Step/Step.vue'
import StepItem from '@/components/Step/StepItem.vue'
import maintain_course from '@/pages/maintain_service/components/maintain_course.vue'
import { get, postJ } from '@/utils/api.js'
export default {
  components: {
    CellInfo,
    Step,
    StepItem,
    maintain_course
  },
  data () {
    return {
      tabList: [
        {
          label: '报修信息',
          value: '1'
        },
        {
          label: '设备信息',
          value: '2'
        },
        {
          label: '维修信息',
          value: '3'
        }
      ],
      pickTabIndex: 0,
      pageId: '',
      worksheetInfo: {},

      // 设备信息
      device: {}
    }
  },
  computed: {
    // 设备地址
    position () {
      let item = Object.keys(this.device)
      if (item.length > 0) {
        // 厂房
        let positionWorkshop = this.device.factoryPlantName || ''
        // 产线
        let positionLine = this.device.lineName || ''
        // 车间
        let positionFarm = this.device.workshopName || ''
        // 工位
        let positionFactory = this.device.positionFactory || ''

        let list = [
          positionWorkshop,
          positionLine,
          positionFarm,
          positionFactory
        ]

        return list.join('-')
      } else {
        return ''
      }
    }
  },
  async onLoad (options) {
    this.pageId = options.id

    await this.getInfo()

    this.getDevice()
  },
  onShow () {},
  methods: {
    getInfo () {
      return get(this.apiUrl + '/repair/info/getDetail/' + this.pageId).then(
        res => {
          if (res.success) {
            res.data.receiveUser = JSON.parse(res.data.receiveUser)
            if (res.data.repairsImg) {
              res.data.repairsImg = res.data.repairsImg.split(',')
            } else {
              res.data.repairsImg = []
            }
            res.data.repairInfoLogs = res.data.repairInfoLogs.reverse()
            res.data.repairInfoLogs = res.data.repairInfoLogs.map(n => {
              if (n.content) {
                n.content = JSON.parse(n.content)
              }
              return n
            })
            this.worksheetInfo = res.data
          }
        }
      )
    },
    changeChartsTab (index) {
      this.pickTabIndex = index
    },
    // 获取设备信息
    getDevice () {
      let par = {
        code: this.worksheetInfo.equiCode
      }
      get(this.apiUrl + '/asset/detail', par).then(res => {
        if (res.success) {
          this.device = res.data
        }
      })
    },
    // 查看图片
    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>
.wxxx {
  padding-bottom: 20rpx;
}
.tab-title {
  position: fixed;
  width: 100%;
  display: flex;
  justify-content: space-between;
  height: 82rpx;
  line-height: 82rpx;
  background-color: #ffffff;
  border-bottom: 1px solid #f2f2f2;
  z-index: 99;
  box-sizing: border-box;

  .tab-item {
    width: 50%;
    text-align: center;
    font-size: 32rpx;
    color: $uni-text-color-grey;
  }

  .tab-item.active {
    color: $j-primary-border-green;
    border-bottom: 1px solid $j-primary-border-green;
  }
}

.fixed {
  position: fixed;
  width: 100%;
  left: 0;
}

.add {
  bottom: 0;
}

.main {
  border-top: 10px solid #f0f0f0;
  margin-top: 42px;
}

.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;
    }
  }
  .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;
    }
  }
}
.CellInfo {
  padding: 10px 0;
  display: flex;
  border-bottom: 1px solid #d8d8d8;
  .label {
    color: #999;
    text-align: right;
    max-width: 104px;
    font-size: 32rpx;
    padding: 0 15px;
    flex: 1;
  }

  .wrap {
    flex: 1;
    display: flex;
    flex-wrap: wrap;

    .img {
      width: 80px;
      height: 60px;
      margin: 5px;
    }
    .jbr {
      background-color: rgba(242, 242, 242, 1);
      padding: 10rpx;
      font-size: 28rpx;
      margin-left: 10rpx;
      margin-bottom: 10rpx;
    }
  }
}
</style>