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

<template>
  <view>
    <u-toast ref="uToast" />
    <view class="d-flex px3 py2">
      <view class="top d-flex a-center bg-color-white flex1 one-ellipsis">
        <view class="img" style="cursor:pointer">
          <image :src="imgSrc
              ? imgSrc
              : $BaseTool.UserUtil.getFileUrl(sbInfo.qrCode)
            " mode="widthFix"></image>
        </view>
        <view class="pl-3">
          <view class="f-size-36 text-color-3 one-ellipsis">{{
            sbInfo.name
          }}</view>
          <view class="d-flex f-size-28 f-weight-6 f-wrap" style="margin: 20rpx 0">
          </view>
          <view class="d-flex">
            <text class="f-size-26 mr-3 state-r main-color-bg text-color-white">{{ statusMap[infoData.status] }}</text>
            <!-- <text class="f-size-26 state-g">报修</text> -->
          </view>
        </view>
      </view>
    </view>
    <view class="divider"></view>
    <!-- 基本信息 -->
    <view class="mt-3 px3">
      <view class="f-size-30 f-weight-bold py2 border-bottom">报修信息</view>
      <view class="mx3 my2 p3 bg-color-white" style="border-radius: 16rpx; border: 1px solid #eee">
        <equipment-line title="设备编号" :content="sbInfo.no" />
        <equipment-line title="设备型号" :content="sbInfo.model" />
        <equipment-line title="报修单编号" :content="infoData.no" />
        <equipment-line title="使用位置" :content="sbInfo.cph" />
        <equipment-line title="报修人" :content="infoData.actualUser" />
        <equipment-line title="故障描述" :content="infoData.content" />
        <equipment-line title="报修时间" :content="infoData.applyTime" />
        <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>

    <view class="divider"></view>
    <view class="mt-3 px3" v-show="infoData.status >= 2">
      <view class="f-size-30 f-weight-bold py2 border-bottom">维修信息</view>
      <view class="mx3 my2 p3 bg-color-white" style="border-radius: 16rpx; border: 1px solid #eee">
        <equipment-line title="故障类别" :content="infoData.repairErrorTypeName" />
        <equipment-line title="维修开始" :content="infoData.repairStartTime" />
        <equipment-line title="维修结束" :content="infoData.repairEndTime" />
        <equipment-line title="维修耗时" :content="infoData.repairMinutes" />
        <equipment-line title="维修人员1" :content="infoData.repairUserName" />
        <equipment-line v-if="infoData.secondRepairUser" title="维修人员2"
          :content="getUserName(infoData.secondRepairUser)" />
        <equipment-line v-if="infoData.threeRepairUser" title="维修人员3"
          :content="getUserName(infoData.threeRepairUser)" />
        <equipment-line v-if="infoData.fourRepairUser" title="维修人员4" :content="getUserName(infoData.fourRepairUser)" />
        <equipment-line title="维修描述" :content="infoData.repairContent" />
        <equipment-line title="备注" :content="infoData.repairRemark" />
        <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 repairImagesList" :key="index">
              <u-image width="100" class="mr-2" :src="item" @click="handlePreRepair(index)" mode="widthFix"><u-loading
                  slot="loading"></u-loading></u-image>
            </block>
          </view>
        </view>
      </view>
    </view>
    <view class="divider"></view>
    <view class="mt-3 px3">
      <view v-for="(item, index) in dispatchList" :key="index" class="mx3 my2 p3 bg-color-white"
        style="border-radius: 16rpx">
        <view>
          <equipment-line title="转派人" :content="item.username" />
          <equipment-line title="转派时间" :content="item.time" />
          <equipment-line title="转派备注" :content="item.repairDispatchRemark" />
        </view>
      </view>
    </view>

    <view class="divider"></view>
    <view class="px3">
      <u-grid :col="3" :border="false">
        <u-grid-item v-show="infoData.status === 1" @tap="handleReceive()">
          <view class="iconfont icon-baoxiu" style="color: #0f6fb9"></view>
          <view class="grid-text">接收</view>
        </u-grid-item>
        <u-grid-item v-show="infoData.status === 1" @tap="handleReject()">
          <view class="iconfont icon-baoxiu" style="color: #0f6fb9"></view>
          <view class="grid-text">拒单</view>
        </u-grid-item>
        <u-grid-item v-show="!infoData.fourRepairUser && infoData.repairUserId" @tap="handleTransfer()">
          <view class="iconfont icon-baoxiu" style="color: #0f6fb9"></view>
          <view class="grid-text">转派</view>
        </u-grid-item>
        <u-grid-item v-show="infoData.status === 2" @tap="handleFinish()">
          <view class="iconfont icon-start main-color-text"></view>
          <view class="grid-text">完成</view>
        </u-grid-item>
        <u-grid-item v-show="infoData.status === 3 || infoData.status === 5" @tap="handleExamine()">
          <view class="iconfont icon-start main-color-text"></view>
          <view class="grid-text">提交审核</view>
        </u-grid-item>
        <!--                <u-grid-item v-if="infoData.status != 7" @tap="handleStop()">
                    <view class="iconfont icon-stop1 main-color-text"></view>
                    <view class="grid-text">派工</view>
                </u-grid-item>-->
        <!--                <u-grid-item v-if="infoData.status != 2" @tap="handleStart()">
                    <view class="iconfont icon-start main-color-text"></view>
                    <view class="grid-text">更换备件</view>
                </u-grid-item>
                <u-grid-item v-if="infoData.status != 7" @tap="handleStop()">
                    <view class="iconfont icon-stop1 main-color-text"></view>
                    <view class="grid-text">原因分析</view>
                </u-grid-item>-->
      </u-grid>
    </view>

    <view class="divider"></view>
    <!--        <view class="px3">
            <my-card
                title="备件更换历史"
                @handleLubrication="handleModel"
            ></my-card>
            <my-card
                title="原因分析记录"
                @handleLubrication="handleUse"
            ></my-card>
        </view>
        <view class="divider"></view>-->
  </view>
</template>

<script>
export default {
  data() {
    return {
      detailId: '',
      infoData: {},
      sbInfo: {},
      statusMap: {},
      imgSrc: '',
      dispatchList: [],
      id: '',
      imagesList: [],
      repairImagesList: [],
      zjList: []
    }
  },
  onLoad(options) {
    this.detailId = options.detailId

    this.statusMap = this.$DictCache.getLabelByValueMapByType(this.$DictCache.TYPE.REPAIR_APPLICATION_FORM_STATUS)
    this.$Http
      .queryUserDept({
        deptCode: this.$DictCache.VALUE.SYS_DEPT_CODE.SYS_DEPT_CODE_XIAN_CHANG_WEI_XIU_ZU,
        userStatus: 1
      })
      .then((res) => {
        console.log(res.data);
        const temp = []
        res.data.forEach((item, index) => {
          temp.push({
            label: item.realName,
            value: item.userId
          })
        })
        this.zjList.push(...temp)
      });
    this.$Http
      .queryUserDept({
        deptCode: this.$DictCache.VALUE.SYS_DEPT_CODE.SYS_DEPT_CODE_CHANG_NEI_WEI_XIU_ZU,
        userStatus: 1
      })
      .then((res) => {
        console.log(res.data);
        const temp = []
        res.data.forEach((item, index) => {
          temp.push({
            label: item.realName,
            value: item.userId
          })
        })
        this.zjList.push(...temp)

      });
  },
  onShow() {
    this.getInfo()
  },
  methods: {
    getInfo() {
      this.$Http
        .fetchRepairApplicationForm({
          id: this.detailId
        })
        .then(res => {
          console.log(res)
          this.infoData = res.data
          this.imagesList = res.data.applicationFileList.map(item => {
            return this.$BaseTool.UserUtil.getFileUrl(item.url)
          })
          this.repairImagesList = res.data.repairFileList.map(item => {
            return this.$BaseTool.UserUtil.getFileUrl(item.url)
          })
          this.dispatchList = JSON.parse(res.data.repairDispatchList)
          this.$Http
            .fetchSbInfo({
              id: res.data.sbId
            })
            .then(res => {
              this.sbInfo = res.data
              if (this.infoData.sbFileList != null) {
                this.imgSrc = this.$BaseTool.UserUtil.getFileUrl(this.infoData.sbFileList[0].url)
              } else {
                this.imgSrc = this.$BaseTool.UserUtil.getFileUrl(this.infoData.qrCode)
              }
              uni.setNavigationBarTitle({
                title: this.infoData.name
              })
            })
        })
    },
    getUserName(userId) {
      var name = ''
      this.zjList.forEach(item => {
        if (item.value == userId) {
          name = item.label
        }
      })
      return name
    },
    handlePre(index) {
      uni.previewImage({
        urls: this.imagesList,
        current: this.imagesList[index],
        success() { }
      })
    },
    handlePreRepair(index) {
      uni.previewImage({
        urls: this.repairImagesList,
        current: this.repairImagesList[index],
        success() { }
      })
    },
    // 接收
    handleReceive() {
      var that = this
      uni.showModal({
        title: '提示',
        content: '确认接收该维修单？',
        success: function (res) {
          if (res.confirm) {
            that.$Http
              .repairFormDeal({
                id: that.detailId
              })
              .then(res => {
                that.infoData.status = this.$DictCache.VALUE.REPAIR_APPLICATION_FORM_STATUS.PROCESSING
                that.$refs.uToast.show({
                  title: '已接收，请及时完成维修',
                  type: 'default',
                  icon: false
                })
              })
          }
        }
      })
    },
    handleReject() {
      uni.navigateTo({
        url: '/pages/repair-detail/reject?id=' + this.detailId
      })
    },
    // 提交审批验收
    handleExamine() {
      var that = this
      uni.showModal({
        title: '提示',
        content: '确认提交审核？',
        success: function (res) {
          if (res.confirm) {
            that.$Http
              .examine({
                id: that.detailId
              })
              .then(res => {
                that.infoData.status = this.$DictCache.VALUE.REPAIR_APPLICATION_FORM_STATUS.WAIT_SUBMIT
                that.$refs.uToast.show({
                  title: '已提交，请等待审核',
                  type: 'default',
                  icon: false
                })
              })
          }
        }
      })
    },
    // 完成维修任务
    handleFinish() {
      uni.navigateTo({
        url: '/pages/service-add/service-add?id=' + this.detailId
      })
    },
    handleTransfer() {
      uni.navigateTo({
        url: '/pages/repair-detail/transfer?id=' + this.detailId
      })
    },
    handleStart() {
      this.infoData.status = this.$DictCache.VALUE.SB_INFO_STATUS.IN_USE
      var that = this
      this.$Http.updateSbInfo(this.infoData).then(res => {
        that.$refs.uToast.show({
          title: '已启用',
          type: 'default',
          icon: false
        })
      })
    },
    handleStop() {
      this.infoData.status = this.$DictCache.VALUE.SB_INFO_STATUS.IN_STOP
      var that = this
      this.$Http.updateSbInfo(this.infoData).then(res => {
        that.$refs.uToast.show({
          title: '已停用',
          type: 'default',
          icon: false
        })
      })
    }
  }
}
</script>

<style lang="less">
.iconfont {
  font-size: 50rpx;
}

.col2 view:first-child {
  // width: 130rpx;
}

.col2 view:last-child {
  flex: 1;
}

.top {
  .img {
    width: 168rpx;
    height: 168rpx;
    border-radius: 50%;

    image {
      width: 168rpx;
      height: 168rpx;
      border-radius: 50%;
      background-color: #eee;
    }
  }
}

.d-flex.mb-2 {
  align-items: center;
}

.state-r {
  padding: 8rpx 20rpx;
  border-radius: 30rpx;
}

.state-g {
  padding: 8rpx 20rpx;
  border-radius: 30rpx;
  background-color: #e7e8f2;
  color: #949dad;
}
</style>