303 lines
7.9 KiB
Vue
303 lines
7.9 KiB
Vue
|
<script setup lang="ts">
|
|||
|
|
import { computed, ref, watch } from 'vue'
|
|||
|
|
import { ElMessage } from 'element-plus'
|
|||
|
|
import { getVoiceClips } from '@/api'
|
|||
|
|
import type { VoiceClip } from '@/api/types'
|
|||
|
|
import { formatCallDuration, formatTime } from '@/utils/format'
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 长语音记录 modal（只读）—— 复刻云客「微信长语音列表」modal 的展示部分。
|
|||
|
|
* 调用方传 `userId`（从 CallList 行传入，精确限定员工）。
|
|||
|
|
*
|
|||
|
|
* 本期仅只读：列出片段 + 内联播放录音；不做匹配 / 转写 / 回写（spec §7）。
|
|||
|
|
* 播放直接用 `oss_file_name` 的 OSS 直链（已知全本地妥协，随 ASR 一起修）。
|
|||
|
|
*/
|
|||
|
|
const props = withDefaults(
|
|||
|
|
defineProps<{
|
|||
|
|
modelValue: boolean
|
|||
|
|
userId: string
|
|||
|
|
/** 本地通道标记（wechat / whatsapp）。 */
|
|||
|
|
channel?: string
|
|||
|
|
title?: string
|
|||
|
|
/** 该员工姓名，用于标题展示（可选）。 */
|
|||
|
|
staffName?: string | null
|
|||
|
|
}>(),
|
|||
|
|
{
|
|||
|
|
channel: 'wechat',
|
|||
|
|
title: '',
|
|||
|
|
staffName: null,
|
|||
|
|
},
|
|||
|
|
)
|
|||
|
|
const emit = defineEmits<{ 'update:modelValue': [boolean] }>()
|
|||
|
|
|
|||
|
|
const loading = ref(false)
|
|||
|
|
const errorMsg = ref<string | null>(null)
|
|||
|
|
const items = ref<VoiceClip[]>([])
|
|||
|
|
const total = ref(0)
|
|||
|
|
const page = ref(1)
|
|||
|
|
const pageSize = ref(10)
|
|||
|
|
|
|||
|
|
// 录音结束时间窗（el-date-picker datetimerange，clearable）。
|
|||
|
|
const dateRange = ref<[Date, Date] | null>(null)
|
|||
|
|
|
|||
|
|
// 当前内联播放的片段。
|
|||
|
|
const playingUrl = ref<string | null>(null)
|
|||
|
|
const playingLabel = ref('')
|
|||
|
|
|
|||
|
|
const dialogTitle = computed(() => {
|
|||
|
|
if (props.title) return props.title
|
|||
|
|
const who = props.staffName || props.userId
|
|||
|
|
return `长语音记录 · ${who}`
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
async function load(): Promise<void> {
|
|||
|
|
if (!props.userId) {
|
|||
|
|
items.value = []
|
|||
|
|
total.value = 0
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
loading.value = true
|
|||
|
|
errorMsg.value = null
|
|||
|
|
try {
|
|||
|
|
let start: number | undefined
|
|||
|
|
let end: number | undefined
|
|||
|
|
if (dateRange.value && dateRange.value.length === 2) {
|
|||
|
|
start = dateRange.value[0].getTime()
|
|||
|
|
end = dateRange.value[1].getTime()
|
|||
|
|
}
|
|||
|
|
const res = await getVoiceClips({
|
|||
|
|
user_id: props.userId,
|
|||
|
|
channel: props.channel,
|
|||
|
|
start,
|
|||
|
|
end,
|
|||
|
|
page: page.value,
|
|||
|
|
page_size: pageSize.value,
|
|||
|
|
})
|
|||
|
|
items.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 durationDisplay(row: VoiceClip): string {
|
|||
|
|
return row.duration_format || formatCallDuration(row.mp3_duration)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function playClip(row: VoiceClip): void {
|
|||
|
|
const url = row.oss_file_name
|
|||
|
|
if (!url) {
|
|||
|
|
ElMessage.info('该片段无录音文件')
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
playingUrl.value = url
|
|||
|
|
const who = row.user_real_name || row.user_id
|
|||
|
|
const when = formatTime(row.end_time)
|
|||
|
|
playingLabel.value = `${who}${when !== '--' ? ` · ${when}` : ''}`
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function closePlaying(): void {
|
|||
|
|
playingUrl.value = null
|
|||
|
|
playingLabel.value = ''
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function onFilterChange(): void {
|
|||
|
|
page.value = 1
|
|||
|
|
load()
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function resetFilters(): void {
|
|||
|
|
dateRange.value = null
|
|||
|
|
page.value = 1
|
|||
|
|
load()
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function handlePageChange(p: number): void {
|
|||
|
|
page.value = p
|
|||
|
|
load()
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function handlePageSizeChange(s: number): void {
|
|||
|
|
pageSize.value = s
|
|||
|
|
page.value = 1
|
|||
|
|
load()
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
watch(
|
|||
|
|
() => props.modelValue,
|
|||
|
|
(open) => {
|
|||
|
|
if (open) {
|
|||
|
|
page.value = 1
|
|||
|
|
dateRange.value = null
|
|||
|
|
playingUrl.value = null
|
|||
|
|
playingLabel.value = ''
|
|||
|
|
load()
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
)
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<template>
|
|||
|
|
<el-dialog
|
|||
|
|
:model-value="modelValue"
|
|||
|
|
:title="dialogTitle"
|
|||
|
|
width="900px"
|
|||
|
|
align-center
|
|||
|
|
@update:model-value="emit('update:modelValue', $event)"
|
|||
|
|
@closed="closePlaying"
|
|||
|
|
>
|
|||
|
|
<!-- Filters: 录音结束时间范围（对齐云客 modal 三筛之一，本期只做时间窗） -->
|
|||
|
|
<div class="yk-voice-clip__filters">
|
|||
|
|
<span class="yk-voice-clip__filter-label">录音结束时间</span>
|
|||
|
|
<el-date-picker
|
|||
|
|
v-model="dateRange"
|
|||
|
|
type="datetimerange"
|
|||
|
|
range-separator="至"
|
|||
|
|
start-placeholder="开始时间"
|
|||
|
|
end-placeholder="结束时间"
|
|||
|
|
size="small"
|
|||
|
|
format="YYYY-MM-DD HH:mm:ss"
|
|||
|
|
@change="onFilterChange"
|
|||
|
|
/>
|
|||
|
|
<el-button link type="primary" size="small" @click="resetFilters">重置</el-button>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<el-alert
|
|||
|
|
v-if="errorMsg"
|
|||
|
|
:title="errorMsg"
|
|||
|
|
type="error"
|
|||
|
|
show-icon
|
|||
|
|
:closable="false"
|
|||
|
|
style="margin-bottom: 8px"
|
|||
|
|
/>
|
|||
|
|
|
|||
|
|
<!-- Inline playback bar -->
|
|||
|
|
<div v-if="playingUrl" class="yk-voice-clip__player">
|
|||
|
|
<div class="yk-voice-clip__player-label">{{ playingLabel }}</div>
|
|||
|
|
<audio controls :src="playingUrl" preload="metadata" style="width: 100%">
|
|||
|
|
您的浏览器不支持音频播放。
|
|||
|
|
</audio>
|
|||
|
|
<a :href="playingUrl" target="_blank" rel="noopener" class="yk-voice-clip__player-link">
|
|||
|
|
在新窗口打开
|
|||
|
|
</a>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<el-table
|
|||
|
|
v-loading="loading"
|
|||
|
|
:data="items"
|
|||
|
|
border
|
|||
|
|
size="small"
|
|||
|
|
style="width: 100%"
|
|||
|
|
empty-text="暂无长语音记录"
|
|||
|
|
>
|
|||
|
|
<el-table-column label="员工姓名" min-width="100">
|
|||
|
|
<template #default="{ row }">{{ row.user_real_name || row.user_id || '--' }}</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
<el-table-column label="企业串码" prop="company_code" width="110">
|
|||
|
|
<template #default="{ row }">{{ row.company_code || '--' }}</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
<el-table-column label="录音开始" min-width="150">
|
|||
|
|
<template #default="{ row }">{{ formatTime(row.start_time) }}</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
<el-table-column label="录音结束" min-width="150">
|
|||
|
|
<template #default="{ row }">{{ formatTime(row.end_time) }}</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
<el-table-column label="录音时长" width="100" align="right">
|
|||
|
|
<template #default="{ row }">{{ durationDisplay(row) }}</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
<el-table-column label="文件地址" min-width="160" show-overflow-tooltip>
|
|||
|
|
<template #default="{ row }">
|
|||
|
|
<span v-if="row.oss_file_name" class="yk-voice-clip__url" :title="row.oss_file_name">
|
|||
|
|
{{ row.oss_file_name }}
|
|||
|
|
</span>
|
|||
|
|
<span v-else style="color: #c0c4cc">--</span>
|
|||
|
|
</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
<el-table-column label="操作" width="80" align="center" fixed="right">
|
|||
|
|
<template #default="{ row }">
|
|||
|
|
<el-button
|
|||
|
|
v-if="row.oss_file_name"
|
|||
|
|
link
|
|||
|
|
type="primary"
|
|||
|
|
size="small"
|
|||
|
|
@click="playClip(row)"
|
|||
|
|
>
|
|||
|
|
播放
|
|||
|
|
</el-button>
|
|||
|
|
<span v-else style="color: #c0c4cc">--</span>
|
|||
|
|
</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
</el-table>
|
|||
|
|
|
|||
|
|
<div class="yk-voice-clip__pager">
|
|||
|
|
<el-pagination
|
|||
|
|
:current-page="page"
|
|||
|
|
:page-size="pageSize"
|
|||
|
|
:page-sizes="[10, 20, 50]"
|
|||
|
|
:total="total"
|
|||
|
|
layout="total, sizes, prev, pager, next"
|
|||
|
|
background
|
|||
|
|
size="small"
|
|||
|
|
@current-change="handlePageChange"
|
|||
|
|
@size-change="handlePageSizeChange"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<template #footer>
|
|||
|
|
<el-button @click="emit('update:modelValue', false)">关闭</el-button>
|
|||
|
|
</template>
|
|||
|
|
</el-dialog>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<style scoped>
|
|||
|
|
.yk-voice-clip__filters {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 8px;
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
margin-bottom: 10px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.yk-voice-clip__filter-label {
|
|||
|
|
font-size: 13px;
|
|||
|
|
color: #606266;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.yk-voice-clip__player {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
gap: 4px;
|
|||
|
|
margin-bottom: 10px;
|
|||
|
|
padding: 8px 10px;
|
|||
|
|
background: #f5f7fa;
|
|||
|
|
border: 1px solid #e4e7ed;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.yk-voice-clip__player-label {
|
|||
|
|
font-size: 12px;
|
|||
|
|
color: #606266;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.yk-voice-clip__player-link {
|
|||
|
|
font-size: 12px;
|
|||
|
|
color: var(--el-color-primary, #409eff);
|
|||
|
|
align-self: flex-end;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.yk-voice-clip__url {
|
|||
|
|
color: #909399;
|
|||
|
|
font-size: 12px;
|
|||
|
|
word-break: break-all;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.yk-voice-clip__pager {
|
|||
|
|
margin-top: 10px;
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: flex-end;
|
|||
|
|
}
|
|||
|
|
</style>
|