176 lines
4.0 KiB
Vue
176 lines
4.0 KiB
Vue
<template>
|
|
<div class="home">
|
|
<h3 style="margin-bottom: 10px;margin-top: 10px">实时通话</h3>
|
|
<div class="real-time-call">
|
|
<LiveCall />
|
|
</div>
|
|
<div class="call-history">
|
|
<h3>历史通话记录</h3>
|
|
<fvTable ref="tableIns" :tableConfig="tableConfig" :isLoading="isLoading"></fvTable>
|
|
<voice ref="voiceRef" title="语音详情" :rowUrl="rowUrl" />
|
|
<infoLiveCall ref="infoLiveCallRef" v-model:value="orderNumber" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="jsx">
|
|
import LiveCall from '@/components/liveCall/index.vue'
|
|
import Voice from '@/components/voice/index.vue'
|
|
import InfoLiveCall from '@/components/infoLiveCall/index.vue'
|
|
const orderNumber = ref('')
|
|
const rowUrl = ref()
|
|
const infoLiveCallRef = ref()
|
|
const isLoading = ref(false)
|
|
const voiceRef = ref()
|
|
const tableIns = ref()
|
|
const auths = reactive({
|
|
record: ['order:dialogue:list'],
|
|
})
|
|
const tableConfig = reactive({
|
|
columns: [
|
|
{
|
|
prop: 'index',
|
|
type: 'index',
|
|
label: '序号',
|
|
align: 'center',
|
|
width: 80,
|
|
},
|
|
{
|
|
prop: 'orderNumber',
|
|
label: '工单号',
|
|
align: 'center',
|
|
},
|
|
{
|
|
prop: 'orderName',
|
|
label: '工单名称',
|
|
align: 'center'
|
|
},
|
|
{
|
|
prop: 'orderContent',
|
|
label: '工单内容',
|
|
align: 'center'
|
|
},
|
|
{
|
|
prop: 'operationUser',
|
|
// prop: 'destinationName',
|
|
label: '处理人',
|
|
align: 'center'
|
|
},
|
|
{
|
|
prop: 'knotter',
|
|
// prop: 'destinationName',
|
|
label: '关单人',
|
|
align: 'center'
|
|
},
|
|
{
|
|
prop: 'destinationName',
|
|
// prop: 'workOrderNumber',
|
|
label: '用户名',
|
|
align: 'center'
|
|
},
|
|
{
|
|
prop: 'destinationNumber',
|
|
label: '电话号码',
|
|
align: 'center'
|
|
},
|
|
{
|
|
prop: 'callState',
|
|
label: '电话拨打状态',
|
|
align: 'center',
|
|
width: 120,
|
|
showOverflowTooltip: false,
|
|
currentRender: ({ row, index }) => {
|
|
if (row.callState !== null) {
|
|
return (<PointTag dictType={'call_status'} value={row.callState} />)
|
|
} else {
|
|
return '--'
|
|
}
|
|
}
|
|
},
|
|
{
|
|
prop: 'createdTime',
|
|
// prop: 'workOrderTime',
|
|
label: '拨打时间',
|
|
align: 'center',
|
|
width: 200
|
|
}, {
|
|
prop: 'oper',
|
|
label: '操作',
|
|
align: 'center',
|
|
fixed: 'right',
|
|
width: 200,
|
|
showOverflowTooltip: false,
|
|
currentRender: ({ row, index }) => {
|
|
// console.log(row);
|
|
let btn = []
|
|
btn.push({ label: '播放语音', func: () => handleVoice(row), type: 'primary' })
|
|
btn.push({ label: '通话记录', prem: auths.record, func: () => handleInfo(row), type: 'primary' })
|
|
return (
|
|
<div style={{ width: '100%' }}>
|
|
{
|
|
btn.map(item => (
|
|
item.prem?
|
|
<el-button
|
|
type={item.type}
|
|
v-perm={item.prem}
|
|
onClick={() => item.func()}
|
|
link>
|
|
{item.label}
|
|
</el-button>
|
|
: <el-button
|
|
type={item.type}
|
|
onClick={() => item.func()}
|
|
link>
|
|
{item.label}
|
|
</el-button>
|
|
))
|
|
}
|
|
</div >
|
|
)
|
|
}
|
|
}
|
|
],
|
|
api: '/order/list',
|
|
params: {
|
|
}
|
|
})
|
|
const handleVoice = (row) => {
|
|
if (row.recordUrl !== null) {
|
|
voiceRef.value.open(true)
|
|
rowUrl.value = row.recordUrl
|
|
}else{
|
|
ElMessage({
|
|
message: '暂无语音',
|
|
type: 'warning',
|
|
})
|
|
}
|
|
|
|
}
|
|
const handleInfo = (row) => {
|
|
orderNumber.value = row.orderNumber
|
|
infoLiveCallRef.value.open()
|
|
}
|
|
window.setInterval(() => {
|
|
setTimeout(tableIns.value.refresh(), 0)
|
|
}, 2000)
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
:deep(.el-table--fit){
|
|
min-height: 180px;
|
|
}
|
|
.home {
|
|
.real-time-call {
|
|
width: 100%;
|
|
height: 50vh;
|
|
// background-color: red;
|
|
}
|
|
|
|
.call-history {
|
|
width: 100%;
|
|
//height: 50vh;
|
|
// background-color: blue;
|
|
}
|
|
}
|
|
</style>
|