updates

沈斌

2017-12-18 9ceeba8e3c31fe7357910c980f99d89e54f01df3

updates

 _mock/installer.service.ts

New file
@@ -0,0 +1,28 @@
const list = [];

for (let i = 0; i < 50; i += 1) {
  list.push({
    key: i,
    disabled: ((i % 5) === 0),
    name: '用户' + (i + 1),
    sex: ['男', '女'][i % 2],
    mobile: 13713713777 + i,
    email: `test_${i + 1}@test.com`,
    weixin: 'test',
    password: 'ISGMyneATSuhkiwz4BURBQ==',
    organization: '组织' + (i + 1),
    nickname:  '昵称' + (i + 1),
    updatedAt: new Date(`2017-07-${Math.floor(i / 2) + 1}`)
  });
}

export function getInstaller(params: any) {
  let ret = [...list];
  if (params.u_name) {
    ret = ret.filter(data => data.name.indexOf(params.u_name) > -1);
  }
  if (params.u_mobile) {
    ret = ret.filter(data => data.mobile.toString().indexOf(params.u_mobile) > -1);
  }
  return ret;
}

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

@@ -4,65 +4,23 @@
    <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 for="no">规则编号</label></div>
          <div nz-form-label><label for="u_name">姓名</label></div>
          <div nz-form-control class="flex-1">
            <nz-input [(ngModel)]="q.no" name="no" [nzSize]="'large'" [nzPlaceHolder]="'请输入'" nzId="no"></nz-input>
            <nz-input [(ngModel)]="q.u_name" name="u_name" [nzSize]="'large'" [nzPlaceHolder]="'请输入'" nzId="u_name"></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 for="status">使用状态</label></div>
          <div nz-form-label><label for="u_mobile">账号</label></div>
          <div nz-form-control class="flex-1">
            <nz-select [(ngModel)]="q.status" name="status" nzId="status" [nzPlaceHolder]="'请选择'" [nzShowSearch]="true" [nzSize]="'large'">
              <nz-option *ngFor="let i of status; let idx = index" [nzLabel]="i.text" [nzValue]="idx"></nz-option>
            </nz-select>
            <nz-input [(ngModel)]="q.u_mobile" name="u_mobile" [nzSize]="'large'" [nzPlaceHolder]="'请输入'" nzId="u_mobile"></nz-input>
          </div>
        </div>
      </div>
      <div *ngIf="expandForm" nz-col [nzSpan]="8" class="mb-md">
        <div nz-form-item class="d-flex">
          <div nz-form-label><label for="callNo">调用次数</label></div>
          <div nz-form-control class="flex-1">
            <nz-input [nzSize]="'large'" nzId="callNo"></nz-input>
          </div>
        </div>
      </div>
      <div *ngIf="expandForm" nz-col [nzSpan]="8" class="mb-md">
        <div nz-form-item class="d-flex">
          <div nz-form-label><label for="updatedAt">更新日期</label></div>
          <div nz-form-control class="flex-1">
            <nz-datepicker [nzSize]="'large'" [nzPlaceHolder]="'请输入更新日期'" nzId="updatedAt" class="d-block"></nz-datepicker>
          </div>
        </div>
      </div>
      <div *ngIf="expandForm" nz-col [nzSpan]="8" class="mb-md">
        <div nz-form-item class="d-flex">
          <div nz-form-label><label for="status2">使用状态</label></div>
          <div nz-form-control class="flex-1">
            <nz-select [nzPlaceHolder]="'请选择'" nzId="status2" [nzShowSearch]="true" [nzSize]="'large'">
              <nz-option *ngFor="let i of status; let idx = index" [nzLabel]="i.text" [nzValue]="idx"></nz-option>
            </nz-select>
          </div>
        </div>
      </div>
      <div *ngIf="expandForm" nz-col [nzSpan]="8" class="mb-md">
        <div nz-form-item class="d-flex">
          <div nz-form-label><label for="status3">使用状态</label></div>
          <div nz-form-control class="flex-1">
            <nz-select [nzPlaceHolder]="'请选择'" nzId="status3" [nzShowSearch]="true" [nzSize]="'large'">
              <nz-option *ngFor="let i of status; let idx = index" [nzLabel]="i.text" [nzValue]="idx"></nz-option>
            </nz-select>
          </div>
        </div>
      </div>
      <div nz-col [nzSpan]="expandForm ? 24 : 8" class="mb-md" [class.text-right]="expandForm">
      <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" (click)="getData()" [nzSize]="'large'" class="mx-sm">重置</button>
        <a (click)="expandForm=!expandForm">
          {{expandForm ? '收起' : '展开'}}
          <i class="anticon" [class.anticon-down]="!expandForm" [class.anticon-up]="expandForm"></i>
        </a>
      </div>
    </div>
  </form>
@@ -85,45 +43,29 @@
  </div>
  <div class="mb-md">
    <nz-alert [nzType]="'info'" [nzShowIcon]="true">
            <span alert-body>
                已选择 <strong class="text-primary">{{selectedRows.length}}</strong> 项&nbsp;&nbsp;
                服务调用总计 <strong>{{totalCallNo}}</strong> 万
                <a *ngIf="totalCallNo > 0" (click)="clear()" class="ml-lg">清空</a>
            </span>
        <span alert-body>
            已选择 <strong class="text-primary">{{selectedRows.length}}</strong> 项&nbsp;&nbsp;
            服务调用总计 <strong>{{totalCallNo}}</strong> 万
            <a *ngIf="totalCallNo > 0" (click)="clear()" class="ml-lg">清空</a>
        </span>
    </nz-alert>
  </div>
  <nz-table #nzTable [nzDataSource]="data" [nzPageSize]="q.ps" [nzLoading]="loading"
            (nzDataChange)="dataChange($event)"
            (nzPageIndexChange)="pageChange($event)">
  <nz-table #nzTable [nzDataSource]="data" [nzPageSize]="q.ps" [nzLoading]="loading" (nzDataChange)="dataChange($event)" (nzPageIndexChange)="pageChange($event)">
    <thead nz-thead>
    <tr>
      <th nz-th [nzCheckbox]="true">
        <label nz-checkbox [(ngModel)]="allChecked" [nzIndeterminate]="indeterminate"
               (ngModelChange)="checkAll($event)"></label>
        <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></th>
      <th nz-th><span>组织</span></th>
      <th nz-th><span>昵称</span></th>
      <th nz-th>
        <span>服务调用次数</span>
        <nz-table-sort [(nzValue)]="sortMap.callNo" (nzValueChange)="sort('callNo',$event)"></nz-table-sort>
      </th>
      <th nz-th>
        <span>状态</span>
        <nz-dropdown [nzTrigger]="'click'">
          <i class="anticon anticon-filter" nz-dropdown></i>
          <ul nz-menu>
            <li nz-menu-item *ngFor="let i of status">
              <label nz-checkbox [(ngModel)]="i.value"><span>{{i.text}}</span></label>
            </li>
          </ul>
          <div nz-table-filter>
            <span nz-table-filter-confirm (click)="getData()">确定</span>
            <span nz-table-filter-clear (click)="reset(status)">重置</span>
          </div>
        </nz-dropdown>
      </th>
      <th nz-th>
        <span>更新时间</span>
        <span>日期</span>
        <nz-table-sort [(nzValue)]="sortMap.updatedAt" (nzValueChange)="sort('updatedAt',$event)"></nz-table-sort>
      </th>
      <th nz-th><span>操作</span></th>
@@ -135,22 +77,25 @@
        <label nz-checkbox [nzDisabled]="i.disabled" [(ngModel)]="i.checked" (ngModelChange)="refreshStatus($event)">
        </label>
      </td>
      <td nz-td>{{i.no}}</td>
      <td nz-td>{{i.description}}</td>
      <td nz-td class="text-center">{{i.callNo}} 万</td>
      <td nz-td><nz-badge [nzStatus]="i.statusType" [nzText]="i.statusText"></nz-badge></td>
      <td nz-td>{{i.name}}</td>
      <td nz-td>{{i.sex}}</td>
      <td nz-td>{{i.mobile}}</td>
      <td nz-td>{{i.email}}</td>
      <td nz-td>{{i.weixin}}</td>
      <td nz-td>{{i.password}}</td>
      <td nz-td>{{i.organization}}</td>
      <td nz-td>{{i.nickname}}</td>
      <td nz-td>{{i.updatedAt | _date}}</td>
      <td nz-td>
        <a (click)="msg.success('配置' + i.no)">配置</a>
        <a (click)="msg.success('编辑：' + i.name)">编辑</a>
        <span nz-table-divider></span>
        <a (click)="msg.success('订阅警报' + i.no)">订阅警报</a>
        <a (click)="msg.success('删除：' + i.name)">删除</a>
      </td>
    </tr>
    </tbody>
  </nz-table>
</nz-card>
<nz-modal [nzVisible]="modalVisible" [nzTitle]="'新建规则'" [nzConfirmLoading]="loading" [nzContent]="modalContent"
          (nzOnCancel)="modalVisible=false" (nzOnOk)="save()">
<nz-modal [nzVisible]="modalVisible" [nzTitle]="'新建规则'" [nzConfirmLoading]="loading" [nzContent]="modalContent" (nzOnCancel)="modalVisible=false" (nzOnOk)="save()">
  <ng-template #modalContent>
    <div nz-form-item class="d-flex">
      <div nz-form-label><label for="no">描述</label></div>

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

@@ -1,6 +1,7 @@
import { Component, OnInit } from '@angular/core';
import { NzMessageService } from 'ng-zorro-antd';
import { getRule, saveRule, removeRule } from '../../../../../_mock/rule.service';
import { getInstaller } from '../../../../../_mock/installer.service';

@Component({
  selector: 'app-installer',
@@ -13,8 +14,8 @@
    pi: 1,
    ps: 10,
    sorter: '',
    status: -1,
    statusList: []
    u_name: '',
    u_mobile: ''
  };
  data: any[] = [];
  loading = false;
@@ -23,16 +24,9 @@
  totalCallNo = 0;
  allChecked = false;
  indeterminate = false;
  status = [
    { text: '关闭', value: false, type: 'default' },
    { text: '运行中', value: false, type: 'processing' },
    { text: '已上线', value: false, type: 'success' },
    { text: '异常', value: false, type: 'error' }
  ];

  sortMap: any = {};
  expandForm = false;
  modalVisible = false;
  description = '';

  constructor(public msg: NzMessageService) {}

@@ -42,13 +36,10 @@

  getData() {
    this.pageChange(1).then(() => {
      this.q.statusList = this.status.map((i, index) => i.value ? index : -1).filter(w => w !== -1);
      if (this.q.status && this.q.status > -1) this.q.statusList.push(this.q.status);
      console.log(this.q);
      this.data = getRule(this.q).map(i => {
        const statusItem = this.status[i.status];
        i.statusText = statusItem.text;
        i.statusType = statusItem.type;
      // this.q.statusList = this.status.map((i, index) => i.value ? index : -1).filter(w => w !== -1);
      // if (this.q.status && this.q.status > -1) this.q.statusList.push(this.q.status);
      // console.log(this.q);
      this.data = getInstaller(this.q).map(i => {
        return i;
      });
    });
@@ -56,14 +47,10 @@

  add() {
    this.modalVisible = true;
    this.description = '';
  }

  save() {
    this.loading = true;
    saveRule(this.description);
    this.getData();
    setTimeout(() => this.modalVisible = false, 500);

  }

  remove() {