PunchSettle-MiniProgram/pages/punchin-detail/punchin-detail.vue

<template>
	<main-layout :showHome="true" :showBack="true">
		<uni-calendar 
			:start-date="punchInData.startDate"
			:end-date="punchInData.endDate"
			:selected="punchInData.calendarSelected"
			@monthSwitch="calendarMonthSwitchChange"/>	
		<viwe class="info-box">
			<view class="left">打卡：{{punchInData.punchInNum}}次</view>
			<view class="right">全勤率：{{punchInData.punchInRate}}%</view>
		</viwe>
		<view class="log-box">
			<uni-section title="打卡记录" type="line">
				<uni-list>
					<uni-list-item v-for="record in punchInData.punchInRecords" :key="record.punchInDate">
						<template v-slot:body>
							{{record.punchInDate}}
							<span v-if="record.punchInStatus == 1 || record.punchInStatus == 3"> 完成打卡</span>
							<span v-else> 未完成打卡</span>
							<span v-if="record.settleCategory == 1">，打卡{{record.countTrack}}次</span>
							<span v-if="record.settleCategory == 2">，打卡时长{{record.timeTrack}}</span>
						</template>
					</uni-list-item>
				</uni-list>
			</uni-section>
		</view>
		<uni-fab ref="fabBtn" :content="fabContent" :pattern="fabPattern" horizontal="right" vertical="bottom" direction="vertical"  @trigger="trigger"/>
		
		<!-- 删除确认框 -->
		<uni-popup ref="deleteDialog" type="dialog">
			<uni-popup-dialog  mode="base" :before-close="true"
				title="删除提示" content="确认删除当前任务？"
				@confirm="deleteDialogConfirm" @close="deleteDialogClose"></uni-popup-dialog>
		</uni-popup>
		
		<!-- 归档确认框 -->
		<uni-popup ref="archiveDialog" type="dialog">
			<uni-popup-dialog  mode="base" :before-close="true"
				title="归档提示" content="确认归档当前任务？"
				@confirm="archiveDialogConfirm" @close="archiveDialogClose"></uni-popup-dialog>
		</uni-popup>
		
		<!-- 撤销确认框 -->
		<uni-popup ref="revokeDialog" type="dialog">
			<uni-popup-dialog  mode="base" :before-close="true"
				title="撤销提示" content="确认撤销打卡？"
				@confirm="revokeDialogConfirm" @close="revokeDialogClose"></uni-popup-dialog>
		</uni-popup>
		
		<!-- 补卡弹出框 -->
		<uni-popup ref="remakeInputDialog" type="dialog" :is-mask-click="false">
			<uni-popup-dialog
				mode="input" 
				:before-close="true" 
				title="补卡" 
				@confirm="remakeFormConfirm"
				@close="remakeFormClose">
				<view style="width: 100%;">
					<uni-forms ref="remakeForm" :modelValue="remakeFormData" :rules="remakeFormRules" label-position="top" :label-width="150">
						<uni-forms-item name="punchInDate">
							<picker mode="date" :value="remakeFormData.punchInDate" @change="remakePunchInDateChange">
								<view class="pick-box">{{remakeFormData.punchInDate}}</view>
							</picker>
						</uni-forms-item>
					</uni-forms>
				</view>
			</uni-popup-dialog>
		</uni-popup>
		
	</main-layout>
</template>

<script setup>
	import { ref } from 'vue';
	import { onLoad, onPullDownRefresh } from '@dcloudio/uni-app';
	import router from '@/common/constants/router';
	import { punchInApi } from '@/service/apis.js';
	import dateUtils from '@/utils/date';
	
	// 组件
	const fabBtn = ref(null);
	/**
	 * 删除弹出框
	 */
	const deleteDialog = ref(null);
	
	/**
	 * 归档弹出框
	 */
	const archiveDialog = ref(null);
	
	/**
	 * 补卡弹出框
	 */
	const remakeInputDialog = ref(null);
	
	/**
	 * 补卡表单
	 */
	const remakeForm = ref(null);
	
	/**
	 * 撤销弹出框
	 */
	const revokeDialog = ref(null);
	
	// 属性
	/**
	 * 任务ID
	 */
	const punchInId = ref(null);
	
	/**
	 * 悬浮菜单样式
	 */
	const fabPattern = ref({
		icon: 'compose'
	});

	/**
	 * 悬浮按钮菜单
	 */
	const fabContent = [{
			text: '删除',
			active: false,
			iconPath: '/static/delete.svg',
			selectedIconPath: '/static/delete-active.svg',
			func: "delete"
		},
		{
			text: '归档',
			active: false,
			iconPath: '/static/archive.svg',
			selectedIconPath: '/static/archive-active.svg',
			func: "archive"
		},
		{
			text: '撤销',
			active: false,
			iconPath: '/static/revoke.svg',
			selectedIconPath: '/static/revoke_active.svg',
			func: "revoke"
		},
		{
			text: '补卡',
			active: false,
			iconPath: '/static/append.svg',
			selectedIconPath: '/static/append-active.svg',
			func: "remake"
		},
		{
			text: '编辑',
			active: false,
			iconPath: '/static/edit.svg',
			selectedIconPath: '/static/edit-active.svg',
			func: "edit"
		}
	];
	
	/**
	 * 补卡表单数据
	 */
	const remakeFormData = ref({
		punchIndate: '2024-12-16'
	});
	
	/**
	 * 补卡表单校验规则
	 */
	const remakeFormRules = ref({
		punchInDate: {
			rules: [{
				required: true,
				errorMessage: '补卡日期不能为空'
			}]
		}
	});
	
	/**
	 * 查询条件
	 */
	const queryData = ref(null);
	
	/**
	 * 打卡日历数据
	 */
	const punchInData = ref({
		startDate: '2024-12-01',
		endDate: '2024-12-31',
		punchInNum: 0,
		punchInRate: 0,
		calendarSelected: [],
		punchInRecords: []
	});
	
	// 方法
	/**
	 * 悬浮按钮点击事件
	 */
	const trigger = (e) => {
		if (e.item.func == 'delete') {
			deleteDialog.value.open();
		}
		if (e.item.func == 'archive') {
			archiveDialog.value.open();
		}
		if (e.item.func == 'revoke') {
			revokeDialog.value.open();
		}
		if (e.item.func == 'remake') {
			// 初始化上一轮的数据
			remakeFormData.value = {
				punchInId: punchInId.value,
				punchInDate: dateUtils.getYesterday()
			};
			
			remakeInputDialog.value.open();
		}
		if (e.item.func == 'edit') {
			uni.navigateTo({
				url: router.PUNCHIN_EDIT_URL + "?id=" + punchInId.value
			});
		}
		
		fabBtn.value.close();
	}
	
	/**
	 * 删除确认
	 */
	const deleteDialogConfirm = async () => {
		punchInApi.deletePunchIn({id: punchInId.value})
		.then(ret => {
			deleteDialog.value.close();
			uni.showToast({
				title: '删除成功',
				icon: 'success'
			});
			setTimeout(() => {
				uni.navigateBack();
			}, 1000);
		})
		.catch(err => {
			uni.showToast({
				title: '删除失败',
				icon: 'error'
			});
		});
	}
	
	/**
	 * 删除取消
	 */
	const deleteDialogClose = () => {
		deleteDialog.value.close();
	}
	
	/**
	 * 归档确认
	 */
	const archiveDialogConfirm = async () => {
		punchInApi.archivePunchIn({id: punchInId.value})
		.then(ret => {
			archiveDialog.value.close();
			uni.showToast({
				title: '归档成功',
				icon: 'success'
			});
			setTimeout(() => {
				uni.navigateBack();
			}, 1000);
		})
		.catch(err => {
			uni.showToast({
				title: '归档失败',
				icon: 'error'
			});
		});
	}
	
	/**
	 * 归档取消
	 */
	const archiveDialogClose = () => {
		archiveDialog.value.close();
	}
	
	/**
	 * 补卡时间选择监听
	 */
	const remakePunchInDateChange = (e) => {
		remakeFormData.value.punchInDate = e.detail.value;
	}
	
	/**
	 * 补卡表单提交
	 */
	const remakeFormConfirm = async () => {
		remakeForm.value.validate(['punchInId']).then(data => {
			return punchInApi.remakePunchIn(data);
		}).then(e => {
			remakeInputDialog.value.close();
			uni.showToast({
				title: '补卡成功',
				icon: 'success'
			});
			loadData();
		}).catch(err => {
			uni.showToast({
				title: '补卡失败',
				icon: 'error'
			});
		})
	}
	
	/**
	 * 补卡表单取消
	 */
	const remakeFormClose = async () => {
		remakeInputDialog.value.close();
	}
	
	/**
	 * 撤销确认
	 */
	const revokeDialogConfirm = async () => {
		punchInApi.revokePunchIn({id: punchInId.value})
		.then(ret => {
			revokeDialog.value.close();
			uni.showToast({
				title: '撤销成功',
				icon: 'success'
			});
			loadData();
		})
		.catch(err => {
			uni.showToast({
				title: '撤销失败',
				icon: 'error'
			});
		});
	}
	
	/**
	 * 撤销取消
	 */
	const revokeDialogClose = () => {
		revokeDialog.value.close();
	}
	
	/**
	 * 日历月份切换
	 */
	const calendarMonthSwitchChange = (e) => {
		queryData.value = e;
		loadData();
	}
	
	/**
	 * 加载数据
	 */
	const loadData = () => {
		punchInApi.queryPunchInData({
			id: punchInId.value,
			year: queryData.value.year,
			month: queryData.value.month,
		}).then(data => {
			punchInData.value = data;
		}).catch(err => {
			uni.showToast({
				title: '加载失败',
				icon: 'error'
			});
		});
	}
	
	onLoad(async (e) => {
		if (e.id) {
			punchInId.value = e.id;
			// 初始化查询条件
			queryData.value = dateUtils.getTodayYearMonthObj();
			
			// 加载数据
			loadData();
		}
	});
	
	onPullDownRefresh(() => {
		loadData();
		uni.stopPullDownRefresh();
	});
</script>

<style lang="scss" scoped>
	.info-box, .log-box {
		margin-top: 24rpx;
	}
	
	.info-box {
		display: flex;
		background-color: #FFFFFF;
		padding: 20rpx 10rpx;
		
		.left, .right {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
	
	.pick-box {
		display: flex;
		box-sizing: border-box;
		flex-direction: row;
		align-items: center;
		border: 1px solid #dcdfe6;
		border-radius: 4px;
		
		width: auto;
		position: relative;
		overflow: hidden;
		flex: 1;
		line-height: 1;
		font-size: 14px;
		height: 35px;
		padding-left: 10px;
	}
</style>