教学点名强化

2026-07-25 16:16:23 +08:00
parent 2c6103d3ae
commit d02b0c56a1
10 changed files with 486 additions and 6 deletions
@@ -0,0 +1,119 @@
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+import { Refresh, Warning } from '@element-plus/icons-vue'
+import http, { apiErrorMessage } from '../api/http'
+
+const records = ref<any[]>([])
+const loading = ref(false)
+const appealDialog = ref(false)
+const appealTarget = ref<any>(null)
+const appealReason = ref('')
+
+const statusLabels: Record<string, string> = {
+  Present: '出勤', Absent: '缺勤', Late: '迟到', Leave: '请假', Excused: '免修',
+}
+const statusColors: Record<string, 'success' | 'danger' | 'warning' | 'info' | undefined> = {
+  Present: 'success', Absent: 'danger', Late: 'warning', Leave: 'info', Excused: undefined,
+}
+const appealStatusLabels: Record<string, string> = {
+  None: '', Pending: '申诉中', Approved: '已通过', Rejected: '已驳回',
+}
+
+async function load() {
+  loading.value = true
+  try { records.value = (await http.get('/attendance/my-records')).data }
+  catch (e) { ElMessage.error(apiErrorMessage(e)) }
+  finally { loading.value = false }
+}
+
+function openAppeal(record: any) {
+  appealTarget.value = record
+  appealReason.value = ''
+  appealDialog.value = true
+}
+
+async function submitAppeal() {
+  if (!appealReason.value.trim()) { ElMessage.warning('请填写申诉原因'); return }
+  try {
+    await http.post('/attendance/records/appeal', {
+      attendanceSheetId: appealTarget.value.attendanceSheetId,
+      reason: appealReason.value,
+    })
+    appealDialog.value = false
+    ElMessage.success('申诉已提交')
+    await load()
+  } catch (e) { ElMessage.error(apiErrorMessage(e)) }
+}
+
+function canAppeal(record: any) {
+  return record.appealStatus === 'None' || record.appealStatus === 'Rejected'
+}
+
+onMounted(load)
+</script>
+
+<template>
+  <div class="page-stack att-page">
+    <section class="page-intro">
+      <div>
+        <span class="section-kicker">ATTENDANCE RECORD</span>
+        <h2>我的考勤</h2>
+        <p>查看所有已提交的考勤记录。对记录有异议可以提交申诉，辅导员将进行审核。</p>
+      </div>
+      <el-button :icon="Refresh" @click="load">刷新</el-button>
+    </section>
+
+    <section v-loading="loading" class="att-list">
+      <article v-for="r in records" :key="`${r.attendanceSheetId}`" class="att-card">
+        <div class="att-info">
+          <span>{{ r.courseCode }} · {{ r.taskNumber }}</span>
+          <h3>{{ r.courseName }}</h3>
+          <p>{{ r.sheetName }} · {{ new Date(r.attendanceDate).toLocaleDateString('zh-CN') }} · {{ r.teacherNames.join('、') }}</p>
+        </div>
+        <div class="att-status">
+          <el-tag :type="statusColors[r.status]" size="small">{{ statusLabels[r.status] }}</el-tag>
+          <span v-if="r.notes" class="att-note">{{ r.notes }}</span>
+        </div>
+        <div class="att-appeal">
+          <template v-if="r.appealStatus !== 'None'">
+            <el-tag size="small" :type="r.appealStatus === 'Pending' ? 'warning' : r.appealStatus === 'Approved' ? 'success' : 'danger'">
+              {{ appealStatusLabels[r.appealStatus] }}
+            </el-tag>
+            <span v-if="r.appealReviewComment" class="att-note">{{ r.appealReviewComment }}</span>
+          </template>
+          <el-button
+            v-if="canAppeal(r) && (r.status === 'Absent' || r.status === 'Late')"
+            size="small"
+            type="warning"
+            :icon="Warning"
+            @click="openAppeal(r)"
+          >申诉</el-button>
+        </div>
+      </article>
+      <el-empty v-if="!records.length" description="暂无考勤记录" />
+    </section>
+
+    <el-dialog v-model="appealDialog" title="考勤申诉" width="500px">
+      <el-form label-position="top">
+        <el-form-item label="申诉原因" required>
+          <el-input v-model="appealReason" type="textarea" :rows="4" maxlength="500" show-word-limit placeholder="请说明您对该考勤记录的异议原因" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="appealDialog = false">取消</el-button>
+        <el-button type="primary" @click="submitAppeal">提交申诉</el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<style scoped>
+.att-list { display: grid; gap: 10px; }
+.att-card { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 18px; background: #fff; border: 1px solid #e4e7ed; border-radius: 8px; flex-wrap: wrap; }
+.att-info span { font-size: 11px; color: var(--muted); }
+.att-info h3 { font-size: 14px; margin: 2px 0; }
+.att-info p { font-size: 12px; color: var(--muted); margin: 0; }
+.att-status { display: flex; align-items: center; gap: 8px; }
+.att-appeal { display: flex; align-items: center; gap: 8px; }
+.att-note { font-size: 11px; color: var(--muted); max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+</style>