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.
 
 
 
puhui-go-web/src/app/pages/account/sys-role/sys-role.component.html

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>