reactor:来电弹单修改为配置（振铃弹单，接通弹单）;

src/views/statistics/department/detailSh.vue

@@ -1,26 +1,84 @@
 <template>
 	<div class="business-second-handle-audit-container layout-padding">
     <div class="layout-padding-auto layout-padding-view pd20">
-			<ProTable
-				ref="proTableRef"
-				:columns="columns"
-				:data="state.tableData"
-				@updateTable="queryList"
+			<vxe-toolbar
+				ref="toolbarRef"
 				:loading="state.loading"
+				custom
+				:refresh="{
+					queryMethod: queryList,
+				}"
+				: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,useKey:true }"
+					ref="tableRef"
+					height="auto"
+					auto-resize
+					show-overflow
+					:scrollY="{ enabled: true, gt: 20, mode: 'wheel' }"
+					id="statisticsDepartmentDetailSh"
+					:custom-config="{
+						storage: true,
+					}"
+					showHeaderOverflow
+					:params="{ exportMethod: departmentSecondDetailExport, exportParams: requestParams }"
+				>
+					<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="100"></vxe-column>
+					<vxe-column field="order.currentStepName" title="当前节点" width="100"></vxe-column>
+					<vxe-column field="order.reTransactNum" title="重办次数" width="100"></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.startTime" title="受理时间" width="160">
+						<template #default="{ row }">
+							{{ formatDate(row.order?.startTime, 'YYYY-mm-dd HH:MM:SS') }}
+						</template>
+					</vxe-column>
+					<vxe-column field="order.expiredTime" title="工单期满时间" width="160">
+						<template #default="{ row }">
+							{{ formatDate(row.order?.expiredTime, 'YYYY-mm-dd HH:MM:SS') }}
+						</template>
+					</vxe-column>
+					<vxe-column field="order.actualHandleOrgName" title="接办部门" width="140"></vxe-column>
+					<vxe-column field="order.actualHandleTime" title="接办时间" width="160">
+						<template #default="{ row }">
+							{{ formatDate(row.order?.actualHandleTime, '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="order.acceptType" title="受理类型" width="110"></vxe-column>
+					<vxe-column field="order.hotspotName" title="热点分类" width="150"></vxe-column>
+					<vxe-column field="order.acceptorName" title="受理人" width="100"></vxe-column>
+					<vxe-column field="visitDetail.orgProcessingResultsText" title="满意度" width="140"></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="departmentSecondDetailExport"
-				:exportParams="requestParams"
-			>
-				<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>
-			</ProTable>
+				:disabled="state.loading"
+			/>
 		</div>
 	</div>
 </template>
@@ -31,56 +89,7 @@ import { useRoute, useRouter } from 'vue-router';
 import { departmentSecondDetail, departmentSecondDetailExport } from '@/api/statistics/department';
 // 引入组件
 const OrderDetail = defineAsyncComponent(() => import('@/components/OrderDetail/index.vue')); // 工单详情
-// 定义变量内容
-const ruleFormRef = ref<RefType>(); // 表单ref
-const router = useRouter(); // 路由
-const proTableRef = ref<RefType>(); // 表格ref
-// 表格配置项
-const columns = ref<any[]>([
-	{ prop: 'order.expiredStatusText', label: '超期状态', align: 'center', width: 80 },
-	{ prop: 'order.statusText', label: '工单状态', width: 100 },
-	{ prop: 'order.sourceChannel', label: '来源渠道', width: 100 },
-	{ prop: 'order.currentStepName', label: '当前节点', width: 100 },
-	{ prop: 'order.reTransactNum', label: '重办次数' },
-	{ prop: 'order.no', label: '工单编码', width: 140 },
-	{
-		prop: 'order.startTime',
-		label: '受理时间',
-		width: 160,
-		render: (scope) => {
-			return <span>{formatDate(scope.row.order?.startTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
-		},
-	},
-	{ prop: 'order.title', label: '工单标题', width: 200 },
-	{
-		prop: 'order.expiredTime',
-		label: '工单期满时间',
-		width: 160,
-		render: (scope) => {
-			return <span>{formatDate(scope.row.order?.expiredTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
-		},
-	},
-	{ prop: 'order.actualHandleOrgName', label: '接办部门', width: 140 },
-	{
-		prop: 'order.actualHandleTime',
-		label: '接办时间',
-		width: 160,
-		render: (scope) => {
-			return <span>{formatDate(scope.row.order?.actualHandleTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
-		},
-	},
-	{
-		prop: 'order.filedTime',
-		label: '办结时间',
-		width: 160,
-		render: (scope) => {
-			return <span>{formatDate(scope.row.order?.filedTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
-		},
-	},
-	{ prop: 'order.acceptType', label: '受理类型', width: 100 },
-	{ prop: 'order.hotspotName', label: '热点分类', width: 150 },
-	{ prop: 'visitDetail.orgProcessingResultsText', label: '满意度' }
-]);
+const pagination = defineAsyncComponent(() => import('@/components/ProTable/components/Pagination.vue')); // 分页
 const state = reactive({
 	queryParams: {
 		// 查询条件
@@ -123,7 +132,12 @@ const queryList = () => {
 			state.loading = false;
 		});
 };
+const toolbarRef = ref<RefType>();
+const tableRef = ref<RefType>();
 onMounted(() => {
 	queryList();
+	if (tableRef.value && toolbarRef.value) {
+		tableRef.value.connect(toolbarRef.value);
+	}
 });
 </script>

src/views/statistics/department/detailShSatisfied.vue

@@ -1,26 +1,84 @@
 <template>
 	<div class="business-second-handle-audit-container layout-padding">
     <div class="layout-padding-auto layout-padding-view pd20">
-			<ProTable
-				ref="proTableRef"
-				:columns="columns"
-				:data="state.tableData"
-				@updateTable="queryList"
+			<vxe-toolbar
+				ref="toolbarRef"
 				:loading="state.loading"
+				custom
+				:refresh="{
+					queryMethod: queryList,
+				}"
+				: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,useKey:true }"
+					ref="tableRef"
+					height="auto"
+					auto-resize
+					show-overflow
+					:scrollY="{ enabled: true, gt: 20, mode: 'wheel' }"
+					id="statisticsDepartmentDetailShSatisfied"
+					:custom-config="{
+						storage: true,
+					}"
+					showHeaderOverflow
+					:params="{ exportMethod: departmentSecondSatisfactionDetailExport, exportParams: requestParams }"
+				>
+					<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="100"></vxe-column>
+					<vxe-column field="order.currentStepName" title="当前节点" width="100"></vxe-column>
+					<vxe-column field="order.reTransactNum" title="重办次数" width="100"></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.startTime" title="受理时间" width="160">
+						<template #default="{ row }">
+							{{ formatDate(row.order?.startTime, 'YYYY-mm-dd HH:MM:SS') }}
+						</template>
+					</vxe-column>
+					<vxe-column field="order.expiredTime" title="工单期满时间" width="160">
+						<template #default="{ row }">
+							{{ formatDate(row.order?.expiredTime, 'YYYY-mm-dd HH:MM:SS') }}
+						</template>
+					</vxe-column>
+					<vxe-column field="order.actualHandleOrgName" title="接办部门" width="140"></vxe-column>
+					<vxe-column field="order.actualHandleTime" title="接办时间" width="160">
+						<template #default="{ row }">
+							{{ formatDate(row.order?.actualHandleTime, '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="order.acceptType" title="受理类型" width="110"></vxe-column>
+					<vxe-column field="order.hotspotName" title="热点分类" width="150"></vxe-column>
+					<vxe-column field="order.acceptorName" title="受理人" width="100"></vxe-column>
+					<vxe-column field="visitDetail.orgProcessingResultsText" title="满意度" width="140"></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="departmentSecondSatisfactionDetailExport"
-				:exportParams="requestParams"
-			>
-				<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>
-			</ProTable>
+				:disabled="state.loading"
+			/>
 		</div>
 	</div>
 </template>
@@ -28,57 +86,10 @@
 import { defineAsyncComponent, onMounted, reactive, ref } from 'vue';
 import { formatDate } from '@/utils/formatTime';
 import { useRoute } from 'vue-router';
-import { departmentSecondSatisfactionDetail, departmentSecondSatisfactionDetailExport } from '@/api/statistics/department';
+import { departmentSecondDetailExport, departmentSecondSatisfactionDetail, departmentSecondSatisfactionDetailExport } from '@/api/statistics/department';
 // 引入组件
 const OrderDetail = defineAsyncComponent(() => import('@/components/OrderDetail/index.vue')); // 工单详情
-// 定义变量内容
-const proTableRef = ref<RefType>(); // 表格ref
-// 表格配置项
-const columns = ref<any[]>([
-	{ prop: 'order.expiredStatusText', label: '超期状态', align: 'center', width: 80 },
-	{ prop: 'order.statusText', label: '工单状态', width: 100 },
-	{ prop: 'order.sourceChannel', label: '来源渠道', width: 100 },
-	{ prop: 'order.currentStepName', label: '当前节点', width: 100 },
-	{ prop: 'order.reTransactNum', label: '重办次数' },
-	{ prop: 'order.no', label: '工单编码', width: 140 },
-	{
-		prop: 'order.startTime',
-		label: '受理时间',
-		width: 160,
-		render: (scope) => {
-			return <span>{formatDate(scope.row.order?.startTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
-		},
-	},
-	{ prop: 'order.title', label: '工单标题', width: 200 },
-	{
-		prop: 'order.expiredTime',
-		label: '工单期满时间',
-		width: 160,
-		render: (scope) => {
-			return <span>{formatDate(scope.row.order?.expiredTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
-		},
-	},
-	{ prop: 'order.actualHandleOrgName', label: '接办部门', width: 140 },
-	{
-		prop: 'order.actualHandleTime',
-		label: '接办时间',
-		width: 160,
-		render: (scope) => {
-			return <span>{formatDate(scope.row.order?.actualHandleTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
-		},
-	},
-	{
-		prop: 'order.filedTime',
-		label: '办结时间',
-		width: 160,
-		render: (scope) => {
-			return <span>{formatDate(scope.row.order?.filedTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
-		},
-	},
-	{ prop: 'order.acceptType', label: '受理类型', width: 100 },
-	{ prop: 'order.hotspotName', label: '热点分类', width: 150 },
-	{ prop: 'visitDetail.orgProcessingResultsText', label: '满意度' }
-]);
+const pagination = defineAsyncComponent(() => import('@/components/ProTable/components/Pagination.vue')); // 分页
 const state = reactive({
 	queryParams: {
 		// 查询条件
@@ -122,7 +133,12 @@ const queryList = () => {
 			state.loading = false;
 		});
 };
+const toolbarRef = ref<RefType>();
+const tableRef = ref<RefType>();
 onMounted(() => {
 	queryList();
+	if (tableRef.value && toolbarRef.value) {
+		tableRef.value.connect(toolbarRef.value);
+	}
 });
 </script>

src/views/statistics/department/secondHandle.vue

@@ -1,37 +1,61 @@
 <template>
 	<div class="statistics-department-second-handle-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-form-item>
+			</el-form>
+			<vxe-toolbar
+				ref="toolbarRef"
 				:loading="state.loading"
-				show-summary
-				border
-				:pagination="false"
-				role-key="orgCode"
-				:toolButton="['refresh', 'setting', 'exportAll']"
-				:exportMethod="departmentSecondExport"
-				:exportParams="requestParams"
+				custom
+				:refresh="{
+					queryMethod: handleQuery,
+				}"
+				:tools="[{ toolRender: { name: 'exportAll' } }]"
 			>
-        <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-form-item>
-          </el-form>
-        </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,useKey:true }"
+					ref="tableRef"
+					height="auto"
+					auto-resize
+					show-overflow
+					:scrollY="{ enabled: true, gt: 20, mode: 'wheel' }"
+					id="statisticsDepartmentSecondHandle"
+					:custom-config="{
+						storage: true,
+					}"
+					showHeaderOverflow
+					:params="{ exportMethod: departmentSecondExport, exportParams: requestParams }"
+					show-footer
+					:footer-method="footerMethod"
+				>
+					<vxe-column field="orgName" title="部门名称" min-width="200"></vxe-column>
+					<vxe-column field="num" title="数量" sortable>
+						<template #default="{row}">
+							<el-button type="primary" link @click="linkDetail(row)">
+								{{row.num}}
+							</el-button>
+						</template>
+					</vxe-column>
+				</vxe-table>
+			</div>
 		</div>
 	</div>
 </template>
@@ -42,29 +66,10 @@ import { defaultDate } from '@/utils/constants';
 import { useRouter } from 'vue-router';
 import { departmentSecond, departmentSecondExport } from '@/api/statistics/department';
 import Other from '@/utils/other';
-
+import { centerUnreceivedExport } from '@/api/statistics/center';
+import XEUtils from 'xe-utils';
 
 const StatisticalTime = defineAsyncComponent(() => import('@/components/StatisticalTime/index.vue')); // 日期类型选择组件
-// 表格配置项
-const columns = ref<any[]>([
-	{
-		prop: 'orgName',
-		label: '部门名称',
-		align: 'center',
-	},
-	{
-		prop: 'num',
-		label: '数量',
-		align: 'center',
-		render: (scope) => {
-			return (
-				<el-button type="primary" link onClick={() => linkDetail(scope.row)}>
-					{scope.row.num}
-				</el-button>
-			);
-		},
-	},
-]);
 // 定义变量内容
 const ruleFormRef = ref<RefType>(); // 表单ref
 const state = reactive<any>({
@@ -107,6 +112,19 @@ const resetQuery = (formEl: FormInstance | undefined) => {
 	statisticalTimeRef.value.reset();
 	queryList();
 };
+// 计算合计
+const footerMethod = ({ columns, data }) => {
+	return [
+		columns.map((column: any, columnIndex: number) => {
+			if (columnIndex === 0) {
+				return '合计';
+			}
+			if (['num', 'restDuration'].includes(column.property)) {
+				return XEUtils.sum(data, column.property);
+			}
+		}),
+	];
+};
 // 跳转详情
 const router = useRouter();
 const linkDetail = (row: any) => {
@@ -120,7 +138,12 @@ const linkDetail = (row: any) => {
 		},
 	});
 };
+const toolbarRef = ref<RefType>();
+const tableRef = ref<RefType>();
 onMounted(() => {
 	queryList();
+	if (tableRef.value && toolbarRef.value) {
+		tableRef.value.connect(toolbarRef.value);
+	}
 });
 </script>

src/views/statistics/department/shSatisfied.vue

@@ -1,49 +1,32 @@
 <template>
 	<div class="statistics-department-sh-satisfied-container layout-padding">
     <div class="layout-padding-auto layout-padding-view pd20">
-			<ProTable
-				ref="proTableRef"
-				:columns="columns"
-				:data="state.tableData"
-				@updateTable="queryList"
-				:loading="state.loading"
-				border
-				:pagination="false"
-				:toolButton="['refresh', 'setting', 'exportAll']"
-				:exportMethod="departmentSecondSatisfactionExport"
-				: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 label="类型" prop="VisitTypeId">
-              <el-select v-model="state.queryParams.VisitTypeId" placeholder="类型" @change="handleQuery">
-                <el-option label="办件结果" value="1" />
-                <el-option label="办件态度" value="2" />
-              </el-select>
-            </el-form-item>-->
-            <el-form-item label="热线号码" prop="CDPN">
-              <el-select v-model="state.queryParams.CDPN" placeholder="请选择热线号码" clearable @change="handleQuery">
-                <el-option v-for="item in state.callForwardingSource" :value="item.dicDataValue" :key="item.dicDataValue" :label="item.dicDataName" />
-              </el-select>
-            </el-form-item>
-            <el-form-item>
-              <el-button type="primary" @click="handleQuery" :loading="state.loading"> <SvgIcon name="ele-Search" class="mr5" />查询 </el-button>
-              <el-button @click="resetQuery(ruleFormRef)" class="default-button" :loading="state.loading">
-                <SvgIcon name="ele-Refresh" class="mr5" />重置
-              </el-button>
-            </el-form-item>
-          </el-form>
-        </template>
-				<template #description>
+			<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 label="类型" prop="VisitTypeId">
+					<el-select v-model="state.queryParams.VisitTypeId" placeholder="类型" @change="handleQuery">
+						<el-option label="办件结果" value="1" />
+						<el-option label="办件态度" value="2" />
+					</el-select>
+				</el-form-item>-->
+				<el-form-item label="热线号码" prop="CDPN">
+					<el-select v-model="state.queryParams.CDPN" placeholder="请选择热线号码" clearable @change="handleQuery">
+						<el-option v-for="item in state.callForwardingSource" :value="item.dicDataValue" :key="item.dicDataValue" :label="item.dicDataName" />
+					</el-select>
+				</el-form-item>
+				<el-form-item>
+					<el-button type="primary" @click="handleQuery" :loading="state.loading"> <SvgIcon name="ele-Search" class="mr5" />查询 </el-button>
+					<el-button @click="resetQuery(ruleFormRef)" class="default-button" :loading="state.loading">
+						<SvgIcon name="ele-Refresh" class="mr5" />重置
+					</el-button>
 					<el-popover :width="500" trigger="click">
 						<template #reference>
-							<el-button circle title="口径说明"><SvgIcon name="ele-QuestionFilled" /></el-button>
+							<el-button type="primary" title="口径说明"><SvgIcon name="ele-QuestionFilled" class="mr5"/>口径说明</el-button>
 						</template>
 						<el-descriptions title="" :column="1" border style="max-height: 400px; overflow: auto">
 							<el-descriptions-item label="部门名称">办理工单的部门名称</el-descriptions-item>
@@ -68,57 +51,114 @@
 							<el-descriptions-item label="未接通率">未接通/小计</el-descriptions-item>
 						</el-descriptions>
 					</el-popover>
-				</template>
-				<template #verySatisfiedCount="{ row }">
-					<el-button link type="primary" @click="onDetail('verySatisfiedCount', row)" v-if="!['市直合计', '区县合计'].includes(row.orgName)">{{
-						row.verySatisfiedCount
-					}}</el-button>
-					<span v-else>{{ row.verySatisfiedCount }}</span>
-				</template>
-				<template #satisfiedCount="{ row }">
-					<el-button link type="primary" @click="onDetail('satisfiedCount', row)" v-if="!['市直合计', '区县合计'].includes(row.orgName)">{{
-						row.satisfiedCount
-					}}</el-button>
-					<span v-else>{{ row.satisfiedCount }}</span>
-				</template>
-				<template #regardedAsSatisfiedCount="{ row }">
-					<el-button link type="primary" @click="onDetail('regardedAsSatisfiedCount', row)" v-if="!['市直合计', '区县合计'].includes(row.orgName)">{{
-						row.regardedAsSatisfiedCount
-					}}</el-button>
-					<span v-else>{{ row.regardedAsSatisfiedCount }}</span>
-				</template>
-				<template #defaultSatisfiedCount="{ row }">
-					<el-button link type="primary" @click="onDetail('defaultSatisfiedCount', row)" v-if="!['市直合计', '区县合计'].includes(row.orgName)">{{
-						row.defaultSatisfiedCount
-					}}</el-button>
-					<span v-else>{{ row.defaultSatisfiedCount }}</span>
-				</template>
-				<template #noSatisfiedCount="{ row }">
-					<el-button link type="primary" @click="onDetail('noSatisfiedCount', row)" v-if="!['市直合计', '区县合计'].includes(row.orgName)">{{
-						row.noSatisfiedCount
-					}}</el-button>
-					<span v-else>{{ row.noSatisfiedCount }}</span>
-				</template>
-				<template #noEvaluateCount="{ row }">
-					<el-button link type="primary" @click="onDetail('noEvaluateCount', row)" v-if="!['市直合计', '区县合计'].includes(row.orgName)">{{
-						row.noEvaluateCount
-					}}</el-button>
-					<span v-else>{{ row.noEvaluateCount }}</span>
-				</template>
-				<template #noPutThroughCount="{ row }">
-					<el-button link type="primary" @click="onDetail('noPutThroughCount', row)" v-if="!['市直合计', '区县合计'].includes(row.orgName)">{{
-						row.noPutThroughCount
-					}}</el-button>
-					<span v-else>{{ row.noPutThroughCount }}</span>
-				</template>
-			</ProTable>
+				</el-form-item>
+			</el-form>
+			<vxe-toolbar
+				ref="toolbarRef"
+				:loading="state.loading"
+				custom
+				:refresh="{
+					queryMethod: handleQuery,
+				}"
+				:tools="[{ 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, useKey: true }"
+					ref="tableRef"
+					height="auto"
+					auto-resize
+					show-overflow
+					:scrollY="{ enabled: true, gt: 20, mode: 'wheel' }"
+					id="statisticsDepartmentShSatisfied"
+					:custom-config="{
+						storage: true,
+					}"
+					showHeaderOverflow
+					:params="{ exportMethod: departmentSatisfactionExport, exportParams: requestParams }"
+				>
+					<vxe-column field="orgName" title="部门名称" min-width="200" fixed="left">
+					</vxe-column>
+					<vxe-column field="orgTypeText" title="部门类别" min-width="100" fixed="left"> </vxe-column>
+					<vxe-column field="totalSumCount" title="小计" min-width="90" fixed="left"> </vxe-column>
+					<vxe-column field="totalSumRateText" title="总满意率" min-width="120"> </vxe-column>
+					<vxe-column field="verySatisfiedCount" title="非常满意"  min-width="100">
+						<template #default="scope">
+							<el-button type="primary" link @click="linkDetail('verySatisfiedCount', scope.row)" v-if="!['市直合计', '区县合计'].includes(scope.row.orgName)">
+								{{ scope.row.verySatisfiedCount }}
+							</el-button>
+							<span v-else>{{ scope.row.verySatisfiedCount }}</span>
+						</template>
+					</vxe-column>
+					<vxe-column field="verySatisfiedRateText" title="非常满意率" min-width="120"> </vxe-column>
+					<vxe-column field="satisfiedCount" title="满意"  min-width="100">
+						<template #default="scope">
+							<el-button type="primary" link @click="linkDetail('satisfiedCount', scope.row)" v-if="!['市直合计', '区县合计'].includes(scope.row.orgName)">
+								{{ scope.row.satisfiedCount }}
+							</el-button>
+							<span v-else>{{ scope.row.satisfiedCount }}</span>
+						</template>
+					</vxe-column>
+					<vxe-column field="satisfiedRateText" title="满意率" min-width="120"> </vxe-column>
+					<vxe-column field="regardedAsSatisfiedCount" title="视为满意"  min-width="100">
+						<template #default="scope">
+							<el-button type="primary" link @click="linkDetail('regardedAsSatisfiedCount', scope.row)" v-if="!['市直合计', '区县合计'].includes(scope.row.orgName)">
+								{{ scope.row.regardedAsSatisfiedCount }}
+							</el-button>
+							<span v-else>{{ scope.row.regardedAsSatisfiedCount }}</span>
+						</template>
+					</vxe-column>
+					<vxe-column field="regardedAsSatisfiedRateText" title="视为满意率" min-width="120"> </vxe-column>
+					<vxe-column field="defaultSatisfiedCount" title="默认满意"  min-width="100">
+						<template #default="scope">
+							<el-button type="primary" link @click="linkDetail('defaultSatisfiedCount', scope.row)" v-if="!['市直合计', '区县合计'].includes(scope.row.orgName)">
+								{{ scope.row.defaultSatisfiedCount }}
+							</el-button>
+							<span v-else>{{ scope.row.defaultSatisfiedCount }}</span>
+						</template>
+					</vxe-column>
+					<vxe-column field="defaultSatisfiedRateText" title="默认满意率" min-width="120"> </vxe-column>
+					<vxe-column field="noSatisfiedCount" title="不满意"  min-width="100">
+						<template #default="scope">
+							<el-button type="primary" link @click="linkDetail('noSatisfiedCount', scope.row)" v-if="!['市直合计', '区县合计'].includes(scope.row.orgName)">
+								{{ scope.row.noSatisfiedCount }}
+							</el-button>
+							<span v-else>{{ scope.row.defaultSatisfiedCount }}</span>
+						</template>
+					</vxe-column>
+					<vxe-column field="noSatisfiedRateText" title="不满意率" min-width="120"> </vxe-column>
+					<vxe-column field="noEvaluateCount" title="未作评价"  min-width="100">
+						<template #default="scope">
+							<el-button type="primary" link @click="linkDetail('noEvaluateCount', scope.row)" v-if="!['市直合计', '区县合计'].includes(scope.row.orgName)">
+								{{ scope.row.noEvaluateCount }}
+							</el-button>
+							<span v-else>{{ scope.row.noEvaluateCount }}</span>
+						</template>
+					</vxe-column>
+					<vxe-column field="noEvaluateRateText" title="未作评价率" min-width="120"> </vxe-column>
+					<vxe-column field="noPutThroughCount" title="未接通"  min-width="100">
+						<template #default="scope">
+							<el-button type="primary" link @click="linkDetail('noPutThroughCount', scope.row)" v-if="!['市直合计', '区县合计'].includes(scope.row.orgName)">
+								{{ scope.row.noPutThroughCount }}
+							</el-button>
+							<span v-else>{{ scope.row.noPutThroughCount }}</span>
+						</template>
+					</vxe-column>
+					<vxe-column field="noPutThroughRateText" title="未接通率" min-width="120"> </vxe-column>
+				</vxe-table>
+			</div>
 		</div>
 	</div>
 </template>
 <script setup lang="tsx" name="statisticsDepartmentShSatisfied">
 import { defineAsyncComponent, onMounted, reactive, ref } from 'vue';
 import { FormInstance } from 'element-plus';
-import { departmentSecondSatisfaction, departmentSecondSatisfactionExport } from '@/api/statistics/department';
+import { departmentSatisfactionExport, departmentSecondSatisfaction, departmentSecondSatisfactionExport } from '@/api/statistics/department';
 import { defaultDate } from '@/utils/constants';
 import { useRouter } from 'vue-router';
 import { callPeriodBase } from '@/api/statistics/call';
@@ -126,59 +166,6 @@ import Other from '@/utils/other';
 
 
 const StatisticalTime = defineAsyncComponent(() => import('@/components/StatisticalTime/index.vue')); // 日期类型选择组件
-// 表格配置项
-const columns = ref<any[]>([
-	{ prop: 'orgName', label: '部门名称', minWidth: 150 },
-	{ prop: 'orgTypeText', label: '部门类别', minWidth: 100 },
-	{ prop: 'totalSumCount', label: '小计' },
-	{
-		prop: 'totalSumRateText',
-		label: '总满意率',
-		minWidth: 110,
-	},
-	{ prop: 'verySatisfiedCount', label: '非常满意', minWidth: 110 },
-	{
-		prop: 'verySatisfiedRateText',
-		label: '非常满意率',
-		minWidth: 110,
-	},
-	{ prop: 'satisfiedCount', label: '满意', minWidth: 110 },
-	{
-		prop: 'satisfiedRateText',
-		label: '满意率',
-		minWidth: 110,
-	},
-	{ prop: 'regardedAsSatisfiedCount', label: '视为满意', minWidth: 110 },
-	{
-		prop: 'regardedAsSatisfiedRateText',
-		label: '视为满意率',
-		minWidth: 110,
-	},
-	{ prop: 'defaultSatisfiedCount', label: '默认满意', minWidth: 110 },
-	{
-		prop: 'defaultSatisfiedRateText',
-		label: '默认满意率',
-		minWidth: 110,
-	},
-	{ prop: 'noSatisfiedCount', label: '不满意', minWidth: 110 },
-	{
-		prop: 'noSatisfiedRateText',
-		label: '不满意率',
-		minWidth: 110,
-	},
-	{ prop: 'noEvaluateCount', label: '未作评价', minWidth: 110 },
-	{
-		prop: 'noEvaluateRateText',
-		label: '未作评价率',
-		minWidth: 110,
-	},
-	{ prop: 'noPutThroughCount', label: '未接通', minWidth: 110 },
-	{
-		prop: 'noPutThroughRateText',
-		label: '未接通率',
-		minWidth: 110,
-	},
-]);
 // 定义变量内容
 const ruleFormRef = ref<RefType>(); // 表单ref
 const state = reactive<any>({
@@ -229,7 +216,7 @@ const resetQuery = (formEl: FormInstance | undefined) => {
 };
 const router = useRouter();
 // 点击数字
-const onDetail = (key: string, row) => {
+const linkDetail = (key: string, row:any) => {
 	const StartTime = state.queryParams.crTime === null ? null : state.queryParams.crTime[0];
 	const EndTime = state.queryParams.crTime === null ? null : state.queryParams.crTime[1];
 	router.push({
@@ -254,8 +241,13 @@ const getBaseInfo = async () => {
 		console.log(e);
 	}
 };
+const toolbarRef = ref<RefType>();
+const tableRef = ref<RefType>();
 onMounted(() => {
-	getBaseInfo();
 	queryList();
+	if (tableRef.value && toolbarRef.value) {
+		tableRef.value.connect(toolbarRef.value);
+	}
+	getBaseInfo();
 });
 </script>

src/views/statistics/department/unSigned.vue

@@ -1,27 +1,13 @@
 <template>
 	<div class="statistics-department-unSigned-container layout-padding">
     <div class="layout-padding-auto layout-padding-view pd20">
-			<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="departmentUnSignExport"
-				: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="Level">
-              <el-segmented
-                  :options="[
+			<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="Level">
+					<el-segmented
+						:options="[
 							{
 								value: '0',
 								label: '全部',
@@ -35,14 +21,14 @@
 								label: '下级',
 							},
 						]"
-                  v-model="state.queryParams.Level"
-                  @change="handleQuery"
-									:disabled="state.loading"
-              />
-            </el-form-item>
-            <el-form-item label="签收状态" prop="Signed">
-              <el-segmented
-                  :options="[
+						v-model="state.queryParams.Level"
+						@change="handleQuery"
+						:disabled="state.loading"
+					/>
+				</el-form-item>
+				<el-form-item label="签收状态" prop="Signed">
+					<el-segmented
+						:options="[
 							{
 								value: '0',
 								label: '未签收',
@@ -52,23 +38,19 @@
 								label: '已签收',
 							},
 						]"
-                  v-model="state.queryParams.Signed"
-                  @change="handleQuery"
-									:disabled="state.loading"
-              />
-            </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>
-				<template #description>
+						v-model="state.queryParams.Signed"
+						@change="handleQuery"
+						:disabled="state.loading"
+					/>
+				</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-popover :width="500" trigger="click">
 						<template #reference>
-							<el-button circle title="口径说明"><SvgIcon name="ele-QuestionFilled" /></el-button>
+							<el-button type="primary" title="口径说明"><SvgIcon name="ele-QuestionFilled" class="mr5"/>口径说明</el-button>
 						</template>
 						<el-descriptions title="" :column="1" border style="max-height: 400px; overflow: auto">
 							<el-descriptions-item label="工单状态">未签收、办理中、退回信件、办理完成</el-descriptions-item>
@@ -86,14 +68,80 @@
 							<el-descriptions-item label="热点分类">工单热点分类</el-descriptions-item>
 						</el-descriptions>
 					</el-popover>
-				</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>
-			</ProTable>
+				</el-form-item>
+			</el-form>
+			<vxe-toolbar
+				ref="toolbarRef"
+				:loading="state.loading"
+				custom
+				:refresh="{
+					queryMethod: queryList,
+				}"
+				: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,useKey:true }"
+					ref="tableRef"
+					height="auto"
+					auto-resize
+					show-overflow
+					:scrollY="{ enabled: true, gt: 20, mode: 'wheel' }"
+					id="statisticsDepartmentUnSigned"
+					:custom-config="{
+						storage: true,
+					}"
+					showHeaderOverflow
+					:params="{ exportMethod: departmentUnSignExport, exportParams: requestParams }"
+				>
+					<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="100"></vxe-column>
+					<vxe-column field="order.currentStepName" title="当前节点" width="110"></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.startTime" title="受理时间" width="160">
+						<template #default="{ row }">
+							{{ formatDate(row.order?.startTime, 'YYYY-mm-dd HH:MM:SS') }}
+						</template>
+					</vxe-column>
+					<vxe-column field="order.expiredTime" title="工单期满时间" width="160">
+						<template #default="{ row }">
+							{{ formatDate(row.order?.expiredTime, 'YYYY-mm-dd HH:MM:SS') }}
+						</template>
+					</vxe-column>
+					<vxe-column field="workflowStep.creatorOrgName" title="转办部门" width="140"></vxe-column>
+					<vxe-column field="workflowStep.creationTime" title="转办时间" width="160">
+						<template #default="{ row }">
+							{{ formatDate(row.workflowStep?.creationTime, 'YYYY-mm-dd HH:MM:SS') }}
+						</template>
+					</vxe-column>
+					<vxe-column field="workflowStep.acceptorOrgName" title="签收部门" width="140"></vxe-column>
+					<vxe-column field="unsignedTime" title="未签收时间(小时)" width="140"></vxe-column>
+					<vxe-column field="order.acceptType" title="受理类型" width="110"></vxe-column>
+					<vxe-column field="order.hotspotName" title="热点分类" width="150"></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>
@@ -102,13 +150,14 @@ import { defineAsyncComponent, onMounted, reactive, ref } from 'vue';
 import type { FormInstance } from 'element-plus';
 import { useRoute, useRouter } from 'vue-router';
 import { formatDate } from '@/utils/formatTime';
-import { departmentUnSignExport, departmentUnSign } from '@/api/statistics/department';
+import { departmentUnSignExport, departmentUnSign, departmentSecondDetailExport } from '@/api/statistics/department';
 import { defaultDate } from '@/utils/constants';
 import Other from '@/utils/other';
 
 // 引入组件
 const OrderDetail = defineAsyncComponent(() => import('@/components/OrderDetail/index.vue')); // 工单详情
 const StatisticalTime = defineAsyncComponent(() => import('@/components/StatisticalTime/index.vue')); // 日期类型选择组件
+const pagination = defineAsyncComponent(() => import('@/components/ProTable/components/Pagination.vue')); // 分页
 
 // 定义变量内容
 const state = reactive<any>({
@@ -124,48 +173,6 @@ const state = reactive<any>({
 	total: 0, // 总数
 });
 const ruleFormRef = ref<RefType>(); // 表单ref
-const route = useRoute(); // 路由
-const router = useRouter(); // 路由
-const proTableRef = ref<RefType>(); // 表格ref
-// 表格配置项
-const columns = ref<any[]>([
-	{ prop: 'order.expiredStatusText', label: '超期状态', align: 'center', width: 80 },
-	{ prop: 'order.statusText', label: '工单状态', width: 100 },
-	{ prop: 'order.sourceChannel', label: '来源渠道', width: 100 },
-	{ prop: 'order.currentStepName', label: '当前节点', width: 100 },
-	{ prop: 'order.no', label: '工单编码', width: 140 },
-
-	{
-		prop: 'order.startTime',
-		label: '受理时间',
-		width: 160,
-		render: (scope) => {
-			return <span>{formatDate(scope.row.order.startTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
-		},
-	},
-	{ prop: 'order.title', label: '工单标题', width: 200 },
-	{
-		prop: 'order.expiredTime',
-		label: '工单期满时间',
-		width: 160,
-		render: (scope) => {
-			return <span>{formatDate(scope.row.order.expiredTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
-		},
-	},
-	{ prop: 'workflowStep.creatorOrgName', label: '转办部门', width: 140 },
-	{
-		prop: 'workflowStep.creationTime',
-		label: '转办时间',
-		width: 160,
-		render: (scope) => {
-			return <span>{formatDate(scope.row.workflowStep.creationTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
-		},
-	},
-	{ prop: 'workflowStep.acceptorOrgName', label: '签收部门', width: 140 },
-	{ prop: 'unsignedTime', label: '未签收时间(小时)', width: 140 },
-	{ prop: 'order.acceptType', label: '受理类型', width: 100 },
-	{ prop: 'order.hotspotName', label: '热点分类', width: 150 }
-]);
 // 手动查询，将页码设置为1
 const handleQuery = () => {
 	state.queryParams.PageIndex = 1;
@@ -197,7 +204,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>