员工管理

src/app/routes/sys-setting/components/staff-management/transpower/transpower.component.html

@@ -0,0 +1,27 @@
+<div class="modal-header">
+  <div class="modal-title">超级管理员转授</div>
+</div>
+<form nz-form #f="ngForm" se-container="1">
+  <se label="转授员工">张三（13411223344）</se>
+  <se style="margin:0">
+    <div class="code">为了账户安全，需超管手机验证（{{ superPhone }}）</div>
+  </se>
+  <se label="验证码">
+    <div class="inputBox">
+      <div nz-row [nzGutter]="8">
+        <div nz-col [nzSpan]="12">
+          <input nz-input name="smsVerifyCode" [(ngModel)]="smsVerifyCode" maxlength="6" placeholder="请输入短信验证码" />
+        </div>
+        <div nz-col [nzSpan]="12">
+          <button nz-button (click)="sendCode()" [disabled]="count > 0">
+            {{ count > 0 ? '请等待' + count + 's' : '发送验证码' }}
+          </button>
+        </div>
+      </div>
+    </div>
+  </se>
+</form>
+<div class="modal-footer">
+  <button nz-button type="button" (click)="close()">取消</button>
+  <button nz-button type="button" (click)="sure()" [disabled]="f.invalid" nzType="primary">确定</button>
+</div>

src/app/routes/sys-setting/components/staff-management/transpower/transpower.component.ts

@@ -0,0 +1,83 @@
+import { ChangeDetectorRef, Component, OnInit, TemplateRef } from '@angular/core';
+import { NzModalRef } from 'ng-zorro-antd/modal';
+import { interval } from 'rxjs';
+import { take } from 'rxjs/operators';
+import { DunHelper } from 'src/app/shared/components/captcha/dun.helper';
+import { EACaptchaService } from 'src/app/shared/services/business/captcha.service';
+
+@Component({
+  selector: 'app-buyer-transpower',
+  templateUrl: './transpower.component.html',
+  styleUrls: ['./transpower.less']
+})
+export class BuyerTranspowerComponent implements OnInit {
+  record: any = {};
+  count = 0;
+  interval$: any;
+  i: any;
+  smsVerifyCode = '';
+  superPhone = '';
+  staffId = 1;
+  staffList: any = [];
+  constructor(
+    private modal: NzModalRef,
+    public captchaService: EACaptchaService,
+    private dunHelper: DunHelper,
+    private cdr: ChangeDetectorRef
+  ) {}
+
+  ngOnInit(): void {
+    this.getPhone();
+  }
+  getPhone() {
+    // this.service.request(this.service.$api_getAppLesseeAdmin).subscribe((res) => {
+    //   console.log(res);
+    //   if (res) {
+    //     this.superPhone = res.telephone;
+    //   }
+    // });
+  }
+  sure() {
+    const params = {
+      appUserId: this.i.appUserId,
+      smsVerifyCode: this.smsVerifyCode
+    };
+    // this.service.request(this.service.$api_shiftResellerAdmin, params).subscribe((res) => {
+    //   if (res) {
+    //     this.service.msgSrv.success('操作成功！');
+    //     this.modal.close(true);
+    //   }
+    // });
+  }
+  close() {
+    this.modal.destroy();
+  }
+  /**
+   * 获取手机验证码
+   */
+  sendCode() {
+    this.captchaService.getAppLesseeAdminSMVerificationCode().subscribe(res => {
+      if (res.success && res.data.code === '1') {
+        this.captchaService.msgSrv.success('发送验证码成功');
+        this.createInterval();
+      } else if (res.data.code === '503046') {
+        this.dunHelper.popUp().subscribe(_ => {
+          this.createInterval();
+          this.dunHelper.destory();
+        });
+      } else {
+        this.captchaService.msgSrv.warning(res.msg);
+      }
+    });
+  }
+
+  private createInterval() {
+    this.count = 59;
+    interval(1000)
+      .pipe(take(60))
+      .subscribe(x => {
+        this.count = 59 - (x + 1);
+        this.cdr.detectChanges();
+      });
+  }
+}

src/app/routes/sys-setting/components/staff-management/transpower/transpower.less

@@ -0,0 +1,41 @@
+.info {
+  width      : 90%;
+  margin     : 0 auto;
+  color      : #333;
+  text-indent: 24px;
+}
+
+.staffBox {
+  display    : flex;
+  align-items: center;
+
+  img {
+    width        : 30px;
+    height       : 30px;
+    overflow     : hidden;
+    border-radius: 50px;
+  }
+
+  dl {
+    margin: 0 0 0 5px;
+
+    dt {
+      font-size  : 14px;
+      line-height: 28px;
+    }
+
+    dd {
+      font-size: 12px;
+    }
+  }
+}
+
+.inputBox {
+  position: relative;
+
+  a {
+    position: absolute;
+    top     : 0;
+    right   : 5px;
+  }
+}