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

107 lines
4.6 KiB

<div nz-row [nzGutter]="16">
<div nz-col nzSpan="12">
<nz-card nzTitle="系统菜单">
<nz-spin [nzSpinning]="!treeView"></nz-spin>
<nz-tree
*ngIf="menuTree.length > 0 && treeView"
[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.menuUrlImg?menuDetail.menuUrlImg:'无'}}</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" (click)="showDelMenu()" 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-tree-select
formControlName="menuPSid"
[nzNodes]="menuTree"
nzShowSearch
></nz-tree-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>