Sinopec-Anxin/src/app/system-management/role/role.component.ts

import { Component, OnInit, TemplateRef, ViewContainerRef } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { NzModalService } from 'ng-zorro-antd/modal';
import { NzMessageService } from 'ng-zorro-antd/message';
import { HttpClient } from '@angular/common/http';
import { AddroleComponent } from './addrole/addrole.component';
import { EditroleComponent } from './editrole/editrole.component';
@Component({
  selector: 'app-role',
  templateUrl: './role.component.html',
  styleUrls: ['./role.component.scss']
})
export class RoleComponent implements OnInit {


  constructor(private modal: NzModalService, private viewContainerRef: ViewContainerRef, private message: NzMessageService, private http: HttpClient) { }

  ngOnInit(): void {
    this.getAllRoles()

    this.loadMore()
  }

  listOfData: any[] = [];

  //获取角色列表

  getAllRoles() {
    let params = {
      SkipCount: '0',
      MaxResultCount: '999'
    }
    this.http.get('/api/services/app/Role/GetAll', {
      params: params
    }).subscribe((data: any) => {
      console.log('角色列表', data.result.items)
      this.listOfData = data.result.items
    })
  }
  getAllMenus() {

  }

  addRole(): void {
    const modal = this.modal.create({
      nzTitle: '新增角色',
      nzContent: AddroleComponent,
      nzViewContainerRef: this.viewContainerRef,
      nzWidth: 400,
      nzComponentParams: {},
      nzMaskClosable: false,
      nzOnOk: async () => {
        if (instance.validateForm.valid) {
          await new Promise(resolve => {
            console.log('表单信息', instance.validateForm)
            let arr = []
            instance.validateForm.value.power.forEach(element => {
              arr.push(element.name)
            });
            let body = {
              name: instance.validateForm.value.name,
              DisplayName: instance.validateForm.value.name,
              grantedPermissions: arr
            }
            this.http.post('/api/services/app/Role/Create', body).subscribe(data => {
              resolve(data)
              this.message.create('success', '创建成功！');
              this.getAllRoles()
              return true
            })
          })
        } else {
          this.message.create('warning', '请填写完整！');
          return false
        }
      }
    });
    const instance = modal.getContentComponent();
    modal.afterOpen.subscribe(() => console.log('[afterOpen] emitted!'));
    modal.afterClose.subscribe(result => console.log('[afterClose] The result is:', result));
  }

  edit(item) {
    const modal = this.modal.create({
      nzTitle: '编辑角色',
      nzContent: EditroleComponent,
      nzViewContainerRef: this.viewContainerRef,
      nzWidth: 400,
      // nzOkLoading: true,
      nzComponentParams: {
        data: item,
        optionList: this.optionList
      },
      nzMaskClosable: false,
      nzOnOk: async () => {
        if (instance.validateForm.valid) {
          await new Promise(resolve => {
            console.log('表单信息', instance.validateForm)
            let arr = []
            instance.validateForm.value.power.forEach(element => {
              arr.push(element.name ? element.name : element)
            });
            let body = {
              id: item.id,
              name: instance.validateForm.value.name,
              DisplayName: instance.validateForm.value.name,
              grantedPermissions: arr
            }
            this.http.put('/api/services/app/Role/Update', body).subscribe(data => {
              resolve(data)
              this.message.create('success', '修改成功！');
              this.getAllRoles()
              return true
            })
          })
        } else {
          this.message.create('warning', '请填写完整！');
          return false
        }
      }
    });
    const instance = modal.getContentComponent();
    modal.afterOpen.subscribe(() => console.log('[afterOpen] emitted!'));
    // Return a result when closed
    modal.afterClose.subscribe(result => console.log('[afterClose] The result is:', result));
  }

  optionList = [];
  //获取权限列表
  loadMore() {
    this.http.get('/api/services/app/Role/GetAllPermissions').subscribe((data: any) => {
      this.optionList = data.result.items
      // this.modal.containerInstance.config.nzOkLoading = false
      // console.log('所有权限',data)
    })
  }




  delete(item) {
    console.log(item)
    this.modal.confirm({
      nzTitle: `确定要删除${item.name}这个角色吗?`,
      nzOkText: '确定',
      nzOkType: 'danger',
      nzOnOk: () => {
        this.http.delete('/api/services/app/Role/Delete', {
          params: {
            Id: item.id
          }
        }).subscribe(data => {
          this.message.create('success', '删除成功！');
          this.getAllRoles()
        })
      },
      nzCancelText: '取消',
      nzOnCancel: () => {

      }
    });
  }
}