portal/src/components/management/Layout/EditableTree/EditableTree.vue

<template>
    <div class="editableTree fsize-m4">
        <div class="editableTree-filter" v-show="needTextFilter">
            <el-input
                    placeholder="输入关键字进行过滤"
                    v-model="filterText">
            </el-input>
        </div>
        <div class="wrap-tree">
            <el-tree
                    :data="newData"
                    :node-key="nodeKey"
                    :default-expanded-keys="stDefaultExpandedKeys"
                    @node-drag-start="handleDragStart"
                    @node-drag-enter="handleDragEnter"
                    @node-drag-leave="handleDragLeave"
                    @node-drag-over="handleDragOver"
                    @node-drag-end="handleDragEnd"
                    @node-drop="handleDrop"
                    @node-click="handleNodeClick"
                    @node-expand="handleNodeExpand"
                    @node-collapse="handleNodeCollapse"
                    :allow-drop="allowDrop"
                    :draggable="treeDraggable"
                    :expand-on-click-node="false"
                    ref="tree"
                    :filter-node-method="filterNode"
                    :highlight-current="true"
            >
                <div class="custom-tree-node" slot-scope="{ node, data }">
                    <editor-tree-item
                            :node="node"
                            :data="data"
                            :needControl="isControl"
                            @labelClick="handleLabelClick"
                            @treeItemAppend="treeAppend"
                            @treeItemRemove="treeRemove"
                            @changeDragState="changeDragState"
                            @treeItemEditor="getTreeItemEditor">
                    </editor-tree-item>
                </div>
            </el-tree>
        </div>
    </div>
</template>

<script>
    import EditorTreeItem from '@/components/management/Layout/EditableTree/EditableTreeItem.vue';
    import { mapGetters } from 'vuex';

    export default {
        name:       'EditableTree',
        components: {
            EditorTreeItem,
        },
        props:      {
            newData:         {
                // 树的数据
                type:    Array,
                default: () => arr,
            },
            allowDropStatue: {
                // 是否允许设置拖拽
                type:    Boolean,
                default: false,
            },
            isDraggable:     {
                type:    Boolean,
                default: true,
            },
            needTextFilter:  {
                type:    Boolean,
                default: false,
            },
            isControl:       {
                type:    Boolean,
                default: true,
            },
            nodeKey:         {
                type:    String,
                default: 'id',
            },
            expandedKeys:    {
                // 树的数据
                type:    Array,
                default: () => [],
            },
        },
        data() {
            return {
                input:                 '',
                startData:             '',
                showItem:              true,
                treeDraggable:         this.isDraggable,
                filterText:            '',
                currentNodekey:        '',
                stDefaultExpandedKeys: [],
            };
        },
        methods:    {
            filterNode(value, data) {
                if (!value) {
                    return true;
                }
                return data.lable.indexOf(value) !== -1;
            },
            handleLabelClick(data) {
                this.$refs.tree.setCurrentKey(data.data.id);
                this.$emit('handleClick', data);
            },
            setCurrentKey(id) {
                this.$refs.tree.setCurrentKey(id);
            },
            handleNodeClick(data, Node, self) {
                /*const opt = {data, Node, self};
                this.$emit('handleClick', opt);*/
            },
            handleNodeExpand(data) {
                this.$emit('syncExpandedKeys', {
                    data:     data,
                    isExpand: true,
                });
            },
            handleNodeCollapse(data) {
                this.$emit('syncExpandedKeys', {
                    data:     data,
                    isExpand: false,
                });
            },
            handleDragStart(node, ev) {
                this.startData = node;
            },
            handleDragEnter(draggingNode, dropNode, ev) {
            },
            handleDragLeave(draggingNode, dropNode, ev) {
            },
            handleDragOver(draggingNode, dropNode, ev) {
            },
            handleDragEnd(draggingNode, dropNode, dropType, ev) {
            },
            // 拖拽放置时触发
            handleDrop(draggingNode, dropNode, dropType, ev) {
                this.$emit('handleDrop', dropNode, draggingNode, dropType, ev, this.startData);
            },
            // 是否允许拖拽
            allowDrop(draggingNode, dropNode, dropType) {
                const c = dropType !== 'prev' && dropType !== 'next';

                if (!c && dropNode.data.lable === this.newData[0].lable && this.allowDropStatue) {

                    return false;
                } else {
                    return true;
                }
            },
            // 编辑事件回调触发
            getTreeItemEditor(data) {
                this.$emit('treeEditor', data);
            },
            // 新增事件回调触发
            treeAppend(payload) {
                let { node, data } = payload;
                this.$emit('treeAppend', data);
            },
            // 删除事件回调触发
            treeRemove(payload) {
                this.$emit('treeRemove', payload);
            },

            changeDragState(b) {
                this.treeDraggable = b;
            },
            setExpanded(treeData, expandedKeys) {
                function setTreeChildeExpanded(children, that) {
                    for (const child of children) {
                        if (expandedKeys.indexOf(child[that.nodeKey]) > -1) {
                            that.stDefaultExpandedKeys.push(child[that.nodeKey]);
                        }
                        if (child.children) {
                            setTreeChildeExpanded(child.children, that);
                        }
                    }
                }

                // default expand;
                if (!expandedKeys || expandedKeys.length === 0) {
                    for (const treeDataItem of treeData) {
                        this.stDefaultExpandedKeys.push(treeDataItem[this.nodeKey]);
                    }
                } else if (Array.isArray(expandedKeys)) {
                    for (const treeDataItem of treeData) {
                        this.stDefaultExpandedKeys.push(treeDataItem[this.nodeKey]);
                        if (treeDataItem.children) {
                            setTreeChildeExpanded(treeDataItem.children, this);
                        }
                    }
                }
            },
            pushExpandedKey(expandedKeys, id) {
                if (expandedKeys.indexOf(id) === -1) {
                    expandedKeys.push(id);
                }
            }
        },
        computed:   {},
        mounted() {
        },
        watch:      {
            newData: {
                handler(newVal, oldVal) {
                    this.setExpanded(newVal, this.expandedKeys);
                },
            },
            /*expandedKeys: {
                handler(newVal, oldVal) {
                    this.setExpanded(this.newData, newVal);
                },
                // immediate: true
            },*/
            filterText(val) {
                this.$refs.tree.filter(val);
            },
        },
    };
</script>