348 lines
12 KiB
Vue
348 lines
12 KiB
Vue
<template>
|
||
<div class="qywx-customer-page p-4">
|
||
<el-card shadow="never" class="mb-4">
|
||
<template #header>
|
||
<div class="flex items-center justify-between">
|
||
<span class="text-lg font-semibold">企业微信客户管理</span>
|
||
<div class="flex gap-2">
|
||
<el-button type="primary" :loading="syncing" @click="syncCustomers">
|
||
<template #icon><Refresh /></template>
|
||
立即同步
|
||
</el-button>
|
||
<el-button @click="showSyncSettings = true">
|
||
<template #icon><Setting /></template>
|
||
同步设置
|
||
</el-button>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<el-alert
|
||
title="功能说明"
|
||
type="info"
|
||
:closable="false"
|
||
class="mb-4"
|
||
>
|
||
<div class="text-sm">
|
||
<p>自动从企业微信同步外部联系人（客户）信息，包括客户基本信息、跟进人等。</p>
|
||
<p class="mt-1">同步后的数据可用于患者信息匹配和自动关联。</p>
|
||
</div>
|
||
</el-alert>
|
||
|
||
<div class="grid grid-cols-4 gap-4 mb-4">
|
||
<el-card shadow="hover">
|
||
<div class="text-gray-500 text-sm mb-1">总客户数</div>
|
||
<div class="text-2xl font-bold text-primary">{{ stats.total }}</div>
|
||
</el-card>
|
||
<el-card shadow="hover">
|
||
<div class="text-gray-500 text-sm mb-1">今日新增</div>
|
||
<div class="text-2xl font-bold text-success">{{ stats.today }}</div>
|
||
</el-card>
|
||
<el-card shadow="hover">
|
||
<div class="text-gray-500 text-sm mb-1">最后同步</div>
|
||
<div class="text-sm font-medium">{{ stats.lastSync || '未同步' }}</div>
|
||
</el-card>
|
||
<el-card shadow="hover">
|
||
<div class="text-gray-500 text-sm mb-1">同步状态</div>
|
||
<el-tag :type="stats.syncStatus === 'success' ? 'success' : 'info'" size="small">
|
||
{{ stats.syncStatusText }}
|
||
</el-tag>
|
||
</el-card>
|
||
</div>
|
||
</el-card>
|
||
|
||
<el-card shadow="never">
|
||
<el-form :model="queryParams" inline class="mb-4">
|
||
<el-form-item label="客户名称">
|
||
<el-input
|
||
v-model="queryParams.name"
|
||
placeholder="搜索客户名称"
|
||
clearable
|
||
@keyup.enter="resetPage"
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item label="跟进人">
|
||
<el-input
|
||
v-model="queryParams.follow_user"
|
||
placeholder="跟进人姓名"
|
||
clearable
|
||
@keyup.enter="resetPage"
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<el-button type="primary" @click="resetPage">查询</el-button>
|
||
<el-button @click="handleReset">重置</el-button>
|
||
</el-form-item>
|
||
</el-form>
|
||
|
||
<el-table v-loading="pager.loading" :data="pager.lists" stripe>
|
||
<el-table-column label="客户信息" min-width="200">
|
||
<template #default="{ row }">
|
||
<div class="flex items-center gap-2">
|
||
<el-avatar :size="40" :src="row.avatar" />
|
||
<div>
|
||
<div class="font-medium">{{ row.name }}</div>
|
||
<div class="text-xs text-gray-400">{{ row.external_userid }}</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="类型" width="80">
|
||
<template #default="{ row }">
|
||
<el-tag size="small">{{ row.type === 1 ? '微信' : '企微' }}</el-tag>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="性别" width="60">
|
||
<template #default="{ row }">
|
||
{{ row.gender === 1 ? '男' : row.gender === 2 ? '女' : '未知' }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="跟进人" min-width="150">
|
||
<template #default="{ row }">
|
||
<div v-if="row.follow_users && row.follow_users.length">
|
||
<el-tag
|
||
v-for="(user, idx) in row.follow_users"
|
||
:key="idx"
|
||
size="small"
|
||
class="mr-1 mb-1"
|
||
>
|
||
{{ user.name }}
|
||
</el-tag>
|
||
</div>
|
||
<span v-else class="text-gray-400">—</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="添加时间" width="160">
|
||
<template #default="{ row }">
|
||
{{ formatTime(row.create_time) }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="更新时间" width="160">
|
||
<template #default="{ row }">
|
||
{{ formatTime(row.update_time) }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="操作" width="120" fixed="right">
|
||
<template #default="{ row }">
|
||
<el-button type="primary" link @click="viewDetail(row)">查看详情</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
|
||
<div class="flex justify-end mt-4">
|
||
<pagination v-model="pager" @change="getLists" />
|
||
</div>
|
||
</el-card>
|
||
|
||
<!-- 同步设置对话框 -->
|
||
<el-dialog
|
||
v-model="showSyncSettings"
|
||
title="同步设置"
|
||
width="500px"
|
||
>
|
||
<el-form :model="syncSettings" label-width="120px">
|
||
<el-form-item label="自动同步">
|
||
<el-switch v-model="syncSettings.auto_sync" />
|
||
<div class="text-xs text-gray-400 mt-1">
|
||
开启后将定时自动同步企业微信客户数据
|
||
</div>
|
||
</el-form-item>
|
||
<el-form-item label="同步间隔">
|
||
<el-select v-model="syncSettings.interval" :disabled="!syncSettings.auto_sync">
|
||
<el-option label="每小时" :value="3600" />
|
||
<el-option label="每2小时" :value="7200" />
|
||
<el-option label="每4小时" :value="14400" />
|
||
<el-option label="每6小时" :value="21600" />
|
||
<el-option label="每12小时" :value="43200" />
|
||
<el-option label="每天" :value="86400" />
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-form>
|
||
<template #footer>
|
||
<el-button @click="showSyncSettings = false">取消</el-button>
|
||
<el-button type="primary" @click="saveSyncSettings">保存</el-button>
|
||
</template>
|
||
</el-dialog>
|
||
|
||
<!-- 客户详情对话框 -->
|
||
<el-dialog
|
||
v-model="showDetail"
|
||
title="客户详情"
|
||
width="600px"
|
||
>
|
||
<el-descriptions v-if="currentCustomer" :column="2" border>
|
||
<el-descriptions-item label="客户名称">{{ currentCustomer.name }}</el-descriptions-item>
|
||
<el-descriptions-item label="External ID">{{ currentCustomer.external_userid }}</el-descriptions-item>
|
||
<el-descriptions-item label="性别">
|
||
{{ currentCustomer.gender === 1 ? '男' : currentCustomer.gender === 2 ? '女' : '未知' }}
|
||
</el-descriptions-item>
|
||
<el-descriptions-item label="类型">
|
||
{{ currentCustomer.type === 1 ? '微信用户' : '企业微信用户' }}
|
||
</el-descriptions-item>
|
||
<el-descriptions-item label="企业名称" :span="2">
|
||
{{ currentCustomer.corp_name || '—' }}
|
||
</el-descriptions-item>
|
||
<el-descriptions-item label="职位" :span="2">
|
||
{{ currentCustomer.position || '—' }}
|
||
</el-descriptions-item>
|
||
<el-descriptions-item label="添加时间" :span="2">
|
||
{{ formatTime(currentCustomer.create_time) }}
|
||
</el-descriptions-item>
|
||
<el-descriptions-item label="更新时间" :span="2">
|
||
{{ formatTime(currentCustomer.update_time) }}
|
||
</el-descriptions-item>
|
||
</el-descriptions>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref, reactive, onMounted, onUnmounted } from 'vue'
|
||
import { Refresh, Setting } from '@element-plus/icons-vue'
|
||
import { usePaging } from '@/hooks/usePaging'
|
||
import feedback from '@/utils/feedback'
|
||
import {
|
||
qywxCustomerLists,
|
||
qywxCustomerSync,
|
||
qywxCustomerStats,
|
||
qywxSyncSettingsGet,
|
||
qywxSyncSettingsSave
|
||
} from '@/api/qywx'
|
||
|
||
const syncing = ref(false)
|
||
const showSyncSettings = ref(false)
|
||
const showDetail = ref(false)
|
||
const currentCustomer = ref<any>(null)
|
||
|
||
const stats = reactive({
|
||
total: 0,
|
||
today: 0,
|
||
lastSync: '',
|
||
syncStatus: 'idle',
|
||
syncStatusText: '未同步'
|
||
})
|
||
|
||
const syncSettings = reactive({
|
||
auto_sync: false,
|
||
interval: 3600
|
||
})
|
||
|
||
const queryParams = reactive({
|
||
name: '',
|
||
follow_user: ''
|
||
})
|
||
|
||
let syncTimer: number | null = null
|
||
|
||
async function fetchLists(params: Record<string, unknown>) {
|
||
return qywxCustomerLists(params)
|
||
}
|
||
|
||
const { pager, getLists, resetPage, resetParams } = usePaging({
|
||
fetchFun: fetchLists,
|
||
params: queryParams
|
||
})
|
||
|
||
function handleReset() {
|
||
queryParams.name = ''
|
||
queryParams.follow_user = ''
|
||
resetParams()
|
||
}
|
||
|
||
async function syncCustomers() {
|
||
syncing.value = true
|
||
try {
|
||
await qywxCustomerSync()
|
||
feedback.msgSuccess('同步成功')
|
||
await loadStats()
|
||
await getLists()
|
||
} catch (e: any) {
|
||
feedback.msgError(e?.message || '同步失败')
|
||
} finally {
|
||
syncing.value = false
|
||
}
|
||
}
|
||
|
||
async function loadStats() {
|
||
try {
|
||
const res: any = await qywxCustomerStats()
|
||
Object.assign(stats, res.data || res)
|
||
} catch (e) {
|
||
console.error('加载统计失败', e)
|
||
}
|
||
}
|
||
|
||
async function loadSyncSettings() {
|
||
try {
|
||
const res: any = await qywxSyncSettingsGet()
|
||
Object.assign(syncSettings, res.data || res)
|
||
|
||
// 如果开启了自动同步，启动定时器
|
||
if (syncSettings.auto_sync) {
|
||
startSyncTimer()
|
||
}
|
||
} catch (e) {
|
||
console.error('加载同步设置失败', e)
|
||
}
|
||
}
|
||
|
||
async function saveSyncSettings() {
|
||
try {
|
||
await qywxSyncSettingsSave(syncSettings)
|
||
feedback.msgSuccess('保存成功')
|
||
showSyncSettings.value = false
|
||
|
||
// 重新启动定时器
|
||
stopSyncTimer()
|
||
if (syncSettings.auto_sync) {
|
||
startSyncTimer()
|
||
}
|
||
} catch (e: any) {
|
||
feedback.msgError(e?.message || '保存失败')
|
||
}
|
||
}
|
||
|
||
function startSyncTimer() {
|
||
if (syncTimer) return
|
||
|
||
syncTimer = window.setInterval(() => {
|
||
syncCustomers()
|
||
}, syncSettings.interval * 1000)
|
||
}
|
||
|
||
function stopSyncTimer() {
|
||
if (syncTimer) {
|
||
clearInterval(syncTimer)
|
||
syncTimer = null
|
||
}
|
||
}
|
||
|
||
function viewDetail(row: any) {
|
||
currentCustomer.value = row
|
||
showDetail.value = true
|
||
}
|
||
|
||
function formatTime(timestamp: number | string) {
|
||
if (!timestamp) return '—'
|
||
const date = new Date(typeof timestamp === 'number' ? timestamp * 1000 : timestamp)
|
||
return date.toLocaleString('zh-CN')
|
||
}
|
||
|
||
onMounted(() => {
|
||
getLists()
|
||
loadStats()
|
||
loadSyncSettings()
|
||
})
|
||
|
||
onUnmounted(() => {
|
||
stopSyncTimer()
|
||
})
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.qywx-customer-page {
|
||
max-width: 1400px;
|
||
margin: 0 auto;
|
||
}
|
||
</style>
|