rtk-wms-uniapp/pages/workbranch/warehouse/scanInOut/Out/scanOutPage.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="goBack">&#xe6c5;</text> -->
				<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="requestNo" placeholder="请输入申请单号" class="search-input" focus />
							<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.requestNo }}</span>
									<span class="font-icons">前往扫描&#xe66b;</span>
								</div>
								<div class="panel-row">
									<span>业务类型</span>
									<span>{{ computedState(item.businessType,'businessType') }}</span>
								</div>
								<div class="panel-row">
									<span>业务状态</span>
									<span>{{ computedState(item.status,'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 requestNo = ref('')

			const search = function(pageNo) {
					uni.$reqGet('getScanOutList', {
							...queryParams.value,
							businessType: selectedBusinessType.value,
							requestNo: requestNo.value,
							pageNo
						})
						.then(({
							data,
							msg
						}) => {
							cardList.value = data?.list ?? []
						})
			}

	onMounted(() => {
		search(1)
		// 获取业务类型字典数据
		uni.$reqGet('getDictDataPage', {
			dictType: 'inout_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// 例如 0→待出库  1→已出库
			  })
		})
	})
	const goHome = function() {
      uni.$goHome()
    }
	const goBack = function() {
		uni.removeStorageSync('masterId')
		// 返回到扫码类型选择页面
		uni.$goBack('/pages/workbranch/warehouse/scanInOut/scanInOutType')
	}

			const handleToScanMaterials = function(params) {
				// 存储数据，使用abc页面需要的键名
				uni.setStorageSync('masterId', JSON.stringify({
					id: params?.id,
					businessType: params?.businessType
				}))
				// 跳转到abc页面
				uni.navigateTo({
					url: `/pages/workbranch/warehouse/scanInOut/Out/scannedMaterials`
				})
			}
			
			// 同步搜索条件到queryParams
		const syncQueryParams = () => {
			queryParams.value.businessType = selectedBusinessType.value;
			queryParams.value.requestNo = requestNo.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) {
					// 将扫码结果填入申请单号输入框
					requestNo.value = res.result
					// 自动执行搜索
					handleSearch()
				},
				fail: function(err) {
					console.log('扫码失败', err)
					uni.showToast({
						title: '扫码失败',
						icon: 'none'
					})
				}
			})
		}

		// uniapp移动端触底事件
	onReachBottom(() => {
		queryParams.value.pageNo += 1
		syncQueryParams(); // 关键：把条件重新合并
		uni.$reqGet('getScanOutList', 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,
			requestNo,
			scanCode
			}
		}
	})
</script>

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

	.list-content {
		padding-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;        // 原来只有 flex:1
		    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;       // 防止被 flex 挤没
	    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 {
		min-height: 50vh; 
		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>