yss-project/src/app/pages/admin/employees/employees.html

<div class="employees-container">
  <div class="page-header">
    <div>
      <h1>员工管理</h1>
      <p class="subtitle">根据身份管理企业员工 (数据从企业微信同步)</p>
    </div>
    <button class="btn btn-secondary" (click)="exportEmployees()">导出</button>
  </div>

  <!-- 统计卡片 - 按身份统计 -->
  <div class="stats-cards">
    <div class="stat-card" (click)="setRoleFilter('all')" [class.active]="roleFilter() === 'all'">
      <div class="stat-value">{{ stats.total() }}</div>
      <div class="stat-label">全部员工</div>
    </div>
    <div class="stat-card" (click)="setRoleFilter('客服')" [class.active]="roleFilter() === '客服'">
      <div class="stat-value">{{ stats.service() }}</div>
      <div class="stat-label">客服</div>
    </div>
    <div class="stat-card" (click)="setRoleFilter('组员')" [class.active]="roleFilter() === '组员'">
      <div class="stat-value">{{ stats.designer() }}</div>
      <div class="stat-label">设计师(组员)</div>
    </div>
    <div class="stat-card" (click)="setRoleFilter('组长')" [class.active]="roleFilter() === '组长'">
      <div class="stat-value">{{ stats.leader() }}</div>
      <div class="stat-label">组长</div>
    </div>
    <div class="stat-card" (click)="setRoleFilter('人事')" [class.active]="roleFilter() === '人事'">
      <div class="stat-value">{{ stats.hr() }}</div>
      <div class="stat-label">人事</div>
    </div>
    <div class="stat-card" (click)="setRoleFilter('财务')" [class.active]="roleFilter() === '财务'">
      <div class="stat-value">{{ stats.finance() }}</div>
      <div class="stat-label">财务</div>
    </div>
  </div>

  <!-- 筛选栏 -->
  <div class="filter-bar">
    <input
      type="text"
      class="search-input"
      placeholder="搜索姓名、手机号或企微ID..."
      [ngModel]="keyword()"
      (ngModelChange)="keyword.set($event)"
    />
    <button class="btn btn-text" (click)="resetFilters()">重置</button>
  </div>

  <!-- 数据表格 -->
  <div *ngIf="loading()" class="loading-state">加载中...</div>
  <div *ngIf="!loading()" class="data-table">
    <table>
      <thead>
        <tr>
          <th>姓名</th>
          <th>手机号</th>
          <th>企微ID</th>
          <th>身份</th>
          <th>部门</th>
          <th>状态</th>
          <th width="120">操作</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let emp of filtered" [class.disabled]="emp.isDisabled">
          <td>
            <div style="display:flex;align-items:center;gap:8px;">
              <img [src]="emp.avatar || '/assets/images/default-avatar.svg'" alt="" style="width:28px;height:28px;border-radius:50%;"/>
              <div>
                <div style="font-weight:600;">{{ emp.name }}</div>
                <div style="font-size:12px;color:#888;" *ngIf="emp.position">{{ emp.position }}</div>
              </div>
            </div>
          </td>
          <td>{{ emp.mobile }}</td>
          <td>{{ emp.userid }}</td>
          <td><span class="badge">{{ emp.roleName }}</span></td>
          <td>
            @if(emp.roleName=="客服"){
              客服部
            } @else if(emp.roleName=="管理员") {
              总部
            } @else {
              {{ emp.department }}
            }
          </td>
          <td><span [class]="'status ' + (emp.isDisabled ? 'disabled' : 'active')">{{ emp.isDisabled ? '已禁用' : '正常' }}</span></td>
          <td>
            <button class="btn-icon" (click)="viewEmployee(emp)" title="查看">👁</button>
            <button class="btn-icon" (click)="editEmployee(emp)" title="编辑">✏️</button>
            <button class="btn-icon" (click)="toggleEmployee(emp)" [title]="emp.isDisabled ? '启用' : '禁用'">
              {{ emp.isDisabled ? '✓' : '🚫' }}
            </button>
          </td>
        </tr>
        <tr *ngIf="filtered.length === 0">
          <td colspan="7" class="empty-state">暂无数据</td>
        </tr>
      </tbody>
    </table>
  </div>

  <!-- 侧边面板 -->
  <div class="side-panel" [class.open]="showPanel">
    <div class="panel-overlay" (click)="closePanel()"></div>
    <div class="panel-content">
      <div class="panel-header">
        <h2>{{ panelMode === 'edit' ? '编辑员工' : '员工详情' }}</h2>
        <button class="btn-close" (click)="closePanel()">×</button>
      </div>
      <div class="panel-body" *ngIf="currentEmployee">
        <div *ngIf="panelMode === 'detail'" class="detail-view">
          <div class="detail-row">
            <img [src]="currentEmployee.avatar || '/assets/images/default-avatar.svg'" class="avatar"/>
            <div class="title-block">
              <div class="name">{{ currentEmployee.name }}</div>
              <div class="position" *ngIf="currentEmployee.position">{{ currentEmployee.position }}</div>
            </div>
          </div>
          <div class="grid">
            <div class="detail-item"><label>手机号</label><div>{{ currentEmployee.mobile || '-' }}</div></div>
            <div class="detail-item"><label>邮箱</label><div>{{ currentEmployee.email || '-' }}</div></div>
            <div class="detail-item"><label>企微ID</label><div>{{ currentEmployee.userid || '-' }}</div></div>
            <div class="detail-item"><label>身份</label><div>{{ currentEmployee.roleName }}</div></div>
            <div class="detail-item"><label>部门</label><div>
              @if(currentEmployee.roleName=="客服") {
                客服部
              } @else if(currentEmployee.roleName=="管理员") {
                总部
              } @else {
                {{ currentEmployee.department }}
              }
            </div></div>
            <div class="detail-item"><label>入职</label><div>{{ currentEmployee.joinDate || '-' }}</div></div>
            <div class="detail-item"><label>状态</label><div>{{ currentEmployee.isDisabled ? '已禁用' : '正常' }}</div></div>
          </div>
          <div class="skills" *ngIf="currentEmployee.skills?.length">
            <label>技能</label>
            <div class="tags">
              <span class="tag" *ngFor="let s of currentEmployee.skills">{{ s }}</span>
            </div>
          </div>
          <div class="workload" *ngIf="currentEmployee.workload">
            <label>工作量</label>
            <div class="grid">
              <div class="detail-item"><label>当前项目</label><div>{{ currentEmployee.workload?.currentProjects || 0 }}</div></div>
              <div class="detail-item"><label>已完成</label><div>{{ currentEmployee.workload?.completedProjects || 0 }}</div></div>
              <div class="detail-item"><label>平均质量</label><div>{{ currentEmployee.workload?.averageQuality || 0 }}</div></div>
            </div>
          </div>
        </div>
        <div *ngIf="panelMode === 'edit'" class="form-view">
          <!-- 员工头像 -->
          <div class="form-avatar-section">
            <img [src]="currentEmployee.avatar || '/assets/images/default-avatar.svg'" class="form-avatar" alt="员工头像"/>
            <div class="form-avatar-info">
              <div class="form-avatar-name">{{ currentEmployee.name }}</div>
              <div class="form-avatar-id">ID: {{ currentEmployee.userid || '-' }}</div>
            </div>
          </div>

          <!-- 基本信息 -->
          <div class="form-section">
            <div class="form-section-title">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
                <circle cx="12" cy="7" r="4"></circle>
              </svg>
              基本信息
            </div>

            <div class="form-group">
              <label class="form-label required">姓名</label>
              <input 
                type="text" 
                class="form-input" 
                [(ngModel)]="formModel.name"
                placeholder="请输入姓名"
                required
              />
            </div>

            <div class="form-group">
              <label class="form-label required">手机号</label>
              <input 
                type="tel" 
                class="form-input" 
                [(ngModel)]="formModel.mobile"
                placeholder="请输入手机号"
                maxlength="11"
                required
              />
            </div>

            <div class="form-group">
              <label class="form-label required">企微ID</label>
              <input 
                type="text" 
                class="form-input" 
                [(ngModel)]="formModel.userid"
                placeholder="企业微信用户ID"
                readonly
                disabled
              />
              <div class="form-hint">企微ID由系统同步，不可修改</div>
            </div>
          </div>

          <!-- 职位信息 -->
          <div class="form-section">
            <div class="form-section-title">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
                <line x1="9" y1="9" x2="15" y2="9"></line>
              </svg>
              职位信息
            </div>

            <div class="form-group">
              <label class="form-label required">身份</label>
              <select class="form-select" [(ngModel)]="formModel.roleName" required>
                <option value="">请选择身份</option>
                <option *ngFor="let role of roles" [value]="role">{{ role }}</option>
              </select>
            </div>

            <div class="form-group">
              <label class="form-label required">部门</label>
              <select class="form-select" [(ngModel)]="formModel.departmentId">
                <option [value]="undefined">未分配</option>
                <option *ngFor="let dept of departments()" [value]="dept.id">{{ dept.name }}</option>
              </select>
              <div class="form-hint">客服和管理员无需分配项目组</div>
            </div>
          </div>

          <!-- 状态管理 -->
          <div class="form-section">
            <div class="form-section-title">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <path d="M12 2a10 10 0 1 0 0 20 10 10 0 1 0 0-20z"></path>
                <path d="M12 6v6l4 2"></path>
              </svg>
              状态管理
            </div>

            <div class="form-group">
              <label class="form-label">员工状态</label>
              <div class="status-toggle">
                <label class="status-option" [class.active]="!formModel.isDisabled">
                  <input 
                    type="radio" 
                    name="status" 
                    [value]="false" 
                    [(ngModel)]="formModel.isDisabled"
                  />
                  <span class="status-dot active"></span>
                  <span>正常</span>
                </label>
                <label class="status-option" [class.active]="formModel.isDisabled">
                  <input 
                    type="radio" 
                    name="status" 
                    [value]="true" 
                    [(ngModel)]="formModel.isDisabled"
                  />
                  <span class="status-dot disabled"></span>
                  <span>已禁用</span>
                </label>
              </div>
              <div class="form-hint">禁用后该员工将无法登录系统</div>
            </div>
          </div>

          <!-- 提示信息 -->
          <div class="form-notice">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <circle cx="12" cy="12" r="10"></circle>
              <line x1="12" y1="16" x2="12" y2="12"></line>
              <line x1="12" y1="8" x2="12.01" y2="8"></line>
            </svg>
            <div>
              <div class="form-notice-title">修改说明</div>
              <div class="form-notice-text">员工数据主要从企业微信同步，姓名和手机号可以在此修改，修改后将保存到后端数据库。</div>
            </div>
          </div>
        </div>
      </div>
      <div class="panel-footer" *ngIf="panelMode === 'edit'">
        <button class="btn btn-default" (click)="closePanel()">取消</button>
        <button class="btn btn-primary" (click)="updateEmployee()">更新</button>
      </div>
    </div>
  </div>
</div>