Initiated Organization Chart
cagataycivici
parent
36e9c27028
commit
1c10bdf86d
Binary file not shown.
|
After Width: | Height: | Size: 3.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.8 KiB |
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div class="p-organizationchart p-component">
|
||||
<OrganizationChartNode :node="value" />
|
||||
<OrganizationChartNode :node="value" :templates="$scopedSlots" @node-toggle="onNodeToggle" :collapsedKeys="d_collapsedKeys" :collapsible="collapsible" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -4,9 +4,9 @@
|
|||
<tr v-if="node">
|
||||
<td :colspan="colspan">
|
||||
<div :class="nodeContentClass" @click="onNodeClick">
|
||||
{{node.label}}
|
||||
<a v-if="!leaf" tabindex="0" class="p-node-toggler" @click="toggleNode" @keydown.enter="toggleNode">
|
||||
<i class="p-node-toggler-icon pi" :class="{'pi-chevron-down': node.expanded, 'pi-chevron-up': !node.expanded}"></i>
|
||||
<OrganizationChartNodeTemplate :node="node" :template="templates[node.type]||templates['default']" />
|
||||
<a v-if="collapsible && !leaf" tabindex="0" class="p-node-toggler" @click="toggleNode" @keydown.enter="toggleNode">
|
||||
<i class="p-node-toggler-icon pi" :class="{'pi-chevron-down': expanded, 'pi-chevron-up': !expanded}"></i>
|
||||
</a>
|
||||
</div>
|
||||
</td>
|
||||
|
|
@ -24,14 +24,14 @@
|
|||
</template>
|
||||
<template v-if="node.children && node.children.length > 1">
|
||||
<template v-for="(child,i) of node.children">
|
||||
<td :key="(child.key || child.label) + '_left'" class="p-organizationchart-line-left" :class="{'p-organizationchart-line-top': !(i === 0)}"> </td>
|
||||
<td :key="(child.key || child.label) + '_right'" class="p-organizationchart-line-right" :class="{'p-organizationchart-line-top': !(i === (node.children.length - 1))}"> </td>
|
||||
<td :key="child.key + '_left'" class="p-organizationchart-line-left" :class="{'p-organizationchart-line-top': !(i === 0)}"> </td>
|
||||
<td :key="child.key + '_right'" class="p-organizationchart-line-right" :class="{'p-organizationchart-line-top': !(i === (node.children.length - 1))}"> </td>
|
||||
</template>
|
||||
</template>
|
||||
</tr>
|
||||
<tr :style="childStyle" class="p-organizationchart-nodes">
|
||||
<td v-for="child of node.children" :key="child.key || child.label" colspan="2">
|
||||
<sub-node :node="child" />
|
||||
<td v-for="child of node.children" :key="child.key" colspan="2">
|
||||
<sub-node :node="child" :templates="templates" :collapsedKeys="collapsedKeys" @node-toggle="onChildNodeToggle" :collapsible="collapsible" />
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
|
@ -39,6 +39,26 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
const OrganizationChartNodeTemplate = {
|
||||
functional: true,
|
||||
props: {
|
||||
node: {
|
||||
type: null,
|
||||
default: null
|
||||
},
|
||||
template: {
|
||||
type: null,
|
||||
default: null
|
||||
}
|
||||
},
|
||||
render(createElement, context) {
|
||||
const content = context.props.template({
|
||||
'node': context.props.node
|
||||
});
|
||||
return [content];
|
||||
}
|
||||
};
|
||||
|
||||
export default {
|
||||
name: 'sub-node',
|
||||
props: {
|
||||
|
|
@ -53,6 +73,18 @@ export default {
|
|||
selectable: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
templates: {
|
||||
type: null,
|
||||
default: null
|
||||
},
|
||||
collapsible: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
collapsedKeys: {
|
||||
type: null,
|
||||
default: null
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
|
@ -60,7 +92,10 @@ export default {
|
|||
|
||||
},
|
||||
toggleNode() {
|
||||
|
||||
this.$emit('node-toggle', this.node.key);
|
||||
},
|
||||
onChildNodeToggle(key) {
|
||||
this.$emit('node-toggle', key);
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
|
@ -75,9 +110,15 @@ export default {
|
|||
},
|
||||
childStyle() {
|
||||
return {
|
||||
visibility: !this.leaf && this.node.expanded ? 'inherit' : 'hidden'
|
||||
visibility: !this.leaf && this.expanded ? 'inherit' : 'hidden'
|
||||
}
|
||||
},
|
||||
expanded() {
|
||||
return this.collapsedKeys[this.node.key] === undefined;
|
||||
}
|
||||
},
|
||||
components: {
|
||||
'OrganizationChartNodeTemplate': OrganizationChartNodeTemplate
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -9,7 +9,27 @@
|
|||
|
||||
<div class="content-section implementation">
|
||||
<h3 class="first">Advanced</h3>
|
||||
<OrganizationChart :value="data1" />
|
||||
<p>Hierarchical data with zero configuration.</p>
|
||||
<OrganizationChart :value="data1" :collapsible="true" class="company">
|
||||
<template #person="slotProps">
|
||||
<div class="node-header ui-corner-top">{{slotProps.node.data.label}}</div>
|
||||
<div class="node-content">
|
||||
<img :src="'demo/images/organization/' + slotProps.node.data.avatar" width="32">
|
||||
<div>{{slotProps.node.data.name}}</div>
|
||||
</div>
|
||||
</template>
|
||||
<template #default="slotProps">
|
||||
<span>{{slotProps.node.data.label}}</span>
|
||||
</template>
|
||||
</OrganizationChart>
|
||||
|
||||
<h3>Basic</h3>
|
||||
<p>Hierarchical data with zero configuration.</p>
|
||||
<OrganizationChart :value="data2">
|
||||
<template #default="slotProps">
|
||||
<span>{{slotProps.node.data.label}}</span>
|
||||
</template>
|
||||
</OrganizationChart>
|
||||
</div>
|
||||
|
||||
<OrganizationChartDoc />
|
||||
|
|
@ -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
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
/deep/ .p-organizationchart {
|
||||
.p-person {
|
||||
padding: 0;
|
||||
border: 0 none;
|
||||
}
|
||||
|
||||
.node-header, .node-content {
|
||||
padding: .5em .7em;
|
||||
}
|
||||
|
||||
.node-header {
|
||||
background-color: #495ebb;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.node-content {
|
||||
text-align: center;
|
||||
border: 1px solid #495ebb;
|
||||
}
|
||||
|
||||
.node-content img {
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.department-cfo {
|
||||
background-color: #7247bc;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.department-coo {
|
||||
background-color: #a534b6;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.department-cto {
|
||||
background-color: #e9286f;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.p-organizationchart .p-highlight {
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.p-person .p-node-toggler {
|
||||
color: #495ebb !important;
|
||||
}
|
||||
|
||||
.department-cto .p-node-toggler {
|
||||
color: #8a0a39 !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
Loading…
Reference in New Issue