vue+Elementui+vue2-org-tree制作组织架

[图片上传失败...(image-7bb348-1632405099244)]
)
[图片上传失败...(image-29a13f-1632405099244)]
)

html 部分代码

 <div>
                <vue2-org-tree
                    v-bind:data="ops.data"
                    collapsable
                    :label-width="90"
                    :label-class-name="labelClass"
                    :render-content="renderContent"
                    @on-expand="onExpand"
                    @on-node-click="onNodeClick"
                    @on-node-mouseover="onNodeMouseOver"
                    @on-node-mouseout="onNodeMouseOut"
                    selected-class-name="selected-node"
                    selected-key="selectedKey"
                ></vue2-org-tree>
                <el-dialog
                  :title="titleName"
                  :visible.sync="dialogVisible"
                  width="30%"
                  :before-close="handleClose">
                  <el-form ref="form" :model="form" label-width="80px">
                      <el-form-item label="节点名称：">
                        <el-input v-model="form.name"></el-input>
                      </el-form-item>
                  </el-form>
                  <span slot="footer" >
                    <el-button size="small" @click="dialogVisible = false">取 消</el-button>
                    <el-button size="small" type="primary" @click="onSubmit">确 定</el-button>
                  </span>
                </el-dialog>
            </div>

Vue中部分代码：

props: {
            ops: {
                default: function () {
                    return {
                        title: "",
                        data:{}
                    }
                }
            }
        },
        data:function(){
            return{
                dialogVisible:false,
                titleName:"添加同级", //编辑框的title
                dataArray:"", //动态变量
                form: {
                    name:''
                },
            }
        },
        methods: {
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {});
             },
            labelClass:function (data) {
                return "bg_node";
            },
            /**
             * 鼠标点击进去
             * @param h
             * @param data
             * @returns {*}
             */
            renderContent:function(h, data) {
                var _that = this;
                return h('el-dropdown',{
                    attrs:{
                        trigger: 'click'
                    },
                },[
                    h('i',{
                        domProps:{
                            href:'javascript:;'
                        },
                        on:{
                            click:function () {
                                data.children ? true: false;
                            }
                        }
                    },data.label),
                    h('el-dropdown-menu',{
                        slot:'dropdown',
                    },[
                        h('el-dropdown-item',{
                            style:{
                                display: (data.parent_id !=0 ) ? 'block' : 'none'
                            },
                            nativeOn:{
                                click:function () {
                                    _that.dialogVisible = true;
                                    _that.titleName = "新增同级";
                                    _that.dataArray=data;

                                }
                            }
                        },'新增同级'),
                        h('el-dropdown-item',{
                            nativeOn:{
                                click:function () {
                                    _that.dialogVisible = true;
                                    _that.titleName = "新增下级";
                                    _that.dataArray=data;
                                }
                            }
                        },'新增下级'),
                        h('el-dropdown-item',{
                            nativeOn:{
                                click:function () {
                                    _that.dialogVisible = true;
                                    _that.titleName = "修改节点";

                                }
                            }
                        },'修改节点'),
                        h('el-dropdown-item',{
                            style:{
                                display: (data.parent_id !=0 && !data.children) ? 'block' : 'none'
                            },
                            nativeOn:{
                                click:function () {
                                    _that.dialogVisible = false;
                                    _that.titleName = "删除节点";
                                    _that.$confirm('此操作将永久删除该节点，是否继续？','提示',{
                                        confirmButtonText:'确定',
                                        cancelButtonText:'取消',
                                        type: 'warning'
                                    }).then(function () {
                                        _that.$emit('evs', {
                                            eventName: "onDelect",
                                            arguments: {
                                                dataVal: this.dataArray,
                                            }
                                        });
                                        //这个成功给后端
                                        _that.$message({
                                            type:'success',
                                            message:'删除成功！'
                                        });
                                    }).catch(function (reason) {
                                        _that.$message({
                                            type:'info',
                                            message:'已取消删除'
                                        })
                                    })
                                }
                            }
                        },'删除节点')
                    ])
                ])
            },
            /***
             * 提交按钮
             */
            onSubmit:function(){
                const _that=this;
                switch (this.titleName) {
                    case "新增同级":
                        let peer={label:this.form.name,parent_id:this.dataArray.parent_id};
                        this.ops.data.children.push(peer); //模拟添加同级，对接时候注释
                        _that.$emit('evs', {
                            eventName: "onAdd",
                            arguments: {
                                dataVal: peer, //后端更新数据，返回新数组渲染
                            }
                        });
                        _that.dialogVisible = false;
                        break;
                    case "新增下级":
                        let lower={label:this.form.name,parent_id:this.dataArray.id};
                        let b=this.getChild(this.ops.data.children,this.dataArray,[]); //模拟添加同级，对接时候注释
                        this.ops.data.children=b;//模拟添加同级，对接时候注释
                        _that.$emit('evs', {
                            eventName: "onAddUp",
                            arguments: {
                                dataVal: lower,//后端更新数据，返回新数组渲染
                            }
                        });
                        _that.dialogVisible = false;
                        break;
                    case "修改节点":
                        let nodeData={id:this.dataArray.id,label:this.form.name,parent_id:this.dataArray.parent_id};
                        _that.$emit('evs', {
                            eventName: "onEdit",
                            arguments: {
                                dataVal: nodeData,//后端更新数据，返回新数组渲染
                            }
                        });
                        _that.dialogVisible = false;
                        break;
                }
                _that.form.name='';
            },

            //添加下级节点的方法
            getChild:function(val,data,result = []){
                var _that= this;
                console.log(val.length);
                var a = val.length;//获取数据长度
                for (var i = 0; i < a; i++) {
                    console.log(val.length.children);
                    if(val[i].label===data.label&&val[i].children===undefined){ //没有子节点情况下
                        val[i].children=[{label:this.form.name}];//这里是把新的元素加到object里面
                        result.push(val[i]);
                    }
                    else if(val[i].label===data.label&&val[i].children!=undefined){//有子节点情况下
                        //val[i].children.children=[{label:this.form.name}];//这里是把新的元素加到object里面
                        result.push(val[i]);
                        _that.getChild(val[i].children,data, result);
                    }
                    else{
                        result.push(val[i]);
                    }
                }
               return  result;
            },

            onExpand:function(e, data) {
                //console.log('on-expand', e, data);
                if ('expand' in data) {
                    data.expand = !data.expand;
                    if (!data.expand && data.children) {
                        this.collapse(data.children)
                    }
                } else {
                    this.$set(data, 'expand', true)
                }
            },
            collapse:function(nodes) {
                nodes.forEach(function (node) {
                    if (node.expand) {
                        node.expand = false
                    }
                    node.children && this.collapse(node.children)
                })

            },
            onNodeClick:function(e, data) {
                //console.log('CLICK', e, data);
                this.$set(data, 'selectedKey', !data['selectedKey']);
            },
            onNodeMouseOver:function(e, data) {
                //console.log('MOUSE OVER', e, data);
            },
            onNodeMouseOut:function(e, data) {
                //console.log('MOUSE OUT', e, data);
            }