rd_mes_uniapp/pages/basic/empStaStart.vue

<template>
	<view>
		<uni-card class="empInfo">
			<uni-row>
				<uni-col :span="12">
					<span>员工姓名</span>
				</uni-col>
				<uni-col :span="12">
					<span>{{ empName }}</span>
				</uni-col>
			</uni-row>
		</uni-card>
		<uni-card class="staCode">
			<view class="card-content">
				<view class="codeTitle">工位编码</view>
				<view class="codeContent">
					<uni-icons class="scanIcon" @click="scanCode" type="icon-saoma" custom-prefix="iconfont"
						size="150"></uni-icons>
					<!-- <button class="codeShow">{{ stationCode }}</button> -->
					<uni-easyinput v-model="stationCode" @change="getStationTitle" focus style="width:70vw;"
						placeholder="输入/扫描工位编码" />
				</view>
			</view>
		</uni-card>
		<uni-card class="staName">
			<view class="card-content">
				<view class="staTitle">工位名称</view>
				<view class="staContent">
					{{ stationTitle }}
				</view>
			</view>
		</uni-card>
		<button :disabled="!stationTitle" type="primary" class="startBtn" @click="checkIn">签到</button>
	</view>
</template>

<script>
	import {
		listEmployee
	} from '@/api/mes/jobIn'
	import {
		getInfo
	} from '@/api/login'
	import {
		listStationEmpHistory,
		addStationEmpHistory
	} from '@/api/basic/empStaHistory.js'
	import {
		listStation
	} from '@/api/basic/station.js'
	import {
		getBeijingTime
	} from '@/utils/judge.ts'

	export default {
		data() {
			return {
				userId: null,
				empName: null,
				empCode: null,
				// stationCode: "st001-5",
				stationCode: null,
				stationId: null,
				stationTitle: null
			}
		},
		methods: {
			checkIn() {
				if (this.stationId && this.stationTitle) {
					addStationEmpHistory({
						empCode: this.empCode,
						empName: this.empName,
						stationId: this.stationId,
						stationCode: this.stationCode,
						stationTitle: this.stationTitle
					}).then((res) => {
						uni.showModal({
							title: `签到成功`,
							content: `${this.empName}\n${getBeijingTime()}`,
							showCancel: false
						})
					}).catch((err) => {
						uni.showModal({
							title: `签到失败`,
							content: `${err.msg}`,
							showCancel: false
						})
					})
				}
			},
			scanCode() {
				const _this = this
				uni.scanCode({
					scanType: ['qrCode', 'barCode'],
					success: function(res) {
						_this.stationCode = res.result
						_this.getStationTitle()
					}
				})
			},
			getStationTitle() {
				listStation({
					stationCode: this.stationCode
				}).then(res => {
					if (res.rows.length > 0 && res.rows[0].stationCode === this.stationCode) {
						this.stationId = res.rows[0].id
						this.stationTitle = res.rows[0].stationTitle
					} else if (this.stationCode) {
						this.$modal.showToast("未查询到该工位")
					}
				}).catch(() => {
					this.$modal.showToast("获取工位名称失败")
					this.stationTitle = ""
				})
			}
		},
		onLoad(option) {
			this.userId = option.userId
			this.empCode = option.empCode
			this.empName = option.empName

			if (this.userId && this.empCode && this.empName) {
				return
			}
			// 根据账号获取员工姓名和账号ID
			getInfo().then(res => {
				this.empName = res.user.nickName
				this.userId = res.user.userId
			}).catch(() => {
				uni.showToast({
					title: '当前账号无对应人员资料',
					icon: 'none'
				})
			})
			//根据昵称获取对应员工编号
			listEmployee({
				name: this.empName
			}).then(res => {
				this.empCode = res.rows[0].empCode
			}).catch(() => {
				uni.showToast({
					title: '当前账号无对应人员资料',
					icon: 'none'
				})
			})
		}
	}
</script>

<style scoped lang="scss">
	page {
		box-sizing: border-box;

		.empInfo span {
			line-height: 2rem;
			font-size: 2rem;
		}

		.staCode {
			height: 37vh;
			font-size: 2rem;

			/* 覆盖 uni-card 默认 padding */
			::v-deep .uni-card__content {
				padding: 0;
				height: 100%;
				/* 继承父容器高度 */
			}

			.card-content {
				height: 100%;
				display: flex;
				flex-direction: column;

				.codeTitle {
					flex: 1;
					display: flex;
					align-items: center;
					justify-content: flex-start;
					font-size: 2rem;
					border-bottom: 1px solid #eee;
				}

				.codeContent {
					flex: 5;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;

					.scanIcon {
						flex: 3;
						display: flex;
						align-items: center;
						justify-content: center;
						cursor: pointer;
						width: 100%;
						height: 100%;
					}

					.codeShow {
						flex: 1;
						display: flex;
						align-items: flex-start;
						justify-content: center;
						width: 100%;
						height: 100%;
						font-size: 1.5rem;
					}
				}
			}
		}

		.staName {
			height: 35vh;
			font-size: 2rem;

			/* 覆盖 uni-card 默认 padding */
			::v-deep .uni-card__content {
				padding: 0;
				height: 100%;
				/* 继承父容器高度 */
			}

			.card-content {
				height: 100%;
				display: flex;
				flex-direction: column;

				.staTitle {
					flex: 1;
					display: flex;
					align-items: center;
					justify-content: flex-start;
					font-size: 2rem;
					border-bottom: 1px solid #eee;
				}

				.staContent {
					flex: 5;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					font-size: 5rem;
				}
			}
		}

		.startBtn {
			width: 93vw;
			margin-top: 1vh;
			line-height: 7vh;
			font-size: 3rem;
		}
	}
</style>