|
|
|
<div nz-row [nzGutter]="16">
|
|
|
|
|
|
|
|
<div nz-col nzSpan="12">
|
|
|
|
<nz-card nzTitle="系统菜单">
|
|
|
|
<nz-tree
|
|
|
|
[nzData]="menuTree"
|
|
|
|
[nzShowLine]="true"
|
|
|
|
[nzExpandAll]="true"
|
|
|
|
(nzClick)="clickNode($event)"
|
|
|
|
[nzMultiple]="false"
|
|
|
|
></nz-tree>
|
|
|
|
</nz-card>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div nz-col nzSpan="12">
|
|
|
|
<nz-card nzTitle="菜单详情" [nzExtra]="extraTemplate" [nzBodyStyle]="{ padding: '0px'}">
|
|
|
|
<nz-descriptions nzBordered
|
|
|
|
nzLayout="vertical"
|
|
|
|
[nzSize]="'small'"
|
|
|
|
[nzColumn]="{ xxl: 2, xl: 2, lg: 2, md: 2, sm: 2, xs: 1 }"
|
|
|
|
>
|
|
|
|
<nz-descriptions-item nzTitle="父级菜单">{{menuDetail?.parentMenu?menuDetail.parentMenu.menuName:'无'}}</nz-descriptions-item>
|
|
|
|
<nz-descriptions-item nzTitle="菜单名称">{{menuDetail.menuName?menuDetail.menuName:'无'}}</nz-descriptions-item>
|
|
|
|
<nz-descriptions-item nzTitle="菜单类型">{{menuDetail.menuType| menuType}}</nz-descriptions-item>
|
|
|
|
<nz-descriptions-item nzTitle="菜单URL">{{menuDetail.menuUrl?menuDetail.menuUrl:'无'}}</nz-descriptions-item>
|
|
|
|
<nz-descriptions-item nzTitle="菜单图标">{{menuDetail.name?menuDetail.name:'无'}}</nz-descriptions-item>
|
|
|
|
<nz-descriptions-item nzTitle="菜单描述">{{menuDetail.menuDesc?menuDetail.menuDesc:'无'}}</nz-descriptions-item>
|
|
|
|
</nz-descriptions>
|
|
|
|
</nz-card>
|
|
|
|
<ng-template #extraTemplate>
|
|
|
|
<div nz-row [nzGutter]="12">
|
|
|
|
<div nz-col nzSpan="8"><button nz-button nzType="primary" (click)="openEditMenu(true)">添加</button></div>
|
|
|
|
<div nz-col nzSpan="8"><button nz-button nzType="primary" (click)="openEditMenu(false)">修改</button></div>
|
|
|
|
<div nz-col nzSpan="8"><button nz-button nzType="primary" nzDanger>删除</button></div>
|
|
|
|
</div>
|
|
|
|
</ng-template>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<nz-modal [(nzVisible)]="editMenuVisible" nzTitle="{{editMenuTitle}}" [nzFooter]="null" (nzOnCancel)="closeEditMenu()">
|
|
|
|
<ng-container *nzModalContent>
|
|
|
|
<form nz-form [formGroup]="editMenuForm" (ngSubmit)="submitEditMenuForm()">
|
|
|
|
<nz-form-item>
|
|
|
|
<nz-form-label [nzSm]="6" [nzXs]="24">父级菜单</nz-form-label>
|
|
|
|
<nz-form-control [nzSm]="14" [nzXs]="24">
|
|
|
|
<nz-select formControlName="menuPSid" nzShowSearch nzAllowClear>
|
|
|
|
<nz-option *ngFor="let item of menuData" nzValue="{{item.id}}" nzLabel="{{item.menuName}}"></nz-option>
|
|
|
|
</nz-select>
|
|
|
|
</nz-form-control>
|
|
|
|
</nz-form-item>
|
|
|
|
|
|
|
|
<nz-form-item>
|
|
|
|
<nz-form-label [nzSm]="6" [nzXs]="24" nzRequired>菜单名称</nz-form-label>
|
|
|
|
<nz-form-control [nzSm]="14" [nzXs]="24" nzErrorTip="菜单名称填写有误!">
|
|
|
|
<input nz-input formControlName="menuName"/>
|
|
|
|
</nz-form-control>
|
|
|
|
</nz-form-item>
|
|
|
|
|
|
|
|
<nz-form-item>
|
|
|
|
<nz-form-label [nzSm]="6" [nzXs]="24" nzRequired>菜单类型</nz-form-label>
|
|
|
|
<nz-form-control [nzSm]="14" [nzXs]="24" nzErrorTip="菜单类型选择有误!">
|
|
|
|
<nz-select formControlName="menuType" nzShowSearch>
|
|
|
|
<nz-option nzValue="1" nzLabel="菜单"></nz-option>
|
|
|
|
<nz-option nzValue="2" nzLabel="按钮"></nz-option>
|
|
|
|
</nz-select>
|
|
|
|
</nz-form-control>
|
|
|
|
</nz-form-item>
|
|
|
|
|
|
|
|
<nz-form-item>
|
|
|
|
<nz-form-label [nzSm]="6" [nzXs]="24" nzRequired>菜单URL</nz-form-label>
|
|
|
|
<nz-form-control [nzSm]="14" [nzXs]="24" nzErrorTip="菜单URL填写有误!">
|
|
|
|
<input nz-input formControlName="menuUrl"/>
|
|
|
|
</nz-form-control>
|
|
|
|
</nz-form-item>
|
|
|
|
|
|
|
|
<nz-form-item>
|
|
|
|
<nz-form-label [nzSm]="6" [nzXs]="24" nzRequired>菜单顺序</nz-form-label>
|
|
|
|
<nz-form-control [nzSm]="14" [nzXs]="24" nzErrorTip="菜单顺序填写有误!">
|
|
|
|
<nz-input-number [nzMin]="1" [nzMax]="999" [nzStep]="1" formControlName="menuSort"></nz-input-number>
|
|
|
|
</nz-form-control>
|
|
|
|
</nz-form-item>
|
|
|
|
|
|
|
|
<nz-form-item>
|
|
|
|
<nz-form-label [nzSm]="6" [nzXs]="24">图标URL</nz-form-label>
|
|
|
|
<nz-form-control [nzSm]="14" [nzXs]="24">
|
|
|
|
<input nz-input formControlName="menuUrlImg"/>
|
|
|
|
</nz-form-control>
|
|
|
|
</nz-form-item>
|
|
|
|
|
|
|
|
<nz-form-item>
|
|
|
|
<nz-form-label [nzSm]="6" [nzXs]="24">菜单描述</nz-form-label>
|
|
|
|
<nz-form-control [nzSm]="14" [nzXs]="24">
|
|
|
|
<input nz-input formControlName="menuDesc"/>
|
|
|
|
</nz-form-control>
|
|
|
|
</nz-form-item>
|
|
|
|
|
|
|
|
<div nz-flex [nzJustify]="'center'">
|
|
|
|
<button nz-button nzType="primary" class="submit-btn">保存</button>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</form>
|
|
|
|
</ng-container>
|
|
|
|
</nz-modal>
|