From 9c83f21a3e781ab5520b5eb7ddfe35c3638a9a21 Mon Sep 17 00:00:00 2001
From: zhangwencui <1064582902@qq.com>
Date: 星期二, 10 二月 2026 14:17:46 +0800
Subject: [PATCH] 打卡签到接口对接
---
src/pages/humanResources/attendance/report.vue | 204 +++++++++++++++++++++++---------------------------
1 files changed, 95 insertions(+), 109 deletions(-)
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