liang.cheng
/
vue3-org-chart
1
1
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: liang.cheng:test
Branches Tags
liang.cheng:test
liang.cheng:sship
liang.cheng:master
..
compare: liang.cheng:master
Branches Tags
liang.cheng:test
liang.cheng:sship
liang.cheng:master

No commits in common. 'test' and 'master' have entirely different histories.
test ... master

8 changed files with 3 additions and 330 deletions
Show Stats

BIN
public/photo.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 27 KiB

BIN
public/photo1.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 21 KiB

BIN
src/assets/photo.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 27 KiB

BIN
src/assets/photo1.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 21 KiB

4
src/router/router.js
Unescape Escape View File

@ -1,12 +1,10 @@
import { createRouter, createWebHashHistory } from "vue-router";
import ResourceChart from "../views/resource-chart.vue";
import OrganizationChart from "../views/organization-chart.vue";
import DemoChart from "../views/demo-chart.vue";
const routes = [
{ name: 'resource-chart', path: "/resource-chart", component: ResourceChart },
{ name: 'organization-chart', path: "/organization-chart", component: OrganizationChart },
{ name: 'demo-chart', path: "/demo-chart", component: DemoChart },
{ name: 'organization-chart', path: "/organization-chart", component: OrganizationChart }
];
// 初始化路由

66
src/style.css
Unescape Escape View File

@ -62,6 +62,7 @@ button:focus-visible {
width: 100%;
height: 100%;
margin: 0 auto;
padding: 2rem;
text-align: center;
}
@ -77,68 +78,3 @@ button:focus-visible {
background-color: #f9f9f9;
}
}
.tree-org-node__content .tree-org-node__text {
padding: 0 !important;
}
.tree-org-node__content .tree-org-node__text{
width: 150px;
height: 120px;
}
.search-box {
input {
width: 200px;
height: 32px;
border:1px solid #ddd;
outline: none;
border-radius: 5px;
padding-left: 10px;
}
}
.custom-content-top{
height: 30px;
text-align: center;
font-size: 16px;
line-height: 30px;
font-weight: 900;
}
.custom-content-center{
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
height: calc(100% - 30px);
}
.custom-content-left {
flex: 1;
height: 100%;
}
.custom-content-left img{
width: 100%;
height: 100%;
}
.custom-content-right {
font-size: 14px;
flex: 1;
height: 100%;
font-weight: 400;
background-color: #e6f6ff;
color: #000;
}
.custom-content-right-job,.custom-content-right-lastname {
margin-top: 12px;
width: 70px;
white-space: nowrap; /* 文字不换行 */
overflow: hidden; /* 超出部分隐藏 */
text-overflow: ellipsis; /* 超出部分显示省略号 */
}

260
src/views/demo-chart.vue
Unescape Escape View File

@ -1,260 +0,0 @@
<template>
<div style="display: flex; padding: 10px;">
<div style="margin-right: 10px"><el-switch v-model="horizontal"></el-switch> 横向</div>
<div style="margin-right: 10px"><el-switch v-model="collapsable"></el-switch> 可收起</div>
<div style="padding: 0 10px 10px">
背景色：<ElColorPicker v-model="style.background" size="small"></ElColorPicker>&nbsp;
文字颜色：<ElColorPicker v-model="style.color" size="small"></ElColorPicker>&nbsp;
</div>
<div style="margin-right: 10px"><el-button @click="exportImage" type="primary">导出图片</el-button></div>
</div>
<div class="search-box">
<span>搜索：</span>
<input type="text" v-model="keyword" placeholder="请输入搜索内容" @keydown.enter="filter" />
</div>
<div style="height: 90vh;">
<vue3-tree-org
ref="tree"
: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"
:filter-node-method="filterNodeMethod"
>
<!-- 自定义节点内容 -->
<template v-slot="{node}">
<div v-if="node.$$data.type" class="tree-org-node__text node-label">
<div class="custom-content-top" :style="style">{{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>
import { ElColorPicker,ElButton } from 'element-plus';
import domToImage from 'dom-to-image';
export default {
name: "demo-chart",
components: {
ElColorPicker,ElButton
},
data() {
return {
data: {
"id":1,"type":true,"label":"董事办","deptName":"董事办","jobName":"董事长","lastName":"康晴","url":"./photo.png",
"children":[
{
"id":2,"pid":1,"type":true,"label":"股份公司","deptName":"股份公司","jobName":"总经理","lastName":"徐金尧","url":"./photo.png",
"children":[
{"id":11,"pid":3,"type":true,"label":"股份公司","deptName":"股份公司","jobName":"研发副总","lastName":"张清龙","url":"./photo1.png",
"children":[
{"id":24,"pid":11,"type":true,"label":"研发部","deptName":"研发部","jobName":"经理","lastName":"王益民","url":"./photo1.png",
"children":[
{"id":26,"pid":24,"type":true,"label":"项目一组","deptName":"项目一组","jobName":"项目主管","lastName":"曾甘霖","url":"./photo1.png",
"children":[
{"id":null,"pid":26,"type":false,"label":"项目一组","deptName":"项目一组",
"list":[{"id":32,"jobName":"项目工程师","lastName":"王益民","url":"./photo1.png"},
{"id":33,"jobName":"产品工程师","lastName":"王培文","url":"./photo1.png"},
{"id":34,"jobName":"电子工程师","lastName":"刘冲文","url":"./photo1.png"},
{"id":35,"jobName":"助理工程师","lastName":"从明姓","url":"./photo1.png"}]
}
]
},
{"id":27,"pid":24,"type":true,"label":"项目二组","deptName":"项目二组","jobName":"项目主管","lastName":"杨先念","url":"./photo1.png",
"children":[
{"id":null,"pid":27,"type":false,"label":"项目二组","deptName":"项目二组",
"list":[{"id":32,"jobName":"产品工程师","lastName":"葛光领","url":"./photo1.png"},
{"id":37,"jobName":"助理工程师","lastName":"周杰","url":"./photo1.png"}]
}
]
},
{"id":28,"pid":24,"type":true,"label":"项目三组","deptName":"项目三组","jobName":"项目主管","lastName":"肖辉","url":"./photo1.png",
"children":[
{"id":null,"pid":28,"type":false,"label":"项目三组","deptName":"项目三组",
"list":[{"id":38,"jobName":"项目工程师","lastName":"张束尼","url":"./photo1.png"},
{"id":39,"jobName":"设计工程师","lastName":"徐恩广","url":"./photo1.png"},
{"id":40,"jobName":"产品工程师","lastName":"蔡任杰","url":"./photo1.png"},
{"id":41,"jobName":"电子工程师","lastName":"张春雷","url":"./photo1.png"},
{"id":42,"jobName":"电子工程师","lastName":"水成峰","url":"./photo1.png"},
{"id":43,"jobName":"电子工程师","lastName":"宋红涛","url":"./photo1.png"}]
}
]
},
{"id":29,"pid":24,"type":true,"label":"项目四组","deptName":"项目四组","jobName":"项目主管","lastName":"陈金","url":"./photo1.png",
"children":[
{"id":null,"pid":29,"type":false,"label":"项目四组","deptName":"项目四组",
"list":[{"id":44,"jobName":"项目工程师","lastName":"丁撵","url":"./photo1.png"},
{"id":45,"jobName":"电子工程师","lastName":"卓笋峰","url":"./photo1.png"}]
}
]
},
{"id":30,"pid":24,"type":true,"label":"项目五组","deptName":"项目五组","jobName":"项目主管","lastName":"马先赫","url":"./photo1.png",},
{"id":31,"pid":24,"type":true,"label":"项目六组","deptName":"项目六组","jobName":"项目主管","lastName":"张佳尔","url":"./photo1.png",
"children":[
{"id":null,"pid":31,"type":false,"label":"项目六组","deptName":"项目六组",
"list":[{"id":46,"jobName":"资深步进工程师","lastName":"张茶生","url":"./photo1.png"}]
}
]
},
{"id":32,"pid":24,"type":true,"label":"研发部","deptName":"研发部","jobName":"研发文控","lastName":"于童","url":"./photo1.png",}
]
},
{"id":25,"pid":11,"type":true,"label":"股份公司","deptName":"股份公司","jobName":"技术总工","lastName":"吴海松","url":"./photo.png",},
]
},
{"id":12,"pid":3,"type":true,"label":"采购部","deptName":"采购部","jobName":"经理","lastName":"杨林达","url":"./photo1.png",},
{"id":13,"pid":3,"type":true,"label":"财务部","deptName":"财务部","jobName":"经理","lastName":"杨清","url":"./photo1.png",},
{"id":14,"pid":3,"type":true,"label":"品管部","deptName":"品管部","jobName":"经理","lastName":"黄清华","url":"./photo1.png",
"children":[
{"id":16,"pid":14,"type":true,"label":"品管部","deptName":"品管部","jobName":"测试中心主管","lastName":"李其攒","url":"./photo1.png",
"children":[
{"id":null,"pid":16,"type":false,"label":"品管部","deptName":"品管部",
"list":[{"id":47,"jobName":"测试工程师","lastName":"陈中娟","url":"./photo1.png"},
{"id":48,"jobName":"测试员","lastName":"闵贾娟","url":"./photo1.png"},
]
}
]
},
{"id":17,"pid":14,"type":true,"label":"品管部","deptName":"品管部","jobName":"质量主管","lastName":"苏畅","url":"./photo1.png",
"children":[
{"id":null,"pid":14,"type":false,"label":"品管部","deptName":"品管部",
"list":[{"id":51,"jobName":"质量工程师","lastName":"文涛","url":"./photo1.png"}]
}
]
},
{"id":18,"pid":14,"type":true,"label":"品管部","deptName":"品管部","jobName":"质量主管","lastName":"王海军","url":"./photo1.png",
"children":[
{"id":null,"pid":18,"type":false,"label":"品管部","deptName":"品管部",
"list":[{"id":49,"jobName":"质量工程师","lastName":"吴佳伟","url":"./photo1.png"},
{"id":50,"jobName":"助理设备工程师","lastName":"朱江海","url":"./photo1.png"},
]
}
]
},
{"id":19,"pid":14,"type":true,"label":"品管部","deptName":"品管部","jobName":"文员","lastName":"袁吉","url":"./photo1.png"}
]
},
{"id":23,"pid":3,"type":true,"label":"股份公司","deptName":"股份公司","jobName":"常务副总经理","lastName":"房家全","url":"./photo.png",
"children":[
{"id":15,"pid":23,"type":true,"label":"物流部","deptName":"物流部","jobName":"经理","lastName":"吴亮亮","url":"./photo1.png"},
{"id":20,"pid":23,"type":true,"label":"总经办","deptName":"总经办","jobName":"经理","lastName":"吴亮亮","url":"./photo1.png"},
{"id":21,"pid":23,"type":true,"label":"人力资源部","deptName":"人力资源部","jobName":"经理","lastName":"吴亮亮","url":"./photo1.png"},
{"id":22,"pid":23,"type":true,"label":"信息管理部","deptName":"信息管理部","jobName":"经理","lastName":"吴亮亮","url":"./photo1.png"},
]
},
]
},
{
"id":3,"pid":1,"type":true,"label":"董事办","deptName":"董事办","jobName":"董事会秘书","lastName":"邹文霞","url":"./photo.png",
"children":[
{"id":6,"pid":2,"type":true,"label":"董事办","deptName":"董事办","jobName":"行政助理","lastName":"项瑜","url":"./photo1.png",},
{"id":8,"pid":2,"type":true,"label":"董事办","deptName":"董事办","jobName":"董事会秘书","lastName":"董周斌","url":"./photo1.png",}
]
},
]
},
keyword:'',
center:true,
horizontal: false,
collapsable: true,
expandAll: true,
style: {
background: "#0e339b",
color: "#ffffff",
},
};
},
methods: {
onMenus({ node, command }) {
console.log(node, command);
},
onNodeClick(e, data) {
alert(data.title);
},
expandChange() {
this.toggleExpand(this.data, this.expandAll);
},
filter(){
this.$refs.tree.filter(this.keyword)
},
filterNodeMethod(value, data) {
console.log(value, data)
if (!value) return true;
return data.label.indexOf(value) !== -1;
},
exportImage() {
const treeOrgEl = this.$refs.tree.$el;
domToImage.toPng(treeOrgEl) // 转换为 PNG 格式
.then(function (dataURL) {
const link = document.createElement('a');
link.href = dataURL;
link.download = 'tree_image.png';
link.click();
link.remove();
})
.catch(function (error) {
console.error('导出图片出错:', error);
});
}
},
};
</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> -->

3
vite.config.js
Unescape Escape View File

@ -4,12 +4,11 @@ import path from 'path';
// https://vitejs.dev/config/
export default defineConfig({
base: './', //设置打包相对路径
plugins: [vue()],
resolve: {
alias: {
// 配置别名路径
'@': path.resolve(__dirname, 'src'),
'@': path.resolve(__dirname, './src'),
},
},

Write Preview
Loading…
Cancel
Save