docs(pl): 运输计划多选合打打印设计与交互 Demo

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
zlwuandCursor committed 2026-07-27 20:39:39 +08:00
1 parent ada592924a
commit 8d76c6bec6
3 files changed
+1025 -1

No files matched your search

+881
View File
@@ -0,0 +1,881 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>运输计划 · 多选合打单据 Demo</title>
<style>
:root {
--primary: #10b981;
--primary-dark: #059669;
--primary-bg: #ecfdf5;
--text: #0f172a;
--muted: #64748b;
--border: #e2e8f0;
--warn: #d97706;
--danger: #dc2626;
--card: #fff;
--bg: #f1f5f9;
}
* { box-sizing: border-box; }
body {
margin: 0;
font: 14px/1.5 Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
color: var(--text);
background: var(--bg);
}
.wrap { max-width: 1180px; margin: 0 auto; padding: 24px; }
h1 { font-size: 20px; margin: 0 0 6px; }
.sub { color: var(--muted); margin-bottom: 20px; }
.panel {
background: var(--card);
border: 1px solid var(--border);
border-radius: 10px;
padding: 16px 20px 20px;
margin-bottom: 16px;
}
.panel h2 {
margin: 0 0 12px;
font-size: 15px;
display: flex;
align-items: center;
gap: 8px;
}
.panel h2::before {
content: "";
width: 3px;
height: 14px;
background: var(--primary);
border-radius: 2px;
}
.rules {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
margin-bottom: 8px;
}
.rule {
border: 1px solid var(--border);
border-radius: 8px;
padding: 10px 12px;
background: #fafafa;
}
.rule strong { display: block; margin-bottom: 4px; }
.rule.ok { border-color: #a7f3d0; background: var(--primary-bg); }
.rule.loose { border-color: #fde68a; background: #fffbeb; }
.toolbar {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
margin-bottom: 12px;
padding-bottom: 12px;
border-bottom: 1px solid var(--border);
}
.selected-tip { color: var(--muted); min-width: 72px; }
.btn {
height: 36px;
padding: 0 14px;
border-radius: 8px;
border: 1px solid var(--border);
background: #fff;
cursor: pointer;
font-size: 14px;
display: inline-flex;
align-items: center;
gap: 6px;
}
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-main {
background: var(--primary);
border-color: var(--primary);
color: #fff;
}
.dropdown { position: relative; }
.menu {
display: none;
position: absolute;
top: 40px;
left: 0;
z-index: 20;
min-width: 180px;
background: #fff;
border: 1px solid var(--border);
border-radius: 8px;
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
padding: 6px;
}
.menu.open { display: block; }
.menu button {
width: 100%;
text-align: left;
border: 0;
background: transparent;
padding: 8px 10px;
border-radius: 6px;
cursor: pointer;
font-size: 13px;
}
.menu button:hover:not(:disabled) { background: var(--primary-bg); color: var(--primary-dark); }
.menu button:disabled { color: #94a3b8; cursor: not-allowed; }
.menu .hint {
font-size: 11px;
color: var(--muted);
padding: 0 10px 6px;
line-height: 1.35;
}
table.list {
width: 100%;
border-collapse: collapse;
}
table.list th, table.list td {
padding: 10px 8px;
border-bottom: 1px solid var(--border);
text-align: left;
font-size: 13px;
}
table.list th { color: var(--muted); font-weight: 600; background: #f8fafc; }
table.list tr:hover td { background: #f8fafc; }
table.list tr.picked td { background: var(--primary-bg); }
.tag {
display: inline-block;
padding: 1px 8px;
border-radius: 999px;
font-size: 12px;
background: #e2e8f0;
color: #334155;
}
.tag.in { background: #d1fae5; color: #065f46; }
.tag.out { background: #dbeafe; color: #1e40af; }
.msg {
margin-top: 12px;
padding: 10px 12px;
border-radius: 8px;
font-size: 13px;
display: none;
}
.msg.show { display: block; }
.msg.err { background: #fef2f2; color: var(--danger); border: 1px solid #fecaca; }
.msg.warn { background: #fffbeb; color: #92400e; border: 1px solid #fde68a; }
.msg.ok { background: var(--primary-bg); color: #065f46; border: 1px solid #a7f3d0; }
.grid2 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
@media (max-width: 900px) {
.rules, .grid2 { grid-template-columns: 1fr; }
}
.slip {
border: 1px solid #cbd5e1;
border-radius: 8px;
padding: 14px;
background: #fff;
min-height: 280px;
overflow: auto;
}
.slip .inbound-like,
.delivery-like,
.subpack-like {
font-family: SimSun, "Songti SC", serif;
color: #111;
max-width: 960px;
margin: 0 auto;
padding: 8px 10px 24px;
}
.slip-title {
position: relative;
min-height: 56px;
margin-bottom: 14px;
text-align: center;
padding: 4px 40px 0;
}
.slip-title .co {
font-size: 22px;
font-weight: 700;
letter-spacing: 6px;
line-height: 1.35;
}
.slip-title .doc {
font-size: 22px;
font-weight: 700;
letter-spacing: 10px;
margin-top: 2px;
}
.slip-info {
width: 100%;
border-collapse: collapse;
margin-bottom: 10px;
font-size: 14px;
}
.slip-info td { padding: 4px 0; vertical-align: middle; }
.slip-info .lab { white-space: nowrap; }
.type-checks {
display: flex;
gap: 12px;
font-size: 14px;
margin-bottom: 4px;
justify-content: flex-start;
}
.type-checks label { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.slip-product {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
font-size: 13px;
}
.slip-product th,
.slip-product td {
border: 1px solid #333 !important;
padding: 8px 4px;
text-align: center;
word-break: break-all;
}
.slip-product th {
font-weight: bold;
background: #fff;
}
.slip-product .remark,
.slip-product .terms {
text-align: left;
padding-left: 8px;
font-size: 12px;
line-height: 1.45;
}
.slip-sign {
width: 100%;
margin-top: 16px;
font-size: 13px;
border-collapse: collapse;
}
.slip-sign td {
padding: 8px 4px;
vertical-align: top;
}
.bucket-checks {
display: inline-flex;
gap: 14px;
margin-left: 12px;
flex-wrap: wrap;
font-size: 13px;
}
.subpack-no {
text-align: right;
font-size: 13px;
margin-bottom: 6px;
color: #333;
}
.empty {
color: var(--muted);
text-align: center;
padding: 48px 12px;
}
.legend { font-size: 12px; color: var(--muted); margin-top: 8px; }
code { background: #f1f5f9; padding: 1px 5px; border-radius: 4px; font-size: 12px; }
</style>
</head>
<body>
<div class="wrap">
<h1>运输计划 · 多选合打单据 Demo</h1>
<p class="sub">
勾选多条计划 →「打印单据」→ 按规则校验 → 右侧预览「产品合并到一张单据」。
本页仅演示交互与合打规则,非最终生产版式。
</p>
<section class="panel">
<h2>合打规则(客户确认稿)</h2>
<div class="rules">
<div class="rule ok">
<strong>入库单</strong>
勾选计划的<strong>客户名称一致</strong>且<strong>计划日期一致</strong>才可合打;产品行合并到一张入库单。
</div>
<div class="rule ok">
<strong>送(提)货单</strong>
同入库单:客户名称 + 计划日期均须一致。
</div>
<div class="rule loose">
<strong>分装单</strong>
<strong>不校验</strong>客户名称、计划日期;勾选即可合打产品到一张分装单。
</div>
</div>
<p class="legend">
合打策略:沿用现网三类单据模版,<strong>只合并物料表格行</strong>(分行列出,不合并数量);
入库/送货「单据编号」= 各计划号;分装「序号」递增。
表头:客户/日期取共有值(入库、送货须一致);<strong>备注</strong>= 各计划备注换行拼接(一行一计划);
<strong>收货联系方式留空</strong>;不填车辆信息。
</p>
</section>
<div class="grid2">
<section class="panel">
<h2>运输计划列表(多选)</h2>
<div class="toolbar">
<span class="selected-tip" id="selCount">已选 0 项</span>
<div class="dropdown">
<button class="btn" id="printBtn" type="button" disabled>
🖨 打印单据 ▾
</button>
<div class="menu" id="printMenu">
<div class="hint" id="menuHint">请先勾选计划</div>
<button type="button" data-cmd="inbound" disabled>入库单</button>
<button type="button" data-cmd="delivery" disabled>送(提)货单</button>
<button type="button" data-cmd="subpack" disabled>分装单</button>
</div>
</div>
<button class="btn" type="button" id="clearBtn">清空选择</button>
</div>
<table class="list">
<thead>
<tr>
<th style="width:36px"><input type="checkbox" id="checkAll" title="全选当前页" /></th>
<th>计划号</th>
<th>计划日期</th>
<th>客户名称</th>
<th>类型</th>
<th>产品摘要</th>
</tr>
</thead>
<tbody id="tbody"></tbody>
</table>
<div class="msg" id="toast"></div>
</section>
<section class="panel">
<h2>合打预览</h2>
<div class="slip" id="preview">
<div class="empty">勾选计划并选择打印类型后,在此预览合并产品明细</div>
</div>
</section>
</div>
</div>
<script>
/** @typedef {{ id: string, planNo: string, planDate: string, customerName: string, planType: 'inbound'|'outbound'|'direct', remark?: string, products: {name:string, model:string, qty:number, unit:string}[] }} Plan */
/** @type {Plan[]} */
const PLANS = [
{
id: '1', planNo: 'PO20260727001', planDate: '2026-07-27', customerName: '安徽云栋化工有限公司',
planType: 'inbound', remark: '上午到厂,注意卸货安全',
products: [
{ name: '亚硫酸钠', model: '液体', qty: 12, unit: '吨' },
{ name: '试剂硝酸', model: 'AR', qty: 2, unit: '吨' }
]
},
{
id: '2', planNo: 'PO20260727002', planDate: '2026-07-27', customerName: '安徽云栋化工有限公司',
planType: 'inbound', remark: '附带质检报告',
products: [
{ name: '次氯酸钠', model: '固体', qty: 8, unit: '吨' }
]
},
{
id: '3', planNo: 'PO20260727003', planDate: '2026-07-27', customerName: '合肥市皖和化工有限公司',
planType: 'inbound', remark: '',
products: [
{ name: '98% 工业硫酸', model: 'AR', qty: 20, unit: '吨' }
]
},
{
id: '4', planNo: 'PO20260728001', planDate: '2026-07-28', customerName: '安徽云栋化工有限公司',
planType: 'inbound', remark: '改期后计划',
products: [
{ name: '试剂氨水', model: 'AR', qty: 5, unit: '吨' }
]
},
{
id: '5', planNo: 'PO20260727011', planDate: '2026-07-27', customerName: '中国长江实业',
planType: 'outbound', remark: '客户自提点卸货',
products: [
{ name: 'TEST液碱', model: '31%', qty: 30, unit: '吨' }
]
},
{
id: '6', planNo: 'PO20260727012', planDate: '2026-07-27', customerName: '中国长江实业',
planType: 'outbound', remark: '需带防护用品',
products: [
{ name: 'TEST盐酸', model: '30%', qty: 15, unit: '吨' },
{ name: 'TEST液碱', model: '31%', qty: 10, unit: '吨' }
]
},
{
id: '7', planNo: 'PO20260729001', planDate: '2026-07-29', customerName: '中国长江实业',
planType: 'outbound', remark: '',
products: [
{ name: 'TEST液碱', model: '31%', qty: 6, unit: '吨' }
]
}
]
const selected = new Set()
let menuOpen = false
function typeLabel(t) {
return t === 'inbound' ? '入库单' : t === 'outbound' ? '出库单' : '直销单'
}
function typeClass(t) {
return t === 'inbound' ? 'in' : t === 'outbound' ? 'out' : ''
}
function printableCommands(planType) {
if (planType === 'inbound') return ['inbound']
if (planType === 'outbound') return ['delivery', 'subpack']
return []
}
function selectedPlans() {
return PLANS.filter(p => selected.has(p.id))
}
function sameCustomerAndDate(plans) {
if (!plans.length) return false
const c = plans[0].customerName
const d = plans[0].planDate
return plans.every(p => p.customerName === c && p.planDate === d)
}
function canMerge(cmd, plans) {
if (plans.length < 1) return { ok: false, reason: '请至少勾选 1 条运输计划' }
if (plans.length === 1) {
const allow = printableCommands(plans[0].planType)
if (!allow.includes(cmd)) {
return { ok: false, reason: `当前单据类型(${typeLabel(plans[0].planType)})不支持打印该单据` }
}
return { ok: true, reason: '' }
}
// multi
if (cmd === 'subpack') {
const bad = plans.filter(p => !printableCommands(p.planType).includes('subpack'))
if (bad.length) {
return { ok: false, reason: `分装单仅支持出库类计划;以下不可打:${bad.map(p => p.planNo).join('、')}` }
}
return { ok: true, reason: '' }
}
if (cmd === 'inbound') {
const bad = plans.filter(p => p.planType !== 'inbound')
if (bad.length) {
return { ok: false, reason: `入库单仅支持入库类计划;冲突:${bad.map(p => p.planNo).join('、')}` }
}
if (!sameCustomerAndDate(plans)) {
return { ok: false, reason: '合打入库单要求:客户名称一致 且 计划日期一致' }
}
return { ok: true, reason: '' }
}
if (cmd === 'delivery') {
const bad = plans.filter(p => p.planType !== 'outbound')
if (bad.length) {
return { ok: false, reason: `送(提)货单仅支持出库类计划;冲突:${bad.map(p => p.planNo).join('、')}` }
}
if (!sameCustomerAndDate(plans)) {
return { ok: false, reason: '合打送(提)货单要求:客户名称一致 且 计划日期一致' }
}
return { ok: true, reason: '' }
}
return { ok: false, reason: '未知单据类型' }
}
function renderList() {
const tb = document.getElementById('tbody')
tb.innerHTML = PLANS.map(p => {
const checked = selected.has(p.id) ? 'checked' : ''
const picked = selected.has(p.id) ? 'picked' : ''
const prod = p.products.map(x => `${x.name}×${x.qty}`).join(',')
return `<tr class="${picked}" data-id="${p.id}">
<td><input type="checkbox" class="row-check" data-id="${p.id}" ${checked} /></td>
<td>${p.planNo}</td>
<td>${p.planDate}</td>
<td>${p.customerName}</td>
<td><span class="tag ${typeClass(p.planType)}">${typeLabel(p.planType)}</span></td>
<td>${prod}</td>
</tr>`
}).join('')
document.getElementById('selCount').textContent = `已选 ${selected.size} 项`
document.getElementById('printBtn').disabled = selected.size === 0
document.getElementById('checkAll').checked = selected.size === PLANS.length && PLANS.length > 0
updateMenuState()
}
function updateMenuState() {
const plans = selectedPlans()
const hint = document.getElementById('menuHint')
const cmds = [
['inbound', '入库单'],
['delivery', '送(提)货单'],
['subpack', '分装单']
]
cmds.forEach(([cmd]) => {
const btn = document.querySelector(`#printMenu button[data-cmd="${cmd}"]`)
const r = canMerge(cmd, plans)
btn.disabled = !r.ok
btn.title = r.ok ? '可合打' : r.reason
})
if (!plans.length) {
hint.textContent = '请先勾选计划'
} else if (plans.length === 1) {
hint.textContent = '单条:沿用原打印能力'
} else {
const okAny = cmds.some(([c]) => canMerge(c, plans).ok)
hint.textContent = okAny
? `已选 ${plans.length} 条 · 灰色项表示不满足合打条件`
: `已选 ${plans.length} 条 · 当前选择不满足任一合打条件`
}
}
function showToast(text, type) {
const el = document.getElementById('toast')
el.className = 'msg show ' + type
el.textContent = text
}
function formatPlanDateChinese(ymd) {
if (!ymd) return ''
const [y, m, d] = ymd.split('-')
return `${Number(y)}年${Number(m)}月${Number(d)}日`
}
function productNoStub(name) {
// demo only
const map = {
'亚硫酸钠': 'WL-001',
'试剂硝酸': 'WL-002',
'次氯酸钠': 'WL-003',
'98% 工业硫酸': 'WL-004',
'试剂氨水': 'WL-005',
'TEST液碱': 'WL-101',
'TEST盐酸': 'WL-102'
}
return map[name] || '—'
}
function mergePlanRemarks(plans) {
// 一行一个计划备注;空备注跳过;前缀计划号便于对照
return plans
.map(p => {
const text = (p.remark || '').trim()
if (!text) return ''
return `${p.planNo}:${text}`
})
.filter(Boolean)
.join('<br />')
}
function collectProductRows(plans) {
const rows = []
plans.forEach(p => {
p.products.forEach(prod => {
rows.push({
planNo: p.planNo,
productNo: productNoStub(prod.name),
name: prod.name,
model: prod.model,
qty: prod.qty,
unit: prod.unit
})
})
})
return rows
}
function renderInboundSlip(plans) {
const customer = plans[0].customerName
const dateCn = formatPlanDateChinese(plans[0].planDate)
const rows = collectProductRows(plans)
const body = rows.map(r => `<tr>
<td>${r.planNo}</td>
<td>${r.productNo}</td>
<td>${r.name}</td>
<td>${r.model}</td>
<td>${r.unit}</td>
<td>${r.qty}</td>
<td></td>
<td></td>
</tr>`).join('')
document.getElementById('preview').innerHTML = `
<div class="inbound-like">
<div class="slip-title">
<div class="co">安庆市山峡化工有限公司</div>
<div class="doc">入&nbsp;&nbsp;库&nbsp;&nbsp;单</div>
</div>
<table class="slip-info">
<tr>
<td style="width:58%"><span class="lab">送货单位:</span>${customer}</td>
<td style="width:42%;text-align:right"><span class="lab">日&nbsp;期:</span>${dateCn}</td>
</tr>
</table>
<table class="slip-product">
<colgroup>
<col style="width:14%" /><col style="width:14%" /><col style="width:20%" />
<col style="width:8%" /><col style="width:6%" /><col style="width:10%" />
<col style="width:14%" /><col style="width:14%" />
</colgroup>
<thead>
<tr>
<th>单据编号</th>
<th>物料编号</th>
<th>物料名称</th>
<th>规格</th>
<th>单位</th>
<th>数量</th>
<th>产品规格</th>
<th>实收数量</th>
</tr>
</thead>
<tbody>
${body}
<tr><td colspan="8" class="remark">备注:${mergePlanRemarks(plans) || ''}</td></tr>
</tbody>
</table>
<table class="slip-sign">
<tr>
<td>仓库:</td>
<td>审核:</td>
<td>客户签收:</td>
<td>司机/送货人(附车牌):</td>
</tr>
</table>
</div>
`
}
function renderDeliverySlip(plans) {
const customer = plans[0].customerName
const dateCn = formatPlanDateChinese(plans[0].planDate)
const rows = collectProductRows(plans)
const remarkHtml = mergePlanRemarks(plans)
const body = rows.map(r => `<tr>
<td>${r.planNo}</td>
<td>${r.productNo}</td>
<td>${r.name}</td>
<td>${r.model}</td>
<td>${r.unit}</td>
<td>${r.qty}</td>
<td></td>
<td></td>
</tr>`).join('')
document.getElementById('preview').innerHTML = `
<div class="delivery-like">
<div class="slip-title">
<div class="co">安庆市山峡化工有限公司</div>
<div class="doc">送&nbsp;(提)&nbsp;货&nbsp;单</div>
</div>
<table class="slip-info">
<tr>
<td style="width:34%"><span class="lab">收货单位:</span>${customer}</td>
<td style="width:33%"><span class="lab">收货联系方式:</span></td>
<td style="width:33%;text-align:right;vertical-align:top;">
<div class="type-checks">
<label><input type="checkbox" />自提</label>
<label><input type="checkbox" checked />出库</label>
<label><input type="checkbox" />直销</label>
</div>
<div><span class="lab">日&nbsp;期:</span>${dateCn}</div>
</td>
</tr>
</table>
<table class="slip-product">
<colgroup>
<col style="width:14%" /><col style="width:14%" /><col style="width:20%" />
<col style="width:8%" /><col style="width:6%" /><col style="width:10%" />
<col style="width:14%" /><col style="width:14%" />
</colgroup>
<thead>
<tr>
<th>单据编号</th>
<th>物料编号</th>
<th>物料名称</th>
<th>规格</th>
<th>单位</th>
<th>数量</th>
<th>产品规格</th>
<th>实收数量</th>
</tr>
</thead>
<tbody>
${body}
<tr><td colspan="8" class="remark">备注:${remarkHtml || ''}</td></tr>
<tr>
<td colspan="5" class="terms">
1.本送货单如购销双方未签订合同,视为有效;<br />
2.本次送货含桶____个,回收____个,结存____个;
</td>
<td colspan="3" class="remark" style="font-size:11px;line-height:1.5;">
地址:安庆市高新区霞虹路5号<br />
送货单位固话:0556-5999710<br />
联系人电话:方总13395560066
</td>
</tr>
</tbody>
</table>
<table class="slip-sign">
<tr>
<td>仓库:</td>
<td>审核:</td>
<td>客户签收:</td>
<td>司机/送货人(附车牌):</td>
</tr>
</table>
</div>
`
}
function renderSubpackSlip(plans) {
// 分装单允许跨客户/跨日期:沿用现网模版字段;仅扩展物料表行
const first = plans[0]
const orderDate = formatPlanDateChinese(first.planDate)
const rows = collectProductRows(plans)
const remarkHtml = mergePlanRemarks(plans)
const body = rows.map((r, idx) => `<tr>
<td>${idx + 1}</td>
<td>${r.name}</td>
<td>${r.model}</td>
<td></td>
<td>${r.unit}</td>
<td>${r.qty}</td>
<td><input type="checkbox" /></td>
</tr>`).join('')
const slipNo = `SXFZ${first.planDate.replace(/-/g, '')}-001`
document.getElementById('preview').innerHTML = `
<div class="subpack-like">
<div class="slip-title">
<div class="co">安庆市山峡化工有限公司</div>
<div class="doc">分&nbsp;装&nbsp;单</div>
</div>
<div class="subpack-no">${slipNo}</div>
<table class="slip-info">
<tr>
<td><span class="lab">下单日期:</span>${orderDate}</td>
<td><span class="lab">交货日期:</span>${orderDate}</td>
<td><span class="lab">下单人:</span></td>
<td><span class="lab">经手人:</span></td>
</tr>
</table>
<table class="slip-product">
<colgroup>
<col style="width:8%" /><col style="width:22%" /><col style="width:16%" />
<col style="width:16%" /><col style="width:10%" /><col style="width:12%" />
<col style="width:16%" />
</colgroup>
<thead>
<tr>
<th>序号</th>
<th>产品名称</th>
<th>产品型号</th>
<th>包装规格</th>
<th>单位</th>
<th>数量</th>
<th>是否完成</th>
</tr>
</thead>
<tbody>
${body}
<tr>
<td colspan="7" class="remark">
备注:${remarkHtml || ''}
<span class="bucket-checks">
<label><input type="checkbox" />全新桶</label>
<label><input type="checkbox" />是否回收桶</label>
<label><input type="checkbox" />桶循环</label>
</span>
</td>
</tr>
</tbody>
</table>
<table class="slip-sign">
<tr>
<td>仓库:</td>
<td>审核:</td>
<td>客户签收:</td>
<td>司机/送货人(附车牌):</td>
</tr>
</table>
</div>
`
}
function renderPreview(cmd, plans) {
if (cmd === 'inbound') {
renderInboundSlip(plans)
return
}
if (cmd === 'delivery') {
renderDeliverySlip(plans)
return
}
renderSubpackSlip(plans)
}
function tryPrint(cmd) {
const plans = selectedPlans()
const r = canMerge(cmd, plans)
menuOpen = false
document.getElementById('printMenu').classList.remove('open')
if (!r.ok) {
showToast(r.reason, 'err')
document.getElementById('preview').innerHTML = `<div class="empty">${r.reason}</div>`
return
}
const label = cmd === 'inbound' ? '入库单' : cmd === 'delivery' ? '送(提)货单' : '分装单'
showToast(
plans.length === 1
? `将打开单计划「${label}」打印(与现网一致)`
: `将合并 ${plans.length} 条计划的产品到一张「${label}」`,
'ok'
)
renderPreview(cmd, plans)
}
document.getElementById('tbody').addEventListener('change', (e) => {
const t = e.target
if (!(t instanceof HTMLInputElement) || !t.classList.contains('row-check')) return
if (t.checked) selected.add(t.dataset.id)
else selected.delete(t.dataset.id)
renderList()
document.getElementById('toast').classList.remove('show')
})
document.getElementById('checkAll').addEventListener('change', (e) => {
const on = e.target.checked
selected.clear()
if (on) PLANS.forEach(p => selected.add(p.id))
renderList()
})
document.getElementById('clearBtn').addEventListener('click', () => {
selected.clear()
renderList()
document.getElementById('preview').innerHTML = '<div class="empty">勾选计划并选择打印类型后,在此预览合并产品明细</div>'
document.getElementById('toast').classList.remove('show')
})
document.getElementById('printBtn').addEventListener('click', (e) => {
e.stopPropagation()
menuOpen = !menuOpen
document.getElementById('printMenu').classList.toggle('open', menuOpen)
updateMenuState()
})
document.getElementById('printMenu').addEventListener('click', (e) => {
const btn = e.target.closest('button[data-cmd]')
if (!btn || btn.disabled) return
tryPrint(btn.dataset.cmd)
})
document.addEventListener('click', () => {
if (!menuOpen) return
menuOpen = false
document.getElementById('printMenu').classList.remove('open')
})
// 预设:勾选同客户同日的两条入库计划,方便演示合打
selected.add('1')
selected.add('2')
renderList()
tryPrint('inbound')
showToast('已预勾选同客户同日两条入库计划,并按现网入库单版式展示合打预览(无「来源计划」「产品行数」)。', 'warn')
</script>
</body>
</html>
@@ -0,0 +1,144 @@
# 运输计划 · 多选合打打印单据 — 设计文档
> **日期**: 2026-07-27
> **状态**: 待实施
> **前置**: `docs/superpowers/specs/2026-07-26-pl-print-slip-dropdown-design.md`;现网入库单 / 送(提)货单 / 分装单模版(`pl-*-slip-template.ts`)
> **Demo**: `docs/pl-plan-batch-print-merge-demo.html`
## 目标
运输计划列表支持勾选 **多条** 计划,将所选计划的产品合打到 **一张** 单据上。单据类型仍为:入库单、送(提)货单、分装单。沿用现网模版样式,仅扩展物料表与备注数据。
## 已确认决策
| # | 决策 | 说明 |
|---|------|------|
| D1 | **前端合打** | 复用三个打印弹窗;扩展为支持 `planIds[]`;不新增后端合打 API |
| D2 | **入库单合打条件** | 所选计划 **客户名称一致** 且 **计划日期一致**,且均为入库类(`planType=inbound`) |
| D3 | **送(提)货单合打条件** | 客户名称一致且计划日期一致,且均为出库类(`planType=outbound`) |
| D4 | **分装单合打条件** | **不校验** 客户名称、计划日期;所选须均可打分装单(出库类) |
| D5 | **物料行** | **分行列出**,不合并同名产品数量;入库/送货「单据编号」列填各行所属 `planNo`;分装「序号」按合并后行序递增 |
| D6 | **备注** | 多计划备注换行合并;格式 `计划号:备注`;空备注跳过 |
| D7 | **收货联系方式** | 合打(及本期约定)留空 |
| D8 | **车辆信息** | 不填入打印数据 |
| D9 | **模版** | 三类单据沿用当前模版结构与样式,只增加物料表内容(及备注合并) |
| D10 | **入口范围** | **列表工具栏** 支持多选合打;查看弹窗 / 安排成功底栏仍为单计划打印(行为不变) |
| D11 | **单选** | 勾选恰好 1 条时,行为与现网一致 |
---
## 非目标(本期不做)
- 后端合打预览 / 持久化合打快照 API
- 修改富文本模版 HTML 结构或列定义
- 查看弹窗、安排运输成功栏的多选合打
- 同名同规格产品数量自动合并
- 合打时自动带入车辆、司机、收货联系方式
---
## 交互(列表工具栏)
1. 用户勾选 N≥1 条运输计划。
2. 「打印单据」下拉在 N≥1 时可点(现网为恰好 1 条才可点)。
3. 菜单项启用规则:
- 对当前勾选集合计算 `canBatchPrint(command, plans)`;不满足则该项 `disabled`,`title`/点击提示说明原因。
4. 选中可用项后打开对应打印弹窗,传入所选计划 id 列表(保持勾选顺序)。
编辑 / 安排运输 / 作废 / 删除等仍要求恰好 1 条,不变。
---
## 校验规则
抽纯函数(建议 `web-admin/src/utils/pl-display.ts` 或 `pl-batch-print.ts`):
```ts
canBatchPrintSlip(plans: Plan[], command: PlPrintSlipCommand): { ok: boolean; reason?: string }
```
| command | 规则 |
|---------|------|
| `inbound` | `plans.length≥1`;全部 `planType==='inbound'`;全部 `customerName` 相同(trim 后);全部 `planDate` 相同 |
| `delivery` | 全部 `planType==='outbound'`;客户名称、计划日期同上 |
| `subpack` | 全部 `canPrintSlipCommand(planType,'subpack')`(即出库类);不校验客户/日期 |
客户名称比较字段:与列表「客户名称」一致,使用 `customerName`(trim);若个别历史数据空,视为不相等(合打入库/送货失败并提示)。
单条时等价于现有 `canPrintSlipCommand(plan.planType, command)`。
---
## 数据拼装(打印弹窗内)
### 打开方式
现有:`open(planId: string)`
扩展:`open(planIdOrIds: string | string[])`
- 单 id:保持现逻辑
- 多 id:并行 `planApi.get`(或等价详情接口),按传入顺序排列
### 虚拟「合打计划」视图(内存,不落库)
从多条 `Plan` 构造传给模版渲染的上下文:
| 字段 | 合打取值 |
|------|----------|
| 物料 `products` | 按计划顺序展开;每行带所属 `planNo`(入库/送货写入「单据编号」列) |
| `planDate` / 中文日期 | 取第一条(入库/送货时各条已相同;分装取第一条) |
| 客户 / 送货单位 / 收货单位 | 取第一条的客户相关字段(入库/送货已一致) |
| `remark` | `plans.filter(有备注).map(p => \`${p.planNo}:${p.remark.trim()}\`).join('\\n')` |
| 收货联系方式 | `''` |
| 车辆 / 车牌 / 司机等 | 不填(空或不传入模版占位) |
| 分装单号等单据级字段 | 仍按现网单计划规则生成(基于第一条或现有逻辑),不因合打改号规则(若现网依赖单 planId,继续用第一条 id 触发取号) |
模版 HTML **不改**;仅 `buildProductRows` / 占位符替换的数据源改为合打结果。
### 产品行顺序
勾选顺序 → 计划顺序 → 各计划内原产品顺序。
---
## 主要改动文件
| 文件 | 职责 |
|------|------|
| `web-admin/src/utils/pl-batch-print.ts`(新建)或扩展 `pl-display.ts` | `canBatchPrintSlip`、备注合并、产品行展开 helper |
| `web-admin/src/views/pl/plan/index.vue` | 工具栏:N≥1 可打开打印;菜单 disabled 绑合打校验;传入 ids |
| `web-admin/src/components/business/pl-inbound-slip-print-dialog/index.vue` | `open` 支持多 id;合打渲染 |
| `web-admin/src/components/business/pl-delivery-slip-print-dialog/index.vue` | 同上;收货联系方式空 |
| `web-admin/src/components/business/pl-subpack-slip-print-dialog/index.vue` | 同上;序号递增 |
| `web-admin/src/utils/pl-inbound-slip-template.ts` 等 | **尽量不改模版结构**;若 `buildProductRows` 需按行 `planNo` 覆盖,做最小改动 |
| 单测(可选) | `canBatchPrintSlip`、备注合并纯函数 |
查看弹窗 / `pl-plan-arrange-dialog` 打印入口:**不改**(仍 `open(singleId)`)。
---
## 错误提示文案(建议)
- 未勾选:按钮 disabled
- 入库合打失败:`合打入库单要求:客户名称一致且计划日期一致,且均为入库类计划`
- 送货合打失败:`合打送(提)货单要求:客户名称一致且计划日期一致,且均为出库类计划`
- 分装失败:`分装单仅支持出库类计划`
- 加载失败:保持现网「加载计划失败」类提示
---
## 验收标准
1. 勾选 1 条:三类打印与改前一致。
2. 勾选同客户、同计划日期的多条入库:可打开一张入库单,物料行为各计划产品拼接,单据编号列为各自计划号,备注为 `计划号:备注` 多行。
3. 勾选客户或日期不一致的入库/出库:对应入库/送货菜单禁用或提示失败;分装在出库多选且跨客户/日期时仍可合打。
4. 合打单据中收货联系方式为空;无车辆信息填入。
5. 查看弹窗 / 安排成功栏打印仍为单计划。
6. 模版视觉结构与现网单打一致(列、签字区、条款等不变)。
---
## 风险与兼容
- 列表行可能只有摘要字段:合打打开时须 **拉详情**,以详情产品/备注为准。
- 分装单号若按单计划生成,合打场景使用第一条计划触发,需在实现时与现网取号逻辑对齐并在自测中确认。
- 大批量勾选导致详情请求过多:本期不做分页合打上限;若现场反馈再加上限(如 ≤20)。
-1
View File
@@ -1 +0,0 @@
25748