配置菜单栏

src/main/webapp/app/app.component.ts

 import { Component } from '@angular/core';
 import { Router } from "@angular/router";
+import {LocalStorageService} from 'ngx-webstorage';
 
 @Component({
     selector: 'app-root',
@@ -7,7 +8,7 @@ import { Router } from "@angular/router";
 })
 export class AppComponent {
 
-    constructor(private router: Router){
+    constructor(private router: Router,){
         //火狐拖动图片会打开新tab
         document.body.ondrop =  (event)=> {
             event.preventDefault();

src/main/webapp/app/app.main.module.ts

@@ -115,6 +115,7 @@ import {SignalComponent} from './shared/signal/signal.component';
 import {ServerComponent} from './overAll/modal/server/server.component';
 import {DatabaseComponent} from './overAll/modal/database/database.component';
 import {SwitchComponent} from './overAll/modal/switch/switch.component';
+import {MineComponent} from './mine/mine.component';
 
 @NgModule({
     imports: [
@@ -232,6 +233,7 @@ import {SwitchComponent} from './overAll/modal/switch/switch.component';
         ServerComponent,
         DatabaseComponent,
         SwitchComponent,
+        MineComponent,
     ],
     providers:[
         OverAllService,

src/main/webapp/app/app.route.ts

@@ -46,6 +46,7 @@ import {SignalComponent} from './shared/signal/signal.component';
 import {DatabaseComponent} from './overAll/modal/database/database.component';
 import {ServerComponent} from './overAll/modal/server/server.component';
 import {SwitchComponent} from './overAll/modal/switch/switch.component';
+import {MineComponent} from './mine/mine.component';
 
 export const route: Routes = [
     {path: '', redirectTo: 'app/main/home', pathMatch: 'prefix'},  //空路由定向
@@ -99,6 +100,7 @@ export const route: Routes = [
                     {path: 'database', component: DatabaseComponent, data: {breadcrumb: '数据库'},},
                     {path: 'server', component: ServerComponent, data: {breadcrumb: '服务器'},},
                     {path: 'switch', component: SwitchComponent, data: {breadcrumb: '交换机'},},
+                    {path: 'mine', component: MineComponent, data: {breadcrumb: '菜单栏'},},
                 ]
             },
         ]

src/main/webapp/app/mine/mine.component.html

+<div nz-row class="breadcrumbs">
+    <div nz-col nzSpan="16">
+        <nz-breadcrumb class="padding-8-0">
+            <nz-breadcrumb-item>
+                首页
+            </nz-breadcrumb-item>
+            <nz-breadcrumb-item>
+                <a>菜单栏编辑</a>
+            </nz-breadcrumb-item>
+        </nz-breadcrumb>
+    </div>
+    <div nz-col nzSpan="8" class="text-right">
+        <button (click)="ngOnInit()" nz-button nzType="primary"><i class="anticon anticon-sync"></i></button>
+        <smart-full-screen></smart-full-screen>
+    </div>
+</div>
+
+<div nz-row class="search-form">
+    <div nz-col nzSpan="16">
+        <button (click)="add()" nz-button nzType="default">新增菜单栏</button>
+    </div>
+    <div nz-col nzSpan="8" class="text-right">
+    </div>
+</div>
+<nz-table #basicTable [nzData]="dataSet" [nzFrontPagination]="true">
+    <thead>
+    <tr>
+        <th>id</th>
+        <th>名称</th>
+        <th>父级ID</th>
+        <th>code</th>
+        <th>路径URL</th>
+        <th>图标</th>
+        <th>排序</th>
+        <th nzWidth="10%" class="text-center">操作</th>
+    </tr>
+    </thead>
+    <tbody>
+    <tr *ngFor="let data of basicTable.data">
+        <td>
+            {{data.id}}
+        </td>
+        <td>
+            <ng-container *ngIf="!editCache[data.key].edit">
+                {{data.name}}
+            </ng-container>
+            <ng-container *ngIf="editCache[data.key].edit">
+                <input type="text" nz-input [(ngModel)]="editCache[data.key].data.name">
+            </ng-container>
+        </td>
+        <td>
+            <ng-container *ngIf="!editCache[data.key].edit">
+                {{data.parentId}}
+            </ng-container>
+            <ng-container *ngIf="editCache[data.key].edit">
+                <input type="text" nz-input [(ngModel)]="editCache[data.key].data.parentId">
+            </ng-container>
+        </td>
+        <td>
+            <ng-container *ngIf="!editCache[data.key].edit">
+                {{data.code}}
+            </ng-container>
+            <ng-container *ngIf="editCache[data.key].edit">
+                <input type="text" nz-input [(ngModel)]="editCache[data.key].data.code">
+            </ng-container>
+        </td>
+        <td>
+            <ng-container *ngIf="!editCache[data.key].edit">
+                {{data.url}}
+            </ng-container>
+            <ng-container *ngIf="editCache[data.key].edit">
+                <input type="text" nz-input [(ngModel)]="editCache[data.key].data.url">
+            </ng-container>
+        </td>
+        <td>
+            <ng-container *ngIf="!editCache[data.key].edit">
+                {{data.imageUrl}}
+            </ng-container>
+            <ng-container *ngIf="editCache[data.key].edit">
+                <input type="text" nz-input [(ngModel)]="editCache[data.key].data.imageUrl">
+            </ng-container>
+        </td>
+        <td>
+            <ng-container *ngIf="!editCache[data.key].edit">
+                {{data.showOrder}}
+            </ng-container>
+            <ng-container *ngIf="editCache[data.key].edit">
+                <input type="text" nz-input [(ngModel)]="editCache[data.key].data.showOrder">
+            </ng-container>
+        </td>
+        <td class="handle main-color">
+            <ng-container *ngIf="!editCache[data.key].edit">
+                <a (click)="startEdit(data.key)">编辑</a>
+                <nz-popconfirm [nzTitle]="'确定删除？'" (nzOnConfirm)="deleteItem(data.id)">
+                    <a nz-popconfirm>删除</a>
+                </nz-popconfirm>
+            </ng-container>
+            <ng-container *ngIf="editCache[data.key].edit">
+                <a (click)="saveEdit(data.key)">保存</a>
+                <nz-popconfirm [nzTitle]="'确定取消？'" (nzOnConfirm)="cancelEdit(data.key)">
+                    <a nz-popconfirm>取消</a>
+                </nz-popconfirm>
+            </ng-container>
+        </td>
+    </tr>
+    </tbody>
+</nz-table>

src/main/webapp/app/mine/mine.component.ts

+import {Component, OnInit} from '@angular/core';
+import {SystemService} from '../system/system.service';
+import {LocalStorageService} from 'ngx-webstorage';
+import {NzMessageService} from 'ng-zorro-antd';
+
+@Component({
+    selector: 'smart-mine',
+    templateUrl: './mine.component.html',
+    styles: []
+})
+export class MineComponent implements OnInit {
+
+    editCache = {};
+    dataSet = [];
+
+    constructor(private systemSer: SystemService, private localStorage: LocalStorageService,
+                private message: NzMessageService) {
+    }
+
+    ngOnInit() {
+        this.getList();
+    }
+
+    getList() {
+        this.systemSer.getMenuBySeparation().subscribe(
+            (res) => {
+                if (res.errCode == 10000) {
+                    this.dataSet = res.data;
+                    this.updateEditCache(null);
+                }
+            }
+        );
+    }
+
+    updateEditCache(num: number): void {
+        for (let i = 0; i < this.dataSet.length; i++) {
+            this.dataSet[i].key = i.toString();
+        }
+        this.dataSet.forEach((item, index) => {
+            item.key = index;
+            if (!this.editCache[item.key]) {
+                this.editCache[item.key] = {
+                    edit: false,
+                    data: item
+                };
+            }
+            if (item.key == num) {
+                this.editCache[item.key].edit = true;
+            }
+        });
+    }
+
+    add() {
+        const item = {
+            name: '',
+            parentId: '',
+            code: '',
+            url: '',
+            imageUrl: '',
+            showOrder: '',
+        };
+        this.dataSet = [item, ...this.dataSet,];
+        this.updateEditCache(0);
+        console.log(this.dataSet);
+        console.log(this.editCache);
+    }
+
+    startEdit(key: string): void {
+        this.editCache[key].edit = true;
+    }
+
+    cancelEdit(key: string): void {
+        this.editCache[key].edit = false;
+    }
+
+    saveEdit(key: string): void {
+        const index = this.dataSet.findIndex(item => item.key === key);
+        this.dataSet[index] = this.editCache[key].data;
+        this.editCache[key].edit = false;
+        this.systemSer.createMenu(this.dataSet[index]).subscribe(
+            (res) => {
+                this.message.success('保存成功');
+            }
+        );
+    }
+
+    deleteItem(id: string) {
+        this.systemSer.deleteMenu(id).subscribe(
+            (res) => {
+                this.message.success('删除成功');
+                this.getList();
+            }
+        );
+    }
+
+}

src/main/webapp/app/system/power/power.component.ts

@@ -19,6 +19,7 @@ export class PowerComponent implements OnInit {
     isVisible = false;
 
     roleId;  //角色id
+    isAdmin;  //是否管理员
 
     constructor(private systemSer: SystemService,private message:NzMessageService,
                 private modalSer:NzModalService) {
@@ -26,6 +27,11 @@ export class PowerComponent implements OnInit {
 
     ngOnInit() {
         this.getRole();
+        this.systemSer.userFind().subscribe(
+            (res)=>{
+                this.isAdmin = res.data.isAdmin;
+            }
+        )
     }
 
     getRole() {
@@ -43,7 +49,7 @@ export class PowerComponent implements OnInit {
 
     //编辑角色
     showEditModal(data){
-        if(data.isEdit == 0){
+        if( this.isAdmin == 0){
             this.message.warning("该角色不可编辑");
             return false;
         }

src/main/webapp/app/system/system.service.ts

@@ -213,6 +213,11 @@ export class SystemService {
         return this.http.get(SERVER_API_URL_COMS + '/separationConfig/closeAuth' );
     }
 
+    //当前角色权限
+    userFind(): Observable<any>{
+        return this.http.get(SERVER_API_URL + '/user/find');
+    }
+
     //菜单列表  --新增角色菜单
     getMenuBySeparation(): Observable<any>{
         return this.http.get(SERVER_API_URL_COMS + '/resources/getMenuBySeparation' );
@@ -223,6 +228,16 @@ export class SystemService {
         return this.http.post(SERVER_API_URL_COMS + '/user/importUser',data);
     }
 
+    //新增or编辑菜单
+    createMenu(data): Observable<any>{
+        return this.http.post(SERVER_API_URL_COMS + '/resources/createMenu',data);
+    }
+
+    //删除菜单
+    deleteMenu(params): Observable<any>{
+        return this.http.get(SERVER_API_URL_COMS + '/resources/deleteMenu/'+params);
+    }
+
     //组织导入
     importOrg(data): Observable<any>{
         return this.http.post(SERVER_API_URL_COMS + '/organization/importOrg',data );