emis-app/components/buns-order-templates/bo-page-fajian-scan-tmp.vue

<template>
	<tpx-layout>
		<template v-slot:body>
			<view class="blcok-white-noradius" style="margin-top: 0;">
				<u-row justify="between">
					<view style="flex:1;">
						<tpx-scan-input v-model:value="submitParam.billCode" placeholder="请输入或扫码"
							@scanChange="handleScanValChange" :showConfirm="true" @confirmClick="handleScanValChange" iconPos="left"></tpx-scan-input>
					</view>
				</u-row>
				<u-row custom-style="margin-top:20rpx;">
					<view style="flex: 1;">
						<tpx-select v-model:resObject="siteRes" :getListFun="getNextStationList" :transKeyVal="{valKey: 'destSite',titleKey: 'destSiteName'}" v-model:value="submitParam.preOrNextStationCode" mode="drop" placeholder="请选择下一网点"></tpx-select>
					</view>
				</u-row>
				
				<view class="mt-30">
					<u-button @click="handleSubmit()" type="primary" size="large" shape="square"
						custom-style="height:80rpx;font-size: 30rpx;border-radius: 14rpx;">确定</u-button>
				</view>
				
			</view>
			
			<view class="blcok-white-noradius">
				<bo-operator-tmp :list="resData.list">
					<template v-slot:titleRight>
						<button @click="goto(`deliveryDeal/sendList`)" size="mini">查看历史发件</button>
					</template>
				</bo-operator-tmp>
			</view>
			
			<view class="blcok-white-noradius">
				<bo-scanlist-tmp :resData="resData"></bo-scanlist-tmp>
			</view>
		</template>
		
		<template v-slot:footer>
		</template>
	</tpx-layout>
</template>

<script>
	import { debounce } from "@/common/util"
	import dayjs from "dayjs"
	import BoOperatorTmp from "@/components/buns-order-templates/bo-operator-tmp"
	import BoScanlistTmp from "@/components/buns-order-templates/bo-scanlist-tmp"
	
	import * as apiService from "@/common/api"
	import { scanTypeEnum, getScanParams, ansScanResponse } from "@/common/scanUtil"
	import { checkParams } from "@/common/validate"
	
	export default {
		components:{ BoOperatorTmp, BoScanlistTmp },
		props: {
			config:{
				default () {
					return {
						title: '发件'
					}
				}
			},
			queryOption:{
				default () {
					return {
						billCode: '', // 运单id
					}
				}
			}
		},
		computed: {
			
		},
		data() {
			return {
				submitParam: {
					billCode: '',
					preOrNextStationCode: '',
				},
				submitValidConfig: {
					preOrNextStationCode: { required: true, requiredMsg: '请选择下一网点' },
					billCode: { required: true, requiredMsg: '运单号不能为空' },
				},
				pageLoading: true,
				resData: {
					list: []
				},
				siteRes: {
					list: []
				},
				curScanItem: {},
			}
		},
		created() {
			this.initData();
		},
		
		methods: {
			getNextStationList: apiService.getNextStationList,
			initData() {
				this.submitParam.billCode = this.queryOption.billCode
			},
			async handleSubmit() {
				let extParam = {}
				await checkParams(this.submitParam, this.submitValidConfig)
				let scnParam = getScanParams(scanTypeEnum.faJian, { ...this.submitParam, ...extParam })
				let res = await apiService.scanRecord({...scnParam, _loading: true})
				let { bl, resItem } = ansScanResponse({ res, title: this.config.title })
				if(bl) {
					this.curScanItem = resItem
					this.resData.list.unshift({ ...resItem })
					this.resetForm()
				}
			},
			handleScanValChange: debounce(function(){
				this.handleSubmit()
			}),
			resetForm() {
				this.submitParam.billCode = ''
			}
		}
	}
</script>

<style lang="scss">
	@import '@/common/uni-nvue.scss';

	page {
		background-color: #F6F6F6;
		height: 100% !important;
	}
</style>
<style scoped lang="scss">
	.yditem{
		padding: 20rpx 0;
		border-top: 2px solid #F6F6F6;
	}
</style>