rd_mes_uniapp/pages/basic/empStaEnd.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="startedSta">
			<view class="startedStaTitle">
				可签退工位
			</view>
			<scroll-view scroll-y class="stations">
				<uni-card class="station" margin="10px 0" v-for="(sta, index) in startedStations" :key="index">
					<template v-slot:title>
						<uni-section type="line" :title="'签到时间：'+ sta.startTime" titleFontSize="1rem" />
					</template>
					<view class="staInfo">
						<view class="staTitle">{{sta.stationTitle}}</view>
						<view class="staCode">{{sta.stationCode}}</view>
					</view>
					<button class="checkoutBtn" type="warn" @click="checkOut(sta.logId)">签退</button>
				</uni-card>
			</scroll-view>
		</uni-card>
	</view>
</template>

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

	export default {
		data() {
			return {
				userId: null,
				empName: null,
				empCode: null,
				stationCode: null,
				stationId: null,
				stationTitle: null,
				startedStations: []
			}
		},
		methods: {
			getStartedStation() {
				this.startedStations = []
				listStationEmpHistory({
					empName: this.empName
				}).then((res) => {
					const filteredData = res.rows.filter((item) => item.endTime == null)
					console.log(filteredData)
					if (filteredData.length > 0) {
						for (let i in filteredData) {
							this.startedStations.push({
								logId: filteredData[i].id,
								stationTitle: filteredData[i].stationTitle,
								stationId: filteredData[i].stationId,
								stationCode: filteredData[i].stationCode,
								startTime: filteredData[i].startTime
							})
						}
					} else {
						this.$modal.showToast("没有可签退工位")
					}
				})
			},
			checkOut(id) {
				console.log(id)
				//根据记录id签退
				handleSignOut(id).then(() => {
					uni.showModal({
						title: `签退成功`,
						content: `${this.empName}\n${getBeijingTime()}`,
						showCancel: false
					})
					setTimeout(this.getStartedStation(), 1000)
				}).catch((err) => {
					uni.showModal({
						title: `签退失败`,
						content: err.msg,
						showCancel: false
					})
				})
			}
		},
		async onLoad(option) {
			this.userId = option.userId
			this.empCode = option.empCode
			this.empName = option.empName

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

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

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

		.startedSta {
			max-height: 80vh;

			.startedStaTitle {
				border-radius: 10px;
				line-height: 2rem;
				font-size: 2rem;
				text-align: center;
				margin-bottom: 2vh;
			}

			.stations {
				max-height: 80vh;

				::v-deep uni-scroll-view-content {
					max-height: 100%;
				}
			}

			.staInfo {
				height: 8vh;
				display: flex;
				flex-direction: column;
				justify-content: space-evenly;
				margin-bottom: 1vh;

				.staCode,
				.staTitle {
					text-align: center;
				}

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

				.staCode {
					line-height: 1.2rem;
					font-size: 1.2rem;
				}
			}
		}
	}
</style>