|
|
@@ -13,18 +13,33 @@
|
|
|
>
|
|
|
<div v-loading="loading">
|
|
|
<el-table :data="tableData" border>
|
|
|
- <el-table-column prop="name" label="来电号码" align="center"/>
|
|
|
- <el-table-column prop="createTime" label="来电时间" width="160" align="center"/>
|
|
|
- <el-table-column prop="duration" label="时长" align="center"/>
|
|
|
+ <el-table-column prop="name" label="来电号码" align="center" />
|
|
|
+ <el-table-column prop="createTime" label="来电时间" width="160" align="center" />
|
|
|
+ <el-table-column prop="duration" label="时长" align="center" />
|
|
|
<el-table-column prop="size" label="操作" align="center">
|
|
|
<template #default="{ row }">
|
|
|
<el-button type="primary" link v-auth="'public:record:download'" @click="download(row)">下载</el-button>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
</el-table>
|
|
|
- <audio-player :url="RecordUrl" :key="RecordUrl"/>
|
|
|
+ <audio-player :url="recordUrl" :key="recordUrl" />
|
|
|
+ <audio :src="recordUrl" controls preload="auto" class="w100" v-loading="loading" :key="recordUrl"></audio>
|
|
|
</div>
|
|
|
</el-dialog>
|
|
|
+ <el-dialog
|
|
|
+ v-model="dialogVisibleSmart"
|
|
|
+ width="600px"
|
|
|
+ draggable
|
|
|
+ title="播放录音"
|
|
|
+ append-to-body
|
|
|
+ destroy-on-close
|
|
|
+ :modal="false"
|
|
|
+ modal-class="modal_class"
|
|
|
+ class="dialog_class_record"
|
|
|
+ :close-on-click-modal="false"
|
|
|
+ >
|
|
|
+ <audio :src="recordUrl" controls preload="auto" class="w100" v-loading="loading" :key="recordUrl"></audio>
|
|
|
+ </el-dialog>
|
|
|
</template>
|
|
|
|
|
|
<script lang="ts" setup name="playRecord">
|
|
|
@@ -39,7 +54,7 @@ import { storeToRefs } from 'pinia';
|
|
|
const AudioPlayer = defineAsyncComponent(() => import('@/components/AudioPlayer/index.vue'));
|
|
|
// 定义子组件向父组件传值/事件
|
|
|
const emit = defineEmits(['openDialog', 'closeDialog']);
|
|
|
-const RecordUrl = ref<string>(''); //录音地址
|
|
|
+const recordUrl = ref<string>(''); //录音地址
|
|
|
const dialogVisible = ref<boolean>(false); //是否显示弹窗
|
|
|
const tableData = ref<EmptyArrayType>([]);
|
|
|
const loading = ref(false);
|
|
|
@@ -49,24 +64,47 @@ const { themeConfig } = storeToRefs(storesThemeConfig);
|
|
|
const openDialog = async (callId: string) => {
|
|
|
loading.value = true;
|
|
|
try {
|
|
|
- const {result} = await callLogDetail(callId );
|
|
|
+ const { result } = await callLogDetail(callId);
|
|
|
tableData.value = [
|
|
|
{
|
|
|
- name:result.fromNo,
|
|
|
+ name: result.fromNo,
|
|
|
createTime: formatDate(result.beginIvrTime, 'YYYY-mm-dd HH:MM:SS'),
|
|
|
duration: `${result.duration}秒`,
|
|
|
- ...result
|
|
|
- }
|
|
|
- ]
|
|
|
+ ...result,
|
|
|
+ },
|
|
|
+ ];
|
|
|
dialogVisible.value = true;
|
|
|
loading.value = false;
|
|
|
- RecordUrl.value = themeConfig.value.recordPrefix+result.audioFile;
|
|
|
+ recordUrl.value = themeConfig.value.recordPrefix + result.audioFile;
|
|
|
emit('openDialog');
|
|
|
- }catch (e){
|
|
|
- console.log(e)
|
|
|
- loading.value = true;
|
|
|
+ } catch (e) {
|
|
|
+ console.log(e);
|
|
|
+ loading.value = false;
|
|
|
}
|
|
|
- /*let popup = window.open('', '_blank', 'left=100,top=100,width=400,height=200');
|
|
|
+};
|
|
|
+// 关闭弹窗
|
|
|
+const closeDialog = () => {
|
|
|
+ dialogVisible.value = false;
|
|
|
+ emit('closeDialog');
|
|
|
+};
|
|
|
+// 下载录音
|
|
|
+const download = (row: any) => {
|
|
|
+ loading.value = true;
|
|
|
+ fileDownload({ path: themeConfig.value.recordDownLoadPrefix + row.audioFile })
|
|
|
+ .then((res: any) => {
|
|
|
+ downloadFileByStream(res, row.audioFile);
|
|
|
+ loading.value = false;
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ loading.value = false;
|
|
|
+ });
|
|
|
+};
|
|
|
+// 直接打开录音
|
|
|
+const dialogVisibleSmart = ref(false);
|
|
|
+const playRecord = (url: string) => {
|
|
|
+ recordUrl.value = url;
|
|
|
+ dialogVisibleSmart.value = true;
|
|
|
+ /* let popup = window.open('', '_blank', 'left=100,top=100,width=400,height=200');
|
|
|
if (popup) {
|
|
|
popup.document.write(`
|
|
|
<html>
|
|
|
@@ -119,24 +157,8 @@ const openDialog = async (callId: string) => {
|
|
|
alert('浏览器阻止了弹出窗口，请允许弹出窗口后再试。');
|
|
|
}*/
|
|
|
};
|
|
|
-// 关闭弹窗
|
|
|
-const closeDialog = () => {
|
|
|
- dialogVisible.value = false;
|
|
|
- emit('closeDialog');
|
|
|
-};
|
|
|
-// 下载录音
|
|
|
-const download = (row:any)=>{
|
|
|
- console.log(row,'111')
|
|
|
- loading.value = true;
|
|
|
- fileDownload({ path: themeConfig.value.recordDownLoadPrefix + row.audioFile }).then((res: any) => {
|
|
|
- downloadFileByStream(res, row.audioFile);
|
|
|
- loading.value = false;
|
|
|
- }).catch(()=>{
|
|
|
- loading.value = false;
|
|
|
- })
|
|
|
-};
|
|
|
//暴漏变量和方法
|
|
|
-defineExpose({ closeDialog, openDialog });
|
|
|
+defineExpose({ closeDialog, openDialog, playRecord });
|
|
|
</script>
|
|
|
<style lang="scss" scoped>
|
|
|
.item {
|
|
|
@@ -160,7 +182,6 @@ defineExpose({ closeDialog, openDialog });
|
|
|
margin: 0 !important;
|
|
|
position: absolute;
|
|
|
top: 30vh;
|
|
|
- left:calc(50vw - 300px);
|
|
|
+ left: calc(50vw - 300px);
|
|
|
}
|
|
|
</style>
|
|
|
-
|
zhangchong