reactor:待办，首页，综合查询表格重构完成;

src/App.vue

@@ -7,7 +7,7 @@
 	</el-config-provider>
 </template>
 
-<script lang="ts" name="app" setup>
+<script lang="tsx" name="app" setup>
 import { computed, ref, onBeforeMount, onMounted, onBeforeUnmount, nextTick, watch, reactive, defineAsyncComponent } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import zhCn from 'element-plus/es/locale/lang/zh-cn';
@@ -20,14 +20,151 @@ import mittBus from '@/utils/mitt';
 import { Session, Local, Cookie } from '@/utils/storage';
 import setIntroduction from '@/utils/setIconfont';
 import { loginPageInfo } from '@/api/login';
-import { getImageUrl } from '@/utils/tools';
+import { downloadFileByStream, getImageUrl } from '@/utils/tools';
 import { useKeepALiveNames } from '@/stores/keepAliveNames';
 import { useFavicon, useDark } from '@vueuse/core';
 import { NextLoading } from '@/utils/loading';
-import { ElNotification } from 'element-plus';
+import { ElMessageBox, ElNotification } from 'element-plus';
 import { formatAxis } from '@/utils/formatTime';
 import { initFrontEndControlRoutes } from '@/router/frontEnd';
 import { initBackEndControlRoutes } from '@/router/backEnd';
+import { VxeUI, VxeButton } from 'vxe-pc-ui';
+
+// 创建一个简单的工具栏-右侧工具渲染
+VxeUI.renderer.add('exportCurrent', {
+	renderToolbarTool(renderOpts, params) {
+		return (
+			<VxeButton
+				title="导出当前页"
+				circle
+				onClick={() => {
+					const { $table } = params;
+					const columns = $table.getColumns();
+					const tableParams = $table.getParams();
+					const exportNewColumns = columns
+						.map((item: any) => {
+							return {
+								prop: item.field,
+								mame: item.title,
+							};
+						})
+						.filter((item: any) => item.prop);
+					ElMessageBox.confirm(`您确定要导出当前页数据，是否继续?`, '提示', {
+						confirmButtonText: '确认',
+						cancelButtonText: '取消',
+						type: 'warning',
+						draggable: true,
+						cancelButtonClass: 'default-button',
+						autofocus: false,
+					})
+						.then(() => {
+							VxeUI.modal.message({
+								content: `导出中，请稍等`,
+								status: 'loading',
+								id: 'exportCurrent',
+								duration: -1,
+							});
+							const request = {
+								queryDto: tableParams.exportParams,
+								columnInfos: exportNewColumns,
+								isExportAll: false,
+							};
+							tableParams.exportMethod &&
+								tableParams
+									.exportMethod(request)
+									.then((res: any) => {
+										downloadFileByStream(res);
+										VxeUI.modal.close('exportCurrent');
+										VxeUI.modal.message({
+											content: `导出成功`,
+											status: 'success',
+										});
+									})
+									.catch((e: any) => {
+										console.log(`导出失败:${e}`);
+										VxeUI.modal.close('exportCurrent');
+										VxeUI.modal.message({
+											content: `导出失败`,
+											status: 'error',
+										});
+									});
+						})
+						.catch(() => {});
+				}}
+			>
+				<SvgIcon name="iconfont icon-daochu" />
+			</VxeButton>
+		);
+	},
+});
+VxeUI.renderer.add('exportAll', {
+	renderToolbarTool(renderOpts, params) {
+		return (
+			<VxeButton
+				class="mr10"
+				title="导出全部"
+				circle
+				onClick={() => {
+					const { $table } = params;
+					const columns = $table.getColumns();
+					const tableParams = $table.getParams();
+					const exportNewColumns = columns
+						.map((item: any) => {
+							return {
+								prop: item.field,
+								mame: item.title,
+							};
+						})
+						.filter((item: any) => item.prop);
+					ElMessageBox.confirm(`您确定要导出全部数据，是否继续?`, '提示', {
+						confirmButtonText: '确认',
+						cancelButtonText: '取消',
+						type: 'warning',
+						draggable: true,
+						cancelButtonClass: 'default-button',
+						autofocus: false,
+					})
+						.then(() => {
+							VxeUI.modal.message({
+								content: `导出中，请稍等`,
+								status: 'loading',
+								id: 'exportAll',
+								duration: -1,
+							});
+							const request = {
+								queryDto: tableParams.exportParams,
+								columnInfos: exportNewColumns,
+								isExportAll: true,
+							};
+							tableParams.exportMethod &&
+								tableParams
+									.exportMethod(request)
+									.then((res: any) => {
+										downloadFileByStream(res);
+										VxeUI.modal.close('exportAll');
+										VxeUI.modal.message({
+											content: `导出成功`,
+											status: 'success',
+										});
+									})
+									.catch((e: any) => {
+										console.log(`导出失败:${e}`);
+										VxeUI.modal.close('exportAll');
+										VxeUI.modal.message({
+											content: `导出失败`,
+											status: 'error',
+										});
+									});
+						})
+						.catch(() => {});
+				}}
+			>
+				<SvgIcon name="iconfont icon-export" />
+			</VxeButton>
+		);
+	},
+});
+
 // 引入组件
 const LockScreen = defineAsyncComponent(() => import('@/layout/lockScreen/index.vue'));
 const SetTings = defineAsyncComponent(() => import('@/layout/navBars/breadcrumb/setings.vue'));
@@ -133,9 +270,9 @@ const signInSuccess = (isNoPower: boolean | undefined) => {
 		Session.clear();
 		Cookie.clear();
 		Local.clear();
-		setTimeout(()=>{
+		setTimeout(() => {
 			window.location.reload();
-		},2000)
+		}, 2000);
 	} else {
 		router.push('/');
 		// 设置登录成功后的时间问候语

src/components/ProTable/index.vue

@@ -437,6 +437,7 @@ const exportCurrent = () => {
 			(item: any) => item.isShow && !columnTypes.includes(item.type!) && item.prop !== 'operation'
 		);
 	}
+	console.log(exportNewColumns,'导出1231')
 	ElMessageBox.confirm(`您确定要导出当前页数据，是否继续?`, '提示', {
 		confirmButtonText: '确认',
 		cancelButtonText: '取消',

src/main.ts

@@ -215,4 +215,5 @@ other.elSvg(app);
 // 全局组件挂载
 app.component('ProTable', ProTable);
 registerEcharts(app);
+
 app.use(pinia).use(router).use(ElementPlus).use(MotionPlugin).use(lazyVxeUI).use(lazyVxeTable).mount('#app');

src/views/business/order/index.vue

@@ -1,7 +1,7 @@
 <template>
 	<div class="business-order-container layout-padding">
 		<div class="layout-padding-auto layout-padding-view pd20">
-			<ProTable
+			<!--			<ProTable
 				ref="proTableRef"
 				:columns="columns"
 				:data="state.tableData"
@@ -106,7 +106,7 @@
 					<order-detail :order="row" @updateList="handleQuery">{{ row.title }}</order-detail>
 				</template>
 				<template #operation="{ row }">
-					<!-- 省工单退回条件 是省工单（工单未归档且当前节点处于热线中心办理节点时）工单状态为办理中（归档之前） 9代表有退回申请 -->
+					&lt;!&ndash; 省工单退回条件 是省工单（工单未归档且当前节点处于热线中心办理节点时）工单状态为办理中（归档之前） 9代表有退回申请 &ndash;&gt;
 					<el-button
 						link
 						type="danger"
@@ -231,7 +231,7 @@
 					<order-detail :order="row" @updateList="handleQuery">{{ row.title }}</order-detail>
 				</template>
 				<template #operation="{ row }">
-					<!-- 省工单退回条件 是省工单（工单未归档且当前节点处于热线中心办理节点时）工单状态为办理中（归档之前） 9代表有退回申请 -->
+					&lt;!&ndash; 省工单退回条件 是省工单（工单未归档且当前节点处于热线中心办理节点时）工单状态为办理中（归档之前） 9代表有退回申请 &ndash;&gt;
 					<el-button
 						link
 						type="danger"
@@ -250,9 +250,196 @@
 					>
 					<order-detail :order="row" @updateList="handleQuery" />
 				</template>
-			</ProTable>
+			</ProTable>-->
+			<el-form :model="state.queryParams" ref="ruleFormRef" @submit.native.prevent inline>
+				<el-row>
+					<el-col>
+						<el-form-item label="快捷查询" prop="fastSearch">
+							<el-segmented
+								:options="[
+									{
+										value: 'all',
+										label: '全部',
+									},
+									{
+										value: 'city',
+										label: '市工单',
+									},
+									{
+										value: 'province',
+										label: '省工单',
+									},
+								]"
+								v-model="fastSearch"
+								@change="fastSearchChange"
+								:disabled="state.loading"
+							/>
+							<el-checkbox-group v-model="checkList" @change="changeCheckList" class="ml15">
+								<el-checkbox value="IsSensitiveWord" border>敏感类工单</el-checkbox>
+							</el-checkbox-group>
+						</el-form-item>
+						<el-form-item>
+							<el-button @click="contentRetrieval"><SvgIcon name="ele-DocumentCopy" class="mr5" />内容检索</el-button>
+						</el-form-item>
+					</el-col>
+				</el-row>
+				<el-form-item label="工单标题" prop="Keyword">
+					<el-input v-model.trim="state.queryParams.Keyword" placeholder="工单标题" clearable @keyup.enter="handleQuery" class="keyword-input" />
+				</el-form-item>
+				<el-form-item label="工单编码" prop="No">
+					<el-input v-model.trim="state.queryParams.No" placeholder="工单编码" clearable @keyup.enter="handleQuery" class="keyword-input" />
+				</el-form-item>
+				<el-form-item label="生成时间" prop="crTime">
+					<el-date-picker
+						v-model="state.queryParams.crTime"
+						type="datetimerange"
+						unlink-panels
+						range-separator="至"
+						start-placeholder="开始时间"
+						end-placeholder="结束时间"
+						:shortcuts="shortcuts"
+						@change="handleQuery"
+						value-format="YYYY-MM-DD[T]HH:mm:ss"
+						:default-time="defaultTimeStartEnd"
+					/>
+				</el-form-item>
+				<el-form-item>
+					<el-button type="primary" @click="handleQuery" :loading="state.loading"> <SvgIcon name="ele-Search" class="mr5" />查询 </el-button>
+					<el-button @click="drawer = true" class="default-button"> <SvgIcon name="ele-Search" class="mr5" />更多查询</el-button>
+				</el-form-item>
+			</el-form>
+			<vxe-toolbar
+				ref="toolbarRef"
+				:loading="state.loading"
+				custom
+				:refresh="{
+					queryMethod: handleQuery,
+				}"
+				:tools="[{ toolRender: { name: 'exportCurrent' } }, { toolRender: { name: 'exportAll' } }]"
+			>
+				<template #buttons>
+					<el-button type="primary" @click="onCreateRepeatEvent" :loading="state.loading">
+						<SvgIcon name="ele-Plus" class="mr5" />创建重复性事件
+					</el-button>
+					<el-button type="primary" @click="onRevoke" :loading="state.loading" v-auth="'business:order:revoke'" :disabled="isChecked">
+						<SvgIcon name="ele-Setting" class="mr5" />设置撤销
+					</el-button>
+					<el-button type="primary" @click="onObserve" v-auth="'business:order:observe'" :disabled="isChecked" :loading="state.loading"
+						>添加关注
+					</el-button>
+					<el-button type="primary" @click="onEnd" v-auth="'business:order:end'" :disabled="isChecked" :loading="state.loading"
+						>设置终结件
+					</el-button>
+					<el-button type="primary" @click="onJbExport" :disabled="isChecked" :loading="state.loading" v-auth="'business:order:jbdExport'"
+						><SvgIcon name="iconfont icon-daochu" class="mr5" />交办单导出</el-button
+					>
+					<el-button type="primary" @click="onUrge" v-auth="'business:order:urge'" :disabled="isChecked" :loading="state.loading"
+						><SvgIcon name="ele-Plus" class="mr5" />添加催办
+					</el-button>
+				</template>
+			</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 }"
+					ref="tableRef"
+					@sort-change="sortChange"
+					@checkbox-all="selectAllChangeEvent"
+					@checkbox-change="selectChangeEvent"
+					height="auto"
+					auto-resize
+					show-overflow
+					:print-config="{}"
+					:scrollY="{ enabled: true, gt: 0 }"
+					id="businessOrder"
+					:custom-config="{ storage: true }"
+					showHeaderOverflow
+					:params="{ exportMethod: exportOrder, exportParams: requestParams }"
+				>
+					<vxe-column type="checkbox" width="50" align="center"></vxe-column>
+					<vxe-column field="expiredStatusText" title="超期状态" width="90" align="center">
+						<template #default="{ row }">
+							<span :class="'overdue-status-' + row.expiredStatus" :title="row.expiredStatusText"></span>
+						</template>
+					</vxe-column>
+					<vxe-column field="no" title="工单编码" width="140"></vxe-column>
+					<vxe-column field="isProvinceText" title="省/市工单" width="90"></vxe-column>
+					<vxe-column field="reTransactNum" title="重办次数" width="90"></vxe-column>
+					<vxe-column field="isUrgentText" title="是否紧急" width="90">
+						<template #default="{ row }">
+							<span class="color-danger font-bold">{{ row.isUrgentText }}</span>
+						</template>
+					</vxe-column>
+					<vxe-column field="isSecretText" title="是否保密" width="100"></vxe-column>
+					<vxe-column field="currentStepName" title="当前节点" width="120"></vxe-column>
+					<vxe-column field="actualStepAcceptText" title="受理情况" width="100"></vxe-column>
+					<vxe-column field="statusText" title="工单状态" width="100"></vxe-column>
+					<vxe-column field="title" title="工单标题" width="200">
+						<template #default="{ row }">
+							<order-detail :order="row" @updateList="queryList">{{ row.title }}</order-detail>
+						</template>
+					</vxe-column>
+					<vxe-column field="startTime" title="受理时间" sortable width="160">
+						<template #default="{ row }">
+							{{ formatDate(row.startTime, 'YYYY-mm-dd HH:MM:SS') }}
+						</template>
+					</vxe-column>
+					<vxe-column field="expiredTime" title="工单期满时间" sortable width="160">
+						<template #default="{ row }">
+							{{ formatDate(row.expiredTime, 'YYYY-mm-dd HH:MM:SS') }}
+						</template>
+					</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 field="orgLevelOneName" title="一级部门" width="140"></vxe-column>
+					<vxe-column field="orgLevelTwoName" title="二级部门" width="140" :visible="['ZiGong'].includes(themeConfig.appScope)"></vxe-column>
+					<vxe-column field="actualHandleOrgName" title="接办部门" width="140"></vxe-column>
+					<vxe-column field="acceptType" title="受理类型" width="110"></vxe-column>
+					<vxe-column field="counterSignTypeText" title="是否会签" width="110"></vxe-column>
+					<vxe-column field="sourceChannel" title="来源渠道" width="100"></vxe-column>
+					<vxe-column field="orderTag" title="工单标签" width="100" :visible="['ZiGong'].includes(themeConfig.appScope)"></vxe-column>
+					<vxe-column field="allDurationHour" title="办理时长(小时)" width="150" :visible="['ZiGong'].includes(themeConfig.appScope)"></vxe-column>
+					<vxe-column field="hotspotSpliceName" title="热点全称" width="150"></vxe-column>
+					<vxe-column field="hotspotName" title="热点分类" width="150"></vxe-column>
+					<vxe-column field="acceptorName" title="受理人" width="120"></vxe-column>
+					<vxe-column field="focusOnEventsName" title="重点标记" width="120" :visible="['YiBin'].includes(themeConfig.appScope)"></vxe-column>
+					<vxe-column field="sensitiveText" title="敏感词" width="150"></vxe-column>
+					<vxe-column field="content" title="受理内容" width="200" :visible="false"></vxe-column>
+					<vxe-column field="fileOpinion" title="承办意见" width="200" :visible="false"></vxe-column>
+					<vxe-column field="seatEvaluateTxt" title="坐席满意度" width="150" :visible="['ZiGong'].includes(themeConfig.appScope)"></vxe-column>
+					<vxe-column field="orgEvaluateValue" title="部门满意度" width="150" :visible="['ZiGong'].includes(themeConfig.appScope)"></vxe-column>
+					<vxe-column title="操作" fixed="right" width="140" align="center">
+						<template #default="{ row }">
+							<!-- 省工单退回条件 是省工单（工单未归档且当前节点处于热线中心办理节点时）工单状态为办理中（归档之前） 9代表有退回申请 -->
+							<el-button
+								link
+								type="danger"
+								@click="onReturn(row)"
+								title="省工单退回"
+								v-auth="'business:order:return:province'"
+								v-if="
+									row.isProvince &&
+									(row.actualHandleOrgCode === '001' || row.actualHandleOrgCode === null || row.actualHandleOrgCode === '' || row.status === 0) &&
+									row.status < 300 &&
+									row.status !== 9 &&
+									!row.provinceSendBack
+								"
+							>
+								退回</el-button
+							>
+							<order-detail :order="row" @updateList="handleQuery" />
+						</template>
+					</vxe-column>
+				</vxe-table>
+			</div>
 			<div class="flex-end mt20" style="align-items: center">
-				<!--					<el-button class="default-button" @click="onChangeTotal">展示总数</el-button>-->
 				<span v-loading="totalLoading" class="mr10">共 {{ totalCount }} 条</span>
 				<el-pagination
 					layout="sizes,prev, pager, next"
@@ -319,18 +506,6 @@
 					<el-input v-model.trim="state.queryParams.Hotspot" placeholder="热点分类名称" clearable @keyup.enter="handleQuery" />
 				</el-form-item>
 				<el-form-item label="接办部门" prop="ActualHandleOrgName">
-					<!--					<el-cascader
-											:options="state.orgsOptions"
-											filterable
-											:props="{ checkStrictly: true, value: 'id', label: 'name', emitPath: false }"
-											placeholder="请选择接办部门"
-											clearable
-											v-model="state.queryParams.OrgId"
-											ref="cascadeRef"
-											@change="handleQuery"
-											class="w100"
-										>
-										</el-cascader>-->
 					<el-input v-model="state.queryParams.ActualHandleOrgName" placeholder="请填写接办部门名称" clearable @keyup.enter="handleQuery" />
 				</el-form-item>
 				<el-form-item label="一级部门" prop="OrgLevelOneName">
@@ -503,7 +678,7 @@
 	</div>
 </template>
 <script setup lang="tsx" name="order">
-import { defineAsyncComponent, onMounted, reactive, ref, onActivated, onBeforeUnmount } from 'vue';
+import { defineAsyncComponent, onMounted, reactive, ref, onActivated, onBeforeUnmount, computed } from 'vue';
 import type { FormInstance } from 'element-plus';
 import { ElMessage, ElMessageBox } from 'element-plus';
 import { defaultTimeStartEnd, shortcuts } from '@/utils/constants';
@@ -572,8 +747,8 @@ const state = reactive<any>({
 		SortField: null,
 		SortRule: null,
 		FocusOnEvents: null, // 重点标记
-		IsSecret:null, // 是否保密
-		ReceiveProvinceNo:null, // 省编码
+		IsSecret: null, // 是否保密
+		ReceiveProvinceNo: null, // 省编码
 		fbTime: [], // 发布时间
 		hfTime: [], // 回访时间
 	},
@@ -636,7 +811,7 @@ const columns = ref<any[]>([
 		},
 		minWidth: 120,
 	},
-	{ prop: 'isSecretText', label: '是否保密'},
+	{ prop: 'isSecretText', label: '是否保密' },
 	{ prop: 'currentStepName', label: '当前节点', minWidth: 120 },
 	{ prop: 'actualStepAcceptText', label: '受理情况' },
 	{ prop: 'statusText', label: '工单状态', minWidth: 110 },
@@ -707,7 +882,7 @@ const columns1 = ref<any[]>([
 			return <span class="color-danger font-bold">{scope.row.isUrgentText}</span>;
 		},
 	},
-	{ prop: 'isSecretText', label: '是否保密'},
+	{ prop: 'isSecretText', label: '是否保密' },
 	{ prop: 'currentStepName', label: '当前节点', minWidth: 110 },
 	{ prop: 'actualStepAcceptText', label: '受理情况', minWidth: 100 },
 	{ prop: 'statusText', label: '工单状态', minWidth: 100 },
@@ -824,7 +999,7 @@ const handleCurrentChange = (val: number) => {
 	}
 };
 // 改变每页条数
-const handleSizeChange = (val:any)=>{
+const handleSizeChange = (val: any) => {
 	state.queryParams.PageSize = val;
 	// 判断当前页是否是数据的最后一页
 	if (val === Math.ceil(state.total / state.queryParams.PageSize)) {
@@ -832,7 +1007,7 @@ const handleSizeChange = (val:any)=>{
 	} else {
 		state.tableData = getNeedArr(totalTable.value, state.queryParams.PageSize)[state.queryParams.PageIndex - 1]; //当前页的表格数据
 	}
-}
+};
 const requestParams = ref<EmptyObjectType>({});
 const totalCount = ref(0);
 const totalLoading = ref(false);
@@ -902,12 +1077,12 @@ const resetQuery = (formEl: FormInstance | undefined) => {
 };
 // 设置终结件
 const onObserve = () => {
-	const ids = proTableRef.value.selectedList.map((item: any) => {
+	const ids = checkTable.value.map((item: any) => {
 		return {
 			orderId: item.id,
 		};
 	});
-	ElMessageBox.confirm(`选择的${proTableRef.value.selectedList.length}个工单添加关注吗？`, '提示', {
+	ElMessageBox.confirm(`您确定选中的工单添加关注吗？`, '提示', {
 		confirmButtonText: '确定',
 		cancelButtonText: '取消',
 		type: 'warning',
@@ -924,12 +1099,12 @@ const onObserve = () => {
 };
 // 设置终结件
 const onEnd = () => {
-	const ids = proTableRef.value.selectedList.map((item: any) => {
+	const ids = checkTable.value.map((item: any) => {
 		return {
 			orderId: item.id,
 		};
 	});
-	ElMessageBox.confirm(`选择的${proTableRef.value.selectedList.length}个工单设置终结件吗？`, '提示', {
+	ElMessageBox.confirm(`您确定选中的工单设置终结件吗？`, '提示', {
 		confirmButtonText: '确定',
 		cancelButtonText: '取消',
 		type: 'warning',
@@ -952,7 +1127,7 @@ const onCreateRepeatEvent = () => {
 // 设置撤销
 const orderRevokeRef = ref<RefType>();
 const onRevoke = () => {
-	const ids = proTableRef.value.selectedList.map((item: any) => item.id);
+	const ids = checkTable.value.map((item: any) => item.id);
 	orderRevokeRef.value.openDialog(ids);
 };
 // 工单省退回
@@ -962,8 +1137,8 @@ const onReturn = (row: any) => {
 };
 // 交办单导出
 const onJbExport = () => {
-	const ids = proTableRef.value.selectedList.map((item: any) => item.id);
-	ElMessageBox.confirm(`您确定导出选中的${proTableRef.value.selectedList.length}个工单的交办单，是否继续?`, '提示', {
+	const ids = checkTable.value.map((item: any) => item.id);
+	ElMessageBox.confirm(`您确定选中的工单导出交办单，是否继续?`, '提示', {
 		confirmButtonText: '确认',
 		cancelButtonText: '取消',
 		type: 'warning',
@@ -988,7 +1163,7 @@ const onJbExport = () => {
 // 添加催办
 const orderUrgeRef = ref<RefType>();
 const onUrge = () => {
-	const ids = proTableRef.value.selectedList.map((item: any) => item.id);
+	const ids = checkTable.value.map((item: any) => item.id);
 	orderUrgeRef.value.openDialog(ids);
 };
 // 打开内容检索
@@ -1006,9 +1181,33 @@ const onSearch = (formEl: FormInstance | undefined) => {
 		state.dialogVisible = false;
 	});
 };
+const tableRef = ref<RefType>();
+const checkTable = ref<EmptyArrayType>([]);
+const selectAllChangeEvent = ({ checked }) => {
+	if (tableRef.value) {
+		const records = tableRef.value.getCheckboxRecords();
+		checkTable.value = records;
+		console.log(checked ? '所有勾选事件' : '所有取消事件', records);
+	}
+};
+
+const selectChangeEvent = ({ checked }) => {
+	if (tableRef.value) {
+		const records = tableRef.value.getCheckboxRecords();
+		checkTable.value = records;
+		console.log(checked ? '勾选事件' : '取消事件', records);
+	}
+};
+const isChecked = computed(() => {
+	return !Boolean(checkTable.value.length);
+});
+const toolbarRef = ref<RefType>();
 onMounted(() => {
 	getBaseData();
 	queryList();
+	if (tableRef.value && toolbarRef.value) {
+		tableRef.value.connect(toolbarRef.value);
+	}
 });
 onActivated(() => {
 	mittBus.on('clearCachePage', () => {

src/views/home/components/Todo-center.vue

@@ -354,10 +354,6 @@ onMounted(() => {
 		else if (sendBackAudit.value) activeName.value = 'sendBackAudit';
 	}
 });
-const table = ref<RefType>();
-onActivated(() => {
-	table.value.scrollToRow(0);
-});
 </script>
 <style scoped lang="scss">
 .tab-container {

src/views/home/components/Todo-department.vue

@@ -364,10 +364,6 @@ onMounted(() => {
 		else if (sendBackAudit.value) activeName.value = 'sendBackAudit';
 	}
 });
-const table = ref<RefType>();
-onActivated(() => {
-	table.value.scrollToRow(0);
-});
 </script>
 <style scoped lang="scss">
 .tab-container {

src/views/todo/center/index.vue

@@ -1,53 +1,6 @@
 <template>
 	<div class="todo-center-container layout-padding">
 		<div class="layout-padding-auto layout-padding-view pd15">
-			<!--						<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"
-				@sort-change="sortChange"
-			>
-				<template #table-search>
-					<el-form :model="state.queryParams" ref="ruleFormRef" @submit.native.prevent class="mb10" inline>
-						<el-form-item label="工单标题" prop="Title">
-							<el-input v-model.trim="state.queryParams.Title" placeholder="工单标题" clearable @keyup.enter="handleQuery" class="keyword-input" />
-						</el-form-item>
-						<el-form-item label="工单编码" prop="No">
-							<el-input v-model.trim="state.queryParams.No" placeholder="工单编码" clearable @keyup.enter="handleQuery" class="keyword-input" />
-						</el-form-item>
-
-						<el-form-item label="">
-							<el-button type="primary" @click="handleQuery" :loading="state.loading"> <SvgIcon name="ele-Search" class="mr5" />查询 </el-button>
-							<el-button @click="drawer = true" class="default-button"> <SvgIcon name="ele-Search" class="mr5" />更多查询</el-button>
-						</el-form-item>
-					</el-form>
-				</template>
-				<template #tableHeader="scope">
-					<el-button type="primary" @click="onJbExport" :disabled="!scope.isSelected" :loading="state.loading" v-auth="'todo:center:jbdExport'"
-						><SvgIcon name="iconfont icon-daochu" class="mr5" />交办单导出<span v-if="proTableRef?.selectedList?.length">({{proTableRef?.selectedList?.length}})</span>
-					</el-button>
-					<el-button type="primary" @click="onAssignOrders" :loading="state.loading" v-auth="'todo:center:assignOrders'"
-					><SvgIcon name="ele-List" class="mr5" />分配工单
-					</el-button>
-				</template>
-				<template #expiredStatusText="{ row }">
-					<span :class="'overdue-status-' + row.expiredStatus" :title="row.expiredStatusText"></span>
-				</template>
-				<template #title="{ row }">
-					<order-detail :order="row" @updateList="queryList">{{ row.title }}</order-detail>
-				</template>
-				&lt;!&ndash; 表格操作 &ndash;&gt;
-				<template #operation="{ row }">
-					<el-button link type="primary" @click="onSign(row)" title="签收工单" v-if="row.canSign" v-auth="'todo:center:sign'"> 签收 </el-button>
-					<el-button link type="success" @click="onOrderEdit(row)" title="编辑工单" v-if="row.canEdit" v-auth="'todo:center:edit'"> 修改 </el-button>
-					<el-button link type="primary" @click="onMigration(row)" title="平级移动" v-auth="'todo:center:migration'"> 平级移动 </el-button>
-				</template>
-			</ProTable>-->
 			<el-form :model="state.queryParams" ref="ruleFormRef" @submit.native.prevent class="mb10" inline>
 				<el-form-item label="工单标题" prop="Title">
 					<el-input v-model.trim="state.queryParams.Title" placeholder="工单标题" clearable @keyup.enter="handleQuery" class="keyword-input" />
@@ -285,69 +238,6 @@ const state = reactive<any>({
 	stepNamesOptions: [], //步骤名称
 });
 const router = useRouter(); // 路由
-const proTableRef = ref<RefType>(); // 表格ref
-// 表格配置项
-const columns = ref<any[]>([
-	{ type: 'selection', minWidth: 40, align: 'center' },
-	{ prop: 'expiredStatusText', label: '超期状态', minWidth: 80, align: 'center' },
-	{ prop: 'no', label: '工单编码', minWidth: 140 },
-	{ prop: 'isProvinceText', label: '省/市工单', minWidth: 90 },
-	{
-		prop: 'isUrgentText',
-		label: '是否紧急',
-		render: (scope: any) => {
-			return <span class="color-danger font-bold">{scope.row.isUrgentText}</span>;
-		},
-	},
-	{ prop: 'currentStepName', label: '当前节点', minWidth: 120 },
-	{ prop: 'statusText', label: '工单状态', minWidth: 100 },
-	{ prop: 'title', label: '工单标题', minWidth: 200 },
-	{ prop: 'centerToOrgHandlerName', label: '派单员', minWidth: 120 },
-	{
-		prop: 'startTime',
-		label: '受理时间',
-		minWidth: 160,
-		render: (scope: any) => {
-			return <span>{formatDate(scope.row.startTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
-		},
-		sortable: 'custom',
-	},
-	{
-		prop: 'expiredTime',
-		label: '工单期满时间',
-		minWidth: 160,
-		render: (scope: any) => {
-			return <span>{formatDate(scope.row.expiredTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
-		},
-		sortable: 'custom',
-	},
-	{
-		prop: 'filedTime',
-		label: '办结时间',
-		minWidth: 160,
-		render: (scope: any) => {
-			return <span>{formatDate(scope.row.filedTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
-		},
-		sortable: 'custom',
-	},
-	{ prop: 'orgLevelOneName', label: '一级部门', minWidth: 140 },
-	{ prop: 'actualHandleOrgName', label: '接办部门', minWidth: 140 },
-	{ prop: 'acceptType', label: '受理类型', minWidth: 100 },
-	{ prop: 'counterSignTypeText', label: '是否会签', minWidth: 90 },
-	{ prop: 'sourceChannel', label: '来源渠道', minWidth: 100 },
-	{ prop: 'hotspotName', label: '热点分类', minWidth: 150 },
-	{
-		prop: 'sensitive',
-		label: '敏感词',
-		minWidth: 150,
-	},
-	{ prop: 'acceptorName', label: '受理人', minWidth: 120 },
-	{
-		prop: 'reTransactNum',
-		label: '重办次数',
-	},
-	{ prop: 'operation', label: '操作', fixed: 'right', minWidth: 140, align: 'center' },
-]);
 // 获取查询条件基础信息
 const getBaseData = async () => {
 	try {

src/views/todo/edit/index.vue

@@ -1,84 +1,143 @@
 <template>
 	<div class="business-order-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"
-				:pagination="false"
-				:toolButton="['refresh', 'setting', 'exportCurrent', 'exportAll']"
-				:exportMethod="exportOrder"
-				:exportParams="requestParams"
-			>
-				<template #table-search>
-					<el-form :model="state.queryParams" ref="ruleFormRef" @submit.native.prevent inline>
-						<el-row>
-							<el-col>
-								<el-form-item label="快捷查询" prop="fastSearch">
-									<el-segmented
-										:options="[
-											{
-												value: 'all',
-												label: '全部',
-											},
-											{
-												value: 'city',
-												label: '市工单',
-											},
-											{
-												value: 'province',
-												label: '省工单',
-											},
-										]"
-										v-model="fastSearch"
-										@change="fastSearchChange"
-										:disabled="state.loading"
-									/>
-								</el-form-item>
-							</el-col>
-						</el-row>
-						<el-form-item label="工单标题" prop="Keyword">
-							<el-input v-model.trim="state.queryParams.Keyword" placeholder="工单标题" clearable @keyup.enter="handleQuery" class="keyword-input" />
-						</el-form-item>
-						<el-form-item label="工单编码" prop="No">
-							<el-input v-model.trim="state.queryParams.No" placeholder="工单编码" clearable @keyup.enter="handleQuery" class="keyword-input" />
-						</el-form-item>
-						<el-form-item label="生成时间" prop="crTime">
-							<el-date-picker
-								v-model="state.queryParams.crTime"
-								type="datetimerange"
-								unlink-panels
-								range-separator="至"
-								start-placeholder="开始时间"
-								end-placeholder="结束时间"
-								:shortcuts="shortcuts"
-								@change="handleQuery"
-								value-format="YYYY-MM-DD[T]HH:mm:ss"
-								:default-time="defaultTimeStartEnd"
+			<el-form :model="state.queryParams" ref="ruleFormRef" @submit.native.prevent inline>
+				<el-row>
+					<el-col>
+						<el-form-item label="快捷查询" prop="fastSearch">
+							<el-segmented
+								:options="[
+									{
+										value: 'all',
+										label: '全部',
+									},
+									{
+										value: 'city',
+										label: '市工单',
+									},
+									{
+										value: 'province',
+										label: '省工单',
+									},
+								]"
+								v-model="fastSearch"
+								@change="fastSearchChange"
+								:disabled="state.loading"
 							/>
 						</el-form-item>
-						<el-form-item>
-							<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>
+					</el-col>
+				</el-row>
+				<el-form-item label="工单标题" prop="Keyword">
+					<el-input v-model.trim="state.queryParams.Keyword" placeholder="工单标题" clearable @keyup.enter="handleQuery" class="keyword-input" />
+				</el-form-item>
+				<el-form-item label="工单编码" prop="No">
+					<el-input v-model.trim="state.queryParams.No" placeholder="工单编码" clearable @keyup.enter="handleQuery" class="keyword-input" />
+				</el-form-item>
+				<el-form-item label="生成时间" prop="crTime">
+					<el-date-picker
+						v-model="state.queryParams.crTime"
+						type="datetimerange"
+						unlink-panels
+						range-separator="至"
+						start-placeholder="开始时间"
+						end-placeholder="结束时间"
+						:shortcuts="shortcuts"
+						@change="handleQuery"
+						value-format="YYYY-MM-DD[T]HH:mm:ss"
+						:default-time="defaultTimeStartEnd"
+					/>
+				</el-form-item>
+				<el-form-item>
+					<el-button type="primary" @click="handleQuery" :loading="state.loading"> <SvgIcon name="ele-Search" class="mr5" />查询 </el-button>
+					<el-button @click="drawer = true" class="default-button"> <SvgIcon name="ele-Search" class="mr5" />更多查询</el-button>
+				</el-form-item>
+			</el-form>
+			<vxe-toolbar
+				ref="toolbarRef"
+				:loading="state.loading"
+				custom
+				:refresh="{
+					queryMethod: handleQuery,
+				}"
+				:tools="[{ toolRender: { name: 'exportCurrent' } }, { toolRender: { name: 'exportAll' } }]"
+			>
+				<template #buttons>
 					<el-button type="primary" @click="onRecord" :loading="state.loading"> <SvgIcon name="ele-List" class="mr5" />修改记录 </el-button>
 				</template>
-				<template #expiredStatusText="{ row }">
-					<span :class="'overdue-status-' + row.expiredStatus" :title="row.expiredStatusText"></span>
-				</template>
-				<template #title="{ row }">
-					<order-detail :order="row" @updateList="queryList(true)">{{ row.title }}</order-detail>
-				</template>
-				<template #operation="{ row }">
-					<el-button link type="primary" @click="onOrderEdit(row)" title="编辑工单" v-auth="'todo:edit:edit'"> 工单修改 </el-button>
-				</template>
-			</ProTable>
-			<div class="flex-end mt20" style="align-items: center">
+			</vxe-toolbar>
+			<div style="overflow: hidden; width: 100%; height: 100%; flex: 1">
+				<vxe-table
+					border
+					:loading="state.loading"
+					:data="state.tableData"
+					:column-config="{ resizable: true }"
+					:row-config="{ isCurrent: true, isHover: true, height: 30 }"
+					ref="tableRef"
+					height="auto"
+					auto-resize
+					show-overflow
+					:print-config="{}"
+					:scrollY="{ enabled: true, gt: 0 }"
+					id="todoSeats"
+					:custom-config="{ storage: true }"
+					:params="{ exportMethod: exportOrder, exportParams: requestParams }"
+					showHeaderOverflow
+				>
+					<vxe-column field="expiredStatusText" title="超期状态" width="90" align="center">
+						<template #default="{ row }">
+							<span :class="'overdue-status-' + row.expiredStatus" :title="row.expiredStatusText"></span>
+						</template>
+					</vxe-column>
+					<vxe-column field="statusText" title="工单状态" width="100"></vxe-column>
+					<vxe-column field="sourceChannel" title="来源渠道" width="100"></vxe-column>
+					<vxe-column field="currentStepName" title="当前节点" width="120"></vxe-column>
+					<vxe-column field="reTransactNum" title="重办次数" width="90"></vxe-column>
+					<vxe-column field="isUrgentText" title="是否紧急" width="90">
+						<template #default="{ row }">
+							<span class="color-danger font-bold">{{ row.isUrgentText }}</span>
+						</template>
+					</vxe-column>
+					<vxe-column field="no" title="工单编码" width="140"></vxe-column>
+					<vxe-column field="isProvinceText" title="省/市工单" width="90"></vxe-column>
+					<vxe-column field="startTime" title="受理时间" width="160">
+						<template #default="{ row }">
+							{{ formatDate(row.startTime, '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="contact" title="联系电话" width="140"></vxe-column>
+					<vxe-column field="fromPhone" title="来电号码" width="140"></vxe-column>
+					<vxe-column field="expiredTime" title="工单期满时间" width="160">
+						<template #default="{ row }">
+							{{ formatDate(row.expiredTime, 'YYYY-mm-dd HH:MM:SS') }}
+						</template>
+					</vxe-column>
+					<vxe-column field="actualHandleOrgName" title="接办部门" width="140"></vxe-column>
+					<vxe-column field="actualHandleTime" title="接办时间" width="160">
+						<template #default="{ row }">
+							{{ formatDate(row.actualHandleTime, 'YYYY-mm-dd HH:MM:SS') }}
+						</template>
+					</vxe-column>
+					<vxe-column field="filedTime" title="办结时间" width="160">
+						<template #default="{ row }">
+							{{ formatDate(row.filedTime, 'YYYY-mm-dd HH:MM:SS') }}
+						</template>
+					</vxe-column>
+					<vxe-column field="acceptType" title="受理类型" width="100"></vxe-column>
+					<vxe-column field="hotspotName" title="热点分类" width="150"></vxe-column>
+					<vxe-column field="acceptorName" title="受理人" width="120"></vxe-column>
+					<vxe-column title="操作" fixed="right" width="90" align="center">
+						<template #default="{ row }">
+							<el-button link type="primary" @click="onOrderEdit(row)" title="编辑工单" v-auth="'todo:edit:edit'"> 工单修改 </el-button>
+						</template>
+					</vxe-column>
+				</vxe-table>
+			</div>
+			<div class="flex-end" style="align-items: center">
 				<span v-loading="totalLoading" class="mr10">共 {{ totalCount }} 条</span>
 				<el-pagination
 					layout="prev, pager, next"
@@ -86,7 +145,7 @@
 					@current-change="handleCurrentChange"
 					:page-size="state.queryParams.PageSize"
 					:current-page="state.queryParams.PageIndex"
-					:pager-count="5"
+					:disabled="state.loading"
 				/>
 			</div>
 		</div>
@@ -225,7 +284,7 @@
 			</template>
 		</el-drawer>
 		<!--	修改工单	-->
-		<EditOrder ref="editOrderRef" @updateList="handleQuery"/>
+		<EditOrder ref="editOrderRef" @updateList="handleQuery" />
 	</div>
 </template>
 <script setup lang="tsx" name="todoEdit">
@@ -315,64 +374,6 @@ const fastSearchChange = (val: string) => {
 	}
 	handleQuery();
 };
-const proTableRef = ref<RefType>(); // 表格ref
-// 表格配置项
-const columns = ref<any[]>([
-	{ prop: 'expiredStatusText', label: '超期状态', align: 'center', minWidth: 80 },
-	{ prop: 'statusText', label: '工单状态', minWidth: 100 },
-	{ prop: 'sourceChannel', label: '来源渠道', minWidth: 100 },
-	{ prop: 'currentStepName', label: '当前节点', minWidth: 120 },
-	{ prop: 'reTransactNum', label: '重办次数' },
-	{
-		prop: 'isUrgentText',
-		label: '是否紧急',
-		render: (scope) => {
-			return <span class="color-danger font-bold">{scope.row.isUrgentText}</span>;
-		},
-	},
-	{ prop: 'no', label: '工单编码', minWidth: 140 },
-	{ prop: 'isProvinceText', label: '省/市工单', minWidth: 90 },
-	{
-		prop: 'startTime',
-		label: '受理时间',
-		minWidth: 160,
-		render: (scope) => {
-			return <span>{formatDate(scope.row.startTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
-		},
-	},
-	{ prop: 'title', label: '工单标题', minWidth: 200 },
-	{ prop: 'contact', label: '联系电话', minWidth: 140 },
-	{ prop: 'fromPhone', label: '来电号码', minWidth: 140 },
-	{
-		prop: 'expiredTime',
-		label: '工单期满时间',
-		minWidth: 160,
-		render: (scope) => {
-			return <span>{formatDate(scope.row.expiredTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
-		},
-	},
-	{ prop: 'actualHandleOrgName', label: '接办部门', minWidth: 140 },
-	{
-		prop: 'actualHandleTime',
-		label: '接办时间',
-		minWidth: 160,
-		render: (scope) => {
-			return <span>{formatDate(scope.row.actualHandleTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
-		},
-	},
-	{
-		prop: 'filedTime',
-		label: '办结时间',
-		minWidth: 160,
-		render: (scope) => {
-			return <span>{formatDate(scope.row.filedTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
-		},
-	},
-	{ prop: 'acceptType', label: '受理类型', minWidth: 100 },
-	{ prop: 'hotspotName', label: '热点分类', minWidth: 150 },
-	{ prop: 'acceptorName', label: '受理人', minWidth: 120 },
-	{ prop: 'operation', label: '操作', fixed: 'right', width: 90, align: 'center' },
-]);
 // 获取查询条件基础信息
 const getBaseData = async () => {
 	try {
@@ -481,17 +482,22 @@ const resetQuery = (formEl: FormInstance | undefined) => {
 const router = useRouter();
 const onRecord = () => {
 	router.push({
-		path:'/todo/edit/record'
-	})
+		path: '/todo/edit/record',
+	});
 };
 // 编辑工单
 const editOrderRef = ref();
 const onOrderEdit = (row: any) => {
 	editOrderRef.value.openDrawer(row.id);
 };
+const toolbarRef = ref<RefType>();
+const tableRef = ref<RefType>();
 onMounted(() => {
 	getBaseData();
 	queryList();
+	if (tableRef.value && toolbarRef.value) {
+		tableRef.value.connect(toolbarRef.value);
+	}
 });
 onActivated(() => {
 	mittBus.on('clearCachePage', () => {

src/views/todo/edit/record.vue

@@ -1,43 +1,77 @@
 <template>
 	<div class="business-publish-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="Keyword">
+					<el-input v-model="state.queryParams.Keyword" 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"
+				custom
+				:refresh="{
+					queryMethod: handleQuery,
+				}"
+			>
+			</vxe-toolbar>
+			<div style="overflow: hidden; width: 100%; height: 100%; flex: 1">
+				<vxe-table
+					border
+					:loading="state.loading"
+					:data="state.tableData"
+					:column-config="{ resizable: true }"
+					:row-config="{ isCurrent: true, isHover: true, height: 30 }"
+					ref="tableRef"
+					height="auto"
+					auto-resize
+					show-overflow
+					:print-config="{}"
+					:scrollY="{ enabled: true, gt: 0 }"
+					id="todoCenterRecord"
+					:custom-config="{ storage: true }"
+					showHeaderOverflow
+				>
+					<vxe-column field="expiredStatusText" title="超期状态" width="90" align="center">
+						<template #default="{ row }">
+							<span :class="'overdue-status-' + row.expiredStatus" :title="row.expiredStatusText"></span>
+						</template>
+					</vxe-column>
+					<vxe-column field="statusText" title="工单状态" width="100"></vxe-column>
+					<vxe-column field="currentStepName" title="当前节点" min-width="100"></vxe-column>
+					<vxe-column field="no" title="工单编码" min-width="140"></vxe-column>
+					<vxe-column field="title" title="工单标题" min-width="200">
+						<template #default="{ row }">
+							<order-detail :order="row" @updateList="queryList">{{ row.title }}</order-detail>
+						</template>
+					</vxe-column>
+					<vxe-column field="auditUserName" title="修改人" width="120"></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 title="操作" fixed="right" width="90" align="center">
+						<template #default="{ row }">
+							<el-button link type="primary" @click="onDetail(row)" title="查看修改明细"> 查看明细 </el-button>
+						</template>
+					</vxe-column>
+				</vxe-table>
+			</div>
+			<vxe-pager
+				v-model:currentPage="state.queryParams.PageIndex"
+				v-model:pageSize="state.queryParams.PageSize"
 				:total="state.total"
-				v-model:page-index="state.queryParams.PageIndex"
-				v-model:page-size="state.queryParams.PageSize"
-				row-key="copyId"
+				@page-change="queryList"
+				:layouts="['PrevPage', 'Number', 'NextPage', 'Sizes', 'FullJump', 'Total']"
 			>
-				<template #table-search>
-					<el-form :model="state.queryParams" ref="ruleFormRef" @submit.native.prevent inline>
-						<el-form-item label="工单编码" prop="Keyword">
-							<el-input v-model="state.queryParams.Keyword" placeholder="工单编码" clearable @keyup.enter="handleQuery" class="keyword-input" />
-						</el-form-item>
-						<el-form-item>
-							<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>
-				<template #expiredStatusText="{ row }">
-					<span :class="'overdue-status-' + row.expiredStatus" :title="row.expiredStatusText"></span>
-				</template>
-				<!-- 表格操作 -->
-				<template #operation="{ row }">
-					<el-button link type="primary" @click="onDetail(row)"  title="查看修改明细">
-						查看明细
-					</el-button>
-				</template>
-			</ProTable>
+			</vxe-pager>
 		</div>
 		<edit-record ref="orderPublishEditRef" />
 	</div>
@@ -53,26 +87,6 @@ const EditRecord = defineAsyncComponent(() => import('@/views/todo/edit/componen
 const OrderDetail = defineAsyncComponent(() => import('@/components/OrderDetail/index.vue')); // 工单详情
 // 定义变量内容
 const ruleFormRef = ref<RefType>(); // 表单ref
-const proTableRef = ref<RefType>(); // 表格ref
-// 表格配置项
-const columns = ref<any[]>([
-	{ prop: 'expiredStatusText', label: '超期状态', align: 'center', minWidth: 80 },
-	{ prop: 'statusText', label: '工单状态', minWidth: 100 },
-	{ prop: 'sourceChannel', label: '来源渠道', minWidth: 100 },
-	{ prop: 'currentStepName', label: '当前节点', minWidth: 120 },
-	{ prop: 'no', label: '工单编码', minWidth: 140 },
-	{ prop: 'title', label: '工单标题', minWidth: 200 },
-	{ prop: 'auditUserName', label: '修改人', minWidth: 90 },
-	{
-		prop: 'creationTime',
-		label: '修改时间',
-		minWidth: 160,
-		render: (scope) => {
-			return <span>{formatDate(scope.row.creationTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
-		},
-	},
-	{ prop: 'operation', label: '操作', fixed: 'right', minWidth: 90, align: 'center' },
-]);
 const state = reactive({
 	queryParams: {
 		// 查询条件
@@ -115,7 +129,12 @@ const orderPublishEditRef = ref<RefType>();
 const onDetail = (row: any) => {
 	orderPublishEditRef.value.openDrawer(row.copyId);
 };
+const toolbarRef = ref<RefType>();
+const tableRef = ref<RefType>();
 onMounted(() => {
 	queryList();
+	if (tableRef.value && toolbarRef.value) {
+		tableRef.value.connect(toolbarRef.value);
+	}
 });
 </script>

src/views/todo/order/index.vue

@@ -83,6 +83,7 @@
 					:scrollY="{ enabled: true, gt: 0 }"
 					id="todoOrder"
 					:custom-config="{ storage: true }"
+					showHeaderOverflow
 				>
 					<vxe-column type="checkbox" width="50" align="center"></vxe-column>
 					<vxe-column field="expiredStatusText" title="超期状态" width="90" align="center">
@@ -137,121 +138,6 @@
 				:layouts="['PrevPage', 'Number', 'NextPage', 'Sizes', 'FullJump', 'Total']"
 			>
 			</vxe-pager>
-			<!--			<ProTable
-				ref="proTableRef"
-				:columns="columnsTodo"
-				: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"
-				v-if="state.queryParams.IsHandled === 'false'"
-				@sort-change="sortChange"
-			>
-				<template #table-search>
-					<el-form :model="state.queryParams" ref="ruleFormRef" @submit.native.prevent inline>
-						<el-form-item label="快捷查询" prop="QueryType" v-if="['ZiGong'].includes(themeConfig.appScope)" v-auth="'todo:seats:fastSearch'">
-							<el-segmented
-								:options="[
-									{
-										value: 1,
-										label: '中心办理件',
-									},
-									{
-										value: 2,
-										label: '转单件',
-									},
-									{
-										value: 3,
-										label: '二次派发',
-									},
-								]"
-								v-model="state.queryParams.QueryType"
-								@change="handleQuery"
-								:disabled="state.loading"
-							/>
-						</el-form-item>
-						<el-form-item label="工单标题" prop="Keyword">
-							<el-input v-model.trim="state.queryParams.Keyword" placeholder="工单标题" clearable @keyup.enter="handleQuery" class="keyword-input" />
-						</el-form-item>
-						<el-form-item label="工单编码" prop="No">
-							<el-input v-model.trim="state.queryParams.No" placeholder="工单编码" clearable @keyup.enter="handleQuery" class="keyword-input" />
-						</el-form-item>
-						<el-form-item label="">
-							<el-button type="primary" @click="handleQuery" :loading="state.loading"> <SvgIcon name="ele-Search" class="mr5" />查询 </el-button>
-							<el-button @click="drawer = true" class="default-button"> <SvgIcon name="ele-Search" class="mr5" />更多查询</el-button>
-						</el-form-item>
-					</el-form>
-				</template>
-				<template #tableHeader="scope">
-					<el-button type="primary" @click="onJbExport" :disabled="!scope.isSelected" :loading="state.loading" v-auth="'todo:order:jbdExport'"
-						><SvgIcon name="iconfont icon-daochu" class="mr5" />交办单导出<span v-if="proTableRef?.selectedList?.length"
-							>({{ proTableRef?.selectedList?.length }})</span
-						>
-					</el-button>
-					<el-button
-						type="primary"
-						@click="onToEnd"
-						:disabled="!scope.isSelected"
-						:loading="state.loading"
-						v-auth-all="['todo:seats:fastSearch', 'todo:order:toEnd:multiple']"
-						><SvgIcon name="ele-List" class="mr5" />批量归档<span v-if="proTableRef?.selectedList?.length"
-							>({{ proTableRef?.selectedList?.length }})</span
-						>
-					</el-button>
-					<el-button type="primary" @click="onAssignOrders" :loading="state.loading" v-auth="'todo:order:assignOrders'"
-						><SvgIcon name="ele-List" class="mr5" />分配工单
-					</el-button>
-				</template>
-				<template #expiredStatusText="{ row }">
-					<span :class="'overdue-status-' + row.expiredStatus" :title="row.expiredStatusText"></span>
-				</template>
-				<template #title="{ row }">
-					<order-detail :order="row" @updateList="queryList">{{ row.title }}</order-detail>
-				</template>
-			</ProTable>
-			<ProTable
-				ref="proTableRef"
-				:columns="columnsDone"
-				: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"
-				v-else
-				@sort-change="sortChange"
-			>
-				<template #table-search>
-					<el-form :model="state.queryParams" ref="ruleFormRef" @submit.native.prevent inline>
-						<el-form-item label="工单标题" prop="Keyword">
-							<el-input v-model.trim="state.queryParams.Keyword" placeholder="工单标题" clearable @keyup.enter="handleQuery" class="keyword-input" />
-						</el-form-item>
-						<el-form-item label="工单编码" prop="No">
-							<el-input v-model.trim="state.queryParams.No" placeholder="工单编码" clearable @keyup.enter="handleQuery" class="keyword-input" />
-						</el-form-item>
-						<el-form-item label="">
-							<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" v-auth="'todo:seats:jbdExport'"
-						><SvgIcon name="iconfont icon-daochu" class="mr5" />交办单导出
-					</el-button>
-					<el-button type="primary" @click="onAssignOrders" :loading="state.loading" v-auth="'todo:order:assignOrders'"
-						><SvgIcon name="ele-List" class="mr5" />分配工单
-					</el-button>
-				</template>
-				<template #expiredStatusText="{ row }">
-					<span :class="'overdue-status-' + row.expiredStatus" :title="row.expiredStatusText"></span>
-				</template>
-				<template #title="{ row }">
-					<order-detail :order="row" @updateList="queryList">{{ row.title }}</order-detail>
-				</template>
-			</ProTable>-->
 		</div>
 		<!--	更多查询	-->
 		<el-drawer v-model="drawer" title="更多查询" size="500px">
@@ -357,116 +243,6 @@ const state = reactive<any>({
 	total: 0, // 总数
 	areaOptions: [],
 });
-const proTableRef = ref<RefType>(); // 表格ref
-const columns = ref<any[]>([]);
-// 表格配置项
-const columnsTodo = ref<any[]>([
-	{ type: 'selection', minWidth: 40, align: 'center' },
-	{ prop: 'expiredStatusText', label: '超期状态', align: 'center', minWidth: 80 },
-	{ prop: 'no', label: '工单编码', minWidth: 140 },
-	{ prop: 'isProvinceText', label: '省/市工单', minWidth: 90 },
-	{
-		prop: 'isUrgentText',
-		label: '是否紧急',
-		render: (scope: any) => {
-			return <span class="color-danger font-bold">{scope.row.isUrgentText}</span>;
-		},
-	},
-	{ prop: 'currentStepName', label: '当前节点', minWidth: 120 },
-	{ prop: 'statusText', label: '工单状态', minWidth: 100 },
-	{ prop: 'title', label: '工单标题', minWidth: 200 },
-	{ prop: 'counterSignTypeText', label: '是否会签', minWidth: 90 },
-	{
-		prop: 'creationTime',
-		label: '生成时间',
-		minWidth: 160,
-		render: (scope: any) => {
-			return <span>{formatDate(scope.row.creationTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
-		},
-		sortable: 'custom',
-	},
-	{
-		prop: 'startTime',
-		label: '受理时间',
-		minWidth: 160,
-		render: (scope: any) => {
-			return <span>{formatDate(scope.row.startTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
-		},
-		sortable: 'custom',
-	},
-	{
-		prop: 'expiredTime',
-		label: '工单期满时间',
-		minWidth: 160,
-		render: (scope: any) => {
-			return <span>{formatDate(scope.row.expiredTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
-		},
-		sortable: 'custom',
-	},
-	{ prop: 'acceptType', label: '受理类型', minWidth: 100 },
-	{ prop: 'sourceChannel', label: '来源渠道', minWidth: 100 },
-	{ prop: 'hotspotName', label: '热点分类', minWidth: 150 },
-	{ prop: 'acceptorName', label: '受理人', minWidth: 120 },
-	{
-		prop: 'reTransactNum',
-		label: '重办次数',
-	},
-]);
-const columnsDone = ref<any[]>([
-	// 已办
-	{ type: 'selection', minWidth: 40, align: 'center' },
-	{ prop: 'expiredStatusText', label: '超期状态', align: 'center', minWidth: 80 },
-	{ prop: 'no', label: '工单编码', minWidth: 140 },
-	{ prop: 'isProvinceText', label: '省/市工单', minWidth: 90 },
-	{
-		prop: 'isUrgentText',
-		label: '是否紧急',
-		render: (scope: any) => {
-			return <span class="color-danger font-bold">{scope.row.isUrgentText}</span>;
-		},
-	},
-	{ prop: 'currentStepName', label: '当前节点', minWidth: 120 },
-	{ prop: 'statusText', label: '工单状态', minWidth: 100 },
-	{ prop: 'title', label: '工单标题', minWidth: 200 },
-	{ prop: 'counterSignTypeText', label: '是否会签', minWidth: 90 },
-	{
-		prop: 'creationTime',
-		label: '生成时间',
-		minWidth: 160,
-		render: (scope: any) => {
-			return <span>{formatDate(scope.row.creationTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
-		},
-		sortable: 'custom',
-	},
-	{
-		prop: 'startTime',
-		label: '受理时间',
-		minWidth: 160,
-		render: (scope: any) => {
-			return <span>{formatDate(scope.row.startTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
-		},
-		sortable: 'custom',
-	},
-	{
-		prop: 'expiredTime',
-		label: '工单期满时间',
-		minWidth: 160,
-		render: (scope: any) => {
-			return <span>{formatDate(scope.row.expiredTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
-		},
-		sortable: 'custom',
-	},
-	{ prop: 'orgLevelOneName', label: '一级部门', minWidth: 140 },
-	{ prop: 'actualHandleOrgName', label: '接办部门', minWidth: 140 },
-	{ prop: 'acceptType', label: '受理类型', minWidth: 100 },
-	{ prop: 'sourceChannel', label: '来源渠道', minWidth: 100 },
-	{ prop: 'hotspotName', label: '热点分类', minWidth: 150 },
-	{ prop: 'acceptorName', label: '受理人', minWidth: 120 },
-	{
-		prop: 'reTransactNum',
-		label: '重办次数',
-	},
-]);
 // 排序
 const sortChange = (val: any) => {
 	state.queryParams.SortField = val.order ? val.field : null;
@@ -489,7 +265,6 @@ const queryList = async () => {
 		state.queryParams.QueryType = state.queryParams.QueryType ?? 1;
 	} else state.queryParams.QueryType = null;
 	try {
-		columns.value = state.queryParams.IsHandled === 'true' ? columnsDone.value : columnsTodo.value;
 		requestParams.value = Other.deepClone(state.queryParams);
 		requestParams.value.StartTime = state.queryParams.scTime === null ? null : state.queryParams.scTime[0];
 		requestParams.value.EndTime = state.queryParams.scTime === null ? null : state.queryParams.scTime[1];

src/views/todo/seats/index.vue

@@ -6,54 +6,107 @@
 				<el-tab-pane name="1" label="交办件" :disabled="state.loading"></el-tab-pane>
 				<el-tab-pane name="2" label="办结件" :disabled="state.loading"></el-tab-pane>
 			</el-tabs>
-			<ProTable
-				ref="proTableRef"
-				:columns="columnsTodo"
-				:data="state.tableData"
-				@updateTable="queryList"
+			<el-form :model="state.queryParams" ref="ruleFormRef" @submit.native.prevent inline>
+				<el-form-item label="工单标题" prop="Keyword">
+					<el-input v-model.trim="state.queryParams.Keyword" placeholder="工单标题" clearable @keyup.enter="handleQuery" class="keyword-input" />
+				</el-form-item>
+				<el-form-item label="工单编码" prop="No">
+					<el-input v-model.trim="state.queryParams.No" placeholder="工单编码" clearable @keyup.enter="handleQuery" class="keyword-input" />
+				</el-form-item>
+				<el-form-item label="">
+					<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"
-				:pagination="false"
-				@sort-change="sortChange"
+				custom
+				:refresh="{
+					queryMethod: handleQuery,
+				}"
 			>
-				<template #table-search>
-					<el-form :model="state.queryParams" ref="ruleFormRef" @submit.native.prevent inline>
-						<el-form-item label="工单标题" prop="Keyword">
-							<el-input v-model.trim="state.queryParams.Keyword" placeholder="工单标题" clearable @keyup.enter="handleQuery" class="keyword-input" />
-						</el-form-item>
-						<el-form-item label="工单编码" prop="No">
-							<el-input v-model.trim="state.queryParams.No" placeholder="工单编码" clearable @keyup.enter="handleQuery" class="keyword-input" />
-						</el-form-item>
-						<el-form-item label="">
-							<el-button type="primary" @click="handleQuery" :loading="state.loading"> <SvgIcon name="ele-Search" class="mr5" />查询 </el-button>
-							<el-button @click="drawer = true" class="default-button"> <SvgIcon name="ele-Search" class="mr5" />更多查询</el-button>
-						</el-form-item>
-					</el-form>
-				</template>
-				<template #tableHeader="scope">
+				<template #buttons>
 					<el-button type="primary" @click="onAddOrder" v-auth="'todo:seats:add'" :loading="state.loading">
 						<SvgIcon name="ele-Plus" class="mr5" />新建工单
 					</el-button>
-					<el-button type="primary" @click="onJbExport" :disabled="!scope.isSelected" :loading="state.loading" v-auth="'todo:seats:jbdExport'"
-						><SvgIcon name="iconfont icon-daochu" class="mr5" />交办单导出<span v-if="proTableRef?.selectedList?.length"
-							>({{ proTableRef?.selectedList?.length }})</span
-						>
+					<el-button type="primary" @click="onJbExport" :disabled="isChecked" :loading="state.loading" v-auth="'todo:seats:jbdExport'"
+					><SvgIcon name="iconfont icon-daochu" class="mr5" />交办单导出
 					</el-button>
 				</template>
-				<template #expiredStatusText="{ row }">
-					<span :class="'overdue-status-' + row.expiredStatus" :title="row.expiredStatusText"></span>
-				</template>
-				<template #title="{ row }">
-					<order-detail :order="row" @updateList="handleQuery">{{ row.title }}</order-detail>
-				</template>
-				<template #operation="{ row }">
-					<el-button link type="success" @click="onOrderEdit(row)" title="编辑工单" v-if="row.canEdit" v-auth="'todo:seats:edit'"> 修改 </el-button>
-					<el-button link type="primary" @click="onSign(row)" title="签收工单" v-if="row.canSign" v-auth="'todo:seats:sign'"> 签收 </el-button>
-				</template>
-			</ProTable>
-			<div class="flex-end mt20" style="align-items: center">
+				<template #tools> </template>
+			</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 }"
+					ref="tableRef"
+					@sort-change="sortChange"
+					@checkbox-all="selectAllChangeEvent"
+					@checkbox-change="selectChangeEvent"
+					height="auto"
+					auto-resize
+					show-overflow
+					:print-config="{}"
+					:scrollY="{ enabled: true, gt: 0 }"
+					id="todoSeats"
+					:custom-config="{ storage: true }"
+					showHeaderOverflow
+				>
+					<vxe-column type="checkbox" width="50" align="center"></vxe-column>
+					<vxe-column field="expiredStatusText" title="超期状态" width="90" align="center">
+						<template #default="{ row }">
+							<span :class="'overdue-status-' + row.expiredStatus" :title="row.expiredStatusText"></span>
+						</template>
+					</vxe-column>
+					<vxe-column field="no" title="工单编码" width="140"></vxe-column>
+					<vxe-column field="isProvinceText" title="省/市工单" width="90"></vxe-column>
+					<vxe-column field="isUrgentText" title="是否紧急" width="90">
+						<template #default="{ row }">
+							<span class="color-danger font-bold">{{ row.isUrgentText }}</span>
+						</template>
+					</vxe-column>
+					<vxe-column field="currentStepName" title="当前节点" width="120"></vxe-column>
+					<vxe-column field="statusText" title="工单状态" width="100"></vxe-column>
+					<vxe-column field="title" title="工单标题" width="200">
+						<template #default="{ row }">
+							<order-detail :order="row" @updateList="queryList">{{ row.title }}</order-detail>
+						</template>
+					</vxe-column>
+					<vxe-column field="counterSignTypeText" title="是否会签" width="90"></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="startTime" title="受理时间" sortable width="160">
+						<template #default="{ row }">
+							{{ formatDate(row.startTime, 'YYYY-mm-dd HH:MM:SS') }}
+						</template>
+					</vxe-column>
+					<vxe-column field="expiredTime" title="工单期满时间" sortable width="160">
+						<template #default="{ row }">
+							{{ formatDate(row.expiredTime, 'YYYY-mm-dd HH:MM:SS') }}
+						</template>
+					</vxe-column>
+					<vxe-column field="acceptType" title="受理类型" width="100"></vxe-column>
+					<vxe-column field="sourceChannel" title="来源渠道" width="100"></vxe-column>
+					<vxe-column field="hotspotName" title="热点分类" width="150"></vxe-column>
+					<vxe-column field="acceptorName" title="受理人" width="120"></vxe-column>
+					<vxe-column field="reTransactNum" title="重办次数" width="90"></vxe-column>
+					<vxe-column title="操作" fixed="right" width="80" align="center">
+						<template #default="{ row }">
+							<el-button link type="success" @click="onOrderEdit(row)" title="编辑工单" v-if="row.canEdit" v-auth="'todo:seats:edit'"> 修改 </el-button>
+							<el-button link type="primary" @click="onSign(row)" title="签收工单" v-if="row.canSign" v-auth="'todo:seats:sign'"> 签收 </el-button>
+						</template>
+					</vxe-column>
+				</vxe-table>
+			</div>
+			<div class="flex-end" style="align-items: center">
 				<span v-loading="totalLoading" class="mr10">共 {{ totalCount }} 条</span>
 				<el-pagination
 					layout="prev, pager, next"
@@ -61,6 +114,7 @@
 					@current-change="handleCurrentChange"
 					:page-size="state.queryParams.PageSize"
 					:current-page="state.queryParams.PageIndex"
+					:disabled="state.loading"
 				/>
 			</div>
 		</div>
@@ -126,13 +180,13 @@
 	</div>
 </template>
 <script setup lang="tsx" name="todoSeats">
-import { defineAsyncComponent, onMounted, reactive, ref } from 'vue';
+import { computed, defineAsyncComponent, onMounted, reactive, ref } from 'vue';
 import { ElMessage, ElMessageBox, FormInstance } from 'element-plus';
 import { formatDate } from '@/utils/formatTime';
 import { useRouter } from 'vue-router';
 import { seatsListTodo, orderSign, orderListTodoCount } from '@/api/todo/order';
 import { downloadZip, getNeedArr } from '@/utils/tools';
-import { exportJbOrder, orderListCount, orderListFixed } from '@/api/business/order';
+import { exportJbOrder } from '@/api/business/order';
 import { defaultTimeStartEnd, shortcuts } from '@/utils/constants';
 import Other from '@/utils/other';
 import { treeArea } from '@/api/auxiliary/area';
@@ -167,66 +221,11 @@ const state = reactive<any>({
 	orderStatusOptions: [], // 工单状态
 });
 const router = useRouter(); // 路由
-const proTableRef = ref<RefType>(); // 表格ref
-// 表格配置项
-const columnsTodo = ref<any[]>([
-	{ type: 'selection', width: 40, align: 'center' },
-	{ prop: 'expiredStatusText', label: '超期状态', align: 'center', minWidth: 80 },
-	{ prop: 'no', label: '工单编码', minWidth: 140 },
-	{ prop: 'isProvinceText', label: '省/市工单', minWidth: 90 },
-	{
-		prop: 'isUrgentText',
-		label: '是否紧急',
-		render: (scope: any) => {
-			return <span class="color-danger font-bold">{scope.row.isUrgentText}</span>;
-		},
-	},
-	{ prop: 'currentStepName', label: '当前节点', minWidth: 120 },
-	{ prop: 'statusText', label: '工单状态', minWidth: 100 },
-	{ prop: 'title', label: '工单标题', minWidth: 200 },
-	{ prop: 'counterSignTypeText', label: '是否会签', minWidth: 90 },
-	{
-		prop: 'creationTime',
-		label: '生成时间',
-		minWidth: 160,
-		render: (scope: any) => {
-			return <span>{formatDate(scope.row.creationTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
-		},
-		sortable: 'custom',
-	},
-	{
-		prop: 'startTime',
-		label: '受理时间',
-		minWidth: 160,
-		render: (scope: any) => {
-			return <span>{formatDate(scope.row.startTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
-		},
-		sortable: 'custom',
-	},
-	{
-		prop: 'expiredTime',
-		label: '工单期满时间',
-		minWidth: 160,
-		render: (scope: any) => {
-			return <span>{formatDate(scope.row.expiredTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
-		},
-		sortable: 'custom',
-	},
-	{ prop: 'acceptType', label: '受理类型', minWidth: 100 },
-	{ prop: 'sourceChannel', label: '来源渠道', minWidth: 100 },
-	{ prop: 'hotspotName', label: '热点分类', minWidth: 150 },
-	{ prop: 'acceptorName', label: '受理人', minWidth: 120 },
-	{
-		prop: 'reTransactNum',
-		label: '重办次数',
-	},
-	{ prop: 'operation', label: '操作', fixed: 'right', minWidth: 80, align: 'center' },
-]);
 // 排序
 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;
+	state.queryParams.SortRule = val.order ? (val.order == 'desc' ? 1 : 0) : null;
 	handleQuery();
 };
 // 修改查询参数
@@ -359,8 +358,8 @@ const onSign = (row: any) => {
 };
 // 交办单导出
 const onJbExport = () => {
-	const ids = proTableRef.value.selectedList.map((item: any) => item.id);
-	ElMessageBox.confirm(`您确定导出选中的${proTableRef.value.selectedList.length}个工单的交办单，是否继续?`, '提示', {
+	const ids = checkTable.value.map((item: any) => item.id);
+	ElMessageBox.confirm(`您确定导出选中的工单交办单，是否继续?`, '提示', {
 		confirmButtonText: '确认',
 		cancelButtonText: '取消',
 		type: 'warning',
@@ -398,9 +397,33 @@ const getBaseData = async () => {
 		console.log(error);
 	}
 };
+const tableRef = ref<RefType>();
+const checkTable = ref<EmptyArrayType>([]);
+const selectAllChangeEvent = ({ checked }) => {
+	if (tableRef.value) {
+		const records = tableRef.value.getCheckboxRecords();
+		checkTable.value = records;
+		console.log(checked ? '所有勾选事件' : '所有取消事件', records);
+	}
+};
+
+const selectChangeEvent = ({ checked }) => {
+	if (tableRef.value) {
+		const records = tableRef.value.getCheckboxRecords();
+		checkTable.value = records;
+		console.log(checked ? '勾选事件' : '取消事件', records);
+	}
+};
+const isChecked = computed(() => {
+	return !Boolean(checkTable.value.length);
+});
+const toolbarRef = ref<RefType>();
 onMounted(() => {
 	getBaseData();
 	queryList();
+	if (tableRef.value && toolbarRef.value) {
+		tableRef.value.connect(toolbarRef.value);
+	}
 });
 </script>
 <style scoped lang="scss">