reactor:部门办件统计表格重构完成;

src/views/statistics/order/specialTable.vue

@@ -1,44 +1,81 @@
 <template>
 	<div class="statistics-order-special-table-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="Keyword">
-              <el-input v-model="state.queryParams.Keyword" placeholder="工单编码/标题" clearable @keyup.enter="handleQuery" class="keyword-input" />
-            </el-form-item>
-            <el-form-item label="特提状态" prop="State">
-              <el-select v-model="state.queryParams.State" placeholder="请选择特提状态" clearable @change="handleQuery">
-                <el-option label="待审核" value="0"></el-option>
-                <el-option label="审核通过" value="1"></el-option>
-                <el-option label="审核不通过" value="2"></el-option>
-              </el-select>
-            </el-form-item>
-            <el-form-item>
-              <el-button type="primary" @click="handleQuery" :loading="state.loading"> <SvgIcon name="ele-Search" class="mr5" />查询 </el-button>
-              <el-button @click="resetQuery(ruleFormRef)" v-waves class="default-button" :loading="state.loading">
-                <SvgIcon name="ele-Refresh" class="mr5" />重置
-              </el-button>
-            </el-form-item>
-          </el-form>
-        </template>
-        <template #title="{ row }">
-          <order-detail :order="row.order" @updateList="queryList">{{ row.order?.title }}</order-detail>
-        </template>
-        <!-- 表格操作 -->
-        <template #operation="{ row }">
-          <el-button link type="primary" @click="visitDetail(row)" title="查看特提详情"> 特提详情 </el-button>
-        </template>
-      </ProTable>
+			<el-form :model="state.queryParams" ref="ruleFormRef" @submit.native.prevent inline>
+				<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="State">
+					<el-select v-model="state.queryParams.State" placeholder="请选择特提状态" clearable @change="handleQuery">
+						<el-option label="待审核" value="0"></el-option>
+						<el-option label="审核通过" value="1"></el-option>
+						<el-option label="审核不通过" value="2"></el-option>
+					</el-select>
+				</el-form-item>
+				<el-form-item>
+					<el-button type="primary" @click="handleQuery" :loading="state.loading"> <SvgIcon name="ele-Search" class="mr5" />查询 </el-button>
+					<el-button @click="resetQuery(ruleFormRef)" v-waves class="default-button" :loading="state.loading">
+						<SvgIcon name="ele-Refresh" class="mr5" />重置
+					</el-button>
+				</el-form-item>
+			</el-form>
+			<vxe-toolbar
+				ref="toolbarRef"
+				:loading="state.loading"
+				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, useKey:true }"
+					ref="tableRef"
+					height="auto"
+					auto-resize
+					show-overflow
+					:scrollY="{ enabled: true, gt: 20, mode: 'wheel' }"
+					id="statisticsOrderSpecialTable"
+					:custom-config="{ storage: true }"
+					showHeaderOverflow
+				>
+					<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="order.isProvinceText" title="省/市工单" width="110"></vxe-column>
+					<vxe-column field="order.currentStepName" title="当前节点" width="110"></vxe-column>
+					<vxe-column field="stateText" title="特提审批状态" width="120"></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.acceptType" title="受理类型" width="110"></vxe-column>
+					<vxe-column field="order.sourceChannel" 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="操作" width="90" fixed="right">
+						<template #default="{ row }">
+							<el-button link type="primary" @click="visitDetail(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>
 		<!-- 审批详情 -->
 		<special-audit-detail ref="specialAuditDetailRef" />
@@ -49,16 +86,16 @@
 import { defineAsyncComponent, onMounted, reactive, ref } from 'vue';
 import { FormInstance } from "element-plus";
 import { formatDate } from '@/utils/formatTime';
-import { useRoute, useRouter } from 'vue-router';
+import { useRoute } from 'vue-router';
 import { departmentSpecialDetail } from '@/api/statistics/order';
 
 // 引入组件
 const OrderDetail = defineAsyncComponent(() => import('@/components/OrderDetail/index.vue')); // 工单详情
 const SpecialAuditDetail = defineAsyncComponent(() => import('@/views/business/special/components/Special-audit-detail.vue')); // 审批详情
+const pagination = defineAsyncComponent(() => import('@/components/ProTable/components/Pagination.vue')); // 分页
 
 // 定义变量内容
 const ruleFormRef = ref<RefType>(); // 表单ref
-const router = useRouter(); // 路由
 const state = reactive({
 	queryParams: {
 		// 查询条件
@@ -71,28 +108,6 @@ const state = reactive({
 	loading: false, // 加载
 	total: 0, // 总数
 });
-
-const proTableRef = ref<RefType>(); // 表格ref
-// 表格配置项
-const columns = ref<any[]>([
-  { prop: 'order.no', label: '工单编码', minWidth: 140 },
-  { prop: 'order.isProvinceText', label: '省/市工单', width: 90 },
-  { prop: 'order.title', label: '工单标题', minWidth: 200 },
-  { prop: 'order.currentStepName', label: '当前节点', minWidth: 120 },
-  { prop: 'stateText', label: '特提审批状态', minWidth: 120 },
-  {
-    prop: 'order.startTime',
-    label: '受理时间',
-    width: 160,
-    render: (scope) => {
-      return <span>{formatDate(scope.row.order?.startTime, 'YYYY-mm-dd HH:MM:SS')}</span>;
-    },
-  },
-  { prop: 'order.acceptType', label: '受理类型', minWidth: 100 },
-  { prop: 'order.sourceChannel', label: '来源渠道', minWidth: 100 },
-  { prop: 'order.hotspotName', label: '热点分类', width: 150 },
-  { prop: 'operation', label: '操作', fixed: 'right', width: 90, align: 'center' },
-]);
 /** 搜索按钮操作 */
 const handleQuery = () => {
 	state.queryParams.PageIndex = 1;
@@ -134,7 +149,12 @@ const specialAuditDetailRef = ref<RefType>();
 const visitDetail = (row: any) => {
 	specialAuditDetailRef.value.openDialog(row.id);
 };
+const toolbarRef = ref<RefType>();
+const tableRef = ref<RefType>();
 onMounted(() => {
 	queryList();
+	if (tableRef.value && toolbarRef.value) {
+		tableRef.value.connect(toolbarRef.value);
+	}
 });
 </script>

src/views/statistics/order/specials.vue

@@ -1,31 +1,66 @@
 <template>
 	<div class="statistics-order-specials-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 prop="crTime">
+					<statistical-time v-model="state.queryParams.crTime" @change="handleQuery" ref="statisticalTimeRef" :disabled="state.loading"/>
+				</el-form-item>
+				<el-form-item>
+					<el-button type="primary" @click="handleQuery" :loading="state.loading"> <SvgIcon name="ele-Search" class="mr5" />查询 </el-button>
+					<el-button @click="resetQuery(ruleFormRef)" class="default-button" :loading="state.loading">
+						<SvgIcon name="ele-Refresh" class="mr5" />重置
+					</el-button>
+				</el-form-item>
+			</el-form>
+			<vxe-toolbar
+				ref="toolbarRef"
 				:loading="state.loading"
-				border
+				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,useKey:true }"
+					ref="tableRef"
+					height="auto"
+					auto-resize
+					show-overflow
+					:scrollY="{ enabled: true, gt: 20, mode: 'wheel' }"
+					id="statisticsOrderSpecial"
+					:custom-config="{
+						storage: true,
+					}"
+					showHeaderOverflow
+				>
+					<vxe-column field="cause" title="特提原因"></vxe-column>
+					<vxe-column field="orderNum" title="特提工单数">
+						<template #default="{ row }">
+							<el-button type="primary" @click="linkDetail(row)" link>
+							{{row.orderNum}}
+							</el-button>
+						</template>
+					</vxe-column>
+					<vxe-column field="maxSpecialTime" title="特提时间" width="160">
+						<template #default="{ row }">
+							{{ formatDate(row.maxSpecialTime, 'YYYY-mm-dd HH:MM:SS') }}
+						</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 prop="crTime">
-							<statistical-time v-model="state.queryParams.crTime" @change="handleQuery" ref="statisticalTimeRef" :disabled="state.loading"/>
-						</el-form-item>
-            <el-form-item>
-              <el-button type="primary" @click="handleQuery" :loading="state.loading"> <SvgIcon name="ele-Search" class="mr5" />查询 </el-button>
-              <el-button @click="resetQuery(ruleFormRef)" class="default-button" :loading="state.loading">
-                <SvgIcon name="ele-Refresh" class="mr5" />重置
-              </el-button>
-            </el-form-item>
-          </el-form>
-        </template>
-			</ProTable>
+				:disabled="state.loading"
+			/>
 		</div>
 	</div>
 </template>
@@ -39,28 +74,7 @@ import { useRouter } from 'vue-router';
 import Other from '@/utils/other';
 
 const StatisticalTime = defineAsyncComponent(() => import('@/components/StatisticalTime/index.vue')); // 日期类型选择组件
-// 表格配置项
-const columns = ref<any[]>([
-	{ prop: 'cause', label: '特提原因', align: 'center' },
-	{
-		prop: 'orderNum',
-		label: '特提工单数',
-		align: 'center',
-		render: (scope) => {
-			return (
-				<el-button type="primary" onClick={() => handleDetail(scope.row)} link>
-					{scope.row.orderNum}
-				</el-button>
-			);
-		},
-	},
-	{
-		prop: 'passTotal',
-		label: '特提时间',
-		align: 'center',
-		render: (scope) => <span>{formatDate(scope.row.maxSpecialTime, 'YYYY-mm-dd HH:MM:SS')}</span>,
-	},
-]);
+const pagination = defineAsyncComponent(() => import('@/components/ProTable/components/Pagination.vue')); // 分页
 // 定义变量内容
 const ruleFormRef = ref<RefType>(); // 表单ref
 const state = reactive<any>({
@@ -106,7 +120,7 @@ const resetQuery = (formEl: FormInstance | undefined) => {
 	queryList();
 };
 const router = useRouter();
-const handleDetail = (row: any) => {
+const linkDetail = (row: any) => {
 	const startTime = state.queryParams.crTime === null ? null : state.queryParams.crTime[0];
 	const endTime = state.queryParams.crTime === null ? null : state.queryParams.crTime[1];
 	router.push({
@@ -118,7 +132,12 @@ const handleDetail = (row: any) => {
 		}
 	});
 };
+const toolbarRef = ref<RefType>();
+const tableRef = ref<RefType>();
 onMounted(() => {
 	queryList();
+	if (tableRef.value && toolbarRef.value) {
+		tableRef.value.connect(toolbarRef.value);
+	}
 });
 </script>