OPC/Demo/enterprise.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="enterprise">
<header class="topnav" id="topnav"></header>

<div class="container">
  <div class="page-title" id="ent-title">企业工作台</div>
  <div class="page-sub" id="ent-sub"></div>

  <!-- REQ-027/028 发布需求 + AI 需求诊断 -->
  <div class="card">
    <h3>发布需求 <span class="req">REQ-027/028</span></h3>
    <div class="grid grid-3" style="margin-bottom:12px">
      <div>
        <div class="field"><label>需求描述</label><textarea id="req-desc">Q4 上新 20 个 SKU，需要主图+详情页+A/B 广告素材，希望两周内交付，需要开发票。</textarea></div>
        <div class="field-row">
          <div class="field"><label>行业</label><select id="req-ind"><option>跨境电商</option><option>AI 漫剧/数字内容</option><option>企业智能体</option><option>数据标注</option><option>华强北硬件供应链</option><option>电池回收</option></select></div>
          <div class="field"><label>期望周期</label><select id="req-cycle"><option>7 天</option><option selected>14 天</option><option>30 天</option></select></div>
        </div>
      </div>
      <div>
        <p class="muted">AI 需求诊断（辅助，不替代运营商判断 REQ-028）</p>
        <div class="card" id="ai-diag" style="background:#eef2ff;padding:12px">
          建议拆为：<b>新品视觉包（询价订单）</b><br>
          · 主图 20 SKU × 6 张 · 详情页 ×20 套<br>
          · A/B 素材 ×60 张 · 预估 ¥38,000~52,000<br>
          · 建议验收标准：平台规范合规率 ≥99%
        </div>
        <button class="btn ghost sm" style="margin-top:8px" onclick="runDiag()">重新诊断</button>
      </div>
      <div>
        <div class="field"><label>数据等级</label><select id="req-dl"><option>L1 公开</option><option>L2 内部</option><option selected>L3 敏感</option><option>L4 高敏感</option></select></div>
        <div class="checks">
          <label><input type="checkbox" id="req-inv" checked> 需要发票</label>
          <label><input type="checkbox" id="req-sample" checked> 接受小样试做（REQ-032）</label>
          <label><input type="checkbox" id="req-ms"> 分阶段里程碑验收（REQ-047）</label>
        </div>
        <button class="btn" style="margin-top:8px" onclick="submitReq()">提交并进入询价</button>
      </div>
    </div>
  </div>

  <!-- REQ-029/030 五类订单与状态机 -->
  <div class="section">
    <h2>我的订单 <span class="req">REQ-029/030 · 五类订单</span></h2>
    <div class="card">
      <table id="order-tbl"></table>
      <p class="muted" style="margin-top:10px">状态机：草稿 → 待审核 → 招募中 → 小样中 → 待签约 → 进行中 → 待验收 → 已完成 → 已结算 → 复购/归档</p>
    </div>
  </div>

  <!-- REQ-032 小样 + REQ-040/060 验收与争议 -->
  <div class="section">
    <div class="two-col">
      <div class="card">
        <h3>小样试做评审 <span class="req">REQ-032</span></h3>
        <table id="sample-tbl"></table>
      </div>
      <div class="card">
        <h3>待验收与复购 <span class="req">REQ-040/045</span></h3>
        <ul class="list">
          <li><span>旗舰店视觉升级 · 里程碑 2</span><span id="accept-slot"><button class="btn sm" onclick="accept()">去验收</button></span></li>
          <li><span>近 90 天复购</span><span class="badge ok">第 3 单</span></li>
          <li><span>争议记录</span><span><span class="badge ok">0 起</span> <button class="btn sm ghost" onclick="dispute()">发起争议</button></span></li>
        </ul>
      </div>
    </div>
  </div>

  <!-- REQ-041 双层合同 -->
  <div class="section">
    <div class="two-col">
      <div class="card">
        <h3>合同与结算 <span class="req">REQ-041~043 · 双层合同、分账核算</span></h3>
        <table id="contract-tbl"></table>
        <p class="muted" style="margin-top:8px">托管结算经第三方支付通道完成（REQ-042）；订单保证金、延期预警、替补与争议机制保护交易双方（REQ-046）。</p>
      </div>
      <div class="card" id="member-card">
        <h3>成员与协作 <span class="req">REQ-014</span></h3>
        <ul class="list">
          <li><span>王采购 · 管理员</span><span class="badge ok">全部权限</span></li>
          <li><span>李运营 · 项目成员</span><span class="badge info">仅本项目</span></li>
          <li><span>外部协作人（设计院）</span><span class="badge gray">限期授权</span></li>
        </ul>
        <button class="btn sm" style="margin-top:10px" onclick="invite()">＋ 邀请协作人</button>
      </div>
    </div>
  </div>
</div>

<div class="footer">OPC 公共服务平台 Demo · 企业工作台</div>
<script src="assets/app.js"></script>
<script src="assets/store.js"></script>
<script>
let orderSeq = 13;

function renderPage(DB) {
  const E = DB.enterprise;
  const role = currentRole();
  const isPersonal = role === 'personal';
  const isOperator = role === 'operator';
  if (isPersonal) {
    document.getElementById('ent-title').textContent = '个人工作台';
    document.title = '个人工作台 · OPC 公共服务平台 Demo';
  }
  document.getElementById('ent-sub').textContent = isPersonal
    ? 'PER_00012 · 个人客户（发单方）· 轻量认证通道：实名+支付验证（REQ-017）'
    : isOperator
    ? E.code + ' ' + E.name + ' · 运营商管理视角（查看企业客户订单与协作状态）'
    : E.code + ' ' + E.name + ' · 企业客户（发单方）';

  // 个人发单方无企业成员管理需求，替换为轻量认证状态卡
  if (isPersonal) {
    document.getElementById('member-card').innerHTML = `
      <h3>个人认证 <span class="req">REQ-017</span></h3>
      <ul class="list">
        <li><span>实名核验</span><span class="badge ok">已通过</span></li>
        <li><span>支付验证</span><span class="badge ok">已绑定</span></li>
        <li><span>升级企业认证</span><button class="btn sm ghost" onclick="toast('企业认证通道：补充营业执照与统一社会信用代码核验')">升级</button></li>
      </ul>`;
  }

  const acts = {
    progress:  () => `<a class="btn sm" href="order.html">进度</a>`,
    collab:    () => `<a class="btn sm" href="order.html">协同</a>`,
    rate:      () => `<button class="btn sm ghost" onclick="rate()">查看评价</button>`,
    acceptDoc: () => `<button class="btn sm ghost" onclick="toast('验收单 PDF 已生成（演示）：ACPT_2026060201.pdf')">验收单</button>`,
  };
  document.getElementById('order-tbl').innerHTML =
    `<tr><th>订单号</th><th>类型</th><th>内容</th><th>金额</th><th>状态</th><th>承接方</th><th>操作</th></tr>` +
    E.orders.map(o => `<tr><td>${o.id}</td><td>${B(o.type)}</td><td>${o.items}</td><td>${o.amount}</td><td>${B(o.status)}</td><td>${o.party}</td><td>${acts[o.action]()}</td></tr>`).join('');

  document.getElementById('sample-tbl').innerHTML =
    `<tr><th>候选 OPC</th><th>小样评分</th><th>结果</th><th>操作</th></tr>` +
    E.samples.map(s => {
      const act = s.action === 'sign' ? `<button class="btn sm" onclick="sign(this,'${s.opc}')">签约</button>`
        : s.action === 'signAlt' ? `<button class="btn sm ghost" onclick="sign(this,'${s.opc}')">改选签约</button>` : '—';
      return `<tr><td>${s.opc}</td><td>${s.score}</td><td>${B(s.result)}</td><td>${act}</td></tr>`;
    }).join('');

  document.getElementById('contract-tbl').innerHTML =
    `<tr><th>合同</th><th>层级</th><th>签署</th><th>结算节点</th><th>发票</th></tr>` +
    E.contracts.map(c => `<tr><td>${c.name}</td><td>${c.layer}</td><td>${B(c.sign)}</td><td>${c.node}</td><td>${
      c.invoice === 'pending' ? `<button class="btn sm" onclick="invoice(this)">申请开票</button>`
        : `<span class="badge ok">已开票</span> <button class="btn sm ghost" onclick="toast('发票 INV_2026072001.pdf 已下载（演示）')">下载</button>`
    }</td></tr>`).join('');
}

let diagBusy = false;
function runDiag() {
  if (diagBusy) return;
  diagBusy = true;
  const box = document.getElementById('ai-diag');
  box.innerHTML = 'AI 正在分析需求描述…';
  setTimeout(() => {
    box.innerHTML = '建议拆为：<b>新品视觉包（询价订单）</b><br>· 主图 20 SKU × 6 张 · 详情页 ×20 套<br>· A/B 素材 ×60 张 · 预估 ¥38,000~52,000<br>· 建议验收标准：平台规范合规率 ≥99%';
    toast('AI 诊断完成，建议仅供参考，最终以运营商诊断为准');
    diagBusy = false;
  }, 900);
}
function submitReq() {
  const desc = document.getElementById('req-desc').value.trim();
  if (!desc) { toast('请填写需求描述', 'warn'); return; }
  const dl = document.getElementById('req-dl').value;
  const ms = document.getElementById('req-ms').checked;
  const sample = document.getElementById('req-sample').checked;
  openModal({
    title: '确认提交需求',
    body: `<table>
      <tr><th>建议类型</th><td>询价订单（REQ-029）</td></tr>
      <tr><th>数据等级</th><td>${dl}</td></tr>
      <tr><th>里程碑验收</th><td>${ms ? '启用分阶段验收' : '一次性验收'}</td></tr>
      <tr><th>小样试做</th><td>${sample ? '接受' : '不接受'}</td></tr>
      <tr><th>幂等提交</th><td>Idempotency-Key 已生成，防重复下单（REQ-048）</td></tr>
    </table>`,
    actions: [
      { label: '再想想', cls: 'ghost' },
      { label: '确认提交', onClick: m => {
        m.remove();
        const id = 'ORDER_202609' + String(orderSeq).padStart(2, '0') + '01';
        DB.enterprise.orders.push({ id, type: ['询价订单', 'pri'], items: '新发布需求（按描述生成）', amount: '待报价', status: ['招募中', 'info'], party: '运营商匹配中', action: 'progress' });
        renderPage(DB);
        toast(`需求已提交：${id} 进入招募中，运营商开始匹配`);
      } },
    ],
  });
}
function sign(btn, name) {
  confirmDlg('小样签约确认', `小样评审通过，确认与 ${name} 进入签约流程？将生成双层合同（企业↔运营商、运营商↔OPC）。`, '确认签约', () => {
    btn.outerHTML = '<span class="badge ok">待签约 · 合同生成中</span>';
    toast('已发起签约，电子签合同将推送双方签署（REQ-041）');
  });
}
function accept() {
  openModal({
    title: '验收 · 旗舰店视觉升级 里程碑 2',
    body: `
      <div class="field"><label>验收依据</label><input value="合同验收标准：平台规范合规率 ≥99%，交付物 8 项齐全" readonly></div>
      <div class="checks">
        <label><input type="radio" name="ac" value="pass" checked> 验收通过</label>
        <label><input type="radio" name="ac" value="rework"> 退回返工</label>
        <label><input type="radio" name="ac" value="dispute"> 存在争议（转运营商仲裁 REQ-060）</label>
      </div>
      <div class="field"><label>验收意见</label><textarea placeholder="结论、意见将归档可追溯（REQ-040）"></textarea></div>`,
    actions: [
      { label: '取消', cls: 'ghost' },
      { label: '提交验收结论', onClick: m => {
        const v = document.querySelector('input[name=ac]:checked').value;
        m.remove();
        if (v === 'pass') { document.getElementById('accept-slot').innerHTML = '<span class="badge ok">里程碑 2 已验收</span>'; toast('验收通过，进入里程碑 3；评价入口已开放'); }
        else if (v === 'rework') { toast('已退回返工，责任归因流程启动（REQ-057）', 'warn'); }
        else { toast('已转入争议处理流程，由运营商仲裁（REQ-060）', 'warn'); }
      } },
    ],
  });
}
function dispute() {
  openModal({
    title: '发起争议',
    body: `<div class="field"><label>争议事项</label><textarea placeholder="描述争议内容与诉求"></textarea></div>
      <p class="muted">争议由运营商仲裁并记录结论（REQ-060），期间结算节点冻结。</p>`,
    actions: [
      { label: '取消', cls: 'ghost' },
      { label: '提交争议', cls: 'danger', onClick: m => { m.remove(); toast('争议单 DSP_20260912 已受理', 'warn'); } },
    ],
  });
}
function invoice(btn) {
  confirmDlg('申请开票', '按里程碑 2 结算金额 ¥40,000 开具增值税普通发票？', '确认申请', () => {
    btn.outerHTML = '<span class="badge info">开票中</span>';
    toast('开票申请已提交财务（INV_2026091201），预计 1-3 个工作日');
  });
}
function invite() {
  openModal({
    title: '邀请协作人（REQ-014）',
    body: `<div class="field"><label>手机号/邮箱</label><input placeholder="协作人账号"></div>
      <div class="field-row">
        <div class="field"><label>角色</label><select><option>项目成员</option><option>外部协作人</option><option>只读查看</option></select></div>
        <div class="field"><label>授权范围</label><select><option>全部订单</option><option>仅 ORDER_2026082201</option></select></div>
      </div>`,
    actions: [
      { label: '取消', cls: 'ghost' },
      { label: '发送邀请', onClick: m => { m.remove(); toast('邀请已发送，对方确认后按授权范围生效'); } },
    ],
  });
}
function rate() {
  openModal({ title: '我的评价 · ORDER_2026071501', body: '<p>★ 5.0 · "素材质量稳定，修改响应快，已列入长期供应商。"</p><p class="muted">评价已计入对方能力档案与信用记录（REQ-044）。</p>' });
}
</script>
</body>
</html>