From 9c83f21a3e781ab5520b5eb7ddfe35c3638a9a21 Mon Sep 17 00:00:00 2001
From: zhangwencui <1064582902@qq.com>
Date: 星期二, 10 二月 2026 14:17:46 +0800
Subject: [PATCH] 打卡签到接口对接
---
src/api/personnelManagement/attendance.js | 26 +++
src/pages/humanResources/attendance/checkin.vue | 238 +++++++++++++----------------
src/pages/humanResources/attendance/report.vue | 204 +++++++++++-------------
3 files changed, 228 insertions(+), 240 deletions(-)
diff --git a/src/api/personnelManagement/attendance.js b/src/api/personnelManagement/attendance.js
new file mode 100644
index 0000000..f7a1798
--- /dev/null
+++ b/src/api/personnelManagement/attendance.js
@@ -0,0 +1,26 @@
+import request from '@/utils/request'
+
+
+export function createPersonalAttendanceRecord(params) {
+ return request({
+ url: "/personalAttendanceRecords",
+ method: "post",
+ data: params,
+ });
+}
+
+export function findPersonalAttendanceRecords(query) {
+ return request({
+ url: "/personalAttendanceRecords/listPage",
+ method: "get",
+ params: query,
+ });
+}
+
+export function findTodayPersonalAttendanceRecord(query) {
+ return request({
+ url: "/personalAttendanceRecords/today",
+ method: "get",
+ params: query,
+ });
+}
\ No newline at end of file
diff --git a/src/pages/humanResources/attendance/checkin.vue b/src/pages/humanResources/attendance/checkin.vue
index 970d35a..a9856f4 100644
--- a/src/pages/humanResources/attendance/checkin.vue
+++ b/src/pages/humanResources/attendance/checkin.vue
@@ -14,14 +14,14 @@
<u-icon name="calendar"
color="#348fe2"
size="16"></u-icon>
- <text class="shift-text">鐧界彮: 09:00-18:00</text>
+ <text class="shift-text">鐧界彮: {{ workTimeDict.startAt }}-{{ workTimeDict.endAt }}</text>
</view>
</view>
<!-- 鎵撳崱鎸夐挳 -->
<view class="checkin-button-container">
<view class="checkin-button-wrapper">
<view class="checkin-button"
- :class="{ 'disabled': checkInOutText === '宸叉墦鍗�' }"
+ :class="{ 'disabled': todayRecord.workEndAt }"
@click="handleCheckInOut">
<text class="checkin-button-text">{{ checkInOutText }}</text>
<text class="checkin-time">{{ nowTime.split(' ')[1] }}</text>
@@ -41,53 +41,53 @@
<view class="employee-info">
<view class="info-item">
<text class="info-label">閮ㄩ棬</text>
- <text class="info-value">{{ currentUser.dept }}</text>
+ <text class="info-value">{{ todayRecord.deptName || '-' }}</text>
</view>
<view class="info-item">
<text class="info-label">濮撳悕</text>
- <text class="info-value">{{ currentUser.name }}</text>
+ <text class="info-value">{{ todayRecord.staffName || '-' }}</text>
</view>
<view class="info-item">
<text class="info-label">宸ュ彿</text>
- <text class="info-value">{{ currentUser.no }}</text>
+ <text class="info-value">{{ todayRecord.staffNo || '-' }}</text>
</view>
</view>
<!-- 浠婃棩鑰冨嫟鐘舵�� -->
<view class="today-status">
- <u-icon :name="todayRecord ? 'checkmark-circle' : 'close-circle'"
- :color="todayRecord ? '#4cd964' : '#ff3b30'"
+ <u-icon :name="todayRecord.id ? 'checkmark-circle' : 'close-circle'"
+ :color="todayRecord.id ? '#4cd964' : '#ff3b30'"
size="16"></u-icon>
<text class="status-text">
- {{ todayRecord ? `浠婃棩鑰冨嫟: 涓婄彮 ${todayRecord.checkInTime}` : '浠婃棩鏈墦鍗�' }}
+ {{ todayRecord.id ? `浠婃棩鑰冨嫟: 涓婄彮 ${todayRecord.workStartAt || '-'}` : '浠婃棩鏈墦鍗�' }}
</text>
</view>
<!-- 涓嬬彮鑰冨嫟鐘舵�� -->
- <view v-if="todayRecord && todayRecord.checkOutTime"
+ <view v-if="todayRecord.id && todayRecord.workEndAt"
class="today-status">
- <u-icon :name="todayRecord ? 'checkmark-circle' : 'close-circle'"
- :color="todayRecord ? '#4cd964' : '#ff3b30'"
+ <u-icon name="checkmark-circle"
+ color="#4cd964"
size="16"></u-icon>
<text class="status-text">
- {{ `浠婃棩鑰冨嫟: 涓嬬彮 ${todayRecord.checkOutTime}` }}
+ {{ `浠婃棩鑰冨嫟: 涓嬬彮 ${todayRecord.workEndAt}` }}
</text>
</view>
<!-- 鎵撳崱鐘舵�� -->
- <view v-if="todayRecord"
- class="today-status">
- <u-icon :name="todayRecord.status === 'normal' ? 'checkmark-circle' : 'clock'"
- :color="todayRecord.status === 'normal' ? '#4cd964' : '#ff3b30'"
+ <view class="today-status">
+ <u-icon :name="todayRecord.id ? (todayRecord.status === 0 ? 'checkmark-circle' : 'clock') : 'clock'"
+ :color="todayRecord.id ? (todayRecord.status === 0 ? '#4cd964' : '#ff3b30') : '#ff3b30'"
size="16"></u-icon>
<text class="status-text">
- {{ `鎵撳崱鐘舵��: ${todayRecord.statusText}` }}
+ {{ `鎵撳崱鐘舵��: ${todayStatusText}` }}
</text>
</view>
- <view v-else
+ <!-- 宸ユ椂淇℃伅 -->
+ <view v-if="todayRecord.id && todayRecord.workHours"
class="today-status">
<u-icon name="clock"
- color="#ff3b30"
+ color="#348fe2"
size="16"></u-icon>
<text class="status-text">
- 鎵撳崱鐘舵��: 缂哄崱
+ {{ `宸ユ椂(灏忔椂): ${todayRecord.workHours}` }}
</text>
</view>
</view>
@@ -97,45 +97,19 @@
<script setup>
import { ref, reactive, computed, onMounted, onBeforeUnmount } from "vue";
import PageHeader from "@/components/PageHeader.vue";
- // 妯℃嫙褰撳墠鐧诲綍鍛樺伐
- const currentUser = reactive({
- id: 1,
- name: "寮犱笁",
- no: "E10001",
- dept: "鐢熶骇涓�閮�",
- });
+ import { getDicts } from "@/api/system/dict/data";
+ import {
+ createPersonalAttendanceRecord,
+ findTodayPersonalAttendanceRecord,
+ } from "@/api/personnelManagement/attendance.js";
+ // 浠婃棩鎵撳崱璁板綍
+ const todayRecord = ref({});
- // 妯℃嫙鑰冨嫟鍘熷鏁版嵁
- const rawAttendance = ref([
- {
- id: 2,
- date: "2026-02-08",
- userId: 1,
- name: "寮犱笁",
- no: "E10001",
- dept: "鐢熶骇涓�閮�",
- checkInTime: "09:15",
- checkOutTime: "18:05",
- workHours: 8.8,
- status: "late",
- statusText: "杩熷埌",
- remark: "鍥犱氦閫氭嫢鍫佃繜鍒�",
- },
- {
- id: 3,
- date: "2026-02-07",
- userId: 1,
- name: "寮犱笁",
- no: "E10001",
- dept: "鐢熶骇涓�閮�",
- checkInTime: "08:45",
- checkOutTime: "18:30",
- workHours: 9.7,
- status: "normal",
- statusText: "姝ｅ父",
- remark: "鍔犵彮0.5灏忔椂",
- },
- ]);
+ // 鐝淇℃伅
+ const workTimeDict = ref({
+ startAt: "09:00",
+ endAt: "18:00",
+ });
// 褰撳墠鏃堕棿灞曠ず
const nowTime = ref("");
@@ -143,6 +117,12 @@
// 杩斿洖涓婁竴椤�
const goBack = () => {
uni.navigateBack();
+ };
+ // 鏌ヨ浠婃棩鎵撳崱淇℃伅
+ const fetchTodayData = () => {
+ findTodayPersonalAttendanceRecord({}).then(res => {
+ todayRecord.value = res.data;
+ });
};
// 鎵撳崱鑼冨洿鐘舵��
@@ -165,22 +145,39 @@
// 浠婃棩鏃ユ湡
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 "宸叉墦鍗�";
+ });
+
+ // 浠婃棩鐘舵�佹爣绛剧被鍨�
+ const todayStatusTag = computed(() => {
+ if (!todayRecord.value.id) return "info";
+ if (todayRecord.value.status === 0) return "success";
+ return "danger";
+ });
+
+ // 浠婃棩鐘舵�佹枃鏈�
+ const todayStatusText = computed(() => {
+ if (!todayRecord.value.id) return "鏈墦鍗�";
+ switch (todayRecord.value.status) {
+ case 0:
+ return "姝ｅ父";
+ case 1:
+ return "杩熷埌";
+ case 2:
+ return "鏃╅��";
+ case 3:
+ return "杩熷埌銆佹棭閫�";
+ case 4:
+ return "缂哄嫟";
+ }
});
// 瀵艰埅鍒拌缁嗘姤鍛婇〉闈�
@@ -243,8 +240,32 @@
});
};
- // 鎵撳崱閫昏緫锛堜粎鍓嶇妯℃嫙锛�
+ // 鑾峰彇鐝瀛楀吀鏁版嵁
+ const getWorkTimeDict = () => {
+ getDicts("sys_work_time")
+ .then(res => {
+ if (res.data && res.data.length > 0) {
+ const dictData = res.data;
+ workTimeDict.value = {
+ startAt: dictData[0].dictValue || "-",
+ endAt: dictData[1].dictValue || "-",
+ };
+ }
+ })
+ .catch(error => {
+ console.error("鑾峰彇鐝瀛楀吀澶辫触:", error);
+ });
+ };
+
+ // 鎵撳崱閫昏緫
const handleCheckInOut = async () => {
+ if (todayRecord.value.workEndAt) {
+ uni.showToast({
+ title: "鎮ㄥ凡缁忔墦杩囧崱浜�,鏃犻渶閲嶅鎵撳崱!!!",
+ icon: "none",
+ });
+ return;
+ }
// 妫�鏌ユ槸鍚﹀湪鎵撳崱鑼冨洿鍐�
if (!inCheckRange.value) {
uni.showToast({
@@ -254,75 +275,30 @@
return;
}
- 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: "",
+ // 璋冪敤鎵撳崱API
+ createPersonalAttendanceRecord({})
+ .then(res => {
+ uni.showToast({
+ title: "鎵撳崱鎴愬姛锛�",
+ icon: "success",
+ });
+ // 閲嶆柊鑾峰彇浠婃棩鎵撳崱淇℃伅
+ fetchTodayData();
+ })
+ .catch(error => {
+ console.error("鎵撳崱澶辫触:", error);
+ uni.showToast({
+ title: error.msg || "鎵撳崱澶辫触锛岃閲嶈瘯",
+ icon: "none",
+ });
});
- uni.showToast({
- title: "涓婄彮鎵撳崱鎴愬姛",
- icon: "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") {
- if (todayRecord.value.status === "late") {
- // 鏃㈣繜鍒板張鏃╅��
- todayRecord.value.status = "late-early";
- todayRecord.value.statusText = "杩熷埌 + 鏃╅��";
- } else {
- // 浠呮棭閫�
- todayRecord.value.status = "early";
- todayRecord.value.statusText = "鏃╅��";
- }
- } else if (todayRecord.value.status === "normal") {
- todayRecord.value.statusText = "姝ｅ父";
- }
- uni.showToast({
- title: "涓嬬彮鎵撳崱鎴愬姛",
- icon: "success",
- });
- } else {
- uni.showToast({
- title: "浠婃棩宸插畬鎴愪笂涓嬬彮鎵撳崱",
- icon: "none",
- });
- }
};
onMounted(async () => {
+ fetchTodayData();
updateNowTime();
timer = setInterval(updateNowTime, 1000);
+ getWorkTimeDict();
// 鑾峰彇浣嶇疆鏉冮檺骞舵鏌ヤ綅缃�
try {
diff --git a/src/pages/humanResources/attendance/report.vue b/src/pages/humanResources/attendance/report.vue
index 7d50294..04bffe2 100644
--- a/src/pages/humanResources/attendance/report.vue
+++ b/src/pages/humanResources/attendance/report.vue
@@ -26,33 +26,43 @@
@cancel="showDatePicker = false"
title="鎼滅储鏃ユ湡" />
<view class="record-list">
- <view v-for="(item) in tableData"
+ <!-- 鍔犺浇鐘舵�� -->
+ <view v-if="loading"
+ class="loading-state">
+ <u-icon name="loading"
+ size="40"
+ color="#348fe2"></u-icon>
+ <text class="loading-text">鍔犺浇涓�...</text>
+ </view>
+ <view v-else
+ v-for="(item) in tableData"
:key="item.id"
class="record-item-card"
- :class="{ 'abnormal': item.status !== 'normal' }">
+ :class="{ 'abnormal': item.status !== 0 }">
<view class="record-item-header">
<text class="record-date">{{ item.date }}</text>
- <u-tag :type="item.status === 'normal' ? 'success' : 'error'"
+ <u-tag :type="item.status === 0 ? 'success' : 'error'"
size="small">
- {{ item.statusText }}
+ <!-- {{ item.status === 0 ? '姝ｅ父' : (item.status === 1 ? '杩熷埌' : (item.status === 2 ? '鏃╅��' : '杩熷埌銆佹棭閫�')) }} -->
+ {{ getStatusText(item.status) }}
</u-tag>
</view>
<view class="record-item-body">
<view class="record-detail">
<text class="detail-label">鍛樺伐</text>
- <text class="detail-value">{{ item.name }} ({{ item.no }})</text>
+ <text class="detail-value">{{ item.staffName }} ({{ item.staffNo }})</text>
</view>
<view class="record-detail">
<text class="detail-label">閮ㄩ棬</text>
- <text class="detail-value">{{ item.dept }}</text>
+ <text class="detail-value">{{ item.deptName }}</text>
</view>
<view class="record-detail">
<text class="detail-label">涓婄彮鏃堕棿</text>
- <text class="detail-value">{{ item.checkInTime ? item.checkInTime : '缂哄崱' }}</text>
+ <text class="detail-value">{{ item.workStartAt || '缂哄崱' }}</text>
</view>
<view class="record-detail">
<text class="detail-label">涓嬬彮鏃堕棿</text>
- <text class="detail-value">{{ item.checkOutTime? item.checkOutTime : '缂哄崱' }}</text>
+ <text class="detail-value">{{ item.workEndAt || '缂哄崱' }}</text>
</view>
<view class="record-detail">
<text class="detail-label">宸ユ椂</text>
@@ -66,11 +76,11 @@
</view>
</view>
<!-- 绌虹姸鎬� -->
- <view v-if="tableData.length === 0"
+ <view v-if="tableData.length === 0 && !loading"
class="empty-state">
- <u-icon name="clock-o"
+ <!-- <u-icon name="clock-o"
size="60"
- color="#999"></u-icon>
+ color="#999"></u-icon> -->
<text class="empty-text">鏆傛棤鑰冨嫟璁板綍</text>
</view>
</view>
@@ -89,96 +99,25 @@
import { ref, reactive, onMounted } from "vue";
import PageHeader from "@/components/PageHeader.vue";
import dayjs from "dayjs";
-
- // 妯℃嫙褰撳墠鐧诲綍鍛樺伐
- const currentUser = reactive({
- id: 1,
- name: "寮犱笁",
- no: "E10001",
- dept: "鐢熶骇涓�閮�",
- });
-
- // 妯℃嫙鑰冨嫟鍘熷鏁版嵁
- const rawAttendance = ref([
- {
- id: 1,
- date: "2026-02-09",
- userId: 1,
- name: "寮犱笁",
- no: "E10001",
- dept: "鐢熶骇涓�閮�",
- checkInTime: "08:58",
- checkOutTime: "",
- workHours: null,
- status: "normal",
- statusText: "姝ｅ父",
- remark: "",
- },
- {
- id: 2,
- date: "2026-02-08",
- userId: 1,
- name: "寮犱笁",
- no: "E10001",
- dept: "鐢熶骇涓�閮�",
- checkInTime: "09:15",
- checkOutTime: "18:05",
- workHours: 8.8,
- status: "late",
- statusText: "杩熷埌",
- remark: "鍥犱氦閫氭嫢鍫佃繜鍒�",
- },
- {
- id: 3,
- date: "2026-02-07",
- userId: 1,
- name: "寮犱笁",
- no: "E10001",
- dept: "鐢熶骇涓�閮�",
- checkInTime: "08:45",
- checkOutTime: "18:30",
- workHours: 9.7,
- status: "normal",
- statusText: "姝ｅ父",
- remark: "鍔犵彮0.5灏忔椂",
- },
- {
- id: 4,
- date: "2026-02-06",
- userId: 1,
- name: "寮犱笁",
- no: "E10001",
- dept: "鐢熶骇涓�閮�",
- checkInTime: "08:50",
- checkOutTime: "17:45",
- workHours: 8.9,
- status: "early",
- statusText: "鏃╅��",
- remark: "瀹朵腑鏈変簨鎻愬墠绂诲紑",
- },
- {
- id: 5,
- date: "2026-02-05",
- userId: 1,
- name: "寮犱笁",
- no: "E10001",
- dept: "鐢熶骇涓�閮�",
- checkInTime: "08:40",
- checkOutTime: "18:20",
- workHours: 9.7,
- status: "normal",
- statusText: "姝ｅ父",
- remark: "鍔犵彮0.5灏忔椂",
- },
- ]);
+ import { findPersonalAttendanceRecords } from "@/api/personnelManagement/attendance.js";
// 鏌ヨ琛ㄥ崟
const searchForm = reactive({
date: "",
});
+ // 鍒嗛〉鍙傛暟
+ const page = reactive({
+ current: -1,
+ size: -1,
+ total: 0,
+ });
+
// 琛ㄦ牸鏁版嵁
const tableData = ref([]);
+
+ // 鍔犺浇鐘舵��
+ const loading = ref(false);
// 杩斿洖涓婁竴椤�
const goBack = () => {
@@ -196,6 +135,20 @@
showDatePicker.value = false;
handleQuery();
};
+ const getStatusText = status => {
+ switch (status) {
+ case 0:
+ return "姝ｅ父";
+ case 1:
+ return "杩熷埌";
+ case 2:
+ return "鏃╅��";
+ case 3:
+ return "杩熷埌銆佹棭閫�";
+ case 4:
+ return "缂哄嫟";
+ }
+ };
// 鏄剧ず鏃ユ湡閫夋嫨鍣�
const selectDate = () => {
@@ -204,27 +157,42 @@
// 娓呴櫎鏃ユ湡閫夋嫨
const clearDate = () => {
+ resetQuery();
+ };
+
+ // 鏌ヨ
+ const handleQuery = () => {
+ loading.value = true;
+ console.log(searchForm, "searchForm");
+
+ findPersonalAttendanceRecords({
+ ...page,
+ ...searchForm,
+ })
+ .then(res => {
+ tableData.value = res.data.records;
+ page.total = res.data.total;
+ })
+ .catch(error => {
+ console.error("鏌ヨ澶辫触:", error);
+ uni.showToast({
+ title: "鏌ヨ澶辫触锛岃閲嶈瘯",
+ icon: "none",
+ });
+ })
+ .finally(() => {
+ loading.value = false;
+ });
+ };
+
+ // 閲嶇疆鏌ヨ
+ const resetQuery = () => {
searchForm.date = "";
handleQuery();
};
- // 鏌ヨ
- const recomputeTable = () => {
- const list = rawAttendance.value.filter(item => {
- if (searchForm.date && item.date !== searchForm.date) {
- return false;
- }
- return true;
- });
- tableData.value = list;
- };
-
- const handleQuery = () => {
- recomputeTable();
- };
-
onMounted(() => {
- recomputeTable();
+ handleQuery();
});
</script>
@@ -307,6 +275,24 @@
margin: 0 20rpx 24rpx;
}
+ /* 鍔犺浇鐘舵�� */
+ .loading-state {
+ background-color: $card-bg;
+ border-radius: 16rpx;
+ box-shadow: $shadow-md;
+ text-align: center;
+ padding: 120rpx 0;
+ margin: 0 20rpx;
+ transition: all 0.3s ease;
+ }
+
+ .loading-text {
+ font-size: 14px;
+ color: $text-tertiary;
+ margin-top: 24rpx;
+ font-weight: 500;
+ }
+
.record-item-card {
background-color: $card-bg;
border-radius: 16rpx;
--
Gitblit v1.9.3