78 lines
2.3 KiB
Vue
Executable File
78 lines
2.3 KiB
Vue
Executable File
<template>
|
|
<div :class="cx('root')" v-bind="ptm('root')">
|
|
<OrganizationChartNode
|
|
:node="value"
|
|
:templates="$slots"
|
|
@node-toggle="onNodeToggle"
|
|
:collapsedKeys="d_collapsedKeys"
|
|
:collapsible="collapsible"
|
|
@node-click="onNodeClick"
|
|
:selectionMode="selectionMode"
|
|
:selectionKeys="selectionKeys"
|
|
:pt="pt"
|
|
:unstyled="unstyled"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import BaseOrganizationChart from './BaseOrganizationChart.vue';
|
|
import OrganizationChartNode from './OrganizationChartNode.vue';
|
|
|
|
export default {
|
|
name: 'OrganizationChart',
|
|
extends: BaseOrganizationChart,
|
|
emits: ['node-unselect', 'node-select', 'update:selectionKeys', 'node-expand', 'node-collapse', 'update:collapsedKeys'],
|
|
data() {
|
|
return {
|
|
d_collapsedKeys: this.collapsedKeys || {}
|
|
};
|
|
},
|
|
watch: {
|
|
collapsedKeys(newValue) {
|
|
this.d_collapsedKeys = newValue;
|
|
}
|
|
},
|
|
methods: {
|
|
onNodeClick(node) {
|
|
const key = node.key;
|
|
|
|
if (this.selectionMode) {
|
|
let _selectionKeys = this.selectionKeys ? { ...this.selectionKeys } : {};
|
|
|
|
if (_selectionKeys[key]) {
|
|
delete _selectionKeys[key];
|
|
this.$emit('node-unselect', node);
|
|
} else {
|
|
if (this.selectionMode === 'single') {
|
|
_selectionKeys = {};
|
|
}
|
|
|
|
_selectionKeys[key] = true;
|
|
this.$emit('node-select', node);
|
|
}
|
|
|
|
this.$emit('update:selectionKeys', _selectionKeys);
|
|
}
|
|
},
|
|
onNodeToggle(node) {
|
|
const key = node.key;
|
|
|
|
if (this.d_collapsedKeys[key]) {
|
|
delete this.d_collapsedKeys[key];
|
|
this.$emit('node-expand', node);
|
|
} else {
|
|
this.d_collapsedKeys[key] = true;
|
|
this.$emit('node-collapse', node);
|
|
}
|
|
|
|
this.d_collapsedKeys = { ...this.d_collapsedKeys };
|
|
this.$emit('update:collapsedKeys', this.d_collapsedKeys);
|
|
}
|
|
},
|
|
components: {
|
|
OrganizationChartNode: OrganizationChartNode
|
|
}
|
|
};
|
|
</script>
|