88 lines
2.3 KiB
Vue
88 lines
2.3 KiB
Vue
<script setup>
|
|
import LiveCallItem from '@/components/liveCall/LiveCallItem.vue'
|
|
import {getHistoryCallContent} from '@/api/workbench';
|
|
|
|
const dialogVisible = ref(false);
|
|
const recordLeftRef = ref(null);
|
|
const props = defineProps({
|
|
rowData: String
|
|
})
|
|
|
|
const open = (row) => {
|
|
dialogVisible.value = true;
|
|
};
|
|
|
|
const leftHeadData = ref({
|
|
username: '张三',
|
|
phone: '13546812315',
|
|
orderName: '张三工单',
|
|
})
|
|
|
|
const recordLeftObj = ref({
|
|
content: []
|
|
});
|
|
const convertArrayToMap=(array)=> {
|
|
const map = new Map();
|
|
array.forEach(item => {
|
|
// 如果时间戳对应的键已经存在，则添加到现有数组中
|
|
if (map.has(item.conversationTimestamp)) {
|
|
map.get(item.conversationTimestamp).push(item);
|
|
} else {
|
|
// 否则，创建一个新的数组并添加元素
|
|
map.set(item.conversationTimestamp, [item]);
|
|
}
|
|
});
|
|
return map;
|
|
}
|
|
|
|
watch(() => props.rowData, async (newVal) => {
|
|
recordLeftObj.value.content = []
|
|
// let map1 = new Map()
|
|
await getHistoryCallContent(newVal).then(res => {
|
|
res.data?.forEach(item => {
|
|
item.textVoList = convertArrayToMap(item.textVoList);
|
|
})
|
|
recordLeftObj.value = res.data
|
|
// console.info("🚀 ~method:res.data -----", res.data)
|
|
if (res.data && res.data.length > 0) {
|
|
leftHeadData.value.username = res.data[0].callIdNumber || '--';
|
|
leftHeadData.value.phone = res.data[0].callPhone || '--';
|
|
leftHeadData.value.orderName = res.data[0].orderName || '--';
|
|
}
|
|
})
|
|
})
|
|
|
|
const scrollToBottom = (scrollbarRef) => {
|
|
if (scrollbarRef) {
|
|
const container = scrollbarRef.$el.querySelector('.el-scrollbar__wrap');
|
|
container.style.scrollBehavior = 'smooth'; // 添加平滑滚动效果
|
|
container.scrollTop = container.scrollHeight;
|
|
}
|
|
};
|
|
|
|
scrollToBottom(recordLeftRef.value)
|
|
|
|
defineExpose({
|
|
open,
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<el-dialog v-model="dialogVisible" title="历史通话记录" width="600" class="box">
|
|
<LiveCallItem ref="recordLeftRef" :recordArray="recordLeftObj" :headData="leftHeadData" style="width: 100%;"/>
|
|
<template #footer>
|
|
<div class="dialog-footer">
|
|
<el-button type="primary" @click="dialogVisible = false">
|
|
关闭
|
|
</el-button>
|
|
</div>
|
|
</template>
|
|
</el-dialog>
|
|
</template>
|
|
|
|
<style>
|
|
.box {
|
|
height: 68vh;
|
|
}
|
|
</style>
|