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:32px;height:32px;border-radius:50%;object-fit:cover;"/>
              <div>
                <div style="font-weight:600;">
                  {{ emp.realname || emp.name }}
                  <span style="font-size:12px;color:#999;font-weight:400;" *ngIf="emp.realname && emp.name">
                    ({{ emp.name }})
                  </span>
                </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-header">
            <div class="detail-avatar-section">
              <img [src]="currentEmployee.avatar || '/assets/images/default-avatar.svg'" class="detail-avatar" alt="员工头像"/>
              <div class="detail-badge-container">
                <span class="detail-role-badge">{{ currentEmployee.roleName }}</span>
                <span [class]="'detail-status-badge ' + (currentEmployee.isDisabled ? 'disabled' : 'active')">
                  {{ currentEmployee.isDisabled ? '已禁用' : '在职' }}
                </span>
              </div>
            </div>
            <div class="detail-info-section">
              <div class="detail-name-block">
                <h3 class="detail-realname">{{ currentEmployee.realname || currentEmployee.name }}</h3>
                <span class="detail-nickname" *ngIf="currentEmployee.realname && currentEmployee.name">昵称: {{ currentEmployee.name }}</span>
              </div>
              <div class="detail-position" *ngIf="currentEmployee.position">
                <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>
                {{ currentEmployee.position }}
              </div>
              <div class="detail-meta">
                <div class="detail-meta-item" *ngIf="currentEmployee.gender">
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <circle cx="12" cy="12" r="10"></circle>
                  </svg>
                  {{ currentEmployee.gender === '1' ? '男' : currentEmployee.gender === '2' ? '女' : currentEmployee.gender }}
                </div>
                <div class="detail-meta-item" *ngIf="currentEmployee.joinDate">
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
                    <line x1="16" y1="2" x2="16" y2="6"></line>
                    <line x1="8" y1="2" x2="8" y2="6"></line>
                    <line x1="3" y1="10" x2="21" y2="10"></line>
                  </svg>
                  入职 {{ currentEmployee.joinDate }}
                </div>
              </div>
            </div>
          </div>

          <!-- 联系方式 -->
          <div class="detail-section">
            <div class="detail-section-title">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path>
              </svg>
              联系方式
            </div>
            <div class="detail-grid">
              <div class="detail-item">
                <label>手机号</label>
                <div class="detail-value">{{ currentEmployee.mobile || '-' }}</div>
              </div>
              <div class="detail-item">
                <label>邮箱</label>
                <div class="detail-value">{{ currentEmployee.email || '-' }}</div>
              </div>
              <div class="detail-item">
                <label>企微ID</label>
                <div class="detail-value">{{ currentEmployee.userid || '-' }}</div>
              </div>
            </div>
          </div>

          <!-- 组织信息 -->
          <div class="detail-section">
            <div class="detail-section-title">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
                <circle cx="9" cy="7" r="4"></circle>
                <path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
                <path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
              </svg>
              组织信息
            </div>
            <div class="detail-grid">
              <div class="detail-item">
                <label>身份</label>
                <div class="detail-value">
                  <span class="badge">{{ currentEmployee.roleName }}</span>
                </div>
              </div>
              <div class="detail-item">
                <label>部门</label>
                <div class="detail-value">
                  @if(currentEmployee.roleName=="客服") {
                    客服部
                  } @else if(currentEmployee.roleName=="管理员") {
                    总部
                  } @else {
                    {{ currentEmployee.department }}
                  }
                </div>
              </div>
              <div class="detail-item" *ngIf="currentEmployee.level">
                <label>职级</label>
                <div class="detail-value">{{ currentEmployee.level }}</div>
              </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.realname"
                placeholder="请输入真实姓名（用于正式场合）"
                required
              />
              <div class="form-hint">用于正式文档、合同签署等场合</div>
            </div>

            <div class="form-group">
              <label class="form-label required">昵称</label>
              <input 
                type="text" 
                class="form-input" 
                [(ngModel)]="formModel.name"
                placeholder="请输入昵称（内部沟通用）"
                required
              />
              <div class="form-hint">用于日常沟通，可以是昵称、花名等</div>
            </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>