167 lines
3.7 KiB
Vue
167 lines
3.7 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" :data="mockData" @headBtnClick="headBtnClick"></fvTable>
|
|
<voice ref="voiceRef" title="语音详情"/>
|
|
<infoLiveCall ref="infoLiveCallRef" :rowData="rowData"/>
|
|
</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 rowData = ref()
|
|
const infoLiveCallRef=ref()
|
|
const voiceRef=ref()
|
|
const tableIns = ref()
|
|
const mockData = ref([
|
|
{
|
|
workOrderNumber: 1211,
|
|
workOrderTime: '2022-02-09 00 : 12',
|
|
state: 0,
|
|
callState: '01'
|
|
},
|
|
{
|
|
workOrderNumber: 232,
|
|
state: 1,
|
|
callState: '02'
|
|
}
|
|
])
|
|
const auths = reactive({
|
|
report: ['mosr:collect:reported'],
|
|
})
|
|
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',
|
|
label: '处理人',
|
|
align: 'center'
|
|
},
|
|
{
|
|
prop: 'knotter',
|
|
label: '关单人',
|
|
align: 'center'
|
|
},
|
|
{
|
|
prop: 'workOrderNumber',
|
|
label: '用户名',
|
|
align: 'center'
|
|
},
|
|
{
|
|
prop: 'workOrderNumber',
|
|
label: '号码',
|
|
align: 'center'
|
|
},
|
|
{
|
|
prop: 'callState',
|
|
label: '电话拨打状态',
|
|
align: 'center',
|
|
showOverflowTooltip: false,
|
|
currentRender: ({ row, index }) => {
|
|
if (row.callState !== null) {
|
|
return (<PointTag dictType={'call_status'} value={row.callState} />)
|
|
} else {
|
|
return '--'
|
|
}
|
|
}
|
|
},
|
|
{
|
|
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: '播放语音', prem: auths.detail, func: () => handleVoice(row), type: 'primary' })
|
|
btn.push({ label: '通话记录', prem: auths.detail, func: () => handleInfo(row), type: 'primary' })
|
|
return (
|
|
<div style={{ width: '100%' }}>
|
|
{
|
|
btn.map(item => (
|
|
<>
|
|
<el-button
|
|
type={item.type}
|
|
// v-perm={item.prem}
|
|
onClick={() => item.func()}
|
|
link>
|
|
{item.label}
|
|
</el-button>
|
|
</>
|
|
))
|
|
}
|
|
</div >
|
|
)
|
|
}
|
|
}
|
|
],
|
|
api: '/order/list',
|
|
params: {
|
|
orderState:'2'
|
|
},
|
|
btns: [
|
|
// {name: '新增', key: 'add',type:'primary',icon:'Plus'},
|
|
]
|
|
})
|
|
const handleVoice = (row) => {
|
|
voiceRef.value.open(true)
|
|
}
|
|
const handleInfo = (row) => {
|
|
// console.log(row);
|
|
|
|
infoLiveCallRef.value.open(true)
|
|
rowData.value = row.orderNumber
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.home {
|
|
.real-time-call {
|
|
width: 100%;
|
|
height: 50vh;
|
|
// background-color: red;
|
|
}
|
|
|
|
.call-history {
|
|
width: 100%;
|
|
//height: 50vh;
|
|
// background-color: blue;
|
|
}
|
|
}
|
|
</style>
|