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

<template>
	<view>
		<uni-nav-bar fixed="true" statusBar="true" left-icon="back" title="库存查询" @clickLeft="back"></uni-nav-bar>
		<view class="top-wrapper">
			<uni-section>
				<uni-easyinput prefixIcon="search" style="width: 460rpx" v-model="form.keyWord" placeholder="请输入编码/名称/规格/型号">
				</uni-easyinput>
			</uni-section>
			<view style="display: flex;">
				<button class="search_btn" @click="search">搜索</button>
				<view class="more_search">
					<image src="~@/static/moreSearch.svg" mode="" @click="handlScreen"></image>
				</view>
			</view>
		</view>
		<view class="mainBox">
			<view class="scroll_box">
				<scroll-view scroll-y="true" class="scroll-Y" @scrolltolower="lower">
					<uni-table border stripe emptyText="暂无更多数据" style="width: 100%;">
						<uni-tr style="width: 100%;">
							<uni-th width="50" align="center">序号</uni-th>
							<uni-th width="120" align="center">名称</uni-th>
							<uni-th width="100" align="center">数量</uni-th>
							<uni-th width="100" align="center">重量</uni-th>
							<uni-th width="100" align="center">规格</uni-th>
							<uni-th width="100" align="center">型号</uni-th>
						</uni-tr>
						<!-- 表格数据行 -->
						<uni-tr v-for="(item, index) in listData" :key="index">
							<uni-td>
								<view @click="goDetails(item)">{{index+Number(1)}}</view>
							</uni-td>
							<uni-td>
								<view class="ellipsis" @click="goDetails(item)">
									{{ item.categoryCode }}({{ item.categoryName }})
								</view>
							</uni-td>
							<uni-td>
								<view @click="goDetails(item)">{{ item.measureQuantity }} {{ item.measureUnit }}</view>
							</uni-td>
							<uni-td>
								<view @click="goDetails(item)">{{ item.weight }}{{ item.weightUnit }}</view>
							</uni-td>
							<uni-td>
								<view @click="goDetails(item)">{{ item.specification }}</view>
							</uni-td>
							<uni-td>
								<view @click="goDetails(item)">{{ item.categoryModel }}</view>
							</uni-td>
						</uni-tr>
					</uni-table>
				</scroll-view>
			</view>
		</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)
				uni.showLoading({
					title: '加载中'
				})
				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'
							}
						})
						.finally(() => {
							uni.hideLoading()
						})
				} 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'
							}
						})
						.finally(() => {
							uni.hideLoading()
						})
				} 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'
							}
						})
						.finally(() => {
							uni.hideLoading()
						})
				}
				// 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) {
				console.log(item, 'eeeee')
				//   // 物料维度
				//   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.page = 1
				this.getData()
			},
			getMoreLists() {
				this.page++
				this.getData()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.mainBox {
		height: 100vh;
		width: 100%;
		display: flex;
		flex-direction: column;
	}

	.uni-easyinput__placeholder-class {
		font-size: 28rpx;
	}

	/deep/.uni-table {
		min-width: 100vw !important;
		font-size: 28rpx;

		.uni-table-td,
		.uni-table-th {
			padding: 10rpx !important;
			text-align: center !important;
			font-size: 28rpx;
			color: #000000;
		}
	}

	.ellipsis {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		max-width: 160px;
	}

	/* 当屏幕宽度小于600px时，调整最大宽度 */
	@media (max-width: 600px) {
		.ellipsis {
			max-width: 140px;
			/* 小屏幕下更小的最大宽度 */
		}
	}

	.top-wrapper {
		display: flex;
		height: 88rpx;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx;

		/deep/.uni-section {
			margin-top: 0px;
		}

		/deep/.uni-section-header {
			padding: 0px;

		}

		.search_btn {
			width: 120rpx;
			height: 70rpx;
			line-height: 70rpx;
			background: $theme-color;
			font-size: 28rpx;
			color: #fff;
		}

		.menu_icon {
			width: 44rpx;
			height: 44rpx;
			margin-left: 14rpx;
		}

		.more_search {
			display: flex;
			align-items: center;
			height: 70rpx;
			line-height: 70rpx;

		}

		/deep/.u-input {
			border: 1rpx solid #ccc;

			.u-input__content__field-wrapper__field {
				height: 40rpx !important;
			}
		}

		image {
			width: 52rpx;
			height: 52rpx;
			margin-left: 10rpx;
		}

	}

	.scroll_box {
		flex: 1;
		overflow: scroll;

		.scroll-Y {
			height: 100%;
		}
	}
</style>