appWareHouse/pages/outBound/superviseLoadingDetail.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">
			<view style="padding: 10rpx;">
				<u-text text="出库编码"></u-text>
				<u-text :text="orderNoForm.outNo"></u-text>
			</view>
			<view style="margin-top: 10px;padding: 10rpx;">
				<u-text text="柜号"></u-text>
				<u-text :text="orderNoForm.containerNo"></u-text>
			</view>
			<view style="margin-top: 10px;padding: 10rpx;">
				<u-text text="监装方式" @click="openPicker"></u-text>
				<u-text :text="orderNoForm.containerNo1" @click="openPicker"></u-text>
				<u-picker
				      ref="pickerRef"
					  :show="show"
				      :mode="pickerMode"
				      :columns="pickerOptions"
				      v-model="selectedValue"
				      @confirm="onConfirm"
				      @cancel="show = false"
				    />
			</view>
			<view class="backgro"></view>
			<view style="padding: 10rpx;" v-show="orderNoForm.containerNo1 == '按票监装'">
				<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.busNo" shape="round" :showAction="false">
						</u-search>
					</u-form-item>
				</u-form>
			</view>
			<view v-show="orderNoForm.containerNo1 == '按票监装'">
				<view v-for="item in boxNoOrderList "
					style="display: flex;justify-content: space-between;padding: 10px 20px;border-bottom: 1px solid #dedfe0;">
					<view>
						{{item.orderNo}}
					</view>
					<view>
						{{item.verifyStatus}}
					</view>
				</view>
			</view>
			
			<view v-show="orderNoForm.containerNo1 == '按箱监装'">
				<u-tabs  :list="tabList" @click="clicktab" :lineWidth="90"></u-tabs>
			</view>
			<view  class="formContainer" v-show="tabIndex == 0&&orderNoForm.containerNo1 == '按箱监装'">
				<view style="margin 15rpx;">
					<view v-for="item in unVerifyList " >
						<view style="display: flex;justify-content: space-between;padding: 10px 20px;border-bottom: 1px solid #dedfe0;" @click="goVerifyDetail(item.orderNo)">
							<view>
								订单号
							</view>
							<view>
								{{item.orderNo}}
							</view>
							<view>{{item.warehouseName}}</view>
						</view>
						
					</view>
				</view>
			</view>
			<view v-show="tabIndex == 1">
				<view style="margin-top: 10px;padding: 15rpx;" v-for="(item,index) in orderNoForm.verifyed"
					:key="index">
					<view style="display: flex;align-items: center;justify-content: space-between;">
						<view>
							<u-text text="订单号"></u-text>
							<u-text :text="item.orderNo"></u-text>
						</view>
						<u-icon name="close-circle" size="18px" @click="moveVerifyed(item.orderNo)"></u-icon>
					</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 {
				show:false,
				  selectedValue: '', // 当前选中的值
				      pickerOptions: [['按箱监装', '按票监装']], // 下拉选项
				      pickerMode: 'selector' ,// selector模式下拉
				ruleForm: {
					warehouseId: store.state.userInfo.branchId,
					orderNo: "",
					busNo: "",
					orderNos: [],
					workType: "8",
					location: "",
					number: "",
					userId: "",
				},
				orderNoForm: {
					containerNo: "",
					containerNo1: "按箱监装",
					outNo: "",
					verifyed: [],
					unVerify: [],
					outId: ""
				},
				rules: {
					orderNos: {
						type: 'array',
						required: true,
						message: '请选择订单号',
						trigger: ['blur']
					},

				},
				unVerifyList: [],
				checked: false,
				tabList: [{
					name: '选择监装订单',
				}, {
					name: '已监装订单',
					badge: {
						value: 0,
					}
				}, ],
				boxNoList: [],
				boxNoOrderList: [],
				tabIndex: 0
			}
		},
		onShow(op) {
			initScan(this.scanSuccess);
		},
		onLoad(op) {
			if (op.data) {
				 // 获取本地存储的值
				    const storedContainerNo1 = uni.getStorageSync('containerNo1');
				    if (storedContainerNo1) {
						console.log(storedContainerNo1,'storedContainerNo1')
				        this.orderNoForm.containerNo1 = storedContainerNo1;
				    }
				const resData = JSON.parse(op.data)
				Object.assign(this.orderNoForm, resData)
				console.log(this.orderNoForm,'this.orderNoForm')
				console.log(resData,'this.orderNoForm')
				this.ruleForm.orderNo = resData.orderNo
				this.ruleForm.outNo = resData.outNo
				this.boxNoOrderList = resData.verifyOrder
				// this.handleContainerNoChange(false);
				this.unVerifyList = resData?.unVerify || []
				if (resData?.verifyed && Array.isArray(resData?.verifyed)) {
					this.tabList[1].badge.value = resData?.verifyed?.length || 0
				}
 console.log(this.ruleForm, 'this.boxNoOrderList');
			}
		},
		 // watch: {
		 //    // 监听 containerNo1 的变化
		 //    'orderNoForm.containerNo1': function(newVal, oldVal) {
		 //      if (newVal) {
		 //        // 当 containerNo1 发生变化时，执行你需要的逻辑
		 //        console.log(`containerNo1 从 ${oldVal} 变为 ${newVal}`);
			// 	if(newVal==='按票监装'){
			// 		console.log(this.ruleForm,'this.ruleForm')
			// 		this.handleContainerNoChange(); // 调用自定义的方法处理变化
			// 	}
		 //      }
		 //    }
		 //  },
		methods: {
					getSearchData() {
						this.handleContainerNoChange(true)
					},
					async scanSuccess(code) {
						// 下面就是写取到结果后的事情
						this.ruleForm.busNo = code.trim()
						this.handleContainerNoChange(true)
					},
					getScanData() {
						uni.scanCode({
							success: (res) => {
								if (res.result) {
									this.ruleForm.busNo = res.result.trim()
									this.handleContainerNoChange(true)
								}
							},
							fail: (err) => {
					
							},
							complete: () => {
					
							}
						})
					
					},
					openPicker() {
						this.show = true;
					},
					handleContainerNoChange(val) {
					  // 调用 Api.storge.verifyOrder 接口
					  Api.storge.verifyOrder({
					    ...this.ruleForm, // 扩展现有表单数据
						isSubmit: val
					  })
					  .then(({ data }) => {
					    // 接口成功返回数据，更新 boxNoOrderList
					    this.boxNoOrderList = data.verifyOrder;
					    console.log(this.boxNoOrderList,this.ruleForm, 'this.boxNoOrderList');
					  })
					  .catch((err) => {
					    // 处理错误情况
					    console.log(err, 'errr');
					  });
					},

				  // 确认选择后的操作
				    onConfirm(event) {
						this.show = false;
						this.orderNoForm.containerNo1 = event.value[0]
						 // 存储选中的值
						        uni.setStorageSync('containerNo1', this.orderNoForm.containerNo1);
				      console.log('选中的值是：', this.selectedValue);
					   const storedContainerNo1 = uni.getStorageSync('containerNo1');
					  console.log(storedContainerNo1,'storedContainerNo1')
				    },
					
					
			moveVerifyed(orderNo) {
				uni.showModal({
					title: `移除监装订单`,
					content: `是否将订单号为${orderNo}转成未监装状态`,
					success: (res) => {
						if (res.confirm) {
							Api.storge.fallbackVerify({
								"outNo": this.orderNoForm.outNo,
								orderNo,
							}).then(res => {
								Object.assign(this.orderNoForm, res.data)
								this.ruleForm.orderNos = []
								this.unVerifyList = res?.data?.unVerify || []
								if (res?.data?.verifyed && Array.isArray(res?.data?.verifyed)) {
									this.tabList[1].badge.value = res?.data?.verifyed.length
								}
								this.$refs.uToast.show({
									type: 'success',
									message: "移除成功",
								})

							})

						}
					}
				})
			},
			clicktab(item) {
				this.tabIndex = item.index
			},
			leftClick() {},

			goVerifyDetail(val){
				// this.handleContainerNoChange(true);
				uni.navigateTo({
					url: `/pages/outBound/superviseOrderDetail?orderNo=${val}&&outNo=${this.ruleForm.outNo}`
				})
			},
			submitData() {
				// if (this.unVerifyList.length) {
				// 	this.$refs.uToast.show({
				// 		type: 'warning',
				// 		message: "请监装完所有订单号",
				// 	})
				// 	return
				// }
				this.ruleForm.isSubmit = true
				Api.storge.verify(this.ruleForm).then(res => {
					if (res?.data?.outStatus == "1") {
						uni.navigateTo({
							url: `/pages/outBound/superviseLoadingImg?id=${this.orderNoForm.outId}`
						})
					} 
					else {
						// Object.assign(this.orderNoForm, res.data)
						// this.ruleForm.orderNos = []
						// this.unVerifyList = res?.data?.unVerify || []
						// if (res?.data?.verifyed && Array.isArray(res?.data?.verifyed)) {
						// 	this.tabList[1].badge.value = res?.data?.verifyed.length
						// }
					this.$refs.uToast.show({
							type: 'warning',
							message: "请监装完所有订单号",
						})
					}
				})  .catch(err => {
            // Display an error message using the toast component if the API call fails
            this.$refs.uToast.show({
                type: 'error',
                message: err.message || '提交失败，请重试。',
            });
        });

			}
		}
	}
</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>