377 lines
17 KiB
HTML
377 lines
17 KiB
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>
|