From 14c7f01ce2b6dbf7c9bff7c130589f366da0acfc Mon Sep 17 00:00:00 2001
From: SHAOJIAHAO <55341701@qq.com>
Date: Fri, 18 Dec 2020 10:30:07 +0800
Subject: [PATCH] =?UTF-8?q?[=E5=AE=8C=E5=96=84]=E6=AF=8F=E5=B1=82=E6=B6=88?=
 =?UTF-8?q?=E9=98=B2=E8=A6=81=E7=B4=A0=E5=BC=95=E5=85=A5tree=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../examinationQuestions.html                 | 45 ++++++++-----------
 .../collection-tools/examinationQuestions.ts  | 26 +++--------
 src/assets/css/ngZorroTree.css                |  2 +-
 3 files changed, 26 insertions(+), 47 deletions(-)

diff --git a/src/app/ui/collection-tools/examinationQuestions.html b/src/app/ui/collection-tools/examinationQuestions.html
index 02cc183..6435d88 100644
--- a/src/app/ui/collection-tools/examinationQuestions.html
+++ b/src/app/ui/collection-tools/examinationQuestions.html
@@ -1,32 +1,25 @@
-<div style="min-width: 240px;">
+<div style="min-width: 240px;" id="nodeTree">
   <div style="text-align: center;font-weight: 550;">消防设施考题设定</div>
   <div style="max-height: 300px;overflow-y: auto; margin: 25px 0;">
     <!-- 消防列表树 -->
-    <mat-tree [dataSource]="dataSource" [treeControl]="treeControl">
-
-      <mat-tree-node [ngClass]="{'isLookPattern': !node.isLookPattern}" *matTreeNodeDef="let node;" matTreeNodePadding cdkTreeNodePaddingIndent='26' class="treeNode">
-        <button mat-icon-button disabled></button>
-        <span title="{{node.name}}" [ngClass]="{'treeText': !node.isTemplate}">
-          {{node.name}}      
-        </span> 
-        <span  *ngIf="node.isTemplate">({{node.children.length}})</span>
-        <mat-checkbox style="margin-left: auto;" color=primary></mat-checkbox>
-      </mat-tree-node>
-
-      <mat-tree-node [ngClass]="{'isLookPattern': !node.isLookPattern}" *matTreeNodeDef="let node;when: hasChild" matTreeNodePadding class="treeNode" >
-        <button mat-icon-button matTreeNodeToggle [attr.aria-label]="'toggle ' + node.name">
-          <mat-icon class="mat-icon-rtl-mirror">
-            {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
-          </mat-icon>
-        </button>
-        <span title="{{node.name}}" [ngClass]="{'treeText': !node.isTemplate}">
-          {{node.name}}      
-        </span>   
-        <span  *ngIf="node.isTemplate && node.isNewElement">({{node.children.length}})</span>
-        <mat-checkbox style="margin-left: auto;" color=primary></mat-checkbox>
-      </mat-tree-node>
-
-    </mat-tree>
+    <nz-tree
+    [nzData]="data.treeData"
+    nzCheckable
+    nzMultiple
+    [nzCheckedKeys]="defaultCheckedKeys"
+    [nzExpandedKeys]="defaultExpandedKeys"
+    [nzSelectedKeys]="defaultSelectedKeys"
+    (nzClick)="nzEvent($event)"
+    (nzExpandChange)="nzEvent($event)"
+    (nzCheckBoxChange)="nzEvent($event)"
+    [nzTreeTemplate]="nzTreeTemplate"
+    >
+    </nz-tree>
+    <ng-template #nzTreeTemplate let-node let-origin="origin">
+        <div class="treeNodeTemplate">
+            <label class="overflowText textNode">{{node.origin.name}}</label>
+        </div>
+    </ng-template>
     <!-- 消防列表树 -->
   </div>
   <div style="text-align: center;">
diff --git a/src/app/ui/collection-tools/examinationQuestions.ts b/src/app/ui/collection-tools/examinationQuestions.ts
index 03a2a91..3f50a0d 100644
--- a/src/app/ui/collection-tools/examinationQuestions.ts
+++ b/src/app/ui/collection-tools/examinationQuestions.ts
@@ -15,30 +15,16 @@ export class examinationQuestions {
 
     constructor(private http:HttpClient, public dialog: MatDialog, public snackBar: MatSnackBar, public dialogRef: MatDialogRef<any>,
     @Inject(MAT_DIALOG_DATA) public data) {}
-    // tree配置
-    private _transformer = (node, level: number) => {//要给渲染节点传那些属性参数
-      return {
-        expandable: !!node.children && node.children.length > 0,
-        name: node.name || node.Name,
-        level: level,
-        id: node.id || node.Id,
-        children:node.children,
-        isTemplate:node.isTemplate,
-        isNewElement:node.isNewElement,
-        isLook:node.isLook,
-        isLookPattern:node.isLookPattern || null
-      };
-    }
-    treeControl = new FlatTreeControl<any>(node => node.level, node => node.expandable);
-    treeFlattener = new MatTreeFlattener(this._transformer, node => node.level, node => node.expandable, node => node.children);
-    dataSource = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener);
-    hasChild = (_: number, node: any) => node.expandable;
 
+    defaultCheckedKeys = []; //指定选中复选框的树节点 key值
+    defaultExpandedKeys = []; //展开指定的树节点 key值
+    defaultSelectedKeys = []; //指定选中的树节点 key值
     ngOnInit(): void {
-      this.dataSource.data = this.data.treeData
-      this.treeControl.expandAll()
+      console.log(this.data.treeData)
     }
+    nzEvent($event,key){
 
+    }
     //提交
     submit () {
       console.log(this.data)
diff --git a/src/assets/css/ngZorroTree.css b/src/assets/css/ngZorroTree.css
index 8f8eecf..575ecdc 100644
--- a/src/assets/css/ngZorroTree.css
+++ b/src/assets/css/ngZorroTree.css
@@ -344,7 +344,7 @@
   text-align: center;
   cursor: pointer
 }
-#createtestscore .ant-tree .ant-tree-switcher {
+#createtestscore,#nodeTree .ant-tree .ant-tree-switcher {
   line-height: 22px;
 }