测试宁波精华
parent
bb521d9a78
commit
fc003ad8ec
Binary file not shown.
|
After Width: | Height: | Size: 27 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
@ -0,0 +1,216 @@
|
||||
<template>
|
||||
<div style="height: 95vh;">
|
||||
<vue3-tree-org
|
||||
:data="data"
|
||||
:center="center"
|
||||
:render-content="renderContent"
|
||||
:horizontal="horizontal"
|
||||
:props="{id: 'id', pid: 'pid', deptName: 'deptName', jobName: 'jobName',lastName:'lastName',children: 'children',url:'url',type:'type'}"
|
||||
:collapsable="collapsable"
|
||||
:label-style="style"
|
||||
:scalable="true"
|
||||
:default-expand-level="10"
|
||||
>
|
||||
<!-- 自定义节点内容 -->
|
||||
<template v-slot="{node}">
|
||||
<div v-if="node.$$data.type" class="tree-org-node__text node-label">
|
||||
<div class="custom-content-top">{{node.$$data.deptName}}</div>
|
||||
<div class="custom-content-center">
|
||||
<div class="custom-content-left">
|
||||
<img :src="node.$$data.url" alt="" />
|
||||
</div>
|
||||
<div class="custom-content-right">
|
||||
<div class="custom-content-right-job">
|
||||
{{node.$$data.jobName}}
|
||||
</div>
|
||||
<div class="custom-content-right-lastname">
|
||||
{{node.$$data.lastName}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="tree-org-node__text node-label">
|
||||
<div class="custom-content-top">{{node.$$data.deptName}}</div>
|
||||
<div v-for="item in node.$$data.list" :key="item.id" class="custom-content-center">
|
||||
<div class="custom-content-left">
|
||||
<img :src="item.url" alt="" />
|
||||
</div>
|
||||
<div class="custom-content-right">
|
||||
<div class="custom-content-right-job">
|
||||
{{item.jobName}}
|
||||
</div>
|
||||
<div class="custom-content-right-lastname">
|
||||
{{item.lastName}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<!-- 自定义展开按钮 -->
|
||||
<template v-slot:expand="{node}">
|
||||
<div>{{node.children.length}}</div>
|
||||
</template>
|
||||
</vue3-tree-org>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
|
||||
|
||||
export default {
|
||||
name: "demo-chart",
|
||||
data() {
|
||||
return {
|
||||
data: {
|
||||
"id":1,"type":true,"deptName":"董事办","jobName":"董事长","lastName":"康晴","url":"/src/assets/photo.png",
|
||||
"children":[
|
||||
{
|
||||
"id":2,"pid":1,"type":true,"deptName":"股份公司","jobName":"总经理","lastName":"徐金尧","url":"/src/assets/photo.png",
|
||||
"children":[
|
||||
{"id":11,"pid":3,"type":true,"deptName":"股份公司","jobName":"研发副总","lastName":"张清龙","url":"/src/assets/photo1.png",
|
||||
"children":[
|
||||
{"id":24,"pid":11,"type":true,"deptName":"研发部","jobName":"经理","lastName":"王益民","url":"/src/assets/photo1.png",
|
||||
"children":[
|
||||
{"id":26,"pid":24,"type":true,"deptName":"项目一组","jobName":"项目主管","lastName":"曾甘霖","url":"/src/assets/photo1.png",
|
||||
"children":[
|
||||
{"id":null,"pid":26,"type":false,"deptName":"项目一组",
|
||||
"list":[{"id":32,"jobName":"项目工程师","lastName":"王益民","url":"/src/assets/photo1.png"},
|
||||
{"id":33,"jobName":"产品工程师","lastName":"王培文","url":"/src/assets/photo1.png"},
|
||||
{"id":34,"jobName":"电子工程师","lastName":"刘冲文","url":"/src/assets/photo1.png"},
|
||||
{"id":35,"jobName":"助理工程师","lastName":"从明姓","url":"/src/assets/photo1.png"}]
|
||||
}
|
||||
]
|
||||
},
|
||||
{"id":27,"pid":24,"type":true,"deptName":"项目二组","jobName":"项目主管","lastName":"杨先念","url":"/src/assets/photo1.png",
|
||||
"children":[
|
||||
{"id":null,"pid":27,"type":false,"deptName":"项目二组",
|
||||
"list":[{"id":32,"jobName":"产品工程师","lastName":"葛光领","url":"/src/assets/photo1.png"},
|
||||
{"id":37,"jobName":"助理工程师","lastName":"周杰","url":"/src/assets/photo1.png"}]
|
||||
}
|
||||
]
|
||||
},
|
||||
{"id":28,"pid":24,"type":true,"deptName":"项目三组","jobName":"项目主管","lastName":"肖辉","url":"/src/assets/photo1.png",
|
||||
"children":[
|
||||
{"id":null,"pid":28,"type":false,"deptName":"项目三组",
|
||||
"list":[{"id":38,"jobName":"项目工程师","lastName":"张束尼","url":"/src/assets/photo1.png"},
|
||||
{"id":39,"jobName":"设计工程师","lastName":"徐恩广","url":"/src/assets/photo1.png"},
|
||||
{"id":40,"jobName":"产品工程师","lastName":"蔡任杰","url":"/src/assets/photo1.png"},
|
||||
{"id":41,"jobName":"电子工程师","lastName":"张春雷","url":"/src/assets/photo1.png"},
|
||||
{"id":42,"jobName":"电子工程师","lastName":"水成峰","url":"/src/assets/photo1.png"},
|
||||
{"id":43,"jobName":"电子工程师","lastName":"宋红涛","url":"/src/assets/photo1.png"}]
|
||||
}
|
||||
]
|
||||
},
|
||||
{"id":29,"pid":24,"type":true,"deptName":"项目四组","jobName":"项目主管","lastName":"陈金","url":"/src/assets/photo1.png",
|
||||
"children":[
|
||||
{"id":null,"pid":29,"type":false,"deptName":"项目四组",
|
||||
"list":[{"id":44,"jobName":"项目工程师","lastName":"丁撵","url":"/src/assets/photo1.png"},
|
||||
{"id":45,"jobName":"电子工程师","lastName":"卓笋峰","url":"/src/assets/photo1.png"}]
|
||||
}
|
||||
]
|
||||
},
|
||||
{"id":30,"pid":24,"type":true,"deptName":"项目五组","jobName":"项目主管","lastName":"马先赫","url":"/src/assets/photo1.png",},
|
||||
{"id":31,"pid":24,"type":true,"deptName":"项目六组","jobName":"项目主管","lastName":"张佳尔","url":"/src/assets/photo1.png",
|
||||
"children":[
|
||||
{"id":null,"pid":31,"type":false,"deptName":"项目六组",
|
||||
"list":[{"id":46,"jobName":"资深步进工程师","lastName":"张茶生","url":"/src/assets/photo1.png"}]
|
||||
}
|
||||
]
|
||||
},
|
||||
{"id":32,"pid":24,"type":true,"deptName":"研发部","jobName":"研发文控","lastName":"于童","url":"/src/assets/photo1.png",}
|
||||
]
|
||||
},
|
||||
{"id":25,"pid":11,"type":true,"deptName":"股份公司","jobName":"技术总工","lastName":"吴海松","url":"/src/assets/photo.png",},
|
||||
]
|
||||
},
|
||||
{"id":12,"pid":3,"type":true,"deptName":"采购部","jobName":"经理","lastName":"杨林达","url":"/src/assets/photo1.png",},
|
||||
{"id":13,"pid":3,"type":true,"deptName":"财务部","jobName":"经理","lastName":"杨清","url":"/src/assets/photo1.png",},
|
||||
{"id":14,"pid":3,"type":true,"deptName":"品管部","jobName":"经理","lastName":"黄清华","url":"/src/assets/photo1.png",
|
||||
"children":[
|
||||
{"id":16,"pid":14,"type":true,"deptName":"品管部","jobName":"测试中心主管","lastName":"李其攒","url":"/src/assets/photo1.png",
|
||||
"children":[
|
||||
{"id":null,"pid":16,"type":false,"deptName":"品管部",
|
||||
"list":[{"id":47,"jobName":"测试工程师","lastName":"陈中娟","url":"/src/assets/photo1.png"},
|
||||
{"id":48,"jobName":"测试员","lastName":"闵贾娟","url":"/src/assets/photo1.png"},
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{"id":17,"pid":14,"type":true,"deptName":"品管部","jobName":"质量主管","lastName":"苏畅","url":"/src/assets/photo1.png",
|
||||
"children":[
|
||||
{"id":null,"pid":14,"type":false,"deptName":"品管部",
|
||||
"list":[{"id":51,"jobName":"质量工程师","lastName":"文涛","url":"/src/assets/photo1.png"}]
|
||||
}
|
||||
]
|
||||
},
|
||||
{"id":18,"pid":14,"type":true,"deptName":"品管部","jobName":"质量主管","lastName":"王海军","url":"/src/assets/photo1.png",
|
||||
"children":[
|
||||
{"id":null,"pid":18,"type":false,"deptName":"品管部",
|
||||
"list":[{"id":49,"jobName":"质量工程师","lastName":"吴佳伟","url":"/src/assets/photo1.png"},
|
||||
{"id":50,"jobName":"助理设备工程师","lastName":"朱江海","url":"/src/assets/photo1.png"},
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{"id":19,"pid":14,"type":true,"deptName":"品管部","jobName":"文员","lastName":"袁吉","url":"/src/assets/photo1.png"}
|
||||
]
|
||||
},
|
||||
{"id":23,"pid":3,"type":true,"deptName":"股份公司","jobName":"常务副总经理","lastName":"房家全","url":"/src/assets/photo.png",
|
||||
"children":[
|
||||
{"id":15,"pid":23,"type":true,"deptName":"物流部","jobName":"经理","lastName":"吴亮亮","url":"/src/assets/photo1.png"},
|
||||
{"id":20,"pid":23,"type":true,"deptName":"总经办","jobName":"经理","lastName":"吴亮亮","url":"/src/assets/photo1.png"},
|
||||
{"id":21,"pid":23,"type":true,"deptName":"人力资源部","jobName":"经理","lastName":"吴亮亮","url":"/src/assets/photo1.png"},
|
||||
{"id":22,"pid":23,"type":true,"deptName":"信息管理部","jobName":"经理","lastName":"吴亮亮","url":"/src/assets/photo1.png"},
|
||||
]
|
||||
},
|
||||
|
||||
|
||||
]
|
||||
},
|
||||
{
|
||||
"id":3,"pid":1,"type":true,"deptName":"董事办","jobName":"董事会秘书","lastName":"邹文霞","url":"/src/assets/photo.png",
|
||||
"children":[
|
||||
{"id":6,"pid":2,"type":true,"deptName":"董事办","jobName":"行政助理","lastName":"项瑜","url":"/src/assets/photo1.png",},
|
||||
{"id":8,"pid":2,"type":true,"deptName":"董事办","jobName":"董事会秘书","lastName":"董周斌","url":"/src/assets/photo1.png",}
|
||||
]
|
||||
},
|
||||
|
||||
]
|
||||
},
|
||||
center:true,
|
||||
horizontal: false,
|
||||
collapsable: true,
|
||||
expandAll: true,
|
||||
style: {
|
||||
background: "#fff",
|
||||
color: "#5e6d82",
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
|
||||
|
||||
|
||||
methods: {
|
||||
onMenus({ node, command }) {
|
||||
console.log(node, command);
|
||||
},
|
||||
onNodeClick(e, data) {
|
||||
alert(data.title);
|
||||
},
|
||||
expandChange() {
|
||||
this.toggleExpand(this.data, this.expandAll);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<!-- <style lang="scss" scoped>
|
||||
.tree-org-node__text {
|
||||
text-align: left;
|
||||
font-size: 14px;
|
||||
.custom-content {
|
||||
padding-bottom: 8px;
|
||||
margin-bottom: 8px;
|
||||
border-bottom: 1px solid currentColor;
|
||||
}
|
||||
}
|
||||
</style> -->
|
||||
Loading…
Reference in New Issue