From 67c560c0cad4224c41b36b2ec755bf3d5aa7e68f Mon Sep 17 00:00:00 2001
From: gaoluyang <2820782392@qq.com>
Date: 星期五, 06 二月 2026 10:51:51 +0800
Subject: [PATCH] Merge branch 'dev_New' into dev_湖南鹏创电子
---
src/views/personnelManagement/attendanceCheckin/index.vue | 469 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 469 insertions(+), 0 deletions(-)
diff --git a/src/views/personnelManagement/attendanceCheckin/index.vue b/src/views/personnelManagement/attendanceCheckin/index.vue
new file mode 100644
index 0000000..bcfdb00
--- /dev/null
+++ b/src/views/personnelManagement/attendanceCheckin/index.vue
@@ -0,0 +1,469 @@
+<template>
+ <div class="app-container">
+ <!-- 鍛樺伐鎵撳崱鍖� -->
+ <el-card shadow="never" class="mb16">
+ <div class="attendance-header">
+ <div>
+ <div class="title">鎵撳崱绛惧埌</div>
+ <div class="sub-title">鏀寔涓�閿墦鍗★紝鑷姩璁板綍涓婁笅鐝椂闂�</div>
+ </div>
+ <div class="attendance-actions">
+ <div class="time-block">
+ <div class="label">褰撳墠鏃堕棿</div>
+ <div class="value">{{ nowTime }}</div>
+ </div>
+ <el-button type="primary" size="large" @click="handleCheckInOut">
+ {{ checkInOutText }}
+ </el-button>
+ </div>
+ </div>
+ <el-descriptions border :column="4" class="mt10">
+ <el-descriptions-item label="鍛樺伐濮撳悕">
+ {{ currentUser.name }}
+ </el-descriptions-item>
+ <el-descriptions-item label="宸ュ彿">
+ {{ currentUser.no }}
+ </el-descriptions-item>
+ <el-descriptions-item label="鎵�灞為儴闂�">
+ {{ currentUser.dept }}
+ </el-descriptions-item>
+ <el-descriptions-item label="浠婃棩鐘舵��">
+ <el-tag :type="todayStatusTag" size="small">
+ {{ todayStatusText }}
+ </el-tag>
+ </el-descriptions-item>
+ <el-descriptions-item label="涓婄彮鏃堕棿">
+ {{ todayRecord?.checkInTime || '-' }}
+ </el-descriptions-item>
+ <el-descriptions-item label="涓嬬彮鏃堕棿">
+ {{ todayRecord?.checkOutTime || '-' }}
+ </el-descriptions-item>
+ <el-descriptions-item label="宸ユ椂(灏忔椂)">
+ {{ todayRecord?.workHours ?? '-' }}
+ </el-descriptions-item>
+ <el-descriptions-item label="寮傚父鏍囪">
+ <span v-if="todayRecord?.status === 'normal'">-</span>
+ <el-tag v-else type="danger" size="small">
+ {{ todayRecord?.statusText }}
+ </el-tag>
+ </el-descriptions-item>
+ </el-descriptions>
+ </el-card>
+
+ <!-- 鏌ヨ鏉′欢锛堢鐞嗗憳鑰冨嫟鏃ユ姤锛� -->
+ <div class="search_form">
+ <div>
+ <span class="search_title">閮ㄩ棬锛�</span>
+ <el-select
+ v-model="searchForm.dept"
+ placeholder="璇烽�夋嫨閮ㄩ棬"
+ style="width: 180px"
+ clearable
+ >
+ <el-option
+ v-for="item in deptOptions"
+ :key="item.value"
+ :label="item.label"
+ :value="item.value"
+ />
+ </el-select>
+
+ <span class="search_title ml10">鏃ユ湡锛�</span>
+ <el-date-picker
+ v-model="searchForm.date"
+ type="date"
+ value-format="YYYY-MM-DD"
+ format="YYYY-MM-DD"
+ placeholder="璇烽�夋嫨鏃ユ湡"
+ clearable
+ />
+
+ <el-button type="primary" @click="handleQuery" style="margin-left: 10px">
+ 鎼滅储
+ </el-button>
+ <el-button @click="resetSearch">閲嶇疆</el-button>
+ </div>
+ <div>
+ <el-button icon="Download" @click="handleExport">
+ 瀵煎嚭鑰冨嫟鏃ユ姤
+ </el-button>
+ </div>
+ </div>
+
+ <!-- 鑰冨嫟鏃ユ姤琛ㄦ牸 -->
+ <div class="table_list">
+ <el-table
+ :data="tableData"
+ border
+ style="width: 100%"
+ height="calc(100vh - 24em)"
+ :header-cell-style="{ background: '#F0F1F5', color: '#333333' }"
+ :row-class-name="rowClassName"
+ >
+ <el-table-column type="index" label="搴忓彿" width="60" align="center" />
+ <el-table-column
+ prop="date"
+ label="鏃ユ湡"
+ width="120"
+ />
+ <el-table-column
+ prop="dept"
+ label="閮ㄩ棬"
+ width="140"
+ />
+ <el-table-column
+ prop="name"
+ label="濮撳悕"
+ width="120"
+ />
+ <el-table-column
+ prop="no"
+ label="宸ュ彿"
+ width="120"
+ />
+ <el-table-column
+ prop="checkInTime"
+ label="涓婄彮鏃堕棿"
+ width="140"
+ />
+ <el-table-column
+ prop="checkOutTime"
+ label="涓嬬彮鏃堕棿"
+ width="140"
+ />
+ <el-table-column
+ prop="workHours"
+ label="宸ユ椂(灏忔椂)"
+ width="110"
+ align="center"
+ />
+ <el-table-column
+ prop="statusText"
+ label="鑰冨嫟鐘舵��"
+ width="120"
+ align="center"
+ >
+ <template #default="scope">
+ <el-tag
+ v-if="scope.row.status === 'normal'"
+ type="success"
+ size="small"
+ >
+ 姝ｅ父
+ </el-tag>
+ <el-tag
+ v-else
+ type="danger"
+ size="small"
+ >
+ {{ scope.row.statusText }}
+ </el-tag>
+ </template>
+ </el-table-column>
+ <el-table-column
+ prop="remark"
+ label="澶囨敞"
+ show-overflow-tooltip
+ />
+ </el-table>
+ </div>
+ </div>
+</template>
+
+<script setup>
+import { ref, reactive, computed, onMounted, onBeforeUnmount } from "vue";
+import { ElMessage } from "element-plus";
+
+// 妯℃嫙褰撳墠鐧诲綍鍛樺伐
+const currentUser = reactive({
+ id: 1,
+ name: "寮犱笁",
+ no: "E10001",
+ dept: "鐢熶骇涓�閮�",
+});
+
+// 閮ㄩ棬閫夐」
+const deptOptions = [
+ { label: "鐢熶骇涓�閮�", value: "鐢熶骇涓�閮�" },
+ { label: "鐢熶骇浜岄儴", value: "鐢熶骇浜岄儴" },
+ { label: "璁惧缁存姢閮�", value: "璁惧缁存姢閮�" },
+ { 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: "",
+ date: "",
+});
+
+// 琛ㄦ牸鏁版嵁
+const tableData = ref([]);
+
+// 褰撳墠鏃堕棿灞曠ず
+const nowTime = ref("");
+let timer = null;
+
+const updateNowTime = () => {
+ const now = new Date();
+ const Y = now.getFullYear();
+ const M = String(now.getMonth() + 1).padStart(2, "0");
+ const D = String(now.getDate()).padStart(2, "0");
+ const h = String(now.getHours()).padStart(2, "0");
+ const m = String(now.getMinutes()).padStart(2, "0");
+ const s = String(now.getSeconds()).padStart(2, "0");
+ 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) {
+ return "涓婄彮鎵撳崱";
+ }
+ if (!todayRecord.value.checkOutTime) {
+ return "涓嬬彮鎵撳崱";
+ }
+ return "浠婃棩宸叉墦鍗″畬鎴�";
+});
+
+// 浠婃棩鐘舵�佸睍绀�
+const todayStatusTag = computed(() => {
+ if (!todayRecord.value) return "info";
+ if (todayRecord.value.status === "normal") return "success";
+ return "danger";
+});
+
+const todayStatusText = computed(() => {
+ if (!todayRecord.value) return "鏈墦鍗�";
+ return todayRecord.value.statusText || "姝ｅ父";
+});
+
+// 琛屾牱寮忥細寮傚父楂樹寒
+const rowClassName = ({ row }) => {
+ if (row.status === "late" || row.status === "early") {
+ 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;
+ });
+ tableData.value = list;
+};
+
+const handleQuery = () => {
+ recomputeTable();
+};
+
+const resetSearch = () => {
+ searchForm.dept = "";
+ searchForm.date = "";
+ recomputeTable();
+};
+
+// 瀵煎嚭锛堟紨绀猴級
+const handleExport = () => {
+ 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();
+};
+
+onMounted(() => {
+ updateNowTime();
+ timer = setInterval(updateNowTime, 1000);
+ // 榛樿灞曠ず褰撳ぉ鏁版嵁
+ const today = new Date();
+ const Y = today.getFullYear();
+ const M = String(today.getMonth() + 1).padStart(2, "0");
+ const D = String(today.getDate()).padStart(2, "0");
+ searchForm.date = `${Y}-${M}-${D}`;
+ recomputeTable();
+});
+
+onBeforeUnmount(() => {
+ if (timer) {
+ clearInterval(timer);
+ }
+});
+</script>
+
+<style scoped lang="scss">
+.mb16 {
+ margin-bottom: 16px;
+}
+
+.attendance-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+
+.attendance-header .title {
+ font-size: 18px;
+ font-weight: 600;
+ margin-bottom: 4px;
+}
+
+.attendance-header .sub-title {
+ font-size: 13px;
+ color: #909399;
+}
+
+.attendance-actions {
+ display: flex;
+ align-items: center;
+ gap: 16px;
+}
+
+.time-block {
+ text-align: right;
+}
+
+.time-block .label {
+ font-size: 12px;
+ color: #909399;
+}
+
+.time-block .value {
+ font-size: 18px;
+ font-weight: 600;
+ color: #333;
+}
+
+::v-deep(.row-abnormal) {
+ background-color: #fff5f5;
+}
+</style>
+
--
Gitblit v1.9.3