aiot-app/pages/maintenance/check/components/PopSparePart copy.vue

<template>
  <!-- 备品备件弹窗 -->
  <u-popup :show="popShow" @close="close" mode="bottom" class="u-popup">
    <view class="bpbj">
      <view class="title"> 备件登记 </view>
      <!-- <view>
        <uni-easyinput v-model="searchKey"></uni-easyinput>
      </view> -->
      <view class="detail-content">
        <template v-if="InfoList.length > 0">
          <view class="col" v-for="item in InfoList" :key="item.id">
            <checkbox-group
              @change="e => (item.checked = e.detail.value[0] === '1')"
            >
              <label>
                <view class="tit">备件编码：{{ item.assetCode }}</view>
                <view class="item">备件名称：{{ item.informationName }}</view>
                <view class="item">型号/规格：{{ item.informationName }}</view>
                <view class="item"
                  >单位 ：<uni-easyinput
                    type="number"
                    v-if="item.isUnpack"
                    v-model.number="item.num"
                  ></uni-easyinput
                  >{{ item.minPackUnit }}</view
                >
                <view class="item" v-if="!item.isUnpack"
                  >包装单元：{{ item.informationName }}/{{
                    item.minPackUnit
                  }}</view
                >
                <checkbox value="1" :checked="item.checked" />
              </label>
            </checkbox-group>
          </view>
        </template>
        <view class="nodata" v-else> 暂无数据 </view>
      </view>
      <view class="close">
        <u-button text="关闭" @click="close"></u-button>
        <u-button text="保存" type="success" @click="submit"></u-button>
      </view>
    </view>
  </u-popup>
</template>

<script>
import { post, postJ, get } from '@/utils/api.js'
export default {
  props: {
    workOrderCode: {
      type: String,
      default () {
        return ''
      }
    },
    equipmentCode: {
      type: String,
      default () {
        return ''
      }
    }
  },
  data () {
    return {
      popShow: false,
      searchKey: '',
      workOrderId: '',
      InfoList: [],
      title: ''
    }
  },
  methods: {
    open (value, code) {
      this.popShow = true
      this.getList()
    },
    close () {
      this.popShow = false
    },
    submit () {
      const list = this.InfoList.filter(item => item.checked)
      this.$emit('success', list)
    },
    // 获取备品备件
    getList () {
      let par = {
        sourceCode: this.workOrderCode
        // equipmentCode: this.equipmentCode,
      }

      postJ(this.apiUrl + `/sparePartsApply/getSparePartsExpend`, par).then(
        res => {
          if (res?.success) {
            this.InfoList = res.data.map(i => ({
              ...i,
              num: i.measurementUnit,
              checked: false
            }))
          }
        }
      )
    }
  }
}
</script>

<style lang="scss" scoped>
.nodata {
  text-align: center;
  padding: 30rpx 0;
}
.close {
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  display: flex;
  justify-content: space-between;
}
.bpbj {
  width: 100vw;
  height: 90vh;
  padding-bottom: 80rpx;
  .title {
    margin-bottom: 7px;
    background-color: $j-primary-border-green;
    text-align: center;
    color: #fff;
    padding: 10rpx 0;
  }

  .detail-content {
    border: 1rpx solid rgba(242, 242, 242, 1);
    overflow: auto;
    .tit {
      font-weight: bold;
    }
    .col {
      margin: 20rpx;
      border: 1rpx solid rgba(242, 242, 242, 1);
      font-size: 28rpx;
      border-bottom: 1rpx solid rgba(242, 242, 242, 1);
      padding: 20rpx;
      align-items: center;
      flex-direction: column;
      justify-content: space-between;
      background-color: rgba(242, 242, 242, 0.372549019607843);
      position: relative;

      .item {
        margin-top: 20rpx;

        // display: flex;
        // justify-content: flex-start;
        // align-items: center;
        // flex-shrink: 1;
        .uni-easyinput {
          display: inline-block;
          width: 200rpx;
          margin: 0 10rpx;
        }
      }

      & + .col {
        margin-top: 20rpx;
      }

      uni-checkbox {
        position: absolute;
        top: 30rpx;
        right: 20rpx;
      }
    }

    .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>