hotline-web/src/views/tels/callLog/zgCallLog.vue

<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>