yss-project/src/app/pages/hr/employee-records/employee-records.html

<div class="employee-records-container hr-page" [class.sensitive-expanded]="isAnySensitiveExpanded()">
  <!-- 页面标题和操作栏 -->
  <div class="page-header">
    <div class="title-section">
      <h1>员工档案管理</h1>
      <p class="subtitle">管理员工的基本信息、入职流程和离职流程</p>
    </div>
    <div class="action-buttons">
      <button mat-raised-button color="primary" (click)="openAddEmployeeDialog()">
        <mat-icon>add</mat-icon> 新增员工
      </button>
      <button mat-raised-button color="warn" [disabled]="selectedEmployees().length === 0" (click)="batchDelete()">
        <mat-icon>delete</mat-icon> 批量删除
      </button>
      <button mat-button [matMenuTriggerFor]="exportMenu">
        <mat-icon>file_download</mat-icon> 导出
      </button>
      <mat-menu #exportMenu="matMenu" class="hr-menu-panel">
        <button mat-menu-item (click)="exportEmployees('员工花名册')">员工花名册</button>
        <button mat-menu-item (click)="exportEmployees('部门人员清单')">部门人员清单</button>
      </mat-menu>
    </div>
  </div>

  <!-- 筛选条件 -->
  <mat-card class="filter-card">
    <mat-card-content>
      <div class="filter-form">
        <mat-form-field appearance="outline">
          <mat-label>姓名</mat-label>
          <input matInput [ngModel]="filterName()" (ngModelChange)="filterName.set($event)" placeholder="输入员工姓名">
          <button *ngIf="filterName()" matSuffix mat-icon-button (click)="filterName.set('')">
            <mat-icon>close</mat-icon>
          </button>
        </mat-form-field>

        <mat-form-field appearance="outline">
          <mat-label>部门</mat-label>
          <mat-select [panelClass]="'hr-select-panel'" [ngModel]="filterDepartment()" (ngModelChange)="filterDepartment.set($event)">
            <mat-option value="">全部</mat-option>
            <mat-option *ngFor="let dept of departments" [value]="dept.name">{{dept.name}}</mat-option>
          </mat-select>
        </mat-form-field>

        <mat-form-field appearance="outline">
          <mat-label>职位</mat-label>
          <mat-select [panelClass]="'hr-select-panel'" [ngModel]="filterPosition()" (ngModelChange)="filterPosition.set($event)">
            <mat-option value="">全部</mat-option>
            <mat-option *ngFor="let pos of positions" [value]="pos.name">{{pos.name}}</mat-option>
          </mat-select>
        </mat-form-field>

        <mat-form-field appearance="outline">
          <mat-label>状态</mat-label>
          <mat-select [panelClass]="'hr-select-panel'" [ngModel]="filterStatus()" (ngModelChange)="filterStatus.set($event)">
            <mat-option value="">全部</mat-option>
            <mat-option value="在职">在职</mat-option>
            <mat-option value="离职">离职</mat-option>
            <mat-option value="试用期">试用期</mat-option>
          </mat-select>
        </mat-form-field>

        <button mat-button color="primary" (click)="resetFilters()">
          <mat-icon>refresh</mat-icon> 重置
        </button>
      </div>
    </mat-card-content>
  </mat-card>

  <!-- 员工列表 -->
  <div class="employee-table-container">
    <table mat-table [dataSource]="filteredEmployees()" class="employee-table">
      <!-- 选择列 -->
      <ng-container matColumnDef="select">
        <th mat-header-cell *matHeaderCellDef>
          <mat-checkbox 
            [checked]="isAllSelected()" 
            [indeterminate]="selectedEmployees().length > 0 && !isAllSelected()"
            (change)="toggleSelectAll($event.checked)">
          </mat-checkbox>
        </th>
        <td mat-cell *matCellDef="let employee">
          <mat-checkbox 
            [checked]="isSelected(employee.id)"
            (change)="toggleSelection(employee.id)">
          </mat-checkbox>
        </td>
      </ng-container>

      <!-- 姓名列 -->
      <ng-container matColumnDef="name">
        <th mat-header-cell *matHeaderCellDef>姓名</th>
        <td mat-cell *matCellDef="let employee">{{employee.name}}</td>
      </ng-container>

      <!-- 工号列 -->
      <ng-container matColumnDef="employeeId">
        <th mat-header-cell *matHeaderCellDef>工号</th>
        <td mat-cell *matCellDef="let employee">{{employee.employeeId}}</td>
      </ng-container>

      <!-- 部门列 -->
      <ng-container matColumnDef="department">
        <th mat-header-cell *matHeaderCellDef>部门</th>
        <td mat-cell *matCellDef="let employee">{{employee.department}}</td>
      </ng-container>

      <!-- 职位列 -->
      <ng-container matColumnDef="position">
        <th mat-header-cell *matHeaderCellDef>职位</th>
        <td mat-cell *matCellDef="let employee">{{employee.position}}</td>
      </ng-container>

      <!-- 手机号列 -->
      <ng-container matColumnDef="phone">
        <th mat-header-cell *matHeaderCellDef>手机号</th>
        <td mat-cell *matCellDef="let employee">{{employee.phone}}</td>
      </ng-container>

      <!-- 新增：身份证号列，仅在在职员工显示，初始脱敏 -->
      <ng-container matColumnDef="idCard">
        <th mat-header-cell *matHeaderCellDef>身份证号</th>
        <td mat-cell *matCellDef="let employee">
          @if (employee.status === '在职') {
            <span class="idcard" [class.expanded]="isSensitiveExpanded(employee.id)" [matTooltip]="employee.idCard || ''">
              {{ isSensitiveExpanded(employee.id) ? (employee.idCard || '') : maskIdCard(employee.idCard || '') }}
            </span>
          } @else {
            <span class="muted">-</span>
          }
        </td>
      </ng-container>

      <!-- 新增：银行卡号列，仅在在职员工显示，初始脱敏 -->
      <ng-container matColumnDef="bankCard">
        <th mat-header-cell *matHeaderCellDef>银行卡号</th>
        <td mat-cell *matCellDef="let employee">
          @if (employee.status === '在职') {
            <span class="bankcard" [class.expanded]="isSensitiveExpanded(employee.id)" [matTooltip]="formatBankCard(employee.bankCard || '')">
              {{ isSensitiveExpanded(employee.id) ? formatBankCard(employee.bankCard || '') : maskBankCard(employee.bankCard || '') }}
            </span>
          } @else {
            <span class="muted">-</span>
          }
        </td>
      </ng-container>

      <!-- 入职日期列 -->
      <ng-container matColumnDef="hireDate">
        <th mat-header-cell *matHeaderCellDef>入职日期</th>
        <td mat-cell *matCellDef="let employee">{{employee.hireDate | date:'yyyy-MM-dd'}}</td>
      </ng-container>

      <!-- 状态列 -->
      <ng-container matColumnDef="status">
        <th mat-header-cell *matHeaderCellDef>状态</th>
        <td mat-cell *matCellDef="let employee">
          <span class="status-badge" [ngClass]="{
            'status-active': employee.status === '在职',
            'status-probation': employee.status === '试用期',
            'status-resigned': employee.status === '离职'
          }">{{employee.status}}</span>
        </td>
      </ng-container>

      <!-- 操作列：去掉“查看详情”按钮，改为眼睛图标控制敏感信息显示 -->
      <ng-container matColumnDef="actions">
        <th mat-header-cell *matHeaderCellDef>操作</th>
        <td mat-cell *matCellDef="let employee" class="actions-cell">
          <button mat-icon-button color="primary" (click)="toggleSensitive(employee.id)" [matTooltip]="isSensitiveExpanded(employee.id) ? '隐藏敏感信息' : '查看敏感信息'">
            <mat-icon>{{ isSensitiveExpanded(employee.id) ? 'visibility_off' : 'visibility' }}</mat-icon>
          </button>
          <button mat-icon-button class="more-actions-btn" [matMenuTriggerFor]="actionMenu" aria-label="操作菜单">
            <mat-icon>more_vert</mat-icon>
          </button>
          <mat-menu #actionMenu="matMenu" panelClass="hr-menu-panel">
            <button mat-menu-item (click)="openEditEmployeeDialog(employee)">
              <mat-icon>edit</mat-icon>
              <span>编辑</span>
            </button>
            <button mat-menu-item (click)="openOnboardingDialog(employee)" *ngIf="employee.status === '试用期'">
              <mat-icon>assignment</mat-icon>
              <span>入职流程</span>
            </button>
            <button mat-menu-item (click)="openOffboardingDialog(employee)" *ngIf="employee.status !== '离职'">
              <mat-icon>exit_to_app</mat-icon>
              <span>离职流程</span>
            </button>
            <button mat-menu-item (click)="deleteEmployee(employee)">
              <mat-icon>delete</mat-icon>
              <span>删除</span>
            </button>
          </mat-menu>
        </td>
      </ng-container>

      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
    </table>

    <!-- 空状态提示 -->
    <div *ngIf="filteredEmployees().length === 0" class="empty-state">
      <mat-icon>person_off</mat-icon>
      <p>没有找到符合条件的员工记录</p>
      <button mat-raised-button color="primary" (click)="resetFilters()">重置筛选条件</button>
    </div>
  </div>

  <!-- 分页器 -->
  <mat-paginator [length]="totalLength()"
                [pageSize]="pageSize()"
                [pageIndex]="pageIndex()"
                [pageSizeOptions]="pageSizeOptions"
                (page)="onPageChange($event)"
                showFirstLastButtons>
  </mat-paginator>

  <!-- 快捷功能卡片 -->
  <div class="quick-actions">
    <mat-card class="quick-action-card">
      <mat-card-header>
        <mat-icon mat-card-avatar>assignment_ind</mat-icon>
        <mat-card-title>入职流程</mat-card-title>
        <mat-card-subtitle>新员工入职流程管理</mat-card-subtitle>
      </mat-card-header>
      <mat-card-content>
        <p>待处理入职流程: <span class="highlight-count">2</span></p>
      </mat-card-content>
      <mat-card-actions>
        <button mat-button color="primary" (click)="openQuickAction('onboarding')">查看详情</button>
      </mat-card-actions>
    </mat-card>

    <mat-card class="quick-action-card">
      <mat-card-header>
        <mat-icon mat-card-avatar>exit_to_app</mat-icon>
        <mat-card-title>离职流程</mat-card-title>
        <mat-card-subtitle>员工离职流程管理</mat-card-subtitle>
      </mat-card-header>
      <mat-card-content>
        <p>待处理离职流程: <span class="highlight-count">1</span></p>
      </mat-card-content>
      <mat-card-actions>
        <button mat-button color="primary" (click)="openQuickAction('offboarding')">查看详情</button>
      </mat-card-actions>
    </mat-card>

    <mat-card class="quick-action-card">
      <mat-card-header>
        <mat-icon mat-card-avatar>warning</mat-icon>
        <mat-card-title>试用期提醒</mat-card-title>
        <mat-card-subtitle>试用期即将到期员工</mat-card-subtitle>
      </mat-card-header>
      <mat-card-content>
        <p>即将到期员工: <span class="highlight-count">3</span></p>
      </mat-card-content>
      <mat-card-actions>
        <button mat-button color="primary" (click)="openQuickAction('probation')">查看详情</button>
      </mat-card-actions>
    </mat-card>
  </div>
</div>