YTAPP/pages/outbound/index.vue

<template>
	<view class="container">
		<view class="example">
			<!-- 基础表单校验 -->
			<uni-forms ref="valiForm" label-align="right" :rules="rules" :modelValue="valiFormData">
				<uni-forms-item label="单号" :required="true" name="orderNum">
					<uni-easyinput
						v-model="valiFormData.orderNum"
						placeholder="请输入单号"
						suffixIcon="scan"
						:focus="focusType"
						@iconClick="scan('orderNum')"
						@input="orderChange"
					/>
				</uni-forms-item>
				<uni-forms-item label="批次号" name="batch_number">
					<uni-data-select v-model="valiFormData.batch_number" :localdata="batchOptions" placeholder="请选择批次号"></uni-data-select>
				</uni-forms-item>

				<view v-if="orderInfo.order_id">
					<view v-if="!orderInfo.express_sn">
						<uni-forms-item label="物流公司" name="express_company_id">
							<uni-data-select v-model="valiFormData.express_company_id" :localdata="companyOptions" placeholder="请选择物流公司"></uni-data-select>
						</uni-forms-item>
						<uni-forms-item label="物流单号" name="express_no">
							<uni-easyinput v-model="valiFormData.express_no" placeholder="请输入物流单号" suffixIcon="scan" @iconClick="scan('express_no')" />
						</uni-forms-item>
						<uni-forms-item label="追踪单号" name="express_tracking_number">
							<uni-easyinput
								v-model="valiFormData.express_tracking_number"
								placeholder="请输入追踪单号"
								suffixIcon="scan"
								@iconClick="scan('express_tracking_number')"
							/>
						</uni-forms-item>
					</view>
				</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>

		<view class="history">
			<view class="item" v-for="(item, i) in historyList.slice(0, 5)" :key="i">
				<text class="code" :style="{ color: item.status ? 'green' : '#666' }">
					{{ item.orderNum }}
					<text v-if="item.batch_text">批次号: {{ item.batch_text }}</text>
					<text v-if="item.space">仓位编码: {{ item.space }}</text>
					{{ item.type }}
				</text>

				<uni-icons v-if="item.status" type="checkmarkempty" class="status" size="16" color="green"></uni-icons>
				<text class="status fail" v-else>F</text>

				<text style="margin-left: 10rpx; font-weight: 300">
					{{ '\r\n' + item.createTime }}
				</text>
			</view>
		</view>

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

		<uni-popup ref="printerDialog" type="dialog" :is-mask-click="false">
			<view style="width: 90%; margin: 0 auto; min-height: 250px; background-color: #fff; border-radius: 5px">
				<view class="" style="font-size: 20px; border-bottom: 1px solid #e1e1e1; padding: 15px 10px">
					<view>
						<view style="margin-bottom: 20px">
							<text>打印尾程面单</text>
						</view>
						<view>
							<view v-if="printerList">
								<view>
									<uni-data-checkbox
										multiple
										v-model="sendToPeinter"
										:localdata="[
											{
												text: '发送到标签打印机打印',
												value: 1
											}
										]"
										@change="sendToPeinterFun"
									>
										>
									</uni-data-checkbox>
									<uni-data-checkbox :disabled="sendToPeinter.length === 0" v-model="selectPrinter" :localdata="printers"></uni-data-checkbox>
								</view>
							</view>
						</view>
					</view>
					<view style="text-align: center; position: absolute; bottom: 10px; width: 90%; display: flex; margin: 0 auto; left: 0; right: 0">
						<button @click="close" style="width: 35%">关闭</button>
						<button
							@click="printConfirm"
							:hover-stay-time="500"
							:loading="subLoading"
							:disabled="sendToPeinter.length === 0 || subLoading"
							class="my-bt-bg"
							style="width: 35%"
						>
							打印
						</button>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>
<script setup lang="ts">
import permision from '@/common/permission.js';
import { ref, reactive, nextTick, computed } from 'vue';
import { onShow, onHide, onNavigationBarButtonTap } from '@dcloudio/uni-app';
import { outStockScanURL, printWaybillLabelURL, getBindParamsURL, getPrinterListURL, orderInfoURL, companyListURL } from '@/utils/api.js';

const message = ref();
const valiForm = ref();
const printerDialog = ref();
const token = ref(null);
const user = ref(null);
const loading = ref(false);
const messageType = ref('');
const messageText = ref('');
const batchOptions = ref([] as any);
const companyOptions = ref([] as any);

const orderInfo = ref({} as any);
const printerList = ref({} as any);
const historyList = ref([] as any);
const printers = ref([] as any);
const sendToPeinter = ref([1]);
const selectPrinter = ref(0);
const subLoading = ref(false);
const focusType = ref(true);
const result = ref();
// 校验表单数据
const valiFormData = reactive({
	orderNum: '',
	batch_number: '',
	typing: true,
	express_company_id: '',
	express_no: '',
	express_tracking_number: ''
});

const rules = computed(() => {
	return {
		orderNum: {
			rules: [
				{
					required: false,
					errorMessage: '单号不能为空'
				}
			]
		}
	};
});

onShow(() => {
	focusType.value = true;
	loading.value = false;
	token.value = uni.getStorageSync('token');
	user.value = uni.getStorageSync('user');
	getBindParams();
	getCompanyList();
	getPrinterList();
});
onHide(() => {
	focusType.value = false;
	loading.value = false;
});
onNavigationBarButtonTap((event: any) => {
	if (event.index === 0) {
		uni.navigateTo({
			url: '/pages/outbound/instockLog'
		});
	}
});

const getBindParams = () => {
	uni.request({
		url: getBindParamsURL,
		method: 'GET',
		header: {
			batoken: token.value
		},
		success: (res: any) => {
			if (res.data.code === 1) {
				batchOptions.value = res.data.data.batch_number.map((item) => {
					return {
						text: item.name,
						value: item.id
					};
				});
			}
		},
		fail(e) {
			console.log('fail--', e);
		}
	});
};

const getCompanyList = () => {
	uni.request({
		url: companyListURL,
		method: 'GET',
		header: {
			batoken: token.value
		},
		data: {
			limit: 100,
			order: 'id,desc'
		},
		success: (res: any) => {
			if (res.data.code === 1) {
				companyOptions.value = res.data.data.list.map((item) => {
					return {
						text: item.name,
						value: item.id
					};
				});
			}
		},
		fail(e) {
			console.log('fail--', e);
		}
	});
};

const getPrinterList = () => {
	uni.request({
		url: getPrinterListURL,
		method: 'GET',
		header: {
			batoken: token.value
		},
		success: (res: any) => {
			if (res.data.code === 1) {
				printerList.value = res.data.data.printers;
				printers.value = Object.values(printerList.value).map((item: any) => {
					return {
						text: item.name,
						value: item.value
					};
				});
			}
		},
		fail(e) {
			console.log('fail--', e);
		}
	});
};

let st2;
const orderChange = (res) => {
	valiFormData.orderNum = res;
	st2 && clearTimeout(st2);
	st2 = setTimeout(() => {
		getOrderInfoURL();
		clearTimeout(st2);
	}, 800);
};

const getOrderInfoURL = () => {
	if (valiFormData.orderNum.length === 0) {
		return;
	}
	uni.request({
		url: orderInfoURL,
		method: 'GET',
		header: {
			batoken: token.value
		},
		data: {
			order_no: valiFormData.orderNum
		},
		success: (res: any) => {
			if (res.data.code === 1) {
				orderInfo.value = res.data.data;
				// printerList.value = res.data.data.printers;
				// printers.value = Object.values(printerList.value).map((item: any) => {
				// 	return {
				// 		text: item.name,
				// 		value: item.value
				// 	};
				// });
			} else {
				orderInfo.value = {};
				messageType.value = 'error';
				messageText.value = res.data.msg;
				message.value.open();
			}
		},
		fail(e) {
			console.log('fail--', e);
		}
	});
};

const batchText = (batch_number) => {
	return batchOptions.value.find((item: any) => item.value === batch_number)?.text;
};

const reset = () => {
	loading.value = false;
	focusType.value = false;
	valiFormData.orderNum = '';
	valiFormData.batch_number = '';
	valiFormData.typing = true;
	nextTick(() => {
		focusType.value = true;
	});
};

const scan = async (key: string) => {
	// #ifdef APP-PLUS
	let status = await checkPermission();
	if (status !== 1) {
		return;
	}
	// #endif
	uni.scanCode({
		success: (res: any) => {
			result.value = res.result;
			valiFormData[key] = res.result;
			orderChange(res.result);
			// this.onsubmit();
		},
		fail: (err) => {
			// 需要注意的是小程序扫码不需要申请相机权限
		}
	});
};
// #ifdef APP-PLUS
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;
};
// #endif
let st;
const warehouseScan = async () => {
	st && clearTimeout(st);
	scanOutstock();
};

const scanOutstock = () => {
	console.log(valiFormData.orderNum, valiFormData.batch_number);
	if (valiFormData.orderNum.length === 0 && valiFormData.batch_number.length === 0) {
		messageType.value = 'error';
		messageText.value = '单号或批次号至少填一个';
		message.value.open();
		return;
	}
	loading.value = true;
	uni.request({
		url: outStockScanURL,
		method: 'POST',
		header: {
			batoken: token.value
		},
		data: {
			order_no: valiFormData.orderNum,
			batch_number: valiFormData.batch_number,
			express_company_id: valiFormData.express_company_id,
			express_no: valiFormData.express_no,
			express_tracking_number: valiFormData.express_tracking_number
		},
		success: (res: any) => {
			loading.value = false;
			if (res.data.code == 1) {
				messageType.value = 'success';
				messageText.value = res.data.msg;
				message.value.open();

				const historyItem = {
					orderNum: valiFormData.orderNum,
					batch_text: batchText(valiFormData.batch_number),
					createTime: new Date(),
					type: '出库',
					status: true
				};
				historyList.value.unshift(historyItem);
				historyList.value.length > 10 && (historyList.value.length = 10);
				uni.setStorageSync('outboundHistory', historyList.value);
				getHistory();
				if (res.data.data.labels && res.data.data.labels.length > 0) {
					console.log('有打印面单');
					// selectPrinter.value = sendToPeinter.value.length > 0 ? printers.value[0].value : 0;
					// printerDialog.value.open();
				} else {
					st = setTimeout(() => {
						reset();
						st && clearTimeout(st);
					}, 700);
				}
			} else {
				messageType.value = 'error';
				messageText.value = res.data.msg;
				message.value.open();
				const historyItem = {
					orderNum: valiFormData.orderNum,
					batch_text: batchText(valiFormData.batch_number),
					createTime: new Date(),
					type: '出库',
					status: false
				};
				historyList.value.unshift(historyItem);
				historyList.value.length > 10 && (historyList.value.length = 10);
				uni.setStorageSync('outboundHistory', historyList.value);
				getHistory();
				st = setTimeout(() => {
					reset();
					st && clearTimeout(st);
				}, 700);
			}
		}
	});
};

const close = () => {
	printerDialog.value.close();
	st = setTimeout(() => {
		reset();
		st && clearTimeout(st);
	}, 700);
};

const sendToPeinterFun = (res: any) => {
	if (!res.detail.value.length > 0) {
		selectPrinter.value = 0;
	} else {
		selectPrinter.value = printers.value[0].value;
	}
};
const printConfirm = () => {
	subLoading.value = true;
	uni.request({
		url: printWaybillLabelURL,
		method: 'POST',
		header: {
			batoken: token.value
		},
		data: {
			order_no: valiFormData.orderNum,
			printer_code: selectPrinter
		},
		success: (res) => {
			close();
			subLoading.value = false;
			console.log('打印成功', res);
			messageType.value = 'success';
			messageText.value = '打印成功';
			message.value.open();
		}
	});
};
const onsubmit = () => {
	valiForm.value
		.validate()
		.then((res) => {
			warehouseScan();
		})
		.catch((err) => {
			console.log('err', err);
		});
};
const getHistory = () => {
	historyList.value = uni.getStorageSync('outboundHistory');
};
</script>
<style lang="scss">
.example {
	padding: 15px;
	padding-top: 30px;
	background-color: #fff;
}

.checkbox-cum {
	margin-bottom: 20rpx;
	font-size: 14rpx;
}

.sub-choice {
	margin-bottom: 20rpx;
	margin-left: 20rpx;
	font-size: 14rpx;
}

.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;
	}
}

.weight-right {
	padding-right: 10rpx;
	font-size: 14rpx;
}

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

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

	.code {
		font-weight: 600;
	}

	.item {
		padding: 20rpx;
		font-size: 20rpx;
		color: #666;

		.status {
			padding-left: 20rpx;
		}

		.fail {
			font-weight: 600;
			color: #f00;
		}
	}
}
</style>
<style scoped>
.upload-container {
	padding: 16px;
}

.preview {
	display: flex;
	flex-wrap: wrap;
}

.image-container {
	position: relative;
	margin-right: 10px;
	margin-bottom: 10px;
}

.preview-image {
	width: 130rpx;
	height: 130rpx;
}

.delete-icon {
	position: absolute;
	top: 0;
	right: 0;
	cursor: pointer;
}

.choose-image-container {
	width: 130rpx;
	/* 与图片大小一致 */
	height: 130rpx;
	/* 与图片大小一致 */
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #fff;
	/* 背景颜色为白色 */
	border: 1px dashed #cccccc;
	/* 虚线边框 */
	border-radius: 5px;
	/* 圆角 */
	cursor: pointer;
}

.preview-modal {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.8);
	/* 半透明背景 */
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 999;
}

.preview-large {
	max-width: 90%;
	/* 最大宽度 */
	max-height: 90%;
	/* 最大高度 */
}

.progress-bar {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
}
</style>