提交代码

src/app/pages/account/sys-role/sys-role.component.html

@@ -10,8 +10,9 @@
         </div>
         <div nz-col [nzSpan]="8">
             <div class="search-area">
-                <button nz-button [nzType]="'primary'">搜索</button>
-                <button nz-button (click)="resetForm()">重置</button>
+                <button nz-button [nzType]="'primary'" (click)="searchFormSubmit()">搜索</button>
+                <button nz-button (click)="searchFormReset()">重置</button>
+                <button nz-button [nzType]="'primary'">创建</button>
             </div>
         </div>
     </div>
@@ -19,25 +20,34 @@
 
 
 <nz-table #basicTable
+          [nzScroll]="{ x: '1100px' }"
+          [nzFrontPagination]="false"
           [nzShowQuickJumper]="true"
           [nzShowTotal]="totalTemplate"
+          (nzPageIndexChange)="queryData($event)"
+          [nzTotal]="tableData.total"
           [nzData]="tableData.list" >
     <thead>
     <tr>
-        <th>角色名称</th>
-        <th>角色描述</th>
-        <th>创建时间</th>
-        <th>修改时间</th>
-        <th>操作</th>
+        <th nzWidth="80px">角色名称</th>
+        <th nzWidth="150px">角色描述</th>
+        <th nzWidth="50px">创建时间</th>
+        <th nzWidth="50px">修改时间</th>
+        <th nzWidth="50px">操作</th>
     </tr>
     </thead>
     <tbody>
     <tr *ngFor="let data of basicTable.data">
         <td>{{data.roleName}}</td>
-        <td>{{data.roleStatus}}</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>修改</a>
+            <nz-divider nzType="vertical"></nz-divider>
+            <a>分配菜单</a>
+            <nz-divider nzType="vertical"></nz-divider>
+            <a>删除</a>
         </td>
     </tr>
     </tbody>

src/app/pages/account/sys-role/sys-role.component.ts

@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import {NzTableComponent, NzTbodyComponent, NzTheadComponent} from "ng-zorro-antd/table";
+import {NzTableComponent, NzTbodyComponent, NzTheadComponent, NzThMeasureDirective} from "ng-zorro-antd/table";
 import {NzDividerComponent} from "ng-zorro-antd/divider";
 import {NzFormDirective, NzFormModule} from "ng-zorro-antd/form";
 import {NzColDirective, NzRowDirective} from "ng-zorro-antd/grid";
@@ -14,6 +14,8 @@ import {NzInputDirective} from "ng-zorro-antd/input";
 import {NzFlexDirective} from "ng-zorro-antd/flex";
 import {DatePipe, NgForOf} from "@angular/common";
 import {RoleService} from "../../../servies/role/role.service";
+import {NzModalService} from "ng-zorro-antd/modal";
+import {NzMessageService} from "ng-zorro-antd/message";
 
 @Component({
   selector: 'app-sys-role',
@@ -34,6 +36,7 @@ import {RoleService} from "../../../servies/role/role.service";
     NzFlexDirective,
     NgForOf,
     DatePipe,
+    NzThMeasureDirective,
   ],
   templateUrl: './sys-role.component.html',
   styleUrl: './sys-role.component.less'
@@ -48,20 +51,21 @@ export class SysRoleComponent {
   searchForm: FormGroup;
 
   constructor(private fb: NonNullableFormBuilder,
-              private roleService: RoleService) {
+              private roleService: RoleService,
+              private message: NzMessageService) {
     // 初始化搜索框
     this.searchForm = this.fb.group({
       roleName: [''],
     });
 
-    this.queryData();
+    this.queryData(1);
   }
 
   /**
    * 获取数据
    */
-  queryData() {
-    this.searchForm.value.pageNum = 1;
+  queryData(pageNum: number) {
+    this.searchForm.value.pageNum = pageNum;
     this.searchForm.value.pageSize = 10;
     this.roleService.queryList(this.searchForm.value, (data: any) => {
       console.log(data);
@@ -74,9 +78,16 @@ export class SysRoleComponent {
   }
 
   /**
-   * 搜索框重置
+   * 搜索表单提交
    */
-  resetForm(): void {
+  searchFormSubmit(): void {
+    this.queryData(1);
+  }
+
+  /**
+   * 搜索表单重置
+   */
+  searchFormReset(): void {
     this.searchForm.reset();
   }