rtk-wms-uniapp/pages/workbranch/warehouse/materialDisass/materialMerge.vue

<template>
	<gui-page :custom-header="true" :is-header-sized="false" :header-class="['gui-theme-background-color']">
		<template #gHeader>
			<view style="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-ellipsis gui-color-white 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.materialOne.qrCode"
								:input-border="false" :clearable="false" type="text" focus @focus="handleInputFocus"
								placeholder="请扫描物料条码" @confirm="confirmMaterialOne" />
							<text class="font-icons" @click="handleMapass('row1')">&#xe6b7;</text>
						</view>
					</view>
					<view class="row-2">
						<view class="row-2-card">
							<view class="row-space-between">
								<text>物料编码</text>
								<text>{{ submitParams.materialOne.materialNo }}</text>
							</view>
							<view class="row-space-between">
								<text>物料名称</text>
								<text>{{ submitParams.materialOne.materialName }}</text>
							</view>
							<view class="row-space-between">
								<text>物料条码</text>
								<text>{{ submitParams.materialOne.qrCode }}</text>
							</view>
							<view class="row-space-between">
								<text>批次数量</text>
								<text>{{ submitParams.materialOne.inQty }}</text>
							</view>
						</view>
					</view>

					<view class="row-3">
						<view class="row-3-card">
							<uni-easyinput ref="easyinput2" v-model="submitParams.materialTwo.qrCode"
								:input-border="false" :clearable="false" type="text" focus @focus="handleInputFocus"
								placeholder="请扫描物料条码" @confirm="confirmMaterialTwo" />
							<text class="font-icons" @click="handleMapass('row2')">&#xe6b7;</text>
						</view>
					</view>
					<view class="row-2">
						<view class="row-2-card">
							<view class="row-space-between">
								<text>物料编码</text>
								<text>{{ submitParams.materialTwo.materialNo }}</text>
							</view>
							<view class="row-space-between">
								<text>物料名称</text>
								<text>{{ submitParams.materialTwo.materialName }}</text>
							</view>
							<view class="row-space-between">
								<text>物料条码</text>
								<text>{{ submitParams.materialTwo.qrCode }}</text>
							</view>
							<view class="row-space-between">
								<text>批次数量</text>
								<text>{{ submitParams.materialTwo.inQty }}</text>
							</view>
						</view>
					</view>
					<view class="row-operation">
						<view class="row-operation-card">
							<view class="button" size="primary" @click="handleMerge">
								<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="dialogConfirm" @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 {
		defineComponent,
		ref,
		onBeforeMount
	} from 'vue'
	import {
		useSetWareHouseStore
	} from '@/stores/useSetWareHouseStore.js';
	export default defineComponent({
		setup() {
			const goBack = function() {
				uni.$goBack('/pages/workbranch/warehouse/materialDisass/materialWorkBranch')
			}
			const errorTip = ref('')
			const errorTipMessage = ref('')
			const easyinput = ref('')
			const easyinput2 = ref('')
			const errorState = ref(0)
			const isFetch = ref(false)
			const modalTitle = ref('重新分配货位')
			const popup = ref()
			const submitParams = ref({
				erpStockId: '', // 入库仓库
				wmsStoreAreaId: '', // 入库区域
				wmsStoreId: '', // 入库货位
				materialOne: {
					materialNo: '',
					materialName: '',
					qrCode: '',
					inQty: ''
				},
				materialTwo: {
					materialNo: '',
					materialName: '',
					qrCode: '',
					inQty: ''
				}
			})
			// 校验参数
			const validatorList = ref({
				erpStockId: '入库仓库',
				wmsStoreAreaId: '入库区域',
				wmsStoreId: '入库货位',
				materialOne: {
					materialNo: '1号物料编码',
					materialName: '1号物料名称',
					qrCode: '1号物料条码',
					inQty: '1号批次数量'
				},
				materialTwo: {
					materialNo: '2号物料编码',
					materialName: '2号物料名称',
					qrCode: '2号物料条码',
					inQty: '2号批次数量'
				}
			})
			const regionList = ref([])
			const warehouseList = ref([])
			const locationList = ref([])
			const store = useSetWareHouseStore();

			onBeforeMount(() => {
				warehouseList.value = store.$state.warehouseList
			})
			
			const confirmMaterialOne = function(e) {
				uni.$reqGet('splitOrMergeScanMaterial', {
						qrCode: e
					})
					.then(({
						code,
						data,
						msg
					}) => {
						if (code === 0) {
							submitParams.value.materialOne = {
								id: data?.id, // ID
								materialNo: data?.materialNo, // 物料编码
								materialName: data?.materialName, // 物料名称
								qrCode: data?.qrCode, // 物料条码
								inQty: data?.inQty // 批次数量
							}
						} else {
							// #ifdef APP-PLUS
							plus.device.beep(2)
							// #endif
							errorTipMessage.value = msg
							errorTip.value.open()
							errorState.value = 0
						}
					})
			}
			const confirmMaterialTwo = function(e) {
				uni.$reqGet('splitOrMergeScanMaterial', {
						qrCode: e
					})
					.then(({
						code,
						data,
						msg
					}) => {
						if (code === 0) {
							submitParams.value.materialTwo = {
								id: data?.id, // ID
								materialNo: data?.materialNo, // 物料编码
								materialName: data?.materialName, // 物料名称
								qrCode: data?.qrCode, // 物料条码
								inQty: data?.inQty // 批次数量
							}
						} else {
							// #ifdef APP-PLUS
							plus.device.beep(2)
							// #endif
							errorTipMessage.value = msg
							errorTip.value.open()
							errorState.value = 1
						}
					})
			}
			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) {
							uni.$grace.msg('扫描到内容：' + ret.resp_result)
							if (state === 'row1') {
								uni.$reqGet('splitOrMergeScanMaterial', {
										qrCode: ret.resp_result
									})
									.then(({
										code,
										data,
										msg
									}) => {
										if (code === 0) {
											submitParams.value.materialOne = {
												id: data?.id, // ID
												materialNo: data?.materialNo, // 物料编码
												materialName: data?.materialName, // 物料名称
												qrCode: data?.qrCode, // 物料条码
												inQty: data?.inQty // 批次数量
											}
										} else {
											// #ifdef APP-PLUS
											plus.device.beep(2)
											// #endif
											errorTipMessage.value = msg
											errorTip.value.open()
											errorState.value = 0
										}
									})
							} else {
								uni.$reqGet('splitOrMergeScanMaterial', {
										qrCode: ret.resp_result
									})
									.then(({
										code,
										data,
										msg
									}) => {
										if (code === 0) {
											submitParams.value.materialTwo = {
												id: data?.id, // ID
												materialNo: data?.materialNo, // 物料编码
												materialName: data?.materialName, // 物料名称
												qrCode: data?.qrCode, // 物料条码
												inQty: data?.inQty // 批次数量
											}
										} else {
											// #ifdef APP-PLUS
											plus.device.beep(2)
											// #endif
											errorTipMessage.value = msg
											errorTip.value.open()
											errorState.value = 1
										}
									})
							}
						}
					})
			}
			// 合批
			const handleMerge = function() {
				popup.value.open('center')
			}
			const handleSelectWareHouse = function(e) {
				submitParams.value.wmsStoreAreaId = ''
				submitParams.value.wmsStoreId = ''
				locationList.value = []
				store.handleGetRegionList(e).then(ret => {
					regionList.value = ret
				})
			}
			const handleSelectRegion = function(e) {
				submitParams.value.wmsStoreId = ''
				locationList.value = []
				store.handleGetLocationList(e).then(ret => {
					locationList.value = ret
				})
			}
			// 合批弹框确认事件
			const dialogConfirm = function() {
				if (isFetch.value === true) {
					uni.$grace.msg('物料合批中...')
				} else {
					const keys = Object.keys(submitParams.value.materialOne)
					const keys2 = Object.keys(submitParams.value.materialTwo)
					for (let x = 0; x < keys.length; x++) {
						const validataIsItEmpty = ['', null, undefined, NaN].includes(submitParams.value
							.materialOne[keys[x]])
						if (validataIsItEmpty) {
							uni.showToast({
								title: validatorList.value.materialOne[keys[x]] + '不能为空！',
								icon: 'none',
								duration: 2000
							})
							return
						}
					}
					for (let x = 0; x < keys2.length; x++) {
						const validataIsItEmpty = ['', null, undefined, NaN].includes(submitParams.value
							.materialTwo[keys[x]])
						if (validataIsItEmpty) {
							uni.showToast({
								title: validatorList.value.materialTwo[keys[x]] + '不能为空！',
								icon: 'none',
								duration: 2000
							})
							return
						}
					}
					if (submitParams.value.erpStockId === '' || submitParams.value.wmsStoreAreaId === '' ||
						submitParams.value.wmsStoreId === '') {
						uni.showToast({
							title: '区域、仓库、货位必填！',
							icon: 'none',
							duration: 2000
						})
						return
					}

					popup.value.close()
					isFetch.value = true
					const params = {
						materialOne: submitParams.value.materialOne,
						materialTwo: submitParams.value.materialTwo,
						erpStockId: submitParams.value.erpStockId,
						wmsStoreAreaId: submitParams.value.wmsStoreAreaId,
						wmsStoreId: submitParams.value.wmsStoreId
					}
					uni.$reqPost('materialMerge', params)
						.then(({
							code,
							data,
							msg
						}) => {
							isFetch.value = false
							submitParams.value = {
								materialOne: {
									materialNo: '', // 物料编码
									materialName: '', // 物料名称
									qrCode: '', // 物料条码
									inQty: '' // 批次数量
								},
								materialTwo: {
									materialNo: '', // 物料编码
									materialName: '', // 物料名称
									qrCode: '', // 物料条码
									inQty: '' // 批次数量
								},
								wmsStoreAreaId: '', // 区域
								wmsStoreId: '', // 货位
								erpStockId: '' // 仓库
							}
							if (code === 0) {
								// 时间格式转换
								data?.forEach(item => {
									item.createTime = $parseTime(item
										.createTime)
								})
								const message = {
									'ClientId': 'webclient',
									'templateName': 'http://192.168.1.156:9900/Upload/Tables/s_reportmodel/202303011151371504/materialMerge.btw',
									'DataList': data
								}
								// uni.$useStore().mqttConfig.publish('adminS001', JSON.stringify(message), {
								//   qos: 1
								// })
							} else {
								uni.$grace.msg(msg)
							}
						})
				}
			}

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

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

			// 禁用软键盘
			const handleInputFocus = function() {
				setTimeout(() => {
					uni.hideKeyboard()
				}, 100)
			}
			return {
				goBack,
				easyinput,
				easyinput2,
				errorTip,
				errorTipMessage,
				submitParams,
				confirmMaterialOne,
				confirmMaterialTwo,
				handleInputFocus,
				handleMapass,
				handleMerge,
				modalTitle,
				handleSelectWareHouse,
				handleSelectRegion,
				popup,
				dialogConfirm,
				regionList,
				warehouseList,
				locationList,
				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 {
		height: 55px;
		display: flex;
		justify-content: center;
		background-color: white;
	}

	.row-2,
	.row-3 {
		margin-top: 10px;
	}

	.row-1,
	.row-3 {

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

	.row-2 {
		height: 200px;

		.row-2-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>