reactor:回访不满意原因重构;

src/views/statistics/center/detailEventFrequently.vue

@@ -1,37 +1,95 @@
 <template>
 	<div class="statistics-center-detail-event-frequently 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="Keyword">
+					<el-input v-model="state.queryParams.Keyword" placeholder="工单标题" clearable @keyup.enter="handleQuery" class="keyword-input" />
+				</el-form-item>
+				<el-form-item label="工单编码" prop="No">
+					<el-input v-model="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"
+				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
+					:print-config="{}"
+					:scrollY="{ enabled: true, gt: 0 }"
+					id="eventFrequentlyDetail"
+					:custom-config="{
+						storage: true,
+					}"
+					showHeaderOverflow
+				>
+					<vxe-column field="expiredStatusText" title="超期状态" width="90" align="center">
+						<template #default="{ row }">
+							<span :class="'overdue-status-' + row.expiredStatus" :title="row.expiredStatusText"></span>
+						</template>
+					</vxe-column>
+					<vxe-column field="no" title="工单编码" width="140"></vxe-column>
+					<vxe-column field="isProvinceText" title="省/市工单" width="90"></vxe-column>
+					<vxe-column field="reTransactNum" title="重办次数" width="90"></vxe-column>
+					<vxe-column field="currentStepName" title="当前节点" width="120"></vxe-column>
+					<vxe-column field="statusText" title="工单状态" width="100"></vxe-column>
+					<vxe-column field="title" title="工单标题" width="200">
+						<template #default="{ row }">
+							<order-detail :order="row" @updateList="queryList(true)">{{ row.title }}</order-detail>
+						</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="expiredTime" title="工单期满时间" width="160">
+						<template #default="{ row }">
+							{{ formatDate(row.expiredTime, '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="orgLevelOneName" title="一级部门" width="140"></vxe-column>
+					<vxe-column field="actualHandleOrgName" title="接办部门" width="140"></vxe-column>
+					<vxe-column field="acceptType" title="受理类型" width="110"></vxe-column>
+					<vxe-column field="counterSignTypeText" title="是否会签" width="110"></vxe-column>
+					<vxe-column field="sourceChannel" title="来源渠道" width="100"></vxe-column>
+					<vxe-column field="hotspotSpliceName" title="热点全称" width="150"></vxe-column>
+					<vxe-column field="hotspotName" title="热点分类" width="150"></vxe-column>
+					<vxe-column field="acceptorName" title="受理人" width="120"></vxe-column>
+					<vxe-column field="content" title="受理内容" width="200" :visible="false"></vxe-column>
+					<vxe-column field="fileOpinion" title="承办意见" width="200" :visible="false"></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="Keyword">
-							<el-input v-model="state.queryParams.Keyword" placeholder="工单标题" clearable @keyup.enter="handleQuery" class="keyword-input" />
-						</el-form-item>
-						<el-form-item label="工单编码" prop="No">
-							<el-input v-model="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 #expiredStatusText="{ row }">
-					<span :class="'overdue-status-' + row.expiredStatus" :title="row.expiredStatusText"></span>
-				</template>
-				<template #title="{ row }">
-					<order-detail :order="row" @updateList="queryList">{{ row.title }}</order-detail>
-				</template>
-			</ProTable>
+				:disabled="state.loading"
+			/>
 		</div>
 		<!--	更多查询	-->
 		<el-drawer v-model="drawer" title="更多查询" size="500px">
@@ -175,12 +233,13 @@ import { defaultTimeStartEnd, shortcuts } from '@/utils/constants';
 import other from '@/utils/other';
 import { useRoute, useRouter } from 'vue-router';
 import { formatDate } from '@/utils/formatTime';
-import { listBaseData } from '@/api/business/order';
+import { exportOrder, listBaseData } from '@/api/business/order';
 import { departmentHighFrequencyDetail, departmentHighFrequencyEventDetail } from '@/api/statistics/center';
 import Other from '@/utils/other';
 
 // 引入组件
 const OrderDetail = defineAsyncComponent(() => import('@/components/OrderDetail/index.vue')); // 工单详情
+const pagination = defineAsyncComponent(() => import('@/components/ProTable/components/Pagination.vue')); // 分页
 
 // 定义变量内容
 const state = reactive<any>({
@@ -229,48 +288,6 @@ const state = reactive<any>({
 	areaOptions: [], // 省市区数据
 });
 const route = useRoute(); // 路由
-const proTableRef = ref<RefType>(); // 表格ref
-// 表格配置项
-const columns = ref<any[]>([
-	{ prop: 'expiredStatusText', label: '超期状态', align: 'center', width: 80 },
-	{ prop: 'no', label: '工单编码', minWidth: 140 },
-	{ prop: 'isProvinceText', label: '省/市工单', minWidth: 90 },
-	{ prop: 'currentStepName', label: '当前节点', minWidth: 120 },
-	{ prop: 'statusText', label: '工单状态', minWidth: 100 },
-	{ prop: 'title', label: '工单标题', minWidth: 200 },
-	{
-		prop: 'startTime',
-		label: '受理时间',
-		minWidth: 160,
-		render: (scope) => {
-			return <span>{formatDate(scope.row.startTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
-		},
-	},
-	{
-		prop: 'expiredTime',
-		label: '工单期满时间',
-		width: 160,
-		render: (scope) => {
-			return <span>{formatDate(scope.row.expiredTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
-		},
-	},
-	{
-		prop: 'filedTime',
-		label: '办结时间',
-		width: 160,
-		render: (scope) => {
-			return <span>{formatDate(scope.row.filedTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
-		},
-	},
-	{ prop: 'orgLevelOneName', label: '一级部门', width: 140 },
-	{ prop: 'actualHandleOrgName', label: '接办部门', width: 140 },
-	{ prop: 'acceptType', label: '受理类型', width: 100 },
-	{ prop: 'counterSignTypeText', label: '是否会签', width: 90 },
-	{ prop: 'sourceChannel', label: '来源渠道', width: 100 },
-	{ prop: 'hotspotName', label: '热点分类', width: 150 },
-	{ prop: 'tagNames', label: '工单标签', width: 150 },
-	{ prop: 'acceptorName', label: '受理人', width: 120 },
-]);
 // 获取选择组织name值
 const cascadeRef = ref<RefType>();
 const changeOrg = () => {
@@ -358,8 +375,13 @@ const resetQuery = (formEl: FormInstance | undefined) => {
 	ruleFormRef.value?.resetFields();
 	queryList();
 };
+const toolbarRef = ref<RefType>();
+const tableRef = ref<RefType>();
 onMounted(() => {
-	getBaseData();
 	queryList();
+	if (tableRef.value && toolbarRef.value) {
+		tableRef.value.connect(toolbarRef.value);
+	}
+	getBaseData();
 });
 </script>

src/views/statistics/center/detailWrongItem.vue

@@ -1,37 +1,73 @@
 <template>
 	<div class="statistics-center-detail-wrong-item-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 prop="crTime">
+					<statistical-time v-model="state.queryParams.crTime" @change="handleQuery" ref="statisticalTimeRef" :disabled="state.loading"/>
+				</el-form-item>
+				<el-form-item label="工单编码" prop="No">
+					<el-input v-model="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"
+				custom
+				:refresh="{
+					queryMethod: handleQuery
+				}"
+				:tools="[{ toolRender: { name: 'exportCurrent' } }, { toolRender: { name: 'exportAll' } }]"
+			>
+			</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="statisticsCenterWrongItem"
+					:custom-config="{ storage: true }"
+					showHeaderOverflow
+					:params="{ exportMethod: centerReturnErrorDetailExport, exportParams: requestParams }"
+				>
+					<vxe-column field="orderSpecial.order.no" title="工单编码" width="140"></vxe-column>
+					<vxe-column field="orderSpecial.order.title" title="工单标题" min-width="200">
+						<template #default="{ row }">
+							<order-detail :order="row.orderSpecial.order" @updateList="queryList">{{ row.orderSpecial?.order?.title }}</order-detail>
+						</template>
+					</vxe-column>
+					<vxe-column field="orderSpecial.creationTime" title="记录时间" width="160">
+						<template #default="{ row }">
+							{{ formatDate(row.orderSpecial.creationTime, 'YYYY-mm-dd HH:MM:SS') }}
+						</template>
+					</vxe-column>
+					<vxe-column field="orgName" title="被记部门" width="140"></vxe-column>
+					<vxe-column field="errorName" title="错误类别" width="150"></vxe-column>
+					<vxe-column field="orderSpecial.order.acceptType" title="受理类型" width="120"></vxe-column>
+					<vxe-column field="orderSpecial.order.sourceChannel" title="工单编码" width="140"></vxe-column>
+					<vxe-column field="orderSpecial.order.content" title="受理内容" min-width="200"></vxe-column>
+					<vxe-column field="orderSpecial.firstFileOpinion" title="第一次办结内容" min-width="200"></vxe-column>
+					<vxe-column field="orderSpecial.order.fileOpinion" title="最终办结内容" min-width="200"></vxe-column>
+					<vxe-column field="orderSpecial.reason" title="派单退回意见" min-width="200"></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"
-				:toolButton="['refresh', 'setting', 'exportCurrent', 'exportAll']"
-				:exportMethod="centerReturnErrorDetailExport"
-				:exportParams="requestParams"
-			>
-				<template #table-search>
-					<el-form :model="state.queryParams" ref="ruleFormRef" @submit.native.prevent inline>
-						<el-form-item prop="crTime">
-							<statistical-time v-model="state.queryParams.crTime" @change="handleQuery" ref="statisticalTimeRef" :disabled="state.loading"/>
-						</el-form-item>
-						<el-form-item label="工单编码" prop="No">
-							<el-input v-model="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 #title="{ row }">
-					<order-detail :order="row.orderSpecial.order" @updateList="queryList">{{ row.orderSpecial?.order?.title }}</order-detail>
-				</template>
-			</ProTable>
+				:disabled="state.loading"
+			/>
 		</div>
 		<!--	更多查询	-->
 		<el-drawer v-model="drawer" title="更多查询" size="500px">
@@ -62,28 +98,7 @@ import Other from '@/utils/other';
 
 const OrderDetail = defineAsyncComponent(() => import('@/components/OrderDetail/index.vue')); // 工单详情
 const StatisticalTime = defineAsyncComponent(() => import('@/components/StatisticalTime/index.vue')); // 日期类型选择组件
-const proTableRef = ref<RefType>(); // 表格ref
-// 表格配置项
-const columns = ref<any[]>([
-	{ prop: 'orderSpecial.order.no', label: '工单编码', width: 140 },
-	{ prop: 'orderSpecial.order.title', label: '工单标题', width: 200 },
-	{
-		prop: 'orderSpecial.creationTime',
-		label: '记录时间',
-		width: 160,
-		render: (scope) => {
-			return <span>{formatDate(scope.row?.orderSpecial?.creationTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
-		},
-	},
-	{ prop: 'orgName', label: '被记部门', minWidth: 140 },
-	{ prop: 'errorName', label: '错误类别', minWidth: 150 },
-	{ prop: 'orderSpecial.order.acceptType', label: '受理类型', minWidth: 120 },
-	{ prop: 'orderSpecial.order.sourceChannel', label: '来源渠道', minWidth: 120 },
-	{ prop: 'orderSpecial.order.content', label: '受理内容', minWidth: 150 },
-	{ prop: 'orderSpecial.firstFileOpinion', label: '第一次办结内容', minWidth: 150 },
-	{ prop: 'orderSpecial.order.fileOpinion', label: '最终办结内容', minWidth: 150 },
-	{ prop: 'orderSpecial.reason', label: '派单退回意见', minWidth: 150 },
-]);
+const pagination = defineAsyncComponent(() => import('@/components/ProTable/components/Pagination.vue')); // 分页
 const state = reactive<any>({
 	queryParams: {
 		// 查询条件
@@ -99,7 +114,7 @@ const state = reactive<any>({
 	total: 0, // 总数
 });
 // 基础信息
-const reTransactErrorType = ref([]); // 错误类型
+const reTransactErrorType = ref<EmptyArrayType>([]); // 错误类型
 const getBaseData = async () => {
 	const { result } = await centerReturnErrorDetailBase();
 	reTransactErrorType.value = result.reTransactErrorType;
@@ -139,8 +154,13 @@ const resetQuery = (formEl: FormInstance | undefined) => {
 	formEl.resetFields();
 	queryList();
 };
+const toolbarRef = ref<RefType>();
+const tableRef = ref<RefType>();
 onMounted(() => {
-	getBaseData();
 	queryList();
+	if (tableRef.value && toolbarRef.value) {
+		tableRef.value.connect(toolbarRef.value);
+	}
+	getBaseData();
 });
 </script>

src/views/statistics/center/emergencyList.vue

@@ -1,38 +1,77 @@
 <template>
 	<div class="statistics-center-emergency-List-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="Title">
+					<el-input v-model="state.queryParams.Title" placeholder="工单标题" clearable @keyup.enter="handleQuery" class="keyword-input" />
+				</el-form-item>
+				<el-form-item label="工单编码" prop="No">
+					<el-input v-model="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"
+				custom
+				:refresh="{
+					queryMethod: handleQuery
+				}"
+				:tools="[{ toolRender: { name: 'exportCurrent' } }, { toolRender: { name: 'exportAll' } }]"
+			>
+			</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="statisticsCenterEmergencyList"
+					:custom-config="{ storage: true }"
+					showHeaderOverflow
+					:params="{ exportMethod: centerEmergencyListExport, exportParams: requestParams }"
+				>
+					<vxe-column field="no" title="工单编码" width="140"></vxe-column>
+					<vxe-column field="arrangeTitle" title="工单标题" min-width="200">
+						<template #default="{ row }">
+							<order-detail :order="row" @updateList="queryList">{{ row.arrangeTitle }}</order-detail>
+						</template>
+					</vxe-column>
+					<vxe-column field="hotspotSpliceName" title="热点全称" width="200"></vxe-column>
+					<vxe-column field="acceptType" title="受理类型" width="120"></vxe-column>
+					<vxe-column field="sourceChannel" title="来源渠道" width="140"></vxe-column>
+					<vxe-column field="address" title="事发地址" width="150"></vxe-column>
+					<vxe-column field="arrangeContent" title="受理内容" min-width="200"></vxe-column>
+					<vxe-column field="arrangementOpinion" title="承办意见" min-width="200"></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 field="filedTime" title="办结时间" width="160">
+						<template #default="{ row }">
+							{{ formatDate(row.filedTime, 'YYYY-mm-dd HH:MM:SS') }}
+						</template>
+					</vxe-column>
+					<vxe-column field="pushStateText" title="推送状态" width="100"></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"
-				role-key="orgId"
-				:toolButton="['refresh', 'setting', 'exportCurrent', 'exportAll']"
-				:exportMethod="centerEmergencyListExport"
-				:exportParams="requestParams"
-			>
-				<template #table-search>
-					<el-form :model="state.queryParams" ref="ruleFormRef" @submit.native.prevent inline>
-						<el-form-item label="工单标题" prop="Title">
-							<el-input v-model="state.queryParams.Title" placeholder="工单标题" clearable @keyup.enter="handleQuery" class="keyword-input" />
-						</el-form-item>
-						<el-form-item label="工单编码" prop="No">
-							<el-input v-model="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 #title="{ row }">
-					<order-detail :order="row" @updateList="queryList">{{ row.title }}</order-detail>
-				</template>
-			</ProTable>
+				:disabled="state.loading"
+			/>
 		</div>
 		<!--	更多查询	-->
 		<el-drawer v-model="drawer" title="更多查询" size="500px">
@@ -85,41 +124,14 @@
 <script setup lang="tsx" name="statisticsCenterEmergencyList">
 import { onMounted, reactive, ref, defineAsyncComponent } from 'vue';
 import { FormInstance } from 'element-plus';
-import { centerEmergencyList, centerEmergencyListExport } from '@/api/statistics/center';
+import { centerEmergencyList, centerEmergencyListExport, centerReturnErrorDetailExport } from '@/api/statistics/center';
 import { defaultTimeStartEnd, shortcuts } from '@/utils/constants';
 import Other from '@/utils/other';
 import { formatDate } from '@/utils/formatTime';
 
 // 引入组件
 const OrderDetail = defineAsyncComponent(() => import('@/components/OrderDetail/index.vue')); // 工单详情
-// 表格配置项
-const columns = ref<any[]>([
-	{ prop: 'no', label: '工单编码', minWidth: 140 },
-	{ prop: 'arrangeTitle', label: '工单标题', minWidth: 200 },
-	{ prop: 'hotspotSpliceName', label: '热点全称', minWidth: 200 },
-	{ prop: 'acceptType', label: '受理类型', minWidth: 100 },
-	{ prop: 'sourceChannel', label: '来源渠道', minWidth: 100 },
-	{ prop: 'address', label: '事发地址', minWidth: 150 },
-	{ prop: 'arrangeContent', label: '受理内容', minWidth: 200 },
-	{ prop: 'arrangementOpinion', label: '承办意见', minWidth: 200 },
-	{
-		prop: 'creationTime',
-		label: '创建时间',
-		minWidth: 160,
-		render: (scope) => {
-			return <span>{formatDate(scope.row?.creationTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
-		},
-	},
-	{
-		prop: 'filedTime',
-		label: '办结时间',
-		minWidth: 160,
-		render: (scope) => {
-			return <span>{formatDate(scope.row?.filedTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
-		},
-	},
-	{ prop: 'pushStateText', label: '推送状态', minWidth: 100 },
-]);
+const pagination = defineAsyncComponent(() => import('@/components/ProTable/components/Pagination.vue')); // 分页
 // 定义变量内容
 const state = reactive<any>({
 	queryParams: {
@@ -178,7 +190,12 @@ const resetQuery = (formEl: FormInstance | undefined) => {
 	ruleFormRef.value?.resetFields();
 	queryList();
 };
+const toolbarRef = ref<RefType>();
+const tableRef = ref<RefType>();
 onMounted(() => {
 	queryList();
+	if (tableRef.value && toolbarRef.value) {
+		tableRef.value.connect(toolbarRef.value);
+	}
 });
 </script>

src/views/statistics/center/frequentlyEvent.vue

@@ -1,38 +1,73 @@
 <template>
 	<div class="statistics-center-frequently-event-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 prop="crTime" label="受理时间" >
+					<statistical-time v-model="state.queryParams.crTime" @change="handleQuery" ref="statisticalTimeRef" :disabled="state.loading"/>
+				</el-form-item>
+				<el-form-item label="受理类型" prop="AcceptType">
+					<el-select v-model="state.queryParams.AcceptType" placeholder="请选择受理类型" clearable class="w100" @change="handleQuery">
+						<el-button @click="drawer = true" class="default-button"> <SvgIcon name="ele-Search" class="mr5" />更多查询</el-button>
+					</el-select>
+				</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"
+				custom
+				:refresh="{
+					queryMethod: handleQuery
+				}"
 			>
-				<template #table-search>
-					<el-form :model="state.queryParams" ref="ruleFormRef" @submit.native.prevent inline>
-						<el-form-item prop="crTime" label="受理时间" >
-							<statistical-time v-model="state.queryParams.crTime" @change="handleQuery" ref="statisticalTimeRef" :disabled="state.loading"/>
-						</el-form-item>
-						<el-form-item label="受理类型" prop="AcceptType">
-							<el-select v-model="state.queryParams.AcceptType" placeholder="请选择受理类型" clearable class="w100" @change="handleQuery">
-								<el-button @click="drawer = true" class="default-button"> <SvgIcon name="ele-Search" class="mr5" />更多查询</el-button>
-							</el-select>
-						</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">
-					<el-button type="primary" @click="onAnalysis" :disabled="!scope.isSelected">
+				<template #buttons>
+					<el-button type="primary" @click="onAnalysis" :disabled="isChecked">
 						<SvgIcon name="ele-Document" class="mr5" />生成分析报告
 					</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
+					:scrollY="{ enabled: true, gt: 0 }"
+					id="statisticsCenterFrequentlyEvent"
+					:custom-config="{ storage: true }"
+					showHeaderOverflow
+				>
+					<vxe-column type="checkbox" width="50" align="center"></vxe-column>
+					<vxe-column field="areaName" title="事发地址"></vxe-column>
+					<vxe-column field="title" title="标题"></vxe-column>
+					<vxe-column field="acceptType" title="受理类型"></vxe-column>
+					<vxe-column field="hotspotName" title="热点分类"></vxe-column>
+					<vxe-column field="sumCount" title="预警次数" width="90">
+						<template #default="{ row }">
+							<el-button type="primary" link @click="linkDetail(row)">
+							{{row.sumCount}}
+							</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-dialog v-model="state.dialogVisible" width="600px" draggable title="生成分析报告" @close="close" destroy-on-close>
 			<el-form :model="state.ruleForm" label-width="100px" ref="ruleFormRef">
@@ -79,9 +114,9 @@
 	</div>
 </template>
 <script setup lang="tsx" name="statisticsCenterFrequentlyEvent">
-import { defineAsyncComponent, onMounted, reactive, ref } from 'vue';
+import { computed, defineAsyncComponent, onMounted, reactive, ref } from 'vue';
 import { ElMessageBox, FormInstance } from 'element-plus';
-import { defaultDate, shortcuts } from '@/utils/constants';
+import { defaultDate } from '@/utils/constants';
 import { treeArea } from '@/api/auxiliary/area';
 import { centerAddAnalysisReport, departmentHighFrequencyEvent } from '@/api/statistics/center';
 import { useRouter } from 'vue-router';
@@ -92,26 +127,7 @@ import mittBus from '@/utils/mitt';
 
 
 const StatisticalTime = defineAsyncComponent(() => import('@/components/StatisticalTime/index.vue')); // 日期类型选择组件
-const proTableRef = ref<RefType>(); // 表格ref
-// 表格配置项
-const columns = ref<any[]>([
-	{ type: 'selection', fixed: 'left', width: 40, align: 'center' },
-	{ prop: 'areaName', label: '事发地址' },
-	{ prop: 'title', label: '标题' },
-	{ prop: 'acceptType', label: '受理类型' },
-	{ prop: 'hotspotName', label: '热点分类' },
-	{
-		prop: 'sumCount',
-		label: '预警次数',
-		render: (scope) => {
-			return (
-				<el-button type="primary" link onClick={() => linkDetail(scope.row)}>
-					{scope.row.sumCount}
-				</el-button>
-			);
-		},
-	},
-]);
+const pagination = defineAsyncComponent(() => import('@/components/ProTable/components/Pagination.vue')); // 分页
 // 定义变量内容
 const state = reactive<any>({
 	queryParams: {
@@ -213,7 +229,7 @@ const onSubmit = throttle((formEl: FormInstance | undefined) => {
 			remark: state.ruleForm.remark,
 			startTime: state.queryParams.crTime === null ? null : state.queryParams.crTime[0],
 			endTime: state.queryParams.crTime === null ? null : state.queryParams.crTime[1],
-			analysisList: proTableRef.value.selectedList,
+			analysisList: checkTable.value,
 		};
 		centerAddAnalysisReport(request)
 			.then(() => {
@@ -243,8 +259,32 @@ const onSubmit = throttle((formEl: FormInstance | undefined) => {
 			});
 	});
 }, 300);
+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(() => {
-	getBaseData();
 	queryList();
+	if (tableRef.value && toolbarRef.value) {
+		tableRef.value.connect(toolbarRef.value);
+	}
+	getBaseData();
 });
 </script>

src/views/statistics/center/frequentlyTel.vue

@@ -1,33 +1,62 @@
 <template>
 	<div class="statistics-center-frequently-tel-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 prop="crTime">
+					<statistical-time v-model="state.queryParams.crTime" @change="handleQuery" ref="statisticalTimeRef" :disabled="state.loading"/>
+				</el-form-item>
+				<el-form-item label="来电号码" prop="PhoneNum">
+					<el-input v-model="state.queryParams.PhoneNum" placeholder="来电号码" clearable @keyup.enter="handleQuery" class="keyword-input" />
+				</el-form-item>
+				<el-form-item label-width="0">
+					<el-button type="primary" @click="handleQuery" :loading="state.loading"> <SvgIcon name="ele-Search" class="mr5" />查询 </el-button>
+					<el-button @click="resetQuery(ruleFormRef)" class="default-button" :loading="state.loading">
+						<SvgIcon name="ele-Refresh" 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>
-						<el-form-item prop="crTime">
-							<statistical-time v-model="state.queryParams.crTime" @change="handleQuery" ref="statisticalTimeRef" :disabled="state.loading"/>
-						</el-form-item>
-						<el-form-item label="来电号码" prop="PhoneNum">
-							<el-input v-model="state.queryParams.PhoneNum" placeholder="来电号码" clearable @keyup.enter="handleQuery" class="keyword-input" />
-						</el-form-item>
-						<el-form-item label-width="0">
-							<el-button type="primary" @click="handleQuery" :loading="state.loading"> <SvgIcon name="ele-Search" class="mr5" />查询 </el-button>
-							<el-button @click="resetQuery(ruleFormRef)" class="default-button" :loading="state.loading">
-								<SvgIcon name="ele-Refresh" class="mr5" />重置
+			</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="statisticsCenterFrequentlyTel"
+					:custom-config="{ storage: true }"
+					showHeaderOverflow
+				>
+					<vxe-column field="callnum" title="来电号码"></vxe-column>
+					<vxe-column field="orderCountNum" title="工单数" width="90">
+						<template #default="{ row }">
+							<el-button type="primary" link @click="linkDetail(row)">
+								{{row.orderCountNum}}
 							</el-button>
-						</el-form-item>
-					</el-form>
-				</template>
-			</ProTable>
+						</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>
 	</div>
 </template>
@@ -40,21 +69,7 @@ import { useRouter } from 'vue-router';
 import Other from '@/utils/other';
 
 const StatisticalTime = defineAsyncComponent(() => import('@/components/StatisticalTime/index.vue')); // 日期类型选择组件
-// 表格配置项
-const columns = ref<any[]>([
-	{ prop: 'callnum', label: '来电号码' },
-	{
-		prop: 'orderCountNum',
-		label: '工单数',
-		render: (scope) => {
-			return (
-				<el-button type="primary" link onClick={() => linkDetail(scope.row)}>
-					{scope.row.orderCountNum}
-				</el-button>
-			);
-		},
-	},
-]);
+const pagination = defineAsyncComponent(() => import('@/components/ProTable/components/Pagination.vue')); // 分页
 // 定义变量内容
 const ruleFormRef = ref<RefType>(); // 表单ref
 const state = reactive<any>({
@@ -118,7 +133,12 @@ const resetQuery = (formEl: FormInstance | undefined) => {
 	statisticalTimeRef.value.reset();
 	queryList();
 };
+const toolbarRef = ref<RefType>();
+const tableRef = ref<RefType>();
 onMounted(() => {
 	queryList();
+	if (tableRef.value && toolbarRef.value) {
+		tableRef.value.connect(toolbarRef.value);
+	}
 });
 </script>

src/views/statistics/center/transferCity.vue

@@ -5,62 +5,79 @@
 				<el-tab-pane name="out" label="转出列表"></el-tab-pane>
 				<el-tab-pane name="in" label="转入列表"></el-tab-pane>
 			</el-tabs>
-			<ProTable
-				ref="proTableRef"
-				:columns="columnsOut"
-				:data="state.tableData"
-				@updateTable="queryList"
+			<el-form :model="state.queryParams" ref="ruleFormRef" @submit.native.prevent inline>
+				<el-form-item prop="crTime">
+					<statistical-time v-model="state.queryParams.crTime" @change="handleQuery" :disabled="state.loading" ref="statisticalTimeRef"/>
+				</el-form-item>
+				<el-form-item prop="CiryName" label="互转城市名称">
+					<el-input v-model="state.queryParams.CiryName" 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="resetQuery(ruleFormRef)" class="default-button" :loading="state.loading">
+						<SvgIcon name="ele-Refresh" 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"
-				v-if="state.queryParams.direction === 'out'"
+				custom
+				:refresh="{
+					queryMethod: handleQuery
+				}"
 			>
-				<template #table-search>
-					<el-form :model="state.queryParams" ref="ruleFormRef" @submit.native.prevent inline>
-						<el-form-item prop="crTime">
-							<statistical-time v-model="state.queryParams.crTime" @change="handleQuery" :disabled="state.loading" ref="statisticalTimeRef"/>
-						</el-form-item>
-						<el-form-item prop="CiryName" label="互转城市名称">
-							<el-input v-model="state.queryParams.CiryName" 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="resetQuery(ruleFormRef)" class="default-button" :loading="state.loading">
-								<SvgIcon name="ele-Refresh" class="mr5" />重置
-							</el-button>
-						</el-form-item>
-					</el-form>
-				</template>
-			</ProTable>
-			<ProTable
-				ref="proTableRef"
-				:columns="columnsIn"
-				:data="state.tableData"
-				@updateTable="queryList"
-				:loading="state.loading"
+			</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="statisticsCenterTransferCity"
+					:custom-config="{ storage: true }"
+					showHeaderOverflow
+				>
+					<vxe-column field="orderCode" title="受理编号" width="140"></vxe-column>
+					<template v-if="state.queryParams.direction === 'out'">
+						<vxe-column field="transferOutTime" title="转出时间" width="160">
+							<template #default="{ row }">
+								{{ formatDate(row.transferOutTime, 'YYYY-mm-dd HH:MM:SS') }}
+							</template>
+						</vxe-column>
+						<vxe-column field="sendTimes" title="同步次数" width="100"></vxe-column>
+						<vxe-column field="isSuccess" title="同步状态" width="100">
+							<template #default="{ row }">
+								{{ row.isSuccess ? row.isSuccess ? '成功' : '失败' : '同步中' }}
+							</template>
+						</vxe-column>
+						<vxe-column field="result" title="同步返回" min-width="300"></vxe-column>
+						<vxe-column field="cityName" title="转入市州" width="140"></vxe-column>
+					</template>
+					<template v-else>
+						<vxe-column field="transferOutTime" title="转入时间" width="160">
+							<template #default="{ row }">
+								{{ formatDate(row.transferOutTime, 'YYYY-mm-dd HH:MM:SS') }}
+							</template>
+						</vxe-column>
+						<vxe-column field="result" title="同步转入" min-width="300"></vxe-column>
+						<vxe-column field="cityName" title="来源市州" width="140"></vxe-column>
+					</template>
+				</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"
-				v-else
-			>
-				<template #table-search>
-					<el-form :model="state.queryParams" ref="ruleFormRef" @submit.native.prevent inline>
-						<el-form-item prop="crTime">
-							<statistical-time v-model="state.queryParams.crTime" @change="handleQuery"  ref="statisticalTimeRef"/>
-						</el-form-item>
-						<el-form-item prop="CiryName" label="互转城市名称">
-							<el-input v-model="state.queryParams.CiryName" placeholder="互转城市名称" clearable @keyup.enter="handleQuery" class="keyword-input" />
-						</el-form-item>
-						<el-form-item label-width="0">
-							<el-button type="primary" @click="handleQuery" :loading="state.loading"> <SvgIcon name="ele-Search" class="mr5" />查询 </el-button>
-							<el-button @click="resetQuery(ruleFormRef)" class="default-button" :loading="state.loading">
-								<SvgIcon name="ele-Refresh" class="mr5" />重置
-							</el-button>
-						</el-form-item>
-					</el-form>
-				</template>
-			</ProTable>
+				:disabled="state.loading"
+			/>
 		</div>
 	</div>
 </template>
@@ -73,41 +90,7 @@ import { FormInstance } from 'element-plus';
 import Other from '@/utils/other';
 
 const StatisticalTime = defineAsyncComponent(() => import('@/components/StatisticalTime/index.vue')); // 日期类型选择组件
-// 表格配置项
-const columnsOut = ref<any[]>([
-	{ prop: 'orderCode', label: '受理编号' },
-	{
-		prop: 'transferOutTime',
-		label: '转出时间',
-		width: 170,
-		render: (scope) => {
-			return <span>{formatDate(scope.row.transferOutTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
-		},
-	},
-	{ prop: 'sendTimes', label: '同步次数' },
-	{
-		prop: 'isSuccess',
-		label: '同步状态',
-		render: (scope) => {
-			return <>{scope.row.isSuccess ? <span>{scope.row.isSuccess ? '成功' : '失败'}</span> : <span>同步中</span>}</>;
-		},
-	},
-	{ prop: 'result', label: '同步返回', minWidth: 300 },
-	{ prop: 'cityName', label: '转入市州' },
-]);
-const columnsIn = ref<any[]>([
-	{ prop: 'orderCode', label: '转入受理编号' },
-	{
-		prop: 'transferOutTime',
-		label: '转入时间',
-		width: 170,
-		render: (scope) => {
-			return <span>{formatDate(scope.row.transferOutTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
-		},
-	},
-	{ prop: 'result', label: '同步转入', minWidth: 400 },
-	{ prop: 'cityName', label: '来源市州' },
-]);
+const pagination = defineAsyncComponent(() => import('@/components/ProTable/components/Pagination.vue')); // 分页
 // 定义变量内容
 const state = reactive<any>({
 	queryParams: {
@@ -165,7 +148,12 @@ const queryList = () => {
 		});
 	}
 };
+const toolbarRef = ref<RefType>();
+const tableRef = ref<RefType>();
 onMounted(() => {
 	queryList();
+	if (tableRef.value && toolbarRef.value) {
+		tableRef.value.connect(toolbarRef.value);
+	}
 });
 </script>

src/views/statistics/center/wrongItem.vue

@@ -1,40 +1,62 @@
 <template>
 	<div class="statistics-center-wrong-item-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 prop="crTime">
+					<statistical-time v-model="state.queryParams.crTime" @change="handleQuery" ref="statisticalTimeRef" :disabled="state.loading"/>
+				</el-form-item>
+				<el-form-item label="部门名称" prop="OrgName">
+					<el-input v-model="state.queryParams.OrgName" 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="resetQuery(ruleFormRef)" class="default-button" :loading="state.loading">
+						<SvgIcon name="ele-Refresh" class="mr5" />重置
+					</el-button>
+					<el-button type="primary" @click="onDetail" :loading="state.loading"><SvgIcon name="ele-List" class="mr5" /> 回退错件明细 </el-button>
+				</el-form-item>
+			</el-form>
+			<vxe-toolbar
+				ref="toolbarRef"
 				:loading="state.loading"
-				border
-				@sort-change="sortChange"
+				custom
+				:refresh="{
+					queryMethod: handleQuery
+				}"
+				:tools="[{ toolRender: { name: 'exportCurrent' } }, { toolRender: { name: 'exportAll' } }]"
+			>
+			</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="statisticsCenterWrongItem"
+					:custom-config="{ storage: true }"
+					showHeaderOverflow
+					:sort-config="{ remote: true }"
+					@sort-change="sortChange"
+					:params="{ exportMethod: centerReturnErrorExport, exportParams: requestParams }"
+				>
+					<vxe-column field="orgName" title="部门名称"></vxe-column>
+					<vxe-column field="time" title="记录日期"></vxe-column>
+					<vxe-column field="num" title="数量" sortable></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"
-				role-key="orgId"
-				:toolButton="['refresh', 'setting', 'exportCurrent', 'exportAll']"
-				:exportMethod="centerReturnErrorExport"
-				:exportParams="requestParams"
-			>
-        <template #table-search>
-          <el-form :model="state.queryParams" ref="ruleFormRef" @submit.native.prevent inline>
-						<el-form-item prop="crTime">
-							<statistical-time v-model="state.queryParams.crTime" @change="handleQuery" ref="statisticalTimeRef" :disabled="state.loading"/>
-						</el-form-item>
-            <el-form-item label="部门名称" prop="OrgName">
-              <el-input v-model="state.queryParams.OrgName" 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="resetQuery(ruleFormRef)" class="default-button" :loading="state.loading">
-                <SvgIcon name="ele-Refresh" class="mr5" />重置
-              </el-button>
-              <el-button type="primary" @click="onDetail" :loading="state.loading"><SvgIcon name="ele-List" class="mr5" /> 回退错件明细 </el-button>
-            </el-form-item>
-          </el-form>
-        </template>
-			</ProTable>
+				:disabled="state.loading"
+			/>
 		</div>
 	</div>
 </template>
@@ -48,24 +70,7 @@ import Other from '@/utils/other';
 
 
 const StatisticalTime = defineAsyncComponent(() => import('@/components/StatisticalTime/index.vue')); // 日期类型选择组件
-// 表格配置项
-const columns = ref<any[]>([
-	{ prop: 'orgName', label: '部门名称', align: 'center' },
-	{ prop: 'time', label: '记录日期', align: 'center' },
-	{
-		prop: 'num',
-		label: '数量',
-		align: 'center',
-		sortable: 'custom',
-		/*    render: (scope) => {
-      return (
-        <el-button type="primary" link onClick={() => linkDetail(scope.row)}>
-          {scope.row.num}
-        </el-button>
-      );
-    },*/
-	},
-]);
+const pagination = defineAsyncComponent(() => import('@/components/ProTable/components/Pagination.vue')); // 分页
 // 定义变量内容
 const ruleFormRef = ref<RefType>(); // 表单ref
 const state = reactive<any>({
@@ -107,10 +112,10 @@ const queryList = () => {
 };
 // 排序
 const sortChange = (val: any) => {
-	state.queryParams.SortField = val.order ? val.prop : null;
+	state.queryParams.SortField = val.order ? val.field : null;
 	// 0 升序 1 降序
-	state.queryParams.SortRule = val.order ? (val.order == 'descending' ? 1 : 0) : null;
-	queryList();
+	state.queryParams.SortRule = val.order ? (val.order == 'desc' ? 1 : 0) : null;
+	handleQuery();
 };
 /** 重置按钮操作 */
 const statisticalTimeRef = ref<RefType>();
@@ -122,24 +127,18 @@ const resetQuery = (formEl: FormInstance | undefined) => {
 };
 // 跳转详情
 const router = useRouter();
-const linkDetail = (row: any) => {
-	console.log('详情', row);
-	/*router.push({
-    name: 'statisticsDepartmentOverdueDetail',
-    query: {
-      StartTime: state.queryParams?.crTime[0],
-      EndTime: state.queryParams?.crTime[1],
-      id: row.orgId,
-    },
-  });*/
-};
 // 回退错件明细
 const onDetail = () => {
 	router.push({
 		name: 'statisticsCenterDetailWrongItem',
 	});
 };
+const toolbarRef = ref<RefType>();
+const tableRef = ref<RefType>();
 onMounted(() => {
 	queryList();
+	if (tableRef.value && toolbarRef.value) {
+		tableRef.value.connect(toolbarRef.value);
+	}
 });
 </script>

src/views/statistics/order/detailVisitDiscontent.vue

@@ -55,14 +55,6 @@
 						</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"
-						:v-if="['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>
@@ -78,45 +70,21 @@
 							{{ formatDate(row.order?.filedTime, 'YYYY-mm-dd HH:MM:SS') }}
 						</template>
 					</vxe-column>
-					<vxe-column field="publishTime" title="发布时间" width="160">
+					<vxe-column field="orderVisit.publishTime" title="发布时间" width="160">
 						<template #default="{ row }">
-							{{ formatDate(row.publishTime, 'YYYY-mm-dd HH:MM:SS') }}
+							{{ formatDate(row.orderVisit?.publishTime, 'YYYY-mm-dd HH:MM:SS') }}
 						</template>
 					</vxe-column>
-					<vxe-column field="creationTime" title="回访任务创建时间" width="170">
+					<vxe-column field="orderVisit.employeeName" title="回访人" width="150"></vxe-column>
+					<vxe-column field="orderVisit.visitTime" title="回访时间" width="160">
 						<template #default="{ row }">
-							{{ formatDate(row.creationTime, 'YYYY-mm-dd HH:MM:SS') }}
+							{{ formatDate(row.orderVisit?.visitTime, '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" v-if="['ZiGong', 'LuZhou'].includes(themeConfig.appScope)">
-						<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="row.visitState === 30"
-							>
-								修改回访结果
-							</el-button>
-						</template>
-					</vxe-column>
-					<vxe-column title="操作" fixed="right" width="100" align="center" v-else>
+					<vxe-column field="visitContent" title="回访意见" min-width="200"></vxe-column>
+					<vxe-column field="orgNoSatisfiedReasonText" title="不满意原因" width="200"></vxe-column>
+					<vxe-column field="order.counterSignTypeText" title="是否会签" width="100"></vxe-column>
+					<vxe-column title="操作" fixed="right" width="100" align="center">
 						<template #default="{ row }">
 							<el-button link type="primary" @click="visitDetail(row)" title="查看回访详情"> 回访详情 </el-button>
 						</template>
@@ -130,30 +98,6 @@
 				v-model:page-size="state.queryParams.PageSize"
 				:disabled="state.loading"
 			/>
-			<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="departmentUnsatisfiedDetailExport"
-				:exportParams="requestParams"
-			>
-				<template #table-search>
-
-				</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="visitDetail(row)" title="查看回访详情"> 回访详情 </el-button>
-				</template>
-			</ProTable>
 		</div>
 		<!-- 回访详情 -->
 		<visit-detail-com ref="visitDetailRef" @updateList="queryList" />
@@ -187,68 +131,6 @@ const state = reactive<any>({
 	loading: false, // 加载
 	total: 0, // 总数
 });
-const columns = ref<any[]>([
-	{ 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: 'orderVisit.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: 'visitOrgName', label: '回访部门', minWidth: 140 },
-	{ prop: 'order.actualHandleOrgName', label: '接办部门', minWidth: 140 },
-	{
-		prop: 'order.startTime',
-		label: '受理时间',
-		minWidth: 160,
-		render: (scope: any) => {
-			return <span>{formatDate(scope.row.order?.startTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
-		},
-	},
-	{
-		prop: 'order.filedTime',
-		label: '办结时间',
-		minWidth: 160,
-		render: (scope: any) => {
-			return <span>{formatDate(scope.row.order?.filedTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
-		},
-	},
-	{
-		prop: 'orderVisit.publishTime',
-		label: '发布时间',
-		minWidth: 160,
-		render: (scope: any) => {
-			return <span>{formatDate(scope.row.orderVisit?.publishTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
-		},
-	},
-	{
-		prop: 'orderVisit.creationTime',
-		label: '回访任务创建时间',
-		minWidth: 160,
-		render: (scope: any) => {
-			return <span>{formatDate(scope.row.orderVisit?.creationTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
-		},
-	},
-	{ prop: 'orderVisit.employeeName', label: '回访人' },
-	{
-		prop: 'orderVisit.visitTime',
-		label: '回访时间',
-		minWidth: 160,
-		render: (scope: any) => {
-			return <span>{formatDate(scope.row.orderVisit?.visitTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
-		},
-	},
-	{
-		prop: 'visitContent',
-		label: '回访意见',
-		minWidth: 200,
-	},
-	{ prop: 'order.counterSignTypeText', label: '是否会签', minWidth: 90 },
-	{ prop: 'orgNoSatisfiedReasonText', label: '不满意原因', minWidth: 150 },
-	{ prop: 'operation', label: '操作', fixed: 'right', width: 90, align: 'center' },
-]);
 /** 获取列表 */
 const route = useRoute();
 /** 搜索按钮操作 */
@@ -292,7 +174,12 @@ const visitDetailRef = ref<RefType>();
 const visitDetail = (row: any) => {
 	visitDetailRef.value.openDialog(row.orderVisit, '回访详情');
 };
+const toolbarRef = ref<RefType>();
+const tableRef = ref<RefType>();
 onMounted(() => {
 	queryList();
+	if (tableRef.value && toolbarRef.value) {
+		tableRef.value.connect(toolbarRef.value);
+	}
 });
 </script>