|
|
|
@ -2,7 +2,6 @@
|
|
|
|
|
<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"
|
|
|
|
@ -12,28 +11,6 @@
|
|
|
|
|
/>
|
|
|
|
|
</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>
|
|
|
|
@ -45,8 +22,6 @@
|
|
|
|
|
:props="{children: 'childrens'}"
|
|
|
|
|
:define-menus="defineMenus"
|
|
|
|
|
:horizontal="horizontal"
|
|
|
|
|
:clone-node-drag="cloneNodeDrag"
|
|
|
|
|
:node-draggable="nodeDraggable"
|
|
|
|
|
:collapsable="collapsable"
|
|
|
|
|
:label-style="style"
|
|
|
|
|
@on-expand="onExpand"
|
|
|
|
@ -59,12 +34,11 @@
|
|
|
|
|
<script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
import { ElSwitch, ElButton, ElMessage,ElSelect,ElTreeSelect } from 'element-plus'
|
|
|
|
|
import { ElSwitch, ElButton, ElMessage,ElSelect } from 'element-plus'
|
|
|
|
|
import html2pdf from 'html2pdf.js'
|
|
|
|
|
import domToImage from 'dom-to-image';
|
|
|
|
|
import {selectOrganizationChart,selectVirtualTop,selectRootTop,selectLevelTop} from '@/api/chart'
|
|
|
|
|
import {selectOrganizationChart,selectVirtualTop} from '@/api/chart'
|
|
|
|
|
import ViewDialog from '@/components/ViewDialog.vue'
|
|
|
|
|
import { ref } from 'vue'
|
|
|
|
|
|
|
|
|
|
export default {
|
|
|
|
|
name: "organization-chart",
|
|
|
|
@ -72,15 +46,10 @@ export default {
|
|
|
|
|
ElSwitch,
|
|
|
|
|
ViewDialog,
|
|
|
|
|
ElButton,
|
|
|
|
|
ElSelect,
|
|
|
|
|
ElTreeSelect
|
|
|
|
|
ElSelect
|
|
|
|
|
},
|
|
|
|
|
setup() {
|
|
|
|
|
const cloneNodeDrag = ref(true);
|
|
|
|
|
|
|
|
|
|
return {
|
|
|
|
|
cloneNodeDrag
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
@ -88,29 +57,22 @@ export default {
|
|
|
|
|
horizontal: false,
|
|
|
|
|
collapsable: true,
|
|
|
|
|
onlyOneNode: false,
|
|
|
|
|
nodeDraggable:false,
|
|
|
|
|
expandAll: true,
|
|
|
|
|
disaled: false,
|
|
|
|
|
defineMenus:[],
|
|
|
|
|
params:{
|
|
|
|
|
virtualType:'',
|
|
|
|
|
level:'',
|
|
|
|
|
root:''
|
|
|
|
|
virtualType:''
|
|
|
|
|
},
|
|
|
|
|
style: {
|
|
|
|
|
background: "#fff",
|
|
|
|
|
color: "#5e6d82",
|
|
|
|
|
fontWeight: "500"
|
|
|
|
|
},
|
|
|
|
|
options: [],
|
|
|
|
|
levelOptions:[],
|
|
|
|
|
rootData: []
|
|
|
|
|
options: []
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
async created() {
|
|
|
|
|
await this.virtualTop();
|
|
|
|
|
this.organizationChart();
|
|
|
|
|
this.handleRootTop(this.params.virtualType);
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
exportImage() {
|
|
|
|
@ -146,6 +108,7 @@ export default {
|
|
|
|
|
ElMessage.error(err.msg);
|
|
|
|
|
})
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
organizationChart() {
|
|
|
|
|
selectOrganizationChart(this.params).then(res=>{
|
|
|
|
@ -156,44 +119,8 @@ export default {
|
|
|
|
|
ElMessage.error(err.msg);
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
handleRootTop(value) {
|
|
|
|
|
const params = {
|
|
|
|
|
"virtualType":value
|
|
|
|
|
}
|
|
|
|
|
selectRootTop(params).then(res=>{
|
|
|
|
|
this.rootData = res.data.data;
|
|
|
|
|
})
|
|
|
|
|
.catch(err=>{
|
|
|
|
|
ElMessage.error(err.msg);
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
handleLevelTop(value) {
|
|
|
|
|
const params = {
|
|
|
|
|
"virtualType":this.params.virtualType,
|
|
|
|
|
"id":value
|
|
|
|
|
}
|
|
|
|
|
selectLevelTop(params).then(res=>{
|
|
|
|
|
this.levelOptions = res.data.data;
|
|
|
|
|
})
|
|
|
|
|
.catch(err=>{
|
|
|
|
|
ElMessage.error(err.msg);
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
handleSelectChange(value) {
|
|
|
|
|
this.params.virtualType = value;
|
|
|
|
|
this.params.root = '';
|
|
|
|
|
this.params.level = '';
|
|
|
|
|
this.handleRootTop(value);
|
|
|
|
|
this.organizationChart();
|
|
|
|
|
},
|
|
|
|
|
handleLevelChange(value) {
|
|
|
|
|
this.params.level = value;
|
|
|
|
|
this.organizationChart();
|
|
|
|
|
},
|
|
|
|
|
handleRootChange(value) {
|
|
|
|
|
this.params.root = value;
|
|
|
|
|
this.params.level = '';
|
|
|
|
|
this.handleLevelTop(value);
|
|
|
|
|
this.organizationChart();
|
|
|
|
|
},
|
|
|
|
|
onExpand(e, data) {
|
|
|
|
|