rtk-wms-uniapp/pages/workbranch/warehouse/productionIssue/issuePage.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"
					style="font-size: 14px;">发料</text>
				<!-- 此处加一个右侧展位元素与左侧同宽，实现标题居中 -->
				<!-- 实际宽度请根据自己情况设置 -->
				<view style="width:40px;" />
				<!-- 如果右侧有其他内容可以利用条件编译和定位来实现-->
			</view>
		</template>
		<template #gBody>
			<view class="form">
				<view class="row-1">
					<view class="row-1-card">
						<input v-model="submitParams.erpMaterialId" class="gui-form-input input-200" name="name"
							placeholder="扫描物料条码" @input="inputting" @focus="handleInputFocus">
						<text class="font-icons" style="font-size: 20px;" @click="handleMapass">&#xe6b7;</text>
					</view>
				</view>
				<view class="row-3">
					<view class="row-3-card">
						<view class="row-space-between">
							<text>物料编码</text>
							<text>{{ submitParams.erpMaterialId }}</text>
						</view>
						<view class="row-space-between">
							<text>物料名称</text>
							<text>{{ submitParams.materialName }}</text>
						</view>
						<view class="row-space-between">
							<text>物料批次</text>
							<text>{{ submitParams.materialLots }}</text>
						</view>
						<view class="row-space-between">
							<text>批次数量</text>
							<text>{{ submitParams.batchQty }}</text>
						</view>
					</view>
				</view>
				<view class="row-2">
					<view class="row-2-card" @click="handleNavigateTo">
						<text>本次发料记录</text>
						<!-- <view class="right-anchor">
							<text>{{ issueRecord.length }}</text>
							<text class="font-icons">&#xe601;</text>
						</view> -->
					</view>
				</view>
				<view class="row-operation">
					<view class="row-operation-card">
						<button type="default" class="gui-button gui-button gui-bg-blue gui-noborder btn-row-1"
							@click="handleAddIssue">
							<text class="gui-color-white gui-button-text">添加发料</text>
						</button>
						<button type="default" class="gui-button gui-button gui-bg-green gui-noborder"
							@click="handleNavigateToBack">
							<text class="gui-color-white gui-button-text">完成发料</text>
						</button>
					</view>
				</view>
			</view>
		</template>
	</gui-page>
</template>

<script>
	import {
		defineComponent,
		ref
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	export default defineComponent({
		setup() {
			const goBack = function() {
				uni.$goBack('/pages/workbranch/warehouse/productionIssue/demandDetails')
			}
			const masterId = ref('')
			const issueRecord = ref([])
			const submitParams = ref({
				erpMaterialId: '', // 物料编码
				materialName: '', // 物料名称
				materialLots: '', // 物料批次
				supplierCode: '', // 供应商编号
				batchQty: '', // 批次数量
				unitCode: '', // 单位
				wmsLabelMasterId: '', // qrCode
				wmsProductionWorkOrderBomDetailId: '', // 父级ID
				wmsStockAreaId: '', // 货位
				wmsStockId: '', // 仓库
				wmsStockLocationId: '' // 区域
			})
			// 校验参数
			const validatorList = ref({
				erpMaterialId: '物料编码', // 物料编码
				materialName: '物料名称', // 物料名称
				materialLots: '物料批次', // 物料批次
				supplierCode: '供应商编号', // 供应商编号
				batchQty: '批次数量', // 批次数量
				unitCode: '单位', // 单位
				wmsLabelMasterId: 'qrCode', // qrCode
				wmsProductionWorkOrderBomDetailId: '父级ID', // 父级ID
				wmsStockAreaId: '货位', // 货位
				wmsStockId: '仓库', // 仓库
				wmsStockLocationId: '区域' // 区域
			})
			const inputting = function(e) {
				console.log(e)
			}
			onLoad((options) => {
				masterId.value = options?.id
			})
			const handleMapass = function() {
				// uni.$reqGet("scanMaterial", {
				// 		qrCode: "1633359048430505985-1-1-1-2"
				// 	})
				// 	.then(({
				// 		data
				// 	}) => {
				// 		uni.$grace.msg("成功")
				// 		submitParams.value = {
				// 			erpMaterialId: data?.materialNo, // 物料编码
				// 			materialName: data?.materialName, // 物料名称
				// 			materialLots: data?.materialLots, // 物料批次
				// 			supplierCode: data?.supplierCode, // 供应商编号
				// 			batchQty: data?.receiptQty, // 批次数量
				// 			unitCode: data?.funitId, // 单位
				// 			wmsLabelMasterId: data?.qrCode, // qrCode
				// 			wmsProductionWorkOrderBomDetailId: masterId.value,
				// 			wmsStockAreaId: data?.wmsStoreAreaId,
				// 			wmsStockId: data?.erpStockId,
				// 			wmsStockLocationId: data?.wmsStoreId,
				// 		}
				// 	})
				const mpaasScanModule = uni.requireNativePlugin('Mpaas-Scan-Module')
				mpaasScanModule.mpaasScan({
						// 扫码识别类型，参数可多选，qrCode、barCode，不设置，默认识别所有
						'scanType': ['qrCode', 'barCode'],
						// 是否隐藏相册，默认false不隐藏
						'hideAlbum': false
					},
					(ret) => {
						if (ret.resp_code === 1000) {
							uni.$reqGet('scanMaterial', {
									qrCode: ret.resp_result
								})
								.then(({
									data
								}) => {
									submitParams.value = {
										erpMaterialId: data?.materialNo, // 物料编码
										materialName: data?.materialName, // 物料名称
										materialLots: data?.materialLots, // 物料批次
										supplierCode: data?.supplierCode, // 供应商编号
										batchQty: data?.receiptQty, // 批次数量
										unitCode: data?.funitId, // 单位
										wmsLabelMasterId: data?.qrCode, // qrCode
										wmsProductionWorkOrderBomDetailId: masterId.value,
										wmsStockAreaId: data?.wmsStoreAreaId,
										wmsStockId: data?.erpStockId,
										wmsStockLocationId: data?.wmsStoreId
									}
								})
						}
					})
			}
			// 完成发料
			const handleNavigateToBack = function() {
				uni.$reqPost('issueFinishIssue', issueRecord.value).then(({
					code,
					data,
					msg
				}) => {
					if (code === 0) {
						uni.$grace.msg('已完成发料')
					} else {
						uni.$grace.msg(msg)
					}
				})
			}
			// 添加发料
			const handleAddIssue = function(state) {
				const keys = Object.keys(submitParams.value)
				for (let x = 0; x < keys.length; x++) {
					if (submitParams.value[keys[x]] === '' || submitParams.value[keys[x]] === undefined ||
						submitParams.value[keys[x]] === null) {
						uni.$grace.msg(validatorList.value[keys[x]] + '不能为空！')
						return
					}
				}
				issueRecord.value.push(submitParams.value)
				submitParams.value = {
					erpMaterialId: '',
					materialName: '',
					materialLots: '',
					supplierCode: '',
					batchQty: '',
					unitCode: '',
					wmsLabelMasterId: '',
					wmsProductionWorkOrderBomDetailId: '',
					wmsStockAreaId: '',
					wmsStockId: '',
					wmsStockLocationId: ''
				}
				uni.setStorage({
					key: 'issueRecord',
					data: JSON.stringify(issueRecord.value)
				})
			}
			// 本次发料记录
			const handleNavigateTo = function() {
				uni.navigateTo({
					url: '/pages/workbranch/warehouse/productionIssue/currentIssueRecord'
				})
			}

			// 禁用软键盘
			const handleInputFocus = function() {
				setTimeout(() => {
					uni.hideKeyboard()
				}, 100)
			}
			return {
				goBack,
				issueRecord,
				submitParams,
				inputting,
				handleMapass,
				handleAddIssue,
				handleInputFocus,
				handleNavigateTo,
				handleNavigateToBack
			}
		}
	})
</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: 200px;

		.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;
			}
		}
	}

	text,
	span {
		font-size: 12px;
	}
</style>