From 69e864bcfa2547138af1780afac44345d340dfd9 Mon Sep 17 00:00:00 2001
From: spring <2396852758@qq.com>
Date: 星期四, 05 二月 2026 17:14:56 +0800
Subject: [PATCH] fix: 完成用户评价、打卡签到页面

---
 src/views/personnelManagement/attendanceCheckin/index.vue    |  469 +++++++++++++++++++++++++++++++
 src/views/equipmentManagement/attendanceManagement/index.vue |  403 ++++++++++++++++++++++++++
 2 files changed, 872 insertions(+), 0 deletions(-)

diff --git a/src/views/equipmentManagement/attendanceManagement/index.vue b/src/views/equipmentManagement/attendanceManagement/index.vue
new file mode 100644
index 0000000..a346d0b
--- /dev/null
+++ b/src/views/equipmentManagement/attendanceManagement/index.vue
@@ -0,0 +1,403 @@
+<template>
+  <div class="app-container">
+    <!-- 鏈嶅姟璇勪环姒傝锛氭ā鎷熷憳宸ヤ笟缁╄瘎鍒� -->
+    <el-row :gutter="16" class="mb16">
+      <el-col :span="8">
+        <el-card shadow="never">
+          <div class="kpi-title">鏈湀骞冲潎璇勫垎</div>
+          <div class="kpi-value">
+            {{ overallAvgScore.toFixed(1) }}
+            <span class="kpi-unit">鍒�</span>
+          </div>
+          <el-rate v-model="overallAvgScore" disabled show-score score-template="{value} / 5" />
+        </el-card>
+      </el-col>
+      <el-col :span="8">
+        <el-card shadow="never">
+          <div class="kpi-title">宸茶瘎浠风淮淇伐鍗�</div>
+          <div class="kpi-value">
+            {{ ratedCount }}
+            <span class="kpi-unit">鍗�</span>
+          </div>
+        </el-card>
+      </el-col>
+      <el-col :span="8">
+        <el-card shadow="never">
+          <div class="kpi-title">寰呰瘎浠风淮淇伐鍗�</div>
+          <div class="kpi-value kpi-warning">
+            {{ pendingCount }}
+            <span class="kpi-unit">鍗�</span>
+          </div>
+        </el-card>
+      </el-col>
+    </el-row>
+
+    <!-- 鏌ヨ鏉′欢锛氱鐞嗗憳鎸夊伐绋嬪笀 / 瀹㈡埛 / 鏃堕棿杩芥函璇勪环 -->
+    <div class="search_form">
+      <div>
+        <span class="search_title">缁翠慨宸ョ▼甯堬細</span>
+        <el-input
+          v-model="searchForm.engineerName"
+          placeholder="璇疯緭鍏ュ伐绋嬪笀濮撳悕"
+          style="width: 180px"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+
+        <span class="search_title ml10">瀹㈡埛鍚嶇О锛�</span>
+        <el-input
+          v-model="searchForm.customerName"
+          placeholder="璇疯緭鍏ュ鎴峰悕绉�"
+          style="width: 180px"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+
+        <span class="search_title ml10">瀹屾垚鏃堕棿锛�</span>
+        <el-date-picker
+          v-model="searchForm.dateRange"
+          type="daterange"
+          range-separator="鑷�"
+          start-placeholder="寮�濮嬫棩鏈�"
+          end-placeholder="缁撴潫鏃ユ湡"
+          value-format="YYYY-MM-DD"
+          format="YYYY-MM-DD"
+          clearable
+        />
+
+        <span class="search_title ml10">璇勪环鐘舵�侊細</span>
+        <el-select
+          v-model="searchForm.status"
+          placeholder="璇烽�夋嫨"
+          style="width: 140px"
+          clearable
+        >
+          <el-option label="寰呰瘎浠�" value="pending" />
+          <el-option label="宸茶瘎浠�" value="rated" />
+        </el-select>
+
+        <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' }"
+      >
+        <el-table-column type="index" label="搴忓彿" width="60" align="center" />
+        <el-table-column prop="orderNo" label="缁翠慨宸ュ崟鍙�" width="160" show-overflow-tooltip />
+        <el-table-column prop="deviceName" label="璁惧鍚嶇О" width="160" show-overflow-tooltip />
+        <el-table-column prop="customerName" label="瀹㈡埛鍚嶇О" width="180" show-overflow-tooltip />
+        <el-table-column prop="engineerName" label="缁翠慨宸ョ▼甯�" width="120" />
+        <el-table-column prop="completeTime" label="缁翠慨瀹屾垚鏃堕棿" width="180" />
+        <el-table-column prop="score" label="鏄熺骇璇勫垎" width="140" align="center">
+          <template #default="scope">
+            <el-rate v-if="scope.row.score" v-model="scope.row.score" disabled />
+            <span v-else>-</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="status" label="璇勪环鐘舵��" width="100" align="center">
+          <template #default="scope">
+            <el-tag
+              :type="scope.row.status === 'rated' ? 'success' : 'warning'"
+              size="small"
+            >
+              {{ scope.row.status === 'rated' ? '宸茶瘎浠�' : '寰呰瘎浠�' }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="feedback" label="瀹㈡埛鍙嶉" show-overflow-tooltip />
+        <el-table-column label="鎿嶄綔" width="160" align="center" fixed="right">
+          <template #default="scope">
+            <el-button
+              v-if="scope.row.status === 'pending'"
+              type="primary"
+              link
+              size="small"
+              @click="openEvaluate(scope.row)"
+            >
+              鍘昏瘎浠�
+            </el-button>
+            <el-button
+              v-else
+              type="primary"
+              link
+              size="small"
+              @click="openEvaluate(scope.row)"
+            >
+              鏌ョ湅 / 淇敼璇勪环
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+
+    <!-- 璇勪环寮规锛氭ā鎷熲�滅淮淇畬鎴愬悗寮瑰嚭瀹㈡埛绔瘎浠封�� -->
+    <el-dialog
+      v-model="dialogVisible"
+      :title="dialogTitle"
+      width="520px"
+      destroy-on-close
+    >
+      <div class="dialog-order-info" v-if="currentOrder">
+        <div>缁翠慨宸ュ崟锛歿{ currentOrder.orderNo }}</div>
+        <div>璁惧鍚嶇О锛歿{ currentOrder.deviceName }}</div>
+        <div>缁翠慨宸ョ▼甯堬細{{ currentOrder.engineerName }}</div>
+      </div>
+      <el-form
+        ref="formRef"
+        :model="form"
+        :rules="rules"
+        label-width="100px"
+      >
+        <el-form-item label="鏄熺骇璇勫垎锛�" prop="score">
+          <el-rate v-model="form.score" :max="5" />
+        </el-form-item>
+        <el-form-item label="鏂囧瓧鍙嶉锛�" prop="feedback">
+          <el-input
+            v-model="form.feedback"
+            type="textarea"
+            :rows="4"
+            placeholder="璇峰～鍐欏鏈缁翠慨鏈嶅姟鐨勮瘎浠凤紝濡傚搷搴旈�熷害銆佷笓涓氱▼搴︺�佹矡閫氫綋楠岀瓑"
+          />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="dialogVisible = false">鍙� 娑�</el-button>
+          <el-button type="primary" @click="handleSubmit">鎻� 浜� 璇� 浠�</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive, computed } from "vue";
+import { ElMessage } from "element-plus";
+
+// 妯℃嫙缁翠慨宸ュ崟 + 瀹㈡埛璇勪环鏁版嵁
+const rawOrders = ref([
+  {
+    id: 1,
+    orderNo: "WX-2024-1201-001",
+    deviceName: "绌哄帇鏈� A1 鍙�",
+    customerName: "鍗庡崡鐢靛瓙绉戞妧鏈夐檺鍏徃",
+    engineerName: "鐜嬪笀鍌�",
+    completeTime: "2024-12-01 10:30:00",
+    completeDate: "2024-12-01",
+    status: "rated",
+    score: 5,
+    feedback: "缁翠慨闈炲父涓撲笟锛屽搷搴旈�熷害蹇紝鐜板満瑙ｉ噴涔熷緢娓呮櫚锛屾弧鎰忋��",
+  },
+  {
+    id: 2,
+    orderNo: "WX-2024-1201-002",
+    deviceName: "娉ㄥ鏈� B3 鍙�",
+    customerName: "鍗庝笢绮惧瘑鍒堕�犳湁闄愬叕鍙�",
+    engineerName: "鏉庡笀鍌�",
+    completeTime: "2024-12-01 15:20:00",
+    completeDate: "2024-12-01",
+    status: "rated",
+    score: 4,
+    feedback: "鏁翠綋杩樹笉閿欙紝灏辨槸鍒板満鏃堕棿绋嶅井闀夸簡涓�鐐癸紝甯屾湜鍚庨潰鑳藉啀蹇竴浜涖��",
+  },
+  {
+    id: 3,
+    orderNo: "WX-2024-1202-003",
+    deviceName: "鐒婃帴鏈哄櫒浜� C2 鍙�",
+    customerName: "瑗垮崡鏂拌兘婧愮鎶�鑲′唤",
+    engineerName: "寮犲笀鍌�",
+    completeTime: "2024-12-02 11:05:00",
+    completeDate: "2024-12-02",
+    status: "pending",
+    score: null,
+    feedback: "",
+  },
+  {
+    id: 4,
+    orderNo: "WX-2024-1203-005",
+    deviceName: "娴嬭瘯鍙� D1 鍙�",
+    customerName: "鍖楁柟姹借溅闆堕儴浠舵湁闄愬叕鍙�",
+    engineerName: "鐜嬪笀鍌�",
+    completeTime: "2024-12-03 09:50:00",
+    completeDate: "2024-12-03",
+    status: "pending",
+    score: null,
+    feedback: "",
+  },
+]);
+
+// 鏌ヨ琛ㄥ崟
+const searchForm = reactive({
+  engineerName: "",
+  customerName: "",
+  dateRange: [],
+  status: "",
+});
+
+// 鍒楄〃鏁版嵁
+const tableData = ref([...rawOrders.value]);
+
+// 缁熻锛氭暣浣撹瘎鍒嗐�佸凡璇勪环 / 寰呰瘎浠锋暟閲�
+const ratedOrders = computed(() =>
+  rawOrders.value.filter((o) => o.status === "rated" && o.score)
+);
+
+const overallAvgScore = computed(() => {
+  if (!ratedOrders.value.length) return 0;
+  const sum = ratedOrders.value.reduce((acc, cur) => acc + (cur.score || 0), 0);
+  return sum / ratedOrders.value.length;
+});
+
+const ratedCount = computed(() => ratedOrders.value.length);
+const pendingCount = computed(
+  () => rawOrders.value.filter((o) => o.status === "pending").length
+);
+
+// 鏌ヨ / 閲嶇疆
+const recomputeTable = () => {
+  const list = rawOrders.value.filter((item) => {
+    if (
+      searchForm.engineerName &&
+      !item.engineerName.includes(searchForm.engineerName.trim())
+    ) {
+      return false;
+    }
+    if (
+      searchForm.customerName &&
+      !item.customerName.includes(searchForm.customerName.trim())
+    ) {
+      return false;
+    }
+    if (searchForm.status && item.status !== searchForm.status) {
+      return false;
+    }
+    if (Array.isArray(searchForm.dateRange) && searchForm.dateRange.length === 2) {
+      const [start, end] = searchForm.dateRange;
+      if (item.completeDate < start || item.completeDate > end) {
+        return false;
+      }
+    }
+    return true;
+  });
+  tableData.value = list;
+};
+
+const handleQuery = () => {
+  recomputeTable();
+};
+
+const resetSearch = () => {
+  searchForm.engineerName = "";
+  searchForm.customerName = "";
+  searchForm.dateRange = [];
+  searchForm.status = "";
+  recomputeTable();
+};
+
+// 瀵煎嚭锛堟紨绀猴級
+const handleExport = () => {
+  ElMessage.success("褰撳墠涓烘紨绀洪〉闈紝璇勪环瀵煎嚭鍔熻兘鏈鎺ュ疄闄呮帴鍙�");
+};
+
+// 璇勪环寮规
+const dialogVisible = ref(false);
+const dialogTitle = ref("缁翠慨鏈嶅姟璇勪环");
+const currentOrder = ref(null);
+const formRef = ref(null);
+const form = reactive({
+  score: 0,
+  feedback: "",
+});
+
+const rules = {
+  score: [{ required: true, message: "璇烽�夋嫨鏄熺骇璇勫垎", trigger: "change" }],
+  feedback: [{ required: true, message: "璇峰～鍐欐枃瀛楀弽棣�", trigger: "blur" }],
+};
+
+// 鎵撳紑璇勪环锛氭ā鎷熲�滅淮淇畬鎴愮‘璁ゅ悗寮瑰嚭璇勪环寮规鈥�
+const openEvaluate = (row) => {
+  currentOrder.value = row;
+  dialogTitle.value =
+    row.status === "pending" ? "缁翠慨鏈嶅姟璇勪环" : "鏌ョ湅 / 淇敼璇勪环";
+  form.score = row.score || 0;
+  form.feedback = row.feedback || "";
+  dialogVisible.value = true;
+};
+
+// 鎻愪氦璇勪环锛氬悓姝ュ埌鏈湴鈥滃憳宸ヤ笟缁╃粺璁♀��
+const handleSubmit = () => {
+  if (!formRef.value) return;
+  formRef.value.validate((valid) => {
+    if (!valid || !currentOrder.value) return;
+
+    const target = rawOrders.value.find((o) => o.id === currentOrder.value.id);
+    if (target) {
+      target.score = form.score;
+      target.feedback = form.feedback;
+      target.status = "rated";
+    }
+
+    ElMessage.success("璇勪环鎻愪氦鎴愬姛锛屽凡鍚屾鑷冲憳宸ヤ笟缁╃粺璁�");
+    dialogVisible.value = false;
+    recomputeTable();
+  });
+};
+
+// 鍒濆鍖栧垪琛�
+recomputeTable();
+</script>
+
+<style scoped lang="scss">
+.mb16 {
+  margin-bottom: 16px;
+}
+
+.kpi-title {
+  font-size: 13px;
+  color: #909399;
+}
+
+.kpi-value {
+  margin-top: 6px;
+  font-size: 24px;
+  font-weight: 600;
+  color: #303133;
+}
+
+.kpi-unit {
+  font-size: 12px;
+  margin-left: 4px;
+  color: #909399;
+}
+
+.kpi-warning {
+  color: #e6a23c;
+}
+
+.dialog-order-info {
+  margin-bottom: 12px;
+  font-size: 13px;
+  color: #606266;
+  line-height: 1.8;
+}
+
+.dialog-footer {
+  text-align: right;
+}
+</style>
+
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