From b56f07e3a834e04e1b8b5719b72d31312506f5da Mon Sep 17 00:00:00 2001
From: huminmin <mac@MacBook-Pro.local>
Date: 星期一, 09 二月 2026 17:20:41 +0800
Subject: [PATCH] 打卡签到：增加打卡，列表显示
---
src/views/personnelManagement/attendanceCheckin/index.vue | 247 +++++++++++++++----------------------------------
1 files changed, 76 insertions(+), 171 deletions(-)
diff --git a/src/views/personnelManagement/attendanceCheckin/index.vue b/src/views/personnelManagement/attendanceCheckin/index.vue
index bcfdb00..0448cf7 100644
--- a/src/views/personnelManagement/attendanceCheckin/index.vue
+++ b/src/views/personnelManagement/attendanceCheckin/index.vue
@@ -12,20 +12,20 @@
<div class="label">褰撳墠鏃堕棿</div>
<div class="value">{{ nowTime }}</div>
</div>
- <el-button type="primary" size="large" @click="handleCheckInOut">
+ <el-button type="primary" size="large" @click="handleCheckInOut" :disabled="todayRecord.workEndAt">
{{ checkInOutText }}
</el-button>
</div>
</div>
<el-descriptions border :column="4" class="mt10">
<el-descriptions-item label="鍛樺伐濮撳悕">
- {{ currentUser.name }}
+ {{ todayRecord.staffName }}
</el-descriptions-item>
<el-descriptions-item label="宸ュ彿">
- {{ currentUser.no }}
+ {{ todayRecord.staffNo }}
</el-descriptions-item>
<el-descriptions-item label="鎵�灞為儴闂�">
- {{ currentUser.dept }}
+ {{ todayRecord.deptName }}
</el-descriptions-item>
<el-descriptions-item label="浠婃棩鐘舵��">
<el-tag :type="todayStatusTag" size="small">
@@ -33,10 +33,10 @@
</el-tag>
</el-descriptions-item>
<el-descriptions-item label="涓婄彮鏃堕棿">
- {{ todayRecord?.checkInTime || '-' }}
+ {{ todayRecord?.workStartAt || '-' }}
</el-descriptions-item>
<el-descriptions-item label="涓嬬彮鏃堕棿">
- {{ todayRecord?.checkOutTime || '-' }}
+ {{ todayRecord?.workEndAt || '-' }}
</el-descriptions-item>
<el-descriptions-item label="宸ユ椂(灏忔椂)">
{{ todayRecord?.workHours ?? '-' }}
@@ -55,7 +55,7 @@
<div>
<span class="search_title">閮ㄩ棬锛�</span>
<el-select
- v-model="searchForm.dept"
+ v-model="searchForm.deptId"
placeholder="璇烽�夋嫨閮ㄩ棬"
style="width: 180px"
clearable
@@ -78,7 +78,7 @@
clearable
/>
- <el-button type="primary" @click="handleQuery" style="margin-left: 10px">
+ <el-button type="primary" @click="fetchData" style="margin-left: 10px">
鎼滅储
</el-button>
<el-button @click="resetSearch">閲嶇疆</el-button>
@@ -95,6 +95,7 @@
<el-table
:data="tableData"
border
+ v-loading="tableLoading"
style="width: 100%"
height="calc(100vh - 24em)"
:header-cell-style="{ background: '#F0F1F5', color: '#333333' }"
@@ -107,45 +108,43 @@
width="120"
/>
<el-table-column
- prop="dept"
+ prop="deptName"
label="閮ㄩ棬"
width="140"
/>
<el-table-column
- prop="name"
+ prop="staffName"
label="濮撳悕"
width="120"
/>
<el-table-column
- prop="no"
+ prop="staffNo"
label="宸ュ彿"
width="120"
/>
<el-table-column
- prop="checkInTime"
+ prop="workStartAt"
label="涓婄彮鏃堕棿"
width="140"
/>
<el-table-column
- prop="checkOutTime"
+ prop="workEndAt"
label="涓嬬彮鏃堕棿"
width="140"
/>
<el-table-column
prop="workHours"
label="宸ユ椂(灏忔椂)"
- width="110"
align="center"
/>
<el-table-column
- prop="statusText"
+ prop="status"
label="鑰冨嫟鐘舵��"
- width="120"
align="center"
>
<template #default="scope">
<el-tag
- v-if="scope.row.status === 'normal'"
+ v-if="scope.row.status === 0"
type="success"
size="small"
>
@@ -156,7 +155,7 @@
type="danger"
size="small"
>
- {{ scope.row.statusText }}
+ {{ scope.row.status === 1 ? '杩熷埌' : '鏃╅��' }}
</el-tag>
</template>
</el-table-column>
@@ -166,6 +165,9 @@
show-overflow-tooltip
/>
</el-table>
+
+ <pagination :total="total" layout="total, sizes, prev, pager, next, jumper"
+ :page="page.current" :limit="page.size" @pagination="paginationChange" />
</div>
</div>
</template>
@@ -173,14 +175,21 @@
<script setup>
import { ref, reactive, computed, onMounted, onBeforeUnmount } from "vue";
import { ElMessage } from "element-plus";
+import {
+ createPersonalAttendanceRecord,
+ findPersonalAttendanceRecords, findTodayPersonalAttendanceRecord
+} from "@/api/personnelManagement/personalAttendanceRecords.js";
+import Pagination from "@/components/Pagination/index.vue";
-// 妯℃嫙褰撳墠鐧诲綍鍛樺伐
-const currentUser = reactive({
- id: 1,
- name: "寮犱笁",
- no: "E10001",
- dept: "鐢熶骇涓�閮�",
-});
+const tableLoading = ref(false)
+// 鍒嗛〉鍙傛暟
+const page = reactive({
+ current: 1,
+ size: 10,
+ total: 0
+})
+// 浠婃棩鏁版嵁
+const todayRecord = ref({})
// 閮ㄩ棬閫夐」
const deptOptions = [
@@ -190,69 +199,9 @@
{ label: "璐ㄦ閮�", value: "璐ㄦ閮�" },
];
-// 妯℃嫙鑰冨嫟鍘熷鏁版嵁
-const rawAttendance = ref([
- {
- id: 1,
- date: "2024-12-01",
- userId: 1,
- name: "寮犱笁",
- no: "E10001",
- dept: "鐢熶骇涓�閮�",
- checkInTime: "08:58",
- checkOutTime: "18:10",
- workHours: 9.2,
- status: "normal",
- statusText: "姝ｅ父",
- remark: "",
- },
- {
- id: 2,
- date: "2024-12-01",
- userId: 2,
- name: "鏉庡洓",
- no: "E10002",
- dept: "鐢熶骇涓�閮�",
- checkInTime: "09:15",
- checkOutTime: "18:05",
- workHours: 8.8,
- status: "late",
- statusText: "杩熷埌",
- remark: "鍥犱氦閫氭嫢鍫佃繜鍒�",
- },
- {
- id: 3,
- date: "2024-12-01",
- userId: 3,
- name: "鐜嬩簲",
- no: "E20001",
- dept: "璁惧缁存姢閮�",
- checkInTime: "08:50",
- checkOutTime: "17:20",
- workHours: 8.5,
- status: "early",
- statusText: "鏃╅��",
- remark: "澶栧嚭澶勭悊绱ф�ユ晠闅�",
- },
- {
- id: 4,
- date: "2024-12-02",
- userId: 1,
- name: "寮犱笁",
- no: "E10001",
- dept: "鐢熶骇涓�閮�",
- checkInTime: "08:45",
- checkOutTime: "18:30",
- workHours: 9.7,
- status: "normal",
- statusText: "姝ｅ父",
- remark: "鍔犵彮0.5灏忔椂",
- },
-]);
-
// 鏌ヨ琛ㄥ崟
const searchForm = reactive({
- dept: "",
+ deptId: "",
date: "",
});
@@ -274,23 +223,12 @@
nowTime.value = `${Y}-${M}-${D} ${h}:${m}:${s}`;
};
-// 浠婃棩鏃ユ湡
-const todayStr = computed(() => nowTime.value.slice(0, 10));
-
-// 褰撴棩褰撳墠鍛樺伐鑰冨嫟璁板綍
-const todayRecord = computed(() =>
- rawAttendance.value.find(
- (item) =>
- item.userId === currentUser.id && item.date === todayStr.value
- )
-);
-
// 鎵撳崱鎸夐挳鏂囨湰
const checkInOutText = computed(() => {
- if (!todayRecord.value || !todayRecord.value.checkInTime) {
+ if (!todayRecord.value || !todayRecord.value.workStartAt) {
return "涓婄彮鎵撳崱";
}
- if (!todayRecord.value.checkOutTime) {
+ if (!todayRecord.value.workEndAt) {
return "涓嬬彮鎵撳崱";
}
return "浠婃棩宸叉墦鍗″畬鎴�";
@@ -298,46 +236,59 @@
// 浠婃棩鐘舵�佸睍绀�
const todayStatusTag = computed(() => {
- if (!todayRecord.value) return "info";
- if (todayRecord.value.status === "normal") return "success";
+ if (!todayRecord.value.id) return "info";
+ if (todayRecord.value.status === 0) return "success";
return "danger";
});
const todayStatusText = computed(() => {
- if (!todayRecord.value) return "鏈墦鍗�";
- return todayRecord.value.statusText || "姝ｅ父";
+ if (!todayRecord.value.id) return "鏈墦鍗�";
+ switch (todayRecord.value.status) {
+ case 0:
+ return "姝ｅ父"
+ case 1:
+ return "杩熷埌"
+ case 2:
+ return "鏃╅��"
+ }
});
// 琛屾牱寮忥細寮傚父楂樹寒
const rowClassName = ({ row }) => {
- if (row.status === "late" || row.status === "early") {
+ if (row.status === 1 || row.status === 2) {
return "row-abnormal";
}
return "";
};
// 鏌ヨ
-const recomputeTable = () => {
- const list = rawAttendance.value.filter((item) => {
- if (searchForm.dept && item.dept !== searchForm.dept) {
- return false;
- }
- if (searchForm.date && item.date !== searchForm.date) {
- return false;
- }
- return true;
+const fetchData = () => {
+ tableLoading.value = true
+ findPersonalAttendanceRecords({...page, searchForm}).then((res) => {
+ tableData.value = res.data.records;
+ page.value.total = res.data.total;
+ }).finally(() => {
+ tableLoading.value = false;
});
- tableData.value = list;
};
-const handleQuery = () => {
- recomputeTable();
+// 鏌ヨ浠婃棩鎵撳崱淇℃伅
+const fetchTodayData = () => {
+ findTodayPersonalAttendanceRecord({}).then((res) => {
+ todayRecord.value = res.data;
+ })
};
+
+const paginationChange = (pagination) => {
+ page.current = pagination.page;
+ page.size = pagination.limit;
+ fetchData();
+}
const resetSearch = () => {
- searchForm.dept = "";
+ searchForm.deptId = "";
searchForm.date = "";
- recomputeTable();
+ fetchData();
};
// 瀵煎嚭锛堟紨绀猴級
@@ -345,59 +296,12 @@
ElMessage.success("褰撳墠涓烘紨绀洪〉闈紝瀵煎嚭鍔熻兘鏈鎺ュ疄闄呮帴鍙�");
};
-// 鎵撳崱閫昏緫锛堜粎鍓嶇妯℃嫙锛�
+// 鎵撳崱
const handleCheckInOut = () => {
- const [dateStr, timeStr] = nowTime.value.split(" ");
- if (!dateStr || !timeStr) return;
-
- // 涓婄彮鎵撳崱
- if (!todayRecord.value) {
- const newId = rawAttendance.value.length
- ? Math.max(...rawAttendance.value.map((i) => i.id)) + 1
- : 1;
- const status =
- timeStr > "09:00:00" ? "late" : "normal";
- const statusText = status === "late" ? "杩熷埌" : "姝ｅ父";
- rawAttendance.value.push({
- id: newId,
- date: dateStr,
- userId: currentUser.id,
- name: currentUser.name,
- no: currentUser.no,
- dept: currentUser.dept,
- checkInTime: timeStr.slice(0, 5),
- checkOutTime: "",
- workHours: null,
- status,
- statusText,
- remark: "",
- });
- ElMessage.success("涓婄彮鎵撳崱鎴愬姛");
- } else if (!todayRecord.value.checkOutTime) {
- // 涓嬬彮鎵撳崱
- todayRecord.value.checkOutTime = timeStr.slice(0, 5);
- // 绠�鍗曟寜 9:00-18:00 璁＄畻宸ユ椂
- const start = todayRecord.value.checkInTime || "09:00";
- const [sh, sm] = start.split(":").map((v) => parseInt(v, 10));
- const [eh, em] = todayRecord.value.checkOutTime
- .split(":")
- .map((v) => parseInt(v, 10));
- const diff = (eh * 60 + em - (sh * 60 + sm)) / 60;
- todayRecord.value.workHours = Number(Math.max(diff, 0).toFixed(1));
-
- // 鏃╅��鍒ゆ柇锛�18:00 鍓嶇寮�瑙嗕负鏃╅��锛堝彧绀烘剰锛�
- if (timeStr < "18:00:00") {
- todayRecord.value.status = "early";
- todayRecord.value.statusText = "鏃╅��";
- } else if (todayRecord.value.status === "normal") {
- todayRecord.value.statusText = "姝ｅ父";
- }
- ElMessage.success("涓嬬彮鎵撳崱鎴愬姛");
- } else {
- ElMessage.info("浠婃棩宸插畬鎴愪笂涓嬬彮鎵撳崱");
- }
-
- recomputeTable();
+ createPersonalAttendanceRecord({}).then((res) => {
+ fetchData()
+ ElMessage.success("鎵撳崱鎴愬姛锛�");
+ })
};
onMounted(() => {
@@ -409,7 +313,8 @@
const M = String(today.getMonth() + 1).padStart(2, "0");
const D = String(today.getDate()).padStart(2, "0");
searchForm.date = `${Y}-${M}-${D}`;
- recomputeTable();
+ fetchData();
+ fetchTodayData()
});
onBeforeUnmount(() => {
--
Gitblit v1.9.3