diff --git a/public/demo/images/organization/jesse.jpg b/public/demo/images/organization/jesse.jpg new file mode 100644 index 000000000..e19371a98 Binary files /dev/null and b/public/demo/images/organization/jesse.jpg differ diff --git a/public/demo/images/organization/mike.jpg b/public/demo/images/organization/mike.jpg new file mode 100644 index 000000000..aff891f51 Binary files /dev/null and b/public/demo/images/organization/mike.jpg differ diff --git a/public/demo/images/organization/saul.jpg b/public/demo/images/organization/saul.jpg new file mode 100644 index 000000000..74d2f7daf Binary files /dev/null and b/public/demo/images/organization/saul.jpg differ diff --git a/public/demo/images/organization/walter.jpg b/public/demo/images/organization/walter.jpg new file mode 100644 index 000000000..386d236fc Binary files /dev/null and b/public/demo/images/organization/walter.jpg differ diff --git a/src/components/organizationchart/OrganizationChart.vue b/src/components/organizationchart/OrganizationChart.vue index 5a9b75877..561961c15 100644 --- a/src/components/organizationchart/OrganizationChart.vue +++ b/src/components/organizationchart/OrganizationChart.vue @@ -1,6 +1,6 @@ @@ -12,6 +12,29 @@ export default { value: { type: null, default: null + }, + collapsible: { + type: Boolean, + default: false + }, + collapsedKeys: { + type: null, + default: null + } + }, + data() { + return { + d_collapsedKeys: this.collapsedKeys || {} + } + }, + methods: { + onNodeToggle(key) { + if (this.d_collapsedKeys[key]) + delete this.d_collapsedKeys[key]; + else + this.d_collapsedKeys[key] = true; + + this.d_collapsedKeys = {...this.d_collapsedKeys}; } }, components: { @@ -49,6 +72,7 @@ export default { user-select: none; -moz-user-select: none; -webkit-user-select: none; + cursor: pointer; } .p-organizationchart .p-organizationchart-line-down { diff --git a/src/components/organizationchart/OrganizationChartNode.vue b/src/components/organizationchart/OrganizationChartNode.vue index 4861a5611..185c6e2e0 100644 --- a/src/components/organizationchart/OrganizationChartNode.vue +++ b/src/components/organizationchart/OrganizationChartNode.vue @@ -4,9 +4,9 @@
- {{node.label}} - - + + +
@@ -24,14 +24,14 @@ - - + + @@ -39,6 +39,26 @@ diff --git a/src/views/organizationchart/OrganizationChartDemo.vue b/src/views/organizationchart/OrganizationChartDemo.vue index dfedfb371..934e21860 100644 --- a/src/views/organizationchart/OrganizationChartDemo.vue +++ b/src/views/organizationchart/OrganizationChartDemo.vue @@ -9,7 +9,27 @@

Advanced

- +

Hierarchical data with zero configuration.

+ + + + + +

Basic

+

Hierarchical data with zero configuration.

+ + +
@@ -22,102 +42,110 @@ export default { data() { return { data1: { - label: 'CEO', + key: '0', type: 'person', - className: 'p-person', - expanded: true, - data: {name:'Walter White', 'avatar': 'walter.jpg'}, + styleClass: 'p-person', + data: {label: 'CEO', name: 'Walter White', avatar: 'walter.jpg'}, children: [ { - label: 'CFO', + key: '0_0', type: 'person', - className: 'p-person', - expanded: true, - data: {name:'Saul Goodman', 'avatar': 'saul.jpg'}, + styleClass: 'p-person', + data: {label: 'CFO', name:'Saul Goodman', avatar: 'saul.jpg'}, children:[{ - label: 'Tax', - className: 'department-cfo' + key: '0_0_0', + data: {label: 'Tax'}, + styleClass: 'department-cfo' }, { - label: 'Legal', - className: 'department-cfo' + key: '0_0_1', + data: {label: 'Legal'}, + styleClass: 'department-cfo' }], }, { - label: 'COO', + key: '0_1', type: 'person', - className: 'p-person', - expanded: true, - data: {name:'Mike E.', 'avatar': 'mike.jpg'}, + styleClass: 'p-person', + data: {label: 'COO', name:'Mike E.', avatar: 'mike.jpg'}, children:[{ - label: 'Operations', - className: 'department-coo' + key: '0_1_0', + data: {label: 'Operations'}, + styleClass: 'department-coo' }] }, { - label: 'CTO', + key: '0_2', type: 'person', - className: 'p-person', - expanded: true, - data: {name:'Jesse Pinkman', 'avatar': 'jesse.jpg'}, + styleClass: 'p-person', + data: {label: 'CTO', name:'Jesse Pinkman', avatar: 'jesse.jpg'}, children:[{ - label: 'Development', - className: 'department-cto', - expanded: true, + key: '0_2_0', + data: {label: 'Development'}, + styleClass: 'department-cto', children:[{ - label: 'Analysis', - className: 'department-cto' + key: '0_2_0_0', + data: {label: 'Analysis'}, + styleClass: 'department-cto' }, { - label: 'Front End', - className: 'department-cto' + key: '0_2_0_1', + data: {label: 'Front End'}, + styleClass: 'department-cto' }, { - label: 'Back End', - className: 'department-cto' + key: '0_2_0_2', + data: {label: 'Back End'}, + styleClass: 'department-cto' }] }, { - label: 'QA', - className: 'department-cto' + key: '0_2_1', + data: {label: 'QA'}, + styleClass: 'department-cto' }, { - label: 'R&D', - className: 'department-cto' + key: '0_2_2', + data: {label: 'R&D'}, + styleClass: 'department-cto' }] } ] }, - data2 : [{ - label: 'F.C Barcelona', - expanded: true, + data2 : { + key: '0', + data: {label: 'F.C. Barcelona'}, children: [ { - label: 'F.C Barcelona', - expanded: true, + key: '0_0', + data: {label: 'F.C. Barcelona'}, children: [ { - label: 'Chelsea FC' + key: '0_0_0', + data: {label: 'Chelsea F.C.'} }, { - label: 'F.C. Barcelona' + key: '0_0_1', + data: {label: 'F.C. Barcelona'} } ] }, { - label: 'Real Madrid', - expanded: true, + key: '0_1', + data: {label: 'Real Madrid'}, children: [ { - label: 'Bayern Munich' + key: '0_1_0', + data: {label: 'Bayern Munich'} }, { - label: 'Real Madrid' + key: '0_1_1', + data: {label: 'Real Madrid'} } ] } ] - }], + }, selection: [] } }, @@ -125,4 +153,60 @@ export default { 'OrganizationChartDoc': OrganizationChartDoc } } - \ No newline at end of file + + + \ No newline at end of file