You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
hai-oil-web/src/app/pages/system/menu/menu.component.html

106 lines
4.6 KiB

11 months ago
<div nz-row [nzGutter]="16">
11 months ago
11 months ago
<div nz-col nzSpan="12">
<nz-card nzTitle="系统菜单">
<nz-tree
11 months ago
#nzTreeComponent
*ngIf="menuTree.length > 0"
11 months ago
[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 }"
>
11 months ago
<nz-descriptions-item nzTitle="父级菜单">{{menuDetail?.parentMenu?menuDetail.parentMenu.menuName:'无'}}</nz-descriptions-item>
11 months ago
<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">
11 months ago
<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>
11 months ago
<div nz-col nzSpan="8"><button nz-button nzType="primary" (click)="showDelMenu()" nzDanger>删除</button></div>
11 months ago
</div>
</ng-template>
</div>
</div>
11 months ago
<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>
11 months ago
11 months ago
<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>
11 months ago
11 months ago
<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>
11 months ago
11 months ago
<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>
11 months ago
11 months ago
<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>
11 months ago
11 months ago
<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>
11 months ago
11 months ago
<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>
11 months ago
11 months ago
<div nz-flex [nzJustify]="'center'">
<button nz-button nzType="primary" class="submit-btn">保存</button>
</div>
11 months ago
11 months ago
</form>
</ng-container>
11 months ago
</nz-modal>