aiot-app/pages/warehouse/inventory/batch/components/ReportLoss.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">
				<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.onlyCode }}

								<text :style="{ color: statusColor[item.status] }">{{ statusOpt[item.status] }}</text>
							</view>
						</template>

						<view class="item">
							<view class="main">
								<view class="row" v-if="!baseInfo.isUnpack">
									<view class="row-item">
										<text class="t1">最小包装单位</text>
										<text class="t2">{{ item.measurementUnit }}{{ item.unit }} /{{ item.minimumUnit }}</text>
									</view>
								</view>
								<view class="row" v-if="dimension != 2">
									<view class="row-item">
										<text class="t1">批次号</text>
										<text class="t2">{{ item.batch }}</text>
									</view>
								</view>
								<view class="row">
									<view class="row-item">
										<text class="t1">单价</text>
										<text class="t2">
											<template v-if="item.univalence || item.univalence === 0">
												{{ item.univalence }}
												{{ priceList[item.univalenceUnit] }}
											</template>
										</text>
									</view>
								</view>
								<view class="row">
									<view class="row-item">
										<text class="t1">盘点工单号</text>
										<text class="t2">{{ item.workOrderCode }}</text>
									</view>
								</view>
								<view class="row">
									<view class="row-item">
										<text class="t1">盘点人</text>
										<text class="t2">{{ item.executeUserName }}</text>
									</view>
								</view>
								<view class="row">
									<view class="row-item">
										<text class="t1">报损溢单号</text>
										<text class="t2">{{ item.breakageOverflowCode }}</text>
									</view>
								</view>
								<view class="row">
									<view class="row-item">
										<text class="t1">操作人</text>
										<text class="t2">{{ item.reportName }}</text>
									</view>
								</view>
								<view class="row">
									<view class="row-item">
										<text class="t1">审核人</text>
										<text class="t2">{{ item.accraditationUserName }}</text>
									</view>
								</view>
								<view class="row">
									<view class="row-item">
										<text class="t1">更新库存时间</text>
										<text class="t2">{{ item.updateInventoryTime }}</text>
									</view>
								</view>
							</view>
						</view>
					</u-collapse-item>
				</u-collapse>
			</view>
			<u-loadmore :status="status" style="margin: 20rpx 0" />
		</scroll-view>
	</view>
</template>

<script>
	import { post, postJ } from '@/utils/api.js'
	let [page, size, isEnd] = [1, 20, true]
	import { debounce } from 'lodash'
	export default {
		props: ['batchNum', 'baseInfo', 'inventoryCode', 'isInfo', 'dimension'],
		data() {
			return {
				listData: [],
				status: 'loading',
				searchValue: '',
				dict: {
					reportType: {
						0: '盘亏-',
						1: '盘盈+'
					}
				},
				statusOpt: {
					1: '盘亏',
					2: '盘损',
					3: '盘盈'
				},
				statusColor: {
					1: '',
					2: '#F59A23',
					3: '#70B603'
				}
			}
		},
		created() {
			this.getData()
			this.search = debounce(this.search, 1000)
		},
		methods: {
			// 触底
			lower() {
				console.log('触底')
				if (isEnd) {
					return
				}
				this.getMoreLists()
			},
			getData() {
				let par = {
					batchNum: this.batchNum,
					informationId: this.baseInfo?.materialId,
					name: this.searchValue
				}
				if (this.searchValue !== '') {
					par.key = this.searchValue
				}
				// postJ(
				//   this.apiUrl +
				//     `/InventoryBook/select/getBreakageOverflowDetail?size=${size}&page=${page}`,
				//   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()
			}
		}
	}
</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;
					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>