rtk-wms-uniapp/pages/workbranch/production/processExecution/processList.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">生产工单</text>
				<!-- 此处加一个右侧展位元素与左侧同宽，实现标题居中 -->
				<!-- 实际宽度请根据自己情况设置 -->
				<view style="width:40px;" />
				<!-- 如果右侧有其他内容可以利用条件编译和定位来实现-->
			</view>
		</template>
		<template #gBody>
			<view class="list-content">
				<view class="search">
					<view class="search-card">
						<text>生产工序</text>
						<view class="custom-select">
							<uni-data-select v-model="queryParams.processNo" :localdata="selectList"
								@change="handleSelected" />
						</view>
					</view>
				</view>
				<view class="scan">
					<view class="scan-card">
						<uni-easyinput ref="easyinput" v-model="scanBatchNumber" class="easyinput" :input-border="false"
							:clearable="false" type="text" focus @focus="handleInputFocus" placeholder="请扫描工单二维码"
							@confirm="confirmWork" />
						<text class="font-icons" style="font-size: 20px;" @click="handleMapass">&#xe6b7;</text>
					</view>
				</view>
				<view v-if="cardList.length > 0" class="list-panel">
					<view v-for="item in cardList" :key="item.id" class="panel" @click="handleToScanMaterials(item)">
						<view class="panel-row">
							<text>{{ item.erpWorkOrderNo }}</text>
							<text class="text-2 font-icons">{{ item.processName }}&#xe66b;</text>
						</view>
						<view class="panel-row">
							<text>生产订单号</text>
							<text>{{ item.materialNo }}</text>
						</view>
						<view class="panel-row">
							<text>计划数量</text>
							<text>{{ item.planningQty }}</text>
						</view>
					</view>
				</view>
				<view v-else>
					<view class="bg-image">
						<image src="@/static/empty.png" mode="heightFix" />
						<text>这里什么都没有...</text>
					</view>
				</view>
			</view>
			<uni-popup ref="popupProcess" background-color="#fff">
				<view class="popup-process-content">
					<view class="list-title" style="margin-bottom: 8px;">
						<span class="font-icons"
							style="font-size: 20px;color: #00a0e9;width: 40px;text-align: center;">&#xe6a3;</span>
						<span>工序列表</span>
					</view>
					<view>
						<view class="grid-box">
							<view v-for="(item, index) in processList" :key="index" class="box"
								@click="handleClickProcessItem(item)">{{ item.processName }}</view>
						</view>
					</view>
				</view>
			</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>
		</template>
	</gui-page>
</template>

<script>
	import {
		onReachBottom
	} from '@dcloudio/uni-app'
	import {
		ref,
		onMounted,
		defineComponent
	} from 'vue'
	export default defineComponent({
		setup() {
			const selectList = ref([])
			const scanBatchNumber = ref('')
			const queryParams = ref({
				pageSize: 10,
				pageNo: 1,
				deviceStatus: 1,
				processNo: '',
				ipqcFlag: 1
			})
			const cardList = ref([])
			const processList = ref([])
			const easyinput = ref()
			const popupProcess = ref()
			const errorState = ref(0)
			const errorTip = ref('')
			const errorTipMessage = ref('')

			const search = function() {
				uni.$reqGet('getHotPressList', queryParams.value)
					.then(({
						data,
						msg
					}) => {
						cardList.value = data?.list ?? []
					})
			}

			onMounted(() => {
				// 待检区列表数据
				uni.$reqGet('getProcessBaseList', {
						pageSize: 100,
						pageNo: 1
					})
					.then(({
						data
					}) => {
						if (data?.list.length > 0) {
							data?.list.forEach(item => {
								selectList.value.push({
									text: item.processName,
									value: item.processNo
								})
							})
						}
					})
				search()
			})

			const goHome = function() {
				uni.removeStorageSync('HotPressInfo')
				uni.$goHome()
			}

			const handleSelected = function(data) {
				queryParams.value.pageNo = 1
				if (![NaN, null, undefined].includes(data)) {
					queryParams.value.processNo = data
				}
				search()
			}

			// 获取工单明细并跳转工单明细页面
			const handleGetHotPressInfo = function(id) {
				uni.$reqGet('getHotPressDetails', {
						id
					})
					.then(({
						code,
						data,
						msg
					}) => {
						if (code === 0 && Object.keys(data).length > 0) {
							uni.setStorageSync('HotPressInfo', JSON.stringify(data))
							uni.navigateTo({
								url: `/pages/workbranch/production/processExecution/processDetails`
							})
						} else {
							// #ifdef APP-PLUS
							plus.device.beep(2)
							// #endif
							errorTipMessage.value = msg
							errorTip.value.open()
							errorState.value = 0
						}
					})
			}

			const handleToScanMaterials = function(params) {
				handleGetHotPressInfo(params?.id)
			}

			const handleValidataHotPressId = function(hotPressId) {
				uni.$reqGet('getUpperMaterialFlatKnife', {
						hotPressId
					})
					.then(({
						code,
						data,
						msg
					}) => {
						if (code === 0) {
							handleGetHotPressInfo(hotPressId)
						} else {
							// #ifdef APP-PLUS
							plus.device.beep(2)
							// #endif
							errorTipMessage.value = msg
							errorTip.value.open()
							errorState.value = 0
						}
					})
			}

			const handleMapass = 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) {
							uni.$reqGet('getHotPressIdByQrCode', {
									qrCode: ret.resp_result
								})
								.then(({
									code,
									data,
									msg
								}) => {
									if (code === 0) {
										if (data?.length === 1) {
											handleValidataHotPressId(data[0].hotPressId)
										} else if (data?.length > 1) {
											processList.value = data
											popupProcess.value.open('bottom')
										}
									} else {
										// #ifdef APP-PLUS
										plus.device.beep(2)
										// #endif
										errorTipMessage.value = msg
										errorTip.value.open()
										errorState.value = 0
									}
								})
						}
					})
				// #endif
			}

			const confirmWork = async function(e) {
				uni.$reqGet('getHotPressIdByQrCode', {
						qrCode: e
					})
					.then(({
						code,
						data,
						msg
					}) => {
						if (code === 0) {
							if (data?.length === 1) {
								handleValidataHotPressId(data[0].hotPressId)
							} else if (data?.length > 1) {
								processList.value = data
								popupProcess.value.open('bottom')
							}
						} else {
							// #ifdef APP-PLUS
							plus.device.beep(2)
							// #endif
							errorTipMessage.value = msg
							errorTip.value.open()
							errorState.value = 0
						}
					})
			}

			// 工序列表点击事件
			const handleClickProcessItem = function(ret) {
				handleValidataHotPressId(ret.hotPressId)
			}

			const setInputFocus = function() {
				scanBatchNumber.value = ''
				easyinput.value.onBlur()
				easyinput.value.onFocus()
			}

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

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

			// uniapp移动端触底事件
			onReachBottom(() => {
				queryParams.value.pageNo += 1
				uni.$reqGet('getHotPressList', queryParams.value)
					.then(({
						data
					}) => {
						Array.prototype.push.call(cardList.value, ...data?.list ?? [])
					})
			})
			return {
				search,
				goHome,
				cardList,
				selectList,
				popupProcess,
				processList,
				easyinput,
				errorTip,
				errorState,
				errorTipMessage,
				handleInputFocus,
				queryParams,
				confirmWork,
				handleSelected,
				scanBatchNumber,
				handleMapass,
				handleToScanMaterials,
				handleClickProcessItem,
				handleCloseErrorTipsModal
			}
		}
	})
</script>

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

	.list-content {
		margin-top: 80px;
		background-color: #edeeee;
	}

	.list-panel {
		padding: 5px 8px;
		margin-top: 102px;
		overflow-y: scroll;
	}

	.scan {
		position: fixed;
		top: 124px;
		left: 0;
		height: 45px;
		width: 100%;
		padding: 0 12px;
		z-index: 1;
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-sizing: border-box;
		background-color: white;

		.scan-card {
			width: 100%;
			display: grid;
			grid-template-rows: 1fr;
			grid-template-columns: 7fr 2fr;
			align-items: center;

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

			text {
				width: 100%;
				text-align: right;
			}
		}
	}

	.search {
		position: fixed;
		top: 79px;
		left: 0;
		height: 45px;
		width: 100%;
		padding: 0 12px 0 24px;
		z-index: 9;
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-sizing: border-box;
		border-bottom: 1px solid #edeeee;
		background-color: white;

		.search-card {
			width: 100%;
			display: grid;
			grid-template-rows: 1fr;
			grid-template-columns: 3fr 7fr;
			align-items: center;
		}
	}

	.custom-select {
		width: 100%;
	}

	.popup-process-content {
		width: 100vw;
		height: 85vh;
		overflow-y: scroll;

		.list-title {
			position: fixed;
			top: 0;
			left: 0;
			z-index: 99999;
			display: flex;
			align-items: center;
			width: 100%;
			height: 45px;
			line-height: 45px;
			font-size: 16px;
			font-weight: bold;
			border-bottom: 1px solid rgba(237, 238, 238, 1);
			border-top-left-radius: 16px;
			border-top-right-radius: 16px;

			.block {
				width: 6px;
				height: 60%;
				margin: 0 4px;
				background-color: rgb(0, 160, 233);
			}
		}

		.grid-box {
			margin-top: 45px;
			display: grid;
			grid-template-columns: 1fr 1fr 1fr;

			.box {
				position: relative;
				height: 40px;
				padding: 10px 6px;
				border: 1px solid rgb(250, 250, 251);
				box-sizing: border-box;
				margin: 12px;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 14px;
				font-weight: bold;
				border-radius: 4px;
				color: white;
				box-shadow: 0 3px 6px 0 rgba(121, 118, 118, 0.34);
				background-color: rgb(0, 160, 233);
			}
			
			.box::before {
				content: '';
				position: absolute;
				top: 20px;
				left: 0;
				bottom: 0;
				transform: translate(-50%, -50%);
				width: 12px;
				height: 12px;
				border-radius: 50%;
				z-index: 1;
				background-color: #ffffff;
			}
		}
	}
</style>