aiot-app/pages/warehouse/outHouse/selectOutType copy.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"
                    class="items"
                  >
                    {{ itm.label }}：{{ item[itm.prop] }}
                  </view>
                  <view class="items">
                    可用库存：{{ item.realInventoryNum || 0 }}
                  </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'
import { tableHeader } from '../common'
let [page, size, isEnd] = [1, 20, true]
export default {
  components: {
    baTreePicker
  },
  data () {
    return {
      searchVal: '',
      pickTabIndex: 1,
      popupShow: false, //右侧搜索窗
      typeIndex: 1,
      listData: [], //列表数据
      classificationList: [], //分类数据
      seletedAll: false, //全选状态
      warehousingName: '',
      warehousingType: '',
      curId: '',
      warehouseId: '',
      memoList: []
    }
  },
  //选择的列表长度
  computed: {
    tableHeader () {
      return tableHeader(+this.warehousingType)
    },
    checkListLen () {
      return this.memoList.length
    },
    curTab () {
      return warehousingType.find(i => i.id == this.warehousingType) || {}
    }
  },
  onLoad ({ warehousingType, warehousingName, storageKey, warehouseId }) {
    this.warehousingName = warehousingName
    this.warehousingType = warehousingType
    this.warehouseId = warehouseId
    this.memoList = (storageKey && uni.getStorageSync(storageKey)) || []

    console.log(this.memoList, 222)
  },
  //触底刷新
  onReachBottom: function () {
    if (isEnd) {
      return
    }
    // 显示加载图标
    uni.showLoading({
      title: '数据加载中'
    })
    //获取更多数据
    page++
    this.getList()
  },
  mounted () {
    this.getClassify()
  },
  methods: {
    //列表数据
    async getList () {
      isEnd = false
      const curId = this.curId
      const params = {
        page,
        size: 12,
        code: this.warehousingType,
        dimension: 1,
        name: this.searchVal
      }
      if (this.curId) {
        params.materialType = this.curId
      }
      if (this.warehouseId) {
        params.warehouseId = this.warehouseId
      }
      const res = await get(
        this.apiUrl + `/outInWarehouse/select/outWarehouse/info`,
        params
      )
      uni.hideLoading()
      if (res?.success) {
        if (page == 1) {
          this.listData = []
        }
        this.listData.push(
          ...res.data.records.map(i => {
            const curId = i.assetCode
            const checked =
              this.memoList.findIndex(itm => itm.curId === curId) > -1
            return {
              checked,
              curId,
              ...i
            }
          })
        )
        if (curId === this.curId) {
          isEnd = this.listData.length >= res.data.total
        }
      }
    },
    confirm ([id], name) {
      this.curId = name === this.warehousingName ? '' : id
      page = 1
      this.getList()
    },
    async getClassify () {
      const res = await get(
        this.apiUrl + `/classify/getClassify`,
        {
          id: '0',
          type: this.warehousingType
        },
        true
      )
      if (res?.success) {
        this.classificationList = res.data
        this.confirm([res.data[0].id], res.data[0].name)
      }
    },
    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)

      const idx = this.memoList.findIndex(
        item => item.curId === this.listData[index].curId
      )

      console.log(index, this.memoList, this.listData[index])
      if (this.listData[index].checked) {
        if (idx === -1) {
          this.memoList.push(this.listData[index])
        }
      } else {
        if (idx > -1) {
          this.memoList.splice(idx, 1)
        }
      }
    },
    //全选按钮
    _seletedAll () {
      if (!this.seletedAll) {
        this.seletedAll = true
        this.listData.map(item => {
          this.$set(item, 'checked', true)

          console.log(
            this.memoList.map(i => i.curId),
            'this.memoList'
          )
          const idx = this.memoList.findIndex(itm => itm.curId === item.curId)
          console.log(idx, item.curId)
          if (idx === -1) {
            this.memoList.push(item)
          }
        })
      } else {
        this.seletedAll = false
        //this.checkListLen = 0;
        this.listData.map(item => {
          this.$set(item, 'checked', false)
          console.log(this.memoList, 'this.memoList')
          const idx = this.memoList.findIndex(itm => itm.curId === item.curId)
          console.log(idx, item.curId)
          if (idx > -1) {
            this.memoList.splice(idx, 1)
          }
        })
      }
    },
    //跳转回添加页面
    jumpAdd () {
      uni.$emit('setSelectList', this.memoList)
      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: 40px;
      background: #f9f9f9 !important;
      color: #676767;
      font-size: 28rpx;
      width: 260rpx;
      padding: 0 42rpx;
      outline: none;
      border: none;

      .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;
          flex-wrap: wrap;
          font-size: $uni-font-size-sm;

          .items {
            width: 50%;
            margin-bottom: 10rpx;
          }

          .bot-left,
          .bot-right {
            display: inline-block;
            color: $uni-text-color-grey;
          }

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