浅念
459 lines
14 KiB
Vue
459 lines
14 KiB
Vue
<script setup lang="ts">
|
||
import { computed, onMounted, ref } from 'vue'
|
||
import { ElMessage, type TabPaneName } from 'element-plus'
|
||
import { getCalls } from '@/api'
|
||
import type { CallChannel, PhoneCall } from '@/api/types'
|
||
import {
|
||
callDirectionLabel,
|
||
callStatusLabel,
|
||
callTypeLabel,
|
||
formatCallDuration,
|
||
formatTime,
|
||
} from '@/utils/format'
|
||
import { buildCallSections, readField } from '@/utils/callFields'
|
||
|
||
// Calls aren't tied to a messaging channel — `channel` on a call is the call
|
||
// type (phone_call / voice_call / wa_voice_call). We keep a LOCAL filter so it
|
||
// doesn't fight the shared top-bar wechat/whatsapp store used by customers/groups.
|
||
const callType = ref<CallChannel>('voice_call')
|
||
|
||
const calls = ref<PhoneCall[]>([])
|
||
const total = ref(0)
|
||
const page = ref(1)
|
||
const pageSize = ref(20)
|
||
const loading = ref(false)
|
||
const errorMsg = ref<string | null>(null)
|
||
|
||
// Recording playback dialog state.
|
||
const recordDialogVisible = ref(false)
|
||
const recordSrc = ref<string | null>(null)
|
||
const recordTitle = ref('')
|
||
|
||
// All-fields drawer state.
|
||
const drawerOpen = ref(false)
|
||
const drawerCall = ref<PhoneCall | null>(null)
|
||
|
||
const tabs: { value: CallChannel; label: string }[] = [
|
||
{ value: 'voice_call', label: '微信语音' },
|
||
{ value: 'wa_voice_call', label: 'WA 语音' },
|
||
{ value: 'phone_call', label: '电话' },
|
||
]
|
||
|
||
async function load(): Promise<void> {
|
||
loading.value = true
|
||
errorMsg.value = null
|
||
try {
|
||
const res = await getCalls({
|
||
channel: callType.value,
|
||
page: page.value,
|
||
page_size: pageSize.value,
|
||
})
|
||
calls.value = res.items
|
||
total.value = res.total
|
||
} catch (e) {
|
||
errorMsg.value = (e as Error).message
|
||
ElMessage.error(`通话记录加载失败：${(e as Error).message}`)
|
||
} finally {
|
||
loading.value = false
|
||
}
|
||
}
|
||
|
||
function handlePageChange(p: number): void {
|
||
page.value = p
|
||
load()
|
||
}
|
||
|
||
function handlePageSizeChange(s: number): void {
|
||
pageSize.value = s
|
||
page.value = 1
|
||
load()
|
||
}
|
||
|
||
function onTabChange(_name: TabPaneName): void {
|
||
// v-model has already updated callType; just reset paging and reload.
|
||
page.value = 1
|
||
load()
|
||
}
|
||
|
||
/**
|
||
* Read a raw_json camelCase key off a call, preferring the structured
|
||
* snake_case column when it is populated. The first argument is the row so the
|
||
* table can use the same helper as the drawer.
|
||
*/
|
||
function cell(row: PhoneCall, camelKey: string): unknown {
|
||
return readField(row, camelKey)
|
||
}
|
||
|
||
function timeCell(row: PhoneCall, camelKey: string): number | undefined {
|
||
const v = cell(row, camelKey)
|
||
return typeof v === 'number' ? v : undefined
|
||
}
|
||
|
||
function playRecord(row: PhoneCall): void {
|
||
const local = row.record_media_hash ? `/api/media/${row.record_media_hash}` : null
|
||
const file =
|
||
local ??
|
||
(typeof cell(row, 'recordFile') === 'string' ? (cell(row, 'recordFile') as string) : null) ??
|
||
row.record_file
|
||
if (!file) {
|
||
ElMessage.info('该通话无录音文件')
|
||
return
|
||
}
|
||
recordSrc.value = file
|
||
const who = row.user_id_name || row.user_id || row.call_id
|
||
const when = formatTime(row.start_call_time)
|
||
recordTitle.value = `录音 · ${who}${when !== '--' ? ` · ${when}` : ''}`
|
||
recordDialogVisible.value = true
|
||
}
|
||
|
||
function openDrawer(row: PhoneCall): void {
|
||
drawerCall.value = row
|
||
drawerOpen.value = true
|
||
}
|
||
|
||
const drawerSections = computed(() =>
|
||
drawerCall.value ? buildCallSections(drawerCall.value) : [],
|
||
)
|
||
|
||
onMounted(load)
|
||
</script>
|
||
|
||
<template>
|
||
<div class="yk-calls">
|
||
<div class="yk-calls__header">
|
||
<div>
|
||
<h2 style="margin: 0 0 4px; font-size: 16px">通话记录</h2>
|
||
<span class="yk-calls__sub">
|
||
共 {{ total }} 条 · 类型：{{ tabs.find(t => t.value === callType)?.label }}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
|
||
<el-tabs v-model="callType" class="yk-calls__tabs" @tab-change="onTabChange">
|
||
<el-tab-pane
|
||
v-for="t in tabs"
|
||
:key="t.value"
|
||
:label="t.label"
|
||
:name="t.value"
|
||
/>
|
||
</el-tabs>
|
||
|
||
<el-alert
|
||
v-if="errorMsg"
|
||
:title="errorMsg"
|
||
type="error"
|
||
show-icon
|
||
:closable="false"
|
||
style="margin-bottom: 12px"
|
||
/>
|
||
|
||
<el-table
|
||
v-loading="loading"
|
||
:data="calls"
|
||
stripe
|
||
border
|
||
row-key="call_id"
|
||
style="width: 100%"
|
||
:row-class-name="() => 'yk-clickable-row'"
|
||
empty-text="暂无通话记录"
|
||
@row-click="openDrawer"
|
||
>
|
||
<template v-if="callType === 'voice_call'">
|
||
<el-table-column label="通话信息" min-width="150">
|
||
<template #default="{ row }">
|
||
<div>通话状态：{{ callStatusLabel(row.call_status, row.channel) }}</div>
|
||
<div class="yk-cell__sub">类型：{{ callTypeLabel(row.channel) }}</div>
|
||
<div class="yk-cell__sub">来源：{{ cell(row, 'from') || '--' }}</div>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="客户信息" min-width="150">
|
||
<template #default="{ row }">
|
||
<div>{{ cell(row, 'talkerNickName') || '--' }}</div>
|
||
<div class="yk-cell__sub">{{ row.call_number || cell(row, 'talker') || '--' }}</div>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="员工微信" min-width="150">
|
||
<template #default="{ row }">
|
||
<div>{{ cell(row, 'userWeChatNickName') || '--' }}</div>
|
||
<div class="yk-cell__sub">{{ cell(row, 'userWeChatAlias') || cell(row, 'weChatId') || '--' }}</div>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="员工信息" min-width="130">
|
||
<template #default="{ row }">
|
||
<div>{{ row.user_id_name || '--' }}</div>
|
||
<div class="yk-cell__sub">{{ cell(row, 'userPhone') || '--' }}</div>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="通话录音" width="110" align="center">
|
||
<template #default="{ row }">
|
||
<el-button v-if="row.record_media_hash || row.record_file || cell(row, 'recordFile')" size="small" type="primary" link @click.stop="playRecord(row)">播放</el-button>
|
||
<span v-else style="color:#c0c4cc">--</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="通话时长" width="100" align="right">
|
||
<template #default="{ row }">{{ formatCallDuration(row.call_duration) }}</template>
|
||
</el-table-column>
|
||
</template>
|
||
<template v-if="callType === 'wa_voice_call'">
|
||
<el-table-column label="状态" width="160">
|
||
<template #default="{ row }">
|
||
<div>{{ callStatusLabel(row.call_status, row.channel) }}</div>
|
||
<div class="yk-cell__sub">时长 {{ formatCallDuration(row.call_duration) }}</div>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="客户信息" min-width="160">
|
||
<template #default="{ row }">
|
||
<div>{{ cell(row, 'talkerNickName') || '--' }}</div>
|
||
<div class="yk-cell__sub">{{ cell(row, 'talkerAlias') || row.call_number || '--' }}</div>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="员工信息" min-width="160">
|
||
<template #default="{ row }">
|
||
<div>{{ row.user_id_name || '--' }} · {{ cell(row, 'userPhone') || '--' }}</div>
|
||
<div class="yk-cell__sub">{{ cell(row, 'userWeChatNickName') || '--' }} · {{ cell(row, 'userWeChatAlias') || '--' }}</div>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="通话时间和录音" min-width="180">
|
||
<template #default="{ row }">
|
||
<div>{{ formatTime(row.start_call_time) }}</div>
|
||
<el-button v-if="row.record_media_hash || row.record_file || cell(row, 'ossFileName')" size="small" type="primary" link @click.stop="playRecord(row)" style="margin-top:2px">播放录音</el-button>
|
||
<span v-else class="yk-cell__sub">无录音</span>
|
||
</template>
|
||
</el-table-column>
|
||
</template>
|
||
<template v-if="callType === 'phone_call'">
|
||
<el-table-column label="时间" width="160">
|
||
<template #default="{ row }">
|
||
{{ formatTime(row.start_call_time ?? timeCell(row, 'startCallTime')) }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="员工" min-width="130">
|
||
<template #default="{ row }">
|
||
{{ row.user_id_name || row.user_id || '--' }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="号码" min-width="130">
|
||
<template #default="{ row }">
|
||
{{ row.call_number || row.sim_phone || '--' }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="方向" width="80">
|
||
<template #default="{ row }">{{ callDirectionLabel(row.incoming_call) }}</template>
|
||
</el-table-column>
|
||
<el-table-column label="类型" width="100">
|
||
<template #default="{ row }">{{ callTypeLabel(row.channel) }}</template>
|
||
</el-table-column>
|
||
<el-table-column label="时长" width="90" align="right">
|
||
<template #default="{ row }">{{ formatCallDuration(row.call_duration) }}</template>
|
||
</el-table-column>
|
||
<el-table-column label="状态" width="90">
|
||
<template #default="{ row }">{{ callStatusLabel(row.call_status, row.channel) }}</template>
|
||
</el-table-column>
|
||
<el-table-column label="录音" width="100" align="center">
|
||
<template #default="{ row }">
|
||
<el-button
|
||
v-if="row.record_media_hash || row.record_file || cell(row, 'recordFile')"
|
||
size="small"
|
||
type="primary"
|
||
link
|
||
@click.stop="playRecord(row)"
|
||
>
|
||
播放录音
|
||
</el-button>
|
||
<span v-else style="color: #c0c4cc">--</span>
|
||
</template>
|
||
</el-table-column>
|
||
</template>
|
||
</el-table>
|
||
|
||
<div class="yk-calls__pager">
|
||
<el-pagination
|
||
:current-page="page"
|
||
:page-size="pageSize"
|
||
:page-sizes="[20, 50, 100]"
|
||
:total="total"
|
||
layout="total, sizes, prev, pager, next, jumper"
|
||
background
|
||
@current-change="handlePageChange"
|
||
@size-change="handlePageSizeChange"
|
||
/>
|
||
</div>
|
||
<p class="yk-calls__hint">点击任意一行查看通话全部字段。</p>
|
||
|
||
<!-- Recording playback dialog -->
|
||
<el-dialog
|
||
v-model="recordDialogVisible"
|
||
:title="recordTitle"
|
||
width="480px"
|
||
align-center
|
||
@closed="recordSrc = null"
|
||
>
|
||
<audio
|
||
v-if="recordSrc"
|
||
controls
|
||
:src="recordSrc"
|
||
style="width: 100%"
|
||
preload="metadata"
|
||
>
|
||
您的浏览器不支持音频播放。
|
||
</audio>
|
||
<div v-if="recordSrc" class="yk-calls__record-link">
|
||
<a :href="recordSrc" target="_blank" rel="noopener">在新窗口打开录音文件</a>
|
||
</div>
|
||
</el-dialog>
|
||
|
||
<!-- All-fields drawer -->
|
||
<el-drawer
|
||
v-model="drawerOpen"
|
||
:title="drawerCall ? `通话详情 · ${drawerCall.user_id_name ?? drawerCall.user_id ?? drawerCall.call_id}` : '通话详情'"
|
||
direction="rtl"
|
||
size="560px"
|
||
>
|
||
<template v-if="drawerCall">
|
||
<div class="yk-drawer__avatar">
|
||
<div class="yk-drawer__avatar-meta">
|
||
<div class="yk-drawer__avatar-name">
|
||
{{ drawerCall.user_id_name || drawerCall.user_id || drawerCall.call_id }}
|
||
</div>
|
||
<div class="yk-drawer__avatar-sub">
|
||
{{ callTypeLabel(drawerCall.channel) }}
|
||
<template v-if="drawerCall.call_number">
|
||
· {{ drawerCall.call_number }}
|
||
</template>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div v-for="section in drawerSections" :key="section.title" class="yk-drawer__section">
|
||
<el-divider content-position="left">{{ section.title }}</el-divider>
|
||
<dl class="yk-drawer__kv">
|
||
<div v-for="f in section.fields" :key="f.key" class="yk-drawer__kv-item">
|
||
<dt>{{ f.label }}</dt>
|
||
<dd v-if="f.render === 'audio'" class="yk-drawer__audio">
|
||
<audio
|
||
:src="String(f.value)"
|
||
controls
|
||
preload="metadata"
|
||
style="width: 100%; max-width: 320px"
|
||
>
|
||
您的浏览器不支持音频播放。
|
||
</audio>
|
||
<a :href="String(f.value)" target="_blank" rel="noopener" class="yk-drawer__audio-link">
|
||
打开录音
|
||
</a>
|
||
</dd>
|
||
<dd v-else-if="f.render === 'empty'" class="yk-drawer__empty">—</dd>
|
||
<dd v-else>{{ f.text }}</dd>
|
||
</div>
|
||
</dl>
|
||
</div>
|
||
</template>
|
||
</el-drawer>
|
||
</div>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.yk-calls__header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: flex-start;
|
||
gap: 16px;
|
||
flex-wrap: wrap;
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.yk-calls__sub {
|
||
color: #909399;
|
||
font-size: 13px;
|
||
}
|
||
|
||
.yk-cell__sub {
|
||
color: #909399;
|
||
font-size: 12px;
|
||
}
|
||
|
||
.yk-calls__pager {
|
||
margin-top: 12px;
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
}
|
||
|
||
.yk-calls__record-link {
|
||
margin-top: 8px;
|
||
font-size: 12px;
|
||
text-align: center;
|
||
}
|
||
|
||
.yk-calls__hint {
|
||
margin: 8px 2px 0;
|
||
font-size: 12px;
|
||
color: #c0c4cc;
|
||
}
|
||
|
||
.yk-drawer__avatar {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
margin-bottom: 4px;
|
||
}
|
||
|
||
.yk-drawer__avatar-meta {
|
||
min-width: 0;
|
||
}
|
||
|
||
.yk-drawer__avatar-name {
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.yk-drawer__avatar-sub {
|
||
font-size: 12px;
|
||
color: #909399;
|
||
margin-top: 2px;
|
||
}
|
||
|
||
.yk-drawer__kv {
|
||
margin: 0 0 8px;
|
||
}
|
||
|
||
.yk-drawer__kv-item {
|
||
display: grid;
|
||
grid-template-columns: 110px 1fr;
|
||
gap: 8px 12px;
|
||
padding: 3px 0;
|
||
}
|
||
|
||
.yk-drawer__kv dt {
|
||
color: #909399;
|
||
font-size: 13px;
|
||
word-break: break-all;
|
||
}
|
||
|
||
.yk-drawer__kv dd {
|
||
margin: 0;
|
||
font-size: 13px;
|
||
color: #303133;
|
||
word-break: break-all;
|
||
min-width: 0;
|
||
}
|
||
|
||
.yk-drawer__audio {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
gap: 4px;
|
||
}
|
||
|
||
.yk-drawer__audio-link {
|
||
font-size: 12px;
|
||
color: var(--el-color-primary, #409eff);
|
||
}
|
||
|
||
.yk-drawer__empty {
|
||
color: #c0c4cc;
|
||
}
|
||
</style>
|