编辑账户

xufenglei

2017-12-22 7a2c61df609a199967a3ea04ebada9f1e37379e8

编辑账户

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

New file
@@ -0,0 +1,69 @@
<div class="modal-header">
    <div class="modal-title">{{account.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)]="account.accountName" name="name" maxlength="30" required [nzDisabled]="account.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)]="account.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)]="account.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)]="account.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)]="account.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)]="account.expireTime" name="expireTime"></nz-datepicker>
            </div>
        </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>
    </div>
</form>

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

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

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

  account: 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 + '/account/account', this.account).subscribe(() => {
      this.subject.next('true');
      this.close();
    });
  }

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

}

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

@@ -1,3 +1,115 @@
<p>
  account works!
</p>
<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 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 
                [nzDataSource]="data" 
                [nzLoading]="http.loading"
                [nzTotal]="total" 
                [(nzPageIndex)]="query.pageIndex"
                [nzPageSize]="query.pageSize" 
                [nzShowTotal]="true"
                (nzPageIndexChange)="load()"
                (nzDataChange)="dataChange($event)">
        <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 account of nzTable.data">
                <td nz-td [nzCheckbox]="true">
                    <label nz-checkbox [(ngModel)]="account.checked" (ngModelChange)="refreshStatus($event)"></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.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)" > 
                            <a nz-popconfirm>删除</a>
                        </nz-popconfirm>
                    </ng-container>
                </td>
            </tr>
        </tbody>
    </nz-table>
</nz-card>

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

@@ -1,25 +1,131 @@
import { Component, OnInit } from '@angular/core';
import { NzMessageService } from 'ng-zorro-antd';
import { ModalHelper } from '@delon/theme';
import { HttpClient } from '@angular/common/http';
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 {AccountEditComponent} from './account-edit/account-edit.component';

@Component({
  selector: 'app-account',
  templateUrl: './account.component.html',
  styles: []
})

export class AccountComponent implements OnInit {

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

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

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

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

  }

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

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

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

  delete(account) {
    this.http.post(environment.SERVER_BASH_URL + '/account/account/id' , account).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 + '/account/accounts/ids', ids).subscribe((res: any) => {
      this.load(true);
    });
  }

  checkAll(value: boolean) {
    this.curRows.forEach(i => {
      i.checked = value;
    });
    this.refreshStatus();
  }

  dataChange(res: any) {
    this.curRows = res;
    this.refreshStatus();
  }

  refreshStatus() {
    const allChecked = this.curRows.every(value => value.checked);
    const allUnChecked = this.curRows.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);
  }

  reset(ls: any[]) {
    for (const item of ls) item.value = false;
    this.load(true);
  }

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

}

 src/app/routes/systems/systems.module.ts

@@ -5,6 +5,7 @@
import { SharedModule } from '@shared/shared.module';

import { AccountComponent } from './account/account.component';
import { AccountEditComponent } from './account/account-edit/account-edit.component';

const routes: Routes = [
  {
@@ -15,7 +16,7 @@
  }
];

const COMPONENTS_NOROUNT = [  ];
const COMPONENTS_NOROUNT = [ AccountEditComponent ];

@NgModule({
  imports: [
@@ -25,7 +26,9 @@
  ],
  declarations: [
    ...COMPONENTS_NOROUNT,
    AccountComponent
    AccountComponent,
    AccountEditComponent

  ],
  entryComponents: COMPONENTS_NOROUNT
})