kely
2 years ago
31 changed files with 742 additions and 252 deletions
@ -1,68 +1,74 @@ |
|||||
<nz-layout class="app-layout"> |
<ng-container *ngIf="fullPage else layoutTpl"> |
||||
<nz-header class="app-header"> |
<router-outlet></router-outlet> |
||||
<div class="flex items-center justify-between h-full"> |
</ng-container> |
||||
<div></div> |
|
||||
<div class="profile"> |
<ng-template #layoutTpl> |
||||
<button |
<nz-layout class="app-layout"> |
||||
nz-button |
<nz-header class="app-header"> |
||||
nzType="text" |
<div class="flex items-center justify-between h-full"> |
||||
nz-dropdown |
<div></div> |
||||
[nzDropdownMenu]="menu"> |
<div class="profile"> |
||||
{{account.name}} |
<button |
||||
</button> |
nz-button |
||||
<nz-dropdown-menu #menu="nzDropdownMenu"> |
nzType="text" |
||||
<ul nz-menu nzSelectable> |
nz-dropdown |
||||
<li nz-menu-item (click)="logout()"> |
[nzDropdownMenu]="menu"> |
||||
退出登录 |
{{account.name}} |
||||
</li> |
</button> |
||||
</ul> |
<nz-dropdown-menu #menu="nzDropdownMenu"> |
||||
</nz-dropdown-menu> |
<ul nz-menu nzSelectable> |
||||
</div> |
<li nz-menu-item (click)="logout()"> |
||||
</div> |
退出登录 |
||||
</nz-header> |
</li> |
||||
<nz-layout class="app-layout-main"> |
</ul> |
||||
<nz-sider nzWidth="220px" nzTheme="dark" class="sider-menu"> |
</nz-dropdown-menu> |
||||
<div class="logo flex items-center py-4"> |
</div> |
||||
<img class="block h-[40px] mr-2" src="../assets/images/jl-logo.png" /> |
|
||||
<span class="text-base text-white font-bold"> |
|
||||
智慧配餐管理后台 |
|
||||
</span> |
|
||||
</div> |
</div> |
||||
<ul nz-menu nzMode="inline" nzTheme="dark"> |
</nz-header> |
||||
<li nz-menu-item class="k-icon" [routerLink]="['/','food']" nzMatchRouter> |
<nz-layout class="app-layout-main"> |
||||
<span nz-icon nzType="k-icon:carrot" nzTheme="outline"></span> |
<nz-sider nzWidth="220px" nzTheme="dark" class="sider-menu"> |
||||
<span>食材管理</span> |
<div class="logo flex items-center py-4"> |
||||
</li> |
<img class="block h-[40px] mr-2" src="../assets/images/jl-logo.png" /> |
||||
<li nz-menu-item class="k-icon" [routerLink]="['/','dish']" nzMatchRouter> |
<span class="text-base text-white font-bold"> |
||||
<span nz-icon nzType="k-icon:food" nzTheme="outline"></span> |
智慧配餐管理后台 |
||||
<span>菜品管理</span> |
</span> |
||||
</li> |
</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/')"> |
<li nz-submenu nzTitle="食谱管理" nzIcon="book" [nzOpen]="currentUrl.includes('/ingredient/')"> |
||||
<ul> |
<ul> |
||||
<li nz-menu-item nzMatchRouter [routerLink]="['/','ingredient','item']">食谱库</li> |
<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','review']">食谱审核</li> |
||||
<li nz-menu-item nzMatchRouter [routerLink]="['/','ingredient','release']">食谱发布计划</li> |
<li nz-menu-item nzMatchRouter [routerLink]="['/','ingredient','release']">食谱发布计划</li> |
||||
</ul> |
</ul> |
||||
</li> |
</li> |
||||
<li nz-menu-item nz-icon="profile" nzMatchRouter [routerLink]="['/','standard']"> |
<li nz-menu-item nz-icon="profile" nzMatchRouter [routerLink]="['/','standard']"> |
||||
<span nz-icon nzType="profile" nzTheme="outline"></span> |
<span nz-icon nzType="profile" nzTheme="outline"></span> |
||||
<span>人群营养标准管理</span> |
<span>人群营养标准管理</span> |
||||
</li> |
</li> |
||||
<li nz-menu-item nzMatchRouter [routerLink]="['/','organization']"> |
<li nz-menu-item nzMatchRouter [routerLink]="['/','organization']"> |
||||
<span nz-icon nzType="usergroup-add" nzTheme="outline"></span> |
<span nz-icon nzType="usergroup-add" nzTheme="outline"></span> |
||||
<span>单位管理</span> |
<span>单位管理</span> |
||||
</li> |
</li> |
||||
<li nz-submenu nzTitle="系统设置" nzIcon="setting" [nzOpen]="currentUrl.includes('/system/')"> |
<li nz-submenu nzTitle="系统设置" nzIcon="setting" [nzOpen]="currentUrl.includes('/system/')"> |
||||
<ul> |
<ul> |
||||
<li nz-menu-item nzMatchRouter [routerLink]="['/','system','user']">用户管理</li> |
<li nz-menu-item nzMatchRouter [routerLink]="['/','system','user']">用户管理</li> |
||||
</ul> |
</ul> |
||||
</li> |
</li> |
||||
</ul> |
</ul> |
||||
</nz-sider> |
</nz-sider> |
||||
<nz-layout class="inner-layout overflow-hidden"> |
<nz-layout class="inner-layout overflow-hidden"> |
||||
<router-outlet></router-outlet> |
<router-outlet></router-outlet> |
||||
|
</nz-layout> |
||||
</nz-layout> |
</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