reactor:数据统计表格重构;

src/views/statistics/order/subRegional.vue

@@ -1,69 +1,79 @@
 <template>
 	<div class="statistics-order-sub-regional-container layout-padding">
 		<div class="layout-padding-auto layout-padding-view pd20">
-			<ProTable
-				ref="proTableRef"
-				:columns="columns"
-				:data="state.tableData"
+			<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 label="来电主体" prop="TypeId">
+					<el-select v-model="state.queryParams.TypeId" placeholder="请选择来电主体" @change="handleQuery">
+						<el-option :value="0" label="全部" />
+						<el-option :value="1" label="市民" />
+						<el-option :value="2" label="企业" />
+					</el-select>
+				</el-form-item>
+				<el-form-item label="热线号码" prop="Line">
+					<el-select v-model="state.queryParams.Line" placeholder="请选择热线号码" clearable @change="handleQuery">
+						<el-option v-for="item in state.callForwardingSource" :value="item.dicDataValue" :key="item.dicDataValue" :label="item.dicDataName" />
+					</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)" 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"
-				row-key="areaCode"
-				lazy
-				:load="load"
-				:tree-props="{ children: 'children', hasChildren: 'hasChild' }"
-				show-summary
-				border
-				:pagination="false"
+				custom
+				:refresh="{
+			queryMethod: handleQuery,
+			}"
 			>
-				<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 label="来电主体" prop="TypeId">
-							<el-select v-model="state.queryParams.TypeId" placeholder="请选择来电主体" @change="handleQuery">
-								<el-option :value="0" label="全部" />
-								<el-option :value="1" label="市民" />
-								<el-option :value="2" label="企业" />
-							</el-select>
-						</el-form-item>
-						<el-form-item label="热线号码" prop="Line">
-							<el-select v-model="state.queryParams.Line" placeholder="请选择热线号码" clearable @change="handleQuery">
-								<el-option v-for="item in state.callForwardingSource" :value="item.dicDataValue" :key="item.dicDataValue" :label="item.dicDataName" />
-							</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)" class="default-button" :loading="state.loading">
-								<SvgIcon name="ele-Refresh" class="mr5" />重置
-							</el-button>
-						</el-form-item>
-					</el-form>
-				</template>
-			</ProTable>
+			</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: 0, mode: 'wheel' }"
+					id="statisticsOrderHotspotSubclass"
+					:custom-config="{ storage: true }"
+					show-footer
+					:footer-method="footerMethod"
+					:tree-config="treeConfig"
+				>
+					<vxe-column field="areaName" title="区域名称"  tree-node></vxe-column>
+					<vxe-column field="sumCount" title="分类统计"></vxe-column>
+				</vxe-table>
+			</div>
 		</div>
 	</div>
 </template>
 <script setup lang="tsx" name="statisticsOrderSubRegional">
-import { computed, defineAsyncComponent, onMounted, reactive, ref } from 'vue';
+import {  defineAsyncComponent, onMounted, reactive, ref } from 'vue';
 import { FormInstance } from 'element-plus';
-import { statisticsOrderArea } from '@/api/statistics/order';
+import {  statisticsOrderArea } from '@/api/statistics/order';
 import { defaultDate } from '@/utils/constants';
 import { callPeriodBase } from '@/api/statistics/call';
 import Other from '@/utils/other';
-import { formatDate } from '@/utils/formatTime';
+import XEUtils from 'xe-utils';
 
 const StatisticalTime = defineAsyncComponent(() => import('@/components/StatisticalTime/index.vue')); // 日期类型选择组件
-const columns = ref<any>([
-	{ prop: 'areaName', label: '区域名称' },
-	{ prop: 'sumCount', label: '分类统计' },
-]); // 表头
 // 定义变量内容
 const ruleFormRef = ref<RefType>(); // 表单ref
 const state = reactive<any>({
 	queryParams: {
 		// 查询条件
 		dateType: 'date', // 关键词
-		time: formatDate(new Date(), 'YYYY-MM-DD'), // 时间默认今天
 		crTime: defaultDate, // 时间默认今天开始到今天结束
 		TypeId: 0,
 		StartTime: null,
@@ -75,9 +85,6 @@ const state = reactive<any>({
 	total: 0, // 总数
 	callForwardingSource: [],
 });
-const valueFormat = computed(() => {
-	return state.queryParams.dateType === 'date' ? 'YYYY-MM-DD' : state.queryParams.dateType === 'month' ? 'YYYY-MM' : 'YYYY';
-});
 /** 搜索按钮操作 */
 const handleQuery = () => {
 	// state.queryParams.PageIndex = 1;
@@ -109,19 +116,6 @@ const resetQuery = (formEl: FormInstance | undefined) => {
 	statisticalTimeRef.value.reset();
 	queryList();
 };
-// 懒加载
-const load = (row: any, treeNode: unknown, resolve: (date: any[]) => void) => {
-	requestParams.value = Other.deepClone(state.queryParams);
-	requestParams.value.StartTime = state.queryParams.crTime === null ? null : state.queryParams.crTime[0];
-	requestParams.value.EndTime = state.queryParams.crTime === null ? null : state.queryParams.crTime[1];
-	Reflect.deleteProperty(requestParams.value, 'crTime');
-	requestParams.value.AreaCode = row.areaCode;
-	statisticsOrderArea(requestParams.value)
-		.then((res: any) => {
-			resolve(res.result ?? []);
-		})
-		.catch(() => {});
-};
 // 获取基础信息
 const getBaseInfo = async () => {
 	try {
@@ -131,8 +125,52 @@ const getBaseInfo = async () => {
 		console.log(e);
 	}
 };
+const treeConfig = reactive({
+	transform: true,
+	rowField: 'areaCode',
+	parentField: 'parentId',
+	lazy: true,
+	hasChild: 'hasChild',
+	loadMethod({ row }) {
+		// 异步加载子节点
+		return fetchChildListApi(row);
+	},
+});
+const fetchChildListApi = (row: any) => {
+	return new Promise((resolve) => {
+		const request =  Other.deepClone(state.queryParams);
+		request.StartTime = state.queryParams.crTime === null ? null : state.queryParams.crTime[0];
+		request.EndTime = state.queryParams.crTime === null ? null : state.queryParams.crTime[1];
+		Reflect.deleteProperty(requestParams.value, 'crTime');
+		request.AreaCode = row.areaCode;
+		statisticsOrderArea(request)
+			.then((res: any) => {
+				resolve(res.result ?? []);
+			})
+			.catch(() => {});
+	});
+};
+// 计算合计
+const footerMethod = ({ columns, data }) => {
+	return [
+		columns.map((column: any, columnIndex: number) => {
+			if (columnIndex === 0) {
+				return '合计';
+			}
+			if (['sumCount'].includes(column.property)) {
+				return XEUtils.sum(data, column.property);
+			}
+			return null;
+		}),
+	];
+};
+const toolbarRef = ref<RefType>();
+const tableRef = ref<RefType>();
 onMounted(() => {
-	getBaseInfo();
 	queryList();
+	if (tableRef.value && toolbarRef.value) {
+		tableRef.value.connect(toolbarRef.value);
+	}
+	getBaseInfo();
 });
 </script>