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

<template>
	<view class="mainBox">
		<uni-nav-bar fixed="true" statusBar="true" left-icon="back" :title="type + '单号 ' + form.outInId" @clickLeft="back"></uni-nav-bar>
		<view class="search-bar">
			<uni-search-bar class="uni-search-bar" @confirm="search" v-model="form.keyWord" @input="inputChange" cancelButton="none" placeholder="编码/名称"></uni-search-bar>
		</view>
		<view class="list-wrap">
			<view class="item" v-for="(item, index) in listData" :key="index">
				<view class="title">
					<view class="s1">{{ item.categoryCode }} ({{ item.categoryName }})</view>
					<view class="s2">{{ item.measureQuantity }} {{ item.measureUnit }}</view>
					<uni-icons v-if="item.open" type="up" size="20" @click="expand(index, false)"></uni-icons>
					<uni-icons v-else type="down" size="20" @click="expand(index, true)"></uni-icons>
				</view>
				<view class="main" :class="[item.open ? 'open' : 'close']">
					<view class="main-item" v-for="(itm, index) in tableHeader" :key="index">
						<view class="s1">{{ itm.label }}</view>
						<view class="s2" v-if="itm.formatter">{{ itm.formatter(item) }}</view>
						<view class="s2" v-else>{{ item[itm.prop] }}</view>
					</view>
				</view>
			</view>
		</view>
		<u-loadmore fontSize="32" iconSize="36" :status="status" style="margin-top: 20rpx" />
	</view>
</template>

<script>
	import { outInRecordsPage } from '@/api/warehouseManagement'
	let [page, size, isEnd] = [1, 20, true]
	export default {
		data() {
			return {
				type: '', // 出入库类型
				listData: [],
				form: {
					keyWord: '',
					outInId: '' // 出入库表单
				},
				timerId: null,
				dict: {
					code: {
						1: '生产设备',
						2: '舟皿',
						3: '物料',
						5: '周转车',
						6: '模具',
						7: '备品备件'
					}
				},
				status: 'loading'
			}
		},
		onLoad() {},
		onShow() {},
		//加载更多
		onReachBottom() {
			console.log('加载更多')
			if (isEnd) {
				return
			}
			this.getMoreLists()
		},
		onLoad(option) {
			this.form.outInId = option.bizNo
			this.type = option.type
		},
		created() {
			this.getData()
		},
		computed: {
			tableHeader() {
				return [
					{
						label: '牌号',
						prop: 'brandNum'
					},
					{
						label: '型号',
						prop: 'categoryModel'
					},
					{
						label: '规格',
						prop: 'specification'
					},
					{
						label: '批次号',
						prop: 'batchNo'
					},
					{
						label: '重量',
						prop: 'weight'
					},
					{
						label: '重量单位',
						prop: 'weightUnit'
					},
					{
						label: '包装编码',
						prop: 'packageNo'
					},
					{
						label: '包装数量',
						prop: 'packingQuantity'
					},
					{
						label: '包装单位',
						prop: 'packingUnit'
					},
					{
						label: '仓库',
						prop: 'warehouseName'
					}
				]
			}
		},
		methods: {
			expand(index, isOpen) {
				this.$set(this.listData[index], 'open', isOpen)
			},
			//筛选
			getData() {
				let par = JSON.parse(JSON.stringify(this.form))
				par.pageNum = page
				par.size = size
				outInRecordsPage(par).then(res => {
					this.listData = [...this.listData, ...res.list]
					let pages = res.count
					if (this.listData.length < pages) {
						isEnd = false
						this.status = 'loading'
					} else {
						isEnd = true
						this.status = 'nomore'
					}
				})
			},
			inputChange() {
				// 清除timer对应的延时器
				clearTimeout(this.timerId)
				// 重新启动一个延时器,并把timerId赋值给this.timer
				this.timerId = setTimeout(() => {
					// 如果500毫秒内,没有触发新的输入事件,则为搜索关键词赋值
					this.search()
				}, 500)
			},
			search() {
				this.listData = []
				this.getData()
			},
			getMoreLists() {
				page++
				this.getData()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.search-bar {
		display: flex;
		align-items: center;
		justify-content: space-between;

		.screen {
			display: flex;
			align-items: center;
			margin-right: 20rpx;

			.text {
				line-height: 1;
			}

			.image {
				width: 40rpx;
				height: 40rpx;
			}
		}

		.uni-search-bar {
			flex: 1;
		}
	}

	.list-wrap {
		.item {
			.title {
				display: flex;
				align-items: center;
				padding: 20rpx;
				border-bottom: 1px solid #333333;
				font-size: 28rpx;
				.s1 {
					flex: 1;
				}
			}

			.main {
				padding: 0 50rpx;
				background-color: #fcfcfc;
				transition: all 0.3s linear;
				overflow: hidden;
				.main-item {
					display: flex;
					justify-content: space-between;
					font-size: 28rpx;
					color: #aaaaaa;
					padding: 20rpx 0;

					& + .main-item {
						border-top: 1px dashed #aaaaaa;
					}
				}
			}
			.open {
				height: auto;
			}
			.close {
				height: 0;
			}

			.ckxq {
				font-size: 28rpx;
				color: #70b603;
				background-color: #f1fbe2;
				padding: 20rpx;
				text-align: center;
			}
		}
	}
</style>