TakeoutSaaS.Prototypes/TakeoutSaaS.Prototypes/pages/va-chain.html

<!-- 连锁管理页 -->
<style>
/* ===== 统计卡片 ===== */
.vac-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:16px; }
.vac-stat {
  background:#fff; border-radius:10px; padding:16px 20px;
  box-shadow:var(--g-shadow-sm); transition:var(--g-transition);
}
.vac-stat:hover { box-shadow:var(--g-shadow-md); transform:translateY(-1px); }
.vac-stat-label { font-size:13px; color:var(--g-text-muted); margin-bottom:6px; }
.vac-stat-value { font-size:24px; font-weight:700; color:var(--g-text); }
.vac-stat-value.green { color:var(--g-success); }
.vac-stat-value.orange { color:var(--g-warning); }

/* ===== 工具栏 ===== */
.vac-toolbar {
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  background:#fff; border-radius:10px; padding:10px 14px;
  box-shadow:var(--g-shadow-sm); margin-bottom:16px;
}
.vac-toolbar input[type="text"] {
  height:34px; padding:0 10px; border:1px solid #e5e7eb; border-radius:8px;
  font-size:13px; outline:none; width:220px; transition:var(--g-transition);
}
.vac-toolbar input:focus { border-color:var(--primary); box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent); }
.vac-toolbar select {
  height:34px; padding:0 10px; border:1px solid #e5e7eb; border-radius:8px;
  font-size:13px; outline:none; cursor:pointer; transition:var(--g-transition);
}
.vac-toolbar select:focus { border-color:var(--primary); box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent); }

/* ===== 说明条 ===== */
.vac-notice {
  display:flex; align-items:center; gap:8px; padding:10px 14px;
  background:color-mix(in srgb, var(--primary) 6%, #fff);
  border:1px solid color-mix(in srgb, var(--primary) 15%, transparent);
  border-radius:8px; margin-bottom:16px; font-size:13px; color:var(--g-text-secondary);
}

/* ===== 门店卡片 ===== */
.vac-store-list { display:flex; flex-direction:column; gap:12px; }
.vac-store-card {
  background:#fff; border-radius:10px; padding:18px 20px;
  box-shadow:var(--g-shadow-sm); transition:var(--g-transition);
}
.vac-store-card:hover { box-shadow:var(--g-shadow-md); transform:translateY(-1px); }
.vac-store-card.inactive { opacity:.55; }
.vac-store-hd { display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.vac-store-name { font-size:15px; font-weight:600; color:var(--g-text); }
.vac-store-data { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:14px; }
.vac-store-data-item {}
.vac-store-data-label { font-size:12px; color:var(--g-text-muted); margin-bottom:2px; }
.vac-store-data-val { font-size:16px; font-weight:600; color:var(--g-text); }
.vac-store-data-val.warn { color:var(--g-warning); }
.vac-store-ft { display:flex; align-items:center; justify-content:space-between; }
.vac-store-addr { font-size:12px; color:var(--g-text-muted); }
.vac-store-actions { display:flex; gap:12px; }

/* ===== 表格容器 ===== */
.vac-table-wrap {
  background:#fff; border-radius:10px; box-shadow:var(--g-shadow-sm); overflow:hidden;
}
.vac-table-wrap table { width:100%; border-collapse:collapse; font-size:13px; }
.vac-table-wrap thead th {
  background:#f8f9fb; padding:10px 12px; text-align:left;
  font-weight:600; color:#6b7280; border-bottom:1px solid #e5e7eb; white-space:nowrap;
}
.vac-table-wrap tbody td { padding:12px; border-bottom:1px solid #f3f4f6; color:var(--g-text); }
.vac-table-wrap tbody tr:hover { background:color-mix(in srgb, var(--primary) 3%, #fff); }
.vac-table-wrap tbody tr:last-child td { border-bottom:none; }

/* ===== 调拨明细行 ===== */
.vac-line-row { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.vac-line-row select, .vac-line-row input { flex:1; }
.vac-line-del {
  width:30px; height:30px; border:none; background:none; color:var(--g-text-muted);
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  border-radius:6px; transition:var(--g-transition); flex-shrink:0;
}
.vac-line-del:hover { color:var(--g-danger); background:#fef2f2; }
.vac-add-line {
  display:flex; align-items:center; gap:4px; color:var(--primary); font-size:13px;
  cursor:pointer; background:none; border:none; padding:0; transition:var(--g-transition);
}
.vac-add-line:hover { text-decoration:underline; }

/* ===== 分段Tab ===== */
.vac-seg { margin-bottom:16px; }
</style>

<div>
  <!-- 分段Tab -->
  <div class="vac-seg">
    <div class="g-seg">
      <div class="g-seg-item active" onclick="vacSwitchTab(0, this)">门店列表</div>
      <div class="g-seg-item" onclick="vacSwitchTab(1, this)">统一采购</div>
      <div class="g-seg-item" onclick="vacSwitchTab(2, this)">跨店调拨</div>
    </div>
  </div>

  <!-- ========== Tab0: 门店列表 ========== -->
  <div class="vac-tab" id="vacTab0">
    <div class="vac-stats">
      <div class="vac-stat"><div class="vac-stat-label">总门店</div><div class="vac-stat-value">4家</div></div>
      <div class="vac-stat"><div class="vac-stat-label">营业中</div><div class="vac-stat-value green">3家</div></div>
      <div class="vac-stat"><div class="vac-stat-label">今日总营收</div><div class="vac-stat-value">&yen;18,600</div></div>
      <div class="vac-stat"><div class="vac-stat-label">今日总单量</div><div class="vac-stat-value">286单</div></div>
    </div>

    <div class="vac-toolbar">
      <input type="text" placeholder="搜索门店名称" />
      <select>
        <option>全部状态</option>
        <option>营业中</option>
        <option>休息中</option>
        <option>已关闭</option>
      </select>
      <div style="flex:1"></div>
      <button class="g-btn g-btn-primary"><i data-lucide="plus" style="width:14px;height:14px"></i> 新增门店</button>
    </div>

    <div class="vac-store-list">
      <!-- 朝阳店 -->
      <div class="vac-store-card">
        <div class="vac-store-hd">
          <span class="vac-store-name">老三家·朝阳店</span>
          <span class="g-tag g-tag-green">营业中</span>
        </div>
        <div class="vac-store-data">
          <div class="vac-store-data-item"><div class="vac-store-data-label">今日营收</div><div class="vac-store-data-val">&yen;6,800</div></div>
          <div class="vac-store-data-item"><div class="vac-store-data-label">今日订单</div><div class="vac-store-data-val">98单</div></div>
          <div class="vac-store-data-item"><div class="vac-store-data-label">库存预警</div><div class="vac-store-data-val warn">2个</div></div>
          <div class="vac-store-data-item"><div class="vac-store-data-label">员工在岗</div><div class="vac-store-data-val">8人</div></div>
        </div>
        <div class="vac-store-ft">
          <span class="vac-store-addr"><i data-lucide="map-pin" style="width:12px;height:12px;vertical-align:-2px"></i> 北京市朝阳区建国路88号</span>
          <div class="vac-store-actions">
            <a class="g-action">进入管理</a>
            <a class="g-action">查看报表</a>
            <a class="g-action g-action-danger">暂停营业</a>
          </div>
        </div>
      </div>
      <!-- 海淀店 -->
      <div class="vac-store-card">
        <div class="vac-store-hd">
          <span class="vac-store-name">老三家·海淀店</span>
          <span class="g-tag g-tag-green">营业中</span>
        </div>
        <div class="vac-store-data">
          <div class="vac-store-data-item"><div class="vac-store-data-label">今日营收</div><div class="vac-store-data-val">&yen;5,200</div></div>
          <div class="vac-store-data-item"><div class="vac-store-data-label">今日订单</div><div class="vac-store-data-val">82单</div></div>
          <div class="vac-store-data-item"><div class="vac-store-data-label">库存预警</div><div class="vac-store-data-val">0个</div></div>
          <div class="vac-store-data-item"><div class="vac-store-data-label">员工在岗</div><div class="vac-store-data-val">6人</div></div>
        </div>
        <div class="vac-store-ft">
          <span class="vac-store-addr"><i data-lucide="map-pin" style="width:12px;height:12px;vertical-align:-2px"></i> 北京市海淀区中关村大街66号</span>
          <div class="vac-store-actions">
            <a class="g-action">进入管理</a>
            <a class="g-action">查看报表</a>
            <a class="g-action g-action-danger">暂停营业</a>
          </div>
        </div>
      </div>
      <!-- 西城店 -->
      <div class="vac-store-card">
        <div class="vac-store-hd">
          <span class="vac-store-name">老三家·西城店</span>
          <span class="g-tag g-tag-green">营业中</span>
        </div>
        <div class="vac-store-data">
          <div class="vac-store-data-item"><div class="vac-store-data-label">今日营收</div><div class="vac-store-data-val">&yen;6,600</div></div>
          <div class="vac-store-data-item"><div class="vac-store-data-label">今日订单</div><div class="vac-store-data-val">106单</div></div>
          <div class="vac-store-data-item"><div class="vac-store-data-label">库存预警</div><div class="vac-store-data-val warn">3个</div></div>
          <div class="vac-store-data-item"><div class="vac-store-data-label">员工在岗</div><div class="vac-store-data-val">7人</div></div>
        </div>
        <div class="vac-store-ft">
          <span class="vac-store-addr"><i data-lucide="map-pin" style="width:12px;height:12px;vertical-align:-2px"></i> 北京市西城区西单北大街120号</span>
          <div class="vac-store-actions">
            <a class="g-action">进入管理</a>
            <a class="g-action">查看报表</a>
            <a class="g-action g-action-danger">暂停营业</a>
          </div>
        </div>
      </div>
      <!-- 通州店（休息中） -->
      <div class="vac-store-card inactive">
        <div class="vac-store-hd">
          <span class="vac-store-name">老三家·通州店</span>
          <span class="g-tag g-tag-orange">休息中</span>
        </div>
        <div class="vac-store-data">
          <div class="vac-store-data-item"><div class="vac-store-data-label">今日营收</div><div class="vac-store-data-val" style="color:var(--g-text-muted)">&mdash;</div></div>
          <div class="vac-store-data-item"><div class="vac-store-data-label">今日订单</div><div class="vac-store-data-val" style="color:var(--g-text-muted)">&mdash;</div></div>
          <div class="vac-store-data-item"><div class="vac-store-data-label">库存预警</div><div class="vac-store-data-val" style="color:var(--g-text-muted)">&mdash;</div></div>
          <div class="vac-store-data-item"><div class="vac-store-data-label">员工在岗</div><div class="vac-store-data-val" style="color:var(--g-text-muted)">&mdash;</div></div>
        </div>
        <div class="vac-store-ft">
          <span class="vac-store-addr"><i data-lucide="map-pin" style="width:12px;height:12px;vertical-align:-2px"></i> 北京市通州区新华大街200号</span>
          <div class="vac-store-actions">
            <a class="g-action">进入管理</a>
            <a class="g-action">查看报表</a>
            <a class="g-action">恢复营业</a>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- ========== Tab1: 统一采购 ========== -->
  <div class="vac-tab" id="vacTab1" style="display:none">
    <div class="vac-notice">
      <i data-lucide="info" style="width:16px;height:16px;flex-shrink:0;color:var(--primary)"></i>
      总部统一下采购单，分配到各门店，享受集中采购价格优势。
    </div>

    <div class="vac-toolbar">
      <select>
        <option>全部状态</option>
        <option>待分配</option>
        <option>已分配</option>
        <option>已完成</option>
      </select>
      <div style="flex:1"></div>
      <button class="g-btn g-btn-primary"><i data-lucide="plus" style="width:14px;height:14px"></i> 新建统一采购单</button>
    </div>

    <div class="vac-table-wrap">
      <table>
        <thead>
          <tr>
            <th>采购单号</th>
            <th>创建日期</th>
            <th>采购项数</th>
            <th>总金额</th>
            <th>分配门店数</th>
            <th>状态</th>
            <th style="width:120px">操作</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>PO-20260201</td>
            <td>2026-02-01</td>
            <td>12项</td>
            <td>&yen;8,500</td>
            <td>4家</td>
            <td><span class="g-tag g-tag-green">已完成</span></td>
            <td><a class="g-action">查看</a></td>
          </tr>
          <tr>
            <td>PO-20260205</td>
            <td>2026-02-05</td>
            <td>8项</td>
            <td>&yen;5,200</td>
            <td>3家</td>
            <td><span class="g-tag g-tag-blue">已分配</span></td>
            <td><a class="g-action">查看</a></td>
          </tr>
          <tr>
            <td>PO-20260210</td>
            <td>2026-02-10</td>
            <td>15项</td>
            <td>&yen;12,800</td>
            <td>0家</td>
            <td><span class="g-tag g-tag-orange">待分配</span></td>
            <td><a class="g-action">查看</a> <a class="g-action">分配</a></td>
          </tr>
          <tr>
            <td>PO-20260213</td>
            <td>2026-02-13</td>
            <td>6项</td>
            <td>&yen;3,600</td>
            <td>0家</td>
            <td><span class="g-tag g-tag-orange">待分配</span></td>
            <td><a class="g-action">查看</a> <a class="g-action">分配</a></td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>

  <!-- ========== Tab2: 跨店调拨 ========== -->
  <div class="vac-tab" id="vacTab2" style="display:none">
    <div class="vac-notice">
      <i data-lucide="info" style="width:16px;height:16px;flex-shrink:0;color:var(--primary)"></i>
      门店间原料调拨，解决库存不均衡问题。
    </div>

    <div class="vac-toolbar">
      <select>
        <option>全部状态</option>
        <option>待确认</option>
        <option>运输中</option>
        <option>已完成</option>
        <option>已拒绝</option>
      </select>
      <div style="flex:1"></div>
      <button class="g-btn g-btn-primary" onclick="vacOpenDrawer()"><i data-lucide="plus" style="width:14px;height:14px"></i> 新建调拨单</button>
    </div>

    <div class="vac-table-wrap">
      <table>
        <thead>
          <tr>
            <th>调拨单号</th>
            <th>调出门店</th>
            <th>调入门店</th>
            <th>调拨品项</th>
            <th>总金额</th>
            <th>状态</th>
            <th style="width:120px">操作</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>TR-20260201</td>
            <td>朝阳店</td>
            <td>西城店</td>
            <td>鸡胸肉 20kg、食用油 5L</td>
            <td>&yen;860</td>
            <td><span class="g-tag g-tag-green">已完成</span></td>
            <td><a class="g-action">查看</a></td>
          </tr>
          <tr>
            <td>TR-20260205</td>
            <td>海淀店</td>
            <td>朝阳店</td>
            <td>大米 50kg</td>
            <td>&yen;320</td>
            <td><span class="g-tag g-tag-green">已完成</span></td>
            <td><a class="g-action">查看</a></td>
          </tr>
          <tr>
            <td>TR-20260209</td>
            <td>西城店</td>
            <td>海淀店</td>
            <td>花生油 10L、盐 5kg</td>
            <td>&yen;450</td>
            <td><span class="g-tag g-tag-blue">运输中</span></td>
            <td><a class="g-action">查看</a></td>
          </tr>
          <tr>
            <td>TR-20260212</td>
            <td>朝阳店</td>
            <td>通州店</td>
            <td>牛腩 15kg、土豆 10kg</td>
            <td>&yen;1,200</td>
            <td><span class="g-tag g-tag-orange">待确认</span></td>
            <td><a class="g-action">查看</a> <a class="g-action">确认</a></td>
          </tr>
          <tr>
            <td>TR-20260213</td>
            <td>海淀店</td>
            <td>西城店</td>
            <td>鸡蛋 200个</td>
            <td>&yen;280</td>
            <td><span class="g-tag g-tag-red">已拒绝</span></td>
            <td><a class="g-action">查看</a></td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

<!-- ========== 新建调拨单抽屉 ========== -->
<div class="g-drawer-mask" id="vacDrawerMask" onclick="vacCloseDrawer()"></div>
<div class="g-drawer" id="vacDrawer" style="width:480px">
  <div class="g-drawer-hd">
    <div class="g-drawer-title">新建调拨单</div>
    <button class="g-drawer-close" onclick="vacCloseDrawer()"><i data-lucide="x" style="width:18px;height:18px"></i></button>
  </div>
  <div class="g-drawer-bd">
    <div class="g-form-group">
      <label class="g-form-label required">调出门店</label>
      <select class="g-select" style="width:100%">
        <option value="">请选择调出门店</option>
        <option>老三家·朝阳店</option>
        <option>老三家·海淀店</option>
        <option>老三家·西城店</option>
        <option>老三家·通州店</option>
      </select>
    </div>
    <div class="g-form-group">
      <label class="g-form-label required">调入门店</label>
      <select class="g-select" style="width:100%">
        <option value="">请选择调入门店</option>
        <option>老三家·朝阳店</option>
        <option>老三家·海淀店</option>
        <option>老三家·西城店</option>
        <option>老三家·通州店</option>
      </select>
    </div>

    <div style="font-size:15px;font-weight:600;color:var(--g-text);padding-left:10px;border-left:3px solid var(--primary);margin:20px 0 14px">调拨明细</div>
    <div id="vacLines">
      <div class="vac-line-row">
        <select class="g-select" style="flex:2">
          <option value="">选择原料</option>
          <option>鸡胸肉</option><option>牛腩</option><option>大米</option><option>食用油</option><option>花生油</option><option>土豆</option><option>鸡蛋</option><option>盐</option>
        </select>
        <input class="g-input" type="number" min="1" placeholder="数量" style="flex:1" />
        <button class="vac-line-del" onclick="this.closest('.vac-line-row').remove()"><i data-lucide="trash-2" style="width:14px;height:14px"></i></button>
      </div>
      <div class="vac-line-row">
        <select class="g-select" style="flex:2">
          <option value="">选择原料</option>
          <option>鸡胸肉</option><option>牛腩</option><option>大米</option><option>食用油</option><option>花生油</option><option>土豆</option><option>鸡蛋</option><option>盐</option>
        </select>
        <input class="g-input" type="number" min="1" placeholder="数量" style="flex:1" />
        <button class="vac-line-del" onclick="this.closest('.vac-line-row').remove()"><i data-lucide="trash-2" style="width:14px;height:14px"></i></button>
      </div>
    </div>
    <button class="vac-add-line" onclick="vacAddLine()"><i data-lucide="plus" style="width:14px;height:14px"></i> 添加原料</button>

    <div class="g-form-group" style="margin-top:20px">
      <label class="g-form-label">调拨原因</label>
      <textarea class="g-textarea" rows="3" placeholder="请输入调拨原因，如：西城店鸡胸肉库存不足"></textarea>
    </div>
  </div>
  <div class="g-drawer-ft">
    <button class="g-btn" onclick="vacCloseDrawer()">取消</button>
    <button class="g-btn g-btn-primary" onclick="vacCloseDrawer()">提交调拨单</button>
  </div>
</div>

<script>
/* Tab 切换 */
function vacSwitchTab(idx, el) {
  document.querySelectorAll('.vac-tab').forEach(function(t){ t.style.display = 'none'; });
  document.getElementById('vacTab' + idx).style.display = '';
  document.querySelectorAll('.g-seg-item').forEach(function(s){ s.classList.remove('active'); });
  el.classList.add('active');
}

/* 抽屉开关 */
function vacOpenDrawer() {
  document.getElementById('vacDrawerMask').classList.add('open');
  document.getElementById('vacDrawer').classList.add('open');
}
function vacCloseDrawer() {
  document.getElementById('vacDrawerMask').classList.remove('open');
  document.getElementById('vacDrawer').classList.remove('open');
}

/* 添加调拨明细行 */
function vacAddLine() {
  var row = document.createElement('div');
  row.className = 'vac-line-row';
  row.innerHTML = '<select class="g-select" style="flex:2"><option value="">选择原料</option><option>鸡胸肉</option><option>牛腩</option><option>大米</option><option>食用油</option><option>花生油</option><option>土豆</option><option>鸡蛋</option><option>盐</option></select><input class="g-input" type="number" min="1" placeholder="数量" style="flex:1" /><button class="vac-line-del" onclick="this.closest(\'.vac-line-row\').remove()"><i data-lucide="trash-2" style="width:14px;height:14px"></i></button>';
  document.getElementById('vacLines').appendChild(row);
  if (typeof lucide !== 'undefined') { lucide.createIcons(); }
}

if (typeof lucide !== 'undefined') { lucide.createIcons(); }
</script>