rtk-wms-uniapp/pages/workbranch/warehouse/feeding/incomingPage.vue

<template>
	<gui-page :custom-header="true" :is-header-sized="false"
		:header-class="['gui-theme-background-color', isLandscapeScreen?'width: 100vmax;':'']"
		:style="[isLandscapeScreen?'width: 100vmax':'']">
		<template #gHeader>
			<view :style="[isLandscapeScreen?'height:44px;width: 100vmax':'height:44px;']"
				class="gui-flex gui-nowrap gui-rows gui-align-items-center">
				<!-- 使用组件实现返回按钮及返回首页按钮 -->
				<text style="font-size:44rpx;" class="gui-header-leader-btns gui-color-white font-icons"
					@tap="goBack">&#xe6c5;</text>
				<!-- 导航文本此处也可以是其他自定义内容 -->
				<text
					class="gui-h4 gui-blod gui-flex1 gui-text-center gui-color-white gui-ellipsis gui-primary-text">物料上架</text>
				<!-- 此处加一个右侧展位元素与左侧同宽，实现标题居中 -->
				<!-- 实际宽度请根据自己情况设置 -->
				<view style="width:40px;" />
			</view>
		</template>
		<template #gBody>
			<list class="form">
				<cell>
					<view class="row-1">
						<view class="row-1-card">
							<uni-easyinput ref="easyinput" v-model="submitParams.storeName" :input-border="false"
								:clearable="false" type="text" focus @focus="handleInputFocus" placeholder="请扫描库位信息"
								@confirm="confirmStore" />
							<view style="display: flex; flex-direction: row;">
								<text class="font-icons" @click="popup.open('center')">&#xe6a8;</text>
								<text class="font-icons" @click="handleMapass('货位')">&#xe6b7;</text>
							</view>
						</view>
					</view>
					<view class="row-2">
						<view class="row-2-card">
							<uni-easyinput ref="easyinput2" v-model="submitParams.qrCode" :input-border="false"
								:clearable="false" type="text" @focus="handleInputFocus" placeholder="请扫描物料"
								@confirm="confirmMaterial" />
							<text class="font-icons" @click="handleMapass('物料')">&#xe6b7;</text>
						</view>
					</view>
					<view class="row-3">
						<view class="row-3-card">
							<view class="row-space-between">
								<text>仓库</text>
								<text>{{ computedStock(submitParams.erpStockId) }}</text>
							</view>
							<view class="row-space-between">
								<text>区域</text>
								<text>{{ computedStoreArea(submitParams.wmsStoreAreaId) }}</text>
							</view>
							<view class="row-space-between">
								<text>货位</text>
								<text>{{ computedStore(submitParams.wmsStoreId) }}</text>
							</view>
						</view>
					</view>
					<view class="row-4">
						<view class="row-4-card">
							<view class="row-space-between">
								<text>物料编码</text>
								<text>{{ submitParams.materialNo }}</text>
							</view>
							<view class="row-space-between">
								<text>物料批次</text>
								<text>{{ submitParams.materialLots }}</text>
							</view>
							<view class="row-space-between">
								<text>物料名称</text>
								<text>{{ submitParams.materialName }}</text>
							</view>
							<view class="row-space-between">
								<text>生产日期</text>
								<text>{{ submitParams.produceDate }}</text>
							</view>
							<view class="row-space-between">
								<text>批次数量</text>
								<text>{{ submitParams.inQty }}</text>
							</view>
							<view class="row-space-between">
								<text>供应商</text>
								<text>{{ submitParams.supplierName }}</text>
							</view>
						</view>
					</view>
					<view class="row-operation">
						<view class="row-operation-card">
							<view class="button" size="primary" @click="handleSubmit">
								<text class="gui-color-white">上架</text>
							</view>
						</view>
					</view>
				</cell>
			</list>
			<view>
				<!-- 提示窗示例 -->
				<uni-popup ref="popup" type="dialog">
					<uni-popup-dialog type="warn" cancel-text="取消" confirm-text="确认" title="手动分配货位"
						content="欢迎使用 uni-popup!" @confirm="popup.close()" @close="popup.close()">
						<!-- eslint-disable-next-line -->
						<template #default="custom">
							<view class="select-group">
								<view class="select-item">
									<text class="store-text">仓库</text>
									<view class="custom-select">
										<uni-data-select v-model="submitParams.erpStockId" :localdata="warehouseList"
											@change="handleSelectWareHouse" />
									</view>
								</view>
								<view class="select-item">
									<text class="store-text">区域</text>
									<view class="custom-select">
										<uni-data-select v-model="submitParams.wmsStoreAreaId" :localdata="regionList"
											@change="handleSelectRegion" />
									</view>
								</view>
								<view class="select-item">
									<text class="store-text">货位</text>
									<view class="custom-select">
										<uni-data-select v-model="submitParams.wmsStoreId" :localdata="locationList" />
									</view>
								</view>
							</view>
						</template>
					</uni-popup-dialog>
				</uni-popup>
				<uni-popup ref="errorTip" type="dialog">
					<uni-popup-dialog type="error" cancel-text="关闭" confirm-text="确认" title="提示"
						:content="errorTipMessage" @confirm="handleCloseErrorTipsModal"
						@close="handleCloseErrorTipsModal" />
				</uni-popup>
			</view>
		</template>
	</gui-page>
</template>
<script>
	import {
		computed,
		defineComponent,
		ref
	} from 'vue'
	import {
		useSetWareHouseStore
	} from '@/stores/useSetWareHouseStore.js';
	export default defineComponent({
		setup() {
			const goBack = function() {
				uni.navigateBack({
					delta: 1
				})
			}
			const errorTip = ref('')
			const errorTipMessage = ref('')
			const easyinput = ref('')
			const easyinput2 = ref('')
			const errorState = ref(0)
			const submitParams = ref({
				qrCode: '',
				erpStockId: '', // 入库仓库
				wmsStoreAreaId: '', // 入库区域
				wmsStoreId: '', // 入库货位
				storeName: '', // 库位名称
				materialNo: '',
				materialName: '',
				materialLots: '',
				produceDate: '',
				inQty: '',
				supplierName: ''
			})
			// 校验参数
			const validatorList = ref({
				erpStockId: '入库仓库',
				wmsStoreAreaId: '入库区域',
				wmsStoreId: '入库货位',
				materialNo: '物料编码',
				materialLots: '物料批次',
				produceDate: '生产日期',
				inQty: '批次数量'
				// supplierName: "供应商",
			})
			const isFetch = ref(false)
			const popup = ref()
			const regionList = ref([])
			const warehouseList = ref([])
			const locationList = ref([])
			const store = useSetWareHouseStore();
			const computedStock = computed(() => {
				return item => warehouseList.value.find(opt => opt.id === item)?.text
			})
			const computedStore = computed(() => {
				return item => {
					return locationList.value.find(opt => opt.id === item)?.text
				}
			})
			const computedStoreArea = computed(() => {
				return item => regionList.value.find(opt => opt.id === item)?.text
			})

			const handleMapass = function(state) {
				// #ifdef APP-PLUS
				const mpaasScanModule = uni.requireNativePlugin('Mpaas-Scan-Module')
				mpaasScanModule.mpaasScan({
						// 扫码识别类型，参数可多选，qrCode、barCode，不设置，默认识别所有
						'scanType': ['qrCode', 'barCode'],
						// 是否隐藏相册，默认false不隐藏
						'hideAlbum': false
					},
					(ret) => {
						if (ret.resp_code === 1000) {
							if (state === '货位') {
								uni.$reqGet('getStockLocaltionByCode', {
										code: ret.resp_result
									})
									.then(({
										code,
										data,
										msg
									}) => {
										if (code === 0) {
											submitParams.value.storeName = data?.name // 库位名称
											submitParams.value.erpStockId = data?.erpStockId // 入库仓库
											submitParams.value.wmsStoreAreaId = data
												?.wmsStoreAreaId // 入库区域
											submitParams.value.wmsStoreId = data?.wmsStoreId // 入库货位
										} else {
											uni.showToast({
												title: msg,
												icon: 'none',
												duration: 2000
											})
										}
									})
							} else {
								uni.$reqGet('materialGroundingScan', {
										qrCode: ret.resp_result
									})
									.then(({
										code,
										data,
										msg
									}) => {
										if (code === 0) {
											submitParams.value.qrCode = data?.qrCode // qrCode
											submitParams.value.materialLots = data
												?.materialLots // 物料批次
											submitParams.value.materialNo = data?.materialNo // 物料编码
											submitParams.value.materialName = data
												?.materialName // 物料名称
											submitParams.value.purchaseOrderNo = data
												?.purchaseOrderNo // 采购单号
											submitParams.value.produceDate = data?.produceDate // 生产日期
											submitParams.value.supplierName = data
												?.supplierName // 供应商
											submitParams.value.inQty = data?.qty // 数量
											submitParams.value.wmsIncomingReceiptId = data
												?.wmsIncomingReceiptId
											submitParams.value.storeName = data?.wmsStockName // 库位名称
											submitParams.value.erpStockId = data?.wmsStockId // 入库仓库
											submitParams.value.wmsStoreAreaId = data
												?.wmsStoreAreaId // 入库区域
											submitParams.value.wmsStoreId = data
												?.wmsStockLocationId // 入库货位
										} else {
											uni.showToast({
												title: msg,
												icon: 'none',
												duration: 2000
											})
										}
									})
							}
						}
						// 返回值中，resp_code 表示返回结果值，10：用户取消，11：其他错误，1000：成功
						// 返回值中，resp_message 表示返回结果信息
						// 返回值中，resp_result 表示扫码结果，只有成功才会有返回
					})
				// #endif
				// #ifdef H5
				if (state === '货位') {
					uni.$reqGet('getStockLocaltionByCode', {
							code: 'PC-1'
						})
						.then(({
							code,
							data,
							msg
						}) => {
							if (code === 0) {
								submitParams.value.storeName = data?.name // 库位名称
								submitParams.value.erpStockId = data?.erpStockId // 入库仓库
								submitParams.value.wmsStoreAreaId = data
									?.wmsStoreAreaId // 入库区域
								submitParams.value.wmsStoreId = data?.wmsStoreId // 入库货位
							} else {
								uni.showToast({
									title: msg,
									icon: 'none',
									duration: 2000
								})
							}
						})
				} else {
					uni.$reqGet('materialGroundingScan', {
							qrCode: '1696449966668177410'
						})
						.then(({
							code,
							data,
							msg
						}) => {
							if (code === 0) {
								submitParams.value.qrCode = data?.qrCode // qrCode
								submitParams.value.materialLots = data
									?.materialLots // 物料批次
								submitParams.value.materialNo = data?.materialNo // 物料编码
								submitParams.value.materialName = data
									?.materialName // 物料名称
								submitParams.value.purchaseOrderNo = data
									?.purchaseOrderNo // 采购单号
								submitParams.value.produceDate = data?.produceDate // 生产日期
								submitParams.value.supplierName = data
									?.supplierName // 供应商
								submitParams.value.inQty = data?.qty // 数量
								submitParams.value.wmsIncomingReceiptId = data
									?.wmsIncomingReceiptId
								submitParams.value.storeName = data?.wmsStockName // 库位名称
								submitParams.value.erpStockId = data?.wmsStockId // 入库仓库
								submitParams.value.wmsStoreAreaId = data
									?.wmsStoreAreaId // 入库区域
								submitParams.value.wmsStoreId = data?.wmsStockLocationId // 入库货位
							} else {
								uni.showToast({
									title: msg,
									icon: 'none',
									duration: 2000
								})
							}
						})
				}
				// #endif
			}

			// 扫描货位输入框回车事件
			const confirmStore = function(e) {
				uni.$reqGet('getStockLocaltionByCode', {
						code: e
					})
					.then(({
						code,
						data,
						msg
					}) => {
						if (code === 0) {
							submitParams.value.storeName = data?.name // 库位名称
							submitParams.value.erpStockId = data?.erpStockId // 入库仓库
							submitParams.value.wmsStoreAreaId = data
								?.wmsStoreAreaId // 入库区域
							submitParams.value.wmsStoreId = data?.wmsStoreId // 入库货位
						} else {
							// #ifdef APP-PLUS
							plus.device.beep(2)
							// #endif
							errorTipMessage.value = msg
							errorTip.value.open()
							errorState.value = 0
						}
					})
			}

			// 扫描物料输入框回车事件
			const confirmMaterial = function(e) {
				uni.$reqGet('materialGroundingScan', {
						qrCode: e
					})
					.then(({
						code,
						data,
						msg
					}) => {
						if (code === 0) {
							submitParams.value.qrCode = data?.qrCode // qrCode
							submitParams.value.materialLots = data?.materialLots // 物料批次
							submitParams.value.materialNo = data?.materialNo // 物料编码
							submitParams.value.materialName = data?.materialName // 物料名称
							submitParams.value.purchaseOrderNo = data
								?.purchaseOrderNo // 采购单号
							submitParams.value.produceDate = data?.produceDate // 生产日期
							submitParams.value.supplierName = data?.supplierName // 供应商
							submitParams.value.inQty = data?.qty // 数量
							submitParams.value.wmsIncomingReceiptId = data
								?.wmsIncomingReceiptId
						} else {
							// #ifdef APP-PLUS
							plus.device.beep(2)
							// #endif
							errorTipMessage.value = msg
							errorTip.value.open()
							errorState.value = 1
						}
					})
			}

			// 上架
			const handleSubmit = function() {
				if (isFetch.value === true) {
					uni.$grace.msg('物料上架中...')
				} else {
					const keys = Object.keys(validatorList.value)
					for (let x = 0; x < keys.length; x++) {
						if ([null, undefined, NaN].includes(submitParams.value[keys[x]])) {
							uni.$grace.msg(validatorList.value[keys[x]] + '不能为空！')
							return
						}
					}
					isFetch.value = true
					uni.$reqPost('materialCreateBatch', [submitParams.value])
						.then(({
							code,
							data,
							msg
						}) => {
							submitParams.value.materialLots = '' // 物料批次
							submitParams.value.materialNo = '' // 物料编码
							submitParams.value.purchaseOrderNo = '' // 采购单号
							submitParams.value.produceDate = '' // 生产日期
							submitParams.value.materialName = '' // 物料名称
							submitParams.value.supplierName = '' // 供应商
							submitParams.value.inQty = '' // 数量
							submitParams.value.wmsIncomingReceiptId = ''
							isFetch.value = false
							if (code === 0) {
								uni.showToast({
									title: '来料上架完毕',
									icon: 'none',
									duration: 2000
								})
							} else {
								// #ifdef APP-PLUS
								plus.device.beep(2)
								// #endif
								errorTipMessage.value = msg
								errorTip.value.open()
								errorState.value = -1
							}
						})
				}
			}

			const handleSelectWareHouse = function(e) {
				const stock = warehouseList.value.find(item => item.value === e)
				submitParams.value.wmsStoreAreaId = ''
				submitParams.value.wmsStoreId = ''
				locationList.value = []
				store.handleGetRegionList(e).then(ret => {
					regionList.value = ret
				})
			}
			const handleSelectRegion = function(e) {
				const area = regionList.value.find(item => item.value === e)
				submitParams.value.wmsStoreId = ''
				locationList.value = []
				store.handleGetRegionList(e).then(ret => {
					locationList.value = ret
				})
			}

			const setInputFocus = function() {
				submitParams.value.storeName = ''
				easyinput.value.onBlur()
				easyinput.value.onFocus()
			}

			const setInputFocus2 = function() {
				submitParams.value.qrCode = ''
				easyinput2.value.onBlur()
				easyinput2.value.onFocus()
			}

			// 关闭错误信息弹窗
			const handleCloseErrorTipsModal = async function() {
				errorTip.value.close()
				if (errorState.value === 0) {
					await setInputFocus()
				} else if (errorState.value === 1) {
					await setInputFocus2()
				}
			}

			// 禁用软键盘
			const handleInputFocus = function() {
				setTimeout(() => {
					uni.hideKeyboard()
				}, 100)
			}

			return {
				goBack,
				popup,
				easyinput,
				easyinput2,
				errorTip,
				errorTipMessage,
				submitParams,
				regionList,
				warehouseList,
				locationList,
				computedStock,
				computedStore,
				computedStoreArea,
				handleInputFocus,
				handleMapass,
				handleSubmit,
				confirmStore,
				confirmMaterial,
				handleSelectWareHouse,
				handleSelectRegion,
				handleCloseErrorTipsModal
			}
		}
	})
</script>

<style lang="scss" scoped>
	.gui-header-leader-btns {
		color: black;
		font-size: 24px !important;
		margin-left: 24rpx;
	}

	.gui-sbody {
		font-size: 14px;
		background-color: rgba(234, 239, 242, 1);
	}

	.form {
		margin-top: 85px;
	}

	.row-1,
	.row-2,
	.row-3,
	.row-4 {
		margin-top: 10px;
		height: 55px;
		display: flex;
		justify-content: center;
		background-color: white;
	}

	.row-1 {
		margin-top: 0px;
	}

	.row-1,
	.row-2 {

		.row-1-card,
		.row-2-card {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			width: 100%;
			padding-left: 10px;
			padding-right: 10px;
		}
	}

	.row-3 {
		height: 140px;

		.row-3-card {
			display: flex;
			flex-direction: column;

			.row-space-between {
				flex: 1;
				width: calc(100vw - 40px);
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				padding-top: 12px;
				padding-bottom: 12px;
			}
		}

	}

	.row-4 {
		height: 260px;

		.row-4-card {
			display: flex;
			flex-direction: column;

			.row-space-between {
				flex: 1;
				width: calc(100vw - 40px);
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				padding-top: 12px;
				padding-bottom: 12px;
			}
		}

	}

	.row-operation {
		height: 110px;
		padding-left: 20px;
		padding-right: 20px;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;

		.row-operation-card {
			flex: 1;

			.btn-row-1 {
				margin-bottom: 5px !important;
			}
		}
	}

	.input-200 {
		width: 200px;
		padding-left: 10px;
	}

	.input-300 {
		width: 300px;
		padding-left: 10px;
	}

	.font-icons {
		width: 40px;
		font-size: 20px;
	}

	.select-group {
		display: flex;
		flex-direction: column;
		flex: 1;

		.select-item {
			display: flex;
			flex-direction: row;
			align-items: center;
			margin-bottom: 10px;

			.store-text {
				margin-right: 14px;
			}
		}
	}
</style>