aiot-app/components/SparePart.vue

<template>
  <view class="">
    <template>
      <view class="input-search">
        <input
          type="text"
          v-model="searchValue"
          placeholder="请搜索"
          @confirm="handleConfirm"
        />
      </view>
      <view class="input-search__placeholder"></view>
    </template>

    <checkbox-group style="padding-bottom: 100rpx" @change="checkboxChange">
      <label class="radio-list" v-for="(item, index) in list" :key="index">
        <checkbox class="radio" :value="item.code" :checked="item.checked" />
        <view class="content">
          <view class="">
            <text>{{ item.code }}/</text>
            <text class="font-grey">{{ item.name }}</text>
          </view>
          <view class="">
            <text>{{ item.inventoryLibrary }}/</text>
            <text class="font-grey">{{ item.model }}</text>
          </view>
        </view>
        <view @click.stop>
          <uni-number-box
            @change="e => checkItem(e, index)"
            :min="0"
            :max="item.ableUse"
            v-model="item.num"
          >
          </uni-number-box>
        </view>
      </label>
    </checkbox-group>
    <view class="footer">
      <view class="bottom">
        <checkbox v-if="!seletedAll" :checked="seletedAll" @tap="_seletedAll"
          >全选</checkbox
        >
        <checkbox
          class="select-all"
          v-else
          :checked="seletedAll"
          @tap="_seletedAll"
          >取消全选
        </checkbox>
      </view>
      <text class="footer-span-btn" @click="submit"
        >申领({{ checkListLen }})</text
      >
    </view>
  </view>
</template>

<script>
import { get, postJ } from '@/utils/api.js'
export default {
  name: 'SparePart',
  data () {
    return {
      seletedAll: false,
      searchValue: ''
      //list:[]
    }
  },
  props: {
    list: {
      type: Array,
      default: () => []
    }
  },
  computed: {
    checkListLen () {
      const list = this.list.filter(el => {
        if (el.checked && !el.disabled) {
          return el
        }
      })
      return list.length
    }
  },
  methods: {
    handleConfirm () {
      this.$emit('search', this.searchValue)
    },
    checkItem (e, index) {
      this.$set(this.list[index], 'checked', true)
    },
    _seletedAll () {
      if (!this.seletedAll) {
        this.seletedAll = true

        this.list.map(item => {
          this.$set(item, 'checked', true)
        })
      } else {
        this.seletedAll = false
        //this.checkListLen = 0;
        this.list.map(item => {
          this.$set(item, 'checked', false)
        })
      }
    },
    checkboxChange (e) {
      let checkList = e.detail.value
      //判断是否全选
      if (checkList.length === this.list.length) {
        this.list.forEach(el => {
          this.$set(el, 'checked', true)
        })
        this.seletedAll = true
      } else {
        let items = this.list
        let chekedItem = []
        //选中的长度+ 不可选中的长度
        let cheAndDisLen = 0
        //有选中的值
        if (checkList.length) {
          //遍历列表所有的数据
          for (let i = 0; i < items.length; i++) {
            //判断该数据是否选中
            if (items[i].disabled) {
              cheAndDisLen++
            } else {
              const isPick = checkList.some(pick => {
                return pick == items[i].batchNo
              })
              this.$set(this.list[i], 'checked', isPick)
              if (isPick) {
                cheAndDisLen++
              }
            }
          }
        } else {
          //全不选
          this.list.forEach(el => {
            this.$set(el, 'checked', false)
          })
        }

        //改变全选状态
        //选中+不可选中长度等于数据长度为全选
        if (cheAndDisLen == this.list.length) {
          this.seletedAll = true
        } else {
          this.seletedAll = false
        }
      }
    },
    submit () {
      this.$emit('submitList', this.list)
    }
  }
}
</script>

<style lang="scss" scoped>
.input-search {
  position: fixed;
  width: 100%;
  padding: 10rpx 20rpx;
  height: 80rpx;
  z-index: 99;
  background-color: #ffffff;
  box-sizing: border-box;

  input {
    height: 80rpx;
    line-height: 80rpx;
    text-align: center;
    font-size: $uni-font-size-base;
    background-color: $page-bg;
    border-radius: 30rpx;
  }

  &__placeholder {
    padding-bottom: 90rpx;
  }
}

.radio-list {
  display: flex;
  padding: 20rpx;
  align-items: center;
  justify-content: space-between;
  color: $uni-text-color;
  border-bottom: 2rpx solid #d8d8d8;
  font-size: $uni-font-size-base;
  line-height: 1.8;

  .radio {
    margin-right: 10rpx;
  }

  .content {
    flex-grow: 1;
    font-size: 28rpx;
  }
}

.footer {
  position: fixed;
  display: flex;
  justify-content: space-between;
  align-items: center;
  bottom: 0;
  width: 100%;
  height: 90rpx;
  text-align: center;
  border-top: 1rpx solid #eeecec;
  background-color: #ffffff;

  .bottom {
    font-size: $uni-font-size-lg;
    margin-left: 20rpx;

    .select-all {
      color: $j-primary-green;
    }
  }

  .footer-span-btn {
    height: 30rpx;
    line-height: 30rpx;
    font-size: $uni-font-size-lg;
    color: #ffffff;
    margin-right: 20rpx;
    padding: 10rpx 20rpx;
    text-align: center;
    background-color: $j-primary-green;
    border-radius: 40rpx;
  }
}
</style>