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

<template>
	<!-- 报损报溢 -->
	<view class="main-wrap">
		<uni-search-bar class="uni-search-bar" @confirm="search" v-model="searchValue" @input="inputChange" cancelButton="none" placeholder="搜索关键字"></uni-search-bar>
		<view class="scroll_box">
			<scroll-view scroll-y="true" class="scroll-Y" @scrolltolower="lower">
				<view v-if="listData.length > 0" class="order-list">
					<view class="list-box" v-for="(item, index) in listData" :key="index">
						<view class="item">
							<view class="title">
								<text class="s1">报损报溢单号 {{ item.planProfitLossCode }}</text>
							</view>
							<view class="main">
								<view class="row">
									<view class="row-item">
										<text class="t1">批次号</text>
										<text class="t2">{{ item.batchNo }}</text>
									</view>
								</view>
								<view class="row">
									<view class="row-item">
										<text class="t1">盘点工单号</text>
										<text class="t2">{{ item.planOrderCode }}</text>
									</view>
								</view>
								<view class="row">
									<view class="row-item">
										<text class="t1">盘点人</text>
										<text class="t2">{{ item.planOrderUserName }}</text>
									</view>
								</view>
								<view class="row">
									<view class="row-item">
										<text class="t1">盈/损/亏</text>
										<text class="t2">{{ statusOpt[item.status] }}</text>
									</view>
									<view class="row-item">
										<text class="t1">数量</text>
										<text class="t2">{{ item[countKey[item.status]] }}</text>
									</view>
								</view>
								<view class="row">
									<view class="row-item">
										<text class="t1">报损报溢人</text>
										<text class="t2">{{ item.planProfitLossUserName }}</text>
									</view>
								</view>
								<view class="row">
									<view class="row-item">
										<text class="t1">审核时间</text>
										<text class="t2">{{ item.auditTime }}</text>
									</view>
								</view>
							</view>
						</view>
					</view>

					<!-- <u-collapse @change="change" @close="close" @open="open">
						<u-collapse-item v-for="(item, index) in listData" :key="index" :title="item.onlyCode" name="Docs guide">
							<template slot="title">
								<view style="display: flex; justify-content: space-between">
									{{ item.planProfitLossCode }}
								</view>
							</template>
							<view class="item">
								<view class="main">
									<view class="row">
										<view class="row-item">
											<text class="t1">批次号</text>
											<text class="t2">{{ item.batchNo }}</text>
										</view>
									</view>
									<view class="row">
										<view class="row-item">
											<text class="t1">盘点工单号</text>
											<text class="t2">{{ item.planOrderCode }}</text>
										</view>
									</view>
									<view class="row">
										<view class="row-item">
											<text class="t1">盘点人</text>
											<text class="t2">{{ item.planOrderUserName }}</text>
										</view>
									</view>
									<view class="row">
										<view class="row-item">
											<text class="t1">盈/损/亏</text>
											<text class="t2">{{ statusOpt[item.status] }}</text>
										</view>
										<view class="row-item">
											<text class="t1">数量</text>
											<text class="t2">{{ item[countKey[item.status]] }}</text>
										</view>
									</view>
									<view class="row">
										<view class="row-item">
											<text class="t1">报损报溢人</text>
											<text class="t2">{{ item.planProfitLossUserName }}</text>
										</view>
									</view>
									<view class="row">
										<view class="row-item">
											<text class="t1">审核时间</text>
											<text class="t2">{{ item.auditTime }}</text>
										</view>
									</view>
								</view>
							</view>
						</u-collapse-item>
					</u-collapse> -->
				</view>
				<view v-else class="no_data">暂无数据</view>
				<!-- <u-loadmore :status="status" fontSize="32" iconSize="36" style="margin: 20rpx 0" /> -->
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import { getPlandetails } from '@/api/warehouseManagement'
	import { debounce } from 'lodash'
	export default {
		props: ['categoryCode', 'categoryId', 'dimension'],
		data() {
			return {
				page: 1,
				size: 10,
				isEnd: true,
				listData: [],
				status: 'loading',
				searchValue: '',
				dict: {
					reportType: {
						0: '盘亏-',
						1: '盘盈+'
					}
				},
				countKey: {
					2: 'surplusQuantity',
					3: 'loseQuantity',
					4: 'wornQuantity'
				},
				statusOpt: {
					2: '盘盈',
					3: '盘亏',
					4: '盘损'
				},
				statusColor: {
					2: 'red',
					3: '#70B603',
					4: ''
				},
				timerId: null
			}
		},
		created() {
			this.getData()
			this.search = debounce(this.search, 1000)
		},
		methods: {
			inputChange() {
				// 清除timer对应的延时器
				clearTimeout(this.timerId)
				// 重新启动一个延时器,并把timerId赋值给this.timer
				this.timerId = setTimeout(() => {
					// 如果500毫秒内,没有触发新的输入事件,则为搜索关键词赋值
					this.search()
				}, 500)
			},
			// 触底
			lower() {
				if (this.isEnd) {
					return
				}
				this.getMoreLists()
			},
			getData() {
				let par = {
					pageNum: this.page,
					size: this.size,
					keyWord: this.searchValue,
					categoryId: this.categoryId
				}
				uni.showLoading({
					title: '加载中'
				})
				getPlandetails(par)
					.then(res => {
						this.listData = this.listData.concat(res.list)
						let length = res.count
						if (this.listData.length < length) {
							this.isEnd = false
						} else {
							this.isEnd = true
							this.status = 'nomore'
						}
					})
					.finally(() => {
						uni.hideLoading()
					})
			},
			getMoreLists() {
				this.page++
				this.getData()
			},
			search() {
				this.page = 1
				this.listData = []
				this.status = 'loading'
				this.getData()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.main-wrap {
		height: 100%;
		display: flex;
		flex-direction: column;
		overflow: hidden;
	}
	.scroll_box {
		flex: 1;
		overflow: hidden;
	}
	.scroll-Y {
		height: 100%;
		background-color: #fafafa;
	}
	.no_data {
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.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>