rd_mes_uniapp/pages/wms/inventory/inventoryByBatchNo.vue

<template>
	<view class="container">
		<uni-forms ref="form" :modelValue="formData" labelWidth="120px" :rules="rules">
			<uni-forms-item label="盘点作业单" name="wmsMatInvCode" required>
				<uni-easyinput v-model="formData.wmsMatInvCode" suffixIcon="scan" type="text" :focus='true'
					@iconClick="scanInvCode" @change="clearInvDeatil" />
			</uni-forms-item>
			<uni-forms-item label="物料批号" name="batchNo" required>
				<uni-easyinput v-model="formData.batchNo" suffixIcon="scan" type="text" @iconClick="scanBatchNo"
					@change="getInvDeatil" />
			</uni-forms-item>
			<u-divider text="盘点单信息"></u-divider>
			<uni-forms-item label="盘点单明细编码" name="wmsInvDetailDefCode">
				<uni-data-select v-model="formData.wmsInvDetailDefCode" :localdata="invJobDetailSelectList"
					@change="changeDetail" :clear="false"></uni-data-select>
			</uni-forms-item>
			<u-divider text="详细信息"></u-divider>
			<uni-forms-item label="物料编码" name="materialCode">
				<uni-easyinput v-model="formData.materialCode" type="text" disabled />
			</uni-forms-item>
			<uni-forms-item label="物料名称" name="materialName">
				<uni-easyinput v-model="formData.materialName" type="text" disabled />
			</uni-forms-item>
			<uni-forms-item label="仓库编码" name="whCode">
				<uni-easyinput v-model="formData.whCode" type="text" disabled />
			</uni-forms-item>
			<uni-forms-item label="库区编码" name="areaCode">
				<uni-easyinput v-model="formData.areaCode" type="text" disabled />
			</uni-forms-item>
			<uni-forms-item label="库位编码" name="storageLocationCode">
				<uni-easyinput v-model="formData.storageLocationCode" type="text" disabled />
			</uni-forms-item>
			<uni-forms-item label="账面数量" name="theoryNumber">
				<uni-easyinput v-model="formData.theoryNumber" type="number" disabled />
			</uni-forms-item>
			<uni-forms-item label="实盘数量" name="actualNumber">
				<u-number-box v-model="formData.actualNumber" inputWidth="auto" button-size="36" min="0"></u-number-box>
			</uni-forms-item>
		</uni-forms>
		<u-button type="primary" @click="submit">提交</u-button>
	</view>
</template>

<script>
	import {
		getInvJob,
		listInvJob
	} from "@/api/wms/invJob.js";
	import {
		listInvJobDetail,
		updateInvJobDetail
	} from "@/api/wms/invJobDetail.js"

	export default {
		data() {
			return {
				invJobDetailList: [],
				invJobDetailSelectList: [],
				wmsInvDetailList: null,
				invJobDetailInfo: null,
				formData: {
					// 详情单 id
					id: null,
					wmsMatInvCode: null,
					wmsInvDetailDefCode: null,
					materialCode: null,
					materialName: null,
					batchNo: null,
					whCode: null,
					areaCode: null,
					storageLocationCode: null,
					theoryNumber: null,
					actualNumber: null,
				},
				rules: {
					wmsMatInvCode: {
						rules: [{
							required: true,
							errorMessage: '请输入盘点单!'
						}]
					},
					batchNo: {
						rules: [{
							required: true,
							errorMessage: '请输入批号编码!'
						}]
					},
					actualNumber: {
						rules: [{
							required: true,
							errorMessage: '请输入实盘数量!'
						}]
					}
				}
			}
		},
		methods: {
			//  扫描盘点作业单编码
			scanInvCode() {
				const _this = this;
				uni.scanCode({
					scanType: ['barCode', 'qrCode'],
					success: function(res) {
						_this.formData.wmsMatInvCode = res.result;
					}
				});
			},
			// 扫描物料批号
			scanBatchNo() {
				if (!this.formData.wmsMatInvCode) {
					this.$modal.msg("请先扫描盘点作业单编码！")
					return
				}
				const _this = this;
				uni.scanCode({
					scanType: ['barCode', 'qrCode'],
					success: function(res) {
						_this.formData.batchNo = res.result;
					}
				});
			},
			// 获取盘点明细
			async getInvDeatil() {
				if (!this.formData.wmsMatInvCode) {
					this.$modal.msg("请先扫描盘点作业单编码！")
					return
				}
				uni.showLoading({
					title: '获取盘点明细...'
				});
				await listInvJobDetail({
					wmsInvJobCode: this.formData.wmsMatInvCode,
					batchNo: this.formData.batchNo
				}).then(res => {
					// 存储明细列表到本地
					this.invJobDetailList = res.rows
					// 生成 select 列表
					this.invJobDetailSelectList = []
					this.invJobDetailList.forEach(item => {
						this.invJobDetailSelectList.push({
							text: item.wmsInvJobDetailCode,
							value: item.wmsInvJobDetailCode,
							disabled: false
						})
					})
					this.formData.wmsInvDetailDefCode = this.invJobDetailList[0]?.wmsInvJobDetailCode
					// 默认渲染第一个明细单
					this.renderDetail(this.formData.wmsInvDetailDefCode)
				}).catch(() => {
					this.$modal.msg("未获取到盘点作业明细信息")
				}).finally(() => {
					uni.hideLoading()
				})
			},
			// 根据明细编码找到对应的物料信息
			renderDetail(code) {
				const i = this.invJobDetailList.findIndex(item => item.wmsInvJobDetailCode === code)

				this.formData.id = this.invJobDetailList[i].id
				this.formData.materialCode = this.invJobDetailList[i].materialCode
				this.formData.materialName = this.invJobDetailList[i].materialName
				this.formData.whCode = this.invJobDetailList[i].whCode
				this.formData.areaCode = this.invJobDetailList[i].areaCode
				this.formData.shelvesCode = this.invJobDetailList[i].shelvesCode
				this.formData.storageLocationCode = this.invJobDetailList[i].storageLocationCode
				this.formData.theoryNumber = this.invJobDetailList[i].theoryNumber
			},
			// 切换明细单
			changeDetail(e) {
				this.clearInvDeatil()
				this.renderDetail(e)
			},
			// 重置表单
			clearInvDeatil() {
				Object.keys(this.formData).forEach(key => {
					if (!["wmsMatInvCode", "wmsInvDetailDefCode", "batchNo"].includes(key)) {
						this.formData[key] = null
					}
				})
				this.actualNumber = 0
			},
			submit() {
				const _this = this;
				_this.$refs.form.validate().then(res => {
					uni.showModal({
						title: '提示',
						content: '您确定盘点该物料吗？',
						success: function(res) {
							if (res.confirm) {
								uni.showLoading({
									title: '提交盘点明细单...'
								});
								updateInvJobDetail(_this.formData).then(() => {
									_this.$modal.closeLoading();
									_this.$modal.msgSuccess("盘点成功!");
									setTimeout(() => {
										_this.$tab.switchTab("/pages/work/index");
									}, 500);
								});
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				});
			},
		}
	}
</script>

<style scoped>
	.container {
		padding: 15px;
	}

	.uni-forms-item {
		margin-bottom: 16px;
	}
</style>