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

import { Component, OnInit, Inject } from "@angular/core";
import {
  MatTreeFlatDataSource,
  MatTreeFlattener,
} from "@angular/material/tree";
import { FlatTreeControl } from "@angular/cdk/tree";
import { HttpClient } from "@angular/common/http";
import {
  MatDialog,
  MatDialogRef,
  MAT_DIALOG_DATA,
} from "@angular/material/dialog";
import { FormControl } from "@angular/forms";
import { MatSnackBar, MatSnackBarConfig } from "@angular/material/snack-bar";
import { TreeService } from "../../http-interceptors/tree.service";
@Component({
  selector: "app-organization",
  templateUrl: "./organization.component.html",
  styleUrls: ["./organization.component.scss"],
})
export class OrganizationComponent implements OnInit {
  data: any = []; //存储所有组织机构
  newdata = [];

  private _transformer = (node, level: number) => {
    //要给渲染节点传那些属性参数
    return {
      expandable: !!node.children && node.children.length > 0,
      name: node.name,
      level: level,
      id: node.id,
      parentId: node.parentId,
      enabled: node.enabled,
      order: node.order,
      children: node.children,
      isTop: node.isTop,
      isBottom: node.isBottom,
      code: node.code,
      division: node.division,
    };
  };
  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);

  constructor(
    private http: HttpClient,
    public dialog: MatDialog,
    public snackBar: MatSnackBar,
    private tree: TreeService
  ) {}
  isloading: any = false; //loading效果
  //重新获取列表并且展开到上次位置的方法
  getlist = (): void => {
    this.http
      .get("/api/Organizations", {
        params: {
          strict: "true",
        },
      })
      .subscribe((data: any) => {
        this.data = data;
        this.newdata = this.tree.toTree(data);

        const nodes = this.treeControl.dataNodes;
        const expandNodes = [];
        nodes.forEach((item) => {
          if (item.expandable && this.treeControl.isExpanded(item)) {
            expandNodes.push(item.id);
          }
        });

        console.log("tree", this.newdata);
        this.dataSource.data = this.newdata;
        let newNodes = this.treeControl.dataNodes;
        newNodes = newNodes.filter((n) => {
          return expandNodes.indexOf(n.id) >= 0;
        });
        newNodes.forEach((item) => {
          this.treeControl.expand(item);
        });
        this.isloading = false;
      });
  };
  //初始化视图
  ngOnInit() {
    this.http
      .get("/api/Organizations", {
        params: {
          strict: "true",
        },
      })
      .subscribe((data: any) => {
        this.data = data;
        this.dataSource.data = this.tree.toTree(data);
        this.treeControl.expand(this.treeControl.dataNodes[0]);
      });
  }
  hasChild = (_: number, node: any) => node.expandable;

  //创建组织按钮
  create(value) {
    let data = null;
    value
      ? (data = {
          id: value.id,
          childlength: value.children,
          level: value.level,
        })
      : (data = null);
    const dialogRef = this.dialog.open(CreateOrganization, {
      //调用open方法打开对话框并且携带参数过去
      width: "260px",
      data: data,
    });
    dialogRef.afterClosed().subscribe((data) => {
      if (data) {
        this.getlist();
      }
    });
  }
  //编辑组织按钮
  edit(node) {
    const dialogRef = this.dialog.open(EditOrganization, {
      //调用open方法打开对话框并且携带参数过去
      data: node,
    });
    dialogRef.afterClosed().subscribe((data) => {
      this.getlist();
    });
  }
  //删除组织按钮
  delete(value) {
    var isdeleted = confirm("确定要删除此组织？");
    if (isdeleted) {
      //请求删除接口
      this.isloading = true;
      this.http.delete(`/api/Organizations/${value.id}`).subscribe((data) => {
        this.getlist();
      });
    }
  }
  //禁用按钮
  disable(value) {
    this.isloading = true;
    if (!value.enabled) {
      this.http
        .put(`/api/Organizations/${value.id}`, {
          id: value.id,
          code: value.code,
          name: value.name,
          level: value.level,
          order: value.order,
          location: null,
          enabled: true,
          parentId: value.parentId,
        })
        .subscribe(
          (data) => {
            const config = new MatSnackBarConfig();
            config.verticalPosition = "top";
            config.duration = 3000;
            this.snackBar.open("启用成功", "确定", config);
            this.getlist();
          },
          (err) => {
            const config = new MatSnackBarConfig();
            config.verticalPosition = "top";
            config.duration = 3000;
            this.snackBar.open("操作无效", "确定", config);
            this.isloading = false;
          }
        );
    } else {
      // var isdeleted = confirm("确定要禁用此组织？")
      // if(isdeleted){
      this.http
        .put(`/api/Organizations/${value.id}`, {
          id: value.id,
          code: value.code,
          name: value.name,
          level: value.level,
          order: value.order,
          location: null,
          enabled: false,
          parentId: value.parentId,
        })
        .subscribe(
          (data) => {
            const config = new MatSnackBarConfig();
            config.verticalPosition = "top";
            config.duration = 3000;
            this.snackBar.open("禁用成功", "确定", config);
            this.getlist();
          },
          (err) => {
            const config = new MatSnackBarConfig();
            config.verticalPosition = "top";
            config.duration = 3000;
            this.snackBar.open("操作无效", "确定", config);
            this.isloading = false;
          }
        );
      // }
    }
  }

  //向上箭头
  updata = [];
  up(node, e) {
    if (!node.parentId) {
      alert("总队不支持排序");
      return;
    }
    this.isloading = true;
    let curArr = this.data.find((v) => v.id === node.parentId).children;
    let curItem = curArr.find((v) => v.id === node.id);
    let curIndex = curArr.findIndex((v) => v.id === node.id);
    let preItem = curArr[curIndex - 1];
    curArr[curIndex - 1] = curItem;
    curArr[curIndex] = preItem;
    console.log(
      "排序数组",
      curArr.map((v) => v.name)
    );
    let ids = curArr.map((v) => v.id);
    this.http.post("/api/Organizations/Sort", ids).subscribe(
      (data) => {
        this.isloading = false;
        this.getlist();
      },
      (err) => {
        this.isloading = false;
        const config = new MatSnackBarConfig();
        config.verticalPosition = "top";
        config.duration = 3000;
        this.snackBar.open("排序失败", "确定", {
          verticalPosition: "top",
          duration: 3000,
        });
      }
    );
    return;
  }

  //向下箭头
  downdata = [];
  down(node, e) {
    if (!node.parentId) {
      alert("总队不支持排序");
      return;
    }
    this.isloading = true;
    let curArr = this.data.find((v) => v.id === node.parentId).children;
    let curItem = curArr.find((v) => v.id === node.id);
    let curIndex = curArr.findIndex((v) => v.id === node.id);
    let nextItem = curArr[curIndex + 1];
    curArr[curIndex + 1] = curItem;
    curArr[curIndex] = nextItem;
    console.log(
      "排序数组",
      curArr.map((v) => v.name)
    );
    let ids = curArr.map((v) => v.id);
    this.http.post("/api/Organizations/Sort", ids).subscribe(
      (data) => {
        this.isloading = false;
        this.getlist();
      },
      (err) => {
        this.isloading = false;
        const config = new MatSnackBarConfig();
        config.verticalPosition = "top";
        config.duration = 3000;
        this.snackBar.open("排序失败", "确定", {
          verticalPosition: "top",
          duration: 3000,
        });
      }
    );
    return;
  }

  selectedOrg: any; //当前选择的组织机构
  OfficesList: any; //获得的下级列表
  //获得点击组织机构的下级机关单位
  getOffices(node) {
    // console.log(node)
    this.selectedOrg = node;
    this.http.get(`/api/OrganizationsOffices/${node.id}`).subscribe((data) => {
      // console.log("获取成功",data)
      this.OfficesList = data;
    });
  }
  //新增下属机关
  addOffices() {
    const dialogRef = this.dialog.open(addOffices, {
      //调用open方法打开对话框并且携带参数过去
      data: { selectedOrg: this.selectedOrg, OfficesList: this.OfficesList },
    });
    dialogRef.afterClosed().subscribe((data) => {
      if (data == "创建成功") {
        this.getOffices(this.selectedOrg);
      }
    });
  }
  //编辑机关
  editOffice(item) {
    const dialogRef = this.dialog.open(editOffices, {
      //调用open方法打开对话框并且携带参数过去
      data: { item: item },
    });
    dialogRef.afterClosed().subscribe((data) => {
      if (data == "修改成功") {
        this.getOffices(this.selectedOrg);
      }
    });
  }
  //删除机关
  deleteOffice(item) {
    let isDelete = window.confirm("确定要删除此机关吗?");
    if (isDelete) {
      this.http
        .delete(`/api/OrganizationsOffices/${item.id}`)
        .subscribe((data) => {
          const config = new MatSnackBarConfig();
          config.verticalPosition = "top";
          config.duration = 3000;
          this.snackBar.open("删除成功", "确定", config);
          this.getOffices(this.selectedOrg);
        });
    }
  }
}

//创建组织
@Component({
  selector: "createorganization",
  templateUrl: "./createorganization.component.html",
  styleUrls: ["./organization.component.scss"],
})
export class CreateOrganization {
  myControl = new FormControl();
  ishttp: boolean = false;
  constructor(
    private http: HttpClient,
    public dialogRef: MatDialogRef<CreateOrganization>,
    @Inject(MAT_DIALOG_DATA) public data,
    public snackBar: MatSnackBar
  ) {}

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

  onSubmit(value) {
    if (!this.data) {
      this.http
        .post("/api/Organizations", {
          code: value.number,
          division: value.division,
          name: value.name,
          level: 0,
          enabled: true,
          parentId: null,
        })
        .subscribe((data) => {
          this.dialogRef.close(data);
          const config = new MatSnackBarConfig();
          config.verticalPosition = "top";
          config.duration = 3000;
          this.snackBar.open("创建组织成功", "确定", config);
        });
      return;
    }

    if (this.data.childlength) {
      //如果点击节点存在children
      this.http
        .post("/api/Organizations", {
          id: "",
          code: value.number,
          division: value.division,
          name: value.name,
          level: this.data.level + 1,
          order:
            this.data.childlength[this.data.childlength.length - 1].order + 1,
          location: null,
          enabled: true,
          parentId: this.data.id,
        })
        .subscribe(
          (data) => {
            this.dialogRef.close(data);
            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);
          }
        );
    } else {
      this.http
        .post("/api/Organizations", {
          id: "",
          code: value.number,
          division: value.division,
          name: value.name,
          level: this.data.level + 1,
          order: 0,
          location: null,
          enabled: true,
          parentId: this.data.id,
        })
        .subscribe(
          (data) => {
            this.dialogRef.close(data);
            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: "editorganization",
  templateUrl: "./editorganization.component.html",
  styleUrls: ["./organization.component.scss"],
})
export class EditOrganization {
  newdata = [];
  private _transformer = (node, level: number) => {
    return {
      expandable: !!node.children && node.children.length > 0,
      name: node.name,
      level: level,
      id: node.id,
      parentId: node.parentId,
      children: node.children,
      division: node.division,
    };
  };
  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);
  myControl = new FormControl();
  organizationname: string = ""; //自己组织的名字
  organizationcode: any; //自己组织的编号
  organizationName: any = ""; //上级组织的名字
  organizationId: any = ""; //上级组织的id
  organizationLevel: number = null; //上级组织的层级
  organizationchildlength: number = null;
  allOrganizations: any; //所有组织机构
  division: any; //区划
  constructor(
    private http: HttpClient,
    public dialogRef: MatDialogRef<EditOrganization>,
    @Inject(MAT_DIALOG_DATA) public data,
    private tree: TreeService,
    public snackBar: MatSnackBar
  ) {}

  //获取所有组织机构
  getMechanism() {
    this.http.get("/api/Organizations").subscribe((data: any) => {
      this.allOrganizations = data;
      this.dataSource.data = this.tree.toTree(data);
      data.forEach((item) => {
        if (item.id == this.data.parentId) {
          this.organizationName = item.name;
        }
      });
    });
  }

  ngOnInit() {
    // console.log(this.data)
    this.getMechanism();
    this.organizationname = this.data.name;
    this.organizationcode = this.data.code;
    this.division = this.data.division;
  }
  hasChild = (_: number, node: any) => node.expandable;
  onNoClick(): void {
    this.dialogRef.close();
  }
  add(e) {
    this.organizationName = e.name;
    this.organizationId = e.id;
    this.organizationLevel = e.level;
    if (e.children) {
      //如果点击的父组织有子节点
      this.organizationchildlength = e.children.length;
    } else {
      this.organizationchildlength = 0;
    }
  }
  onSubmit(value) {
    if (this.organizationLevel) {
      //如果点击了右边的树
      this.http
        .put(`/api/Organizations/${this.data.id}`, {
          id: this.data.id,
          code: value.number,
          division: value.division,
          name: value.name,
          level: this.organizationLevel + 1,
          order: this.organizationchildlength,
          location: null,
          enabled: true,
          parentId: this.organizationId,
        })
        .subscribe(
          (data) => {
            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);
          }
        );
    } else {
      //如果只改了姓名
      this.http
        .put(`/api/Organizations/${this.data.id}`, {
          id: this.data.id,
          code: value.number,
          division: value.division,
          name: value.name,
          level: this.data.level,
          order: this.data.order,
          location: null,
          enabled: true,
          parentId: this.data.parentId,
        })
        .subscribe(
          (data) => {
            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: "addOffices",
  templateUrl: "./addOffices.html",
  styleUrls: ["./organization.component.scss"],
})
export class addOffices {
  constructor(
    private http: HttpClient,
    public dialogRef: MatDialogRef<addOffices>,
    @Inject(MAT_DIALOG_DATA) public data,
    public snackBar: MatSnackBar
  ) {}

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

  onSubmit(value) {
    // console.log(value)
    let body = {
      id: null,
      organizationId: this.data.selectedOrg.id,
      officeName: value.name,
      order:
        this.data.OfficesList.length == 0
          ? 0
          : this.data.OfficesList[this.data.OfficesList.length - 1].order,
      enabled: true,
    };
    this.http.post("/api/OrganizationsOffices", body).subscribe((data) => {
      const config = new MatSnackBarConfig();
      config.verticalPosition = "top";
      config.duration = 3000;
      this.snackBar.open("创建成功", "确定", config);
      this.dialogRef.close("创建成功");
    });
  }
}

//编辑下属机关
@Component({
  selector: "editOffices",
  templateUrl: "./editOffices.html",
  styleUrls: ["./organization.component.scss"],
})
export class editOffices {
  constructor(
    private http: HttpClient,
    public dialogRef: MatDialogRef<editOffices>,
    @Inject(MAT_DIALOG_DATA) public data,
    public snackBar: MatSnackBar
  ) {}

  ngOnInit(): void {
    // console.log(this.data)
  }
  onNoClick(): void {
    this.dialogRef.close();
  }
  officeName: any = this.data.item.officeName;
  onSubmit(value) {
    // console.log(value)
    let body = {
      id: this.data.item.id,
      organizationId: this.data.item.organizationId,
      officeName: value.name,
      order: this.data.item.order,
      enabled: true,
    };
    this.http
      .put(`/api/OrganizationsOffices/${this.data.item.id}`, body)
      .subscribe((data) => {
        const config = new MatSnackBarConfig();
        config.verticalPosition = "top";
        config.duration = 3000;
        this.snackBar.open("修改成功", "确定", config);
        this.dialogRef.close("修改成功");
      });
  }
}