appWareHouse/pages/outBound/superviseOrderDetail.vue

<template>
	<view class="box-container">
		<u-navbar leftIconSize="25px" title="核对监装数据" :titleStyle="{fontWeight:700}" height="70px" @leftClick="leftClick"
			:autoBack="true">
		</u-navbar>
		<view class="entry-info">
			<u-tabs :list="tabList" @click="clicktab" :lineWidth="140" itemStyle="padding:20rpx 80rpx;"></u-tabs>
			<view style="padding: 10rpx;">
				<u-form labelPosition="left" labelWidth="9px" :model="ruleForm" :rules="rules" ref="ruleFormRef">
					<u-form-item prop="boxNo">
						<u-search :customStyle="{backgroundColor: '#F5F5F5'}" @clickIcon="getSearchData"
							@search="getSearchData" @scanIcon="getScanData" clearable placeholder="请输入或扫码箱号"
							v-model="ruleForm.boxNo" shape="round" :showAction="false">
						</u-search>
					</u-form-item>
				</u-form>
			</view>
			<view class="formContainer" v-show="tabIndex == 0">
				<view style="margin 15rpx;">
					<view v-for="item in boxNoList "
						style="display: flex;justify-content: space-between;padding: 10px 20px;border-bottom: 1px solid #dedfe0;">
						<view>
							{{item.boxNo}}
						</view>
						<view>{{item.sysIsVerifyStr}}</view>
					</view>
				</view>
			</view>
			<view v-show="tabIndex == 1">
				<view v-for="item in boxNoList "
					style="display: flex;justify-content: space-between;padding: 10px 20px;border-bottom: 1px solid #dedfe0;">
					<view>
						{{item.fbaNo}}
					</view>
					<view>{{item.fbaIsVerifyStr}}</view>
				</view>
			</view>


			<button type="primary" class="btn" @click="submitData">确认</button>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>
<script>
	import store from '@/store/index'
	import Api from '@/api/api.js'
	import {
		initScan,
		startScan,
		stopScan
	} from "@/libs/scan.js"
	export default {
		data() {
			return {
				ruleForm: {
					warehouseId: store.state.userInfo.branchId,
					orderNo: "",
					orderNos: [],
					workType: "8",
					location: "",
					number: "",
					userId: "",
					boxNo: ""
				},
				orderNoForm: {
					containerNo: "",
					outNo: "",
					verifyed: [],
					unVerify: [],
					outId: ""
				},
				rules: {
					boxNo: {
						type: 'string',
						required: true,
						message: '请选择订单号',
						trigger: ['blur']
					},

				},
				boxNoList: [],
				outNo: "",
				tabList: [{
					name: '监装箱号',
				}, {
					name: 'FBA箱号',
					badge: {
						value: 0,
					}
				}, ],
				tabIndex: 0
			}
		},
		onLoad(op) {
			console.log(op,'op')
			if (op.orderNo) {
				this.ruleForm.orderNo = op.orderNo
				this.outNo = op.outNo
				this.queryData(false)
			}
		},
		onShow(op) {
			initScan(this.scanSuccess);
			startScan();
		},
		onHide() {
			stopScan();
		},
		methods: {
			async scanSuccess(code) {
				// 下面就是写取到结果后的事情
				this.ruleForm.boxNo = code.trim()
				this.queryData()
			},
			getSearchData() {
				this.queryData()
			},
			getScanData() {
				uni.scanCode({
					success: (res) => {
						if (res.result) {
							this.ruleForm.boxNo = res.result.trim()
							this.queryData()
						}
					},
					fail: (err) => {

					},
					complete: () => {

					}
				})

			},
			submitData() {
				this.queryData()
			},
			queryData(val = true) {
					Api.storge.verifyBox({
						...this.ruleForm,
						isSubmit: val
					}).then(({
						data
					}) => {
						this.boxNoList = data.boxNoList
						this.tabList = [{
							name: '监装箱号 ' + data.sysVerifyCount,
						}, {
							name: 'FBA箱号 ' + data.fbaVerifyCount,

						}, ]
						if(val){
								this.$refs.uToast.show({
									type: 'success',
									message: "提交成功",
								})
						}
						if (data?.isCompelete) {
							Api.storge.verify({isSubmit:false,...this.ruleForm,orderNo:this.outNo}).then(res => {
								uni.navigateTo({
									url: `/pages/outBound/superviseLoadingDetail?data=${JSON.stringify({...res.data,orderNo:this.outNo})}`
								})

							})
						}
					})
				
			},

			clicktab(item) {
				this.tabIndex = item.index
			},
			leftClick() {},
		}
	}
</script>
<style lang="scss" scoped>
	.box-container {
		.entry-info {
			width: 85%;
			margin: auto;
			margin-top: 230rpx;

			.backgro {
				margin-top: 20rpx;
				width: 100%;
				height: 44rpx;
				background-color: #FBFCFE;
			}

			.formContainer {
				margin-left: 20prx;
			}

			.btn {
				border-radius: 12px;
				font-size: 28rpx;
				margin-top: 80rpx;
				background-color: #1A4F94;
			}

		}

	}
</style>