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

src/views/statistics/department/detailSatisfied.vue

@@ -1,113 +1,147 @@
 <template>
 	<div class="statistics-department-satisfaction-detail-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="TypeCode">
+					<el-select v-model="state.queryParams.TypeCode" placeholder="请选择来电主体" @change="handleQuery">
+						<el-option :value="0" label="全部" />
+						<el-option :value="1" label="市民" />
+						<el-option :value="2" label="企业" />
+					</el-select>
+				</el-form-item>
+				<!--        <el-form-item label="超期类型" prop="ExpiredType">
+					<el-select v-model="state.queryParams.ExpiredType" placeholder="请选择超期类型" clearable @change="handleQuery">
+						<el-option  value="1" label="系统中超期"></el-option>
+						<el-option  value="2" label="申请延期超期"></el-option>
+					</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>
+			<vxe-toolbar
+				ref="toolbarRef"
 				:loading="state.loading"
-				:total="state.total"
-				v-model:page-index="state.queryParams.PageIndex"
-				v-model:page-size="state.queryParams.PageSize"
-				:toolButton="['refresh', 'setting', 'exportCurrent', 'exportAll']"
-				:exportMethod="departmentSatisfactionDetailExport"
-				:exportParams="requestParams"
-				@sort-change="sortChange"
+				custom
+				:refresh="{
+					queryMethod: handleQuery,
+				}"
+				:tools="[{ toolRender: { name: 'exportCurrent' } }, { toolRender: { name: 'exportAll' } }]"
 			>
-        <template #table-search>
-          <el-form :model="state.queryParams" ref="ruleFormRef" @submit.native.prevent inline>
-            <el-form-item label="来电主体" prop="TypeCode">
-              <el-select v-model="state.queryParams.TypeCode" placeholder="请选择来电主体" @change="handleQuery">
-                <el-option :value="0" label="全部" />
-                <el-option :value="1" label="市民" />
-                <el-option :value="2" label="企业" />
-              </el-select>
-            </el-form-item>
-            <!--        <el-form-item label="超期类型" prop="ExpiredType">
-              <el-select v-model="state.queryParams.ExpiredType" placeholder="请选择超期类型" clearable @change="handleQuery">
-                <el-option  value="1" label="系统中超期"></el-option>
-                <el-option  value="2" label="申请延期超期"></el-option>
-              </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 #title="{ row }">
-					<order-detail :order="row" @updateList="queryList">{{ row.title }}</order-detail>
+				<template #buttons>
+					<el-button type="primary" @click="onJbExport" :loading="state.loading" :disabled="isChecked"
+					><SvgIcon name="iconfont icon-daochu" class="mr5" />交办单导出
+					</el-button>
+					<el-popover :width="500" trigger="click">
+						<template #reference>
+							<el-button type="primary"  title="口径说明"><SvgIcon name="ele-QuestionFilled" class="mr5" />口径说明</el-button>
+						</template>
+						<el-descriptions title="" :column="1" border>
+							<el-descriptions-item label="工单编码">工单编号</el-descriptions-item>
+							<el-descriptions-item label="重办次数">发布时重办的次数</el-descriptions-item>
+							<el-descriptions-item label="甄别">甄别中、未甄别、甄别退回、不同意、</el-descriptions-item>
+							<el-descriptions-item label="回访信息"> 工单回访内容 </el-descriptions-item>
+							<el-descriptions-item label="受理时间"> 工单新建时间 </el-descriptions-item>
+							<el-descriptions-item label="工单标题"> 工单的标题(点击可查看工单详情)</el-descriptions-item>
+							<el-descriptions-item label="回访人"> 工单回访用户</el-descriptions-item>
+							<el-descriptions-item label="回访部门"> 工单回访用户所在部门 </el-descriptions-item>
+							<el-descriptions-item label="回访时间"> 工单回访时间 </el-descriptions-item>
+							<el-descriptions-item label="满意度"> 回访时的满意度 </el-descriptions-item>
+							<el-descriptions-item label="办结时间"> 工单办理完成的时间 </el-descriptions-item>
+						</el-descriptions>
+					</el-popover>
 				</template>
-				<template #operation="{ row }">
-					<el-button link type="primary" @click="visitDetail(row)" title="查看回访详情"> 回访详情 </el-button>
-				</template>
-			</ProTable>
+			</vxe-toolbar>
+			<div style="overflow: hidden; width: 100%; height: 100%; flex: 1">
+				<vxe-table
+					border
+					:loading="state.loading"
+					:data="state.tableData"
+					:sort-config="{ remote: true }"
+					:column-config="{ resizable: true }"
+					:row-config="{ isCurrent: true, isHover: true, height: 30,useKey:true }"
+					ref="tableRef"
+					@sort-change="sortChange"
+					@checkbox-all="selectAllChangeEvent"
+					@checkbox-change="selectChangeEvent"
+					height="auto"
+					auto-resize
+					show-overflow
+					:scrollY="{ enabled: true, gt: 20, mode: 'wheel' }"
+					id="statisticsDepartmentSatisfiedDetail"
+					:custom-config="{ storage: true }"
+					:params="{ exportMethod: departmentSatisfactionDetailExport, exportParams: requestParams }"
+				>
+					<vxe-column type="checkbox" width="60" align="center"></vxe-column>
+					<vxe-column field="no" title="工单编码" width="140"></vxe-column>
+					<vxe-column field="reTransactNum" title="重办次数" width="90"></vxe-column>
+					<vxe-column field="orderScreenStatusText" title="甄别" width="90"></vxe-column>
+					<vxe-column field="visitContent" title="回访信息" width="150"></vxe-column>
+					<vxe-column field="hotspotSpliceName" title="热点全称" width="150"></vxe-column>
+					<vxe-column field="orgLevelOneName" title="一级部门" width="140"></vxe-column>
+					<vxe-column field="actualHandleOrgName" title="接办部门" width="140"></vxe-column>
+					<vxe-column field="creationTime" title="受理时间" sortable width="160">
+						<template #default="{ row }">
+							{{ formatDate(row.creationTime, 'YYYY-mm-dd HH:MM:SS') }}
+						</template>
+					</vxe-column>
+					<vxe-column field="title" title="工单标题" width="200">
+						<template #default="{ row }">
+							<order-detail :order="row" @updateList="queryList">{{ row.title }}</order-detail>
+						</template>
+					</vxe-column>
+					<vxe-column field="visitUser" title="回访人" width="120"></vxe-column>
+					<vxe-column field="visitOrgName" title="回访部门" width="140"></vxe-column>
+					<vxe-column field="visitTypeText" title="回访方式" width="110"></vxe-column>
+					<vxe-column field="visitTime" title="回访时间" sortable width="160">
+						<template #default="{ row }">
+							{{ formatDate(row.visitTime, 'YYYY-mm-dd HH:MM:SS') }}
+						</template>
+					</vxe-column>
+					<vxe-column field="orgProcessingResults" title="满意度" width="120"></vxe-column>
+					<vxe-column field="content" title="受理内容" width="150"></vxe-column>
+					<vxe-column field="fileOpinion" title="承办意见" width="150"></vxe-column>
+					<vxe-column field="filedTime" title="办结时间" sortable width="160">
+						<template #default="{ row }">
+							{{ formatDate(row.filedTime, 'YYYY-mm-dd HH:MM:SS') }}
+						</template>
+					</vxe-column>
+					<vxe-column title="操作" fixed="right" width="90" align="center">
+						<template #default="{ row }">
+							<el-button link type="primary" @click="visitDetail(row)" title="查看回访详情"> 回访详情 </el-button>
+						</template>
+					</vxe-column>
+				</vxe-table>
+			</div>
+			<pagination
+				@pagination="queryList"
+				:total="state.total"
+				v-model:current-page="state.queryParams.PageIndex"
+				v-model:page-size="state.queryParams.PageSize"
+				:disabled="state.loading"
+			/>
 		</div>
 		<!-- 回访详情 -->
 		<visit-detail-com ref="visitDetailRef" @updateList="queryList" />
 	</div>
 </template>
 <script setup lang="tsx" name="statisticsDepartmentSatisfiedDetail">
-import { onMounted, reactive, ref, defineAsyncComponent } from 'vue';
+import { onMounted, reactive, ref, defineAsyncComponent, computed } from 'vue';
 import { FormInstance } from 'element-plus';
 import { departmentSatisfactionDetail, departmentSatisfactionDetailExport } from '@/api/statistics/department';
 import { formatDate } from '@/utils/formatTime';
 import { defaultDate } from '@/utils/constants';
 import { useRoute } from 'vue-router';
+import { exportAssignment } from '@/utils/tools';
 
 // 引入组件
 const VisitDetailCom = defineAsyncComponent(() => import('@/views/business/visit/components/Visit-detail.vue')); // 回访
 const OrderDetail = defineAsyncComponent(() => import('@/components/OrderDetail/index.vue')); // 工单详情
+const pagination = defineAsyncComponent(() => import('@/components/ProTable/components/Pagination.vue')); // 分页
 
-// 表格配置项
-const columns = ref<any[]>([
-	{ type: 'selection', width: 40, align: 'center' },
-	{ prop: 'no', label: '工单编码', width: 140},
-	{ prop: 'reTransactNum', label: '重办次数'},
-	{ prop: 'orderScreenStatusText', label: '甄别', minWidth: 100 },
-	{ prop: 'visitContent', label: '回访信息', minWidth: 150},
-	{ prop: 'hotspotSpliceName', label: '热点全称', minWidth: 150 },
-	{ prop: 'orgLevelOneName', label: '一级部门', minWidth: 140 },
-	{ prop: 'actualHandleOrgName', label: '接办部门', minWidth: 140},
-	{
-		prop: 'creationTime',
-		label: '受理时间',
-		minWidth: 160,
-		render: (scope:any) => {
-			return <span>{formatDate(scope.row.creationTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
-		},
-		sortable: 'custom',
-	},
-	{ prop: 'title', label: '工单标题', width: 200},
-	{ prop: 'visitUser', label: '回访人', minWidth: 120},
-	{ prop: 'visitOrgName', label: '回访部门', minWidth: 140},
-	{ prop: 'visitTypeText', label: '回访方式', minWidth: 110},
-	{
-		prop: 'visitTime',
-		label: '回访时间',
-		minWidth: 160,
-		render: (scope:any) => {
-			return <span>{formatDate(scope.row.visitTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
-		},
-		sortable: 'custom',
-	},
-	{ prop: 'orgProcessingResults', label: '满意度', minWidth: 120},
-	{ prop: 'content', label: '受理内容', minWidth: 150},
-	{ prop: 'fileOpinion', label: '承办意见', minWidth: 150},
-	{
-		prop: 'filedTime',
-		label: '办结时间',
-		minWidth: 160,
-		render: (scope:any) => {
-			return <span>{formatDate(scope.row.filedTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
-		},
-		sortable: 'custom',
-	},
-	{ prop: 'operation', label: '操作', fixed: 'right', width: 90, align: 'center' },
-]);
 // 定义变量内容
 const ruleFormRef = ref<RefType>(); // 表单ref
 const state = reactive<any>({
@@ -131,7 +165,7 @@ const sortChange = (val: any) => {
 	state.queryParams.SortField = val.order ? val.field : null;
 	// 0 升序 1 降序
 	state.queryParams.SortRule = val.order ? (val.order == 'desc' ? 1 : 0) : null;
-	handleQuery();
+	queryList();
 };
 /** 搜索按钮操作 */
 const handleQuery = () => {
@@ -180,7 +214,36 @@ const visitDetailRef = ref<RefType>();
 const visitDetail = (row: any) => {
   visitDetailRef.value.openDialog({ ...row, id: row.visitId}, '回访详情');
 };
+// 交办单导出
+const onJbExport = () => {
+	const ids = checkTable.value.map((item: any) => item.id);
+	exportAssignment(ids);
+};
+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>();
+const tableRef = ref<RefType>();
 onMounted(() => {
 	queryList();
+	if (tableRef.value && toolbarRef.value) {
+		tableRef.value.connect(toolbarRef.value);
+	}
 });
 </script>

src/views/statistics/department/detailSatisfiedList.vue

@@ -1,46 +1,37 @@
 <template>
 	<div class="statistics-department-satisfaction-detail-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 prop="hfTime">
+					<statistical-time v-model="state.queryParams.hfTime" @change="handleQuery" ref="statisticalTimeRef" :disabled="state.loading"/>
+				</el-form-item>
+				<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>
+					<el-button type="primary" @click="handleQuery" :loading="state.loading"> <SvgIcon name="ele-Search" class="mr5" />查询 </el-button>
+					<el-button @click="drawer = true" class="default-button"> <SvgIcon name="ele-Search" class="mr5" />更多查询</el-button>
+				</el-form-item>
+			</el-form>
+			<vxe-toolbar
+				ref="toolbarRef"
 				:loading="state.loading"
-				:total="state.total"
-				v-model:page-index="state.queryParams.PageIndex"
-				v-model:page-size="state.queryParams.PageSize"
-				:toolButton="['refresh', 'setting', 'exportCurrent', 'exportAll']"
-				:exportMethod="departmentSatisfactionListExport"
-				:exportParams="requestParams"
-				@sort-change="sortChange"
+				custom
+				:refresh="{
+					queryMethod: handleQuery,
+				}"
+				:tools="[{ toolRender: { name: 'exportCurrent' } }, { toolRender: { name: 'exportAll' } }]"
 			>
-				<template #table-search>
-					<el-form :model="state.queryParams" ref="ruleFormRef" @submit.native.prevent inline>
-						<el-form-item prop="hfTime">
-							<statistical-time v-model="state.queryParams.hfTime" @change="handleQuery" ref="statisticalTimeRef" :disabled="state.loading"/>
-						</el-form-item>
-						<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>
-							<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="onJbExport" :disabled="!scope.isSelected" :loading="state.loading"
-						><SvgIcon name="iconfont icon-daochu" class="mr5" />交办单导出<span v-if="proTableRef?.selectedList?.length">({{proTableRef?.selectedList?.length}})</span>
+				<template #buttons>
+					<el-button type="primary" @click="onJbExport" :loading="state.loading" :disabled="isChecked"
+					><SvgIcon name="iconfont icon-daochu" class="mr5" />交办单导出
 					</el-button>
-				</template>
-				<template #description>
 					<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>
 							<el-descriptions-item label="工单编码">工单编号</el-descriptions-item>
@@ -57,13 +48,75 @@
 						</el-descriptions>
 					</el-popover>
 				</template>
-				<template #title="{ row }">
-					<order-detail :order="{...row,id:row.orderId}" @updateList="queryList">{{ row.title }}</order-detail>
-				</template>
-				<template #operation="{ row }">
-					<el-button link type="primary" @click="visitDetail(row)" title="查看回访详情"> 回访详情 </el-button>
-				</template>
-			</ProTable>
+			</vxe-toolbar>
+			<div style="overflow: hidden; width: 100%; height: 100%; flex: 1">
+				<vxe-table
+					border
+					:loading="state.loading"
+					:data="state.tableData"
+					:sort-config="{ remote: true }"
+					:column-config="{ resizable: true }"
+					:row-config="{ isCurrent: true, isHover: true, height: 30,useKey:true }"
+					ref="tableRef"
+					@sort-change="sortChange"
+					@checkbox-all="selectAllChangeEvent"
+					@checkbox-change="selectChangeEvent"
+					height="auto"
+					auto-resize
+					show-overflow
+					:scrollY="{ enabled: true, gt: 20, mode: 'wheel' }"
+					id="statisticsDepartmentSatisfiedDetailList"
+					:custom-config="{ storage: true }"
+					:params="{ exportMethod: departmentSatisfactionListExport, exportParams: requestParams }"
+				>
+					<vxe-column type="checkbox" width="60" align="center"></vxe-column>
+					<vxe-column field="no" title="工单编码" width="140"></vxe-column>
+					<vxe-column field="reTransactNum" title="重办次数" width="90"></vxe-column>
+					<vxe-column field="orderScreenStatusText" title="甄别" width="90"></vxe-column>
+					<vxe-column field="visitContent" title="回访信息" width="150"></vxe-column>
+					<vxe-column field="hotspotSpliceName" title="热点全称" width="150"></vxe-column>
+					<vxe-column field="orgLevelOneName" title="一级部门" width="140"></vxe-column>
+					<vxe-column field="actualHandleOrgName" title="接办部门" width="140"></vxe-column>
+					<vxe-column field="creationTime" title="受理时间" sortable width="160">
+						<template #default="{ row }">
+							{{ formatDate(row.creationTime, 'YYYY-mm-dd HH:MM:SS') }}
+						</template>
+					</vxe-column>
+					<vxe-column field="title" title="工单标题" width="200">
+						<template #default="{ row }">
+							<order-detail :order="row" @updateList="queryList">{{ row.title }}</order-detail>
+						</template>
+					</vxe-column>
+					<vxe-column field="visitUser" title="回访人" width="120"></vxe-column>
+					<vxe-column field="visitOrgName" title="回访部门" width="140"></vxe-column>
+					<vxe-column field="visitTypeText" title="回访方式" width="110"></vxe-column>
+					<vxe-column field="visitTime" title="回访时间" sortable width="160">
+						<template #default="{ row }">
+							{{ formatDate(row.visitTime, 'YYYY-mm-dd HH:MM:SS') }}
+						</template>
+					</vxe-column>
+					<vxe-column field="orgProcessingResults" title="满意度" width="120"></vxe-column>
+					<vxe-column field="content" title="受理内容" width="150"></vxe-column>
+					<vxe-column field="fileOpinion" title="承办意见" width="150"></vxe-column>
+					<vxe-column field="filedTime" title="办结时间" sortable width="160">
+						<template #default="{ row }">
+							{{ formatDate(row.filedTime, 'YYYY-mm-dd HH:MM:SS') }}
+						</template>
+					</vxe-column>
+					<vxe-column title="操作" fixed="right" width="90" align="center">
+						<template #default="{ row }">
+							<el-button link type="primary" @click="visitDetail(row)" title="查看回访详情"> 回访详情 </el-button>
+						</template>
+					</vxe-column>
+				</vxe-table>
+			</div>
+			<pagination
+				@pagination="queryList"
+				:total="state.total"
+				v-model:current-page="state.queryParams.PageIndex"
+				v-model:page-size="state.queryParams.PageSize"
+				:disabled="state.loading"
+			/>
 		</div>
 		<!-- 回访详情 -->
 		<visit-detail-com ref="visitDetailRef" @updateList="queryList" />
@@ -144,14 +197,13 @@
 	</div>
 </template>
 <script setup lang="tsx" name="statisticsDepartmentSatisfiedDetailList">
-import { onMounted, reactive, ref, defineAsyncComponent } from 'vue';
-import { ElMessage, ElMessageBox, FormInstance } from 'element-plus';
+import { onMounted, reactive, ref, defineAsyncComponent, computed } from 'vue';
+import { FormInstance } from 'element-plus';
 import { departmentSatisfactionDetailBase, departmentSatisfactionList, departmentSatisfactionListExport } from '@/api/statistics/department';
 import { formatDate } from '@/utils/formatTime';
 import { defaultDate, defaultTimeStartEnd, shortcuts } from '@/utils/constants';
 import Other from '@/utils/other';
-import { exportJbOrder } from '@/api/business/order';
-import { downloadZip } from '@/utils/tools';
+import {  exportAssignment } from '@/utils/tools';
 import { useThemeConfig } from '@/stores/themeConfig';
 import { storeToRefs } from 'pinia';
 
@@ -159,52 +211,7 @@ import { storeToRefs } from 'pinia';
 const VisitDetailCom = defineAsyncComponent(() => import('@/views/business/visit/components/Visit-detail.vue')); // 回访
 const OrderDetail = defineAsyncComponent(() => import('@/components/OrderDetail/index.vue')); // 工单详情
 const StatisticalTime = defineAsyncComponent(() => import('@/components/StatisticalTime/index.vue')); // 日期类型选择组件
-// 表格配置项
-const columns = ref<any[]>([
-	{ type: 'selection', width: 40, align: 'center' },
-	{ prop: 'no', label: '工单编码', width: 140 },
-	{ prop: 'reTransactNum', label: '重办次数'},
-	{ prop: 'orderScreenStatusText', label: '甄别' },
-	{ prop: 'visitContent', label: '回访信息', minWidth: 150},
-	{ prop: 'hotspotSpliceName', label: '热点全称', minWidth: 150 },
-	{ prop: 'orgLevelOneName', label: '一级部门', minWidth: 140 },
-	{ prop: 'actualHandleOrgName', label: '接办部门', minWidth: 140 },
-	{
-		prop: 'creationTime',
-		label: '受理时间',
-		minWidth: 160,
-		render: (scope:any) => {
-			return <span>{formatDate(scope.row.creationTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
-		},
-		sortable: 'custom',
-	},
-	{ prop: 'title', label: '工单标题', width: 200},
-	{ prop: 'visitUser', label: '回访人', minWidth: 120},
-	{ prop: 'visitOrgName', label: '回访部门', minWidth: 140},
-	{ prop: 'visitTypeText', label: '回访方式', minWidth: 110 },
-	{
-		prop: 'visitTime',
-		label: '回访时间',
-		minWidth: 160,
-		render: (scope:any) => {
-			return <span>{formatDate(scope.row.visitTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
-		},
-		sortable: 'custom',
-	},
-	{ prop: 'orgProcessingResults', label: '满意度', minWidth: 120 },
-	{ prop: 'content', label: '受理内容', minWidth: 150 },
-	{ prop: 'fileOpinion', label: '承办意见', minWidth: 150},
-	{
-		prop: 'filedTime',
-		label: '办结时间',
-		minWidth: 160,
-		render: (scope:any) => {
-			return <span>{formatDate(scope.row.filedTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
-		},
-		sortable: 'custom',
-	},
-	{ prop: 'operation', label: '操作', fixed: 'right', width: 90, align: 'center' },
-]);
+const pagination = defineAsyncComponent(() => import('@/components/ProTable/components/Pagination.vue')); // 分页
 const storesThemeConfig = useThemeConfig();
 const { themeConfig } = storeToRefs(storesThemeConfig);
 // 定义变量内容
@@ -236,10 +243,10 @@ const state = reactive<any>({
 });
 // 排序
 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;
-	handleQuery();
+	state.queryParams.SortRule = val.order ? (val.order == 'desc' ? 1 : 0) : null;
+	queryList();
 };
 /** 搜索按钮操作 */
 const handleQuery = () => {
@@ -304,33 +311,36 @@ const getBaseData = async () => {
 	}
 };
 // 交办单导出
-const proTableRef = ref<RefType>();
 const onJbExport = () => {
-	const ids = proTableRef.value.selectedList.map((item: any) => item.id);
-	ElMessageBox.confirm(`您确定导出选中的${proTableRef.value.selectedList.length}个工单的交办单，是否继续?`, '提示', {
-		confirmButtonText: '确认',
-		cancelButtonText: '取消',
-		type: 'warning',
-		draggable: true,
-		cancelButtonClass: 'default-button',
-		autofocus: false,
-	})
-		.then(() => {
-			state.loading = true;
-			exportJbOrder(ids)
-				.then((res: any) => {
-					downloadZip(res);
-					state.loading = false;
-					ElMessage.success('导出成功');
-				})
-				.catch(() => {
-					state.loading = false;
-				});
-		})
-		.catch(() => {});
+	const ids = checkTable.value.map((item: any) => item.id);
+	exportAssignment(ids);
+};
+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>();
+const tableRef = ref<RefType>();
 onMounted(() => {
-	getBaseData();
 	queryList();
+	if (tableRef.value && toolbarRef.value) {
+		tableRef.value.connect(toolbarRef.value);
+	}
+	getBaseData();
 });
 </script>

src/views/statistics/department/detailSatisfiedOrg.vue

@@ -1,63 +1,147 @@
 <template>
 	<div class="statistics-department-satisfied-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="TypeCode">
+					<el-select v-model="state.queryParams.TypeCode" placeholder="请选择来电主体" @change="handleQuery">
+						<el-option :value="0" label="全部" />
+						<el-option :value="1" label="市民" />
+						<el-option :value="2" label="企业" />
+					</el-select>
+				</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="crTime">
+		<el-date-picker
+			v-model="state.queryParams.crTime"
+			type="daterange"
+			unlink-panels
+			range-separator="至"
+			start-placeholder="开始时间"
+			end-placeholder="结束时间"
+			:shortcuts="shortcuts"
+			@change="handleQuery"
+			value-format="YYYY-MM-DD"
+		/>
+	</el-form-item>
+	<el-form-item label="类型" prop="TypeId">
+		<el-select v-model="state.queryParams.TypeId" placeholder="类型" @change="handleQuery">
+			<el-option label="办件结果" value="1" />
+			<el-option label="办件态度" value="2" />
+		</el-select>
+	</el-form-item>
+	<el-form-item label="热线号码" prop="LineNum">
+		<el-input v-model="state.queryParams.LineNum" 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"
-				:summary-method="getSummaries"
-				:toolButton="['refresh', 'setting', 'exportAll']"
-				:exportMethod="departmentSatisfactionOrgExport"
-				: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 label="来电主体" prop="TypeCode">
-              <el-select v-model="state.queryParams.TypeCode" placeholder="请选择来电主体" @change="handleQuery">
-                <el-option :value="0" label="全部" />
-                <el-option :value="1" label="市民" />
-                <el-option :value="2" label="企业" />
-              </el-select>
-            </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="crTime">
-        <el-date-picker
-          v-model="state.queryParams.crTime"
-          type="daterange"
-          unlink-panels
-          range-separator="至"
-          start-placeholder="开始时间"
-          end-placeholder="结束时间"
-          :shortcuts="shortcuts"
-          @change="handleQuery"
-          value-format="YYYY-MM-DD"
-        />
-      </el-form-item>
-      <el-form-item label="类型" prop="TypeId">
-        <el-select v-model="state.queryParams.TypeId" placeholder="类型" @change="handleQuery">
-          <el-option label="办件结果" value="1" />
-          <el-option label="办件态度" value="2" />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="热线号码" prop="LineNum">
-        <el-input v-model="state.queryParams.LineNum" 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="statisticsDepartmentSatisfiedOrg"
+					:custom-config="{
+						storage: true,
+					}"
+					showHeaderOverflow
+					:params="{ exportMethod: departmentSatisfactionOrgExport, exportParams: requestParams }"
+					show-footer
+					:footer-method="footerMethod"
+				>
+					<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(scope.row.verySatisfiedKey, 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(scope.row.satisfiedKey, 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(scope.row.regardedAsSatisfiedKey, 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(scope.row.defaultSatisfiedKey, 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(scope.row.noSatisfiedKey, 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(scope.row.noEvaluateKey, 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(scope.row.noPutThroughKey, 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>
@@ -66,186 +150,11 @@ import { onMounted, reactive, ref } from 'vue';
 import { FormInstance } from 'element-plus';
 import { departmentSatisfactionOrg, departmentSatisfactionOrgExport } from '@/api/statistics/department';
 import { useRoute, useRouter } from 'vue-router';
+import XEUtils from 'xe-utils';
 
-// 表格配置项
-const columns = ref<any[]>([
-	{
-		prop: 'orgName',
-		label: '部门名称',
-		minWidth: 200,
-	},
-	{ prop: 'orgTypeText', label: '部门类别', minWidth: 120 },
-	{ prop: 'totalSumCount', label: '小计' },
-	{
-		prop: 'totalSumRateText',
-		label: '总满意率',
-		minWidth: 120,
-	},
-	{
-		prop: 'verySatisfiedCount',
-		label: '非常满意',
-		minWidth: 120,
-		render: (scope) => {
-			return (
-				<>
-					{!['市直合计', '区县合计'].includes(scope.row.orgName) ? (
-						<el-button type="primary" link onClick={() => onDetail(scope.row.verySatisfiedKey, scope.row)}>
-							{scope.row.verySatisfiedCount}
-						</el-button>
-					) : (
-						<span>{scope.row.verySatisfiedCount}</span>
-					)}
-				</>
-			);
-		},
-	},
-	{
-		prop: 'verySatisfiedRateText',
-		label: '非常满意率',
-		minWidth: 120,
-	},
-	{
-		prop: 'satisfiedCount',
-		label: '满意',
-		minWidth: 120,
-		render: (scope) => {
-			return (
-				<>
-					{!['市直合计', '区县合计'].includes(scope.row.orgName) ? (
-						<el-button type="primary" link onClick={() => onDetail(scope.row.satisfiedKey, scope.row)}>
-							{scope.row.satisfiedCount}
-						</el-button>
-					) : (
-						<span>{scope.row.satisfiedCount}</span>
-					)}
-				</>
-			);
-		},
-	},
-	{
-		prop: 'satisfiedRateText',
-		label: '满意率',
-		minWidth: 120,
-	},
-	{
-		prop: 'regardedAsSatisfiedCount',
-		label: '视为满意',
-		minWidth: 120,
-		render: (scope) => {
-			return (
-				<>
-					{!['市直合计', '区县合计'].includes(scope.row.orgName) ? (
-						<el-button type="primary" link onClick={() => onDetail(scope.row.regardedAsSatisfiedKey, scope.row)}>
-							{scope.row.regardedAsSatisfiedCount}
-						</el-button>
-					) : (
-						<span>{scope.row.regardedAsSatisfiedCount}</span>
-					)}
-				</>
-			);
-		},
-	},
-	{
-		prop: 'regardedAsSatisfiedRateText',
-		label: '视为满意率',
-		minWidth: 120,
-	},
-	{
-		prop: 'defaultSatisfiedCount',
-		label: '默认满意',
-		minWidth: 120,
-		render: (scope) => {
-			return (
-				<>
-					{!['市直合计', '区县合计'].includes(scope.row.orgName) ? (
-						<el-button type="primary" link onClick={() => onDetail(scope.row.defaultSatisfiedKey, scope.row)}>
-							{scope.row.defaultSatisfiedCount}
-						</el-button>
-					) : (
-						<span>{scope.row.defaultSatisfiedCount}</span>
-					)}
-				</>
-			);
-		},
-	},
-	{
-		prop: 'defaultSatisfiedRateText',
-		label: '默认满意率',
-		minWidth: 120,
-	},
-	{
-		prop: 'noSatisfiedCount',
-		label: '不满意',
-		minWidth: 120,
-		render: (scope) => {
-			return (
-				<>
-					{!['市直合计', '区县合计'].includes(scope.row.orgName) ? (
-						<el-button type="primary" link onClick={() => onDetail(scope.row.noSatisfiedKey, scope.row)}>
-							{scope.row.noSatisfiedCount}
-						</el-button>
-					) : (
-						<span>{scope.row.noSatisfiedCount}</span>
-					)}
-				</>
-			);
-		},
-	},
-	{
-		prop: 'noSatisfiedRateText',
-		label: '不满意率',
-		minWidth: 120,
-	},
-	{
-		prop: 'noEvaluateCount',
-		label: '未作评价',
-		minWidth: 120,
-		render: (scope) => {
-			return (
-				<>
-					{!['市直合计', '区县合计'].includes(scope.row.orgName) ? (
-						<el-button type="primary" link onClick={() => onDetail(scope.row.noEvaluateKey, scope.row)}>
-							{scope.row.noEvaluateCount}
-						</el-button>
-					) : (
-						<span>{scope.row.noEvaluateCount}</span>
-					)}
-				</>
-			);
-		},
-	},
-	{
-		prop: 'noEvaluateRateText',
-		label: '未作评价率',
-		minWidth: 120,
-	},
-	{
-		prop: 'noPutThroughCount',
-		label: '未接通',
-		minWidth: 120,
-		render: (scope) => {
-			return (
-				<>
-					{!['市直合计', '区县合计'].includes(scope.row.orgName) ? (
-						<el-button type="primary" link onClick={() => onDetail(scope.row.noPutThroughKey, scope.row)}>
-							{scope.row.noPutThroughCount}
-						</el-button>
-					) : (
-						<span>{scope.row.noPutThroughCount}</span>
-					)}
-				</>
-			);
-		},
-	},
-	{
-		prop: 'noPutThroughRateText',
-		label: '未接通率',
-		minWidth: 120,
-	},
-]);
 // 定义变量内容
 const ruleFormRef = ref<RefType>(); // 表单ref
-const state = reactive({
+const state = reactive<any>({
 	queryParams: {
 		// 查询条件
 		PageIndex: 1,
@@ -298,77 +207,21 @@ const resetQuery = (formEl: FormInstance | undefined) => {
 	formEl.resetFields();
 	queryList();
 };
-// 合计
-const getSummaries = (param: any) => {
-	const { columns } = param;
-	const sums: string[] = [];
-	columns.forEach((column: { property: string }, index: number) => {
-		if (index === 0) {
-			sums[index] = '合计';
-			return;
-		}
-		switch (column.property) {
-			case 'orgTypeText':
-				sums[index] = state.totalCount?.orgTypeText;
-				break;
-			case 'totalSumCount':
-				sums[index] = state.totalCount?.totalSumCount;
-				break;
-			case 'totalSumRateText':
-				sums[index] = state.totalCount?.totalSumRateText;
-				break;
-			case 'verySatisfiedCount':
-				sums[index] = state.totalCount?.verySatisfiedCount;
-				break;
-			case 'verySatisfiedRateText':
-				sums[index] = state.totalCount?.verySatisfiedRateText;
-				break;
-			case 'satisfiedCount':
-				sums[index] = state.totalCount?.satisfiedCount;
-				break;
-			case 'satisfiedRateText':
-				sums[index] = state.totalCount?.satisfiedRateText;
-				break;
-			case 'regardedAsSatisfiedCount':
-				sums[index] = state.totalCount?.regardedAsSatisfiedCount;
-				break;
-			case 'regardedAsSatisfiedRateText':
-				sums[index] = state.totalCount?.regardedAsSatisfiedRateText;
-				break;
-			case 'defaultSatisfiedCount':
-				sums[index] = state.totalCount?.defaultSatisfiedCount;
-				break;
-			case 'defaultSatisfiedRateText':
-				sums[index] = state.totalCount?.defaultSatisfiedRateText;
-				break;
-			case 'noSatisfiedCount':
-				sums[index] = state.totalCount?.noSatisfiedCount;
-				break;
-			case 'noSatisfiedRateText':
-				sums[index] = state.totalCount?.noSatisfiedRateText;
-				break;
-			case 'noEvaluateCount':
-				sums[index] = state.totalCount?.noEvaluateCount;
-				break;
-			case 'noEvaluateRateText':
-				sums[index] = state.totalCount?.noEvaluateRateText;
-				break;
-			case 'noPutThroughCount':
-				sums[index] = state.totalCount?.noPutThroughCount;
-				break;
-			case 'noPutThroughRateText':
-				sums[index] = state.totalCount?.noPutThroughRateText;
-				break;
-			default:
-				sums[index] = '';
-				break;
-		}
-	});
-	return sums;
+// 计算合计
+const footerMethod = ({ columns, data }) => {
+	return [
+		columns.map((column: any, columnIndex: number) => {
+			if (columnIndex === 0) {
+				return '合计';
+			}
+			// 后端返回了数据集合 state.totalCount 所以不需要计算 直接进行赋值
+			return XEUtils.get(state.totalCount, column.property);
+		}),
+	];
 };
 const router = useRouter();
 // 点击数字
-const onDetail = (key: string, row: any) => {
+const linkDetail = (key: string, row: any) => {
 	router.push({
 		name: 'statisticsDepartmentSatisfiedDetail',
 		query: {

src/views/statistics/department/handle.vue

@@ -1,9 +1,9 @@
 <template>
 	<div class="statistics-department-handle-container layout-padding">
-    <div class="layout-padding-auto layout-padding-view pd20">
+		<div class="layout-padding-auto layout-padding-view pd20">
 			<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"/>
+					<statistical-time v-model="state.queryParams.crTime" @change="handleQuery" ref="statisticalTimeRef" :disabled="state.loading" />
 				</el-form-item>
 				<el-form-item label="来电主体" prop="TypeId">
 					<el-select v-model="state.queryParams.TypeId" placeholder="请选择来电主体" @change="handleQuery">
@@ -25,7 +25,7 @@
 					</el-button>
 					<el-popover :width="500" trigger="click">
 						<template #reference>
-							<el-button type="primary" title="口径说明"><SvgIcon name="ele-QuestionFilled" class="mr5"/>口径说明</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>
@@ -76,12 +76,12 @@
 					:loading="state.loading"
 					:data="state.tableData"
 					:column-config="{ resizable: true }"
-					:row-config="{ isCurrent: true, isHover: true, height: 30 }"
+					:row-config="{ isCurrent: true, isHover: true, height: 30, useKey: true }"
 					ref="tableRef"
 					height="auto"
 					auto-resize
 					show-overflow
-					:scrollY="{ enabled: true, gt: 0 }"
+					:scrollY="{ enabled: true, gt: 20, mode: 'wheel' }"
 					id="statisticsDepartmentHandle"
 					:custom-config="{
 						storage: true,
@@ -94,38 +94,35 @@
 					<vxe-column field="orgName" title="部门名称" min-width="200" fixed="left">
 						<template #default="scope">
 							<el-button type="primary" link @click="linkDetail(scope)">
-								{{scope.row.orgName}}
+								{{ scope.row.orgName }}
 							</el-button>
 						</template>
 					</vxe-column>
-					<vxe-column field="orgTypeText" title="部门类别" min-width="100" fixed="left">
-					</vxe-column>
-					<vxe-column field="orderCountNum" title="信件总量" min-width="90" fixed="left">
-					</vxe-column>
+					<vxe-column field="orgTypeText" title="部门类别" min-width="100" fixed="left"> </vxe-column>
+					<vxe-column field="orderCountNum" title="信件总量" min-width="90" fixed="left"> </vxe-column>
 					<vxe-colgroup title="办件信息" align="center">
 						<vxe-column title="已办案件" field="ybOrderCountNum" min-width="100">
 							<template #default="scope">
-								<el-button type="primary" link @click="linkDetail(scope,'0')">
-									{{scope.row.ybOrderCountNum}}
+								<el-button type="primary" link @click="linkDetail(scope, '0')">
+									{{ scope.row.ybOrderCountNum }}
 								</el-button>
 							</template>
 						</vxe-column>
 						<vxe-column title="在办案件" field="zbOrderCountNum" min-width="100">
 							<template #default="scope">
-								<el-button type="primary" link @click="linkDetail(scope,'1')">
-									{{scope.row.zbOrderCountNum}}
+								<el-button type="primary" link @click="linkDetail(scope, '1')">
+									{{ scope.row.zbOrderCountNum }}
 								</el-button>
 							</template>
 						</vxe-column>
-						<vxe-column title="办结率" field="orderCompletionRate" min-width="100">
-						</vxe-column>
+						<vxe-column title="办结率" field="orderCompletionRate" min-width="100"> </vxe-column>
 						<vxe-column title="按时办结率" field="completeOnTimeRate" min-width="100"></vxe-column>
 					</vxe-colgroup>
 					<vxe-colgroup title="延期次数" align="center">
 						<vxe-column title="延期次数" field="orderDelayCount" min-width="100">
 							<template #default="scope">
 								<el-button type="primary" link @click="linkDetail(scope, '2')">
-									{{scope.row.orderDelayCount}}
+									{{ scope.row.orderDelayCount }}
 								</el-button>
 							</template>
 						</vxe-column>
@@ -135,35 +132,35 @@
 						<vxe-column title="已办超期" field="ybOverdue" min-width="100">
 							<template #default="scope">
 								<el-button type="primary" link @click="linkDetail(scope, '3')">
-									{{scope.row.ybOverdue}}
+									{{ scope.row.ybOverdue }}
 								</el-button>
 							</template>
 						</vxe-column>
 						<vxe-column title="待办超期" field="zbOverdue" min-width="100">
 							<template #default="scope">
 								<el-button type="primary" link @click="linkDetail(scope, '4')">
-									{{scope.row.zbOverdue}}
+									{{ scope.row.zbOverdue }}
 								</el-button>
 							</template>
 						</vxe-column>
 						<vxe-column title="会签已办超期" field="hqybOverdue" min-width="110">
 							<template #default="scope">
 								<el-button type="primary" link @click="linkDetail(scope, '5')">
-									{{scope.row.hqybOverdue}}
+									{{ scope.row.hqybOverdue }}
 								</el-button>
 							</template>
 						</vxe-column>
 						<vxe-column title="会签待办超期" field="hqzbOverdue" min-width="110">
 							<template #default="scope">
 								<el-button type="primary" link @click="linkDetail(scope, '6')">
-									{{scope.row.hqzbOverdue}}
+									{{ scope.row.hqzbOverdue }}
 								</el-button>
 							</template>
 						</vxe-column>
 						<vxe-column title="超期件数" field="subtotalOverdue" min-width="100">
 							<template #default="scope">
 								<el-button type="primary" link @click="linkDetail(scope, '7')">
-									{{scope.row.subtotalOverdue}}
+									{{ scope.row.subtotalOverdue }}
 								</el-button>
 							</template>
 						</vxe-column>
@@ -173,14 +170,14 @@
 						<vxe-column title="会签已办" field="delayEnd" min-width="100">
 							<template #default="scope">
 								<el-button type="primary" link @click="linkDetail(scope, '8')">
-									{{scope.row.delayEnd}}
+									{{ scope.row.delayEnd }}
 								</el-button>
 							</template>
 						</vxe-column>
 						<vxe-column title="会签待办" field="delayWait" min-width="100">
 							<template #default="scope">
 								<el-button type="primary" link @click="linkDetail(scope, '9')">
-									{{scope.row.delayWait}}
+									{{ scope.row.delayWait }}
 								</el-button>
 							</template>
 						</vxe-column>
@@ -189,14 +186,14 @@
 						<vxe-column title="待归档" field="toBeArchived" min-width="100">
 							<template #default="scope">
 								<el-button type="primary" link @click="linkDetail(scope, '10')">
-									{{scope.row.toBeArchived}}
+									{{ scope.row.toBeArchived }}
 								</el-button>
 							</template>
 						</vxe-column>
 						<vxe-column title="已归档" field="archived" min-width="100">
 							<template #default="scope">
 								<el-button type="primary" link @click="linkDetail(scope, '11')">
-									{{scope.row.archived}}
+									{{ scope.row.archived }}
 								</el-button>
 							</template>
 						</vxe-column>
@@ -205,21 +202,21 @@
 						<vxe-column title="待发布" field="waitPublished" min-width="100">
 							<template #default="scope">
 								<el-button type="primary" link @click="linkDetail(scope, '12')">
-									{{scope.row.waitPublished}}
+									{{ scope.row.waitPublished }}
 								</el-button>
 							</template>
 						</vxe-column>
 						<vxe-column title="公开件" field="publishedOpen" min-width="100">
 							<template #default="scope">
 								<el-button type="primary" link @click="linkDetail(scope, '13')">
-									{{scope.row.publishedOpen}}
+									{{ scope.row.publishedOpen }}
 								</el-button>
 							</template>
 						</vxe-column>
 						<vxe-column title="不公开件" field="publishedNoOpen" min-width="100">
 							<template #default="scope">
 								<el-button type="primary" link @click="linkDetail(scope, '14')">
-									{{scope.row.publishedNoOpen}}
+									{{ scope.row.publishedNoOpen }}
 								</el-button>
 							</template>
 						</vxe-column>
@@ -228,34 +225,33 @@
 						<vxe-column title="申请总量" field="screenCount" min-width="100">
 							<template #default="scope">
 								<el-button type="primary" link @click="linkDetail(scope, '15')">
-									{{scope.row.screenCount}}
+									{{ scope.row.screenCount }}
 								</el-button>
 							</template>
 						</vxe-column>
 						<vxe-column title="待甄别" field="screenApproval" min-width="100">
 							<template #default="scope">
 								<el-button type="primary" link @click="linkDetail(scope, '16')">
-									{{scope.row.screenApproval}}
+									{{ scope.row.screenApproval }}
 								</el-button>
 							</template>
 						</vxe-column>
 						<vxe-column title="已同意" field="screenPass" min-width="100">
 							<template #default="scope">
 								<el-button type="primary" link @click="linkDetail(scope, '17')">
-									{{scope.row.screenPass}}
+									{{ scope.row.screenPass }}
 								</el-button>
 							</template>
 						</vxe-column>
 						<vxe-column title="未同意" field="screenNotPass" min-width="100">
 							<template #default="scope">
 								<el-button type="primary" link @click="linkDetail(scope, '18')">
-									{{scope.row.screenNotPass}}
+									{{ scope.row.screenNotPass }}
 								</el-button>
 							</template>
 						</vxe-column>
 					</vxe-colgroup>
-					<vxe-column field="satisfactionRate" title="总满意率" min-width="100">
-					</vxe-column>
+					<vxe-column field="satisfactionRate" title="总满意率" min-width="100"> </vxe-column>
 				</vxe-table>
 			</div>
 		</div>
@@ -280,12 +276,12 @@ const state = reactive<any>({
 		OrgName: null, // 部门名称
 		crTime: defaultDate, // 时间默认今天开始到今天结束
 		isProvince: null,
-    TypeId:0
+		TypeId: 0,
 	},
 	tableData: [], //表单
 	loading: false, // 加载
 	totalCount: 0, // 总计
-  IdentityType:0,
+	IdentityType: 0,
 });
 /** 搜索按钮操作 */
 const handleQuery = () => {

src/views/statistics/department/satisfied.vue

@@ -1,39 +1,19 @@
 <template>
 	<div class="statistics-department-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"
-				show-summary
-				:summary-method="getSummaries"
-				border
-				:pagination="false"
-				:toolButton="['refresh', 'setting', 'exportAll']"
-				:exportMethod="departmentSatisfactionExport"
-				: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="drawer = true" class="default-button"> <SvgIcon name="ele-Search" class="mr5" />更多查询</el-button>
-							<el-button type="primary" @click="onDetailList" :loading="state.loading"> <SvgIcon name="ele-List" 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>
+					<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-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>
@@ -58,8 +38,116 @@
 							<el-descriptions-item label="未接通率">未接通/小计</el-descriptions-item>
 						</el-descriptions>
 					</el-popover>
-				</template>
-			</ProTable>
+					<el-button type="primary" @click="onDetailList" :loading="state.loading"> <SvgIcon name="ele-List" class="mr5" />列表明细 </el-button>
+				</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="statisticsDepartmentSatisfied"
+					:custom-config="{
+						storage: true,
+					}"
+					showHeaderOverflow
+					:params="{ exportMethod: departmentSatisfactionExport, exportParams: requestParams }"
+					show-footer
+					:footer-method="footerMethod"
+				>
+					<vxe-column field="orgName" title="部门名称" min-width="200" fixed="left">
+						<template #default="scope">
+							<el-button type="primary" link @click="onDetailOrg(scope.row)" v-if="!['市直合计', '区县合计'].includes(scope.row.orgName)">
+								{{ scope.row.orgName }}
+							</el-button>
+							<span v-else>{{ scope.row.orgName }}</span>
+						</template>
+					</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(scope.row.verySatisfiedKey, 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(scope.row.satisfiedKey, 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(scope.row.regardedAsSatisfiedKey, 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(scope.row.defaultSatisfiedKey, 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(scope.row.noSatisfiedKey, 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(scope.row.noEvaluateKey, 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(scope.row.noPutThroughKey, 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>
 		<!--	更多查询	-->
 		<el-drawer v-model="drawer" title="更多查询" size="500px">
@@ -106,199 +194,10 @@ import { callPeriodBase } from '@/api/statistics/call';
 import Other from '@/utils/other';
 import { useThemeConfig } from '@/stores/themeConfig';
 import { storeToRefs } from 'pinia';
+import XEUtils from 'xe-utils';
 
 
 const StatisticalTime = defineAsyncComponent(() => import('@/components/StatisticalTime/index.vue')); // 日期类型选择组件
-// 表格配置项
-const columns = ref<any[]>([
-	{
-		prop: 'orgName',
-		label: '部门名称',
-		minWidth: 200,
-		fixed: 'left',
-		render: (scope) => {
-			return (
-				<>
-					{!['市直合计', '区县合计'].includes(scope.row.orgName) ? (
-						<el-button type="primary" link onClick={() => onDetailOrg(scope.row)}>
-							{scope.row.orgName}
-						</el-button>
-					) : (
-						<span>{scope.row.orgName}</span>
-					)}
-				</>
-			);
-		},
-	},
-	{ prop: 'orgTypeText', label: '部门类别', minWidth: 120 },
-	{ prop: 'totalSumCount', label: '小计' },
-	{
-		prop: 'totalSumRateText',
-		label: '总满意率',
-		minWidth: 120,
-	},
-	{
-		prop: 'verySatisfiedCount',
-		label: '非常满意',
-		minWidth: 120,
-		render: (scope) => {
-			return (
-				<>
-					{!['市直合计', '区县合计'].includes(scope.row.orgName) ? (
-						<el-button type="primary" link onClick={() => onDetail(scope.row.verySatisfiedKey, scope.row)}>
-							{scope.row.verySatisfiedCount}
-						</el-button>
-					) : (
-						<span>{scope.row.verySatisfiedCount}</span>
-					)}
-				</>
-			);
-		},
-	},
-	{
-		prop: 'verySatisfiedRateText',
-		label: '非常满意率',
-		minWidth: 120,
-	},
-	{
-		prop: 'satisfiedCount',
-		label: '满意',
-		minWidth: 120,
-		render: (scope) => {
-			return (
-				<>
-					{!['市直合计', '区县合计'].includes(scope.row.orgName) ? (
-						<el-button type="primary" link onClick={() => onDetail(scope.row.satisfiedKey, scope.row)}>
-							{scope.row.satisfiedCount}
-						</el-button>
-					) : (
-						<span>{scope.row.satisfiedCount}</span>
-					)}
-				</>
-			);
-		},
-	},
-	{
-		prop: 'satisfiedRateText',
-		label: '满意率',
-		minWidth: 120,
-	},
-	{
-		prop: 'regardedAsSatisfiedCount',
-		label: '视为满意',
-		minWidth: 120,
-		render: (scope) => {
-			return (
-				<>
-					{!['市直合计', '区县合计'].includes(scope.row.orgName) ? (
-						<el-button type="primary" link onClick={() => onDetail(scope.row.regardedAsSatisfiedKey, scope.row)}>
-							{scope.row.regardedAsSatisfiedCount}
-						</el-button>
-					) : (
-						<span>{scope.row.regardedAsSatisfiedCount}</span>
-					)}
-				</>
-			);
-		},
-	},
-	{
-		prop: 'regardedAsSatisfiedRateText',
-		label: '视为满意率',
-		minWidth: 120,
-	},
-	{
-		prop: 'defaultSatisfiedCount',
-		label: '默认满意',
-		minWidth: 120,
-		render: (scope) => {
-			return (
-				<>
-					{!['市直合计', '区县合计'].includes(scope.row.orgName) ? (
-						<el-button type="primary" link onClick={() => onDetail(scope.row.defaultSatisfiedKey, scope.row)}>
-							{scope.row.defaultSatisfiedCount}
-						</el-button>
-					) : (
-						<span>{scope.row.defaultSatisfiedCount}</span>
-					)}
-				</>
-			);
-		},
-	},
-	{
-		prop: 'defaultSatisfiedRateText',
-		label: '默认满意率',
-		minWidth: 120,
-	},
-	{
-		prop: 'noSatisfiedCount',
-		label: '不满意',
-		minWidth: 120,
-		render: (scope) => {
-			return (
-				<>
-					{!['市直合计', '区县合计'].includes(scope.row.orgName) ? (
-						<el-button type="primary" link onClick={() => onDetail(scope.row.noSatisfiedKey, scope.row)}>
-							{scope.row.noSatisfiedCount}
-						</el-button>
-					) : (
-						<span>{scope.row.noSatisfiedCount}</span>
-					)}
-				</>
-			);
-		},
-	},
-	{
-		prop: 'noSatisfiedRateText',
-		label: '不满意率',
-		minWidth: 120,
-	},
-	{
-		prop: 'noEvaluateCount',
-		label: '未作评价',
-		minWidth: 120,
-		render: (scope) => {
-			return (
-				<>
-					{!['市直合计', '区县合计'].includes(scope.row.orgName) ? (
-						<el-button type="primary" link onClick={() => onDetail(scope.row.noEvaluateKey, scope.row)}>
-							{scope.row.noEvaluateCount}
-						</el-button>
-					) : (
-						<span>{scope.row.noEvaluateCount}</span>
-					)}
-				</>
-			);
-		},
-	},
-	{
-		prop: 'noEvaluateRateText',
-		label: '未作评价率',
-		minWidth: 120,
-	},
-	{
-		prop: 'noPutThroughCount',
-		label: '未接通',
-		minWidth: 120,
-		render: (scope) => {
-			return (
-				<>
-					{!['市直合计', '区县合计'].includes(scope.row.orgName) ? (
-						<el-button type="primary" link onClick={() => onDetail(scope.row.noPutThroughKey, scope.row)}>
-							{scope.row.noPutThroughCount}
-						</el-button>
-					) : (
-						<span>{scope.row.noPutThroughCount}</span>
-					)}
-				</>
-			);
-		},
-	},
-	{
-		prop: 'noPutThroughRateText',
-		label: '未接通率',
-		minWidth: 120,
-	},
-]);
 // 定义变量内容
 const state = reactive<any>({
 	queryParams: {
@@ -360,73 +259,17 @@ const resetQuery = (formEl: FormInstance | undefined) => {
 	statisticalTimeRef.value.reset();
 	queryList();
 };
-// 合计
-const getSummaries = (param: any) => {
-	const { columns } = param;
-	const sums: string[] = [];
-	columns.forEach((column: { property: string }, index: number) => {
-		if (index === 0) {
-			sums[index] = '合计';
-			return;
-		}
-		switch (column.property) {
-			case 'orgTypeText':
-				sums[index] = state.totalCount?.orgTypeText;
-				break;
-			case 'totalSumCount':
-				sums[index] = state.totalCount?.totalSumCount;
-				break;
-			case 'totalSumRateText':
-				sums[index] = state.totalCount?.totalSumRateText;
-				break;
-			case 'verySatisfiedCount':
-				sums[index] = state.totalCount?.verySatisfiedCount;
-				break;
-			case 'verySatisfiedRateText':
-				sums[index] = state.totalCount?.verySatisfiedRateText;
-				break;
-			case 'satisfiedCount':
-				sums[index] = state.totalCount?.satisfiedCount;
-				break;
-			case 'satisfiedRateText':
-				sums[index] = state.totalCount?.satisfiedRateText;
-				break;
-			case 'regardedAsSatisfiedCount':
-				sums[index] = state.totalCount?.regardedAsSatisfiedCount;
-				break;
-			case 'regardedAsSatisfiedRateText':
-				sums[index] = state.totalCount?.regardedAsSatisfiedRateText;
-				break;
-			case 'defaultSatisfiedCount':
-				sums[index] = state.totalCount?.defaultSatisfiedCount;
-				break;
-			case 'defaultSatisfiedRateText':
-				sums[index] = state.totalCount?.defaultSatisfiedRateText;
-				break;
-			case 'noSatisfiedCount':
-				sums[index] = state.totalCount?.noSatisfiedCount;
-				break;
-			case 'noSatisfiedRateText':
-				sums[index] = state.totalCount?.noSatisfiedRateText;
-				break;
-			case 'noEvaluateCount':
-				sums[index] = state.totalCount?.noEvaluateCount;
-				break;
-			case 'noEvaluateRateText':
-				sums[index] = state.totalCount?.noEvaluateRateText;
-				break;
-			case 'noPutThroughCount':
-				sums[index] = state.totalCount?.noPutThroughCount;
-				break;
-			case 'noPutThroughRateText':
-				sums[index] = state.totalCount?.noPutThroughRateText;
-				break;
-			default:
-				sums[index] = '';
-				break;
-		}
-	});
-	return sums;
+// 计算合计
+const footerMethod = ({ columns, data }) => {
+	return [
+		columns.map((column: any, columnIndex: number) => {
+			if (columnIndex === 0) {
+				return '合计';
+			}
+			// 后端返回了数据集合 state.totalCount 所以不需要计算 直接进行赋值
+			return XEUtils.get(state.totalCount, column.property);
+		}),
+	];
 };
 const router = useRouter();
 // 点击部门名称
@@ -445,7 +288,7 @@ const onDetailOrg = (row: any) => {
 	});
 };
 // 点击数字
-const onDetail = (key: string, row: any) => {
+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({
@@ -475,8 +318,13 @@ const onDetailList = () => {
 		name: 'statisticsDepartmentSatisfiedDetailList',
 	});
 };
+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/order/orgHotspot.vue

@@ -14,27 +14,18 @@
           </el-form-item>
         </el-form>
       </div>
-			<ProTable
-				ref="proTableRef"
-				:columns="columns"
-				:data="state.tableData"
-				@updateTable="queryList"
-				:loading="state.loading"
-				border
-				:pagination="false"
-				show-summary
-				row-key="OrgCode"
-        :key="Math.random()"
-			>
-			</ProTable>
+			<div style="overflow: hidden; width: 100%; height: 100%; flex: 1">
+				<vxe-grid v-bind="gridOptions"> </vxe-grid>
+			</div>
 		</div>
 	</div>
 </template>
 <script setup lang="ts" name="statisticsOrderOrgHotspot">
 import { defineAsyncComponent, onMounted, reactive, ref, watch } from 'vue';
 import { FormInstance } from 'element-plus';
-import { departmentHotDetail } from '@/api/statistics/order';
+import { departmentHotDetail, departmentUnsatisfiedExport } from '@/api/statistics/order';
 import { defaultDate, } from "@/utils/constants";
+import XEUtils from 'xe-utils';
 
 
 const StatisticalTime = defineAsyncComponent(() => import('@/components/StatisticalTime/index.vue')); // 日期类型选择组件
@@ -49,8 +40,48 @@ const state = reactive(<any>{
 	loading: false, // 加载
 	total: 0, // 总数
 });
-
-const columns = ref<any>([]); //
+const gridOptions = reactive<any>({
+	loading: false,
+	border: true,
+	showOverflow: true,
+	printConfig: {},
+	columnConfig: {
+		resizable: true,
+	},
+	scrollY: {
+		enabled: true,
+		gt: 20,
+		mode: 'wheel'
+	},
+	toolbarConfig: {
+		zoom: true,
+		custom: true,
+		refresh: {
+			queryMethod: () => {
+				queryList();
+			},
+		},
+	},
+	customConfig: {
+		storage: true
+	},
+	id: 'statisticsOrderOrgHotspot',
+	rowConfig: { isHover: true, height: 30,isCurrent:true,useKey:true },
+	height: 'auto',
+	columns: [],
+	data: [],
+	showFooter: true,
+	footerMethod: ({ columns, data }) => {
+		return [
+			columns.map((column: any, columnIndex: number) => {
+				if (columnIndex === 0) {
+					return '合计';
+				}
+				return XEUtils.sum(data, column.property);
+			}),
+		];
+	},
+});
 /** 搜索按钮操作 */
 const handleQuery = () => {
 	// state.queryParams.PageIndex = 1;
@@ -59,39 +90,40 @@ const handleQuery = () => {
 /** 获取列表 */
 const queryList = () => {
 	state.loading = true;
+	gridOptions.loading = true;
 	let request:EmptyObjectType = {};
 	request.StartTime = state.queryParams.crTime === null ? null : state.queryParams.crTime[0];
 	request.EndTime = state.queryParams.crTime === null ? null : state.queryParams.crTime[1];
 	Reflect.deleteProperty(request, 'crTime');
 	departmentHotDetail(request)
 		.then((res: any) => {
-			columns.value = res.result?.hotSpot ?? [];
-			columns.value = columns.value.map((item: any) => {
+			const columns = res.result?.hotSpot ?? [];
+			gridOptions.columns = columns.map((item: any) => {
 				return {
-					prop: item.id,
-					label: item.hotSpotName,
 					minWidth: 120,
 					align: 'center',
 					id: item.id,
+					field: item.id,
+					title: item.hotSpotName,
 				};
 			});
-			columns.value.unshift(
+			gridOptions.columns.unshift(
 				{
-					prop: 'OrgName',
-					label: '部门名称',
+					title: '部门名称',
+					field: 'OrgName',
 					minWidth: 200,
 				},
 				{
-					prop: 'sum',
-					label: '小计',
 					width: 55,
 					align: 'center',
+					field: 'sum',
+					title: '小计',
 				}
 			);
-			state.tableData = res.result?.data ?? [];
+			let tableData = res.result?.data ?? [];
 			// 判断部门名称是否重复 重复的合并数据 并去除重复数据
 			const arr = <any>[];
-			state.tableData.forEach((item: any) => {
+			tableData.forEach((item: any) => {
 				const index = arr.findIndex((v: any) => v.OrgName === item.OrgName);
 				if (index === -1) {
 					arr.push(item);
@@ -102,17 +134,19 @@ const queryList = () => {
 			// 添加合计
 			arr.forEach((item: any) => {
 				item.sum = 0;
-				columns.value.forEach((v: any) => {
+				gridOptions.columns.forEach((v: any) => {
 					if (v.id !== 'sum' && v.id !== 'OrgName') {
 						item.sum += item[v.id] ?? 0;
 					}
 				});
 			});
-			state.tableData = arr;
+			gridOptions.data = arr;
 			state.loading = false;
+			gridOptions.loading = false;
 		})
 		.catch(() => {
 			state.loading = false;
+			gridOptions.loading = false;
 		});
 };
 /** 重置按钮操作 */
@@ -123,8 +157,6 @@ const resetQuery = (formEl: FormInstance | undefined) => {
 	statisticalTimeRef.value.reset();
 	queryList();
 };
-// 监听 columns 的变化
-const proTableRef = ref<RefType>();
 onMounted(() => {
 	queryList();
 });