hotline-web/src/views/business/visit/component/Smart-visit-Detail.vue

<template>
	<el-dialog v-model="state.dialogVisible" width="60%" draggable title="回访明细" append-to-body destroy-on-close @close="close">
		<el-form :model="state.queryParams" ref="queryParamsRef" inline @submit.native.prevent>
			<el-form-item label="关键词" prop="Keyword">
				<el-input v-model="state.queryParams.Keyword" placeholder="工单标题/工单编码" clearable @keyup.enter="handleQuery" />
			</el-form-item>
			<el-form-item label="任务状态" prop="AiOrderVisitState">
				<el-select v-model="state.queryParams.AiOrderVisitState" placeholder="请选择任务状态" @change="handleQuery" clearable>
					<el-option v-for="item in aiOrderVisitState" :value="item.key" :key="item.key" :label="item.value" />
				</el-select>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="handleQuery" :loading="state.loading"> <SvgIcon name="ele-Search" class="mr5" />查询 </el-button>
				<el-button @click="resetQuery(queryParamsRef)" :loading="state.loading" class="default-button">
					<SvgIcon name="ele-Refresh" class="mr5" />重置
				</el-button>
			</el-form-item>
		</el-form>
		<ProTable
			ref="proTableRef"
			:columns="columns"
			:data="state.tableData"
			@updateTable="queryList"
			:loading="state.loading"
			:total="state.total"
			v-model:page-index="state.queryParams.PageIndex"
			v-model:page-size="state.queryParams.PageSize"
			:toolButton="['refresh', 'setting', 'exportCurrent', 'exportAll']"
			:exportMethod="getSmartVisitDetailExport"
			:exportParams="requestParams"
		>
			<template #operation="{ row }">
				<template>
					<el-button type="primary" @click="onPlaySoundRecording(row)" title="播放录音" link v-if="row.recordUrl">播放录音</el-button>
					<el-button link type="primary" @click="onDownload(row)" title="下载录音" v-if="row.recordUrl"> 下载录音 </el-button>
				</template>
			</template>
			<template #title="{ row }">
				<order-detail :order="row.order" @updateList="queryList">{{ row.order?.title }}</order-detail>
			</template>
		</ProTable>
	</el-dialog>
</template>
<script setup lang="tsx">
import { formatDate } from '@/utils/formatTime';
import { ElMessageBox, FormInstance } from 'element-plus';
import { defineAsyncComponent, reactive, ref } from 'vue';
import { getSmartVisitBaseData, getSmartVisitDetail, getSmartVisitDetailExport, getSmartVisitExport } from '@/api/smartVisit';
import { downloadFileByStream } from '@/utils/tools';
import { getCurrentCityConfig } from '@/utils/appConfig';
import {fileDownload} from "@/api/public/file";

const OrderDetail = defineAsyncComponent(() => import('@/components/OrderDetail/index.vue')); // 工单详情
const PlayRecord = defineAsyncComponent(() => import('@/views/tels/callLog/component/Play-record.vue')); // 播放录音
const state = reactive({
	queryParams: {
		// 查询条件
		PageIndex: 1,
		PageSize: 10,
		Keyword: null, // 关键字
		id: '',
		AiOrderVisitState: null,
	},
	tableData: [], //表格
	loading: false, // 加载
	total: 0, // 总数
	dialogVisible: false, // 弹窗
});
const columns = ref<any[]>([
	{ prop: 'order.no', label: '工单编码', width: 140 },
	{
		label: '标题',
		prop: 'title',
		width: 200,
	},
	{ prop: 'aiOrderVisitStateText', label: '外呼状态' },
	{
		label: '是否成功',
		prop: 'isSuccessText',
	},
	{ prop: 'outerNo', label: '外呼电话',minWidth: 120 },
	{ prop: 'fromName', label: '姓名' },
	{ prop: 'fromGenderText', label: '性别' },
  { prop: 'callTimes', label: '重拨次数' },
  {
    label: '外呼时间',
    prop: 'callTime',
    width: 160,
    render: (scope: any) => {
      return <span>{formatDate(scope.row.callTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
    },
  },
	{
		label: '受理时间',
		prop: 'startTime',
		width: 160,
		render: (scope: any) => {
			return <span>{formatDate(scope.row.startTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
		},
	},
	{
		label: '办结时间',
		prop: 'filedTime',
		width: 160,
		render: (scope: any) => {
			return <span>{formatDate(scope.row.filedTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
		},
	},
	{
		label: '话务员评价',
		prop: 'seatEvaluateText',
		width: 120,
	},
	{
		label: '部门办件结果',
		prop: 'orgProcessingResults',
		width: 140,
	},
	{
		label: '部门是否联系',
		prop: 'isContact',
    minWidth: 120,
	},
	{
		label: '处理结果',
		prop: 'volved',
	},
	// { prop: 'operation', label: '操作', fixed: 'right', width: 160, align: 'center' },
]);
// 页面基础数据
const aiOrderVisitState = ref([]);
const getBaseData = async () => {
	try {
		const { result } = await getSmartVisitBaseData();
		aiOrderVisitState.value = result.aiOrderVisitState;
	} catch (e) {
		console.log(e);
	}
};
// 打开弹窗
const openDialog = (row?: any) => {
	if (row) {
		state.dialogVisible = true;
		getBaseData();
		state.queryParams.id = row.id;
		queryList();
	}
};
// 手动查询，将页码设置为1
const handleQuery = () => {
	state.queryParams.PageIndex = 1;
	queryList();
};
// 查询智能回访明细表
const requestParams = ref({});
const queryList = async () => {
	state.loading = true;
	try {
		state.tableData = [];
		requestParams.value = state.queryParams;
		const res = await getSmartVisitDetail(state.queryParams);
		state.tableData = res.result.items ?? [];
		state.total = res.result.total ?? 0;
		state.loading = false;
	} catch (e) {
		console.log(e);
		state.loading = false;
		state.tableData = [];
	}
};
const close = () => {
	queryParamsRef.value?.resetFields();
	queryParamsRef.value?.resetFields();
};
// 播放录音
const playRecordRef = ref<RefType>();
const {recordPrefix,recordDownLoadPrefix} = getCurrentCityConfig();
const onPlaySoundRecording = (val: any) => {
	playRecordRef.value.openDialog(recordPrefix + val.recordingAbsolutePath);
};
// 下载录音
const onDownload = (row: any) => {
	ElMessageBox.confirm(`您确定要下载此录音吗？`, '提示', {
		confirmButtonText: '确认',
		cancelButtonText: '取消',
		type: 'warning',
		draggable: true,
		cancelButtonClass: 'default-button',
		autofocus: false,
	})
		.then(() => {
			fileDownload({ path: recordDownLoadPrefix + row.recordingAbsolutePath }).then((res: any) => {
				downloadFileByStream(res, row.recordingFileName);
			});
		})
		.catch(() => {});
};
// 重置所有工单列表
const queryParamsRef = ref<RefType>();
const resetQuery = (formEl: FormInstance | undefined) => {
	if (!formEl) return;
	formEl.resetFields();
	queryList();
};
defineExpose({
	openDialog,
});
</script>