[修改]修改重置密码弹出框

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

@@ -1,4 +1,16 @@
 <div class="userBox" id="userBox">
+  <div class="resetPasswordContent" *ngIf="isShowNewPassword" cdkDrag>
+    <div class="titlebox">
+      <i (click)="close()" class="close" nz-icon nzType="close" nzTheme="outline"></i>
+      <i nz-icon [nzType]="'check-circle'" [nzTheme]="'twotone'" [nzTwotoneColor]="'#52c41a'"></i>
+      <span class="title">用户{{newPasswordObj.userName}}的密码重置成功</span>
+
+    </div>
+    <div class="message">
+      当前密码为: {{newPasswordObj.newPassword}}
+      <i title="复制密码" (click)="copy()" nz-icon nzType="copy" nzTheme="outline"></i>
+    </div>
+  </div>
   <div class="orbox">
     <div class="topbox2">
       <div class="lefttop">
@@ -100,18 +112,6 @@
             <td class="operation">
               <a (click)="editUser(data)">编辑</a>
               <a (click)="resetPassword(data)">重置密码</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 title="复制密码" (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.scss

@@ -6,18 +6,20 @@
   padding: 20px;
   overflow: hidden;
   display: flex;
-  // flex-direction: column;
+  position: relative;
 
   .treebox {
-  display: flex;
-  flex: 1;
-  overflow: auto;
-  flex-direction: column;
+    display: flex;
+    flex: 1;
+    overflow: auto;
+    flex-direction: column;
   }
-  .check{
+
+  .check {
     width: 100%;
-    float:right;
+    float: right;
   }
+
   .topbox2 {
     width: 100%;
     height: 36px;
@@ -25,31 +27,34 @@
     align-items: center;
     justify-content: space-between;
     margin-top: 20px;
+
     .lefttop {
       span {
         color: #000D21;
         margin-right: 16px;
       }
-  
+
       .yellowspan {
         color: rgb(240, 176, 37);
       }
     }
-  
+
     .righttop {
       height: 36px;
       display: flex;
       margin-right: 10px;
       width: 200px;
+
       button {
         margin-left: 16px;
       }
-  
+
       nz-input-group {
         height: 32px;
       }
     }
   }
+
   .orbox {
     width: 300px;
     // height: 100%;
@@ -58,6 +63,7 @@
     display: flex;
     flex-direction: column;
   }
+
   .treeTitle {
     width: 100%;
     height: 55px;
@@ -71,16 +77,19 @@
     // padding-right: 180px;
     background: rgba(145, 204, 255, 0.2);
     border: 1px solid rgba(145, 204, 255, 0.2);
-    div{
+
+    div {
       flex: 1;
       width: 100px;
       margin-left: 55px;
     }
   }
+
   .nodebox {
     display: flex;
     justify-content: space-between;
   }
+
   tbody {
     tr {
       td:nth-child(1) {
@@ -95,15 +104,17 @@
     }
   }
 }
-.box{
+
+.box {
   flex: 1;
   // overflow: auto;
   padding-top: 20px;
-  overflow-y:auto;
+  overflow-y: auto;
   display: flex;
   flex-direction: column;
   height: 100%;
 }
+
 .topbox {
   width: 100%;
   height: 36px;
@@ -111,7 +122,7 @@
   align-items: center;
   justify-content: space-between;
   margin-bottom: 12px;
- 
+
   .lefttop {
     span:nth-child(1) {
       color: #000D21;
@@ -140,7 +151,7 @@
   flex: 1;
   overflow-y: auto;
   overflow: auto;
- 
+
 }
 
 .pagination {
@@ -161,3 +172,59 @@
   color: #fff;
   text-align: center;
 }
+
+.resetPasswordContent {
+  z-index: 999;
+  width: 380px;
+  height: 138px;
+  position: absolute;
+  left: 30%;
+  top: 30%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  box-sizing: border-box;
+  padding-left: 30px;
+  color: #000;
+  border-radius: 5px;
+  border-radius: 2px;
+  box-shadow: 0 3px 6px -4px rgb(0 0 0 / 12%), 0 6px 16px 0 rgb(0 0 0 / 8%), 0 9px 28px 8px rgb(0 0 0 / 5%);
+  background: #fff;
+
+  .titlebox {
+    display: flex;
+    align-items: center;
+    position: relative;
+
+    span {
+      font-size: 18px;
+      font-weight: 600;
+    }
+
+    i {
+      font-size: 26px;
+      margin-right: 6px;
+    }
+
+    .close {
+      position: absolute;
+      right: 0px;
+      top: -22px;
+      font-size: 16px;
+      cursor: pointer;
+    }
+  }
+
+  .message {
+    margin-top: 20px;
+
+    i {
+      cursor: pointer;
+    }
+
+    i:hover {
+      color: #18bb18;
+    }
+  }
+
+}

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

@@ -219,7 +219,7 @@ export class UserComponent implements OnInit {
               resolve(data)
               this.message.create('success', '创建成功!');
               this.SkipCount = 0
-              this.getAllUsers() 
+              this.getAllUsers()
               this.notification.blank(
                 '用户' + data.result.userName + '创建成功',
                 '当前密码为:' + data.result.newPassword,
@@ -266,7 +266,8 @@ export class UserComponent implements OnInit {
   }
 
   //重置密码
-  newPassword: string
+  isShowNewPassword: boolean
+  newPasswordObj: any
   resetPassword(item) {
     // console.log(item)
     this.modal.confirm({
@@ -278,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', '重置成功!');
-          this.newPassword = data.result.newPassword
+          this.isShowNewPassword = true
           let obj = {
             userName: item.userName,
             newPassword: data.result.newPassword
           }
-          this.openNewPassword(obj)
+          this.newPasswordObj = obj
+          // this.openNewPassword(obj)
         })
       },
       nzCancelText: '取消',
@@ -293,7 +294,9 @@ export class UserComponent implements OnInit {
       }
     });
   }
-
+  close() {
+    this.isShowNewPassword = false
+  }
   openNewPassword(data) {
     this.notificationService.template(this.newPasswordtemplate, { nzData: data, nzDuration: 0, nzPlacement: 'top', nzClass: 'resetPassword' });
   }
@@ -326,7 +329,7 @@ export class UserComponent implements OnInit {
 
 
   copy() {
-    this.handleCopyValue(this.newPassword)
+    this.handleCopyValue(this.newPasswordObj.newPassword)
       .then(() => {
         this.message.create('success', '复制成功!');
       })

src/theme.less

@@ -792,41 +792,5 @@
     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;
-      }
-    }
-
-  }
 }