reactor:坐席待办调整;

src/views/business/copyView/index.vue

@@ -1,106 +1,43 @@
 <template>
 	<div class="business-copy-view-container layout-padding">
 		<div class="layout-padding-auto layout-padding-view pd20">
-			<el-form :model="state.queryParams" ref="ruleFormRef" @submit.native.prevent inline>
-				<el-form-item label="工单编码" prop="No">
-					<el-input v-model.trim="state.queryParams.No" placeholder="工单编码" clearable @keyup.enter="handleQuery" class="keyword-input" />
-				</el-form-item>
-				<el-form-item label="工单标题" prop="Title">
-					<el-input v-model.trim="state.queryParams.Title" placeholder="工单标题" clearable @keyup.enter="handleQuery" class="keyword-input" />
-				</el-form-item>
-				<el-form-item>
-					<el-button type="primary" @click="handleQuery" :loading="state.loading"> <SvgIcon name="ele-Search" class="mr5" />查询 </el-button>
-					<el-button @click="drawer = true" class="default-button"> <SvgIcon name="ele-Search" class="mr5" />更多查询</el-button>
-				</el-form-item>
-			</el-form>
-			<vxe-toolbar
-				ref="toolbarRef"
-				:loading="state.loading"
-				custom
-				:refresh="{
-					queryMethod: handleQuery,
-				}"
-				:tools="[{ toolRender: { name: 'exportCurrent' } }, { toolRender: { name: 'exportAll' } }]"
-			>
-				<template #buttons>
-					<el-button type="primary" @click="onJbExport" :disabled="isChecked" :loading="state.loading" v-auth="'business:order:jbdExport'"
+			<vxe-grid v-bind="gridOptions" ref="gridRef" @checkbox-all="selectAllChangeEvent" @checkbox-change="selectChangeEvent">
+				<template #form>
+					<el-form :model="state.queryParams" ref="ruleFormRef" @submit.native.prevent inline>
+						<el-form-item label="工单编码" prop="No">
+							<el-input v-model.trim="state.queryParams.No" placeholder="工单编码" clearable @keyup.enter="handleQuery" class="keyword-input" />
+						</el-form-item>
+						<el-form-item label="工单标题" prop="Title">
+							<el-input v-model.trim="state.queryParams.Title" placeholder="工单标题" clearable @keyup.enter="handleQuery" class="keyword-input" />
+						</el-form-item>
+						<el-form-item>
+							<el-button type="primary" @click="handleQuery" :loading="state.loading"> <SvgIcon name="ele-Search" class="mr5" />查询 </el-button>
+							<el-button @click="drawer = true" class="default-button"> <SvgIcon name="ele-Search" class="mr5" />更多查询</el-button>
+						</el-form-item>
+					</el-form>
+				</template>
+				<template #toolbar_buttons>
+					<el-button type="primary" @click="onJbExport" :disabled="isChecked" :loading="state.loading"
 						><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"
-					:column-config="{ resizable: true }"
-					:row-config="{ isCurrent: true, isHover: true, height: 30, useKey: true }"
-					ref="tableRef"
-					@checkbox-all="selectAllChangeEvent"
-					@checkbox-change="selectChangeEvent"
-					height="auto"
-					auto-resize
-					show-overflow
-					:scrollY="{ enabled: true, gt: 100}"
-					id="businessCopyView"
-					:custom-config="{
-						storage: true,
-					}"
-					:params="{ exportMethod: countersignDataExport, exportParams: requestParams }"
-					showHeaderOverflow
-				>
-					<vxe-column type="checkbox" width="50" align="center"></vxe-column>
-					<vxe-column field="order.expiredStatusText" title="超期状态" width="90" align="center">
-						<template #default="{ row }">
-							<span :class="'overdue-status-' + row.order?.expiredStatus" :title="row.order?.expiredStatusText"></span>
-						</template>
-					</vxe-column>
-					<vxe-column field="order.statusText" title="工单状态" width="100">
-						<template #default="{ row }">
-							<el-text type="danger" tag="b" v-if="[1, 2, 3, 9, 101, 102, 103, 104, 105, 200].includes(row.order.status)">{{ row.order.statusText }}</el-text>
-							<span v-else>{{ row.order.statusText }}</span>
-						</template>
-					</vxe-column>
-					<vxe-column field="order.sourceChannel" title="来源渠道" width="100"></vxe-column>
-					<vxe-column field="order.currentStepName" title="当前节点" width="120"></vxe-column>
-					<vxe-column field="order.no" title="工单编码" width="140"></vxe-column>
-					<vxe-column field="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="150"></vxe-column>
-					<vxe-column field="order.actualHandleTime" title="接办时间" width="160">
-						<template #default="{ row }">
-							{{ formatDate(row.order?.actualHandleTime, 'YYYY-mm-dd HH:MM:SS') }}
-						</template>
-					</vxe-column>
-					<vxe-column field="order.filedTime" title="办结时间" width="160">
-						<template #default="{ row }">
-							{{ formatDate(row.order?.filedTime, 'YYYY-mm-dd HH:MM:SS') }}
-						</template>
-					</vxe-column>
-					<vxe-column field="order.acceptType" title="受理类型" width="110"></vxe-column>
-					<vxe-column field="order.hotspotName" title="热点分类" width="150"></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"
-			/>
+				<template #statusText="{ row }">
+					<el-text type="danger" tag="b" v-if="[1, 2, 3, 9, 101, 102, 103, 104, 105, 200].includes(row.status)">{{ row.statusText }}</el-text>
+					<span v-else>{{ row.statusText }}</span>
+				</template>
+				<template #order_detail="{ row }">
+					<order-detail :order="row" @updateList="queryList">{{ row.title }}</order-detail>
+				</template>
+				<template #pager>
+					<pagination
+						@pagination="queryList"
+						:total="state.total"
+						v-model:current-page="state.queryParams.PageIndex"
+						v-model:page-size="state.queryParams.PageSize"
+						:disabled="state.loading"
+					/>
+				</template>
+			</vxe-grid>
 		</div>
 		<!--	更多查询	-->
 		<el-drawer v-model="drawer" title="更多查询" size="500px">
@@ -154,13 +91,11 @@
 </template>
 <script setup lang="tsx" name="businessCopyView">
 import { computed, defineAsyncComponent, onMounted, reactive, ref } from 'vue';
-import {  FormInstance } from 'element-plus';
-import { formatDate } from '@/utils/formatTime';
-import { observeBaseData } from '@/api/query/observe';
+import { FormInstance } from 'element-plus';
 import { defaultTimeStartEnd, shortcuts } from '@/utils/constants';
 import { exportAssignment } from '@/utils/tools';
 import Other from '@/utils/other';
-import { countersignDataExport } from '@/api/query/countersign';
+import { countersignBase } from '@/api/query/countersign';
 // 引入组件
 const OrderDetail = defineAsyncComponent(() => import('@/components/OrderDetail/index.vue')); // 工单详情
 const pagination = defineAsyncComponent(() => import('@/components/ProTable/components/Pagination.vue')); // 分页
@@ -188,6 +123,115 @@ const state = reactive<any>({
 	loading: false, // 加载
 	total: 0, // 总数
 });
+
+const gridOptions = reactive<any>({
+	loading: false,
+	border: true,
+	showOverflow: true,
+	columnConfig: {
+		resizable: true,
+	},
+	scrollY: {
+		enabled: true,
+		gt: 100,
+	},
+	toolbarConfig: {
+		zoom: true,
+		custom: true,
+		refresh: {
+			queryMethod: () => {
+				handleQuery();
+			},
+		},
+		slots: {
+			buttons: 'toolbar_buttons',
+		},
+	},
+	customConfig: {
+		storage: true,
+	},
+	id: 'businessCopyView',
+	rowConfig: { isHover: true, height: 30, isCurrent: true, useKey: true },
+	height: 'auto',
+	columns: [
+		{ type: 'checkbox', width: 50, align: 'center' },
+		{
+			field: 'expiredStatusText',
+			title: '状态',
+			width: 60,
+			align: 'center',
+			slots: {
+				default: ({ row }) => {
+					return <span class={'overdue-status-' + row.expiredStatus} title={row.expiredStatusText}></span>;
+				},
+			},
+		},
+		{ field: 'no', title: '工单编码', width: 140 },
+		{ field: 'isProvinceText', title: '省/市工单', width: 90 },
+		{ field: 'reTransactNum', title: '重办次数', width: 90 },
+		{
+			field: 'isUrgentText',
+			title: '是否紧急',
+			width: 90,
+			slots: {
+				default: ({ row }) => {
+					return <span class="color-danger font-bold">{row.isUrgentText}</span>;
+				},
+			},
+		},
+		{ field: 'isSecretText', title: '是否保密', width: 100 },
+		{ field: 'currentStepName', title: '当前节点', width: 120 },
+		{ field: 'actualStepAcceptText', title: '受理情况', width: 100 },
+		{
+			field: 'statusText',
+			title: '工单状态',
+			width: 110,
+			slots: {
+				default: 'statusText',
+			},
+		},
+		{
+			field: 'title',
+			title: '工单标题',
+			minWidth: 200,
+			slots: { default: 'order_detail' },
+		},
+		{
+			field: 'startTime',
+			title: '受理时间',
+			width: 160,
+			formatter: 'formatDate',
+		},
+		{
+			field: 'expiredTime',
+			title: '工单期满时间',
+			width: 160,
+			formatter: 'formatDate',
+		},
+		{
+			field: 'filedTime',
+			title: '办结时间',
+			width: 160,
+			formatter: 'formatDate',
+		},
+		{ field: 'orgLevelOneName', title: '一级部门', width: 140 },
+		{ field: 'actualHandleOrgName', title: '接办部门', width: 140 },
+		{ field: 'acceptType', title: '受理类型', width: 110 },
+		{ field: 'counterSignTypeText', title: '是否会签', width: 110 },
+		{ field: 'sourceChannel', title: '来源渠道', width: 110 },
+		{ field: 'hotspotSpliceName', title: '热点全称', width: 150 },
+		{ field: 'hotspotName', title: '热点分类', width: 150 },
+		{ field: 'acceptorName', title: '受理人', width: 120 },
+		{ field: 'focusOnEventsName', title: '重点标记', width: 120 },
+		{ field: 'sensitiveText', title: '敏感词', width: 150 },
+		{ field: 'content', title: '受理内容', width: 200, visible: false },
+		{ field: 'fileOpinion', title: '承办意见', width: 200, visible: false },
+	],
+	data: [],
+	sortConfig: {
+		remote: true,
+	},
+});
 // 手动查询，将页码设置为1
 const handleQuery = () => {
 	state.queryParams.PageIndex = 1;
@@ -230,19 +274,19 @@ const onJbExport = () => {
 	const ids = checkTable.value.map((item: any) => item.order.id);
 	exportAssignment(ids);
 };
-const tableRef = ref<RefType>();
 const checkTable = ref<EmptyArrayType>([]);
+const gridRef = ref<RefType>();
 const selectAllChangeEvent = ({ checked }) => {
-	if (tableRef.value) {
-		const records = tableRef.value.getCheckboxRecords();
+	if (gridRef.value) {
+		const records = gridRef.value.getCheckboxRecords();
 		checkTable.value = records;
 		console.log(checked ? '所有勾选事件' : '所有取消事件', records);
 	}
 };
 
 const selectChangeEvent = ({ checked }) => {
-	if (tableRef.value) {
-		const records = tableRef.value.getCheckboxRecords();
+	if (gridRef.value) {
+		const records = gridRef.value.getCheckboxRecords();
 		checkTable.value = records;
 		console.log(checked ? '勾选事件' : '取消事件', records);
 	}
@@ -250,11 +294,18 @@ const selectChangeEvent = ({ checked }) => {
 const isChecked = computed(() => {
 	return !Boolean(checkTable.value.length);
 });
-const toolbarRef = ref<RefType>();
+// 获取基础信息
+const acceptTypeOptions = ref<EmptyArrayType>([]);
+const getBaseData = async () => {
+	try {
+		const { result } = await countersignBase();
+		acceptTypeOptions.value = result.acceptTypeOptions;
+	} catch (e) {
+		console.log(e);
+	}
+};
 onMounted(() => {
 	queryList();
-	if (tableRef.value && toolbarRef.value) {
-		tableRef.value.connect(toolbarRef.value);
-	}
+	getBaseData();
 });
 </script>

src/views/todo/seats/index.vue

@@ -1,7 +1,7 @@
 <template>
 	<div class="todo-seats-container layout-padding">
 		<div class="layout-padding-auto layout-padding-view pd20">
-			<el-tabs v-model="state.queryParams.type" @tab-change="changeTab">
+			<el-tabs v-model="state.queryParams.TypeCode" @tab-change="changeTab">
 				<el-tab-pane name="0" label="工单待办" :disabled="state.loading"></el-tab-pane>
 				<el-tab-pane name="1" label="交办件" :disabled="state.loading"></el-tab-pane>
 				<el-tab-pane name="2" label="办结件" :disabled="state.loading"></el-tab-pane>
@@ -44,17 +44,13 @@
 						<el-button link type="primary" @click="onSign(row)" title="签收工单" v-if="row.canSign" v-auth="'todo:seats:sign'"> 签收 </el-button>
 					</template>
 					<template #pager>
-						<div class="flex-end" style="align-items: center">
-							<el-text class="mr10" v-loading="totalLoading">共 {{ totalCount }} 条</el-text>
-							<el-pagination
-								layout="prev, pager, next"
-								:total="state.total"
-								@current-change="handleCurrentChange"
-								:page-size="state.queryParams.PageSize"
-								:current-page="state.queryParams.PageIndex"
-								:disabled="totalLoading"
-							/>
-						</div>
+						<pagination
+							@pagination="queryList"
+							:total="state.total"
+							v-model:current-page="state.queryParams.PageIndex"
+							v-model:page-size="state.queryParams.PageSize"
+							:disabled="state.loading"
+						/>
 					</template>
 				</vxe-grid>
 			</div>
@@ -110,7 +106,7 @@
 					>
 					</el-cascader>
 				</el-form-item>
-				<el-form-item prop="Status" label="工单状态" v-if="state.queryParams.IsHandled === 'true'">
+				<el-form-item prop="Status" label="工单状态">
 					<el-select v-model="state.queryParams.Status" placeholder="请选择工单状态" clearable class="w100" @change="handleQuery">
 						<el-option v-for="item in state.orderStatusOptions" :value="item.key" :key="item.key" :label="item.value" />
 					</el-select>
@@ -128,7 +124,7 @@ import { computed, defineAsyncComponent,onMounted, reactive, ref } from 'vue';
 import { ElMessage, ElMessageBox, FormInstance } from 'element-plus';
 import { useRouter } from 'vue-router';
 import { seatsListTodo, orderSign, orderListTodoCount } from '@/api/todo/order';
-import {  exportAssignment, getNeedArr } from '@/utils/tools';
+import {  exportAssignment } from '@/utils/tools';
 import { defaultTimeStartEnd, shortcuts } from '@/utils/constants';
 import Other from '@/utils/other';
 import { treeArea } from '@/api/auxiliary/area';
@@ -138,6 +134,7 @@ import { useThemeConfig } from '@/stores/themeConfig';
 import { storeToRefs } from 'pinia';
 // 引入组件
 const OrderDetail = defineAsyncComponent(() => import('@/components/OrderDetail/index.vue')); // 工单详情
+const pagination = defineAsyncComponent(() => import('@/components/ProTable/components/Pagination.vue')); // 分页
 
 const storesThemeConfig = useThemeConfig();
 const { themeConfig } = storeToRefs(storesThemeConfig);
@@ -147,8 +144,6 @@ const state = reactive<any>({
 		// 查询条件
 		PageIndex: 1, // 当前页
 		PageSize: 20, // 每页条数
-		IsHandled: 'false', // 工单状态
-		type: '0',
 		Keyword: null, // 关键字
 		IsProvince: null, // 是否省工单
 		IsCounterSign: null, // 是否会签
@@ -158,7 +153,7 @@ const state = reactive<any>({
 		IsUrgent: null,
 		AreaCode: null,
 		Status: null,
-		TypeCode: null,
+		TypeCode: '0',
 		SortField: null,
 		SortRule: null,
 		AcceptorName:null, // 受理人
@@ -223,92 +218,35 @@ const gridEvents = {
 
 const router = useRouter(); // 路由
 // 修改查询参数
-const changeTab = (val: string) => {
-	switch (val) {
-		case '0':
-			state.queryParams.IsHandled = 'false';
-			state.queryParams.TypeCode = null;
-			break;
-		case '1': // 交办
-			state.queryParams.TypeCode = 1;
-			state.queryParams.IsHandled = null;
-			break;
-		case '2': //直办
-			state.queryParams.TypeCode = 2;
-			state.queryParams.IsHandled = null;
-			break;
-	}
+const changeTab = () => {
 	handleQuery();
 };
 // 手动查询，将页码设置为1
 const handleQuery = () => {
 	state.queryParams.PageIndex = 1;
-	queryIndex.value = 0;
-	queryList(true);
-};
-// 改变页码
-const queryIndex = ref(0); // 数据批次
-const totalTable = ref([]); // 数据总数
-const handleCurrentChange = (val: number) => {
-	state.queryParams.PageIndex = val;
-	// 判断当前页是否是数据的最后一页
-	if (val === Math.ceil(state.total / state.queryParams.PageSize)) {
-		queryList();
-	} else {
-		state.tableData = getNeedArr(totalTable.value, state.queryParams.PageSize)[state.queryParams.PageIndex - 1]; //当前页的表格数据
-	}
+	queryList();
+	getTotal();
 };
 /** 获取列表 */
 const requestParams = ref<EmptyObjectType>({});
 const totalCount = ref(0);
-const totalLoading = ref(false);
-const queryList = async (isQuery: boolean = false) => {
+const queryList = async () => {
 	return new Promise((resolve, reject) => {
 		state.loading = true;
-		totalLoading.value = true;
 		gridOptions.loading = true;
 		requestParams.value = Other.deepClone(state.queryParams);
 		requestParams.value.StartTime = state.queryParams.scTime === null ? null : state.queryParams.scTime[0];
 		requestParams.value.EndTime = state.queryParams.scTime === null ? null : state.queryParams.scTime[1];
-		requestParams.value.QueryIndex = queryIndex.value; // 数据批次
-		if(isQuery) requestParams.value.QueryIndex = 0;
 		seatsListTodo(requestParams.value)
 			.then((response: any) => {
-				if (isQuery) {
-					// 如果是查询
-					totalTable.value = []; // 先清空
-					totalTable.value = response?.result;
-					state.total = totalTable.value.length;
-					state.tableData = getNeedArr(totalTable.value, state.queryParams.PageSize)[state.queryParams.PageIndex - 1]; //当前页的表格数据
-					gridOptions.data = state.tableData;
-					queryIndex.value = 1; // 请求完成之后，页码加一避免重复
-				} else {
-					if (response?.result.length) queryIndex.value++;
-					totalTable.value = totalTable.value.concat(response?.result);
-					state.total = totalTable.value.length;
-					state.tableData = getNeedArr(totalTable.value, state.queryParams.PageSize)[state.queryParams.PageIndex - 1]; //当前页的表格数据
-					gridOptions.data = state.tableData;
-				}
+				gridOptions.data = response?.result ?? [];
 				state.loading = false;
 				gridOptions.loading = false;
 				gridRef.value.clearCheckboxRow();
 				checkTable.value = [];
 				resolve(totalCount.value);
-			})
-			.then(() => {
-				// 查询总数
-				orderListTodoCount(requestParams.value)
-					.then((count) => {
-						totalCount.value = count.result;
-						totalLoading.value = false;
-					})
-					.catch(() => {
-						totalLoading.value = false;
-					});
-			})
-			.catch(() => {
+			}).catch(() => {
 				state.loading = false;
-				totalLoading.value = false;
 				gridOptions.loading = false;
 				gridRef.value.clearCheckboxRow();
 				checkTable.value = [];
@@ -316,6 +254,15 @@ const queryList = async (isQuery: boolean = false) => {
 			});
 	});
 };
+// 查询总数
+const getTotal = () => {
+	orderListTodoCount(requestParams.value)
+		.then((res) => {
+			state.total = res.result ?? 0;
+		})
+		.catch(() => {
+		});
+};
 /** 重置按钮操作 */
 const drawerRuleFormRef = ref();
 const ruleFormRef = ref<RefType>(); // 表单ref
@@ -324,8 +271,8 @@ const resetQuery = (formEl: FormInstance | undefined) => {
 	if (!formEl) return;
 	formEl.resetFields();
 	ruleFormRef.value?.resetFields();
-	queryIndex.value = 0;
-	queryList(true);
+	queryList();
+	getTotal();
 };
 // 新增工单
 const onAddOrder = () => {
@@ -407,6 +354,7 @@ const isChecked = computed(() => {
 onMounted(() => {
 	queryList().then(() => {
 		getBaseData();
+		getTotal();
 	});
 });
 </script>