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.
100 lines
3.9 KiB
100 lines
3.9 KiB
<form nz-form [formGroup]="searchForm" [nzLayout]="'vertical'">
|
|
<div nz-row [nzGutter]="24">
|
|
<div nz-col [nzSpan]="4">
|
|
<nz-form-item>
|
|
<nz-form-label>角色名称</nz-form-label>
|
|
<nz-form-control>
|
|
<input nz-input formControlName="roleName" placeholder="请输入" />
|
|
</nz-form-control>
|
|
</nz-form-item>
|
|
</div>
|
|
<div nz-col [nzSpan]="6" class="search-area">
|
|
<button nz-button [nzType]="'primary'" (click)="searchFormSubmit()">查询</button>
|
|
<button nz-button (click)="searchFormReset()">重置</button>
|
|
<button nz-button [nzType]="'primary'" (click)="showEditRole(true, null)">创建</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
|
|
<nz-table #basicTable
|
|
[nzBordered]="true"
|
|
[nzFrontPagination]="false"
|
|
[nzShowQuickJumper]="true"
|
|
[nzShowTotal]="totalTemplate"
|
|
[(nzPageIndex)]="tablePageNum"
|
|
(nzPageIndexChange)="queryData()"
|
|
[nzTotal]="tableData.total"
|
|
[nzData]="tableData.list" >
|
|
<thead>
|
|
<tr>
|
|
<th nzWidth="80px">角色名称</th>
|
|
<th nzWidth="100px">角色描述</th>
|
|
<th nzWidth="50px">创建时间</th>
|
|
<th nzWidth="50px">更新时间</th>
|
|
<th nzWidth="70px">操作</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr *ngFor="let data of basicTable.data">
|
|
<td>{{data.roleName}}</td>
|
|
<td>{{data.roleDesc}}</td>
|
|
<td>{{data.createTime | date: 'yyyy-MM-dd HH:mm'}}</td>
|
|
<td>{{data.updateTime | date: 'yyyy-MM-dd HH:mm'}}</td>
|
|
<td>
|
|
<a (click)="showEditRole(false, data)">修改</a>
|
|
<nz-divider nzType="vertical"></nz-divider>
|
|
<a (click)="showAssignRoleMenu(data.id)">分配菜单</a>
|
|
<nz-divider nzType="vertical"></nz-divider>
|
|
<a (click)="showDelData(data.id)">删除</a>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
<ng-template #totalTemplate let-total>总计 {{ total }} 条</ng-template>
|
|
</nz-table>
|
|
|
|
|
|
<nz-modal [(nzVisible)]="editRoleVisible" nzTitle="{{editRoleTitle}}" [nzFooter]="null" (nzOnCancel)="closeEditRole()">
|
|
<ng-container *nzModalContent>
|
|
<form nz-form [formGroup]="editRoleForm" (ngSubmit)="submitEditRoleForm()">
|
|
<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="roleName"/>
|
|
</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="roleDesc"/>
|
|
</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>
|
|
|
|
|
|
<nz-modal [(nzVisible)]="assignRoleMenuVisible" nzTitle="角色菜单权限" [nzFooter]="null" (nzOnCancel)="closeAssignRoleMenu()">
|
|
<ng-container *nzModalContent>
|
|
<nz-tree
|
|
#nzTreeComponent
|
|
*ngIf="menuTree.length"
|
|
[nzData]="menuTree"
|
|
[nzCheckedKeys]="menuTreeCheckedKeys"
|
|
[nzShowLine]="true"
|
|
[nzExpandAll]="true"
|
|
[nzMultiple]="false"
|
|
[nzCheckable]="true"
|
|
nzVirtualHeight="500px"
|
|
></nz-tree>
|
|
<nz-divider nzOrientation="right"></nz-divider>
|
|
<div nz-flex [nzJustify]="'center'">
|
|
<button nz-button nzType="primary" class="submit-btn" (click)="submitAssignRoleMenu()">保存</button>
|
|
</div>
|
|
</ng-container>
|
|
</nz-modal>
|
|
|