aiot-app/pages/put_storage/linkage/index.vue

<template>
  <view class="">
    <uni-nav-bar
      fixed="true"
      statusBar="true"
      left-icon="back"
      title="选择备品备件"
      @clickLeft="onBack"
    >
      <template slot="float">
        <view class="nav-icon-caozuo">
          <u-button
            click="nav-icon-caozuo"
            type="primary"
            size="small"
            @click="jump"
            >选择</u-button
          >
        </view>
      </template>
    </uni-nav-bar>
    <view class="fixed">
      <view class="search_box">
        <u--input v-model="params.code" placeholder="请输入编码"></u--input>
        <u-button type="primary" @click="onSearch">
          <u-icon name="search" size="40rpx" color="#fff"></u-icon>搜索
        </u-button>
      </view>
      <view class="tabList">
        <view class="left">
          <view
            v-for="(item, idx) in tabList"
            :key="idx"
            :class="[idx === pickTabIndex ? 'active' : '', 'tab-item']"
            @click="onTabClick(idx)"
          >
            {{ item.name }}
          </view>
        </view>
        <view class="right">
          <text @click="onScreen">筛选</text>
        </view>
      </view>
    </view>
    <view class="mt100" v-if="tabList[pickTabIndex]">
      <view
        class=""
        v-for="(item, index) in tabList[pickTabIndex].list"
        :key="index"
        @click="handleCheckboxChange(index)"
      >
        <u-checkbox-group v-model="checkboxValue">
          <view class="checkbox_flex">
            <u-checkbox :name="index"> </u-checkbox>
            <view class="content">
              <OrderList
                lable1=""
                :value1="item.name"
                lable2=""
                :value2="
                  item.sparepartTypeCode ? item.sparepartTypeCode.name : ''
                "
                lable3="入库类型:"
                :value3="item.code"
                lable4=""
                :value4="item.spec"
              ></OrderList>
            </view>
          </view>
        </u-checkbox-group>
      </view>
      <view v-show="tabList[pickTabIndex].list.length === 0" class="no_data">
        <u-empty mode="data"></u-empty>
      </view>
    </view>
    <u-picker
      :show="linkageShow"
      ref="uPicker"
      :columns="columns"
      key-name="name"
      @confirm="onConfirm"
      @cancel="linkageShow = false"
      @change="changeHandler"
    ></u-picker>
  </view>
</template>

<script>
import { get, post } from '@/utils/api.js'
import OrderList from '../components/OrderList.vue'
export default {
  components: {
    OrderList
  },
  data () {
    return {
      checkboxValue: [],
      linkageShow: false,
      params: {
        code: '',
        page: 1,
        size: 10,
        sparepartTypeCode: ''
      },
      code: '',
      columns: [],
      tabList: [],
      columnData: [],
      pickTabIndex: 0,
      isEnd: true
    }
  },
  onShow () {
    this.getInit()
  },
  onReachBottom () {
    if (this.isEnd) return
    uni.showLoading({
      title: '加载中'
    })
    this.params.page++
    this.getSparepartList()
  },
  methods: {
    jump () {
      let arr = this.tabList[this.pickTabIndex].list.filter((item, idx) =>
        this.checkboxValue.some(el => idx === el)
      )
      this.$store.dispatch('tour_tally/setSelectSparepart', arr)
      uni.redirectTo({
        url: '/pages/put_storage/add/index'
      })
    },
    onBack () {
      uni.redirectTo({
        url: '/pages/put_storage/add/index'
      })
    },
    handleCheckboxChange (idx) {
      if (this.checkboxValue.includes(idx)) {
        let index = this.checkboxValue.findIndex(item => item === idx)
        this.checkboxValue.splice(index, 1)
      } else {
        this.checkboxValue.push(idx)
      }
    },
    changeHandler (e) {
      const {
        columnIndex,
        value,
        values, // values为当前变化列的数组内容
        index,
        // 微信小程序无法将picker实例传出来，只能通过ref操作
        picker = this.$refs.uPicker
      } = e
      // 当第一列值发生变化时，变化第二列(后一列)对应的选项
      if (columnIndex === 0) {
        // picker为选择器this实例，变化第二列对应的选项
        this.columnData = this.tabList[this.pickTabIndex].children[index]
          .children
          ? this.tabList[this.pickTabIndex].children[index].children
          : []
        picker.setColumnValues(1, this.columnData)
      }
    },
    onConfirm (e) {
      if (e.value && e.value.length > 1) {
        this.code = e.value[1].code
      } else {
        this.code = e.value[0].code
      }
      uni.showLoading({
        title: '加载中'
      })
      this.getSparepartList()
      this.linkageShow = false
    },
    onScreen () {
      if (this.pickTabIndex) {
        this.linkageShow = true
        this.columns = [this.tabList[this.pickTabIndex].children]
        const picker = this.$refs.uPicker
        this.columnData = this.tabList[this.pickTabIndex].children[0].children
          ? this.tabList[this.pickTabIndex].children[0].children
          : []

        this.$nextTick(() => {
          picker.setColumnValues(1, this.columnData)
        })
      }
    },
    onSearch () {
      this.params.page = 1
      uni.showLoading({
        title: '加载中'
      })
      this.getSparepartList()
    },
    async getSparepartList () {
      let res = await this.getList(this.code)
      uni.hideLoading()
      if (this.params.page === 1) {
        this.tabList[this.pickTabIndex].list = res.items
      } else {
        res.items.forEach(item => {
          this.tabList[this.pickTabIndex].list.push(item)
        })
      }
      this.$forceUpdate()
      this.params.page < res.pageTotal
        ? (this.isEnd = false)
        : (this.isEnd = true)
    },
    onTabClick (idx) {
      this.pickTabIndex = idx
      this.params.page = 1
      uni.showLoading({
        title: '加载中'
      })
      this.code = this.tabList[idx].code
      this.getSparepartList()
    },
    getTree () {
      return new Promise((resolve, reject) => {
        get(this.apiUrl + '/feature/type/spareparts/tree?type=3').then(res => {
          if (res.success) {
            this.code = res.data[0].code
            resolve(res.data)
          }
        })
      })
    },

    getList (code) {
      this.params.sparepartTypeCode = code
      return new Promise((resolve, reject) => {
        post(
          this.apiUrl + '/feature/book/spareparts/sparepartList',
          this.params
        ).then(res => {
          if (res.success) {
            resolve(res.data)
          }
        })
      })
    },
    async getInit () {
      uni.showLoading({
        title: '加载中'
      })
      let res = await this.getTree()
      uni.hideLoading()
      this.getTabList(res)
      this.getSparepartList()
    },
    getTabList (list) {
      if (list && list.length !== 0) {
        list.forEach(item => {
          item.name = '全部'
          item.list = []
          this.tabList.push(item)
          if (item.children && item.children.length !== 0) {
            item.children.forEach(el => {
              el.list = []
              this.tabList.push(el)
            })
          }
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.search_box {
  padding: 10rpx 20rpx;
  display: flex;
  background-color: #f2f2f2;

  /deep/ .u-input {
    background: #fff;
  }

  /deep/ .u-botton {
    margin-left: 20rpx;
  }
}

.checkbox_flex {
  display: flex;
  width: 100%;
  padding: 10rpx;
  align-items: center;
  margin-bottom: 16rpx;

  .u-checkbox {
    width: 32rpx;
    height: 32rpx;
  }

  /deep/ .u-checkbox__icon-wrap--square {
    width: 100% !important;
    height: 100% !important;
  }

  .content {
    width: 100%;
  }
}

.tabList {
  width: 100%;
  padding: 0 20rpx;
  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;

  .left {
    display: flex;
    justify-content: space-between;
    width: 80%;

    .tab-item {
      width: 30%;
      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;
    }
  }

  .right {
    flex: 1;
    text-align: right;
  }
}

.fixed {
  position: fixed;
  left: 0;
  width: 100%;
}

.no_data {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #999;
  font-size: 28rpx;
}

.mt100 {
  margin-top: 200rpx;
}

/deep/ .u-picker__view__column__item {
  height: 88rpx !important;
  line-height: 88rpx !important;
}

/deep/ .uni-picker-view-indicator {
  height: 88rpx !important;
  line-height: 88rpx !important;
}
</style>