feat: add mobile leave list page
Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,156 @@
|
||||
<!-- frontend/src/views/mobile/LeavesList.vue -->
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { leavesApi } from '@/api/leaves'
|
||||
|
||||
const router = useRouter()
|
||||
const loading = ref(false)
|
||||
const leaves = ref<any[]>([])
|
||||
|
||||
const leaveTypeColors: Record<string, string> = {
|
||||
'年假': '#4A6741', '事假': '#5B7FA5', '病假': '#B8472E',
|
||||
'调休': '#C4934A', '其他': '#7B7568',
|
||||
}
|
||||
|
||||
onMounted(loadLeaves)
|
||||
|
||||
async function loadLeaves() {
|
||||
loading.value = true
|
||||
try {
|
||||
const res = await leavesApi.list({ page_size: 100 })
|
||||
leaves.value = res.data.items || []
|
||||
} catch (e: any) { ElMessage.error('加载失败') }
|
||||
finally { loading.value = false }
|
||||
}
|
||||
|
||||
function isActive(row: any): boolean {
|
||||
const today = new Date().toISOString().slice(0, 10)
|
||||
return row.start_date <= today && row.end_date >= today
|
||||
}
|
||||
|
||||
async function handleDelete(id: string) {
|
||||
try {
|
||||
await ElMessageBox.confirm('确定删除？', '确认', { type: 'warning' })
|
||||
await leavesApi.delete(id)
|
||||
ElMessage.success('已删除')
|
||||
await loadLeaves()
|
||||
} catch (e: any) { if (e !== 'cancel') ElMessage.error('删除失败') }
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="leaves-list-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">我的请假</h2>
|
||||
<span class="form-subtitle">LEAVE RECORDS</span>
|
||||
</div>
|
||||
<div class="form-rule"></div>
|
||||
</header>
|
||||
|
||||
<button class="new-leave-btn" @click="router.push('/m/leave/new')">
|
||||
<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="12" y1="5" x2="12" y2="19"></line>
|
||||
<line x1="5" y1="12" x2="19" y2="12"></line>
|
||||
</svg>
|
||||
新建请假
|
||||
</button>
|
||||
|
||||
<div v-loading="loading" class="leave-cards">
|
||||
<div v-if="leaves.length === 0 && !loading" class="empty-state">
|
||||
<div class="empty-glyph">—</div>
|
||||
<p class="empty-text">暂无请假记录</p>
|
||||
</div>
|
||||
|
||||
<article
|
||||
v-for="l in leaves" :key="l.id"
|
||||
class="leave-card"
|
||||
:class="{ 'leave-card--active': isActive(l) }"
|
||||
@click="router.push(`/m/leave/${l.id}/edit`)"
|
||||
>
|
||||
<div class="leave-card-accent" :style="{ background: leaveTypeColors[l.leave_type] || '#7B7568' }"></div>
|
||||
<div class="leave-card-body">
|
||||
<div class="leave-card-header">
|
||||
<span class="leave-card-type" :style="{ background: leaveTypeColors[l.leave_type] || '#7B7568', color: '#fff', padding: '2px 10px', fontSize: '12px' }">{{ l.leave_type }}</span>
|
||||
<span class="leave-card-days">{{ l.days }}天</span>
|
||||
</div>
|
||||
<div class="leave-card-dates">{{ l.start_date }} ~ {{ l.end_date }}</div>
|
||||
<div v-if="l.reason" class="leave-card-reason">{{ l.reason }}</div>
|
||||
<div class="leave-card-footer">
|
||||
<span class="leave-card-submitter">提交人: {{ l.submitted_by_name }}</span>
|
||||
<button class="leave-card-delete" @click.stop="handleDelete(l.id)">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<polyline points="3 6 5 6 21 6"></polyline>
|
||||
<path d="M19 6v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6m3 0V4a2 2 0 012-2h4a2 2 0 012 2v2"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.leaves-list-page { max-width: 100%; padding-bottom: 20px; }
|
||||
|
||||
.form-editorial-header {
|
||||
display: flex; align-items: flex-start; gap: 14px;
|
||||
margin-bottom: 20px; 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); }
|
||||
|
||||
.new-leave-btn {
|
||||
width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px;
|
||||
padding: 14px; background: var(--ink); color: #fff; border: none;
|
||||
font-family: var(--font-heading); font-size: 15px; letter-spacing: 0.06em;
|
||||
cursor: pointer; transition: all 0.25s; margin-bottom: 18px;
|
||||
}
|
||||
.new-leave-btn:hover { background: var(--ink-light); }
|
||||
.new-leave-btn:active { transform: scale(0.98); }
|
||||
|
||||
.leave-cards { display: flex; flex-direction: column; gap: 10px; }
|
||||
|
||||
.leave-card {
|
||||
background: var(--surface); border: 1px solid var(--warm-border);
|
||||
display: flex; cursor: pointer; transition: transform 0.2s, box-shadow 0.2s;
|
||||
}
|
||||
.leave-card:active { transform: scale(0.99); }
|
||||
.leave-card:hover { box-shadow: 0 4px 12px rgba(28,55,56,0.06); }
|
||||
.leave-card--active { border-left: 3px solid #5B7FA5; }
|
||||
|
||||
.leave-card-accent { width: 4px; flex-shrink: 0; }
|
||||
.leave-card-body { flex: 1; padding: 14px 16px; min-width: 0; }
|
||||
|
||||
.leave-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
|
||||
.leave-card-days { font-family: var(--font-mono); font-size: 13px; color: var(--warm-gray); }
|
||||
.leave-card-dates { font-family: var(--font-body); font-size: 14px; color: var(--ink); margin-bottom: 4px; }
|
||||
.leave-card-reason { font-family: var(--font-body); font-size: 13px; color: var(--c-text-muted); margin-bottom: 8px; }
|
||||
.leave-card-footer { display: flex; align-items: center; justify-content: space-between; }
|
||||
.leave-card-submitter { font-size: 11px; color: var(--warm-gray); }
|
||||
.leave-card-delete { background: none; border: none; color: var(--vermilion); cursor: pointer; padding: 2px; opacity: 0.6; }
|
||||
.leave-card-delete:hover { opacity: 1; }
|
||||
|
||||
.empty-state { text-align: center; padding: 48px 0; }
|
||||
.empty-glyph { font-family: var(--font-heading); font-size: 40px; color: var(--gold); opacity: 0.4; margin-bottom: 8px; }
|
||||
.empty-text { font-family: var(--font-body); font-size: 15px; color: var(--warm-gray); margin: 0; }
|
||||
</style>
|
||||
Reference in New Issue
Block a user