安装用户密码修改

fengxiang

2018-05-10 8815d4c3d666cbc96988087e9c21f9e1a9f64a06

安装用户密码修改

 src/app/routes/dashboard/workplace/workplace.component.ts

@@ -20,7 +20,7 @@
})
export class DashboardWorkplaceComponent implements OnInit, OnDestroy {

    totalDeviceCountList: any[] = [];
    totalDeviceCountList = null;
    totalDeviceCount = '';
    avgDeviceCount = '';
    deviceCountLoading = true;
@@ -174,14 +174,9 @@
                    if (!!rWtihAvg.code && !!rWithToltal&&!!rWithList.code) {
                        this.avgDeviceCount = ToolsService.toThousands(rWtihAvg.data.toString());
                        this.totalDeviceCount = ToolsService.toThousands(rWithToltal.data.toString());
                        rWithList.data.forEach( item =>{
                            this.totalDeviceCountList.push(
                                {
                                    x:item.time,
                                    y:item.count
                                }
                            );
                        });
                        this.totalDeviceCountList = rWithList.data.map(item => {
                            return {x:item.time,y:item.count};
                        })
                        this.operNormalPercent = Math.round(rWithNormal.data/rWithToltal.data*100);
                        this.deviceCountLoading = false;
                        this.operationLoading = false;

 src/app/routes/users/installer/installer.component.html

@@ -96,8 +96,55 @@
          <nz-popconfirm [nzTitle]="'确定要删除该用户吗?'" [nzOkText]="'Yes'" [nzCancelText]="'No'" (nzOnConfirm)="delete(i)" >
            <a nz-popconfirm>删除</a>
          </nz-popconfirm>
          <span nz-table-divider></span>
          <nz-dropdown>
              <a class="ant-dropdown-link" nz-dropdown>
                  更多
                  <i class="anticon anticon-down"></i>
              </a>
              <ul nz-menu>
                  <li nz-menu-item>
                      <a (click)="showResetPwdWindow(i)">修改密码</a>
                  </li>
              </ul>
          </nz-dropdown>
      </td>
    </tr>
    </tbody>
  </nz-table>
</nz-card>
<!-- 修改密码弹窗 -->
<nz-modal [nzVisible]="resetPwdWindowIsVisible" [nzTitle]="'修改密码'" [nzContent]="modalContent" (nzOnCancel)="resetPwdCancel()"
    (nzOnOk)="resetPwdOk()" [nzConfirmLoading]="isResetPwdLoading">
    <ng-template #modalContent>
        <form nz-form [formGroup]="resetPwdForm">
            <div nz-form-item nz-row>
                <div nz-form-label nz-col [nzSm]="6" [nzXs]="24">
                    <label for="name" >账号</label>
                </div>
                <div nz-form-control nz-col [nzSm]="14" [nzXs]="24">
                    <h4 class="h4">{{ getFormControl('name').value }}</h4>
                </div>
            </div>
            <div nz-form-item nz-row>
                <div nz-form-label nz-col [nzSm]="6" [nzXs]="24">
                    <label for="password" nz-form-item-required>密码</label>
                </div>
                <div nz-form-control nz-col [nzSm]="14" [nzXs]="24" nzHasFeedback>
                    <nz-input [nzSize]="'large'" formControlName="password" [nzType]="'password'" [nzId]="'password'" (ngModelChange)="updateConfirmValidator()"></nz-input>
                    <div nz-form-explain *ngIf="getFormControl('password').dirty&&getFormControl('password').hasError('required')">请输入密码!</div>
                </div>
            </div>
            <div nz-form-item nz-row>
                <div nz-form-label nz-col [nzSm]="6" [nzXs]="24">
                    <label for="checkPassword" nz-form-item-required>确认密码</label>
                </div>
                <div nz-form-control nz-col [nzSm]="14" [nzXs]="24" nzHasFeedback>
                    <nz-input [nzSize]="'large'" formControlName="checkPassword" [nzType]="'password'" [nzId]="'checkPassword'"></nz-input>
                    <div nz-form-explain *ngIf="getFormControl('checkPassword').dirty&&getFormControl('checkPassword').hasError('required')">请确认密码!</div>
                    <div nz-form-explain *ngIf="getFormControl('checkPassword').dirty&&getFormControl('checkPassword').hasError('confirm')">两次输入不一致!</div>
                </div>
            </div>
        </form>
    </ng-template>
</nz-modal>

 src/app/routes/users/installer/installer.component.ts

@@ -5,6 +5,8 @@
import {UserInstallerEditComponent} from './edit/edit.component';
import {environment} from 'environments/environment';
import {DateService} from '@business/services/util/date.service';
import { FormGroup, FormBuilder, Validators, FormControl } from '@angular/forms';
import { ResultBean } from '@business/entity/grid';

@Component({
  selector: 'app-installer',
@@ -38,10 +40,18 @@
    public http: HttpClient,
    public dateSrv: DateService,
    public msgSrv: NzMessageService,
    private modalHelper: ModalHelper) {}
    private modalHelper: ModalHelper,
    private fb: FormBuilder
  ) {}

  ngOnInit() {
    this.load();
    // 重置密码表单初始化
    this.resetPwdForm = this.fb.group({
      name    : [ null, [ Validators.email ] ],
      password         : [ null, [ Validators.required ] ],
      checkPassword    : [ null, [ Validators.required, this.confirmationValidator ] ]
      });
  }

  load(reload: boolean = false) {
@@ -130,4 +140,60 @@
      return this.dateSrv.date_format(date, 'YYYY-MM-DD');
    }
  }
  public resetPwdWindowIsVisible = false;
  public isResetPwdLoading = false;
  public resetPwdForm: FormGroup;
  public resetPwdCancel() {
    this.resetPwdWindowIsVisible = false;
}
public resetPwdOk() {
  for (const i in this.resetPwdForm.controls) {
    this.resetPwdForm.controls[ i ].markAsDirty();
  }
  if (this.resetPwdForm.valid) {
     this.isResetPwdLoading = true;
     const data = this.resetPwdForm.value;
     data['name'] = null;
     this.http.post(environment.SERVER_BASH_URL + '/operateUser/operateUser', data).subscribe((res: ResultBean<any>) => {
       if ( res.code === 1 && res.data === 1 ) {
        this.isResetPwdLoading = false;
        this.resetPwdWindowIsVisible = false;
        this.msgSrv.success('密码修改成功！');
       }
    });
  }
}
  /**
   *  显示修改密码弹窗
   * @param account 
   */
  public showResetPwdWindow(install) {
    this.resetPwdWindowIsVisible = true;
    this.resetPwdForm = this.fb.group({
      id               : [ install.id ],
      name      : [ install.name],
      password         : [ null, [ Validators.required ] ],
      checkPassword    : [ null, [ Validators.required, this.confirmationValidator ] ]
    });
  }
  confirmationValidator = (control: FormControl): { [s: string]: boolean } => {
    if (!control.value) {
      return { required: true };
    } else if (control.value !== this.resetPwdForm.controls[ 'password' ].value) {
      return { confirm: true, error: true };
    }
  }
  /**
   * 根据 formControl名字 获取 对象，页面调用
   * @param name y
   */
  public getFormControl(name) {
    return this.resetPwdForm.controls[ name ];
  }
  updateConfirmValidator() {
    /** wait for refresh value */
    setTimeout(_ => {
      this.resetPwdForm.controls[ 'checkPassword' ].updateValueAndValidity();
    });
  }
}