aiot-app/pages/warehouse/inventory/index.vue

<template>
	<view class="mainBox">
		<uni-nav-bar fixed="true" statusBar="true" left-icon="back" title="库存查询" @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 class="screen" @click="handlScreen">
				<text class="text">筛选</text>
				<image class="image" src="~@/static/moreSearch.svg" mode=""></image>
			</view>
		</view>
		<view class="scroll_box">
			<scroll-view scroll-y="true" class="scroll-Y" @scrolltolower="lower">
				<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="title">
					<view class="s1">
						{{ item.batchNum }}
					</view>
					<view class="s1">{{ item.categoryName }} ({{ item.categoryCode }})</view>
					<view class="s2">{{ item.measureQuantity }} {{ item.measureUnit }}</view>
				</view> -->
						<view class="main" :class="[item.open ? 'open' : 'close']">
							<!-- <view class="main-item" v-if="form.dimension == 2">
						<view class="s1">批次号</view>
						<view class="s2">
							{{ item.batchNum }}
						</view>
					</view> -->
							<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 class="main-item">
						<view class="s1">分类</view>
						<view class="s2">
							{{ item.classificationUrl }}
						</view>
					</view> -->
						</view>
						<view class="ckxq" @click="goDetails(item)">查看详情</view>
					</view>
					<u-loadmore fontSize="32" iconSize="36" :status="status" style="margin-top: 20rpx" />
				</view>
			</scroll-view>
		</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 class="ckxq" @click="goDetails(item)">查看详情</view>
			</view>
			<u-loadmore fontSize="32" iconSize="36" :status="status" style="margin-top: 20rpx" />
		</view> -->
		<screen ref="screen" @succeed="cabScreen" :dimension="form.dimension" :categoryLevelId="form.categoryLevelId" :warehouseId="form.warehouseId"></screen>
	</view>
</template>

<script>
	import { getProductList, getBatchList, getPackingList } from '@/api/warehouseManagement'
	import screen from './components/screen'
	export default {
		components: {
			screen
		},
		data() {
			return {
				page: 1,
				size: 20,
				isEnd: true,
				listData: [],
				form: {
					keyWord: '',
					// 列表维度
					dimension: 1,
					/* 资产类型 */
					categoryLevelId: '',
					/* 所属仓库 */
					warehouseId: ''
				},
				timerId: null,
				dict: {
					code: {
						1: '生产设备',
						2: '舟皿',
						3: '物料',
						5: '周转车',
						6: '模具',
						7: '备品备件'
					}
				},
				status: 'loading'
			}
		},
		onLoad() {},
		onShow() {},
		//加载更多
		onReachBottom() {
			console.log('加载更多')
			if (this.isEnd) {
				return
			}
			this.getMoreLists()
		},
		created() {
			this.getData()
		},
		computed: {
			tableHeader() {
				if (this.form.dimension == 1) {
					// 物品
					return [
						{
							label: '牌号',
							prop: 'brandNum'
						},
						{
							label: '型号',
							prop: 'categoryModel'
						},
						{
							label: '规格',
							prop: 'specification'
						},
						{
							label: '重量',
							prop: 'weight'
						},
						{
							label: '重量单位',
							prop: 'weightUnit'
						}
					]
				} else if (this.form.dimension == 2) {
					// 批次
					return [
						{
							label: '牌号',
							prop: 'brandNum'
						},
						{
							label: '型号',
							prop: 'categoryModel'
						},
						{
							label: '规格',
							prop: 'specification'
						},
						{
							label: '批次号',
							prop: 'batchNo'
						},
						{
							label: '重量',
							prop: 'weight'
						},
						{
							label: '重量单位',
							prop: 'weightUnit'
						}
					]
				} else {
					// 包装
					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'
						}
					]
				}

				switch (+this.form.categoryLevelId) {
					case 3:
						return [
							{
								label: '牌号',
								prop: 'brandNum'
							}
						]
					case 8:
						return [
							{
								label: '型号',
								prop: 'modelType'
							},
							{
								label: '规格',
								prop: 'specification'
							}
						]
					case 4:
						return [
							{
								label: '牌号',
								prop: 'brandNum'
							},
							{
								label: '型号',
								prop: 'modelType'
							}
						]
					case 5: //'周转车'
						return [
							{
								label: '规格',
								prop: 'specification'
							},
							{
								label: '材质',
								prop: 'texture',
								formatter(row) {
									const extendField = JSON.parse(row.extendField)
									return extendField.texture
								}
							}
							// {
							//   label: '长宽高',
							//   prop: '',
							//   formatter (row) {
							//     const extendField = JSON.parse(row.extendField)
							//     return `${extendField.length}*${extendField.width}*${extendField.high}`
							//   }
							// }
						]
					case 2: //'舟皿'
						return [
							{
								label: '规格',
								prop: 'specification'
							},
							{
								label: '型号',
								prop: 'modelType'
							}
							// {
							//   label: '长宽高',
							//   prop: '',
							//   formatter (row) {
							//     const extendField = JSON.parse(row.extendField)
							//     return `${extendField.length}*${extendField.width}*${extendField.high}`
							//   }
							// }
						]
					case 1: //'设备'
						return [
							{
								label: '型号',
								prop: 'modelType'
							},
							{
								label: '规格',
								prop: 'specification'
							}
						]
					case 6: //'模具'
						return [
							{
								label: '牌号',
								prop: 'brandNum'
							},
							{
								label: '型号',
								prop: 'modelType'
							}
							// {
							//   label: '收缩系数',
							//   prop: '',
							//   formatter (row) {
							//     const extendField = JSON.parse(row.extendField)
							//     return extendField.shrinkageCoefficient
							//   }
							// }
						]
					case 7: //'备品备件'
						return [
							{
								label: '规格',
								prop: 'specification'
							},
							{
								label: '型号',
								prop: 'modelType'
							}
						]
				}

				return []
			}
		},
		methods: {
			lower() {
				console.log('加载更多')
				if (this.isEnd) {
					return
				}
				this.getMoreLists()
			},
			expand(index, isOpen) {
				this.$set(this.listData[index], 'open', isOpen)
				console.log(this.listData[index])
			},
			//筛选
			getData() {
				// console.log('this.selectedDime-----------', this.selectedDime)
				// const dimension = this.$refs.refSeavch.dimension
				// console.log('this.dimension-----------', dimension)
				// const treeId = this.$parent.$parent.$parent.current.id
				// if (this.form.dimension == 1) {
				// 	// 物品维度
				// 	const data = storageApi.getProductList({
				// 		...where,
				// 		...order,
				// 		pageNum: page,
				// 		size: limit
				// 	})
				// 	return data
				// } else if (this.form.dimension == 2) {
				// 	// 批次维度
				// 	const params = {
				// 		categoryLevelId: treeId,
				// 		...where,
				// 		...order
				// 	}
				// 	const data = storageApi.getBatchList({
				// 		...params,
				// 		pageNum: page,
				// 		size: limit
				// 	})
				// 	return data
				// } else {
				// 	// 包装维度
				// 	let	params = {
				//     categoryLevelId: this.form.code,
				//     ...where,
				//     ...order
				//   }

				// 	const data = storageApi.getPackingList({
				// 		...params,
				// 		pageNum: page,
				// 		size: limit
				// 	})
				// 	return data
				// }
				let par = JSON.parse(JSON.stringify(this.form))
				par.pageNum = this.page
				par.size = this.size
				// par = this.URLSearchParams(par)
				console.log(par)
				if (this.form.dimension == 1) {
					getProductList(par).then(res => {
						console.log('res----', res)
						this.listData = [...this.listData, ...res.list]
						let pages = res.count
						console.log(this.page)
						console.log(pages)
						if (this.listData.length < pages) {
							this.isEnd = false
							this.status = 'loading'
						} else {
							this.isEnd = true
							this.status = 'nomore'
						}
					})
				} else if (this.form.dimension == 2) {
					getBatchList(par).then(res => {
						console.log('res----', res)
						this.listData = [...this.listData, ...res.list]
						let pages = res.count
						if (this.listData.length < pages) {
							this.isEnd = false
							this.status = 'loading'
						} else {
							this.isEnd = true
							this.status = 'nomore'
						}
					})
				} else {
					getPackingList(par).then(res => {
						console.log('res----', res)
						this.listData = [...this.listData, ...res.list]
						let pages = res.count
						if (this.listData.length < pages) {
							this.isEnd = false
							this.status = 'loading'
						} else {
							this.isEnd = true
							this.status = 'nomore'
						}
					})
				}
				// get(this.apiUrl + '/InventoryBook/select/getPage?' + 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'
				//     }
				//   }
				// })
			},

			handlScreen() {
				this.$refs.screen.open()
			},
			cabScreen(data) {
				console.log('data---', data)
				for (let key of Object.keys(data)) {
					this.form[key] = data[key]
				}
				this.page = 1
				this.listData = []
				this.search()
			},
			goDetails(item) {
				//   // 物料维度
				//   if (this.form.dimension == 1) {
				//     let par = {
				//       info: encodeURIComponent(JSON.stringify(item)),
				//       dimension: this.form.dimension,
				//       code: item.assetType
				//     }
				//     par = this.URLSearchParams(par)
				//     uni.navigateTo({
				//       url: '/pages/warehouse/inventory/details/details?' + par
				//     })
				//   }
				// 批次维度
				//   if (this.form.dimension == 2) {
				let par = {
					dimension: this.form.dimension,
					categoryCode: item.categoryCode,
					categoryId: item.categoryId,
					info: encodeURIComponent(JSON.stringify(item))
				}
				par = this.URLSearchParams(par)
				uni.navigateTo({
					url: '/pages/warehouse/inventory/batch/batch?' + par
				})
				//   }
			},
			inputChange() {
				// 清除timer对应的延时器
				clearTimeout(this.timerId)
				// 重新启动一个延时器,并把timerId赋值给this.timer
				this.timerId = setTimeout(() => {
					// 如果500毫秒内,没有触发新的输入事件,则为搜索关键词赋值
					this.search()
				}, 500)
			},
			search() {
				this.listData = []
				this.getData()
			},
			getMoreLists() {
				this.page++
				this.getData()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.mainBox {
		height: 100vh;
		width: 100%;
		display: flex;
		flex-direction: column;
	}
	.search-bar {
		height: 100rpx;
		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;
		}
	}
	.scroll_box {
		flex: 1;
		overflow: scroll;
		.scroll-Y {
			height: 100%;
			.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>