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

<template>
	<el-dialog v-model="state.dialogVisible" width="60%" draggable title="回访明细" append-to-body destroy-on-close @close="close" @opened="opened">
		<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>
		<vxe-toolbar
			ref="toolbarRef"
			:loading="state.loading"
			custom
			:refresh="{
				queryMethod: handleQuery,
			}"
			:tools="[{ toolRender: { name: 'exportCurrent' } }, { toolRender: { name: 'exportAll' } }]"
		>
		</vxe-toolbar>
		<vxe-table
			border
			:loading="state.loading"
			:data="state.tableData"
			:column-config="{ resizable: true }"
			:row-config="{ isCurrent: true, isHover: true, height: 30 }"
			ref="tableRef"
			show-overflow
			:scrollY="{ enabled: true, gt: 0 }"
			id="smartVisitDetail"
			:custom-config="{ storage: true }"
			:params="{ exportMethod: getSmartVisitDetailExport, exportParams: requestParams }"
			showHeaderOverflow
			max-height="300px"
		>
			<vxe-column field="no" title="工单编码" width="140"></vxe-column>
			<vxe-column field="title" title="工单标题" width="200">
				<template #default="{ row }">
					<order-detail :order="row.order" @updateList="queryList">{{ row.order?.title }}</order-detail>
				</template>
			</vxe-column>

			<vxe-column field="aiOrderVisitStateText" title="外呼状态" width="120"></vxe-column>
			<vxe-column field="isSuccessText" title="是否成功" width="120"></vxe-column>
			<vxe-column field="outerNo" title="外呼电话" width="120"></vxe-column>
			<vxe-column field="fromName" title="姓名" width="120"></vxe-column>
			<vxe-column field="fromGenderText" title="性别" width="120"></vxe-column>
			<vxe-column field="callTimes" title="重拨次数" width="120"></vxe-column>
			<vxe-column field="callTime" title="外呼时间" width="160">
				<template #default="{ row }">
					{{ formatDate(row.callTime, 'YYYY-mm-dd HH:MM:SS') }}
				</template>
			</vxe-column>
			<vxe-column field="startTime" title="受理时间" width="160">
				<template #default="{ row }">
					{{ formatDate(row.startTime, 'YYYY-mm-dd HH:MM:SS') }}
				</template>
			</vxe-column>
			<vxe-column field="filedTime" title="办结时间" width="160">
				<template #default="{ row }">
					{{ formatDate(row.filedTime, 'YYYY-mm-dd HH:MM:SS') }}
				</template>
			</vxe-column>

			<vxe-column field="seatEvaluateText" title="话务员评价" width="110"></vxe-column>
			<vxe-column field="orgProcessingResults" title="部门办件结果" width="140"></vxe-column>
			<vxe-column field="isContact" title="部门是否联系" width="120"></vxe-column>
			<vxe-column field="volved" title="处理结果" width="120"></vxe-column>
		</vxe-table>
		<pagination
			@pagination="queryList"
			:total="state.total"
			v-model:current-page="state.queryParams.PageIndex"
			v-model:page-size="state.queryParams.PageSize"
			:disabled="state.loading"
		/>
	</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 { exportOrder } from '@/api/business/order';

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 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 queryParamsRef = ref<RefType>();
const resetQuery = (formEl: FormInstance | undefined) => {
	if (!formEl) return;
	formEl.resetFields();
	queryList();
};
const toolbarRef = ref<RefType>();
const tableRef = ref<RefType>();
const opened = () => {
	if (tableRef.value && toolbarRef.value) {
		tableRef.value.connect(toolbarRef.value);
	}
};
defineExpose({
	openDialog,
});
</script>