YTAPP/pages/waybillNo/index.vue

<template>
	<view class="container">
		<uni-forms ref="valiForm" label-align="right" :label-width="80" :rules="rules" :modelValue="valiFormData">
			<view class="space-select">
				<uni-data-select v-if="!editSpaceNo" v-model="valiFormData.space_id" placeholder="请选择库位"
					:localdata="options.space" :clear="false"></uni-data-select>
				<uni-easyinput v-if="editSpaceNo" :value="space" :disabled="editSpaceNo" />
				<button v-if="!editSpaceNo" type="primary" @click="submitSpace">确认</button>
				<button v-if="editSpaceNo" type="primary" @click="editSpaceNo = false">修改</button>
			</view>
			<view>
				<uni-easyinput v-model="valiFormData.code" placeholder="请输入运单号" suffixIcon="scan" :focus="focusType"
					@iconClick="scanInput" />
			</view>

		</uni-forms>
		<view class="button-group">
			<button type="info" @click="reset">重置</button>
			<button type="primary" @click="onsubmit" :loading="loading">
				<uni-icons v-if="!loading" type="checkmarkempty" size="18" color="white"></uni-icons>
				提交
			</button>
		</view>
		<view v-if="waybillNoHistory.length > 0" class="history">
			<text class="title">记录(最近5条)</text>
		</view>
		<view class="history">
			<view class="item" v-for="(item, i) in waybillNoHistory.slice(0, 5)" :key="i">
				<view>
					<view>
						<text class="type">库位</text>
						<text class="code" :style="{ color: item.status ? 'green' : '#666' }">{{ item.space }}</text>
					</view>
					<view>
						<text class="type">单号</text>
						<text class="code" :style="{ color: item.status ? 'green' : '#666' }">{{ item.code }}</text>
					</view>
					<view class="space-time">
						<text>
							{{ item.createTime }}
						</text>
					</view>
				</view>
				<view>
					<uni-icons v-if="item.status" type="checkmarkempty" class="status" size="16"
						color="green"></uni-icons>
					<text class="status fail" v-else>F</text>
				</view>
			</view>
		</view>

		<uni-popup ref="messageRef" type="message">
			<uni-popup-message :type="messageType" :message="messageText" :duration="2000"></uni-popup-message>
		</uni-popup>
	</view>
</template>

<script setup lang="ts">
	import { reactive, ref, computed, nextTick } from 'vue';
	import permision from '@/common/permission.js';
	import { onShow, onLoad, onUnload, onHide, onBackPress, onNavigationBarButtonTap } from '@dcloudio/uni-app';
	import { waybillNoOptions, addWaybillNoURL, getWaybillsURL } from '@/utils/api.js';
	const token = ref();
	const editSpaceNo = ref(false);
	const loading = ref(false);
	const hidePage = ref(false);
	const focusType = ref(true);
	const waybillNoHistory = ref([]);
	const messageRef = ref();
	const messageType = ref();
	const messageText = ref();
	let st : NodeJS.Timeout;

	const valiFormData = ref({
		code: '',
		space_id: '',
	});

	const rules = reactive({
		code: {
			rules: [
				{
					required: true,
					errorMessage: '单号不能为空'
				}
			]
		}
	});

	const options = reactive({
		space: [] as any,
	});

	const checkPermission = async () => {
		let status = permision.isIOS ? await permision.requestIOS('camera') : await permision.requestAndroid('android.permission.CAMERA');

		if (status === null || status === 1) {
			status = 1;
		} else {
			uni.showModal({
				content: 'Camera permission required',
				confirmText: 'Setting',
				success: function (res) {
					if (res.confirm) {
						permision.gotoAppSetting();
					}
				}
			});
		}
		return status;
	};
	const scanInput = async () => {
		// #ifdef APP-PLUS
		let status = await checkPermission();
		if (status !== 1) {
			return;
		}
		// #endif
		uni.scanCode({
			success: (res : any) => {
				valiFormData.value.code = res.result;
				// onsubmit();
			},
			fail: (err) => {
				// 需要注意的是小程序扫码不需要申请相机权限
			}
		});
	};
	const reset = () => {
		loading.value = false;
		valiFormData.value.code = '';
		// editSpaceNo.value && (valiFormData.value.space_id = '');
	};

	const submitSpace = () => {
		if (valiFormData.value.space_id) {
			editSpaceNo.value = true
			setFocus()
		} else {
			messageType.value = 'error';
			messageText.value = '请选择库位';
			messageRef.value.open();
		}

	}
	const space = computed(() => {
		const res = options.space.find(item => item.value === valiFormData.value.space_id)
		return res?.text
	})

	const findPalletNumIdByValue = (data : any, targetValue : any) => {
		for (let i = 0; i < data.length; i++) {
			const item = data[i];
			// 检查当前项的 label
			if (item.id === targetValue || item.value === targetValue) {
				return [item.id];
			} else if (item.children && item.children.length > 0) {
				const childId = findPalletNumIdByValue(item.children, targetValue) as any;
				if (childId !== null) {
					return childId;
				}
			}
		}
		return null;
	};

	const onsubmit = () => {
		if (valiFormData.value.space_id && valiFormData.value.code) {
			st && clearTimeout(st);
			loading.value = true;
			uni.request({
				url: addWaybillNoURL,
				method: 'POST',
				header: {
					batoken: token.value
				},
				data: {
					code: valiFormData.value.code,
					space_id: valiFormData.value.space_id,
				},
				success: (res : any) => {
					loading.value = false;
					const space = options.space.find(item => item.value === valiFormData.value.space_id)
					if (res.data.code == 1) {
						messageType.value = 'success';
						messageText.value = res.data.msg;
						messageRef.value.open();
						const historyItem = {
							code: valiFormData.value.code,
							createTime: new Date(),
							type: '运单号',
							space: space.text,
							status: true
						};
						waybillNoHistory.value.unshift(historyItem);
						uni.setStorageSync('waybillNoHistory', waybillNoHistory.value);
						getHistory();
					} else {
						messageType.value = 'error';
						messageText.value = res.data.msg;
						messageRef.value.open();

						const historyItem = {
							code: valiFormData.value.code,
							createTime: new Date(),
							type: '运单号',
							space: space.text,
							status: false
						};
						waybillNoHistory.value.unshift(historyItem);
						uni.setStorageSync('waybillNoHistory', waybillNoHistory.value);
						getHistory();
					}
					st = setTimeout(() => {
						reset();
						setFocus();
						st && clearTimeout(st);
					}, 1000);
				}
			});
		} else {
			if (!valiFormData.value.space_id) {
				messageType.value = 'error';
				messageText.value = '请选择库位';
				messageRef.value.open();
			}
			if (!valiFormData.value.code) {
				messageType.value = 'error';
				messageText.value = '请填写运单号';
				messageRef.value.open();
			}
		}

	};

	const getHistory = () => {
		waybillNoHistory.value = uni.getStorageSync('waybillNoHistory') || [];
	};
	const keypress = (e : any) => {
		console.log(e, '按键码');
		// 102  左侧    103  右侧   104  中间按键
		if (e.keyCode === 102 || e.keyCode === 103 || e.keyCode === 104) {
			//这里按键成功
		}

		if (e.keyCode == 66) {
			//enter按键
			//这里input已经拿到数据了，在这里把拿到的数据，通过接口数据联调起来
			onsubmit();
		}
	};
	onLoad(() => {
		// #ifdef APP-PLUS
		plus.key.addEventListener('keyup', keypress);
		// #endif
		// #ifdef H5
		document.addEventListener('keyup', keypress);
		// #endif
	});
	onUnload(() => {
		// #ifdef APP-PLUS
		plus.key.removeEventListener('keyup', keypress);
		// #endif
		// #ifdef H5
		document.removeEventListener('keyup', keypress);
		// #endif
	});
	onHide(() => {
		hidePage.value = true;
		// #ifdef APP-PLUS
		plus.key.removeEventListener('keyup', keypress);
		// #endif
		// #ifdef H5
		document.removeEventListener('keyup', keypress);
		// #endif
	});
	onBackPress(() => {
		// #ifdef APP-PLUS
		plus.key.removeEventListener('keyup', keypress);
		// #endif
		// #ifdef H5
		document.removeEventListener('keyup', keypress);
		// #endif
	});
	onShow(() => {
		hidePage.value = false;
		token.value = uni.getStorageSync('token');
		getOptions();
		getHistory();
	});

	const getOptions = () => {
		uni.request({
			url: waybillNoOptions,
			method: 'GET',
			header: {
				batoken: token.value
			},
			success: (res : any) => {
				console.log(res);
				if (res.data.code === 1) {
					for (let key in res.data.data.space_id) {
						if (res.data.data.space_id.hasOwnProperty(key)) {
							options.space.push({ text: res.data.data.space_id[key], value: key })
						}
					}
				}
			},
			fail(e) {
				console.log('fail--', e);
			}
		});
	};

	const setFocus = () => {
		if (hidePage.value) {
			return;
		}
		focusType.value = false;
		nextTick(() => {
			focusType.value = true;
		});
	}

	onNavigationBarButtonTap((event) => {
		if (event.index === 0) {
			uni.navigateTo({
				url: '/pages/waybillNo/waybillNoLog'
			});
		}
	});
</script>

<style lang="scss">
	.container {
		padding: 15px;
		background-color: #fff;
	}

	.space-select {
		display: flex;
		flex-direction: row;
		margin-bottom: 20rpx;
	}

	button {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 35px;
		margin-left: 20rpx;
		font-size: 16rpx;
	}

	.weight-tip {
		color: gray;
		font-size: 12rpx;
	}

	.button-group {
		margin-top: 15px;
		display: flex;
		flex-direction: row;
		justify-content: space-around;

		button {
			display: flex;
			align-items: center;
			justify-content: center;
			height: 35px;
			width: 50%;
			margin-left: 10px;
			font-size: 16rpx;
		}

		.uni-icons {
			margin-right: 10px;
		}
	}

	.history {
		display: flex;
		width: 100%;
		flex-direction: column;
		justify-items: start;

		.title {
			padding: 20rpx;
			font-size: 24rpx;
			font-weight: 600;
		}

		.type {
			padding-right: 20rpx;
			font-size: 24rpx;
		}

		.code {
			font-weight: 600;
		}

		.item {
			padding: 20rpx;
			font-size: 20rpx;
			color: #666;
			display: flex;
			flex-direction: row;

			.status {
				padding-left: 20rpx;
			}

			.fail {
				font-weight: 600;
				color: #f00;
			}
		}

		.is-empty {
			text-align: center;
			margin: 40px 0;
			color: #999;
		}
	}
</style>