rtk-wms-uniapp/pages/workbranch/warehouse/feeding/productionPage.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.caseNo" :input-border="false"
								:clearable="false" type="text" @focus="handleInputFocus" placeholder="请扫描箱号"
								@confirm="confirmCaseNo" />
							<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.stockCode) }}</text>
							</view>
							<view class="row-space-between">
								<text>区域</text>
								<text>{{ computedStoreArea(submitParams.areaCode) }}</text>
							</view>
							<view class="row-space-between">
								<text>货位</text>
								<text>{{ computedStore(submitParams.locationCode) }}</text>
							</view>
						</view>
					</view>
					<view class="row-4">
						<view class="row-4-card">
							<view class="row-space-between">
								<text>生产订单</text>
								<text>{{ submitParams.workOrderNo }}</text>
							</view>
							<view class="row-space-between">
								<text>产品编码</text>
								<text>{{ submitParams.productCode }}</text>
							</view>
							<view class="row-space-between">
								<text>产品名称</text>
								<text>{{ submitParams.productName }}</text>
							</view>
							<view class="row-space-between">
								<text>箱号</text>
								<text>{{ submitParams.caseNo }}</text>
							</view>
							<view class="row-space-between">
								<text>数量</text>
								<text>{{ submitParams.inQty }}</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.stockCode" :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.areaCode" :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.locationCode"
											: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,
		onBeforeMount
	} 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 isFetch = ref(false)
			const popup = ref()
			const regionList = ref([])
			const warehouseList = ref([])
			const locationList = ref([])
			const submitParams = ref({
				stockCode: '', // 入库仓库
				areaCode: '', // 入库区域
				locationCode: '', // 入库货位
				storeName: '', // 库位名称
				workOrderNo: '',
				productCode: '',
				productName: '',
				caseNo: '',
				inQty: ''
			})
			// 校验参数
			const validatorList = ref({
				stockCode: '入库仓库',
				areaCode: '入库区域',
				locationCode: '入库货位',
				workOrderNo: '生产订单',
				productCode: '产品编码',
				productName: '产品名称',
				inQty: '数量',
				caseNo: '箱号'
			})
			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
			})

			onBeforeMount(() => {
				warehouseList.value = store.$state.warehouseList
			})

			const handleMapass = function(state) {
				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(({
										data
									}) => {
										submitParams.value.storeName = data?.name // 库位名称
										submitParams.value.stockCode = data?.erpStockId // 入库仓库
										submitParams.value.areaCode = data
											?.wmsStoreAreaId // 入库区域
										submitParams.value.locationCode = data?.wmsStoreId // 入库货位
									})
							} else {
								uni.$reqGet('productionGroundingScan', {
										caseNo: ret.resp_result
									})
									.then(({
										code,
										data,
										msg
									}) => {
										if (code === 0) {
											submitParams.value.workOrderNo = data?.erpOrderNo // 生产订单
											submitParams.value.productCode = data?.productCode // 产品编码
											submitParams.value.productName = data?.productName // 产品名称
											submitParams.value.caseNo = data?.boxNo // 箱号
											submitParams.value.inQty = data?.boxQty // 数量
											submitParams.value.detailErpId = data
												?.detailErpId // 关联明细表MES-ID编码
											submitParams.value.warehousingOrderNo = data
												?.warehousingOrderNo // 入库单号
											submitParams.value.storeName = data?.wmsStockName // 库位名称
											submitParams.value.stockCode = data?.wmsStockId // 入库仓库
											submitParams.value.areaCode = data
												?.wmsStoreAreaId // 入库区域
											submitParams.value.locationCode = data
												?.wmsStockLocationId // 入库货位
										} else {
											uni.showToast({
												title: msg,
												icon: 'none',
												duration: 2000
											})
										}
									})
							}
						}
						// 返回值中，resp_code 表示返回结果值，10：用户取消，11：其他错误，1000：成功
						// 返回值中，resp_message 表示返回结果信息
						// 返回值中，resp_result 表示扫码结果，只有成功才会有返回
					})
			}

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

			// 扫描箱号输入框回车事件
			const confirmCaseNo = function(e) {
				uni.$reqGet('productionGroundingScan', {
						caseNo: e
					})
					.then(({
						code,
						data,
						msg
					}) => {
						if (code === 0) {
							submitParams.value.workOrderNo = data?.erpOrderNo // 生产订单
							submitParams.value.productCode = data?.productCode // 产品编码
							submitParams.value.productName = data?.productName // 产品名称
							submitParams.value.caseNo = data?.boxNo // 箱号
							submitParams.value.inQty = data?.boxQty // 数量
							submitParams.value.detailErpId = data
								?.detailErpId // 关联明细表MES-ID编码
							submitParams.value.warehousingOrderNo = data
								?.warehousingOrderNo // 入库单号
							submitParams.value.storeName = data?.wmsStockName // 库位名称
							submitParams.value.stockCode = data?.wmsStockId // 入库仓库
							submitParams.value.areaCode = data
								?.wmsStoreAreaId // 入库区域
							submitParams.value.locationCode = data
								?.wmsStockLocationId // 入库货位
						} 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(submitParams.value)
					for (let x = 0; x < keys.length; x++) {
						const validataIsItEmpty = ['', null, undefined, NaN].includes(submitParams.value[keys[
							x]])
						if (validataIsItEmpty) {
							uni.showToast({
								title: validatorList.value[keys[x]] + '不能为空！',
								icon: 'none',
								duration: 2000
							})
							return
						}
					}
					isFetch.value = true
					uni.$reqPost('productCreateBatch', [submitParams.value])
						.then(({
							code,
							data,
							msg
						}) => {
							submitParams.value.workOrderNo = ''
							submitParams.value.productCode = ''
							submitParams.value.productName = ''
							submitParams.value.caseNo = ''
							submitParams.value.inQty = ''
							submitParams.value.detailErpId = ''
							submitParams.value.warehousingOrderNo = ''
							isFetch.value = false
							if (code === 0) {
								uni.$grace.msg('产品上架完毕')
								return
							} else {
								// #ifdef APP-PLUS
								plus.device.beep(2)
								// #endif
								errorTipMessage.value = msg
								errorTip.value.open()
								errorState.value = -1
							} 
						})
				}
			}

			const handleSelectWareHouse = function(e) {
				submitParams.value.areaCode = ''
				submitParams.value.locationCode = ''
				locationList.value = []
				store.handleGetRegionList(e).then(ret => {
					regionList.value = ret
				})
			}
			
			const handleSelectRegion = function(e) {
				submitParams.value.locationCode = ''
				locationList.value = []
				store.handleGetLocationList(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,
				easyinput,
				easyinput2,
				errorTip,
				errorTipMessage,
				submitParams,
				handleMapass,
				handleSubmit,
				popup,
				regionList,
				warehouseList,
				handleInputFocus,
				locationList,
				computedStock,
				computedStore,
				computedStoreArea,
				confirmStore,
				confirmCaseNo,
				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>