shanxia2.0/docs/fresh-mint-pl-multi-stop-print-rules-demo.html

<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>运输计划 · 一车多卸 · 打印规则补充</title>
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
  <style>
    :root {
      --primary: #10b981;
      --primary-dark: #059669;
      --primary-bg: #ecfdf5;
      --text: #1e293b;
      --text-muted: #64748b;
      --border: #d9e8e2;
      --surface: #ffffff;
      --table-head: #f8fafc;
      --bg-page: #f1f5f9;
      --shadow: 0 1px 3px rgba(0,0,0,.05);
      --radius: 10px;
      --warn: #d97706;
      --warn-bg: #fffbeb;
      --info: #0284c7;
      --info-bg: #f0f9ff;
    }
    * { box-sizing: border-box; }
    body {
      margin: 0; min-height: 100vh;
      font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif;
      font-size: 14px; line-height: 1.5; color: var(--text); background: var(--bg-page);
    }
    .page { max-width: 1180px; margin: 0 auto; padding: 24px 20px 72px; }
    .hero {
      background: linear-gradient(135deg, #ecfdf5, #fff 60%, #f0f9ff);
      border: 1px solid var(--border); border-radius: var(--radius);
      padding: 20px 22px; margin-bottom: 16px; box-shadow: var(--shadow);
    }
    .hero h1 { margin: 0 0 8px; font-size: 22px; font-weight: 700; }
    .hero h1 em { font-style: normal; color: var(--primary-dark); }
    .hero p { margin: 0; color: var(--text-muted); }
    .pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
    .pill {
      display: inline-flex; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 500;
      background: var(--primary-bg); color: var(--primary-dark); border: 1px solid #a7f3d0;
    }
    .pill.warn { background: var(--warn-bg); color: var(--warn); border-color: rgba(217,119,6,.25); }
    .pill.muted { background: #f1f5f9; color: var(--text-muted); border-color: #e2e8f0; }
    .pill.info { background: var(--info-bg); color: var(--info); border-color: #bae6fd; }

    .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
    @media (max-width: 860px) { .grid-2 { grid-template-columns: 1fr; } }
    .card {
      background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
      padding: 14px 16px; box-shadow: var(--shadow);
    }
    .card h2 {
      margin: 0 0 10px; font-size: 14px; font-weight: 700;
      padding-left: 10px; border-left: 3px solid var(--primary); color: var(--primary-dark);
    }
    .card ul { margin: 0; padding-left: 18px; color: var(--text-muted); }
    .card li { margin: 6px 0; }
    .card li strong { color: var(--text); }

    .hint {
      margin: 0 0 12px; padding: 8px 12px; border-radius: 8px; font-size: 12px;
      background: var(--info-bg); color: #0369a1; border: 1px solid #bae6fd;
    }
    .hint.ok { background: var(--primary-bg); color: var(--primary-dark); border-color: #a7f3d0; }
    .hint.warn { background: var(--warn-bg); color: #92400e; border-color: rgba(217,119,6,.3); }

    .section {
      background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
      margin-bottom: 14px; overflow: hidden; box-shadow: var(--shadow);
    }
    .section-hd {
      display: flex; align-items: center; justify-content: space-between;
      padding: 12px 14px; background: var(--table-head); border-bottom: 1px solid var(--border);
    }
    .section-hd h3 { margin: 0; font-size: 14px; font-weight: 700; }
    .section-bd { padding: 14px; }

    .flow-print {
      display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 14px;
    }
    .step {
      background: #fff; border: 1px solid var(--border); border-radius: 8px;
      padding: 10px 12px; min-width: 140px;
    }
    .step .n {
      display: inline-flex; width: 20px; height: 20px; border-radius: 50%;
      background: var(--primary); color: #fff; font-size: 11px; font-weight: 700;
      align-items: center; justify-content: center; margin-right: 6px;
    }
    .arrow { color: var(--text-muted); font-weight: 700; }

    .btn {
      display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px;
      border-radius: 8px; border: 1px solid var(--border); background: #fff;
      font: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
    }
    .btn.primary { background: var(--primary); border-color: var(--primary); color: #fff; }
    .btn-row { display: flex; flex-wrap: wrap; gap: 8px; }

    .mock-dialog {
      max-width: 420px; margin: 0 auto 16px;
      border: 1px solid var(--border); border-radius: 10px; background: #fff;
      box-shadow: 0 12px 32px rgba(15,23,42,.12); overflow: hidden;
    }
    .mock-dialog-hd {
      padding: 12px 16px; border-bottom: 1px solid var(--border);
      font-weight: 700; display: flex; justify-content: space-between;
    }
    .mock-dialog-bd { padding: 16px; }
    .mock-dialog-ft {
      padding: 12px 16px; border-top: 1px solid var(--border);
      background: var(--table-head); display: flex; justify-content: flex-end; gap: 8px;
    }
    .radio-list { display: flex; flex-direction: column; gap: 8px; }
    .radio-item {
      display: flex; align-items: center; gap: 10px;
      padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; cursor: pointer;
    }
    .radio-item.active { border-color: #a7f3d0; background: var(--primary-bg); }
    .radio-item input { accent-color: var(--primary); }

    .slip {
      border: 1px solid var(--border); border-radius: 8px; padding: 14px; background: #fff;
      margin-bottom: 12px;
    }
    .slip h4 {
      margin: 0 0 10px; text-align: center; font-size: 16px; letter-spacing: .08em;
    }
    .kv { display: grid; grid-template-columns: 100px 1fr 100px 1fr; gap: 8px 10px; font-size: 13px; }
    .kv .k { color: var(--text-muted); }
    .kv .v { font-weight: 600; }
    .kv .hl { color: var(--primary-dark); background: var(--primary-bg); padding: 2px 6px; border-radius: 4px; }
    table.data { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 13px; }
    table.data th, table.data td { border: 1px solid var(--border); padding: 6px 8px; text-align: left; }
    table.data th { background: var(--table-head); color: var(--text-muted); font-size: 12px; }

    .tag {
      display: inline-flex; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600;
    }
    .tag.green { background: #059669; color: #fff; }
    .tag.blue { background: #0284c7; color: #fff; }
    .tag.amber { background: #d97706; color: #fff; }
    .tag.muted { background: #f1f5f9; color: var(--text-muted); border: 1px solid #e2e8f0; }

    .matrix { width: 100%; border-collapse: collapse; font-size: 13px; }
    .matrix th, .matrix td { border: 1px solid var(--border); padding: 8px 10px; text-align: left; vertical-align: top; }
    .matrix th { background: var(--table-head); color: var(--text-muted); font-size: 12px; }
  </style>
</head>
<body>
  <div class="page">
    <div class="hero">
      <h1>补充理解 · <em>打印规则</em> + 装货仅一段</h1>
      <p>
        已吸收：取货/装货信息<strong>只支持一个</strong>；一车多卸打印送（提）货单时，
        <strong>同一客户内容打在一起</strong>；多客户时先选客户再弹出单据；
        入库单「送货单位」= 装货客户；送提货单「收货单位」= 送货客户；分装单不考虑客户。
      </p>
      <div class="pills">
        <span class="pill">装货 = 1 段（不支持多装）</span>
        <span class="pill info">送货 = 多段 / 多客户</span>
        <span class="pill warn">多客户打印 → 先选客户</span>
        <span class="pill muted">分装单 · 不看客户</span>
      </div>
    </div>

    <div class="grid-2">
      <div class="card">
        <h2>装货信息（已纠正）</h2>
        <ul>
          <li><strong>只允许 1 个装货客户</strong>（不支持一车多装）</li>
          <li>地址 / 时间 / 联系方式 / 注意事项挂在这一段</li>
          <li>山峡/云栋：免合同，默认地磅出库</li>
        </ul>
      </div>
      <div class="card">
        <h2>送货信息</h2>
        <ul>
          <li>支持多段、多客户（一车多卸）</li>
          <li>每段独立地址 / 时间 / 联系 / 注意事项</li>
          <li>山峡/云栋：免合同，默认地磅入库</li>
        </ul>
      </div>
    </div>

    <div class="section">
      <div class="section-hd">
        <h3>三种打印单据 × 客户字段映射</h3>
        <span class="tag muted">理解表</span>
      </div>
      <div class="section-bd">
        <table class="matrix">
          <thead>
            <tr>
              <th style="width:18%">单据</th>
              <th style="width:28%">关键单位字段</th>
              <th>取值来源</th>
              <th style="width:22%">多客户时</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td><strong>送（提）货单</strong></td>
              <td>收货单位</td>
              <td>送货信息中的客户（同一客户多段产品合并打印）</td>
              <td><span class="tag amber">先选客户</span> 再弹单据</td>
            </tr>
            <tr>
              <td><strong>入库单</strong></td>
              <td>送货单位</td>
              <td>装货信息中的客户（唯一一段）</td>
              <td>无需选客户（装货仅 1 个）</td>
            </tr>
            <tr>
              <td><strong>分装单</strong></td>
              <td>—</td>
              <td>不考虑客户信息</td>
              <td>直接打印，无客户选择</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>

    <div class="section">
      <div class="section-hd">
        <h3>送（提）货单 · 多客户打印流程</h3>
        <div class="btn-row">
          <button class="btn" type="button">打印单据 ▾</button>
          <button class="btn primary" type="button">送（提）货单</button>
        </div>
      </div>
      <div class="section-bd">
        <p class="hint ok">示例计划送货段：A 客户 10t · B 客户 15t · 山峡 5t → 涉及 3 个客户，点击「送（提）货单」后先弹出客户选择。</p>

        <div class="flow-print">
          <div class="step"><span class="n">1</span>点打印 · 送提货单</div>
          <span class="arrow">→</span>
          <div class="step"><span class="n">2</span>选择客户</div>
          <span class="arrow">→</span>
          <div class="step"><span class="n">3</span>弹出送（提）货单</div>
          <span class="arrow">→</span>
          <div class="step"><span class="n">4</span>仅含该客户产品行</div>
        </div>

        <div class="grid-2">
          <div>
            <div class="mock-dialog">
              <div class="mock-dialog-hd">
                <span>选择收货客户</span>
                <span style="color:var(--text-muted);font-weight:500;font-size:12px">ESC</span>
              </div>
              <div class="mock-dialog-bd">
                <p class="hint" style="margin-bottom:10px">本计划含多个送货客户，请选择本次要打印的客户。同一客户下的产品会合并在一张单上。</p>
                <div class="radio-list">
                  <label class="radio-item active">
                    <input type="radio" name="c" checked />
                    <div>
                      <div style="font-weight:700">A 客户</div>
                      <div style="font-size:12px;color:var(--text-muted)">送货段 #1 · 计划 10 吨</div>
                    </div>
                  </label>
                  <label class="radio-item">
                    <input type="radio" name="c" />
                    <div>
                      <div style="font-weight:700">B 客户</div>
                      <div style="font-size:12px;color:var(--text-muted)">送货段 #2 · 计划 15 吨</div>
                    </div>
                  </label>
                  <label class="radio-item">
                    <input type="radio" name="c" />
                    <div>
                      <div style="font-weight:700">安庆市山峡化工有限公司</div>
                      <div style="font-size:12px;color:var(--text-muted)">送货段 #3 · 计划 5 吨 · 入库</div>
                    </div>
                  </label>
                </div>
              </div>
              <div class="mock-dialog-ft">
                <button class="btn" type="button">取消</button>
                <button class="btn primary" type="button">确定 · 打开送提货单</button>
              </div>
            </div>
          </div>

          <div>
            <div class="slip">
              <h4>送（提）货单</h4>
              <div class="kv">
                <div class="k">计划编号</div><div class="v">PO20260826001</div>
                <div class="k">车牌</div><div class="v">皖LB1283</div>
                <div class="k">收货单位</div><div class="v"><span class="hl">A 客户</span></div>
                <div class="k">送货地址</div><div class="v">A 客户厂区 · …</div>
                <div class="k">联系人</div><div class="v">李厂长 139****0002</div>
                <div class="k">送货时间</div><div class="v">08-26 11:00</div>
              </div>
              <table class="data">
                <thead>
                  <tr><th>产品</th><th>规格</th><th>数量</th><th>备注</th></tr>
                </thead>
                <tbody>
                  <tr>
                    <td>97% 精制硫酸</td>
                    <td>CP级 / 槽罐</td>
                    <td>10</td>
                    <td>先卸</td>
                  </tr>
                </tbody>
              </table>
              <p class="hint" style="margin:12px 0 0">若同一客户有多条送货段/多产品，产品行合并打在这一张，不拆多张。</p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="section">
      <div class="section-hd">
        <h3>入库单 · 送货单位 = 装货客户</h3>
        <span class="tag green">装货仅 1 个 · 无需选客户</span>
      </div>
      <div class="section-bd">
        <div class="slip" style="max-width:640px">
          <h4>入库单</h4>
          <div class="kv">
            <div class="k">计划编号</div><div class="v">PO20260826001</div>
            <div class="k">车牌</div><div class="v">皖LB1283</div>
            <div class="k">送货单位</div><div class="v"><span class="hl">XX 硫酸供应商</span></div>
            <div class="k">取值说明</div><div class="v">= 装货信息.客户（唯一）</div>
            <div class="k">装货地址</div><div class="v">供应商仓库 · …</div>
            <div class="k">联系方式</div><div class="v">张工 138****0001</div>
          </div>
          <table class="data">
            <thead><tr><th>产品</th><th>计划数量</th><th>备注</th></tr></thead>
            <tbody><tr><td>97% 精制硫酸</td><td>30</td><td>—</td></tr></tbody>
          </table>
        </div>
        <p class="hint warn" style="margin-bottom:0">理解：入库单上的「送货单位」指<strong>把货送来过磅/入库的对方</strong>，对应装货侧客户，而不是送货段里的山峡自己。</p>
      </div>
    </div>

    <div class="section">
      <div class="section-hd">
        <h3>分装单 · 不考虑客户</h3>
        <span class="tag muted">无客户选择 / 无客户字段依赖</span>
      </div>
      <div class="section-bd">
        <div class="slip" style="max-width:640px;opacity:.92">
          <h4>分装单</h4>
          <div class="kv">
            <div class="k">计划编号</div><div class="v">PO20260826001</div>
            <div class="k">产品</div><div class="v">按计划产品打印</div>
            <div class="k">客户</div><div class="v" style="color:var(--text-muted)">不展示 / 不参与逻辑</div>
            <div class="k">多卸</div><div class="v" style="color:var(--text-muted)">无需选客户，直接打开</div>
          </div>
        </div>
      </div>
    </div>

    <div class="section">
      <div class="section-hd"><h3>单客户时的简化</h3></div>
      <div class="section-bd">
        <p class="hint ok" style="margin-bottom:0">
          若送货信息只有 <strong>1 个客户</strong>（即使有多产品），点「送（提）货单」应<strong>跳过客户选择</strong>，直接弹出单据——与现状一致。仅当送货客户数 ≥ 2 时才出现选择框。
        </p>
      </div>
    </div>
  </div>
</body>
</html>