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

<template>
  <view class="mainBox">
    <uni-nav-bar
      fixed="true"
      statusBar="true"
      left-icon="back"
      title="选择类别(入库)"
      @clickLeft="backAdd"
    >
      <!--右菜单-->
      <template slot="float">
        <!-- <view class="nav-icon-caozuo rightNav" @click="getsure">
					<u-button type="success" size="small" class="u-reset-button" text="选择"></u-button>
				</view> -->
      </template>
    </uni-nav-bar>
    <view class="searchBox">
      <input
        v-model="searchForm.code"
        placeholder="请输入关键字搜索"
        class="searchInput"
      />
      <u-button
        type="icon-shixiangxinzeng"
        size="30"
        data-icon="Search"
        class="searchBtn"
      >
        <view class="iconfont icon-sousuo"> </view>
        <view class="text"> 搜索 </view>
      </u-button>
    </view>
    <view class="tab-title">
      <view
        v-for="(item, index) in tabList"
        :key="index"
        class="tab-item"
        v-text="item.label"
        :class="index === pickTabIndex ? 'active' : ''"
        @click="changeChartsTab(index)"
      >
      </view>
      <view class="screenIcon" @click="openPopup" style="padding: 0 5rpx">
        <span class="screenText"> 筛选 </span>
        <uni-icons
          custom-prefix="iconfont"
          type="icon-shaixuan"
          size="18"
          color="#ccc"
        ></uni-icons>
      </view>
    </view>
    <view class="listContent">
      <view class="listBox" v-for="(item, index) in listData" :key="index">
        <view class="listBox-sel">
          <checkbox
            :value="item.code"
            color="#fff"
            :disabled="item.disabled"
            :checked="item.checked"
            @click="selectVal(item, index)"
          />
        </view>
        <view class="listBox-con">
          <view class="listBox-top">
            <view class="listBox-name">
              {{ item.name }}
            </view>
            <view class="listBox-code">
              {{ item.code }}
            </view>
          </view>
          <view class="listBox-bottom">
            <view class="bot-left"> 牌号：{{ item.mark }} </view>
            <view class="bot-right"> 时间：{{ item.creatTime }} </view>
          </view>
          <view class="listBox-bottom">
            <view class="bot-left"> 批次号：{{ item.batchNumber }} </view>
            <view class="bot-right"> 包装单位：{{ item.packingUnit }} </view>
          </view>
        </view>
      </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"
        @click="jumpAdd"
      >
        <view class="selBtn"> 选择( {{ checkListLen }} ) </view>
      </u-button>
    </view>
    <!-- 搜索组件 -->
    <get-Search
      :show="popupShow"
      :typeIndex="typeIndex"
      @openPopup="openPopup"
      @getPopupInfo="getPopupInfo"
    >
    </get-Search>
  </view>
</template>

<script>
import getSearch from './components/search'
import { post, postJ, get } from '@/utils/api.js'
let [page, size, isEnd] = [1, 20, true]
export default {
  components: {
    getSearch
  },
  data () {
    return {
      searchForm: {},
      tabList: [
        {
          value: '',
          label: '全部',
          list: []
        },
        {
          value: '1',
          label: '物料',
          list: []
        },
        {
          value: '2',
          label: '产品',
          list: []
        },
        {
          value: '3',
          label: '设备',
          list: []
        }
      ],
      pickTabIndex: 1,
      popupShow: false, //右侧搜索窗
      typeIndex: 1,
      listData: [], //列表数据
      seletedAll: false, //全选状态
      id: '',
      code: '',
      datas: ''
    }
  },
  //选择的列表长度
  computed: {
    checkListLen () {
      const list = this.listData.filter(el => {
        if (el.checked) {
          return el
        }
      })
      return list.length
    }
  },
  //触底刷新
  onReachBottom: function () {
    if (isEnd) {
      return
    }
    // 显示加载图标
    uni.showLoading({
      title: '数据加载中'
    })
    this.getMoreList()
  },
  onLoad (params) {
    this.datas = JSON.parse(params.data)
    console.log(data, typeof data, 'debugger')
  },
  mounted () {
    this.getInitList()
  },
  methods: {
    //列表数据
    async getInitList (...arg) {
      // uni.showLoading({
      // 	title: '加载中'
      // })
      let data = {
        page,
        size
      }
      //判断arg值
      if (arg.length > 0) {
        data = Object.assign(data, arg[0])
      }
      let info
      switch (this.pickTabIndex) {
        case 1:
          //物料
          // let materialsInfo = await get(this.apiWebUrl + "/main/material/type/tree", { model: 1 });
          // info = materialsInfo.data[0].code;
          // console.log(materialsInfo);
          let listArr = await post(
            this.apiUrl + '/wms/enter/material/V1/detaiList',
            {}
          )
          let arr = listArr.data.items
          arr.forEach(item => {
            item.checked = false
          })
          console.log(arr)
          this.listData = arr
          break
        case 2:
          //产品
          let productInfo = await get(this.apiUrl + '/main/product/type/tree', {
            model: 1
          })
          info = productInfo.data[0].code
          break
        case 3:
          let featureInfo = await get(this.apiUrl + '/feature/type/tree', {
            model: 1
          })
          console.log(featureInfo)
          info = featureInfo.data[0].code
          break
      }
      // this.listData.forEach((el) => {
      // 	this.$set(el, 'checked', true);
      // });
    },
    //切换tab
    changeChartsTab (index) {
      this.pickTabIndex = index
      this.getInitList()
    },
    //打开右侧搜索窗
    openPopup () {
      this.popupShow = !this.popupShow
    },
    //搜索传值
    getPopupInfo (val) {
      console.log(val)
    },
    //勾选
    selectVal (val, index) {
      // console.log(this.listData);
      this.listData[index].checked = !this.listData[index].checked
      let flag = false
      //取消全选
      this.listData.forEach(item => {
        if (item.checked == false) {
          flag = true
        }
      })
      if (flag) {
        this.seletedAll = false
      } else {
        this.seletedAll = true
      }
    },
    //全选按钮
    _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)
        })
      }
    },
    //获取更多数据
    getMoreList () {
      //获取更多数据
      page++
      this.getList()
    },
    //跳转回添加页面
    jumpAdd () {
      console.log(this.listData)
      let arr = this.listData.filter(item => {
        return item.checked == true
      })
      console.log(arr)
      let items = encodeURIComponent(JSON.stringify(arr))

      uni.getStorage({
        key: 'id_code',
        success: function (res) {
          this.id = res.data.id
          this.code = res.data.code
        }
      })

      uni.redirectTo({
        url:
          '/pages/warehouse/enterHouse/details?selectList=' +
          items +
          '&id=' +
          this.id +
          '&code=' +
          this.code
      })
    },
    //返回添加页
    backAdd () {
      uni.redirectTo({
        url: '/pages/warehouse/enterHouse/addStock'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.mainBox {
  .searchBox {
    position: fixed;
    top: 90rpx;
    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;
      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: 200rpx;
    margin-bottom: 100rpx;
    .listBox {
      display: flex;
      height: 180rpx;
      border-bottom: 2rpx solid #e5e5e5;

      .listBox-sel {
        height: 180rpx;
        width: 80rpx;
        line-height: 180rpx;
        text-align: center;
        checkbox {
          transform: scale(1.2);
        }
      }

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

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

          .listBox-name,
          .listBox-code {
            display: inline-block;
            width: 50%;
            font-size: 35rpx;
          }

          .listBox-code {
            width: 60%;
          }
        }

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

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

  //底部按钮
  .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;
    }
  }
}
</style>