账户管理

xufenglei

2018-01-04 b8e2e1524169d0008accf22f2e796495ad45a378

账户管理

 src/app/routes/systems/account/account-edit/account-edit.component.html

@@ -6,15 +6,17 @@
        <div nz-form-label nz-col [nzSpan]="4">
            <label nz-form-item-required>账号</label>
        </div>
        <div nz-form-control nz-col [nzSpan]="8" nzHasFeedback [nzValidateStatus]="accountName">
            <input nz-input formControlName="accountName" maxlength="30" required [nzDisabled]="account.id > 0 ? true : false" />
            <div nz-form-explain *ngIf="validateForm.controls.accountName.dirty&&validateForm.controls.accountName.hasError('required')">Please input your username!</div>
        <!-- [nzValidateStatus]="accountName" -->
        <div nz-form-control nz-col [nzSpan]="8" nzHasFeedback >
            <input nz-input formControlName="accountName" maxlength="30" required [nzDisabled]="account.id > 0 ? true : false" (blur)="check(validateForm.controls.accountName.value)"/>
            <div nz-form-explain *ngIf="validateForm.controls.accountName.dirty && validateForm.controls.accountName.hasError('required')">账号不允许为空!</div>
            <div nz-form-explain *ngIf="validateForm.controls.accountName.dirty && validateForm.controls.accountName.hasError('unique')">账号不允许重复!</div>
        </div>
        <div nz-form-label nz-col [nzSpan]="4">
            <label>电话</label>
            <label nz-form-item-required>电话</label>
        </div>
        <div nz-form-control nz-col [nzSpan]="8" >
            <input nz-input maxlength="11" formControlName="mobile"/>
        <div nz-form-control nz-col [nzSpan]="8" nzHasFeedback>
            <input nz-input maxlength="11" formControlName="mobile" required/>
        </div>
    </div>
    <div nz-form-item nz-row class="mb-sm">
@@ -36,33 +38,21 @@
            <label>组织</label>
        </div>
        <div nz-form-control nz-col [nzSpan]="8" >
            <input nz-input formControlName="organizationId" maxlength="20" placeholder="20字以内" />
            <!-- <input nz-input formControlName="organizationId" maxlength="20" placeholder="20字以内" /> -->
            <nz-select style="width: 290px;" nzAllowClear [nzPlaceHolder]="'input search text'" [nzFilter]="true" nzShowSearch 
                formControlName="organizationId" (nzSearchChange)="searchChange($event)" [nzNotFoundContent]="'无法找到'" > 
                <nz-option *ngFor="let option of searchOptions"  [nzLabel]="option['name']" [nzValue]="option['id']"> </nz-option> 
            </nz-select>
        </div>
        <div nz-form-label nz-col [nzSpan]="4">
            <label>过期日期</label>
        </div>
        <div nz-form-control nz-col [nzSpan]="8" >
            <nz-datepicker  formControlName="expireTime" nzShowTime></nz-datepicker>
            <nz-datepicker style="width: 290px;" formControlName="expireTime" nzShowTime></nz-datepicker>
        </div>
    </div>
    <!-- <div nz-form-item nz-row class="mb-sm">
        <div nz-form-label nz-col [nzSpan]="4">
            <label>密码</label>
        </div>
        <div nz-form-control nz-col [nzSpan]="8">
            <input nz-input [(ngModel)]="account.password" name="password" maxlength="30" placeholder="30字以内" required />
        </div>
        <div nz-form-label nz-col [nzSpan]="4">
            <label>创建日期</label>
        </div>
        <div nz-form-control nz-col [nzSpan]="8">
            <div nz-form-control [nzValidateStatus]="createTime">
                <nz-datepicker [(ngModel)]="account.createTime" name="createTime"></nz-datepicker>
            </div>
        </div>
    </div> -->
    <div class="modal-footer">
        <button nz-button type="button" (click)="close()">关闭</button>
        <button nz-button [nzLoading]="http.loading" [nzType]="'primary'">保存</button>
        <button nz-button [nzLoading]="http.loading" [nzType]="'primary'" [disabled]="!validateForm.valid">保存</button>
    </div>
</form>

 src/app/routes/systems/account/account-edit/account-edit.component.ts

@@ -4,7 +4,9 @@
import {HttpClient} from '@angular/common/http';
import {environment} from '../../../../../environments/environment';
import {DateService} from '../../../../core/services/date.service';
import {FormGroup, FormBuilder, Validators} from '@angular/forms';
import {FormGroup, FormBuilder, Validators, FormControl} from '@angular/forms';
import {Jsonp} from '@angular/http';
import {Observable} from 'rxjs';

@Component({
  selector: 'app-account-edit',
@@ -15,6 +17,7 @@

  account: any;
  validateForm: FormGroup;
  searchOptions = [];

  constructor(private modalHelper: ModalHelper,
    private subject: NzModalSubject,
@@ -58,4 +61,18 @@
    this.subject.destroy();
  }

  check(accountName) {
    this.http.get(environment.SERVER_BASH_URL + '/account/' + accountName).subscribe((res: any) => {
      if (res.data > 0) {
        this.validateForm.controls.accountName.setErrors({unique: true});
      }
    });
  }

  searchChange(searchText) {
    const query = encodeURI(searchText);
    this.http.get(environment.SERVER_BASH_URL + '/organization/list/' + query).subscribe((res: any) => {
      this.searchOptions = res.data;
    });
  }
}

 src/app/routes/systems/account/account.component.html

@@ -61,7 +61,7 @@

    <nz-table   #nzTable
                [nzAjaxData]="data"
                [nzLoading]="http.loading"
                [nzLoading]="loading"
                [nzTotal]="total"
                [(nzPageIndex)]="query.pageIndex"
                [nzPageSize]="query.pageSize"
@@ -98,7 +98,7 @@
                <td nz-td>{{account.email}}</td>
                <td nz-td>{{account.weixin}}</td>
                <!-- <td nz-td>{{account.password}}</td> -->
                <td nz-td>{{account.organizationId}}</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>

 src/app/routes/systems/account/account.component.ts

@@ -32,6 +32,7 @@
  allChecked = false;
  indeterminate = false;
  sortMap: string[] = [];
  loading: boolean = true;

  constructor(
    public http: HttpClient,
@@ -52,6 +53,7 @@
      this.total = res.data.total;

      this.refreshStatus();
      this.loading = false;
    });
  }

@@ -59,8 +61,8 @@
    this.load();
  }

  edit(account) {
    if (account == null) {
  edit(account?: any) {
    if (!account) {
      account = {};
    }
    this.modalHelper.static(AccountEditComponent, {account}).subscribe((res: any) => {
@@ -73,14 +75,14 @@
    });
  }

  remove(accountId) {
    const ids = [];
    if (accountId == null) {
  remove(accountId?: number) {
    const ids: number[] = [];
    if (accountId) {
      ids.push(accountId);
    } else {
      this.selectedRows.forEach(i => {
        ids.push(i.id);
      });
    } else {
      ids.push(accountId);
    }
    this.http.post(environment.SERVER_BASH_URL + '/account/ids', ids).subscribe((res: any) => {
      if (res.data > 0) {
@@ -119,7 +121,7 @@
        this.sortMap.push(i);
      }
    });
    if (value != null) {
    if (value) {
      this.sortMap.push(`${field} ${value}`);
    }
    this.query.sorter = this.sortMap.length > 0 ? this.sortMap.join(",") : '';
@@ -127,7 +129,9 @@
  }

  format_date(date) {
    if (date) {
    return this.dateSrv.date_format(date, 'YYYY-MM-DD');
  }
  }

}

 src/app/routes/users/alarm-user/alarm-user-edit/alarm-user-edit.component.html

New file
@@ -0,0 +1,53 @@
<div class="modal-header">
    <div class="modal-title">{{alarmUser.id > 0 ? '编辑' : '添加'}} - 账户</div>
</div>
<form #f="ngForm" (ngSubmit)="save()" nz-form [nzType]="'horizontal'">
    <div nz-form-item nz-row class="mb-sm">
        <div nz-form-label nz-col [nzSpan]="4">
            <label>账号</label>
        </div>
        <div nz-form-control nz-col [nzSpan]="8">
            <input nz-input [(ngModel)]="alarmUser.name" name="name" maxlength="30" required [nzDisabled]="alarmUser.id > 0 ? true : false" />
        </div>
        <div nz-form-label nz-col [nzSpan]="4">
            <label>电话</label>
        </div>
        <div nz-form-control nz-col [nzSpan]="8">
            <input nz-input [(ngModel)]="alarmUser.mobile" name="mobile" maxlength="11" required />
        </div>
    </div>
    <div nz-form-item nz-row class="mb-sm">
        <div nz-form-label nz-col [nzSpan]="4">
            <label>电子邮件</label>
        </div>
        <div nz-form-control nz-col [nzSpan]="8">
            <input nz-input [(ngModel)]="alarmUser.email" name="email" required />
        </div>
        <div nz-form-label nz-col [nzSpan]="4">
            <label>微信号</label>
        </div>
        <div nz-form-control nz-col [nzSpan]="8">
            <input nz-input [(ngModel)]="alarmUser.weixin" name="weixin" />
        </div>
    </div>
    <div nz-form-item nz-row class="mb-sm">
        <div nz-form-label nz-col [nzSpan]="4">
            <label>组织</label>
        </div>
        <div nz-form-control nz-col [nzSpan]="8">
            <input nz-input [(ngModel)]="alarmUser.organizationId" name="organizationId" maxlength="20" placeholder="20字以内" />
        </div>
        <div nz-form-label nz-col [nzSpan]="4">
            <label>过期日期</label>
        </div>
        <div nz-form-control nz-col [nzSpan]="8">
            <div nz-form-control [nzValidateStatus]="expireTime" >
                <nz-datepicker [(ngModel)]="alarmUser.expireTime" name="expireTime"></nz-datepicker>
            </div>
        </div>
    </div>
    <div class="modal-footer">
        <button nz-button type="button" (click)="close()">关闭</button>
        <button nz-button [nzLoading]="http.loading" [nzType]="'primary'">保存</button>
    </div>
</form>

 src/app/routes/users/alarm-user/alarm-user-edit/alarm-user-edit.component.ts

New file
@@ -0,0 +1,37 @@
import { environment } from '../../../../../environments/environment';
import { DateService } from '../../../../core/services/date.service';
import { Component, OnInit } from '@angular/core';
import { ModalHelper } from '@delon/theme';
import { NzModalSubject, NzMessageService } from 'ng-zorro-antd';
import {HttpClient} from '@angular/common/http';

@Component({
  selector: 'app-alarm-user-edit',
  templateUrl: './alarm-user-edit.component.html',
  styles: []
})
export class AlarmUserEditComponent implements OnInit {

  alarmUser: any;

  constructor(private modalHelper: ModalHelper,
    private subject: NzModalSubject,
    public dateSrv: DateService,
    public msgSrv: NzMessageService,
    public http: HttpClient) {}

  ngOnInit() {
  }
  
  save() {
    this.http.post(environment.SERVER_BASH_URL + '/alarmUser/alarmUser', this.alarmUser).subscribe(() => {
      this.subject.next('true');
      this.close();
    });
  }

  close() {
    this.subject.destroy();
  }

}

 src/app/routes/users/alarm-user/alarm-user.component.html

New file
@@ -0,0 +1,114 @@
<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.name" 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 options" [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)="add()" [nzType]="'primary'" [nzSize]="'large'">
            <i class="anticon anticon-plus"></i><span>新建</span>
        </button>
        <ng-container *ngIf="selectedRows.length > 0"> &nbsp;
            <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>

    <nz-table   #nzTable
                [nzAjaxData]="data"
                [nzLoading]="http.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></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 [(nzValue)]="sortMap.updatedAt" (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 alarmUser of nzTable.data">
                <td nz-td [nzCheckbox]="true">
                    <label nz-checkbox [(ngModel)]="alarmUser.checked" (ngModelChange)="refreshStatus($event)" [nzDisabled]="alarmUser.isDelete == '1'? true : false"></label>
                </td>
                <td nz-td>{{alarmUser.name}}</td>
                <td nz-td>{{alarmUser.mobile}}</td>
                <td nz-td>{{alarmUser.email}}</td>
                <td nz-td>{{alarmUser.weixin}}</td>
                <!-- <td nz-td>{{alarmUser.password}}</td> -->
                <td nz-td>{{alarmUser.organizationId}}</td>
                <td nz-td>{{format_date(alarmUser.createTime)}}</td>
                <td nz-td>{{format_date(alarmUser.expireTime)}}</td>
                <td nz-td>
                    <a (click)="edit(alarmUser)">编辑</a>
                    <ng-container *ngIf="alarmUser.isDelete == '0'">
                        <span nz-table-divider></span>
                        <nz-popconfirm  [nzTitle]="'确定要删除该用户吗?'" [nzOkText]="'Yes'" [nzCancelText]="'No'" (nzOnConfirm)="delete(alarmUser)" >
                            <a nz-popconfirm>删除</a>
                        </nz-popconfirm>
                    </ng-container>
                </td>
            </tr>
        </tbody>
    </nz-table>
</nz-card>

 src/app/routes/users/alarm-user/alarm-user.component.ts

New file
@@ -0,0 +1,125 @@
import {Component, OnInit} from '@angular/core';
import {NzMessageService} from 'ng-zorro-antd';
import {ModalHelper} from '@delon/theme';
import {HttpClient} from '@angular/common/http';
import * as moment from 'moment';
import {environment} from '../../../../environments/environment';
import {DateService} from '../../../core/services/date.service';
import { AlarmUserEditComponent } from './alarm-user-edit/alarm-user-edit.component';

@Component({
  selector: 'app-alarm-user',
  templateUrl: './alarm-user.component.html',
  styles: []
})
export class AlarmUserComponent implements OnInit {

  options = [
    {value: '1', label: '是'},
    {value: '0', label: '否'}
  ];

  query: any = {
    pageIndex: 1,
    pageSize: 10,
    isDelete: this.options[1].value
  };
  data: any[] = [];
  total: 0;

  selectedRows: any[] = [];
  allChecked = false;
  indeterminate = false;
  sortMap: any = {};

  constructor(
    public http: HttpClient,
    public dateSrv: DateService,
    public msgSrv: NzMessageService,
    private modalHelper: ModalHelper) {

  }

  load(reload: boolean = false) {
   if (reload) {
      this.query.pageIndex = 1;
    }
    this.http.get(environment.SERVER_BASH_URL + '/alarmUser/list', {params: this.query}).subscribe((res: any) => {
      this.data = res.data.data;
      this.total = res.data.total;

      this.refreshStatus();
    });
  }

  ngOnInit() {
    this.load();
  }

  edit(alarmUser) {
    this.modalHelper.static(AlarmUserEditComponent, {alarmUser}).subscribe(() => {
      this.load(true);
      this.msgSrv.success('账户修改成功！');
    });
  }

  add() {
    const alarmUser = {};
    this.modalHelper.static(AlarmUserEditComponent, {alarmUser}).subscribe(() => {
      this.load(true);
      this.msgSrv.success('账户保存成功！');
    });
  }

  delete(alarmUser) {
    this.http.post(environment.SERVER_BASH_URL + '/alarmUser/alarmUser/id' , alarmUser).subscribe((res: any) => {
      if(res.data > 0){
        this.msgSrv.success('账户删除成功！');
        this.load(true);
      } else {
        this.msgSrv.error(res.message);
      }
    });
  }

  remove() {
    const ids = [];
    this.selectedRows.forEach(i => {
      ids.push(i.id);
    });
    this.http.post(environment.SERVER_BASH_URL + '/alarmUser/alarmUsers/ids', ids).subscribe((res: any) => {
      this.load(true);
    });
  }

  checkAll(value: boolean) {
    this.data.forEach(i => {
      if (i.isDelete == '1') {
        i.checked = false;
      } else {
        i.checked = value;
      }
    });
    this.refreshStatus();
  }

  refreshStatus() {
    const allChecked = this.data.every(value => value.checked);
    const allUnChecked = this.data.every(value => !value.checked);
    this.allChecked = allChecked;
    this.indeterminate = (!allChecked) && (!allUnChecked);
    this.selectedRows = this.data.filter(value => value.checked);
  }

  sort(field: string, value: any) {
    this.sortMap = {};
    this.sortMap[field] = value;
    this.query.sorter = value ? `${field} ${value}` : '';
    this.load(true);
  }

  format_date(date) {
    return this.dateSrv.date_format(date, 'YYYY-MM-DD');
  }

}

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

@@ -82,10 +82,12 @@
      <td nz-td>{{format_date(i.expireTime)}}</td>
      <td nz-td>
        <a (click)="edit(i)">编辑</a>
        <ng-container *ngIf="i.isDelete == '0'">
        <span nz-table-divider></span>
          <nz-popconfirm [nzTitle]="'确定要删除该用户吗?'" [nzOkText]="'Yes'" [nzCancelText]="'No'" (nzOnConfirm)="delete(i)" >
            <a nz-popconfirm>删除</a>
          </nz-popconfirm>
         </ng-container>
      </td>
    </tr>
    </tbody>

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

@@ -109,7 +109,11 @@

  checkAll(value: boolean) {
    this.curRows.forEach(i => {
      if (i.isDelete == '1') {
        i.checked = false;
      } else {
      i.checked = value;
      }
    });
    this.refreshStatus();
  }

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

File was deleted

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

File was deleted

 src/app/routes/users/users.module.ts

@@ -4,20 +4,21 @@
import { RouterModule, Routes } from '@angular/router';
import { SharedModule } from '@shared/shared.module';

import { ReceiverComponent } from './receiver/receiver.component';
import { UserInstallerEditComponent } from './installer/edit/edit.component';
import { AlarmUserComponent } from './alarm-user/alarm-user.component';
import { AlarmUserEditComponent } from './alarm-user/alarm-user-edit/alarm-user-edit.component';

const routes: Routes = [
  {
    path: '',
    children: [
      { path: 'installer', component: InstallerComponent },
      { path: 'receiver', component: ReceiverComponent }
      { path: 'alarm-user', component: AlarmUserComponent }
    ]
  }
];

const COMPONENTS_NOROUNT = [ UserInstallerEditComponent ];
const COMPONENTS_NOROUNT = [ UserInstallerEditComponent,AlarmUserEditComponent ];

@NgModule({
  imports: [
@@ -27,8 +28,9 @@
  ],
  declarations: [
    InstallerComponent,
    ReceiverComponent,
    ...COMPONENTS_NOROUNT
    ...COMPONENTS_NOROUNT,
    AlarmUserComponent,
    AlarmUserEditComponent
  ],
  entryComponents: COMPONENTS_NOROUNT
})

 src/assets/app-data.json

@@ -28,8 +28,8 @@
      "translate": "user_management_install"
    }, {
      "text": "报警用户",
      "link": "/users/receiver",
      "translate": "user_management_receive"
      "link": "/users/alarm-user",
      "translate": "user_management_alarm-user"
    }]
  }, {
    "text": "设备管理",

 src/assets/i18n/zh-CN.json

@@ -2,7 +2,7 @@
    "home": "主页",
    "user_management": "用户管理",
    "user_management_install": "安装用户",
    "user_management_receive": "报警用户",
    "user_management_alarm-user": "报警用户",
    "device_management": "设备管理",
    "device_management_info": "基本信息",
    "device_management_version": "型号配置",