[完善]组织机构排序

src/app/ui/organization/organization.component.html

@@ -1,24 +1,26 @@
 <div class="box" style="height: 100%; overflow-y: auto;position: relative">
-  <div>
+  <div style="position: relative;">
     <mat-tree [dataSource]="dataSource" [treeControl]="treeControl">
       <mat-tree-node *matTreeNodeDef="let node;" matTreeNodePadding (click)="getOffices(node)">
         <button mat-icon-button disabled></button>
         {{node.name}}
         <button mat-icon-button class="create" (click)="create(node)"><mat-icon>add_circle_outline</mat-icon></button>
         <button mat-icon-button class="edit" (click)="edit(node)"><mat-icon>create</mat-icon></button>
-        <button mat-icon-button class="up" (click)="up(node)" [disabled]="!node.isTop?false:true"><mat-icon>arrow_upward</mat-icon></button>
-        <button mat-icon-button class="down" (click)="down(node)" [disabled]="!node.isBottom?false:true"><mat-icon>arrow_downward</mat-icon></button>
-        <button mat-icon-button class="disabled" (click)="disable(node)" *ngIf="node.enabled"  color="warn"><mat-icon>block</mat-icon></button>
-        <button mat-icon-button class="disabled" (click)="disable(node)" *ngIf="!node.enabled"><mat-icon>block</mat-icon></button>
+        <button mat-icon-button class="up" (click)="up(node,$event)"
+          [disabled]="!node.isTop?false:true"><mat-icon>arrow_upward</mat-icon></button>
+        <button mat-icon-button class="down" (click)="down(node,$event)"
+          [disabled]="!node.isBottom?false:true"><mat-icon>arrow_downward</mat-icon></button>
+        <button mat-icon-button class="disabled" (click)="disable(node)" *ngIf="node.enabled"
+          color="warn"><mat-icon>block</mat-icon></button>
+        <button mat-icon-button class="disabled" (click)="disable(node)"
+          *ngIf="!node.enabled"><mat-icon>block</mat-icon></button>
         <button mat-icon-button class="deleted" (click)="delete(node)"><mat-icon>delete</mat-icon></button>
 
       </mat-tree-node>
 
 
       <mat-tree-node *matTreeNodeDef="let node;when: hasChild" matTreeNodePadding (click)="getOffices(node)">
-        <button mat-icon-button 
-                matTreeNodeToggle
-                [attr.aria-label]="'toggle ' + node.name">
+        <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>
@@ -26,15 +28,23 @@
         {{node.name}}
         <button mat-icon-button class="create" (click)="create(node)"><mat-icon>add_circle_outline</mat-icon></button>
         <button mat-icon-button class="edit" (click)="edit(node)"><mat-icon>create</mat-icon></button>
-        <button mat-icon-button class="up" (click)="up(node)" [disabled]="!node.isTop?false:true"><mat-icon>arrow_upward</mat-icon></button>
-        <button mat-icon-button class="down" (click)="down(node)" [disabled]="!node.isBottom?false:true"><mat-icon>arrow_downward</mat-icon></button>
-        <button mat-icon-button class="disabled" (click)="disable(node)" *ngIf="node.enabled" color="warn"><mat-icon>block</mat-icon></button>
-        <button mat-icon-button class="disabled" (click)="disable(node)" *ngIf="!node.enabled"><mat-icon>block</mat-icon></button>
+        <button mat-icon-button class="up" (click)="up(node,$event)"
+          [disabled]="!node.isTop?false:true"><mat-icon>arrow_upward</mat-icon></button>
+        <button mat-icon-button class="down" (click)="down(node,$event)"
+          [disabled]="!node.isBottom?false:true"><mat-icon>arrow_downward</mat-icon></button>
+        <button mat-icon-button class="disabled" (click)="disable(node)" *ngIf="node.enabled"
+          color="warn"><mat-icon>block</mat-icon></button>
+        <button mat-icon-button class="disabled" (click)="disable(node)"
+          *ngIf="!node.enabled"><mat-icon>block</mat-icon></button>
         <button mat-icon-button class="deleted" (click)="delete(node)"><mat-icon>delete</mat-icon></button>
 
       </mat-tree-node>
 
     </mat-tree>
+
+    <div *ngIf="isloading" class="spinner">
+      <mat-spinner diameter="30"></mat-spinner>
+    </div>
   </div>
 
   <!-- 组织机构下属机关 -->
@@ -51,7 +61,8 @@
           <span>{{item.officeName}}</span>
           <span class="btnbox">
             <button mat-icon-button class="edit" (click)="editOffice(item)"><mat-icon>create</mat-icon></button>
-            <button mat-icon-button class="deleted" (click)="deleteOffice(item)"><mat-icon style="color: #f44336;">delete</mat-icon></button>
+            <button mat-icon-button class="deleted" (click)="deleteOffice(item)"><mat-icon
+                style="color: #f44336;">delete</mat-icon></button>
           </span>
         </li>
       </ul>
@@ -60,9 +71,5 @@
       </span>
     </div>
   </div>
-  <div *ngIf="isloading" style="position: absolute;width: 100%;height: 100%;background-color: rgba(125, 125, 125, 0.3);z-index: 999;left: 0;top: 0;text-align: center;">
-    <mat-spinner style="position: fixed;top: 40%;left: 50%;transform: translate(-40%,-50%);"></mat-spinner>
-    <p style="position: fixed;top:53%;left: 53%;transform: translate(-53%,-50%);">努力加载中...</p>
-  </div>
-</div>
 
+</div>

src/app/ui/organization/organization.component.scss

@@ -63,7 +63,6 @@ form{
 }
 .orilist {
   list-style: none;
-
 }
 .orilist:hover {
   cursor: pointer;
@@ -107,3 +106,16 @@ form{
     }
   }
 }
+
+.spinner {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(125, 125, 125, 0.3);
+  z-index: 999;
+  left: 0;
+  top: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}