@@ -43,14 +45,60 @@
| {{data.createTime | date: 'yyyy-MM-dd HH:mm'}} |
{{data.updateTime | date: 'yyyy-MM-dd HH:mm'}} |
- 修改
+ 修改
- 分配菜单
+ 分配菜单
- 删除
+ 删除
|
总计 {{ total }} 条
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/app/pages/account/sys-role/sys-role.component.less b/src/app/pages/account/sys-role/sys-role.component.less
index 6b2e550..e4646c3 100644
--- a/src/app/pages/account/sys-role/sys-role.component.less
+++ b/src/app/pages/account/sys-role/sys-role.component.less
@@ -31,3 +31,6 @@ button {
.search-area {
text-align: right;
}
+.submit-btn {
+ width: 150px;
+}
diff --git a/src/app/pages/account/sys-role/sys-role.component.ts b/src/app/pages/account/sys-role/sys-role.component.ts
index 8453070..a835579 100644
--- a/src/app/pages/account/sys-role/sys-role.component.ts
+++ b/src/app/pages/account/sys-role/sys-role.component.ts
@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import {Component, ViewChild} from '@angular/core';
import {NzTableComponent, NzTbodyComponent, NzTheadComponent, NzThMeasureDirective} from "ng-zorro-antd/table";
import {NzDividerComponent} from "ng-zorro-antd/divider";
import {NzFormDirective, NzFormModule} from "ng-zorro-antd/form";
@@ -6,16 +6,21 @@ import {NzColDirective, NzRowDirective} from "ng-zorro-antd/grid";
import {
FormGroup,
NonNullableFormBuilder,
- ReactiveFormsModule,
+ ReactiveFormsModule, Validators,
} from "@angular/forms";
import {NzButtonComponent} from "ng-zorro-antd/button";
import {NzIconDirective} from "ng-zorro-antd/icon";
import {NzInputDirective} from "ng-zorro-antd/input";
import {NzFlexDirective} from "ng-zorro-antd/flex";
-import {DatePipe, NgForOf} from "@angular/common";
+import {DatePipe, NgForOf, NgIf} from "@angular/common";
import {RoleService} from "../../../servies/role/role.service";
-import {NzModalService} from "ng-zorro-antd/modal";
+import {NzModalComponent, NzModalModule, NzModalService} from "ng-zorro-antd/modal";
import {NzMessageService} from "ng-zorro-antd/message";
+import {NzInputNumberComponent} from "ng-zorro-antd/input-number";
+import {NzOptionComponent, NzSelectComponent} from "ng-zorro-antd/select";
+import {DATA} from "../../../data/login/localStorage.namespace";
+import {MenuService} from "../../../servies/menu/menu.service";
+import {NzFormatEmitEvent, NzTreeComponent, NzTreeNodeOptions} from "ng-zorro-antd/tree";
@Component({
selector: 'app-sys-role',
@@ -37,42 +42,79 @@ import {NzMessageService} from "ng-zorro-antd/message";
NgForOf,
DatePipe,
NzThMeasureDirective,
+ NzInputNumberComponent,
+ NzModalComponent,
+ NzOptionComponent,
+ NzSelectComponent,
+ NzModalModule,
+ NgIf,
+ NzTreeComponent,
],
templateUrl: './sys-role.component.html',
styleUrl: './sys-role.component.less'
})
export class SysRoleComponent {
+ // 表单页数
+ tablePageNum = 1;
// 表单数据
tableData: any = {
total: 0,
list: [],
};
-
+ // 搜索表单
searchForm: FormGroup;
+ // 编辑角色弹出框
+ editRoleVisible = false;
+ // 编辑角色表单
+ editRoleForm: FormGroup;
+ // 编辑角色标题
+ editRoleTitle = '';
+ // 分配角色菜单弹出框
+ assignRoleMenuVisible = false;
+
+ // 当前需要分配权限角色
+ currentAssignRoleId: any = null;
+ // 菜单树
+ menuTree: any = [];
+ // 菜单已勾选数据
+ menuTreeCheckedKeys: any = [];
+
+ @ViewChild('nzTreeComponent', { static: false }) nzTreeComponent!: NzTreeComponent;
constructor(private fb: NonNullableFormBuilder,
private roleService: RoleService,
- private message: NzMessageService) {
+ private menuService: MenuService,
+ private message: NzMessageService,
+ private modal: NzModalService) {
// 初始化搜索框
this.searchForm = this.fb.group({
roleName: [''],
});
- this.queryData(1);
+ // 初始化表单
+ this.editRoleForm = this.fb.group({
+ id: [''],
+ roleName: ['', [Validators.required]],
+ roleDesc: [''],
+ });
+
+ this.menuService.queryMenuTree((data: any) => {
+ this.menuTree = data['return_data'];
+ });
+
+ this.queryData();
}
/**
* 获取数据
*/
- queryData(pageNum: number) {
- this.searchForm.value.pageNum = pageNum;
+ queryData() {
+ this.searchForm.value.pageNum = this.tablePageNum;
this.searchForm.value.pageSize = 10;
+ this.searchForm.value.time = new Date().getTime();
this.roleService.queryList(this.searchForm.value, (data: any) => {
- console.log(data);
- this.tableData = data['return_data'];
-
if (data['return_code'] == '000000') {
-
+ this.tableData = data['return_data'];
}
});
}
@@ -81,7 +123,7 @@ export class SysRoleComponent {
* 搜索表单提交
*/
searchFormSubmit(): void {
- this.queryData(1);
+ this.queryData();
}
/**
@@ -91,4 +133,151 @@ export class SysRoleComponent {
this.searchForm.reset();
}
+ /**
+ * 打开编辑角色模态框
+ * @param edit
+ * @param data
+ */
+ showEditRole(edit: boolean, data: any) {
+ if (edit) {
+ this.editRoleTitle = '创建角色';
+ } else {
+ this.editRoleTitle = '修改角色';
+ this.editRoleForm.patchValue(data);
+ }
+ this.editRoleVisible = true;
+ }
+
+ /**
+ * 打开编辑角色模态框
+ * @param edit
+ */
+ submitEditRoleForm() {
+ if (this.editRoleForm.valid) {
+ this.roleService.editRole(this.editRoleForm.value, (data: any) => {
+ if (data['return_code'] == '000000') {
+ // 刷新数据
+ this.queryData();
+
+ this.message.create('success', '操作成功');
+
+ // 关闭弹窗
+ this.closeEditRole();
+ } else {
+ this.message.create('error', data['return_msg']);
+ }
+ });
+ } else {
+ Object.values(this.editRoleForm.controls).forEach(control => {
+ if (control.invalid) {
+ control.markAsDirty();
+ control.updateValueAndValidity({ onlySelf: true });
+ }
+ });
+ }
+ }
+
+ /**
+ * 关闭编辑角色模态框
+ */
+ closeEditRole() {
+ this.editRoleVisible = false;
+ }
+
+ /**
+ * 展示删除数据
+ */
+ showDelData(dataId: number) {
+ this.modal.confirm({
+ nzTitle: '提示',
+ nzContent: '确实删除数据？',
+ nzOnOk: () => this.delData(dataId)
+ });
+ }
+
+ /**
+ * 删除数据
+ */
+ delData(dataId: number) {
+ const param = {
+ id: dataId
+ }
+ this.roleService.delRole(param, (data: any) => {
+ if (data['return_code'] == '000000') {
+ // 刷新数据
+ this.queryData();
+ this.message.create('success', '操作成功');
+ } else {
+ this.message.create('error', data['return_msg']);
+ }
+ });
+ }
+
+ /**
+ * 打开分配角色菜单模态框
+ * @param roleId
+ */
+ showAssignRoleMenu(roleId: number) {
+ this.currentAssignRoleId = roleId;
+ this.menuService.queryRoleMenuArray(roleId, (data: any) => {
+ this.menuTreeCheckedKeys = data['return_data'];
+ console.log(this.menuTreeCheckedKeys);
+ });
+ this.assignRoleMenuVisible = true;
+ }
+
+ /**
+ * 菜单递归
+ * @param data
+ * @param merIds
+ */
+ recursionData(data: any, merIds: any): any {
+ for (let node of data.children) {
+ merIds.push(node.key)
+ if (node.children != null) {
+ this.recursionData(node,merIds);
+ }
+ }
+ }
+
+ /**
+ * 提交分配角色菜单权限
+ */
+ submitAssignRoleMenu() {
+ let menuIds: any = [];
+ // 已勾选的菜单
+ const checkedNodeList = this.nzTreeComponent.getCheckedNodeList();
+ for (let node of checkedNodeList) {
+ menuIds.push(node.origin.key);
+ if (node.origin.children != null) {
+ menuIds.concat(this.recursionData(node.origin, menuIds))
+ }
+ };
+
+ // 半选状态的菜单
+ const halfCheckedNodeList = this.nzTreeComponent.getHalfCheckedNodeList();
+ for (let node of halfCheckedNodeList) {
+ menuIds.push(node.key);
+ }
+
+ const param= {
+ roleId: this.currentAssignRoleId,
+ menuIds: menuIds
+ };
+ this.menuService.assignMenu(param, (data: any) => {
+ if (data['return_code'] == '000000') {
+ this.message.create('success', '操作成功');
+ } else {
+ this.message.create('error', data['return_msg']);
+ }
+ });
+ }
+
+ /**
+ * 关闭分配角色菜单模态框
+ */
+ closeAssignRoleMenu() {
+ this.menuTreeCheckedKeys = [];
+ this.assignRoleMenuVisible = false;
+ }
}
diff --git a/src/app/pages/system/menu/menu.component.html b/src/app/pages/system/menu/menu.component.html
index ad86257..3391b7e 100644
--- a/src/app/pages/system/menu/menu.component.html
+++ b/src/app/pages/system/menu/menu.component.html
@@ -4,7 +4,6 @@
{
+ this.menuService.queryMenuTree((data: any) => {
this.menuTree = data['return_data'];
this.treeView = true;
this.queryMenuData();
diff --git a/src/app/servies/menu/menu.service.ts b/src/app/servies/menu/menu.service.ts
index f95ad01..2aeaf17 100644
--- a/src/app/servies/menu/menu.service.ts
+++ b/src/app/servies/menu/menu.service.ts
@@ -12,7 +12,7 @@ export class MenuService {
constructor(private http: HttpClient) { }
/**
- * 分盘菜单
+ * 分配菜单
* @param params
* @param callBack
*/
@@ -71,16 +71,27 @@ export class MenuService {
}
/**
- * 分配菜单
+ * 查询菜单树
* @param roleId
* @param callBack
*/
- public queryRoleMenuTreeCustomized(roleId: string, callBack:any) {
- let paramStr = '';
- if (roleId != null && roleId != '') {
- paramStr = '?roleId=' + roleId;
+ public queryMenuTree(callBack:any) {
+ this.http.post(environment.baseUrl + 'secMenu/queryMenuTree', null).subscribe(data => {
+ callBack(data);
+ });
+ }
+
+ /**
+ * 查询角色菜单权限数组
+ * @param roleId
+ * @param callBack
+ */
+ public queryRoleMenuArray(roleId: number, callBack:any) {
+ const param = {
+ roleId: roleId,
+ t: new Date().getTime() // 时间戳避免缓存
}
- this.http.post(environment.baseUrl + 'secMenu/queryRoleMenuTreeCustomized'+paramStr, null).subscribe(data => {
+ this.http.get(environment.baseUrl + 'secMenu/queryRoleMenuArray?' + ObjectData.objectByString(param)).subscribe(data => {
callBack(data);
});
}