切换院区和切换科室时发送增加load动画效果

src/app/share/hs-prompt-modal/hs-prompt-modal.component.html

@@ -46,3 +46,5 @@
 <!-- 操作成功/失败提示框 -->
 <app-prompt-modal *ngIf="promptModalShow" [content]="promptContent" [success]="ifSuccess" [show]="promptModalShow"
   [info]="promptInfo" [isReLoad]="true"></app-prompt-modal>
+<!-- 遮罩 -->
+<app-mask *ngIf="maskFlag"></app-mask>

src/app/share/hs-prompt-modal/hs-prompt-modal.component.less

@@ -7,7 +7,7 @@
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, .4);
-  z-index: 999;
+  z-index: 99;
 
   .modalBody {
     width: 350px;

src/app/share/hs-prompt-modal/hs-prompt-modal.component.ts

@@ -1,101 +1,116 @@
-import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
-import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
-import { MainService } from '../../services/main.service';
-import { ToolService } from '../../services/tool.service';
-import { Subject } from 'rxjs';
-import { debounceTime } from 'rxjs/operators';
+import { Component, OnInit, Input, Output, EventEmitter } from "@angular/core";
+import {
+  FormBuilder,
+  FormControl,
+  FormGroup,
+  Validators,
+} from "@angular/forms";
+import { MainService } from "../../services/main.service";
+import { ToolService } from "../../services/tool.service";
+import { Subject } from "rxjs";
+import { debounceTime } from "rxjs/operators";
+import { NzMessageService } from "ng-zorro-antd";
 
 @Component({
-  selector: 'app-hs-prompt-modal',
-  templateUrl: './hs-prompt-modal.component.html',
-  styleUrls: ['./hs-prompt-modal.component.less']
+  selector: "app-hs-prompt-modal",
+  templateUrl: "./hs-prompt-modal.component.html",
+  styleUrls: ["./hs-prompt-modal.component.less"],
 })
 export class HsPromptModalComponent implements OnInit {
   // 切换科室，切换弹窗
   // changeShow = true //true显示第一个弹窗，false显示选择科室的弹窗
   validateForm!: FormGroup;
-  dutyDept;//当值科室
-  dutyDepts = [];//当值科室列表
+  dutyDept; //当值科室
+  dutyDepts = []; //当值科室列表
   isLoading = false;
-  currentHospital;//当前院区
-  currentDept = JSON.parse(localStorage.getItem('user')).user.dept.dept;//当前科室
+  currentHospital; //当前院区
+  currentDept = JSON.parse(localStorage.getItem("user")).user.dept.dept; //当前科室
   @Input() show: Boolean;
   @Input() changeShow: Boolean;
   @Input() closeTime: Number;
 
-  @Output() closeModelHs = new EventEmitter<any>();//1.组件暴露一个 EventEmitter 属性，当事件发生时，子组件利用该属性 emits(向上弹射)事件
-  @Output() clearModelHs = new EventEmitter<any>();//1.组件暴露一个 EventEmitter 属性，当事件发生时，子组件利用该属性 emits(向上弹射)事件
+  @Output() closeModelHs = new EventEmitter<any>(); //1.组件暴露一个 EventEmitter 属性，当事件发生时，子组件利用该属性 emits(向上弹射)事件
+  @Output() clearModelHs = new EventEmitter<any>(); //1.组件暴露一个 EventEmitter 属性，当事件发生时，子组件利用该属性 emits(向上弹射)事件
 
-  constructor(private fb: FormBuilder, private mainService: MainService, private tool: ToolService) { }
+  constructor(
+    private fb: FormBuilder,
+    private mainService: MainService,
+    private msg: NzMessageService,
+    private tool: ToolService
+  ) {}
   searchDeptSubject = new Subject();
   ngOnInit() {
-    this.searchDeptSubject.pipe(debounceTime(500)).subscribe(v => {
+    this.searchDeptSubject.pipe(debounceTime(500)).subscribe((v) => {
       this.search(v);
-    })
+    });
     this.currentHospital = this.tool.getCurrentHospital();
     this.validateForm = this.fb.group({
-      dutyDeptFc: [null, [Validators.required]],//当班科室
+      dutyDeptFc: [null, [Validators.required]], //当班科室
     });
-    this.search(false)
+    this.search(false);
   }
   // 关闭弹窗
   hideModal() {
-    this.closeModelHs.emit(JSON.stringify({ show: false, changeShow: true }));//emits(向上弹射)事件
-    // this.changeShow = true
+    this.closeModelHs.emit(JSON.stringify({ show: false, changeShow: true })); //emits(向上弹射)事件
   }
   // 切换科室
   changeModal() {
-    // this.changeShow = false
-    this.clearModelHs.emit(JSON.stringify({ clear: true, changeShow: false }));//emits(向上弹射)事件
+    this.clearModelHs.emit(JSON.stringify({ clear: true, changeShow: false })); //emits(向上弹射)事件
   }
   // 获取当前用户信息
   getCurrentUserNow() {
-    this.mainService.getCurrentUser1().subscribe(data => {
-      if (data['status'] == 200) {
-        let user = JSON.parse(localStorage.getItem('user'))
-        user.user.dept = data['data'].dept
-        localStorage.setItem('user', JSON.stringify(user))
-        this.showPromptModal('切换科室', true, '')
-        this.hideModal()
+    this.mainService.getCurrentUser1().subscribe((data) => {
+      if (data["status"] == 200) {
+        let user = JSON.parse(localStorage.getItem("user"));
+        user.user.dept = data["data"].dept;
+        localStorage.setItem("user", JSON.stringify(user));
+        this.showPromptModal("切换科室", true, "");
+        this.hideModal();
       }
-    })
+    });
   }
   // 确定
+  maskFlag: any = false;
   ok() {
-    let flag = true
+    let flag = true;
     for (const i in this.validateForm.controls) {
       this.validateForm.controls[i].markAsDirty();
       this.validateForm.controls[i].updateValueAndValidity();
-      if (this.validateForm.controls[i].valid === false) {//携带物品非必填
-        flag = false
+      if (this.validateForm.controls[i].valid === false) {
+        //携带物品非必填
+        flag = false;
       }
     }
     if (!flag) {
       return;
     }
     let dataObj = {
-      "user": {
-        "dept": {
-          "id": this.validateForm.controls.dutyDeptFc.value
+      user: {
+        dept: {
+          id: this.validateForm.controls.dutyDeptFc.value,
         },
-        "id": JSON.parse(localStorage.getItem('user')).user.id
-      }
-    }
-
-    this.mainService.coopData('updData', 'user', dataObj).subscribe(data => {
+        id: JSON.parse(localStorage.getItem("user")).user.id,
+      },
+    };
+    this.maskFlag = this.msg.loading("正在加载中..", {
+      nzDuration: 0,
+    }).messageId;
+    this.mainService.coopData("updData", "user", dataObj).subscribe((data) => {
+      this.msg.remove(this.maskFlag);
+      this.maskFlag = false;
       if (data.status == 200) {
-        this.getCurrentUserNow()
+        this.getCurrentUserNow();
       } else {
-        this.showPromptModal('切换科室', false, '')
+        this.showPromptModal("切换科室", false, "");
       }
-    })
+    });
   }
 
   // 展示信息提示框（con:提示信息，success:操作是否成功，promptInfo:操作结果提示信息）
   promptModalShow = false;
-  promptContent = '';
+  promptContent = "";
   ifSuccess = false;
-  promptInfo = '';
+  promptInfo = "";
   showPromptModal(con, success, promptInfo?) {
     this.promptModalShow = false;
     this.promptContent = con;
@@ -111,23 +126,24 @@ export class HsPromptModalComponent implements OnInit {
   }
   // 当值科室搜索
   search(e) {
-    let keywords = ''
+    let keywords = "";
     if (e) {
-      keywords = e
+      keywords = e;
     }
     let dataObj = {
-      "idx": 0,
-      "sum": 20,
-      "department": {
-        "hospital": { id: this.currentHospital.id },
-        "keyWord": keywords
-      }
-    }
-    this.mainService.getFetchDataList('data', 'department', dataObj).subscribe(data => {
-      if (data.status == 200) {
-        this.dutyDepts = data.list
-      }
-    })
+      idx: 0,
+      sum: 20,
+      department: {
+        hospital: { id: this.currentHospital.id },
+        keyWord: keywords,
+      },
+    };
+    this.mainService
+      .getFetchDataList("data", "department", dataObj)
+      .subscribe((data) => {
+        if (data.status == 200) {
+          this.dutyDepts = data.list;
+        }
+      });
   }
 }
-

src/app/views/main/main.component.html

@@ -72,8 +72,6 @@
   </nz-layout>
 </nz-layout>
 
-
-
 <!-- 消息弹框模板 -->
 <ng-template #msgTemplate1 let-msg="data">
   <div class="msgTemBox ant-notification-notice-content">
@@ -92,7 +90,6 @@
   [nzOkLoading]="pwdIsOkLoading">
   <div>
     <label>原始密码:
-      <!-- <input nz-input placeholder="原始密码" [(ngModel)]="upModalData.pwdOld" /> -->
       <nz-input-group [nzSuffix]="suffixTemplate">
         <input maxlength="16" minlength="6" [type]="passwordVisible ? 'text' : 'password'" nz-input placeholder="原始密码"
           [(ngModel)]="upModalData.pwdOld" />
@@ -103,7 +100,6 @@
       </ng-template>
     </label>
     <label>新密码:
-      <!-- <input nz-input placeholder="新密码" [(ngModel)]="upModalData.newPwd" /> -->
       <nz-input-group [nzSuffix]="suffixTemplate">
         <input maxlength="16" minlength="6" [type]="passwordVisible ? 'text' : 'password'" nz-input placeholder="新密码"
           [(ngModel)]="upModalData.newPwd" />
@@ -146,3 +142,5 @@
     </div>
   </div>
 </div>
+<!-- 遮罩 -->
+<app-mask *ngIf="maskFlag"></app-mask>

src/app/views/main/main.component.ts

@@ -385,11 +385,17 @@ export class MainComponent implements OnInit {
     }
   }
   // 切换院区
+  maskFlag: any = false;
   hosFlag1 = false;
   submitFormHand1(id) {
+    this.maskFlag = this.msg.loading("正在加载中..", {
+      nzDuration: 0,
+    }).messageId;
     this.mainService
       .changeHospital({ currentHosId: +id, loginType: "PC" })
       .subscribe((result) => {
+        this.msg.remove(this.maskFlag);
+        this.maskFlag = false;
         if (result.status == 200) {
           localStorage.setItem("user", JSON.stringify(result.user));
           location.reload(true);