TALL-MUI-4/plugins/p-check-work-summary/detail.vue

<template>
	<!-- 考勤统计 -->
	<view>
		<!-- 标题 + 筛选 -->
		<view class="check-work-title px-3 fixed top-0 z-10 w-full flex justify-between items-center bg-white">
			<text>考勤统计</text>

			<view>
				<u-button class="mr-3" size="mini" type="primary" @click="isShow = !isShow">过滤</u-button>
				<u-button size="mini" type="primary" @click="isShow = !isShow">导出</u-button>
			</view>
		</view>

		<view class="check-work-list">
			<u-table class="table-head">
				<u-tr>
					<u-th>姓名</u-th>
					<u-th>出勤(天)</u-th>
					<u-th>请假(天)</u-th>
					<u-th>加班(天)</u-th>
				</u-tr>
			</u-table>

			<view v-if="clockInfos.length" v-for="(list, listIndex) in clockInfos" :key="listIndex">
				<view class="table-time px-2">{{ dayjs(+list.dateTime).format("YYYY-MM") }}</view>

				<u-table class="table-body">
					<u-tr v-if="list.recordList.length" v-for="(item, index) in list.recordList" :key="index" @click="toDetail(list.dateTime, item)">
						<u-td>{{ item.memberName }}</u-td>
						<u-td>{{ item.attendance_days }}</u-td>
						<u-td>{{ item.leave_days }}</u-td>
						<u-td>{{ item.overtime_days }}</u-td>
					</u-tr>
				</u-table>
			</view>
		</view>

		<!-- 筛选框 -->
		<SearchPopup v-if="isShow" :members="list" :show="isShow" :source="'checkWorkSummary'" @closePopup="closePopup" @getClockQuery="getClockQuery" @clockExport="clockExport"></SearchPopup>
	</view>
</template>

<script setup>
	import { computed, onMounted, ref } from 'vue';
	import { useStore } from 'vuex';
	import dayjs from 'dayjs';
	import SearchPopup from '@/components/SearchPopup/SearchPopup.vue';

  const emit = defineEmits(['checkClock']);

	const projectId = uni.$storage.getStorageSync('projectId');
	const roleId = uni.$storage.getStorageSync('roleId');
	const checkers = uni.$storage.getStorageSync('checkers'); // 检查人列表
	const checkWorkDetail = uniCloud.importObject('check-work') //第一步导入云对象

	const clockInfos = ref([]);
	let isShow = ref(false);
	let list = ref([]); // 审核人列表
	let checkerId = ref(null);
	let checkerName = ref(null);

	onMounted(() => {
		list.value = [];

		let checker_arr = JSON.parse(checkers);

		checker_arr.forEach(item => {
			list.value.push({
				value: item.memberId,
				label: item.memberName
			})

			if (item.memberName === '周勇') {
				checkerId.value = item.memberId;
				checkerName.value = item.memberName;
			}
		})

		getClockQuery();
	})

	async function getClockQuery(data) {
		closePopup();

		const startTime = data ? dayjs(+data.startTime).startOf('month').valueOf() : dayjs().subtract(1, 'month').startOf('month').valueOf();
		const endTime = data ? dayjs(+data.endTime).endOf('month').valueOf() : dayjs().subtract(1, 'month').endOf('month').valueOf();
		const memberIdList = data ? data.memberIdList : [];

		try {
			const params = { projectId, roleId, memberIdList, startTime, endTime }

			const res = await checkWorkDetail.getClockQuery(params);
			clockInfos.value = res.data;
		} catch (error) {
			console.log('error: ', error);
		}
	}

  // 查看打卡详情
  function toDetail(time, data) {
    data.startTime = time,
    data.endTime = dayjs(+time).endOf('month').valueOf();
    data.memberIdList = [];
    data.memberIdList.push(data.memberId._value);
    emit('checkClock', data)
  }

	// 关闭过滤弹框
	function closePopup(data) {
		isShow.value = data;
	}

	// 导出
	function clockExport() {
		closePopup();
	}
</script>

<style lang="scss" scoped>
	.check-work-title {
		height: 50px;
		border-bottom: 1px solid #e8e8e8;
	}

	.check-work-list {
		margin-top: 50px;
	}

	.u-table {
		border-left: unset !important;
	}

	.table-head {
		border-top: unset !important;
	}

	.u-th {
		border-right: unset !important;
		height: 36px;
		background: #fafafa;
	}

	.u-td {
		border-right: unset !important;
		height: 40px;
	}

	.table-time {
		height: 30px;
		line-height: 30px;
		background: #fafafa;
	}
</style>