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

<template>
  <!-- 备品备件弹窗 -->
  <u-popup :show="popShow" @close="close" mode="center" class="u-popup">
    <view class="bpbj">
      <view class="title">
        {{ title }}
      </view>
      <view class="detail-content">
        <template v-if="InfoList.length > 0">
          <view class="col" v-for="item in InfoList" :key="item.id">
            <view class="tt">{{ item.assetCode }}</view>
            {{ item.informationName }}（{{
              (item.specification ? item.specification : '-') +
              '/' +
              item.modelType
            }})

            <text v-if="title == '备件使用明细'"
              >{{ item.isUnpack ? 1 : item.num
              }}{{ item.unit || item.measuringUnit }}</text
            >
          </view>
        </template>
        <view class="nodata" v-else> 暂无数据 </view>
      </view>
      <view class="close" @click="close">
        <u-button text="关闭"></u-button>
      </view>
    </view>
  </u-popup>
</template>

<script>
import { post, postJ, get } from '@/utils/api.js'
export default {
  props: {
    workOrderCode: {
      type: String,
      default () {
        return ''
      }
    },
    sparePartsJson: {
      type: Array,
      default () {
        return [null]
      }
    },
    noRequest: {
      type: Boolean,
      default: false
    },
    equipmentCode: {
      type: String,
      default () {
        return ''
      }
    }
  },
  data () {
    return {
      popShow: false,
      workOrderId: '',
      InfoList: [],
      title: ''
    }
  },
  methods: {
    open (value, code, workOrderCode) {
      this.popShow = true
      this.title = value
      if (this.noRequest) {
        this.InfoList = this.sparePartsJson
      } else {
        if (value == '备件使用明细') {
          this.getList(workOrderCode)
        } else {
          this.getInfo(code)
        }
      }
    },
    close () {
      this.popShow = false
    },
    // 获取备品备件
    getList (workOrderCode) {
      let par = {
        sourceCode: workOrderCode || this.workOrderCode
      }

      if (this.equipmentCode) {
        par.equipmentCode = this.equipmentCode
      }
      postJ(this.apiUrl + `/sparePartsApply/getSparePartsExpendList`, par).then(
        res => {
          if (res?.success) {
            this.InfoList = res.data
            this.InfoList.map(item => {
              if (item.isUnpack) {
                item.num = item.unusedNum
              } else {
                item.num = item.measurementUnit - item.unusedNum
              }
            })
          }
        }
      )
    },
    getInfo (code) {
      get(this.apiUrl + `/sparePartsApply/detail/${code}`).then(res => {
        if (res?.success) {
          this.InfoList = res.data.sparePartsApplyDetailList
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.nodata {
  text-align: center;
  padding: 30rpx 0;
}
.bpbj {
  width: 600rpx;
  .title {
    margin-bottom: 7px;
    background-color: #333333;
    text-align: center;
    color: #fff;
    padding: 10rpx 0;
  }

  .detail-content {
    border: 1rpx solid rgba(242, 242, 242, 1);
    max-height: 60vh;
    overflow: auto;
    .col {
      font-size: 28rpx;
      border-bottom: 1rpx solid rgba(242, 242, 242, 1);
      display: flex;
      padding: 10rpx;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      background-color: rgba(242, 242, 242, 0.372549019607843);
      .tt {
        width: 100%;
      }
    }

    .plus {
      width: 40rpx;
      height: 40rpx;
      line-height: 38rpx;
      text-align: center;
      background-color: $j-primary-border-green;
      color: #fff;
      margin: 16rpx 0 0 16rpx;
    }
  }

  /deep/.u-number-box {
    .u-number-box__minus,
    .u-number-box__plus,
    .u-number-box__input {
      font-size: 30rpx;
      height: 1.6em !important;
    }

    .u-number-box__input {
      width: 2em !important;
    }

    .u-number-box__minus,
    .u-number-box__plus {
      background-color: $j-primary-border-green !important;

      .u-icon__icon {
        color: #fff !important;
      }
    }
  }
}
</style>