aiot-app/pages/warehouse/enterHouse/selectEnterType.vue

<template>
  <view class="mainBox">
    <uni-nav-bar
      fixed="true"
      statusBar="true"
      left-icon="back"
      :title="`选择${warehousingName}`"
      @clickLeft="backAdd"
    >
      <!--右菜单-->
      <template slot="right">
        <u-button
          type="success"
          size="small"
          class="u-reset-button"
          @click="$refs.treePicker._show()"
          text="选择分类"
        ></u-button>
      </template>
    </uni-nav-bar>
    <view class="wrapper">
      <view class="searchBox">
        <input
          v-model="searchVal"
          placeholder="请输入编码搜索"
          class="searchInput"
        />
        <u-button
          type="icon-shixiangxinzeng"
          size="30"
          @click="doSearch"
          data-icon="Search"
          class="searchBtn"
        >
          <view class="iconfont icon-sousuo"> </view>
          <view class="text"> 搜索 </view>
        </u-button>
      </view>
      <view class="listContent">
        <checkbox-group
          v-for="(item, index) in listData"
          :key="index"
          @change="e => selectVal(e, item, index)"
        >
          <label>
            <view class="listBox">
              <view class="listBox-sel">
                <checkbox
                  :value="item.code"
                  color="#fff"
                  :disabled="item.disabled"
                  :checked="item.checked"
                />
              </view>
              <view class="listBox-con">
                <view class="listBox-top">
                  <view class="listBox-name">
                    {{ item.assetName }}
                  </view>
                  <view class="listBox-code">
                    {{ item.assetCode }}
                  </view>
                </view>
                <view class="listBox-bottom">
                  <view v-for="(itm, index) in tableHeader" :key="index">
                    {{ itm.label }}：{{ item[itm.prop] }}
                  </view>
                </view>
                <!-- <view class="listBox-bottom">
              <view class="bot-left">
                最小单元：{{ item.measurementUnit }}{{ item.unit }}/{{
                  item.minPackUnit
                }}
              </view>
            </view> -->
                <!-- <view class="listBox-bottom">
						<view class="bot-left">
							批次号：{{item.batchNumber}}
						</view>
						<view class="bot-right">
							包装单位：{{item.packingUnit}}
						</view>
					</view> -->
              </view>
            </view></label
          >
        </checkbox-group>
        <u-empty style="margin-top: 20vh" v-if="!listData.length"> </u-empty>
      </view>
    </view>

    <view class="footer">
      <view class="bottom">
        <checkbox
          v-if="!seletedAll"
          color="#fff"
          :checked="seletedAll"
          @tap="_seletedAll"
          >全选</checkbox
        >
        <checkbox
          class="select-all"
          color="#fff"
          v-else
          :checked="seletedAll"
          @tap="_seletedAll"
          >取消全选
        </checkbox>
      </view>
      <u-button
        type="success"
        size="small"
        class="u-reset-button"
        :disabled="!checkListLen"
        @click="jumpAdd"
      >
        <view class="selBtn"> 选择( {{ checkListLen }} ) </view>
      </u-button>
    </view>
    <ba-tree-picker
      ref="treePicker"
      key="verify"
      :multiple="false"
      @select-change="confirm"
      title="选择分类"
      :localdata="classificationList"
      valueKey="id"
      textKey="name"
      childrenKey="children"
    />
  </view>
</template>

<script>
import { warehousingType, tableContentData } from '../enum.js'
import baTreePicker from '@/components/ba-tree-picker/ba-tree-picker.vue'
import { post, postJ, get } from '@/utils/api.js'
let [page, size, isEnd] = [1, 20, true]
import { tableHeader } from '../common'
export default {
  components: {
    baTreePicker
  },
  data () {
    return {
      searchVal: '',
      pickTabIndex: 1,
      popupShow: false, //右侧搜索窗
      typeIndex: 1,
      listData: [], //列表数据
      classificationList: [], //分类数据
      seletedAll: false, //全选状态
      bizScene: '',
      warehousingName: '',
      warehousingType: '',
      curId: ''
    }
  },
  //选择的列表长度
  computed: {
    tableHeader () {
      return tableHeader(+this.warehousingType)
    },
    checkListLen () {
      return this.listData.filter(el => el.checked).length
    },
    curTab () {
      return warehousingType.find(i => i.id == this.warehousingType) || {}
    }
  },
  onLoad ({ warehousingType, warehousingName, bizScene }) {
    this.bizScene = bizScene
    this.warehousingName = warehousingName
    this.warehousingType = warehousingType
  },
  //触底刷新
  onReachBottom: function () {
    if (isEnd) {
      return
    }
    // 显示加载图标
    uni.showLoading({
      title: '数据加载中'
    })
    //获取更多数据
    page++
    this.getList()
  },
  onShow () {
    this.getClassify()
  },
  methods: {
    //列表数据
    async getList () {
      isEnd = false
      if (this.bizScene == 5) {
        this._getAssetLedger()
      } else {
        this._getClassifyList()
      }
    },
    async _getClassifyList () {
      const params = {
        page,
        size,
        code: this.searchVal,
        classificationId: this.curId
      }
      const res = await get(
        this.apiUrl + `/outInWarehouse/select/getInformation`,
        params
      )
      uni.hideLoading()
      if (res?.success && this.curId == params.classificationId) {
        const curMap = {
          assetId: 'id',
          assetCode: 'informationCode', //编码
          assetName: 'informationName', //名称
          materialId: 'id',
          materialName: 'informationName',
          batchNo: '', //批次号
          unit: 'measuringUnit', //单位
          minPackUnit: 'packingUnit' //最小包装单位
        }
        if (page == 1) {
          this.listData = []
        }
        this.listData.push(
          ...res.data.records.map(item => {
            for (const key in curMap) {
              item[key] = curMap[key] ? item[curMap[key]] : ''
            }
            item.checked = false
            return item
          })
        )

        isEnd = this.listData.length >= res.data.total
      }
    },
    async _getAssetLedger () {
      const params = {
        assetCode: this.searchVal,
        materialId: this.curId,
        assetType: this.warehousingType
      }
      const res = await get(
        this.apiUrl + `/outInWarehouse/select/getAssetLedger`,
        params
      )
      uni.hideLoading()
      if (res?.success && this.curId == params.materialId) {
        const curMap = {
          materialName: 'assetName', //类型
          batchNo: 'batchNo', //批次号
          outInNum: '' //数量
        }
        this.listData = res.data.map(item => {
          for (const key in curMap) {
            item[key] = curMap[key] ? item[curMap[key]] : ''
          }
          item.checked = false
          return item
        })
        isEnd = true
      }
    },
    confirm ([id], name) {
      this.curId = id
      page = 1
      this.getList()
    },
    async getClassify () {
      const res = await get(this.apiUrl + `/classify/getClassify`, {
        id: '0',
        type: this.warehousingType
      })
      if (res?.success) {
        this.classificationList = res.data
        this.confirm([res.data[0].id])
      }
    },
    doSearch () {
      page = 1
      this.getList()
    },
    //勾选
    selectVal (e, val, index) {
      // console.log(this.listData);
      this.listData[index].checked = !this.listData[index].checked

      this.seletedAll = !this.listData.some(item => !item.checked)
    },
    //全选按钮
    _seletedAll () {
      if (!this.seletedAll) {
        this.seletedAll = true
        this.listData.map(item => {
          this.$set(item, 'checked', true)
        })
      } else {
        this.seletedAll = false
        //this.checkListLen = 0;
        this.listData.map(item => {
          this.$set(item, 'checked', false)
        })
      }
    },
    //跳转回添加页面
    jumpAdd () {
      uni.$emit(
        'setSelectList',
        this.listData.filter(item => item.checked)
      )

      console.log(
        this.listData.filter(item => item.checked),
        '222'
      )
      uni.navigateBack()
    },
    //返回添加页
    backAdd () {
      uni.navigateBack()
    }
  }
}
</script>

<style lang="scss" scoped>
.mainBox {
  .wrapper {
    padding-top: 50px;
    position: relative;
  }
  .searchBox {
    position: absolute;
    top: 0;
    z-index: 99;
    background-color: #dedede;
    height: 50px;
    width: 100%;
    line-height: 50px;
    display: flex;
    justify-content: space-around;
    align-items: center;

    input {
      height: 40px;
      width: 65%;
      background: #f9f9f9 !important;
      margin-left: 20rpx;
      padding-left: 10rpx;
      border-radius: 5rpx;
    }

    .searchBtn {
      height: 80rpx;
      background: #f9f9f9 !important;
      color: #676767;
      font-size: 28rpx;
      padding: 0 42rpx;
      outline: none;
      border: none;
      width: 260rpx;
      .icon-sousuo {
        font-size: 22px;
      }

      .text {
        font-size: 16px;
        margin-left: 10px;
      }
    }
  }

  .tab-title {
    position: fixed;
    top: 190rpx;
    z-index: 99;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: $tab-height;
    line-height: $tab-height;
    background-color: #ffffff;
    border-bottom: 2rpx solid #f2f2f2;
    box-sizing: border-box;

    .tab-item {
      width: 25%;
      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;
      font-weight: bold;
    }

    .tab-item.filter {
      flex: 1;
      padding: 0px 30rpx;

      .uni-icons {
        display: flex;
        padding-top: 5px;
      }
    }

    .screenIcon {
      display: flex;
      width: 80px;
      justify-content: center;

      .screenText {
        font-size: 32rpx;
        color: $uni-text-color-grey;
      }
    }
  }

  .listContent {
    // margin-top: 100rpx;
    padding-bottom: 100rpx;

    .listBox {
      display: flex;
      // height: 180rpx;
      padding: 20rpx 0;
      border-bottom: 2rpx solid #e5e5e5;

      .listBox-sel {
        height: 90rpx;
        width: 80rpx;
        line-height: 90rpx;
        text-align: center;

        checkbox {
          transform: scale(1.2);
        }
      }

      .listBox-con {
        width: 100%;
        // display: flex;
        // flex-wrap: wrap;
        // justify-content: space-between;
        align-items: center;
        padding: 0 18rpx 0 0;

        .listBox-top {
          width: 100%;
          display: flex;
          justify-content: space-between;
          padding-bottom: 10rpx;

          .listBox-name,
          .listBox-code {
            display: inline-block;
            font-size: $uni-font-size-sm;
            font-weight: bold;
          }

          .listBox-code {
          }
        }

        .listBox-bottom {
          width: 100%;
          display: flex;
          justify-content: space-between;
          font-size: $uni-font-size-sm;
          flex-wrap: wrap;
          > view {
            width: 50%;
          }
          .bot-right {
          }
        }
      }
    }
  }

  //底部按钮
  .footer {
    position: fixed;
    display: flex;
    justify-content: space-between;
    align-items: center;
    bottom: 0;
    width: 100%;
    height: 100rpx;
    border-top: 1rpx solid #eeecec;
    background-color: #ffffff;
    z-index: 999;

    .bottom {
      margin-left: 10rpx;
    }

    .u-reset-button {
      position: absolute;
      right: 10rpx;
      top: 20rpx;
      width: 150rpx;
    }
  }
}
</style>