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

const OrderDetail = defineAsyncComponent(() => import('@/components/OrderDetail/index.vue')); // 工单详情
const pagination = defineAsyncComponent(() => import('@/components/ProTable/components/Pagination.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: 150 },
	{
		label: '标题',
		prop: 'order.title',
		width: 300,
	},
	{ prop: 'aiOrderVisitStateText', label: '外呼状态', width: 150 },
	{
		label: '是否成功',
		prop: 'isSuccessText',
		width: 80,
	},
	{ prop: 'outerNo', label: '外呼电话', width: 150 },
	{ prop: 'order.fromName', label: '姓名', width: 150 },
	{ prop: 'order.fromGenderText', label: '性别', width: 150 },
	{
		label: '受理时间',
		prop: 'order.startTime',
		width: 170,
		render: (scope: any) => {
			return <span>{formatDate(scope.row.order?.startTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
		},
	},
	{
		label: '办结时间',
		prop: 'order.filedTime',
		width: 170,
		render: (scope: any) => {
			return <span>{formatDate(scope.row.order?.filedTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
		},
	},
	{
		label: '话务员评价',
		prop: 'seatEvaluateText',
		width: 120,
	},
	{
		label: '部门办件结果',
		prop: 'orgProcessingResults',
		width: 170,
	},
	{
		label: '部门是否联系',
		prop: 'isContact',
		width: 170,
	},
	{
		label: '处理结果',
		prop: 'volved',
		width: 170,
	},
  // { 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 onPlaySoundRecording = (val: any) => {
  playRecordRef.value.openDialog(
      import.meta.env.VITE_RECORD_PREFIX + val.recordingAbsolutePath,
      val.recordingFileName,
      val.recordingAbsolutePath,
      val.cpn,
      val.createdTime
  );
};
// 下载录音
const onDownload = (row: any) => {
  ElMessageBox.confirm(`您确定要下载此录音吗？`, '提示', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning',
    draggable: true,
    cancelButtonClass: 'default-button',
    autofocus: false,
  })
      .then(() => {
        fileDownload({ path: import.meta.env.VITE_RECORD_DOWNLOAD_PREFIX + 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>