warst/warst-h5/pages/attendanceClock/statistics/attendStatistics/index.vue

<template>
	<!-- 考勤统计(日历) -->
	<view class="attend-statistics">
		<u-navbar :placeholder="true" title="考勤统计" :autoBack="true">
			<template slot="right">
				<view @click="toggleType" class="dflex acenter">
					<image
						class="nav-right-icon"
						src="@/static/images/statistics/month.png"
					></image>
				</view>
			</template>
		</u-navbar>
		<view class="content">
			<!-- 日历-->
			<view class="scroll-main">
				<view class="c-box">
					<view class="calendar-box">
						<uni-calendar
							class="uni-calendar--hook"
							:selected="selected"
							:date="selectDay.fulldate"
							:showMonth="false"
							@change="handleChange"
							@monthSwitch="monthSwitch"
						/>
					</view>
					<view class="mt-10">
						<detailSteps
							:selectDay="selectDay"
							:key="detailsInfo.resultId"
							:detailsInfo="detailsInfo"
						></detailSteps>
					</view>
				</view>
			</view>

			<view class="footer">
				<c-button @click="goClock">
					<view class="dflex acenter">
						<image
							class="btn-icon"
							src="@/static/images/attendanceClock/clock-gray.png"
						></image>
						打卡
					</view>
				</c-button>
				<c-button type="primary">
					<view class="dflex acenter">
						<image
							class="btn-icon"
							src="@/static/images/attendanceClock/statistics-bai.png"
						></image>
						统计
					</view>
				</c-button>
			</view>
		</view>
	</view>
</template>

<script>
import {
	getCalendarData,
	getStatistics,
} from '@/api/attendanceClock/index.js';
import detailSteps from '@/pages/attendanceClock/com/detail-steps.vue'; // 在考勤组

export default {
	name: 'attendStatistics',
	components: {
		detailSteps,
	},
	data() {
		return {
			detailsInfo: {},
			selectMonth: '', // 选择的月份
			selectDay: {}, // 选择的天
			selected: [],
		};
	},
	onLoad() {
		const _date = new Date();
		this.selectMonth = uni.$u.timeFormat(_date, 'yyyy-mm');
		const today = uni.$u.timeFormat(new Date(), 'yyyy-mm-dd');
		this.selectDay = { fulldate: today }; // 选择的天
		this.getDetailData();
	},
	methods: {
		async getDetailData() {
			const data = await this.getDetailList(); // 根据月查询
			const today = uni.$u.timeFormat(new Date(), 'yyyy-mm-dd');
			const item = data.find((item) => item.numDate === today);
			this.selectDay = { ...item, fulldate: today };
			await this.getDayInfo(); // 根据日查询
		},
		toggleType() {
			uni.redirectTo({
				url: '/pages/attendanceClock/statistics/monthlyStatistics/index',
			});
		},
		goClock() {
			uni.redirectTo({ url: '/pages/attendanceClock/index' });
		},
		async getDetailList() {
			try {
				uni.$c.loading();
				const date = uni.$u.timeFormat(this.selectMonth, 'yyyy-mm');
				const { data } = await getCalendarData(date);
				uni.hideLoading();
				const types = {
					0: 'success',
					1: 'error',
				};
				this.selected = (data || []).map((item) => ({
					...item,
					date: item.numDate,
					type: types[item.isNormal], //0正常 1异常
				}));
				return data;
			} catch (e) {
				uni.hideLoading();
				throw new Error(e);
			}
		},
		monthSwitch(e) {
			// 切换年月触发
			this.selectMonth = `${e.year}-${uni.$u.padZero(e.month)}`;
			this.getDetailList();
		},
		handleChange(e) {
			// 点击item触发
			this.selectDay = { ...e.extraInfo, fulldate: e.fulldate };
			this.getDayInfo();
		},
		async getDayInfo() {
			console.log(this.selectDay, 'selectDay');
			try {
				this.$c.loading();
				const { data } = await getStatistics(this.selectDay.fulldate);
				this.detailsInfo = data || {};
				uni.hideLoading();
			} catch (e) {
				uni.hideLoading();
				throw new Error(e);
			}
		},
	},
};
</script>

<style scoped lang="scss">
.attend-statistics {
	display: flex;
	flex-direction: column;
	.content {
		flex: 1;
		display: flex;
		flex-direction: column;
		.scroll-main {
			flex: 1;
			overflow-y: auto;
			position: relative;
			.c-box {
				position: absolute;
				width: 100%;
				top: 0;
				left: 0;
				padding: 30rpx;

				.calendar-box {
					background-color: #fff;
					border-radius: 6px;
					overflow: hidden;
				}
			}
		}
		.footer {
			display: flex;
			margin-bottom: 20rpx;
			.c-button {
				flex: 1;
			}
			.btn-icon {
				width: 32rpx;
				height: 32rpx;
				margin-right: 5px;
			}
		}
	}
}
.nav-right-icon {
	width: 23px;
	height: 26px;
}
</style>