rtk-wms-uniapp/pages/workbranch/production/processExecution/processFullInspection.vue

<template>
	<gui-page :custom-header="true" :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="goHome">&#xe6c5;</text>
				<!-- 导航文本此处也可以是其他自定义内容 -->
				<text
					class="gui-h4 gui-blod gui-flex1 gui-text-center gui-ellipsis gui-color-white gui-primary-text">全检工序【检验人：{{ employeeName }}】</text>
				<!-- 此处加一个右侧展位元素与左侧同宽，实现标题居中 -->
				<!-- 实际宽度请根据自己情况设置 -->
				<view style="width:40px;">
					<uni-easyinput v-model="scanNumber" type="text" class="hidden-focus" ref="scanRefs" focus
						@confirm="handleConfirmText" />
				</view>
				<!-- 如果右侧有其他内容可以利用条件编译和定位来实现-->
			</view>
		</template>
		<template #gBody>
			<view class="form">
				<view class="form-item">
					<div class="title">不良数</div>
					<div class="content">
						<uni-easyinput v-model="badQty" @focus="handleInputFocus" placeholder="请输入不良数" type="digit" />
					</div>
				</view>
				<view class="form-item">
					<div class="title">不良类型</div>
					<div class="content">
						<uni-data-select v-model="badType" placeholder="请选择不良类型" :localdata="selectList" />
					</div>
				</view>
				<view class="form-item">
					<div class="title">班别</div>
					<div class="content">
						<uni-data-select v-model="classFlag" placeholder="请选择班别" :localdata="classFlagList" />
					</div>
				</view>
				<view class="table-title">
					<span>报工列表</span>
				</view>
				<view v-if="qrCodeList.length > 0" class="list-panel">
					<div v-for="(item, key) in qrCodeList" :key="key" class="panel">
						<uni-swipe-action>
							<!-- 基础用法 -->
							<uni-swipe-action-item :right-options="options" @click="handleRemoveQrCode(key)">
								<template #left>
									<view />
								</template>
								<div class="panel-row">
									<span>条码</span>
									<span>{{ item.labelContent }}</span>
								</div>
								<div class="panel-row">
									<span>物料编码</span>
									<span>{{ item.materialCode }}</span>
								</div>
								<div class="panel-row">
									<span>标签名称</span>
									<span>{{ item.labelName }}</span>
								</div>
								<div class="panel-row">
									<span>数量</span>
									<span>{{ item.qty }}{{ item.unitCode }}</span>
								</div>
							</uni-swipe-action-item>
						</uni-swipe-action>
					</div>
				</view>
				<view v-else>
					<view class="bg-image">
						<image src="@/static/empty.png" mode="heightFix" />
						<text>这里什么都没有...</text>
					</view>
				</view>
			</view>
			<view class="operationBtn">
				<button type="primary" style="width: calc(100% - 8px);margin: 0 4px;"
					@click="handleSubmitData">提交</button>
			</view>
			<uni-popup ref="errorTip" type="dialog">
				<uni-popup-dialog type="error" cancel-text="关闭" confirm-text="确认" title="提示" :content="errorTipMessage"
					@confirm="handleCloseErrorTipsModal" @close="handleCloseErrorTipsModal" />
			</uni-popup>
		</template>
	</gui-page>
</template>

<script>
	import {
		ref,
		reactive,
		toRefs,
		onMounted,
		defineComponent
	} from 'vue'
	export default defineComponent({
		setup(options) {
			const selectList = ref([]);
			// 隐藏输入框
			const scanRefs = ref()
			const form = reactive({
				scanNumber: '',
				employee: '',
				employeeName: null,
				badQty: 0,
				badType: null,
				classFlag: 0,
				qrCodeList: []
			})
			const errorState = ref(0)
			const errorTip = ref('')
			const errorTipMessage = ref('')

			const getList = function() {
				uni.$reqGet('getPersonalPageList', {
						processNo: 'INSPECTION',
						mesEmployeeMasterId: form.employee,
					})
					.then(async ({
						code,
						data,
						msg
					}) => {
						if (code === 0) {
							form.qrCodeList = data?.list ?? []
						} else {
							// #ifdef APP-PLUS
							plus.device.beep(2)
							// #endif
							errorTipMessage.value = msg
							errorTip.value.open()
							errorState.value = 0
						}
					})
			}

			onMounted(() => {
				uni.$reqGet('getDictDataPage', {
						dictType: 'mes_inspection_type',
					})
					.then(({
						data
					}) => {
						selectList.value = []
						const dataList = data?.list ?? [];
						for (var i = 0; i < dataList.length; i++) {
							selectList.value.push({
								text: dataList[i].label,
								value: dataList[i].value,
							})
						}
					})

				pollingFocus()
				// 每3s自动定位到扫码框
				setInterval(() => {
					pollingFocus()
				}, 3000)
			})

			const pollingFocus = function() {
				if (scanRefs.value.focusShow) {
					// #ifdef APP-PLUS
					setTimeout(() => {
						uni.hideKeyboard()
					}, 100)
					// #endif
				} else {
					scanRefs.value.onBlur()
					scanRefs.value.onFocus()
				}
			}

			const goHome = function() {
				uni.$goHome()
			}

			// 保存
			const handleSubmitData = function() {
				const submitParams = JSON.parse(JSON.stringify(form))
				submitParams.qrCodeList = []
				form.qrCodeList.forEach(ret => !ret.id ? submitParams.qrCodeList.push(ret.labelContent) : null)
				uni.$reqPost('inspectionExecute', submitParams)
					.then(({
						code,
						data,
						msg
					}) => {
						if (code === 0) {
							getList()
							uni.showToast({
								title: '提交成功',
								icon: 'none',
								duration: 1000
							})
						} else {
							uni.showToast({
								title: msg,
								icon: 'none',
								duration: 2000
							})
						}
					})
			}

			const handleRemoveQrCode = function(index) {
				form.qrCodeList.splice(index, 1)
			}

			const handleConfirmText = function(e) {
				// 扫码入库
				if (form.employee) {
					const fdIndex = form.qrCodeList.findIndex(ret => ret.labelContent === e)
					if ([null, '', undefined].includes(e)) {
						// #ifdef APP-PLUS
						plus.device.beep(2)
						// #endif
						errorTipMessage.value = '请扫入正确的条码!'
						errorTip.value.open()
						errorState.value = -1
						return
					}
					if (fdIndex != -1) {
						// #ifdef APP-PLUS
						plus.device.beep(2)
						// #endif
						errorTipMessage.value = '条码重复，请重新扫码!'
						errorTip.value.open()
						errorState.value = -1
					} else {
						// 存在员工码，扫码入列表
						uni.$reqGet("scanProcessFullInspectionBatchNumber", {
								batchNumber: e
							})
							.then(async ({
								code,
								data,
								msg
							}) => {
								if (code === 0) {
									// 绑定员工
									if (!!data) {
										form.qrCodeList.unshift({
											labelName: data?.materialName,
											materialCode: data?.erpMaterialNo,
											labelContent: e,
											unitCode: data?.unitCode,
											qty: data?.qty,
										})
										getList()
									}
								} else {
									// #ifdef APP-PLUS
									plus.device.beep(2)
									// #endif
									errorTipMessage.value = '员工码不正确，请检查！'
									errorTip.value.open()
									errorState.value = -1
								}
							})
					}
					setInputFocus()
				} else {
					uni.$reqGet("getEmployeeMaster", {
							id: e
						})
						.then(async ({
							code,
							data,
							msg
						}) => {
							if (code === 0) {
								// 绑定员工
								if (!!data) {
									form.employee = e
									form.employeeName = data.employeeName
									getList()
								}
							} else {
								// #ifdef APP-PLUS
								plus.device.beep(2)
								// #endif
								errorTipMessage.value = '员工码不正确，请检查！'
								errorTip.value.open()
								errorState.value = -1
							}
						})
					setInputFocus()
				}
			}

			const setInputFocus = function() {
				form.scanNumber = ''
				scanRefs.value.onBlur()
				scanRefs.value.onFocus()
			}

			// 禁用软键盘
			const handleInputFocus = function() {
				// #ifdef APP-PLUS
				setTimeout(() => {
					uni.hideKeyboard()
				}, 100)
				// #endif
			}

			return {
				selectList,
				...toRefs(form),
				classFlagList: [{
						text: '白班',
						value: 0
					},
					{
						text: '晚班',
						value: 1
					}
				],
				options: [{
					text: '删除',
					style: {
						backgroundColor: '#dd524d'
					}
				}],
				errorTip,
				errorTipMessage,
				goHome,
				scanRefs,
				handleInputFocus,
				handleConfirmText,
				handleSubmitData,
				handleRemoveQrCode
			}
		}
	})
</script>

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

	span,
	text {
		font-size: 12px;
	}

	.list-content {
		background-color: #edeeee;
	}

	.form {
		margin-top: 80px;
		margin-bottom: 70px;
		font-size: 12px;
		border-radius: 4px;
		background-color: white;

		.form-title {
			height: 28px;
			line-height: 28px;
			text-align: center;
			font-size: 16px;
			font-weight: bold;
			border-bottom: 2px dashed #edeeee;
		}

		.form-item {
			padding: 2px 8px;

			.title {
				height: 28px;
				line-height: 28px;
				text-align: left;
				font-weight: bold;
				color: #333;
			}

			.content {
				height: 42px;
				line-height: 42px;
				margin: 0 0 6px 0;
			}

			.scan-card {
				width: 100%;
				position: relative;
				display: grid;
				grid-template-rows: 1fr;
				grid-template-columns: 1fr 30px;
				align-items: center;

				input {
					height: 35px;
					line-height: 35px;
				}

				text {
					// position: absolute;
					width: 30px;
					display: flex;
					justify-content: center;
					text-align: center;
				}
			}
		}
	}

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

	.operationBtn {
		position: fixed;
		width: 100%;
		bottom: 0;
		padding: 12px 0;
	}

	.table-title {
		height: 28px;
		line-height: 28px;
		margin: -4px 0 3px 0;
		padding: 0 8px;
		font-size: 16px;
		font-weight: bold;
		background-color: white;
	}

	.hidden-focus {
		position: fixed;
		top: 0;
		left: 0;
		z-index: -1;
		opacity: 0;
	}
</style>