rtk-wms-uniapp/pages/workbranch/production/processExecution/processPosteriorSegment.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="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>
			<view class="form">
				<view class="form-item">
					<div class="title">标签码</div>
					<div class="scan-card">
						<uni-easyinput v-model="form.qrCode" class="easyinput" @focus="handleInputFocus" type="text"
							placeholder="请扫描标签码" />
						<text class="font-icons" style="font-size: 20px;" @click="handleScanLabel">&#xe6b7;</text>
					</div>
				</view>
				<view class="form-item">
					<div class="title">员工码</div>
					<div class="scan-card">
						<uni-easyinput v-model="form.employee" class="easyinput" @focus="handleInputFocus" type="text"
							placeholder="请扫描员工码" />
						<text class="font-icons" style="font-size: 20px;" @click="handleScanEmployee">&#xe6b7;</text>
					</div>
				</view>
				<view class="form-item">
					<div class="title">不良数</div>
					<div class="content">
						<uni-easyinput v-model="form.badQty" @focus="handleInputFocus" placeholder="请输入不良数"
							type="digit" />
					</div>
				</view>
				<view class="form-item">
					<div class="title">不良类型</div>
					<div class="content">
						<uni-data-select v-model="form.badType" placeholder="请选择不良类型" :localdata="selectList" />
					</div>
				</view>
				<view class="form-item">
					<div class="title">班别</div>
					<div class="content">
						<uni-data-select v-model="form.classFlag" placeholder="请选择班别" :localdata="classFlagList" />
					</div>
				</view>
			</view>
			<view class="operationBtn">
				<button type="primary" style="width: calc(100% - 8px);margin: 0 4px;"
					@click="handleSubmitData">提交</button>
			</view>
		</template>
	</gui-page>
</template>

<script>
	import {
		ref,
		onMounted,
		defineComponent
	} from 'vue'
	export default defineComponent({
		setup(options) {
			const selectList = ref([]);
			const form = ref({
				hotPressId: '',
				qrCode: '',
				employee: '',
				badQty: 0,
				badType: '',
				classFlag: '',
			})

			onMounted(() => {
				form.value.hotPressId = options?.hotPressId ?? '';
				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,
							})
						}
					})
			})

			// 扫描标签码
			const handleScanLabel = function() {
				// #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) {
							form.value.qrCode = ret.resp_result;
						}
					})
				// #endif
			}

			// 扫描员工码
			const handleScanEmployee = function() {
				// #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) {
							form.value.employee = ret.resp_result;
						}
					})
				// #endif
			}

			const goBack = function() {
				uni.$goBack('/pages/workbranch/production/processExecution/processDetails')
			}

			// 保存
			const handleSubmitData = function() {
				const { qrCode, employee, classFlag } = form.value
				if (qrCode === '' || employee === '' || classFlag === '') {
					uni.showToast({
						title: msg,
						icon: 'none',
						duration: 2000
					})
					return
				}
				uni.$reqPost('precessExecute', form.value)
					.then(({
						code,
						data,
						msg
					}) => {
						if (code === 0) {
							uni.showToast({
								title: '提交成功',
								icon: 'none',
								duration: 1000
							})
							setTimeout(() => {
								goBack()
							}, 1000)
						} else {
							uni.showToast({
								title: msg,
								icon: 'none',
								duration: 2000
							})
						}
					})
			}

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

			return {
				selectList,
				classFlagList: [{
						text: '白班',
						value: 0
					},
					{
						text: '晚班',
						value: 1
					}
				],
				form,
				goBack,
				handleScanLabel,
				handleScanEmployee,
				handleInputFocus,
				handleSubmitData
			}
		}
	})
</script>

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

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

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

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

		.form-item {
			.title {
				height: 32px;
				line-height: 32px;
				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;
	}
</style>