企迹(qiji) 政企周报管理系统 — v0.1
后端: FastAPI + SQLAlchemy 2.0 (async) + Alembic + MinIO + Casdoor + 企微 前端: Vue 3 + Vite + TypeScript + Element Plus + Pinia 功能清单: - 8 张数据表自动建表 / Casdoor OIDC 登录 / 企微静默登录 - 双布局: 移动端(填报) + PC端(汇总管理) - 拜访记录 CRUD + MinIO 照片直传 + 缩略图预览 + 同访人草稿 - 今日纪要 (6 分类) / 工作计划 / 小微商机 / 要客拜访 CRUD - 客户档案: 备注/收支费用/联系人/归属分配/批量转移 - 客户导入导出 + 模板下载 + 搜索/分页/筛选 - 仪表盘: 四卡统计 + 填报进度 (拜访+纪要双维度) - 周报详情: 五 Tab + 按人/客户筛选 + 时间轴 - 用户管理 / 客户经理 PC 端工作台 - 企微: 催办/公告/定时提醒 / 时区修正 - Docker 部署配置 Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,52 @@
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref } from 'vue'
|
||||
import { useRouter, useRoute } from 'vue-router'
|
||||
import { useAuthStore } from '@/stores/auth'
|
||||
import { ElMessage } from 'element-plus'
|
||||
|
||||
const router = useRouter()
|
||||
const route = useRoute()
|
||||
const auth = useAuthStore()
|
||||
const loading = ref(true)
|
||||
|
||||
onMounted(async () => {
|
||||
const code = route.query.code as string
|
||||
const state = route.query.state as string // This is wecom_userid
|
||||
|
||||
if (!code) {
|
||||
ElMessage.error('缺少授权参数')
|
||||
router.push('/login')
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
await auth.bindWecom(code, state || '')
|
||||
ElMessage.success('企微绑定成功')
|
||||
router.push(auth.isManager ? '/m' : '/')
|
||||
} catch (e: any) {
|
||||
ElMessage.error('绑定失败: ' + (e.response?.data?.detail || e.message))
|
||||
router.push('/login')
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="bind-page">
|
||||
<el-card v-loading="loading">
|
||||
<template #header>正在完成企微账号绑定...</template>
|
||||
<p v-if="loading">请稍候，正在验证您的身份。</p>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.bind-page {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100vh;
|
||||
background: #f5f7fa;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,124 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { useRouter, useRoute } from 'vue-router'
|
||||
import { useAuthStore } from '@/stores/auth'
|
||||
import { ElMessage } from 'element-plus'
|
||||
|
||||
const router = useRouter()
|
||||
const route = useRoute()
|
||||
const auth = useAuthStore()
|
||||
const loading = ref(false)
|
||||
|
||||
// Check for Casdoor callback
|
||||
onMounted(async () => {
|
||||
const code = route.query.code as string
|
||||
const state = route.query.state as string
|
||||
|
||||
if (code) {
|
||||
loading.value = true
|
||||
try {
|
||||
await auth.casdoorLogin(code, state)
|
||||
ElMessage.success('登录成功')
|
||||
router.push(auth.isManager ? '/m' : '/')
|
||||
} catch (e: any) {
|
||||
ElMessage.error('登录失败: ' + (e.response?.data?.detail || e.message))
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
return
|
||||
}
|
||||
|
||||
// Check for wecom code
|
||||
const wecomCode = route.query.wecom_code as string
|
||||
if (wecomCode) {
|
||||
loading.value = true
|
||||
try {
|
||||
const res = await auth.wecomLogin(wecomCode)
|
||||
if (res.data.need_bind) {
|
||||
// Redirect to Casdoor for binding
|
||||
window.location.href = res.data.casdoor_url
|
||||
return
|
||||
}
|
||||
auth.saveLogin({
|
||||
access_token: res.data.access_token,
|
||||
user_id: res.data.user_id,
|
||||
name: res.data.name,
|
||||
role: res.data.role,
|
||||
})
|
||||
ElMessage.success('登录成功')
|
||||
router.push(auth.isManager ? '/m' : '/')
|
||||
} catch (e: any) {
|
||||
ElMessage.error('企微登录失败')
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
function goCasdoorLogin() {
|
||||
// Redirect to Casdoor authorization page
|
||||
const endpoint = import.meta.env.VITE_CASDOOR_ENDPOINT
|
||||
const clientId = import.meta.env.VITE_CASDOOR_CLIENT_ID
|
||||
const redirectUri = encodeURIComponent(window.location.origin + '/login')
|
||||
const casdoorUrl = `${endpoint}/login/oauth/authorize?client_id=${clientId}&response_type=code&redirect_uri=${redirectUri}&scope=openid+profile&state=login`
|
||||
window.location.href = casdoorUrl
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="login-page">
|
||||
<div class="login-card">
|
||||
<div class="brand">
|
||||
<h1>企迹</h1>
|
||||
<p>政企周报管理系统</p>
|
||||
</div>
|
||||
<el-button
|
||||
type="primary"
|
||||
size="large"
|
||||
:loading="loading"
|
||||
@click="goCasdoorLogin"
|
||||
style="width: 100%"
|
||||
>
|
||||
登录 / 注册
|
||||
</el-button>
|
||||
<p class="hint">使用 Casdoor 账号登录</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.login-page {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100vh;
|
||||
background: linear-gradient(135deg, #1a73e8 0%, #4080ff 50%, #69a0ff 100%);
|
||||
}
|
||||
.login-card {
|
||||
background: white;
|
||||
border-radius: 16px;
|
||||
padding: 48px 40px;
|
||||
width: 360px;
|
||||
box-shadow: 0 20px 60px rgba(0,0,0,0.2);
|
||||
}
|
||||
.brand {
|
||||
text-align: center;
|
||||
margin-bottom: 36px;
|
||||
}
|
||||
.brand h1 {
|
||||
margin: 0;
|
||||
font-size: 32px;
|
||||
color: #1a73e8;
|
||||
}
|
||||
.brand p {
|
||||
margin: 8px 0 0;
|
||||
color: #909399;
|
||||
font-size: 14px;
|
||||
}
|
||||
.hint {
|
||||
text-align: center;
|
||||
color: #c0c4cc;
|
||||
font-size: 12px;
|
||||
margin-top: 16px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,424 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { useAuthStore } from '@/stores/auth'
|
||||
import { customersApi } from '@/api/customers'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import api from '@/api/index'
|
||||
|
||||
const auth = useAuthStore()
|
||||
const loading = ref(false)
|
||||
const search = ref('')
|
||||
const filterIndustry = ref('')
|
||||
const filterService = ref('')
|
||||
const filterManagerId = ref('')
|
||||
const customers = ref<any[]>([])
|
||||
const currentPage = ref(1)
|
||||
const pageSize = ref(25)
|
||||
const total = ref(0)
|
||||
const dialogVisible = ref(false)
|
||||
const dialogTitle = ref('新建客户')
|
||||
const editId = ref('')
|
||||
const form = ref({
|
||||
name: '', industry: '', address: '', in_use_services: '',
|
||||
fee_amount: '', fee_unit: '元/月',
|
||||
remarks: '',
|
||||
contacts: [] as any[],
|
||||
assignee_id: '' as string,
|
||||
})
|
||||
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)
|
||||
const importResult = ref<any>(null)
|
||||
|
||||
onMounted(async () => {
|
||||
await loadCustomers()
|
||||
try {
|
||||
const res = await api.get('/users/', { params: { role: 'manager' } })
|
||||
managers.value = res.data
|
||||
} catch (_) {}
|
||||
})
|
||||
|
||||
async function loadCustomers() {
|
||||
loading.value = true
|
||||
try {
|
||||
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
|
||||
if (filterManagerId.value) params.manager_id = filterManagerId.value
|
||||
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 }
|
||||
}
|
||||
|
||||
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 ''
|
||||
if (form.value.fee_unit === '自定义') {
|
||||
const u = feeCustomUnit.value.trim()
|
||||
return u ? amt + u : amt
|
||||
}
|
||||
return amt + form.value.fee_unit
|
||||
}
|
||||
|
||||
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
|
||||
}
|
||||
}
|
||||
// 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 = '自定义'
|
||||
}
|
||||
}
|
||||
|
||||
// ── 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
|
||||
}
|
||||
|
||||
async function openEdit(customer: any) {
|
||||
dialogTitle.value = '编辑客户'; editId.value = customer.id
|
||||
try {
|
||||
const res = await customersApi.get(customer.id)
|
||||
const c = res.data
|
||||
resetForm()
|
||||
form.value.name = c.name; form.value.industry = c.industry; form.value.address = c.address
|
||||
form.value.in_use_services = c.in_use_services; form.value.remarks = c.remarks || ''
|
||||
parseMonthlyFee(c.monthly_fee)
|
||||
existingContacts.value = c.contacts || []
|
||||
dialogVisible.value = true
|
||||
} catch (e: any) { ElMessage.error('加载客户详情失败') }
|
||||
}
|
||||
|
||||
async function handleSubmit() {
|
||||
if (!form.value.name) { ElMessage.warning('请输入单位名称'); return }
|
||||
const monthly_fee = buildMonthlyFee()
|
||||
try {
|
||||
if (editId.value) {
|
||||
const body: any = { name: form.value.name, industry: form.value.industry, address: form.value.address, in_use_services: form.value.in_use_services, monthly_fee, remarks: form.value.remarks }
|
||||
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() })
|
||||
}
|
||||
}
|
||||
ElMessage.success('已更新')
|
||||
} else {
|
||||
await customersApi.create({ name: form.value.name, industry: form.value.industry, address: form.value.address, in_use_services: form.value.in_use_services, monthly_fee, remarks: form.value.remarks, contacts: form.value.contacts, assignee_id: form.value.assignee_id || undefined })
|
||||
ElMessage.success('已创建')
|
||||
}
|
||||
dialogVisible.value = false
|
||||
await loadCustomers()
|
||||
} catch (e: any) { ElMessage.error('操作失败: ' + (e.response?.data?.detail || e.message)) }
|
||||
}
|
||||
|
||||
async function removeExistingContact(contactId: string) {
|
||||
try {
|
||||
await ElMessageBox.confirm('确定删除该联系人？', '确认', { type: 'warning' })
|
||||
await api.delete(`/customers/${editId.value}/contacts/${contactId}`)
|
||||
existingContacts.value = existingContacts.value.filter(c => c.id !== contactId)
|
||||
ElMessage.success('已删除')
|
||||
} 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 (_) {}
|
||||
}
|
||||
|
||||
// ── Delete ──
|
||||
|
||||
async function handleDelete(customer: any) {
|
||||
try {
|
||||
await ElMessageBox.confirm(`确定删除客户「${customer.name}」？该操作不可恢复。`, '确认删除', { type: 'warning' })
|
||||
await customersApi.delete(customer.id)
|
||||
ElMessage.success('已删除')
|
||||
await loadCustomers()
|
||||
} catch (e: any) { if (e !== 'cancel') ElMessage.error('删除失败') }
|
||||
}
|
||||
|
||||
// ── Batch Assign ──
|
||||
|
||||
function onSelectionChange(rows: any[]) { selectedIds.value = rows.map(r => r.id) }
|
||||
|
||||
async function handleBatchAssign() {
|
||||
if (!selectedIds.value.length) { ElMessage.warning('请先勾选客户'); return }
|
||||
if (!batchManagerId.value) { ElMessage.warning('请选择目标客户经理'); return }
|
||||
try {
|
||||
await customersApi.batchAssign({ customer_ids: selectedIds.value, manager_id: batchManagerId.value })
|
||||
ElMessage.success(`已将 ${selectedIds.value.length} 个客户分配给新经理`)
|
||||
selectedIds.value = []; batchManagerId.value = ''
|
||||
await loadCustomers()
|
||||
} catch (e: any) { ElMessage.error('批量分配失败') }
|
||||
}
|
||||
|
||||
// ── Import / Export ──
|
||||
|
||||
async function handleExport() {
|
||||
try {
|
||||
const res = await api.get('/customers/export', { responseType: 'blob' })
|
||||
const url = URL.createObjectURL(res.data)
|
||||
const a = document.createElement('a'); a.href = url; a.download = 'customers.xlsx'; a.click()
|
||||
URL.revokeObjectURL(url); ElMessage.success('导出成功')
|
||||
} catch (e: any) { ElMessage.error('导出失败') }
|
||||
}
|
||||
|
||||
async function downloadTemplate() {
|
||||
try {
|
||||
const res = await api.get('/customers/template', { responseType: 'blob' })
|
||||
const url = URL.createObjectURL(res.data)
|
||||
const a = document.createElement('a'); a.href = url; a.download = 'customer_import_template.xlsx'; a.click()
|
||||
URL.revokeObjectURL(url)
|
||||
} catch (e: any) { ElMessage.error('下载模板失败') }
|
||||
}
|
||||
|
||||
function openImportDialog() { importFile.value = null; importResult.value = null; importDialogVisible.value = true }
|
||||
function onImportFileChange(e: Event) { const t = e.target as HTMLInputElement; if (t.files?.[0]) importFile.value = t.files[0] }
|
||||
async function handleImport() {
|
||||
if (!importFile.value) return
|
||||
importLoading.value = true
|
||||
const fd = new FormData(); fd.append('file', importFile.value)
|
||||
try {
|
||||
const res = await api.post('/customers/import', fd, { headers: { 'Content-Type': 'multipart/form-data' } })
|
||||
importResult.value = res.data
|
||||
ElMessage.success(`导入完成：新增 ${res.data.created} 条，跳过 ${res.data.skipped} 条`)
|
||||
await loadCustomers()
|
||||
} catch (e: any) { ElMessage.error('导入失败: ' + (e.response?.data?.detail || e.message)) }
|
||||
finally { importLoading.value = false }
|
||||
}
|
||||
</script>
|
||||
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Search & Filter -->
|
||||
<el-card style="margin-bottom: 16px;">
|
||||
<el-row :gutter="12" align="middle">
|
||||
<el-col :span="5">
|
||||
<el-input v-model="search" placeholder="搜索名称/行业/地址/联系人" clearable @keyup.enter="loadCustomers">
|
||||
<template #append><el-button @click="onFilterChange">搜索</el-button></template>
|
||||
</el-input>
|
||||
</el-col>
|
||||
<el-col :span="4">
|
||||
<el-input v-model="filterIndustry" placeholder="行业筛选" clearable @change="onFilterChange" />
|
||||
</el-col>
|
||||
<el-col :span="4">
|
||||
<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-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>
|
||||
<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>
|
||||
<el-button type="warning" @click="handleBatchAssign" style="margin-left:8px">批量转移</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
|
||||
<!-- Customer Table -->
|
||||
<el-card>
|
||||
<el-table :data="customers" stripe @selection-change="onSelectionChange">
|
||||
<el-table-column v-if="auth.isDirector" type="selection" width="50" />
|
||||
<el-table-column type="index" label="序号" width="60" :index="(idx: number) => (currentPage - 1) * pageSize + idx + 1" />
|
||||
<el-table-column prop="name" label="单位名称" min-width="180">
|
||||
<template #default="{ row }">
|
||||
<el-link type="primary" @click="openDetail(row)">{{ row.name }}</el-link>
|
||||
</template>
|
||||
</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">
|
||||
<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>
|
||||
</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"
|
||||
/>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<!-- 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="收支费用">
|
||||
<el-row :gutter="8">
|
||||
<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-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="归属客户经理" 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" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<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+')' : '' }}
|
||||
</el-tag>
|
||||
</div>
|
||||
<div v-for="(c, idx) in form.contacts" :key="'new-'+idx" style="display:flex; gap:8px; margin-bottom:4px;">
|
||||
<el-input v-model="c.name" placeholder="姓名" size="small" style="flex:1" />
|
||||
<el-input v-model="c.phone" placeholder="电话" size="small" style="flex:1" />
|
||||
<el-input v-model="c.role_desc" placeholder="角色" size="small" style="flex:1" />
|
||||
<el-button size="small" @click="form.contacts.splice(idx,1)">-</el-button>
|
||||
</div>
|
||||
<el-button size="small" @click="form.contacts.push({name:'',phone:'',role_desc:''})">+ 添加联系人</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button @click="dialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="handleSubmit">确定</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
||||
<!-- Detail Dialog -->
|
||||
<el-dialog v-model="detailVisible" title="客户详情" width="500px">
|
||||
<template v-if="detailCustomer">
|
||||
<el-descriptions :column="1" border>
|
||||
<el-descriptions-item label="单位名称">{{ detailCustomer.name }}</el-descriptions-item>
|
||||
<el-descriptions-item label="行业">{{ detailCustomer.industry || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="地址">{{ detailCustomer.address || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="在用业务">{{ detailCustomer.in_use_services || '-' }}</el-descriptions-item>
|
||||
<el-descriptions-item label="收支费用">{{ detailCustomer.monthly_fee || '-' }}</el-descriptions-item>
|
||||
<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>
|
||||
<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+')' : '' }}
|
||||
</el-tag>
|
||||
</div>
|
||||
<div v-else style="color:#c0c4cc; text-align:center; padding:12px">暂无联系人</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
||||
<!-- Import Dialog -->
|
||||
<el-dialog v-model="importDialogVisible" title="导入客户档案" width="480px">
|
||||
<p>请使用模板格式上传 Excel 文件。</p>
|
||||
<el-form>
|
||||
<el-form-item label="上传文件">
|
||||
<input type="file" accept=".xlsx,.xls" @change="onImportFileChange" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div v-if="importResult" style="margin-top:12px">
|
||||
<el-alert type="success" :closable="false">
|
||||
新增 {{ importResult.created }} 条，跳过 {{ importResult.skipped }} 条
|
||||
<template v-if="importResult.errors?.length"><br/>错误：{{ importResult.errors.join('; ') }}</template>
|
||||
</el-alert>
|
||||
</div>
|
||||
<template #footer>
|
||||
<el-button @click="importDialogVisible = false">关闭</el-button>
|
||||
<el-button type="primary" :loading="importLoading" @click="handleImport" :disabled="!importFile">确认导入</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.page-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
|
||||
.page-header h3 { margin: 0; }
|
||||
.header-btns { display: flex; gap: 8px; }
|
||||
</style>
|
||||
@@ -0,0 +1,111 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { useAuthStore } from '@/stores/auth'
|
||||
import { dashboardApi } from '@/api/dashboard'
|
||||
import { ElMessage } from 'element-plus'
|
||||
|
||||
const router = useRouter()
|
||||
const auth = useAuthStore()
|
||||
const loading = ref(false)
|
||||
const stats = ref({ week_visits: 0, work_plans: 0, mini_business: 0, key_visits: 0, week_start: '', week_end: '' })
|
||||
const progress = ref<any[]>([])
|
||||
|
||||
onMounted(async () => {
|
||||
loading.value = true
|
||||
try {
|
||||
const [sRes, pRes] = await Promise.all([
|
||||
dashboardApi.getStats(),
|
||||
dashboardApi.getProgress(),
|
||||
])
|
||||
stats.value = sRes.data
|
||||
progress.value = pRes.data
|
||||
} catch (e: any) {
|
||||
ElMessage.error('加载仪表盘失败')
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
})
|
||||
|
||||
function goWeeklyReport() {
|
||||
router.push('/weekly-report')
|
||||
}
|
||||
</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>
|
||||
</div>
|
||||
|
||||
<!-- Reporting Progress -->
|
||||
<el-card class="progress-card">
|
||||
<template #header>填报进度</template>
|
||||
<div v-if="progress.length === 0" class="empty">暂无数据</div>
|
||||
<div v-for="p in progress" :key="p.manager_id" class="progress-row">
|
||||
<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>
|
||||
</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"
|
||||
/>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</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; }
|
||||
</style>
|
||||
@@ -0,0 +1,319 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, computed } from 'vue'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { todayStr } from '@/utils'
|
||||
import api from '@/api/index'
|
||||
|
||||
const activeTab = ref('visits')
|
||||
const loading = ref(false)
|
||||
|
||||
const visits = ref<any[]>([])
|
||||
const workPlans = ref<any[]>([])
|
||||
const miniBusiness = ref<any[]>([])
|
||||
const dailyNotes = ref<any[]>([])
|
||||
const keyVisits = ref<any[]>([])
|
||||
const customers = ref<any[]>([])
|
||||
|
||||
// Dialog
|
||||
const dialogVisible = ref(false)
|
||||
const dialogMode = ref<'create' | 'edit'>('create')
|
||||
const dialogType = ref('')
|
||||
const form = ref<any>({})
|
||||
|
||||
const categories = ['行政事务', '合同整理', '发票处理', '内部会议', '培训学习', '其他']
|
||||
|
||||
onMounted(async () => {
|
||||
await Promise.all([loadAll(), loadCustomers()])
|
||||
})
|
||||
|
||||
function typeLabel(t: string) {
|
||||
const labels: Record<string, string> = { visit: '拜访记录', note: '今日纪要', plan: '工作计划', mini: '小微商机', key: '要客拜访' }
|
||||
return labels[t] || ''
|
||||
}
|
||||
|
||||
async function loadCustomers(q?: string) {
|
||||
try {
|
||||
const params: any = { page_size: 100 }
|
||||
if (q) params.search = q
|
||||
const res = await api.get('/customers/', { params })
|
||||
customers.value = res.data.items || []
|
||||
} catch (_) {}
|
||||
}
|
||||
|
||||
async function loadAll() {
|
||||
loading.value = true
|
||||
try {
|
||||
const [v, w, m, d, k] = await Promise.all([
|
||||
api.get('/visits/'), api.get('/work-plans/'),
|
||||
api.get('/mini-business/'), api.get('/daily-notes/'),
|
||||
api.get('/key-visits/'),
|
||||
])
|
||||
visits.value = v.data; workPlans.value = w.data
|
||||
miniBusiness.value = m.data; dailyNotes.value = d.data
|
||||
keyVisits.value = k.data
|
||||
} catch (e: any) { ElMessage.error('加载失败') }
|
||||
finally { loading.value = false }
|
||||
}
|
||||
|
||||
function openCreate(type: string) {
|
||||
dialogMode.value = 'create'; dialogType.value = type
|
||||
if (type === 'visit') form.value = { customer_id: '', visit_date: todayStr(), visit_method: '上门', time_range: '', communication_content: '', customer_demand: '' }
|
||||
else if (type === 'note') form.value = { note_date: todayStr(), category: '其他', content: '', time_range: '' }
|
||||
else if (type === 'plan') form.value = { customer_id: '', plan_content: '', plan_date: todayStr(), status: '计划中' }
|
||||
else if (type === 'mini') form.value = { customer_id: '', product_type: '', amount: '', follow_up_detail: '', status: '跟进中', expected_revenue_date: '' }
|
||||
else if (type === 'key') form.value = { customer_id: '', urgency_level: '一般', description: '', progress_status: '未开始', planned_date: '', planned_visitor: '', visit_target: '' }
|
||||
dialogVisible.value = true
|
||||
}
|
||||
|
||||
function openEdit(type: string, item: any) {
|
||||
dialogMode.value = 'edit'; dialogType.value = type
|
||||
form.value = { ...item }
|
||||
dialogVisible.value = true
|
||||
}
|
||||
|
||||
async function handleSave() {
|
||||
const t = dialogType.value
|
||||
const d = form.value
|
||||
try {
|
||||
if (dialogMode.value === 'create') {
|
||||
switch (t) {
|
||||
case 'visit': await api.post('/visits/', d); break
|
||||
case 'note': await api.post('/daily-notes/', d); break
|
||||
case 'plan': await api.post('/work-plans/', d); break
|
||||
case 'mini': await api.post('/mini-business/', d); break
|
||||
case 'key': await api.post('/key-visits/', d); break
|
||||
}
|
||||
} else {
|
||||
switch (t) {
|
||||
case 'visit': await api.put(`/visits/${d.id}`, d); break
|
||||
case 'note': await api.put(`/daily-notes/${d.id}`, d); break
|
||||
case 'plan': await api.put(`/work-plans/${d.id}`, d); break
|
||||
case 'mini': await api.put(`/mini-business/${d.id}`, d); break
|
||||
case 'key': await api.put(`/key-visits/${d.id}`, d); break
|
||||
}
|
||||
}
|
||||
ElMessage.success(dialogMode.value === 'create' ? '已创建' : '已更新')
|
||||
dialogVisible.value = false
|
||||
await loadAll()
|
||||
} catch (e: any) { ElMessage.error('保存失败: ' + (e.response?.data?.detail || e.message)) }
|
||||
}
|
||||
|
||||
async function handleDelete(type: string, id: string) {
|
||||
try {
|
||||
await ElMessageBox.confirm('确定删除？', '确认', { type: 'warning' })
|
||||
switch (type) {
|
||||
case 'visit': await api.delete(`/visits/${id}`); break
|
||||
case 'note': await api.delete(`/daily-notes/${id}`); break
|
||||
case 'plan': await api.delete(`/work-plans/${id}`); break
|
||||
case 'mini': await api.delete(`/mini-business/${id}`); break
|
||||
case 'key': await api.delete(`/key-visits/${id}`); break
|
||||
}
|
||||
ElMessage.success('已删除')
|
||||
await loadAll()
|
||||
} catch (e: any) { if (e !== 'cancel') ElMessage.error('删除失败') }
|
||||
}
|
||||
|
||||
const visitsByDate = computed(() => {
|
||||
const g: Record<string, any[]> = {}
|
||||
for (const v of visits.value) { const d = v.visit_date; if (!g[d]) g[d] = []; g[d].push(v) }
|
||||
return Object.entries(g).sort((a, b) => b[0].localeCompare(a[0]))
|
||||
})
|
||||
const notesByDate = computed(() => {
|
||||
const g: Record<string, any[]> = {}
|
||||
for (const n of dailyNotes.value) { const d = n.note_date; if (!g[d]) g[d] = []; g[d].push(n) }
|
||||
return Object.entries(g).sort((a, b) => b[0].localeCompare(a[0]))
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="workspace" v-loading="loading">
|
||||
<h3>我的工作数据</h3>
|
||||
<el-card>
|
||||
<el-tabs v-model="activeTab">
|
||||
<!-- 拜访记录 -->
|
||||
<el-tab-pane label="拜访记录" name="visits">
|
||||
<div style="margin-bottom:12px"><el-button type="primary" size="small" @click="openCreate('visit')">+ 新建拜访</el-button></div>
|
||||
<div v-for="[date, items] in visitsByDate" :key="date" class="date-group">
|
||||
<h4>📅 {{ date }}</h4>
|
||||
<el-table :data="items" stripe size="small">
|
||||
<el-table-column prop="customer_name" label="客户" width="130">
|
||||
<template #default="{ row }"><el-link type="primary" :underline="false">{{ row.customer_name }}</el-link></template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="visit_method" label="方式" width="60" />
|
||||
<el-table-column prop="time_range" label="时间" width="100" />
|
||||
<el-table-column prop="communication_content" label="沟通内容" min-width="200" show-overflow-tooltip />
|
||||
<el-table-column label="操作" width="120">
|
||||
<template #default="{ row }">
|
||||
<el-button text size="small" @click="openEdit('visit', row)">编辑</el-button>
|
||||
<el-button text size="small" type="danger" @click="handleDelete('visit', row.id)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<div v-if="!visits.length" class="empty">暂无数据</div>
|
||||
</el-tab-pane>
|
||||
|
||||
<!-- 今日纪要 -->
|
||||
<el-tab-pane label="今日纪要" name="daily_notes">
|
||||
<div style="margin-bottom:12px"><el-button type="primary" size="small" @click="openCreate('note')">+ 新建纪要</el-button></div>
|
||||
<div v-for="[date, items] in notesByDate" :key="date" class="date-group">
|
||||
<h4>📅 {{ date }}</h4>
|
||||
<el-table :data="items" stripe size="small">
|
||||
<el-table-column prop="category" label="分类" width="100"><template #default="{ row }"><el-tag size="small">{{ row.category }}</el-tag></template></el-table-column>
|
||||
<el-table-column prop="content" label="工作内容" min-width="250" show-overflow-tooltip />
|
||||
<el-table-column prop="time_range" label="时间" width="100" />
|
||||
<el-table-column label="操作" width="120">
|
||||
<template #default="{ row }">
|
||||
<el-button text size="small" @click="openEdit('note', row)">编辑</el-button>
|
||||
<el-button text size="small" type="danger" @click="handleDelete('note', row.id)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<div v-if="!dailyNotes.length" class="empty">暂无数据</div>
|
||||
</el-tab-pane>
|
||||
|
||||
<!-- 工作计划 -->
|
||||
<el-tab-pane label="工作计划" name="work_plans">
|
||||
<div style="margin-bottom:12px"><el-button type="primary" size="small" @click="openCreate('plan')">+ 新建计划</el-button></div>
|
||||
<el-table :data="workPlans" stripe size="small">
|
||||
<el-table-column prop="customer_name" label="客户" width="130">
|
||||
<template #default="{ row }"><el-link type="primary" :underline="false">{{ row.customer_name }}</el-link></template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="plan_content" label="工作计划" min-width="250" show-overflow-tooltip />
|
||||
<el-table-column prop="plan_date" label="计划时间" width="110" />
|
||||
<el-table-column prop="status" label="状态" width="90"><template #default="{ row }"><el-tag size="small">{{ row.status }}</el-tag></template></el-table-column>
|
||||
<el-table-column label="操作" width="120">
|
||||
<template #default="{ row }">
|
||||
<el-button text size="small" @click="openEdit('plan', row)">编辑</el-button>
|
||||
<el-button text size="small" type="danger" @click="handleDelete('plan', row.id)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div v-if="!workPlans.length" class="empty">暂无数据</div>
|
||||
</el-tab-pane>
|
||||
|
||||
<!-- 小微商机 -->
|
||||
<el-tab-pane label="小微商机" name="mini_biz">
|
||||
<div style="margin-bottom:12px"><el-button type="primary" size="small" @click="openCreate('mini')">+ 新建商机</el-button></div>
|
||||
<el-table :data="miniBusiness" stripe size="small">
|
||||
<el-table-column prop="customer_name" label="客户" width="130">
|
||||
<template #default="{ row }"><el-link type="primary" :underline="false">{{ row.customer_name }}</el-link></template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="product_type" label="产品类型" width="120" />
|
||||
<el-table-column prop="amount" label="金额" width="90" />
|
||||
<el-table-column prop="follow_up_detail" label="跟进内容" min-width="200" show-overflow-tooltip />
|
||||
<el-table-column prop="status" label="状态" width="90"><template #default="{ row }"><el-tag size="small">{{ row.status }}</el-tag></template></el-table-column>
|
||||
<el-table-column prop="expected_revenue_date" label="预计列收" width="110" />
|
||||
<el-table-column label="操作" width="120">
|
||||
<template #default="{ row }">
|
||||
<el-button text size="small" @click="openEdit('mini', row)">编辑</el-button>
|
||||
<el-button text size="small" type="danger" @click="handleDelete('mini', row.id)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div v-if="!miniBusiness.length" class="empty">暂无数据</div>
|
||||
</el-tab-pane>
|
||||
|
||||
<!-- 要客拜访 -->
|
||||
<el-tab-pane label="要客拜访" name="key_visits">
|
||||
<div style="margin-bottom:12px"><el-button type="primary" size="small" @click="openCreate('key')">+ 新建要客拜访</el-button></div>
|
||||
<el-table :data="keyVisits" stripe size="small">
|
||||
<el-table-column prop="customer_name" label="客户" width="130">
|
||||
<template #default="{ row }"><el-link type="primary" :underline="false">{{ row.customer_name }}</el-link></template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="urgency_level" label="重要度" width="80"><template #default="{ row }"><el-tag size="small" :type="row.urgency_level==='紧急'?'danger':row.urgency_level==='重要'?'warning':''">{{ row.urgency_level }}</el-tag></template></el-table-column>
|
||||
<el-table-column prop="description" label="描述" min-width="200" show-overflow-tooltip />
|
||||
<el-table-column prop="progress_status" label="进展" width="80" />
|
||||
<el-table-column prop="planned_date" label="计划时间" width="110" />
|
||||
<el-table-column prop="planned_visitor" label="拜访人" width="80" />
|
||||
<el-table-column prop="visit_target" label="拜访对象" width="100" />
|
||||
<el-table-column label="操作" width="120">
|
||||
<template #default="{ row }">
|
||||
<el-button text size="small" @click="openEdit('key', row)">编辑</el-button>
|
||||
<el-button text size="small" type="danger" @click="handleDelete('key', row.id)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div v-if="!keyVisits.length" class="empty">暂无数据</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-card>
|
||||
|
||||
<!-- Create/Edit Dialog -->
|
||||
<el-dialog v-model="dialogVisible" :title="(dialogMode === 'create' ? '新建' : '编辑') + typeLabel(dialogType)" width="520px">
|
||||
<el-form label-position="top" v-if="form">
|
||||
<!-- Customer selector for types that need it -->
|
||||
<el-form-item v-if="['visit','plan','mini','key'].includes(dialogType)" label="客户单位">
|
||||
<el-select v-model="form.customer_id" filterable remote :remote-method="(q: string) => loadCustomers(q)" placeholder="搜索选择客户" style="width:100%">
|
||||
<el-option v-for="c in customers" :key="c.id" :label="c.name" :value="c.id" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<!-- Date -->
|
||||
<el-form-item v-if="dialogType === 'visit'" label="日期">
|
||||
<el-date-picker v-model="form.visit_date" type="date" style="width:100%" />
|
||||
</el-form-item>
|
||||
<el-form-item v-if="dialogType === 'note'" label="日期">
|
||||
<el-date-picker v-model="form.note_date" type="date" style="width:100%" />
|
||||
</el-form-item>
|
||||
<el-form-item v-if="dialogType === 'plan'" label="计划拜访时间">
|
||||
<el-date-picker v-model="form.plan_date" type="date" style="width:100%" />
|
||||
</el-form-item>
|
||||
<!-- Visit specific -->
|
||||
<template v-if="dialogType === 'visit'">
|
||||
<el-form-item label="拜访方式">
|
||||
<el-radio-group v-model="form.visit_method">
|
||||
<el-radio-button value="上门">上门</el-radio-button><el-radio-button value="电话">电话</el-radio-button><el-radio-button value="微信">微信</el-radio-button><el-radio-button value="出差">出差</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="时间范围"><el-input v-model="form.time_range" /></el-form-item>
|
||||
<el-form-item label="沟通内容"><el-input v-model="form.communication_content" type="textarea" :rows="3" /></el-form-item>
|
||||
<el-form-item label="客户需求"><el-input v-model="form.customer_demand" type="textarea" :rows="2" /></el-form-item>
|
||||
</template>
|
||||
<!-- Note specific -->
|
||||
<template v-if="dialogType === 'note'">
|
||||
<el-form-item label="分类">
|
||||
<div style="display:flex;flex-wrap:wrap;gap:6px">
|
||||
<el-button v-for="c in categories" :key="c" :type="form.category===c?'primary':''" size="small" @click="form.category=c">{{ c }}</el-button>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="时间范围"><el-input v-model="form.time_range" /></el-form-item>
|
||||
<el-form-item label="工作内容"><el-input v-model="form.content" type="textarea" :rows="4" /></el-form-item>
|
||||
</template>
|
||||
<!-- Plan specific -->
|
||||
<template v-if="dialogType === 'plan'">
|
||||
<el-form-item label="工作计划"><el-input v-model="form.plan_content" type="textarea" :rows="4" /></el-form-item>
|
||||
<el-form-item label="状态"><el-select v-model="form.status"><el-option label="计划中" value="计划中" /><el-option label="已完成" value="已完成" /><el-option label="已取消" value="已取消" /></el-select></el-form-item>
|
||||
</template>
|
||||
<!-- Mini biz specific -->
|
||||
<template v-if="dialogType === 'mini'">
|
||||
<el-form-item label="产品类型"><el-input v-model="form.product_type" /></el-form-item>
|
||||
<el-form-item label="金额"><el-input v-model="form.amount" /></el-form-item>
|
||||
<el-form-item label="跟进内容"><el-input v-model="form.follow_up_detail" type="textarea" :rows="4" /></el-form-item>
|
||||
<el-form-item label="状态"><el-select v-model="form.status"><el-option label="跟进中" value="跟进中" /><el-option label="已签约" value="已签约" /><el-option label="已流失" value="已流失" /></el-select></el-form-item>
|
||||
<el-form-item label="预计列收时间"><el-input v-model="form.expected_revenue_date" /></el-form-item>
|
||||
</template>
|
||||
<!-- Key visit specific -->
|
||||
<template v-if="dialogType === 'key'">
|
||||
<el-form-item label="紧急重要度"><el-radio-group v-model="form.urgency_level"><el-radio-button value="一般">一般</el-radio-button><el-radio-button value="重要">重要</el-radio-button><el-radio-button value="紧急">紧急</el-radio-button></el-radio-group></el-form-item>
|
||||
<el-form-item label="内容描述"><el-input v-model="form.description" type="textarea" :rows="4" /></el-form-item>
|
||||
<el-form-item label="进展状态"><el-select v-model="form.progress_status"><el-option label="未开始" value="未开始" /><el-option label="进行中" value="进行中" /><el-option label="已完成" value="已完成" /></el-select></el-form-item>
|
||||
<el-form-item label="计划拜访时间"><el-input v-model="form.planned_date" /></el-form-item>
|
||||
<el-form-item label="计划拜访人"><el-input v-model="form.planned_visitor" /></el-form-item>
|
||||
<el-form-item label="拜访对象"><el-input v-model="form.visit_target" /></el-form-item>
|
||||
</template>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button @click="dialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="handleSave">保存</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.workspace h3 { margin: 0 0 16px; }
|
||||
.date-group { margin-bottom: 20px; }
|
||||
.date-group h4 { margin: 12px 0 8px; font-size: 14px; color: #303133; }
|
||||
.empty { text-align: center; color: #c0c4cc; padding: 40px 0; }
|
||||
</style>
|
||||
@@ -0,0 +1,172 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import api from '@/api/index'
|
||||
|
||||
const managers = ref<any[]>([])
|
||||
const selectedUserIds = ref<string[]>([])
|
||||
const remindMessage = ref('')
|
||||
const announcementContent = ref('')
|
||||
const remindLoading = ref(false)
|
||||
const announceLoading = ref(false)
|
||||
const dailyCheckLoading = ref(false)
|
||||
|
||||
// Import
|
||||
const importDialogVisible = ref(false)
|
||||
const importFile = ref<File | null>(null)
|
||||
const importPreview = ref<any>(null)
|
||||
const importLoading = ref(false)
|
||||
const importResult = ref<any>(null)
|
||||
|
||||
onMounted(async () => {
|
||||
try {
|
||||
const res = await api.get('/users/', { params: { role: 'manager' } })
|
||||
managers.value = res.data
|
||||
} catch (_) {}
|
||||
})
|
||||
|
||||
async function handleRemind() {
|
||||
if (!selectedUserIds.value.length) { ElMessage.warning('请选择要提醒的人员'); return }
|
||||
remindLoading.value = true
|
||||
try {
|
||||
const res = await api.post('/wecom/remind', {
|
||||
user_ids: selectedUserIds.value,
|
||||
message: remindMessage.value || undefined,
|
||||
})
|
||||
ElMessage.success(`已发送提醒给 ${res.data.sent_to} 人`)
|
||||
} catch (e: any) {
|
||||
ElMessage.error('发送失败')
|
||||
} finally {
|
||||
remindLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function handleAnnouncement() {
|
||||
if (!announcementContent.value) { ElMessage.warning('请输入公告内容'); return }
|
||||
announceLoading.value = true
|
||||
try {
|
||||
const res = await api.post('/wecom/announcement', {
|
||||
content: announcementContent.value,
|
||||
})
|
||||
ElMessage.success(`公告已推送给 ${res.data.sent_to} 人`)
|
||||
announcementContent.value = ''
|
||||
} catch (e: any) {
|
||||
ElMessage.error('推送失败')
|
||||
} finally {
|
||||
announceLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function handleDailyCheck() {
|
||||
dailyCheckLoading.value = true
|
||||
try {
|
||||
const res = await api.post('/wecom/trigger-daily-check')
|
||||
ElMessage.success(`已执行：${res.data.reported}/${res.data.total_managers} 人已填报`)
|
||||
} catch (e: any) {
|
||||
ElMessage.error('执行失败')
|
||||
} finally {
|
||||
dailyCheckLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function handleImportFile(e: Event) {
|
||||
const target = e.target as HTMLInputElement
|
||||
if (target.files?.[0]) {
|
||||
importFile.value = target.files[0]
|
||||
}
|
||||
}
|
||||
|
||||
async function handleImportPreview() {
|
||||
if (!importFile.value) return
|
||||
importLoading.value = true
|
||||
const formData = new FormData()
|
||||
formData.append('file', importFile.value)
|
||||
try {
|
||||
const res = await api.post('/import/weekly-report', formData, {
|
||||
headers: { 'Content-Type': 'multipart/form-data' },
|
||||
})
|
||||
importPreview.value = res.data.preview
|
||||
importResult.value = res.data
|
||||
} catch (e: any) {
|
||||
ElMessage.error('解析失败')
|
||||
} finally {
|
||||
importLoading.value = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="settings-page">
|
||||
<h3>系统设置</h3>
|
||||
|
||||
<!-- Manual Remind -->
|
||||
<el-card class="setting-card">
|
||||
<template #header>📢 手动催办</template>
|
||||
<el-form>
|
||||
<el-form-item label="选择人员">
|
||||
<el-select v-model="selectedUserIds" multiple placeholder="选择客户经理" style="width:100%">
|
||||
<el-option v-for="m in managers" :key="m.id" :label="m.name" :value="m.id" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="提醒内容">
|
||||
<el-input v-model="remindMessage" type="textarea" :rows="2" placeholder="可选，留空使用默认提醒语" />
|
||||
</el-form-item>
|
||||
<el-button type="primary" :loading="remindLoading" @click="handleRemind">发送催办</el-button>
|
||||
</el-form>
|
||||
</el-card>
|
||||
|
||||
<!-- Announcement -->
|
||||
<el-card class="setting-card">
|
||||
<template #header>📣 全员公告</template>
|
||||
<el-form>
|
||||
<el-form-item label="公告内容">
|
||||
<el-input v-model="announcementContent" type="textarea" :rows="3" placeholder="输入公告内容..." />
|
||||
</el-form-item>
|
||||
<el-button type="warning" :loading="announceLoading" @click="handleAnnouncement">推送公告</el-button>
|
||||
</el-form>
|
||||
</el-card>
|
||||
|
||||
<!-- Daily Check -->
|
||||
<el-card class="setting-card">
|
||||
<template #header>⏰ 填报检查</template>
|
||||
<p>手动触发今日填报检查（通常每日 18:00 自动执行）</p>
|
||||
<el-button :loading="dailyCheckLoading" @click="handleDailyCheck">立即检查</el-button>
|
||||
</el-card>
|
||||
|
||||
<!-- Import -->
|
||||
<el-card class="setting-card">
|
||||
<template #header>📥 Excel 数据导入</template>
|
||||
<el-form>
|
||||
<el-form-item label="上传旧周报 Excel">
|
||||
<input type="file" accept=".xlsx,.xls" @change="handleImportFile" />
|
||||
</el-form-item>
|
||||
<el-button type="success" :loading="importLoading" @click="handleImportPreview" :disabled="!importFile">
|
||||
预览并导入
|
||||
</el-button>
|
||||
</el-form>
|
||||
<!-- Preview Results -->
|
||||
<div v-if="importPreview" style="margin-top:16px">
|
||||
<h4>文件预览</h4>
|
||||
<el-table :data="Object.entries(importPreview)" stripe>
|
||||
<el-table-column prop="0" label="Sheet" />
|
||||
<el-table-column prop="1.row_count" label="数据行数" />
|
||||
<el-table-column label="表头">
|
||||
<template #default="{ row }">
|
||||
{{ (row[1] as any).headers.join(', ') }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<div v-if="importResult" style="margin-top:12px">
|
||||
<el-alert type="success" :closable="false">
|
||||
导入完成：拜访 {{ importResult.visits }} 条，跳过 {{ importResult.skipped }} 条
|
||||
</el-alert>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.settings-page h3 { margin: 0 0 20px; }
|
||||
.setting-card { margin-bottom: 16px; }
|
||||
</style>
|
||||
@@ -0,0 +1,126 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import api from '@/api/index'
|
||||
|
||||
const loading = ref(false)
|
||||
const users = ref<any[]>([])
|
||||
const editDialogVisible = ref(false)
|
||||
const editUser = ref<any>(null)
|
||||
const editRole = ref('')
|
||||
const editDepartment = ref('')
|
||||
|
||||
const roleOptions = [
|
||||
{ label: '客户经理', value: 'manager' },
|
||||
{ label: '支局长', value: 'director' },
|
||||
{ label: '分管领导', value: 'leader' },
|
||||
]
|
||||
|
||||
const roleTagType: Record<string, string> = {
|
||||
manager: '',
|
||||
director: 'warning',
|
||||
leader: 'info',
|
||||
}
|
||||
const roleLabel: Record<string, string> = {
|
||||
manager: '客户经理',
|
||||
director: '支局长',
|
||||
leader: '分管领导',
|
||||
}
|
||||
|
||||
async function loadUsers() {
|
||||
loading.value = true
|
||||
try {
|
||||
const res = await api.get('/users/')
|
||||
users.value = res.data
|
||||
} catch (e: any) {
|
||||
ElMessage.error('加载用户列表失败')
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(loadUsers)
|
||||
|
||||
function openEdit(user: any) {
|
||||
editUser.value = user
|
||||
editRole.value = user.role
|
||||
editDepartment.value = user.department || ''
|
||||
editDialogVisible.value = true
|
||||
}
|
||||
|
||||
async function handleSave() {
|
||||
if (!editUser.value) return
|
||||
try {
|
||||
await api.put(`/users/${editUser.value.id}/role`, {
|
||||
role: editRole.value,
|
||||
department: editDepartment.value,
|
||||
})
|
||||
ElMessage.success('角色已更新')
|
||||
editDialogVisible.value = false
|
||||
await loadUsers()
|
||||
} catch (e: any) {
|
||||
ElMessage.error('更新失败: ' + (e.response?.data?.detail || e.message))
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="user-manage" v-loading="loading">
|
||||
<div class="page-header">
|
||||
<h3>用户管理</h3>
|
||||
</div>
|
||||
<el-card>
|
||||
<el-table :data="users" stripe>
|
||||
<el-table-column prop="name" label="姓名" width="120" />
|
||||
<el-table-column label="角色" width="120">
|
||||
<template #default="{ row }">
|
||||
<el-tag :type="roleTagType[row.role]">{{ roleLabel[row.role] || row.role }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="department" label="部门" min-width="150" />
|
||||
<el-table-column prop="casdoor_id" label="Casdoor ID" min-width="200" />
|
||||
<el-table-column prop="wecom_userid" label="企微 UserID" width="140">
|
||||
<template #default="{ row }">{{ row.wecom_userid || '-' }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="100" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<el-button text size="small" type="primary" @click="openEdit(row)">修改角色</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-card>
|
||||
|
||||
<!-- Edit Dialog -->
|
||||
<el-dialog v-model="editDialogVisible" title="修改用户角色" width="420px">
|
||||
<template v-if="editUser">
|
||||
<el-form label-position="top">
|
||||
<el-form-item label="用户">
|
||||
<el-input :value="editUser.name" disabled />
|
||||
</el-form-item>
|
||||
<el-form-item label="角色">
|
||||
<el-select v-model="editRole" style="width:100%">
|
||||
<el-option v-for="opt in roleOptions" :key="opt.value" :label="opt.label" :value="opt.value" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="部门（可选）">
|
||||
<el-input v-model="editDepartment" placeholder="如：XX支局" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</template>
|
||||
<template #footer>
|
||||
<el-button @click="editDialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="handleSave">保存</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.page-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.page-header h3 { margin: 0; }
|
||||
</style>
|
||||
@@ -0,0 +1,257 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, computed } from 'vue'
|
||||
import { useAuthStore } from '@/stores/auth'
|
||||
import { dashboardApi } from '@/api/dashboard'
|
||||
import { uploadApi } from '@/api/upload'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import api from '@/api/index'
|
||||
|
||||
const auth = useAuthStore()
|
||||
const loading = ref(false)
|
||||
const activeTab = ref('visits')
|
||||
const filterManagerId = ref('')
|
||||
const filterCustomerId = ref('')
|
||||
const managers = ref<any[]>([])
|
||||
|
||||
const report = ref({
|
||||
week_start: '', week_end: '',
|
||||
visits: [] as any[],
|
||||
daily_notes: [] as any[],
|
||||
work_plans: [] as any[],
|
||||
mini_business: [] as any[],
|
||||
key_visits: [] as any[],
|
||||
})
|
||||
|
||||
const photoUrls = ref<Record<string, string>>({})
|
||||
const photoDialogVisible = ref(false)
|
||||
const currentPhotoUrl = ref('')
|
||||
|
||||
onMounted(async () => {
|
||||
await loadReport()
|
||||
try {
|
||||
const res = await api.get('/users/', { params: { role: 'manager' } })
|
||||
managers.value = res.data
|
||||
} catch (_) {}
|
||||
})
|
||||
|
||||
async function loadReport() {
|
||||
loading.value = true
|
||||
try {
|
||||
const params: any = {}
|
||||
if (filterManagerId.value) params.manager_id = filterManagerId.value
|
||||
if (filterCustomerId.value) params.customer_id = filterCustomerId.value
|
||||
const res = await dashboardApi.getWeeklyReport(params)
|
||||
report.value = res.data
|
||||
// Load photo URLs
|
||||
for (const v of report.value.visits) {
|
||||
if (v.photos?.length) {
|
||||
for (const key of v.photos) {
|
||||
if (!photoUrls.value[key]) {
|
||||
try {
|
||||
const urlRes = await uploadApi.getDownloadUrl(key)
|
||||
photoUrls.value[key] = urlRes.data.download_url
|
||||
} catch (_) {}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
} catch (e: any) {
|
||||
ElMessage.error('加载周报失败')
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function handleExport() {
|
||||
try {
|
||||
const res = await api.get('/export/weekly-report', { responseType: 'blob' })
|
||||
const url = URL.createObjectURL(res.data)
|
||||
const a = document.createElement('a')
|
||||
a.href = url
|
||||
a.download = 'weekly_report.xlsx'
|
||||
a.click()
|
||||
URL.revokeObjectURL(url)
|
||||
ElMessage.success('导出成功')
|
||||
} catch (e: any) {
|
||||
ElMessage.error('导出失败')
|
||||
}
|
||||
}
|
||||
|
||||
function viewPhoto(url: string) {
|
||||
currentPhotoUrl.value = url
|
||||
photoDialogVisible.value = true
|
||||
}
|
||||
|
||||
// Group visits by date for timeline
|
||||
const visitsByDate = computed(() => {
|
||||
const grouped: Record<string, any[]> = {}
|
||||
for (const v of report.value.visits) {
|
||||
const d = v.visit_date
|
||||
if (!grouped[d]) grouped[d] = []
|
||||
grouped[d].push(v)
|
||||
}
|
||||
return Object.entries(grouped).sort((a, b) => b[0].localeCompare(a[0]))
|
||||
})
|
||||
|
||||
const notesByDate = computed(() => {
|
||||
const grouped: Record<string, any[]> = {}
|
||||
for (const n of report.value.daily_notes || []) {
|
||||
const d = n.note_date
|
||||
if (!grouped[d]) grouped[d] = []
|
||||
grouped[d].push(n)
|
||||
}
|
||||
return Object.entries(grouped).sort((a, b) => b[0].localeCompare(a[0]))
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="weekly-report" v-loading="loading">
|
||||
<div class="page-header">
|
||||
<div>
|
||||
<h3>周报详情</h3>
|
||||
<p>{{ report.week_start }} ~ {{ report.week_end }}</p>
|
||||
</div>
|
||||
<div>
|
||||
<el-button v-if="auth.isDirector" type="success" @click="handleExport">📥 导出 Excel</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Filters -->
|
||||
<el-card style="margin-bottom: 16px;">
|
||||
<el-row :gutter="16">
|
||||
<el-col :span="8">
|
||||
<el-select v-model="filterManagerId" placeholder="按客户经理筛选" clearable @change="loadReport" 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="4">
|
||||
<el-button @click="loadReport">查询</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
|
||||
<!-- 4 Tabs -->
|
||||
<el-card>
|
||||
<el-tabs v-model="activeTab">
|
||||
<el-tab-pane label="每日拜访记录" name="visits">
|
||||
<div v-if="report.visits.length === 0" class="empty">暂无数据</div>
|
||||
<div v-for="[date, items] in visitsByDate" :key="date" class="date-group">
|
||||
<h4 class="date-title">📅 {{ date }}</h4>
|
||||
<el-table :data="items" stripe style="width:100%">
|
||||
<el-table-column prop="customer_name" label="客户" width="120" />
|
||||
<el-table-column prop="visit_method" label="方式" width="60" />
|
||||
<el-table-column prop="time_range" label="时间" width="100" />
|
||||
<el-table-column prop="communication_content" label="沟通内容" min-width="200" show-overflow-tooltip />
|
||||
<el-table-column prop="customer_demand" label="客户需求" min-width="150" show-overflow-tooltip />
|
||||
<el-table-column prop="manager_name" label="客户经理" width="80" />
|
||||
<el-table-column label="照片" width="100">
|
||||
<template #default="{ row }">
|
||||
<div class="photo-cell" v-if="row.photos?.length">
|
||||
<img
|
||||
v-for="key in row.photos.slice(0,2)" :key="key"
|
||||
:src="photoUrls[key] || ''"
|
||||
class="mini-thumb"
|
||||
@click="viewPhoto(photoUrls[key])"
|
||||
/>
|
||||
</div>
|
||||
<span v-else>-</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
|
||||
<el-tab-pane label="工作计划" name="work_plans">
|
||||
<el-table :data="report.work_plans" stripe>
|
||||
<el-table-column prop="customer_name" label="客户" width="120" />
|
||||
<el-table-column prop="plan_content" label="工作计划" min-width="250" />
|
||||
<el-table-column prop="plan_date" label="计划时间" width="120" />
|
||||
<el-table-column prop="manager_name" label="客户经理" width="80" />
|
||||
<el-table-column prop="status" label="状态" width="100">
|
||||
<template #default="{ row }">
|
||||
<el-tag :type="row.status === '已完成' ? 'success' : row.status === '已取消' ? 'info' : ''">
|
||||
{{ row.status }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-tab-pane>
|
||||
|
||||
<el-tab-pane label="小微业务商机" name="mini_business">
|
||||
<el-table :data="report.mini_business" stripe>
|
||||
<el-table-column prop="customer_name" label="客户" width="120" />
|
||||
<el-table-column prop="product_type" label="产品类型" width="120" />
|
||||
<el-table-column prop="amount" label="金额" width="100" />
|
||||
<el-table-column prop="follow_up_detail" label="跟进内容" min-width="200" />
|
||||
<el-table-column prop="status" label="状态" width="100">
|
||||
<template #default="{ row }">
|
||||
<el-tag :type="row.status === '已签约' ? 'success' : row.status === '已流失' ? 'danger' : ''">
|
||||
{{ row.status }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="manager_name" label="客户经理" width="80" />
|
||||
<el-table-column prop="expected_revenue_date" label="预计列收" width="120" />
|
||||
</el-table>
|
||||
</el-tab-pane>
|
||||
|
||||
<el-tab-pane label="今日纪要" name="daily_notes">
|
||||
<div v-if="report.daily_notes.length === 0" class="empty">暂无数据</div>
|
||||
<div v-for="[date, items] in notesByDate" :key="date" class="date-group">
|
||||
<h4 class="date-title">📅 {{ date }}</h4>
|
||||
<el-table :data="items" stripe style="width:100%">
|
||||
<el-table-column label="分类" width="100">
|
||||
<template #default="{ row }">
|
||||
<el-tag :type="row.category === '行政事务' ? '' : row.category === '内部会议' ? 'danger' : row.category === '培训学习' ? 'info' : 'warning'" size="small">{{ row.category }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="content" label="工作内容" min-width="300" show-overflow-tooltip />
|
||||
<el-table-column prop="time_range" label="时间" width="100" />
|
||||
<el-table-column prop="manager_name" label="客户经理" width="80" />
|
||||
</el-table>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
|
||||
<el-tab-pane label="要客拜访计划" name="key_visits">
|
||||
<el-table :data="report.key_visits" stripe>
|
||||
<el-table-column prop="customer_name" label="客户" width="120" />
|
||||
<el-table-column prop="urgency_level" label="重要度" width="80">
|
||||
<template #default="{ row }">
|
||||
<el-tag :type="row.urgency_level === '紧急' ? 'danger' : row.urgency_level === '重要' ? 'warning' : ''">
|
||||
{{ row.urgency_level }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="description" label="描述" min-width="200" />
|
||||
<el-table-column prop="progress_status" label="进展" width="80" />
|
||||
<el-table-column prop="planned_date" label="计划时间" width="120" />
|
||||
<el-table-column prop="planned_visitor" label="拜访人" width="80" />
|
||||
<el-table-column prop="visit_target" label="拜访对象" width="100" />
|
||||
<el-table-column prop="manager_name" label="客户经理" width="80" />
|
||||
</el-table>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-card>
|
||||
|
||||
<!-- Photo Viewer Dialog -->
|
||||
<el-dialog v-model="photoDialogVisible" title="照片查看" width="80%">
|
||||
<img :src="currentPhotoUrl" style="width:100%; border-radius:8px" />
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.page-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.page-header h3 { margin: 0; }
|
||||
.page-header p { margin: 4px 0 0; color: #909399; font-size: 13px; }
|
||||
.date-group { margin-bottom: 20px; }
|
||||
.date-title { margin: 12px 0 8px; font-size: 14px; color: #303133; }
|
||||
.photo-cell { display: flex; gap: 4px; }
|
||||
.mini-thumb { width: 36px; height: 36px; object-fit: cover; border-radius: 4px; cursor: pointer; }
|
||||
.empty { text-align: center; color: #c0c4cc; padding: 40px 0; }
|
||||
</style>
|
||||
@@ -0,0 +1,106 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, computed } from 'vue'
|
||||
import { useRouter, useRoute } from 'vue-router'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { todayStr } from '@/utils'
|
||||
import api from '@/api/index'
|
||||
|
||||
const router = useRouter()
|
||||
const route = useRoute()
|
||||
const isEdit = computed(() => !!route.params.id)
|
||||
const submitLoading = ref(false)
|
||||
|
||||
const categories = ['行政事务', '合同整理', '发票处理', '内部会议', '培训学习', '其他']
|
||||
|
||||
const form = ref({
|
||||
note_date: todayStr(),
|
||||
category: '其他',
|
||||
content: '',
|
||||
time_range: '',
|
||||
})
|
||||
|
||||
onMounted(async () => {
|
||||
if (isEdit.value) {
|
||||
try {
|
||||
const res = await api.get(`/daily-notes/${route.params.id}`)
|
||||
const n = res.data
|
||||
form.value = {
|
||||
note_date: n.note_date,
|
||||
category: n.category,
|
||||
content: n.content || '',
|
||||
time_range: n.time_range || '',
|
||||
}
|
||||
} catch (_) {}
|
||||
}
|
||||
})
|
||||
|
||||
async function handleSubmit() {
|
||||
if (!form.value.content.trim()) { ElMessage.warning('请输入纪要内容'); return }
|
||||
submitLoading.value = true
|
||||
try {
|
||||
if (isEdit.value) {
|
||||
await api.put(`/daily-notes/${route.params.id}`, form.value)
|
||||
ElMessage.success('纪要已更新')
|
||||
} else {
|
||||
await api.post('/daily-notes/', form.value)
|
||||
ElMessage.success('纪要已提交')
|
||||
}
|
||||
router.push('/m')
|
||||
} catch (e: any) {
|
||||
ElMessage.error('提交失败: ' + (e.response?.data?.detail || e.message))
|
||||
} finally { submitLoading.value = false }
|
||||
}
|
||||
|
||||
async function handleDelete() {
|
||||
try {
|
||||
await ElMessageBox.confirm('确定删除这条纪要？', '确认', { type: 'warning' })
|
||||
await api.delete(`/daily-notes/${route.params.id}`)
|
||||
ElMessage.success('已删除')
|
||||
router.push('/m')
|
||||
} catch (e: any) {
|
||||
if (e !== 'cancel') ElMessage.error('删除失败')
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="form-page">
|
||||
<div class="form-header">
|
||||
<el-button text @click="router.back()">← 返回</el-button>
|
||||
<h3>{{ isEdit ? '编辑纪要' : '今日纪要' }}</h3>
|
||||
<span style="width:60px"></span>
|
||||
</div>
|
||||
<el-form label-position="top">
|
||||
<el-form-item label="日期">
|
||||
<el-date-picker v-model="form.note_date" type="date" style="width:100%" />
|
||||
</el-form-item>
|
||||
<el-form-item label="分类">
|
||||
<div class="category-grid">
|
||||
<el-button
|
||||
v-for="c in categories" :key="c"
|
||||
:type="form.category === c ? 'primary' : ''"
|
||||
size="small"
|
||||
@click="form.category = c"
|
||||
>{{ c }}</el-button>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="时间范围（可选）">
|
||||
<el-input v-model="form.time_range" placeholder="如 9:00-11:00" />
|
||||
</el-form-item>
|
||||
<el-form-item label="工作内容" required>
|
||||
<el-input v-model="form.content" type="textarea" :rows="5" placeholder="今天做了什么..." />
|
||||
</el-form-item>
|
||||
<div style="margin-top:24px; display:flex; gap:12px">
|
||||
<el-button type="primary" size="large" :loading="submitLoading" @click="handleSubmit" style="flex:1">提交</el-button>
|
||||
<el-button v-if="isEdit" type="danger" size="large" @click="handleDelete">删除</el-button>
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.form-page { max-width: 500px; margin: 0 auto; }
|
||||
.form-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
|
||||
.form-header h3 { margin: 0; }
|
||||
.category-grid { display: flex; flex-wrap: wrap; gap: 8px; }
|
||||
</style>
|
||||
@@ -0,0 +1,136 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, computed } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { visitsApi } from '@/api/visits'
|
||||
import { uploadApi } from '@/api/upload'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import api from '@/api/index'
|
||||
|
||||
const router = useRouter()
|
||||
const todayVisitCount = ref(0)
|
||||
const visits = ref<any[]>([])
|
||||
const todayNoteCount = ref(0)
|
||||
const dailyNotes = ref<any[]>([])
|
||||
const photoUrls = ref<Record<string, string>>({})
|
||||
const loading = ref(false)
|
||||
|
||||
const todayTotal = computed(() => todayVisitCount.value + todayNoteCount.value)
|
||||
|
||||
const categoryColors: Record<string, string> = {
|
||||
'行政事务': '#409EFF', '合同整理': '#67C23A', '发票处理': '#E6A23C',
|
||||
'内部会议': '#F56C6C', '培训学习': '#909399', '其他': '#B37FEB',
|
||||
}
|
||||
|
||||
async function loadToday() {
|
||||
loading.value = true
|
||||
try {
|
||||
const [vRes, nRes] = await Promise.all([
|
||||
visitsApi.getToday(),
|
||||
api.get('/daily-notes/today'),
|
||||
])
|
||||
todayVisitCount.value = vRes.data.count
|
||||
visits.value = vRes.data.visits
|
||||
todayNoteCount.value = nRes.data.count
|
||||
dailyNotes.value = nRes.data.notes
|
||||
for (const v of visits.value) {
|
||||
if (v.photos?.length > 0) {
|
||||
for (const key of v.photos) {
|
||||
try {
|
||||
const urlRes = await uploadApi.getDownloadUrl(key)
|
||||
photoUrls.value[key] = urlRes.data.download_url
|
||||
} catch (_) {}
|
||||
}
|
||||
}
|
||||
}
|
||||
} catch (e: any) {
|
||||
ElMessage.error('加载失败')
|
||||
} finally { loading.value = false }
|
||||
}
|
||||
|
||||
onMounted(loadToday)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="mobile-home">
|
||||
<!-- Today Summary -->
|
||||
<div class="today-badge">
|
||||
<el-icon :size="48"><Notebook /></el-icon>
|
||||
<div class="badge-text">
|
||||
<div class="badge-count">{{ todayTotal }}</div>
|
||||
<div class="badge-label">今日已录入（拜访{{ todayVisitCount }} + 纪要{{ todayNoteCount }}）</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="quick-actions">
|
||||
<el-button type="primary" size="large" @click="router.push('/m/visit/new')" style="flex:1">+ 今日拜访</el-button>
|
||||
<el-button type="success" size="large" @click="router.push('/m/note/new')" style="flex:1">📝 今日纪要</el-button>
|
||||
</div>
|
||||
|
||||
<div class="quick-links">
|
||||
<el-button @click="router.push('/m/work-plan/new')">📋 工作计划</el-button>
|
||||
<el-button @click="router.push('/m/mini-biz/new')">💼 商机跟单</el-button>
|
||||
<el-button @click="router.push('/m/key-visit/new')">⭐ 要客拜访</el-button>
|
||||
</div>
|
||||
|
||||
<div v-loading="loading">
|
||||
<!-- Daily Notes -->
|
||||
<template v-if="dailyNotes.length">
|
||||
<h4>📝 今日纪要</h4>
|
||||
<el-card v-for="n in dailyNotes" :key="n.id" class="note-card" shadow="hover">
|
||||
<div class="card-header">
|
||||
<el-tag :color="categoryColors[n.category]" effect="dark" size="small">{{ n.category }}</el-tag>
|
||||
<span v-if="n.time_range" class="time">{{ n.time_range }}</span>
|
||||
</div>
|
||||
<div class="card-body">{{ n.content }}</div>
|
||||
<div class="card-footer">
|
||||
<el-button text size="small" @click="router.push(`/m/note/${n.id}/edit`)">编辑</el-button>
|
||||
</div>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<!-- Visits -->
|
||||
<h4 v-if="visits.length">🏢 今日拜访记录</h4>
|
||||
<div v-if="visits.length === 0 && dailyNotes.length === 0" class="empty">今日暂无记录，点击上方按钮开始填报</div>
|
||||
<el-card v-for="v in visits" :key="v.id" class="visit-card" shadow="hover">
|
||||
<div class="card-header">
|
||||
<span class="customer-name">{{ v.customer_name || '-' }}</span>
|
||||
<el-tag size="small">{{ v.visit_method }}</el-tag>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div>{{ v.communication_content || '暂无沟通内容' }}</div>
|
||||
<div v-if="v.customer_demand" class="demand">📌 需求: {{ v.customer_demand }}</div>
|
||||
</div>
|
||||
<div class="card-photos" v-if="v.photos?.length">
|
||||
<img v-for="key in v.photos" :key="key" :src="photoUrls[key] || ''" class="photo-thumb" />
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<span class="time">{{ v.time_range }}</span>
|
||||
<el-button text size="small" @click="router.push(`/m/visit/${v.id}/edit`)">编辑</el-button>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.mobile-home { padding-bottom: 20px; }
|
||||
.today-badge {
|
||||
display: flex; align-items: center; gap: 16px;
|
||||
background: linear-gradient(135deg, #e8f0fe, #f0f5ff); border-radius: 16px; padding: 20px; margin-bottom: 16px;
|
||||
}
|
||||
.badge-count { font-size: 36px; font-weight: 700; color: #1a73e8; }
|
||||
.badge-label { font-size: 13px; color: #606266; }
|
||||
.quick-actions { display: flex; gap: 12px; margin-bottom: 12px; }
|
||||
.quick-links { display: flex; gap: 8px; margin-bottom: 20px; }
|
||||
h4 { margin: 16px 0 12px; color: #303133; }
|
||||
.empty { text-align: center; color: #c0c4cc; padding: 40px 0; }
|
||||
.visit-card, .note-card { margin-bottom: 12px; }
|
||||
.card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
|
||||
.customer-name { font-weight: 600; font-size: 15px; }
|
||||
.demand { color: #e6a23c; margin-top: 4px; font-size: 13px; }
|
||||
.card-photos { display: flex; gap: 6px; margin-top: 8px; overflow-x: auto; }
|
||||
.photo-thumb { width: 72px; height: 72px; object-fit: cover; border-radius: 8px; }
|
||||
.card-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; font-size: 12px; color: #909399; }
|
||||
.card-body { font-size: 14px; color: #303133; }
|
||||
.time { font-size: 12px; color: #909399; }
|
||||
</style>
|
||||
@@ -0,0 +1,94 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { keyVisitsApi } from '@/api/keyVisits'
|
||||
import { customersApi } from '@/api/customers'
|
||||
|
||||
const router = useRouter()
|
||||
const submitLoading = ref(false)
|
||||
const customers = ref<any[]>([])
|
||||
|
||||
const form = ref({
|
||||
customer_id: '',
|
||||
urgency_level: '一般',
|
||||
description: '',
|
||||
progress_status: '未开始',
|
||||
planned_date: '',
|
||||
planned_visitor: '',
|
||||
visit_target: '',
|
||||
})
|
||||
|
||||
onMounted(() => { loadCustomers() })
|
||||
|
||||
async function loadCustomers(q?: string) {
|
||||
try {
|
||||
const params: any = { page_size: 100 }
|
||||
if (q) params.search = q
|
||||
const res = await customersApi.list(params)
|
||||
customers.value = res.data.items || []
|
||||
} catch (_) {}
|
||||
}
|
||||
|
||||
async function handleSubmit() {
|
||||
if (!form.value.customer_id) { ElMessage.warning('请选择客户'); return }
|
||||
submitLoading.value = true
|
||||
try {
|
||||
await keyVisitsApi.create(form.value)
|
||||
ElMessage.success('要客拜访计划已提交')
|
||||
router.push('/m')
|
||||
} catch (e: any) {
|
||||
ElMessage.error('提交失败')
|
||||
} finally { submitLoading.value = false }
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="form-page">
|
||||
<div class="form-header">
|
||||
<el-button text @click="router.back()">← 返回</el-button>
|
||||
<h3>添加要客拜访</h3>
|
||||
<span style="width:60px"></span>
|
||||
</div>
|
||||
<el-form label-position="top">
|
||||
<el-form-item label="客户单位">
|
||||
<el-select v-model="form.customer_id" filterable remote :remote-method="loadCustomers" placeholder="搜索客户" style="width:100%">
|
||||
<el-option v-for="c in customers" :key="c.id" :label="c.name" :value="c.id" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="紧急重要度">
|
||||
<el-radio-group v-model="form.urgency_level">
|
||||
<el-radio-button value="一般">一般</el-radio-button>
|
||||
<el-radio-button value="重要">重要</el-radio-button>
|
||||
<el-radio-button value="紧急">紧急</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="内容描述">
|
||||
<el-input v-model="form.description" type="textarea" :rows="4" placeholder="拜访目的和内容..." />
|
||||
</el-form-item>
|
||||
<el-form-item label="进展状态">
|
||||
<el-select v-model="form.progress_status" style="width:100%">
|
||||
<el-option label="未开始" value="未开始" />
|
||||
<el-option label="进行中" value="进行中" />
|
||||
<el-option label="已完成" value="已完成" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="计划拜访时间">
|
||||
<el-input v-model="form.planned_date" placeholder="如: 2026-06-25" />
|
||||
</el-form-item>
|
||||
<el-form-item label="计划拜访人">
|
||||
<el-input v-model="form.planned_visitor" placeholder="负责拜访的人员" />
|
||||
</el-form-item>
|
||||
<el-form-item label="拜访对象">
|
||||
<el-input v-model="form.visit_target" placeholder="如: 王局长、张处长" />
|
||||
</el-form-item>
|
||||
<el-button type="primary" size="large" :loading="submitLoading" @click="handleSubmit" style="width:100%">提交</el-button>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.form-page { max-width: 500px; margin: 0 auto; }
|
||||
.form-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
|
||||
.form-header h3 { margin: 0; }
|
||||
</style>
|
||||
@@ -0,0 +1,86 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { miniBusinessApi } from '@/api/miniBusiness'
|
||||
import { customersApi } from '@/api/customers'
|
||||
|
||||
const router = useRouter()
|
||||
const submitLoading = ref(false)
|
||||
const customers = ref<any[]>([])
|
||||
|
||||
const form = ref({
|
||||
customer_id: '',
|
||||
product_type: '',
|
||||
amount: '',
|
||||
follow_up_detail: '',
|
||||
status: '跟进中',
|
||||
expected_revenue_date: '',
|
||||
})
|
||||
|
||||
onMounted(() => { loadCustomers() })
|
||||
|
||||
async function loadCustomers(q?: string) {
|
||||
try {
|
||||
const params: any = { page_size: 100 }
|
||||
if (q) params.search = q
|
||||
const res = await customersApi.list(params)
|
||||
customers.value = res.data.items || []
|
||||
} catch (_) {}
|
||||
}
|
||||
|
||||
async function handleSubmit() {
|
||||
if (!form.value.customer_id) { ElMessage.warning('请选择客户'); return }
|
||||
submitLoading.value = true
|
||||
try {
|
||||
await miniBusinessApi.create(form.value)
|
||||
ElMessage.success('商机已提交')
|
||||
router.push('/m')
|
||||
} catch (e: any) {
|
||||
ElMessage.error('提交失败')
|
||||
} finally { submitLoading.value = false }
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="form-page">
|
||||
<div class="form-header">
|
||||
<el-button text @click="router.back()">← 返回</el-button>
|
||||
<h3>添加商机跟单</h3>
|
||||
<span style="width:60px"></span>
|
||||
</div>
|
||||
<el-form label-position="top">
|
||||
<el-form-item label="客户单位">
|
||||
<el-select v-model="form.customer_id" filterable remote :remote-method="loadCustomers" placeholder="搜索客户" style="width:100%">
|
||||
<el-option v-for="c in customers" :key="c.id" :label="c.name" :value="c.id" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="产品类型">
|
||||
<el-input v-model="form.product_type" placeholder="例如: 云桌面、专线..." />
|
||||
</el-form-item>
|
||||
<el-form-item label="金额">
|
||||
<el-input v-model="form.amount" placeholder="预估金额" />
|
||||
</el-form-item>
|
||||
<el-form-item label="跟进内容">
|
||||
<el-input v-model="form.follow_up_detail" type="textarea" :rows="4" placeholder="具体情况..." />
|
||||
</el-form-item>
|
||||
<el-form-item label="跟进状态">
|
||||
<el-select v-model="form.status" style="width:100%">
|
||||
<el-option label="跟进中" value="跟进中" />
|
||||
<el-option label="已签约" value="已签约" />
|
||||
<el-option label="已流失" value="已流失" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="预计列收时间">
|
||||
<el-input v-model="form.expected_revenue_date" placeholder="如: 2026Q3" />
|
||||
</el-form-item>
|
||||
<el-button type="primary" size="large" :loading="submitLoading" @click="handleSubmit" style="width:100%">提交</el-button>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.form-page { max-width: 500px; margin: 0 auto; }
|
||||
.form-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
|
||||
.form-header h3 { margin: 0; }
|
||||
</style>
|
||||
@@ -0,0 +1,269 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, computed } from 'vue'
|
||||
import { useRouter, useRoute } from 'vue-router'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { todayStr } from '@/utils'
|
||||
import { visitsApi } from '@/api/visits'
|
||||
import { customersApi } from '@/api/customers'
|
||||
import { uploadApi } from '@/api/upload'
|
||||
import { useAuthStore } from '@/stores/auth'
|
||||
import api from '@/api/index'
|
||||
|
||||
const router = useRouter()
|
||||
const route = useRoute()
|
||||
const auth = useAuthStore()
|
||||
const isEdit = computed(() => !!route.params.id)
|
||||
const submitLoading = ref(false)
|
||||
const deleting = ref(false)
|
||||
|
||||
const form = ref({
|
||||
customer_id: '',
|
||||
visit_date: todayStr(),
|
||||
visit_method: '上门',
|
||||
time_range: '',
|
||||
communication_content: '',
|
||||
customer_demand: '',
|
||||
companions: [] as string[],
|
||||
photos: [] as string[],
|
||||
})
|
||||
|
||||
const customers = ref<any[]>([])
|
||||
const managers = ref<any[]>([])
|
||||
const uploadedPhotos = ref<string[]>([])
|
||||
const photoPreviews = ref<string[]>([]) // blob URLs for local preview
|
||||
const uploading = ref(false)
|
||||
const customerSearch = ref('')
|
||||
|
||||
onMounted(async () => {
|
||||
await loadCustomers()
|
||||
try {
|
||||
const res = await api.get('/users/', { params: { role: 'manager' } })
|
||||
managers.value = res.data
|
||||
} catch (_) {}
|
||||
if (isEdit.value) {
|
||||
try {
|
||||
const res = await visitsApi.get(route.params.id as string)
|
||||
const v = res.data
|
||||
form.value = {
|
||||
customer_id: v.customer_id,
|
||||
visit_date: v.visit_date,
|
||||
visit_method: v.visit_method,
|
||||
time_range: v.time_range,
|
||||
communication_content: v.communication_content || '',
|
||||
customer_demand: v.customer_demand || '',
|
||||
companions: (v.companions || []).map(String),
|
||||
photos: v.photos || [],
|
||||
}
|
||||
uploadedPhotos.value = v.photos || []
|
||||
// Load photo previews for existing photos
|
||||
for (const key of (v.photos || [])) {
|
||||
try {
|
||||
const urlRes = await uploadApi.getDownloadUrl(key)
|
||||
photoPreviews.value.push(urlRes.data.download_url)
|
||||
} catch (_) { photoPreviews.value.push('') }
|
||||
}
|
||||
} catch (_) {}
|
||||
}
|
||||
})
|
||||
|
||||
async function loadCustomers(q?: string) {
|
||||
try {
|
||||
const params: any = { page_size: 100 }
|
||||
if (q) params.search = q
|
||||
const res = await customersApi.list(params)
|
||||
customers.value = res.data.items || []
|
||||
} catch (_) {}
|
||||
}
|
||||
|
||||
async function handleCustomerSearch(query: string) {
|
||||
customerSearch.value = query
|
||||
if (query) {
|
||||
await loadCustomers(query)
|
||||
} else {
|
||||
await loadCustomers()
|
||||
}
|
||||
}
|
||||
|
||||
async function handleQuickCreate() {
|
||||
const name = customerSearch.value.trim()
|
||||
if (!name) { ElMessage.warning('请输入单位名称'); return }
|
||||
try {
|
||||
const res = await api.post('/customers/quick-create', null, { params: { name } })
|
||||
const newCust = res.data
|
||||
customers.value.unshift(newCust)
|
||||
form.value.customer_id = newCust.id
|
||||
customerSearch.value = ''
|
||||
ElMessage.success(`已创建客户：${name}`)
|
||||
await loadCustomers()
|
||||
} catch (e: any) {
|
||||
ElMessage.error('创建失败: ' + (e.response?.data?.detail || e.message))
|
||||
}
|
||||
}
|
||||
|
||||
async function handlePhotoUpload(event: Event) {
|
||||
const target = event.target as HTMLInputElement
|
||||
if (!target.files?.length) return
|
||||
if (uploadedPhotos.value.length >= 9) { ElMessage.warning('最多9张照片'); return }
|
||||
|
||||
uploading.value = true
|
||||
for (const file of Array.from(target.files)) {
|
||||
if (uploadedPhotos.value.length >= 9) break
|
||||
// Show local preview immediately
|
||||
const previewUrl = URL.createObjectURL(file)
|
||||
photoPreviews.value.push(previewUrl)
|
||||
try {
|
||||
const res = await uploadApi.getPresignedUrl(file.name, file.type || 'image/jpeg')
|
||||
await uploadApi.uploadFile(res.data.upload_url, file)
|
||||
uploadedPhotos.value.push(res.data.object_key)
|
||||
form.value.photos = [...uploadedPhotos.value]
|
||||
} catch (e: any) {
|
||||
// Remove preview on failure
|
||||
const idx = photoPreviews.value.indexOf(previewUrl)
|
||||
if (idx >= 0) photoPreviews.value.splice(idx, 1)
|
||||
URL.revokeObjectURL(previewUrl)
|
||||
ElMessage.error('上传失败: ' + (e.response?.data?.detail || e.message))
|
||||
}
|
||||
}
|
||||
uploading.value = false
|
||||
target.value = ''
|
||||
}
|
||||
|
||||
function removePhoto(index: number) {
|
||||
// Clean up preview URL
|
||||
if (index < photoPreviews.value.length) {
|
||||
URL.revokeObjectURL(photoPreviews.value[index])
|
||||
photoPreviews.value.splice(index, 1)
|
||||
}
|
||||
uploadedPhotos.value.splice(index, 1)
|
||||
form.value.photos = [...uploadedPhotos.value]
|
||||
}
|
||||
|
||||
async function handleSubmit() {
|
||||
if (!form.value.customer_id) { ElMessage.warning('请选择客户'); return }
|
||||
submitLoading.value = true
|
||||
try {
|
||||
if (isEdit.value) {
|
||||
await visitsApi.update(route.params.id as string, form.value)
|
||||
ElMessage.success('记录已更新')
|
||||
} else {
|
||||
await visitsApi.create(form.value)
|
||||
ElMessage.success('拜访记录已提交')
|
||||
}
|
||||
router.push('/m')
|
||||
} catch (e: any) {
|
||||
ElMessage.error('提交失败: ' + (e.response?.data?.detail || e.message))
|
||||
} finally { submitLoading.value = false }
|
||||
}
|
||||
|
||||
async function handleDelete() {
|
||||
try {
|
||||
await ElMessageBox.confirm('确定删除此拜访记录？', '确认', { type: 'warning' })
|
||||
deleting.value = true
|
||||
await visitsApi.delete(route.params.id as string)
|
||||
ElMessage.success('已删除')
|
||||
router.push('/m')
|
||||
} catch (e: any) {
|
||||
if (e !== 'cancel') ElMessage.error('删除失败')
|
||||
} finally { deleting.value = false }
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="visit-form">
|
||||
<div class="form-header">
|
||||
<el-button text @click="router.back()">← 返回</el-button>
|
||||
<h3>{{ isEdit ? '编辑拜访记录' : '今日拜访' }}</h3>
|
||||
<span style="width:60px"></span>
|
||||
</div>
|
||||
|
||||
<el-form label-position="top">
|
||||
<el-form-item label="客户单位">
|
||||
<el-select
|
||||
v-model="form.customer_id"
|
||||
filterable
|
||||
remote
|
||||
:remote-method="handleCustomerSearch"
|
||||
placeholder="搜索/选择客户"
|
||||
style="width:100%"
|
||||
popper-class="customer-select-popper"
|
||||
>
|
||||
<el-option v-for="c in customers" :key="c.id" :label="c.name" :value="c.id" />
|
||||
</el-select>
|
||||
<div v-if="customerSearch && !customers.some(c => c.name === customerSearch)" style="margin-top:6px">
|
||||
<el-button size="small" type="success" @click="handleQuickCreate">
|
||||
+ 新建客户「{{ customerSearch }}」
|
||||
</el-button>
|
||||
</div>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="拜访日期">
|
||||
<el-date-picker v-model="form.visit_date" type="date" style="width:100%" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="拜访方式">
|
||||
<el-radio-group v-model="form.visit_method">
|
||||
<el-radio-button value="上门">上门</el-radio-button>
|
||||
<el-radio-button value="电话">电话</el-radio-button>
|
||||
<el-radio-button value="微信">微信</el-radio-button>
|
||||
<el-radio-button value="出差">出差</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="时间范围">
|
||||
<el-input v-model="form.time_range" placeholder="如 9:00-10:00" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="同访人员">
|
||||
<el-select v-model="form.companions" multiple filterable placeholder="选择同访人员" style="width:100%">
|
||||
<el-option v-for="m in managers" :key="m.id" :label="m.name" :value="m.id" :disabled="m.id === auth.userId" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="沟通内容">
|
||||
<el-input v-model="form.communication_content" type="textarea" :rows="4" placeholder="本次拜访沟通内容..." />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="客户需求">
|
||||
<el-input v-model="form.customer_demand" type="textarea" :rows="2" placeholder="客户提出的需求..." />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="拜访照片 (最多9张)">
|
||||
<div class="photo-area">
|
||||
<div v-for="(key, idx) in uploadedPhotos" :key="key" class="photo-item">
|
||||
<img :src="photoPreviews[idx]" class="photo-thumb" v-if="photoPreviews[idx]" />
|
||||
<span class="photo-label">照片{{ idx + 1 }}</span>
|
||||
<el-button text size="small" type="danger" @click="removePhoto(idx)">移除</el-button>
|
||||
</div>
|
||||
<label v-if="uploadedPhotos.length < 9" class="upload-btn">
|
||||
<el-button :loading="uploading" type="primary" plain>+ 拍照/选图</el-button>
|
||||
<input type="file" accept="image/*" multiple @change="handlePhotoUpload" class="file-input-hidden" />
|
||||
</label>
|
||||
</div>
|
||||
</el-form-item>
|
||||
|
||||
<div style="margin-top:24px; display:flex; gap:12px">
|
||||
<el-button type="primary" size="large" :loading="submitLoading" @click="handleSubmit" style="flex:1">
|
||||
提交
|
||||
</el-button>
|
||||
<el-button v-if="isEdit" type="danger" size="large" :loading="deleting" @click="handleDelete">
|
||||
删除
|
||||
</el-button>
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.visit-form { max-width: 500px; margin: 0 auto; }
|
||||
.form-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
|
||||
.form-header h3 { margin: 0; }
|
||||
.photo-area { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
|
||||
.photo-item { display: flex; align-items: center; gap: 6px; background: #f5f7fa; padding: 4px 10px; border-radius: 8px; }
|
||||
.photo-thumb { width: 48px; height: 48px; object-fit: cover; border-radius: 6px; flex-shrink: 0; }
|
||||
.photo-label { font-size: 12px; }
|
||||
.upload-btn { cursor: pointer; position: relative; display: inline-block; }
|
||||
.upload-btn .file-input-hidden {
|
||||
position: absolute; left: 0; top: 0; width: 100%; height: 100%;
|
||||
opacity: 0; cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,72 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { todayStr } from '@/utils'
|
||||
import { workPlansApi } from '@/api/workPlans'
|
||||
import { customersApi } from '@/api/customers'
|
||||
|
||||
const router = useRouter()
|
||||
const submitLoading = ref(false)
|
||||
const customers = ref<any[]>([])
|
||||
|
||||
const form = ref({
|
||||
customer_id: '',
|
||||
plan_content: '',
|
||||
plan_date: todayStr(),
|
||||
status: '计划中',
|
||||
})
|
||||
|
||||
onMounted(() => { loadCustomers() })
|
||||
|
||||
async function loadCustomers(q?: string) {
|
||||
try {
|
||||
const params: any = { page_size: 100 }
|
||||
if (q) params.search = q
|
||||
const res = await customersApi.list(params)
|
||||
customers.value = res.data.items || []
|
||||
} catch (_) {}
|
||||
}
|
||||
|
||||
async function handleSubmit() {
|
||||
if (!form.value.customer_id) { ElMessage.warning('请选择客户'); return }
|
||||
submitLoading.value = true
|
||||
try {
|
||||
await workPlansApi.create(form.value)
|
||||
ElMessage.success('计划已提交')
|
||||
router.push('/m')
|
||||
} catch (e: any) {
|
||||
ElMessage.error('提交失败')
|
||||
} finally { submitLoading.value = false }
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="form-page">
|
||||
<div class="form-header">
|
||||
<el-button text @click="router.back()">← 返回</el-button>
|
||||
<h3>添加工作计划</h3>
|
||||
<span style="width:60px"></span>
|
||||
</div>
|
||||
<el-form label-position="top">
|
||||
<el-form-item label="客户单位">
|
||||
<el-select v-model="form.customer_id" filterable remote :remote-method="loadCustomers" placeholder="搜索客户" style="width:100%">
|
||||
<el-option v-for="c in customers" :key="c.id" :label="c.name" :value="c.id" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="工作计划">
|
||||
<el-input v-model="form.plan_content" type="textarea" :rows="4" placeholder="描述下周工作计划..." />
|
||||
</el-form-item>
|
||||
<el-form-item label="计划拜访时间">
|
||||
<el-date-picker v-model="form.plan_date" type="date" style="width:100%" />
|
||||
</el-form-item>
|
||||
<el-button type="primary" size="large" :loading="submitLoading" @click="handleSubmit" style="width:100%">提交</el-button>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.form-page { max-width: 500px; margin: 0 auto; }
|
||||
.form-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
|
||||
.form-header h3 { margin: 0; }
|
||||
</style>
|
||||
Reference in New Issue
Block a user