aiot-app/pages/warehouse/material/index.vue

<template>
  <view class="mainBox">
    <uni-nav-bar
      fixed="true"
      statusBar="true"
      left-icon="back"
      title="物料入库单"
      @clickLeft="back"
    >
      <!--右菜单-->
      <template slot="float">
        <view class="nav-icon-caozuo rightNav" @click="openPopup">
          <uni-icons
            custom-prefix="iconfont"
            type="icon-shaixuan"
            size="18"
            color="#ccc"
          ></uni-icons>
        </view>
      </template>
    </uni-nav-bar>

    <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>
    <view class="tab-title__placeholder"></view>

    <view
      class="listBox"
      v-for="(item, index) in tabList[pickTabIndex].list"
      :key="index"
      @click="viewDetails(item.id, item.code)"
    >
      <view class="listTit">
        <view style="display: inline-block">
          <u-tag
            :text="item.status.name"
            size="mini"
            shape="circle"
            type="success"
            v-if="item.status.id === 99"
          ></u-tag>
          <u-tag
            :text="item.status.name"
            size="mini"
            shape="circle"
            type="warning"
            v-if="item.status.id === 2"
          ></u-tag>
          <u-tag
            :text="item.status.name"
            size="mini"
            shape="circle"
            type="primary"
            v-if="item.status.id === 11"
          ></u-tag>
          <u-tag
            :text="item.status.name"
            size="mini"
            shape="circle"
            bgColor="#999"
            borderColor="#999"
            v-if="item.status.id === 91"
          ></u-tag>
        </view>
        <view class="name">{{ item.code }}</view>
        <view class="date">{{ item.appointTime }}</view>
      </view>

      <view class="listCont">
        <view class="item"><text>仓库：</text>{{ item.warehouse.name }}</view>
        <view class="item"
          ><text>入库登记人：</text>{{ item.executor.name }}</view
        >
        <view class="item"><text>负责人：</text>{{ item.creator.name }}</view>
        <view class="item"><text>送货人：</text>{{ item.sendName }}</view>
      </view>

      <view class="listbtn">
        <view class="operBox">
          <view v-if="item.status.id == 2">
            <u-button
              type="success"
              size="small"
              text="受理"
              @click="getAccept(item.id)"
            ></u-button>
          </view>
          <view v-if="item.status.id == 2">
            <u-button
              type="primary"
              size="small"
              text="作废"
              @click="getInvalid(item.id)"
            ></u-button>
          </view>
        </view>
      </view>
    </view>

    <view class="footBox">
      <view class="add" @click="addStock">
        <uni-icons
          custom-prefix="iconfont"
          type="icon-shixiangxinzeng"
          size="20"
          color="#fff"
        ></uni-icons>
        新增入库单
      </view>
      <view class="reg" @click="regStock">
        <uni-icons
          custom-prefix="iconfont"
          type="icon-shixiangxinzeng"
          size="20"
          color="#fff"
        ></uni-icons>
        直接登记
      </view>
    </view>

    <get-Search
      :show="popupShow"
      @openPopup="openPopup"
      @getPopupInfo="getPopupInfo"
    ></get-Search>
  </view>
</template>

<script>
import { post, postJ } from '@/utils/api.js'
import getSearch from './components/search'
let [page, size, isEnd] = [1, 10, true]
export default {
  components: {
    getSearch
  },
  data () {
    return {
      tabList: [
        {
          value: '',
          label: '全部',
          list: []
        },
        {
          value: '2',
          label: '已指派',
          list: []
        },
        {
          value: '11',
          label: '已受理',
          list: []
        },
        {
          value: '99',
          label: '已完成',
          list: []
        }
      ],
      pickTabIndex: 0,
      popupShow: false, //右侧筛选
      popupInfo: {} //筛选数据
    }
  },
  onLoad () {
    this.getFirstList()
  },
  //触底加载
  onReachBottom: function () {
    if (isEnd) {
      return
    }
    // 显示加载图标
    uni.showLoading({
      title: '数据加载中'
    })
    this.getMoreLists()
  },
  methods: {
    getFirstList () {
      page = 1
      isEnd = true
      uni.showLoading({
        title: '数据加载中'
      })
      this.getList(this.popupInfo)
    },
    getMoreLists () {
      //获取更多数据
      page++
      this.getList(this.popupInfo)
    },
    //获取列表信息
    getList (...arg) {
      uni.showLoading({
        title: '加载中'
      })
      let data = {
        page,
        size
      }
      //判断arg值
      if (arg.length > 0) {
        data = Object.assign(data, arg[0])
      }
      let status = this.tabList[this.pickTabIndex].value
      post(this.apiWebUrl + '/wms/enter/material/list?status=' + status, data)
        .then(res => {
          if (res.success == true) {
            let data = res.data.items
            let pageTotal = res.data.pageTotal
            if (page === 1) {
              this.tabList[this.pickTabIndex].list = res.data.items
            } else {
              data.forEach(element => {
                this.tabList[this.pickTabIndex].list.push(element)
              })
            }
            page < pageTotal ? (isEnd = false) : (isEnd = true)
          }
        })
        .then(() => {
          uni.hideLoading()
        })
    },
    //切换tab
    changeChartsTab (index) {
      this.pickTabIndex = index
      this.getFirstList()
    },
    //打开右侧窗
    openPopup () {
      this.popupShow = !this.popupShow
    },
    //获取搜索信息
    getPopupInfo (res) {
      if (res.code) {
        this.popupInfo.code = res.code
      }
      if (res.range) {
        this.popupInfo.beginTime = res.range[0]
        this.popupInfo.endTime = res.range[1]
      }

      //重置数据
      this.pickTabIndex = 0
      page = 1

      //console.log(this.popupInfo);
      this.getList(this.popupInfo)
    },
    //受理
    getAccept (index) {
      let that = this
      uni.showModal({
        title: '温馨提示',
        content: '是否确定受理？',
        success: function (res) {
          if (res.confirm) {
            let data = {
              id: index
            }
            post(that.apiWebUrl + '/wms/enter/material/accept', data)
              .then(res => {
                //等待后端修改逻辑
              })
              .catch(res => {})
          } else if (res.cancel) {
            console.log('用户点击取消')
          }
        }
      })
    },
    //作废
    getInvalid (index) {
      let that = this
      uni.showModal({
        title: '温馨提示',
        content: '是否确定作废？',
        success: function (res) {
          if (res.confirm) {
            let data = {
              id: index
            }
            post(that.apiWebUrl + '/wms/enter/material/disable', data)
              .then(res => {
                uni.showToast({
                  icon: none,
                  title: '作废成功'
                })
              })
              .catch(res => {})
          } else if (res.cancel) {
            console.log('用户点击取消')
          }
        }
      })
    },
    //登记
    getRegister (index) {
      console.log('登记', index)
    },
    //新增入库单
    addStock () {
      uni.navigateTo({
        url: '/pages/warehouse/material/addStock'
      })
    },
    //直接登记
    regStock () {
      uni.navigateTo({
        url: '/pages/warehouse/material/regStock'
      })
    },
    //查看详情
    viewDetails (id, code) {
      uni.navigateTo({
        url: '/pages/warehouse/material/details?id=' + id + '&code=' + code
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.mainBox {
  padding-bottom: 120rpx;
}

.tab-title {
  position: fixed;
  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: 1px 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;
    }
  }
}

.listBox {
  padding: 20rpx 0;
  margin: 30rpx 20rpx;
  border-bottom: 1px #f2f2f2 solid;

  .listTit {
    display: flex;
    align-items: center;

    .name {
      font-size: $uni-font-size-base;
      margin-left: 10px;
    }

    .date {
      font-size: $uni-font-size-sm;
      margin-left: auto;
      color: #999;
    }
  }

  .listCont {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 15px;

    .item {
      width: 50%;
      font-size: $uni-font-size-sm;
      line-height: 48rpx;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      -o-text-overflow: ellipsis;
    }

    .item text {
      color: #666;
    }
  }

  .listbtn {
    margin-top: 20rpx;
    display: flex;
    justify-content: flex-end;
    align-items: center;

    .operBox {
      display: flex;
      align-items: center;
    }
  }

  .listbtn button {
    margin-right: 20rpx;
  }
}

.footBox {
  position: fixed;
  left: 0px;
  bottom: 0px;
  height: 100rpx;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;

  view {
    width: 50%;
    height: 100%;
    text-align: center;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .add {
    background: $uni-color-primary;
  }

  .reg {
    background: $u-success-dark;
  }

  .uni-icons {
    margin-right: 8rpx !important;
    font-weight: bold;
  }
}
</style>