ShangHaiYuan-AnXin/src/app/ui/role/role.component.ts

import { Component, OnInit, Inject } from '@angular/core';
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 {CdkDragDrop, moveItemInArray} from '@angular/cdk/drag-drop';
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';



export interface roledata {
  id: string,
  name: string,//名称
  order: number,
  enabled: boolean,
  creationTime: string
}
@Component({
  selector: 'app-role',
  templateUrl: './role.component.html',
  styleUrls: ['./role.component.scss']
})

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'];
  dataSource: any

  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>)=>{ 
      this.dataSource = data
      this.dataSource[0].isTop = true;
      this.dataSource[this.dataSource.length-1].isBottom = true
    })
  }
  //初始化视图
  ngOnInit() {  
    this.getlist()
  }
  //向上按钮
  up(node){
    let newdate = new Date();
    function getDate(date){
      //date是传过来的时间戳，注意需为13位，10位需*1000
      //也可以不传,获取的就是当前时间
      var time = new Date(date);
      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)
    this.http.put(//把上一节点order换成点击的节点
      `/api/Roles/${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,
      }
    ).subscribe(data=>{
      this.getlist()
    })

    this.http.put(//把当前节点order换成上一点击的节点
      `/api/Roles/${node.id}`, 
      {
        id:node.id,
        name: node.name,
        order: node.order-1,
        enabled: true,
        creationTime:time,
      }
    ).subscribe(data=>{
      this.getlist()
    })

  }
  //向下按钮
  down(node){
    let newdate = new Date();
    function getDate(date){
      //date是传过来的时间戳，注意需为13位，10位需*1000
      //也可以不传,获取的就是当前时间
      var time = new Date(date);
      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)
    this.http.put(//把下一节点order换成点击的节点
      `/api/Roles/${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,
      }
    ).subscribe(data=>{
      this.getlist()
    })

    this.http.put(//把当前节点order换成下一点击的节点
      `/api/Roles/${node.id}`, 
      {
        id:node.id,
        name: node.name,
        order: node.order + 1,
        enabled: true,
        creationTime:time,
      }
    ).subscribe(data=>{
      this.getlist()
    })
  }
  //创建按钮并且弹出对话框
  createuser(){
    const dialogRef = this.dialog.open(CreateRole, {//调用open方法打开对话框并且携带参数过去
      width: '600px',
      height:'658px',
      data: {name: this.createuser.name,data: this.dataSource,length:this.dataSource.length}
    });
    dialogRef.afterClosed().subscribe(
      data=>{
        this.getlist()
      }
    );
  }

  //删除按钮
  deleteduser(roledata){
    var isdeleted = confirm("确定要删除此用户吗？")
    if(isdeleted){
      //请求删除接口
      this.http.delete(`/api/Roles/${roledata.id}`).subscribe( data=>{ 
        this.getlist()
      })
    }
  }
  //编辑按钮
  allot(roledata){
    const dialogRef = this.dialog.open(EditRole, {//调用open方法打开对话框并且携带参数过去
      width: '600px',
      height:'658px',
      data: {id:roledata.id,name:roledata.name,order:roledata.order}//把点击的id传过去
    });

    dialogRef.afterClosed().subscribe(
      data=>{
        this.getlist()
      }
    );
  }

  //启用或禁用按钮
  open(roledata){
    let newdate = new Date();
    function getDate(date){
      //date是传过来的时间戳，注意需为13位，10位需*1000
      //也可以不传,获取的就是当前时间
      var time = new Date(date);
      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)
    this.http.put(
      `/api/Roles/${roledata['id']}`, 
      {
        id:roledata['id'],
        name: roledata.name,
        order: roledata.order,
        enabled: !roledata.enabled,
        creationTime: time,
      }
    ).subscribe(
      data=>{
        this.getlist()
      }
    )
  }
  
  drop(event: CdkDragDrop<string[]>) {//拖拽函数
    moveItemInArray(this.dataSource, event.previousIndex, event.currentIndex);
    this.dataSource.forEach((item, index) => {
      item.order = index;
    })
    const a = [...this.dataSource];
    this.dataSource = [];
    setTimeout(() => {
      this.dataSource = a;
    }, 10);
  };
}






//创建角色组件
@Component({
  selector: 'createrole',
  templateUrl: './createrole.component.html',
  styleUrls: ['./role.component.scss']
})
export class CreateRole {
  private _transformer = (node: any, level: number) => {
    return {
      expandable: !!node.children && node.children.length > 0,
      name: node.name,
      level: level,
      id:node.id
    };
  }
  treeControl = new FlatTreeControl<any>(
    node => node.level, node => node.expandable);

  treeFlattener = new MatTreeFlattener(
    this._transformer, node => node.level, node => node.expandable, node => node.children);

  dataSource = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener);
  dataSource2 = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener);
  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 =[]
  olddata2 = []
  xxx = {}
  jjj = {}
  //用于存放选中的数组
  checkedMap = {}
  //初始化两棵tree
  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){
          var childarr = []
          item.children.forEach(n => {
            childarr.push(n.id)
          })
          this.xxx[item.id] = childarr
        }
      })
      
    })
    
    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){
          var childarr = []
          item.children.forEach(n => {
            childarr.push(n.id)
          })
          this.jjj[item.id] = childarr
        }
      })
    })
  }

  //选中后子节点默认选中
  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 =[] //导航菜单可能有三级  用于存储第二级
    //选中一级菜单
    this.olddata2.forEach(item=>{
      if(item.parentId == node.id){
        this.checkedMap[item.id] = event.checked;
        menus.push(item)
      }
    })
    //将二级菜单也选中
    menus.forEach(item=>{
      if(item.children){
        item.children.forEach(n => {
          this.checkedMap[n.id] = event.checked;
        });
      }
    })
  }

  //数据权限tree的全选功能
  leftTreeAll(event,form){
    const values = form.value;
    for (let key in values) {
      if(key.indexOf("second")){
        this.checkedMap[key.split('.')[1]] = event.checked;
      }
    }
  }
   //菜单权限tree的全选功能
  rightTreeAll(event,form){
    const values = form.value;
    for (let key in values) {
      if(key.indexOf("first")){
        this.checkedMap[key.split('.')[1]] = event.checked;
      }
    }
  }
  
  hasChild = (_: number, node: any) => node.expandable;

  onNoClick(): void {
    this.dialogRef.close();
  }
  //提交
  onSubmit(value){
    let newdate = new Date();
    function getDate(date){
      //date是传过来的时间戳，注意需为13位，10位需*1000
      //也可以不传,获取的就是当前时间
      var time = new Date(date);
      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)
    this.http.post(
      '/api/Roles', 
      {
        id:"",
        name: value.name,
        order: this.data.data[this.data.data.length - 1].order + 1,
        enabled: true,
        creationTime: time,
      }
    ).subscribe(
      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]) 
            }
            if(i.indexOf("second") && i!="name"){
              keydata2.push(i.split('.')[1]) 
            }
          }
        }

       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);
                }
            }
        });

        this.http.post(
          `/api/Roles/${id}/Permissions`,
          keydata2
        ).subscribe(
          data=>{
            this.http.post(
              `/api/Roles/${id}/NavMenus`,
              keydata
            ).subscribe(
              data=>{
                this.dialogRef.close();
                const config = new MatSnackBarConfig();
                config.verticalPosition = 'top';
                config.duration = 3000
                this.snackBar.open('创建成功','确定',config);
              },
              err=>{
                this.dialogRef.close();
                const config = new MatSnackBarConfig();
                config.verticalPosition = 'top';
                config.duration = 3000
                this.snackBar.open('创建菜单权限失败','确定',config);
              }
            )
          },
          err=>{
            this.dialogRef.close();
            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);
      }
    )
  }
}









//编辑组件
@Component({
  selector: 'editrole',
  templateUrl: './editrole.component.html',
  styleUrls: ['./role.component.scss']
})
export class EditRole {
  private _transformer = (node: any, level: number) => {
    return {
      expandable: !!node.children && node.children.length > 0,
      name: node.name,
      level: level,
      id:node.id,
      children:node.children
    };
  }
  treeControl = new FlatTreeControl<any>(
    node => node.level, node => node.expandable);

  treeFlattener = new MatTreeFlattener(
    this._transformer, node => node.level, node => node.expandable, node => node.children);

  dataSource = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener);
  dataSource2 = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener);

  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 =[] //原始所有--菜单权限
  newdata = []
  newdata2 = []
  placeholdername = this.data.name
  datachildarrbox = {} //数据权限存放有children的  父id：子id1 子id2 子id3
  menuchildarrbox = {} //菜单权限存放有children的  父id：子id1 子id2 子id3
  checkedMap = {}
  ngOnInit(){
    //获得角色的数据权限，选中的checked为true
    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){
          item.children.forEach(element => {
            if(element.checked){
              this.checkedMap[item.id] = true
            }
          });
        }
      })

      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){
          var childarr = []
          item.children.forEach(n => {
            childarr.push(n.id)
          })
          this.datachildarrbox[item.id] = childarr
        }
      })
    })


    //获得角色的菜单权限，选中的checked为true
    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){
          this.checkedMap[item.id] = item.checked;
        }
      });  
      
      this.dataSource2.data = this.newdata2;
      this.treeControl.expandAll()

      this.dataSource2.data.forEach(item=>{
        if(item.children){
          var childarr = []
          item.children.forEach(n => {
            childarr.push(n.id)
          })
          this.menuchildarrbox[item.id] = childarr
        }
      })
    })
  }

  //选中对应小组
  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 =[] //导航菜单可能有三级  用于存储第二级
    //选中一级菜单
    this.olddata2.forEach(item=>{
      if(item.parentId == node.id){
        this.checkedMap[item.id] = event.checked;
        menus.push(item)
      }
    })
    //将二级菜单也选中
    menus.forEach(item=>{
      if(item.children){
        item.children.forEach(n => {
          this.checkedMap[n.id] = event.checked;
        });
      }
    })
  }

  hasChild = (_: number, node: any) => node.expandable;

  onNoClick(): void {
    this.dialogRef.close();
  }


  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]) 
        }
        if(i.indexOf("second") && i!="name" && i!="order"){
          keydata2.push(i.split('.')[1]) 
        }
      }
    }
    let newdate = new Date();
    function getDate(date){
      //date是传过来的时间戳，注意需为13位，10位需*1000
      //也可以不传,获取的就是当前时间
      var time = new Date(date);
      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"){
      this.http.put(
        `/api/Roles/${this.data['id']}`, 
        {
          id:this.data['id'],
          name: value.name,
          order: this.data.order,
          enabled: true,
          creationTime:time,
        }
      ).subscribe(data=>{
        
      },
      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);
              }
          }
      });
      this.http.post(
        `/api/Roles/${this.data.id}/Permissions`,
        keydata2
      ).subscribe(data=>{

      },
      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=>{
        this.dialogRef.close();
        const config = new MatSnackBarConfig();
        config.verticalPosition = 'top';
        config.duration = 3000
        this.snackBar.open('编辑成功','确定',config);
      },
      err=>{
        this.dialogRef.close();
        const config = new MatSnackBarConfig();
        config.verticalPosition = 'top';
        config.duration = 3000
        this.snackBar.open('分配菜单权限失败','确定',config);
      }
    )
    // this.http.put(
    //   `/api/Roles/${this.data['id']}`, 
    //   {
    //     id:this.data['id'],
    //     name: value.name,
    //     order: this.data.order,
    //     enabled: true,
    //     creationTime:time,
    //   }
    // ).subscribe(
    //   data=>{
        


    //   },
    //   err=>{
    //     const config = new MatSnackBarConfig();
    //     config.verticalPosition = 'top';
    //     config.duration = 3000
    //     this.snackBar.open('名称格式不正确','确定',config);
    //   }
    // )

   

  }
}