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

<template>
  <view>
    <uni-nav-bar
      fixed="true"
      statusBar="true"
      left-icon="back"
      :title="isApproval ? '设备维修验收详情' : workOrderType.code==10?'计划维修工单详情':'维修工单详情'"
      @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="kd-baseInfo" v-if="pickTabIndex == 0">
        <view class="kd-cell">
          <text class="kd-label">工单编号</text>
          {{ worksheetInfo.workOrderCode }}
        </view>
        <view class="kd-cell">
          <text class="kd-label">执行部门</text>
          {{ worksheetInfo.executorDeptName }}
        </view>
        <view class="kd-cell">
          <text class="kd-label">执行人</text>
          {{ worksheetInfo.executeUserName }}
        </view>
        <view class="kd-cell">
          <text class="kd-label">计划单号</text>
          {{ planRepair.planCode }}
        </view>
        <view class="kd-cell">
          <text class="kd-label">计划名称</text>
          {{ planRepair.planName }}
        </view>
        <view class="kd-cell"   v-if="workOrderType.code != 10">
          <text class="kd-label">计划完成时间</text>
          {{ worksheetInfo.planFinishTime }}
        </view>
		
		<view class="kd-cell"    v-if="workOrderType.code == 10">
		  <text class="kd-label">计划开始时间</text>
		  {{ planRepair.planStartTime }}
		</view>
		
		<view class="kd-cell"    v-if="workOrderType.code == 10">
		  <text class="kd-label">计划完成时间</text>
		  {{ planRepair.planEndTime }}
		</view>
		
		<view class="kd-cell"   >
		  <text class="kd-label">开工时间：</text>
		  {{ worksheetInfo.acceptTime }}
		</view>
		
		<view class="kd-cell"   >
		  <text class="kd-label">完工时间：</text>
		  {{ worksheetInfo.finishTime }}
		</view>
		
		<view class="kd-cell"   >
		  <text class="kd-label">实际工时：</text>
		  {{ timeInterval(worksheetInfo.acceptTime, worksheetInfo.finishTime) }}
		</view>
		
		
		
        
        <view
          class="zxpg-wrap"
          v-if="worksheetInfo.status && !isApproval && isMygd"
        >
		 
          <template v-if="worksheetInfo.status.code === 8">
            <!-- <view class="zx-btn btns" @click="handleExecute"> 开始执行 </view> -->
			 <view class="zx-btn btns" @click="handleNotice"> 开始执行 </view>
          </template>
          <template v-if="worksheetInfo.status.code === 1">
            <view class="zx-btn btns" @click="handlbg"> 报工 </view>
            <!-- <view class="zp-btn btns" @click="handlbpbj" v-if="!worksheetInfo.applyOrder">
							申请备品备件
						</view>
						<view class="zp-btn btns" v-if="worksheetInfo.applyOrder" @click="handCkbpbj">
							查看备品备件
						</view> -->
          </template>
          <template v-if="worksheetInfo.status.code === 5">
            <view class="zx-btn btns disabled"> 已报工 </view>
          </template>
          <div class="apply-box">
            <view
              class="zp-btn btns"
              @click="handlbpbj"
              v-if="
                worksheetInfo.status.code != 5 &&
                worksheetInfo.status.code != 3 &&
                worksheetInfo.status.code != 7
              "
            >
              申请备品备件
            </view>
            <view
              class="zp-btn btns"
              @click="handlZp"
              v-if="worksheetInfo.status.code === 8"
            >
              转派
            </view>
          </div>
        </view>
        <Assign ref="Assign" @success="handleAssign"></Assign>
      </view>
      <!-- 报修信息 -->
      <view class="bg" v-if="pickTabIndex == 1 ">
        <view class="kd-baseInfo" v-if=" workOrderType.code != 10 ">
          <view class="kd-cell">
            <text class="kd-label">报修记录编号</text>
            {{
              worksheetInfo.repairInfo && worksheetInfo.repairInfo.repairsCode
            }}
          </view>
          <view class="kd-cell">
            <text class="kd-label">报修时间</text>
            {{
              worksheetInfo.repairInfo && worksheetInfo.repairInfo.createTime
            }}
          </view>
          <view class="kd-cell" >
            <text class="kd-label">来源编码</text>
            {{
              worksheetInfo.repairInfo && worksheetInfo.repairInfo.sourceCode
            }}
          </view>
		  
		  <view class="kd-cell">
		    <text class="kd-label">固资编码</text>
		    {{
		     device.fixAssetCode
		    }}
		  </view>
		  
		
		  
		  
          <view class="kd-cell" >
            <text class="kd-label">来源</text>
            {{
              worksheetInfo.repairInfo && worksheetInfo.repairInfo.source.desc
            }}
          </view>
          <view class="kd-cell" >
            <text class="kd-label">报修部门</text>
            {{
              worksheetInfo.repairInfo &&
              worksheetInfo.repairInfo.repairsDeptName
            }}
          </view>
          <view class="kd-cell">
            <text class="kd-label">报修人</text>
            {{
              worksheetInfo.repairInfo && worksheetInfo.repairInfo.repairsPerson
            }}
          </view>
          <view class="kd-cell" >
            <text class="kd-label">报修人电话</text>
            {{
              worksheetInfo.repairInfo &&
              worksheetInfo.repairInfo.repairsDeptPhone
            }}
          </view>
          <view class="kd-cell">
            <text class="kd-label">期望完成时间</text>
            {{
              worksheetInfo.repairInfo && worksheetInfo.repairInfo.expectedTime
            }}
          </view>
		  <view class="kd-cell">
		    <text class="kd-label2">委托单位交底负责人</text>
		    {{
		      worksheetInfo.repairInfo && worksheetInfo.repairInfo.repairsPerson
		    }}
		  </view>
		  
		  <view class="kd-cell">
		    <text class="kd-label2">交底时间</text>
		    {{
		     worksheetInfo.repairInfo && worksheetInfo.repairInfo.tellTime
		    }}
		  </view>
		  
		  <view class="kd-cell">
		    <text class="kd-label2">接受交底负责人</text>
		    {{
				 worksheetInfo.repairInfo && worksheetInfo.tellName
		    }}
		  </view>
		  
		  
          <view class="kd-cell"  >
            <text class="kd-label">故障描述</text>
            {{
              worksheetInfo.repairInfo &&
              worksheetInfo.repairInfo.repairsDescription
            }}
          </view>
		  
	
		  
          <view class="img-wrap"  v-if="workOrderType.code != 10 &&  worksheetInfo.repairInfo.repairsImg">
            <image
              class="img"
              @click="
                clickImg(worksheetInfo.repairInfo.repairsImg.split(','), item_s)
              "
              :src="apiUrl + item_s"
              v-for="(
                item_s, index_s
              ) in worksheetInfo.repairInfo.repairsImg.split(',')"
              :key="index_s"
            >
            </image>
          </view>
        </view>
    
	   <view class="kd-baseInfo"  v-if=" workOrderType.code == 10 ">
		   <view class="kd-cell">
		     <text class="kd-label">报修时间</text>
		     {{
		       planRepair.createTime
		     }}
		   </view>
		   
		   <view class="kd-cell">
		     <text class="kd-label">维修部门</text>
		     {{
		       planRepair.executorDeptName
		     }}
		   </view>
		   
		   <view class="kd-cell">
		     <text class="kd-label">维修人员</text>
		     {{
		       planRepair.executorName 
		     }}
		   </view>
		   
	   </view>
	
	  </view>
      <!-- 设备信息 -->
      <view class="kd-baseInfo" v-if="pickTabIndex == 2">
        <view class="kd-cell">
          <text class="kd-label">设备编号</text>
          {{ workOrderType.code  == 10 ? device.equiCode : device.assetCode }}
        </view>
        <view class="kd-cell">
          <text class="kd-label">设备名称</text>
          {{workOrderType.code  == 10 ? device.equiName : device.assetName }}
        </view>
        <view class="kd-cell">
          <text class="kd-label">设备分类</text>
          {{ workOrderType.code  == 10 ?  planRepair.equiTypeName :  device.information && device.information.classificationUrl }}
        </view>
        <view class="kd-cell">
          <text class="kd-label">固资编码</text>
          {{    device.fixedAssetsCode }}
        </view>
        <view class="kd-cell">
          <text class="kd-label">规格型号</text>
          {{   workOrderType.code  == 10 ?  device.equiModel : device.information && device.information.specification }}
        </view>
        <view class="kd-cell" v-if='workOrderType.code  != 10'>
          <text class="kd-label">权属部门</text>
          {{ device.ownershipDeptName }}
        </view>
        <view class="kd-cell" v-if='workOrderType.code  != 10'>
          <text class="kd-label">权属人</text>
          {{ device.ownershipUserName }}
        </view>
        <view class="kd-cell" v-if='workOrderType.code  != 10'>
          <text class="kd-label">权属部门电话</text>
          {{ device.ownershipUserMobile }}
        </view>
        <view class="kd-cell" v-if='workOrderType.code  != 10'>
          <text class="kd-label">设备位置</text>
          {{ device.factoryName }}—{{ device.workshopName }}—{{
            device.lineName
          }}
        </view>
		
		<view class="kd-cell" v-if='workOrderType.code  == 10'>
		  <text class="kd-label">设备位置</text>
		  {{ device.equiLocation }}
		
		</view>
		
		
		
      </view>

      <!-- 维修历程 -->
      <view class="" v-if="pickTabIndex == 3">
        <!-- 步骤条 -->
        <maintain_course
          :repairInfoLogList="worksheetInfo.repairInfoLogList"
          :planEquiList="worksheetInfo.planEquiList"
          :workOrderCode="workOrderCode"
        ></maintain_course>
      </view>
      <!-- 维修记录 -->
      <view class="wx-main" v-if="pickTabIndex == 4">
        <view class="wx-wrap">
          <view
            class="item"
            v-for="(item, index) in worksheetInfo.workOrderRecordRespList"
            :key="index"
          >
            <view class="bh-wrap">
              <view class="s1">
                <view class="title-md"> 工单编号： </view>
                <view class="b1">
                  {{ item.workOrderCode }}
                </view>
              </view>
              <view class="s2"> {{ item.createTime }} </view>
            </view>
            <fold :hide="false">
              <view class="title-wrap">
                <view class="s1 title-md"> 执行人 </view>
                <view class="s2">
                  {{ item.executeUserName }}
                </view>
              </view>
              <view class="bg-wrap-item">
                <view class="label title-md"> 故障描述 </view>
                <view class="value-wrap">
                  <view class="text">
                    {{ item.repairsDescription }}
                  </view>
                  <view class="img-wrap" v-if="item.repairsImg">
                    <image
                      class="img"
                      @click="clickImg(item.repairsImg.split(','), item_s)"
                      :src="apiUrl + item_s"
                      v-for="(item_s, index_s) in item.repairsImg.split(',')"
                      :key="index_s"
                    >
                    </image>
                  </view>
                </view>
              </view>
              <view class="bg-wrap-item">
                <view class="label title-md"> 处理说明 </view>
                <view class="value-wrap">
                  <view class="text">
                    {{ item.repairReportExplain }}
                  </view>
                  <view class="img-wrap" v-if="item.workOrderImg">
                    <image
                      class="img"
                      @click="clickImg(item.workOrderImg.split(','), item_s)"
                      :src="apiUrl + item_s"
                      v-for="(item_s, index_s) in item.workOrderImg.split(',')"
                      :key="index_s"
                    >
                    </image>
                  </view>
                </view>
              </view>
              <view class="bjsymx" @click="handlbjsymx(item.workOrderCode)">
                备件使用明细
              </view>
            </fold>
          </view>
        </view>
      </view>
    </view>
    <PopSparePart
      ref="PopSparePart"
      :workOrderCode="sparePartWorkOrderCode"
    ></PopSparePart>
    <Approval
      v-if="
        isApproval && worksheetInfo.status && worksheetInfo.status.code == 5
      "
      :devOpsType="1"
      :planType="3"
      :myHandleId="myHandleId"
      :id="worksheetInfo.workOrderId"
    />
	  
	<Notice v-if="noticeShow" :id='worksheetInfo.id' :repairInfo='worksheetInfo.repairInfo' @agree="agree"></Notice>
  </view>
</template>

<script>
import Step from '@/components/Step/Step.vue'
import StepItem from '@/components/Step/StepItem.vue'
import Assign from '@/components/Assign.vue'
import fold from '../components/fold.vue'
import PopSparePart from '../components/PopSparePart.vue'
import Approval from '@/components/Approval.vue'
import maintain_course from '../components/maintain_course.vue'
import Notice from '../components/notice.vue'
import { get, postJ, post } from '@/utils/api.js'
export default {
  components: {
    Step,
    StepItem,
    Assign,
    fold,
    PopSparePart,
    Approval,
    maintain_course,
	Notice
  },
  computed: {
    // 是否为自己的工单
    isMygd () {
      let userInfo = uni.getStorageSync('userInfo')
      // 当前登录人id
      let userId = userInfo.id
      // 执行人id
      let executeUserId = this.worksheetInfo.executeUserId
      if (executeUserId == userId) {
        return true
      } else {
        return false
      }
    }
  },
  data () {
    return {
      type: 1,
      sparePartWorkOrderCode: '',
      tabList: [
        {
          label: '工单信息',
          value: '0'
        },
        {
          label: '报修信息',
          value: '1'
        },
        {
          label: '设备信息',
          value: '2'
        },
        {
          label: '维修历程',
          value: '3'
        },
        {
          label: '维修记录',
          value: '4'
        }
      ],
      pickTabIndex: 0,
      workOrderCode: '',
      worksheetInfo: {},
      dict: {
        // 报修来源 1:手动创建;2:工单反工;3:告警通知;4:保养工单;5:巡点检工单)
        source: {
          1: '手动创建',
          2: '工单反工',
          3: '告警通知',
          4: '保养工单',
          5: '巡点检工单'
        }
      },
      // 设备信息
      device: {},
      isApproval: false,
      myHandleId: '',
      equiCode: '',
	  
	  noticeShow: false,
	  
	  workOrderType: { },
	  planRepair: {}
	  
	  
    }
  },
  onLoad (options) {
    this.workOrderCode = options.workOrderCode
    this.isApproval = options.type === 'approval'
    this.myHandleId = options.myHandleId
  },
  onShow () {
    if (this.workOrderCode) {
      this.getInfo()
    }
  },
  methods: {
    handleAssign () {
      this.back()
    },
    getInfo () {
      get(
        this.apiUrl + '/repair/info/getWorkOrderDetail/' + this.workOrderCode
      ).then(res => {
        if (res.success) {
          res.data.repairInfoLogList = res.data.repairInfoLogList.reverse()
          res.data.repairInfoLogList = res.data.repairInfoLogList.map(n => {
            if (n.content) {
              n.content = JSON.parse(n.content)
            }
            return n
          })
          this.worksheetInfo = res.data
		  this.workOrderType = res.data?.workOrderType
		 
          this.equiCode = res.data?.repairInfo?.equiCode
		   
		
		  if(this.workOrderType.code == 10) {
			   this.planRepair = res.data?.planRepair
			   this.device = res.data.planRepairEqui
			   let districtManName =  res.data?.planRepair.districtManName.split(',')
			   this.worksheetInfo.repairInfo = {
				   repairsPerson: districtManName[0]
			   } 
			
		  } else {
		   this.getDevice()
		  }

       
        }
      })
    },
    changeChartsTab (index) {
      this.pickTabIndex = index
    },
    // 跳转备品备件
    handlbpbj () {
      uni.navigateTo({
        url: `/pages/maintain_service/sparepart/sparepart?workOrderId=${this.worksheetInfo.workOrderId}&sourceId=${this.worksheetInfo.id}&sourceCode=${this.worksheetInfo.workOrderCode}`
      })
    },
    // 查看备品备件 详情
    handCkbpbj () {
      uni.navigateTo({
        url: `/pages/maintain_service/sparepart/sparepartDetail?applyOrder=${this.worksheetInfo.applyOrder}`
      })
    },
    // 跳转报工
    handlbg () {
      uni.navigateTo({
        url: `/pages/maintain_service/submitted_ministry/submitted_ministry?workOrderCode=${this.workOrderCode}&equiCode=${this.equiCode}`
      })
    },
	 
	 // 保修须知
	 handleNotice() {
		 this.noticeShow = true
	 },
	 
	 agree() {
		 
		  this.noticeShow = false
		  this.handleExecute()
	 },
	
    // 执行工单
    handleExecute () {
      post(this.apiUrl + '/workOrder/repairExecute', {
        workOrderCode: this.worksheetInfo.workOrderCode
      }).then(res => {
        uni.showToast({
          icon: 'success',
          title: '操作成功！',
          duration: 2000
        })
        this.getInfo()
      })
    },
    // 转派
    handlZp () {
      let id = this.worksheetInfo.id
      this.$refs.Assign.open(id)
    },
    // 备件使用明细
    handlbjsymx (workOrderCode) {
      this.$refs.PopSparePart.open('备件使用明细', null, workOrderCode)
    },
    // 获取设备信息
    getDevice () {
      try {
        let par = {
          code: this.worksheetInfo.repairInfo.equiCode
        }

        get(this.apiUrl + '/asset/detail', par).then(res => {
          if (res.success) {
            this.device = res.data
          }
        })
      } catch (e) {
        //TODO handle the exception
      }
    },
    // 查看图片
    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) {}
      })
    },
	
	// 计算实际工时
	 timeInterval(dt1, dt2) {
	  if (!dt1 || !dt2) {
	    return "";
	  }
	  if (typeof dt1 == "string") {
	    dt1 = new Date(dt1.replace(/-/, "/"));
	    dt2 = new Date(dt2.replace(/-/, "/"));
	  }
	  var res = dt2 - dt1;
	  if (isNaN(res)) throw Error("invalid dates arguments");
	  let re = res / (1000 * 60 * 60);
	
	  var h = parseInt(re);
	  var m = parseInt((re - h) * 60);
	  let result = "";
	  if (h) {
	    result += `${h} 小时`;
	  }
	  if (m) {
	    result += `${m} 分钟`;
	  }
	  return result;
	}
	
  }
}
</script>

<style lang="scss" scoped>
.img-wrap {
  flex: 1;
  display: flex;
  flex-wrap: wrap;

  .img {
    width: 80px;
    height: 60px;
    margin: 5px;
  }
}
.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;
}

.img-bar {
  padding: 10px 0;
  display: flex;

  .label {
    color: #999;
    text-align: right;
    max-width: 104px;
    font-size: 32rpx;
    padding: 0 15px;
    flex: 1;
  }

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

    .img {
      width: 80px;
      height: 60px;
      margin: 5px;
    }
  }
}

.kd-baseInfo {
  padding: 0 32rpx;
  font-size: 28rpx;

  .kd-cell {
    line-height: 90rpx;
    border-bottom: 1px dashed #dadada;
    word-break: break-all;
    .kd-label {
      display: inline-block;
      width: 8em;
      font-weight: bold;
    }
	.kd-label2{
      display: inline-block;
      width: 11em;
      font-weight: bold;
	}
  }
}

.wx-wrap {
  .item {
    padding: 20rpx;
    font-size: 28rpx;

    .bh-wrap {
      display: flex;
      margin-bottom: 10rpx;
      justify-content: space-between;

      .s1 {
        display: flex;
        align-items: center;

        .b1 {
          font-size: 28rpx;
        }
      }

      .s2 {
        font-size: 28rpx;
      }
    }

    .title-wrap {
      display: flex;
      justify-content: space-between;
      border-bottom: 1px dashed #dadada;
      padding-bottom: 10rpx;
    }

    .bg-wrap-item {
      margin-top: 20rpx;

      .value-wrap {
        .text {
          color: #7f7f7f;
        }

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

          .img {
            width: 140rpx;
            height: 140rpx;

            & + .img {
              margin-left: 10rpx;
            }
          }
        }
      }
    }
  }
}

.title-md {
  font-weight: bold;
}

.zxpg-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 100rpx;

  .btns {
    font-size: 32rpx;
    width: 420rpx;
    height: 80rpx;
    line-height: 80rpx;
    text-align: center;
  }

  .zx-btn {
    background-color: rgba(21, 122, 44, 1);
    color: #ffffff;
  }

  .zp-btn {
    color: #169bd5;
  }

  .disabled {
    background-color: rgba(127, 127, 127, 1);
  }
}

.bjsymx {
  color: #4f7f00;
  padding: 20rpx 0;
}
.apply-box {
  width: 70%;
  margin: 10rpx auto;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
</style>