shaojiahao
/
ShangHaiYuan-AnXin
2
0
Fork 0
Code Issues 11 Pull Requests Projects Releases Wiki Activity
Browse Source

[完善]内置角色不允许移动

tangshan
邵佳豪 3 years ago
parent
c608e73287
commit
00d86bbb34
1 changed files with 201 additions and 181 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 382
      src/app/ui/role/role.component.ts

382
src/app/ui/role/role.component.ts
Unescape View File

@ -1,11 +1,11 @@
import { Component, OnInit, Inject } from '@angular/core';
import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material/dialog';
import {FormControl} from '@angular/forms';
import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
import { FormControl } from '@angular/forms';
import { HttpClient } from '@angular/common/http';
import { CacheTokenService } from '../../http-interceptors/cache-token.service'
// import format from 'date-fns/format';
import {MatTreeFlatDataSource, MatTreeFlattener} from '@angular/material/tree';
import {FlatTreeControl} from '@angular/cdk/tree';
import { MatTreeFlatDataSource, MatTreeFlattener } from '@angular/material/tree';
import { FlatTreeControl } from '@angular/cdk/tree';
import { TreeService } from '../../http-interceptors/tree.service'
import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar';
@ -25,37 +25,37 @@ export interface roledata {
})
export class RoleComponent implements OnInit {
constructor(private http: HttpClient,public dialog: MatDialog,public createtime:CacheTokenService,private tree:TreeService,public snackBar: MatSnackBar) { }
displayedColumns: string[] = ['name','createtiome', 'edit'];
constructor(private http: HttpClient, public dialog: MatDialog, public createtime: CacheTokenService, private tree: TreeService, public snackBar: MatSnackBar) { }
displayedColumns: string[] = ['name', 'createtiome', 'edit'];
dataSource: any
public compare(property){
return function(a,b){
public compare(property) {
return function (a, b) {
var value1 = a[property];
var value2 = b[property];
return value1 - value2;
}
}
//获取角色列表并且给排头和排尾赋是否为首尾
getlist(){
this.http.get('/api/Roles').subscribe( (data:Array<roledata>)=>{
getlist() {
this.http.get('/api/Roles').subscribe((data: Array<roledata>) => {
this.dataSource = data
this.dataSource[0].isTop = true;
this.dataSource[this.dataSource.length-1].isBottom = true
this.dataSource[this.dataSource.length - 1].isBottom = true
})
}
//初始化视图
ngOnInit() {
ngOnInit() {
this.getlist()
}
//向上按钮
up(node){
up(node) {
let newdate = new Date();
function getDate(date){
function getDate(date) {
//date是传过来的时间戳，注意需为13位，10位需*1000
//也可以不传,获取的就是当前时间
var time = new Date(date);
var year= time.getFullYear() //年
var year = time.getFullYear() //年
var month = ("0" + (time.getMonth() + 1)).slice(-2); //月
var day = ("0" + time.getDate()).slice(-2); //日
var mydate = year + "-" + month + "-" + day;
@ -63,40 +63,50 @@ export class RoleComponent implements OnInit {
}
let time = getDate(newdate)
this.http.put(//把上一节点order换成点击的节点
`/api/Roles/${this.dataSource[node.order -1].id}`,
`/api/Roles/${this.dataSource[node.order - 1].id}`,
{
id:this.dataSource[node.order -1].id,
name: this.dataSource[node.order -1].name,
id: this.dataSource[node.order - 1].id,
name: this.dataSource[node.order - 1].name,
order: node.order,
enabled: true,
creationTime:time,
creationTime: time,
}
).subscribe(data=>{
).subscribe(data => {
this.getlist()
}, err => {
const config = new MatSnackBarConfig();
config.verticalPosition = 'top';
config.duration = 3000
this.snackBar.open(err ? err : '内置角色不允许移动', '确定', config);
})
this.http.put(//把当前节点order换成上一点击的节点
`/api/Roles/${node.id}`,
`/api/Roles/${node.id}`,
{
id:node.id,
id: node.id,
name: node.name,
order: node.order-1,
order: node.order - 1,
enabled: true,
creationTime:time,
creationTime: time,
}
).subscribe(data=>{
).subscribe(data => {
this.getlist()
}, err => {
const config = new MatSnackBarConfig();
config.verticalPosition = 'top';
config.duration = 3000
this.snackBar.open(err ? err : '内置角色不允许移动', '确定', config);
})
}
//向下按钮
down(node){
down(node) {
let newdate = new Date();
function getDate(date){
function getDate(date) {
//date是传过来的时间戳，注意需为13位，10位需*1000
//也可以不传,获取的就是当前时间
var time = new Date(date);
var year= time.getFullYear() //年
var year = time.getFullYear() //年
var month = ("0" + (time.getMonth() + 1)).slice(-2); //月
var day = ("0" + time.getDate()).slice(-2); //日
var mydate = year + "-" + month + "-" + day;
@ -104,78 +114,88 @@ export class RoleComponent implements OnInit {
}
let time = getDate(newdate)
this.http.put(//把下一节点order换成点击的节点
`/api/Roles/${this.dataSource[node.order + 1].id}`,
`/api/Roles/${this.dataSource[node.order + 1].id}`,
{
id:this.dataSource[node.order + 1].id,
id: this.dataSource[node.order + 1].id,
name: this.dataSource[node.order + 1].name,
order: node.order,
enabled: true,
creationTime:time,
creationTime: time,
}
).subscribe(data=>{
).subscribe(data => {
this.getlist()
}, err => {
const config = new MatSnackBarConfig();
config.verticalPosition = 'top';
config.duration = 3000
this.snackBar.open(err ? err : '内置角色不允许移动', '确定', config);
})
this.http.put(//把当前节点order换成下一点击的节点
`/api/Roles/${node.id}`,
`/api/Roles/${node.id}`,
{
id:node.id,
id: node.id,
name: node.name,
order: node.order + 1,
enabled: true,
creationTime:time,
creationTime: time,
}
).subscribe(data=>{
).subscribe(data => {
this.getlist()
}, err => {
const config = new MatSnackBarConfig();
config.verticalPosition = 'top';
config.duration = 3000
this.snackBar.open(err ? err : '内置角色不允许移动', '确定', config);
})
}
//创建按钮并且弹出对话框
createuser(){
createuser() {
const dialogRef = this.dialog.open(CreateRole, {//调用open方法打开对话框并且携带参数过去
width: '600px',
height:'658px',
data: {name: this.createuser.name,data: this.dataSource,length:this.dataSource.length}
height: '658px',
data: { name: this.createuser.name, data: this.dataSource, length: this.dataSource.length }
});
dialogRef.afterClosed().subscribe(
data=>{
data => {
this.getlist()
}
);
}
//删除按钮
deleteduser(roledata){
deleteduser(roledata) {
var isdeleted = confirm("确定要删除此用户吗？")
if(isdeleted){
if (isdeleted) {
//请求删除接口
this.http.delete(`/api/Roles/${roledata.id}`).subscribe( data=>{
this.http.delete(`/api/Roles/${roledata.id}`).subscribe(data => {
this.getlist()
})
}
}
//编辑按钮
allot(roledata){
allot(roledata) {
const dialogRef = this.dialog.open(EditRole, {//调用open方法打开对话框并且携带参数过去
width: '600px',
height:'658px',
data: {id:roledata.id,name:roledata.name,order:roledata.order}//把点击的id传过去
height: '658px',
data: { id: roledata.id, name: roledata.name, order: roledata.order }//把点击的id传过去
});
dialogRef.afterClosed().subscribe(
data=>{
data => {
this.getlist()
}
);
}
//启用或禁用按钮
open(roledata){
open(roledata) {
let newdate = new Date();
function getDate(date){
function getDate(date) {
//date是传过来的时间戳，注意需为13位，10位需*1000
//也可以不传,获取的就是当前时间
var time = new Date(date);
var year= time.getFullYear() //年
var year = time.getFullYear() //年
var month = ("0" + (time.getMonth() + 1)).slice(-2); //月
var day = ("0" + time.getDate()).slice(-2); //日
var mydate = year + "-" + month + "-" + day;
@ -183,21 +203,21 @@ export class RoleComponent implements OnInit {
}
let time = getDate(newdate)
this.http.put(
`/api/Roles/${roledata['id']}`,
`/api/Roles/${roledata['id']}`,
{
id:roledata['id'],
id: roledata['id'],
name: roledata.name,
order: roledata.order,
enabled: !roledata.enabled,
creationTime: time,
}
).subscribe(
data=>{
data => {
this.getlist()
}
)
}
}
@ -217,7 +237,7 @@ export class CreateRole {
expandable: !!node.children && node.children.length > 0,
name: node.name,
level: level,
id:node.id
id: node.id
};
}
treeControl = new FlatTreeControl<any>(
@ -231,21 +251,21 @@ export class CreateRole {
myControl = new FormControl();
//注入MatDialogRef，可以用来关闭对话框
//要访问对话框组件中的数据，必须使用MAT_DIALOG_DATA注入令牌
constructor(private http: HttpClient,public dialogRef: MatDialogRef<CreateRole>,@Inject(MAT_DIALOG_DATA) public data,private tree:TreeService,public snackBar: MatSnackBar) {}
olddata =[]
constructor(private http: HttpClient, public dialogRef: MatDialogRef<CreateRole>, @Inject(MAT_DIALOG_DATA) public data, private tree: TreeService, public snackBar: MatSnackBar) { }
olddata = []
olddata2 = []
xxx = {}
jjj = {}
//用于存放选中的数组
checkedMap = {}
//初始化两棵tree
ngOnInit(){
this.http.get('/api/Permissions').subscribe((data: any[])=>{
this.olddata =data
ngOnInit() {
this.http.get('/api/Permissions').subscribe((data: any[]) => {
this.olddata = data
this.dataSource.data = this.tree.toTree(data);
this.treeControl.expandAll()
this.dataSource.data.forEach(item=>{
if(item.children){
this.dataSource.data.forEach(item => {
if (item.children) {
var childarr = []
item.children.forEach(n => {
childarr.push(n.id)
@ -253,15 +273,15 @@ export class CreateRole {
this.xxx[item.id] = childarr
}
})
})
this.http.get('/api/NavMenus').subscribe((data: any[])=>{
this.olddata2 =data
this.http.get('/api/NavMenus').subscribe((data: any[]) => {
this.olddata2 = data
this.dataSource2.data = this.tree.toTree(data);
this.treeControl.expandAll()
this.dataSource2.data.forEach(item=>{
if(item.children){
this.dataSource2.data.forEach(item => {
if (item.children) {
var childarr = []
item.children.forEach(n => {
childarr.push(n.id)
@ -273,25 +293,25 @@ export class CreateRole {
}
//选中后子节点默认选中
selectedAll(event, node){
this.olddata.forEach(item=>{
if(item.parentId == node.id){
selectedAll(event, node) {
this.olddata.forEach(item => {
if (item.parentId == node.id) {
this.checkedMap[item.id] = event.checked;
}
})
// console.log(this.olddata2,node )
var menus =[] //导航菜单可能有三级 用于存储第二级
var menus = [] //导航菜单可能有三级 用于存储第二级
//选中一级菜单
this.olddata2.forEach(item=>{
if(item.parentId == node.id){
this.olddata2.forEach(item => {
if (item.parentId == node.id) {
this.checkedMap[item.id] = event.checked;
menus.push(item)
}
})
//将二级菜单也选中
menus.forEach(item=>{
if(item.children){
menus.forEach(item => {
if (item.children) {
item.children.forEach(n => {
this.checkedMap[n.id] = event.checked;
});
@ -300,37 +320,37 @@ export class CreateRole {
}
//数据权限tree的全选功能
leftTreeAll(event,form){
leftTreeAll(event, form) {
const values = form.value;
for (let key in values) {
if(key.indexOf("second")){
if (key.indexOf("second")) {
this.checkedMap[key.split('.')[1]] = event.checked;
}
}
}
//菜单权限tree的全选功能
rightTreeAll(event,form){
//菜单权限tree的全选功能
rightTreeAll(event, form) {
const values = form.value;
for (let key in values) {
if(key.indexOf("first")){
if (key.indexOf("first")) {
this.checkedMap[key.split('.')[1]] = event.checked;
}
}
}
hasChild = (_: number, node: any) => node.expandable;
onNoClick(): void {
this.dialogRef.close();
}
//提交
onSubmit(value){
onSubmit(value) {
let newdate = new Date();
function getDate(date){
function getDate(date) {
//date是传过来的时间戳，注意需为13位，10位需*1000
//也可以不传,获取的就是当前时间
var time = new Date(date);
var year= time.getFullYear() //年
var year = time.getFullYear() //年
var month = ("0" + (time.getMonth() + 1)).slice(-2); //月
var day = ("0" + time.getDate()).slice(-2); //日
var mydate = year + "-" + month + "-" + day;
@ -338,84 +358,84 @@ export class CreateRole {
}
let time = getDate(newdate)
this.http.post(
'/api/Roles',
'/api/Roles',
{
id:"",
id: "",
name: value.name,
order: this.data.data[this.data.data.length - 1].order + 1,
enabled: true,
creationTime: time,
}
).subscribe(
data=>{
data => {
var id = data['id']
// console.log(value)
var keydata = [] //菜单权限id集合
var keydata2 = [] //数据权限id集合
for(let i in value){
if(value[i]){
if(i.indexOf("first") && i!="name"){
keydata.push(i.split('.')[1])
for (let i in value) {
if (value[i]) {
if (i.indexOf("first") && i != "name") {
keydata.push(i.split('.')[1])
}
if(i.indexOf("second") && i!="name"){
keydata2.push(i.split('.')[1])
if (i.indexOf("second") && i != "name") {
keydata2.push(i.split('.')[1])
}
}
}
function includes(arr1, arr2) {
return arr2.every(val => arr1.includes(val));
function includes(arr1, arr2) {
return arr2.every(val => arr1.includes(val));
}
const orginalList = [...keydata2];
orginalList.forEach((item) => { // forEach 里面 splice 有问题，详见 https://blog.csdn.net/qq_38128179/article/details/92798157
if (item in this.xxx) { // 根据 key，可以直接在 对象 里面获取数据
const datachildarrboxArr = this.xxx[item];
if (!includes(keydata2, datachildarrboxArr)) { // 如果不全部包含
keydata2.splice(keydata2.findIndex(items => items == item), 1);
}
if (item in this.xxx) { // 根据 key，可以直接在 对象 里面获取数据
const datachildarrboxArr = this.xxx[item];
if (!includes(keydata2, datachildarrboxArr)) { // 如果不全部包含
keydata2.splice(keydata2.findIndex(items => items == item), 1);
}
}
});
this.http.post(
`/api/Roles/${id}/Permissions`,
keydata2
).subscribe(
data=>{
data => {
this.http.post(
`/api/Roles/${id}/NavMenus`,
keydata
).subscribe(
data=>{
data => {
this.dialogRef.close();
const config = new MatSnackBarConfig();
config.verticalPosition = 'top';
config.duration = 3000
this.snackBar.open('创建成功','确定',config);
this.snackBar.open('创建成功', '确定', config);
},
err=>{
err => {
this.dialogRef.close();
const config = new MatSnackBarConfig();
config.verticalPosition = 'top';
config.duration = 3000
this.snackBar.open('创建菜单权限失败','确定',config);
this.snackBar.open('创建菜单权限失败', '确定', config);
}
)
},
err=>{
err => {
this.dialogRef.close();
const config = new MatSnackBarConfig();
config.verticalPosition = 'top';
config.duration = 3000
this.snackBar.open('创建数据权限失败','确定',config);
this.snackBar.open('创建数据权限失败', '确定', config);
}
)
},
err=>{
err => {
const config = new MatSnackBarConfig();
config.verticalPosition = 'top';
config.duration = 3000
this.snackBar.open('角色名称不符合规范','确定',config);
this.snackBar.open('角色名称不符合规范', '确定', config);
}
)
}
@ -441,8 +461,8 @@ export class EditRole {
expandable: !!node.children && node.children.length > 0,
name: node.name,
level: level,
id:node.id,
children:node.children
id: node.id,
children: node.children
};
}
treeControl = new FlatTreeControl<any>(
@ -457,43 +477,43 @@ export class EditRole {
myControl = new FormControl();
//注入MatDialogRef，可以用来关闭对话框
//要访问对话框组件中的数据，必须使用MAT_DIALOG_DATA注入令牌
constructor(private http: HttpClient,public dialogRef: MatDialogRef<EditRole>,public snackBar: MatSnackBar,@Inject(MAT_DIALOG_DATA) public data,private tree:TreeService) {}
olddata =[] //原始所有--数据权限
olddata2 =[] //原始所有--菜单权限
constructor(private http: HttpClient, public dialogRef: MatDialogRef<EditRole>, public snackBar: MatSnackBar, @Inject(MAT_DIALOG_DATA) public data, private tree: TreeService) { }
olddata = [] //原始所有--数据权限
olddata2 = [] //原始所有--菜单权限
newdata = []
newdata2 = []
placeholdername = this.data.name
datachildarrbox = {} //数据权限存放有children的 父id：子id1 子id2 子id3
menuchildarrbox = {} //菜单权限存放有children的 父id：子id1 子id2 子id3
checkedMap = {}
ngOnInit(){
ngOnInit() {
//获得角色的数据权限，选中的checked为true
this.http.get(`/api/Roles/${this.data.id}/Permissions`).subscribe((data: any[])=>{
this.olddata =data
this.http.get(`/api/Roles/${this.data.id}/Permissions`).subscribe((data: any[]) => {
this.olddata = data
this.newdata = this.tree.toTree(this.olddata)
//如果子节点存在选中则父节点默认选中
this.newdata.forEach(item=>{
if(item.children){
this.newdata.forEach(item => {
if (item.children) {
item.children.forEach(element => {
if(element.checked){
if (element.checked) {
this.checkedMap[item.id] = true
}
});
}
})
data.forEach(item=>{
if(item.checked){
data.forEach(item => {
if (item.checked) {
this.checkedMap[item.id] = true;
}
})
this.dataSource.data = this.newdata;
this.treeControl.expandAll()
this.dataSource.data.forEach(item=>{
if(item.children){
this.dataSource.data.forEach(item => {
if (item.children) {
var childarr = []
item.children.forEach(n => {
childarr.push(n.id)
@ -505,20 +525,20 @@ export class EditRole {
//获得角色的菜单权限，选中的checked为true
this.http.get(`/api/Roles/${this.data.id}/NavMenus`).subscribe((data: any[])=>{
this.olddata2 =data
this.http.get(`/api/Roles/${this.data.id}/NavMenus`).subscribe((data: any[]) => {
this.olddata2 = data
this.newdata2 = this.tree.toTree(this.olddata2)
data.forEach(item => {
if(item.checked){
if (item.checked) {
this.checkedMap[item.id] = item.checked;
}
});
});
this.dataSource2.data = this.newdata2;
this.treeControl.expandAll()
this.dataSource2.data.forEach(item=>{
if(item.children){
this.dataSource2.data.forEach(item => {
if (item.children) {
var childarr = []
item.children.forEach(n => {
childarr.push(n.id)
@ -530,24 +550,24 @@ export class EditRole {
}
//选中对应小组
selectedAll(event, node){
this.olddata.forEach(item=>{
if(item.parentId == node.id){
selectedAll(event, node) {
this.olddata.forEach(item => {
if (item.parentId == node.id) {
this.checkedMap[item.id] = event.checked;
}
})
// console.log(this.olddata2,node )
var menus =[] //导航菜单可能有三级 用于存储第二级
var menus = [] //导航菜单可能有三级 用于存储第二级
//选中一级菜单
this.olddata2.forEach(item=>{
if(item.parentId == node.id){
this.olddata2.forEach(item => {
if (item.parentId == node.id) {
this.checkedMap[item.id] = event.checked;
menus.push(item)
}
})
//将二级菜单也选中
menus.forEach(item=>{
if(item.children){
menus.forEach(item => {
if (item.children) {
item.children.forEach(n => {
this.checkedMap[n.id] = event.checked;
});
@ -562,93 +582,93 @@ export class EditRole {
}
onSubmit(value){
onSubmit(value) {
var keydata = [] //存储选中的菜单权限
var keydata2 = [] //存储选中的数据权限
for(let i in value){
if(value[i]){
if(i.indexOf("first") && i!="name" && i!="order"){
keydata.push(i.split('.')[1])
for (let i in value) {
if (value[i]) {
if (i.indexOf("first") && i != "name" && i != "order") {
keydata.push(i.split('.')[1])
}
if(i.indexOf("second") && i!="name" && i!="order"){
keydata2.push(i.split('.')[1])
if (i.indexOf("second") && i != "name" && i != "order") {
keydata2.push(i.split('.')[1])
}
}
}
let newdate = new Date();
function getDate(date){
function getDate(date) {
//date是传过来的时间戳，注意需为13位，10位需*1000
//也可以不传,获取的就是当前时间
var time = new Date(date);
var year= time.getFullYear() //年
var year = time.getFullYear() //年
var month = ("0" + (time.getMonth() + 1)).slice(-2); //月
var day = ("0" + time.getDate()).slice(-2); //日
var mydate = year + "-" + month + "-" + day;
return mydate
}
let time = getDate(newdate)
if(this.data['id'] != "0" && this.data['id'] != "1"){
if (this.data['id'] != "0" && this.data['id'] != "1") {
this.http.put(
`/api/Roles/${this.data['id']}`,
`/api/Roles/${this.data['id']}`,
{
id:this.data['id'],
id: this.data['id'],
name: value.name,
order: this.data.order,
enabled: true,
creationTime:time,
creationTime: time,
}
).subscribe(data=>{
).subscribe(data => {
},
err=>{
const config = new MatSnackBarConfig();
config.verticalPosition = 'top';
config.duration = 3000
this.snackBar.open('修改角色姓名请求失败','确定',config);
})
err => {
const config = new MatSnackBarConfig();
config.verticalPosition = 'top';
config.duration = 3000
this.snackBar.open('修改角色姓名请求失败', '确定', config);
})
function includes(arr1, arr2) {
return arr2.every(val => arr1.includes(val));
}
const orginalList = [...keydata2];
orginalList.forEach((item) => { // forEach 里面 splice 有问题，详见 https://blog.csdn.net/qq_38128179/article/details/92798157
if (item in this.datachildarrbox) { // 根据 key，可以直接在 对象 里面获取数据
const datachildarrboxArr = this.datachildarrbox[item];
if (!includes(keydata2, datachildarrboxArr)) { // 如果不全部包含
keydata2.splice(keydata2.findIndex(items => items == item), 1);
}
if (item in this.datachildarrbox) { // 根据 key，可以直接在 对象 里面获取数据
const datachildarrboxArr = this.datachildarrbox[item];
if (!includes(keydata2, datachildarrboxArr)) { // 如果不全部包含
keydata2.splice(keydata2.findIndex(items => items == item), 1);
}
}
});
this.http.post(
`/api/Roles/${this.data.id}/Permissions`,
keydata2
).subscribe(data=>{
).subscribe(data => {
},
err=>{
const config = new MatSnackBarConfig();
config.verticalPosition = 'top';
config.duration = 3000
this.snackBar.open('分配数据权限请求失败','确定',config);
})
err => {
const config = new MatSnackBarConfig();
config.verticalPosition = 'top';
config.duration = 3000
this.snackBar.open('分配数据权限请求失败', '确定', config);
})
}
this.http.post(
`/api/Roles/${this.data.id}/NavMenus`,
keydata
).subscribe(
data=>{
data => {
this.dialogRef.close();
const config = new MatSnackBarConfig();
config.verticalPosition = 'top';
config.duration = 3000
this.snackBar.open('编辑成功','确定',config);
this.snackBar.open('编辑成功', '确定', config);
},
err=>{
err => {
this.dialogRef.close();
const config = new MatSnackBarConfig();
config.verticalPosition = 'top';
config.duration = 3000
this.snackBar.open('分配菜单权限失败','确定',config);
this.snackBar.open('分配菜单权限失败', '确定', config);
}
)
// this.http.put(
@ -662,7 +682,7 @@ export class EditRole {
// }
// ).subscribe(
// data=>{
// },
@ -674,7 +694,7 @@ export class EditRole {
// }
// )
}
}

Write Preview
Loading…
Cancel
Save