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

src/views/business/overdue/index.vue

@@ -1,7 +1,98 @@
 <template>
 	<div class="business-overdue-container layout-padding">
 		<div class="layout-padding-auto layout-padding-view pd20">
-			<ProTable
+			<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>
+					<el-button type="primary" @click="handleQuery" :loading="state.loading"> <SvgIcon name="ele-Search" class="mr5" />查询 </el-button>
+					<el-button @click="drawer = true" class="default-button"> <SvgIcon name="ele-Search" class="mr5" />更多查询</el-button>
+				</el-form-item>
+			</el-form>
+			<vxe-toolbar
+				ref="toolbarRef"
+				:loading="state.loading"
+				custom
+				:refresh="{
+					queryMethod: handleQuery,
+				}"
+				:tools="[{ toolRender: { name: 'exportCurrent' } }, { toolRender: { name: 'exportAll' } }]"
+			>
+				<template #buttons>
+					<el-button type="primary" @click="onJbExport" :loading="state.loading" :disabled="isChecked"
+						><SvgIcon name="iconfont icon-daochu" class="mr5" />交办单导出
+					</el-button>
+				</template>
+			</vxe-toolbar>
+			<div style="overflow: hidden; width: 100%; height: 100%; flex: 1">
+				<vxe-table
+					border
+					:loading="state.loading"
+					:data="state.tableData"
+					:sort-config="{ remote: true }"
+					:column-config="{ resizable: true }"
+					:row-config="{ isCurrent: true, isHover: true, height: 30 }"
+					ref="tableRef"
+					@sort-change="sortChange"
+					@checkbox-all="selectAllChangeEvent"
+					@checkbox-change="selectChangeEvent"
+					height="auto"
+					auto-resize
+					show-overflow
+					:scrollY="{ enabled: true, gt: 0 }"
+					id="businessOverdue"
+					:custom-config="{ storage: true }"
+					:params="{ exportMethod: exportOverdueList, exportParams: requestParams }"
+					showHeaderOverflow
+				>
+					<vxe-column type="checkbox" width="60" align="center"></vxe-column>
+					<vxe-column field="no" title="工单编码" width="140"></vxe-column>
+					<vxe-column field="isProvinceText" title="省/市工单" width="90"></vxe-column>
+					<vxe-column field="currentStepName" title="当前节点" width="100"></vxe-column>
+					<vxe-column field="delayText" title="是否延期" width="100"></vxe-column>
+					<vxe-column field="statusText" title="工单状态" width="100"></vxe-column>
+					<vxe-column field="title" title="工单标题" width="200">
+						<template #default="{ row }">
+							<order-detail :order="row" @updateList="queryList">{{ row.title }}</order-detail>
+						</template>
+					</vxe-column>
+					<vxe-column field="centerToOrgHandlerName" title="派单员" width="120"></vxe-column>
+					<vxe-column field="startTime" title="受理时间" sortable width="160">
+						<template #default="{ row }">
+							{{ formatDate(row.startTime, 'YYYY-mm-dd HH:MM:SS') }}
+						</template>
+					</vxe-column>
+					<vxe-column field="expiredTime" title="工单期满时间" sortable width="160">
+						<template #default="{ row }">
+							{{ formatDate(row.expiredTime, 'YYYY-mm-dd HH:MM:SS') }}
+						</template>
+					</vxe-column>
+					<vxe-column field="filedTime" title="办结时间" sortable width="160">
+						<template #default="{ row }">
+							{{ formatDate(row.filedTime, 'YYYY-mm-dd HH:MM:SS') }}
+						</template>
+					</vxe-column>
+					<vxe-column field="orgLevelOneName" title="一级部门" width="140"></vxe-column>
+					<vxe-column field="acceptType" title="受理类型" width="100"></vxe-column>
+					<vxe-column field="counterSignTypeText" title="是否会签" width="90"></vxe-column>
+					<vxe-column field="sourceChannel" title="来源渠道" width="100"></vxe-column>
+					<vxe-column field="hotspotName" title="热点分类" width="150"></vxe-column>
+					<vxe-column field="acceptorName" title="受理人" width="120"></vxe-column>
+				</vxe-table>
+			</div>
+			<vxe-pager
+				v-model:currentPage="state.queryParams.PageIndex"
+				v-model:pageSize="state.queryParams.PageSize"
+				:total="state.total"
+				@page-change="queryList"
+				:layouts="['PrevPage', 'Number', 'NextPage', 'Sizes', 'FullJump', 'Total']"
+			>
+			</vxe-pager>
+			<!--			<ProTable
 				ref="proTableRef"
 				:columns="columns"
 				:data="state.tableData"
@@ -14,25 +105,15 @@
 				:exportMethod="exportOverdueList"
 				:exportParams="requestParams"
 				@sort-change="sortChange"
+
 			>
 				<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>
-							<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 #title="{ row }">
 					<order-detail :order="row" @updateList="queryList">{{ row.title }}</order-detail>
 				</template>
-			</ProTable>
+			</ProTable>-->
 		</div>
 		<!--	更多查询	-->
 		<el-drawer v-model="drawer" title="更多查询" size="500px">
@@ -58,10 +139,13 @@
 	</div>
 </template>
 <script setup lang="tsx" name="businessOverdue">
-import { defineAsyncComponent, onMounted, reactive, ref } from 'vue';
-import { FormInstance } from 'element-plus';
+import { computed, defineAsyncComponent, onMounted, reactive, ref } from 'vue';
+import { ElMessageBox, FormInstance } from 'element-plus';
 import { formatDate } from '@/utils/formatTime';
 import { exportOverdueList, overdueList } from '@/api/query/overdue';
+import { exportJbOrder } from '@/api/business/order';
+import { VxeUI } from 'vxe-pc-ui';
+import { downloadZip } from '@/utils/tools';
 
 // 引入组件
 const OrderDetail = defineAsyncComponent(() => import('@/components/OrderDetail/index.vue')); // 工单详情
@@ -79,7 +163,7 @@ const columns = ref<any[]>([
 		prop: 'startTime',
 		label: '受理时间',
 		minWidth: 160,
-		render: (scope:any) => {
+		render: (scope: any) => {
 			return <span>{formatDate(scope.row.startTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
 		},
 		sortable: 'custom',
@@ -88,7 +172,7 @@ const columns = ref<any[]>([
 		prop: 'expiredTime',
 		label: '工单期满时间',
 		minWidth: 160,
-		render: (scope:any) => {
+		render: (scope: any) => {
 			return <span>{formatDate(scope.row.expiredTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
 		},
 		sortable: 'custom',
@@ -98,7 +182,7 @@ const columns = ref<any[]>([
 		prop: 'filedTime',
 		label: '办结时间',
 		minWidth: 160,
-		render: (scope:any) => {
+		render: (scope: any) => {
 			return <span>{formatDate(scope.row.filedTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
 		},
 		sortable: 'custom',
@@ -120,8 +204,8 @@ const state = reactive<any>({
 		No: null, // 工单编码
 		IsProvince: null, // 是否省工单
 		Delay: null, // 是否延期
-		SortField:null,
-		SortRule:null,
+		SortField: null,
+		SortRule: null,
 	},
 	tableData: [{}], //表单
 	loading: false, // 加载
@@ -129,9 +213,9 @@ const state = reactive<any>({
 });
 // 排序
 const sortChange = (val: any) => {
-	state.queryParams.SortField = val.order ? val.prop : null;
+	state.queryParams.SortField = val.order ? val.field : null;
 	// 0 升序 1 降序
-	state.queryParams.SortRule = val.order ? (val.order == 'descending' ? 1 : 0) : null;
+	state.queryParams.SortRule = val.order ? (val.order == 'desc' ? 1 : 0) : null;
 	handleQuery();
 };
 // 手动查询，将页码设置为1
@@ -157,6 +241,66 @@ const queryList = () => {
 			state.loading = false;
 		});
 };
+// 交办单导出
+const onJbExport = () => {
+	const ids = checkTable.value.map((item: any) => item.id);
+	ElMessageBox.confirm(`您确定导出选中的工单交办单，是否继续?`, '提示', {
+		confirmButtonText: '确认',
+		cancelButtonText: '取消',
+		type: 'warning',
+		draggable: true,
+		cancelButtonClass: 'default-button',
+		autofocus: false,
+	})
+		.then(() => {
+			VxeUI.modal.message({
+				content: `导出中，请稍等`,
+				status: 'loading',
+				id: 'exportJBD',
+				duration: -1,
+			});
+			exportJbOrder(ids)
+				.then((res: any) => {
+					downloadZip(res);
+					state.loading = false;
+					VxeUI.modal.close('exportJBD');
+					VxeUI.modal.message({
+						content: `导出成功`,
+						status: 'success',
+					});
+				})
+				.catch((err: any) => {
+					console.log(err, '1111');
+					state.loading = false;
+					VxeUI.modal.close('exportJBD');
+					VxeUI.modal.message({
+						content: `导出失败`,
+						status: 'error',
+					});
+				});
+		})
+		.catch(() => {});
+};
+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 drawerRuleFormRef = ref();
 const ruleFormRef = ref<RefType>(); // 表单ref
@@ -167,7 +311,11 @@ const resetQuery = (formEl: FormInstance | undefined) => {
 	ruleFormRef.value?.resetFields();
 	queryList();
 };
+const toolbarRef = ref<RefType>();
 onMounted(async () => {
 	queryList();
+	if (tableRef.value && toolbarRef.value) {
+		tableRef.value.connect(toolbarRef.value);
+	}
 });
 </script>

src/views/business/overdue/soon.vue

@@ -1,7 +1,98 @@
 <template>
 	<div class="business-overdueSoon-container layout-padding">
 		<div class="layout-padding-auto layout-padding-view pd20">
-			<ProTable
+			<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>
+					<el-button type="primary" @click="handleQuery" :loading="state.loading"> <SvgIcon name="ele-Search" class="mr5" />查询 </el-button>
+					<el-button @click="drawer = true" class="default-button"> <SvgIcon name="ele-Search" class="mr5" />更多查询</el-button>
+				</el-form-item>
+			</el-form>
+			<vxe-toolbar
+				ref="toolbarRef"
+				:loading="state.loading"
+				custom
+				:refresh="{
+					queryMethod: handleQuery,
+				}"
+				:tools="[{ toolRender: { name: 'exportCurrent' } }, { toolRender: { name: 'exportAll' } }]"
+			>
+				<template #buttons>
+					<el-button type="primary" @click="onJbExport" :loading="state.loading" :disabled="isChecked"
+						><SvgIcon name="iconfont icon-daochu" class="mr5" />交办单导出
+					</el-button>
+				</template>
+			</vxe-toolbar>
+			<div style="overflow: hidden; width: 100%; height: 100%; flex: 1">
+				<vxe-table
+					border
+					:loading="state.loading"
+					:data="state.tableData"
+					:sort-config="{ remote: true }"
+					:column-config="{ resizable: true }"
+					:row-config="{ isCurrent: true, isHover: true, height: 30 }"
+					ref="tableRef"
+					@sort-change="sortChange"
+					@checkbox-all="selectAllChangeEvent"
+					@checkbox-change="selectChangeEvent"
+					height="auto"
+					auto-resize
+					show-overflow
+					:scrollY="{ enabled: true, gt: 0 }"
+					id="businessOverdueSoon"
+					:custom-config="{ storage: true }"
+					:params="{ exportMethod: exportOverdueSoon, exportParams: requestParams }"
+					showHeaderOverflow
+				>
+					<vxe-column type="checkbox" width="60" align="center"></vxe-column>
+					<vxe-column field="no" title="工单编码" width="140"></vxe-column>
+					<vxe-column field="isProvinceText" title="省/市工单" width="90"></vxe-column>
+					<vxe-column field="currentStepName" title="当前节点" width="100"></vxe-column>
+					<vxe-column field="delayText" title="是否延期" width="100"></vxe-column>
+					<vxe-column field="statusText" title="工单状态" width="100"></vxe-column>
+					<vxe-column field="title" title="工单标题" width="200">
+						<template #default="{ row }">
+							<order-detail :order="row" @updateList="queryList">{{ row.title }}</order-detail>
+						</template>
+					</vxe-column>
+					<vxe-column field="centerToOrgHandlerName" title="派单员" width="120"></vxe-column>
+					<vxe-column field="startTime" title="受理时间" sortable width="160">
+						<template #default="{ row }">
+							{{ formatDate(row.startTime, 'YYYY-mm-dd HH:MM:SS') }}
+						</template>
+					</vxe-column>
+					<vxe-column field="expiredTime" title="工单期满时间" sortable width="160">
+						<template #default="{ row }">
+							{{ formatDate(row.expiredTime, 'YYYY-mm-dd HH:MM:SS') }}
+						</template>
+					</vxe-column>
+					<vxe-column field="filedTime" title="办结时间" sortable width="160">
+						<template #default="{ row }">
+							{{ formatDate(row.filedTime, 'YYYY-mm-dd HH:MM:SS') }}
+						</template>
+					</vxe-column>
+					<vxe-column field="orgLevelOneName" title="一级部门" width="140"></vxe-column>
+					<vxe-column field="acceptType" title="受理类型" width="100"></vxe-column>
+					<vxe-column field="counterSignTypeText" title="是否会签" width="90"></vxe-column>
+					<vxe-column field="sourceChannel" title="来源渠道" width="100"></vxe-column>
+					<vxe-column field="hotspotName" title="热点分类" width="150"></vxe-column>
+					<vxe-column field="acceptorName" title="受理人" width="120"></vxe-column>
+				</vxe-table>
+			</div>
+			<vxe-pager
+				v-model:currentPage="state.queryParams.PageIndex"
+				v-model:pageSize="state.queryParams.PageSize"
+				:total="state.total"
+				@page-change="queryList"
+				:layouts="['PrevPage', 'Number', 'NextPage', 'Sizes', 'FullJump', 'Total']"
+			>
+			</vxe-pager>
+			<!--			<ProTable
 				ref="proTableRef"
 				:columns="columns"
 				:data="state.tableData"
@@ -16,23 +107,12 @@
 				@sort-change="sortChange"
 			>
 				<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>
-							<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 #title="{ row }">
 					<order-detail :order="row" @updateList="queryList">{{ row.title }}</order-detail>
 				</template>
-			</ProTable>
+			</ProTable>-->
 		</div>
 		<!--	更多查询	-->
 		<el-drawer v-model="drawer" title="更多查询" size="500px">
@@ -58,11 +138,14 @@
 	</div>
 </template>
 <script setup lang="tsx" name="businessOverdueSoon">
-import { defineAsyncComponent, onMounted, reactive, ref } from 'vue';
+import { computed, defineAsyncComponent, onMounted, reactive, ref } from 'vue';
 import { FormInstance } from 'element-plus';
 import { formatDate } from '@/utils/formatTime';
 import { exportOverdueSoon, overdueSoonList } from '@/api/query/overdue';
 import Other from '@/utils/other';
+import { exportJbOrder } from '@/api/business/order';
+import { VxeUI } from 'vxe-pc-ui';
+import { downloadZip } from '@/utils/tools';
 // 引入组件
 const OrderDetail = defineAsyncComponent(() => import('@/components/OrderDetail/index.vue')); // 工单详情
 
@@ -96,7 +179,7 @@ const columns = ref<any[]>([
 
 	{ prop: 'actualHandleOrgName', label: '接办部门', minWidth: 140 },
 	{ prop: 'acceptType', label: '受理类型', minWidth: 100 },
-	{ prop: 'counterSignTypeText', label: '是否会签', minWidth: 90},
+	{ prop: 'counterSignTypeText', label: '是否会签', minWidth: 90 },
 	{ prop: 'orgLevelOneName', label: '一级部门', minWidth: 140 },
 	{ prop: 'sourceChannel', label: '来源渠道' },
 	{ prop: 'hotspotName', label: '热点分类', minWidth: 150 },
@@ -121,9 +204,9 @@ const state = reactive<any>({
 });
 // 排序
 const sortChange = (val: any) => {
-	state.queryParams.SortField = val.order ? val.prop : null;
+	state.queryParams.SortField = val.order ? val.field : null;
 	// 0 升序 1 降序
-	state.queryParams.SortRule = val.order ? (val.order == 'descending' ? 1 : 0) : null;
+	state.queryParams.SortRule = val.order ? (val.order == 'desc' ? 1 : 0) : null;
 	handleQuery();
 };
 // 手动查询，将页码设置为1
@@ -149,6 +232,66 @@ const queryList = () => {
 			state.loading = false;
 		});
 };
+// 交办单导出
+const onJbExport = () => {
+	const ids = checkTable.value.map((item: any) => item.id);
+	ElMessageBox.confirm(`您确定导出选中的工单交办单，是否继续?`, '提示', {
+		confirmButtonText: '确认',
+		cancelButtonText: '取消',
+		type: 'warning',
+		draggable: true,
+		cancelButtonClass: 'default-button',
+		autofocus: false,
+	})
+		.then(() => {
+			VxeUI.modal.message({
+				content: `导出中，请稍等`,
+				status: 'loading',
+				id: 'exportJBD',
+				duration: -1,
+			});
+			exportJbOrder(ids)
+				.then((res: any) => {
+					downloadZip(res);
+					state.loading = false;
+					VxeUI.modal.close('exportJBD');
+					VxeUI.modal.message({
+						content: `导出成功`,
+						status: 'success',
+					});
+				})
+				.catch((err: any) => {
+					console.log(err, '1111');
+					state.loading = false;
+					VxeUI.modal.close('exportJBD');
+					VxeUI.modal.message({
+						content: `导出失败`,
+						status: 'error',
+					});
+				});
+		})
+		.catch(() => {});
+};
+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 drawerRuleFormRef = ref();
 const ruleFormRef = ref<RefType>(); // 表单ref
@@ -159,7 +302,11 @@ const resetQuery = (formEl: FormInstance | undefined) => {
 	ruleFormRef.value?.resetFields();
 	queryList();
 };
+const toolbarRef = ref<RefType>();
 onMounted(async () => {
 	queryList();
+	if (tableRef.value && toolbarRef.value) {
+		tableRef.value.connect(toolbarRef.value);
+	}
 });
 </script>

src/views/todo/center/index.vue

@@ -8,7 +8,6 @@
 				<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>
 					<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>