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"
			:pagination="false"
			:toolButton="['refresh', 'setting', 'exportCurrent', 'exportAll']"
			@export-current="exportTable($event)"
			@export-all="exportTable($event, true)"
		>
			<template #title="{ row }">
				<order-detail :order="row.order" @updateList="queryList">{{ row.order?.title }}</order-detail>
			</template>
			<template #isSuccess="{ row }">
				<span v-if="row.isSuccess">{{ row.isSuccess === true ? '成功' : '失败' }}</span>
			</template>
			<template #acceptorName="{ row }">
				<span
					>{{ row.order?.acceptorName }} <span v-if="row.order?.acceptorStaffNo">[{{ row.order?.acceptorStaffNo }}]</span>
				</span>
			</template>
			<template #hyypj="{ row }">
				<span v-for="item in row.orderVisit?.orderVisitDetails">
					<span v-if="item.visitTarget === 10">{{ item.seatEvaluateText }}</span>
				</span>
			</template>
			<template #bmbjjg="{ row }">
				<span v-for="item in row.orderVisit?.orderVisitDetails">
					<span v-if="item.visitTarget === 20">{{ item.orgProcessingResults?.value }}</span>
				</span>
			</template>
			<!--			<template #bmbjtd="{ row }">
				<span v-for="item in row.orderVisit?.orderVisitDetails">
					<span v-if="item.visitTarget === 20">{{ item.orgHandledAttitude?.value }}</span>
				</span>
			</template>-->
			<template #bmsflx="{ row }">
				<span v-for="item in row.orderVisit?.orderVisitDetails">
					<span v-if="item.visitTarget === 20">{{ item.isContact === null ? '' : item.isContact === true ? '是' : '否' }}</span>
				</span>
			</template>
			<template #cljg="{ row }">
				<span v-for="item in row.orderVisit?.orderVisitDetails">
					<span v-if="item.visitTarget === 20">{{ item.volved === null ? '' : item.volved === true ? '已得到解决' : '未得到解决' }}</span>
				</span>
			</template>
		</ProTable>
		<!-- 分页 -->
		<pagination
			@pagination="queryList"
			:total="state.total"
			v-model:current-page="state.queryParams.PageIndex"
			v-model:page-size="state.queryParams.PageSize"
		/>
	</el-dialog>
</template>
<script setup lang="tsx">
import { formatDate } from '@/utils/formatTime';
import { FormInstance } from 'element-plus';
import { defineAsyncComponent, reactive, ref } from 'vue';
import { getSmartVisitBaseData, getSmartVisitDetail, getSmartVisitDetailExport } 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 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: 'row.title',
		width: 300,
	},
	{ prop: 'aiOrderVisitStateText', label: '外呼状态', width: 150 },
	{
		label: '是否成功',
		prop: 'isSuccess',
		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: 'hyypj',
		width: 120,
	},
	{
		label: '部门办件结果',
		prop: 'bmbjjg',
		width: 170,
	},
	/*	{
		label: '部门办件态度',
		prop: 'bmbjtd',
		width: 170,
	},*/
	{
		label: '部门是否联系',
		prop: 'bmsflx',
		width: 170,
	},
	{
		label: '处理结果',
		prop: 'cljg',
		width: 170,
	},
]);
// 页面基础数据
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) {
		getBaseData();
		state.queryParams.id = row.id;
		queryList();
	}
};
// 手动查询，将页码设置为1
const handleQuery = () => {
	state.queryParams.PageIndex = 1;
	queryList();
};
// 查询智能回访明细表
const queryList = async () => {
	state.dialogVisible = true;
	try {
		state.loading = true;
		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;
	}
};
const close = () => {
	queryParamsRef.value?.resetFields();
	queryParamsRef.value?.resetFields();
};
// 重置所有工单列表
const queryParamsRef = ref<RefType>();
const resetQuery = (formEl: FormInstance | undefined) => {
	if (!formEl) return;
	formEl.resetFields();
	queryList();
};
// 表格导出
const exportTable = (val: any, isExportAll = false) => {
	const columnInfos = val.map((item: any) => {
		return {
			prop: item.prop,
			name: item.label,
		};
	});
	const req = {
		queryDto: state.queryParams,
		columnInfos,
		isExportAll,
	};
	state.loading = true;
  getSmartVisitDetailExport(req)
		.then((res: any) => {
			state.loading = false;
			downloadFileByStream(res);
		})
		.catch(() => {
			state.loading = false;
		});
};
defineExpose({
	openDialog,
});
</script>