103 lines
3.0 KiB
HTML
103 lines
3.0 KiB
HTML
|
<cdk-virtual-scroll-viewport
|
||
|
|
#cvsvOrganization
|
||
|
|
itemSize="36"
|
||
|
|
perfectScrollbar
|
||
|
|
fxFlexFill
|
||
|
|
style="height: 400px;"
|
||
|
|
>
|
||
|
|
<ng-container
|
||
|
|
*cdkVirtualFor="let node of dataSource.expandedData$"
|
||
|
|
></ng-container>
|
||
|
|
<mat-tree
|
||
|
|
fxFlexFill
|
||
|
|
#orgranizationTree
|
||
|
|
[dataSource]="dataSource"
|
||
|
|
[treeControl]="treeControl"
|
||
|
|
class="organization-tree"
|
||
|
|
>
|
||
|
|
<!-- This is the tree node template for leaf nodes -->
|
||
|
|
<mat-tree-node
|
||
|
|
*matTreeNodeDef="let node"
|
||
|
|
matTreeNodePadding
|
||
|
|
matTreeNodePaddingIndent="20"
|
||
|
|
class="tree-no-child"
|
||
|
|
>
|
||
|
|
<div
|
||
|
|
class="tree-node-closer-container"
|
||
|
|
*ngFor="let i of appendDivArray(node.level)"
|
||
|
|
>
|
||
|
|
<div
|
||
|
|
class="tree-node-closer-top"
|
||
|
|
[style.left.px]="20 - 20 * i"
|
||
|
|
[attr.last-node]="isLastNode(node, i) ? '' : null"
|
||
|
|
[attr.sub-node]="0 < i ? '' : null"
|
||
|
|
></div>
|
||
|
|
<div
|
||
|
|
class="tree-node-closer-bottom"
|
||
|
|
[style.left.px]="20 - 20 * i"
|
||
|
|
[attr.last-node]="isLastNode(node, i) ? '' : null"
|
||
|
|
[attr.sub-node]="0 < i ? '' : null"
|
||
|
|
></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<li (click)="onClickNode(node)" matRipple>
|
||
|
|
<div class="tree-node-body">
|
||
|
|
<!-- {{ node.deptInfo | ucapTranslate: 'name' }} -->
|
||
|
|
{{ node.deptInfo.name }}
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
</mat-tree-node>
|
||
|
|
<!-- This is the tree node template for expandable nodes -->
|
||
|
|
<mat-tree-node
|
||
|
|
*matTreeNodeDef="let node; when: hasChild"
|
||
|
|
matTreeNodePadding
|
||
|
|
matTreeNodePaddingIndent="20"
|
||
|
|
class="tree-has-child"
|
||
|
|
>
|
||
|
|
<div
|
||
|
|
class="tree-node-closer-container"
|
||
|
|
*ngFor="let i of appendDivArray(node.level)"
|
||
|
|
>
|
||
|
|
<div
|
||
|
|
class="tree-node-closer-top"
|
||
|
|
[style.left.px]="20 - 20 * i"
|
||
|
|
[attr.last-node]="isLastNode(node, i) ? '' : null"
|
||
|
|
[attr.sub-node]="0 < i ? '' : null"
|
||
|
|
></div>
|
||
|
|
<div
|
||
|
|
class="tree-node-closer-bottom"
|
||
|
|
[style.left.px]="20 - 20 * i"
|
||
|
|
[attr.expanded]="treeControl.isExpanded(node) ? '' : null"
|
||
|
|
[attr.last-node]="isLastNode(node, i) ? '' : null"
|
||
|
|
[attr.sub-node]="0 < i ? '' : null"
|
||
|
|
></div>
|
||
|
|
</div>
|
||
|
|
<li (click)="onClickNode(node)" matRipple>
|
||
|
|
<div class="tree-node-body">
|
||
|
|
<span class="horizontal-line"></span>
|
||
|
|
<button
|
||
|
|
mat-icon-button
|
||
|
|
color="accent"
|
||
|
|
matTreeNodeToggle
|
||
|
|
[attr.aria-label]="'toggle ' + node.filename"
|
||
|
|
>
|
||
|
|
<mat-icon
|
||
|
|
class="tree-node-expand-btn"
|
||
|
|
[@romvoeAdd]="treeControl.isExpanded(node) ? 'remove' : 'add'"
|
||
|
|
>
|
||
|
|
{{ treeControl.isExpanded(node) ? 'remove' : 'add' }}
|
||
|
|
</mat-icon>
|
||
|
|
</button>
|
||
|
|
<span class="dept-name">
|
||
|
|
<!-- {{
|
||
|
|
node.deptInfo | ucapTranslate: 'name'
|
||
|
|
}} -->
|
||
|
|
{{ node.deptInfo.name }}
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
<!-- <ul class="tree-node-closer"></ul> -->
|
||
|
|
</li>
|
||
|
|
</mat-tree-node>
|
||
|
|
</mat-tree>
|
||
|
|
</cdk-virtual-scroll-viewport>
|