ztree结合hmap使用经验分享

项目背景

在建德封控拦截系统（Vue3+antd@2.x）为追求更快的地图初始化体验，在尝试了hmap2.5.0版本以及2.6.3版本后，由于这两个版本在现场电脑的初始化速度不够流畅，最终使用的是hmap2.1.3版本。同时由于布控选设备（树结构）存在子节点较多的情况（1000+），导致antd@2.x版本的tree组件在进行加载节点和勾选操作时回显卡顿，结合基线项目类似功能确定使用ztree插件来解决此问题。

使用场景

通过按钮出发弹窗，弹窗中两个tab项：目录选择和地图选择。

结合使用存在的问题

安装ztree插件，并在对应的vue文件中使用。此时如果在public中的index.html文件中通过script标签已经引入了hmap2.3.0.js文件，控制台会报错：

问题原因

引入本地hmap2.3.0.js文件修改了数组原型Flat方法，同时ztree插件中引入的jquery也需要使用原生的Flat方法。由于前者，导致ztree在使用的时候初始化树节点报错，无法创建树节点。

解决方案

1. 在App.vue文件的onMounted钩子函数中对引入hamp2.3.0.js文件后的原型Flat方法进行缓存

   <script setup>
   import { useStore } from 'vuex';
   const store = useStore();
       
   onMounted(() => {
   	store.commit('setFlatFunc', Array.prototype.flat);
   });
   </script>
   

2. 在树组件中的mounted钩子函数中重置数组原型Flat方法：

3. 在使用到ztree时，先重置flat方法；使用结束后，在onUnmounted钩子函数进行flat方法重置为缓存中的flat函数。

   <script>
   import { onUnmounted, computed } from 'vue';
   import { useStore } from 'vuex';
   const store = useStore();
       
   const flatFunc = computed(() => {
       return store._state.data.flatFunc;
   });
   onUnmounted(() => {
      Array.prototype.flat = flatFunc;
   });
   </script>
   

zTree的使用

官网： https://www.treejs.cn/v3/main.php#_zTreeInfo

样例demo： https://www.treejs.cn/v3/demo.php#_101

api文档： https://www.treejs.cn/v3/api.php

1. 安装 zTree 插件

npm install ztree --save

2. 在组件中引入 zTree：在需要使用 zTree 的组件中，可以通过 import 语句引入 zTree：

import $ from 'jquery';
import 'ztree/css/zTreeStyle/zTreeStyle.css';
import 'ztree/js/jquery.ztree.all.js';

3. 此时如果控制台报错

   

   需要在vue.config.js中添加代码：

   

4. 在组件的 mounted() 钩子函数中初始化 zTree：在组件加载完成后，可以在 mounted() 钩子函数中初始化 zTree：

   <template>
     <div>
       <div id="tree"></div>
     </div>
   </template>
   <script>
   mounted() {
     this.initZTree();
   },
   
   methods: {
     initZTree() {
       const setting = {
         // zTree 的配置参数
         // ...
       };
   
       const zNodes = [
         // zTree 的节点数据
         // ...
       ];
   
       $.fn.zTree.init($("#tree"), setting, zNodes);
     }
   }
   </script>
   

异步树+后台自动加载代码实现：

<template>
  <div class="ztree tree-wrapper" id="treeWrapper"></div>
</template>
<script setup>
import $ from 'jquery';
import 'ztree/css/zTreeStyle/zTreeStyle.css';
import 'ztree/js/jquery.ztree.all.js';

import { watch, reactive, ref, onMounted, computed, onUnmounted } from "vue";

const treeObj = ref(); // 树结构对象
const expandedKeys = ref([]);
const selectedPointList = ref([]); // 需要展示的点位集合
const timer = ref(null);

// 接口数据过滤操作
const ajaxDataFilter = (treeId, parentNode, { code, data, msg }) => {
  if (code === '0') {
    return data.map(ele => ({
      ...ele,
      icon: ele.isTreeNode ? dep : device,
      isParent: ele.isTreeNode,
      checked: parentNode && parentNode.checked || selectedPointList.value.filter(item => item.indexCode === ele.indexCode).length > 0,
			type: ele.isTreeNode ? 1 : 0,
    }));
  } else {
    return message.error(msg);
  }
}

const asyncNodes = (nodes) => {
  if (!nodes) return;
  for(var i = 0, l = nodes.length; i < l; i++) {
    if (nodes[i].isParent && nodes[i].zAsync) {
      asyncNodes(nodes[i].children);
    } else {
      const node = treeObj.value.getNodeByParam('indexCode', nodes[i].indexCode, null);
      treeObj.value.reAsyncChildNodes(node, "refresh", true);
    }
  }
}

// 树节点的勾选操作
const zTreeOnCheck = (event, treeId, treeNode) => {
	// 异步树

	// 设置展开节点集合
	const _res = treeObj.value.getCheckedNodes(true).filter(ele => ele.check_Child_State === 1).map(ele => ele.indexCode);
	expandedKeys.value = Array.from(new Set([..._res, ...expandedKeys.value]));
	// 已勾选的节点（全选的节点和半选的节点）
	const checkedParentNodes = treeObj.value.getCheckedNodes(true).filter(ele => ele.check_Child_State === 2 || ele.check_Child_State === -1);
	const res = [];
	// 过滤出需要展示的节点数据
	checkedParentNodes.forEach(ele => {
		const repeatNode = checkedParentNodes.filter(item => item.indexCode === ele.parentIndexCode);
		if (repeatNode.length === 0) res.push(ele);
	});

	timer.value = setTimeout(() => {
		selectedPointList.value = res;
	}, 0);
}

// 后台加载全部节点
const asyncAll = () => {
  const a = treeObj.value.getNodes();
	const node = treeObj.value.getNodeByParam('indexCode', a[0].indexCode, null);
	treeObj.value.reAsyncChildNodes(node, "refresh", true);
	if (expandedKeys.value.length === 0) treeObj.value.expandNode(node, true, false, true, true);
	asyncNodes(treeObj.value.getNodes());
}

// zTree插件的配置项对象
const setting = {
  treeId: 'treeId',
  check: {
    enable: true,
		chkStyle: 'checkbox',
		chkboxType: {
      'Y': 'ps',
      'N': 'ps'
    }
  },
  data: {
    key: {
      name: 'name',
      isParent: 'isParent',
      children: 'children',
      checked: 'checked',
    }
  },
  view: {
    showLine: false,
		nameIsHTML: true,
		fontCss: {
			color: '#fff',
		},
		expandSpeed: '',
  },
  async: {
    enable: true,
    url: `${window.location.origin}/cirlayer/device/v2/resourceTree.do`,
    autoParam: ['indexCode'],
    otherParam: {
      'deviceType': props.deviceType,
    },
    dataType: 'text',
    type: 'POST',
    contentType: 'application/x-www-form-urlencoded',
    dataFilter: ajaxDataFilter,
  },
  callback: {
    beforeAsync: function(treeId, treeNode) {
      return true;
    },
    onAsyncError: function(event, treeId, treeNode) {
      console.log('onAsyncError', event, treeId, treeNode);
    },
		onAsyncSuccess: function(event, treeId, treeNode, msg) {
			if (!treeObj.value) {
				// 初始化zTree实例对象
      	treeObj.value = $.fn.zTree.getZTreeObj(treeId);
				asyncAll();
			}

			// 判断当前渲染的节点是否有子节点，如果有，后台自动加载
			if (treeNode && treeNode.children.length) asyncNodes(treeNode.children);

			// 用于设置展开节点
			if (expandedKeys.value.length) {
				expandedKeys.value.forEach(ele => {
					const node = treeObj.value.getNodeByParam('indexCode', ele, null);
					treeObj.value.expandNode(node, true, false, true, true);
				});
			}
    },
		onCheck: zTreeOnCheck,
  }
}

// 向上关联父节点-取消节点状态
const cancelParentCheckNode = (tree, node) =>{
	const parentNode = node.getParentNode();
	if (parentNode !== null) {
		let isAllUnChecked = true;
		// 如果当前节点存在父节点
		const childrenNodes = parentNode.children;
		// 遍历父节点的所有子节点
		for (let i = 0; i < childrenNodes.length; i+= 1) {
			if (childrenNodes[i].checked) {
				isAllUnChecked = false;
				break;
			}
		}
		if (isAllUnChecked) {
			// 如果所有的子节点都没有选中，则更新父节点的状态
			parentNode.checked = false;
			tree.updateNode(parentNode);
			cancelParentCheckNode(tree, parentNode);
		}
	}
}
// 向下关联子节点-取消节点状态
const cancelSonCheckNode = (tree, node) =>{
	const sonNode = node.children;
	if (sonNode) {
		// 如果当前节点存在子节点
		// 遍历父节点的所有子节点
		for (let i = 0; i < sonNode.length; i+= 1) {
			const _sonChildren = tree.getNodeByParam('indexCode', sonNode[i].indexCode, null);
			treeObj.value.checkNode(_sonChildren, false, false);
			if (_sonChildren.children) {
				cancelSonCheckNode(tree, _sonChildren);
			}
		}
	}
}

onMounted(() => {
	Array.prototype.flat = function(depth = 1) {
		const res = [];
		function flatten(array, currentDepth) {
			array.forEach(item => {
				if (Array.isArray(item) && currentDepth < depth) {
					flatten(item, currentDepth + 1);
				} else {
					res.push(item);
				}
			});
		}
		flatten(Array.from(this), 0);
		return res;
	}
	$.fn.zTree.init($('#treeWrapper'), setting);
});

onUnmounted(() => {
	clearTimeout(timer.value);
	timer.value = null;
	Array.prototype.flat = flatFunc;
});
</script>