# 销售员登录页模式

## 适用场景

任何需要按销售员隔离数据的工作台页面。

## 模式

### 顶栏

```html
<span class="sp-name" id="spName"></span>
<button class="logout-btn" id="logoutBtn" style="display:none" onclick="logoutSales()">🚪 退出</button>
<div class="role-switch">
  <button class="role-btn" onclick="switchRole('sales')">💼 销售员</button>
</div>
```

### 登录页

```javascript
if(currentRole==='sales' && currentSp==='all'){
  // 从官方人员清单加载在职人员
  var activeSP = PERSONNEL.filter(function(p){return p.status==='在职';});
  
  var html = '<div class="login-screen"><div class="login-card">';
  html += '<h2>🔐 BIORI BIOTECH</h2>';
  html += '<div class="subtitle">系统名称 · 销售员入口</div>';
  html += '<select id="loginSpSelect"><option value="">-- 请选择姓名 --</option>';
  activeSP.forEach(function(p){
    html += '<option value="'+p.name+'">'+p.name+' ['+p.price_level+'] · '+p.dept+'</option>';
  });
  html += '</select><br>';
  html += '<button class="login-btn" id="loginBtn" disabled onclick="loginSales()">进入系统</button>';
  html += '<div class="hint">🔒 仅可查看自己名下的信息</div>';
  html += '</div></div>';
  
  document.getElementById('app').innerHTML = html;
  document.getElementById('loginSpSelect').onchange = function(){
    document.getElementById('loginBtn').disabled = !this.value;
  };
  return;
}
```

### 登录/退出函数

```javascript
function loginSales(){
  var s = document.getElementById('loginSpSelect');
  if(!s || !s.value) return;
  currentSp = s.value;
  document.getElementById('spName').textContent = '👤 ' + currentSp;
  document.getElementById('logoutBtn').style.display = 'inline-block';
  render();
}

function logoutSales(){
  currentSp = 'all';
  document.getElementById('spName').textContent = '';
  document.getElementById('logoutBtn').style.display = 'none';
  render();
}
```

### 数据锁定

```javascript
// 在 render() 的 KPI 和 applyFilter() 中：
if(currentRole === 'sales' && currentSp !== 'all'){
  var spCusts = new Set();
  Object.values(DEPT_SP).forEach(function(d){
    if(d[currentSp]) d[currentSp].forEach(function(c){ spCusts.add(c); });
  });
  list = list.filter(function(item){ return spCusts.has(item.customer); });
}
```

## 关键点

- **仅显示在职人员**：`PERSONNEL.filter(p => p.status === '在职')`
- **显示权限等级**：`[v1]-[v5]` 帮助销售员了解自己的报价权限
- **按钮初始禁用**：`disabled` 直到选择姓名后启用
- **退出后清空**：`currentSp='all'` 回到登录页
- **角色切换时重置**：切换到 sales 角色时清空 `spName` 和隐藏 `logoutBtn`