yss-project/src/app/pages/hr/assets/assets.html

<div class="assets-container">
  <header class="page-header">
    <h1>花名册与档案库</h1>
    <p class="page-description">管理员工全维度信息，包括基本信息、合同管理和证件管理</p>
  </header>

  <!-- 顶部操作栏 -->
  <div class="action-bar">
    <div class="action-buttons">
      <button mat-raised-button color="primary" class="add-btn" (click)="openAddEmployeeDialog()">
        <mat-icon>add</mat-icon>
        新增员工
      </button>
      
      <div class="batch-actions" [class.hidden]="selectedEmployees().length === 0">
        <button mat-button color="warn" (click)="batchDelete()" class="batch-btn">
          <mat-icon>delete</mat-icon>
          批量删除
        </button>
        <div class="export-dropdown">
          <button mat-button class="batch-btn" [matMenuTriggerFor]="exportMenu">
            <mat-icon>file_download</mat-icon>
            导出
            <mat-icon>expand_more</mat-icon>
          </button>
          <mat-menu #exportMenu="matMenu">
            <button mat-menu-item (click)="exportData('excel')">
              <mat-icon>insert_drive_file</mat-icon>
              Excel
            </button>
            <button mat-menu-item (click)="exportData('pdf')">
              <mat-icon>picture_as_pdf</mat-icon>
              PDF
            </button>
          </mat-menu>
        </div>
      </div>
    </div>
    
    <div class="search-filters">
      <div class="search-container">
        <mat-icon class="search-icon">search</mat-icon>
        <input 
          matInput 
          placeholder="搜索员工姓名、工号、手机号或邮箱..."
          [value]="searchTerm()"
          (input)="searchTerm.set($event.target.value)"
          (keyup.enter)="applyFilters()"
          class="search-input"
        >
        <button mat-icon-button *ngIf="searchTerm()" (click)="searchTerm.set('')" class="clear-search">
          <mat-icon>close</mat-icon>
        </button>
      </div>
      
      <div class="filter-container">
        <mat-select placeholder="部门" [value]="departmentFilter()" (selectionChange)="departmentFilter.set($event.value); applyFilters()">
          <mat-option value="">全部部门</mat-option>
          <mat-option *ngFor="let dept of departments" [value]="dept.name">{{ dept.name }}</mat-option>
        </mat-select>
      </div>
      
      <div class="filter-container">
        <mat-select placeholder="状态" [value]="statusFilter()" (selectionChange)="statusFilter.set($event.value); applyFilters()">
          <mat-option value="">全部状态</mat-option>
          <mat-option *ngFor="let status of statuses" [value]="status">{{ status }}</mat-option>
        </mat-select>
      </div>
      
      <button mat-raised-button (click)="applyFilters()" class="filter-btn">
        <mat-icon>filter_list</mat-icon>
        筛选
      </button>
    </div>
  </div>

  <!-- 数据表格 -->
  <div class="table-container">
    <table mat-table [dataSource]="filteredEmployees()" class="employee-table">
      <!-- 复选框列 -->
      <ng-container matColumnDef="select">
        <th mat-header-cell *matHeaderCellDef>
          <mat-checkbox 
            [checked]="isAllSelected()"
            (change)="toggleSelectAll()"
            [indeterminate]="selectedEmployees().length > 0 && selectedEmployees().length < filteredEmployees().length"
          ></mat-checkbox>
        </th>
        <td mat-cell *matCellDef="let employee">
          <mat-checkbox 
            [checked]="selectedEmployees().includes(employee.id)"
            (change)="toggleEmployeeSelection(employee.id)"
          ></mat-checkbox>
        </td>
      </ng-container>

      <!-- 姓名列 -->
      <ng-container matColumnDef="name">
        <th mat-header-cell *matHeaderCellDef class="name-column">姓名</th>
        <td mat-cell *matCellDef="let employee" class="name-column">
          <div class="employee-info">
            <img [src]="employee.avatar" alt="员工头像" class="employee-avatar">
            <span class="employee-name">{{ employee.name }}</span>
          </div>
        </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="email">
        <th mat-header-cell *matHeaderCellDef>邮箱</th>
        <td mat-cell *matCellDef="let employee">{{ employee.email }}</td>
      </ng-container>

      <!-- 入职日期列 -->
      <ng-container matColumnDef="hireDate">
        <th mat-header-cell *matHeaderCellDef>入职日期</th>
        <td mat-cell *matCellDef="let employee">{{ formatDate(employee.hireDate) }}</td>
      </ng-container>

      <!-- 状态列 -->
      <ng-container matColumnDef="status">
        <th mat-header-cell *matHeaderCellDef>状态</th>
        <td mat-cell *matCellDef="let employee">
          <mat-select [value]="employee.status" (selectionChange)="changeEmployeeStatus(employee, $event.value)" class="status-select">
            <mat-option *ngFor="let status of statuses" [value]="status">{{ status }}</mat-option>
          </mat-select>
        </td>
      </ng-container>

      <!-- 合同列 -->
      <ng-container matColumnDef="contract">
        <th mat-header-cell *matHeaderCellDef>合同</th>
        <td mat-cell *matCellDef="let employee">
          <div *ngIf="employee.contract" class="contract-info">
            <div class="contract-date">{{ formatDate(employee.contract.startDate) }} - {{ formatDate(employee.contract.endDate) }}</div>
            <div *ngIf="employee.contract.isExpiringSoon" class="expiring-soon" matTooltip="合同即将到期">
              ⚠️ 即将到期
            </div>
            <button mat-icon-button class="contract-btn" matTooltip="查看合同">
              <mat-icon>description</mat-icon>
            </button>
          </div>
          <div *ngIf="!employee.contract" class="no-contract">
            无合同信息
          </div>
        </td>
      </ng-container>

      <!-- 操作列 -->
      <ng-container matColumnDef="actions">
        <th mat-header-cell *matHeaderCellDef>操作</th>
        <td mat-cell *matCellDef="let employee" class="actions-column">
          <div class="action-buttons">
            <button mat-icon-button class="edit-btn" matTooltip="编辑" (click)="editEmployee(employee)">
              <mat-icon>edit</mat-icon>
            </button>
            <button mat-icon-button class="delete-btn" matTooltip="删除" (click)="deleteEmployee(employee.id)">
              <mat-icon>delete</mat-icon>
            </button>
            <button mat-icon-button class="view-btn" matTooltip="查看详情">
              <mat-icon>visibility</mat-icon>
            </button>
          </div>
        </td>
      </ng-container>

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

      <!-- 空数据状态 -->
      <tr class="mat-row" *matNoDataRow>
        <td class="mat-cell empty-state" [attr.colspan]="displayedColumns.length">
          <div class="empty-icon">
            <mat-icon>search_off</mat-icon>
          </div>
          <p>没有找到符合条件的员工</p>
          <button mat-button (click)="searchTerm.set(''); departmentFilter.set(''); statusFilter.set(''); applyFilters()">
            清除筛选条件
          </button>
        </td>
      </tr>
    </table>
  </div>

  <!-- 分页组件 -->
  <div class="pagination">
    <div class="pagination-info">
      共 {{ filteredEmployees().length }} 条记录，当前显示第 {{ pageIndex * pageSize + 1 }} - 
      {{ Math.min((pageIndex + 1) * pageSize, filteredEmployees().length) }} 条
    </div>
    <mat-paginator
      [length]="filteredEmployees().length"
      [pageSize]="pageSize"
      [pageSizeOptions]="[10, 20, 50]"
      [pageIndex]="pageIndex"
      (page)="onPageChange($event)"
      showFirstLastButtons
    ></mat-paginator>
  </div>
</div>