kely
2 years ago
31 changed files with 742 additions and 252 deletions
@ -1,68 +1,74 @@ |
|||
<nz-layout class="app-layout"> |
|||
<nz-header class="app-header"> |
|||
<div class="flex items-center justify-between h-full"> |
|||
<div></div> |
|||
<div class="profile"> |
|||
<button |
|||
nz-button |
|||
nzType="text" |
|||
nz-dropdown |
|||
[nzDropdownMenu]="menu"> |
|||
{{account.name}} |
|||
</button> |
|||
<nz-dropdown-menu #menu="nzDropdownMenu"> |
|||
<ul nz-menu nzSelectable> |
|||
<li nz-menu-item (click)="logout()"> |
|||
退出登录 |
|||
</li> |
|||
</ul> |
|||
</nz-dropdown-menu> |
|||
</div> |
|||
</div> |
|||
</nz-header> |
|||
<nz-layout class="app-layout-main"> |
|||
<nz-sider nzWidth="220px" nzTheme="dark" class="sider-menu"> |
|||
<div class="logo flex items-center py-4"> |
|||
<img class="block h-[40px] mr-2" src="../assets/images/jl-logo.png" /> |
|||
<span class="text-base text-white font-bold"> |
|||
智慧配餐管理后台 |
|||
</span> |
|||
<ng-container *ngIf="fullPage else layoutTpl"> |
|||
<router-outlet></router-outlet> |
|||
</ng-container> |
|||
|
|||
<ng-template #layoutTpl> |
|||
<nz-layout class="app-layout"> |
|||
<nz-header class="app-header"> |
|||
<div class="flex items-center justify-between h-full"> |
|||
<div></div> |
|||
<div class="profile"> |
|||
<button |
|||
nz-button |
|||
nzType="text" |
|||
nz-dropdown |
|||
[nzDropdownMenu]="menu"> |
|||
{{account.name}} |
|||
</button> |
|||
<nz-dropdown-menu #menu="nzDropdownMenu"> |
|||
<ul nz-menu nzSelectable> |
|||
<li nz-menu-item (click)="logout()"> |
|||
退出登录 |
|||
</li> |
|||
</ul> |
|||
</nz-dropdown-menu> |
|||
</div> |
|||
</div> |
|||
<ul nz-menu nzMode="inline" nzTheme="dark"> |
|||
<li nz-menu-item class="k-icon" [routerLink]="['/','food']" nzMatchRouter> |
|||
<span nz-icon nzType="k-icon:carrot" nzTheme="outline"></span> |
|||
<span>食材管理</span> |
|||
</li> |
|||
<li nz-menu-item class="k-icon" [routerLink]="['/','dish']" nzMatchRouter> |
|||
<span nz-icon nzType="k-icon:food" nzTheme="outline"></span> |
|||
<span>菜品管理</span> |
|||
</li> |
|||
</nz-header> |
|||
<nz-layout class="app-layout-main"> |
|||
<nz-sider nzWidth="220px" nzTheme="dark" class="sider-menu"> |
|||
<div class="logo flex items-center py-4"> |
|||
<img class="block h-[40px] mr-2" src="../assets/images/jl-logo.png" /> |
|||
<span class="text-base text-white font-bold"> |
|||
智慧配餐管理后台 |
|||
</span> |
|||
</div> |
|||
<ul nz-menu nzMode="inline" nzTheme="dark"> |
|||
<li nz-menu-item class="k-icon" [routerLink]="['/','food']" nzMatchRouter> |
|||
<span nz-icon nzType="k-icon:carrot" nzTheme="outline"></span> |
|||
<span>食材管理</span> |
|||
</li> |
|||
<li nz-menu-item class="k-icon" [routerLink]="['/','dish']" nzMatchRouter> |
|||
<span nz-icon nzType="k-icon:food" nzTheme="outline"></span> |
|||
<span>菜品管理</span> |
|||
</li> |
|||
|
|||
|
|||
<li nz-submenu nzTitle="食谱管理" nzIcon="book" [nzOpen]="currentUrl.includes('/ingredient/')"> |
|||
<ul> |
|||
<li nz-menu-item nzMatchRouter [routerLink]="['/','ingredient','item']">食谱库</li> |
|||
<li nz-menu-item nzMatchRouter [routerLink]="['/','ingredient','review']">食谱审核</li> |
|||
<li nz-menu-item nzMatchRouter [routerLink]="['/','ingredient','release']">食谱发布计划</li> |
|||
</ul> |
|||
</li> |
|||
<li nz-menu-item nz-icon="profile" nzMatchRouter [routerLink]="['/','standard']"> |
|||
<span nz-icon nzType="profile" nzTheme="outline"></span> |
|||
<span>人群营养标准管理</span> |
|||
</li> |
|||
<li nz-menu-item nzMatchRouter [routerLink]="['/','organization']"> |
|||
<span nz-icon nzType="usergroup-add" nzTheme="outline"></span> |
|||
<span>单位管理</span> |
|||
</li> |
|||
<li nz-submenu nzTitle="系统设置" nzIcon="setting" [nzOpen]="currentUrl.includes('/system/')"> |
|||
<ul> |
|||
<li nz-menu-item nzMatchRouter [routerLink]="['/','system','user']">用户管理</li> |
|||
</ul> |
|||
</li> |
|||
</ul> |
|||
</nz-sider> |
|||
<nz-layout class="inner-layout overflow-hidden"> |
|||
<router-outlet></router-outlet> |
|||
<li nz-submenu nzTitle="食谱管理" nzIcon="book" [nzOpen]="currentUrl.includes('/ingredient/')"> |
|||
<ul> |
|||
<li nz-menu-item nzMatchRouter [routerLink]="['/','ingredient','item']">食谱库</li> |
|||
<li nz-menu-item nzMatchRouter [routerLink]="['/','ingredient','review']">食谱审核</li> |
|||
<li nz-menu-item nzMatchRouter [routerLink]="['/','ingredient','release']">食谱发布计划</li> |
|||
</ul> |
|||
</li> |
|||
<li nz-menu-item nz-icon="profile" nzMatchRouter [routerLink]="['/','standard']"> |
|||
<span nz-icon nzType="profile" nzTheme="outline"></span> |
|||
<span>人群营养标准管理</span> |
|||
</li> |
|||
<li nz-menu-item nzMatchRouter [routerLink]="['/','organization']"> |
|||
<span nz-icon nzType="usergroup-add" nzTheme="outline"></span> |
|||
<span>单位管理</span> |
|||
</li> |
|||
<li nz-submenu nzTitle="系统设置" nzIcon="setting" [nzOpen]="currentUrl.includes('/system/')"> |
|||
<ul> |
|||
<li nz-menu-item nzMatchRouter [routerLink]="['/','system','user']">用户管理</li> |
|||
</ul> |
|||
</li> |
|||
</ul> |
|||
</nz-sider> |
|||
<nz-layout class="inner-layout overflow-hidden"> |
|||
<router-outlet></router-outlet> |
|||
</nz-layout> |
|||
</nz-layout> |
|||
</nz-layout> |
|||
</nz-layout> |
|||
</ng-template> |
|||
@ -0,0 +1 @@ |
|||
<app-ingredient-preview></app-ingredient-preview> |
|||
@ -0,0 +1,27 @@ |
|||
import { Component, OnInit } from "@angular/core"; |
|||
import { ActivatedRoute, Router } from "@angular/router"; |
|||
|
|||
@Component({ |
|||
selector: "app-ingredient-preview-page", |
|||
templateUrl: "./ingredient-preview-page.component.html", |
|||
styleUrls: ["./ingredient-preview-page.component.less"], |
|||
}) |
|||
export class IngredientPreviewPageComponent implements OnInit { |
|||
constructor(private route: ActivatedRoute, private router: Router) {} |
|||
|
|||
ngOnInit(): void { |
|||
const id = this.route.snapshot.queryParamMap.get("id"); |
|||
const storage = sessionStorage.getItem("current_menu"); |
|||
|
|||
if (id) { |
|||
console.log(id); |
|||
|
|||
return; |
|||
} |
|||
if (storage) { |
|||
return; |
|||
} |
|||
|
|||
this.router.navigate(["/ingredient/item/list"]); |
|||
} |
|||
} |
|||
@ -0,0 +1,133 @@ |
|||
<header class="header text-center text-base"> |
|||
食谱名称 |
|||
</header> |
|||
|
|||
<div class="p-4"> |
|||
<nz-descriptions [nzColumn]="4"> |
|||
<nz-descriptions-item nzTitle="采用标准">Zhou Maomao</nz-descriptions-item> |
|||
<nz-descriptions-item nzTitle="食谱周期">18100000000</nz-descriptions-item> |
|||
<nz-descriptions-item nzTitle="适用月份">Hangzhou, Zhejiang</nz-descriptions-item> |
|||
<nz-descriptions-item nzTitle="人群显示">Empty</nz-descriptions-item> |
|||
</nz-descriptions> |
|||
</div> |
|||
|
|||
<div class="p-4"> |
|||
|
|||
<table class="menu-table"> |
|||
<thead> |
|||
<tr> |
|||
<th width="100px"> |
|||
|
|||
</th> |
|||
<th> |
|||
<div> |
|||
<div class="table-day-row"> |
|||
<div class="td"> 第1天 </div> |
|||
<div class="td"> 重量/克 </div> |
|||
</div> |
|||
<div class="table-menu-row flex "> |
|||
<div class="td dish-name text-left"> |
|||
菜品 |
|||
</div> |
|||
<div class="td food-name text-left"> |
|||
食材 |
|||
</div> |
|||
<div class="table-herder-ages"> |
|||
<div class="td age-range"> 18-49岁男 </div> |
|||
<div class="td age-range"> 18-49岁男 </div> |
|||
<div class="td age-range"> 18-49岁男 </div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</th> |
|||
<th> |
|||
<div> |
|||
<div class="table-day-row"> |
|||
<div class="td"> 第2天 </div> |
|||
<div class="td"> 重量/克 </div> |
|||
</div> |
|||
<div class="table-menu-row flex "> |
|||
<div class="td dish-name text-left"> |
|||
菜品 |
|||
</div> |
|||
<div class="td food-name text-left"> |
|||
食材 |
|||
</div> |
|||
<div class="table-herder-ages"> |
|||
<div class="td age-range"> 18-49岁男 </div> |
|||
<div class="td age-range"> 18-49岁男 </div> |
|||
<div class="td age-range"> 18-49岁男 </div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</th> |
|||
</tr> |
|||
</thead> |
|||
<tbody> |
|||
<tr> |
|||
<td class="text-center"> |
|||
<b> |
|||
早餐 |
|||
</b> |
|||
</td> |
|||
<td> |
|||
<div class="flex"> |
|||
<div class="menu-dish dish-name"> |
|||
<div class="text-left td">烂肉泡菜L</div> |
|||
</div> |
|||
<div class="menu-food"> |
|||
<ul> |
|||
<li class="flex"> |
|||
<div class="td food-name text-left"> |
|||
酸白菜[酸菜] |
|||
</div> |
|||
<div class="td age-range text-right"> |
|||
1 |
|||
</div> |
|||
<div class="td age-range text-right"> |
|||
2 |
|||
</div> |
|||
<div class="td age-range text-right"> |
|||
3 |
|||
</div> |
|||
</li> |
|||
<li class="flex"> |
|||
<div class="td food-name text-left"> |
|||
酸白菜[酸菜] |
|||
</div> |
|||
<div class="td age-range text-right"> |
|||
1 |
|||
</div> |
|||
<div class="td age-range text-right"> |
|||
2 |
|||
</div> |
|||
<div class="td age-range text-right"> |
|||
3 |
|||
</div> |
|||
</li> |
|||
<li class="flex"> |
|||
<div class="td food-name text-left"> |
|||
酸白菜[酸菜] |
|||
</div> |
|||
<div class="td age-range text-right"> |
|||
1 |
|||
</div> |
|||
<div class="td age-range text-right"> |
|||
2 |
|||
</div> |
|||
<div class="td age-range text-right"> |
|||
3 |
|||
</div> |
|||
</li> |
|||
</ul> |
|||
</div> |
|||
</div> |
|||
</td> |
|||
<td> |
|||
|
|||
</td> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
|
|||
</div> |
|||
@ -0,0 +1,84 @@ |
|||
.header { |
|||
padding: 10px; |
|||
background-color: #fff; |
|||
border-bottom: 1px solid #e8e8e8; |
|||
} |
|||
|
|||
|
|||
.menu-table { |
|||
// width: 100%; |
|||
margin: 0 auto; |
|||
border-collapse: collapse; |
|||
border-spacing: 0; |
|||
border: 1px solid #e8e8e8; |
|||
|
|||
thead { |
|||
.table-day-row { |
|||
display: flex; |
|||
|
|||
border-bottom: 1px solid #fafafa; |
|||
|
|||
.td { |
|||
flex: 1; |
|||
padding: 10px; |
|||
border-right: 1px solid #fafafa; |
|||
|
|||
&:first-child { |
|||
flex: 0 0 420px; |
|||
} |
|||
|
|||
&:last-child { |
|||
border-right: none; |
|||
|
|||
} |
|||
} |
|||
} |
|||
|
|||
th { |
|||
|
|||
|
|||
.td { |
|||
background-color: transparent; |
|||
border-right: 1px solid #fafafa; |
|||
background-color: #13c2c2; |
|||
} |
|||
|
|||
border-right: 1px solid #fafafa; |
|||
background-color: #13c2c2; |
|||
color: #fff; |
|||
|
|||
} |
|||
} |
|||
|
|||
|
|||
.table-herder-ages { |
|||
display: flex; |
|||
|
|||
.td { |
|||
&:last-child { |
|||
border-right: none; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.dish-name { |
|||
width: 240px; |
|||
} |
|||
|
|||
.food-name { |
|||
width: 180px; |
|||
} |
|||
|
|||
.td { |
|||
height: 100%; |
|||
padding: 10px; |
|||
background-color: #fafafa; |
|||
} |
|||
|
|||
.age-range { |
|||
// display: inline-block; |
|||
width: 150px; |
|||
// background-color: #fafafa; |
|||
font-weight: bold; |
|||
} |
|||
} |
|||
@ -0,0 +1,8 @@ |
|||
import { Component } from "@angular/core"; |
|||
|
|||
@Component({ |
|||
selector: "app-ingredient-preview", |
|||
templateUrl: "./ingredient-preview.component.html", |
|||
styleUrls: ["./ingredient-preview.component.less"], |
|||
}) |
|||
export class IngredientPreviewComponent {} |
|||
Loading…
Reference in new issue