|
|
|
|
@ -1,76 +1,78 @@
|
|
|
|
|
<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-select v-model="params.virtualType" class="m-2" placeholder="Select" @change="handleSelectChange">
|
|
|
|
|
<el-option
|
|
|
|
|
v-for="item in options"
|
|
|
|
|
:key="item.value"
|
|
|
|
|
:label="item.label"
|
|
|
|
|
:value="item.value"
|
|
|
|
|
/>
|
|
|
|
|
</el-select>
|
|
|
|
|
</div>
|
|
|
|
|
<div style="margin-right: 10px"><el-button @click="exportToPDF" type="primary">导出PDF</el-button></div>
|
|
|
|
|
<div style="margin-right: 10px"><el-button @click="exportImage" type="primary">导出图片</el-button></div>
|
|
|
|
|
</div>
|
|
|
|
|
<div id="tree-container" style="height: 800px;">
|
|
|
|
|
<div id="tree-container" style="height: 600px;">
|
|
|
|
|
<vue3-tree-org
|
|
|
|
|
ref="treeChart"
|
|
|
|
|
:data="treeData"
|
|
|
|
|
center
|
|
|
|
|
:props="{children: 'childrens'}"
|
|
|
|
|
:define-menus="defineMenus"
|
|
|
|
|
:horizontal="horizontal"
|
|
|
|
|
:collapsable="collapsable"
|
|
|
|
|
:label-style="style"
|
|
|
|
|
@on-expand="onExpand"
|
|
|
|
|
@on-node-click="onNodeClick"
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
<script>
|
|
|
|
|
|
|
|
|
|
<view-dialog ref="viewDialog"/>
|
|
|
|
|
</template>
|
|
|
|
|
<script>
|
|
|
|
|
|
|
|
|
|
import { ElSwitch, ElColorPicker, ElMessage } from 'element-plus'
|
|
|
|
|
import html2pdf from 'html2pdf.js'
|
|
|
|
|
import { ref } from 'vue'
|
|
|
|
|
import domToImage from 'dom-to-image';
|
|
|
|
|
|
|
|
|
|
import { ElSwitch, ElButton, ElMessage,ElSelect } from 'element-plus'
|
|
|
|
|
import html2pdf from 'html2pdf.js'
|
|
|
|
|
import domToImage from 'dom-to-image';
|
|
|
|
|
import {selectOrganizationChart,selectVirtualTop} from '@/api/chart'
|
|
|
|
|
import ViewDialog from '@/components/ViewDialog.vue'
|
|
|
|
|
|
|
|
|
|
export default {
|
|
|
|
|
export default {
|
|
|
|
|
name: "organization-chart",
|
|
|
|
|
components: {
|
|
|
|
|
ElSwitch,
|
|
|
|
|
ElColorPicker
|
|
|
|
|
ViewDialog,
|
|
|
|
|
ElButton,
|
|
|
|
|
ElSelect
|
|
|
|
|
},
|
|
|
|
|
setup() {
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
treeData: {
|
|
|
|
|
"id":1,"label":"xxx科技有限公司",
|
|
|
|
|
"childrens":[
|
|
|
|
|
{
|
|
|
|
|
"id":2,"pid":1,"label":"产品研发部",
|
|
|
|
|
"childrens":[
|
|
|
|
|
{"id":6,"pid":2,"label":"禁止编辑节点"},
|
|
|
|
|
{"id":8,"pid":2,"label":"禁止拖拽节点"},
|
|
|
|
|
{"id":10,"pid":2,"label":"测试"}
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
"id":3,"pid":1,"label":"客服部",
|
|
|
|
|
"childrens":[
|
|
|
|
|
{"id":11,"pid":3,"label":"客服一部"},
|
|
|
|
|
{"id":12,"pid":3,"label":"客服二部"}
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
{"id":4,"pid":1,"label":"业务部"}
|
|
|
|
|
]
|
|
|
|
|
},
|
|
|
|
|
treeData:{},
|
|
|
|
|
horizontal: false,
|
|
|
|
|
collapsable: true,
|
|
|
|
|
onlyOneNode: false,
|
|
|
|
|
expandAll: true,
|
|
|
|
|
disaled: false,
|
|
|
|
|
defineMenus:[],
|
|
|
|
|
params:{
|
|
|
|
|
virtualType:''
|
|
|
|
|
},
|
|
|
|
|
style: {
|
|
|
|
|
background: "#fff",
|
|
|
|
|
color: "#5e6d82",
|
|
|
|
|
},
|
|
|
|
|
options: []
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
created() {
|
|
|
|
|
this.toggleExpand(this.treeData, this.expandAll);
|
|
|
|
|
async created() {
|
|
|
|
|
await this.virtualTop();
|
|
|
|
|
this.organizationChart();
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
exportImage() {
|
|
|
|
|
@ -88,22 +90,48 @@
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
exportToPDF() {
|
|
|
|
|
debugger
|
|
|
|
|
const element = document.getElementById('tree-container') // 获取 TreeOrg 组件的容器元素
|
|
|
|
|
const options = {
|
|
|
|
|
filename: 'tree-structure.pdf', // 导出的文件名，可以根据实际需求更改
|
|
|
|
|
jsPDF: { format: 'letter' }
|
|
|
|
|
jsPDF: { format: 'a4',orientation: 'landscape',unit: 'pt', }
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
html2pdf().set(options).from(element).save();
|
|
|
|
|
},
|
|
|
|
|
virtualTop() {
|
|
|
|
|
return new Promise(resolve => {
|
|
|
|
|
selectVirtualTop(this.params).then(res=>{
|
|
|
|
|
this.options = res.data.data;
|
|
|
|
|
this.options.length > 0 ? this.params.virtualType = this.options[0].value : '';
|
|
|
|
|
resolve();
|
|
|
|
|
})
|
|
|
|
|
.catch(err=>{
|
|
|
|
|
ElMessage.error(err.msg);
|
|
|
|
|
})
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
organizationChart() {
|
|
|
|
|
selectOrganizationChart(this.params).then(res=>{
|
|
|
|
|
this.treeData = res.data.data;
|
|
|
|
|
this.toggleExpand(res.data.data, this.expandAll);
|
|
|
|
|
})
|
|
|
|
|
.catch(err=>{
|
|
|
|
|
ElMessage.error(err.msg);
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
handleSelectChange(value) {
|
|
|
|
|
this.params.virtualType = value;
|
|
|
|
|
this.organizationChart();
|
|
|
|
|
},
|
|
|
|
|
onExpand(e, data) {
|
|
|
|
|
console.log(e, data);
|
|
|
|
|
//console.log(e, data);
|
|
|
|
|
},
|
|
|
|
|
onExpandAll(b) {
|
|
|
|
|
console.log(b)
|
|
|
|
|
//console.log(b)
|
|
|
|
|
},
|
|
|
|
|
onNodeClick(e, data) {
|
|
|
|
|
this.$refs.viewDialog.openDialog(data,2);
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
expandChange() {
|
|
|
|
|
// this.toggleExpand(this.data, this.expandAll);
|
|
|
|
|
},
|
|
|
|
|
@ -123,6 +151,5 @@
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
|
