feat: 信息架构重组 + 变更追踪 + 图片预览增强

- 信息架构重组: 周报精简为拜访+纪要两个Tab，工作计划/商机/要客独立为侧边栏「工作」分组下的独立页面 - 侧边栏分组: 汇总/工作/管理三层分组，仪表盘四卡可点击跳转 - 变更追踪(edit_log): 5张表新增JSONB edit_log列，POST创建/PUT diff自动记录，编辑弹窗变更时间轴，表格🕐编辑标记 - 图片预览增强: ImagePreview统一组件，支持适应页面/缩放/拖拽平移/滚轮缩放/键盘快捷键 - 修复客户导入500错误(errors变量未初始化) - 移除工作计划/商机/要客页面冗余编辑按钮 Co-Authored-By: Claude <noreply@anthropic.com>
2026-06-24 08:28:46 +08:00
parent aa3fbca710
commit bf67e0575f
27 changed files with 1332 additions and 117 deletions
@@ -0,0 +1,185 @@
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { useAuthStore } from '@/stores/auth'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { todayStr } from '@/utils'
+import api from '@/api/index'
+import EditLogPanel from '@/components/EditLogPanel.vue'
+
+const auth = useAuthStore()
+const loading = ref(false)
+const miniBusiness = ref<any[]>([])
+const customers = ref<any[]>([])
+
+const dialogVisible = ref(false)
+const dialogMode = ref<'create' | 'edit'>('create')
+const form = ref<any>({})
+const statusPick = ref<Record<string, string>>({})
+const miniStatuses = ['跟进中', '已签约', '已流失']
+
+onMounted(async () => {
+  await Promise.all([loadItems(), loadCustomers()])
+})
+
+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 loadItems() {
+  loading.value = true
+  try {
+    const res = await api.get('/mini-business/')
+    miniBusiness.value = res.data
+  } catch (e: any) { ElMessage.error('加载失败') }
+  finally { loading.value = false }
+}
+
+function openCreate() {
+  dialogMode.value = 'create'
+  form.value = { customer_id: '', product_type: '', amount: '', follow_up_detail: '', status: '跟进中', expected_revenue_date: '' }
+  dialogVisible.value = true
+}
+
+function openEdit(item: any) {
+  dialogMode.value = 'edit'
+  form.value = { ...item }
+  dialogVisible.value = true
+}
+
+async function handleSave() {
+  try {
+    if (dialogMode.value === 'create') {
+      await api.post('/mini-business/', form.value)
+    } else {
+      await api.put(`/mini-business/${form.value.id}`, form.value)
+    }
+    ElMessage.success(dialogMode.value === 'create' ? '已创建' : '已更新')
+    dialogVisible.value = false
+    await loadItems()
+  } catch (e: any) { ElMessage.error('保存失败: ' + (e.response?.data?.detail || e.message)) }
+}
+
+async function handleDelete(id: string) {
+  try {
+    await ElMessageBox.confirm('确定删除？', '确认', { type: 'warning' })
+    await api.delete(`/mini-business/${id}`)
+    ElMessage.success('已删除')
+    await loadItems()
+  } catch (e: any) { if (e !== 'cancel') ElMessage.error('删除失败') }
+}
+
+async function quickStatusChange(row: any, newStatus: string) {
+  try {
+    await ElMessageBox.confirm(`确定将状态改为「${newStatus}」？`, '确认', { type: 'warning', confirmButtonText: '确定', cancelButtonText: '取消' })
+    await api.put(`/mini-business/${row.id}`, { status: newStatus })
+    ElMessage.success('状态已更新')
+    await loadItems()
+  } catch (e: any) {
+    if (e !== 'cancel') ElMessage.error('更新失败: ' + (e.response?.data?.detail || e.message))
+    delete statusPick.value[row.id]
+  }
+}
+</script>
+
+<template>
+  <div class="mini-biz-page" v-loading="loading">
+    <div class="page-head">
+      <div class="page-head-row">
+        <div>
+          <h2 class="page-title">商机跟单</h2>
+          <p class="page-desc">小微业务商机管道，按状态跟踪签约进展。</p>
+        </div>
+        <el-button type="primary" @click="openCreate">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-right:4px">
+            <line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line>
+          </svg>
+          新建商机
+        </el-button>
+      </div>
+      <div class="page-rule"></div>
+    </div>
+
+    <el-card>
+      <el-table :data="miniBusiness" stripe size="small" v-if="miniBusiness.length">
+        <el-table-column type="index" label="序号" width="50" />
+        <el-table-column prop="customer_name" label="客户" width="160">
+          <template #default="{ row }">
+            <el-link type="primary" :underline="false" @click="openEdit(row)">{{ row.customer_name }}</el-link>
+            <el-tooltip v-if="row.edit_log?.length > 1" placement="top">
+              <template #content>最后编辑：{{ row.edit_log[row.edit_log.length-1].editor }} · {{ row.edit_log.length-1 }}次修改</template>
+              <span class="edit-indicator" title="有过修改">🕐</span>
+            </el-tooltip>
+          </template>
+        </el-table-column>
+        <el-table-column prop="product_type" label="产品类型" width="130" />
+        <el-table-column prop="amount" label="金额" width="100" />
+        <el-table-column prop="follow_up_detail" label="跟进内容" min-width="250" show-overflow-tooltip />
+        <el-table-column label="状态" width="130">
+          <template #default="{ row }">
+            <el-select
+              v-model="statusPick[row.id]"
+              size="small"
+              style="width:100%"
+              :placeholder="row.status"
+              @change="(v: string) => quickStatusChange(row, v)"
+              @visible-change="(v: boolean) => { if (v) statusPick[row.id] = row.status }"
+            >
+              <el-option v-for="s in miniStatuses" :key="s" :label="s" :value="s" />
+            </el-select>
+          </template>
+        </el-table-column>
+        <el-table-column prop="expected_revenue_date" label="预计列收" width="110" />
+        <el-table-column label="操作" width="80" fixed="right">
+          <template #default="{ row }">
+            <el-button text size="small" type="danger" @click="handleDelete(row.id)">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <div v-else class="empty">暂无商机记录</div>
+    </el-card>
+
+    <!-- Dialog -->
+    <el-dialog v-model="dialogVisible" :title="(dialogMode === 'create' ? '新建' : '编辑') + ' 小微商机'" width="500px">
+      <el-form label-position="top">
+        <el-form-item 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>
+        <el-form-item label="产品类型"><el-input v-model="form.product_type" placeholder="如：云专线、SD-WAN" /></el-form-item>
+        <el-form-item label="金额"><el-input v-model="form.amount" placeholder="如：50000元/年" /></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">
+            <el-option label="跟进中" value="跟进中" />
+            <el-option label="已签约" value="已签约" />
+            <el-option label="已流失" value="已流失" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="预计列收时间">
+          <el-date-picker v-model="form.expected_revenue_date" type="month" placeholder="选择月份" style="width:100%" value-format="YYYY-MM" />
+        </el-form-item>
+      </el-form>
+      <EditLogPanel v-if="dialogMode === 'edit'" :edit-log="form.edit_log || []" />
+      <template #footer>
+        <el-button @click="dialogVisible = false">取消</el-button>
+        <el-button type="primary" @click="handleSave">保存</el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<style scoped>
+.edit-indicator { font-size: 12px; margin-left: 3px; opacity: 0.5; cursor: help; }
+.page-head { margin-bottom: 20px; }
+.page-head-row { display: flex; justify-content: space-between; align-items: flex-start; }
+.page-title { margin: 0; font-family: 'ZCOOL XiaoWei', STSong, serif; font-size: 22px; font-weight: 400; color: var(--ink); letter-spacing: 0.06em; }
+.page-desc { margin: 4px 0 0; font-size: 13px; color: var(--c-text-muted); font-family: 'Noto Serif SC', STSong, serif; }
+.page-rule { width: 32px; height: 3px; background: var(--gold); margin-top: 12px; }
+.empty { text-align: center; color: var(--c-text-muted); padding: 48px 0; font-family: 'Noto Serif SC', STSong, serif; }
+</style>