init: UserBaseFront (frontend)

2026-08-10 14:41:13 +08:00
commit eea881b616
174 changed files with 32833 additions and 0 deletions
@@ -0,0 +1,214 @@
+<template>
+    <div>
+        <div :id="domId" :ref="domId" class="ztree"></div>
+    </div>
+</template>
+<script>
+export default {
+    props: {
+        treeData: {
+            type: Object,
+        },
+        setting: {
+            type: Object,
+            default: {},
+        },
+        autoClick: {
+            type: Boolean,
+            default: true,
+        },
+        isCheck: {
+            typeof: Boolean,
+            default: false,
+        },
+    },
+    data() {
+        return {
+            domId: "",
+            treeSetting: _.cloneDeep(this.setting),
+            treeObj: null,
+            highlightNodes: [],
+        };
+    },
+    created() {
+        this.$watch("treeData", val => {
+            if (val) {
+                this.$nextTick(() => {
+                    this.initTree(this.treeData, this.domId);
+                });
+            }
+        });
+    },
+    mounted() {
+        this.domId = this.uuid();
+        if (this.treeData) {
+            this.$nextTick(() => {
+                this.initTree(this.treeData, this.domId);
+            });
+        }
+    },
+    methods: {
+        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);
+            });
+        },
+        reloadTree(nodeId) {
+            this.initTree(this.treeData, this.domId);
+            if (nodeId != null) {
+                this.$nextTick(() => {
+                    this.selectNode(nodeId, true); // 第二个参数 true 会 emit on-tree-click
+                });
+            }
+        },
+        initTree(_data, _domId) {
+            const _this = this;
+            _this.treeSetting.callback.onClick = (event, treeId, treeNode, clickFlag) => {
+                // console.log(event, treeId, treeNode, clickFlag);
+                if (_this.isCheck) {
+                    var treeObj = $.fn.zTree.getZTreeObj(treeId);
+                    treeObj.checkNode(treeNode, !treeNode.checked, true);
+                }
+                _this.$emit("on-tree-click", treeNode);
+            };
+
+            _this.treeSetting.callback.beforeDrop = (treeId, treeNodes, targetNode, moveType) => {
+                if (moveType == "inner") {
+                    // 移除限制，允许叶子节点接受子节点
+                } else {
+                    if (targetNode.pid === 0) return false;
+                }
+                return true;
+            };
+
+            _this.treeSetting.callback.beforeDrag = (treeId, treeNodes) => {
+                return treeNodes[0].drag !== false;
+            };
+
+            _this.treeSetting.callback.beforeClick = (treeId, treeNode, clickFlag) => {
+                return !(treeNode.click === false);
+            };
+
+            _this.treeSetting.callback.onDrop = (event, treeId, treeNodes, targetNode, moveType) => {
+                _this.$emit("on-tree-drag", { treeNodes, targetNode, moveType });
+            };
+
+            _this.treeSetting.callback.onCheck = (event, treeId, treeNode) => {
+                _this.$emit("on-tree-check", treeNode);
+            };
+
+            _this.treeObj = $.fn.zTree.init($("#" + _domId), _this.treeSetting, _data);
+            if (_this.autoClick) {
+                if (Array.isArray(this.treeData)) {
+                    let id = this.treeData[0].id;
+                    _this.selectNode(id);
+                } else {
+                    let id = this.treeData.id;
+                    _this.selectNode(id);
+                }
+            }
+        },
+        selectNode(id, isClick = true) {
+            const _domId = this.domId;
+            var treeObj = $.fn.zTree.getZTreeObj(_domId);
+            var node = treeObj.getNodesByFilter(node => node.id == id, true);
+            if (node == null) return false;
+            treeObj.selectNode(node);
+            treeObj.expandNode(node, true, false, false);
+            treeObj.selectNode(node);
+            if (isClick) this.$emit("on-tree-click", node);
+        },
+        openTree(open) {
+            const _domId = this.domId;
+            var treeObj = $.fn.zTree.getZTreeObj(_domId);
+            treeObj.expandAll(open);
+        },
+        removeNode(id) {
+            const _domId = this.domId;
+            var treeObj = $.fn.zTree.getZTreeObj(_domId);
+            var node = treeObj.getNodesByFilter(node => node.id == id, true);
+            var pnode = node.getParentNode();
+            treeObj.removeNode(node);
+            pnode.isParent = true;
+            treeObj.updateNode(pnode);
+            this.selectNode(pnode.id);
+        },
+        getNodeById(id) {
+            const _domId = this.domId;
+            var treeObj = $.fn.zTree.getZTreeObj(_domId);
+            var node = treeObj.getNodesByFilter(node => node.id == id, true);
+            return node;
+        },
+        // 仅更新节点勾选状态，不级联、不触发 onCheck 回调
+        checkNodeById(id, checked) {
+            const _domId = this.domId;
+            var treeObj = $.fn.zTree.getZTreeObj(_domId);
+            if (!treeObj) return;
+            var node = treeObj.getNodesByFilter(node => node.id == id, true);
+            if (node) treeObj.checkNode(node, !!checked, false);
+        },
+        renameNode(id, name) {
+            const _domId = this.domId;
+            var treeObj = $.fn.zTree.getZTreeObj(_domId);
+            var node = treeObj.getNodesByFilter(node => node.id == id, true);
+            node.name = name;
+            treeObj.updateNode(node);
+        },
+        addNote(pid, id, name, isParent, children) {
+            const _domId = this.domId;
+            var treeObj = $.fn.zTree.getZTreeObj(_domId);
+            var pnode = treeObj.getNodesByFilter(node => node.id == pid, true);
+            var newNode = { pid, id, name, isParent };
+            if (children && children.length) newNode.children = children;
+            treeObj.addNodes(pnode, -1, newNode);
+        },
+        setHighlight(node, on = true) {
+            const a = $('#' + node.tId + '_a');
+            if (on) a.addClass('ztree-search-highlight');
+            else a.removeClass('ztree-search-highlight');
+        },
+        clearHighlight() {
+            (this.highlightNodes || []).forEach(n => this.setHighlight(n, false));
+            this.highlightNodes = [];
+        },
+        search(keyword) {
+            const _domId = this.domId;
+            var treeObj = $.fn.zTree.getZTreeObj(_domId);
+            if (!treeObj) return;
+            this.clearHighlight();
+            const kw = (keyword || '').trim().toLowerCase();
+            if (!kw) return;
+            const matchNodes = treeObj.getNodesByFilter(
+                (node) => node.name && node.name.toLowerCase().includes(kw),
+                false
+            ) || [];
+            if (!matchNodes.length) {
+                if (this.$Message && this.$Message.info) this.$Message.info('未搜索到匹配组');
+                return;
+            }
+            matchNodes.forEach(n => {
+                let p = n;
+                while (p) {
+                    treeObj.expandNode(p, true, false, false);
+                    p = p.getParentNode();
+                }
+            });
+            this.highlightNodes = matchNodes;
+            matchNodes.forEach(n => this.setHighlight(n, true));
+            this.selectNode(matchNodes[0].id, true);
+        },
+    },
+};
+</script>
+
+<style>
+.ztree-search-highlight {
+    background-color: #ff6600 !important;
+}
+
+.ztree li a.curSelectedNode {
+    background-color: #ffe4bb !important;
+}
+</style>