From 40951bf70651c38d09a3b1f5eaddde8faa9e8c06 Mon Sep 17 00:00:00 2001 From: fengxiang <110431245@qq.com> Date: Fri, 23 Mar 2018 16:28:52 +0800 Subject: [PATCH] 查看数据bug修复,修改密码功能开发 --- src/app/routes/analysis/query/query.component.ts | 3 src/app/routes/systems/account/account.component.ts | 59 +++++++++ src/app/routes/analysis/query/query.component.html | 2 src/app/routes/systems/account/account.component.html | 275 +++++++++++++++++++++++++++------------------ 4 files changed, 227 insertions(+), 112 deletions(-) diff --git a/src/app/routes/analysis/query/query.component.html b/src/app/routes/analysis/query/query.component.html index a7e390d..9e8b95f 100644 --- a/src/app/routes/analysis/query/query.component.html +++ b/src/app/routes/analysis/query/query.component.html @@ -127,7 +127,7 @@ <div echarts style="margin-top: 12px;" [options]="chartOption" [loading]="chartLoading" class="line-chart" (chartInit)="onChartInit($event)"></div> </div> <div *ngIf="isChartCollapse" style="width:100%; text-align:center;"> - <span style="font-size:18px; font-weight: bold;">{{ !isChartCollapse?'':chartTitle }}</span> + <span style="font-size:18px; font-weight: bold;">{{ _chartTitleTemp }}</span> </div> <a *ngIf="!!echartsIntance" style="position: absolute; right: 0; top: -10px;" class="pl-sm" (click)="toggleChartCollapse()"> ������ diff --git a/src/app/routes/analysis/query/query.component.ts b/src/app/routes/analysis/query/query.component.ts index 3d63222..403f705 100644 --- a/src/app/routes/analysis/query/query.component.ts +++ b/src/app/routes/analysis/query/query.component.ts @@ -550,6 +550,8 @@ public get sensorUnit() { return this.grid.data[this.chartSelectedIndex].sensor.unit; } + // ������������������ ������������ + public _chartTitleTemp: string; public get chartTitle(): string { const names = ['������', '������', '������', '������']; switch ( this.dataCondition.areaRange ) { @@ -573,6 +575,7 @@ public switchSensor(index: number): void { this.chartSelectedIndex = index; this.chartLoading = true; + this._chartTitleTemp = this.chartTitle; setTimeout(() => { const series = [{type: 'line', data: this.grid.data[index].data}]; this.echartsIntance.setOption({ diff --git a/src/app/routes/systems/account/account.component.html b/src/app/routes/systems/account/account.component.html index e66d615..6dd2c18 100644 --- a/src/app/routes/systems/account/account.component.html +++ b/src/app/routes/systems/account/account.component.html @@ -1,116 +1,171 @@ <pro-header [title]="'������������'"></pro-header> <nz-card [nzBordered]="false"> - <form nz-form (ngSubmit)="load(true)" [nzLayout]="'inline'"> - <div nz-row [nzGutter]="24"> - <div nz-col [nzSpan]="8" class="mb-md"> - <div nz-form-item class="d-flex"> - <div nz-form-label> - <label>������</label> - </div> - <div nz-form-control class="flex-1"> - <nz-input [(ngModel)]="query.accountName" name="name" [nzSize]="'large'" [nzPlaceHolder]="'���������������'"></nz-input> - </div> - </div> - </div> - <div nz-col [nzSpan]="8" class="mb-md"> - <div nz-form-item class="d-flex"> - <div nz-form-label> - <label>������</label> - </div> - <div nz-form-control class="flex-1"> - <nz-input [(ngModel)]="query.mobile" name="mobile" [nzSize]="'large'" [nzPlaceHolder]="'���������������'"></nz-input> - </div> - </div> - </div> - <div nz-col [nzSpan]="8" class="mb-md"> - <div nz-form-item class="d-flex"> - <div nz-form-label> - <label>������������</label> - </div> - <div nz-form-control class="flex-1"> - <nz-select [(ngModel)]="query.isDelete" name="isDelete" [nzSize]="'large'"> - <nz-option *ngFor="let option of isDeleteOptions" [nzLabel]="option.label" [nzValue]="option.value" ></nz-option> - </nz-select> - </div> - </div> - </div> - <div nz-col [nzSpan]="8" class="mb-md"> - <button nz-button type="submit" [nzType]="'primary'" - [nzLoading]="loading" [nzSize]="'large'">������</button> - <button nz-button type="reset" [nzSize]="'large'" class="mx-sm">������</button> - </div> - </div> - </form> + <form nz-form (ngSubmit)="load(true)" [nzLayout]="'inline'"> + <div nz-row [nzGutter]="24"> + <div nz-col [nzSpan]="8" class="mb-md"> + <div nz-form-item class="d-flex"> + <div nz-form-label> + <label>������</label> + </div> + <div nz-form-control class="flex-1"> + <nz-input [(ngModel)]="query.accountName" name="name" [nzSize]="'large'" [nzPlaceHolder]="'���������������'"></nz-input> + </div> + </div> + </div> + <div nz-col [nzSpan]="8" class="mb-md"> + <div nz-form-item class="d-flex"> + <div nz-form-label> + <label>������</label> + </div> + <div nz-form-control class="flex-1"> + <nz-input [(ngModel)]="query.mobile" name="mobile" [nzSize]="'large'" [nzPlaceHolder]="'���������������'"></nz-input> + </div> + </div> + </div> + <div nz-col [nzSpan]="8" class="mb-md"> + <div nz-form-item class="d-flex"> + <div nz-form-label> + <label>������������</label> + </div> + <div nz-form-control class="flex-1"> + <nz-select [(ngModel)]="query.isDelete" name="isDelete" [nzSize]="'large'"> + <nz-option *ngFor="let option of isDeleteOptions" [nzLabel]="option.label" [nzValue]="option.value"></nz-option> + </nz-select> + </div> + </div> + </div> + <div nz-col [nzSpan]="8" class="mb-md"> + <button nz-button type="submit" [nzType]="'primary'" [nzLoading]="loading" [nzSize]="'large'">������</button> + <button nz-button type="reset" [nzSize]="'large'" class="mx-sm">������</button> + </div> + </div> + </form> - <div class="mb-md"> - <button nz-button (click)="edit()" [nzType]="'primary'" [nzSize]="'large'"> - <i class="anticon anticon-plus"></i><span>������</span> - </button> - <ng-container *ngIf="selectedRows.length > 0"> - <button nz-button [nzSize]="'large'" (click)="remove()" >������������</button> - </ng-container> - </div> + <div class="mb-md"> + <button nz-button (click)="edit()" [nzType]="'primary'" [nzSize]="'large'"> + <i class="anticon anticon-plus"></i> + <span>������</span> + </button> + <ng-container *ngIf="selectedRows.length > 0"> + <button nz-button [nzSize]="'large'" (click)="remove()">������������</button> + </ng-container> + </div> - <div class="mb-md"> - <nz-alert [nzType]="'info'" [nzShowIcon]="true"> - <span alert-body> - ���������<strong class="text-primary">{{selectedRows.length}}</strong>��� - </span> - </nz-alert> - </div> + <div class="mb-md"> + <nz-alert [nzType]="'info'" [nzShowIcon]="true"> + <span alert-body> + ��������� + <strong class="text-primary">{{selectedRows.length}}</strong>��� + </span> + </nz-alert> + </div> - <nz-table #nzTable - [nzAjaxData]="data" - [nzLoading]="loading" - [nzTotal]="total" - [(nzPageIndex)]="query.pageIndex" - [nzPageSize]="query.pageSize" - [nzShowTotal]="true" - (nzPageIndexChange)="load()"> - <thead nz-thead> - <tr> - <th nz-th [nzCheckbox]="true"> - <label nz-checkbox [(ngModel)]="allChecked" [nzIndeterminate]="indeterminate" (ngModelChange)="checkAll($event)"></label> - </th> - <th nz-th><span>������</span> - <nz-table-sort (nzValueChange)="sort('account_name', $event)"></nz-table-sort> - </th> - <th nz-th><span>������</span></th> - <th nz-th><span>������������</span></th> - <th nz-th><span>���������</span></th> - <!-- <th nz-th><span>������</span></th> --> - <th nz-th><span>������</span></th> - <th nz-th><span>������������</span></th> - <th nz-th> - <span>������������</span> - <nz-table-sort (nzValueChange)="sort('expire_time', $event)"></nz-table-sort> - </th> - <th nz-th><span>������</span></th> - </tr> - </thead> - <tbody nz-tbody> - <tr nz-tbody-tr *ngFor="let account of nzTable.data"> - <td nz-td [nzCheckbox]="true"> - <label nz-checkbox [(ngModel)]="account.checked" (ngModelChange)="refreshStatus($event)" [nzDisabled]="account.isDelete == '1'? true : false"></label> - </td> - <td nz-td>{{account.accountName}}</td> - <td nz-td>{{account.mobile}}</td> - <td nz-td>{{account.email}}</td> - <td nz-td>{{account.weixin}}</td> - <!-- <td nz-td>{{account.password}}</td> --> - <td nz-td>{{account.organization?account.organization.name:account.organizationId}}</td> - <td nz-td>{{format_date(account.createTime)}}</td> - <td nz-td>{{format_date(account.expireTime)}}</td> - <td nz-td> - <a (click)="edit(account)">������</a> - <ng-container *ngIf="account.isDelete == '0'"> - <span nz-table-divider></span> - <nz-popconfirm [nzTitle]="'���������������������������?'" [nzOkText]="'Yes'" [nzCancelText]="'No'" (nzOnConfirm)="delete(account.id)" > - <a nz-popconfirm>������</a> - </nz-popconfirm> - </ng-container> - </td> - </tr> - </tbody> - </nz-table> + <nz-table #nzTable [nzAjaxData]="data" [nzLoading]="loading" [nzTotal]="total" [(nzPageIndex)]="query.pageIndex" [nzPageSize]="query.pageSize" + [nzShowTotal]="true" (nzPageIndexChange)="load()"> + <thead nz-thead> + <tr> + <th nz-th [nzCheckbox]="true"> + <label nz-checkbox [(ngModel)]="allChecked" [nzIndeterminate]="indeterminate" (ngModelChange)="checkAll($event)"></label> + </th> + <th nz-th> + <span>������</span> + <nz-table-sort (nzValueChange)="sort('account_name', $event)"></nz-table-sort> + </th> + <th nz-th> + <span>������</span> + </th> + <th nz-th> + <span>������������</span> + </th> + <th nz-th> + <span>���������</span> + </th> + <!-- <th nz-th><span>������</span></th> --> + <th nz-th> + <span>������</span> + </th> + <th nz-th> + <span>������������</span> + </th> + <th nz-th> + <span>������������</span> + <nz-table-sort (nzValueChange)="sort('expire_time', $event)"></nz-table-sort> + </th> + <th nz-th> + <span>������</span> + </th> + </tr> + </thead> + <tbody nz-tbody> + <tr nz-tbody-tr *ngFor="let account of nzTable.data"> + <td nz-td [nzCheckbox]="true"> + <label nz-checkbox [(ngModel)]="account.checked" (ngModelChange)="refreshStatus($event)" [nzDisabled]="account.isDelete == '1'? true : false"></label> + </td> + <td nz-td>{{account.accountName}}</td> + <td nz-td>{{account.mobile}}</td> + <td nz-td>{{account.email}}</td> + <td nz-td>{{account.weixin}}</td> + <!-- <td nz-td>{{account.Pwd}}</td> --> + <td nz-td>{{account.organization?account.organization.name:account.organizationId}}</td> + <td nz-td>{{format_date(account.createTime)}}</td> + <td nz-td>{{format_date(account.expireTime)}}</td> + <td nz-td> + <a (click)="edit(account)">������</a> + <ng-container *ngIf="account.isDelete == '0'"> + <span nz-table-divider></span> + <nz-popconfirm [nzTitle]="'���������������������������?'" [nzOkText]="'Yes'" [nzCancelText]="'No'" (nzOnConfirm)="delete(account.id)"> + <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(account)">������������</a> + </li> + </ul> + </nz-dropdown> + </ng-container> + </td> + </tr> + </tbody> + </nz-table> </nz-card> +<!-- ������������������ --> +<nz-modal [nzVisible]="resetPwdWindowIsVisible" [nzTitle]="'������������'" [nzContent]="modalContent" (nzOnCancel)="resetPwdCancel($event)" + (nzOnOk)="resetPwdOk($event)" [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="accountName" >������</label> + </div> + <div nz-form-control nz-col [nzSm]="14" [nzXs]="24" nzHasFeedback> + <nz-input [nzSize]="'large'" nzReadonly="true" formControlName="accountName" [nzId]="'accountName'"></nz-input> + </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> diff --git a/src/app/routes/systems/account/account.component.ts b/src/app/routes/systems/account/account.component.ts index 92c5346..8f4f93c 100644 --- a/src/app/routes/systems/account/account.component.ts +++ b/src/app/routes/systems/account/account.component.ts @@ -5,6 +5,8 @@ import {environment} from '../../../../environments/environment'; import { DateService } from '../../../business/services/util/date.service'; import {AccountEditComponent} from './account-edit/account-edit.component'; +import { FormBuilder, Validators, FormControl, FormGroup } from '@angular/forms'; +import { ResultBean } from '@business/entity/grid'; @Component({ selector: 'app-account', templateUrl: './account.component.html', @@ -37,7 +39,8 @@ private confirmServ: NzModalService, public dateSrv: DateService, public msgSrv: NzMessageService, - private modalHelper: ModalHelper + private modalHelper: ModalHelper, + private fb: FormBuilder ) { } @@ -60,6 +63,12 @@ ngOnInit() { this.load(); + // ������������������ + this.resetPwdForm = this.fb.group({ + accountName : [ null, [ Validators.email ] ], + password : [ null, [ Validators.required ] ], + checkPassword : [ null, [ Validators.required, this.confirmationValidator ] ] + }); } edit(account?: any) { @@ -140,5 +149,53 @@ if (date) { return this.dateSrv.date_format(date, 'YYYY-MM-DD'); } + } + public resetPwdWindowIsVisible = false; + public isResetPwdLoading = false; + public resetPwdForm: FormGroup; + public showResetPwdWindow(account) { + this.resetPwdWindowIsVisible = true; + this.resetPwdForm = this.fb.group({ + id : [ account.id ], + accountName : [ account.accountName], + password : [ null, [ Validators.required ] ], + checkPassword : [ null, [ Validators.required, this.confirmationValidator ] ] + }); + } + 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['accountName'] = null; + this.http.post(environment.SERVER_BASH_URL + '/account/account', data).subscribe((res: ResultBean<any>) => { + if ( res.code === 1 && res.data === 1 ) { + this.isResetPwdLoading = false; + this.resetPwdWindowIsVisible = false; + this.msgSrv.success('���������������������'); + } + }); + } + } + 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 }; + } + } + getFormControl(name) { + return this.resetPwdForm.controls[ name ]; + } + updateConfirmValidator() { + /** wait for refresh value */ + setTimeout(_ => { + this.resetPwdForm.controls[ 'checkPassword' ].updateValueAndValidity(); + }); } } -- Gitblit v1.8.0