diff --git a/src/components/organizationchart/OrganizationChart.vue b/src/components/organizationchart/OrganizationChart.vue index 84e7e43b2..ed642b124 100644 --- a/src/components/organizationchart/OrganizationChart.vue +++ b/src/components/organizationchart/OrganizationChart.vue @@ -1,6 +1,8 @@ @@ -13,6 +15,14 @@ export default { type: null, default: null }, + selectionKeys: { + type: null, + default: null + }, + selectionMode: { + type: String, + default: null + }, collapsible: { type: Boolean, default: false @@ -33,11 +43,39 @@ export default { } }, methods: { - onNodeToggle(key) { - if (this.d_collapsedKeys[key]) + 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]; - else + 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); diff --git a/src/components/organizationchart/OrganizationChartNode.vue b/src/components/organizationchart/OrganizationChartNode.vue index 185c6e2e0..b6e151cce 100644 --- a/src/components/organizationchart/OrganizationChartNode.vue +++ b/src/components/organizationchart/OrganizationChartNode.vue @@ -31,7 +31,8 @@ - + @@ -39,6 +40,8 @@