feat: 操作日志系统 + 日期修复 + 协同去重 + 主题持久化 + 计划自动完成
本次累积提交包含以下功能： 1. 修复：el-date-picker 缺失 value-format 导致日期保存偏移（8处） 2. 新增：协同拜访 visit_group_id 去重机制（完整副本 + 周报合并 + 亮灯去重） 3. 新增：计划自动完成（创建计划检测已有拜访 / 编辑拜访触发） 4. 新增：拜访表单选择客户后自动预填过期计划内容 5. 新增：移动端主题切换按钮 + 后端持久化 6. 新增：操作日志系统 (audit_logs)，全覆盖 8 个模块 CRUD 7. 新增：PC端「我的数据」支局长/领导视角客户经理列 Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -48,6 +48,7 @@ const menuGroups = computed<MenuGroup[]>(() => {
|
||||
})
|
||||
if (auth.isDirector) {
|
||||
groups[groups.length - 1].items.push(
|
||||
{ path: '/audit-log', label: '操作日志', icon: '<polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path>' },
|
||||
{ path: '/users', label: '用户管理', icon: '<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path>' },
|
||||
{ path: '/settings', label: '系统设置', icon: '<circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path>' },
|
||||
)
|
||||
|
||||
@@ -2,10 +2,17 @@
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import { computed } from 'vue'
|
||||
import { useAuthStore } from '@/stores/auth'
|
||||
import { useThemeStore, themeLabels } from '@/stores/theme'
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const auth = useAuthStore()
|
||||
const themeStore = useThemeStore()
|
||||
|
||||
function cycleTheme() {
|
||||
const next = themeStore.currentTheme === 'editorial' ? 'light' : 'editorial'
|
||||
themeStore.setTheme(next)
|
||||
}
|
||||
|
||||
const tabs = [
|
||||
{ path: '/m', label: '首页', icon: 'home' },
|
||||
@@ -33,6 +40,22 @@ const activeTab = computed(() => {
|
||||
<div class="header-rule"></div>
|
||||
</div>
|
||||
<div class="header-actions">
|
||||
<button class="header-pc-btn" @click="cycleTheme" :title="'切换至' + themeLabels[themeStore.currentTheme === 'editorial' ? 'light' : 'editorial']">
|
||||
<svg v-if="themeStore.currentTheme === 'editorial'" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<circle cx="12" cy="12" r="5"></circle>
|
||||
<line x1="12" y1="1" x2="12" y2="3"></line>
|
||||
<line x1="12" y1="21" x2="12" y2="23"></line>
|
||||
<line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
|
||||
<line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
|
||||
<line x1="1" y1="12" x2="3" y2="12"></line>
|
||||
<line x1="21" y1="12" x2="23" y2="12"></line>
|
||||
<line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
|
||||
<line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
|
||||
</svg>
|
||||
<svg v-else width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
<button class="header-pc-btn" @click="router.push('/')" title="PC版">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<rect x="2" y="3" width="20" height="14" rx="2" ry="2"></rect>
|
||||
|
||||
@@ -35,13 +35,22 @@ const router = createRouter({
|
||||
component: () => import('@/components/MobileLayout.vue'),
|
||||
children: [
|
||||
{ path: '', name: 'MobileHome', component: () => import('@/views/mobile/Home.vue') },
|
||||
{ path: 'work', name: 'WorkCenter', component: () => import('@/views/mobile/WorkCenter.vue') },
|
||||
{ path: 'visit/new', name: 'VisitForm', component: () => import('@/views/mobile/VisitForm.vue') },
|
||||
{ path: 'visit/:id/edit', name: 'VisitEdit', component: () => import('@/views/mobile/VisitForm.vue') },
|
||||
{ path: 'work-plan/new', name: 'WorkPlanForm', component: () => import('@/views/mobile/WorkPlanForm.vue') },
|
||||
{ path: 'work-plan/:id/edit', name: 'WorkPlanEdit', component: () => import('@/views/mobile/WorkPlanForm.vue') },
|
||||
{ path: 'mini-biz/new', name: 'MiniBusinessForm', component: () => import('@/views/mobile/MiniBusinessForm.vue') },
|
||||
{ path: 'mini-biz/:id/edit', name: 'MiniBusinessEdit', component: () => import('@/views/mobile/MiniBusinessForm.vue') },
|
||||
{ path: 'key-visit/new', name: 'KeyVisitForm', component: () => import('@/views/mobile/KeyVisitForm.vue') },
|
||||
{ path: 'key-visit/:id/edit', name: 'KeyVisitEdit', component: () => import('@/views/mobile/KeyVisitForm.vue') },
|
||||
{ path: 'note/new', name: 'DailyNoteForm', component: () => import('@/views/mobile/DailyNoteForm.vue') },
|
||||
{ path: 'note/:id/edit', name: 'DailyNoteEdit', component: () => import('@/views/mobile/DailyNoteForm.vue') },
|
||||
{ path: 'visits', name: 'VisitsList', component: () => import('@/views/mobile/VisitsList.vue') },
|
||||
{ path: 'notes', name: 'NotesList', component: () => import('@/views/mobile/NotesList.vue') },
|
||||
{ path: 'plans', name: 'PlansList', component: () => import('@/views/mobile/PlansList.vue') },
|
||||
{ path: 'mini-biz', name: 'MiniBizList', component: () => import('@/views/mobile/MiniBizList.vue') },
|
||||
{ path: 'key-visits', name: 'KeyVisitsList', component: () => import('@/views/mobile/KeyVisitsList.vue') },
|
||||
{ path: 'leaves', name: 'LeavesList', component: () => import('@/views/mobile/LeavesList.vue') },
|
||||
{ path: 'leave/new', name: 'LeaveForm', component: () => import('@/views/mobile/LeaveForm.vue') },
|
||||
{ path: 'leave/:id/edit', name: 'LeaveEdit', component: () => import('@/views/mobile/LeaveForm.vue') },
|
||||
@@ -62,6 +71,7 @@ const router = createRouter({
|
||||
{ path: 'workspace', name: 'ManagerWorkspace', component: () => import('@/views/desktop/ManagerWorkspace.vue') },
|
||||
{ path: 'customers', name: 'CustomerManage', component: () => import('@/views/desktop/CustomerManage.vue') },
|
||||
{ path: 'users', name: 'UserManage', component: () => import('@/views/desktop/UserManage.vue') },
|
||||
{ path: 'audit-log', name: 'AuditLog', component: () => import('@/views/desktop/AuditLog.vue') },
|
||||
{ path: 'settings', name: 'Settings', component: () => import('@/views/desktop/Settings.vue') },
|
||||
],
|
||||
},
|
||||
|
||||
@@ -7,21 +7,24 @@ export const useAuthStore = defineStore('auth', () => {
|
||||
const userId = ref(localStorage.getItem('userId') || '')
|
||||
const name = ref(localStorage.getItem('userName') || '')
|
||||
const role = ref(localStorage.getItem('userRole') || '')
|
||||
const theme = ref(localStorage.getItem('theme') || 'editorial')
|
||||
|
||||
const isLoggedIn = computed(() => !!token.value)
|
||||
const isManager = computed(() => role.value === 'manager')
|
||||
const isDirector = computed(() => role.value === 'director')
|
||||
const isLeader = computed(() => role.value === 'leader')
|
||||
|
||||
function saveLogin(data: { access_token: string; user_id: string; name: string; role: string }) {
|
||||
function saveLogin(data: { access_token: string; user_id: string; name: string; role: string; theme?: string }) {
|
||||
token.value = data.access_token
|
||||
userId.value = data.user_id
|
||||
name.value = data.name
|
||||
role.value = data.role
|
||||
if (data.theme) theme.value = data.theme
|
||||
localStorage.setItem('token', data.access_token)
|
||||
localStorage.setItem('userId', data.user_id)
|
||||
localStorage.setItem('userName', data.name)
|
||||
localStorage.setItem('userRole', data.role)
|
||||
if (data.theme) localStorage.setItem('theme', data.theme)
|
||||
}
|
||||
|
||||
function logout() {
|
||||
@@ -52,7 +55,7 @@ export const useAuthStore = defineStore('auth', () => {
|
||||
}
|
||||
|
||||
return {
|
||||
token, userId, name, role,
|
||||
token, userId, name, role, theme,
|
||||
isLoggedIn, isManager, isDirector, isLeader,
|
||||
saveLogin, logout, casdoorLogin, wecomLogin, bindWecom,
|
||||
}
|
||||
|
||||
@@ -17,10 +17,15 @@ export const useThemeStore = defineStore('theme', () => {
|
||||
document.documentElement.setAttribute('data-theme', theme)
|
||||
}
|
||||
|
||||
function setTheme(theme: Theme) {
|
||||
async function setTheme(theme: Theme) {
|
||||
currentTheme.value = theme
|
||||
localStorage.setItem('theme', theme)
|
||||
applyTheme(theme)
|
||||
// Sync to backend (fire-and-forget)
|
||||
try {
|
||||
const { default: api } = await import('@/api/index')
|
||||
await api.put('/users/me/theme', { theme })
|
||||
} catch (_) { /* non-critical */ }
|
||||
}
|
||||
|
||||
// Apply on init
|
||||
|
||||
@@ -9,6 +9,17 @@ const route = useRoute()
|
||||
const auth = useAuthStore()
|
||||
const loading = ref(false)
|
||||
|
||||
function isMobileDevice(): boolean {
|
||||
const ua = navigator.userAgent || ''
|
||||
return /Android|iPhone|iPad|iPod|webOS/i.test(ua) || window.innerWidth < 768
|
||||
}
|
||||
|
||||
function getHomePath(): string {
|
||||
// 客户经理永远走移动端；支局长/分管领导根据设备自动适配
|
||||
if (auth.isManager) return '/m'
|
||||
return isMobileDevice() ? '/m' : '/'
|
||||
}
|
||||
|
||||
function goCasdoorLogin() {
|
||||
const returnUrl = (route.query.redirect as string) || ''
|
||||
if (returnUrl) {
|
||||
@@ -32,7 +43,7 @@ onMounted(async () => {
|
||||
const returnUrl = sessionStorage.getItem('login_return_url')
|
||||
if (returnUrl) { sessionStorage.removeItem('login_return_url'); router.push(returnUrl); return }
|
||||
ElMessage.success('登录成功')
|
||||
router.push(auth.isManager ? '/m' : '/')
|
||||
router.push(getHomePath())
|
||||
} catch (e: any) {
|
||||
ElMessage.error('登录失败: ' + (e.response?.data?.detail || e.message))
|
||||
} finally {
|
||||
@@ -60,7 +71,7 @@ onMounted(async () => {
|
||||
const returnUrl = sessionStorage.getItem('login_return_url')
|
||||
if (returnUrl) { sessionStorage.removeItem('login_return_url'); router.push(returnUrl); return }
|
||||
ElMessage.success('登录成功')
|
||||
router.push(auth.isManager ? '/m' : '/')
|
||||
router.push(getHomePath())
|
||||
} catch (e: any) {
|
||||
ElMessage.error('企微登录失败')
|
||||
} finally {
|
||||
|
||||
@@ -0,0 +1,161 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import api from '@/api/index'
|
||||
|
||||
const loading = ref(false)
|
||||
const items = ref<any[]>([])
|
||||
const total = ref(0)
|
||||
const page = ref(1)
|
||||
const pageSize = ref(50)
|
||||
|
||||
const filterEntityType = ref('')
|
||||
const filterAction = ref('')
|
||||
const filterOperatorId = ref('')
|
||||
const filterDateFrom = ref('')
|
||||
const filterDateTo = ref('')
|
||||
const managers = ref<any[]>([])
|
||||
|
||||
const entityTypes = [
|
||||
{ value: '', label: '全部类型' },
|
||||
{ value: 'customer', label: '客户' },
|
||||
{ value: 'visit', label: '拜访记录' },
|
||||
{ value: 'daily_note', label: '今日纪要' },
|
||||
{ value: 'work_plan', label: '工作计划' },
|
||||
{ value: 'mini_business', label: '小微商机' },
|
||||
{ value: 'key_visit', label: '要客拜访' },
|
||||
{ value: 'user', label: '用户' },
|
||||
{ value: 'leave', label: '请假' },
|
||||
]
|
||||
|
||||
const actions = [
|
||||
{ value: '', label: '全部操作' },
|
||||
{ value: 'create', label: '创建' },
|
||||
{ value: 'update', label: '更新' },
|
||||
{ value: 'delete', label: '删除' },
|
||||
]
|
||||
|
||||
const actionColors: Record<string, string> = {
|
||||
create: '#4A6741',
|
||||
update: '#5B7FA5',
|
||||
delete: '#B8472E',
|
||||
}
|
||||
|
||||
const actionLabels: Record<string, string> = {
|
||||
create: '创建',
|
||||
update: '更新',
|
||||
delete: '删除',
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
try {
|
||||
const res = await api.get('/users/', { params: { role: 'manager' } })
|
||||
managers.value = res.data || []
|
||||
} catch (_) {}
|
||||
await loadLogs()
|
||||
})
|
||||
|
||||
async function loadLogs() {
|
||||
loading.value = true
|
||||
try {
|
||||
const params: any = { page: page.value, page_size: pageSize.value }
|
||||
if (filterEntityType.value) params.entity_type = filterEntityType.value
|
||||
if (filterAction.value) params.action = filterAction.value
|
||||
if (filterOperatorId.value) params.operator_id = filterOperatorId.value
|
||||
if (filterDateFrom.value) params.date_from = filterDateFrom.value
|
||||
if (filterDateTo.value) params.date_to = filterDateTo.value
|
||||
const res = await api.get('/audit-logs/', { params })
|
||||
items.value = res.data.items || []
|
||||
total.value = res.data.total || 0
|
||||
} catch (e: any) {
|
||||
ElMessage.error('加载失败: ' + (e.response?.data?.detail || e.message))
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function onSearch() { page.value = 1; loadLogs() }
|
||||
function onPageChange() { loadLogs() }
|
||||
|
||||
function formatTime(s: string): string {
|
||||
if (!s) return ''
|
||||
const d = new Date(s)
|
||||
const pad = (n: number) => String(n).padStart(2, '0')
|
||||
return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="audit-log-page" v-loading="loading">
|
||||
<div class="page-head">
|
||||
<h2 class="page-title">操作日志</h2>
|
||||
<span class="page-subtitle">AUDIT LOG</span>
|
||||
<div class="page-rule"></div>
|
||||
</div>
|
||||
|
||||
<!-- Filters -->
|
||||
<el-card style="margin-bottom:16px">
|
||||
<div class="filter-row">
|
||||
<el-select v-model="filterEntityType" placeholder="实体类型" clearable style="width:120px">
|
||||
<el-option v-for="e in entityTypes" :key="e.value" :label="e.label" :value="e.value" />
|
||||
</el-select>
|
||||
<el-select v-model="filterAction" placeholder="操作" clearable style="width:100px">
|
||||
<el-option v-for="a in actions" :key="a.value" :label="a.label" :value="a.value" />
|
||||
</el-select>
|
||||
<el-select v-model="filterOperatorId" placeholder="操作人" clearable filterable style="width:130px">
|
||||
<el-option v-for="m in managers" :key="m.id" :label="m.name" :value="m.id" />
|
||||
</el-select>
|
||||
<el-date-picker v-model="filterDateFrom" type="date" placeholder="开始日期" value-format="YYYY-MM-DD" style="width:140px" />
|
||||
<el-date-picker v-model="filterDateTo" type="date" placeholder="结束日期" value-format="YYYY-MM-DD" style="width:140px" />
|
||||
<el-button type="primary" @click="onSearch">查询</el-button>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<!-- Table -->
|
||||
<el-card>
|
||||
<el-table :data="items" stripe size="small" v-column-resize>
|
||||
<el-table-column label="时间" width="165">
|
||||
<template #default="{ row }">
|
||||
<span class="log-time">{{ formatTime(row.created_at) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作人" width="90" prop="operator_name" />
|
||||
<el-table-column label="操作" width="65">
|
||||
<template #default="{ row }">
|
||||
<el-tag :color="actionColors[row.action]" effect="dark" size="small" disable-transitions style="border:none;color:#fff">
|
||||
{{ actionLabels[row.action] }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="类型" width="85">
|
||||
<template #default="{ row }">
|
||||
<span class="entity-type">{{ row.entity_type_label }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="对象" min-width="250">
|
||||
<template #default="{ row }">
|
||||
<span class="log-entity">{{ row.entity_name }}</span>
|
||||
<span v-if="row.summary" class="log-summary"> — {{ row.summary }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div v-if="total > pageSize" style="display:flex;justify-content:center;margin-top:16px">
|
||||
<el-pagination v-model:current-page="page" :page-size="pageSize" :total="total" layout="prev, pager, next" @current-change="onPageChange" />
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.page-head { margin-bottom: 20px; display: flex; flex-direction: column; gap: 2px; }
|
||||
.page-title { margin: 0; font-family: var(--font-heading); font-size: 22px; font-weight: 400; color: var(--ink); letter-spacing: 0.06em; }
|
||||
.page-subtitle { font-family: var(--font-mono); font-size: 9px; color: var(--gold); letter-spacing: 0.2em; }
|
||||
.page-rule { width: 32px; height: 3px; background: var(--gold); margin-top: 12px; }
|
||||
|
||||
.filter-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
|
||||
|
||||
.log-time { font-family: var(--font-mono); font-size: 12px; color: var(--warm-gray); }
|
||||
.entity-type { font-family: var(--font-body); font-size: 12px; color: var(--warm-gray); }
|
||||
.log-entity { font-family: var(--font-heading); font-size: 13px; color: var(--ink); letter-spacing: 0.03em; }
|
||||
.log-summary { font-family: var(--font-body); font-size: 12px; color: var(--warm-gray); }
|
||||
</style>
|
||||
@@ -2,11 +2,15 @@
|
||||
import { ref, onMounted, computed } from 'vue'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { todayStr } from '@/utils'
|
||||
import { useAuthStore } from '@/stores/auth'
|
||||
import { getMgrStyle } from '@/utils/managerColor'
|
||||
import api from '@/api/index'
|
||||
import { compressImage } from '@/utils/image'
|
||||
import ImagePreview from '@/components/ImagePreview.vue'
|
||||
import EditLogPanel from '@/components/EditLogPanel.vue'
|
||||
|
||||
const auth = useAuthStore()
|
||||
|
||||
const activeTab = ref('visits')
|
||||
const loading = ref(false)
|
||||
|
||||
@@ -238,6 +242,17 @@ function onDialogTimeChange(val: [string, string] | null) {
|
||||
form.value.time_range = val ? val.join('-') : ''
|
||||
}
|
||||
|
||||
async function onDialogCustomerChange(customerId: string) {
|
||||
// Only pre-fill for new visit creation (not edit)
|
||||
if (dialogMode.value !== 'create' || dialogType.value !== 'visit' || !customerId) return
|
||||
try {
|
||||
const planRes = await api.get(`/customers/${customerId}/overdue-plans`)
|
||||
if (planRes.data?.plan?.plan_content) {
|
||||
form.value.communication_content = planRes.data.plan.plan_content
|
||||
}
|
||||
} catch (_) {}
|
||||
}
|
||||
|
||||
// Quick status change
|
||||
async function quickStatusChange(type: string, row: any, newStatus: string) {
|
||||
try {
|
||||
@@ -295,6 +310,11 @@ const notesByDate = computed(() => {
|
||||
<el-table-column prop="customer_name" label="客户" width="130">
|
||||
<template #default="{ row }"><el-link type="primary" :underline="false" @click="openEdit('visit', row)">{{ row.customer_name }}</el-link></template>
|
||||
</el-table-column>
|
||||
<el-table-column v-if="auth.isDirector || auth.isLeader" label="客户经理" width="90">
|
||||
<template #default="{ row }">
|
||||
<el-tag :style="getMgrStyle(row.manager_name || '', false)" effect="dark" size="small" disable-transitions>{{ row.manager_name || '-' }}</el-tag>
|
||||
</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 label="照片" width="60">
|
||||
@@ -326,6 +346,11 @@ const notesByDate = computed(() => {
|
||||
</h4>
|
||||
<el-table :data="items" stripe size="small" v-column-resize>
|
||||
<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 v-if="auth.isDirector || auth.isLeader" label="客户经理" width="90">
|
||||
<template #default="{ row }">
|
||||
<el-tag :style="getMgrStyle(row.manager_name || '', false)" effect="dark" size="small" disable-transitions>{{ row.manager_name || '-' }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="content" label="工作内容" min-width="250" show-overflow-tooltip>
|
||||
<template #default="{ row }"><el-link type="primary" :underline="false" @click="openEdit('note', row)">{{ row.content }}</el-link></template>
|
||||
</el-table-column>
|
||||
@@ -447,13 +472,13 @@ const notesByDate = computed(() => {
|
||||
<el-dialog v-model="dialogVisible" :title="(dialogMode === 'create' ? '新建' : '编辑') + ' ' + typeLabel(dialogType)" width="520px">
|
||||
<el-form label-position="top" v-if="form">
|
||||
<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-select v-model="form.customer_id" filterable remote :remote-method="(q: string) => loadCustomers(q)" placeholder="搜索选择客户" style="width:100%" @change="onDialogCustomerChange">
|
||||
<el-option v-for="c in customers" :key="c.id" :label="c.name" :value="c.id" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<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>
|
||||
<el-form-item v-if="dialogType === 'visit'" label="日期"><el-date-picker v-model="form.visit_date" type="date" value-format="YYYY-MM-DD" style="width:100%" /></el-form-item>
|
||||
<el-form-item v-if="dialogType === 'note'" label="日期"><el-date-picker v-model="form.note_date" type="date" value-format="YYYY-MM-DD" style="width:100%" /></el-form-item>
|
||||
<el-form-item v-if="dialogType === 'plan'" label="计划拜访时间"><el-date-picker v-model="form.plan_date" type="date" value-format="YYYY-MM-DD" style="width:100%" /></el-form-item>
|
||||
<template v-if="dialogType === 'visit'">
|
||||
<el-form-item label="拜访方式">
|
||||
<div class="method-grid">
|
||||
|
||||
@@ -323,35 +323,50 @@ const notesByDate = computed(() => {
|
||||
</svg>
|
||||
{{ date }}
|
||||
</h4>
|
||||
<el-table :data="items" stripe style="width:100%" v-column-resize>
|
||||
<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 label="相关人员" width="120">
|
||||
<template #default="{ row }">
|
||||
<div style="display:flex;flex-wrap:wrap;gap:2px">
|
||||
<span>{{ row.manager_name }}</span>
|
||||
<span v-for="n in (row.companion_names_resolved || [])" :key="n" style="color:var(--warm-gray);font-size:12px">, {{ n }}</span>
|
||||
<!-- Visit cards: merged group visits get participant sections -->
|
||||
<div v-for="item in items" :key="item.id" class="visit-card">
|
||||
<div class="visit-card-main">
|
||||
<div class="visit-card-left">
|
||||
<span class="visit-card-customer">{{ item.customer_name }}</span>
|
||||
<span class="visit-card-method">{{ item.visit_method }}</span>
|
||||
<span v-if="item.time_range" class="visit-card-time">{{ item.time_range }}</span>
|
||||
</div>
|
||||
<div class="visit-card-right">
|
||||
<span class="visit-card-mgr">{{ item.manager_name }}</span>
|
||||
<span v-for="n in (item.companion_names_resolved || [])" :key="n" class="visit-card-companion">, {{ n }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="visit-card-content">
|
||||
<div class="visit-card-section">
|
||||
<div class="visit-card-label">沟通内容</div>
|
||||
<div class="visit-card-text">{{ item.communication_content || '-' }}</div>
|
||||
</div>
|
||||
<div v-if="item.customer_demand" class="visit-card-section">
|
||||
<div class="visit-card-label">客户需求</div>
|
||||
<div class="visit-card-text">{{ item.customer_demand }}</div>
|
||||
</div>
|
||||
<!-- Companion participants -->
|
||||
<div v-if="item.participants && item.participants.length > 1" class="companion-section">
|
||||
<div v-for="p in item.participants.filter((p: any) => p.role === 'companion')" :key="p.manager_id" class="companion-row">
|
||||
<div class="companion-header">
|
||||
<span class="companion-badge">协同</span>
|
||||
<span class="companion-name">{{ p.manager_name }}</span>
|
||||
</div>
|
||||
<div class="companion-body">
|
||||
<div class="visit-card-text">{{ p.communication_content || '-' }}</div>
|
||||
<div v-if="p.customer_demand && p.customer_demand !== item.customer_demand" class="visit-card-text" style="margin-top:4px;color:var(--warm-gray)">需求补充：{{ p.customer_demand }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<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 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>
|
||||
<!-- Photos -->
|
||||
<div v-if="item.photos?.length" class="visit-card-photos">
|
||||
<img v-for="key in item.photos.slice(0,3)" :key="key"
|
||||
:src="photoUrls[key] || ''" class="mini-thumb"
|
||||
@click="viewPhoto(photoUrls[key])" />
|
||||
<span v-if="item.photos.length > 3" class="photo-more">+{{ item.photos.length - 3 }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
|
||||
@@ -414,6 +429,74 @@ const notesByDate = computed(() => {
|
||||
font-family: var(--font-heading);
|
||||
font-size: 14px; color: var(--ink); letter-spacing: 0.04em;
|
||||
}
|
||||
/* ═══ Visit Cards ═══ */
|
||||
.visit-card {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--warm-border);
|
||||
margin-bottom: 10px;
|
||||
transition: border-color 0.2s;
|
||||
}
|
||||
.visit-card:hover { border-color: var(--gold); }
|
||||
.visit-card-main {
|
||||
display: flex; justify-content: space-between; align-items: center;
|
||||
padding: 12px 16px;
|
||||
border-bottom: 1px solid var(--warm-border);
|
||||
}
|
||||
.visit-card-left { display: flex; align-items: center; gap: 10px; }
|
||||
.visit-card-customer {
|
||||
font-family: var(--font-heading); font-size: 15px; color: var(--ink);
|
||||
letter-spacing: 0.04em; font-weight: 500;
|
||||
}
|
||||
.visit-card-method {
|
||||
font-family: var(--font-mono); font-size: 11px;
|
||||
background: var(--paper); padding: 2px 8px; color: var(--warm-gray);
|
||||
}
|
||||
.visit-card-time {
|
||||
font-family: var(--font-mono); font-size: 12px; color: var(--warm-gray);
|
||||
}
|
||||
.visit-card-right { display: flex; align-items: center; gap: 2px; }
|
||||
.visit-card-mgr {
|
||||
font-family: var(--font-body); font-size: 13px; color: var(--ink);
|
||||
}
|
||||
.visit-card-companion {
|
||||
font-size: 12px; color: var(--warm-gray);
|
||||
}
|
||||
.visit-card-content { padding: 14px 16px; }
|
||||
.visit-card-section { margin-bottom: 10px; }
|
||||
.visit-card-label {
|
||||
font-family: var(--font-mono); font-size: 10px; color: var(--gold);
|
||||
letter-spacing: 0.12em; margin-bottom: 4px; text-transform: uppercase;
|
||||
}
|
||||
.visit-card-text {
|
||||
font-family: var(--font-body); font-size: 14px; color: var(--c-text);
|
||||
line-height: 1.7; white-space: pre-wrap;
|
||||
}
|
||||
/* ═══ Companion Section ═══ */
|
||||
.companion-section {
|
||||
margin-top: 12px;
|
||||
border-top: 1px dashed var(--warm-border);
|
||||
padding-top: 10px;
|
||||
}
|
||||
.companion-row { margin-bottom: 8px; }
|
||||
.companion-row:last-child { margin-bottom: 0; }
|
||||
.companion-header {
|
||||
display: flex; align-items: center; gap: 6px; margin-bottom: 4px;
|
||||
}
|
||||
.companion-badge {
|
||||
font-family: var(--font-mono); font-size: 9px;
|
||||
background: var(--gold); color: #fff; padding: 1px 6px;
|
||||
letter-spacing: 0.1em;
|
||||
}
|
||||
.companion-name {
|
||||
font-family: var(--font-body); font-size: 13px; color: var(--ink);
|
||||
}
|
||||
.companion-body {
|
||||
padding-left: 28px;
|
||||
border-left: 2px solid var(--gold);
|
||||
margin-left: 6px;
|
||||
}
|
||||
.visit-card-photos { display: flex; gap: 4px; margin-top: 8px; align-items: center; }
|
||||
.photo-more { font-family: var(--font-mono); font-size: 11px; color: var(--warm-gray); }
|
||||
.photo-cell { display: flex; gap: 4px; }
|
||||
.mini-thumb { width: 36px; height: 36px; object-fit: cover; cursor: pointer; }
|
||||
.edit-indicator { font-size: 12px; margin-left: 3px; opacity: 0.5; cursor: help; }
|
||||
|
||||
@@ -241,7 +241,7 @@ async function quickStatusChange(row: any, newStatus: string) {
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="计划拜访时间">
|
||||
<el-date-picker v-model="form.plan_date" type="date" style="width:100%" />
|
||||
<el-date-picker v-model="form.plan_date" type="date" value-format="YYYY-MM-DD" style="width:100%" />
|
||||
</el-form-item>
|
||||
<el-form-item label="工作计划">
|
||||
<el-input v-model="form.plan_content" type="textarea" :rows="4" placeholder="请输入计划内容" />
|
||||
|
||||
@@ -111,7 +111,7 @@ async function handleDelete() {
|
||||
<template #label>
|
||||
<span class="form-label">日期 <span class="required-star">*</span></span>
|
||||
</template>
|
||||
<el-date-picker v-model="form.note_date" type="date" style="width:100%" />
|
||||
<el-date-picker v-model="form.note_date" type="date" value-format="YYYY-MM-DD" style="width:100%" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item v-if="auth.isDirector || auth.isLeader">
|
||||
|
||||
@@ -189,7 +189,7 @@ async function handleDelete() {
|
||||
|
||||
<el-form-item>
|
||||
<template #label><span class="form-label">计划拜访时间</span></template>
|
||||
<el-date-picker v-model="form.planned_date" type="date" placeholder="选择日期" style="width:100%" />
|
||||
<el-date-picker v-model="form.planned_date" type="date" value-format="YYYY-MM-DD" placeholder="选择日期" style="width:100%" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
|
||||
@@ -124,12 +124,12 @@ async function handleDelete() {
|
||||
|
||||
<el-form-item>
|
||||
<template #label><span class="form-label">开始日期</span></template>
|
||||
<el-date-picker v-model="form.start_date" type="date" placeholder="选择开始日期" style="width:100%" />
|
||||
<el-date-picker v-model="form.start_date" type="date" value-format="YYYY-MM-DD" placeholder="选择开始日期" style="width:100%" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<template #label><span class="form-label">结束日期</span></template>
|
||||
<el-date-picker v-model="form.end_date" type="date" placeholder="选择结束日期" style="width:100%" />
|
||||
<el-date-picker v-model="form.end_date" type="date" value-format="YYYY-MM-DD" placeholder="选择结束日期" style="width:100%" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
|
||||
@@ -42,6 +42,8 @@ const previewDialogVisible = ref(false)
|
||||
const previewImageUrl = ref('')
|
||||
const uploading = ref(false)
|
||||
const customerSearch = ref('')
|
||||
const isCompanionRecord = ref(false)
|
||||
const companionOf = ref('')
|
||||
|
||||
onMounted(async () => {
|
||||
await loadCustomers()
|
||||
@@ -76,6 +78,16 @@ onMounted(async () => {
|
||||
const parts = v.time_range.split('-')
|
||||
timeRangeValue.value = [parts[0], parts[1]]
|
||||
}
|
||||
// Check if this is a companion record
|
||||
if (v.visit_group_id) {
|
||||
isCompanionRecord.value = true
|
||||
// The companions field on a companion record contains the primary creator
|
||||
const creatorId = (v.companions || [])[0]
|
||||
if (creatorId) {
|
||||
const creator = managers.value.find((m: any) => m.id === String(creatorId))
|
||||
companionOf.value = creator?.name || ''
|
||||
}
|
||||
}
|
||||
for (const key of (v.photos || [])) {
|
||||
try {
|
||||
const urlRes = await uploadApi.getDownloadUrl(key)
|
||||
@@ -117,6 +129,17 @@ async function handleQuickCreate() {
|
||||
}
|
||||
}
|
||||
|
||||
async function onCustomerChange(customerId: string) {
|
||||
if (!customerId) return
|
||||
try {
|
||||
const res = await api.get(`/customers/${customerId}/overdue-plans`)
|
||||
if (res.data?.plan?.plan_content) {
|
||||
form.value.communication_content = res.data.plan.plan_content
|
||||
form.value.customer_demand = ''
|
||||
}
|
||||
} catch (_) {}
|
||||
}
|
||||
|
||||
async function handlePhotoUpload(event: Event) {
|
||||
const target = event.target as HTMLInputElement
|
||||
if (!target.files?.length) return
|
||||
@@ -130,8 +153,7 @@ async function handlePhotoUpload(event: Event) {
|
||||
try {
|
||||
// Compress before upload to reduce storage & transfer
|
||||
const compressed = await compressImage(file, { maxPixels: 1920, quality: 0.8 })
|
||||
const res = await uploadApi.getPresignedUrl(compressed.name, compressed.type || 'image/jpeg')
|
||||
await uploadApi.uploadFile(res.data.upload_url, compressed)
|
||||
const res = await uploadApi.uploadImage(compressed)
|
||||
uploadedPhotos.value.push(res.data.object_key)
|
||||
form.value.photos = [...uploadedPhotos.value]
|
||||
} catch (e: any) {
|
||||
@@ -223,6 +245,16 @@ async function handleDelete() {
|
||||
<div class="form-rule"></div>
|
||||
</header>
|
||||
|
||||
<!-- Companion record notification -->
|
||||
<div v-if="isCompanionRecord" class="companion-notice">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="flex-shrink:0;color:var(--gold)">
|
||||
<circle cx="12" cy="12" r="10"></circle>
|
||||
<line x1="12" y1="16" x2="12" y2="12"></line>
|
||||
<line x1="12" y1="8" x2="12.01" y2="8"></line>
|
||||
</svg>
|
||||
<span>此记录为协同 <strong>{{ companionOf }}</strong> 拜访的副本。你可以补充或修改内容，不会影响主记录。</span>
|
||||
</div>
|
||||
|
||||
<el-form label-position="top" class="editorial-form">
|
||||
<el-form-item>
|
||||
<template #label>
|
||||
@@ -235,6 +267,7 @@ async function handleDelete() {
|
||||
:remote-method="handleCustomerSearch"
|
||||
placeholder="搜索/选择客户"
|
||||
style="width:100%"
|
||||
@change="onCustomerChange"
|
||||
>
|
||||
<el-option v-for="c in customers" :key="c.id" :label="c.name" :value="c.id" />
|
||||
<template #empty>
|
||||
@@ -263,7 +296,7 @@ async function handleDelete() {
|
||||
<template #label>
|
||||
<span class="form-label">拜访日期</span>
|
||||
</template>
|
||||
<el-date-picker v-model="form.visit_date" type="date" style="width:100%" />
|
||||
<el-date-picker v-model="form.visit_date" type="date" value-format="YYYY-MM-DD" style="width:100%" />
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
@@ -660,4 +693,16 @@ async function handleDelete() {
|
||||
.method--微信.method-chip--active { background: #22c55e; border-color: #22c55e; color: #fff; }
|
||||
.method--出差.method-chip--active { background: #C4934A; border-color: #C4934A; color: #fff; }
|
||||
.required-star { color: var(--vermilion); font-weight: 700; }
|
||||
|
||||
/* ═══ Companion Notice ═══ */
|
||||
.companion-notice {
|
||||
display: flex; align-items: flex-start; gap: 10px;
|
||||
padding: 14px 16px; margin-bottom: 20px;
|
||||
background: rgba(196,147,74,0.06);
|
||||
border-left: 3px solid var(--gold);
|
||||
font-family: var(--font-body);
|
||||
font-size: 13px; color: var(--ink);
|
||||
line-height: 1.6; letter-spacing: 0.03em;
|
||||
}
|
||||
.companion-notice strong { color: var(--gold-dark); }
|
||||
</style>
|
||||
|
||||
@@ -147,7 +147,7 @@ async function handleDelete() {
|
||||
|
||||
<el-form-item>
|
||||
<template #label><span class="form-label">计划拜访时间 <span class="required-star">*</span></span></template>
|
||||
<el-date-picker v-model="form.plan_date" type="date" style="width:100%" />
|
||||
<el-date-picker v-model="form.plan_date" type="date" value-format="YYYY-MM-DD" style="width:100%" />
|
||||
</el-form-item>
|
||||
|
||||
<div class="form-actions">
|
||||
|
||||
Reference in New Issue
Block a user