feat: 完整功能迭代 — 移动端+PC端全面优化
新增: - 今日纪要 (6分类+彩色标签+时间选择器) - 客户经理PC端工作台 (我的数据,5模块CRUD) - 用户管理页 (支局长修改角色) - 客户备注/收支费用(金额+单位)/联系人管理 - 拜访人姓名+电话字段 - 客户导入导出/旧周报导入模板下载 - 序号列+分页(25/50/100) 修复/优化: - Hash路由→HTML5 History, Casdoor回调正常 - 时区统一为Asia/Shanghai (today_cst) - 数据库懒加载→selectinload预加载 - 日期解析兼容ISO datetime字符串 - 文件上传定位修复 (position:relative) - 表单button type='button'防止误提交 - 分管领导权限(只读客户档案,不可编辑) - 侧边栏折叠+SVG图标 - 拜访方式/紧急度统一chip风格 - 时间范围统一为el-time-picker(is-range) - 全局CSS设计变量+box-sizing修复滚动条 Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -27,68 +27,146 @@ onMounted(async () => {
|
||||
}
|
||||
})
|
||||
|
||||
function goWeeklyReport() {
|
||||
router.push('/weekly-report')
|
||||
function goWeeklyReport(managerId?: string) {
|
||||
if (managerId) router.push({ path: '/weekly-report', query: { manager_id: managerId } })
|
||||
else router.push('/weekly-report')
|
||||
}
|
||||
|
||||
function rowState(p: any): 'full' | 'catching' | 'missing' {
|
||||
if (p.has_reported_today && p.completed) return 'full'
|
||||
if (p.has_reported_today && !p.completed) return 'catching'
|
||||
return 'missing'
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="dashboard" v-loading="loading">
|
||||
<h3>仪表盘</h3>
|
||||
<p class="week-range">{{ stats.week_start }} ~ {{ stats.week_end }}</p>
|
||||
|
||||
<!-- Stats Cards -->
|
||||
<el-row :gutter="16" style="margin-bottom: 24px">
|
||||
<el-col :span="6">
|
||||
<el-card shadow="hover" class="stat-card">
|
||||
<div class="stat-value">{{ stats.week_visits }}</div>
|
||||
<div class="stat-label">本周拜访次数</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-card shadow="hover" class="stat-card">
|
||||
<div class="stat-value">{{ stats.work_plans }}</div>
|
||||
<div class="stat-label">工作计划条数</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-card shadow="hover" class="stat-card">
|
||||
<div class="stat-value">{{ stats.mini_business }}</div>
|
||||
<div class="stat-label">商机跟单条数</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-card shadow="hover" class="stat-card">
|
||||
<div class="stat-value">{{ stats.key_visits }}</div>
|
||||
<div class="stat-label">要客拜访条数</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- Quick Actions -->
|
||||
<div class="actions">
|
||||
<el-button type="primary" @click="goWeeklyReport">📋 本周周报详情</el-button>
|
||||
<el-button type="success" v-if="auth.isDirector" @click="router.push('/weekly-report')">📥 导出 Excel</el-button>
|
||||
<el-button @click="router.push('/customers')">👥 客户管理</el-button>
|
||||
<!-- ═══ Editorial Page Header ═══ -->
|
||||
<div class="page-head">
|
||||
<h2 class="page-title">仪表盘</h2>
|
||||
<p class="page-sub">{{ stats.week_start }} — {{ stats.week_end }}</p>
|
||||
<div class="page-rule"></div>
|
||||
</div>
|
||||
|
||||
<!-- Reporting Progress -->
|
||||
<!-- ═══ Stats Cards ═══ -->
|
||||
<div class="stat-grid">
|
||||
<div class="stat-card">
|
||||
<div class="stat-glyph stat-glyph--ink">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
|
||||
<polyline points="9 22 9 12 15 12 15 22"></polyline>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="stat-body">
|
||||
<span class="stat-num">{{ stats.week_visits }}</span>
|
||||
<span class="stat-label">本周拜访</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-glyph stat-glyph--sage">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
|
||||
<rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
|
||||
<line x1="16" y1="2" x2="16" y2="6"></line>
|
||||
<line x1="8" y1="2" x2="8" y2="6"></line>
|
||||
<line x1="3" y1="10" x2="21" y2="10"></line>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="stat-body">
|
||||
<span class="stat-num">{{ stats.work_plans }}</span>
|
||||
<span class="stat-label">工作计划</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-glyph stat-glyph--gold">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
|
||||
<line x1="12" y1="1" x2="12" y2="23"></line>
|
||||
<path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="stat-body">
|
||||
<span class="stat-num">{{ stats.mini_business }}</span>
|
||||
<span class="stat-label">商机跟单</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-glyph stat-glyph--vermilion">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
|
||||
<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="stat-body">
|
||||
<span class="stat-num">{{ stats.key_visits }}</span>
|
||||
<span class="stat-label">要客拜访</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ═══ Quick Actions ═══ -->
|
||||
<div class="actions">
|
||||
<el-button type="primary" @click="goWeeklyReport">
|
||||
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-right:4px">
|
||||
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
|
||||
<polyline points="14 2 14 8 20 8"></polyline>
|
||||
</svg>
|
||||
本周周报详情
|
||||
</el-button>
|
||||
<el-button type="success" v-if="auth.isDirector" @click="router.push('/weekly-report')">
|
||||
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-right:4px">
|
||||
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
|
||||
<polyline points="7 10 12 15 17 10"></polyline>
|
||||
<line x1="12" y1="15" x2="12" y2="3"></line>
|
||||
</svg>
|
||||
导出 Excel
|
||||
</el-button>
|
||||
<el-button plain @click="router.push('/customers')">
|
||||
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-right:4px">
|
||||
<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
|
||||
<circle cx="9" cy="7" r="4"></circle>
|
||||
<path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
|
||||
<path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
|
||||
</svg>
|
||||
客户管理
|
||||
</el-button>
|
||||
</div>
|
||||
|
||||
<!-- ═══ Reporting Progress ═══ -->
|
||||
<el-card class="progress-card">
|
||||
<template #header>填报进度</template>
|
||||
<template #header>
|
||||
<div class="card-header-title">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-right:6px; color: var(--gold)">
|
||||
<line x1="18" y1="20" x2="18" y2="10"></line>
|
||||
<line x1="12" y1="20" x2="12" y2="4"></line>
|
||||
<line x1="6" y1="20" x2="6" y2="14"></line>
|
||||
</svg>
|
||||
填报进度
|
||||
</div>
|
||||
</template>
|
||||
<div v-if="progress.length === 0" class="empty">暂无数据</div>
|
||||
<div v-for="p in progress" :key="p.manager_id" class="progress-row">
|
||||
<div
|
||||
v-for="p in progress"
|
||||
:key="p.manager_id"
|
||||
class="progress-row"
|
||||
:class="`progress-row--${rowState(p)}`"
|
||||
>
|
||||
<!-- Chinese Seal Watermark -->
|
||||
<div class="seal-stamp" :class="`seal-stamp--${rowState(p)}`" aria-hidden="true">
|
||||
<span class="seal-char">{{ { full: '满', catching: '追', missing: '未' }[rowState(p)] }}</span>
|
||||
<span class="seal-char">{{ { full: '', catching: '', missing: '填' }[rowState(p)] }}</span>
|
||||
</div>
|
||||
|
||||
<div class="progress-info">
|
||||
<span class="progress-name">
|
||||
{{ p.manager_name }}
|
||||
<el-tag v-if="!p.has_reported_today" type="danger" size="small">⚠ 今日未填</el-tag>
|
||||
<el-tag v-else type="success" size="small">✓ 已填</el-tag>
|
||||
<el-link type="primary" :underline="false" @click="goWeeklyReport(p.manager_id)">{{ p.manager_name }}</el-link>
|
||||
<span class="progress-status" :class="`progress-status--${rowState(p)}`">
|
||||
{{ { full: '本周已满', catching: '今日已填', missing: '今日未填' }[rowState(p)] }}
|
||||
</span>
|
||||
</span>
|
||||
<span class="progress-count">{{ p.visit_count }} / {{ p.expected }} 条</span>
|
||||
</div>
|
||||
<el-progress
|
||||
:percentage="Math.min(100, Math.round((p.visit_count / Math.max(p.expected, 1)) * 100))"
|
||||
:color="p.completed ? '#67c23a' : '#f56c6c'"
|
||||
:stroke-width="18"
|
||||
:color="rowState(p) === 'full' ? '#4A6741' : rowState(p) === 'catching' ? '#C4934A' : '#B8472E'"
|
||||
:stroke-width="12"
|
||||
/>
|
||||
</div>
|
||||
</el-card>
|
||||
@@ -96,16 +174,165 @@ function goWeeklyReport() {
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.dashboard h3 { margin: 0 0 4px; }
|
||||
.week-range { color: #909399; font-size: 13px; margin-bottom: 20px; }
|
||||
.stat-card { text-align: center; }
|
||||
.stat-value { font-size: 36px; font-weight: 700; color: #1a73e8; }
|
||||
.stat-label { font-size: 13px; color: #909399; margin-top: 4px; }
|
||||
.actions { display: flex; gap: 12px; margin-bottom: 24px; }
|
||||
.progress-card { margin-top: 20px; }
|
||||
.progress-row { margin-bottom: 16px; }
|
||||
.progress-info { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
|
||||
.progress-name { display: flex; align-items: center; gap: 8px; font-weight: 500; }
|
||||
.progress-count { font-size: 13px; color: #606266; }
|
||||
.empty { text-align: center; color: #c0c4cc; padding: 24px 0; }
|
||||
/* ═══ Page Header ═══ */
|
||||
.page-head { margin-bottom: 24px; }
|
||||
.page-title {
|
||||
margin: 0;
|
||||
font-family: 'ZCOOL XiaoWei', STSong, serif;
|
||||
font-size: 22px; font-weight: 400;
|
||||
color: var(--ink); letter-spacing: 0.06em;
|
||||
}
|
||||
.page-sub {
|
||||
margin: 2px 0 0;
|
||||
font-family: 'JetBrains Mono', 'SF Mono', monospace;
|
||||
font-size: 11px; color: var(--gold); letter-spacing: 0.08em;
|
||||
}
|
||||
.page-rule { width: 32px; height: 3px; background: var(--gold); margin-top: 12px; }
|
||||
|
||||
/* ═══ Stat Grid ═══ */
|
||||
.stat-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 16px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--warm-border);
|
||||
padding: 20px 22px;
|
||||
transition: all var(--transition);
|
||||
}
|
||||
.stat-card:hover { box-shadow: var(--shadow-md); }
|
||||
|
||||
.stat-glyph {
|
||||
width: 48px; height: 48px;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.stat-glyph--ink { background: #EEF2F2; color: var(--ink); }
|
||||
.stat-glyph--sage { background: #EDF2EC; color: var(--sage); }
|
||||
.stat-glyph--gold { background: #FBF6EE; color: var(--gold); }
|
||||
.stat-glyph--vermilion { background: #FBF1EE; color: var(--vermilion); }
|
||||
|
||||
.stat-body { display: flex; flex-direction: column; }
|
||||
.stat-num {
|
||||
font-family: 'ZCOOL XiaoWei', STSong, serif;
|
||||
font-size: 28px; color: var(--ink); line-height: 1.1; letter-spacing: 0.04em;
|
||||
}
|
||||
.stat-label {
|
||||
font-family: 'Noto Serif SC', STSong, serif;
|
||||
font-size: 12px; color: var(--warm-gray); letter-spacing: 0.04em;
|
||||
}
|
||||
|
||||
/* ═══ Actions ═══ */
|
||||
.actions { display: flex; gap: 10px; margin-bottom: 24px; }
|
||||
|
||||
/* ═══ Progress ═══ */
|
||||
.progress-card { margin-top: 4px; }
|
||||
.card-header-title {
|
||||
display: flex; align-items: center;
|
||||
font-family: 'ZCOOL XiaoWei', STSong, serif;
|
||||
font-size: 15px; color: var(--ink); letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.progress-row {
|
||||
position: relative;
|
||||
margin-bottom: 24px;
|
||||
padding: 16px 18px 14px;
|
||||
overflow: hidden;
|
||||
border-left: 4px solid transparent;
|
||||
transition: border-color 0.3s;
|
||||
}
|
||||
.progress-row:last-child { margin-bottom: 0; }
|
||||
|
||||
/* Left edge accent — three states */
|
||||
.progress-row--missing { border-left-color: var(--vermilion); background: rgba(184,71,46,0.02); }
|
||||
.progress-row--catching { border-left-color: var(--gold); background: rgba(196,147,74,0.03); }
|
||||
.progress-row--full { border-left-color: var(--sage); background: rgba(74,103,65,0.02); }
|
||||
|
||||
/* ═══ Chinese Seal Stamp Watermark ═══ */
|
||||
.seal-stamp {
|
||||
position: absolute;
|
||||
right: 24px;
|
||||
top: 50%;
|
||||
transform: translateY(-52%) rotate(-10deg);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 3px solid;
|
||||
border-radius: 8px;
|
||||
outline: 1.5px solid;
|
||||
outline-offset: -6px;
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
opacity: 0.16;
|
||||
transition: opacity 0.3s;
|
||||
/* Single-char stamps (满/追/未) are square; double-char (未填) is slightly wider */
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
}
|
||||
|
||||
.progress-row:hover .seal-stamp {
|
||||
opacity: 0.24;
|
||||
}
|
||||
|
||||
/* Missing stamp — vermilion red ink */
|
||||
.seal-stamp--missing {
|
||||
border-color: var(--vermilion);
|
||||
outline-color: var(--vermilion);
|
||||
color: var(--vermilion);
|
||||
}
|
||||
|
||||
/* Catching stamp — gold ink */
|
||||
.seal-stamp--catching {
|
||||
border-color: var(--gold);
|
||||
outline-color: var(--gold);
|
||||
color: var(--gold);
|
||||
}
|
||||
|
||||
/* Full stamp — sage green ink */
|
||||
.seal-stamp--full {
|
||||
border-color: var(--sage);
|
||||
outline-color: var(--sage);
|
||||
color: var(--sage);
|
||||
}
|
||||
|
||||
.seal-char {
|
||||
font-family: 'ZCOOL XiaoWei', STSong, serif;
|
||||
font-size: 20px;
|
||||
font-weight: 400;
|
||||
line-height: 1.1;
|
||||
letter-spacing: 0.06em;
|
||||
}
|
||||
|
||||
/* ═══ Progress Info ═══ */
|
||||
.progress-info {
|
||||
display: flex; justify-content: space-between;
|
||||
align-items: center; margin-bottom: 10px;
|
||||
position: relative; z-index: 1;
|
||||
}
|
||||
.progress-name { display: flex; align-items: center; gap: 10px; font-weight: 500; }
|
||||
|
||||
/* Inline status text (replaces el-tag) */
|
||||
.progress-status {
|
||||
font-family: 'Noto Serif SC', STSong, serif;
|
||||
font-size: 12px;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
.progress-status--missing { color: var(--vermilion); }
|
||||
.progress-status--catching { color: var(--gold); }
|
||||
.progress-status--full { color: var(--sage); }
|
||||
|
||||
.progress-count {
|
||||
font-family: 'JetBrains Mono', 'SF Mono', monospace;
|
||||
font-size: 13px; color: var(--warm-gray); letter-spacing: 0.03em;
|
||||
position: relative; z-index: 1;
|
||||
}
|
||||
|
||||
.empty { text-align: center; color: var(--c-text-muted); padding: 40px 0; font-family: 'Noto Serif SC', STSong, serif; }
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user