提交代码

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

@@ -1 +1,136 @@
-<p>系统账户</p>
+<form nz-form [formGroup]="searchForm" class="search_form">
+  <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="userName" />
+        </nz-form-control>
+      </nz-form-item>
+    </div>
+    <div nz-col [nzSpan]="4">
+      <nz-form-item>
+        <nz-form-label>登录账户</nz-form-label>
+        <nz-form-control>
+          <input nz-input formControlName="loginName" />
+        </nz-form-control>
+      </nz-form-item>
+    </div>
+    <div nz-col [nzSpan]="4">
+      <nz-form-item>
+        <nz-form-label>联系方式</nz-form-label>
+        <nz-form-control>
+          <input nz-input formControlName="telephone" />
+        </nz-form-control>
+      </nz-form-item>
+    </div>
+    <div nz-col [nzSpan]="4">
+      <nz-form-item>
+        <nz-form-label>状态</nz-form-label>
+        <nz-form-control>
+          <nz-select formControlName="status" nzAllowClear>
+            <nz-option nzValue="1" nzLabel="正常"></nz-option>
+            <nz-option nzValue="2" nzLabel="禁用"></nz-option>
+          </nz-select>
+        </nz-form-control>
+      </nz-form-item>
+    </div>
+    <div nz-col [nzSpan]="8">
+        <button nz-button [nzType]="'primary'" (click)="searchFormSubmit()">搜索</button>
+        <button nz-button (click)="searchFormReset()">重置</button>
+        <button nz-button [nzType]="'primary'" (click)="showEditAccount(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="50px">登录账户</th>
+    <th nzWidth="80px">联系方式</th>
+    <th nzWidth="30px">状态</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.userName}}</td>
+    <td>{{data.loginName}}</td>
+    <td>{{data.telephone}}</td>
+    <td>{{data.status | sysAccountStatus}}</td>
+    <td>{{data.createTime | date: 'yyyy-MM-dd HH:mm'}}</td>
+    <td>{{data.updateTime | date: 'yyyy-MM-dd HH:mm'}}</td>
+    <td>
+      <a (click)="showEditAccount(false, data)">修改</a>
+      <nz-divider nzType="vertical"></nz-divider>
+      <a nz-dropdown [nzDropdownMenu]="menu">
+        更多操作
+        <span nz-icon nzType="down"></span>
+      </a>
+      <nz-dropdown-menu #menu="nzDropdownMenu">
+        <ul nz-menu nzSelectable>
+          <li nz-menu-item *ngIf="data.status == 1"><a (click)="showDisable(data.id)">禁用账户</a></li>
+          <li nz-menu-item *ngIf="data.status == 2"><a (click)="showRestore(data.id)">恢复账户</a></li>
+          <li nz-menu-item><a (click)="showResetPwd(data.id)">密码重置</a></li>
+          <li nz-menu-item nzDanger (click)="showDelData(data.id)">删除</li>
+        </ul>
+      </nz-dropdown-menu>
+    </td>
+  </tr>
+  </tbody>
+  <ng-template #totalTemplate let-total>总计 {{ total }} 条</ng-template>
+</nz-table>
+
+
+<nz-modal [(nzVisible)]="editAccountVisible" nzTitle="{{editAccountTitle}}" [nzFooter]="null" (nzOnCancel)="closeEditAccount()">
+  <ng-container *nzModalContent>
+    <form nz-form [formGroup]="editAccountForm" (ngSubmit)="submitEditAccountForm()">
+
+      <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="userName"/>
+        </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="loginName"/>
+        </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="telephone"/>
+        </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 nzShowSearch formControlName="roleId">
+            <nz-option *ngFor="let item of roleData" nzValue="{{item.id}}" nzLabel="{{item.roleName}}"></nz-option>
+          </nz-select>
+        </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>

src/app/pages/account/sys-account/sys-account.component.less

@@ -0,0 +1,15 @@
+[nz-form-label] {
+  overflow: visible;
+}
+button {
+  margin-left: 8px;
+}
+.search-area {
+  text-align: left;
+}
+.submit-btn {
+  width: 150px;
+}
+.search_form {
+  margin-bottom: 15px;
+}

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

@@ -1,12 +1,318 @@
 import { Component } from '@angular/core';
+import {FormGroup, NonNullableFormBuilder, ReactiveFormsModule, Validators} from "@angular/forms";
+import {NzMessageService} from "ng-zorro-antd/message";
+import {NzModalComponent, NzModalModule, NzModalService} from "ng-zorro-antd/modal";
+import {SysAccountService} from "../../../servies/account/sys-account.service";
+import {DatePipe, NgForOf, NgIf} from "@angular/common";
+import {NzButtonComponent} from "ng-zorro-antd/button";
+import {NzColDirective, NzRowDirective} from "ng-zorro-antd/grid";
+import {NzDividerComponent} from "ng-zorro-antd/divider";
+import {NzFlexDirective} from "ng-zorro-antd/flex";
+import {NzFormControlComponent, NzFormDirective, NzFormItemComponent, NzFormLabelComponent} from "ng-zorro-antd/form";
+import {NzInputDirective} from "ng-zorro-antd/input";
+import {
+  NzTableCellDirective,
+  NzTableComponent, NzTableModule,
+  NzTbodyComponent,
+  NzTheadComponent,
+  NzThMeasureDirective, NzTrDirective
+} from "ng-zorro-antd/table";
+import {NzTreeComponent} from "ng-zorro-antd/tree";
+import {NzOptionComponent, NzSelectComponent} from "ng-zorro-antd/select";
+import {NzDropDownModule} from "ng-zorro-antd/dropdown";
+import {NzIconDirective} from "ng-zorro-antd/icon";
+import {SysAccountStatusPipe} from "../../../pipes/account/sys-account-status.pipe";
+import {RoleService} from "../../../servies/role/role.service";
 
 @Component({
   selector: 'app-sys-account',
   standalone: true,
-  imports: [],
+  imports: [
+    DatePipe,
+    NgForOf,
+    NgIf,
+    NzButtonComponent,
+    NzColDirective,
+    NzDividerComponent,
+    NzFlexDirective,
+    NzFormControlComponent,
+    NzFormDirective,
+    NzFormItemComponent,
+    NzFormLabelComponent,
+    NzInputDirective,
+    NzModalComponent,
+    NzRowDirective,
+    NzTableCellDirective,
+    NzTableComponent,
+    NzTbodyComponent,
+    NzThMeasureDirective,
+    NzTheadComponent,
+    NzTrDirective,
+    NzTreeComponent,
+    ReactiveFormsModule,
+    NzTableModule,
+    NzModalModule,
+    NzSelectComponent,
+    NzOptionComponent,
+    NzDropDownModule,
+    NzIconDirective,
+    SysAccountStatusPipe,
+  ],
   templateUrl: './sys-account.component.html',
   styleUrl: './sys-account.component.less'
 })
 export class SysAccountComponent {
+  // 表单页数
+  tablePageNum = 1;
+  // 表单数据
+  tableData: any = {
+    total: 0,
+    list: [],
+  };
+  // 角色数据
+  roleData: any = [];
+  // 搜索表单
+  searchForm: FormGroup;
+  // 编辑账户弹出框
+  editAccountVisible = false;
+  // 编辑账户表单
+  editAccountForm: FormGroup;
+  // 编辑账户标题
+  editAccountTitle = '';
 
+  constructor(private fb: NonNullableFormBuilder,
+              private sysAccountService: SysAccountService,
+              private roleService: RoleService,
+              private message: NzMessageService,
+              private modal: NzModalService) {
+    // 初始化搜索框
+    this.searchForm = this.fb.group({
+      userName: [''],
+      loginName: [''],
+      telephone: [''],
+      status: [''],
+    });
+
+    // 初始化账户表单
+    this.editAccountForm = this.fb.group({
+      id: [''],
+      userName: ['', [Validators.required]],
+      loginName: ['', [Validators.required]],
+      telephone: [''],
+      roleId: ['', [Validators.required]],
+    });
+    this.queryAllRole();
+    this.queryData();
+  }
+
+  /**
+   * 获取角色
+   */
+  queryAllRole() {
+    this.roleService.queryAllRole((data: any) => {
+      if (data['return_code'] == '000000') {
+        this.roleData = data['return_data'];
+      }
+    });
+  }
+
+  /**
+   * 获取数据
+   */
+  queryData() {
+    this.searchForm.value.pageNum = this.tablePageNum;
+    this.searchForm.value.pageSize = 10;
+    this.searchForm.value.time = new Date().getTime();
+    this.sysAccountService.queryList(this.searchForm.value, (data: any) => {
+      if (data['return_code'] == '000000') {
+        this.tableData = data['return_data'];
+      }
+    });
+  }
+
+  /**
+   * 搜索表单提交
+   */
+  searchFormSubmit(): void {
+    this.tablePageNum = 1;
+    this.queryData();
+  }
+
+  /**
+   * 搜索表单重置
+   */
+  searchFormReset(): void {
+    this.searchForm.reset();
+  }
+
+  /**
+   * 打开编辑账户模态框
+   * @param edit 编辑荒唐 true:增加  false：修改
+   * @param data
+   */
+  showEditAccount(edit: boolean, data: any) {
+    if (edit) {
+      this.editAccountTitle = '创建账户';
+    } else {
+      this.editAccountTitle = '修改账户';
+      data['roleId'] = ""+data['roleId']
+      this.editAccountForm.patchValue(data);
+    }
+    this.editAccountVisible = true;
+  }
+
+  /**
+   * 提交表单
+   */
+  submitEditAccountForm() {
+    if (this.editAccountForm.valid) {
+      this.sysAccountService.editUser(this.editAccountForm.value, (data: any) => {
+        if (data['return_code'] == '000000') {
+          // 刷新数据
+          this.queryData();
+
+          this.message.create('success', '操作成功');
+
+          // 关闭弹窗
+          this.closeEditAccount();
+        } else {
+          this.message.create('error', data['return_msg']);
+        }
+      });
+    } else {
+      Object.values(this.editAccountForm.controls).forEach(control => {
+        if (control.invalid) {
+          control.markAsDirty();
+          control.updateValueAndValidity({ onlySelf: true });
+        }
+      });
+    }
+  }
+
+  /**
+   * 关闭编辑账户模态框
+   */
+  closeEditAccount() {
+    this.editAccountForm.reset();
+    this.editAccountVisible = false;
+  }
+
+  /**
+   * 打开禁用账户确认框
+   */
+  showRestore(dataId: number) {
+    this.modal.confirm({
+      nzTitle: '提示',
+      nzContent: '确定恢复账户状态？',
+      nzOnOk: () => this.restore(dataId)
+    });
+  }
+
+  /**
+   * 恢复
+   */
+  restore(dataId: number) {
+    const param = {
+      userId: dataId
+    }
+    this.sysAccountService.restore(param, (data: any) => {
+      if (data['return_code'] == '000000') {
+        // 刷新数据
+        this.queryData();
+        this.message.success("操作成功");
+      } else {
+        this.message.create('error', data['return_msg']);
+      }
+    });
+  }
+
+  /**
+   * 打开禁用账户确认框
+   */
+  showDisable(dataId: number) {
+    this.modal.confirm({
+      nzTitle: '提示',
+      nzContent: '确定禁用账户吗？禁用后无法登录！',
+      nzOnOk: () => this.disable(dataId)
+    });
+  }
+
+  /**
+   * 禁用
+   */
+  disable(dataId: number) {
+    const param = {
+      userId: dataId
+    }
+    this.sysAccountService.disable(param, (data: any) => {
+      if (data['return_code'] == '000000') {
+        // 刷新数据
+        this.queryData();
+        this.message.success("操作成功");
+      } else {
+        this.message.create('error', data['return_msg']);
+      }
+    });
+  }
+
+  /**
+   * 打开密码重置确认框
+   */
+  showResetPwd(dataId: number) {
+    this.modal.confirm({
+      nzTitle: '提示',
+      nzContent: '确定重置账户登录密码吗？',
+      nzOnOk: () => this.resetPwd(dataId)
+    });
+  }
+
+  /**
+   * 密码重置
+   */
+  resetPwd(dataId: number) {
+    const param = {
+      userId: dataId
+    }
+    this.sysAccountService.resetPwd(param, (data: any) => {
+      if (data['return_code'] == '000000') {
+        // 刷新数据
+        this.queryData();
+        this.modal.success({
+          nzTitle: '提示',
+          nzContent: '密码重置成功，新密码：123456'
+        });
+      } else {
+        this.message.create('error', data['return_msg']);
+      }
+    });
+  }
+
+  /**
+   * 展示删除数据
+   */
+  showDelData(dataId: number) {
+    this.modal.confirm({
+      nzTitle: '提示',
+      nzContent: '确定删除该账户数据？',
+      nzOnOk: () => this.delData(dataId)
+    });
+  }
+
+  /**
+   * 删除数据
+   */
+  delData(dataId: number) {
+    const param = {
+      userId: dataId
+    }
+    this.sysAccountService.delete(param, (data: any) => {
+      if (data['return_code'] == '000000') {
+        // 刷新数据
+        this.queryData();
+        this.message.create('success', '操作成功');
+      } else {
+        this.message.create('error', data['return_msg']);
+      }
+    });
+  }
 }

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

@@ -1,6 +1,6 @@
 <form nz-form [formGroup]="searchForm">
     <div nz-row [nzGutter]="24">
-        <div nz-col [nzSpan]="8">
+        <div nz-col [nzSpan]="4">
             <nz-form-item>
                 <nz-form-label>角色名称</nz-form-label>
                 <nz-form-control>
@@ -8,13 +8,11 @@
                 </nz-form-control>
             </nz-form-item>
         </div>
-        <div nz-col [nzSpan]="8">
+      <div nz-col [nzSpan]="4">
-            <div class="search-area">
+          <button nz-button [nzType]="'primary'" (click)="searchFormSubmit()">搜索</button>
-                <button nz-button [nzType]="'primary'" (click)="searchFormSubmit()">搜索</button>
+          <button nz-button (click)="searchFormReset()">重置</button>
-                <button nz-button (click)="searchFormReset()">重置</button>
+          <button nz-button [nzType]="'primary'" (click)="showEditRole(true, null)">创建</button>
-                <button nz-button [nzType]="'primary'" (click)="showEditRole(true, null)">创建</button>
+      </div>
-            </div>
-        </div>
     </div>
 </form>
 
@@ -32,7 +30,7 @@
         <th nzWidth="80px">角色名称</th>
         <th nzWidth="100px">角色描述</th>
         <th nzWidth="50px">创建时间</th>
-        <th nzWidth="50px">修改时间</th>
+        <th nzWidth="50px">更新时间</th>
         <th nzWidth="50px">操作</th>
     </tr>
     </thead>

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

@@ -4,9 +4,6 @@
 button {
   margin-left: 8px;
 }
-.search-area {
-  text-align: right;
-}
 .submit-btn {
   width: 150px;
 }

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

@@ -142,8 +142,8 @@ export class SysRoleComponent {
 
   /**
    * 打开编辑角色模态框
-   * @param edit
+   * @param edit 编辑状态 ture：新增  false：修改
-   * @param data
+   * @param data 数据
    */
   showEditRole(edit: boolean, data: any) {
       if (edit) {
@@ -197,7 +197,7 @@ export class SysRoleComponent {
   showDelData(dataId: number) {
     this.modal.confirm({
       nzTitle: '提示',
-      nzContent: '确实删除数据？',
+      nzContent: '确定删除数据？',
       nzOnOk: () => this.delData(dataId)
     });
   }

src/app/pipes/account/sys-account-status.pipe.ts

@@ -0,0 +1,20 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'sysAccountStatus',
+  standalone: true
+})
+export class SysAccountStatusPipe implements PipeTransform {
+
+  transform(value: number): string {
+    switch (value) {
+      case 1:
+        return '正常';
+      case 2:
+        return '禁用';
+      default:
+        return '未知';
+    }
+  }
+
+}

src/app/servies/account/sys-account.service.ts

@@ -0,0 +1,104 @@
+import { Injectable } from '@angular/core';
+import {HttpClient} from "@angular/common/http";
+import {environment} from "../../../environments/environment";
+import {ObjectData} from "../../utils/objectData.service";
+
+@Injectable({
+  providedIn: 'root'
+})
+export class SysAccountService {
+
+  constructor(private http: HttpClient) { }
+
+  /**
+   *
+   * 编辑账户
+   * @param params
+   * @param callBack
+   */
+  public editUser(params: object, callBack:any) {
+    this.http.post(environment.baseUrl + 'secUser/editUser', params).subscribe(data => {
+      callBack(data);
+    });
+  }
+
+  /**
+   * 删除账户
+   * @param params
+   * @param callBack
+   */
+  public delete(params: object, callBack:any) {
+    this.http.post(environment.baseUrl + 'secUser/delete', params).subscribe(data => {
+      callBack(data);
+    });
+  }
+
+  /**
+   * 恢复账户
+   * @param params
+   * @param callBack
+   */
+  public restore(params: object, callBack:any) {
+    this.http.post(environment.baseUrl + 'secUser/restore', params).subscribe(data => {
+      callBack(data);
+    });
+  }
+
+  /**
+   * 禁用账户
+   * @param params
+   * @param callBack
+   */
+  public disable(params: object, callBack:any) {
+    this.http.post(environment.baseUrl + 'secUser/disable', params).subscribe(data => {
+      callBack(data);
+    });
+  }
+
+  /**
+   * 密码重置
+   * @param userId
+   * @param callBack
+   */
+  public resetPwd(param: object, callBack:any) {
+    this.http.post(environment.baseUrl + 'secUser/resetPwd', param).subscribe(data => {
+      callBack(data);
+    });
+  }
+
+  /**
+   * 查询详情
+   * @param userId
+   * @param callBack
+   */
+  public queryDetail(userId: number, callBack:any) {
+    this.http.get(environment.baseUrl + 'secUser/queryDetail?userId='+userId).subscribe(data => {
+      callBack(data);
+    });
+  }
+
+  /**
+   * 查询列表
+   * @param params
+   * @param callBack
+   */
+  public queryList(params: object, callBack:any) {
+    this.http.get(environment.baseUrl + 'secUser/queryList?'+ObjectData.objectByString(params)).subscribe(data => {
+      callBack(data);
+    });
+  }
+
+  /**
+   * 查询账户登录列表
+   * @param params
+   * @param callBack
+   */
+  public queryLoginLogList(params: object, callBack:any) {
+    this.http.get(environment.baseUrl + 'secUser/queryLoginLogList?'+ObjectData.objectByString(params)).subscribe(data => {
+      callBack(data);
+    });
+  }
+
+
+
+}

src/app/servies/role/role.service.ts

@@ -54,4 +54,14 @@ export class RoleService {
     });
   }
 
+  /**
+   * 查询全部角色
+   * @param callBack
+   */
+  public queryAllRole(callBack:any) {
+    this.http.get(environment.baseUrl + 'secRole/queryAllRole').subscribe(data => {
+      callBack(data);
+    });
+  }
+
 }