aiot-app/pages/maintenance/check/index.vue

<template>
  <view>
    <uni-nav-bar
      fixed="true"
      statusBar="true"
      left-icon="back"
      title="保养中"
      @clickLeft="back"
    >
      <view class="nav-right" slot="right">
        <view class="text-box" @click="goRegister"> 备件使用登记 </view>
      </view>
    </uni-nav-bar>
    <view class="check-content">
      <view class="title"
        >{{ equiName }} <text>{{ equiCode }}</text></view
      >
      <view class="check-list">
        <CheckCard
          v-for="(item, index) in equipList"
          :item="item"
          class="mb20"
          :index="index"
        ></CheckCard>
      </view>
      <view class="footer">
        <view class="btn" @click="back"> 返回 </view>
        <view class="btn primary" @click="handleSave"> 保存 </view>
      </view>
    </view>
    <u-modal
      :show.sync="visible"
      class="maintenance-order"
      :showCancelButton="true"
      @confirm="confirm"
      @cancel="cancel"
      :closeOnClickOverlay="true"
    >
      <view class="" style="flex: 1">
        <view class="title">备件使用登记</view>
        <view class="register-content">
          <view class="inner">
            <view class="col" v-for="item in applyEquiPartList">
              {{ item.name }}({{ item.code }}/{{ item.model }})
              <u-number-box
                v-model="item.usedNum"
                :step="1"
                :min="item.min"
                :max="item.num"
              ></u-number-box>
            </view>
          </view>
        </view>
      </view>
    </u-modal>

    <uni-popup ref="inputDialog" type="dialog">
      <uni-popup-dialog
        ref="inputClose"
        mode="input"
        title="您当前已超出计划完成时间，请填写原因"
        placeholder="请输入内容"
        :before-close="true"
        @close="handleClose"
        @confirm="timeoutCauseConfirm"
      ></uni-popup-dialog>
    </uni-popup>
  </view>
</template>

<script>
import { post, postJ } from '@/utils/api.js'
import CheckCard from './components/CheckCard.vue'
export default {
  components: { CheckCard },
  data () {
    return {
      registerObj: [],
      visible: false,
      pageId: '',
      page: 1,
      equipList: [],
      isEnd: false,
      equiName: '',
      equiCode: '',
      workOrderId: '',
      applyEquiPartList: [],
      originList: [],
      workOrderCode: ''
    }
  },
  onLoad (options) {
    this.pageId = options.id
    this.workOrderId = options.workOrderId
    this.equiName = options.equiName
    this.equiCode = options.equiCode
    this.workOrderCode = options.workOrderCode
    this.getList()

    // this.getApplyEquiPartList(+options.workOrderId, options.id)
    // this.getUsePartList(+options.workOrderId, options.id);
  },
  onReachBottom () {
    if (this.isEnd) return
    this.page++
    this.getList()
  },
  methods: {
    back () {
      uni.navigateBack({
        delta: 1
      })
    },
    confirm () {
      this.originList = uni.$u.deepClone(this.applyEquiPartList)
      this.visible = false
    },
    cancel () {
      this.applyEquiPartList = uni.$u.deepClone(this.originList)
      this.visible = false
    },

    goRegister () {
      uni.navigateTo({
        url: `/pages/maintenance/check/register?workOrderCode=${this.workOrderCode}&workOrderId=${this.workOrderId}&equipmentCode=${this.equiCode}`
      })
    },

    getApplyEquiPartList (workOrderId, planEquiId) {
      post(this.apiUrl + '/stockOutApply/getApplyEquiPartList', {
        workOrderId,
        planEquiId
      }).then(res => {
        if (res?.success) {
          this.originList = res.data.map(i => {
            i.min = i.usedNum
            return i
          })
          this.applyEquiPartList = uni.$u.deepClone(this.originList)
        }
      })
    },
    // getUsePartList(workOrderId, planEquiId){
    // 	post(this.apiUrl + '/stockOutApply/getUsePartList', {workOrderId, planEquiId}).then(res => {
    // 		if(res?.success){
    // 			this.originList = res.data
    // 			this.applyEquiPartList = uni.$u.deepClone(this.originList)
    // 		}
    // 	})
    // },
    handleSave () {
      let _this = this
      const params = {
        itemList: this.equipList,
        planEquiId: this.pageId,
        workOrderId: +this.workOrderId,
        workOrderType: 2,
        stockOutApplyPartList: this.originList.filter(i => !!i.usedNum)
      }
      postJ(this.apiUrl + `/workOrder/itemsInspect`, params, true).then(res => {
        if (res?.success) {
          if (res.data) {
            uni.showModal({
              title: '提示',
              content: '所有设备已执行完，是否报工？',
              cancelText: '取消', // 取消按钮的文字
              confirmText: '报工', // 确认按钮的文字
              showCancel: true, // 是否显示取消按钮，默认为 true
              success: res => {
                if (res.confirm) {
                  _this._report()
                } else {
                  _this.back()
                }
              }
            })
          } else {
            uni.showToast({
              duration: 2000,
              title: '保存成功！'
            })
            this.back()
          }
        }
      })
    },

    handleClose () {
      this.$refs.inputDialog.close()
    },
    timeoutCauseConfirm (value) {
      if (!value) {
        uni.showToast({
          title: '请输入超时原因',
          icon: 'none'
        })
        return
      }
      this.$refs.inputDialog.close()
      this._report(value)
    },
    _report (timeoutCause = '') {
      post(
        this.apiUrl + '/workOrder/reportWork',
        {
          workOrderId: this.workOrderId,
          timeoutCause
        },
        true,
        false
      )
        .then(res => {
          if (res?.success) {
            let data = res.data
            if (data.length) {
              uni.showModal({
                title: '提示',
                content: `有${data.length}台设备被标记为缺陷，是否要报修？`,
                cancelText: '取消', // 取消按钮的文字
                confirmText: '报修', // 确认按钮的文字
                showCancel: true, // 是否显示取消按钮，默认为 true
                success: res => {
                  if (res.confirm) {
                    if (data.length > 1) {
                      uni.navigateTo({
                        url: `/pages/maintenance/detail/detail?workOrderCode=${this.workOrderCode}&id=${this.workOrderId}&chooseTab=true`
                      })
                    } else {
                      uni.navigateTo({
                        url: `/pages/repair/repair/index?source=5&workOrderCode=${this.workOrderCode}&equiCode=${data[0].equiCode}&equiId=${data[0].equiId}&workOrderId=${this.pageId}&equiName=${data[0].equiName}&equiModel=${data[0].equiModel}&equiLocation=${data[0].equiLocation}`
                      })
                    }
                  } else {
                    _this.back()
                  }
                }
              })
            } else {
              uni.showToast({
                icon: 'success',
                title: '操作成功！',
                duration: 2000
              })
              _this.back()
            }
          }
        })
        .catch(res => {
          if (res.code === '4444') {
            this.$refs.inputDialog.open()
          }
        })
    },

    getList () {
      const { page } = this
      post(
        this.apiUrl +
          `/workOrder/getEquipmentItemsListApp?size=10&page=${page}`,
        { planEquiId: +this.pageId, workOrderId: +this.workOrderId },
        true
      ).then(res => {
        if (res?.success) {
          res.data.records.forEach(item => {
            item.isNormal =
              item.isNormal === null || item.isNormal === undefined
                ? 1
                : item.isNormal
          })
          if (page === 1) {
            this.equipList = res.data.records
          } else {
            this.equipList.push(...res.data.records)
          }

          this.isEnd = this.equipList.length >= res.data.total
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.check-content {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  padding-bottom: 100rpx;
  .title {
    line-height: 80rpx;
    display: flex;
    justify-content: space-between;
    padding: 0 30rpx;
  }
  .check-list {
    flex: 1;
    overflow: auto;
    padding: 0 30rpx 100rpx;
  }
  .footer {
    height: 100rpx;
    display: flex;
    position: fixed;
    bottom: 0;
    width: 100vw;
    border: 1rpx solid $j-primary-border-green;
    background: #fff;
    z-index: 100;
    .btn {
      display: flex;
      flex: 1;
      justify-content: center;
      align-items: center;
      border-radius: 0;
      &.primary {
        background-color: $j-primary-border-green;
        color: #fff;
      }
    }
  }

  .mb20 {
    margin-bottom: 20rpx;
  }
}
.nav-right {
  position: relative;
  .text-box {
    white-space: nowrap;
    padding: 4rpx;
    border: 1rpx solid rgba(242, 242, 242, 1);
  }
}
.maintenance-order {
  /deep/ .u-modal__content {
    padding: 0 !important;

    .u-number-box__minus,
    .u-number-box__plus,
    .u-number-box__input {
      font-size: 30rpx;
      height: 1.4em !important;
    }
  }
  .title {
    background-color: rgba(51, 51, 51, 1);
    line-height: 60rpx;
    text-align: center;
    color: #fff;
  }
  .register-content {
    padding: 20rpx;

    .inner {
      border: 1rpx solid rgba(242, 242, 242, 1);
      .col {
        font-size: 28rpx;
        border-bottom: 1rpx solid rgba(242, 242, 242, 1);
        display: flex;
        padding: 10rpx;
        justify-content: space-between;
      }
    }
  }
}
</style>