init

2026-08-12 17:19:37 +08:00
commit e73d22744e
131 changed files with 66997 additions and 0 deletions
@@ -0,0 +1,159 @@
+<template>
+    <div :id="domId" :ref="domId" class="ztree"></div>
+</template>
+
+<script>
+require("@public/libs/ztree/zTreeStyle.css");
+import "@public/libs/ztree/jquery.ztree.all.min.js";
+export default {
+    props: {
+        treeData: {
+            type: Object,
+            default: () =>  ({})
+        },
+        setting: {
+            type: Object,
+            default: () => ({})
+        },
+        // 外部传入需要默认选中的节点id，不传则选中第一个一级节点
+        selectId: {
+            type: [Number, String],
+            default: null
+        }
+    },
+    data() {
+        return {
+            domId: "",
+            treeSetting: {
+                view: {
+                    dblClickExpand: false,
+                    showIcon: false,
+                },
+                check: {
+                    enable: false,
+                },
+                callback: {},
+            },
+        };
+    },
+    watch: {
+        treeData(val) {
+            if (val && val.length) {
+                this.$nextTick(() => {
+                    this.initTree(this.treeData, this.domId);
+                });
+            }
+        },
+        // 监听外部传入选中id变化，自动重新选中
+        selectId() {
+            this.$nextTick(() => {
+                this.handleDefaultSelect();
+            })
+        }
+    },
+    created() {
+        this.$watch("treeData", (val) => {
+            if (val) {
+                this.$nextTick(() => {
+                    this.initTree(this.treeData, this.domId);
+                });
+            }
+        });
+    },
+    mounted() {
+        this.domId = this.uuid();
+    },
+    methods: {
+        getZtreeInstance() {
+            return $.fn.zTree.getZTreeObj(this.domId);
+        },
+        uuid() {
+            return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(
+                /[xy]/g,
+                function (c) {
+                    var r = (Math.random() * 16) | 0,
+                        v = c == "x" ? r : (r & 0x3) | 0x8;
+                    return v.toString(16);
+                }
+            );
+        },
+        /**
+         * 核心方法：根据节点id选中节点，并逐层展开所有父节点
+         * @param {String|Number} targetId 目标节点id
+         */
+        selectNodeById(targetId) {
+            const treeObj = $.fn.zTree.getZTreeObj(this.domId);
+            if (!treeObj || !targetId) return;
+
+            const targetNode = treeObj.getNodeByParam('id', targetId);
+            if (!targetNode) return;
+
+            // 高亮选中节点
+            treeObj.selectNode(targetNode);
+
+            // 循环向上展开所有父节点
+            let currNode = targetNode;
+            while (currNode) {
+                treeObj.expandNode(currNode, true, false, false);
+                currNode = currNode.getParentNode();
+            }
+        },
+        /**
+         * 默认选中逻辑：有selectId选对应节点，无则选第一个一级节点
+         */
+        handleDefaultSelect() {
+            const treeObj = $.fn.zTree.getZTreeObj(this.domId);
+            if (!treeObj) return;
+
+            const rootNodes = treeObj.getNodes();
+            if (!rootNodes || rootNodes.length === 0) return;
+
+            if (this.selectId !== null && this.selectId !== undefined) {
+                // 外部传入id，选中指定节点
+                this.selectNodeById(this.selectId);
+            } else {
+                // 无传入id，默认选中第一个一级节点
+                const firstRoot = rootNodes[0];
+                treeObj.selectNode(firstRoot);
+                treeObj.expandNode(firstRoot, true, false, false);
+            }
+        },
+        initTree(_data, _domId) {
+            const _this = this;
+            // 合并自定义setting
+            _this.treeSetting = Object.assign({}, _this.treeSetting, _this.setting);
+
+            // 绑定点击回调
+            _this.treeSetting.callback.onClick = (event, treeId, treeNode) => {
+                _this.$emit("on-tree-click", treeNode);
+            };
+            // 绑定复选框点击回调
+            _this.treeSetting.callback.onCheck = (event, treeId, treeNode) => {
+                const zTreeObj = $.fn.zTree.getZTreeObj(treeId);
+                // getCheckedNodes(true) 获取所有手动勾选节点，不分层级
+                const allChecked = zTreeObj.getCheckedNodes(true);
+                this.$emit('on-tree-Check', allChecked);
+            };
+            // 展开所有一级节点
+            var zNodes = _this.openFistNode(_data);
+            // 初始化树
+            $.fn.zTree.init($("#" + _domId), _this.treeSetting, zNodes);
+            // 执行默认选中逻辑
+            this.$nextTick(() => {
+                this.handleDefaultSelect();
+            })
+        },
+        openFistNode(_zNodes) {
+            if (_zNodes && _zNodes.length > 0) {
+                for (var i = 0; i < _zNodes.length; i++) {
+                    _zNodes[i].open = true;
+                }
+            }
+            return _zNodes;
+        }
+    },
+};
+</script>
+
+<style>
+</style>