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

<template>
	<!-- 批次明细 -->
	<view class="main-wrap" :class="{ info: isInfo }">
		<uni-search-bar class="uni-search-bar" @confirm="search" v-model="searchForm.batchNum" @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.batchNum }}</view>
						<view class="s2" v-if="baseInfo.assetType == 3" @click="_getAnalysisCertificate(item)">质检单</view>
					</view>
					<view class="main">
						<view class="row">
							<view class="row-item">
								<text class="t1">库存数量</text>
								<text class="t2">{{ item.realInventoryNum }}</text>
							</view>
							<view class="row-item">
								<text class="t1">计量单位</text>
								<text class="t2">{{ item.unit }}</text>
							</view>
						</view>
						<view class="row">
							<view class="row-item">
								<text class="t1">包装数量</text>
								<text class="t2">{{ item.measurementUnit }}</text>
							</view>
							<view class="row-item">
								<text class="t1">包装单位</text>
								<text class="t2">{{ item.minPackUnit }}</text>
							</view>
						</view>
						<view class="row">
							<view class="row-item">
								<text class="t1">首次入库时间</text>
								<text class="t2">{{ item.firstTime }}</text>
							</view>
						</view>
						<view class="row">
							<view class="row-item">
								<text class="t1">最近出库时间</text>
								<text class="t2">{{ item.lastTime }}</text>
							</view>
						</view>
						<!-- <view class="row">
              <view class="row-item">
                <text class="t1">质检单</text>
                <text
                  class="t2 text-success"
                  @click="_getAnalysisCertificate(item)"
                  >查看</text
                >
              </view>
            </view> -->
						<!-- <view class="ckmx" @click="goDetails(item)"> 查看明细 </view> -->
					</view>
				</view>
			</view>
			<u-loadmore :status="status" style="margin: 20rpx 0" />
		</scroll-view>
		<uni-popup ref="popup" type="center">
			<img class="popImg" :src="apiUrl + itemUrl" alt="" @click="clickImg()" />
		</uni-popup>
	</view>
</template>

<script>
	import { post, get } from '@/utils/api.js'
	let [page, size, isEnd] = [1, 10, true]
	export default {
		props: ['batchNum', 'inventoryCode', 'isInfo', 'dimension', 'baseInfo'],
		data() {
			return {
				listData: [],
				searchForm: {
					batchNum: '',
					isZero: ''
				},
				itemUrl: '',
				status: 'loading',
				searchValue: '',
				dictObj: {
					bizScene: {
						1: '生产入库',
						2: '采购入库',
						3: '赠送入库',
						4: '借用入库',
						5: '退还入库',
						6: '其他入库'
					}
				},
				certificate: '',
				certificateVisible: false
			}
		},
		created() {
			this.getData()
		},
		methods: {
			// 查看图片
			clickImg() {
				wx.previewImage({
					urls: [this.apiUrl + this.itemUrl], //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
					current: this.itemUrl, // 当前显示图片的http链接，默认是第一个
					success: function (res) {},
					fail: function (res) {},
					complete: function (res) {}
				})
			},
			// 触底
			lower() {
				console.log('触底')
				if (isEnd) {
					return
				}
				this.getMoreLists()
			},
			getData() {
				let par = {
					batchNum: this.searchForm.batchNum,
					bizStatus: 1,
					inventoryCode: this.inventoryCode,
					isZero: this.searchForm.isZero,
					dimension: +this.dimension
				}
				if (this.searchValue !== '') {
					par.key = this.searchValue
				}
				// post(this.apiUrl + `/InventoryBook/select/getDetail?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'
				// 		}
				// 	}
				// })
			},
			//质检单  资产类型、资产编码以及批次号获取质检单
			async _getAnalysisCertificate(row) {
				if (row.certificate) {
					this.certificate = row.certificate
					this.$refs.popup.open()
					return
				}
				// const res = await get(
				//   this.apiUrl + `/InventoryBook/select/getAnalysisCertificate`, {
				//     code: this.baseInfo.assetType,
				//     inventoryCode: this.inventoryCode,
				//     batchNum: row.batchNum
				//   }
				// )
				// if (res?.success) {
				//   if (res.data?.length) {
				//     this.itemUrl = res.data[0].accessUrl
				//     this.clickImg()
				//     // this.itemUrl = res.data[0].accessUrl
				//     // this.$refs.popup.open()
				//   } else {
				//     uni.showToast({
				//       title: '未上传质检单！',
				//       icon: 'none'
				//     })
				//   }
				// }
			},
			getMoreLists() {
				page++
				this.getData()
			},
			search() {
				this.page = 1
				this.listData = []
				this.status = 'loading'
				this.getData()
			},
			goDetails(item) {
				console.log(item)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.popImg {
		width: 400rpx;
		height: 400rpx;
	}

	.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: #70b603;
				}
			}

			.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>