v6ole/qiji
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 完整功能迭代 — 移动端+PC端全面优化

Browse Source 
新增:
- 今日纪要 (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:
v6ole
2026-06-23 11:40:03 +08:00
parent a1886074dd
commit e7af0e15ab
37 changed files with 4561 additions and 643 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/views/desktop/CustomerManage.vue
+82 -96
View File
@@ -30,16 +30,13 @@ const existingContacts = ref<any[]>([])
const feeUnits = ['元/月', '元/年', '自定义']
const feeCustomUnit = ref('')
// Detail
const detailVisible = ref(false)
const detailCustomer = ref<any>(null)
// Managers
const managers = ref<any[]>([])
const selectedIds = ref<string[]>([])
const batchManagerId = ref('')
// Import
const importDialogVisible = ref(false)
const importFile = ref<File | null>(null)
const importLoading = ref(false)
@@ -48,18 +45,15 @@ const importResult = ref<any>(null)
onMounted(async () => {
await loadCustomers()
try {
const res = await api.get('/users/', { params: { role: 'manager' } })
managers.value = res.data
const res = await api.get('/users/')
managers.value = (res.data || []).filter((u: any) => u.role !== 'leader')
} catch (_) {}
})
async function loadCustomers() {
loading.value = true
try {
const params: any = {
page: currentPage.value,
page_size: pageSize.value,
}
const params: any = { page: currentPage.value, page_size: pageSize.value }
if (search.value) params.search = search.value
if (filterIndustry.value) params.industry = filterIndustry.value
if (filterService.value) params.service = filterService.value
@@ -67,17 +61,14 @@ async function loadCustomers() {
const res = await customersApi.list(params)
customers.value = res.data.items
total.value = res.data.total
} catch (e: any) {
ElMessage.error('加载失败')
} finally { loading.value = false }
} catch (e: any) { ElMessage.error('加载失败') }
finally { loading.value = false }
}
function onPageChange(page: number) { currentPage.value = page; loadCustomers() }
function onPageSizeChange(size: number) { pageSize.value = size; currentPage.value = 1; loadCustomers() }
function onFilterChange() { currentPage.value = 1; loadCustomers() }
// ── Form helpers ──
function buildMonthlyFee(): string {
const amt = form.value.fee_amount.trim()
if (!amt) return ''
@@ -92,35 +83,20 @@ function parseMonthlyFee(fee: string) {
feeCustomUnit.value = ''
if (!fee) { form.value.fee_amount = ''; form.value.fee_unit = '元/月'; return }
for (const u of ['元/月', '元/年']) {
if (fee.endsWith(u)) {
form.value.fee_amount = fee.slice(0, -u.length).trim()
form.value.fee_unit = u
return
}
if (fee.endsWith(u)) { form.value.fee_amount = fee.slice(0, -u.length).trim(); form.value.fee_unit = u; return }
}
// Try to separate trailing non-numeric chars as custom unit
const m = fee.match(/^(.+?)\s*([^\d]+)$/)
if (m) {
form.value.fee_amount = m[1].trim()
feeCustomUnit.value = m[2].trim()
form.value.fee_unit = '自定义'
} else {
form.value.fee_amount = fee
form.value.fee_unit = '自定义'
}
if (m) { form.value.fee_amount = m[1].trim(); feeCustomUnit.value = m[2].trim(); form.value.fee_unit = '自定义' }
else { form.value.fee_amount = fee; form.value.fee_unit = '自定义' }
}
// ── Create / Edit Dialog ──
function resetForm() {
form.value = { name: '', industry: '', address: '', in_use_services: '', fee_amount: '', fee_unit: '元/月', remarks: '', contacts: [], assignee_id: '' }
feeCustomUnit.value = ''
existingContacts.value = []
}
function openCreate() {
dialogTitle.value = '新建客户'; editId.value = ''; resetForm(); dialogVisible.value = true
}
function openCreate() { dialogTitle.value = '新建客户'; editId.value = ''; resetForm(); dialogVisible.value = true }
async function openEdit(customer: any) {
dialogTitle.value = '编辑客户'; editId.value = customer.id
@@ -145,9 +121,7 @@ async function handleSubmit() {
if (form.value.assignee_id) body.assignee_id = form.value.assignee_id
await customersApi.update(editId.value, body)
for (const c of form.value.contacts) {
if (c.name.trim()) {
await api.post(`/customers/${editId.value}/contacts`, { name: c.name.trim(), phone: c.phone.trim(), role_desc: c.role_desc.trim() })
}
if (c.name.trim()) await api.post(`/customers/${editId.value}/contacts`, { name: c.name.trim(), phone: c.phone.trim(), role_desc: c.role_desc.trim() })
}
ElMessage.success('已更新')
} else {
@@ -168,17 +142,16 @@ async function removeExistingContact(contactId: string) {
} catch (e: any) { if (e !== 'cancel') ElMessage.error('删除失败') }
}
// ── Detail ──
async function openDetail(customer: any) {
try {
const res = await customersApi.get(customer.id)
detailCustomer.value = res.data
detailVisible.value = true
} catch (_) {}
const mgrColors = ['#1C3738','#4A6741','#5B7FA5','#7B7568','#8B6F47','#6B5B4F','#3D5A5C','#5C4A3D']
function mgrColor(name: string) {
if (!name) return '#909399'
let h = 0; for (let i=0;i<name.length;i++) h = name.charCodeAt(i) + ((h<<5)-h)
return mgrColors[Math.abs(h) % mgrColors.length]
}
// ── Delete ──
async function openDetail(customer: any) {
try { const res = await customersApi.get(customer.id); detailCustomer.value = res.data; detailVisible.value = true } catch (_) {}
}
async function handleDelete(customer: any) {
try {
@@ -189,8 +162,6 @@ async function handleDelete(customer: any) {
} catch (e: any) { if (e !== 'cancel') ElMessage.error('删除失败') }
}
// ── Batch Assign ──
function onSelectionChange(rows: any[]) { selectedIds.value = rows.map(r => r.id) }
async function handleBatchAssign() {
@@ -204,8 +175,6 @@ async function handleBatchAssign() {
} catch (e: any) { ElMessage.error('批量分配失败') }
}
// ── Import / Export ──
async function handleExport() {
try {
const res = await api.get('/customers/export', { responseType: 'blob' })
@@ -242,14 +211,38 @@ async function handleImport() {
<template>
<div class="customer-manage" v-loading="loading">
<div class="page-header">
<h3>客户档案管理</h3>
<div class="header-btns">
<el-button v-if="auth.isDirector" @click="downloadTemplate">📋 模板</el-button>
<el-button v-if="auth.isDirector" @click="openImportDialog">📤 导入</el-button>
<el-button v-if="auth.isDirector" @click="handleExport">📥 导出</el-button>
<el-button v-if="auth.isDirector" type="primary" @click="openCreate">+ 新建客户</el-button>
<!-- ═══ Page Header ═══ -->
<div class="page-head">
<div class="page-head-row">
<h2 class="page-title">客户档案管理</h2>
<div class="header-btns">
<el-button v-if="auth.isDirector" @click="downloadTemplate">
<svg width="14" height="14" 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 v-if="auth.isDirector" @click="openImportDialog">
<svg width="14" height="14" 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="17 8 12 3 7 8"></polyline>
<line x1="12" y1="3" x2="12" y2="15"></line>
</svg>
导入
</el-button>
<el-button v-if="auth.isDirector" @click="handleExport">
<svg width="14" height="14" 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>
导出
</el-button>
<el-button v-if="auth.isDirector" type="primary" @click="openCreate">+ 新建客户</el-button>
</div>
</div>
<div class="page-rule"></div>
</div>
<!-- Search & Filter -->
@@ -267,12 +260,12 @@ async function handleImport() {
<el-input v-model="filterService" placeholder="在用业务筛选" clearable @change="onFilterChange" />
</el-col>
<el-col :span="4">
<el-select v-model="filterManagerId" placeholder="客户经理筛选" clearable @change="onFilterChange" style="width:100%">
<el-select v-model="filterManagerId" placeholder="负责人筛选" clearable @change="onFilterChange" style="width:100%">
<el-option v-for="m in managers" :key="m.id" :label="m.name" :value="m.id" />
</el-select>
</el-col>
<el-col :span="7" v-if="auth.isDirector && selectedIds.length > 0">
<span style="margin-right:8px; color:#606266">已选 {{ selectedIds.length }} 个</span>
<span style="margin-right:8px; color: var(--warm-gray)">已选 {{ selectedIds.length }} 个</span>
<el-select v-model="batchManagerId" placeholder="目标客户经理" style="width:160px">
<el-option v-for="m in managers" :key="m.id" :label="m.name" :value="m.id" />
</el-select>
@@ -293,23 +286,18 @@ async function handleImport() {
</el-table-column>
<el-table-column prop="industry" label="行业" width="100" />
<el-table-column prop="in_use_services" label="在用业务" min-width="150" />
<el-table-column label="操作" width="160" fixed="right">
<el-table-column label="客户经理" width="90">
<template #default="{ row }">
<el-button text size="small" @click="openEdit(row)">编辑</el-button>
<el-button v-if="auth.isDirector" text size="small" type="danger" @click="handleDelete(row)">删除</el-button>
<el-tag :color="mgrColor(row.primary_manager_name)" effect="dark" size="small" style="border:none;color:#fff">{{ row.primary_manager_name || '-' }}</el-tag>
</template>
</el-table-column>
</el-table>
<div style="display:flex; justify-content:flex-end; margin-top:16px">
<el-pagination
v-model:current-page="currentPage"
v-model:page-size="pageSize"
:page-sizes="[25, 50, 100]"
:total="total"
layout="total, sizes, prev, pager, next, jumper"
background
@current-change="onPageChange"
@size-change="onPageSizeChange"
v-model:current-page="currentPage" v-model:page-size="pageSize"
:page-sizes="[25, 50, 100]" :total="total"
layout="total, sizes, prev, pager, next, jumper" background
@current-change="onPageChange" @size-change="onPageSizeChange"
/>
</div>
</el-card>
@@ -317,36 +305,22 @@ async function handleImport() {
<!-- Create/Edit Dialog -->
<el-dialog v-model="dialogVisible" :title="dialogTitle" width="520px">
<el-form label-position="top">
<el-form-item label="单位名称" required>
<el-input v-model="form.name" placeholder="请输入单位名称" />
</el-form-item>
<el-form-item label="所属行业">
<el-input v-model="form.industry" placeholder="如: 教育、医疗、政府..." />
</el-form-item>
<el-form-item label="单位地址">
<el-input v-model="form.address" />
</el-form-item>
<el-form-item label="在用业务">
<el-input v-model="form.in_use_services" placeholder="如: 云桌面、专线、视频会议" />
</el-form-item>
<el-form-item label="单位名称" required><el-input v-model="form.name" placeholder="请输入单位名称" /></el-form-item>
<el-form-item label="所属行业"><el-input v-model="form.industry" placeholder="如: 教育、医疗、政府..." /></el-form-item>
<el-form-item label="单位地址"><el-input v-model="form.address" /></el-form-item>
<el-form-item label="在用业务"><el-input v-model="form.in_use_services" placeholder="如: 云桌面、专线、视频会议" /></el-form-item>
<el-form-item label="收支费用">
<el-row :gutter="8">
<el-col :span="8">
<el-input v-model="form.fee_amount" placeholder="金额" />
</el-col>
<el-col :span="8"><el-input v-model="form.fee_amount" placeholder="金额" /></el-col>
<el-col :span="form.fee_unit === '自定义' ? 8 : 16">
<el-select v-model="form.fee_unit" style="width:100%" @change="form.fee_unit !== '自定义' && (feeCustomUnit = '')">
<el-option v-for="u in feeUnits" :key="u" :label="u" :value="u" />
</el-select>
</el-col>
<el-col v-if="form.fee_unit === '自定义'" :span="8">
<el-input v-model="feeCustomUnit" placeholder="单位" />
</el-col>
<el-col v-if="form.fee_unit === '自定义'" :span="8"><el-input v-model="feeCustomUnit" placeholder="单位" /></el-col>
</el-row>
</el-form-item>
<el-form-item label="备注">
<el-input v-model="form.remarks" type="textarea" :rows="2" placeholder="备注信息..." />
</el-form-item>
<el-form-item label="备注"><el-input v-model="form.remarks" type="textarea" :rows="2" placeholder="备注信息..." /></el-form-item>
<el-form-item label="归属客户经理" v-if="auth.isDirector">
<el-select v-model="form.assignee_id" :placeholder="editId ? '留空则不修改' : '不选则默认分配给自己'" clearable style="width:100%">
<el-option v-for="m in managers" :key="m.id" :label="m.name" :value="m.id" />
@@ -355,7 +329,7 @@ async function handleImport() {
<el-form-item label="联系人">
<div v-if="editId && existingContacts.length" style="margin-bottom:8px">
<el-tag v-for="c in existingContacts" :key="c.id" closable @close="removeExistingContact(c.id)" style="margin: 2px 4px">
{{ c.name }}{{ c.phone ? ' 📞'+c.phone : '' }}{{ c.role_desc ? ' ('+c.role_desc+')' : '' }}
{{ c.name }}{{ c.phone ? ' · '+c.phone : '' }}{{ c.role_desc ? ' ('+c.role_desc+')' : '' }}
</el-tag>
</div>
<div v-for="(c, idx) in form.contacts" :key="'new-'+idx" style="display:flex; gap:8px; margin-bottom:4px;">
@@ -385,13 +359,18 @@ async function handleImport() {
<el-descriptions-item label="备注">{{ detailCustomer.remarks || '-' }}</el-descriptions-item>
<el-descriptions-item label="客户经理">{{ detailCustomer.primary_manager_name || '-' }}</el-descriptions-item>
</el-descriptions>
<h4 style="margin-top:16px">联系人</h4>
<h4 style="margin-top:16px; font-family: 'ZCOOL XiaoWei', STSong, serif; color: var(--ink)">联系人</h4>
<div v-if="detailCustomer.contacts?.length">
<el-tag v-for="c in detailCustomer.contacts" :key="c.id" style="margin:4px">
{{ c.name }}{{ c.phone ? ' 📞'+c.phone : '' }}{{ c.role_desc ? ' ('+c.role_desc+')' : '' }}
{{ c.name }}{{ c.phone ? ' · '+c.phone : '' }}{{ c.role_desc ? ' ('+c.role_desc+')' : '' }}
</el-tag>
</div>
<div v-else style="color:#c0c4cc; text-align:center; padding:12px">暂无联系人</div>
<div v-else style="color: var(--c-text-muted); text-align:center; padding:12px">暂无联系人</div>
</template>
<template #footer>
<el-button v-if="!auth.isLeader" type="primary" @click="detailVisible=false; openEdit(detailCustomer)">编辑</el-button>
<el-button v-if="auth.isDirector" type="danger" @click="detailVisible=false; handleDelete(detailCustomer)">删除</el-button>
<el-button @click="detailVisible=false">关闭</el-button>
</template>
</el-dialog>
@@ -418,7 +397,14 @@ async function handleImport() {
</template>
<style scoped>
.page-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.page-header h3 { margin: 0; }
.page-head { margin-bottom: 20px; }
.page-head-row { display: flex; justify-content: space-between; align-items: center; }
.page-title {
margin: 0;
font-family: 'ZCOOL XiaoWei', STSong, serif;
font-size: 22px; font-weight: 400;
color: var(--ink); letter-spacing: 0.06em;
}
.page-rule { width: 32px; height: 3px; background: var(--gold); margin-top: 8px; }
.header-btns { display: flex; gap: 8px; }
</style>