reactor:省平台对接表格重构完成;

src/views/business/order/index.vue

@@ -446,11 +446,11 @@ import type { FormInstance } from 'element-plus';
 import { ElMessage, ElMessageBox } from 'element-plus';
 import { defaultTimeStartEnd, shortcuts } from '@/utils/constants';
 import { formatDate } from '@/utils/formatTime';
-import { exportJbOrder, exportOrder, listBaseData, orderListCount, orderListFixed } from '@/api/business/order';
+import {  exportOrder, listBaseData, orderListCount, orderListFixed } from '@/api/business/order';
 import { addObserve } from '@/api/query/observe';
 import { addEnd } from '@/api/query/end';
 import { treeArea } from '@/api/auxiliary/area';
-import { downloadZip, exportAssignment, getNeedArr } from '@/utils/tools';
+import { exportAssignment, getNeedArr } from '@/utils/tools';
 import Other from '@/utils/other';
 import mittBus from '@/utils/mitt';
 import { useThemeConfig } from '@/stores/themeConfig';

src/views/province/delay.vue

@@ -1,21 +1,10 @@
 <template>
 	<div class="province-order-delay-container layout-padding">
 		<div class="layout-padding-auto layout-padding-view pd20">
-			<ProTable
-				ref="proTableRef"
-				:columns="columns"
-				:data="state.tableData"
-				@updateTable="queryList"
-				:loading="state.loading"
-				:total="state.total"
-				v-model:page-index="state.queryParams.PageIndex"
-				v-model:page-size="state.queryParams.PageSize"
-			>
-				<template #table-search>
-					<el-form :model="state.queryParams" ref="ruleFormRef" @submit.native.prevent inline>
-						<el-form-item label="审核状态" prop="State">
-							<el-segmented
-								:options="[
+			<el-form :model="state.queryParams" ref="ruleFormRef" @submit.native.prevent inline>
+				<el-form-item label="审核状态" prop="State">
+					<el-segmented
+						:options="[
 									{
 										value: '0',
 										label: '申请中',
@@ -29,33 +18,110 @@
 										label: '不同意',
 									},
 								]"
-								v-model="state.queryParams.State"
-								@change="handleQuery"
-								:disabled="state.loading"
-							/>
-						</el-form-item>
-						<el-form-item label="工单标题" prop="Title">
-							<el-input v-model="state.queryParams.Title" placeholder="工单标题" clearable @keyup.enter="handleQuery" class="keyword-input"/>
-						</el-form-item>
-						<el-form-item label="工单编码" prop="No">
-							<el-input v-model="state.queryParams.No" placeholder="工单编码" clearable @keyup.enter="handleQuery" class="keyword-input"/>
-						</el-form-item>
-						<el-form-item label="">
-							<el-button type="primary" @click="handleQuery" :loading="state.loading"> <SvgIcon name="ele-Search" class="mr5" />查询 </el-button>
-							<el-button @click="drawer = true" class="default-button"> <SvgIcon name="ele-Search" class="mr5" />更多查询</el-button>
-						</el-form-item>
-					</el-form>
-				</template>
-				<template #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>
-				<template #operation="{ row }">
-					<el-button type="primary" link @click="onDetail(row)" title="省工单延期明细"> 明细</el-button>
-				</template>
-			</ProTable>
+						v-model="state.queryParams.State"
+						@change="handleQuery"
+						:disabled="state.loading"
+					/>
+				</el-form-item>
+				<el-form-item label="工单标题" prop="Title">
+					<el-input v-model="state.queryParams.Title" placeholder="工单标题" clearable @keyup.enter="handleQuery" class="keyword-input"/>
+				</el-form-item>
+				<el-form-item label="工单编码" prop="No">
+					<el-input v-model="state.queryParams.No" placeholder="工单编码" clearable @keyup.enter="handleQuery" class="keyword-input"/>
+				</el-form-item>
+				<el-form-item label="">
+					<el-button type="primary" @click="handleQuery" :loading="state.loading"> <SvgIcon name="ele-Search" class="mr5" />查询 </el-button>
+					<el-button @click="drawer = true" class="default-button"> <SvgIcon name="ele-Search" class="mr5" />更多查询</el-button>
+				</el-form-item>
+			</el-form>
+			<vxe-toolbar
+				ref="toolbarRef"
+				:loading="state.loading"
+				custom
+				:refresh="{
+					queryMethod: handleQuery,
+				}"
+			>
+			</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="provinceDelay"
+					:custom-config="{
+						storage: true,
+					}"
+					showHeaderOverflow
+				>
+					<vxe-column field="order.expiredStatusText" title="超期状态" width="90" align="center">
+						<template #default="{ row }">
+							<span :class="'overdue-status-' + row.order?.expiredStatus" :title="row.order?.expiredStatusText"></span>
+						</template>
+					</vxe-column>
+					<vxe-column field="order.statusText" title="工单状态" width="100"></vxe-column>
+					<vxe-column field="employeeName" title="申请人" width="120"></vxe-column>
+					<vxe-column field="applyDelayTime" title="申请时间" width="160">
+						<template #default="{ row }">
+							{{ formatDate(row.applyDelayTime, 'YYYY-mm-dd HH:MM:SS') }}
+						</template>
+					</vxe-column>
+					<vxe-column field="auditName" title="审核人" width="120"></vxe-column>
+					<vxe-column field="auditTime" title="审核时间" width="160">
+						<template #default="{ row }">
+							{{ formatDate(row.auditTime, 'YYYY-mm-dd HH:MM:SS') }}
+						</template>
+					</vxe-column>
+					<vxe-column field="delayStateText" title="审核状态" width="100"></vxe-column>
+					<vxe-column field="order.currentStepName" title="当前节点" width="120"></vxe-column>
+					<vxe-column field="order.isUrgentText" title="是否紧急" width="90">
+						<template #default="{ row }">
+							<span class="color-danger font-bold">{{ row.order?.isUrgentText }}</span>
+						</template>
+					</vxe-column>
+					<vxe-column field="order.receiveProvinceNo" title="省编码" width="240"></vxe-column>
+					<vxe-column field="order.no" title="工单编码" width="140"></vxe-column>
+					<vxe-column field="order.title" title="工单标题" width="200">
+						<template #default="{ row }">
+							<order-detail :order="row.order" @updateList="queryList">{{ row.order?.title }}</order-detail>
+						</template>
+					</vxe-column>
+					<vxe-column field="order.startTime" title="受理时间" width="160">
+						<template #default="{ row }">
+							{{ formatDate(row.order?.startTime, 'YYYY-mm-dd HH:MM:SS') }}
+						</template>
+					</vxe-column>
+					<vxe-column field="order.expiredTime" title="工单期满时间" width="160">
+						<template #default="{ row }">
+							{{ formatDate(row.order?.expiredTime, 'YYYY-mm-dd HH:MM:SS') }}
+						</template>
+					</vxe-column>
+					<vxe-column field="order.actualHandleOrgName" title="接办部门" width="140"></vxe-column>
+					<vxe-column field="order.acceptType" title="受理类型" width="110"></vxe-column>
+					<vxe-column field="order.hotspotName" title="热点分类" width="150"></vxe-column>
+					<vxe-column field="order.acceptorName" title="受理人" width="120"></vxe-column>
+					<vxe-column title="操作" fixed="right" width="80" align="center">
+						<template #default="{ row }">
+							<el-button type="primary" link @click="onDetail(row)" title="省工单延期明细"> 明细</el-button>
+						</template>
+					</vxe-column>
+				</vxe-table>
+			</div>
+			<pagination
+				@pagination="queryList"
+				:total="state.total"
+				v-model:current-page="state.queryParams.PageIndex"
+				v-model:page-size="state.queryParams.PageSize"
+				:disabled="state.loading"
+			/>
 		</div>
 		<detail-drawer ref="detailDrawerRef" />
 		<!--	更多查询	-->
@@ -100,6 +166,7 @@ import { provinceDelayList } from '@/api/province';
 // 引入组件
 const OrderDetail = defineAsyncComponent(() => import('@/components/OrderDetail/index.vue')); // 工单详情
 const DetailDrawer = defineAsyncComponent(() => import('@/views/province/components/Detail-drawer.vue')); // 明细
+const pagination = defineAsyncComponent(() => import('@/components/ProTable/components/Pagination.vue')); // 分页
 
 // 定义变量内容
 const state = reactive<any>({
@@ -119,63 +186,6 @@ const state = reactive<any>({
 	loading: false, // 加载
 	total: 0, // 总数
 });
-const proTableRef = ref<RefType>(); // 表格ref
-// 表格配置项
-const columns = ref<any[]>([
-	{ prop: 'order.expiredStatusText', label: '超期状态', align: 'center', minWidth: 80 },
-	{ prop: 'order.statusText', label: '工单状态', minWidth: 100 },
-	{ prop: 'employeeName', label: '申请人', minWidth: 120 },
-	{
-		prop: 'applyDelayTime',
-		label: '申请时间',
-		minWidth: 160,
-		render: (scope) => {
-			return <span>{formatDate(scope.row.applyDelayTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
-		},
-	},
-	{ prop: 'auditName', label: '审核人', minWidth: 120 },
-	{
-		prop: 'auditTime',
-		label: '审核时间',
-		minWidth: 160,
-		render: (scope) => {
-			return <span>{formatDate(scope.row.auditTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
-		},
-	},
-	{ prop: 'delayStateText', label: '审核状态', minWidth: 100 },
-	{ prop: 'order.currentStepName', label: '当前节点', minWidth: 120 },
-	{
-		prop: 'order.isUrgentText',
-		label: '是否紧急',
-		render: (scope) => {
-			return <span class="color-danger font-bold">{scope.row.order?.isUrgentText}</span>;
-		},
-	},
-	{ prop: 'order.receiveProvinceNo', label: '省编码', minWidth: 240 },
-	{ prop: 'order.no', label: '工单编码', minWidth: 140 },
-	{
-		prop: 'order.startTime',
-		label: '受理时间',
-		minWidth: 160,
-		render: (scope) => {
-			return <span>{formatDate(scope.row.order?.startTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
-		},
-	},
-	{ prop: 'order.title', label: '工单标题', minWidth: 200 },
-	{
-		prop: 'order.expiredTime',
-		label: '工单期满时间',
-		minWidth: 160,
-		render: (scope) => {
-			return <span>{formatDate(scope.row.order?.expiredTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
-		},
-	},
-	{ prop: 'order.actualHandleOrgName', label: '接办部门', minWidth: 140 },
-	{ prop: 'order.acceptType', label: '受理类型', minWidth: 100 },
-	{ prop: 'order.hotspotName', label: '热点分类', minWidth: 150 },
-	{ prop: 'order.acceptorName', label: '受理人', minWidth: 120 },
-	{ prop: 'operation', label: '操作', fixed: 'right', width: 80, align: 'center' },
-]);
 // 手动查询，将页码设置为1
 const handleQuery = () => {
 	state.queryParams.PageIndex = 1;
@@ -214,7 +224,12 @@ const detailDrawerRef = ref<RefType>();
 const onDetail = (row: any) => {
 	detailDrawerRef.value.openDrawer(row.id, 'delay');
 };
+const tableRef = ref<RefType>();
+const toolbarRef = ref<RefType>();
 onMounted(() => {
 	queryList();
+	if (tableRef.value && toolbarRef.value) {
+		tableRef.value.connect(toolbarRef.value);
+	}
 });
 </script>

src/views/province/order.vue

@@ -1,71 +1,132 @@
 <template>
 	<div class="province-order-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="ReceiveProvinceNo">
+					<el-input v-model="state.queryParams.ReceiveProvinceNo" placeholder="省编码" clearable @keyup.enter="handleQuery" class="keyword-input"/>
+				</el-form-item>
+				<el-form-item label="工单标题" prop="Keyword">
+					<el-input v-model="state.queryParams.Keyword" placeholder="工单标题" clearable @keyup.enter="handleQuery" class="keyword-input"/>
+				</el-form-item>
+				<el-form-item label="生成时间" prop="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 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"
-				:toolButton="['refresh', 'setting', 'exportCurrent', 'exportAll']"
-				:exportMethod="exportOrder"
-				: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="ReceiveProvinceNo">
-                  <el-input v-model="state.queryParams.ReceiveProvinceNo" placeholder="省编码" clearable @keyup.enter="handleQuery" class="keyword-input"/>
-                </el-form-item>
-                <el-form-item label="工单标题" prop="Keyword">
-                  <el-input v-model="state.queryParams.Keyword" placeholder="工单标题" clearable @keyup.enter="handleQuery" class="keyword-input"/>
-                </el-form-item>
-                <el-form-item label="生成时间" prop="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 label="">
-                    <el-button type="primary" @click="handleQuery" :loading="state.loading"> <SvgIcon name="ele-Search" class="mr5" />查询 </el-button>
-									<el-button @click="drawer = true" class="default-button"> <SvgIcon name="ele-Search" class="mr5" />更多查询</el-button>
-                </el-form-item>
-          </el-form>
-        </template>
-				<template #expiredStatusText="{ row }">
-					<span :class="'overdue-status-' + row.expiredStatus" :title="row.expiredStatusText"></span>
-				</template>
-				<template #title="{ row }">
-					<order-detail :order="row" @updateList="queryList">{{ row.title }}</order-detail>
-				</template>
-				<!-- 表格操作 -->
-				<template #operation="{ row }">
-					<el-button
-						link
-						type="danger"
-						@click="onReturn(row)"
-						title="省工单退回"
-						v-auth="'province:order:return'"
-						v-if="
+			</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="provinceOrder"
+					:custom-config="{
+						storage: true,
+					}"
+					showHeaderOverflow
+					:params="{ exportMethod: exportOrder, exportParams: requestParams }"
+				>
+					<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="receiveProvinceNo" title="省编码" width="240"></vxe-column>
+					<vxe-column field="no" title="工单编码" width="140"></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="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="startTime" title="受理时间" width="160">
+						<template #default="{ row }">
+							{{ formatDate(row.startTime, 'YYYY-mm-dd HH:MM:SS') }}
+						</template>
+					</vxe-column>
+					<vxe-column field="expiredTime" title="工单期满时间" width="160">
+						<template #default="{ row }">
+							{{ formatDate(row.expiredTime, 'YYYY-mm-dd HH:MM:SS') }}
+						</template>
+					</vxe-column>
+					<vxe-column field="filedTime" title="办结时间" width="160">
+						<template #default="{ row }">
+							{{ formatDate(row.filedTime, 'YYYY-mm-dd HH:MM:SS') }}
+						</template>
+					</vxe-column>
+					<vxe-column field="orgLevelOneName" title="一级部门" width="140"></vxe-column>
+					<vxe-column field="actualHandleOrgName" title="接办部门" width="140"></vxe-column>
+					<vxe-column field="acceptType" title="受理类型" width="110"></vxe-column>
+					<vxe-column field="counterSignTypeText" title="是否会签" width="110"></vxe-column>
+					<vxe-column field="sourceChannel" title="来源渠道" width="110"></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 title="操作" fixed="right" width="80" align="center">
+						<template #default="{ row }">
+							<!-- 省工单退回条件 是省工单（工单未归档且当前节点处于热线中心办理节点时）工单状态为办理中（归档之前） 9代表有退回申请 -->
+							<el-button
+								link
+								type="danger"
+								@click="onReturn(row)"
+								title="省工单退回"
+								v-auth="'province:order:return'"
+								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
-					>
-				</template>
-			</ProTable>
+							>
+								退回</el-button>
+						</template>
+					</vxe-column>
+				</vxe-table>
+			</div>
+			<pagination
+				@pagination="queryList"
+				:total="state.total"
+				v-model:current-page="state.queryParams.PageIndex"
+				v-model:page-size="state.queryParams.PageSize"
+				:disabled="state.loading"
+			/>
 		</div>
 		<!--	更多查询	-->
 		<el-drawer v-model="drawer" title="更多查询" size="500px">
@@ -215,17 +276,19 @@
 	</div>
 </template>
 <script setup lang="tsx" name="provinceOrder">
-import { defineAsyncComponent, onMounted, reactive, ref } from 'vue';
+import { computed, defineAsyncComponent, onMounted, reactive, ref } from 'vue';
 import type { FormInstance } from 'element-plus';
-import { defaultDateThree, defaultTimeStartEnd, shortcuts } from '@/utils/constants';
+import { defaultTimeStartEnd, shortcuts } from '@/utils/constants';
 import { formatDate } from '@/utils/formatTime';
 import { exportOrder, listBaseData, orderList } from '@/api/business/order';
 import { treeArea } from '@/api/auxiliary/area';
 import Other from '@/utils/other';
+import { exportAssignment } from '@/utils/tools';
 
 // 引入组件
 const OrderDetail = defineAsyncComponent(() => import('@/components/OrderDetail/index.vue')); // 工单详情
 const OrderReturn = defineAsyncComponent(() => import('@/views/business/return/components/Apply.vue')); // 工单退回
+const pagination = defineAsyncComponent(() => import('@/components/ProTable/components/Pagination.vue')); // 分页
 
 // 定义变量内容
 const state = reactive<any>({
@@ -279,55 +342,6 @@ const state = reactive<any>({
 	orgData: [], // 机构数据
 	areaOptions: [], // 省市区数据
 });
-// 表格配置项
-const columns = ref<any[]>([
-	{ prop: 'expiredStatusText', label: '超期状态', align: 'center', minWidth: 80 },
-	{ prop: 'receiveProvinceNo', label: '省编码', minWidth: 240 },
-	{ prop: 'no', label: '工单编码', minWidth: 140 },
-	{ prop: 'reTransactNum', label: '重办次数' },
-	{
-		prop: 'isUrgentText',
-		label: '是否紧急',
-		render: (scope) => {
-			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: 'startTime',
-		label: '受理时间',
-		minWidth: 160,
-		render: (scope) => {
-			return <span>{formatDate(scope.row.startTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
-		},
-	},
-	{
-		prop: 'expiredTime',
-		label: '工单期满时间',
-		minWidth: 160,
-		render: (scope) => {
-			return <span>{formatDate(scope.row.expiredTime, '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: '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: 'acceptorName', label: '受理人', minWidth: 120 },
-	{ prop: 'operation', label: '操作', fixed: 'right', width: 80, align: 'center' },
-]);
 // 获取查询条件基础信息
 const getBaseData = async () => {
 	try {
@@ -394,8 +408,13 @@ const orderReturnRef = ref<RefType>(); // 工单退回ref
 const onReturn = (row: any) => {
 	orderReturnRef.value.openDialog(row);
 };
+const tableRef = ref<RefType>();
+const toolbarRef = ref<RefType>();
 onMounted(() => {
-	getBaseData();
 	queryList();
+	if (tableRef.value && toolbarRef.value) {
+		tableRef.value.connect(toolbarRef.value);
+	}
+	getBaseData();
 });
 </script>

src/views/province/return.vue

@@ -1,21 +1,10 @@
 <template>
 	<div class="business-order-return-container layout-padding">
 		<div class="layout-padding-auto layout-padding-view pd20">
-			<ProTable
-				ref="proTableRef"
-				:columns="columns"
-				:data="state.tableData"
-				@updateTable="queryList"
-				:loading="state.loading"
-				:total="state.total"
-				v-model:page-index="state.queryParams.PageIndex"
-				v-model:page-size="state.queryParams.PageSize"
-			>
-				<template #table-search>
-					<el-form :model="state.queryParams" ref="ruleFormRef" @submit.native.prevent inline>
-						<el-form-item label="审核状态" prop="State">
-							<el-segmented
-								:options="[
+			<el-form :model="state.queryParams" ref="ruleFormRef" @submit.native.prevent inline>
+				<el-form-item label="审核状态" prop="State">
+					<el-segmented
+						:options="[
 									{
 										value: '0',
 										label: '申请中',
@@ -29,33 +18,110 @@
 										label: '不同意',
 									},
 								]"
-								v-model="state.queryParams.State"
-								@change="handleQuery"
-								:disabled="state.loading"
-							/>
-						</el-form-item>
-						<el-form-item label="工单标题" prop="Title">
-							<el-input v-model="state.queryParams.Title" placeholder="工单标题" clearable @keyup.enter="handleQuery" class="keyword-input"/>
-						</el-form-item>
-						<el-form-item label="工单编码" prop="No">
-							<el-input v-model="state.queryParams.No" placeholder="工单编码" clearable @keyup.enter="handleQuery" class="keyword-input"/>
-						</el-form-item>
-						<el-form-item>
-							<el-button type="primary" @click="handleQuery" :loading="state.loading"> <SvgIcon name="ele-Search" class="mr5" />查询 </el-button>
-							<el-button @click="drawer = true" class="default-button"> <SvgIcon name="ele-Search" class="mr5" />更多查询</el-button>
-						</el-form-item>
-					</el-form>
-				</template>
-				<template #expiredStatusText="{ row }">
-					<span :class="'overdue-status-' + row.order?.expiredStatus" :title="row.order?.expiredStatusText"></span>
-				</template>
-				<template #title="{ row }">
-					<order-detail :order="row.order" @updateList="queryList">{{ row.order?.title }}</order-detail>
-				</template>
-				<template #operation="{ row }">
-					<el-button type="primary" link @click="onDetail(row)" title="省工单退单明细"> 明细</el-button>
-				</template>
-			</ProTable>
+						v-model="state.queryParams.State"
+						@change="handleQuery"
+						:disabled="state.loading"
+					/>
+				</el-form-item>
+				<el-form-item label="工单标题" prop="Title">
+					<el-input v-model="state.queryParams.Title" placeholder="工单标题" clearable @keyup.enter="handleQuery" class="keyword-input"/>
+				</el-form-item>
+				<el-form-item label="工单编码" prop="No">
+					<el-input v-model="state.queryParams.No" placeholder="工单编码" clearable @keyup.enter="handleQuery" class="keyword-input"/>
+				</el-form-item>
+				<el-form-item>
+					<el-button type="primary" @click="handleQuery" :loading="state.loading"> <SvgIcon name="ele-Search" class="mr5" />查询 </el-button>
+					<el-button @click="drawer = true" class="default-button"> <SvgIcon name="ele-Search" class="mr5" />更多查询</el-button>
+				</el-form-item>
+			</el-form>
+			<vxe-toolbar
+				ref="toolbarRef"
+				:loading="state.loading"
+				custom
+				:refresh="{
+					queryMethod: handleQuery,
+				}"
+			>
+			</vxe-toolbar>
+			<div style="overflow: hidden; width: 100%; height: 100%; flex: 1">
+				<vxe-table
+					border
+					:loading="state.loading"
+					:data="state.tableData"
+					:column-config="{ resizable: true }"
+					:row-config="{ isCurrent: true, isHover: true, height: 30 }"
+					ref="tableRef"
+					height="auto"
+					auto-resize
+					show-overflow
+					:print-config="{}"
+					:scrollY="{ enabled: true, gt: 0 }"
+					id="provinceReturn"
+					:custom-config="{
+						storage: true,
+					}"
+					showHeaderOverflow
+				>
+					<vxe-column field="order.expiredStatusText" title="超期状态" width="90" align="center">
+						<template #default="{ row }">
+							<span :class="'overdue-status-' + row.order?.expiredStatus" :title="row.order?.expiredStatusText"></span>
+						</template>
+					</vxe-column>
+					<vxe-column field="order.statusText" title="工单状态" width="100"></vxe-column>
+					<vxe-column field="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="auditName" title="审核人" width="120"></vxe-column>
+					<vxe-column field="auditTime" title="审核时间" width="160">
+						<template #default="{ row }">
+							{{ formatDate(row.auditTime, 'YYYY-mm-dd HH:MM:SS') }}
+						</template>
+					</vxe-column>
+					<vxe-column field="stateText" title="审核状态" width="100"></vxe-column>
+					<vxe-column field="order.currentStepName" title="当前节点" width="120"></vxe-column>
+					<vxe-column field="order.isUrgentText" title="是否紧急" width="90">
+						<template #default="{ row }">
+							<span class="color-danger font-bold">{{ row.order?.isUrgentText }}</span>
+						</template>
+					</vxe-column>
+					<vxe-column field="order.receiveProvinceNo" title="省编码" width="240"></vxe-column>
+					<vxe-column field="order.no" title="工单编码" width="140"></vxe-column>
+					<vxe-column field="order.title" title="工单标题" width="200">
+						<template #default="{ row }">
+							<order-detail :order="row.order" @updateList="queryList">{{ row.order?.title }}</order-detail>
+						</template>
+					</vxe-column>
+					<vxe-column field="order.startTime" title="受理时间" width="160">
+						<template #default="{ row }">
+							{{ formatDate(row.order?.startTime, 'YYYY-mm-dd HH:MM:SS') }}
+						</template>
+					</vxe-column>
+					<vxe-column field="order.expiredTime" title="工单期满时间" width="160">
+						<template #default="{ row }">
+							{{ formatDate(row.order?.expiredTime, 'YYYY-mm-dd HH:MM:SS') }}
+						</template>
+					</vxe-column>
+					<vxe-column field="order.actualHandleOrgName" title="接办部门" width="140"></vxe-column>
+					<vxe-column field="order.acceptType" title="受理类型" width="110"></vxe-column>
+					<vxe-column field="order.hotspotName" title="热点分类" width="150"></vxe-column>
+					<vxe-column field="order.acceptorName" title="受理人" width="120"></vxe-column>
+					<vxe-column title="操作" fixed="right" width="80" align="center">
+						<template #default="{ row }">
+							<el-button type="primary" link @click="onDetail(row)" title="省工单退单明细"> 明细</el-button>
+						</template>
+					</vxe-column>
+				</vxe-table>
+			</div>
+			<pagination
+				@pagination="queryList"
+				:total="state.total"
+				v-model:current-page="state.queryParams.PageIndex"
+				v-model:page-size="state.queryParams.PageSize"
+				:disabled="state.loading"
+			/>
 		</div>
 		<detail-drawer ref="detailDrawerRef" />
 		<!--	更多查询	-->
@@ -100,6 +166,7 @@ import { provinceReturnList } from '@/api/province';
 // 引入组件
 const OrderDetail = defineAsyncComponent(() => import('@/components/OrderDetail/index.vue')); // 工单详情
 const DetailDrawer = defineAsyncComponent(() => import('@/views/province/components/Detail-drawer.vue')); // 明细
+const pagination = defineAsyncComponent(() => import('@/components/ProTable/components/Pagination.vue')); // 分页
 
 // 定义变量内容
 const state = reactive<any>({
@@ -119,63 +186,6 @@ const state = reactive<any>({
 	loading: false, // 加载
 	total: 0, // 总数
 });
-const proTableRef = ref<RefType>(); // 表格ref
-// 表格配置项
-const columns = ref<any[]>([
-	{ prop: 'order.expiredStatusText', label: '超期状态', align: 'center', minWidth: 80 },
-	{ prop: 'order.statusText', label: '工单状态', minWidth: 100 },
-	{ 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: 'auditName', label: '审核人', minWidth: 120 },
-	{
-		prop: 'auditTime',
-		label: '审核时间',
-		minWidth: 160,
-		render: (scope) => {
-			return <span>{formatDate(scope.row.auditTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
-		},
-	},
-	{ prop: 'stateText', label: '审核状态', minWidth: 100 },
-	{ prop: 'order.currentStepName', label: '当前节点', minWidth: 120 },
-	{
-		prop: 'order.isUrgentText',
-		label: '是否紧急',
-		render: (scope) => {
-			return <span class="color-danger font-bold">{scope.row.order?.isUrgentText}</span>;
-		},
-	},
-	{ prop: 'order.receiveProvinceNo', label: '省编码', minWidth: 240 },
-	{ prop: 'order.no', label: '工单编码', minWidth: 140 },
-	{
-		prop: 'order.startTime',
-		label: '受理时间',
-		minWidth: 160,
-		render: (scope) => {
-			return <span>{formatDate(scope.row.order?.startTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
-		},
-	},
-	{ prop: 'order.title', label: '工单标题', minWidth: 200 },
-	{
-		prop: 'order.expiredTime',
-		label: '工单期满时间',
-		minWidth: 160,
-		render: (scope) => {
-			return <span>{formatDate(scope.row.order?.expiredTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
-		},
-	},
-	{ prop: 'order.actualHandleOrgName', label: '接办部门', minWidth: 140 },
-	{ prop: 'order.acceptType', label: '受理类型', minWidth: 100 },
-	{ prop: 'order.hotspotName', label: '热点分类', minWidth: 150 },
-	{ prop: 'order.acceptorName', label: '受理人', minWidth: 120 },
-	{ prop: 'operation', label: '操作', fixed: 'right', width: 80, align: 'center' },
-]);
 // 手动查询，将页码设置为1
 const handleQuery = () => {
 	state.queryParams.PageIndex = 1;
@@ -214,7 +224,12 @@ const detailDrawerRef = ref<RefType>();
 const onDetail = (row: any) => {
 	detailDrawerRef.value.openDrawer(row.id, 'return');
 };
+const tableRef = ref<RefType>();
+const toolbarRef = ref<RefType>();
 onMounted(() => {
 	queryList();
+	if (tableRef.value && toolbarRef.value) {
+		tableRef.value.connect(toolbarRef.value);
+	}
 });
 </script>

src/views/province/screen.vue

@@ -1,21 +1,10 @@
 <template>
 	<div class="province-order-screen-container layout-padding">
 		<div class="layout-padding-auto layout-padding-view pd20">
-			<ProTable
-				ref="proTableRef"
-				:columns="columns"
-				:data="state.tableData"
-				@updateTable="queryList"
-				:loading="state.loading"
-				:total="state.total"
-				v-model:page-index="state.queryParams.PageIndex"
-				v-model:page-size="state.queryParams.PageSize"
-			>
-				<template #table-search>
-					<el-form :model="state.queryParams" ref="ruleFormRef" @submit.native.prevent inline>
-								<el-form-item label="审核状态" prop="State">
-									<el-segmented
-										:options="[
+			<el-form :model="state.queryParams" ref="ruleFormRef" @submit.native.prevent inline>
+				<el-form-item label="审核状态" prop="State">
+					<el-segmented
+						:options="[
 											{
 												value: '0',
 												label: '申请中',
@@ -29,35 +18,112 @@
 												label: '不同意',
 											},
 										]"
-										v-model="state.queryParams.State"
-										@change="handleQuery"
-										:disabled="state.loading"
-									/>
-								</el-form-item>
-								<el-form-item label="工单标题" prop="Title">
-									<el-input v-model="state.queryParams.Title" placeholder="工单标题" clearable @keyup.enter="handleQuery" class="keyword-input"/>
-								</el-form-item>
-								<el-form-item label="工单编码" prop="No">
-									<el-input v-model="state.queryParams.No" placeholder="工单编码" clearable @keyup.enter="handleQuery" class="keyword-input"/>
-								</el-form-item>
-								<el-form-item label="">
-										<el-button type="primary" @click="handleQuery" :loading="state.loading">
-											<SvgIcon name="ele-Search" class="mr5" />查询
-										</el-button>
-										<el-button @click="drawer = true" class="default-button"> <SvgIcon name="ele-Search" class="mr5" />更多查询</el-button>
-								</el-form-item>
-					</el-form>
-				</template>
-				<template #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>
-				<template #operation="{ row }">
-					<el-button type="primary" link @click="onDetail(row)" title="省工单甄别明细"> 明细</el-button>
-				</template>
-			</ProTable>
+						v-model="state.queryParams.State"
+						@change="handleQuery"
+						:disabled="state.loading"
+					/>
+				</el-form-item>
+				<el-form-item label="工单标题" prop="Title">
+					<el-input v-model="state.queryParams.Title" placeholder="工单标题" clearable @keyup.enter="handleQuery" class="keyword-input"/>
+				</el-form-item>
+				<el-form-item label="工单编码" prop="No">
+					<el-input v-model="state.queryParams.No" placeholder="工单编码" clearable @keyup.enter="handleQuery" class="keyword-input"/>
+				</el-form-item>
+				<el-form-item label="">
+					<el-button type="primary" @click="handleQuery" :loading="state.loading">
+						<SvgIcon name="ele-Search" class="mr5" />查询
+					</el-button>
+					<el-button @click="drawer = true" class="default-button"> <SvgIcon name="ele-Search" class="mr5" />更多查询</el-button>
+				</el-form-item>
+			</el-form>
+			<vxe-toolbar
+				ref="toolbarRef"
+				:loading="state.loading"
+				custom
+				:refresh="{
+					queryMethod: handleQuery,
+				}"
+			>
+			</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="provinceScreen"
+					:custom-config="{
+						storage: true,
+					}"
+					showHeaderOverflow
+				>
+					<vxe-column field="order.expiredStatusText" title="超期状态" width="90" align="center">
+						<template #default="{ row }">
+							<span :class="'overdue-status-' + row.order?.expiredStatus" :title="row.order?.expiredStatusText"></span>
+						</template>
+					</vxe-column>
+					<vxe-column field="order.statusText" title="工单状态" width="100"></vxe-column>
+					<vxe-column field="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="auditName" title="审核人" width="120"></vxe-column>
+					<vxe-column field="auditTime" title="审核时间" width="160">
+						<template #default="{ row }">
+							{{ formatDate(row.auditTime, 'YYYY-mm-dd HH:MM:SS') }}
+						</template>
+					</vxe-column>
+					<vxe-column field="stateText" title="审核状态" width="100"></vxe-column>
+					<vxe-column field="order.currentStepName" title="当前节点" width="120"></vxe-column>
+					<vxe-column field="order.isUrgentText" title="是否紧急" width="90">
+						<template #default="{ row }">
+							<span class="color-danger font-bold">{{ row.order?.isUrgentText }}</span>
+						</template>
+					</vxe-column>
+					<vxe-column field="order.receiveProvinceNo" title="省编码" width="240"></vxe-column>
+					<vxe-column field="order.no" title="工单编码" width="140"></vxe-column>
+					<vxe-column field="order.title" title="工单标题" width="200">
+						<template #default="{ row }">
+							<order-detail :order="row.order" @updateList="queryList">{{ row.order?.title }}</order-detail>
+						</template>
+					</vxe-column>
+					<vxe-column field="order.startTime" title="受理时间" width="160">
+						<template #default="{ row }">
+							{{ formatDate(row.order?.startTime, 'YYYY-mm-dd HH:MM:SS') }}
+						</template>
+					</vxe-column>
+					<vxe-column field="order.expiredTime" title="工单期满时间" width="160">
+						<template #default="{ row }">
+							{{ formatDate(row.order?.expiredTime, 'YYYY-mm-dd HH:MM:SS') }}
+						</template>
+					</vxe-column>
+					<vxe-column field="order.actualHandleOrgName" title="接办部门" width="140"></vxe-column>
+					<vxe-column field="order.acceptType" title="受理类型" width="110"></vxe-column>
+					<vxe-column field="order.hotspotName" title="热点分类" width="150"></vxe-column>
+					<vxe-column field="order.acceptorName" title="受理人" width="120"></vxe-column>
+					<vxe-column title="操作" fixed="right" width="80" align="center">
+						<template #default="{ row }">
+							<el-button type="primary" link @click="onDetail(row)" title="省工单甄别明细"> 明细</el-button>
+						</template>
+					</vxe-column>
+				</vxe-table>
+			</div>
+			<pagination
+				@pagination="queryList"
+				:total="state.total"
+				v-model:current-page="state.queryParams.PageIndex"
+				v-model:page-size="state.queryParams.PageSize"
+				:disabled="state.loading"
+			/>
 		</div>
 		<detail-drawer ref="detailDrawerRef" />
 		<!--	更多查询	-->
@@ -102,6 +168,7 @@ import { provinceIdentifyList } from '@/api/province';
 // 引入组件
 const OrderDetail = defineAsyncComponent(() => import('@/components/OrderDetail/index.vue')); // 工单详情
 const DetailDrawer = defineAsyncComponent(() => import('@/views/province/components/Detail-drawer.vue')); // 明细
+const pagination = defineAsyncComponent(() => import('@/components/ProTable/components/Pagination.vue')); // 分页
 
 // 定义变量内容
 const state = reactive<any>({
@@ -121,63 +188,6 @@ const state = reactive<any>({
 	loading: false, // 加载
 	total: 0, // 总数
 });
-const proTableRef = ref<RefType>(); // 表格ref
-// 表格配置项
-const columns = ref<any[]>([
-	{ prop: 'order.expiredStatusText', label: '超期状态', align: 'center', minWidth: 80 },
-	{ prop: 'order.statusText', label: '工单状态', minWidth: 100 },
-	{ 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: 'auditName', label: '审核人', minWidth: 120 },
-	{
-		prop: 'auditTime',
-		label: '审核时间',
-		minWidth: 160,
-		render: (scope) => {
-			return <span>{formatDate(scope.row.auditTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
-		},
-	},
-	{ prop: 'statusText', label: '审核状态', minWidth: 100 },
-	{ prop: 'order.currentStepName', label: '当前节点', minWidth: 120 },
-	{
-		prop: 'order.isUrgentText',
-		label: '是否紧急',
-		render: (scope) => {
-			return <span class="color-danger font-bold">{scope.row.order?.isUrgentText}</span>;
-		},
-	},
-	{ prop: 'order.receiveProvinceNo', label: '省编码', minWidth: 240 },
-	{ prop: 'order.no', label: '工单编码', minWidth: 140 },
-	{
-		prop: 'order.startTime',
-		label: '受理时间',
-		minWidth: 160,
-		render: (scope) => {
-			return <span>{formatDate(scope.row.order?.startTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
-		},
-	},
-	{ prop: 'order.title', label: '工单标题', minWidth: 200 },
-	{
-		prop: 'order.expiredTime',
-		label: '工单期满时间',
-		minWidth: 160,
-		render: (scope) => {
-			return <span>{formatDate(scope.row.order?.expiredTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
-		},
-	},
-	{ prop: 'order.actualHandleOrgName', label: '接办部门', minWidth: 140 },
-	{ prop: 'order.acceptType', label: '受理类型', minWidth: 100 },
-	{ prop: 'order.hotspotName', label: '热点分类', minWidth: 150 },
-	{ prop: 'order.acceptorName', label: '受理人', minWidth: 120 },
-	{ prop: 'operation', label: '操作', fixed: 'right', width: 80, align: 'center' },
-]);
 // 手动查询，将页码设置为1
 const handleQuery = () => {
 	state.queryParams.PageIndex = 1;
@@ -216,7 +226,12 @@ const detailDrawerRef = ref<RefType>();
 const onDetail = (row: any) => {
 	detailDrawerRef.value.openDrawer(row.id, 'screen');
 };
+const tableRef = ref<RefType>();
+const toolbarRef = ref<RefType>();
 onMounted(() => {
 	queryList();
+	if (tableRef.value && toolbarRef.value) {
+		tableRef.value.connect(toolbarRef.value);
+	}
 });
 </script>

src/views/province/zmhd/index.vue

@@ -1,63 +1,120 @@
 <template>
 	<div class="province-zmhd-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="IsProvinceZmhd">
+					<el-segmented
+						:options="[
+							{
+								value: '',
+								label: '全部',
+							},
+							{
+								value: 'false',
+								label: '未处理',
+							},
+							{
+								value: 'true',
+								label: '已公开',
+							},
+						]"
+						v-model="state.queryParams.IsProvinceZmhd"
+						@change="handleQuery"
+						:disabled="state.loading"
+					/>
+				</el-form-item>
+				<el-form-item label="工单标题" prop="Keyword">
+					<el-input v-model="state.queryParams.Keyword" placeholder="工单标题" clearable @keyup.enter="handleQuery" class="keyword-input" />
+				</el-form-item>
+				<el-form-item label="工单编码" prop="No">
+					<el-input v-model="state.queryParams.No" placeholder="工单编码" clearable @keyup.enter="handleQuery" class="keyword-input" />
+				</el-form-item>
+				<el-form-item label="">
+					<el-button type="primary" @click="handleQuery" :loading="state.loading"> <SvgIcon name="ele-Search" class="mr5" />查询 </el-button>
+					<el-button @click="drawer = true" class="default-button"> <SvgIcon name="ele-Search" class="mr5" />更多查询</el-button>
+				</el-form-item>
+			</el-form>
+			<vxe-toolbar
+				ref="toolbarRef"
 				:loading="state.loading"
+				custom
+				:refresh="{
+					queryMethod: handleQuery,
+				}"
+			>
+			</vxe-toolbar>
+			<div style="overflow: hidden; width: 100%; height: 100%; flex: 1">
+				<vxe-table
+					border
+					:loading="state.loading"
+					:data="state.tableData"
+					:column-config="{ resizable: true }"
+					:row-config="{ isCurrent: true, isHover: true, height: 30 }"
+					ref="tableRef"
+					height="auto"
+					auto-resize
+					show-overflow
+					:print-config="{}"
+					:scrollY="{ enabled: true, gt: 0 }"
+					id="provinceZmhd"
+					: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.order?.expiredStatusText"></span>
+						</template>
+					</vxe-column>
+					<vxe-column field="statusText" title="工单状态" width="100"></vxe-column>
+					<vxe-column field="isProvinceZmhd" title="公开状态" width="100">
+						<template #default="{ row }">
+							<span>{{ row.isProvinceZmhd ? '已公开' : '未处理' }}</span>
+						</template>
+					</vxe-column>
+					<vxe-column field="currentStepName" title="当前节点" width="120"></vxe-column>
+					<vxe-column field="isUrgentText" title="是否紧急" width="160">
+						<template #default="{ row }">
+							<span class="color-danger font-bold">{{ row.isUrgentText }}</span>
+						</template>
+					</vxe-column>
+					<vxe-column field="receiveProvinceNo" title="省编码" width="240"></vxe-column>
+					<vxe-column field="no" title="工单编码" width="140"></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="order" title="工单标题" width="200">
+						<template #default="{ row }">
+							<order-detail :order="row" @updateList="queryList">{{ row.title }}</order-detail>
+						</template>
+					</vxe-column>
+					<vxe-column field="expiredTime" title="工单期满时间" width="160">
+						<template #default="{ row }">
+							{{ formatDate(row.expiredTime, 'YYYY-mm-dd HH:MM:SS') }}
+						</template>
+					</vxe-column>
+					<vxe-column field="actualHandleOrgName" title="接办部门" width="140"></vxe-column>
+					<vxe-column field="acceptType" title="受理类型" width="110"></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="80" align="center">
+						<template #default="{ row }">
+							<el-button link type="primary" v-if="row.isProvinceZmhd" @click="onDetail(row)">明细</el-button>
+							<el-button link type="primary" v-else @click="onPublic(row)">公开</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" @submit.native.prevent inline>
-						<el-form-item label="快捷查询" prop="IsProvinceZmhd">
-							<el-segmented
-								:options="[
-									{
-										value: '',
-										label: '全部',
-									},
-									{
-										value: 'false',
-										label: '未处理',
-									},
-									{
-										value: 'true',
-										label: '已公开',
-									},
-								]"
-								v-model="state.queryParams.IsProvinceZmhd"
-								@change="handleQuery"
-								:disabled="state.loading"
-							/>
-						</el-form-item>
-						<el-form-item label="工单标题" prop="Keyword">
-							<el-input v-model="state.queryParams.Keyword" placeholder="工单标题" clearable @keyup.enter="handleQuery" class="keyword-input" />
-						</el-form-item>
-						<el-form-item label="工单编码" prop="No">
-							<el-input v-model="state.queryParams.No" placeholder="工单编码" clearable @keyup.enter="handleQuery" class="keyword-input" />
-						</el-form-item>
-						<el-form-item label="">
-							<el-button type="primary" @click="handleQuery" :loading="state.loading"> <SvgIcon name="ele-Search" class="mr5" />查询 </el-button>
-							<el-button @click="drawer = true" class="default-button"> <SvgIcon name="ele-Search" class="mr5" />更多查询</el-button>
-						</el-form-item>
-					</el-form>
-				</template>
-				<template #expiredStatusText="{ row }">
-					<span :class="'overdue-status-' + row.expiredStatus" :title="row.expiredStatusText"></span>
-				</template>
-				<template #title="{ row }">
-					<order-detail :order="row" @updateList="queryList">{{ row.title }}</order-detail>
-				</template>
-				<!-- 表格操作 -->
-				<template #operation="{ row }">
-					<el-button link type="primary" v-if="row.isProvinceZmhd" @click="onDetail(row)">明细</el-button>
-					<el-button link type="primary" v-else @click="onPublic(row)">公开</el-button>
-				</template>
-			</ProTable>
+				:disabled="state.loading"
+			/>
 		</div>
 		<!--  公开  -->
 		<public-handle ref="publicHandleRef" @updateList="queryList" />
@@ -111,6 +168,7 @@ import { provinceZmhdList } from '@/api/province';
 const OrderDetail = defineAsyncComponent(() => import('@/components/OrderDetail/index.vue')); // 工单详情
 const PublicHandle = defineAsyncComponent(() => import('@/views/province/zmhd/components/Public-handle.vue')); // 公开
 const PublicDetail = defineAsyncComponent(() => import('@/views/province/zmhd/components/Public-detail.vue')); // 公开详情
+const pagination = defineAsyncComponent(() => import('@/components/ProTable/components/Pagination.vue')); // 分页
 
 // 定义变量内容
 const state = reactive<any>({
@@ -132,58 +190,13 @@ const state = reactive<any>({
 	loading: false, // 加载
 	total: 0, // 总数
 });
-const proTableRef = ref<RefType>(); // 表格ref
-// 表格配置项
-const columns = ref<any[]>([
-	{ prop: 'expiredStatusText', label: '超期状态', align: 'center', width: 80 },
-	{ prop: 'statusText', label: '工单状态', width: 100 },
-	{
-		prop: 'isProvinceZmhd',
-		label: '公开',
-		render: (scope) => {
-			return <span>{scope.row.isProvinceZmhd ? '已公开' : '未处理'}</span>;
-		},
-	},
-	{ prop: 'currentStepName', label: '当前节点', width: 100 },
-	{
-		prop: 'isUrgentText',
-		label: '是否紧急',
-		render: (scope) => {
-			return <span class="color-danger font-bold">{scope.row.isUrgentText}</span>;
-		},
-	},
-	{ prop: 'receiveProvinceNo', label: '省编码', minWidth: 230 },
-	{ prop: 'no', label: '工单编码', width: 140 },
-	{
-		prop: 'startTime',
-		label: '受理时间',
-		width: 160,
-		render: (scope) => {
-			return <span>{formatDate(scope.row.startTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
-		},
-	},
-	{ prop: 'title', label: '工单标题', width: 200 },
-	{
-		prop: 'expiredTime',
-		label: '工单期满时间',
-		width: 160,
-		render: (scope) => {
-			return <span>{formatDate(scope.row.expiredTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
-		},
-	},
-	{ prop: 'actualHandleOrgName', label: '接办部门', width: 140 },
-	{ prop: 'acceptType', label: '受理类型', width: 100 },
-	{ prop: 'hotspotName', label: '热点分类', width: 150 },
-	{ prop: 'acceptorName', label: '受理人', width: 120 },
-	{ prop: 'operation', label: '操作', fixed: 'right', width: 80, align: 'center' },
-]);
 // 手动查询，将页码设置为1
 const handleQuery = () => {
 	state.queryParams.PageIndex = 1;
 	queryList();
 };
 /** 获取列表 */
-const requestParams = ref({});
+const requestParams = ref<EmptyObjectType>({});
 const queryList = () => {
 	requestParams.value = Other.deepClone(state.queryParams);
 	requestParams.value.StartTime = state.queryParams.auditTime === null ? null : state.queryParams.auditTime[0]; // 审核时间
@@ -222,7 +235,12 @@ const publicHandleRef = ref<RefType>();
 const onPublic = (row: any) => {
 	publicHandleRef.value.openDrawer(row);
 };
+const tableRef = ref<RefType>();
+const toolbarRef = ref<RefType>();
 onMounted(() => {
 	queryList();
+	if (tableRef.value && toolbarRef.value) {
+		tableRef.value.connect(toolbarRef.value);
+	}
 });
 </script>