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

<template>
	<view class="p-4 flex justify-between items-center">
		<view>
			<u-button class="m-0" size="mini" type="primary" @click="punch(0)" v-if="!currPunchInfo.morningStatus">早打卡</u-button>

			<template v-else>
				<!-- 1 待审核  2 已驳回  3 已通过 -->
				<view :class="{'relative': currPunchInfo.morningStatus === 1}">
					<text class="font-semibold"
						:class="{'line-through text-red-500': currPunchInfo.morningStatus === 2, 'text-cyan': currPunchInfo.morningStatus === 3}"
					>
						{{ dayjs(+currPunchInfo.morning).format("HH:mm") }}
					</text>

					<!-- 小红点 -->
					<u-badge v-if="currPunchInfo.morningStatus === 1"
						:is-dot="true" type="error" size="mini" style="top: -2px; right: -10px;"
					></u-badge>
				</view>
			</template>
		</view>

		<view>
			<u-button class="m-0" size="mini" type="primary" @click="punch(1)" v-if="!currPunchInfo.nightStatus">晚打卡</u-button>

			<template v-else>
				<!-- 1 待审核  2 已驳回  3 已通过 -->
				<view :class="{'relative': currPunchInfo.nightStatus === 1}">
					<text class="font-semibold"
						:class="{'line-through text-red-500': currPunchInfo.nightStatus === 2, 'text-cyan': currPunchInfo.nightStatus === 3}"
					>
						{{ dayjs(+currPunchInfo.night).format("HH:mm") }}
					</text>

					<!-- 小红点 -->
					<u-badge v-if="currPunchInfo.nightStatus === 1"
						:is-dot="true" type="error" size="mini" style="top: -2px; right: -10px;"
					></u-badge>
				</view>
			</template>
		</view>

		<!-- 审核人 -->
		<view class="flex items-center">
			<view class="mr-2 flex items-center rounded-md border-gray-200"
        :class="{'px-2 py-1 border border-solid': !(currPunchInfo.morning && currPunchInfo.night)}"
        @click="showCheckerList">
				<text>{{ checkerName ? checkerName : members[0].name }}</text>
				<u-icon v-if="!(currPunchInfo.morning && currPunchInfo.night)" class="ml-3" size="24" name="arrow-down"></u-icon>
			</view>

			<u-icon size="30" name="arrow-right" @click="toDetail"></u-icon>

			<u-select v-model="show" :list="list" @confirm="confirm"></u-select>
		</view>
	</view>
</template>

<script setup>
	import { computed, onMounted, ref, watch } from 'vue';
	import { useStore } from 'vuex';
	import dayjs from 'dayjs';

	const store = useStore();
	const projectId = computed(() => store.getters['project/projectId']);
	const roleId = computed(() => store.state.role.roleId);
	const members = computed(() => store.state.role.members); // 检查人列表
	const businessCode = computed(() => store.state.task.businessCode); // 服务名

	let currPunchInfo = ref({}); // 当前用户打卡信息
	const show = ref(false); // 是否展示审核人列表
	let list = ref([]); // 审核人列表
	let checkerId = ref(null); // 选择的审核人id
	let checkerName = ref(null); // 选择的审核人姓名

	onMounted(async () => {
		// 用户数据处理
		await handleUser();
		await getClockQuery();
	})

	// 数据
	async function handleUser() {
		// 当前登录用户
		list.value = [];
		members.value.forEach(item => {
			list.value.push({
				value: item.memberId,
				label: item.name
			})

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


	/**
	 * 批量查询打卡信息
	 */
	async function getClockQuery() {
		let startTime = dayjs().startOf('day').valueOf().toString();
		let endTime = dayjs().endOf('day').valueOf().toString();

		try {
			const params = { projectId: projectId.value, roleId: roleId.value, memberIdList: [], startTime, endTime }
			const data = await uni.$u.api.clockQuery(params);

      currPunchInfo.value = data[0].recordList[0];
      checkerId.value = currPunchInfo.value.lastCheckerId ? currPunchInfo.value.lastCheckerId : currPunchInfo.value.checkerId ? currPunchInfo.value.checkerId : checkerId.value;
      checkerName.value = currPunchInfo.value.lastCheckerName ? currPunchInfo.value.lastCheckerName : currPunchInfo.value.checkerName ? currPunchInfo.value.checkerName : checkerName.value;
		} catch (error) {
			console.log('error: ', error);
		}
	}

  function showCheckerList() {
    if (!(currPunchInfo.morning && currPunchInfo.night)) {
      show.value = true
    }
  }

	// 选择审核人结果
	function confirm(e) {
		checkerId.value = e[0].value;
		checkerName.value = e[0].label;
	}

	// 打卡
	async function punch(clockType) {
		try {
			const params = {
				checkerId: checkerId.value,
				id: currPunchInfo.value.id,
				memberId: currPunchInfo.value.memberId,
				dateTime: dayjs().valueOf(),
				clockType,
				longitude: "",
				latitude: ""
			}

			const data = await uni.$u.api.clockPunch(params);

			getClockQuery(); // 打卡成功重新加载打卡信息
		} catch (error) {
			console.log('error: ', error);
		}
	}

	function toDetail() {
		uni.$storage.setStorageSync('pluginKey', 'checkWork');

		uni.navigateTo({
			url: "/pages/detail/detail"
		})
	}
</script>

<style lang="scss" scoped>
	.text-cyan {
		color: #13acc4;
	}
</style>