diet-web-ui/projects/client/src/app/pages/system/user-manage/user-manage.component.ts

import { PermItemDTO, UserDTO, UserRoleDTO } from "@cdk/dtos/user.dto";
import { Component, OnChanges, OnInit, SimpleChanges, TemplateRef, ViewChild } from "@angular/core";
import { FormControl, FormGroup, FormGroupName } from "@angular/forms";
import { ActivatedRoute, Router } from "@angular/router";
import { AnyObject, FormValidators, TableListOption, Utils } from "@cdk/public-api";
import { NzDrawerRef, NzDrawerService } from "ng-zorro-antd/drawer";
import { NzMessageService } from "ng-zorro-antd/message";
import { NzModalService } from "ng-zorro-antd/modal";
import { lastValueFrom } from "rxjs";
import { ApiService } from "@cdk/services";

@Component({
	selector: "app-client-user-manage",
	templateUrl: "./user-manage.component.html",
	styleUrls: ["./user-manage.component.less"],
})
export class ClientUserManageComponent {
	constructor(
		private route: ActivatedRoute,
		private api: ApiService,
		private router: Router,
		private modal: NzModalService,
		private msg: NzMessageService
	) {}

	public tab = 0;

	public role: UserRoleDTO | null = null;

	public roleForm = new FormGroup({
		roleId: new FormControl(""),
		roleName: new FormControl("", [FormValidators.required("请输入角色名称")]),
		items: new FormControl(),
	});

	public allPerms: PermItemDTO[] = [];

	public userList: UserDTO[] = [];

	public currentUserList: UserDTO[] = [];

	roleList: UserRoleDTO[] = [];

	ngOnInit(): void {
		this.tab = Number(this.route.snapshot.queryParamMap.get("tab")) || 0;
		this.api.getRolePerms().subscribe((res) => {
			this.allPerms = res.body;
		});
		this.getRoleList();
		this.getUserList();
	}

	getUserList(reload?: boolean) {
		this.api.getUserList().subscribe((res) => {
			this.userList = res.body;
			this.currentUserList = this.userList.filter((f) => Number(f.roleId) === Number(this.role!.id));
		});
	}

	reloadUserList() {
		this.getUserList(true);
	}

	getRoleList() {
		this.api.getRoleList().subscribe((res) => {
			this.roleList = res.body.map((i) => ({ ...i, id: i.id.toString() }));
			const roleId = this.route.snapshot.queryParamMap.get("roleId");
			const role = this.roleList.find((f) => f.id === roleId);
			if (role) {
				this.role = role;
				this.onRoleChange(role.id);
				return;
			}
			if (this.roleList.length > 0) {
				this.onRoleChange(this.roleList[0].id);
			}
		});
	}

	onRoleChange(roleId: string) {
		const role = this.roleList.find((f) => f.id === roleId);
		if (role) {
			this.router
				.navigate(["/system/user"], {
					queryParams: {
						roleId,
					},
					queryParamsHandling: "merge",
				})
				.then(() => {
					this.role = role;
					this.currentUserList = this.userList.filter((f) => Number(f.roleId) === Number(role.id));
				});
		}
	}

	onTabChange(index: number) {
		this.tab = index;
		this.router.navigate(["/system/user"], {
			queryParams: {
				tab: index,
			},
			queryParamsHandling: "merge",
		});
	}

	openForm(nzContent: TemplateRef<{}>, event: MouseEvent, role?: UserRoleDTO) {
		event.stopPropagation();
		if (role) {
			this.roleForm.patchValue({
				...role,
				roleId: role.id,
			});
		}
		this.modal.create({
			nzTitle: role ? "编辑角色" : "新增角色",
			nzContent,
			nzOnCancel: () => {
				this.roleForm.reset();
			},
			nzOnOk: async () => {
				if (Utils.validateFormGroup(this.roleForm)) {
					const res = await lastValueFrom(this.api.updateRole(this.roleForm.value));
					this.msg.success(res.desc);
					this.roleForm.reset();
					this.getRoleList();
					return true;
				}
				return false;
			},
		});
	}

	deleteItem(event: MouseEvent, id: string) {
		event.stopPropagation();
		this.modal.confirm({
			nzTitle: "警告",
			nzContent: "是否要删除该角色？",
			nzOkDanger: true,
			nzOnOk: async () => {
				const res = await lastValueFrom(this.api.deleteRole(id));
				this.msg.success(res.desc);
				this.getRoleList();
			},
		});
	}
}