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>