|
|
|
@ -2,6 +2,7 @@
|
|
|
|
|
<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"
|
|
|
|
@ -11,6 +12,28 @@
|
|
|
|
|
/>
|
|
|
|
|
</el-select>
|
|
|
|
|
</div>
|
|
|
|
|
<div style="margin-right: 10px">
|
|
|
|
|
根节点:
|
|
|
|
|
<el-tree-select
|
|
|
|
|
v-model="params.root"
|
|
|
|
|
:data="rootData"
|
|
|
|
|
check-strictly
|
|
|
|
|
:render-after-expand="false"
|
|
|
|
|
style="width: 240px"
|
|
|
|
|
@change="handleRootChange"
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
<div style="margin-right: 10px">
|
|
|
|
|
层级:
|
|
|
|
|
<el-select v-model="params.level" class="m-2" placeholder="Select" @change="handleLevelChange">
|
|
|
|
|
<el-option
|
|
|
|
|
v-for="item in levelOptions"
|
|
|
|
|
: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>
|
|
|
|
@ -36,11 +59,12 @@
|
|
|
|
|
<script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
import { ElSwitch, ElButton, ElMessage,ElSelect } from 'element-plus'
|
|
|
|
|
import { ElSwitch, ElButton, ElMessage,ElSelect,ElTreeSelect } 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'
|
|
|
|
|
import { ref } from 'vue'
|
|
|
|
|
|
|
|
|
|
export default {
|
|
|
|
|
name: "organization-chart",
|
|
|
|
@ -48,10 +72,12 @@ export default {
|
|
|
|
|
ElSwitch,
|
|
|
|
|
ViewDialog,
|
|
|
|
|
ElButton,
|
|
|
|
|
ElSelect
|
|
|
|
|
ElSelect,
|
|
|
|
|
ElTreeSelect
|
|
|
|
|
},
|
|
|
|
|
setup() {
|
|
|
|
|
const cloneNodeDrag = ref(true)
|
|
|
|
|
const cloneNodeDrag = ref(true);
|
|
|
|
|
|
|
|
|
|
return {
|
|
|
|
|
cloneNodeDrag
|
|
|
|
|
}
|
|
|
|
@ -67,14 +93,105 @@ export default {
|
|
|
|
|
disaled: false,
|
|
|
|
|
defineMenus:[],
|
|
|
|
|
params:{
|
|
|
|
|
virtualType:''
|
|
|
|
|
virtualType:'',
|
|
|
|
|
level:0,
|
|
|
|
|
root:'1'
|
|
|
|
|
},
|
|
|
|
|
style: {
|
|
|
|
|
background: "#fff",
|
|
|
|
|
color: "#5e6d82",
|
|
|
|
|
fontWeight: "500"
|
|
|
|
|
},
|
|
|
|
|
options: []
|
|
|
|
|
options: [],
|
|
|
|
|
levelOptions:[
|
|
|
|
|
{
|
|
|
|
|
value:1,
|
|
|
|
|
label:"一级"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
value:2,
|
|
|
|
|
label:"二级"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
value:3,
|
|
|
|
|
label:"三级"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
value:0,
|
|
|
|
|
label:"全部"
|
|
|
|
|
}
|
|
|
|
|
],
|
|
|
|
|
rootData: [
|
|
|
|
|
{
|
|
|
|
|
value: '1',
|
|
|
|
|
label: 'Level one 1',
|
|
|
|
|
children: [
|
|
|
|
|
{
|
|
|
|
|
value: '1-1',
|
|
|
|
|
label: 'Level two 1-1',
|
|
|
|
|
children: [
|
|
|
|
|
{
|
|
|
|
|
value: '1-1-1',
|
|
|
|
|
label: 'Level three 1-1-1',
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
value: '2',
|
|
|
|
|
label: 'Level one 2',
|
|
|
|
|
children: [
|
|
|
|
|
{
|
|
|
|
|
value: '2-1',
|
|
|
|
|
label: 'Level two 2-1',
|
|
|
|
|
children: [
|
|
|
|
|
{
|
|
|
|
|
value: '2-1-1',
|
|
|
|
|
label: 'Level three 2-1-1',
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
value: '2-2',
|
|
|
|
|
label: 'Level two 2-2',
|
|
|
|
|
children: [
|
|
|
|
|
{
|
|
|
|
|
value: '2-2-1',
|
|
|
|
|
label: 'Level three 2-2-1',
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
value: '3',
|
|
|
|
|
label: 'Level one 3',
|
|
|
|
|
children: [
|
|
|
|
|
{
|
|
|
|
|
value: '3-1',
|
|
|
|
|
label: 'Level two 3-1',
|
|
|
|
|
children: [
|
|
|
|
|
{
|
|
|
|
|
value: '3-1-1',
|
|
|
|
|
label: 'Level three 3-1-1',
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
value: '3-2',
|
|
|
|
|
label: 'Level two 3-2',
|
|
|
|
|
children: [
|
|
|
|
|
{
|
|
|
|
|
value: '3-2-1',
|
|
|
|
|
label: 'Level three 3-2-1',
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
},
|
|
|
|
|
]
|
|
|
|
|
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
async created() {
|
|
|
|
@ -130,6 +247,14 @@ export default {
|
|
|
|
|
this.params.virtualType = value;
|
|
|
|
|
this.organizationChart();
|
|
|
|
|
},
|
|
|
|
|
handleLevelChange(value) {
|
|
|
|
|
this.params.level = value;
|
|
|
|
|
this.organizationChart();
|
|
|
|
|
},
|
|
|
|
|
handleRootChange(value) {
|
|
|
|
|
this.params.root = value;
|
|
|
|
|
this.organizationChart();
|
|
|
|
|
},
|
|
|
|
|
onExpand(e, data) {
|
|
|
|
|
//console.log(e, data);
|
|
|
|
|
},
|
|
|
|
|