reactor:终止管理表格重构完成;

src/views/business/end/index.vue

@@ -1,104 +1,119 @@
 <template>
 	<div class="business-end-container layout-padding">
-    <div class="layout-padding-auto layout-padding-view pd20">
-			<ProTable
-				ref="proTableRef"
-				:columns="columns"
-				:data="state.tableData"
-				@updateTable="queryList"
+		<div class="layout-padding-auto layout-padding-view pd20">
+			<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>
+					<el-button type="primary" @click="handleQuery" :loading="state.loading"> <SvgIcon name="ele-Search" class="mr5" />查询 </el-button>
+					<el-button @click="resetQuery(ruleFormRef)" v-waves class="default-button" :loading="state.loading">
+						<SvgIcon name="ele-Refresh" class="mr5" />重置
+					</el-button>
+				</el-form-item>
+			</el-form>
+			<vxe-toolbar
+				ref="toolbarRef"
 				:loading="state.loading"
-				:total="state.total"
-				v-model:page-index="state.queryParams.PageIndex"
-				v-model:page-size="state.queryParams.PageSize"
+				custom
+				:refresh="{
+					queryMethod: handleQuery,
+				}"
 			>
-        <template #table-search>
-          <el-form :model="state.queryParams" ref="ruleFormRef" @submit.native.prevent inline>
-            <el-form-item 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>
-              <el-button type="primary" @click="handleQuery" :loading="state.loading"> <SvgIcon name="ele-Search" class="mr5" />查询 </el-button>
-              <el-button @click="resetQuery(ruleFormRef)" v-waves class="default-button" :loading="state.loading">
-                <SvgIcon name="ele-Refresh" class="mr5" />重置
-              </el-button>
-            </el-form-item>
-          </el-form>
-        </template>
-				<template #tableHeader="scope">
-					<el-button type="primary" @click="oncancelEnd" v-auth="'business:order:end'" :disabled="!scope.isSelected">
-						<SvgIcon name="ele-Stopwatch" class="mr5" />取消终结件<span v-if="proTableRef?.selectedList?.length">({{proTableRef?.selectedList?.length}})</span>
+				<template #buttons>
+					<el-button type="primary" @click="oncancelEnd" v-auth="'business:order:end'" :disabled="isChecked">
+						<SvgIcon name="ele-Stopwatch" class="mr5" />取消终结件
+					</el-button>
+					<el-button type="primary" @click="onJbExport" :disabled="isChecked" :loading="state.loading"
+						><SvgIcon name="iconfont icon-daochu" class="mr5" />交办单导出
 					</el-button>
 				</template>
-				<template #expiredStatusText="{ row }">
-					<span :class="'overdue-status-' + row.order?.expiredStatus" :title="row.order?.expiredStatusText"></span>
-				</template>
-				<template #title="{ row }">
-					<order-detail :order="row.order" @updateList="queryList">{{ row.order?.title }}</order-detail>
-				</template>
-			</ProTable>
+			</vxe-toolbar>
+			<div style="overflow: hidden; width: 100%; height: 100%; flex: 1">
+				<vxe-table
+					border
+					:loading="state.loading"
+					:data="state.tableData"
+					:column-config="{ resizable: true }"
+					:row-config="{ isCurrent: true, isHover: true, height: 30 }"
+					ref="tableRef"
+					@checkbox-all="selectAllChangeEvent"
+					@checkbox-change="selectChangeEvent"
+					height="auto"
+					auto-resize
+					show-overflow
+					:scrollY="{ enabled: true, gt: 0 }"
+					id="businessEnd"
+					:custom-config="{ storage: true }"
+					showHeaderOverflow
+				>
+					<vxe-column type="checkbox" width="60" align="center"></vxe-column>
+					<vxe-column field="order.expiredStatusText" title="超期状态" width="90" align="center">
+						<template #default="{ row }">
+							<span :class="'overdue-status-' + row.order?.expiredStatus" :title="row.order?.expiredStatusText"></span>
+						</template>
+					</vxe-column>
+					<vxe-column field="order.no" title="工单编码" width="140"></vxe-column>
+					<vxe-column field="order.statusText" title="工单状态" width="100"></vxe-column>
+					<vxe-column field="order.sourceChannel" title="来源渠道" width="110"></vxe-column>
+					<vxe-column field="order.currentStepName" title="当前节点" width="110"></vxe-column>
+					<vxe-column field="order.title" title="工单标题" min-width="200">
+						<template #default="{ row }">
+							<order-detail :order="row.order" @updateList="queryList">{{ row.order?.title }}</order-detail>
+						</template>
+					</vxe-column>
+					<vxe-column field="order.startTime" title="受理时间" width="160">
+						<template #default="{ row }">
+							{{ formatDate(row.order?.startTime, 'YYYY-mm-dd HH:MM:SS') }}
+						</template>
+					</vxe-column>
+					<vxe-column field="creatorName" title="设置人" width="120"></vxe-column>
+					<vxe-column field="creationTime" title="设置时间" width="160">
+						<template #default="{ row }">
+							{{ formatDate(row.creationTime, 'YYYY-mm-dd HH:MM:SS') }}
+						</template>
+					</vxe-column>
+					<vxe-column field="order.expiredTime" title="工单期满时间" width="160">
+						<template #default="{ row }">
+							{{ formatDate(row.order?.expiredTime, 'YYYY-mm-dd HH:MM:SS') }}
+						</template>
+					</vxe-column>
+					<vxe-column field="order.acceptType" title="受理类型" width="110"></vxe-column>
+					<vxe-column field="order.hotspotName" title="热点分类" width="150"></vxe-column>
+					<vxe-column field="order.actualHandleOrgName" title="接办部门" width="140"></vxe-column>
+					<vxe-column field="order.actualHandleTime" title="接办时间" width="160">
+						<template #default="{ row }">
+							{{ formatDate(row.order?.actualHandleTime, 'YYYY-mm-dd HH:MM:SS') }}
+						</template>
+					</vxe-column>
+					<vxe-column field="order.filedTime" title="办结时间" width="160">
+						<template #default="{ row }">
+							{{ formatDate(row.order?.filedTime, 'YYYY-mm-dd HH:MM:SS') }}
+						</template>
+					</vxe-column>
+				</vxe-table>
+			</div>
+			<pagination
+				@pagination="queryList"
+				:total="state.total"
+				v-model:current-page="state.queryParams.PageIndex"
+				v-model:page-size="state.queryParams.PageSize"
+				:disabled="state.loading"
+			/>
 		</div>
 	</div>
 </template>
 <script setup lang="tsx" name="businessEnd">
-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 { deleteEnd, endList } from '@/api/query/end';
+import { exportAssignment } from '@/utils/tools';
 // 引入组件
 const OrderDetail = defineAsyncComponent(() => import('@/components/OrderDetail/index.vue')); // 工单详情
+const pagination = defineAsyncComponent(() => import('@/components/ProTable/components/Pagination.vue')); // 分页
 // 定义变量内容
 const ruleFormRef = ref<RefType>(); // 表单ref
-const router = useRouter(); // 路由
-const proTableRef = ref<RefType>(); // 表格ref
-// 表格配置项
-const columns = ref<any[]>([
-	{ type: 'selection', fixed: 'left', width: 40,align: 'center' },
-	{ prop: 'order.expiredStatusText', label: '超期状态', align: 'center',width: 80 },
-	{ prop: 'order.no', label: '工单编码', minWidth: 140 },
-	{ prop: 'order.sourceChannel', label: '来源渠道', minWidth: 100 },
-	{ prop: 'order.currentStepName', label: '当前节点', minWidth: 120 },
-	{ prop: 'order.isProvinceText', label: '省/市工单', minWidth: 90 },
-	{
-		prop: 'order.expiredTime',
-		label: '工单期满时间',
-		minWidth: 160,
-		render: (scope: any) => {
-			return <span>{formatDate(scope.row.order?.expiredTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
-		},
-	},
-	{
-		prop: 'order.startTime',
-		label: '受理时间',
-		minWidth: 160,
-		render: (scope: any) => {
-			return <span>{formatDate(scope.row.order?.startTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
-		},
-	},
-	{ prop: 'order.acceptType', label: '受理类型', minWidth: 100 },
-	{ prop: 'order.statusText', label: '工单状态', minWidth: 100 },
-	{ prop: 'order.title', label: '工单标题', minWidth: 200 },
-	{ prop: 'order.actualHandleOrgName', label: '接办部门', minWidth: 140 },
-	{
-		prop: 'order.actualHandleTime',
-		label: '接办时间',
-		minWidth: 160,
-		render: (scope: any) => {
-			return <span>{formatDate(scope.row.order?.actualHandleTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
-		},
-	},
-	{ prop: 'order.hotspotName', label: '热点分类', minWidth: 150 },
-	{ prop: 'creatorOrgName', label: '设置部门', minWidth: 140 },
-	{ prop: 'creatorName', label: '设置人', minWidth: 120 },
-	{
-		prop: 'creationTime',
-		label: '设置时间',
-		minWidth: 160,
-		render: (scope: any) => {
-			return <span>{formatDate(scope.row.creationTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
-		},
-	}
-]);
 const state = reactive({
 	queryParams: {
 		// 查询条件
@@ -137,8 +152,8 @@ const resetQuery = (formEl: FormInstance | undefined) => {
 };
 // 取消终结件
 const oncancelEnd = () => {
-	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',
@@ -153,7 +168,36 @@ const oncancelEnd = () => {
 		})
 		.catch(() => {});
 };
+// 交办单导出
+const onJbExport = () => {
+	const ids = checkTable.value.map((item: any) => item.order.id);
+	exportAssignment(ids);
+};
+const tableRef = ref<RefType>();
+const checkTable = ref<EmptyArrayType>([]);
+const selectAllChangeEvent = ({ checked }) => {
+	if (tableRef.value) {
+		const records = tableRef.value.getCheckboxRecords();
+		checkTable.value = records;
+		console.log(checked ? '所有勾选事件' : '所有取消事件', records);
+	}
+};
+
+const selectChangeEvent = ({ checked }) => {
+	if (tableRef.value) {
+		const records = tableRef.value.getCheckboxRecords();
+		checkTable.value = records;
+		console.log(checked ? '勾选事件' : '取消事件', records);
+	}
+};
+const isChecked = computed(() => {
+	return !Boolean(checkTable.value.length);
+});
+const toolbarRef = ref<RefType>();
 onMounted(() => {
 	queryList();
+	if (tableRef.value && toolbarRef.value) {
+		tableRef.value.connect(toolbarRef.value);
+	}
 });
 </script>

src/views/business/observe/index.vue

@@ -1,48 +1,108 @@
 <template>
 	<div class="business-observe-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="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="Title">
+					<el-input v-model.trim="state.queryParams.Title" 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="observeListExport"
-				:exportParams="requestParams"
+				custom
+				:refresh="{
+					queryMethod: handleQuery,
+				}"
+				:tools="[{ toolRender: { name: 'exportCurrent' } }, { toolRender: { name: 'exportAll' } }]"
 			>
-				<template #table-search>
-					<el-form :model="state.queryParams" ref="ruleFormRef" @submit.native.prevent inline>
-						<el-form-item label="工单编码" prop="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="Title">
-							<el-input v-model.trim="state.queryParams.Title" 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="oncancelObserve" v-auth="'business:order:observe'" :disabled="!scope.isSelected">
-						<SvgIcon name="ele-View" class="mr5" />取消关注<span v-if="proTableRef?.selectedList?.length">({{proTableRef?.selectedList?.length}})</span>
+				<template #buttons>
+					<el-button type="primary" @click="oncancelObserve" v-auth="'business:order:observe'" :disabled="isChecked">
+						<SvgIcon name="ele-View" class="mr5" />取消关注
 					</el-button>
-					<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>
+					<el-button type="primary" @click="onJbExport" :disabled="isChecked" :loading="state.loading"
+						><SvgIcon name="iconfont icon-daochu" class="mr5" />交办单导出
 					</el-button>
 				</template>
-				<template #expiredStatusText="{ row }">
-					<span :class="'overdue-status-' + row.order?.expiredStatus" :title="row.order?.expiredStatusText"></span>
-				</template>
-				<template #title="{ row }">
-					<order-detail :order="row.order" @updateList="queryList">{{ row.order?.title }}</order-detail>
-				</template>
-			</ProTable>
+			</vxe-toolbar>
+			<div style="overflow: hidden; width: 100%; height: 100%; flex: 1">
+				<vxe-table
+					border
+					:loading="state.loading"
+					:data="state.tableData"
+					:column-config="{ resizable: true }"
+					:row-config="{ isCurrent: true, isHover: true, height: 30 }"
+					ref="tableRef"
+					@checkbox-all="selectAllChangeEvent"
+					@checkbox-change="selectChangeEvent"
+					height="auto"
+					auto-resize
+					show-overflow
+					:scrollY="{ enabled: true, gt: 0 }"
+					id="businessObserve"
+					:custom-config="{ storage: true }"
+					showHeaderOverflow
+					:params="{ exportMethod: observeListExport, exportParams: requestParams }"
+				>
+					<vxe-column type="checkbox" width="60" align="center"></vxe-column>
+					<vxe-column field="order.expiredStatusText" title="超期状态" width="90" align="center">
+						<template #default="{ row }">
+							<span :class="'overdue-status-' + row.order?.expiredStatus" :title="row.order?.expiredStatusText"></span>
+						</template>
+					</vxe-column>
+					<vxe-column field="order.no" title="工单编码" width="140"></vxe-column>
+					<vxe-column field="order.statusText" title="工单状态" width="100"></vxe-column>
+					<vxe-column field="order.sourceChannel" title="来源渠道" width="110"></vxe-column>
+					<vxe-column field="order.currentStepName" title="当前节点" width="110"></vxe-column>
+					<vxe-column field="order.title" title="工单标题" min-width="200">
+						<template #default="{ row }">
+							<order-detail :order="row.order" @updateList="queryList">{{ row.order?.title }}</order-detail>
+						</template>
+					</vxe-column>
+					<vxe-column field="order.startTime" title="受理时间" width="160">
+						<template #default="{ row }">
+							{{ formatDate(row.order?.startTime, 'YYYY-mm-dd HH:MM:SS') }}
+						</template>
+					</vxe-column>
+					<vxe-column field="creatorName" title="关注人" width="120"></vxe-column>
+					<vxe-column field="creationTime" title="关注时间" width="160">
+						<template #default="{ row }">
+							{{ formatDate(row.creationTime, 'YYYY-mm-dd HH:MM:SS') }}
+						</template>
+					</vxe-column>
+					<vxe-column field="order.expiredTime" title="工单期满时间" width="160">
+						<template #default="{ row }">
+							{{ formatDate(row.order?.expiredTime, 'YYYY-mm-dd HH:MM:SS') }}
+						</template>
+					</vxe-column>
+					<vxe-column field="order.acceptType" title="受理类型" width="110"></vxe-column>
+					<vxe-column field="order.hotspotName" title="热点分类" width="150"></vxe-column>
+					<vxe-column field="order.actualHandleOrgName" title="接办部门" width="140"></vxe-column>
+					<vxe-column field="order.actualHandleTime" title="接办时间" width="160">
+						<template #default="{ row }">
+							{{ formatDate(row.order?.actualHandleTime, 'YYYY-mm-dd HH:MM:SS') }}
+						</template>
+					</vxe-column>
+					<vxe-column field="order.filedTime" title="办结时间" width="160">
+						<template #default="{ row }">
+							{{ formatDate(row.order?.filedTime, 'YYYY-mm-dd HH:MM:SS') }}
+						</template>
+					</vxe-column>
+				</vxe-table>
+			</div>
+			<pagination
+				@pagination="queryList"
+				:total="state.total"
+				v-model:current-page="state.queryParams.PageIndex"
+				v-model:page-size="state.queryParams.PageSize"
+				:disabled="state.loading"
+			/>
 		</div>
 		<!--	更多查询	-->
 		<el-drawer v-model="drawer" title="更多查询" size="500px">
@@ -95,90 +155,35 @@
 	</div>
 </template>
 <script setup lang="tsx" name="businessObserve">
-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 { deleteObserve, observeBaseData, observeList, observeListExport } from '@/api/query/observe';
 import { defaultTimeStartEnd, shortcuts } from '@/utils/constants';
-import { exportJbOrder } from '@/api/business/order';
-import { downloadZip } from '@/utils/tools';
+import {  exportAssignment } from '@/utils/tools';
 import Other from '@/utils/other';
 // 引入组件
 const OrderDetail = defineAsyncComponent(() => import('@/components/OrderDetail/index.vue')); // 工单详情
+const pagination = defineAsyncComponent(() => import('@/components/ProTable/components/Pagination.vue')); // 分页
 // 定义变量内容
 const ruleFormRef = ref<RefType>(); // 表单ref
-const proTableRef = ref<RefType>(); // 表格ref
-// 表格配置项
-const columns = ref<any[]>([
-	{ type: 'selection', width: 40, align: 'center' },
-	{ prop: 'order.expiredStatusText', label: '超期状态', align: 'center', minWidth: 80 },
-	{ prop: 'order.statusText', label: '工单状态', minWidth: 100 },
-	{ prop: 'order.sourceChannel', label: '来源渠道', minWidth: 100 },
-	{ prop: 'order.currentStepName', label: '当前节点', minWidth: 120 },
-	{ prop: 'order.no', label: '工单编码', minWidth: 140 },
-	{ prop: 'order.title', label: '工单标题', minWidth: 200 },
-	{
-		prop: 'order.startTime',
-		label: '受理时间',
-		minWidth: 160,
-		render: (scope: any) => {
-			return <span>{formatDate(scope.row.order?.startTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
-		},
-	},
-	{ prop: 'creatorName', label: '关注人', minWidth: 120 },
-	{
-		prop: 'creationTime',
-		label: '建立时间',
-		minWidth: 160,
-		render: (scope: any) => {
-			return <span>{formatDate(scope.row.creationTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
-		},
-	},
-	{
-		prop: 'order.expiredTime',
-		label: '工单期满时间',
-		minWidth: 160,
-		render: (scope: any) => {
-			return <span>{formatDate(scope.row.order?.expiredTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
-		},
-	},
-	{ prop: 'order.acceptType', label: '受理类型', minWidth: 100 },
-	{ prop: 'order.actualHandleOrgName', label: '接办部门', minWidth: 140 },
-	{
-		prop: 'order.actualHandleTime',
-		label: '接办时间',
-		minWidth: 160,
-		render: (scope: any) => {
-			return <span>{formatDate(scope.row.order?.actualHandleTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
-		},
-	},
-	{
-		prop: 'order.filedTime',
-		label: '办结时间',
-		minWidth: 160,
-		render: (scope: any) => {
-			return <span>{formatDate(scope.row.order?.filedTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
-		},
-	},
-	{ prop: 'order.hotspotName', label: '热点分类', minWidth: 150 },
-]);
 const state = reactive<any>({
 	queryParams: {
 		// 查询条件
 		PageIndex: 1,
 		PageSize: 20,
 		Keyword: null, // 关键字
-		No:null,
-		Title:null,
-		slTime:[], // 受理时间
-		StartTime:null,
-		EndTime:null,
-		exTime:[], // 期满时间
-		ExpiredTimeStart:null,
-		ExpiredTimeEnd:null,
-		ActualHandleOrgName:null, // 接办部门
-		AcceptType:null,//受理类型
-		Hotspot:null, // 热点分类
+		No: null,
+		Title: null,
+		slTime: [], // 受理时间
+		StartTime: null,
+		EndTime: null,
+		exTime: [], // 期满时间
+		ExpiredTimeStart: null,
+		ExpiredTimeEnd: null,
+		ActualHandleOrgName: null, // 接办部门
+		AcceptType: null, //受理类型
+		Hotspot: null, // 热点分类
 	},
 	tableData: [], //表单
 	loading: false, // 加载
@@ -222,8 +227,8 @@ const resetQuery = (formEl: FormInstance | undefined) => {
 };
 // 取消观察件
 const oncancelObserve = () => {
-	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',
@@ -240,28 +245,8 @@ const oncancelObserve = () => {
 };
 // 交办单导出
 const onJbExport = () => {
-	const ids = proTableRef.value.selectedList.map((item: any) => item.order?.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.order.id);
+	exportAssignment(ids);
 };
 // 获取基础信息
 const acceptTypeOptions = ref<EmptyArrayType>([]); // 受理类型
@@ -273,9 +258,33 @@ const getBaseInfo = async () => {
 	} catch (e) {
 		console.log(e);
 	}
-}
+};
+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(() => {
-	getBaseInfo();
 	queryList();
+	if (tableRef.value && toolbarRef.value) {
+		tableRef.value.connect(toolbarRef.value);
+	}
+	getBaseInfo();
 });
 </script>

src/views/business/repeatEvent/components/Repeat-event-detail.vue

@@ -17,18 +17,42 @@
 		<el-divider content-position="left">
 			<el-text tag="b" size="large"> 重复事件工单 </el-text>
 		</el-divider>
-		<ProTable
-			ref="proTableRef"
-			:columns="columns"
-			:data="state.repeatTable"
+		<vxe-table
+			border
 			:loading="state.loading"
-			:pagination="false"
-			:tool-button="['setting']"
+			:data="state.repeatTable"
+			:column-config="{ resizable: true }"
+			:row-config="{ isCurrent: true, isHover: true, height: 30 }"
+			show-overflow
+			:scrollY="{ enabled: true, gt: 0 }"
+			showHeaderOverflow
+			max-height="300px"
 		>
-			<template #title="{ row }">
-				<order-detail :order="row.order">{{ row.order?.title }}</order-detail>
-			</template>
-		</ProTable>
+			<vxe-column field="order.no" title="工单编码" width="140"></vxe-column>
+			<vxe-column field="order.isProvinceText" title="省/市工单" width="100"></vxe-column>
+			<vxe-column field="order.currentStepName" title="当前节点" width="120"></vxe-column>
+			<vxe-column field="order.statusText" title="工单状态" width="100"></vxe-column>
+			<vxe-column field="order.title" title="工单标题" min-width="200">
+				<template #default="{row}">
+					<order-detail :order="row.order">{{ row.order?.title }}</order-detail>
+				</template>
+			</vxe-column>
+			<vxe-column field="order.startTime" title="受理时间" width="160">
+				<template #default="{ row }">
+					{{ formatDate(row.order.startTime, 'YYYY-mm-dd HH:MM:SS') }}
+				</template>
+			</vxe-column>
+			<vxe-column field="order.expiredTime" title="工单期满时间" width="160">
+				<template #default="{ row }">
+					{{ formatDate(row.order.expiredTime, 'YYYY-mm-dd HH:MM:SS') }}
+				</template>
+			</vxe-column>
+			<vxe-column field="order.actualHandleOrgName" title="接办部门" width="140"></vxe-column>
+			<vxe-column field="order.acceptType" title="受理类型" width="140"></vxe-column>
+			<vxe-column field="order.hotspotName" title="热点分类" width="150"></vxe-column>
+			<vxe-column field="order.sourceChannel" title="来源渠道" width="140"></vxe-column>
+			<vxe-column field="order.acceptorName" title="受理人" width="120"></vxe-column>
+		</vxe-table>
 	</el-dialog>
 </template>
 <script setup lang="tsx" name="repeatEventDetail">
@@ -44,33 +68,6 @@ const state = reactive({
 	ruleForm: {},
 	repeatTable: [], // 重复事件工单
 });
-const columns = ref<any[]>([
-	{ prop: 'order.no', label: '工单编码', width: 150 },
-	{ prop: 'order.isProvinceText', label: '省/市工单', width: 100 },
-	{ prop: 'order.currentStepName', label: '当前节点', width: 120 },
-	{ prop: 'order.statusText', label: '工单状态', width: 100 },
-	{ prop: 'order.title', label: '标题', width: 300 },
-	{
-		prop: 'order.startTime',
-		label: '受理时间',
-		width: 170,
-		render: (scope) => {
-			return <span>{formatDate(scope.row.order?.startTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
-		},
-	},
-	{
-		prop: 'order.expiredTime',
-		label: '工单期满时间',
-		width: 170,
-		render: (scope) => {
-			return <span>{formatDate(scope.row.order?.expiredTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
-		},
-	},
-	{ prop: 'order.actualHandleOrgName', label: '接办部门', width: 170 },
-	{ prop: 'order.acceptType', label: '受理类型', width: 150 },
-	{ prop: 'order.sourceChannel', label: '来源渠道' },
-	{ prop: 'order.acceptorName', label: '受理人', width: 120 },
-]);
 // 创建重复事件
 const openDialog = (row: any) => {
 	getDetail(row);

src/views/business/repeatEvent/index.vue

@@ -1,35 +1,78 @@
 <template>
 	<div class="business-repeat-event-container layout-padding">
-    <div class="layout-padding-auto layout-padding-view pd20">
-			<ProTable
-				ref="proTableRef"
-				:columns="columns"
-				:data="state.tableData"
-				@updateTable="queryList"
+		<div class="layout-padding-auto layout-padding-view pd20">
+			<el-form :model="state.queryParams" ref="ruleFormRef" inline @submit.native.prevent>
+				<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="KeyWords">
+					<el-input v-model.trim="state.queryParams.KeyWords" 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"> <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
+					:scrollY="{ enabled: true, gt: 0 }"
+					id="businessRepeatEvent"
+					:custom-config="{ storage: true }"
+					showHeaderOverflow
+				>
+					<vxe-column field="title" title="重复事件标题" min-width="200"></vxe-column>
+					<vxe-column field="keyWords" title="关键词" min-width="200"></vxe-column>
+					<vxe-column field="creatorName" title="创建人" min-width="120"></vxe-column>
+					<vxe-column field="creationTime" title="创建时间" width="160">
+						<template #default="{ row }">
+							{{ formatDate(row.creationTime, 'YYYY-mm-dd HH:MM:SS') }}
+						</template>
+					</vxe-column>
+					<vxe-column field="lastModificationName" title="更新人" min-width="120"></vxe-column>
+					<vxe-column field="lastModificationTime" title="更新时间" width="160">
+						<template #default="{ row }">
+							{{ formatDate(row.lastModificationTime, 'YYYY-mm-dd HH:MM:SS') }}
+						</template>
+					</vxe-column>
+					<vxe-column title="操作" fixed="right" width="150" align="center">
+						<template #default="{ row }">
+							<el-button link type="primary" @click="onEventDetail(row)" title="查看重复性详情"> 事件详情 </el-button>
+							<el-button link type="primary" @click="onEventEdit(row)" v-auth="'business:repeatEvent:edit'" title="编辑重复性事件"> 编辑 </el-button>
+						</template>
+					</vxe-column>
+				</vxe-table>
+			</div>
+			<pagination
+				@pagination="queryList"
 				:total="state.total"
-				v-model:page-index="state.queryParams.PageIndex"
+				v-model:current-page="state.queryParams.PageIndex"
 				v-model:page-size="state.queryParams.PageSize"
-			>
-        <template #table-search>
-          <el-form :model="state.queryParams" ref="ruleFormRef" inline @submit.native.prevent>
-            <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="KeyWords">
-              <el-input v-model.trim="state.queryParams.KeyWords" 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)" v-waves class="default-button"> <SvgIcon name="ele-Refresh" class="mr5" />重置 </el-button>
-            </el-form-item>
-          </el-form>
-        </template>
-				<template #operation="{ row }">
-					<el-button link type="primary" @click="onEventDetail(row)" title="查看重复性详情"> 事件详情 </el-button>
-					<el-button link type="primary" @click="onEventEdit(row)" v-auth="'business:repeatEvent:edit'" title="编辑重复性事件"> 编辑 </el-button>
-				</template>
-			</ProTable>
+				:disabled="state.loading"
+			/>
 		</div>
 		<!-- 事件详情   -->
 		<repeat-event-detail ref="repeatEventDetailRef" />
@@ -40,50 +83,25 @@
 
 <script lang="tsx" setup name="businessRepeatEvent">
 import { defineAsyncComponent, onMounted, reactive, ref } from 'vue';
-import { ElMessage, FormInstance } from 'element-plus';
+import { FormInstance } from 'element-plus';
 import { formatDate } from '@/utils/formatTime';
-import { auth } from '@/utils/authFunction';
 import { repeatEventList } from '@/api/business/repeatEvent';
 
 // 引入组件
 const RepeatEventDetail = defineAsyncComponent(() => import('@/views/business/repeatEvent/components/Repeat-event-detail.vue')); // 重复性事件详情
 const RepeatEventEdit = defineAsyncComponent(() => import('@/views/business/repeatEvent/components/Repeat-event-edit.vue')); // 编辑重复性事件
+const pagination = defineAsyncComponent(() => import('@/components/ProTable/components/Pagination.vue')); // 分页
 
-const proTableRef = ref<RefType>(); // 表格ref
-// 表格配置项
-const columns = ref<any[]>([
-	{ prop: 'title', label: '重复事件标题', minWidth: 200 },
-	{ prop: 'keyWords', label: '关键词', minWidth: 200 },
-	{ prop: 'creatorName', label: '创建人',minWidth: 120 },
-	{
-		prop: 'creationTime',
-		label: '创建时间',
-		minWidth: 160,
-		render: (scope) => {
-			return <span>{formatDate(scope.row.creationTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
-		},
-	},
-	{ prop: 'lastModificationName', label: '更新人',minWidth: 120 },
-	{
-		prop: 'lastModificationTime',
-		label: '更新时间',
-		minWidth: 160,
-		render: (scope) => {
-			return <span>{formatDate(scope.row.lastModificationTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
-		},
-	},
-	{ prop: 'operation', label: '操作', fixed: 'right', width: 140, align: 'center' },
-]);
 // 定义变量内容
 const state = reactive({
 	loading: false, // 加载状态
 	queryParams: {
 		// 查询参数
 		PageIndex: 1,
-		PageSize: 20,
+		PageSize: 2,
 		Title: null,
 		Keyword: null,
-    KeyWords:null
+		KeyWords: null,
 	},
 	total: 0, // 总条数
 	tableData: [], // 表格数据
@@ -91,8 +109,8 @@ const state = reactive({
 const ruleFormRef = ref<RefType>(null); // 表单ref
 // 手动查询，将页码设置为1
 const handleQuery = () => {
-  state.queryParams.PageIndex = 1;
-  queryList();
+	state.queryParams.PageIndex = 1;
+	queryList();
 };
 // 获取参数列表
 const queryList = () => {
@@ -124,7 +142,12 @@ const onEventEdit = (row: any) => {
 	repeatEventEditRef.value.openDialog(row);
 };
 // 页面加载时
+const toolbarRef = ref<RefType>();
+const tableRef = ref<RefType>();
 onMounted(() => {
 	queryList();
+	if (tableRef.value && toolbarRef.value) {
+		tableRef.value.connect(toolbarRef.value);
+	}
 });
 </script>