123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492 |
- <template>
- <div class="tels-callLog-container layout-padding">
- <div class="layout-padding-auto layout-padding-view pd20">
- <el-tabs v-model="state.queryParams.type" @tab-change="changeTba">
- <el-tab-pane name="1" label="呼入列表"></el-tab-pane>
- <el-tab-pane name="2" label="呼出列表"></el-tab-pane>
- <el-tab-pane name="3" label="未接列表"></el-tab-pane>
- </el-tabs>
- <ProTable
- ref="proTableRef"
- :columns="inColumns"
- :data="state.tableData"
- @updateTable="queryList"
- :loading="state.loading"
- :pagination="false"
- v-if="state.queryParams.type === '1'"
- >
- <template #table-search>
- <el-form :model="state.queryParams" ref="ruleFormRef" @submit.native.prevent label-minWidth="100px" inline>
- <el-form-item prop="FromNo">
- <el-input v-model="state.queryParams.FromNo" placeholder="主叫号码" clearable @keyup.enter="handleQuery" class="keyword-input" />
- </el-form-item>
- <el-form-item prop="ToNo">
- <el-input v-model="state.queryParams.ToNo" placeholder="被叫号码" clearable @keyup.enter="handleQuery" class="keyword-input" />
- </el-form-item>
- <el-form-item label="" label-width="">
- <el-button type="primary" @click="handleQuery" :loading="state.loading"> <SvgIcon name="ele-Search" class="mr5" />查询 </el-button>
- <el-button @click="drawer = true" class="default-button"> <SvgIcon name="ele-Search" class="mr5" />更多查询</el-button>
- </el-form-item>
- </el-form>
- </template>
- <template #operation="{ row }">
- <template v-if="['1', '2'].includes(state.queryParams.type)">
- <el-button link type="primary" @click="onCreate(row)" title="创建失联工单" v-auth="'tels:callLog:connectOrder'" v-if="!row.orderId">
- 失联工单
- </el-button>
- <!-- <el-button link type="primary" @click="onConnect(row)" title="关联业务" v-auth="'tels:callLog:connect'" v-if="!row.orderId">
- 关联业务
- </el-button>-->
- <el-button type="primary" @click="onPlaySoundRecording(row)" title="播放录音" link v-if="row.audioFile">播放录音</el-button>
- <el-button link type="primary" @click="onDownload(row)" title="下载录音" v-if="row.audioFile"> 下载录音 </el-button>
- </template>
- <template v-else>
- <el-button type="primary" @click="onPlaySoundRecording(row)" title="播放录音" link v-if="row.audioFile">播放录音</el-button>
- <el-button link type="primary" @click="onDownload(row)" title="下载录音" v-if="row.audioFile"> 下载录音 </el-button>
- </template>
- </template>
- <template #title="{ row }">
- <order-detail :order="{...row,id: row.orderId}" @updateList="queryList">{{ row.title }}</order-detail>
- </template>
- <template #pagination>
- <div class="flex-end mt10">
- <!-- <el-button class="default-button" @click="onChangeTotal">展示总数</el-button>-->
- <el-pagination
- layout="prev, pager, next"
- :total="state.total"
- @current-change="handleCurrentChange"
- :page-size="state.queryParams.PageSize"
- :current-page="state.queryParams.PageIndex"
- :pager-count="5"
- />
- </div>
- </template>
- </ProTable>
- <ProTable
- ref="proTableRef"
- :columns="outColumns"
- :data="state.tableData"
- @updateTable="queryList"
- :loading="state.loading"
- v-if="state.queryParams.type === '2'"
- :pagination="false"
- >
- <template #table-search>
- <el-form :model="state.queryParams" ref="ruleFormRef" @submit.native.prevent label-minWidth="100px" inline>
- <el-form-item prop="FromNo">
- <el-input v-model="state.queryParams.FromNo" placeholder="主叫号码" clearable @keyup.enter="handleQuery" class="keyword-input"/>
- </el-form-item>
- <el-form-item prop="ToNo">
- <el-input v-model="state.queryParams.ToNo" placeholder="被叫号码" clearable @keyup.enter="handleQuery" class="keyword-input"/>
- </el-form-item>
- <el-form-item label="" label-width="">
- <el-button type="primary" @click="handleQuery" :loading="state.loading"> <SvgIcon name="ele-Search" class="mr5" />查询 </el-button>
- <el-button @click="drawer = true" class="default-button"> <SvgIcon name="ele-Search" class="mr5" />更多查询</el-button>
- </el-form-item>
- </el-form>
- </template>
- <template #operation="{ row }">
- <template v-if="['1', '2'].includes(state.queryParams.type)">
- <el-button link type="primary" @click="onCreate(row)" title="创建失联工单" v-auth="'tels:callLog:connectOrder'" v-if="!row.orderId">
- 失联工单
- </el-button>
- <!-- <el-button link type="primary" @click="onConnect(row)" title="关联业务" v-auth="'tels:callLog:connect'" v-if="!row.orderId">
- 关联业务
- </el-button>-->
- <el-button type="primary" @click="onPlaySoundRecording(row)" title="播放录音" link v-if="row.audioFile">播放录音</el-button>
- <el-button link type="primary" @click="onDownload(row)" title="下载录音" v-if="row.audioFile"> 下载录音 </el-button>
- </template>
- <template v-else>
- <el-button type="primary" @click="onPlaySoundRecording(row)" title="播放录音" link v-if="row.audioFile">播放录音</el-button>
- <el-button link type="primary" @click="onDownload(row)" title="下载录音" v-if="row.audioFile"> 下载录音 </el-button>
- </template>
- </template>
- <template #title="{ row }">
- <order-detail :order="{...row,id: row.orderId}" @updateList="queryList">{{ row.title }}</order-detail>
- </template>
- <template #pagination>
- <div class="flex-end mt10">
- <!-- <el-button class="default-button" @click="onChangeTotal">展示总数</el-button>-->
- <el-pagination
- layout="prev, pager, next"
- :total="state.total"
- @current-change="handleCurrentChange"
- :page-size="state.queryParams.PageSize"
- :current-page="state.queryParams.PageIndex"
- :pager-count="5"
- />
- </div>
- </template>
- </ProTable>
- <ProTable
- ref="proTableRef"
- :columns="noColumns"
- :data="state.tableData"
- @updateTable="queryList"
- :loading="state.loading"
- v-if="state.queryParams.type === '3'"
- :pagination="false"
- >
- <template #table-search>
- <el-form :model="state.queryParams" ref="ruleFormRef" @submit.native.prevent label-minWidth="100px" inline>
- <el-form-item prop="FromNo">
- <el-input v-model="state.queryParams.FromNo" placeholder="主叫号码" clearable @keyup.enter="handleQuery" class="keyword-input"/>
- </el-form-item>
- <el-form-item prop="ToNo">
- <el-input v-model="state.queryParams.ToNo" placeholder="被叫号码" clearable @keyup.enter="handleQuery" class="keyword-input"/>
- </el-form-item>
- <el-form-item label="" label-width="">
- <el-button type="primary" @click="handleQuery" :loading="state.loading"> <SvgIcon name="ele-Search" class="mr5" />查询 </el-button>
- <el-button @click="drawer = true" class="default-button"> <SvgIcon name="ele-Search" class="mr5" />更多查询</el-button>
- </el-form-item>
- </el-form>
- </template>
- <template #operation="{ row }">
- <template v-if="['1', '2'].includes(state.queryParams.type)">
- <el-button link type="primary" @click="onCreate(row)" title="创建失联工单" v-auth="'tels:callLog:connectOrder'" v-if="!row.orderId">
- 失联工单
- </el-button>
- <!-- <el-button link type="primary" @click="onConnect(row)" title="关联业务" v-auth="'tels:callLog:connect'" v-if="!row.orderId">
- 关联业务
- </el-button>-->
- <el-button type="primary" @click="onPlaySoundRecording(row)" title="播放录音" link v-if="row.audioFile">播放录音</el-button>
- <el-button link type="primary" @click="onDownload(row)" title="下载录音" v-if="row.audioFile"> 下载录音 </el-button>
- </template>
- <template v-else>
- <el-button type="primary" @click="onPlaySoundRecording(row)" title="播放录音" link v-if="row.audioFile">播放录音</el-button>
- <el-button link type="primary" @click="onDownload(row)" title="下载录音" v-if="row.audioFile"> 下载录音 </el-button>
- </template>
- </template>
- <template #title="{ row }">
- <order-detail :order="{...row,id: row.orderId}" @updateList="queryList">{{ row.title }}</order-detail>
- </template>
- <template #pagination>
- <div class="flex-end mt10">
- <!-- <el-button class="default-button" @click="onChangeTotal">展示总数</el-button>-->
- <el-pagination
- layout="prev, pager, next"
- :total="state.total"
- @current-change="handleCurrentChange"
- :page-size="state.queryParams.PageSize"
- :current-page="state.queryParams.PageIndex"
- :pager-count="5"
- />
- </div>
- </template>
- </ProTable>
- <el-drawer v-model="drawer" title="更多查询" size="500px">
- <el-form :model="state.queryParams" ref="drawerRuleFormRef" @submit.native.prevent label-width="100px">
- <el-form-item prop="TelNo" label="响应分机">
- <el-input v-model="state.queryParams.TelNo" placeholder="响应分机" clearable @keyup.enter="handleQuery" />
- </el-form-item>
- <el-form-item prop="crTime" label="时间段">
- <el-date-picker
- v-model="state.queryParams.crTime"
- type="datetimerange"
- unlink-panels
- range-separator="至"
- start-placeholder="开始时间"
- end-placeholder="挂断时间"
- :shortcuts="shortcuts"
- @change="handleQuery"
- value-format="YYYY-MM-DD[T]HH:mm:ss"
- :default-time="defaultTimeStartEnd"
- />
- </el-form-item>
- <el-form-item prop="Direction" v-show="['3'].includes(state.queryParams.type)" label="电话方向">
- <el-select v-model="state.queryParams.Direction" placeholder="电话方向" clearable class="w100" @change="handleQuery">
- <el-option v-for="item in state.callDirectionOption" :value="item.key" :key="item.key" :label="item.value" />
- </el-select>
- </el-form-item>
- <el-form-item prop="EndBy" v-show="['4'].includes(state.queryParams.type)" label="挂断状态">
- <el-select v-model="state.queryParams.EndBy" placeholder="挂断状态" clearable class="w100" @change="handleQuery">
- <el-option v-for="item in state.endByOptions" :value="item.key" :key="item.key" :label="item.value" />
- </el-select>
- </el-form-item>
- <el-form-item prop="UserName" v-show="['1'].includes(state.queryParams.type)" label="话务员名称">
- <el-input v-model="state.queryParams.UserName" placeholder="话务员名称" clearable @keyup.enter="handleQuery" />
- </el-form-item>
- <el-form-item prop="OrderNo" v-show="['0', '1'].includes(state.queryParams.type)" label="工单编码">
- <el-input v-model="state.queryParams.OrderNo" placeholder="工单编码" clearable @keyup.enter="handleQuery" />
- </el-form-item>
- <el-form-item prop="Title" v-show="['0', '1'].includes(state.queryParams.type)" label="工单标题">
- <el-input v-model="state.queryParams.Title" placeholder="工单标题" clearable @keyup.enter="handleQuery" />
- </el-form-item>
- <el-form-item prop="WaitDurationStart" v-show="['3'].includes(state.queryParams.type)" label="等待时长">
- <el-row :gutter="10">
- <el-col :span="12">
- <el-input placeholder="等待时长开始" v-model.number="state.queryParams.WaitDurationStart" clearable />
- </el-col>
- <el-col :span="12">
- <el-input placeholder="等待时长结束" v-model.number="state.queryParams.WaitDurationEnd" clearable />
- </el-col>
- </el-row>
- </el-form-item>
- </el-form>
- <template #footer>
- <el-button type="primary" @click="handleQuery" :loading="state.loading"> <SvgIcon name="ele-Search" class="mr5" />查询 </el-button>
- <el-button @click="resetQuery(drawerRuleFormRef)" class="default-button"> <SvgIcon name="ele-Refresh" class="mr5" />重置 </el-button>
- </template>
- </el-drawer>
- </div>
- <!-- 播放录音 -->
- <play-record ref="playRecordRef" />
- <!-- 业务关联 -->
- <connect-business ref="connectBusinessRef" @updateList="queryList" />
- </div>
- </template>
- <script lang="tsx" setup name="callLog">
- import { defineAsyncComponent, onMounted, reactive, ref, onActivated, onBeforeUnmount } from 'vue';
- import type { FormInstance } from 'element-plus';
- import { ElMessageBox } from 'element-plus';
- import { downloadFileBySrc, getNeedArr } from '@/utils/tools';
- import { formatDate } from '@/utils/formatTime';
- import { defaultTimeStartEnd, shortcuts } from '@/utils/constants';
- import { useRouter } from 'vue-router';
- import mittBus from '@/utils/mitt';
- import Other from '@/utils/other';
- import { getCallCenterCallRecord, getCallCenterCallRecordBaseData } from '@/api/callCenter';
- import { useThemeConfig } from '@/stores/themeConfig';
- import { storeToRefs } from 'pinia';
- // 引入组件
- const PlayRecord = defineAsyncComponent(() => import('@/components/PlayRecord/index.vue')); // 播放录音
- const ConnectBusiness = defineAsyncComponent(() => import('@/views/tels/callLog/component/Connect-business.vue')); // 关联工单还是回访
- const OrderDetail = defineAsyncComponent(() => import('@/components/OrderDetail/index.vue')); // 工单详情
- const proTableRef = ref<RefType>(); // 表格ref
- // 表格配置项
- // 定义变量内容
- const state = reactive<any>({
- queryParams: {
- PageIndex: 1, // 当前页
- PageSize: 20, // 每页条数
- type: '1', // 默认呼入列表
- IsConnected: null, // 接通状态
- FromNo: null, // 主叫
- ToNo: null, // 被叫
- UserName: null, // 话务员名称
- TelNo: null, // 分机号
- EndBy: null, //挂断
- Direction: null, // 通话方向
- crTime: [], // 时间
- CallStartTimeStart: null,
- CallStartTimeEnd: null,
- WaitDurationStart: null,
- WaitDurationEnd: null,
- },
- tableData: [], // 列表数据
- loading: false, // 加载
- total: 0, // 总条数
- callDirection: [],
- onState: [],
- endByOptions: [],
- });
- const ruleFormRef = ref<FormInstance>(); // 表单ref
- const searchCol = ref(true); // 展开/收起
- // 展开/收起
- const closeSearch = () => {
- searchCol.value = !searchCol.value;
- };
- // 呼入列表表头(已接通)
- const inColumns = ref<any[]>([
- { prop: 'fromNo', label: '主叫号码', minWidth: 120 },
- { prop: 'toNo', label: '被叫号码', minWidth: 120 },
- { prop: 'orderNo', label: '工单编码', minWidth: 140 },
- { prop: 'title', label: '工单标题', minWidth: 200 },
- { prop: 'telNo', label: '响应分机' },
- { prop: 'mobileAreaName', label: '号码归属地', minWidth: 120 },
- { prop: 'userName', label: '话务员', minWidth: 100 },
- { prop: 'groupId', label: '功能组号码', minWidth: 120 },
- { prop: 'duration', label: '通话时间(秒)', minWidth: 110 },
- { prop: 'endByText', label: '挂断状态', minWidth: 100 },
- {
- prop: 'beginIvrTime',
- label: '开始时间',
- minWidth: 160,
- render: (scope) => <span>{formatDate(scope.row.beginIvrTime, 'YYYY-mm-dd HH:MM:SS')}</span>,
- },
- {
- prop: 'answeredTime',
- label: '接通时间',
- minWidth: 160,
- render: (scope) => <span>{formatDate(scope.row.answeredTime, ' YYYY-mm-dd HH:MM:SS')}</span>,
- },
- { prop: 'endTime', label: '挂断时间', minWidth: 160, render: (scope) => <span>{formatDate(scope.row.endTime, 'YYYY-mm-dd HH:MM:SS')}</span> },
- { prop: 'operation', label: '操作', fixed: 'right', minWidth: 240, align: 'center' },
- ]);
- // 呼出列表表头(已接通)
- const outColumns = ref<any[]>([
- { prop: 'fromNo', label: '主叫号码', minWidth: 120 },
- { prop: 'toNo', label: '被叫号码', minWidth: 120 },
- { prop: 'telNo', label: '响应分机' },
- { prop: 'orderNo', label: '工单编码', minWidth: 140 },
- { prop: 'title', label: '工单标题', minWidth: 200 },
- { prop: 'endByText', label: '挂断状态', minWidth: 100 },
- { prop: 'groupId', label: '功能组号码', minWidth: 120 },
- { prop: 'duration', label: '通话时间(秒)', minWidth: 110 },
- {
- prop: 'beginIvrTime',
- label: '开始时间',
- minWidth: 160,
- render: (scope) => <span>{formatDate(scope.row.beginIvrTime, 'YYYY-mm-dd HH:MM:SS')}</span>,
- },
- {
- prop: 'answeredTime',
- label: '接通时间',
- minWidth: 160,
- render: (scope) => <span>{formatDate(scope.row.answeredTime, 'YYYY-mm-dd HH:MM:SS')}</span>,
- },
- { prop: 'endTime', label: '挂断时间', minWidth: 160, render: (scope) => <span>{formatDate(scope.row.endTime, 'YYYY-mm-dd HH:MM:SS')}</span> },
- { prop: 'operation', label: '操作', fixed: 'right', minWidth: 240, align: 'center' },
- ]);
- // 未接表头
- const noColumns = ref<any[]>([
- { prop: 'directionText', label: '呼叫方向' },
- { prop: 'fromNo', label: '主叫号码', minWidth: 120 },
- { prop: 'toNo', label: '被叫号码', minWidth: 120 },
- { prop: 'telNo', label: '响应分机' },
- { prop: 'groupId', label: '功能组号码', minWidth: 120 },
- {
- prop: 'beginIvrTime',
- label: '开始时间',
- minWidth: 160,
- render: (scope) => <span>{formatDate(scope.row.beginIvrTime, 'YYYY-mm-dd HH:MM:SS')}</span>,
- },
- { prop: 'endTime', label: '挂断时间', minWidth: 160, render: (scope) => <span>{formatDate(scope.row.endTime, 'YYYY-mm-dd HH:MM:SS')}</span> },
- { prop: 'waitDuration', label: '等待时长(秒)', minWidth: 110 },
- { prop: 'operation', label: '操作', fixed: 'right', minWidth: 160, align: 'center' },
- ]);
- const changeTba = () => {
- ruleFormRef.value?.resetFields();
- drawerRuleFormRef.value?.resetFields();
- handleQuery();
- };
- // 手动查询,将页码设置为1
- const handleQuery = () => {
- state.queryParams.PageIndex = 1;
- queryIndex.value = 0;
- queryList(true);
- };
- // 改变页码
- const queryIndex = ref(0); // 数据批次
- const totalTable = ref([]); // 数据总数
- const handleCurrentChange = (val: number) => {
- state.queryParams.PageIndex = val;
- // 判断当前页是否是数据的最后一页
- if (val === Math.ceil(state.total / state.queryParams.PageSize)) {
- queryList();
- } else {
- state.tableData = getNeedArr(totalTable.value, state.queryParams.PageSize)[state.queryParams.PageIndex - 1]; //当前页的表格数据
- }
- };
- /** 通话记录列表 */
- const requestParams = ref<EmptyObjectType>({});
- const queryList = async (isQuery: boolean = false) => {
- state.loading = true;
- requestParams.value = Other.deepClone(state.queryParams);
- requestParams.value.CallStartTimeStart = state.queryParams.crTime === null ? null : state.queryParams.crTime[0];
- requestParams.value.CallStartTimeEnd = state.queryParams.crTime === null ? null : state.queryParams.crTime[1];
- Reflect.deleteProperty(requestParams.value, 'crTime'); // 通话开始和结束时间段
- requestParams.value.QueryIndex = queryIndex.value; // 数据批次
- state.loading = true;
- getCallCenterCallRecord(requestParams.value)
- .then((response: any) => {
- if (isQuery) {
- // 如果是查询
- totalTable.value = []; // 先清空
- totalTable.value = response?.result;
- state.total = totalTable.value.length;
- state.tableData = getNeedArr(totalTable.value, state.queryParams.PageSize)[state.queryParams.PageIndex - 1]; //当前页的表格数据
- queryIndex.value = 1;
- } else {
- if (response?.result.length) queryIndex.value++;
- totalTable.value = totalTable.value.concat(response?.result);
- state.total = totalTable.value.length;
- state.tableData = getNeedArr(totalTable.value, state.queryParams.PageSize)[state.queryParams.PageIndex - 1]; //当前页的表格数据
- }
- state.loading = false;
- })
- .catch(() => {
- state.loading = false;
- });
- };
- /** 重置按钮操作 */
- const drawer = ref(false);
- const drawerRuleFormRef = ref();
- const resetQuery = (formEl: FormInstance | undefined) => {
- if (!formEl) return;
- formEl.resetFields();
- queryIndex.value = 0;
- ruleFormRef.value?.resetFields();
- queryList(true);
- };
- // 播放录音
- const playRecordRef = ref<RefType>();
- const storesThemeConfig = useThemeConfig();
- const { themeConfig } = storeToRefs(storesThemeConfig);
- const onPlaySoundRecording = (val: any) => {
- playRecordRef.value.openDialog(val.id);
- };
- // 下载录音
- const onDownload = (row: any) => {
- ElMessageBox.confirm(`您确定要下载此录音吗?`, '提示', {
- confirmButtonText: '确认',
- cancelButtonText: '取消',
- type: 'warning',
- draggable: true,
- cancelButtonClass: 'default-button',
- autofocus: false,
- })
- .then(() => {
- // window.open(themeConfig.value.recordPrefix + row.audioFile);
- downloadFileBySrc( themeConfig.value.recordPrefix + row.audioFile, row.audioFile);
- })
- .catch(() => {});
- };
- // 失联工单
- const router = useRouter();
- const onCreate = (row: any) => {
- router.push({
- name: 'orderAccept',
- query: {
- createBy: 'tel',
- fromTel: row.fromNo,
- callId: row.id,
- transfer: row.toNo,
- telArea: '',
- },
- });
- };
- // 基础信息
- const getBaseData = async () => {
- try {
- const { result } = await getCallCenterCallRecordBaseData();
- state.callDirectionOption = result.direction;
- state.endByOptions = result.endBy;
- } catch (e) {
- console.log(e);
- }
- };
- onMounted(() => {
- getBaseData();
- queryList();
- });
- onActivated(() => {
- mittBus.on('clearCachePage', () => {
- //清除缓存
- queryList();
- });
- });
- onBeforeUnmount(() => {
- mittBus.off('clearCachePage');
- });
- </script>
- <style lang="scss" scoped>
- .tels-callLog-container {
- :deep(.pro-table-main) {
- height: calc(100% - 42px);
- }
- }
- </style>
|