角色管理-新增、修改

src/app/pages/system-management/role-management/role-management.component.html

@@ -1,3 +1,60 @@
-<p>
-  role-management works!
-</p>
+<div class="system-main-container"> 
+	<div class="user-manage">
+		<div class="system-main-content card" id="main-box">
+			<div class="search-box">
+				<div nz-row>
+					<div nz-col nzSpan="8">
+						<nz-form-item >
+							<nz-form-label class="left">角色名称</nz-form-label>
+							<nz-form-control nzSpan="17">
+							  <input nz-input [(ngModel)]='search.role_name'  placeholder="请输入角色名称">
+							</nz-form-control>
+						</nz-form-item>
+					</div>
+					<div nz-col nzSpan="8">
+						<nz-form-item >
+							<nz-form-control nzSpan="24">
+								<button class="mr10" nz-button nzType="primary"  (click)="queryTable()"><i nz-icon type="search"></i>查询</button>
+								<button (click)="reset()" nz-button nzType="primary"><i nz-icon type="sync" theme="outline"></i>重置</button>
+							</nz-form-control>
+						</nz-form-item>
+					</div>
+				</div>
+				<div class="table-operation-box">
+					<button (click)="addModify(1)" nz-button nzType="primary"><i nz-icon type="plus" theme="outline"></i>新增</button>
+				</div>
+			</div>
+			<app-request-status *ngIf='statusParamsTable.status!=4' [statusParams]='statusParamsTable'></app-request-status>
+			<div class="table-box" *ngIf='statusParamsTable.status==3||statusParamsTable.status==4||statusParamsTable.status==0'>
+				<nz-table [nzShowPagination]='false'  #dataSet [nzData]="tableData">
+					<thead>
+						<tr>
+							<th>角色名称</th>
+							<th>角色类型</th>
+							<th>创建人</th>
+							<th>创建日期</th>
+							<th>操作</th>
+						</tr>
+					</thead>
+					<tbody>
+						<tr *ngFor="let item of dataSet.data">
+							<td>{{item.role_name}}</td>
+							<td><span *ngIf="item.role_type==0">系统内置</span><span *ngIf="item.role_type==1">用户定义</span></td>
+							<td>{{item.create_by}}</td>
+							<td>{{item.create_date| date:'yyyy-MM-dd HH:mm:ss'}}</td>
+							<td>
+								<i (click)="addModify(2,item)" class="table-operation-btn edit" nz-icon type="edit" theme="outline"></i>
+								<nz-divider nzType="vertical"></nz-divider>
+								<i nz-popconfirm nzTitle="确定删除该角色?" nzOkText="确定" nzCancelText="取消" (nzOnConfirm)="delectConfirm(item)" (nzOnCancel)="delectCancel()" class="table-operation-btn danger" nz-icon type="delete" theme="outline"></i>
+							</td>
+						</tr>
+					</tbody>
+				</nz-table>
+				<div class="page-box" *ngIf="statusParamsTable.status==3">
+					<nz-pagination [nzPageIndex]="search.page_index" (nzPageIndexChange)='pageChange($event)' [nzPageSize]='search.page_size' [nzTotal]="collectionSize"></nz-pagination>
+				</div>
+			</div>	
+			
+		</div>
+	</div>
+</div>