企迹(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>
2026-06-23 01:35:46 +08:00
parent 2a8225c31f
commit a1886074dd
97 changed files with 8830 additions and 0 deletions
@@ -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>