reactor:回访管理表格重构完成;

.env.development

@@ -3,7 +3,7 @@ VITE_MODE_NAME=development
 # 防止部署多套系统到同一域名不同目录时，变量共用的问题 设置不同的前缀
 VITE_STORAGE_NAME=dev
 # 业务系统基础请求地址
-VITE_API_URL=http://110.188.24.28:50100
+VITE_API_URL=http://110.188.24.28:50300
 # 业务系统socket请求地址
 VITE_API_SOCKET_URL=http://110.188.24.28:50100/hubs/hotline
 # 业务系统文件上传上传请求地址

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

@@ -1,5 +1,5 @@
 <template>
-	<el-dialog v-model="state.dialogVisible" width="60%" draggable title="回访明细" append-to-body destroy-on-close @close="close">
+	<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" />
@@ -16,23 +16,72 @@
 				</el-button>
 			</el-form-item>
 		</el-form>
-		<ProTable
-			ref="proTableRef"
-			:columns="columns"
-			:data="state.tableData"
-			@updateTable="queryList"
+		<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:page-index="state.queryParams.PageIndex"
+			v-model:current-page="state.queryParams.PageIndex"
 			v-model:page-size="state.queryParams.PageSize"
-			:toolButton="['refresh', 'setting', 'exportCurrent', 'exportAll']"
-			:exportMethod="getSmartVisitDetailExport"
-			:exportParams="requestParams"
-		>
-			<template #title="{ row }">
-				<order-detail :order="row.order" @updateList="queryList">{{ row.order?.title }}</order-detail>
-			</template>
-		</ProTable>
+			:disabled="state.loading"
+		/>
 	</el-dialog>
 </template>
 <script setup lang="tsx">
@@ -40,8 +89,10 @@ 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: {
 		// 查询条件
@@ -56,66 +107,6 @@ const state = reactive({
 	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',
-	},
-]);
 // 页面基础数据
 const aiOrderVisitState = ref([]);
 const getBaseData = async () => {
@@ -168,6 +159,13 @@ const resetQuery = (formEl: FormInstance | undefined) => {
 	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,
 });

src/views/business/visit/components/Smart-visit-add.vue

@@ -1,5 +1,14 @@
 <template>
-	<el-dialog v-model="state.dialogVisible" width="60%" draggable title="新增智能回访任务" @close="close" append-to-body destroy-on-close>
+	<el-dialog
+		v-model="state.dialogVisible"
+		width="60%"
+		draggable
+		title="新增智能回访任务"
+		@close="close"
+		append-to-body
+		destroy-on-close
+		@opened="opened"
+	>
 		<el-divider content-position="left" class="mb30">
 			<el-text tag="b" size="large"> 回访任务内容 </el-text>
 		</el-divider>
@@ -52,20 +61,14 @@
 				</el-col>
 				<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="8">
 					<el-form-item label="受理类型" prop="AcceptType">
-						<el-select
-							v-model="state.queryParams.AcceptType"
-							placeholder="请选择受理类型"
-							clearable
-							class="w100"
-              @change="queryList"
-						>
+						<el-select v-model="state.queryParams.AcceptType" placeholder="请选择受理类型" clearable class="w100" @change="queryList">
 							<el-option v-for="item in state.acceptTypeOptions" :value="item.dicDataValue" :key="item.dicDataValue" :label="item.dicDataName" />
 						</el-select>
 					</el-form-item>
 				</el-col>
 				<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="8">
 					<el-form-item label="热点分类" prop="Hotspot">
-            <el-input v-model="state.queryParams.Hotspot" placeholder="热点分类名称" clearable @keyup.enter="queryList" />
+						<el-input v-model="state.queryParams.Hotspot" placeholder="热点分类名称" clearable @keyup.enter="queryList" />
 					</el-form-item>
 				</el-col>
 				<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="8">
@@ -78,16 +81,66 @@
 				</el-col>
 			</el-row>
 		</el-form>
-
-		<ProTable ref="proTableRef" :columns="columns" :data="state.tableData" @updateTable="queryList" :loading="state.loading" :pagination="false">
-			<template #title="{ row }">
-				<order-detail :order="row.order" @updateList="queryList">{{ row.order?.title }}</order-detail>
-			</template>
-		</ProTable>
+		<vxe-toolbar
+			ref="toolbarRef"
+			:loading="state.loading"
+			custom
+			:refresh="{
+				queryMethod: queryList,
+			}"
+		>
+		</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"
+			@checkbox-all="selectAllChangeEvent"
+			@checkbox-change="selectChangeEvent"
+			show-overflow
+			:scrollY="{ enabled: true, gt: 0 }"
+			id="smartVisitAdd"
+			:custom-config="{ storage: true }"
+			max-height="300px"
+		>
+			<vxe-column type="checkbox" width="50" align="center"></vxe-column>
+			<vxe-column field="order.no" title="工单编码" width="140"></vxe-column>
+			<vxe-column field="order.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="order.sourceChannel" title="来源渠道" width="110"></vxe-column>
+			<vxe-column field="visitStateText" title="回访状态" width="110"></vxe-column>
+			<vxe-column field="order.acceptType" title="受理类型" width="110"></vxe-column>
+			<vxe-column field="order.hotspotName" title="热点分类" width="150"></vxe-column>
+			<vxe-column field="order.currentStepName" title="当前节点" width="110"></vxe-column>
+			<vxe-column field="order.acceptorName" title="受理人" width="120"></vxe-column>
+			<vxe-column field="order.orgLevelOneName" title="一级部门" width="140"></vxe-column>
+			<vxe-column field="order.actualHandleOrgName" title="接办部门" width="140"></vxe-column>
+			<vxe-column field="order.startTime" title="受理时间" width="160">
+				<template #default="{ row }">
+					{{ formatDate(row.order?.creationTime, 'YYYY-mm-dd HH:MM:SS') }}
+				</template>
+			</vxe-column>
+			<vxe-column field="order.filedTime" title="办结时间" width="160">
+				<template #default="{ row }">
+					{{ formatDate(row.order?.filedTime, 'YYYY-mm-dd HH:MM:SS') }}
+				</template>
+			</vxe-column>
+			<vxe-column field="publishTime" title="发布时间" width="160">
+				<template #default="{ row }">
+					{{ formatDate(row.publishTime, 'YYYY-mm-dd HH:MM:SS') }}
+				</template>
+			</vxe-column>
+			<vxe-column field="employeeName" title="回访人" width="120"></vxe-column>
+		</vxe-table>
 		<template #footer>
 			<span class="dialog-footer">
 				<el-button @click="state.dialogVisible = false" class="default-button">取 消</el-button>
-				<el-button type="primary" @click="onSubmit(ruleFormRef)" :loading="state.loading" :disabled="!canChoose">确 定</el-button>
+				<el-button type="primary" @click="onSubmit(ruleFormRef)" :loading="state.loading" :disabled="!isChecked">确 定</el-button>
 			</span>
 		</template>
 	</el-dialog>
@@ -95,7 +148,7 @@
 <script setup lang="tsx">
 import { formatDate } from '@/utils/formatTime';
 import { ElMessage, FormInstance } from 'element-plus';
-import { reactive, ref, defineAsyncComponent, computed } from 'vue';
+import { reactive, ref, defineAsyncComponent, computed, onMounted } from 'vue';
 import { getSmartVisitRecord } from '@/api/smartVisit';
 import { defaultTimeStartEnd, shortcuts } from '@/utils/constants';
 import { smartVisitAdd, smartVisitBaseData } from '@/api/smartVisit';
@@ -119,59 +172,8 @@ const state = reactive({
 	}, // 表单数据
 	acceptTypeOptions: [],
 });
-const columns = ref<any[]>([
-	{ type: 'selection', fixed: 'left', width: 40, align: 'center' },
-	{ prop: 'order.no', label: '工单编码', width: 140 },
-	{prop: 'title',label: '标题',width: 200,},
-	{ prop: 'order.sourceChannel', label: '来源渠道', width: 100 },
-	{ prop: 'visitStateText', label: '回访状态', width: 100 },
-	{ prop: 'order.acceptType', label: '受理类型', width: 100 },
-	{ prop: 'order.hotspotName', label: '热点分类', width: 150 },
-	{ prop: 'order.currentStepName', label: '当前节点', width: 100 },
-	{
-		prop: 'order.acceptorName',
-		label: '受理人',
-		width: 120,
-	},
-	{ prop: 'order.orgLevelOneName', label: '一级部门', width: 140 },
-	{ prop: 'order.actualHandleOrgName', label: '接办部门', width: 140 },
-	{
-		label: '受理时间',
-		prop: 'order.startTime',
-		width: 160,
-		render: (scope: any) => {
-			return <span>{formatDate(scope.row.order?.startTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
-		},
-	},
-	{
-		label: '办结时间',
-		prop: 'order.filedTime',
-		width: 160,
-		render: (scope: any) => {
-			return <span>{formatDate(scope.row.order?.filedTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
-		},
-	},
-	{
-		label: '办结时间',
-		prop: 'order.filedTime',
-		width: 160,
-		render: (scope: any) => {
-			return <span>{formatDate(scope.row.order?.filedTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
-		},
-	},
-	{
-		label: '发布时间',
-		prop: 'publishTime',
-		width: 160,
-		render: (scope: any) => {
-			return <span>{formatDate(scope.row?.publishTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
-		},
-	},
-	{ prop: 'employeeName', label: '回访人', width: 120 },
-]);
-const proTableRef = ref<RefType>();
-const canChoose = computed(() => {
-	return proTableRef.value?.selectedList.length;
+const isChecked = computed(() => {
+	return Boolean(checkTable.value.length);
 });
 // 基础信息
 const getBaseData = async () => {
@@ -192,8 +194,8 @@ const close = () => {
 const queryList = async () => {
 	state.loading = true;
 	try {
-		const res = await getSmartVisitRecord(state.queryParams);
-		state.tableData = res.result;
+		const { result } = await getSmartVisitRecord(state.queryParams);
+		state.tableData = result;
 		state.loading = false;
 	} catch (e) {
 		console.log(e);
@@ -207,8 +209,7 @@ const resetQuery = (formEl: FormInstance | undefined) => {
 	formEl.resetFields();
 	queryList();
 };
-
-// 确定选择所有工单到重复工单
+// 保存
 const ruleFormRef = ref<RefType>();
 const onSubmit = async (formEl: FormInstance | undefined) => {
 	if (!formEl) return;
@@ -220,7 +221,7 @@ const onSubmit = async (formEl: FormInstance | undefined) => {
 			beginTime: state.ruleForm.crTime[0],
 			endTime: state.ruleForm.crTime[1],
 			festivalBan: state.ruleForm.festivalBan,
-			aiOrderVisitDetails: proTableRef.value?.selectedList.map((item: any) => {
+			aiOrderVisitDetails: checkTable.value.map((item: any) => {
 				return {
 					orderId: item.order?.id,
 					orderVisitId: item.id,
@@ -240,6 +241,29 @@ const onSubmit = async (formEl: FormInstance | undefined) => {
 			});
 	});
 };
+const tableRef = ref<RefType>();
+const checkTable = ref<EmptyArrayType>([]);
+const selectAllChangeEvent = ({ checked }) => {
+	if (tableRef.value) {
+		const records = tableRef.value.getCheckboxRecords();
+		checkTable.value = records;
+		console.log(checked ? '所有勾选事件' : '所有取消事件', records);
+	}
+};
+
+const selectChangeEvent = ({ checked }) => {
+	if (tableRef.value) {
+		const records = tableRef.value.getCheckboxRecords();
+		checkTable.value = records;
+		console.log(checked ? '勾选事件' : '取消事件', records);
+	}
+};
+const toolbarRef = ref<RefType>();
+const opened = () => {
+	if (tableRef.value && toolbarRef.value) {
+		tableRef.value.connect(toolbarRef.value);
+	}
+};
 defineExpose({
 	openDialog,
 });

src/views/business/visit/components/Visit-detail.vue

@@ -28,7 +28,7 @@
 							</el-col>
 							<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
 								<el-form-item label="受理时间" class="mb5">
-									<span>{{ formatDate(state.orderDetail.startTime,'YYYY-MM-DD HH:mm:ss') }}</span></el-form-item
+									<span>{{ formatDate(state.orderDetail.startTime, 'YYYY-MM-DD HH:mm:ss') }}</span></el-form-item
 								>
 							</el-col>
 							<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
@@ -237,22 +237,33 @@
 								<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" v-if="['ZiGong'].includes(themeConfig.appScope)">
 									<el-form-item label="历史回访记录" class="w100">
 										<div class="w100">
-											<ProTable
-												ref="proTableRef"
-												:columns="columns"
-												:data="state.histories"
-												@updateTable="queryList"
-												:loading="state.loading"
-												:pagination="false"
+											<vxe-table
 												border
-												:toolButton="false"
-												class="w100"
+												:loading="state.loading"
+												:data="state.histories"
+												:column-config="{ resizable: true }"
+												:row-config="{ isCurrent: true, isHover: true, height: 30 }"
+												show-overflow
+												:scrollY="{ enabled: true, gt: 0 }"
+												max-height="300px"
 											>
-												<template #empty> 暂无数据 </template>
-												<template #operation="{ row }">
-													<el-button link type="primary" @click="onPlayRecord(row)" title="回访录音" v-if="row.callId"> 回访录音 </el-button>
-												</template>
-											</ProTable>
+												<vxe-column field="voiceEvaluateTxt" title="语音评价" width="110"></vxe-column>
+												<vxe-column field="seatEvaluateTxt" title="话务员评价" width="110"></vxe-column>
+												<vxe-column field="visitOrgName" title="部门名称" width="140"></vxe-column>
+												<vxe-column field="orgProcessingResultsValue" title="部门办件结果" width="110"></vxe-column>
+												<vxe-column field="orgHandledAttitudeValue" title="部门办件态度" width="110"></vxe-column>
+												<vxe-column field="visitContent" title="部门评价内容" width="110"></vxe-column>
+												<vxe-column field="visitTime" title="回访时间" width="160">
+													<template #default="{ row }">
+														{{ formatDate(row.visitTime, 'YYYY-mm-dd HH:MM:SS') }}
+													</template>
+												</vxe-column>
+												<vxe-column title="回访录音" fixed="right" width="90" align="center">
+													<template #default="{ row }">
+														<el-button link type="primary" @click="onPlayRecord(row)" title="回访录音" v-if="row.callId"> 回访录音 </el-button>
+													</template>
+												</vxe-column>
+											</vxe-table>
 										</div>
 									</el-form-item>
 								</el-col>
@@ -483,22 +494,33 @@
 								<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" v-if="['ZiGong'].includes(themeConfig.appScope)">
 									<el-form-item label="历史回访记录">
 										<div class="w100">
-											<ProTable
-												ref="proTableRef"
-												:columns="columns"
-												:data="state.histories"
-												@updateTable="queryList"
-												:loading="state.loading"
-												:pagination="false"
+											<vxe-table
 												border
-												:toolButton="false"
-												class="w100"
+												:loading="state.loading"
+												:data="state.histories"
+												:column-config="{ resizable: true }"
+												:row-config="{ isCurrent: true, isHover: true, height: 30 }"
+												show-overflow
+												:scrollY="{ enabled: true, gt: 0 }"
+												max-height="300px"
 											>
-												<template #empty> 暂无数据 </template>
-												<template #operation="{ row }">
-													<el-button link type="primary" @click="onPlayRecord(row)" title="回访录音" v-if="row.callId"> 回访录音 </el-button>
-												</template>
-											</ProTable>
+												<vxe-column field="voiceEvaluateTxt" title="语音评价" width="110"></vxe-column>
+												<vxe-column field="seatEvaluateTxt" title="话务员评价" width="110"></vxe-column>
+												<vxe-column field="visitOrgName" title="部门名称" width="140"></vxe-column>
+												<vxe-column field="orgProcessingResultsValue" title="部门办件结果" width="110"></vxe-column>
+												<vxe-column field="orgHandledAttitudeValue" title="部门办件态度" width="110"></vxe-column>
+												<vxe-column field="visitContent" title="部门评价内容" width="110"></vxe-column>
+												<vxe-column field="visitTime" title="回访时间" width="160">
+													<template #default="{ row }">
+														{{ formatDate(row.visitTime, 'YYYY-mm-dd HH:MM:SS') }}
+													</template>
+												</vxe-column>
+												<vxe-column title="回访录音" fixed="right" width="90" align="center">
+													<template #default="{ row }">
+														<el-button link type="primary" @click="onPlayRecord(row)" title="回访录音" v-if="row.callId"> 回访录音 </el-button>
+													</template>
+												</vxe-column>
+											</vxe-table>
 										</div>
 									</el-form-item>
 								</el-col>

src/views/business/visit/index.vue

@@ -1,82 +1,156 @@
 <template>
 	<div class="business-visit-container layout-padding">
 		<div class="layout-padding-auto layout-padding-view pd20">
-			<ProTable
-				ref="proTableRef"
-				:columns="columns"
-				:data="state.tableData"
-				@updateTable="queryList"
+			<el-form :model="state.queryParams" ref="ruleFormRef" @submit.native.prevent inline>
+				<el-form-item label="数据范围" prop="IsProvince">
+					<el-segmented
+						:options="[
+							{
+								value: 'all',
+								label: '全部',
+							},
+							{
+								value: 'city',
+								label: '市工单',
+							},
+							{
+								value: 'province',
+								label: '省工单',
+							},
+						]"
+						v-model="fastSearch"
+						@change="fastSearchChange"
+						:disabled="state.loading"
+					/>
+				</el-form-item>
+				<el-form-item label="工单标题" prop="Keyword">
+					<el-input v-model.trim="state.queryParams.Keyword" placeholder="工单标题" clearable @keyup.enter="handleQuery" class="keyword-input" />
+				</el-form-item>
+				<el-form-item label="工单编码" prop="No">
+					<el-input v-model.trim="state.queryParams.No" placeholder="工单编码" clearable @keyup.enter="handleQuery" class="keyword-input" />
+				</el-form-item>
+				<el-form-item label="" label-width="0">
+					<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>
+			<vxe-toolbar
+				ref="toolbarRef"
 				:loading="state.loading"
+				custom
+				:refresh="{
+					queryMethod: handleQuery,
+				}"
+			>
+			</vxe-toolbar>
+			<div style="overflow: hidden; width: 100%; height: 100%; flex: 1">
+				<vxe-table
+					border
+					:loading="state.loading"
+					:data="state.tableData"
+					:column-config="{ resizable: true }"
+					:row-config="{ isCurrent: true, isHover: true, height: 30 }"
+					ref="tableRef"
+					height="auto"
+					auto-resize
+					show-overflow
+					:scrollY="{ enabled: true, gt: 0 }"
+					id="businessVisit"
+					:custom-config="{
+						storage: true,
+						checkMethod({ column }) {
+							if (['ZiGong', 'LuZhou'].includes(themeConfig.appScope)) {
+								return !['isEffectiveAiVisitText'].includes(column.field);
+							} else if (['YiBin'].includes(themeConfig.appScope)) {
+								return ![''].includes(column.field);
+							}
+						},
+					}"
+					showHeaderOverflow
+				>
+					<vxe-column field="order.expiredStatusText" title="超期状态" width="90" align="center">
+						<template #default="{ row }">
+							<span :class="'overdue-status-' + row.order?.expiredStatus" :title="row.order?.expiredStatusText"></span>
+						</template>
+					</vxe-column>
+					<vxe-column field="order.no" title="工单编码" width="140"></vxe-column>
+					<vxe-column field="order.isProvinceText" title="省/市工单" width="100"></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="order.sourceChannel" title="来源渠道" width="110"></vxe-column>
+					<vxe-column field="visitStateText" title="回访状态" width="100"></vxe-column>
+					<vxe-column field="visitTypeText" title="回访方式" width="100"></vxe-column>
+					<vxe-column
+						field="isEffectiveAiVisitText"
+						title="有效智能回访"
+						width="150"
+						:visible="['YiBin'].includes(themeConfig.appScope)"
+					></vxe-column>
+					<vxe-column field="order.acceptType" title="受理类型" width="110"></vxe-column>
+					<vxe-column field="order.hotspotName" title="热点分类" width="150"></vxe-column>
+					<vxe-column field="order.acceptorName" title="受理人" width="120"></vxe-column>
+					<vxe-column field="order.orgLevelOneName" title="一级部门" width="150"></vxe-column>
+					<vxe-column field="order.actualHandleOrgName" title="接办部门" width="150"></vxe-column>
+					<vxe-column field="order.startTime" title="受理时间" width="160">
+						<template #default="{ row }">
+							{{ formatDate(row.order?.startTime, 'YYYY-mm-dd HH:MM:SS') }}
+						</template>
+					</vxe-column>
+					<vxe-column field="order.filedTime" title="办结时间" width="160">
+						<template #default="{ row }">
+							{{ formatDate(row.order?.filedTime, 'YYYY-mm-dd HH:MM:SS') }}
+						</template>
+					</vxe-column>
+					<vxe-column field="publishTime" title="发布时间" width="160">
+						<template #default="{ row }">
+							{{ formatDate(row.publishTime, 'YYYY-mm-dd HH:MM:SS') }}
+						</template>
+					</vxe-column>
+					<vxe-column field="creationTime" title="回访任务创建时间" width="170">
+						<template #default="{ row }">
+							{{ formatDate(row.creationTime, 'YYYY-mm-dd HH:MM:SS') }}
+						</template>
+					</vxe-column>
+					<vxe-column field="employeeName" title="回访人" width="150"></vxe-column>
+					<vxe-column field="visitTime" title="回访时间" width="160">
+						<template #default="{ row }">
+							{{ formatDate(row.visitTime, 'YYYY-mm-dd HH:MM:SS') }}
+						</template>
+					</vxe-column>
+					<vxe-column field="hwyPj" title="话务员满意度" width="120">
+						<template #default="{ row }">
+							<span v-for="item in row.orderVisitDetails">
+								<span v-if="item.visitTarget === 10">{{ item.seatEvaluateText }}</span>
+							</span>
+						</template>
+					</vxe-column>
+					<vxe-column title="操作" fixed="right" width="200" align="center">
+						<template #default="{ row }">
+							<el-button link type="primary" @click="visitDetail(row)" title="查看回访详情"> 回访详情 </el-button>
+							<el-button
+								link
+								type="primary"
+								@click="updateVisitResult(row)"
+								title="修改回访结果"
+								v-auth="'business:visit:visitEdit'"
+								v-if="['ZiGong'].includes(themeConfig.appScope) && row.visitState === 30"
+							>
+								修改回访结果
+							</el-button>
+						</template>
+					</vxe-column>
+				</vxe-table>
+			</div>
+			<pagination
+				@pagination="queryList"
 				:total="state.total"
-				v-model:page-index="state.queryParams.PageIndex"
+				v-model:current-page="state.queryParams.PageIndex"
 				v-model:page-size="state.queryParams.PageSize"
-			>
-				<template #table-search>
-					<el-form :model="state.queryParams" ref="ruleFormRef" @submit.native.prevent inline>
-						<el-form-item label="数据范围" prop="IsProvince">
-							<el-segmented
-								:options="[
-									{
-										value: 'all',
-										label: '全部',
-									},
-									{
-										value: 'city',
-										label: '市工单',
-									},
-									{
-										value: 'province',
-										label: '省工单',
-									},
-								]"
-								v-model="fastSearch"
-								@change="fastSearchChange"
-								:disabled="state.loading"
-							/>
-						</el-form-item>
-						<el-form-item label="工单标题" prop="Keyword">
-							<el-input v-model.trim="state.queryParams.Keyword" placeholder="工单标题" clearable @keyup.enter="handleQuery" class="keyword-input" />
-						</el-form-item>
-						<el-form-item label="工单编码" prop="No">
-							<el-input v-model.trim="state.queryParams.No" placeholder="工单编码" clearable @keyup.enter="handleQuery" class="keyword-input" />
-						</el-form-item>
-						<el-form-item label="" label-width="0">
-							<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 #expiredStatusText="{ row }">
-					<span :class="'overdue-status-' + row.order?.expiredStatus" :title="row.order?.expiredStatusText"></span>
-				</template>
-				<template #title="{ row }">
-					<order-detail :order="row.order" @updateList="queryList">{{ row.order?.title }}</order-detail>
-				</template>
-				<template #voicePj="{ row }">
-					<span v-for="item in row.orderVisitDetails">
-						<span v-if="item.visitTarget === 10">{{ item.voiceEvaluateText }}</span>
-					</span>
-				</template>
-				<template #hwyPj="{ row }">
-					<span v-for="item in row.orderVisitDetails">
-						<span v-if="item.visitTarget === 10">{{ item.seatEvaluateText }}</span>
-					</span>
-				</template>
-				<!-- 表格操作 -->
-				<template #operation="{ row }">
-					<el-button link type="primary" @click="visitDetail(row)" title="查看回访详情"> 回访详情 </el-button>
-					<el-button
-						link
-						type="primary"
-						@click="updateVisitResult(row)"
-						title="修改回访结果"
-						v-auth="'business:visit:visitEdit'"
-						v-if="['ZiGong'].includes(themeConfig.appScope) && row.visitState === 30"
-					>
-						修改回访结果
-					</el-button>
-				</template>
-			</ProTable>
+				:disabled="state.loading"
+			/>
 		</div>
 		<!--	更多查询	-->
 		<el-drawer v-model="drawer" title="更多查询" size="500px">
@@ -93,7 +167,7 @@
 						<el-option label="否" value="false" />
 					</el-select>
 				</el-form-item>
-<!--				<el-form-item label="回访状态" prop="VisitStateQuery" v-if="['YiBin','LuZhou'].includes(themeConfig.appScope)">
+				<!--				<el-form-item label="回访状态" prop="VisitStateQuery" v-if="['YiBin','LuZhou'].includes(themeConfig.appScope)">
 					<el-select v-model="state.queryParams.VisitStateQuery" placeholder="请选择回访状态" @change="handleQuery">
 						<el-option v-for="item in visitStateQuery" :value="item.key" :key="item.key" :label="item.value" />
 					</el-select>
@@ -169,7 +243,7 @@
 </template>
 
 <script setup lang="tsx" name="businessVisit">
-import { computed, defineAsyncComponent, onMounted, reactive, ref } from 'vue';
+import {  defineAsyncComponent, onMounted, reactive, ref } from 'vue';
 import { FormInstance } from 'element-plus';
 import { formatDate } from '@/utils/formatTime';
 import { visitList, visitSearchBaseData } from '@/api/business/visit';
@@ -181,9 +255,9 @@ import { storeToRefs } from 'pinia';
 // 引入组件
 const VisitDetailCom = defineAsyncComponent(() => import('@/views/business/visit/components/Visit-detail.vue')); // 回访
 const OrderDetail = defineAsyncComponent(() => import('@/components/OrderDetail/index.vue')); // 工单详情
+const pagination = defineAsyncComponent(() => import('@/components/ProTable/components/Pagination.vue')); // 分页
 
 // 定义变量内容
-const proTableRef = ref<RefType>(); // 表格ref
 const fastSearch = ref('all'); // tab位置
 const fastSearchChange = (val: string) => {
 	fastSearch.value = val;
@@ -202,70 +276,6 @@ const fastSearchChange = (val: string) => {
 };
 const storesThemeConfig = useThemeConfig();
 const { themeConfig } = storeToRefs(storesThemeConfig);
-const operationWidth = computed(()=>{
-	return ['ZiGong'].includes(themeConfig.value.appScope) ? 190 : 90;
-})
-// 表格配置项
-const columns = ref<any[]>([
-	{ prop: 'order.expiredStatusText', label: '超期状态', align: 'center', minWidth: 80 },
-	{ prop: 'order.no', label: '工单编码', minWidth: 140 },
-	{ prop: 'order.isProvinceText', label: '省/市工单', minWidth: 90 },
-	{ prop: 'order.title', label: '工单标题', minWidth: 200 },
-	{ prop: 'order.sourceChannel', label: '来源渠道', minWidth: 100 },
-	{ prop: 'visitStateText', label: '回访状态', minWidth: 100 },
-	{ prop: 'visitTypeText', label: '回访方式', minWidth: 100 },
-	{ prop: 'isEffectiveAiVisitText', label: '有效智能回访', minWidth: 110, isShow: ['YiBin'].includes(themeConfig.value.appScope) },
-	{ prop: 'order.acceptType', label: '受理类型', minWidth: 100 },
-	{ prop: 'order.hotspotName', label: '热点分类', minWidth: 150 },
-	{ prop: 'order.acceptorName', label: '受理人', minWidth: 120 },
-	{ prop: 'order.orgLevelOneName', label: '一级部门', minWidth: 140 },
-	{ prop: 'order.actualHandleOrgName', label: '接办部门', minWidth: 140 },
-	{
-		prop: 'order.startTime',
-		label: '受理时间',
-		minWidth: 160,
-		render: (scope) => {
-			return <span>{formatDate(scope.row.order?.startTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
-		},
-	},
-	{
-		prop: 'order.filedTime',
-		label: '办结时间',
-		minWidth: 160,
-		render: (scope) => {
-			return <span>{formatDate(scope.row.order?.filedTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
-		},
-	},
-	{
-		prop: 'publishTime',
-		label: '发布时间',
-		minWidth: 160,
-		render: (scope) => {
-			return <span>{formatDate(scope.row.publishTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
-		},
-	},
-	{
-		prop: 'creationTime',
-		label: '回访任务创建时间',
-		minWidth: 160,
-		render: (scope) => {
-			return <span>{formatDate(scope.row.creationTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
-		},
-	},
-	{ prop: 'employeeName', label: '回访人', minWidth: 120 },
-	{
-		prop: 'visitTime',
-		label: '回访时间',
-		minWidth: 160,
-		render: (scope) => {
-			return <span>{formatDate(scope.row.visitTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
-		},
-	},
-	{ prop: 'order.counterSignTypeText', label: '是否会签', minWidth: 90 },
-	// { prop: 'voicePj', label: '语音评价', width: 150 },
-	{ prop: 'hwyPj', label: '话务员满意度', minWidth: 120 },
-	{ prop: 'operation', label: '操作', fixed: 'right', width: operationWidth, align: 'center' },
-]);
 const state = reactive<any>({
 	queryParams: {
 		// 查询条件
@@ -278,7 +288,7 @@ const state = reactive<any>({
 		IsCountersign: null, // 是否会签
 		FiledType: null, // 归档类型
 		IsProvince: null,
-		EmployeeName:null,
+		EmployeeName: null,
 		crTime: [],
 		StartTime: null,
 		EndTime: null,
@@ -336,7 +346,7 @@ const queryList = () => {
 				state.loading = false;
 				reject();
 			});
-	})
+	});
 };
 
 /** 重置按钮操作 */
@@ -358,11 +368,16 @@ const visitDetail = (row: any) => {
 };
 // 修改回访结果
 const updateVisitResult = (row: any) => {
-	visitDetailRef.value.openDialog(row,'修改回访结果');
+	visitDetailRef.value.openDialog(row, '修改回访结果');
 };
+const toolbarRef = ref<RefType>();
+const tableRef = ref<RefType>();
 onMounted(() => {
-	queryList().then(()=>{
+	queryList().then(() => {
 		getBaseData();
-	})
+	});
+	if (tableRef.value && toolbarRef.value) {
+		tableRef.value.connect(toolbarRef.value);
+	}
 });
 </script>

src/views/business/visit/reverse.vue

@@ -5,65 +5,114 @@
 				<el-tab-pane name="true" label="扭转待评判" :disabled="state.loading"></el-tab-pane>
 				<el-tab-pane name="false" label="扭转已评判" :disabled="state.loading"></el-tab-pane>
 			</el-tabs>
-			<ProTable
-				ref="proTableRef"
-				:columns="columns"
-				:data="state.tableData"
-				@updateTable="queryList"
+			<el-form :model="state.queryParams" ref="ruleFormRef" @submit.native.prevent inline>
+				<el-form-item label="工单标题" prop="Title">
+					<el-input v-model.trim="state.queryParams.Title" placeholder="工单标题" clearable @keyup.enter="handleQuery" class="keyword-input" />
+				</el-form-item>
+				<el-form-item label="工单编码" prop="No">
+					<el-input v-model.trim="state.queryParams.No" placeholder="工单编码" clearable @keyup.enter="handleQuery" class="keyword-input" />
+				</el-form-item>
+				<el-form-item label="">
+					<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>
+			<vxe-toolbar
+				ref="toolbarRef"
 				: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="visitTurnExport"
-				:exportParams="requestParams"
+				custom
+				:refresh="{
+					queryMethod: handleQuery,
+				}"
+				:tools="[{ toolRender: { name: 'exportCurrent' } }, { toolRender: { name: 'exportAll' } }]"
 			>
-				<template #table-search>
-					<el-form :model="state.queryParams" ref="ruleFormRef" @submit.native.prevent inline>
-						<el-form-item label="工单标题" prop="Title">
-							<el-input v-model.trim="state.queryParams.Title" placeholder="工单标题" clearable @keyup.enter="handleQuery" class="keyword-input" />
-						</el-form-item>
-						<el-form-item label="工单编码" prop="No">
-							<el-input v-model.trim="state.queryParams.No" placeholder="工单编码" clearable @keyup.enter="handleQuery" class="keyword-input" />
-						</el-form-item>
-						<el-form-item label="">
-							<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 #tableHeader="scope">
+				<template #buttons>
 					<el-button
 						type="primary"
 						@click="onReverseMultiple"
-						:disabled="!scope.isSelected"
+						:disabled="isChecked"
 						:loading="state.loading"
 						v-auth="'business:visit:reverse:multiple'"
 						v-if="state.queryParams.IsIngString === 'true'"
-						>批量扭转评判<span v-if="proTableRef?.selectedList?.length">({{ proTableRef?.selectedList?.length }})</span>
-					</el-button>
-				</template>
-				<template #expiredStatusText="{ row }">
-					<span :class="'overdue-status-' + row.order?.expiredStatus" :title="row.order?.expiredStatusText"></span>
-				</template>
-				<template #title="{ row }">
-					<order-detail :order="row.order" @updateList="queryList">{{ row.order?.title }}</order-detail>
-				</template>
-				<!-- 表格操作 -->
-				<template #operation="{ row }">
-					<el-button
-						link
-						type="primary"
-						@click="onReverse(row)"
-						title="扭转评判"
-						v-auth="'business:visit:reverse'"
-						v-if="[0].includes(row.judgeState)"
-					>
-						扭转评判
+						>批量扭转评判
 					</el-button>
-					<el-button link type="primary" @click="visitDetail(row)" title="查看回访详情"> 回访详情 </el-button>
 				</template>
-			</ProTable>
+			</vxe-toolbar>
+			<div style="overflow: hidden; width: 100%; height: 100%; flex: 1">
+				<vxe-table
+					border
+					:loading="state.loading"
+					:data="state.tableData"
+					:column-config="{ resizable: true }"
+					:row-config="{ isCurrent: true, isHover: true, height: 30 }"
+					ref="tableRef"
+					height="auto"
+					auto-resize
+					show-overflow
+					:scrollY="{ enabled: true, gt: 0 }"
+					id="businessVisitReverse"
+					:custom-config="{ storage: true }"
+					:params="{ exportMethod: visitTurnExport, exportParams: requestParams }"
+					showHeaderOverflow
+					@checkbox-all="selectAllChangeEvent"
+					@checkbox-change="selectChangeEvent"
+				>
+					<vxe-column type="checkbox" width="50" align="center" :visible="state.queryParams.IsIngString === 'true'"></vxe-column>
+					<vxe-column field="order.expiredStatusText" title="超期状态" width="90" align="center">
+						<template #default="{ row }">
+							<span :class="'overdue-status-' + row.order?.expiredStatus" :title="row.order?.expiredStatusText"></span>
+						</template>
+					</vxe-column>
+					<vxe-column field="order.statusText" title="工单状态" width="100"></vxe-column>
+					<vxe-column field="order.sourceChannel" title="来源渠道" width="110"></vxe-column>
+					<vxe-column field="order.currentStepName" title="当前节点" width="120"></vxe-column>
+					<vxe-column field="order.no" title="工单编码" width="140"></vxe-column>
+					<vxe-column field="order.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="judgeStateText" title="评判状态" width="100"></vxe-column>
+					<vxe-column field="order.startTime" title="受理时间" width="160">
+						<template #default="{ row }">
+							{{ formatDate(row.order?.startTime, 'YYYY-mm-dd HH:MM:SS') }}
+						</template>
+					</vxe-column>
+					<vxe-column field="order.actualHandleOrgName" title="接办部门" width="150"></vxe-column>
+					<vxe-column field="order.filedTime" title="办结时间" width="160">
+						<template #default="{ row }">
+							{{ formatDate(row.order?.filedTime, 'YYYY-mm-dd HH:MM:SS') }}
+						</template>
+					</vxe-column>
+					<vxe-column field="employeeName" title="回访人" width="120"></vxe-column>
+					<vxe-column field="order.acceptType" title="受理类型" width="120"></vxe-column>
+					<vxe-column field="order.acceptorName" title="受理人" width="120"></vxe-column>
+					<vxe-column field="order.hotspotName" title="热点分类" width="150"></vxe-column>
+
+					<vxe-column title="操作" fixed="right" width="160" align="center">
+						<template #default="{ row }">
+							<el-button
+								link
+								type="primary"
+								@click="onReverse(row)"
+								title="扭转评判"
+								v-auth="'business:visit:reverse'"
+								v-if="[0].includes(row.judgeState)"
+							>
+								扭转评判
+							</el-button>
+							<el-button link type="primary" @click="visitDetail(row)" title="查看回访详情"> 回访详情 </el-button>
+						</template>
+					</vxe-column>
+				</vxe-table>
+			</div>
+			<pagination
+				@pagination="queryList"
+				:total="state.total"
+				v-model:current-page="state.queryParams.PageIndex"
+				v-model:page-size="state.queryParams.PageSize"
+				:disabled="state.loading"
+			/>
 		</div>
 		<!-- 扭转退回 -->
 		<reverse-audit ref="reverseAuditRef" @updateList="queryList" />
@@ -172,7 +221,7 @@
 	</div>
 </template>
 <script setup lang="tsx" name="businessVisitReverse">
-import { defineAsyncComponent, onMounted, reactive, ref } from 'vue';
+import { computed, defineAsyncComponent, onMounted, reactive, ref } from 'vue';
 import { FormInstance } from 'element-plus';
 import { formatDate } from '@/utils/formatTime';
 import { defaultTimeStartEnd, shortcuts } from '@/utils/constants';
@@ -183,41 +232,8 @@ import { listBaseData } from '@/api/judicial';
 const OrderDetail = defineAsyncComponent(() => import('@/components/OrderDetail/index.vue')); // 工单详情
 const ReverseAudit = defineAsyncComponent(() => import('@/views/business/visit/components/Reverse-audit.vue')); // 扭转退回
 const VisitDetailCom = defineAsyncComponent(() => import('@/views/business/visit/components/Visit-detail.vue')); // 回访
+const pagination = defineAsyncComponent(() => import('@/components/ProTable/components/Pagination.vue')); // 分页
 // 定义变量内容
-const proTableRef = ref<RefType>(); // 表格ref
-// 表格配置项
-const columns = ref<any[]>([
-	{ type: 'selection', fixed: 'left', width: 40, align: 'center' },
-	{ prop: 'order.expiredStatusText', label: '超期状态', align: 'center', width: 80 },
-	{ prop: 'order.statusText', label: '工单状态', minWidth: 100 },
-	{ prop: 'order.sourceChannel', label: '来源渠道', minWidth: 100 },
-	{ prop: 'order.currentStepName', label: '当前节点', minWidth: 120 },
-	{ prop: 'order.no', label: '工单编码', minWidth: 140 },
-	{ prop: 'order.title', label: '工单标题', minWidth: 200 },
-	{ prop: 'judgeStateText', label: '评判状态', minWidth: 100 },
-	{
-		prop: 'order.startTime',
-		label: '受理时间',
-		minWidth: 160,
-		render: (scope) => {
-			return <span>{formatDate(scope.row.order?.startTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
-		},
-	},
-	{ prop: 'order.actualHandleOrgName', label: '接办部门', minWidth: 150 },
-	{
-		prop: 'order.filedTime',
-		label: '办结时间',
-		minWidth: 160,
-		render: (scope) => {
-			return <span>{formatDate(scope.row.order?.filedTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
-		},
-	},
-	{ prop: 'employeeName', label: '回访人', minWidth: 120 },
-	{ prop: 'order.acceptType', label: '受理类型', minWidth: 100 },
-	{ prop: 'order.acceptorName', label: '受理人', minWidth: 120 },
-	{ prop: 'order.hotspotName', label: '热点分类', minWidth: 150 },
-	{ prop: 'operation', label: '操作', fixed: 'right', width: 160, align: 'center' },
-]);
 const state = reactive<any>({
 	queryParams: {
 		// 查询条件
@@ -314,16 +330,40 @@ const visitDetail = (row: any) => {
 // 批量扭转退回
 const reverseAuditRef = ref<RefType>();
 const onReverseMultiple = () => {
-	const ids = proTableRef.value.selectedList.map((item: any) => item.id);
+	const ids = checkTable.value.map((item: any) => item.id);
 	reverseAuditRef.value.openDialog(ids);
 };
 // 扭转退回
 const onReverse = (row: any) => {
 	reverseAuditRef.value.openDialog([row.id]);
 };
+const tableRef = ref<RefType>();
+const checkTable = ref<EmptyArrayType>([]);
+const selectAllChangeEvent = ({ checked }) => {
+	if (tableRef.value) {
+		const records = tableRef.value.getCheckboxRecords();
+		checkTable.value = records;
+		console.log(checked ? '所有勾选事件' : '所有取消事件', records);
+	}
+};
+
+const selectChangeEvent = ({ checked }) => {
+	if (tableRef.value) {
+		const records = tableRef.value.getCheckboxRecords();
+		checkTable.value = records;
+		console.log(checked ? '勾选事件' : '取消事件', records);
+	}
+};
+const isChecked = computed(() => {
+	return !Boolean(checkTable.value.length);
+});
+const toolbarRef = ref<RefType>();
 onMounted(() => {
 	queryList().then(() => {
 		getBaseData();
 	});
+	if (tableRef.value && toolbarRef.value) {
+		tableRef.value.connect(toolbarRef.value);
+	}
 });
 </script>

src/views/business/visit/smart.vue

@@ -1,76 +1,119 @@
 <template>
 	<div class="business-visit-smart-container layout-padding">
 		<div class="layout-padding-auto layout-padding-view pd20">
-			<ProTable
-				ref="proTableRef"
-				:columns="columns"
-				:data="state.tableData"
-				@updateTable="queryList"
+			<el-form :model="state.queryParams" ref="ruleFormRef" inline @submit.native.prevent>
+				<el-form-item label="任务名称" prop="Keyword">
+					<el-input v-model.trim="state.queryParams.Keyword" placeholder="回访任务名称" clearable @keyup.enter="handleQuery" class="keyword-input" />
+				</el-form-item>
+				<el-form-item label="任务状态" prop="AiOrderVisitTaskState">
+					<el-select v-model="state.queryParams.AiOrderVisitTaskState" placeholder="请选择任务状态" @change="handleQuery" clearable>
+						<el-option v-for="item in aiOrderVisitTaskState" :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="drawer = true" class="default-button"> <SvgIcon name="ele-Search" class="mr5" />更多查询</el-button>
+				</el-form-item>
+			</el-form>
+			<vxe-toolbar
+				ref="toolbarRef"
 				: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="getSmartVisitExport"
-				:exportParams="requestParams"
-				border
+				custom
+				:refresh="{
+					queryMethod: handleQuery,
+				}"
+				:tools="[{ toolRender: { name: 'exportCurrent' } }, { toolRender: { name: 'exportAll' } }]"
 			>
-				<template #table-search>
-					<el-form :model="state.queryParams" ref="ruleFormRef" inline @submit.native.prevent>
-						<el-form-item label="任务名称" prop="Keyword">
-							<el-input v-model.trim="state.queryParams.Keyword" placeholder="回访任务名称" clearable @keyup.enter="handleQuery" class="keyword-input" />
-						</el-form-item>
-						<el-form-item label="任务状态" prop="AiOrderVisitTaskState">
-							<el-select v-model="state.queryParams.AiOrderVisitTaskState" placeholder="请选择任务状态" @change="handleQuery" clearable>
-								<el-option v-for="item in aiOrderVisitTaskState" :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="drawer = true" class="default-button"> <SvgIcon name="ele-Search" class="mr5" />更多查询</el-button>
-						</el-form-item>
-					</el-form>
-				</template>
-				<template #tableHeader="scope">
+				<template #buttons>
 					<el-button type="primary" @click="onAddVisit" v-auth="'business:visit:smart:add'" :loading="state.loading">
 						<SvgIcon name="ele-Plus" class="mr5" /> 创建任务
 					</el-button>
 				</template>
-				<!-- 表格操作 -->
-				<template #operation="{ row }">
-					<el-button link type="primary" @click="onDetail(row)" title="回访明细"> 回访明细 </el-button>
-					<el-button
-						link
-						type="primary"
-						v-if="[5].includes(row.taskState)"
-						@click="onTermination(row)"
-						title="终止回访任务"
-						v-auth="'business:visit:smart:termination'"
-					>
-						终止任务
-					</el-button>
-					<el-button
-						link
-						type="primary"
-						v-if="[5].includes(row.taskState)"
-						@click="onStart(row)"
-						title="启动任务"
-						v-auth="'business:visit:smart:start'"
-					>
-						启动
-					</el-button>
-					<el-button
-						link
-						type="primary"
-						v-if="[1, 2].includes(row.taskState)"
-						@click="onPause(row)"
-						title="暂停任务"
-						v-auth="'business:visit:smart:pause'"
-					>
-						暂停
-					</el-button>
-				</template>
-			</ProTable>
+			</vxe-toolbar>
+			<div style="overflow: hidden; width: 100%; height: 100%; flex: 1">
+				<vxe-table
+					border
+					:loading="state.loading"
+					:data="state.tableData"
+					:column-config="{ resizable: true }"
+					:row-config="{ isCurrent: true, isHover: true, height: 30 }"
+					ref="tableRef"
+					height="auto"
+					auto-resize
+					show-overflow
+					:scrollY="{ enabled: true, gt: 0 }"
+					id="businessVisitSmart"
+					:custom-config="{
+						storage: true,
+					}"
+					:params="{ exportMethod: getSmartVisitExport, exportParams: requestParams }"
+					showHeaderOverflow
+				>
+					<vxe-column field="name" title="回访任务名称" min-width="200"></vxe-column>
+					<vxe-column field="beginTime" title="开始时间" width="160">
+						<template #default="{ row }">
+							{{ formatDate(row.beginTime, 'YYYY-mm-dd HH:MM:SS') }}
+						</template>
+					</vxe-column>
+					<vxe-column field="endTime" title="结束时间" width="160">
+						<template #default="{ row }">
+							{{ formatDate(row.endTime, 'YYYY-mm-dd HH:MM:SS') }}
+						</template>
+					</vxe-column>
+					<vxe-column field="hasVisitCount" title="回访任务总数量" width="140"></vxe-column>
+					<vxe-column field="visitedCount" title="回访任务成功数量" width="140"></vxe-column>
+					<vxe-column field="visitedFailCount" title="回访任务失败数量" width="140"></vxe-column>
+					<vxe-column field="taskStateText" title="任务完成状态" width="130"></vxe-column>
+					<vxe-column field="creatorName" title="创建人" width="130"></vxe-column>
+					<vxe-column field="creationTime" title="创建时间" width="160">
+						<template #default="{ row }">
+							{{ formatDate(row.creationTime, 'YYYY-mm-dd HH:MM:SS') }}
+						</template>
+					</vxe-column>
+					<vxe-column title="操作" fixed="right" width="220" align="center">
+						<template #default="{ row }">
+							<el-button link type="primary" @click="onDetail(row)" title="回访明细"> 回访明细 </el-button>
+							<el-button
+								link
+								type="primary"
+								v-if="[5].includes(row.taskState)"
+								@click="onTermination(row)"
+								title="终止回访任务"
+								v-auth="'business:visit:smart:termination'"
+							>
+								终止任务
+							</el-button>
+							<el-button
+								link
+								type="primary"
+								v-if="[5].includes(row.taskState)"
+								@click="onStart(row)"
+								title="启动任务"
+								v-auth="'business:visit:smart:start'"
+							>
+								启动
+							</el-button>
+							<el-button
+								link
+								type="primary"
+								v-if="[1, 2].includes(row.taskState)"
+								@click="onPause(row)"
+								title="暂停任务"
+								v-auth="'business:visit:smart:pause'"
+							>
+								暂停
+							</el-button>
+						</template>
+					</vxe-column>
+				</vxe-table>
+			</div>
+			<pagination
+				@pagination="queryList"
+				:total="state.total"
+				v-model:current-page="state.queryParams.PageIndex"
+				v-model:page-size="state.queryParams.PageSize"
+				:disabled="state.loading"
+			/>
 		</div>
 		<el-drawer v-model="drawer" title="更多查询" size="500px">
 			<el-form :model="state.queryParams" ref="drawerRuleFormRef" @submit.native.prevent label-width="90px">
@@ -141,42 +184,8 @@ import Other from '@/utils/other';
 // 引入组件
 const SmartVisitAdd = defineAsyncComponent(() => import('@/views/business/visit/components/Smart-visit-add.vue')); // 选择需要智能回访的工单
 const SmartVisitDetail = defineAsyncComponent(() => import('@/views/business/visit/components/Smart-visit-Detail.vue')); // 回访明细
+const pagination = defineAsyncComponent(() => import('@/components/ProTable/components/Pagination.vue')); // 分页
 
-const proTableRef = ref<RefType>(); // 表格ref
-// 表格配置项
-const columns = ref<any[]>([
-	{ prop: 'name', label: '回访任务名称', minWidth: 200 },
-	{
-		prop: 'beginTime',
-		label: '开始时间',
-		width: 160,
-		render: (scope: any) => {
-			return <span>{formatDate(scope.row.beginTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
-		},
-	},
-	{
-		prop: 'endTime',
-		label: '结束时间',
-		width: 160,
-		render: (scope: any) => {
-			return <span>{formatDate(scope.row.endTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
-		},
-	},
-	{ prop: 'hasVisitCount', label: '回访任务总数量', minWidth: 120 },
-	{ prop: 'visitedCount', label: '回访任务成功数量', minWidth: 120 },
-	{ prop: 'visitedFailCount', label: '回访任务失败数量', minWidth: 120 },
-	{ prop: 'taskStateText', label: '任务完成状态', minWidth: 110 },
-	{ prop: 'creatorName', label: '创建人', minWidth: 120 },
-	{
-		prop: 'creationTime',
-		label: '创建时间',
-		width: 160,
-		render: (scope: any) => {
-			return <span>{formatDate(scope.row.creationTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
-		},
-	},
-	{ prop: 'operation', label: '操作', fixed: 'right', width: 210, align: 'center' },
-]);
 // 定义变量内容
 const state = reactive<any>({
 	loading: false, // 加载状态
@@ -348,10 +357,15 @@ const onPause = (row: any) => {
 		});
 };
 const drawer = ref(false);
-
+const toolbarRef = ref<RefType>();
+const tableRef = ref<RefType>();
 // 页面加载时
 onMounted(() => {
-	queryList().then(()=>{})
-	getBaseData();
+	queryList().then(()=>{
+		getBaseData();
+	})
+	if (tableRef.value && toolbarRef.value) {
+		tableRef.value.connect(toolbarRef.value);
+	}
 });
 </script>

src/views/business/visit/todo.vue

@@ -1,121 +1,175 @@
 <template>
 	<div class="business-visit-todo-container layout-padding">
 		<div class="layout-padding-auto layout-padding-view pd20">
-			<ProTable
-				ref="proTableRef"
-				:columns="columns"
-				:data="state.tableData"
-				@updateTable="queryList"
+			<el-form :model="state.queryParams" ref="ruleFormRef" @submit.native.prevent inline label-width="100px">
+				<el-form-item label="数据范围" prop="QuerySelf" v-auth="'business:visit:todo:querySelf'">
+					<el-segmented
+						:options="[
+							{ label: '我的', value: 'true' },
+							{ label: '全部', value: 'false' },
+						]"
+						v-model="state.queryParams.QuerySelf"
+						@change="handleQuery"
+						:disabled="state.loading"
+					/>
+				</el-form-item>
+				<el-form-item label="工单类型" prop="IsProvince" v-auth="'business:visit:todo:orderType'">
+					<el-segmented
+						:options="[
+							{
+								value: 'all',
+								label: '全部',
+							},
+							{
+								value: 'city',
+								label: '市工单',
+							},
+							{
+								value: 'province',
+								label: '省工单',
+							},
+						]"
+						v-model="fastSearch"
+						@change="fastSearchChange"
+						:disabled="state.loading"
+					/>
+				</el-form-item>
+				<el-form-item label="回访状态" prop="VisitStateQuery" v-if="['ZiGong'].includes(themeConfig.appScope)">
+					<el-segmented
+						:options="[
+							{ label: '待回访', value: 2 },
+							{ label: '短信回访中', value: 21 },
+							{ label: '短信不满意待回访', value: 41 },
+							{ label: '未接通', value: 51 },
+						]"
+						v-model="state.queryParams.VisitStateQuery"
+						@change="handleQuery"
+						:disabled="state.loading"
+					/>
+				</el-form-item>
+				<el-form-item label="工单标题" prop="Keyword">
+					<el-input v-model.trim="state.queryParams.Keyword" placeholder="工单标题" clearable @keyup.enter="handleQuery" class="keyword-input" />
+				</el-form-item>
+				<el-form-item label="工单编码" prop="No">
+					<el-input v-model.trim="state.queryParams.No" placeholder="工单编码" clearable @keyup.enter="handleQuery" class="keyword-input" />
+				</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="drawer = true" class="default-button"> <SvgIcon name="ele-Search" class="mr5" />更多查询</el-button>
+				</el-form-item>
+			</el-form>
+			<vxe-toolbar
+				ref="toolbarRef"
 				:loading="state.loading"
-				:total="state.total"
-				v-model:page-index="state.queryParams.PageIndex"
-				v-model:page-size="state.queryParams.PageSize"
+				custom
+				:refresh="{
+					queryMethod: handleQuery,
+				}"
 			>
-				<template #table-search>
-					<el-form :model="state.queryParams" ref="ruleFormRef" @submit.native.prevent inline label-width="100px">
-						<el-form-item label="数据范围" prop="QuerySelf" v-auth="'business:visit:todo:querySelf'">
-							<el-segmented
-								:options="[
-									{ label: '我的', value: 'true' },
-									{ label: '全部', value: 'false' },
-								]"
-								v-model="state.queryParams.QuerySelf"
-								@change="handleQuery"
-								:disabled="state.loading"
-							/>
-						</el-form-item>
-						<el-form-item label="工单类型" prop="IsProvince" v-auth="'business:visit:todo:orderType'">
-							<el-segmented
-								:options="[
-									{
-										value: 'all',
-										label: '全部',
-									},
-									{
-										value: 'city',
-										label: '市工单',
-									},
-									{
-										value: 'province',
-										label: '省工单',
-									},
-								]"
-								v-model="fastSearch"
-								@change="fastSearchChange"
-								:disabled="state.loading"
-							/>
-						</el-form-item>
-						<el-form-item label="回访状态" prop="VisitStateQuery" v-if="['ZiGong'].includes(themeConfig.appScope)">
-							<el-segmented
-								:options="[
-									{ label: '待回访', value: 2 },
-									{ label: '短信回访中', value: 21 },
-									{ label: '短信不满意待回访', value: 41 },
-									{ label: '未接通', value: 51 },
-								]"
-								v-model="state.queryParams.VisitStateQuery"
-								@change="handleQuery"
-								:disabled="state.loading"
-							/>
-						</el-form-item>
-						<el-form-item label="工单标题" prop="Keyword">
-							<el-input v-model.trim="state.queryParams.Keyword" placeholder="工单标题" clearable @keyup.enter="handleQuery" class="keyword-input" />
-						</el-form-item>
-						<el-form-item label="工单编码" prop="No">
-							<el-input v-model.trim="state.queryParams.No" placeholder="工单编码" clearable @keyup.enter="handleQuery" class="keyword-input" />
-						</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="drawer = true" class="default-button"> <SvgIcon name="ele-Search" class="mr5" />更多查询</el-button>
-						</el-form-item>
-					</el-form>
-				</template>
-				<template #tableHeader="scope">
+				<template #buttons>
 					<el-button
 						type="primary"
 						@click="messageVisit"
-						:disabled="!scope.isSelected"
+						:disabled="isChecked"
 						v-auth="'business:visit:todo:message'"
 						v-if="['ZiGong', 'LuZhou'].includes(themeConfig.appScope)"
 					>
-						<SvgIcon name="ele-Message" class="mr5" />短信回访<span v-if="proTableRef?.selectedList?.length"
-							>({{ proTableRef?.selectedList?.length }})</span
-						></el-button
+						<SvgIcon name="ele-Message" class="mr5" />短信回访</el-button
 					>
 					<el-button
 						type="primary"
 						@click="batchVisit"
-						:disabled="!scope.isSelected"
+						:disabled="isChecked"
 						v-auth="'business:visit:todo:batch'"
 						v-if="['ZiGong', 'LuZhou'].includes(themeConfig.appScope)"
 					>
-						<SvgIcon name="ele-DocumentCopy" class="mr5" />批量回访<span v-if="proTableRef?.selectedList?.length"
-							>({{ proTableRef?.selectedList?.length }})</span
-						></el-button
+						<SvgIcon name="ele-DocumentCopy" class="mr5" />批量回访</el-button
 					>
-					<!--					<el-button type="primary" @click="multiplePeople" :disabled="!scope.isSelected" v-auth="'business:visit:todo:multiplePeople'">
+					<!--					<el-button type="primary" @click="multiplePeople" :disabled="isChecked" v-auth="'business:visit:todo:multiplePeople'">
 						<SvgIcon name="ele-User" class="mr5" />分配回访人</el-button
 					>-->
-					<el-button type="primary" @click="onMigration" v-auth="'business:visit:todo:migration'" :disabled="!scope.isSelected">
-						<SvgIcon name="ele-Rank" class="mr5" />平级移动<span v-if="proTableRef?.selectedList?.length"
-							>({{ proTableRef?.selectedList?.length }})</span
-						>
+					<el-button type="primary" @click="onMigration" v-auth="'business:visit:todo:migration'" :disabled="isChecked">
+						<SvgIcon name="ele-Rank" class="mr5" />平级移动
 					</el-button>
 				</template>
-				<template #title="{ row }">
-					<order-detail :order="row.order" @updateList="queryList">{{ row.order?.title }}</order-detail>
-				</template>
-				<template #expiredStatusText="{ row }">
-					<span :class="'overdue-status-' + row.order?.expiredStatus" :title="row.order?.expiredStatusText"></span>
-				</template>
-				<!--				<template #isPutThrough="{ row }">
-					<span v-if="row.isPutThrough">{{ row.isPutThrough ? '未接通' : '已接通' }}</span>
-				</template>-->
-				<!-- 表格操作 -->
-				<template #operation="{ row }">
-					<el-button link type="primary" @click="onManpower(row)" title="工单回访" v-auth="'business:visit:todo:manpower'"> 回访 </el-button>
-				</template>
-			</ProTable>
+			</vxe-toolbar>
+			<div style="overflow: hidden; width: 100%; height: 100%; flex: 1">
+				<vxe-table
+					border
+					:loading="state.loading"
+					:data="state.tableData"
+					:column-config="{ resizable: true }"
+					:row-config="{ isCurrent: true, isHover: true, height: 30 }"
+					ref="tableRef"
+					@checkbox-all="selectAllChangeEvent"
+					@checkbox-change="selectChangeEvent"
+					height="auto"
+					auto-resize
+					show-overflow
+					:print-config="{}"
+					:scrollY="{ enabled: true, gt: 0 }"
+					id="businessVisitTodo"
+					:custom-config="{
+						storage: true,
+					}"
+					showHeaderOverflow
+				>
+					<vxe-column type="checkbox" width="50" align="center"></vxe-column>
+					<vxe-column field="order.expiredStatusText" title="超期状态" width="90" align="center">
+						<template #default="{ row }">
+							<span :class="'overdue-status-' + row.order?.expiredStatus" :title="row.order?.expiredStatusText"></span>
+						</template>
+					</vxe-column>
+					<vxe-column field="order.no" title="工单编码" width="140"></vxe-column>
+					<vxe-column field="order.isProvinceText" title="省/市工单" width="100"></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="order.sourceChannel" title="来源渠道" width="100"></vxe-column>
+					<vxe-column field="visitStateText" title="回访状态" width="100"></vxe-column>
+					<vxe-column field="visitTypeText" title="回访方式" width="100"></vxe-column>
+					<vxe-column field="order.acceptType" title="受理类型" width="110"></vxe-column>
+					<vxe-column field="order.hotspotName" title="热点分类" width="150"></vxe-column>
+					<vxe-column field="order.acceptorName" title="受理人" width="120"></vxe-column>
+					<vxe-column field="order.orgLevelOneName" title="一级部门" width="150"></vxe-column>
+					<vxe-column field="order.actualHandleOrgName" title="接办部门" width="150"></vxe-column>
+					<vxe-column field="order.startTime" title="受理时间" width="160">
+						<template #default="{ row }">
+							{{ formatDate(row.order?.startTime, 'YYYY-mm-dd HH:MM:SS') }}
+						</template>
+					</vxe-column>
+					<vxe-column field="order.filedTime" title="办结时间" width="160">
+						<template #default="{ row }">
+							{{ formatDate(row.order?.filedTime, 'YYYY-mm-dd HH:MM:SS') }}
+						</template>
+					</vxe-column>
+					<vxe-column field="publishTime" title="发布时间" width="160">
+						<template #default="{ row }">
+							{{ formatDate(row.publishTime, 'YYYY-mm-dd HH:MM:SS') }}
+						</template>
+					</vxe-column>
+					<vxe-column field="creationTime" title="回访任务创建时间" width="170">
+						<template #default="{ row }">
+							{{ formatDate(row.creationTime, 'YYYY-mm-dd HH:MM:SS') }}
+						</template>
+					</vxe-column>
+					<vxe-column field="employeeName" title="回访人" width="150"></vxe-column>
+					<vxe-column title="操作" fixed="right" width="80" align="center">
+						<template #default="{ row }">
+							<el-button link type="primary" @click="onManpower(row)" title="工单回访" v-auth="'business:visit:todo:manpower'"> 回访 </el-button>
+						</template>
+					</vxe-column>
+				</vxe-table>
+			</div>
+			<pagination
+				@pagination="queryList"
+				:total="state.total"
+				v-model:current-page="state.queryParams.PageIndex"
+				v-model:page-size="state.queryParams.PageSize"
+				:disabled="state.loading"
+			/>
 		</div>
 		<!--	更多查询	-->
 		<el-drawer v-model="drawer" title="更多查询" size="500px">
@@ -192,7 +246,7 @@
 </template>
 
 <script setup lang="tsx" name="businessVisitTodo">
-import { defineAsyncComponent, onMounted, reactive, ref } from 'vue';
+import { computed, defineAsyncComponent, onMounted, reactive, ref } from 'vue';
 import { ElMessageBox, FormInstance, ElMessage } from 'element-plus';
 import { formatDate } from '@/utils/formatTime';
 import { visitList } from '@/api/todo/visit';
@@ -207,9 +261,9 @@ const AssignReturnVisitors = defineAsyncComponent(() => import('@/views/business
 const OrderDetail = defineAsyncComponent(() => import('@/components/OrderDetail/index.vue')); // 工单详情
 const OrderMigration = defineAsyncComponent(() => import('@/views/todo/center/Order-migration.vue')); // 工单平移
 const VisitBatch = defineAsyncComponent(() => import('@/views/business/visit/components/Visit-batch.vue')); // 批量回访
+const pagination = defineAsyncComponent(() => import('@/components/ProTable/components/Pagination.vue')); // 分页
 
 // 定义变量内容
-const proTableRef = ref<RefType>(); // 表格ref
 const fastSearch = ref('all'); // tab位置
 const fastSearchChange = (val: string) => {
 	fastSearch.value = val;
@@ -226,61 +280,6 @@ const fastSearchChange = (val: string) => {
 	}
 	handleQuery();
 };
-// 表格配置项
-const columns = ref<any[]>([
-	{ type: 'selection', width: 40, align: 'center' },
-	{ prop: 'order.expiredStatusText', label: '超期状态', align: 'center', minWidth: 80 },
-	{ prop: 'order.no', label: '工单编码', minWidth: 140 },
-	{ prop: 'order.isProvinceText', label: '省/市工单', minWidth: 90 },
-	{ prop: 'order.title', label: '工单标题', minWidth: 200 },
-	{ prop: 'order.sourceChannel', label: '来源渠道', minWidth: 100 },
-	{ prop: 'visitStateText', label: '回访状态', minWidth: 100 },
-	{ prop: 'visitTypeText', label: '回访方式', minWidth: 100 },
-	{ prop: 'order.acceptType', label: '受理类型', minWidth: 100 },
-	{ prop: 'order.hotspotName', label: '热点分类', minWidth: 150 },
-	{ prop: 'order.acceptorName', label: '受理人', minWidth: 120 },
-	{ prop: 'order.orgLevelOneName', label: '一级部门', minWidth: 140 },
-	{ prop: 'order.actualHandleOrgName', label: '接办部门', minWidth: 140 },
-	{
-		prop: 'order.startTime',
-		label: '受理时间',
-		minWidth: 160,
-		render: (scope) => {
-			return <span>{formatDate(scope.row.order?.startTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
-		},
-	},
-	{
-		prop: 'order.filedTime',
-		label: '办结时间',
-		minWidth: 160,
-		render: (scope) => {
-			return <span>{formatDate(scope.row.order?.filedTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
-		},
-	},
-	{
-		prop: 'publishTime',
-		label: '发布时间',
-		minWidth: 160,
-		render: (scope) => {
-			return <span>{formatDate(scope.row.publishTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
-		},
-	},
-	{
-		prop: 'creationTime',
-		label: '回访任务创建时间',
-		minWidth: 160,
-		render: (scope) => {
-			return <span>{formatDate(scope.row.creationTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
-		},
-	},
-	{ prop: 'employeeName', label: '回访人', minWidth: 120 },
-	/*{
-		prop: 'isPutThrough',
-		label: '是否接通',
-		width: 150,
-	},*/
-	{ prop: 'operation', label: '操作', fixed: 'right', width: 80, align: 'center' },
-]);
 const state = reactive<any>({
 	queryParams: {
 		// 查询条件
@@ -297,10 +296,10 @@ const state = reactive<any>({
 		IsProvince: null, // 是否省工单
 		FromPhone: null, //来电号码
 		Contact: null, //联系电话
-		ActualHandleOrgName:null, // 接办部门
-		fbTime:[], // 发布时间
-		StartPublishTime:null,
-		EndPublishTime:null,
+		ActualHandleOrgName: null, // 接办部门
+		fbTime: [], // 发布时间
+		StartPublishTime: null,
+		EndPublishTime: null,
 	},
 	tableData: [], //表单
 	loading: false, // 加载
@@ -342,7 +341,7 @@ const queryList = () => {
 				state.loading = false;
 				reject();
 			});
-	})
+	});
 };
 
 /** 重置按钮操作 */
@@ -361,7 +360,7 @@ const resetQuery = (formEl: FormInstance | undefined) => {
 // 批量分配
 const assignReturnVisitorsRef = ref<RefType>();
 const multiplePeople = () => {
-	const ids = proTableRef.value.selectedList.map((item: any) => item.id);
+	const ids = checkTable.value.map((item: any) => item.id);
 	assignReturnVisitorsRef.value.openDialog(ids);
 };
 // 回访
@@ -372,13 +371,13 @@ const onManpower = (row: any) => {
 // 平移功能
 const orderMigrationRef = ref<RefType>();
 const onMigration = () => {
-	const ids = proTableRef.value.selectedList.map((item: any) => item.id);
+	const ids = checkTable.value.map((item: any) => item.id);
 	orderMigrationRef.value.openDialog('visitTodo', ids);
 };
 // 短信回访
 const messageVisit = () => {
-	const ids = proTableRef.value.selectedList.map((item: any) => item.id);
-	ElMessageBox.confirm(`您确定要选择的【${proTableRef.value.selectedList.length}】个工单进行短信回访?`, '提示', {
+	const ids = checkTable.value.map((item: any) => item.id);
+	ElMessageBox.confirm(`您确定要选中的工单进行短信回访?`, '提示', {
 		confirmButtonText: '确定',
 		cancelButtonText: '取消',
 		type: 'warning',
@@ -400,7 +399,7 @@ const messageVisit = () => {
 // 批量回访
 const visitBatchRef = ref<RefType>();
 const batchVisit = () => {
-	const visit = proTableRef.value.selectedList.map((item: any) => {
+	const visit = checkTable.value.map((item: any) => {
 		return {
 			orderId: item.order?.id,
 			visitId: item.id,
@@ -409,9 +408,33 @@ const batchVisit = () => {
 	});
 	visitBatchRef.value.openDialog(visit);
 };
+const tableRef = ref<RefType>();
+const checkTable = ref<EmptyArrayType>([]);
+const selectAllChangeEvent = ({ checked }) => {
+	if (tableRef.value) {
+		const records = tableRef.value.getCheckboxRecords();
+		checkTable.value = records;
+		console.log(checked ? '所有勾选事件' : '所有取消事件', records);
+	}
+};
+
+const selectChangeEvent = ({ checked }) => {
+	if (tableRef.value) {
+		const records = tableRef.value.getCheckboxRecords();
+		checkTable.value = records;
+		console.log(checked ? '勾选事件' : '取消事件', records);
+	}
+};
+const isChecked = computed(() => {
+	return !Boolean(checkTable.value.length);
+});
+const toolbarRef = ref<RefType>();
 onMounted(() => {
-	queryList().then(()=>{
+	queryList().then(() => {
 		getBaseData();
-	})
+	});
+	if (tableRef.value && toolbarRef.value) {
+		tableRef.value.connect(toolbarRef.value);
+	}
 });
 </script>