rtk-wms-uniapp/pages/workbranch/warehouse/Inventory/inventoryPage.vue

<template>
	<gui-page :custom-header="true" :header-class="['gui-theme-background-color']">
		<template #gHeader>
			<view style="height:44px;" class="gui-flex gui-nowrap gui-rows gui-align-items-center">
				<text style="font-size:44rpx;" class="gui-header-leader-btns gui-color-white font-icons"
					@tap="goHome">&#xe6c5;</text>
				<text class="gui-h4 gui-blod gui-flex1 gui-text-center gui-ellipsis gui-color-white gui-primary-text"
					style="font-size: 1rem;">盘点列表</text>
				<view style="width:40px;" />
			</view>
		</template>
		<template #gBody>
			<view class="list-content">
				<!-- 搜索栏 -->
				<view class="search-bar">
					<!-- 业务类型查询条件 - 暂时注释 -->
					<!-- <view class="search-item">
						<text class="search-label">业务类型</text>
						<view class="search-select">
							<picker @change="onBusinessTypeChange" :range="businessTypeList" range-key="text" :value="businessTypeIndex">
								<view class="picker-text">{{ businessTypeList[businessTypeIndex]?.text || '请选择业务类型' }}</view>
							</picker>	
						</view>
					</view> -->
					<view class="search-item">
						<text class="search-label">申请单号</text>
						<view class="search-input-wrapper">
							<input type="text" v-model="billNo" placeholder="请输入申请单号" class="search-input" />
							<text class="scan-icon font-icons" @tap="scanCode">
								&#xe6b7;
							</text>
						</view>
					</view>
					<view class="search-btn" @tap="handleSearch">
						<text class="font-icons">搜索&#xe60c;</text>
					</view>
				</view>
				<view style="margin-top: 110px;">
					<view v-if="cardList?.length > 0" class="list-panel">
						<div v-for="(item, key) in cardList" :key="key" class="panel"
							@click="handleToScanMaterials(item)">
								<div class="panel-row">
									<span>{{ item.billNo }}</span>
									<span class="font-icons">前往扫描&#xe66b;</span>
								</div>
<!-- 								<div class="panel-row">
									<span>业务类型</span>
									<span></span>
								</div> -->
								<div class="panel-row">
									<span>业务状态</span>
									<span>{{ computedState(item.executeStatus,'status') }}</span>
								</div>
						</div>
					</view>
					<view v-else>
						<view class="bg-image">
							<image src="@/static/empty.png" mode="heightFix" />
							<text>这里什么都没有...</text>
						</view>
					</view>
				</view>
			</view>
		</template>
	</gui-page>
</template>

<script>
	import {
		onReachBottom
	} from '@dcloudio/uni-app'
	import {
		ref,
		defineComponent,
		computed,
		onMounted
	} from 'vue'
	export default defineComponent({
		setup() {
			const queryParams = ref({
		pageSize: 10,
		pageNo: 1,
		keyWord: '',
		businessType: ''
	})
	const cardList = ref([])
	const businessTypeList = ref([])
	const statusMap = ref({})
	const businessTypeIndex = ref(0)
	const selectedBusinessType = ref('')
	const billNo = ref('')

			const search = function(pageNo) {
				uni.$reqGet('inventoryGetStockCountList', {
					...queryParams.value,
					// businessType: selectedBusinessType.value,
					billNo: billNo.value,
					pageNo
				})
				.then(({
					data,
					msg
				}) => {
					cardList.value = data?.list ?? []
					if (billNo.value && cardList.value.length === 1) {
						handleToScanMaterials(cardList.value[0])
					}
				})
			}

			onMounted(() => {
		search(1)
		// 获取业务类型字典数据 - 暂时注释
		// uni.$reqGet('getDictDataPage', {
		// 	dictType: 'in_business_type',
		// 	pageNo: 1,
		// 	pageSize: 100
		// }).then(({ data }) => {
		// 	businessTypeList.value = [{ text: '请选择业务类型', value: '' }]
		// 	const dataList = data?.list || [];
		// 	for (var i = 0; i < dataList.length; i++) {
		// 		businessTypeList.value.push({
		// 			text: dataList[i].label,
		// 			value: dataList[i].value,
		// 		})
		// 	}
		// })
		uni.$reqGet('getDictDataPage', {
  dictType: 'in_out_status',
  pageNo: 1,
  pageSize: 100
}).then(({ data }) => {
  data?.list.forEach(item => {
    statusMap.value[item.value] = item.label
  })
})
	})
	const goHome = function() {
      uni.$goHome()
    }
			const goBack = function() {
				uni.removeStorageSync('masterId')
				uni.$goBack('/pages/workbranch/warehouse/Inventory/inventoryDetail')
			}

			const handleToScanMaterials = function(params) {
			    uni.setStorageSync('masterId', JSON.stringify({
			        id: params?.id,
			        businessType: params?.businessType
			    }))
			    
			    uni.navigateTo({
			            url: '/pages/workbranch/warehouse/Inventory/inventoryDetail'
			        })
			}
			
		const syncQueryParams = () => {
			queryParams.value.businessType = selectedBusinessType.value;
			queryParams.value.billNo = billNo.value;
		};

		// 业务类型选择变化 - 暂时注释
		// const onBusinessTypeChange = function(e) {
		// 	businessTypeIndex.value = e.detail.value
		// 	selectedBusinessType.value = businessTypeList.value[e.detail.value]?.value || ''
		// }
		
		const handleSearch = function() {
			queryParams.value.pageNo = 1
			syncQueryParams();
			search(1)
		}
		
		const scanCode = function() {
			uni.scanCode({
				success: function(res) {
					billNo.value = res.result
					handleSearch()
				},
				fail: function(err) {
					console.log('扫码失败', err)
					uni.showToast({
						title: '扫码失败',
						icon: 'none'
					})
				}
			})
		}

	onReachBottom(() => {
		queryParams.value.pageNo += 1
		syncQueryParams();
		uni.$reqGet('inventoryGetStockCountList', queryParams.value)
			.then(({data,msg}) => {
				Array.prototype.push.call(cardList.value, ...data?.list ?? [])
			})
	})

		const computedState = function (value, type = 'businessType') {
		  if (value === '' || value == null) return '未知'
		  if (type === 'businessType') {
		    const hit = businessTypeList.value.find(i => String(i.value).trim() === String(value).trim())
		    return hit ? hit.text : '未知'
		  }
		  if (type === 'status') {
		    return statusMap.value[value] || '未知'
		  }
		  return '未知'
		}

		return {
						goHome,
						goBack,
						cardList,
						handleToScanMaterials,
						businessTypeList,
						computedState,
						businessTypeIndex,
						// onBusinessTypeChange,
						handleSearch,
						billNo,
						scanCode
					}
		}
	})
</script>

<style lang="scss" scoped>
	.gui-header-leader-btns {
		color: black;
		font-size: 24px !important;
		margin-left: 24rpx;
	}

	.list-content {
		margin-top: 50px;
		min-height: calc(100vh - 80px);
		background-color: #edeeee;
	}
	
	.search-bar {
		position: fixed;
		top: 72px;
		left: 0;
		width: 100%;
		background-color: #fff;
		padding: 12px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
		display: flex;
		flex-wrap: wrap;
		gap: 12px;
		z-index: 9;
		box-sizing: border-box;
	}
	
	.search-item {
	    flex: 1 1 200px;
	    min-width: 200px;
	    display: flex;
	    align-items: center;
	    gap: 8px;
	    margin-bottom: 8px;
	}
	
	.search-input-wrapper {
		flex: 1;
	}
	
	.search-input {
					width: 90%;
					height: 36px;
					line-height: 36px;
					background-color: #f5f5f5;
					border-radius: 4px;
					padding: 0 12px;
					font-size: 12px;
					border: none;
				}
				
				.search-input-wrapper {
					flex: 1;
					position: relative;
				}
				
				.scan-icon {
					position: absolute;
					right: 10px;
					top: 50%;
					transform: translateY(-50%);
					font-size: 20px;
					color: #00a0e9;
					cursor: pointer;
				}
	
	.search-input:focus {
		outline: none;
		background-color: #fff;
		border: 1px solid #00a0e9;
	}
	
	.search-label {
		font-size: 12px;
		color: #666;
	}
	
	.search-select {
		flex: 1;
		position: relative;
	}
	
	.search-select picker {
	    display: flex;
	    align-items: center;
	    height: 36px;
	    line-height: 36px;
	    min-width: 120px;
	    background-color: #f5f5f5;
	    border-radius: 4px;
	    padding: 0 28px 0 12px;
	}
	
	.picker-text {
		font-size: 12px;
		color: #333;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	
	.picker-text::after {
	    position: absolute;
	    right: 8px;
	    top: 50%;
	    transform: translateY(-50%);
	}
	
	.search-btn {
		width: 80px;
		height: 36px;
		line-height: 36px;
		background-color: #00a0e9;
		color: #fff;
		border-radius: 4px;
		text-align: center;
		font-size: 12px;
	}
	
	.search-btn .font-icons {
		color: #fff;
		margin-right: 4px;
	}

	span,
	text {
		font-size: 12px;
	}

	.list-panel {
		padding: 12px;
	}

	.panel {
		background-color: white;
		border-radius: 8px;
		padding: 12px;
		margin-bottom: 12px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	}

	.panel-row {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 8px;

		&:last-child {
			margin-bottom: 0;
		}

		span:first-child {
			color: #666;
		}

		span:last-child {
			font-weight: bold;
		}

		.font-icons {
			color: #00a0e9;
			display: flex;
			align-items: center;
		}
	}

	.bg-image {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 60px 0;

		image {
			width: 120px;
			height: 120px;
			margin-bottom: 16px;
		}

		text {
			color: #999;
			font-size: 14px;
		}
	}
</style>