kkerwin
2 years ago
59 changed files with 1239 additions and 298 deletions
@ -1,129 +0,0 @@ |
|||
import { HttpClient, HttpParams } from "@angular/common/http"; |
|||
import { Injectable } from "@angular/core"; |
|||
import { AnyObject, ResponseType } from "@cdk/types"; |
|||
import { Utils } from "@cdk/utils"; |
|||
import { Observable, map, of, tap } from "rxjs"; |
|||
import { PermItemDTO, UserDTO, UserRoleDTO, GlobalEnum, OrgDTO } from "@cdk/public-api"; |
|||
|
|||
@Injectable({ |
|||
providedIn: "root", |
|||
}) |
|||
export class ApiService { |
|||
constructor(private http: HttpClient) {} |
|||
|
|||
globalEnum!: GlobalEnum; |
|||
|
|||
page(v: {}, q: {}) { |
|||
return this.http.get<any>("https://jsonplaceholder.typicode.com/users", v).pipe( |
|||
map((r) => { |
|||
return { |
|||
total: 10, |
|||
content: r, |
|||
}; |
|||
}) |
|||
); |
|||
} |
|||
|
|||
getAllEnum(force?: boolean): Observable<GlobalEnum> { |
|||
if (this.globalEnum && !force) { |
|||
return of(this.globalEnum); |
|||
} |
|||
return this.http.get<ResponseType<GlobalEnum>>("/api/basic/enum").pipe( |
|||
map((res) => { |
|||
return res.body; |
|||
}), |
|||
tap((r) => { |
|||
this.globalEnum = r; |
|||
}) |
|||
); |
|||
} |
|||
|
|||
login(v: {}) { |
|||
const params = Utils.objectToHttpParams(v); |
|||
return this.http.get<ResponseType>("/api/login", { params }); |
|||
} |
|||
|
|||
logout() { |
|||
return this.http.get<ResponseType>("/api/logout"); |
|||
} |
|||
|
|||
getRoleList() { |
|||
return this.http.get<ResponseType<UserRoleDTO[]>>("/api/role"); |
|||
} |
|||
|
|||
deleteRole(roleId: string) { |
|||
const params = new HttpParams().set("roleId", roleId); |
|||
return this.http.delete<ResponseType>("/api/role", { |
|||
params, |
|||
}); |
|||
} |
|||
|
|||
updateRole(rule: AnyObject) { |
|||
const body = Utils.objectToFormData(rule); |
|||
const method = rule["roleId"] ? "post" : "put"; |
|||
return this.http[method]<ResponseType>("/api/role", body); |
|||
} |
|||
|
|||
getRolePerms() { |
|||
return this.http.get<ResponseType<PermItemDTO[]>>("/api/role/item"); |
|||
} |
|||
|
|||
getUserList() { |
|||
return this.http.get<ResponseType<UserDTO[]>>("/api/user"); |
|||
} |
|||
|
|||
checkUid(uid: string) { |
|||
const params = new HttpParams().set("uid", uid); |
|||
return this.http.delete<ResponseType>("/api/user/check", { |
|||
params, |
|||
}); |
|||
} |
|||
|
|||
saveUser(user: AnyObject, edit: boolean) { |
|||
const body = Utils.objectToFormData(user); |
|||
const method = edit ? "post" : "put"; |
|||
return this.http[method]<ResponseType>("/api/user", body); |
|||
} |
|||
|
|||
deleteUser(uid: string) { |
|||
const params = new HttpParams().set("uid", uid); |
|||
return this.http.delete<ResponseType>("/api/user", { |
|||
params, |
|||
}); |
|||
} |
|||
|
|||
getOrgList() { |
|||
return this.http.get<ResponseType<OrgDTO[]>>("/api/vender"); |
|||
} |
|||
|
|||
checkOrgAccount(account: string) { |
|||
const params = new HttpParams().set("account", account); |
|||
return this.http.get<ResponseType<boolean>>("/api/vender/check/account", { |
|||
params, |
|||
}); |
|||
} |
|||
|
|||
checkOrgName(name: string) { |
|||
const params = new HttpParams().set("name", name); |
|||
return this.http.get<ResponseType<boolean>>("/api/vender/check/name", { |
|||
params, |
|||
}); |
|||
} |
|||
|
|||
deleteOrg(id: number) { |
|||
const params = new HttpParams().set("vender", id); |
|||
return this.http.delete<ResponseType>("/api/vender", { |
|||
params, |
|||
}); |
|||
} |
|||
|
|||
saveOrg(org: AnyObject) { |
|||
const body = Utils.objectToFormData(org); |
|||
const method = org["id"] ? "post" : "put"; |
|||
return this.http[method]<ResponseType>("/api/vender", body); |
|||
} |
|||
|
|||
// getOrgConfig() {
|
|||
// return this.http.get<ResponseType>("/api/vender/config");
|
|||
// }
|
|||
} |
|||
@ -1 +1 @@ |
|||
export * from "./api.service"; |
|||
export * from "../../../../cdk/src/services/api.service"; |
|||
|
|||
@ -0,0 +1,234 @@ |
|||
import { HttpClient, HttpParams } from "@angular/common/http"; |
|||
import { Inject, Injectable, InjectionToken } from "@angular/core"; |
|||
import { AnyObject, PageResult, ResponseType } from "@cdk/types"; |
|||
import { Utils } from "@cdk/utils"; |
|||
import { Observable, map, of, tap } from "rxjs"; |
|||
import { |
|||
PermItemDTO, |
|||
UserDTO, |
|||
UserRoleDTO, |
|||
GlobalEnum, |
|||
OrgDTO, |
|||
ClientAccountDTO, |
|||
AdminAccountDTO, |
|||
OrgConfigDTO, |
|||
} from "@cdk/public-api"; |
|||
|
|||
export const PROJECT_NAME = new InjectionToken<string>("projectName"); |
|||
|
|||
@Injectable({ |
|||
providedIn: "root", |
|||
}) |
|||
export class ApiService { |
|||
constructor(private http: HttpClient, @Inject(PROJECT_NAME) public project: string) { |
|||
this.initAccount(); |
|||
} |
|||
|
|||
public account!: ClientAccountDTO; |
|||
|
|||
public adminAccount!: AdminAccountDTO; |
|||
|
|||
public accountKey = this.project === "admin" ? "CATERING_ADMIN_ACCOUNT" : "CATERING_CLIENT_ACCOUNT"; |
|||
|
|||
globalEnum!: GlobalEnum; |
|||
|
|||
page(v: {}, q: {}) { |
|||
return this.http.get<any>("https://jsonplaceholder.typicode.com/users", v).pipe( |
|||
map((r) => { |
|||
return { |
|||
total: 10, |
|||
content: r, |
|||
}; |
|||
}) |
|||
); |
|||
} |
|||
|
|||
initAccount() { |
|||
try { |
|||
const stragedAccount = localStorage.getItem(this.accountKey); |
|||
if (stragedAccount) { |
|||
if (this.project === "admin") { |
|||
this.adminAccount = JSON.parse(stragedAccount); |
|||
} else { |
|||
this.account = JSON.parse(stragedAccount); |
|||
} |
|||
} |
|||
} catch (error) { |
|||
console.error("获取用户信息失败", error); |
|||
} |
|||
} |
|||
|
|||
getAllEnum(force?: boolean): Observable<GlobalEnum> { |
|||
if (this.globalEnum && !force) { |
|||
return of(this.globalEnum); |
|||
} |
|||
return this.http.get<ResponseType<GlobalEnum>>("/api/basic/enum").pipe( |
|||
map((res) => { |
|||
return res.body; |
|||
}), |
|||
tap((r) => { |
|||
this.globalEnum = r; |
|||
}) |
|||
); |
|||
} |
|||
|
|||
login(v: {}) { |
|||
const params = Utils.objectToHttpParams(v); |
|||
return this.http.get<ResponseType>("/api/login", { params }).pipe( |
|||
tap((res) => { |
|||
localStorage.setItem(this.accountKey, JSON.stringify(res.body)); |
|||
this.initAccount(); |
|||
}) |
|||
); |
|||
} |
|||
|
|||
logout() { |
|||
return this.http.get<ResponseType>("/api/logout").pipe( |
|||
tap((res) => { |
|||
if (res.success) { |
|||
localStorage.removeItem(this.accountKey); |
|||
} |
|||
}) |
|||
); |
|||
} |
|||
|
|||
getOrgConfig() { |
|||
return this.http.get<ResponseType<OrgConfigDTO>>("/api/vender/config"); |
|||
} |
|||
|
|||
saveOrgConfig(config: AnyObject) { |
|||
const body = Utils.objectToFormData(config); |
|||
return this.http.post<ResponseType>("/api/vender/config", body); |
|||
} |
|||
|
|||
updatePassword(v: {}) { |
|||
const body = Utils.objectToFormData(v); |
|||
return this.http.post<ResponseType>("/api/basic/user", body); |
|||
} |
|||
|
|||
getRoleList() { |
|||
return this.http.get<ResponseType<UserRoleDTO[]>>("/api/role"); |
|||
} |
|||
|
|||
deleteRole(roleId: string) { |
|||
const params = new HttpParams().set("roleId", roleId); |
|||
return this.http.delete<ResponseType>("/api/role", { |
|||
params, |
|||
}); |
|||
} |
|||
|
|||
updateRole(rule: AnyObject) { |
|||
const body = Utils.objectToFormData(rule); |
|||
const method = rule["roleId"] ? "post" : "put"; |
|||
return this.http[method]<ResponseType>("/api/role", body); |
|||
} |
|||
|
|||
getRolePerms() { |
|||
return this.http.get<ResponseType<PermItemDTO[]>>("/api/role/item"); |
|||
} |
|||
|
|||
getUserList() { |
|||
return this.http.get<ResponseType<UserDTO[]>>("/api/user"); |
|||
} |
|||
|
|||
checkUid(uid: string) { |
|||
const params = new HttpParams().set("uid", uid); |
|||
return this.http.delete<ResponseType>("/api/user/check", { |
|||
params, |
|||
}); |
|||
} |
|||
|
|||
saveUser(user: AnyObject, edit: boolean) { |
|||
const body = Utils.objectToFormData(user); |
|||
const method = edit ? "post" : "put"; |
|||
return this.http[method]<ResponseType>("/api/user", body); |
|||
} |
|||
|
|||
deleteUser(uid: string) { |
|||
const params = new HttpParams().set("uid", uid); |
|||
return this.http.delete<ResponseType>("/api/user", { |
|||
params, |
|||
}); |
|||
} |
|||
|
|||
getOrgList() { |
|||
return this.http.get<ResponseType<OrgDTO[]>>("/api/vender"); |
|||
} |
|||
|
|||
checkOrgAccount(account: string) { |
|||
const params = new HttpParams().set("account", account); |
|||
return this.http.get<ResponseType<boolean>>("/api/vender/check/account", { |
|||
params, |
|||
}); |
|||
} |
|||
|
|||
checkOrgName(name: string) { |
|||
const params = new HttpParams().set("name", name); |
|||
return this.http.get<ResponseType<boolean>>("/api/vender/check/name", { |
|||
params, |
|||
}); |
|||
} |
|||
|
|||
deleteOrg(id: number) { |
|||
const params = new HttpParams().set("vender", id); |
|||
return this.http.delete<ResponseType>("/api/vender", { |
|||
params, |
|||
}); |
|||
} |
|||
|
|||
saveOrg(org: AnyObject) { |
|||
const body = Utils.objectToFormData(org); |
|||
const method = org["id"] ? "post" : "put"; |
|||
return this.http[method]<ResponseType>("/api/vender", body); |
|||
} |
|||
|
|||
// getOrgConfig() {
|
|||
// return this.http.get<ResponseType>("/api/vender/config");
|
|||
// }
|
|||
|
|||
getFoodPage(p: {}, q: {}) { |
|||
const params = Utils.objectStringify({ ...p, ...q }); |
|||
return this.http.get<ResponseType<PageResult>>(`/api/ingredient?${params}`).pipe( |
|||
map((r) => { |
|||
if (Array.isArray(r.body.content)) { |
|||
r.body.content = r.body.content.map((o) => { |
|||
return { |
|||
...o, |
|||
nutrientArr: Object.entries(o.nutrient).map(([k, v]) => { |
|||
const nutrient = this.globalEnum.nutrient.find((f) => f.key === k); |
|||
return { |
|||
key: k, |
|||
value: v, |
|||
label: nutrient?.value, |
|||
measurement: nutrient?.measurement, |
|||
}; |
|||
}), |
|||
}; |
|||
}); |
|||
} |
|||
return r; |
|||
}) |
|||
); |
|||
} |
|||
|
|||
saveFood(food: AnyObject) { |
|||
const body = Utils.objectToFormData(food); |
|||
const method = food["id"] ? "post" : "put"; |
|||
return this.http[method]<ResponseType>("/api/ingredient", body); |
|||
} |
|||
|
|||
deleteFoods(ids: number[]) { |
|||
const params = Utils.objectStringify({ nutrients: ids }); |
|||
console.log("params", params, { nutrients: ids }); |
|||
return this.http.delete<ResponseType>(`/api/ingredient?${params}`); |
|||
} |
|||
|
|||
importFood(f: FormData) { |
|||
return this.http.put<ResponseType>("/api/ingredient/mark", f); |
|||
} |
|||
markFood(mark: string, nutrient: string) { |
|||
const params = Utils.objectToFormData({ mark, nutrient }, false); |
|||
|
|||
return this.http.put<ResponseType>("/api/ingredient/mark", params); |
|||
} |
|||
} |
|||
@ -0,0 +1 @@ |
|||
export * from "./api.service"; |
|||
@ -1,2 +1,4 @@ |
|||
export * from "./app-layout/app-layout.component"; |
|||
export * from "./org-form/org-form.component"; |
|||
export * from "./user-list/user-list.component"; |
|||
export * from "./role-permission/role-permission.component"; |
|||
|
|||
@ -0,0 +1,25 @@ |
|||
<div class="pb-10"> |
|||
<nz-card *ngFor="let group of permissions | keyvalue : returenZero;" nzType="inner" [nzTitle]="group.key" |
|||
class="mb-4"> |
|||
<div nz-row [nzGutter]="[12,12]"> |
|||
<div nz-col nzSpan="8" *ngFor="let perm of group.value"> |
|||
<label nz-checkbox |
|||
[nzChecked]="hasPermissions.has(perm.value)" |
|||
(nzCheckedChange)="onPermissionChange($event,perm.value)"> |
|||
{{perm.label}} |
|||
</label> |
|||
</div> |
|||
</div> |
|||
</nz-card> |
|||
|
|||
<div class="fixed-footter bg-white py-2 absolute left-0 bottom-0 right-0"> |
|||
<div class="flex pl-16"> |
|||
<nz-space> |
|||
<button *nzSpaceItem nz-button nzType="primary" (click)="onSubmit()" [nzLoading]="loading"> |
|||
保存 |
|||
</button> |
|||
</nz-space> |
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
|||
@ -0,0 +1,82 @@ |
|||
import { PermItemDTO, UserRoleDTO } from "@cdk/dtos/user.dto"; |
|||
import { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges } from "@angular/core"; |
|||
import { ActivatedRoute } from "@angular/router"; |
|||
import { AnyObject } from "@cdk/types"; |
|||
import { NzMessageService } from "ng-zorro-antd/message"; |
|||
import { finalize } from "rxjs"; |
|||
import { ApiService } from "@cdk/services"; |
|||
|
|||
@Component({ |
|||
selector: "app-role-permission", |
|||
templateUrl: "./role-permission.component.html", |
|||
styleUrls: ["./role-permission.component.less"], |
|||
}) |
|||
export class RolePermissionComponent implements OnChanges { |
|||
constructor(private api: ApiService, private route: ActivatedRoute, private msg: NzMessageService) {} |
|||
|
|||
@Input() perms: PermItemDTO[] = []; |
|||
|
|||
@Input() role!: UserRoleDTO; |
|||
|
|||
@Output() onReload = new EventEmitter(); |
|||
|
|||
loading = false; |
|||
|
|||
ngOnChanges(changes: SimpleChanges): void { |
|||
if (changes["perms"]?.currentValue) { |
|||
const perms: PermItemDTO[] = changes["perms"].currentValue; |
|||
this.permissions = perms.reduce((a, c) => { |
|||
const key = c["category"]; |
|||
const o = { ...c, label: c.itemName, value: c.id }; |
|||
if (a[key]) { |
|||
a[key].push(o); |
|||
} else { |
|||
a[key] = [o]; |
|||
} |
|||
return a; |
|||
}, {} as Record<string, Array<{ label: string; value: number } & AnyObject>>); |
|||
} |
|||
if (changes["role"]?.currentValue) { |
|||
const role: UserRoleDTO = changes["role"].currentValue; |
|||
let perms: number[] = role.roleItems ?? []; |
|||
this.hasPermissions.clear(); |
|||
perms.forEach((p) => { |
|||
this.hasPermissions.add(p); |
|||
}); |
|||
} |
|||
} |
|||
|
|||
permissions = {}; |
|||
|
|||
hasPermissions = new Set<number>(); |
|||
|
|||
ngOnInit(): void {} |
|||
|
|||
returenZero() { |
|||
return 0; |
|||
} |
|||
|
|||
onPermissionChange(checked: boolean, key: number) { |
|||
if (!checked && this.hasPermissions.has(key)) { |
|||
this.hasPermissions.delete(key); |
|||
} else { |
|||
this.hasPermissions.add(key); |
|||
} |
|||
} |
|||
|
|||
onSubmit() { |
|||
const role = { ...this.role, roleId: this.role.id, items: Array.from(this.hasPermissions) }; |
|||
this.loading = true; |
|||
this.api |
|||
.updateRole(role) |
|||
.pipe( |
|||
finalize(() => { |
|||
this.loading = false; |
|||
}) |
|||
) |
|||
.subscribe((res) => { |
|||
this.msg.success(res.desc); |
|||
this.onReload.emit(); |
|||
}); |
|||
} |
|||
} |
|||
@ -0,0 +1,86 @@ |
|||
<ng-template #searchTpl> |
|||
|
|||
</ng-template> |
|||
|
|||
<div class="flex items-center justify-between"> |
|||
<div> |
|||
<nz-form-item> |
|||
<nz-form-control> |
|||
<nz-input-group [nzSuffix]="suffixIconSearch"> |
|||
<input nz-input placeholder="请输入用户" [(ngModel)]="searchValue" (ngModelChange)="onSearch($event)" /> |
|||
</nz-input-group> |
|||
<ng-template #suffixIconSearch> |
|||
<span nz-icon nzType="search"></span> |
|||
</ng-template> |
|||
</nz-form-control> |
|||
</nz-form-item> |
|||
</div> |
|||
<div> |
|||
<nz-space> |
|||
<button *nzSpaceItem nz-button nzType="primary" (click)="openForm()"> |
|||
<i nz-icon nzType="plus"></i> |
|||
新增用户 |
|||
</button> |
|||
</nz-space> |
|||
</div> |
|||
</div> |
|||
|
|||
<nz-table #table [nzData]="visibledUsers"> |
|||
<thead> |
|||
<tr> |
|||
<th>账号</th> |
|||
<th>姓名</th> |
|||
<th>角色</th> |
|||
<th>添加时间</th> |
|||
<th>操作</th> |
|||
</tr> |
|||
</thead> |
|||
<tbody> |
|||
<tr *ngFor="let data of table.data"> |
|||
<td>{{data.uid}}</td> |
|||
<td>{{data.name}}</td> |
|||
<td>{{data.roleName}}</td> |
|||
<td>{{data.time | date:'yyyy-MM-dd HH:mm:ss'}}</td> |
|||
<td> |
|||
<a (click)="openForm(data)">编辑</a> |
|||
<nz-divider nzType="vertical"></nz-divider> |
|||
<a (click)="deleteItem(data.uid)">删除</a> |
|||
</td> |
|||
</tr> |
|||
</tbody> |
|||
</nz-table> |
|||
|
|||
|
|||
<ng-template #userFormTpl> |
|||
<form nz-form [formGroup]="userFrom"> |
|||
|
|||
<nz-form-item> |
|||
<nz-form-label nzSpan="6" nzRequired> |
|||
姓名 |
|||
</nz-form-label> |
|||
<nz-form-control nzSpan="12" [nzErrorTip]="formErrorTipsTpl"> |
|||
<input nz-input placeholder="请输入用户姓名" formControlName="name" /> |
|||
</nz-form-control> |
|||
</nz-form-item> |
|||
<nz-form-item> |
|||
<nz-form-label nzSpan="6" nzRequired> |
|||
账号 |
|||
</nz-form-label> |
|||
<nz-form-control nzSpan="12" [nzErrorTip]="formErrorTipsTpl"> |
|||
<input nz-input placeholder="请输入用户账号" formControlName="uid" /> |
|||
</nz-form-control> |
|||
</nz-form-item> |
|||
<nz-form-item> |
|||
<nz-form-label nzSpan="6" nzRequired> |
|||
密码 |
|||
</nz-form-label> |
|||
<nz-form-control nzSpan="12" [nzErrorTip]="formErrorTipsTpl"> |
|||
<input nz-input placeholder="请输入用户密码" type="password" formControlName="password" /> |
|||
</nz-form-control> |
|||
</nz-form-item> |
|||
</form> |
|||
</ng-template> |
|||
|
|||
<ng-template #formErrorTipsTpl let-control> |
|||
<form-error-tips [control]="control"></form-error-tips> |
|||
</ng-template> |
|||
@ -0,0 +1,122 @@ |
|||
import { UserDTO, UserRoleDTO } from "@cdk/dtos/user.dto"; |
|||
import { |
|||
Component, |
|||
EventEmitter, |
|||
Input, |
|||
OnChanges, |
|||
OnInit, |
|||
Output, |
|||
SimpleChanges, |
|||
TemplateRef, |
|||
ViewChild, |
|||
} from "@angular/core"; |
|||
import { FormControl, FormGroup } from "@angular/forms"; |
|||
import { ActivatedRoute } from "@angular/router"; |
|||
import { AnyObject, FormValidators, TableListOption, Utils } from "@cdk/public-api"; |
|||
import { MD5 } from "crypto-js"; |
|||
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-user-list", |
|||
templateUrl: "./user-list.component.html", |
|||
styleUrls: ["./user-list.component.less"], |
|||
}) |
|||
export class UserListComponent implements OnChanges { |
|||
constructor( |
|||
private api: ApiService, |
|||
private route: ActivatedRoute, |
|||
private modal: NzModalService, |
|||
private msg: NzMessageService |
|||
) {} |
|||
|
|||
@ViewChild("userFormTpl") public userFormTpl!: TemplateRef<void>; |
|||
|
|||
@Input() users: UserDTO[] = []; |
|||
|
|||
@Input() role!: UserRoleDTO; |
|||
|
|||
@Output() onReload = new EventEmitter(); |
|||
|
|||
searchValue = ""; |
|||
|
|||
visibledUsers: UserDTO[] = []; |
|||
|
|||
public userFrom = new FormGroup({ |
|||
uid: new FormControl("", [FormValidators.required("请输入账号")]), |
|||
name: new FormControl("", [FormValidators.required("请输入姓名")]), |
|||
password: new FormControl("", [FormValidators.required("请输入密码")]), |
|||
}); |
|||
|
|||
ngOnInit(): void {} |
|||
|
|||
ngOnChanges(changes: SimpleChanges): void { |
|||
const u = changes["users"]?.currentValue; |
|||
if (Array.isArray(u)) { |
|||
this.onSearch(this.searchValue); |
|||
} |
|||
} |
|||
|
|||
onSearch(kw: string) { |
|||
this.visibledUsers = this.users.filter((f) => f.name.includes(kw) || f.uid.includes(kw)); |
|||
} |
|||
|
|||
deleteItem(uid: string) { |
|||
this.modal.confirm({ |
|||
nzTitle: "警告", |
|||
nzContent: "是否要删除该用户？", |
|||
nzOkDanger: true, |
|||
nzOnOk: async () => { |
|||
const res = await lastValueFrom(this.api.deleteUser(uid)); |
|||
if (res.success) { |
|||
this.msg.success(res.desc); |
|||
this.onReload.emit(); |
|||
return true; |
|||
} |
|||
return false; |
|||
}, |
|||
}); |
|||
} |
|||
|
|||
resetUserForm() { |
|||
this.userFrom.reset(); |
|||
} |
|||
|
|||
openForm(item?: any) { |
|||
if (item) { |
|||
this.userFrom.patchValue(item); |
|||
} |
|||
this.modal.create({ |
|||
nzTitle: item ? "编辑用户" : "新增用户", |
|||
nzContent: this.userFormTpl, |
|||
nzOnCancel: () => { |
|||
this.resetUserForm(); |
|||
}, |
|||
nzOnOk: async () => { |
|||
if (Utils.validateFormGroup(this.userFrom)) { |
|||
const user = { ...this.userFrom.value, roleId: this.role.id }; |
|||
user["password"] = MD5(user.password!).toString().substring(16).toUpperCase(); |
|||
let notExist = true; |
|||
if ((item && item.uid !== user.uid) || !item) { |
|||
const check = await lastValueFrom(this.api.checkUid(user.uid!)); |
|||
notExist = check.body; |
|||
} |
|||
|
|||
if (notExist) { |
|||
const res = await lastValueFrom(this.api.saveUser(user, Boolean(item))); |
|||
this.msg.success(res.desc); |
|||
this.onReload.emit(); |
|||
this.resetUserForm(); |
|||
return true; |
|||
} else { |
|||
this.msg.error("账号重复"); |
|||
return false; |
|||
} |
|||
} |
|||
return false; |
|||
}, |
|||
}); |
|||
} |
|||
} |
|||
@ -0,0 +1,92 @@ |
|||
<app-page [scroll]="false"> |
|||
|
|||
<div nz-row class="h-full overflow-hidden bg-white rounded-lg"> |
|||
<div nz-col nzFlex="220px" class="user-type"> |
|||
<nz-card |
|||
class="h-full " |
|||
[nzBordered]="false" |
|||
nzTitle="用户角色" |
|||
[nzBodyStyle]="{padding:'1px 0 0 0'}"> |
|||
|
|||
<ul nz-menu nzMode="inline"> |
|||
<li |
|||
*ngFor="let item of roleList" |
|||
nz-menu-item |
|||
(click)="onRoleChange(item.id)" |
|||
[nzSelected]="role?.id === item.id" |
|||
class="flex items-center justify-between role-item"> |
|||
<span> |
|||
{{item.roleName}} |
|||
</span> |
|||
<nz-space nzSize="small" class="options"> |
|||
<a *nzSpaceItem nz-button nzType="link" nzSize="small" |
|||
(click)="openForm(roleFormTpl,$event,item)"> |
|||
<span nz-icon nzType="edit"></span> |
|||
</a> |
|||
<a *nzSpaceItem nz-button nzType="link" nzSize="small" |
|||
(click)="deleteItem($event,item.id)"> |
|||
<span nz-icon nzType="delete"></span> |
|||
</a> |
|||
</nz-space> |
|||
</li> |
|||
</ul> |
|||
<div class="px-4 py-2"> |
|||
<button nz-button nzType="dashed" nzBlock (click)="openForm(roleFormTpl,$event)"> |
|||
<i nz-icon nzType="plus"></i> |
|||
<span> |
|||
新增角色 |
|||
</span> |
|||
</button> |
|||
</div> |
|||
</nz-card> |
|||
</div> |
|||
<div nz-col nzFlex="1" class="flex-1 h-full overflow-hidden bg-white "> |
|||
|
|||
<nz-card [nzBordered]="false" |
|||
class="h-full scroll-card-body "> |
|||
<nz-card-tab> |
|||
<nz-tabset nzSize="large" [nzSelectedIndex]="tab" (nzSelectedIndexChange)="onTabChange($event)"> |
|||
<nz-tab nzTitle="用户列表"></nz-tab> |
|||
<nz-tab nzTitle="权限管理"></nz-tab> |
|||
</nz-tabset> |
|||
</nz-card-tab> |
|||
<div class="p-4"> |
|||
<app-user-list |
|||
*ngIf="role && tab.toString() === '0'" |
|||
[users]="currentUserList" |
|||
[role]="role" |
|||
(onReload)="reloadUserList()"> |
|||
|
|||
</app-user-list> |
|||
<app-role-permission |
|||
*ngIf="role && tab.toString() === '1'" |
|||
[perms]="allPerms" |
|||
[role]="role" |
|||
(onReload)="getRoleList()"> |
|||
</app-role-permission> |
|||
</div> |
|||
</nz-card> |
|||
|
|||
</div> |
|||
</div> |
|||
</app-page> |
|||
|
|||
|
|||
<ng-template #roleFormTpl> |
|||
<form nz-form [formGroup]="roleForm"> |
|||
<nz-form-item> |
|||
<nz-form-label nzSpan="6" nzRequired> |
|||
角色名称 |
|||
</nz-form-label> |
|||
<nz-form-control nzSpan="12" [nzErrorTip]="formErrorTipsTpl"> |
|||
<input nz-input placeholder="请输入角色名称" formControlName="roleName" /> |
|||
</nz-form-control> |
|||
</nz-form-item> |
|||
</form> |
|||
</ng-template> |
|||
|
|||
<ng-template #formErrorTipsTpl let-control> |
|||
<div class="text-left"> |
|||
<form-error-tips [control]="control"></form-error-tips> |
|||
</div> |
|||
</ng-template> |
|||
@ -0,0 +1,29 @@ |
|||
.user-type { |
|||
border-right: 1px solid #e8e8e8; |
|||
|
|||
::ng-deep { |
|||
.ant-menu-inline { |
|||
border-right: none; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.role-head { |
|||
::ng-deep { |
|||
.ant-card-extra { |
|||
padding: 10px 0; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.role-item { |
|||
.options { |
|||
display: none; |
|||
} |
|||
|
|||
&:hover { |
|||
.options { |
|||
display: flex; |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,147 @@ |
|||
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(); |
|||
}, |
|||
}); |
|||
} |
|||
} |
|||
@ -1 +1 @@ |
|||
export * from "./client-api.service"; |
|||
export * from "./auth.guard"; |
|||
|
|||
Loading…
Reference in new issue