kkerwin
2 years ago
36 changed files with 1251 additions and 34 deletions
@ -1,8 +1,25 @@ |
|||
import { Component } from "@angular/core"; |
|||
import { NavigationEnd, Router } from "@angular/router"; |
|||
import { Subject, filter, takeUntil } from "rxjs"; |
|||
|
|||
@Component({ |
|||
selector: "app-layout", |
|||
templateUrl: "./app-layout.component.html", |
|||
styleUrls: ["./app-layout.component.less"], |
|||
}) |
|||
export class AppLayoutComponent {} |
|||
export class AppLayoutComponent { |
|||
constructor(private router: Router) { |
|||
this.router.events |
|||
.pipe( |
|||
takeUntil(this.unSubscribe$), |
|||
filter((e): e is NavigationEnd => e instanceof NavigationEnd) |
|||
) |
|||
.subscribe((e) => { |
|||
this.currentUrl = e.url; |
|||
}); |
|||
} |
|||
|
|||
unSubscribe$ = new Subject<void>(); |
|||
|
|||
currentUrl: string = ""; |
|||
} |
|||
|
|||
@ -1,16 +1,58 @@ |
|||
import { Component, Input, TemplateRef } from "@angular/core"; |
|||
import { Component, Input, OnDestroy, TemplateRef } from "@angular/core"; |
|||
import { ActivatedRoute, NavigationEnd, Router, Scroll } from "@angular/router"; |
|||
import { Subject, filter, startWith, take, takeUntil } from "rxjs"; |
|||
|
|||
interface BreadcrumbInterface { |
|||
label: string; |
|||
href?: string; |
|||
} |
|||
|
|||
@Component({ |
|||
selector: "app-page", |
|||
templateUrl: "./app-page.component.html", |
|||
styleUrls: ["./app-page.component.less"], |
|||
}) |
|||
export class AppPageComponent { |
|||
constructor() {} |
|||
export class AppPageComponent implements OnDestroy { |
|||
constructor(private route: ActivatedRoute, private router: Router) { |
|||
// this.router.events
|
|||
// .pipe(
|
|||
// takeUntil(this.unSubscribe$),
|
|||
// filter((e) => e instanceof NavigationEnd || e instanceof Scroll)
|
|||
// )
|
|||
// .subscribe(() => {
|
|||
// this.genBreadcrumb();
|
|||
// });
|
|||
} |
|||
|
|||
@Input() pageTitle?: TemplateRef<{}> | string; |
|||
|
|||
@Input() full: boolean = false; |
|||
|
|||
@Input() scroll: boolean = true; |
|||
|
|||
@Input() pageExtra?: TemplateRef<{}> | string; |
|||
|
|||
unSubscribe$ = new Subject<void>(); |
|||
|
|||
breadcrumb: BreadcrumbInterface[] = []; |
|||
|
|||
ngOnDestroy(): void { |
|||
this.unSubscribe$.next(); |
|||
this.unSubscribe$.complete(); |
|||
} |
|||
|
|||
genBreadcrumb() { |
|||
let route: ActivatedRoute | null = this.route; |
|||
this.breadcrumb = []; |
|||
while (route) { |
|||
if (route.routeConfig?.title) { |
|||
this.breadcrumb.unshift({ |
|||
label: route.routeConfig!.title as string, |
|||
href: route.routeConfig.path, |
|||
}); |
|||
} |
|||
route = route?.parent ?? null; |
|||
} |
|||
console.log("this.route", this.breadcrumb); |
|||
} |
|||
} |
|||
|
|||
@ -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()"> |
|||
保存 |
|||
</button> |
|||
</nz-space> |
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
|||
@ -0,0 +1,72 @@ |
|||
import { ApiService } from "@admin/app/services"; |
|||
import { Component } from "@angular/core"; |
|||
import { ActivatedRoute } from "@angular/router"; |
|||
|
|||
@Component({ |
|||
selector: "app-role-permission", |
|||
templateUrl: "./role-permission.component.html", |
|||
styleUrls: ["./role-permission.component.less"], |
|||
}) |
|||
export class RolePermissionComponent { |
|||
constructor(private api: ApiService, private route: ActivatedRoute) {} |
|||
|
|||
roleId: string | null = null; |
|||
|
|||
permissions = { |
|||
食材管理: [ |
|||
{ label: "食材列表-查看", value: "1-1" }, |
|||
{ label: "食材-新增/编辑/删除", value: "1-2" }, |
|||
], |
|||
菜品管理: [ |
|||
{ label: "菜品列表-查看", value: "2-1" }, |
|||
{ label: "菜品-新增/编辑/删除", value: "2-2" }, |
|||
], |
|||
食谱管理: [ |
|||
{ label: "食谱列表-查看", value: "3-1" }, |
|||
{ label: "食谱-新增/编辑/删除", value: "3-2" }, |
|||
{ label: "食谱审核列表-查看", value: "3-3" }, |
|||
{ label: "食谱审核列表-通过/驳回", value: "3-4" }, |
|||
{ label: "食谱发布计划-查看", value: "3-5" }, |
|||
{ label: "食谱发布计划-发布/取消发布", value: "3-6" }, |
|||
], |
|||
人群营养标准管理: [ |
|||
{ label: "模型列表-查看", value: "4-1" }, |
|||
{ label: "营养标准模型-新增/编辑/删除", value: "4-2" }, |
|||
], |
|||
单位管理: [ |
|||
{ label: "单位列表-查看", value: "5-1" }, |
|||
{ label: "单位-新增/编辑/启用/禁用/删除", value: "5-2" }, |
|||
], |
|||
系统设置: [ |
|||
{ label: "用户列表-查看", value: "6-1" }, |
|||
{ label: "角色权限-新增/编辑/删除", value: "6-2" }, |
|||
{ label: "用户-新增/编辑/删除", value: "6-3" }, |
|||
], |
|||
}; |
|||
|
|||
hasPermissions = new Set<string>(); |
|||
|
|||
ngOnInit(): void { |
|||
this.route.queryParamMap.subscribe((r) => { |
|||
this.roleId = r.get("roleId"); |
|||
if (this.roleId) { |
|||
} |
|||
}); |
|||
} |
|||
|
|||
returenZero() { |
|||
return 0; |
|||
} |
|||
|
|||
onPermissionChange(checked: boolean, key: string) { |
|||
if (!checked && this.hasPermissions.has(key)) { |
|||
this.hasPermissions.delete(key); |
|||
} else { |
|||
this.hasPermissions.add(key); |
|||
} |
|||
} |
|||
|
|||
onSubmit() { |
|||
console.log("this.hasPermissions", this.hasPermissions); |
|||
} |
|||
} |
|||
@ -0,0 +1,49 @@ |
|||
<table-list [props]="tableList" [search]="searchTpl" [action]="pageExtraTpl" [formGroup]="queryForm"> |
|||
<ng-template #searchTpl> |
|||
<nz-form-item> |
|||
<nz-form-control> |
|||
<input nz-input placeholder="请输入用户" formControlName="name" /> |
|||
</nz-form-control> |
|||
</nz-form-item> |
|||
</ng-template> |
|||
</table-list> |
|||
|
|||
<ng-template #pageExtraTpl> |
|||
<nz-space> |
|||
<button *nzSpaceItem nz-button nzType="primary" (click)="openForm()"> |
|||
<i nz-icon nzType="plus"></i> |
|||
新增用户 |
|||
</button> |
|||
</nz-space> |
|||
</ng-template> |
|||
|
|||
|
|||
<ng-template #userFormTpl> |
|||
<form nz-form> |
|||
|
|||
<nz-form-item> |
|||
<nz-form-label nzSpan="6" nzRequired> |
|||
姓名 |
|||
</nz-form-label> |
|||
<nz-form-control nzSpan="12"> |
|||
<input nz-input placeholder="请输入用户姓名" /> |
|||
</nz-form-control> |
|||
</nz-form-item> |
|||
<nz-form-item> |
|||
<nz-form-label nzSpan="6" nzRequired> |
|||
账号 |
|||
</nz-form-label> |
|||
<nz-form-control nzSpan="12"> |
|||
<input nz-input placeholder="请输入用户账号" /> |
|||
</nz-form-control> |
|||
</nz-form-item> |
|||
<nz-form-item> |
|||
<nz-form-label nzSpan="6" nzRequired> |
|||
密码 |
|||
</nz-form-label> |
|||
<nz-form-control nzSpan="12"> |
|||
<input nz-input placeholder="请输入用户密码" type="password" /> |
|||
</nz-form-control> |
|||
</nz-form-item> |
|||
</form> |
|||
</ng-template> |
|||
@ -0,0 +1,73 @@ |
|||
import { ApiService } from "@admin/app/services"; |
|||
import { Component, OnInit, TemplateRef, ViewChild } from "@angular/core"; |
|||
import { FormControl, FormGroup } from "@angular/forms"; |
|||
import { ActivatedRoute } from "@angular/router"; |
|||
import { AnyObject, TableListOption } from "@cdk/public-api"; |
|||
import { NzModalService } from "ng-zorro-antd/modal"; |
|||
|
|||
@Component({ |
|||
selector: "app-user-list", |
|||
templateUrl: "./user-list.component.html", |
|||
styleUrls: ["./user-list.component.less"], |
|||
}) |
|||
export class UserListComponent { |
|||
constructor(private api: ApiService, private route: ActivatedRoute, private modal: NzModalService) {} |
|||
|
|||
@ViewChild("userFormTpl") public userFormTpl!: TemplateRef<void>; |
|||
|
|||
public tableList = new TableListOption(this.fetchData.bind(this), { |
|||
manual: true, |
|||
}); |
|||
|
|||
public queryForm = new FormGroup({ |
|||
name: new FormControl(""), |
|||
}); |
|||
|
|||
roleId: string | null = null; |
|||
|
|||
ngOnInit(): void { |
|||
this.route.queryParamMap.subscribe((r) => { |
|||
this.roleId = r.get("roleId"); |
|||
if (this.roleId) { |
|||
this.tableList.reset(); |
|||
} |
|||
}); |
|||
this.initTableList(); |
|||
} |
|||
|
|||
initTableList() { |
|||
this.tableList.scroll = { x: null }; |
|||
this.tableList = this.tableList.setColumns([ |
|||
{ key: "name", title: "账号" }, |
|||
{ key: "name", title: "姓名" }, |
|||
{ key: "name", title: "角色" }, |
|||
{ key: "name", title: "添加时间" }, |
|||
]); |
|||
|
|||
this.tableList = this.tableList.setOptions([ |
|||
{ |
|||
title: "编辑", |
|||
premissions: [], |
|||
onClick: this.openForm.bind(this), |
|||
}, |
|||
{ |
|||
title: "删除", |
|||
premissions: [], |
|||
onClick: this.deleteItem.bind(this), |
|||
}, |
|||
]); |
|||
} |
|||
|
|||
fetchData(query: AnyObject, pager: AnyObject) { |
|||
return this.api.page(pager, query); |
|||
} |
|||
|
|||
deleteItem() {} |
|||
|
|||
openForm(item?: any) { |
|||
this.modal.create({ |
|||
nzTitle: item ? "编辑用户" : "新增用户", |
|||
nzContent: this.userFormTpl, |
|||
}); |
|||
} |
|||
} |
|||
@ -0,0 +1,104 @@ |
|||
<app-page> |
|||
<form nz-form [formGroup]="formGroup" nzLayout="vertical"> |
|||
|
|||
<nz-card nzTitle="单位基础信息"> |
|||
<nz-form-item> |
|||
<nz-form-label nzRequired> |
|||
单位名称 |
|||
</nz-form-label> |
|||
<nz-form-control [nzErrorTip]="formControlErrorTpl" nzSpan="12"> |
|||
<input nz-input placeholder="请输入单位名称" /> |
|||
</nz-form-control> |
|||
</nz-form-item> |
|||
<nz-form-item> |
|||
<nz-form-label> |
|||
单位Logo |
|||
</nz-form-label> |
|||
<nz-form-control [nzErrorTip]="formControlErrorTpl" nzSpan="12"> |
|||
<button class="upload-btn " nz-button [nzLoading]="uploadLoading"> |
|||
<i nz-icon nzType="upload"></i> |
|||
上传图片 |
|||
<input type="file" formControlName="logo" (change)="onFileChange($event)" /> |
|||
</button> |
|||
</nz-form-control> |
|||
</nz-form-item> |
|||
<nz-form-item> |
|||
<nz-form-label> |
|||
地址 |
|||
</nz-form-label> |
|||
<nz-form-control [nzErrorTip]="formControlErrorTpl" nzSpan="12"> |
|||
<input nz-input placeholder="请输入单位地址" /> |
|||
</nz-form-control> |
|||
</nz-form-item> |
|||
<nz-form-item> |
|||
<nz-form-label> |
|||
联系人 |
|||
</nz-form-label> |
|||
<nz-form-control [nzErrorTip]="formControlErrorTpl" nzSpan="12"> |
|||
<input nz-input placeholder="请输入联系人" /> |
|||
</nz-form-control> |
|||
</nz-form-item> |
|||
<nz-form-item> |
|||
<nz-form-label> |
|||
联系电话 |
|||
</nz-form-label> |
|||
<nz-form-control [nzErrorTip]="formControlErrorTpl" nzSpan="12"> |
|||
<input nz-input placeholder="请输入联系电话" /> |
|||
</nz-form-control> |
|||
</nz-form-item> |
|||
<nz-form-item> |
|||
<nz-form-label> |
|||
邮箱 |
|||
</nz-form-label> |
|||
<nz-form-control [nzErrorTip]="formControlErrorTpl" nzSpan="12"> |
|||
<input nz-input placeholder="请输入邮箱" /> |
|||
</nz-form-control> |
|||
</nz-form-item> |
|||
|
|||
</nz-card> |
|||
|
|||
<nz-card nzTitle="账号信息" class="my-4"> |
|||
<nz-form-item> |
|||
<nz-form-label nzRequired> |
|||
账号 |
|||
</nz-form-label> |
|||
<nz-form-control [nzErrorTip]="formControlErrorTpl" nzSpan="12"> |
|||
<input nz-input placeholder="请输入账号" /> |
|||
</nz-form-control> |
|||
</nz-form-item> |
|||
<nz-form-item> |
|||
<nz-form-label nzRequired> |
|||
初始密码 |
|||
</nz-form-label> |
|||
<nz-form-control [nzErrorTip]="formControlErrorTpl" nzSpan="12"> |
|||
<input nz-input type="password" placeholder="请输入初始密码" /> |
|||
</nz-form-control> |
|||
</nz-form-item> |
|||
<nz-form-item> |
|||
<nz-form-label nzRequired> |
|||
账号到期时间 |
|||
</nz-form-label> |
|||
<nz-form-control [nzErrorTip]="formControlErrorTpl" nzSpan="12"> |
|||
<nz-date-picker nzPlaceHolder="请选择账号到期时间" class="w-full"></nz-date-picker> |
|||
</nz-form-control> |
|||
</nz-form-item> |
|||
|
|||
|
|||
</nz-card> |
|||
|
|||
|
|||
<div class="fixed-footter left-[218px] fixed bottom-0 right-0 bg-white z-10 pl-8 py-2"> |
|||
<nz-space> |
|||
<button *nzSpaceItem nz-button nzType="primary" (click)="onSubmit()"> |
|||
确定 |
|||
</button> |
|||
<button *nzSpaceItem nz-button> |
|||
取消 |
|||
</button> |
|||
</nz-space> |
|||
</div> |
|||
</form> |
|||
<ng-template #formControlErrorTpl let-control> |
|||
<form-error-tips [control]="control"></form-error-tips> |
|||
</ng-template> |
|||
</app-page> |
|||
@ -0,0 +1,54 @@ |
|||
import { Component } from "@angular/core"; |
|||
import { FormBuilder, FormGroup } from "@angular/forms"; |
|||
import { FormValidators } from "@cdk/validators"; |
|||
|
|||
@Component({ |
|||
selector: "app-organization-form", |
|||
templateUrl: "./organization-form.component.html", |
|||
styleUrls: ["./organization-form.component.less"], |
|||
}) |
|||
export class OrganizationFormComponent { |
|||
constructor(private fb: FormBuilder) {} |
|||
|
|||
formGroup!: FormGroup; |
|||
|
|||
uploadLoading = false; |
|||
|
|||
ngOnInit(): void { |
|||
this.formGroup = this.fb.group({ |
|||
id: this.fb.control("", [FormValidators.required()]), |
|||
name: this.fb.control("", [FormValidators.required()]), |
|||
unit: this.fb.control("", [FormValidators.required()]), |
|||
day: this.fb.control("1", [FormValidators.required()]), |
|||
logo: this.fb.control("", []), |
|||
month: this.fb.control([], []), |
|||
}); |
|||
} |
|||
onSubmit() {} |
|||
|
|||
onFileChange(e: Event) { |
|||
const target = e.target as HTMLInputElement; |
|||
const file = target.files![0]; |
|||
target.value = ""; |
|||
const formData = new FormData(); |
|||
const fileReader = new FileReader(); |
|||
fileReader.onload = () => { |
|||
const base64 = fileReader.result as string; |
|||
|
|||
const v = base64.split("base64,")[1]; |
|||
}; |
|||
formData.append("file", file); |
|||
this.uploadLoading = true; |
|||
// this.api
|
|||
// .uploadLogo(formData)
|
|||
// .pipe(
|
|||
// finalize(() => {
|
|||
// this.uploadLoading = false;
|
|||
// })
|
|||
// )
|
|||
// .subscribe((r) => {
|
|||
// this.msg.success(r.desc);
|
|||
// fileReader.readAsDataURL(file);
|
|||
// });
|
|||
} |
|||
} |
|||
@ -0,0 +1,59 @@ |
|||
<app-page> |
|||
<ng-template #pageExtraTpl> |
|||
<nz-space> |
|||
<button *nzSpaceItem nz-button nzType="primary" [routerLink]="['/','organization','form','create']"> |
|||
<i nz-icon nzType="plus"></i> |
|||
新增单位 |
|||
</button> |
|||
</nz-space> |
|||
</ng-template> |
|||
<div class="h-full overflow-hidden bg-white rounded-lg"> |
|||
|
|||
<nz-card [nzBordered]="false" nzTitle="单位列表"> |
|||
<table-list [props]="tableList" [search]="searchTpl" [action]="pageExtraTpl" [formGroup]="queryForm" |
|||
[renderColumns]="renderColumnsTpl"> |
|||
|
|||
<ng-template #actionTpl> |
|||
<button nz-button>批量删除</button> |
|||
</ng-template> |
|||
<ng-template #searchTpl> |
|||
<nz-form-item class="w-40"> |
|||
<nz-form-control> |
|||
<nz-select nzPlaceHolder="单位类型" [nzOptions]="[]"></nz-select> |
|||
</nz-form-control> |
|||
</nz-form-item> |
|||
<nz-form-item class="w-60"> |
|||
<nz-form-control> |
|||
<input nz-input placeholder="请输入单位名称" /> |
|||
</nz-form-control> |
|||
</nz-form-item> |
|||
|
|||
</ng-template> |
|||
<ng-template #renderColumnsTpl let-data let-key="key" let-row="row"> |
|||
<ng-container [ngSwitch]="key"> |
|||
<ng-container *ngSwitchCase="'img'"> |
|||
|
|||
</ng-container> |
|||
<ng-container *ngSwitchDefault> |
|||
|
|||
{{data}} |
|||
|
|||
</ng-container> |
|||
</ng-container> |
|||
</ng-template> |
|||
</table-list> |
|||
</nz-card> |
|||
</div> |
|||
</app-page> |
|||
|
|||
|
|||
<ng-template #formFooterTpl> |
|||
<nz-space> |
|||
<button *nzSpaceItem nz-button (click)="cancelFoodForm()"> |
|||
取消 |
|||
</button> |
|||
<button *nzSpaceItem nz-button nzType="primary"> |
|||
保存 |
|||
</button> |
|||
</nz-space> |
|||
</ng-template> |
|||
@ -0,0 +1,82 @@ |
|||
import { Component, OnInit, TemplateRef, ViewChild } from "@angular/core"; |
|||
import { FormControl, FormGroup } from "@angular/forms"; |
|||
import { NzDrawerRef, NzDrawerService } from "ng-zorro-antd/drawer"; |
|||
import { AnyObject, TableListOption } from "@cdk/public-api"; |
|||
import { DishFormComponent } from "@admin/app/components"; |
|||
import { ApiService } from "@admin/app/services"; |
|||
|
|||
@Component({ |
|||
selector: "app-organization-list", |
|||
templateUrl: "./organization-list.component.html", |
|||
styleUrls: ["./organization-list.component.less"], |
|||
}) |
|||
export class OrganizationListComponent { |
|||
constructor(private drawer: NzDrawerService, private api: ApiService) {} |
|||
|
|||
@ViewChild("formFooterTpl") formFooterTpl!: TemplateRef<{}>; |
|||
|
|||
private drawerRef?: NzDrawerRef; |
|||
|
|||
public tableList = new TableListOption(this.fetchData.bind(this), { |
|||
selectable: true, |
|||
}); |
|||
|
|||
public queryForm = new FormGroup({ |
|||
name: new FormControl(""), |
|||
}); |
|||
|
|||
ngOnInit(): void { |
|||
this.initTableList(); |
|||
} |
|||
|
|||
initTableList() { |
|||
this.tableList.scroll = { x: null }; |
|||
this.tableList = this.tableList.setColumns([ |
|||
{ key: "name", title: "账号" }, |
|||
{ key: "name", title: "单位名称" }, |
|||
{ key: "name", title: "单位类型" }, |
|||
{ key: "name", title: "地址", width: "30%" }, |
|||
{ key: "name", title: "联系人" }, |
|||
{ key: "name", title: "联系电话" }, |
|||
{ key: "name", title: "使用状态" }, |
|||
{ key: "name", title: "到期时间" }, |
|||
]); |
|||
|
|||
this.tableList = this.tableList.setOptions([ |
|||
{ |
|||
title: "续费", |
|||
premissions: [], |
|||
onClick: this.showFoodForm.bind(this), |
|||
}, |
|||
{ |
|||
title: "编辑", |
|||
premissions: [], |
|||
onClick: this.showFoodForm.bind(this), |
|||
}, |
|||
{ |
|||
title: "删除", |
|||
premissions: [], |
|||
onClick: this.deleteItem.bind(this), |
|||
}, |
|||
]); |
|||
} |
|||
|
|||
fetchData(query: AnyObject, pager: AnyObject) { |
|||
return this.api.page(pager, query); |
|||
} |
|||
|
|||
showFoodForm(food?: any) { |
|||
this.drawerRef = this.drawer.create({ |
|||
nzTitle: food ? "编辑菜品" : "新增菜品", |
|||
nzWidth: 700, |
|||
nzContent: DishFormComponent, |
|||
nzFooter: this.formFooterTpl, |
|||
}); |
|||
} |
|||
|
|||
cancelFoodForm() { |
|||
this.drawerRef?.close(); |
|||
} |
|||
|
|||
deleteItem() {} |
|||
} |
|||
@ -0,0 +1,59 @@ |
|||
<app-page> |
|||
<form nz-form [formGroup]="formGroup" nzLayout="vertical"> |
|||
|
|||
<nz-card nzTitle="新增营养标准"> |
|||
<nz-form-item> |
|||
<nz-form-label nzRequired> |
|||
营养标准名称 |
|||
</nz-form-label> |
|||
<nz-form-control [nzErrorTip]="formControlErrorTpl" nzSpan="12"> |
|||
<input nz-input placeholder="请输入营养标准名称" /> |
|||
</nz-form-control> |
|||
</nz-form-item> |
|||
|
|||
<nz-form-item> |
|||
<nz-form-label nzRequired> |
|||
溢出范围 |
|||
</nz-form-label> |
|||
<nz-form-control [nzErrorTip]="formControlErrorTpl" nzSpan="12"> |
|||
<nz-input-group nzAddOnBefore="±" nzAddOnAfter="%"> |
|||
<input nz-input /> |
|||
</nz-input-group> |
|||
</nz-form-control> |
|||
</nz-form-item> |
|||
|
|||
<nz-form-item> |
|||
<nz-form-label nzRequired> |
|||
适用单位 |
|||
</nz-form-label> |
|||
<nz-form-control [nzErrorTip]="formControlErrorTpl" nzSpan="12"> |
|||
<nz-select [nzOptions]="[]" nzMode="multiple" nzPlaceHolder="请选择适用单位"></nz-select> |
|||
</nz-form-control> |
|||
</nz-form-item> |
|||
<nz-form-item> |
|||
<nz-form-control [nzErrorTip]="formControlErrorTpl" nzSpan="12"> |
|||
<nz-space> |
|||
<button *nzSpaceItem nz-button nzType="primary" (click)="onSubmit()"> |
|||
保存并设置营养标准 |
|||
</button> |
|||
<button *nzSpaceItem nz-button nzType="primary" (click)="onSubmit()"> |
|||
确定 |
|||
</button> |
|||
<button *nzSpaceItem nz-button> |
|||
取消 |
|||
</button> |
|||
</nz-space> |
|||
</nz-form-control> |
|||
</nz-form-item> |
|||
|
|||
|
|||
</nz-card> |
|||
|
|||
|
|||
|
|||
|
|||
</form> |
|||
<ng-template #formControlErrorTpl let-control> |
|||
<form-error-tips [control]="control"></form-error-tips> |
|||
</ng-template> |
|||
</app-page> |
|||
@ -0,0 +1,57 @@ |
|||
import { Component } from "@angular/core"; |
|||
import { FormBuilder, FormGroup } from "@angular/forms"; |
|||
import { Router } from "@angular/router"; |
|||
import { FormValidators } from "@cdk/validators"; |
|||
|
|||
@Component({ |
|||
selector: "app-standard-form", |
|||
templateUrl: "./standard-form.component.html", |
|||
styleUrls: ["./standard-form.component.less"], |
|||
}) |
|||
export class StandardFormComponent { |
|||
constructor(private fb: FormBuilder, private router: Router) {} |
|||
|
|||
formGroup!: FormGroup; |
|||
|
|||
uploadLoading = false; |
|||
|
|||
ngOnInit(): void { |
|||
this.formGroup = this.fb.group({ |
|||
id: this.fb.control("", [FormValidators.required()]), |
|||
name: this.fb.control("", [FormValidators.required()]), |
|||
unit: this.fb.control("", [FormValidators.required()]), |
|||
day: this.fb.control("1", [FormValidators.required()]), |
|||
logo: this.fb.control("", []), |
|||
month: this.fb.control([], []), |
|||
}); |
|||
} |
|||
onSubmit() { |
|||
this.router.navigate(["/", "standard", "setting", "45"]); |
|||
} |
|||
|
|||
onFileChange(e: Event) { |
|||
const target = e.target as HTMLInputElement; |
|||
const file = target.files![0]; |
|||
target.value = ""; |
|||
const formData = new FormData(); |
|||
const fileReader = new FileReader(); |
|||
fileReader.onload = () => { |
|||
const base64 = fileReader.result as string; |
|||
|
|||
const v = base64.split("base64,")[1]; |
|||
}; |
|||
formData.append("file", file); |
|||
this.uploadLoading = true; |
|||
// this.api
|
|||
// .uploadLogo(formData)
|
|||
// .pipe(
|
|||
// finalize(() => {
|
|||
// this.uploadLoading = false;
|
|||
// })
|
|||
// )
|
|||
// .subscribe((r) => {
|
|||
// this.msg.success(r.desc);
|
|||
// fileReader.readAsDataURL(file);
|
|||
// });
|
|||
} |
|||
} |
|||
@ -0,0 +1,52 @@ |
|||
<app-page> |
|||
<ng-template #pageExtraTpl> |
|||
<nz-space> |
|||
<button *nzSpaceItem nz-button nzType="primary" [routerLink]="['/','standard','form','create']"> |
|||
<i nz-icon nzType="plus"></i> |
|||
新增营养标准 |
|||
</button> |
|||
</nz-space> |
|||
</ng-template> |
|||
<div class="h-full overflow-hidden bg-white rounded-lg"> |
|||
|
|||
<nz-card [nzBordered]="false" nzTitle="营养标准列表"> |
|||
<table-list [props]="tableList" [search]="searchTpl" [action]="pageExtraTpl" [formGroup]="queryForm" |
|||
[renderColumns]="renderColumnsTpl"> |
|||
|
|||
|
|||
<ng-template #searchTpl> |
|||
<nz-form-item class="w-60"> |
|||
<nz-form-control> |
|||
<input nz-input placeholder="请输入营养标准名称" /> |
|||
</nz-form-control> |
|||
</nz-form-item> |
|||
|
|||
</ng-template> |
|||
<ng-template #renderColumnsTpl let-data let-key="key" let-row="row"> |
|||
<ng-container [ngSwitch]="key"> |
|||
<ng-container *ngSwitchCase="'img'"> |
|||
|
|||
</ng-container> |
|||
<ng-container *ngSwitchDefault> |
|||
|
|||
{{data}} |
|||
|
|||
</ng-container> |
|||
</ng-container> |
|||
</ng-template> |
|||
</table-list> |
|||
</nz-card> |
|||
</div> |
|||
</app-page> |
|||
|
|||
|
|||
<ng-template #formFooterTpl> |
|||
<nz-space> |
|||
<button *nzSpaceItem nz-button (click)="cancelFoodForm()"> |
|||
取消 |
|||
</button> |
|||
<button *nzSpaceItem nz-button nzType="primary"> |
|||
保存 |
|||
</button> |
|||
</nz-space> |
|||
</ng-template> |
|||
@ -0,0 +1,76 @@ |
|||
import { Component, OnInit, TemplateRef, ViewChild } from "@angular/core"; |
|||
import { FormControl, FormGroup } from "@angular/forms"; |
|||
import { NzDrawerRef, NzDrawerService } from "ng-zorro-antd/drawer"; |
|||
import { AnyObject, TableListOption } from "@cdk/public-api"; |
|||
import { DishFormComponent } from "@admin/app/components"; |
|||
import { ApiService } from "@admin/app/services"; |
|||
|
|||
@Component({ |
|||
selector: "app-standard-list", |
|||
templateUrl: "./standard-list.component.html", |
|||
styleUrls: ["./standard-list.component.less"], |
|||
}) |
|||
export class StandardListComponent { |
|||
constructor(private drawer: NzDrawerService, private api: ApiService) {} |
|||
|
|||
@ViewChild("formFooterTpl") formFooterTpl!: TemplateRef<{}>; |
|||
|
|||
private drawerRef?: NzDrawerRef; |
|||
|
|||
public tableList = new TableListOption(this.fetchData.bind(this)); |
|||
|
|||
public queryForm = new FormGroup({ |
|||
name: new FormControl(""), |
|||
}); |
|||
|
|||
ngOnInit(): void { |
|||
this.initTableList(); |
|||
} |
|||
|
|||
initTableList() { |
|||
this.tableList.scroll = { x: null }; |
|||
this.tableList = this.tableList.setColumns([ |
|||
{ key: "name", title: "营养标准名称" }, |
|||
{ key: "name", title: "人群细分" }, |
|||
{ key: "name", title: "适用单位" }, |
|||
{ key: "name", title: "更新时间" }, |
|||
]); |
|||
|
|||
this.tableList = this.tableList.setOptions([ |
|||
{ |
|||
title: "标准设置", |
|||
premissions: [], |
|||
onClick: this.showFoodForm.bind(this), |
|||
}, |
|||
{ |
|||
title: "编辑", |
|||
premissions: [], |
|||
onClick: this.showFoodForm.bind(this), |
|||
}, |
|||
{ |
|||
title: "删除", |
|||
premissions: [], |
|||
onClick: this.deleteItem.bind(this), |
|||
}, |
|||
]); |
|||
} |
|||
|
|||
fetchData(query: AnyObject, pager: AnyObject) { |
|||
return this.api.page(pager, query); |
|||
} |
|||
|
|||
showFoodForm(food?: any) { |
|||
this.drawerRef = this.drawer.create({ |
|||
nzTitle: food ? "编辑菜品" : "新增菜品", |
|||
nzWidth: 700, |
|||
nzContent: DishFormComponent, |
|||
nzFooter: this.formFooterTpl, |
|||
}); |
|||
} |
|||
|
|||
cancelFoodForm() { |
|||
this.drawerRef?.close(); |
|||
} |
|||
|
|||
deleteItem() {} |
|||
} |
|||
@ -0,0 +1,42 @@ |
|||
<app-page> |
|||
<form nz-form [formGroup]="formGroup" nzLayout="vertical"> |
|||
|
|||
<nz-card nzTitle="食物种类及数量标准设置"> |
|||
<div nz-row [nzGutter]="12"> |
|||
<div nz-col nzSpan="12"> |
|||
<ng-template #dayBtnTpl> |
|||
<button nz-button nzType="link"> |
|||
添加食物种类 |
|||
</button> |
|||
</ng-template> |
|||
<nz-card nzType="inner" nzTitle="食物种类及数量标准（日）" [nzExtra]="dayBtnTpl"> |
|||
<div class=" overflow-y-auto h-80"> |
|||
add |
|||
</div> |
|||
</nz-card> |
|||
</div> |
|||
<div nz-col nzSpan="12"> |
|||
<ng-template #weekBtnTpl> |
|||
<button nz-button nzType="link"> |
|||
添加食物种类 |
|||
</button> |
|||
</ng-template> |
|||
<nz-card nzType="inner" nzTitle="食物种类及数量标准（周）" [nzExtra]="weekBtnTpl"> |
|||
<div class=" overflow-y-auto h-80"> |
|||
|
|||
</div> |
|||
</nz-card> |
|||
</div> |
|||
</div> |
|||
</nz-card> |
|||
|
|||
<nz-card nzTitle="人群名称1" class="mt-4"></nz-card> |
|||
|
|||
|
|||
|
|||
|
|||
</form> |
|||
<ng-template #formControlErrorTpl let-control> |
|||
<form-error-tips [control]="control"></form-error-tips> |
|||
</ng-template> |
|||
</app-page> |
|||
@ -0,0 +1,57 @@ |
|||
import { Component } from "@angular/core"; |
|||
import { FormBuilder, FormGroup } from "@angular/forms"; |
|||
import { Router } from "@angular/router"; |
|||
import { FormValidators } from "@cdk/validators"; |
|||
|
|||
@Component({ |
|||
selector: "app-standard-setting", |
|||
templateUrl: "./standard-setting.component.html", |
|||
styleUrls: ["./standard-setting.component.less"], |
|||
}) |
|||
export class StandardSettingComponent { |
|||
constructor(private fb: FormBuilder, private router: Router) {} |
|||
|
|||
formGroup!: FormGroup; |
|||
|
|||
uploadLoading = false; |
|||
|
|||
ngOnInit(): void { |
|||
this.formGroup = this.fb.group({ |
|||
id: this.fb.control("", [FormValidators.required()]), |
|||
name: this.fb.control("", [FormValidators.required()]), |
|||
unit: this.fb.control("", [FormValidators.required()]), |
|||
day: this.fb.control("1", [FormValidators.required()]), |
|||
logo: this.fb.control("", []), |
|||
month: this.fb.control([], []), |
|||
}); |
|||
} |
|||
onSubmit() { |
|||
this.router.navigate(["/", "standard", "setting", "45"]); |
|||
} |
|||
|
|||
onFileChange(e: Event) { |
|||
const target = e.target as HTMLInputElement; |
|||
const file = target.files![0]; |
|||
target.value = ""; |
|||
const formData = new FormData(); |
|||
const fileReader = new FileReader(); |
|||
fileReader.onload = () => { |
|||
const base64 = fileReader.result as string; |
|||
|
|||
const v = base64.split("base64,")[1]; |
|||
}; |
|||
formData.append("file", file); |
|||
this.uploadLoading = true; |
|||
// this.api
|
|||
// .uploadLogo(formData)
|
|||
// .pipe(
|
|||
// finalize(() => {
|
|||
// this.uploadLoading = false;
|
|||
// })
|
|||
// )
|
|||
// .subscribe((r) => {
|
|||
// this.msg.success(r.desc);
|
|||
// fileReader.readAsDataURL(file);
|
|||
// });
|
|||
} |
|||
} |
|||
@ -0,0 +1,88 @@ |
|||
<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 |
|||
nz-menu-item |
|||
(click)="onRoleChange('super')" |
|||
[nzSelected]="roleId === 'super'" |
|||
class="flex items-center justify-between"> |
|||
<span> |
|||
超级管理员12 |
|||
</span> |
|||
<a nz-button nzType="text" nz-dropdown [nzDropdownMenu]="menu"> |
|||
<span nz-icon nzType="more"></span> |
|||
</a> |
|||
<nz-dropdown-menu #menu="nzDropdownMenu"> |
|||
<ul nz-menu nzSelectable> |
|||
<li nz-menu-item (click)="openForm(roleFormTpl,$event,'super')">编辑</li> |
|||
<li nz-menu-item nzDanger (click)="deleteItem($event,'super')">删除</li> |
|||
</ul> |
|||
</nz-dropdown-menu> |
|||
</li> |
|||
<li nz-menu-item (click)="onRoleChange('1')" [nzSelected]="roleId === '1'"> |
|||
<a> |
|||
自定义管理员1 |
|||
</a> |
|||
</li> |
|||
<li nz-menu-item (click)="onRoleChange('2')" [nzSelected]="roleId === '2'"> |
|||
<a> |
|||
自定义管理员2 |
|||
</a> |
|||
</li> |
|||
<li nz-menu-item (click)="onRoleChange('3')" [nzSelected]="roleId === '3'"> |
|||
<a> |
|||
自定义管理员3 |
|||
</a> |
|||
</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="tab.toString() === '0'"></app-user-list> |
|||
<app-role-permission *ngIf="tab.toString() === '1'"></app-role-permission> |
|||
</div> |
|||
</nz-card> |
|||
|
|||
</div> |
|||
</div> |
|||
</app-page> |
|||
|
|||
|
|||
<ng-template #roleFormTpl> |
|||
<form nz-form> |
|||
<nz-form-item> |
|||
<nz-form-label nzSpan="6" nzRequired> |
|||
角色名称 |
|||
</nz-form-label> |
|||
<nz-form-control nzSpan="12"> |
|||
<input nz-input placeholder="请输入角色名称" /> |
|||
</nz-form-control> |
|||
</nz-form-item> |
|||
</form> |
|||
</ng-template> |
|||
@ -0,0 +1,17 @@ |
|||
.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; |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,68 @@ |
|||
import { FoodFormComponent } from "@admin/app/components"; |
|||
import { ApiService } from "@admin/app/services"; |
|||
import { Component, OnInit, TemplateRef, ViewChild } from "@angular/core"; |
|||
import { FormControl, FormGroup } from "@angular/forms"; |
|||
import { ActivatedRoute, Router } from "@angular/router"; |
|||
import { AnyObject, TableListOption } from "@cdk/public-api"; |
|||
import { NzDrawerRef, NzDrawerService } from "ng-zorro-antd/drawer"; |
|||
import { NzModalService } from "ng-zorro-antd/modal"; |
|||
|
|||
@Component({ |
|||
selector: "app-user-manage", |
|||
templateUrl: "./user-manage.component.html", |
|||
styleUrls: ["./user-manage.component.less"], |
|||
}) |
|||
export class UserManageComponent { |
|||
constructor( |
|||
private route: ActivatedRoute, |
|||
private api: ApiService, |
|||
private router: Router, |
|||
private modal: NzModalService |
|||
) {} |
|||
|
|||
public tab = 0; |
|||
|
|||
public roleId: string | null = null; |
|||
|
|||
ngOnInit(): void { |
|||
this.roleId = this.route.snapshot.queryParamMap.get("roleId"); |
|||
this.tab = Number(this.route.snapshot.queryParamMap.get("tab")) || 0; |
|||
} |
|||
|
|||
onRoleChange(roleId: string) { |
|||
this.roleId = roleId; |
|||
this.router.navigate(["/system/user"], { |
|||
queryParams: { |
|||
roleId, |
|||
}, |
|||
queryParamsHandling: "merge", |
|||
}); |
|||
} |
|||
|
|||
onTabChange(index: number) { |
|||
this.tab = index; |
|||
this.router.navigate(["/system/user"], { |
|||
queryParams: { |
|||
tab: index, |
|||
}, |
|||
queryParamsHandling: "merge", |
|||
}); |
|||
} |
|||
|
|||
openForm(nzContent: TemplateRef<{}>, event: MouseEvent, roleId?: string) { |
|||
event.preventDefault(); |
|||
this.modal.create({ |
|||
nzTitle: roleId ? "编辑角色" : "新增角色", |
|||
nzContent, |
|||
}); |
|||
} |
|||
|
|||
deleteItem(event: MouseEvent, id: string) { |
|||
event.preventDefault(); |
|||
this.modal.confirm({ |
|||
nzTitle: "警告", |
|||
nzContent: "是否要删除该角色？", |
|||
nzOkDanger: true, |
|||
}); |
|||
} |
|||
} |
|||
Loading…
Reference in new issue