【能源节约管理系统行业树组件优化总结】

能源节约管理系统行业树组件优化总结

问题背景

在能源节约管理系统中，我们需要一个行业选择组件，以树形结构展示国民经济行业分类数据。由于行业数据量大且层级多，我们采用了懒加载的方式实现。然而，在编辑和详情模式下，需要根据已保存的行业代码（如B0913）正确回显选中的行业。这带来了几个挑战：

1. 数据回显问题：如何基于单一行业代码（如B0913）预加载并展示完整的层级路径
2. 代码冗余：相关逻辑都写在单个组件中，导致代码臃肿
3. 可维护性：逻辑与UI耦合度高，不利于后期维护

解决方案

我们将行业树相关的方法从业务组件(add-modal.vue)中抽取出来，放入工具类(utils.ts)中，实现了逻辑与视图的分离。

关键方法设计与实现

1. 初始化行业树 (initIndustryTree)

该方法负责初始化行业树的第一级数据，并根据当前状态决定是否需要预加载节点。

// 工具类中的实现
export const initIndustryTree = async (selectedIndustryCode?: string,isPreloading = false,viewTypeStr = ''
) => {try {// 如果有选中的行业code，优先尝试预加载节点if (selectedIndustryCode &&typeof selectedIndustryCode === 'string' &&(viewTypeStr === 'EDIT' || viewTypeStr === 'DETAIL')) {if (!isPreloading) {console.log('通过预加载方式初始化行业树');// 预加载节点并返回结果return await loadIndustryNodesByCode(selectedIndustryCode);}}// 如果没有选中的行业或预加载失败，则加载第一级节点const firstLevelNodes = await loadIndustryData();return firstLevelNodes;} catch (error) {console.error('初始化行业树失败', error);return [];}
};// 组件中的调用
const initIndustryTree = async () => {try {const selectedIndustryCode = formData.value.industry; // 获取当前选中的行业codeconst result = await initIndustryTreeUtil(selectedIndustryCode,isPreloadingIndustry.value,props.type.toString() // 将枚举转换为字符串);// 如果返回的是数组，说明是初始化第一级节点的结果if (Array.isArray(result)) {industryTreeData.value = result;} else if (result && typeof result === 'object') {// 如果返回的是对象，说明是预加载节点的结果const { industryTreeData: treeData, expandedKeys: keys, industryValue } = result;if (treeData && treeData.length > 0) {industryTreeData.value = treeData;}if (keys && keys.length > 0) {expandedKeys.value = keys;}if (industryValue) {formData.value.industry = industryValue;}}} catch (error) {console.error('初始化行业树失败', error);industryTreeData.value = [];}
};

2. 加载行业树节点 (loadIndustryNode)

该方法是树组件懒加载的核心，根据当前节点层级加载子节点。

// 工具类中的实现
export const handleLoadIndustryNode = async (node: any,resolve: (data: any[]) => void,selectedIndustryCode?: string
) => {if (node.level === 0) {// 加载根节点的子节点（第一级）const data = await loadIndustryData();resolve(data);} else {// 根据节点层级加载不同级别的子节点const params: any = {category: node.data.category || node.data.code};if (node.level >= 1) {// 二级及以上添加二级分类参数params.secondCategory = node.data.secondCategory;}if (node.level >= 2) {// 三级及以上添加三级分类参数params.thirdCategory = node.data.thirdCategory;}try {const res = await Api.industryGbList(params);// 处理返回的数据，添加必要的属性const childNodes = res.map((item: any) => ({...item,name: item.name || item.fieldName || item.categoryName || '未命名',code: item.code || item.id || item.categoryCode || '',isLeaf: node.level >= 3 // 四级节点是叶子节点}));resolve(childNodes);} catch (error) {console.error('加载行业节点失败', error);resolve([]);}}
};// 组件中的调用
const loadIndustryNode = (node: any, resolve: (data: any[]) => void) => {loadIndustryNodeUtil(node, resolve, formData.value.industry);
};

3. 根据行业代码预加载节点路径 (loadIndustryNodesByCode)

这是解决回显问题的核心方法，通过解析行业代码，逐层加载节点并构建完整路径。

// 工具类中的实现
export const loadIndustryNodesByCode = async (industryCode: string) => {if (!industryCode) {return { industryTreeData: [], expandedKeys: [], industryValue: '' };}try {console.log('开始预加载行业节点，行业代码:', industryCode);// 提取行业代码的各部分，例如：B0913 => 一级: B, 二级: 09, 三级: 091, 四级: 0913const firstLevel = industryCode.charAt(0); // 第一个字符，如 Blet secondLevel = '';let thirdLevel = '';let fourthLevel = '';if (industryCode.length >= 3) {secondLevel = industryCode.substring(1, 3); // 第2-3个字符，如 09}if (industryCode.length >= 4) {thirdLevel = industryCode.substring(1, 4); // 第2-4个字符，如 091}if (industryCode.length >= 5) {fourthLevel = industryCode.substring(1); // 第2个字符到末尾，如 0913}console.log('分解的行业代码:', {一级: firstLevel,二级: secondLevel,三级: thirdLevel,四级: fourthLevel});// 记录需要展开的节点keysconst expandedKeys: string[] = [];let selectedNode = null;let finalIndustryValue = industryCode;// 加载一级节点const firstLevelNodes = await loadIndustryData();// 查找一级节点const firstLevelNode = firstLevelNodes.find((node) => node.code === firstLevel || node.category === firstLevel);if (!firstLevelNode) {console.error('找不到一级节点:', firstLevel);return { industryTreeData: firstLevelNodes, expandedKeys, industryValue: industryCode };}expandedKeys.push(firstLevelNode.code);selectedNode = firstLevelNode;// 如果没有二级代码，一级节点就是目标if (!secondLevel) {return {industryTreeData: firstLevelNodes,expandedKeys,industryValue: firstLevelNode.code};}// 加载二级节点const params1 = { category: firstLevelNode.category || firstLevelNode.code };const secondLevelRes = await Api.industryGbList(params1);const secondLevelNodes = secondLevelRes.map((item: any) => ({...item,name: item.name || item.fieldName || item.categoryName || '未命名',code: item.code || item.id || item.categoryCode || '',isLeaf: false}));// 将二级节点添加到一级节点下firstLevelNode.children = secondLevelNodes;// 查找二级节点const targetSecondLevelNode = secondLevelNodes.find((node) =>node.secondCategory === secondLevel || (node.code && node.code.endsWith(secondLevel)));if (!targetSecondLevelNode) {console.error('找不到二级节点:', secondLevel);return {industryTreeData: firstLevelNodes,expandedKeys,industryValue: selectedNode.code};}expandedKeys.push(targetSecondLevelNode.code);selectedNode = targetSecondLevelNode;// 如果没有三级代码，二级节点就是目标if (!thirdLevel) {return {industryTreeData: firstLevelNodes,expandedKeys,industryValue: targetSecondLevelNode.code};}// 加载三级节点const params2 = {category: targetSecondLevelNode.category,secondCategory: targetSecondLevelNode.secondCategory};const thirdLevelRes = await Api.industryGbList(params2);const thirdLevelNodes = thirdLevelRes.map((item: any) => ({...item,name: item.name || item.fieldName || item.categoryName || '未命名',code: item.code || item.id || item.categoryCode || '',isLeaf: false}));// 将三级节点添加到二级节点下targetSecondLevelNode.children = thirdLevelNodes;// 查找三级节点const targetThirdLevelNode = thirdLevelNodes.find((node) => node.thirdCategory === thirdLevel || (node.code && node.code.endsWith(thirdLevel)));if (!targetThirdLevelNode) {console.error('找不到三级节点:', thirdLevel);return {industryTreeData: firstLevelNodes,expandedKeys,industryValue: selectedNode.code};}expandedKeys.push(targetThirdLevelNode.code);selectedNode = targetThirdLevelNode;// 如果没有四级代码，三级节点就是目标if (!fourthLevel) {return {industryTreeData: firstLevelNodes,expandedKeys,industryValue: targetThirdLevelNode.code};}// 加载四级节点const params3 = {category: targetThirdLevelNode.category,secondCategory: targetThirdLevelNode.secondCategory,thirdCategory: targetThirdLevelNode.thirdCategory};const fourthLevelRes = await Api.industryGbList(params3);const fourthLevelNodes = fourthLevelRes.map((item: any) => ({...item,name: item.name || item.fieldName || item.categoryName || '未命名',code: item.code || item.id || item.categoryCode || '',isLeaf: true}));// 将四级节点添加到三级节点下targetThirdLevelNode.children = fourthLevelNodes;// 查找四级节点const targetFourthLevelNode = fourthLevelNodes.find((node) =>node.fourthCategory === fourthLevel ||(node.code && node.code.endsWith(fourthLevel)) ||node.code === industryCode);if (!targetFourthLevelNode) {console.error('找不到四级节点:', fourthLevel);return {industryTreeData: firstLevelNodes,expandedKeys,industryValue: selectedNode.code};}expandedKeys.push(targetFourthLevelNode.code);selectedNode = targetFourthLevelNode;finalIndustryValue = targetFourthLevelNode.code;return {industryTreeData: firstLevelNodes,expandedKeys,industryValue: finalIndustryValue};} catch (error) {console.error('预加载行业节点失败:', error);// 发生错误时返回空结果return { industryTreeData: [], expandedKeys: [], industryValue: industryCode };}
};// 组件中的调用
const loadIndustryNodesByCode = async (industryCode: string) => {if (!industryCode || isPreloadingIndustry.value) return;try {isPreloadingIndustry.value = true;console.log('开始预加载行业节点，行业代码:', industryCode);// 清空树数据，确保重新加载industryTreeData.value = [];// 清空已展开的节点列表expandedKeys.value = [];// 调用工具方法预加载节点const result = await loadIndustryNodesByCodeUtil(industryCode);// 更新树数据if (result.industryTreeData && result.industryTreeData.length > 0) {industryTreeData.value = result.industryTreeData;}// 更新展开的节点if (result.expandedKeys && result.expandedKeys.length > 0) {expandedKeys.value = result.expandedKeys;}// 更新选中的行业值if (result.industryValue) {formData.value.industry = result.industryValue;}} catch (error) {console.error('预加载行业节点失败:', error);// 确保即使失败，也设置行业代码formData.value.industry = industryCode;} finally {isPreloadingIndustry.value = false;}
};

4. 处理树选择器可见性变化 (handleTreeVisibleChange)

控制树选择器显示/隐藏时的行为，确保数据正确加载。

// 工具类中的实现
export const handleTreeVisibleChange = (visible: boolean,industryTreeData: any[]
): boolean => {return visible && (!industryTreeData || industryTreeData.length === 0);
};// 组件中的调用
const handleTreeVisibleChange = (visible: boolean) => {if (visible && (!industryTreeData.value || industryTreeData.value.length === 0)) {// 初始化树数据initIndustryTree();}
};

组件的应用

在业务组件中，我们这样使用行业树：

<template><!-- 行业树形选择器 --><el-tree-selectv-if="item.type === 'tree-select' && item.prop === 'industry'":placeholder="item.rules[0].message"v-model="formData[item.prop]":data="industryTreeData":props="industryTreeProps":load="loadIndustryNode"lazynode-key="code"check-strictlyvalue-key="code"filterableclearable:default-expanded-keys="expandedKeys":render-after-expand="false"@visible-change="handleTreeVisibleChange"@change="handleIndustryChange"@node-click="handleIndustryNodeClick"></el-tree-select>
</template><script setup>
// 业务组件中引入工具方法
import {industryTreeProps,handleLoadIndustryNode,loadIndustryData,formatSubmitData,mapOptionValue,initIndustryTree as initIndustryTreeUtil,loadIndustryNode as loadIndustryNodeUtil,loadIndustryNodesByCode as loadIndustryNodesByCodeUtil,handleTreeVisibleChange as handleTreeVisibleChangeUtil
} from './utils';// 声明必要的响应式数据
const industryTreeData = ref<any[]>([]);
const industrySelectedNode = ref<any>(null);
const isPreloadingIndustry = ref(false);
const expandedKeys = ref<string[]>([]);// 核心方法实现
const initIndustryTree = async () => {try {const selectedIndustryCode = formData.value.industry;const result = await initIndustryTreeUtil(selectedIndustryCode,isPreloadingIndustry.value,props.type.toString());// 处理返回结果，更新UI状态if (Array.isArray(result)) {industryTreeData.value = result;} else if (result && typeof result === 'object') {const { industryTreeData: treeData, expandedKeys: keys, industryValue } = result;if (treeData && treeData.length > 0) {industryTreeData.value = treeData;}if (keys && keys.length > 0) {expandedKeys.value = keys;}if (industryValue) {formData.value.industry = industryValue;}}} catch (error) {console.error('初始化行业树失败', error);industryTreeData.value = [];}
};// 其他方法实现...// 组件挂载时初始化
onMounted(() => {initIndustryTree();getDetail(); // 获取详情数据
});
</script>

解决的痛点

1. 代码模块化：将行业树相关逻辑抽离为独立方法，提高代码可读性
2. 功能解耦：UI层与业务逻辑分离，降低了维护成本
3. 数据回显问题：通过行业代码解析和预加载机制，解决了树选择器的回显问题
4. 代码复用：工具方法可在其他需要行业选择的组件中复用
5. 错误处理优化：统一处理各种异常情况，提高了组件的稳定性

业务流程优化

优化后的行业树组件处理流程更加清晰：

总结

通过这次优化，我们不仅解决了行业树组件的回显问题，还提高了代码的可维护性和复用性。将业务逻辑与UI展示分离的设计思路值得在系统其他部分推广应用。未来，我们可以进一步考虑将行业树封装为完全独立的通用组件，以满足系统内多处对行业选择的需求。