modal update

src/main/webapp/app/company-modal/company-modal.component.html

-<p>
-  company-modal works!
-</p>

src/main/webapp/app/company-modal/company-modal.component.ts

-import { Component, OnInit } from '@angular/core';
-
-@Component({
-  selector: 'smart-company-modal',
-  templateUrl: './company-modal.component.html',
-  styles: []
-})
-export class CompanyModalComponent implements OnInit {
-
-  constructor() { }
-
-  ngOnInit() {
-  }
-
-}

src/main/webapp/app/netTopology/model/line/line.component.ts

@@ -116,7 +116,7 @@ export class LineComponent implements OnInit {
             type:"in",
             pageNum:this.inPageNum,
             pageCount:this.inPageCount
-        }
+        };
         this.topologySer.findFlowItemByHost(data).subscribe(
             (res)=>{
                 this.totalNum = res.data.totalNum;

src/main/webapp/app/project-manager/modal/company-modal/company-modal.component.html

+<nz-modal [nzWidth]="780" [(nzVisible)]="isVisiable" nzTitle="流量配置" (nzOnCancel)="handleCancel()"
+          (nzOnOk)="handleOk()">
+  <div class="padding-10">
+    <input name="outSearchName" (keyup.enter)="getList()" style="width: 200px;" type="text" nz-input
+           [(ngModel)]="obj.keyword" placeholder="输入名称">
+    <button (click)="getList()" nz-button nzType="default"><i class="anticon anticon-search"
+                                                              style="color: #6097b7"></i>搜索
+    </button>
+  </div>
+  <nz-table #basicTable [nzData]="page.list"
+            [nzFrontPagination]="false" [nzTotal]="page.totalNum" [nzPageIndex]="page.pageNum"
+            [nzPageSize]="page.pageCount"
+            (nzCurrentPageDataChange)="PageDataChange($event)"
+            (nzPageIndexChange)="changePage($event)">
+    <thead>
+    <tr>
+      <th></th>
+      <th>名称</th>
+      <th>主机名</th>
+      <th>键值</th>
+    </tr>
+    </thead>
+    <tbody>
+    <tr *ngFor="let data of basicTable.data">
+      <td nzShowCheckbox [(nzChecked)]="data.checked" (nzCheckedChange)="selectItem(data,$event)"></td>
+      <td>{{data.name}}</td>
+      <td>{{data.hostName}}</td>
+      <td>{{data.key}}</td>
+    </tr>
+    </tbody>
+  </nz-table>
+</nz-modal>

src/main/webapp/app/project-manager/modal/company-modal/company-modal.component.ts

+import {Component, EventEmitter, OnInit, Output} from '@angular/core';
+import {ProjectService} from '../../project.service';
+
+@Component({
+  selector: 'smart-company-modal',
+  templateUrl: './company-modal.component.html',
+  styles: []
+})
+export class CompanyModalComponent implements OnInit {
+
+  @Output() done =  new EventEmitter<any>();
+
+  isVisiable = false;
+  obj = {
+    keyword: ''
+  };
+
+  page = {
+    list: [],
+    isLoading: false,
+    totalNum: 0,
+    pageNum: 1,
+    pageCount: 5,
+  };
+
+  inSelect;
+
+  constructor(private projectSer: ProjectService) {
+  }
+
+  ngOnInit() {
+    this.getList();
+  }
+
+  getList() {
+    this.page.isLoading = true;
+    const obj = {
+      obj: this.obj,
+      pageNum: this.page.pageNum,
+      pageCount: this.page.pageCount
+    };
+    this.projectSer.selectMaintainTeam(obj).subscribe(
+        (res) => {
+          if (res.errCode == 10000) {
+            this.page.list = res.data.data;
+            this.page.totalNum = res.data.totalNum;
+            this.page.isLoading = false;
+          }
+        }
+    );
+  }
+
+  PageDataChange(e) {
+
+  }
+
+  changePage(e) {
+    this.page.pageNum = e;
+    this.getList();
+  }
+
+  selectItem(item, e) {
+    if (e) {
+      const arr = this.page.list.map(data => {
+        return data.itemId;
+      });
+      const old = this.inSelect;
+      if (old) {
+        const index = arr.indexOf(old.itemId);
+        this.page.list[index].checked = false;
+      }
+      this.inSelect = item;
+    } else {
+      this.inSelect = null;
+    }
+  }
+
+  handleOk(){
+    this.isVisiable = false;
+    this.done.emit(this.inSelect);
+  }
+
+  handleCancel(){
+    this.isVisiable = false;
+  }
+
+}

src/main/webapp/app/project-manager/modal/project-modal/project-modal.component.html

+<nz-modal [nzWidth]="780" [(nzVisible)]="isVisiable" nzTitle="流量配置" (nzOnCancel)="handleCancel()"
+          (nzOnOk)="handleOk()">
+  <div class="padding-10">
+    <input name="outSearchName" (keyup.enter)="getList()" style="width: 200px;" type="text" nz-input
+           [(ngModel)]="obj.keyword" placeholder="输入名称">
+    <button (click)="getList()" nz-button nzType="default"><i class="anticon anticon-search"
+                                                              style="color: #6097b7"></i>搜索
+    </button>
+  </div>
+  <nz-table #basicTable [nzData]="page.list"
+            [nzFrontPagination]="false" [nzTotal]="page.totalNum" [nzPageIndex]="page.pageNum"
+            [nzPageSize]="page.pageCount"
+            (nzCurrentPageDataChange)="PageDataChange($event)"
+            (nzPageIndexChange)="changePage($event)">
+    <thead>
+    <tr>
+      <th></th>
+      <th>名称</th>
+      <th>主机名</th>
+      <th>键值</th>
+    </tr>
+    </thead>
+    <tbody>
+    <tr *ngFor="let data of basicTable.data">
+      <td nzShowCheckbox [(nzChecked)]="data.checked" (nzCheckedChange)="selectItem(data,$event)"></td>
+      <td>{{data.name}}</td>
+      <td>{{data.hostName}}</td>
+      <td>{{data.key}}</td>
+    </tr>
+    </tbody>
+  </nz-table>
+</nz-modal>

src/main/webapp/app/project-manager/modal/project-modal/project-modal.component.ts

+import {Component, EventEmitter, OnInit, Output} from '@angular/core';
+import {ProjectService} from '../../project.service';
+
+@Component({
+  selector: 'smart-project-modal',
+  templateUrl: './project-modal.component.html',
+  styles: []
+})
+export class ProjectModalComponent implements OnInit {
+
+  @Output() done =  new EventEmitter<any>();
+
+  isVisiable = false;
+  obj = {
+    keyword: ''
+  };
+
+  page = {
+    list: [],
+    isLoading: false,
+    totalNum: 0,
+    pageNum: 1,
+    pageCount: 5,
+  };
+
+  inSelect;
+
+  constructor(private projectSer: ProjectService) {
+  }
+
+  ngOnInit() {
+    this.getList();
+  }
+
+  getList() {
+    this.page.isLoading = true;
+    const obj = {
+      obj: this.obj,
+      pageNum: this.page.pageNum,
+      pageCount: this.page.pageCount
+    };
+    this.projectSer.selectMaintainTeam(obj).subscribe(
+        (res) => {
+          if (res.errCode == 10000) {
+            this.page.list = res.data.data;
+            this.page.totalNum = res.data.totalNum;
+            this.page.isLoading = false;
+          }
+        }
+    );
+  }
+
+  PageDataChange(e) {
+
+  }
+
+  changePage(e) {
+    this.page.pageNum = e;
+    this.getList();
+  }
+
+  selectItem(item, e) {
+    if (e) {
+      const arr = this.page.list.map(data => {
+        return data.itemId;
+      });
+      const old = this.inSelect;
+      if (old) {
+        const index = arr.indexOf(old.itemId);
+        this.page.list[index].checked = false;
+      }
+      this.inSelect = item;
+    } else {
+      this.inSelect = null;
+    }
+  }
+
+  handleOk(){
+    this.isVisiable = false;
+    this.done.emit(this.inSelect);
+  }
+
+  handleCancel(){
+    this.isVisiable = false;
+  }
+
+}

src/main/webapp/app/project-manager/modal/team-modal/team-modal.component.html

+<nz-modal [nzWidth]="780" [(nzVisible)]="isVisiable" nzTitle="流量配置" (nzOnCancel)="handleCancel()"
+          (nzOnOk)="handleOk()">
+    <div class="padding-10">
+        <input name="outSearchName" (keyup.enter)="getList()" style="width: 200px;" type="text" nz-input
+               [(ngModel)]="obj.keyword" placeholder="输入名称">
+        <button (click)="getList()" nz-button nzType="default"><i class="anticon anticon-search"
+                                                                  style="color: #6097b7"></i>搜索
+        </button>
+    </div>
+    <nz-table #basicTable [nzData]="page.list"
+              [nzFrontPagination]="false" [nzTotal]="page.totalNum" [nzPageIndex]="page.pageNum"
+              [nzPageSize]="page.pageCount"
+              (nzCurrentPageDataChange)="PageDataChange($event)"
+              (nzPageIndexChange)="changePage($event)">
+        <thead>
+        <tr>
+            <th></th>
+            <th>名称</th>
+            <th>主机名</th>
+            <th>键值</th>
+        </tr>
+        </thead>
+        <tbody>
+        <tr *ngFor="let data of basicTable.data">
+            <td nzShowCheckbox [(nzChecked)]="data.checked" (nzCheckedChange)="selectItem(data,$event)"></td>
+            <td>{{data.name}}</td>
+            <td>{{data.hostName}}</td>
+            <td>{{data.key}}</td>
+        </tr>
+        </tbody>
+    </nz-table>
+</nz-modal>

src/main/webapp/app/project-manager/modal/team-modal/team-modal.component.ts

+import {Component, EventEmitter, OnInit, Output} from '@angular/core';
+import {ProjectService} from '../../project.service';
+
+@Component({
+    selector: 'smart-team-modal',
+    templateUrl: './team-modal.component.html',
+    styles: []
+})
+export class TeamModalComponent implements OnInit {
+
+    @Output() done =  new EventEmitter<any>();
+
+    isVisiable = false;
+    obj = {
+        keyword: ''
+    };
+
+    page = {
+        list: [],
+        isLoading: false,
+        totalNum: 0,
+        pageNum: 1,
+        pageCount: 5,
+    };
+
+    inSelect;
+
+    constructor(private projectSer: ProjectService) {
+    }
+
+    ngOnInit() {
+        this.getList();
+    }
+
+    getList() {
+        this.page.isLoading = true;
+        const obj = {
+            obj: this.obj,
+            pageNum: this.page.pageNum,
+            pageCount: this.page.pageCount
+        };
+        this.projectSer.selectMaintainTeam(obj).subscribe(
+            (res) => {
+                if (res.errCode == 10000) {
+                    this.page.list = res.data.data;
+                    this.page.totalNum = res.data.totalNum;
+                    this.page.isLoading = false;
+                }
+            }
+        );
+    }
+
+    PageDataChange(e) {
+
+    }
+
+    changePage(e) {
+        this.page.pageNum = e;
+        this.getList();
+    }
+
+    selectItem(item, e) {
+        if (e) {
+            const arr = this.page.list.map(data => {
+                return data.itemId;
+            });
+            const old = this.inSelect;
+            if (old) {
+                const index = arr.indexOf(old.itemId);
+                this.page.list[index].checked = false;
+            }
+            this.inSelect = item;
+        } else {
+            this.inSelect = null;
+        }
+    }
+
+    handleOk(){
+        this.isVisiable = false;
+        this.done.emit(this.inSelect);
+    }
+
+    handleCancel(){
+        this.isVisiable = false;
+    }
+
+}

src/main/webapp/app/project-modal/project-modal.component.html

-<p>
-  project-modal works!
-</p>

src/main/webapp/app/project-modal/project-modal.component.ts

-import { Component, OnInit } from '@angular/core';
-
-@Component({
-  selector: 'smart-project-modal',
-  templateUrl: './project-modal.component.html',
-  styles: []
-})
-export class ProjectModalComponent implements OnInit {
-
-  constructor() { }
-
-  ngOnInit() {
-  }
-
-}

src/main/webapp/app/team-modal/team-modal.component.html

-<p>
-  team-modal works!
-</p>

src/main/webapp/app/team-modal/team-modal.component.ts

-import { Component, OnInit } from '@angular/core';
-
-@Component({
-  selector: 'smart-team-modal',
-  templateUrl: './team-modal.component.html',
-  styles: []
-})
-export class TeamModalComponent implements OnInit {
-
-  constructor() { }
-
-  ngOnInit() {
-  }
-
-}