update

src/main/webapp/app/netTopology/model/icon/icon.component.html

 <nz-modal [(nzVisible)]="isVisible" nzTitle="{{title}}" (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk()">
-  <form [formGroup]="validateForm"  nz-form>
+  <form  nz-form>
     <nz-form-item>
       <nz-form-label [nzSpan]="7" nzRequired nzFor="group">选择图标</nz-form-label>
       <nz-form-control [nzSpan]="12">
@@ -12,23 +12,16 @@
         </nz-upload>
       </nz-form-control>
     </nz-form-item>
-    <nz-form-item>
-      <nz-form-label [nzSpan]="7" nzRequired nzFor="firstTypeId">选择一级类型</nz-form-label>
-      <nz-form-control [nzSpan]="12">
-        <nz-select  name="firstTypeId" nzPlaceHolder="请选择一级类型" nzAllowClear formControlName="firstTypeId" (ngModelChange)="onChanges($event)">
-          <nz-option *ngFor="let item of options" [nzValue]="item.id" [nzLabel]="item.name"></nz-option>
-        </nz-select>
-        <nz-form-explain *ngIf="validateForm.get('firstTypeId').dirty && validateForm.get('firstTypeId').errors">请选择一级类型</nz-form-explain>
-      </nz-form-control>
-    </nz-form-item>
-    <nz-form-item>
-      <nz-form-label [nzSpan]="7" nzFor="secondTypeId">选择二级类型</nz-form-label>
-      <nz-form-control [nzSpan]="12">
-        <nz-select  name="secondTypeId" nzAllowClear formControlName="secondTypeId" nzPlaceHolder="请选择二级类型">
-          <nz-option *ngFor="let item of childrenList" [nzValue]="item.id" [nzLabel]="item.name"></nz-option>
-        </nz-select>
-        <nz-form-explain *ngIf="validateForm.get('secondTypeId').dirty && validateForm.get('secondTypeId').errors">请选择二级类型</nz-form-explain>
-      </nz-form-control>
-    </nz-form-item>
+
+    <ng-container *ngIf="!iconId">
+      <nz-form-item>
+        <nz-form-label [nzSpan]="7" nzRequired >选择一级类型</nz-form-label>
+        <nz-form-control [nzSpan]="12">
+          <nz-select  name="firstTypeId" nzPlaceHolder="请选择一级类型"  [(ngModel)]="firstTypeId">
+            <nz-option *ngFor="let item of options" [nzValue]="item.id" [nzLabel]="item.name"></nz-option>
+          </nz-select>
+        </nz-form-control>
+      </nz-form-item>
+    </ng-container>
   </form>
 </nz-modal>

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

@@ -14,10 +14,11 @@ export class IconComponent implements OnInit {
 
     isVisible = false;
     fileList: UploadFile[] = [];
-    validateForm: FormGroup;
-    title = '添加图标';
-    options: any;
-    childrenList = [];
+    title;
+    firstTypeId;  //分类ID
+    iconId;   //图标ID
+
+    options;  //一级分类list；
 
     constructor(private topologySer: TopologyService, private message: NzMessageService,
                 private fb: FormBuilder) {
@@ -31,26 +32,20 @@ export class IconComponent implements OnInit {
     }
 
     initForm() {
-        this.validateForm = this.fb.group({
-            firstTypeId: [null, [Validators.required]],
-            secondTypeId: [null],
-            iconType: ['0'],
-            defaultIcon: ['0'],
-            name: [''],
-        });
         this.fileList = [];
     }
 
-    getList() {
+    //一级分类
+    getList(){
         this.topologySer.findTreeWithWeb().subscribe(
-            (res) => {
-                if (res.errCode == 10000) {
+            (res)=>{
+                if(res.errCode == 10000){
                     this.options = res.data;
-                } else {
+                }else{
                     this.message.error(res.errMSg);
                 }
             }
-        );
+        )
     }
 
     beforeUpload = (file: UploadFile): boolean => {
@@ -63,7 +58,14 @@ export class IconComponent implements OnInit {
         return false;
     };
 
-    showModal() {
+    showAddModal(title) {
+        this.title = title;
+        this.isVisible = true;
+    }
+
+    showEditModal(title,id) {
+        this.iconId = id;
+        this.title = title;
         this.isVisible = true;
     }
 
@@ -72,23 +74,27 @@ export class IconComponent implements OnInit {
             this.message.error('请选择图标');
             return false;
         }
-        for (let i in this.validateForm.controls) {
-            this.validateForm.controls[i].markAsDirty();
-            this.validateForm.controls[i].updateValueAndValidity();
+
+        if(this.title == "添加图标"){
+            if (!this.firstTypeId) {
+                this.message.error('请选择一级分类');
+                return false;
+            }else{
+                this.create();
+            }
         }
-        if (this.validateForm.invalid) {
-            return false;
+
+        if(this.title == "更换图标"){
+            this.update();
         }
+    }
+
+    create(){
         const formData = new FormData();
         this.fileList.forEach((file: any) => {
             formData.append('file', file);
         });
-        formData.append('iconType', this.validateForm.value.iconType);
-        formData.append('defaultIcon', this.validateForm.value.defaultIcon);
-        formData.append('firstTypeId', this.validateForm.value.firstTypeId);
-        formData.append('secondTypeId', this.validateForm.value.secondTypeId);
-        formData.append('name', this.validateForm.value.name);
-        console.log(this.validateForm.value);
+        formData.append('firstTypeId', this.firstTypeId);
         this.topologySer.iconUpload(formData).subscribe(
             (res) => {
                 if (res.errCode == 10000) {
@@ -103,22 +109,25 @@ export class IconComponent implements OnInit {
         );
     }
 
-    onChanges(e) {
-        this.childrenList = [];
-        console.log(e);
-        if (!isNaN(e)) {
-            console.log('网站监测');
-            this.validateForm.get('secondTypeId').clearValidators();
-            this.validateForm.value.iconType = '1';
-        } else {
-            this.validateForm.get('secondTypeId').setValidators(Validators.required);
-            console.log('主机资源');
-        }
-        this.options.forEach(res => {
-            if (res.id == e) {
-                this.childrenList = res.childs;
-            }
+    update(){
+        const formData = new FormData();
+        this.fileList.forEach((file: any) => {
+            formData.append('file', file);
         });
+        formData.append('id', this.iconId);
+
+        this.topologySer.updateIcon(formData).subscribe(
+            (res) => {
+                if (res.errCode == 10000) {
+                    this.message.success('添加成功');
+                    this.isVisible = false;
+                    this.initForm();
+                    this.done.emit();
+                } else {
+                    this.message.error(res.errMsg);
+                }
+            }
+        );
     }
 
     handleCancel() {

src/main/webapp/app/netTopology/topology-img/topology-img.component.html

@@ -20,13 +20,6 @@
 </div>
 <div nz-row class="search-form">
   <div nz-col nzSpan="12">
-    <nz-select style="width: 200px;"  nzPlaceHolder="选择类型" (ngModelChange)="getList()">
-      <!--<ng-container *ngFor="let item of groupList;let i = index;">-->
-        <!--<nz-option nzLabel="选择类型"></nz-option>-->
-      <!--</ng-container>-->
-    </nz-select>
-  </div>
-  <div nz-col nzSpan="12" class="text-right">
     <button nz-button (click)="addIcon()" nzType="default"><i class="anticon anticon-plus"></i>添加图标</button>
   </div>
 </div>
@@ -47,10 +40,7 @@
       <img style="width: 40px;" [src]="imgUrl + data.url">
     </td>
     <td class="handle">
-      <span (click)="deleteIcon(data)">删除</span>
-      <ng-container *ngIf="data.defaultIcon == 0">
-        <span (click)="setDefault(data)">设为默认</span>
-      </ng-container>
+      <span (click)="editIcon(data)">更换图标</span>
     </td>
   </tr>
   </tbody>

src/main/webapp/app/netTopology/topology-img/topology-img.component.ts

@@ -23,20 +23,25 @@ export class TopologyImgComponent implements OnInit {
     }
 
     getList() {
-        const data = {};
-        this.topologySer.iconFindAll(data).subscribe(
+        this.topologySer.iconFindAll().subscribe(
             (res) => {
                 if(res.errCode == 10000){
                     this.iconList = res.data;
                 }else{
-                    this.message.create('error',`${res.errMsg}`);
+                    this.message.error(res.errMsg);
                 }
             }
         );
     }
 
-    addIcon(){
-        this.smartIcon.showModal();
+    //添加图标
+    addIcon(item){
+        this.smartIcon.showAddModal("添加图标");
+    }
+
+    //更换图标
+    editIcon(item){
+        this.smartIcon.showEditModal("更换图标",item.id);
     }
 
     //删除图片

src/main/webapp/app/netTopology/topology.service.ts

@@ -40,8 +40,8 @@ export class TopologyService {
     }
 
     //查询所有图标
-    iconFindAll(data): Observable<any> {
-        return this.http.post(SERVER_API_URL + '/icon/findAll' , data);
+    iconFindAll(): Observable<any> {
+        return this.http.get(SERVER_API_URL + '/icon/findAll' );
     }
 
     //添加图标
@@ -49,6 +49,11 @@ export class TopologyService {
         return this.http.post(SERVER_API_URL + '/icon/upload' , data);
     }
 
+    //更换图标
+    updateIcon(data): Observable<any> {
+        return this.http.post(SERVER_API_URL + '/icon/updateIcon' , data);
+    }
+
     //设置默认图标
     iconDefault(params): Observable<any> {
         return this.http.get(SERVER_API_URL + '/icon/default/' + params);