OPC/Demo/team.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>组队协同 · OPC 公共服务平台 Demo</title>
<link rel="stylesheet" href="assets/style.css">
</head>
<body data-page="team">
<header class="topnav" id="topnav"></header>

<div class="container">
  <div class="page-title">组队协同</div>
  <div class="page-sub" id="team-sub"></div>

  <!-- 我的团队 -->
  <div class="section">
    <h2>我的团队 <span class="req">REQ-119 · 组长/组员 · 成员可流动</span>
      <span style="margin-left:auto"><button class="btn sm" onclick="createTeam()">创建团队</button></span>
    </h2>
    <div class="card"><table id="team-tbl"></table></div>
    <p class="muted" style="margin-top:8px">OPC 往往不是一人公司，分组长和组员两个角色。支持招聘组队和业务协同/分包。</p>
  </div>

  <!-- 招聘招募 -->
  <div class="section">
    <h2>招聘招募 <span class="req">REQ-120 · 组长招人手 · 成员可流动</span>
      <span style="margin-left:auto"><button class="btn sm" onclick="postRecruit()">发布招募</button></span>
    </h2>
    <div class="card"><table id="recruit-tbl"></table></div>
  </div>

  <!-- 协同/分包 -->
  <div class="section">
    <h2>业务协同 / 分包 <span class="req">REQ-121 · OPC 间协同或分包</span>
      <span style="margin-left:auto"><button class="btn sm" onclick="postCollab()">发布协同</button></span>
    </h2>
    <div class="card"><table id="collab-tbl"></table></div>
    <p class="muted" style="margin-top:8px">OPC 之间可基于订单进行业务协同或分包，组长统一对接客户，组员按 SOP 标准并行交付。</p>
  </div>
</div>

<div class="footer">OPC 公共服务平台 Demo · 组队协同</div>
<script src="assets/app.js"></script>
<script src="assets/store.js"></script>
<script>
function renderPage(DB) {
  const T = DB.team || {};
  const role = currentRole();
  document.getElementById('team-sub').textContent = role === 'operator'
    ? '运营商管理视角 · 查看团队组建、招募发布与协同分包'
    : '组队协同 · 招聘组队、业务协同与分包协作';

  // 我的团队
  document.getElementById('team-tbl').innerHTML =
    `<tr><th>团队号</th><th>名称</th><th>组长</th><th>方向</th><th>成员</th><th>空缺</th><th>状态</th><th>操作</th></tr>` +
    (T.myTeams || []).map((t, i) => `<tr>
      <td>${t.code}</td><td><b>${t.name}</b></td><td>${t.leader}</td><td>${t.direction}</td>
      <td>${t.members} 人</td><td>${t.openings > 0 ? `<span class="badge warn">${t.openings} 个</span>` : '<span class="badge ok">满员</span>'}</td>
      <td>${B(t.status)}</td>
      <td><button class="btn sm ghost" onclick="teamDetail(${i})">管理</button></td>
    </tr>`).join('');

  // 招聘招募
  document.getElementById('recruit-tbl').innerHTML =
    `<tr><th>招募号</th><th>团队</th><th>角色</th><th>等级要求</th><th>人数</th><th>预算</th><th>状态</th><th>操作</th></tr>` +
    (T.recruitList || []).map((r, i) => `<tr>
      <td>${r.code}</td><td>${r.team}</td><td>${r.role}</td><td><span class="badge pri">${r.level}</span></td>
      <td>${r.count} 人</td><td>${r.budget}</td><td>${B(r.status)}</td>
      <td><button class="btn sm" onclick="applyRecruit(${i})">申请加入</button></td>
    </tr>`).join('');

  // 协同/分包
  document.getElementById('collab-tbl').innerHTML =
    `<tr><th>协同号</th><th>名称</th><th>组长</th><th>分包数</th><th>预算</th><th>状态</th><th>操作</th></tr>` +
    (T.collabList || []).map((c, i) => `<tr>
      <td>${c.code}</td><td><b>${c.name}</b></td><td>${c.leader}</td><td>${c.parts} 份</td>
      <td>${c.budget}</td><td>${B(c.status)}</td>
      <td><button class="btn sm" onclick="joinCollab(${i})">参与分包</button></td>
    </tr>`).join('');
}

function createTeam() {
  openModal({
    title: '创建团队（REQ-119）',
    body: `<div class="field"><label>团队名称</label><input placeholder="如：智能体开发协作组"></div>
      <div class="field-row">
        <div class="field"><label>业务方向</label><select><option>跨境电商视觉</option><option>AI 漫剧</option><option>企业智能体</option><option>华强北硬件供应链</option></select></div>
        <div class="field"><label>招募人数</label><input value="3"></div>
      </div>
      <div class="field"><label>团队简介</label><textarea placeholder="团队定位、目标客户、分工模式"></textarea></div>
      <p class="muted">创建后你将成为组长，可在招募区发布岗位需求。</p>`,
    actions: [
      { label: '取消', cls: 'ghost' },
      { label: '创建团队', onClick: m => { m.remove(); toast('团队已创建，可在招募区发布岗位'); } },
    ],
  });
}
function postRecruit() {
  openModal({
    title: '发布招募（REQ-120）',
    body: `<div class="field"><label>所属团队</label><select><option>TEAM_0001 跨境电商视觉组</option><option>TEAM_0002 AI 漫剧协作组</option></select></div>
      <div class="field-row">
        <div class="field"><label>角色</label><input placeholder="如：详情页设计"></div>
        <div class="field"><label>等级要求</label><select><option>L1+</option><option>L2+</option><option>L3+</option></select></div>
      </div>
      <div class="field-row">
        <div class="field"><label>人数</label><input value="2"></div>
        <div class="field"><label>预算</label><input placeholder="如：¥600-1200/单"></div>
      </div>
      <div class="field"><label>要求说明</label><textarea placeholder="技能要求、交付标准、协作方式"></textarea></div>`,
    actions: [
      { label: '取消', cls: 'ghost' },
      { label: '发布', onClick: m => { m.remove(); toast('招募已发布，OPC 可申请加入'); } },
    ],
  });
}
function postCollab() {
  openModal({
    title: '发布协同/分包（REQ-121）',
    body: `<div class="field"><label>协同名称</label><input placeholder="如：品牌视觉升级分包"></div>
      <div class="field-row">
        <div class="field"><label>分包数</label><input value="3"></div>
        <div class="field"><label>总预算</label><input placeholder="如：¥24,000"></div>
      </div>
      <div class="field"><label>分包说明</label><textarea placeholder="各分包任务、SOP 标准、交付节点"></textarea></div>
      <p class="muted">协同/分包基于蜂群式交付模式，各分包按统一 SOP 标准并行执行。</p>`,
    actions: [
      { label: '取消', cls: 'ghost' },
      { label: '发布', onClick: m => { m.remove(); toast('协同分包已发布，OPC 可参与分包'); } },
    ],
  });
}
function teamDetail(i) {
  const t = DB.team.myTeams[i];
  openModal({
    title: '团队管理 · ' + t.name,
    body: `<table>
      <tr><th>团队号</th><td>${t.code}</td></tr>
      <tr><th>组长</th><td>${t.leader}</td></tr>
      <tr><th>方向</th><td>${t.direction}</td></tr>
      <tr><th>成员</th><td>${t.members} 人 · 空缺 ${t.openings}</td></tr>
    </table>
    <h4 style="margin-top:12px">成员列表</h4>
    <table>
      <tr><th>OPC</th><th>角色</th><th>状态</th></tr>
      <tr><td>OPC_00017 张设计</td><td>组长</td><td><span class="badge ok">在职</span></td></tr>
      <tr><td>OPC_00045 陈视觉</td><td>组员</td><td><span class="badge ok">在职</span></td></tr>
      <tr><td>OPC_00052 赵图</td><td>组员</td><td><span class="badge warn">流动中</span></td></tr>
    </table>
    <p class="muted" style="margin-top:8px">成员可流动：离职后任务自动转派替补，不影响整体交付。</p>`,
    actions: [{ label: '关闭', cls: 'ghost' }],
  });
}
function applyRecruit(i) {
  const r = DB.team.recruitList[i];
  confirmDlg('申请加入', `${r.team} · ${r.role} · ${r.budget}。申请后组长审核你的能力档案。`, '确认申请', () => {
    toast('申请已提交，组长审核能力档案后通知');
  });
}
function joinCollab(i) {
  const c = DB.team.collabList[i];
  openModal({
    title: '参与分包 · ' + c.name,
    body: `<div class="field"><label>选择分包</label><select><option>分包 1 · 首页设计 ¥8,000</option><option>分包 2 · 详情页 ¥10,000</option><option>分包 3 · Banner ¥6,000</option></select></div>
      <div class="field"><label>交付说明</label><textarea placeholder="交付计划、排产说明"></textarea></div>`,
    actions: [
      { label: '取消', cls: 'ghost' },
      { label: '参与', onClick: m => { m.remove(); toast('已参与分包，进入蜂群交付队列'); } },
    ],
  });
}
</script>
</body>
</html>