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";
import { TreeService } from "src/app/service/tree.service";
import { MenusComponent } from "./menus/menus.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,
    private toTree: TreeService
  ) {}
  levelList = ["无", "销售公司", "省公司", "区域", "油站"];
  ngOnInit(): void {
    this.getAllRoles();

    this.loadMore();

    this.getAllMenus();
  }

  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);
        let level = JSON.parse(sessionStorage.getItem("userdata")).organization
          .level;
        this.listOfData = [];
        data.result.items.forEach((ele) => {
          if (ele.organizationsLevel >= level || ele.organizationsLevel == 0) {
            this.listOfData.push(ele);
          }
        });
        this.listOfData = [...this.listOfData];
      });
  }

  totalCount;
  nodes;
  getAllMenus() {
    let params = {
      SkipCount: "0",
      MaxResultCount: "999",
    };
    this.http
      .get("/api/services/app/Menu/GetAll", {
        params: params,
      })
      .subscribe((data: any) => {
        // console.log(666, data)
        this.totalCount = data.result.totalCount;
        data.result.items.forEach((element) => {
          element.key = element.id;
          element.title = element.name;
          element.selectable = false;
        });
        this.nodes = [...this.toTree.toTree(data.result.items)];
      });
  }

  addRole(): void {
    const modal = this.modal.create({
      nzTitle: "新增角色",
      nzContent: AddroleComponent,
      nzViewContainerRef: this.viewContainerRef,
      nzWidth: 400,
      nzComponentParams: {
        nodes: this.nodes,
      },
      nzMaskClosable: false,
      nzOnOk: async () => {
        if (instance.validateForm.valid) {
          await new Promise((resolve) => {
            console.log("表单信息", instance.validateForm);
            let body = {
              name: instance.validateForm.value.name,
              DisplayName: instance.validateForm.value.name,
              grantedPermissions: instance.validateForm.value.power || [],
              organizationsLevel:
                instance.validateForm.value.organizationsLevel,
            };
            let body2 = instance.validateForm.value.menus || [];
            this.http.post("/api/services/app/Role/Create", body).subscribe(
              (data: any) => {
                this.http
                  .post("/api/services/app/Role/SetRoleMenus", body2, {
                    params: {
                      roleId: data.result.id,
                    },
                  })
                  .subscribe(
                    (data) => {
                      resolve(data);
                      this.message.create("success", "创建成功！");
                      this.getAllRoles();
                    },
                    (err) => {
                      resolve(err);
                      this.message.create("warning", "分配菜单错误！");
                    }
                  );
              },
              (err) => {
                resolve(err);
                this.message.create("warning", "创建角色错误！");
              }
            );
          });
        } 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,
      nzComponentParams: {
        data: item,
        optionList: this.optionList,
        nodes: this.nodes,
      },
      nzMaskClosable: false,
      nzOnOk: async () => {
        if (instance.validateForm.valid) {
          await new Promise((resolve) => {
            console.log("表单信息", instance.validateForm);
            let body = {
              id: item.id,
              name: instance.validateForm.value.name,
              DisplayName: instance.validateForm.value.name,
              grantedPermissions: instance.validateForm.value.power || [],
              organizationsLevel:
                instance.validateForm.value.organizationsLevel,
            };
            let body2 = instance.validateForm.value.menus || [];
            this.http.put("/api/services/app/Role/Update", body).subscribe(
              (data: any) => {
                this.http
                  .post("/api/services/app/Role/SetRoleMenus", body2, {
                    params: {
                      roleId: data.result.id,
                    },
                  })
                  .subscribe(
                    (data) => {
                      this.message.create("success", "修改成功！");
                      this.getAllRoles();
                      resolve(data);
                    },
                    (err) => {
                      this.message.create("warning", "分配菜单错误！");
                      resolve(err);
                    }
                  );
              },
              (err) => {
                this.message.create("warning", "修改角色错误！");
                resolve(err);
              }
            );
          });
        } 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)
    );
  }

  allotMenus(item) {
    // console.log(item)
    const modal = this.modal.create({
      nzTitle: "分配菜单",
      nzContent: MenusComponent,
      nzViewContainerRef: this.viewContainerRef,
      nzWidth: 400,
      nzComponentParams: {
        data: item,
        nodes: this.nodes,
      },
      nzMaskClosable: false,
      nzOnOk: async () => {
        await new Promise((resolve) => {
          console.log("表单信息", instance.validateForm);

          // let arr = []
          // let treeData = instance.nzTreeComponent.getCheckedNodeList()
          // console.log('tree', treeData)
          // treeData.forEach(element => {
          //   arr.push(element.key)
          //   if (element.origin.children && element.origin.children.length != 0) {
          //     element.origin.children.forEach(ele => {
          //       arr.push(ele.key)
          //     })
          //   }
          //   if (element.parentNode) {
          //     arr.push(element.parentNode.key)
          //   }
          // });
          let body = instance.validateForm.value.menus;
          this.http
            .post("/api/services/app/Role/SetRoleMenus", body, {
              params: {
                roleId: item.id,
              },
            })
            .subscribe((data) => {
              resolve(data);
              this.message.create("success", "分配成功！");
              this.getAllRoles();
              return true;
            });
        });
      },
    });
    const instance = modal.getContentComponent();
    // modal.afterOpen.subscribe(() => console.log('[afterOpen] emitted!'));
    // 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: "primary",
      nzOnOk: () => {
        this.http
          .delete("/api/services/app/Role/Delete", {
            params: {
              Id: item.id,
            },
          })
          .subscribe((data) => {
            this.message.create("success", "删除成功！");
            this.getAllRoles();
          });
      },
      nzCancelText: "取消",
      nzOnCancel: () => {},
    });
  }
}