aiot-app/pages/warehouse/inventory/batch/components/outboundDelivery.vue

<template>
  <!-- 出库 -->
  <view class="main-wrap" :class="{ info: isInfo }">
    <uni-search-bar
      class="uni-search-bar"
      @confirm="search"
      v-model="searchValue"
      @input="search"
      cancelButton="none"
      placeholder="搜索关键字"
    >
    </uni-search-bar>

    <scroll-view scroll-y="true" class="scroll-Y" @scrolltolower="lower">
      <view class="order-list">
        <view class="item" v-for="(item, index) in listData" :key="index">
          <view class="title">
            <view class="s1"> 出库单号 {{ item.bizNum }} </view>
            <view class="s2">
              {{ dict.bizScene[item.bizScene] }}
            </view>
          </view>
          <view class="main">
            <view class="row">
              <view class="row-item">
                <text class="t1">出库数量</text>
                <text class="t2"
                  >{{ item.outInNum * item.measurementUnit
                  }}{{ item.unit }}</text
                >
              </view>
              <view class="row-item" v-if="!baseInfo.isUnpack">
                <text class="t1">包装数量</text>
                <text class="t2"
                  >{{ item.outInNum }}{{ item.minPackUnit }}</text
                >
              </view>
              <view class="row-item">
                <text class="t1">操作人</text>
                <text class="t2">{{ item.createUsername }}</text>
              </view>
              <view class="row-item" :class="{ w100: baseInfo.isUnpack }">
                <text class="t1">审核人</text>
                <text class="t2">{{ item.verifyName }}</text>
              </view>
            </view>
            <view class="row">
              <view class="row-item w100">
                <text class="t1">出库时间</text>
                <text class="t2">{{ item.verifyTime }}</text>
              </view>
            </view>
            <view class="ckmx" @click="goDetails(item)"> 查看明细 </view>
          </view>
        </view>
      </view>
      <u-loadmore :status="status" style="margin: 20rpx 0" />
    </scroll-view>
  </view>
</template>

<script>
import { post } from '@/utils/api.js'
let [page, size, isEnd] = [1, 10, true]
export default {
  props: ['batchNum', 'inventoryCode', 'isInfo', 'baseInfo'],
  data () {
    return {
      listData: [],
      status: 'loading',
      searchValue: '',
      dict: {
        bizScene: {
          1: '退供出库',
          2: '调拨出库',
          3: '销售出库',
          4: '领用出库',
          5: '报废出库'
        }
      }
    }
  },
  created () {
    this.getData()
  },
  methods: {
    // 触底
    lower () {
      console.log('触底')
      if (isEnd) {
        return
      }
      this.getMoreLists()
    },
    getData () {
      let par = {
        page,
        size,
        batchNum: this.batchNum,
        bizStatus: 2,
        inventoryCode: this.inventoryCode
      }
      if (this.searchValue !== '') {
        par.key = this.searchValue
      }
      par = this.URLSearchParams(par)
      post(
        this.apiUrl + '/InventoryBook/select/getInWarehouseDetail?' + par
      ).then(res => {
        if (res.success) {
          this.listData = [...this.listData, ...res.data.records]
          let pages = res.data.pages

          if (page < pages) {
            isEnd = false
          } else {
            isEnd = true
            this.status = 'nomore'
          }
        }
      })
    },
    getMoreLists () {
      page++
      this.getData()
    },
    search () {
      this.page = 1
      this.listData = []
      this.status = 'loading'
      this.getData()
    },
    goDetails (item) {
      let par = {
        bizNum: item.bizNum,
        batchNum: this.batchNum,
        isUnpack: this.baseInfo.isUnpack,
        type: '出库'
      }
      par = this.URLSearchParams(par)
      uni.navigateTo({
        url: '/pages/warehouse/inventory/order/order?' + par
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.main-wrap {
  height: calc(100% - 170rpx);
  &.info {
    height: calc(100% - 236rpx);
  }
}

.scroll-Y {
  height: calc(100vh - 112rpx);
  //height:100%;
  background-color: #fafafa;
}

.order-list {
  .item {
    background-color: #fff;
    margin-bottom: 30rpx;
    margin-bottom: 30rpx;

    .title {
      display: flex;
      padding: 20rpx;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #dedede;

      .s1 {
        color: #333333;
        font-size: 28rpx;
        font-weight: bold;
      }

      .s2 {
        font-size: 28rpx;
        font-weight: bold;
        color: #333333;
      }
    }

    .main {
      padding: 0 30rpx;

      .row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        .row-item {
          padding: 20rpx 0;
          width: 50%;
          border-bottom: 1px dashed #dedede;
          .t1 {
            font-weight: bold;
            font-size: 28rpx;
            color: #333333;
            margin-right: 20rpx;
          }

          .t2 {
            font-size: 28rpx;
            color: #333333;
          }
        }
      }

      .ckmx {
        color: #70b603;
        font-size: 28rpx;
        font-weight: bold;
        padding: 20rpx;
        display: flex;
        justify-content: flex-end;
      }
    }
  }
}
</style>