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

src/views/business/terminate/apply.vue

@@ -1,45 +1,107 @@
 <template>
 	<div class="business-terminate-apply-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 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>
+			<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="businessTerminateApply"
+					: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="currentStepName" title="当前节点" width="120"></vxe-column>
+					<vxe-column field="no" title="工单编码" 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="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="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="120"></vxe-column>
+					<vxe-column field="hotspotName" title="热点分类" width="150"></vxe-column>
+					<vxe-column title="操作" fixed="right" width="240" align="center">
+						<template #default="{ row }">
+							<el-button link type="primary" @click="onDetail(row)" title="终止明细" v-if="row.orderTerminates?.length"> 终止明细 </el-button>
+							<el-button link type="primary" @click="onProcessDetail(row)" title="流程明细" v-if="row.orderTerminates?.length"> 流程明细 </el-button>
+							<el-button
+								link
+								type="primary"
+								@click="onReApply(row)"
+								title="重提申请"
+								v-auth="'business:terminate:apply:apply'"
+								v-if="row.orderTerminates?.length"
+							>
+								重提申请
+							</el-button>
+							<el-button link type="primary" @click="onApply(row)" title="终止申请" v-auth="'business:terminate:apply:apply'" v-else>
+								终止申请
+							</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 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 #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" @click="onDetail(row)" title="终止明细" v-if="row.orderTerminates?.length"> 终止明细 </el-button>
-					<el-button link type="primary" @click="onProcessDetail(row)" title="流程明细" v-if="row.orderTerminates?.length"> 流程明细 </el-button>
-					<el-button link type="primary" @click="onReApply(row)" title="重提申请" v-auth="'business:terminate:apply:apply'"  v-if="row.orderTerminates?.length"> 重提申请 </el-button>
-					<el-button link type="primary" @click="onApply(row)" title="终止申请" v-auth="'business:terminate:apply:apply'" v-else> 终止申请 </el-button>
-				</template>
-			</ProTable>
+				:disabled="state.loading"
+			/>
 		</div>
 		<!--	更多查询	-->
 		<el-drawer v-model="drawer" title="更多查询" size="500px">
@@ -102,6 +164,7 @@ const ProcessAudit = defineAsyncComponent(() => import('@/components/ProcessAudi
 const AuditRecord = defineAsyncComponent(() => import('@/components/AuditRecord/index.vue')); // 流程明细
 const TerminateDetail = defineAsyncComponent(() => import('@/views/business/terminate/components/Terminate-detail.vue')); // 终止详情
 const TerminateEdit = defineAsyncComponent(() => import('@/views/business/terminate/components/Terminate-edit.vue')); // 重提申请
+const pagination = defineAsyncComponent(() => import('@/components/ProTable/components/Pagination.vue')); // 分页
 
 // 定义变量内容
 const state = reactive<any>({
@@ -121,51 +184,6 @@ const state = reactive<any>({
 	loading: false, // 加载
 	total: 0, // 总数
 });
-const proTableRef = ref<RefType>(); // 表格ref
-// 表格配置项
-const columns = ref<any[]>([
-	{ type: 'selection', minWidth: 40, align: 'center' },
-	{ prop: 'expiredStatusText', label: '超期状态', minWidth: 80, align: 'center' },
-	{ prop: 'currentStepName', label: '流程节点', minWidth: 120 },
-	{ prop: 'no', label: '工单编码', minWidth: 140 },
-	{
-		prop: 'startTime',
-		label: '受理时间',
-		minWidth: 160,
-		render: (scope:any) => {
-			return <span>{formatDate(scope.row.startTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
-		},
-	},
-	{ prop: 'title', label: '工单标题', minWidth: 200 },
-	{
-		prop: 'expiredTime',
-		label: '工单期满时间',
-		minWidth: 160,
-		render: (scope:any) => {
-			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:any) => {
-			return <span>{formatDate(scope.row.actualHandleTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
-		},
-	},
-	{
-		prop: 'filedTime',
-		label: '办结时间',
-		minWidth: 160,
-		render: (scope:any) => {
-			return <span>{formatDate(scope.row.filedTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
-		},
-	},
-	{ prop: 'acceptType', label: '受理类型', minWidth: 100 },
-	{ prop: 'hotspotName', label: '热点分类', minWidth: 150 },
-	{ prop: 'operation', label: '操作', fixed: 'right', minWidth: 240, align: 'center' },
-]);
 // 手动查询，将页码设置为1
 const handleQuery = () => {
 	state.queryParams.PageIndex = 1;
@@ -204,21 +222,21 @@ const resetQuery = (formEl: FormInstance | undefined) => {
 };
 // 流程明细
 const auditRecordRef = ref<RefType>();
-const onProcessDetail = (row:any)=>{
+const onProcessDetail = (row: any) => {
 	const params = {
 		dialogTitle: `终止记录 （${row?.title}）`,
 		...row,
 	};
 	auditRecordRef.value.openDialog(params);
-}
+};
 // 终止申请
 const processAuditRef = ref<RefType>();
-const onApply = (row:any)=>{
+const onApply = (row: any) => {
 	const params = {
 		id: row.id,
 		commonEnum: commonEnum.OrderCirculation,
 		processType: '终止申请',
-		orderDetail:row,
+		orderDetail: row,
 		extra: {
 			dialogTitle: '终止申请',
 			inputPlaceholder: '请填写终止理由',
@@ -226,24 +244,29 @@ const onApply = (row:any)=>{
 		},
 	};
 	processAuditRef.value.openDialog(params);
-}
+};
 // 终止详情
 const terminateDetailRef = ref<RefType>();
-const onDetail = (row:any)=>{
-	const req =  {
-		id:row.orderTerminates[0].id,
-	}
+const onDetail = (row: any) => {
+	const req = {
+		id: row.orderTerminates[0].id,
+	};
 	terminateDetailRef.value.openDialog(req);
-}
+};
 // 重提申请
 const terminateEditRef = ref<RefType>();
-const onReApply = (row:any)=>{
-	const req =  {
-		id:row.orderTerminates[0].id,
-	}
-	terminateEditRef.value.openDialog(req)
-}
+const onReApply = (row: any) => {
+	const req = {
+		id: row.orderTerminates[0].id,
+	};
+	terminateEditRef.value.openDialog(req);
+};
+const toolbarRef = ref<RefType>();
+const tableRef = ref<RefType>();
 onMounted(() => {
 	queryList();
+	if (tableRef.value && toolbarRef.value) {
+		tableRef.value.connect(toolbarRef.value);
+	}
 });
-</script>
+</script>

src/views/business/terminate/audit.vue

@@ -5,79 +5,90 @@
 				<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="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>
+			<vxe-toolbar
+				ref="toolbarRef"
 				:loading="state.loading"
-				:total="state.total"
-				v-model:page-index="state.queryParams.PageIndex"
-				v-model:page-size="state.queryParams.PageSize"
-				v-if="state.queryParams.AuditStatus === 1"
+				custom
+				:refresh="{
+					queryMethod: handleQuery,
+				}"
 			>
-				<template #table-search>
-					<el-form :model="state.queryParams" ref="ruleFormRef" @submit.native.prevent 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 #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 link type="primary" @click="onDetail(row)" title="终止详情"> 终止详情 </el-button>
-					<el-button link type="primary" @click="onProcessDetail(row)" title="流程明细"> 流程明细 </el-button>
-					<el-button link type="primary" @click="onEdit(row)" title="理由修改" v-auth="'business:terminate:audit:edit'"> 理由修改 </el-button>
-				</template>
-			</ProTable>
-			<ProTable
-				ref="proTableRef"
-				:columns="columnsDone"
-				:data="state.tableData"
-				@updateTable="queryList"
-				:loading="state.loading"
+			</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="businessTerminateAudit"
+					: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.no" title="工单编码" width="140"></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="stateText" title="终止状态" width="100">
+						<template #default="{ row }">
+							<span class="color-danger">{{ row.statusText }}</span>
+						</template>
+					</vxe-column>
+					<vxe-column field="creatorName" title="申请人" width="120"></vxe-column>
+					<vxe-column field="creatorOrgName" title="申请部门" width="140"></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.acceptType" title="受理类型" width="120"></vxe-column>
+					<vxe-column field="order.hotspotName" title="热点分类" width="150"></vxe-column>
+					<vxe-column title="操作" fixed="right" width="240" align="center" v-if="state.queryParams.AuditStatus === 1">
+						<template #default="{ row }">
+							<el-button link type="primary" @click="onDetail(row)" title="终止详情"> 终止详情 </el-button>
+							<el-button link type="primary" @click="onProcessDetail(row)" title="流程明细"> 流程明细 </el-button>
+							<el-button link type="primary" @click="onEdit(row)" title="理由修改" v-auth="'business:terminate:audit:edit'"> 理由修改 </el-button>
+						</template>
+					</vxe-column>
+					<vxe-column title="操作" fixed="right" width="160" align="center" v-else>
+						<template #default="{ row }">
+							<el-button link type="primary" @click="onDetail(row)" title="终止详情"> 终止详情 </el-button>
+							<el-button link type="primary" @click="onProcessDetail(row)" 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"
-				v-else
-			>
-				<template #table-search>
-					<el-form :model="state.queryParams" ref="ruleFormRef" @submit.native.prevent inline>
-						<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 link type="primary" @click="onDetail(row)" title="终止详情"> 终止详情 </el-button>
-					<el-button link type="primary" @click="onProcessDetail(row)" title="流程明细"> 流程明细 </el-button>
-				</template>
-			</ProTable>
+				:disabled="state.loading"
+			/>
 		</div>
 		<!--	更多查询	-->
 		<el-drawer v-model="drawer" title="更多查询" size="500px">
@@ -144,6 +155,7 @@ const AuditRecord = defineAsyncComponent(() => import('@/components/AuditRecord/
 const ProcessAudit = defineAsyncComponent(() => import('@/components/ProcessAudit/index.vue')); // 流程审批
 const TerminateDetail = defineAsyncComponent(() => import('@/views/business/terminate/components/Terminate-detail.vue')); // 终止详情
 const TerminateEditContent = defineAsyncComponent(() => import('@/views/business/terminate/components/Terminate-edit-content.vue')); // 修改理由
+const pagination = defineAsyncComponent(() => import('@/components/ProTable/components/Pagination.vue')); // 分页
 // 定义变量内容
 const state = reactive<any>({
 	queryParams: {
@@ -165,63 +177,7 @@ 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: 'order.expiredStatusText', label: '超期状态', align: 'center', minWidth: 80 },
-	{ prop: 'order.no', label: '工单编码', minWidth: 140 },
-	{
-		prop: 'statusText',
-		label: '终止状态',
-		minWidth: 140,
-		render: (scope: any) => {
-			return <span class="color-danger">{scope.row.statusText}</span>;
-		},
-	},
-	{ prop: 'order.title', label: '工单标题', minWidth: 200 },
-	{ prop: 'creatorOrgName', label: '申请部门', minWidth: 140 },
-	{ prop: 'creatorName', label: '申请人', minWidth: 140 },
-	{
-		prop: 'creationTime',
-		label: '申请时间',
-		minWidth: 160,
-		render: (scope: any) => {
-			return <span>{formatDate(scope.row.creationTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
-		},
-	},
-	{ prop: 'order.acceptType', label: '受理类型', minWidth: 100 },
-	{ prop: 'order.hotspotName', label: '热点分类', minWidth: 150 },
-	{ prop: 'operation', label: '操作', fixed: 'right', minWidth: 220, align: 'center' },
-]);
-const columnsDone = ref<any[]>([
-	{ type: 'selection', minWidth: 40, align: 'center' },
-	{ prop: 'order.expiredStatusText', label: '超期状态', align: 'center', minWidth: 80 },
-	{ prop: 'order.no', label: '工单编码', minWidth: 140 },
-	{
-		prop: 'statusText',
-		label: '终止状态',
-		minWidth: 140,
-		render: (scope: any) => {
-			return <span class="color-danger">{scope.row.statusText}</span>;
-		},
-	},
-	{ prop: 'order.title', label: '工单标题', minWidth: 200 },
-	{ prop: 'creatorOrgName', label: '申请部门', minWidth: 140 },
-	{ prop: 'creatorName', label: '申请人', minWidth: 140 },
-	{
-		prop: 'creationTime',
-		label: '申请时间',
-		minWidth: 160,
-		render: (scope: any) => {
-			return <span>{formatDate(scope.row.creationTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
-		},
-	},
-	{ prop: 'order.acceptType', label: '受理类型', minWidth: 100 },
-	{ prop: 'order.hotspotName', label: '热点分类', minWidth: 150 },
-	{ prop: 'operation', label: '操作', fixed: 'right', minWidth: 160, align: 'center' },
-]);
 // 手动查询，将页码设置为1
 const handleQuery = () => {
 	state.queryParams.PageIndex = 1;
@@ -232,7 +188,6 @@ const requestParams = ref<EmptyObjectType>({});
 const queryList = async () => {
 	state.loading = true;
 	try {
-		columns.value = state.queryParams.AuditStatus === 1 ? columnsDone.value : columnsTodo.value;
 		requestParams.value = other.deepClone(state.queryParams);
 		requestParams.value.ApplyStartTime = state.queryParams.crTime === null ? null : state.queryParams.crTime[0];
 		requestParams.value.ApplyEndTime = state.queryParams.crTime === null ? null : state.queryParams.crTime[1];
@@ -273,14 +228,14 @@ const getBaseData = async () => {
 };
 // 理由修改
 const terminateEditRef = ref<RefType>();
-const onEdit = (row:any)=>{
+const onEdit = (row: any) => {
 	terminateEditRef.value.openDialog(row);
-}
+};
 // 终止详情
 const terminateDetailRef = ref<RefType>();
-const onDetail = (row:any)=>{
+const onDetail = (row: any) => {
 	terminateDetailRef.value.openDialog(row);
-}
+};
 // 流程明细
 const auditRecordRef = ref<RefType>();
 const onProcessDetail = (row: any) => {
@@ -290,8 +245,13 @@ const onProcessDetail = (row: any) => {
 	};
 	auditRecordRef.value.openDialog(params);
 };
+const toolbarRef = ref<RefType>();
+const tableRef = ref<RefType>();
 onMounted(() => {
-	getBaseData();
 	queryList();
+	if (tableRef.value && toolbarRef.value) {
+		tableRef.value.connect(toolbarRef.value);
+	}
+	getBaseData();
 });
 </script>

src/views/business/terminate/index.vue

@@ -1,56 +1,97 @@
 <template>
 	<div class="business-terminate-index-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 class="mb10" inline>
+				<el-form-item label="数据范围" prop="QueryType">
+					<el-segmented
+						:options="[
+							{ label: '全部', value: '0' },
+							{ label: '我的', value: '1' },
+						]"
+						v-model="state.queryParams.QueryType"
+						@change="handleQuery"
+						:disabled="state.loading"
+					/>
+				</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 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"
+				custom
+				:refresh="{
+					queryMethod: handleQuery,
+				}"
+				:tools="[{ toolRender: { name: 'exportCurrent' } }, { toolRender: { name: 'exportAll' } }]"
+			>
+			</vxe-toolbar>
+			<div style="overflow: hidden; width: 100%; height: 100%; flex: 1">
+				<vxe-table
+					border
+					:loading="state.loading"
+					:data="state.tableData"
+					:column-config="{ resizable: true }"
+					:row-config="{ isCurrent: true, isHover: true, height: 30 }"
+					ref="tableRef"
+					height="auto"
+					auto-resize
+					show-overflow
+					:scrollY="{ enabled: true, gt: 0 }"
+					id="businessTerminateIndex"
+					:custom-config="{ storage: true }"
+					showHeaderOverflow
+					:params="{ exportMethod: exportTerminateList, exportParams: requestParams }"
+				>
+					<vxe-column field="order.expiredStatusText" title="超期状态" width="90" align="center">
+						<template #default="{ row }">
+							<span :class="'overdue-status-' + row.order?.expiredStatus" :title="row.order?.expiredStatusText"></span>
+						</template>
+					</vxe-column>
+					<vxe-column field="order.no" title="工单编码" width="140"></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="stateText" title="终止状态" width="100">
+						<template #default="{ row }">
+							<span class="color-danger">{{ row.statusText }}</span>
+						</template>
+					</vxe-column>
+					<vxe-column field="creatorName" title="申请人" width="120"></vxe-column>
+					<vxe-column field="creatorOrgName" title="申请部门" width="140"></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.acceptType" title="受理类型" width="120"></vxe-column>
+					<vxe-column field="order.hotspotName" title="热点分类" width="150"></vxe-column>
+					<vxe-column title="操作" fixed="right" width="160" align="center">
+						<template #default="{ row }">
+							<el-button link type="primary" @click="onDetail(row)" title="终止详情"> 终止详情 </el-button>
+							<el-button link type="primary" @click="onProcessDetail(row)" 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"
-				:toolButton="['refresh', 'setting', 'exportCurrent', 'exportAll']"
-				:exportMethod="exportTerminateList"
-				:exportParams="requestParams"
-			>
-				<template #table-search>
-					<el-form :model="state.queryParams" ref="ruleFormRef" @submit.native.prevent class="mb10" inline>
-						<el-form-item label="数据范围" prop="QueryType">
-							<el-segmented
-								:options="[
-									{ label: '全部', value: '0' },
-										{ label: '我的', value: '1' },
-								]"
-								v-model="state.queryParams.QueryType"
-								@change="handleQuery"
-								:disabled="state.loading"
-							/>
-						</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 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 #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 link type="primary" @click="onDetail(row)" title="终止详情"> 终止详情 </el-button>
-					<el-button link type="primary" @click="onProcessDetail(row)" title="流程明细"> 流程明细 </el-button>
-				</template>
-			</ProTable>
+				:disabled="state.loading"
+			/>
 		</div>
 		<!-- 工单平移 -->
 		<order-migration ref="orderMigrationRef" @updateList="queryList" />
@@ -115,6 +156,7 @@ const OrderDetail = defineAsyncComponent(() => import('@/components/OrderDetail/
 const OrderMigration = defineAsyncComponent(() => import('@/views/todo/center/Order-migration.vue')); // 工单平移
 const AuditRecord = defineAsyncComponent(() => import('@/components/AuditRecord/index.vue')); // 流程明细
 const TerminateDetail = defineAsyncComponent(() => import('@/views/business/terminate/components/Terminate-detail.vue')); // 终止详情
+const pagination = defineAsyncComponent(() => import('@/components/ProTable/components/Pagination.vue')); // 分页
 
 // 定义变量内容
 const state = reactive<any>({
@@ -129,46 +171,18 @@ const state = reactive<any>({
 		slTime: [], // 受理时间
 		StartTime: null, // 受理开始时间
 		EndTime: null, // 受理结束时间
-		Status:null, // 审核状态
-		QueryType:'0', // 数据范围
+		Status: null, // 审核状态
+		QueryType: '0', // 数据范围
 	},
 	tableData: [], //表单
 	loading: false, // 加载
 	total: 0, // 总数
 });
-const proTableRef = ref<RefType>(); // 表格ref
-// 表格配置项
-const columns = ref<any[]>([
-	{ prop: 'order.expiredStatusText', label: '超期状态', align: 'center', minWidth: 80 },
-	{ prop: 'order.no', label: '工单编码', minWidth: 140 },
-	{
-		prop: 'statusText',
-		label: '终止状态',
-		minWidth: 140,
-		render: (scope: any) => {
-			return <span class="color-danger">{scope.row.statusText}</span>;
-		},
-	},
-	{ prop: 'order.title', label: '工单标题', minWidth: 200 },
-	{ prop: 'creatorOrgName', label: '申请部门', minWidth: 140 },
-	{ prop: 'creatorName', label: '申请人', minWidth: 140 },
-	{
-		prop: 'creationTime',
-		label: '申请时间',
-		minWidth: 160,
-		render: (scope: any) => {
-			return <span>{formatDate(scope.row.creationTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
-		},
-	},
-	{ prop: 'order.acceptType', label: '受理类型', minWidth: 100 },
-	{ prop: 'order.hotspotName', label: '热点分类', minWidth: 150 },
-	{ prop: 'operation', label: '操作', fixed: 'right', minWidth: 160, align: 'center' },
-]);
 // 获取查询条件基础信息
-const statusOptions = ref<EmptyArrayType>([])
+const statusOptions = ref<EmptyArrayType>([]);
 const getBaseData = async () => {
 	try {
-		const {result} = await terminatesListBase();
+		const { result } = await terminatesListBase();
 		statusOptions.value = result?.status ?? [];
 	} catch (error) {
 		console.log(error);
@@ -212,20 +226,25 @@ const resetQuery = (formEl: FormInstance | undefined) => {
 };
 // 终止详情
 const terminateDetailRef = ref<RefType>();
-const onDetail = (row:any)=>{
+const onDetail = (row: any) => {
 	terminateDetailRef.value.openDialog(row);
-}
+};
 // 终止明细
 const auditRecordRef = ref<RefType>();
-const onProcessDetail = (row:any)=>{
+const onProcessDetail = (row: any) => {
 	const params = {
 		dialogTitle: `终止记录 （${row?.order?.title}）`,
 		...row,
 	};
 	auditRecordRef.value.openDialog(params);
-}
+};
+const toolbarRef = ref<RefType>();
+const tableRef = ref<RefType>();
 onMounted(() => {
-	getBaseData();
 	queryList();
+	if (tableRef.value && toolbarRef.value) {
+		tableRef.value.connect(toolbarRef.value);
+	}
+	getBaseData();
 });
 </script>