From 4debecd523ec75d292deb72089572c0b3d506061 Mon Sep 17 00:00:00 2001
From: v6ole <voole@vip.qq.com>
Date: Sun, 12 Jul 2026 13:18:07 +0800
Subject: [PATCH] feat: add mobile leave form + list + home entry + routes

Co-Authored-By: Claude <noreply@anthropic.com>
---
 frontend/src/router/index.ts            |   3 +
 frontend/src/views/mobile/Home.vue      |   6 +
 frontend/src/views/mobile/LeaveForm.vue | 201 ++++++++++++++++++++++++
 3 files changed, 210 insertions(+)
 create mode 100644 frontend/src/views/mobile/LeaveForm.vue

diff --git a/frontend/src/router/index.ts b/frontend/src/router/index.ts
index 3ff56e7..d6807f8 100644
--- a/frontend/src/router/index.ts
+++ b/frontend/src/router/index.ts
@@ -42,6 +42,9 @@ const router = createRouter({
         { path: 'key-visit/new', name: 'KeyVisitForm', component: () => import('@/views/mobile/KeyVisitForm.vue') },
         { path: 'note/new', name: 'DailyNoteForm', component: () => import('@/views/mobile/DailyNoteForm.vue') },
         { path: 'note/:id/edit', name: 'DailyNoteEdit', component: () => import('@/views/mobile/DailyNoteForm.vue') },
+        { path: 'leaves', name: 'LeavesList', component: () => import('@/views/mobile/LeavesList.vue') },
+        { path: 'leave/new', name: 'LeaveForm', component: () => import('@/views/mobile/LeaveForm.vue') },
+        { path: 'leave/:id/edit', name: 'LeaveEdit', component: () => import('@/views/mobile/LeaveForm.vue') },
       ],
     },
     // Desktop routes (director/leader-facing)
diff --git a/frontend/src/views/mobile/Home.vue b/frontend/src/views/mobile/Home.vue
index 45721a3..f7d4bb8 100644
--- a/frontend/src/views/mobile/Home.vue
+++ b/frontend/src/views/mobile/Home.vue
@@ -123,6 +123,12 @@ onMounted(loadToday)
         </svg>
         要客拜访
       </button>
+      <button class="link-chip" @click="router.push('/m/leaves')">
+        <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <path d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
+        </svg>
+        请假
+      </button>
     </div>
 
     <!-- ═══ Section Divider ═══ -->
diff --git a/frontend/src/views/mobile/LeaveForm.vue b/frontend/src/views/mobile/LeaveForm.vue
new file mode 100644
index 0000000..641f7e1
--- /dev/null
+++ b/frontend/src/views/mobile/LeaveForm.vue
@@ -0,0 +1,201 @@
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { leavesApi } from '@/api/leaves'
+import { useAuthStore } from '@/stores/auth'
+import api from '@/api/index'
+
+const router = useRouter()
+const route = useRoute()
+const auth = useAuthStore()
+const submitLoading = ref(false)
+const isEdit = !!route.params.id
+const allUsers = ref<any[]>([])
+
+const leaveTypes = ['年假', '事假', '病假', '调休', '其他']
+const leaveTypeColors: Record<string, string> = {
+  '年假': '#4A6741', '事假': '#5B7FA5', '病假': '#B8472E',
+  '调休': '#C4934A', '其他': '#7B7568',
+}
+
+const form = ref({
+  manager_id: auth.userId || '',
+  leave_type: '事假',
+  start_date: '',
+  end_date: '',
+  reason: '',
+})
+
+onMounted(async () => {
+  if (auth.isDirector) {
+    try {
+      const res = await api.get('/users/?role=manager')
+      allUsers.value = Array.isArray(res.data) ? res.data : (res.data.items || [])
+    } catch (_) {}
+  }
+  if (isEdit) {
+    try {
+      const res = await leavesApi.list({ page_size: 100 })
+      const item = (res.data.items || []).find((l: any) => l.id === route.params.id)
+      if (item) form.value = { ...item }
+    } catch (_) {}
+  }
+})
+
+async function handleSubmit() {
+  if (!form.value.start_date || !form.value.end_date) {
+    ElMessage.warning('请选择日期范围')
+    return
+  }
+  if (form.value.start_date > form.value.end_date) {
+    ElMessage.warning('结束日期不能早于开始日期')
+    return
+  }
+  submitLoading.value = true
+  try {
+    const payload = {
+      manager_id: form.value.manager_id,
+      leave_type: form.value.leave_type,
+      start_date: form.value.start_date,
+      end_date: form.value.end_date,
+      reason: form.value.reason || '',
+    }
+    if (isEdit) {
+      await leavesApi.update(route.params.id as string, payload)
+      ElMessage.success('请假已更新')
+    } else {
+      await leavesApi.create(payload)
+      ElMessage.success('请假已提交')
+    }
+    router.push('/m/leaves')
+  } catch (e: any) {
+    ElMessage.error((isEdit ? '更新' : '提交') + '失败: ' + (e.response?.data?.detail || e.message))
+  } finally { submitLoading.value = false }
+}
+
+async function handleDelete() {
+  try {
+    await ElMessageBox.confirm('确定删除？', '确认', { type: 'warning' })
+    await leavesApi.delete(route.params.id as string)
+    ElMessage.success('已删除')
+    router.push('/m/leaves')
+  } catch (e: any) { if (e !== 'cancel') ElMessage.error('删除失败') }
+}
+</script>
+
+<template>
+  <div class="form-page">
+    <header class="form-editorial-header">
+      <button type="button" class="form-back-btn" @click="router.back()">
+        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <line x1="19" y1="12" x2="5" y2="12"></line>
+          <polyline points="12 19 5 12 12 5"></polyline>
+        </svg>
+      </button>
+      <div class="form-title-group">
+        <h2 class="form-title">{{ isEdit ? '编辑请假' : '提交请假' }}</h2>
+        <span class="form-subtitle">LEAVE REQUEST</span>
+      </div>
+      <div class="form-rule"></div>
+    </header>
+
+    <el-form label-position="top" class="editorial-form">
+      <el-form-item v-if="auth.isDirector">
+        <template #label><span class="form-label">客户经理</span></template>
+        <el-select v-model="form.manager_id" filterable placeholder="选择客户经理" style="width:100%">
+          <el-option v-for="u in allUsers" :key="u.id" :label="u.name" :value="u.id" />
+        </el-select>
+      </el-form-item>
+
+      <el-form-item>
+        <template #label><span class="form-label">请假类型</span></template>
+        <div class="leave-type-grid">
+          <button
+            v-for="t in leaveTypes" :key="t"
+            type="button"
+            class="leave-type-chip"
+            :class="{ 'leave-type-chip--active': form.leave_type === t }"
+            :style="form.leave_type === t ? { background: leaveTypeColors[t], borderColor: leaveTypeColors[t], color: '#fff' } : {}"
+            @click="form.leave_type = t"
+          >{{ t }}</button>
+        </div>
+      </el-form-item>
+
+      <el-form-item>
+        <template #label><span class="form-label">开始日期</span></template>
+        <el-date-picker v-model="form.start_date" type="date" placeholder="选择开始日期" style="width:100%" />
+      </el-form-item>
+
+      <el-form-item>
+        <template #label><span class="form-label">结束日期</span></template>
+        <el-date-picker v-model="form.end_date" type="date" placeholder="选择结束日期" style="width:100%" />
+      </el-form-item>
+
+      <el-form-item>
+        <template #label><span class="form-label">原因 <span class="form-label-hint">选填</span></span></template>
+        <el-input v-model="form.reason" type="textarea" :rows="3" placeholder="请假原因..." />
+      </el-form-item>
+
+      <div class="form-actions">
+        <button class="submit-btn" :disabled="submitLoading" @click="handleSubmit">
+          <span v-if="submitLoading" class="btn-loading"></span>
+          {{ isEdit ? '更新请假' : '提交请假' }}
+        </button>
+        <button v-if="isEdit" class="delete-btn" @click="handleDelete">删除</button>
+      </div>
+    </el-form>
+  </div>
+</template>
+
+<style scoped>
+.form-page { max-width: 100%; margin: 0 auto; padding-bottom: 20px; }
+.form-editorial-header {
+  display: flex; align-items: flex-start; gap: 14px;
+  margin-bottom: 26px; flex-wrap: wrap;
+}
+.form-back-btn {
+  background: var(--surface); border: 1px solid var(--warm-border);
+  padding: 8px 10px; cursor: pointer; color: var(--warm-gray);
+  display: flex; align-items: center; transition: all var(--transition);
+  flex-shrink: 0; margin-top: 2px;
+}
+.form-back-btn:hover { color: var(--ink); border-color: var(--ink); }
+.form-title-group { display: flex; flex-direction: column; gap: 0; flex: 1; }
+.form-title { margin: 0; font-family: var(--font-heading); font-size: 24px; font-weight: 400; color: var(--ink); letter-spacing: 0.06em; line-height: 1.3; }
+.form-subtitle { font-family: var(--font-mono); font-size: 9px; color: var(--gold); letter-spacing: 0.2em; }
+.form-rule { width: 100%; height: 2px; background: var(--warm-border); margin-top: 6px; position: relative; }
+.form-rule::after { content: ''; position: absolute; left: 0; top: 0; width: 32px; height: 2px; background: var(--gold); }
+
+.form-label { font-family: var(--font-heading) !important; font-size: 14px !important; color: var(--ink) !important; letter-spacing: 0.04em; font-weight: 500 !important; }
+.editorial-form .el-form-item { margin-bottom: 20px; }
+
+.leave-type-grid { display: flex; gap: 8px; flex-wrap: wrap; }
+.leave-type-chip {
+  flex: 1; min-width: 60px; padding: 10px 8px;
+  background: var(--surface); border: 1px solid var(--warm-border);
+  font-family: var(--font-body); font-size: 13px; letter-spacing: 0.04em;
+  cursor: pointer; transition: all 0.25s; text-align: center;
+}
+.leave-type-chip:hover { border-color: var(--ink); }
+.leave-type-chip--active { font-weight: 600; }
+
+.form-actions { display: flex; gap: 10px; margin-top: 24px; }
+.submit-btn {
+  flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px;
+  padding: 16px; background: var(--ink); color: #fff; border: none;
+  font-family: var(--font-heading); font-size: 16px; letter-spacing: 0.08em;
+  cursor: pointer; transition: all 0.25s;
+}
+.submit-btn:hover { background: var(--ink-light); }
+.submit-btn:active { transform: scale(0.98); }
+.submit-btn:disabled { opacity: 0.6; cursor: not-allowed; }
+.delete-btn {
+  padding: 16px 24px; background: var(--surface); color: var(--vermilion);
+  border: 1px solid var(--vermilion); font-family: var(--font-heading);
+  font-size: 16px; letter-spacing: 0.08em; cursor: pointer; transition: all 0.25s;
+}
+.delete-btn:hover { background: var(--vermilion); color: #fff; }
+.btn-loading { width: 16px; height: 16px; border: 2px solid rgba(255,255,255,0.3); border-top-color: #fff; border-radius: 50%; animation: spin 0.6s linear infinite; }
+@keyframes spin { to { transform: rotate(360deg); } }
+</style>