组织架构图是比较常见的展示层级关系的表现形式
之前也写过两种方式来展示组织架构图的
js插件实现组织架构图：http://t.csdn.cn/LQ3Or
vue插件vue-org-tree组织架构图：http://t.csdn.cn/acEXw
建议使用vue插件的方式来实现：
现在的需求是实现下面的效果：
右键点击某一级内容时，需要展示编辑菜单，要实现检索+新增+编辑+删除等操作：
下面介绍另一种实现组织架构图的插件：
参考大神的博客：zm-org-tree可拖拽的组织树，简易好上手(http://t.csdn.cn/7WWPk)
1.安装zm-tree-org：npm i zm-tree-org -S
2.在main.js中全局注册
import Vue from 'vue';
import ZmTreeOrg from 'zm-tree-org';
import "zm-tree-org/lib/zm-tree-org.css";
Vue.use(ZmTreeOrg);
3.html代码
<template>
<div v-loading="loadPage">
<div style="height:500px; margin-bottom:30px;">
<ZmTreeOrg ref="tree" :data="dataList" :disabled="disaled" :horizontal="horizontal" :collapsable="collapsable"
:label-style="style" :node-draggable="true" :default-expand-level="1" :only-one-node="onlyOneNode"
:clone-node-drag="cloneNodeDrag" :define-menus="[]">
<template slot-scope="{node}">
<div class="boxOrgDesc">
<div class="txt" :class="{tk:node.type==0,cpn:!node.parentId}"><i class="el-icon-office-building" v-if="!node.parentId"></i>{
{
node.name }}</div>
<div class="bn">
<el-tooltip class="item" effect="dark" content="查看详情" placement="top">
<el-button type="primary" icon="el-icon-search" size="mini" circle @click="fnShowDesc(node)"></el-button>
</el-tooltip>
<el-tooltip class="item" effect="dark" content="新增子级" placement="top">
<el-button type="success" size="mini" icon="el-icon-plus" circle @click="fnShowNE(node,'n')"></el-button>
</el-tooltip>
<el-tooltip class="item" effect="dark" content="修改资料" placement="top">
<el-button type="primary" size="mini" icon="el-icon-edit" circle @click="fnShowNE(node,'e')"></el-button>
</el-tooltip>
<el-tooltip class="item" effect="dark" content="删除" placement="top">
<el-popconfirm title="确定删除吗？" @confirm="fnDel(node)">
<el-button slot="reference" type="danger" size="mini" icon="el-icon-delete" circle></el-button>
</el-popconfirm>
</el-tooltip>
</div>
</div>
</template>
</ZmTreeOrg>
</div>
<div class="boxFilter">
<el-select v-model="states" placeholder="帐号状态">
<el-option value="">帐号状态</el-option>
<el-option label="启用" :value="1"></el-option>
<el-option label="禁用" :value="0"></el-option>
</el-select>
<el-button type="primary" icon="el-icon-circle-plus-outline">添加成员</el-button>
</div>
<el-table class="tableSe" :data="tableData">
<el-table-column prop="date" label="姓名" width="220"></el-table-column>
<el-table-column prop="user" label="帐号状态" width="140"></el-table-column>
<el-table-column prop="note" label="所在部门"></el-table-column>
<el-table-column label="操作"></el-table-column>
</el-table>
</div>
</template>
4.script代码
<script>
import {
companyOrgList} from "@/services/allApi";
export default {
name: "inc_companyOrg",
props:['id'],
data(){
return{
isEdit:false,loadPage:false,states:'',tableData:[],
BasicSwich:false,BasicInfo:{
},
dataList:{
},
horizontal: false,
collapsable: true,
onlyOneNode: true,
cloneNodeDrag: false,
expandAll: true,
disaled: false,
style: {
}
}
},
mounted() {
this.fnGet();
},
methods:{
fnGet(){
this.loadPage = true;
companyOrgList({
companyId:this.id}).then(res=>{
this.dataList = res;
}).finally(()=>{
this.loadPage = false
})
},
fnShowDesc(arr){
console.log(arr)
},
fnShowNE(arr,type='n'){
console.log(arr,type)
},
fnDel(arr){
console.log(arr)
},
toggleExpand(data, val) {
if (Array.isArray(data)) {
data.forEach(item => {
this.$set(item, "expand", val);
if (item.children) {
this.toggleExpand(item.children, val);
}
});
} else {
this.$set(data, "expand", val);
if (data.children) {
this.toggleExpand(data.children, val);
}
}
}
}
}
</script>
5.css代码
<style scoped lang="less">
/deep/ .zm-tree-org{
background-color:#F8F6F3}
/deep/ .zm-draggable{
}
/deep/ .tree-org-node__content .tree-org-node__inner{
background-color: transparent; box-shadow: none;}
.boxOrgDesc{
position: relative; padding:0;
.txt{
border-radius:10px; overflow: hidden; background-color:#fff; padding:.3em 1em; box-shadow: rgba(0,0,0,.2) 0 0 .5em;}
.txt.tk{
background-color:#44496F; color:#fff;}
.txt.cpn{
background-color:#f90; color:#fff;
i{
display: block; font-size:30px;}
}
.bn{
position: absolute; left:50%; top:90%; z-index:999; box-shadow: rgba(0,0,0,.3) 0 0 1em; padding:2px 0 5px; border:1px solid #eee; border-radius:10px; transform: translateX(-50%); opacity:0; visibility: hidden; background-color:#fff; width:180px;transition:all 0.3s ease;
&:before{
content:''; position: absolute; left:50%; bottom:100%; transform: translateX(-50%); width:0; height:0; border:10px solid transparent; border-bottom-color:#fff; border-top:none;}
>*{
margin:0 3px;}
.el-button{
line-height:1em; height:26px}
}
&:hover .bn{
opacity: 1; top:100%; visibility: visible;}
}
</style>