aiot-app/pages/warehouse/inventory/order/order.vue

<template>
  <!-- 单号 -->
  <view class="main-wrap">
    <uni-nav-bar fixed="true" statusBar="true" left-icon="back" :title="'单号 ' + bizNum" @clickLeft="back">
    </uni-nav-bar>
    <uni-search-bar class="uni-search-bar" @confirm="search" :focus="true" v-model="searchValue" @input="search"
      cancelButton="none" placeholder="搜索关键字">
    </uni-search-bar>
    <view class="list-wrap" v-if="type !== '调拨'">
      <uni-table border stripe emptyText="暂无更多数据">
        <!-- 表头行 -->
        <uni-tr>
          <uni-th align="left" width="240rpx">物品</uni-th>
          <block v-if="!isUnpack">
            <uni-th align="left" width="170rpx" :sortable="true">最小单元</uni-th>
          </block>
          <uni-th align="left" width="170rpx" :sortable="true" @sort-change="sortChange('bzsl', $event)">
            生产日期/采购日期</uni-th>
          <uni-th align="left" width="170rpx" :sortable="true" @sort-change="sortChange('bzsl', $event)">过期时间</uni-th>
        </uni-tr>
        <!-- 表格数据行 -->
        <uni-tr v-for="(item, index) in listData" :key="index">
          <uni-td>{{ item.onlyCode }}</uni-td>
          <uni-td v-if="!isUnpack">{{ item.measurementUnit }}{{ item.unit }}/{{
              item.minPackUnit
            }}</uni-td>
          <uni-td>{{ item.manufactureTime || item.procurementTime }}</uni-td>
          <uni-td>{{ item.expirationTime }}</uni-td>
        </uni-tr>
      </uni-table>
    </view>
    <view class="order-list" v-else>
      <view class="item" v-for="(item, index) in listData" :key="index">
        <!-- <view class="title">
					<view class="s1">
						条码号 
					</view>
					<view class="s2">
						
					</view>
				</view> -->
        <view class="main">
          <view class="row">
            <view class="row-item">
              <text class="t1">最小单元</text>
              <text class="t2"></text>
            </view>
            <view class="row-item">
              <text class="t1"></text>
              <text class="t2">{{ item.measurementUnit }}{{ item.unit }}/{{
                  item.minPackUnit
                }}</text>
            </view>
          </view>
          <view class="row">
            <view class="row-item">
              <text class="t1">生产日期/采购日期</text>
              <text class="t2"></text>
            </view>
            <view class="row-item">
              <text class="t1"></text>
              <text class="t2">{{
                item.manufactureTime || item.procurementTime
              }}</text>
            </view>
          </view>
          <view class="row">
            <view class="row-item">
              <text class="t1">过期时间</text>
              <text class="t2"></text>
            </view>
            <view class="row-item">
              <text class="t1"></text>
              <text class="t2">{{ item.expireTime }}</text>
            </view>
          </view>
          <view class="row">
            <view class="row-item">
              <text class="t1">调出货位</text>
              <text class="t2"></text>
            </view>
            <view class="row-item">
              <text class="t1"></text>
              <text class="t2">{{ item.warehouseName }}/{{ item.outWarehouseAreaName }}/{{
                  item.outWarehouseAreaGoodsCode
                }}/{{ item.outGoodsAllocationCode }}</text>
            </view>
          </view>
          <view class="row">
            <view class="row-item">
              <text class="t1">调入货位</text>
              <text class="t2"></text>
            </view>
            <view class="row-item">
              <text class="t1"></text>
              <text class="t2">{{ item.inWarehouseName }}/{{ item.inWarehouseAreaName }}/{{
                  item.inWarehouseAreaGoodsCode
                }}/{{ item.inGoodsAllocationCode }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
    <u-loadmore :status="status" style="margin-top: 20rpx" />
  </view>
</template>

<script>
  let [page, size, isEnd] = [1, 20, true]
  import {
    post,
    get
  } from '@/utils/api.js'
  export default {
    data() {
      return {
        listData: [],
        status: 'loading',
        searchValue: '',
        // 单号
        bizNum: '',
        // 批次号
        batchNum: '',
        // 单号类型
        type: '',
        isUnpack: false
      }
    },
    onLoad(option) {
      this.bizNum = option.bizNum
      this.isUnpack = option.isUnpack === 'false' ? false : true
      this.batchNum = option.batchNum
      this.type = option.type
      this.getData()
    },
    onReachBottom() {
      console.log('触底')
      if (isEnd) {
        return
      }
      this.getMoreLists()
    },
    methods: {
      sortChange(type, e) {
        console.log(type, e)
        let order = e.order
        this.listData.sort((a, b) => {
          switch (order) {
            // 下降
            case 'descending':
              return a[type] - b[type]
              break
              // 上降
            case 'ascending':
              return b[type] - a[type]
              break
              // 正常
            case null:
              break
            default:
              break
          }
        })
      },
      getData() {
        let par = {
          page,
          size
        }
        let url = ''
        switch (this.type) {
          case '入库':
            par.batchNum = this.batchNum
            par.bizNum = this.bizNum
            par.bizStatus = 1
            url = '/InventoryBook/select/getWarehouseSceneDetail?'
            break
          case '出库':
            par.batchNum = this.batchNum
            par.bizNum = this.bizNum
            par.bizStatus = 2
            url = '/InventoryBook/select/getWarehouseSceneDetail?'
            break
          case '调拨':
            par.batchNum = this.batchNum
            par.bizNum = this.bizNum
            url = '/InventoryBook/select/getTransferDetail?'
            break
          default:
            break
        }
        if (this.searchValue !== '') {
          par.name = this.searchValue
        }
        par = this.URLSearchParams(par)
        post(this.apiUrl + url + par).then(res => {
          if (res.success) {
            this.listData = [...this.listData, ...res.data]
            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()
      }
    }
  }
</script>

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

  .scroll-Y {
    height: calc(100% - 112rpx);
  }

  .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;
          padding: 20rpx 0;
          border-bottom: 1px dashed #dedede;

          .row-item {
            .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>