[完善]完善重置密码提示框

src/app/system-management/user/user.component.html

@@ -14,7 +14,8 @@
 
     <div class="treeTitle">
       组织机构
-      <div><label nz-checkbox [(ngModel)]="IsContainsChildren" (ngModelChange)="getAllOrganization()">是否包含子节点</label></div>
+      <div><label nz-checkbox [(ngModel)]="IsContainsChildren" (ngModelChange)="getAllOrganization()">是否包含子节点</label>
+      </div>
     </div>
     <div class="treebox">
       <nz-tree [nzSearchValue]="searchValue" #nzTreeComponent [nzData]="nodes" [nzExpandedKeys]="defaultExpandedKeys"
@@ -99,9 +100,18 @@
             <td class="operation">
               <a (click)="editUser(data)">编辑</a>
               <a (click)="resetPassword(data)">重置密码</a>
-              <!-- <a (click)="audit(data,true)"
-                *ngIf="data.auditStatus == 0 || data.auditStatus == 3 || data.auditStatus == 4 || data.auditStatus == 5">提交审核</a>
-              <a (click)="audit(data,false)" *ngIf="data.auditStatus == 1">撤销审核</a> -->
+              <ng-template #newPassword let-fruit="data">
+                <div class="resetPasswordContent">
+                  <div class="titlebox">
+                    <i nz-icon [nzType]="'check-circle'" [nzTheme]="'twotone'" [nzTwotoneColor]="'#52c41a'"></i>
+                    <span class="title">用户{{fruit.userName}}的密码重置成功</span>
+                  </div>
+                  <div class="message">
+                    当前密码为: {{fruit.newPassword}}
+                    <i (click)="copy()" nz-icon nzType="copy" nzTheme="outline"></i>
+                  </div>
+                </div>
+              </ng-template>
               <a *ngIf="!data.isActive" class="greenColor2" (click)="cancel(data,true)">启用</a>
               <a *ngIf="data.isActive" class="redColor" (click)="cancel(data,false)">停用</a>
               <a class="redColor" (click)="delete(data)">注销</a>

src/app/system-management/user/user.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, TemplateRef, ViewContainerRef } from '@angular/core';
+import { Component, OnInit, TemplateRef, ViewChild, ViewContainerRef } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { NzFormatEmitEvent, NzTreeComponent, NzTreeNodeOptions } from 'ng-zorro-antd/tree';
 import { NzModalService } from 'ng-zorro-antd/modal';
@@ -8,14 +8,18 @@ import { HttpClient } from '@angular/common/http';
 import { EdituserComponent } from './edituser/edituser.component';
 import { TreeService } from 'src/app/service/tree.service';
 import { NzNotificationService } from 'ng-zorro-antd/notification';
+
 @Component({
   selector: 'app-user',
   templateUrl: './user.component.html',
   styleUrls: ['./user.component.scss']
 })
 export class UserComponent implements OnInit {
+
+  @ViewChild('newPassword', { static: false }) newPasswordtemplate?: TemplateRef<{}>;
+
   validateForm!: FormGroup;
-  constructor(private fb: FormBuilder, private modal: NzModalService, private viewContainerRef: ViewContainerRef, private message: NzMessageService, private http: HttpClient, private toTree: TreeService, private notification: NzNotificationService) { }
+  constructor(private fb: FormBuilder, private modal: NzModalService, private viewContainerRef: ViewContainerRef, private message: NzMessageService, private http: HttpClient, private toTree: TreeService, private notification: NzNotificationService, private notificationService: NzNotificationService) { }
 
   level
   getAllUrl
@@ -213,7 +217,7 @@ export class UserComponent implements OnInit {
             }
             this.http.post(this.addUrl, body).subscribe((data: any) => {
               resolve(data)
-              this.message.create('success', '创建成功！');
+              this.message.create('success', '创建成功!');
               this.SkipCount = 0
               this.getAllUsers()
               // console.log('创建成功', data)
@@ -230,7 +234,7 @@ export class UserComponent implements OnInit {
             })
           })
         } else {
-          this.message.create('warning', '请填写完整！');
+          this.message.create('warning', '请填写完整!');
           return false
         }
       }
@@ -263,6 +267,7 @@ export class UserComponent implements OnInit {
   }
 
   //重置密码
+  newPassword: string
   resetPassword(item) {
     // console.log(item)
     this.modal.confirm({
@@ -274,13 +279,13 @@ export class UserComponent implements OnInit {
           userId: item.id
         }
         this.http.post('/api/services/app/User/ResetPassword', body).subscribe((data: any) => {
-          this.message.create('success', '重置成功！');
-          console.log(data)
-          this.notification.blank(
-            '用户' + item.userName + '的密码重置成功',
-            '当前密码为:' + data.result.newPassword,
-            { nzDuration: 0, nzPlacement: 'top', nzClass: 'resetPassword' }
-          );
+          // this.message.create('success', '重置成功!');
+          this.newPassword = data.result.newPassword
+          let obj = {
+            userName: item.userName,
+            newPassword: data.result.newPassword
+          }
+          this.openNewPassword(obj)
         })
       },
       nzCancelText: '取消',
@@ -290,6 +295,16 @@ export class UserComponent implements OnInit {
     });
   }
 
+  openNewPassword(data) {
+    this.notificationService.template(this.newPasswordtemplate, { nzData: data, nzDuration: 0, nzPlacement: 'top', nzClass: 'resetPassword' });
+  }
+  copy() {
+    navigator.clipboard.writeText(this.newPassword).then(() => {
+      this.message.create('success', '复制成功!');
+    }, () => {
+      this.message.create('success', '复制失败!');
+    });
+  }
 
 
 
@@ -347,7 +362,7 @@ export class UserComponent implements OnInit {
             Id: item.id
           }
         }).subscribe(data => {
-          this.message.create('success', '注销成功！');
+          this.message.create('success', '注销成功!');
           this.getAllUsers()
         })
       },

src/theme.less

@@ -786,7 +786,47 @@
 }
 
 .resetPassword {
+  margin-top: 50%;
+
   .ant-notification-close-icon {
     color: #000;
   }
+
+  .resetPasswordContent {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    box-sizing: border-box;
+    padding: 20px 0;
+
+    .titlebox {
+      display: flex;
+      align-items: center;
+
+      span {
+        font-size: 18px;
+        font-weight: 600;
+      }
+
+      i {
+        font-size: 26px;
+        margin-right: 6px;
+      }
+    }
+
+    .message {
+      margin-top: 20px;
+
+      i {
+        cursor: pointer;
+      }
+
+      i:hover {
+        color: #18bb18;
+      }
+    }
+
+  }
 }