10000 feat(tree): support customer expand icon #264984 · atinc/ngx-tethys@7975898 · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

Commit 7975898

Browse files
whyourwhyour
committed
feat(tree): support customer expand icon #264984
1 parent 3d5f6be commit 7975898

File tree

11 files changed

+417
-8
lines changed

11 files changed

+417
-8
lines changed

‎demo/src/app/components/+tree/api-parameters.json

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,12 @@
2929
"type": "string",
3030
"default": "default"
3131
},
32+
{
33+
"property": "thyIcons",
34+
"description": "设置不同 Tree 展开折叠的图标，`expand` 为展开状态的图标，`collapse` 为折叠状态的图标",
35+
"type": "{ expand: string, collapse: string }",
36+
"default": "{}"
37+
},
3238
{
3339
"property": "thySize",
3440
"description": "支持 `sm` | `default` 两种大小",

‎demo/src/app/components/+tree/icons/tree-icons.component.html

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<div class="demo-card">
2+
<div class="p-3">
3+
<label thyCheckbox thyInline="true" [(ngModel)]="draggable" thyLabelText="开启拖拽"></label>
4+
</div>
5+
<thy-tree
6+
[thyIcons]="treeIcons"
7+
[thyNodes]="treeNodes"
8+
[thyDraggable]="draggable"
9+
[thyShowExpand]="showExpand"
10+
[thyBeforeDragDrop]="beforeDragDrop"
11+
(thyOnDragDrop)="onDragDrop($event)"
12+
>
13+
<ng-template #treeNodeTemplate let-node="node" let-data="origin">
14+
<thy-icon
15+
*ngIf="data.type !== 'member'"
16+
class="thy-tree-node-icon"
17+
[thyIconName]="node?.isExpanded ? 'folder-open-fill' : 'folder-fill'"
18+
></thy-icon>
19+
<div class="thy-tree-node-title text-truncate" thyFlexibleText [thyTooltipContent]="data?.name">
20+
{{ data?.name }} <span class="text-desc ml-1">( {{ data.member_count || 0 }}人 )</span>
21+
</div>
22+
</ng-template>
23+
</thy-tree>
24+
</div>

‎demo/src/app/components/+tree/icons/tree-icons.component.ts

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import { Component, OnInit } from '@angular/core';
2+
import * as data from './tree-mock.json';
3+
import { ThyTreeNode } from 'ngx-tethys';
4+
import { ThyDragDropEvent, ThyDropPosition } from 'ngx-tethys/drag-drop/drag-drop.class.js';
5+
6+
@Component({
7+
selector: 'app-demo-tree-icons',
8+
templateUrl: './tree-icons.component.html'
9+
})
10+
export class DemoTreeIconsComponent implements OnInit {
11+
treeNodes = data.default;
12+
public treeIcons = {
13+
expand: 'angle-double-down',
14+
collapse: 'angle-double-up'
15+
};
16+
17+
draggable = true;
18+
19+
constructor() {}
20+
21+
ngOnInit(): void {}
22+
23+
showExpand(node: ThyTreeNode) {
24+
return node.origin.type !== 'member';
25+
}
26+
27+
beforeDragDrop(event: ThyDragDropEvent<ThyTreeNode>) {
28+
return !(event.item.origin.name === '未分配部门');
29+
}
30+
31+
onDragDrop(event: ThyDragDropEvent<ThyTreeNode>) {
32+
let afterId: string;
33+
const suiteId: string = event.previousItem.origin._id;
34+
const parenId: string =
35+
event.position === ThyDropPosition.in ? event.item.origin._id : event.item.parentNode.origin._id;
36+
const newIndex = event.currentIndex;
37+
if (newIndex === 0) {
38+
afterId = '';
39+
} else {
40+
afterId = event.containerItems[event.currentIndex - 1].origin._id;
41+
}
42+
}
43+
}

‎demo/src/app/components/+tree/icons/tree-mock.json

Lines changed: 231 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,231 @@
1+
[
2+
{
3+
"key": "111111111111111111111111",
4+
"title": "易成时代",
5+
"expanded": true,
6+
"_id": "111111111111111111111111",
7+
"name": "易成时代",
8+
"member_count": 3,
9+
"children": [
10+
{
11+
"key": "5d4e5b365fadf30311c3d889",
12+
"title": "产品部",
13+
"expanded": false,
14+
"_id": "5d4e5b365fadf30311c3d889",
15+
"name": "产品部",
16+
"short_code": null,
17+
"parent_id": "111111111111111111111111",
18+
"position": 65536,
19+
"member_count": 1,
20+
"children": [
21+
{
22+
"key": "5d51536887367c0f92fe6fa6",
23+
"title": "产品A组",
24+
"expanded": false,
25+
"_id": "5d51536887367c0f92fe6fa6",
26+
"name": "产品A组",
27+
"short_code": null,
28+
"parent_id": "5d4e5b365fadf30311c3d889",
29+
"position": 983040,
30+
"member_count": 0,
31+
"children": [
32+
{
33+
"_id": "0000001",
34+
"name": "张三",
35+
"type": "member"
36+
},
37+
{
38+
"_id": "0000001",
39+
"name": "李四",
40+
"type": "member"
41+
},
42+
{
43+
"_id": "0000001",
44+
"name": "王五",
45+
"type": "member"
46+
}
47+
]
48+
},
49+
{
50+
"key": "5d51537187367c0f92fe6fa7",
51+
"title": "产品B组",
52+
"expanded": false,
53+
"_id": "5d51537187367c0f92fe6fa7",
54+
"name": "产品B组",
55+
"short_code": null,
56+
"parent_id": "5d4e5b365fadf30311c3d889",
57+
"position": 1048576,
58+
"member_count": 0,
59+
"children": []
60+
},
61+
{
62+
"key": "5d51537987367c0f92fe6fa8",
63+
"title": "产品C组",
64+
"expanded": false,
65+
"_id": "5d51537987367c0f92fe6fa8",
66+
"name": "产品C组",
67+
"short_code": null,
68+
"parent_id": "5d4e5b365fadf30311c3d889",
69+
"position": 1114112,
70+
"member_count": 0,
71+
"children": []
72+
}
73+
]
74+
},
75+
{
76+
"key": "5d4e5c0c5fadf30311c3d88a",
77+
"title": "研发部",
78+
"expanded": false,
79+
"_id": "5d4e5c0c5fadf30311c3d88a",
80+
"name": "研发部",
81+
"short_code": null,
82+
"parent_id": "111111111111111111111111",
83+
"position": 131072,
84+
"member_count": 0,
85+
"children": [
86+
{
87+
"key": "5d4e611f5fadf30311c3d88d",
88+
"title": "研发A组",
89+
"expanded": false,
90+
"_id": "5d4e611f5fadf30311c3d88d",
91+
"name": "研发A组",
92+
"short_code": null,
93+
"parent_id": "5d4e5c0c5fadf30311c3d88a",
94+
"position": 327680,
95+
"member_count": 0,
96+
"children": []
97+
},
98+
{
99+
"key": "5d4e61295fadf30311c3d88e",
100+
"title": "研发B组",
101+
"expanded": false,
102+
"_id": "5d4e61295fadf30311c3d88e",
103+
"name": "研发B组",
104+
"short_code": null,
105+
"parent_id": "5d4e5c0c5fadf30311c3d88a",
106+
"position": 393216,
107+
"member_count": 0,
108+
"children": []
109+
},
110+
{
111+
"key": "5d4e924f5fadf30311c3d899",
112+
"title": "研发C组",
113+
"expanded": false,
114+
"_id": "5d4e924f5fadf30311c3d899",
115+
"name": "研发C组",
116+
"short_code": null,
117+
"parent_id": "5d4e5c0c5fadf30311c3d88a",
118+
"position": 655360,
119+
"member_count": 0,
120+
"children": []
121+
},
122+
{
123+
"key": "5d4e95395fadf30311c3d89c",
124+
"title": "研发D组",
125+
"expanded": false,
126+
"_id": "5d4e95395fadf30311c3d89c",
127+
"name": "研发D组",
128+
"short_code": null,
129+
"parent_id": "5d4e5c0c5fadf30311c3d88a",
130+
"position": 720896,
131+
"member_count": 0,
132+
"children": []
133+
},
134+
{
135+
"key": "5d4e954a5fadf30311c3d89d",
136+
"title": "研发E组",
137+
"expanded": false,
138+
"_id": "5d4e954a5fadf30311c3d89d",
139+
"name": "研发E组",
140+
"short_code": null,
141+
"parent_id": "5d4e5c0c5fadf30311c3d88a",
142+
"position": 786432,
143+
"member_count": 0,
144+
"children": []
145+
}
146+
]
147+
},
148+
{
149+
"key": "5d4e60ee5fadf30311c3d88b",
150+
"title": "行政部",
151+
"expanded": false,
152+
"_id": "5d4e60ee5fadf30311c3d88b",
153+
"name": "行政部",
154+
"short_code": null,
155+
"parent_id": "111111111111111111111111",
156+
"position": 196608,
157+
"member_count": 0,
158+
"children": []
159+
},
160+
{
161+
"key": "5d4e61055fadf30311c3d88c",
162+
"title": "客户成功部",
163+
"expanded": false,
164+
"_id": "5d4e61055fadf30311c3d88c",
165+
"name": "客户成功部",
166+
"short_code": null,
167+
"parent_id": "111111111111111111111111",
168+
"position": 262144,
169+
"member_count": 0,
170+
"children": []
171+
},
172+
{
173+
"key": "5d4e8aa15fadf30311c3d88f",
174+
"title": "运维部",
175+
"expanded": false,
176+
"_id": "5d4e8aa15fadf30311c3d88f",
177+
"name": "运维部",
178+
"short_code": null,
179+
"parent_id": "111111111111111111111111",
180+
"position": 458752,
181+
"member_count": 1,
182+
"children": []
183+
},
184+
{
185+
"key": "5d4e8b2d5fadf30311c3d890",
186+
"title": "基础部",
187+
"expanded": false,
188+
"_id": "5d4e8b2d5fadf30311c3d890",
189+
"name": "基础部",
190+
"short_code": null,
191+
"parent_id": "111111111111111111111111",
192+
"position": 524288,
193+
"member_count": 0,
194+
"children": []
195+
},
196+
{
197+
"key": "5d4ea2d81b97040fa991cf98",
198+
"title": "测试部",
199+
"expanded": false,
200+
"_id": "5d4ea2d81b97040fa991cf98",
201+
"name": "测试部",
202+
"short_code": null,
203+
"parent_id": "111111111111111111111111",
204+
"position": 851968,
205+
"member_count": 0,
206+
"children": []
207+
},
208+
{
209+
"key": "5d512f659f56b571eb95b6ef",
210+
"title": "设计部",
211+
"expanded": false,
212+
"_id": "5d512f659f56b571eb95b6ef",
213+
"name": "设计部",
214+
"short_code": null,
215+
"parent_id": "111111111111111111111111",
216+
"position": 917504,
217+
"member_count": 0,
218+
"children": []
219+
}
220+
]
221+
},
222+
{
223+
"key": "000000000000000000000000",
224+
"title": "未分配部门",
225+
"expanded": false,
226+
"_id": "000000000000000000000000",
227+
"name": "未分配部门",
228+
"parent_id": null,
229+
"children": []
230+
}
231+
]

‎demo/src/app/components/+tree/index.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,9 @@ import { NgModule } from '@angular/core';
22
import { SharedModule } from '../../shared.module';
33
import { DemoTreeBasicComponent } from './basic/tree-basic.component';
44
import { DemoTreeSectionComponent } from './section.component';
5+
import { DemoTreeIconsComponent } from './icons/tree-icons.component';
56

6-
const COMPONENTS = [DemoTreeSectionComponent, DemoTreeBasicComponent];
7+
const COMPONENTS = [DemoTreeSectionComponent, DemoTreeBasicComponent, DemoTreeIconsComponent];
78

89
@NgModule({
910
declarations: [...COMPONENTS],

‎demo/src/app/components/+tree/section.component.ts

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { Component } from '@angular/core';
22
import { LiveDemoCodeExample } from '../../core/live-demo/live-demo.component';
33
import { DemoTreeBasicComponent } from './basic/tree-basic.component';
4+
import { DemoTreeIconsComponent } from './icons/tree-icons.component';
45

56
@Component({
67
selector: 'demo-tree-section',
@@ -24,6 +25,23 @@ export class DemoTreeSectionComponent {
2425
content: require('!!raw-loader!./basic/tree-basic.component.ts')
2526
}
2627
]
28+
},
29+
{
30+
title: '自定义Icons',
31+
component: DemoTreeIconsComponent,
32+
description: ``,
33+
codeExamples: [
34+
{
35+
type: 'html',
36+
name: 'tree-section.component.html',
37+
content: require('!!raw-loader!./tree-section.component.html')
38+
},
39+
{
40+
type: 'ts',
41+
name: 'tree-section.component.ts',
42+
content: require('!!raw-loader!./tree-section.component.ts')
43+
}
44+
]
2745
}
2846
];
2947

‎demo/src/app/components/index.ts

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,6 @@ import { DemoLoadingSectionComponent } from './+loading/loading-section.componen
2222
import { DemoAlertSectionComponent } from './+alert/alert-section.component';
2323
import { DemoPaginationComponent } from './+pagination/pagination.component';
2424
import { DemoConfirmSectionComponent } from './+confirm/confirm-section.component';
25-
import { DemoTreeSectionComponent } from './+tree/tree-section.component';
2625
import { DemoEmptySectionComponent } from './+empty/empty-section.component';
2726
import { DemoSwitchSectionComponent } from './+switch/switch-section.component';
2827
import { DemoTransferSectionComponent } from './+transfer/transfer-section.component';
@@ -118,7 +117,6 @@ export const COMPONENTS = [
118117
DemoLoadingSectionComponent,
119118
DemoAlertSectionComponent,
120119
DemoPaginationComponent,
121-
DemoTreeSectionComponent,
122120
DemoEmptySectionComponent,
123121
DemoSwitchSectionComponent,
124122
DemoTransferSectionComponent,

0 commit comments

Comments
 (0)
0