HSYL_WCSWEB/src-back/app/layouts/admin/admin.component.html

<div class="app-layout">
  <mat-sidenav-container class="app-sidenav-container" [hasBackdrop]="layout.media=='mobile'">
    <!--侧边栏-->
    <mat-sidenav #$sidenav class="app-sidenav" [position]="layout.sidenavpos" [mode]="layout.sidenavfold?'over':'side'"
      [disableClose]="layout.media!='mobile'" [opened]="layout.sidenavopen||layout.media!='mobile'">
      <!--导航-->
      <div class="app-sidenav-wrap" [hidden]="layout.sidenavpos=='end'">
        <mat-toolbar class="app-header">
          <!--标志-->
          <div class="branding">
            <img *ngIf="settings.appLogoAssets; else $logo" [src]="'assets/images/'+settings.appLogo">
            <ng-template #$logo>
              <mat-icon>{{ settings.appLogo }}</mat-icon>
            </ng-template>
            <span>{{ settings.appName | translate }}</span>
          </div>
          <div class="spacer"></div>
          <!--在monitor布局下且导航悬浮时，用于恢复导航平铺的按钮-->
          <button mat-icon-button *ngIf="layout.media=='monitor'&&layout.sidenavfold"
            matTooltip="{{ 'layouts.admin.fixed' | translate }}" (click)="layout.sidenavfold=!layout.sidenavfold">
            <mat-icon>menu</mat-icon>
          </button>
        </mat-toolbar>
        <div class="app-body">
          <div>
            <!--递归生成多级菜单-->
            <ng-container *ngTemplateOutlet="$menu;context:menu"></ng-container>
            <ng-template #$menu let-parent="parent" let-items="items">
              <!-- <ul class="app-menu" [@expand]="parent?.focus?'expanded':'collapsed'"> -->
              <ul class="app-menu" [style.maxHeight]="parent&&(parent.focus?parent.height+'px':0)">
                <li class="app-menu-item" *ngFor="let item of items"
                  [ngClass]="{'focus': item.focus, 'active': item.active}">
                  <ng-container *ngIf="item.children; then $group else $item"></ng-container>
                  <ng-template #$group>
                    <a matRipple [style.paddingLeft]="item.level>0&&55+16*(item.level-1)+'px'"
                      href="javascript:void(0);" (click)="menu.toggle(item)">
                      <mat-icon class="app-menu-icon" *ngIf="item.level==0">{{ item.icon }}</mat-icon>
                      <span class="app-menu-name">{{ item.header | translate }}</span>
                      <span class="spacer"></span>
                      <mat-icon class="app-menu-caret" *ngIf="item.children">keyboard_arrow_right</mat-icon>
                    </a>
                  </ng-template>
                  <ng-template #$item>
                    <a matRipple [style.paddingLeft]="item.level>0&&55+16*(item.level-1)+'px'"
                      [routerLink]="[ item.url ]" (click)="layout.media=='mobile'&&$sidenav.toggle()">
                      <mat-icon class="app-menu-icon" *ngIf="item.level==0">{{ item.icon }}</mat-icon>
                      <span class="app-menu-name">{{ item.header | translate }}</span>
                    </a>
                  </ng-template>
                  <ng-container *ngIf="item.children">
                    <ng-container *ngTemplateOutlet="$menu;context:{parent:item,items:item.children}"></ng-container>
                  </ng-container>
                </li>
              </ul>
            </ng-template>
          </div>
        </div>
      </div>
      <!--设置-->
      <div class="app-sidenav-wrap" *ngIf="layout.media=='mobile'" [hidden]="layout.sidenavpos=='start'">
        <div class="app-body">
          <div>
            <div class="app-setting">
              <!-- <input #$avatar type="file" accept=".jpg,.jpeg,.png,.gif,.bmp,.tiff" hidden="true"
                (change)="profile($event)">
              <button class="avatar" (click)="$avatar.click()">
                <img class="avatar" [src]="account.avatar" />
              </button> -->
              <button class="avatar">
                <img class="avatar" [src]="account.avatar" />
              </button>
              <h3>{{ account.name }}</h3>
              <h4>{{ 'layouts.admin.language' | translate }}</h4>
              <mat-radio-group [(ngModel)]="language">
                <mat-radio-button *ngFor="let item of languages" [value]="item.lang">{{ item.desc }}
                </mat-radio-button>
              </mat-radio-group>
              <h4>{{ 'layouts.admin.theme' | translate }}</h4>
              <div class="theme">
                <button *ngFor="let item of themes"
                  [ngStyle]="{'background-color': item.c1st, 'border-color': item.c1st}" (click)="theme=item.theme">
                  <div [ngStyle]="{'border-bottom-color': item.c2nd}"></div>
                </button>
              </div>
              <button mat-stroked-button (click)="password()">{{ 'layouts.admin.password.title' | translate }}</button>
              <button mat-flat-button color="warn" (click)="logout()">{{ 'layouts.admin.logout' | translate }}</button>
            </div>
          </div>
        </div>
      </div>
    </mat-sidenav>
    <!--内容-->
    <mat-sidenav-content class="app-sidenav-content">
      <div class="app-sidenav-wrap">
        <mat-toolbar class="app-header">
          <!--在monitor布局下，用于悬浮导航的按钮-->
          <button mat-icon-button *ngIf="!layout.sidenavfold" matTooltip="{{ 'layouts.admin.folded' | translate }}"
            (click)="layout.sidenavfold=!layout.sidenavfold">
            <mat-icon>menu</mat-icon>
          </button>
          <!--在mobile布局下，用于唤出导航的按钮-->
          <button mat-icon-button *ngIf="layout.media=='mobile'" (click)="layout.sidenavpos='start';$sidenav.toggle()">
            <mat-icon>menu</mat-icon>
          </button>
          <div class="spacer"></div>
          <!--分为mobile布局和非mobile布局-->
          <ng-container *ngIf="layout.media=='mobile'; then $collapse else $expand"></ng-container>
          <!--mobile布局-->
          <ng-template #$collapse>
            <!--消息通知-->
            <!-- <button mat-icon-button (click)="messages.open()">
              <mat-icon [matBadge]="messages.count" [matBadgeHidden]="messages.count==0" matBadgeColor="warn">mail
              </mat-icon>
            </button> -->
            <!--用于展开设置项的按钮-->
            <button mat-icon-button (click)="layout.sidenavpos='end';$sidenav.toggle()">
              <mat-icon>settings</mat-icon>
            </button>
          </ng-template>
          <!--非mobile布局-->
          <ng-template #$expand>
            <!--国际化设置-->
            <button mat-button [matMenuTriggerFor]="$language" matTooltip="{{ 'layouts.admin.language' | translate }}">
              <mat-icon>language</mat-icon>
              <span *ngIf="layout.media=='monitor'">{{ languages | find: { lang: language } | field: 'desc' }}</span>
            </button>
            <mat-menu #$language="matMenu">
              <button mat-menu-item *ngFor="let item of languages" (click)="language=item.lang">
                <span class="mat-icon flag" [style.backgroundImage]="'url(assets/images/'+item.lang+'.svg)'"></span>
                <span>{{ item.desc }}</span>
              </button>
            </mat-menu>
            <!--全屏设置-->
            <button mat-button *ngIf="layout.media=='monitor'&&layout.screenfull.isEnabled"
              matTooltip="{{ (layout.screenfull.isFullscreen ? 'layouts.admin.fullscreen_exit' : 'layouts.admin.fullscreen') | translate }}"
              (click)="layout.screenfull.toggle()">
              <mat-icon>fullscreen{{ layout.screenfull.isFullscreen && '_exit' }}</mat-icon>
            </button>
            <!--主题设置-->
            <button mat-button [matMenuTriggerFor]="$theme" matTooltip="{{ 'layouts.admin.theme' | translate }}">
              <mat-icon>color_lens</mat-icon>
            </button>
            <!-- 条码扫描报警提示 -->
            <mat-menu #$theme="matMenu">
              <button mat-menu-item *ngFor="let item of themes" (click)="theme=item.theme">
                <div class="mat-icon theme" [ngStyle]="{'background-color': item.c1st, 'border-color': item.c1st}">
                  <div [ngStyle]="{'border-bottom-color': item.c2nd}"></div>
                </div>
                <span>{{ item.desc | translate }}</span>
              </button>
            </mat-menu>
            <!-- alert -->
            <button mat-button [matMenuTriggerFor]="$messageAlert"
              matTooltip="异常提示">
              <mat-icon [matBadge]="alertMessages.count" [matBadgeHidden]="alertMessages.count==0"   matBadgeColor="warn">announcement
              </mat-icon>
            </button>

            <mat-menu #$messageAlert="matMenu" class="unlimited" xPosition="before">
              <div class="mat-menu-box">
                <ng-container *ngFor="let item of alertMessages.list">
                  <div mat-menu-item class="mat-menu-item-content" (click)="alertMessages.operate(item.deviceCode)">
                    <div class="mat-menu-list-item">
                    DeviceName:{{item.stockBarcode}} -DeviceIndex:{{item.deviceCode}} - ErrorCode:{{item.errorText}}
                    </div>
                  </div>
                  <mat-divider></mat-divider>
                </ng-container>
              </div>
              <ng-container *ngIf="messages.count==0">
                <div mat-menu-item class="mat-menu-item-empty" disabled>{{ 'layouts.admin.message.empty' | translate }}
                </div>
                <mat-divider></mat-divider>
              </ng-container>
            </mat-menu>
            <!--消息通知-->
            <!-- <button mat-button [matMenuTriggerFor]="$message"
              matTooltip="{{ 'layouts.admin.message.tag' | translate }}">
              <mat-icon [matBadge]="messages.count" [matBadgeHidden]="messages.count==0" matBadgeColor="warn">mail
              </mat-icon>
            </button> -->
            <!-- <mat-menu #$message="matMenu" class="unlimited">
              <div mat-menu-item class="mat-menu-item-header app-background-focus" [disableRipple]="true">
                <span>{{ 'layouts.admin.message.title' | translate }}</span>
                <button mat-icon-button>
                  <mat-icon>settings</mat-icon>
                </button>
              </div>
              <ng-container *ngFor="let item of messages.list">
                <button mat-menu-item class="mat-menu-item-content" (click)="messages.open(item.id)">
                  <img [src]="item.source.avatar||avatar" />
                  <div>
                    <p>{{item.subject}}</p>
                    <p class="app-foreground-secondary">{{item.time|date:'M/d H:mm'}}</p>
                  </div>
                </button>
                <mat-divider></mat-divider>
              </ng-container>
              <ng-container *ngIf="messages.count==0">
                <div mat-menu-item class="mat-menu-item-empty" disabled>{{ 'layouts.admin.message.empty' | translate }}
                </div>
                <mat-divider></mat-divider>
              </ng-container>
              <div mat-menu-item class="mat-menu-item-footer" (click)="messages.open()">
                {{ 'layouts.admin.message.more' | translate }}</div>
            </mat-menu> -->
            <!--账号操作-->
            <button mat-button [matMenuTriggerFor]="$profile" [matTooltip]="account.name">
              <span *ngIf="layout.media=='monitor'">{{ account.name }}</span>
              <img class="avatar" [src]="account.avatar" />
            </button>
            <mat-menu #$profile="matMenu">
              <!-- <input #$avatar type="file" accept=".jpg,.jpeg,.png,.gif,.bmp,.tiff" hidden="true"
                (change)="profile($event)">
              <button mat-menu-item (click)="$avatar.click()">
                <mat-icon>account_circle</mat-icon>
                <span>{{ 'layouts.admin.profile' | translate }}</span>
              </button> -->
              <button mat-menu-item (click)="password()">
                <mat-icon>lock</mat-icon>
                <span>{{ 'layouts.admin.password.title' | translate }}</span>
              </button>
              <button mat-menu-item (click)="logout()">
                <mat-icon>exit_to_app</mat-icon>
                <span>{{ 'layouts.admin.logout' | translate }}</span>
              </button>
            </mat-menu>
          </ng-template>
        </mat-toolbar>
        <div class="app-body">
          <ng-progress #$progress [fixed]="false" [meteor]="false" [spinner]="false" [color]="null"></ng-progress>
          <!--路由-->
          <router-outlet></router-outlet>
        </div>
      </div>
    </mat-sidenav-content>
  </mat-sidenav-container>
</div>