Files
shanxia2.0/docs/fresh-mint-pl-multi-stop-understanding-demo.html
T
2026-08-27 14:23:18 +08:00

836 lines
42 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!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, 0.05);
--shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.12);
--radius: 10px;
--warn: #d97706;
--warn-bg: #fffbeb;
--danger: #dc2626;
--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: 1280px; margin: 0 auto; padding: 24px 20px 80px; }
.hero {
background: linear-gradient(135deg, #ecfdf5 0%, #fff 55%, #f0f9ff 100%);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 22px 24px;
margin-bottom: 18px;
box-shadow: var(--shadow);
}
.hero h1 { margin: 0 0 8px; font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }
.hero h1 em { font-style: normal; color: var(--primary-dark); }
.hero p { margin: 0; color: var(--text-muted); max-width: 920px; }
.pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.pill {
display: inline-flex; align-items: center; gap: 6px;
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.muted { background: #f1f5f9; color: var(--text-muted); border-color: #e2e8f0; }
.pill.warn { background: var(--warn-bg); color: var(--warn); border-color: rgba(217,119,6,.25); }
.pill.info { background: var(--info-bg); color: var(--info); border-color: #bae6fd; }
.flow {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 8px;
margin: 18px 0 0;
}
@media (max-width: 980px) { .flow { grid-template-columns: repeat(2, 1fr); } }
.flow-step {
background: #fff;
border: 1px solid var(--border);
border-radius: 8px;
padding: 10px 12px;
position: relative;
}
.flow-step .n {
width: 22px; height: 22px; border-radius: 50%;
background: var(--primary); color: #fff;
display: inline-flex; align-items: center; justify-content: center;
font-size: 12px; font-weight: 700; margin-right: 6px;
}
.flow-step strong { display: block; margin-top: 6px; font-size: 13px; }
.flow-step span { color: var(--text-muted); font-size: 12px; }
.tabs {
display: flex; flex-wrap: wrap; gap: 6px;
background: #fff; border: 1px solid var(--border);
border-radius: var(--radius) var(--radius) 0 0;
padding: 10px 12px 0; margin-top: 18px;
}
.tab-btn {
border: none; background: transparent; cursor: pointer;
padding: 10px 14px; font-size: 13px; font-weight: 600;
color: var(--text-muted); border-bottom: 2px solid transparent;
font-family: inherit;
}
.tab-btn.active { color: var(--primary-dark); border-bottom-color: var(--primary); }
.panel-shell {
background: #fff; border: 1px solid var(--border); border-top: none;
border-radius: 0 0 var(--radius) var(--radius);
box-shadow: var(--shadow); padding: 18px 20px 24px;
}
.tab-pane { display: none; }
.tab-pane.active { display: block; }
.section {
border: 1px solid var(--border);
border-radius: 8px;
margin-bottom: 14px;
overflow: hidden;
}
.section-hd {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
padding: 12px 14px; background: var(--table-head); border-bottom: 1px solid var(--border);
}
.section-hd h3 {
margin: 0; font-size: 14px; font-weight: 700;
display: flex; align-items: center; gap: 8px;
}
.section-hd h3::before {
content: ""; width: 3px; height: 14px; border-radius: 2px; background: var(--primary);
}
.section-bd { padding: 14px; }
.hint {
margin: 0 0 12px; padding: 8px 12px; border-radius: 8px;
background: var(--info-bg); color: #0369a1; border: 1px solid #bae6fd; font-size: 12px;
}
.hint.warn { background: var(--warn-bg); color: #92400e; border-color: rgba(217,119,6,.3); }
.hint.ok { background: var(--primary-bg); color: var(--primary-dark); border-color: #a7f3d0; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (max-width: 900px) {
.grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr 1fr; }
}
.field label {
display: block; font-size: 11px; color: var(--text-muted); margin-bottom: 4px; font-weight: 500;
}
.field .ctrl, .field input, .field select, .field textarea {
width: 100%; height: 36px; border: 1px solid var(--border); border-radius: 8px;
padding: 0 10px; background: #fff; color: var(--text); font: inherit;
}
.field textarea { height: 68px; padding: 8px 10px; resize: vertical; }
.field .ctrl.muted { background: #f8fafc; color: var(--text-muted); }
.span-2 { grid-column: span 2; }
.span-all { grid-column: 1 / -1; }
table.data {
width: 100%; border-collapse: collapse; font-size: 13px;
}
table.data th, table.data td {
border-bottom: 1px solid var(--border); padding: 8px 10px; text-align: left;
}
table.data th { background: var(--table-head); color: var(--text-muted); font-weight: 600; font-size: 12px; }
table.data input, table.data select {
width: 100%; height: 32px; border: 1px solid var(--border); border-radius: 6px; padding: 0 8px; font: inherit;
}
.stop-card {
border: 1px dashed #a7f3d0;
border-radius: 8px;
padding: 12px;
margin-bottom: 12px;
background: linear-gradient(180deg, #f0fdf9 0%, #fff 40%);
}
.stop-card.delivery { border-color: #93c5fd; background: linear-gradient(180deg, #f0f9ff 0%, #fff 40%); }
.stop-card.warehouse { border-color: #fcd34d; background: linear-gradient(180deg, #fffbeb 0%, #fff 40%); }
.stop-hd {
display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px;
}
.stop-hd .title { font-weight: 700; font-size: 13px; display: flex; align-items: center; gap: 8px; }
.tag {
display: inline-flex; align-items: center; 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; }
.tag.danger { background: #dc2626; color: #fff; }
.btn {
display: inline-flex; align-items: center; gap: 6px;
height: 32px; padding: 0 12px; border-radius: 8px;
border: 1px solid var(--border); background: #fff; color: var(--text);
font: inherit; font-weight: 600; font-size: 12px; cursor: pointer;
}
.btn.primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn.ghost { background: #fff; }
.btn-row { display: flex; flex-wrap: wrap; gap: 8px; }
.checkline {
display: flex; align-items: center; gap: 8px;
padding: 8px 10px; border-radius: 8px; background: #fff;
border: 1px solid var(--border); font-size: 13px;
}
.checkline input { accent-color: var(--primary); width: 16px; height: 16px; }
.checkline.default-on { background: var(--primary-bg); border-color: #a7f3d0; }
.scenario {
display: grid; grid-template-columns: 220px 1fr; gap: 16px; align-items: start;
margin-bottom: 16px;
}
@media (max-width: 800px) { .scenario { grid-template-columns: 1fr; } }
.truck {
background: #0f172a; color: #e2e8f0; border-radius: 10px; padding: 14px;
text-align: center;
}
.truck .icon { font-size: 42px; line-height: 1; }
.truck strong { display: block; margin-top: 8px; color: #fff; }
.truck span { font-size: 12px; color: #94a3b8; }
.route {
display: flex; flex-direction: column; gap: 8px;
}
.route-item {
display: grid; grid-template-columns: 72px 1fr auto; gap: 10px; align-items: center;
padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; background: #fff;
}
.route-item .role { font-size: 11px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; }
.route-item .who { font-weight: 600; }
.route-item .qty { font-weight: 700; color: var(--primary-dark); }
.link-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 900px) { .link-grid { grid-template-columns: 1fr; } }
.link-card {
border: 1px solid var(--border); border-radius: 8px; padding: 12px; background: #fff;
}
.link-card h4 { margin: 0 0 8px; font-size: 13px; }
.upload-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.upload-tile {
width: 96px; height: 72px; border: 1px dashed #a7f3d0; border-radius: 8px;
display: flex; align-items: center; justify-content: center;
color: var(--primary-dark); font-size: 11px; background: var(--primary-bg); text-align: center;
padding: 6px;
}
.upload-tile.filled { border-style: solid; background: #fff; color: var(--text); }
.kv { display: grid; grid-template-columns: 110px 1fr; gap: 6px 10px; font-size: 13px; }
.kv .k { color: var(--text-muted); }
.kv .v { font-weight: 500; }
.footer-note {
margin-top: 16px; padding: 12px 14px; border-radius: 8px;
background: #fff7ed; border: 1px solid #fed7aa; color: #9a3412; font-size: 12px;
}
.compare {
display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px;
}
@media (max-width: 800px) { .compare { grid-template-columns: 1fr; } }
.compare .box {
border: 1px solid var(--border); border-radius: 8px; padding: 12px; background: #fff;
}
.compare .box h4 { margin: 0 0 8px; font-size: 13px; }
.compare ul { margin: 0; padding-left: 18px; color: var(--text-muted); }
.compare li { margin: 4px 0; }
</style>
</head>
<body>
<div class="page">
<div class="hero">
<h1>运输计划重构理解示意 · <em>一车多卸</em></h1>
<p>
用客户举例还原:供应商装硫酸 <strong>30 吨</strong> → A 客户卸 <strong>10 吨</strong> → B 客户卸 <strong>15 吨</strong> → 余 <strong>5 吨</strong> 送山峡入库。
下方各 Tab 是我对「装货信息 / 送货信息拆段、归档、司机&现场链接、地磅、运费备注」的理解稿,请对照纠偏。
</p>
<div class="pills">
<span class="pill">保留:基础信息 / 产品信息 / 运输信息</span>
<span class="pill info">改造:供需双方 → 装货 + 多段送货</span>
<span class="pill warn">内部主体免合同 · 默认勾地磅</span>
<span class="pill muted">运费仍计划级 · 新增运费备注</span>
</div>
<div class="flow">
<div class="flow-step"><span class="n">1</span>建计划<strong>基础+产品</strong><span>总量 30t</span></div>
<div class="flow-step"><span class="n">2</span>装货信息<strong>1 段装货</strong><span>供应商 · 30t</span></div>
<div class="flow-step"><span class="n">3</span>送货信息<strong>多段送货</strong><span>A/B/山峡</span></div>
<div class="flow-step"><span class="n">4</span>安排运输<strong>车+链接+地磅</strong><span>按段勾选</span></div>
<div class="flow-step"><span class="n">5</span>执行回传<strong>司机/现场</strong><span>按段附件</span></div>
<div class="flow-step"><span class="n">6</span>分段归档<strong>+运费</strong><span>计划级结算</span></div>
</div>
</div>
<div class="compare">
<div class="box">
<h4>现状(一对一)</h4>
<ul>
<li>一个供方 + 一个需方</li>
<li>单据类型:直销 / 入库 / 出库</li>
<li>取送地址挂在计划主表</li>
<li>一次归档整单出入库量</li>
</ul>
</div>
<div class="box">
<h4>目标(一车多卸)</h4>
<ul>
<li>装货段(可 1+)+ 送货段(多客户)</li>
<li>内部主体(山峡/云栋)免选合同,走出入库地磅</li>
<li>地址/时间/联系人/注意事项下沉到每一段</li>
<li>按装货段、各送货段独立归档数量与金额</li>
</ul>
</div>
</div>
<div class="tabs" role="tablist">
<button class="tab-btn active" data-tab="form" type="button">① 计划表单</button>
<button class="tab-btn" data-tab="arrange" type="button">② 安排 & 地磅</button>
<button class="tab-btn" data-tab="links" type="button">③ 司机 / 现场链接</button>
<button class="tab-btn" data-tab="archive" type="button">④ 分段归档</button>
<button class="tab-btn" data-tab="freight" type="button">⑤ 运费</button>
<button class="tab-btn" data-tab="questions" type="button">⑥ 待确认点</button>
</div>
<div class="panel-shell">
<!-- TAB 1 FORM -->
<div class="tab-pane active" id="tab-form">
<div class="scenario">
<div class="truck">
<div class="icon">🚛</div>
<strong>一车多卸示意</strong>
<span>计划产品总量 30t</span>
</div>
<div class="route">
<div class="route-item">
<div class="role">装货</div>
<div class="who">XX 硫酸供应商</div>
<div class="qty">+30t</div>
</div>
<div class="route-item">
<div class="role">送货 #1</div>
<div class="who">A 客户</div>
<div class="qty">−10t</div>
</div>
<div class="route-item">
<div class="role">送货 #2</div>
<div class="who">B 客户</div>
<div class="qty">−15t</div>
</div>
<div class="route-item">
<div class="role">送货 #3</div>
<div class="who">安庆市山峡化工有限公司(入库)</div>
<div class="qty">−5t</div>
</div>
</div>
</div>
<div class="section">
<div class="section-hd"><h3>基础信息(保留)</h3><span class="tag muted">计划级</span></div>
<div class="section-bd">
<div class="grid-4">
<div class="field"><label>计划日期</label><input value="2026-08-26" /></div>
<div class="field"><label>归属公司</label><select><option>安庆山峡</option><option>安徽云栋</option></select></div>
<div class="field"><label>计划编号</label><div class="ctrl muted">系统生成</div></div>
<div class="field"><label>跟进状态</label><div class="ctrl muted">待安排</div></div>
<div class="field span-all"><label>备注</label><input placeholder="计划级备注" /></div>
</div>
<p class="hint" style="margin-top:12px;margin-bottom:0">
理解:原「单据类型直销/入库/出库」可能由装货/送货段组合推导,不再强制用户先选单类型——此处先弱化展示,待你确认。
</p>
</div>
</div>
<div class="section">
<div class="section-hd">
<h3>产品信息(保留 · 计划总量)</h3>
<button class="btn ghost" type="button">+ 添加产品</button>
</div>
<div class="section-bd">
<p class="hint ok">各装货/送货段的产品明细从此处带出,段内可改计划数量、包装规格、送货方式、备注;段数量合计应与计划总量对齐(校验规则待确认)。</p>
<table class="data">
<thead>
<tr>
<th style="width:28%">产品</th>
<th>规格</th>
<th style="width:12%">计划数量</th>
<th>单位</th>
<th>危化</th>
</tr>
</thead>
<tbody>
<tr>
<td>97% 精制硫酸</td>
<td>CP级</td>
<td><input value="30" /></td>
<td>吨</td>
<td><span class="tag danger">易制毒</span></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="section">
<div class="section-hd">
<h3>装货信息(原供方 / 取货下沉)</h3>
<button class="btn ghost" type="button">+ 添加装货段</button>
</div>
<div class="section-bd">
<p class="hint">每段含:客户、合同(内部主体免选)、产品行、地址/时间/联系方式/注意事项;可选「生成地磅单」。</p>
<div class="stop-card">
<div class="stop-hd">
<div class="title">装货段 #1 <span class="tag green">外部装货</span></div>
<div class="btn-row">
<button class="btn" type="button">复制</button>
<button class="btn" type="button">删除</button>
</div>
</div>
<div class="grid-3">
<div class="field"><label>装货客户 *</label><select><option>XX 硫酸供应商</option></select></div>
<div class="field"><label>装货合同 *</label><select><option>HT2026-供应商-001</option></select></div>
<div class="field"><label>送货方式</label><select><option>山峡自提</option><option>一票制</option><option>客户自提</option></select></div>
</div>
<div style="margin:12px 0 8px;font-size:12px;font-weight:600;color:var(--text-muted)">产品(自计划带出,可调数量)</div>
<table class="data">
<thead>
<tr><th>产品</th><th>计划数量</th><th>包装规格</th><th>备注</th></tr>
</thead>
<tbody>
<tr>
<td>97% 精制硫酸</td>
<td><input value="30" /></td>
<td><input value="槽罐" /></td>
<td><input placeholder="装货备注" /></td>
</tr>
</tbody>
</table>
<div class="grid-2" style="margin-top:12px">
<div class="field span-2"><label>装货地址</label><input value="供应商仓库 · 安庆市迎江区…" /></div>
<div class="field"><label>装货时间</label><input value="2026-08-26 08:00" /></div>
<div class="field"><label>装货联系方式</label><input value="张工 138****0001" /></div>
<div class="field span-2"><label>注意事项</label><input value="需带购买证复印件" /></div>
</div>
<div style="margin-top:12px" class="checkline">
<input type="checkbox" />
<span>生成地磅单(外部装货默认不勾;若客户为山峡/云栋则默认勾选 → <strong>地磅出库单</strong>)</span>
</div>
</div>
<div class="stop-card warehouse" style="opacity:.85">
<div class="stop-hd">
<div class="title">装货段示例 · 内部出库 <span class="tag amber">山峡/云栋</span></div>
</div>
<p class="hint warn" style="margin-bottom:10px">
理解纠偏位:你原文写「选山峡/云栋表示入库」,同时又说「生成地磅出库单」。
我按业务常识画成:<strong>装货客户=山峡/云栋 → 仓库出库 → 地磅出库单,免合同,默认勾选</strong>。请确认。
</p>
<div class="grid-3">
<div class="field"><label>装货客户 *</label><select><option>安庆市山峡化工有限公司</option></select></div>
<div class="field"><label>装货合同</label><div class="ctrl muted">内部主体 · 无需合同</div></div>
<div class="field"><label>送货方式</label><select><option>山峡自提</option></select></div>
</div>
<div style="margin-top:12px" class="checkline default-on">
<input type="checkbox" checked />
<span>生成地磅单 · <strong>出库</strong>(默认勾选)</span>
</div>
</div>
</div>
</div>
<div class="section">
<div class="section-hd">
<h3>送货信息(原需方 · 可多段)</h3>
<button class="btn ghost" type="button">+ 添加送货段</button>
</div>
<div class="section-bd">
<div class="stop-card delivery">
<div class="stop-hd">
<div class="title">送货段 #1 <span class="tag blue">外部客户</span></div>
<div class="btn-row"><button class="btn" type="button">删除</button></div>
</div>
<div class="grid-3">
<div class="field"><label>送货客户 *</label><select><option>A 客户</option></select></div>
<div class="field"><label>送货合同 *</label><select><option>HT2026-A-088</option></select></div>
<div class="field"><label>送货方式</label><select><option>一票制</option></select></div>
</div>
<table class="data" style="margin-top:10px">
<thead><tr><th>产品</th><th>计划数量</th><th>包装规格</th><th>备注</th></tr></thead>
<tbody>
<tr>
<td>97% 精制硫酸</td>
<td><input value="10" /></td>
<td><input value="槽罐" /></td>
<td><input value="先卸" /></td>
</tr>
</tbody>
</table>
<div class="grid-2" style="margin-top:12px">
<div class="field span-2"><label>送货地址</label><input value="A 客户厂区 · …" /></div>
<div class="field"><label>送货时间</label><input value="2026-08-26 11:00" /></div>
<div class="field"><label>送货联系方式</label><input value="李厂长 139****0002" /></div>
<div class="field span-2"><label>注意事项</label><input value="卸货口在东门" /></div>
</div>
<div style="margin-top:12px" class="checkline">
<input type="checkbox" />
<span>生成地磅单(外部客户默认不勾)</span>
</div>
</div>
<div class="stop-card delivery">
<div class="stop-hd">
<div class="title">送货段 #2 <span class="tag blue">外部客户</span></div>
</div>
<div class="grid-3">
<div class="field"><label>送货客户 *</label><select><option>B 客户</option></select></div>
<div class="field"><label>送货合同 *</label><select><option>HT2026-B-012</option></select></div>
<div class="field"><label>送货方式</label><select><option>一票制</option></select></div>
</div>
<table class="data" style="margin-top:10px">
<thead><tr><th>产品</th><th>计划数量</th><th>包装规格</th><th>备注</th></tr></thead>
<tbody>
<tr>
<td>97% 精制硫酸</td>
<td><input value="15" /></td>
<td><input value="槽罐" /></td>
<td><input /></td>
</tr>
</tbody>
</table>
<div class="grid-2" style="margin-top:12px">
<div class="field span-2"><label>送货地址</label><input value="B 客户厂区 · …" /></div>
<div class="field"><label>送货时间</label><input value="2026-08-26 14:30" /></div>
<div class="field"><label>送货联系方式</label><input value="王主任 137****0003" /></div>
<div class="field span-2"><label>注意事项</label><input /></div>
</div>
<div style="margin-top:12px" class="checkline">
<input type="checkbox" />
<span>生成地磅单</span>
</div>
</div>
<div class="stop-card warehouse">
<div class="stop-hd">
<div class="title">送货段 #3 <span class="tag amber">山峡入库</span></div>
</div>
<p class="hint ok">送货客户=山峡/云栋 → 免合同 → 表示入库 → 默认勾选地磅 → <strong>地磅入库单</strong>。</p>
<div class="grid-3">
<div class="field"><label>送货客户 *</label><select><option>安庆市山峡化工有限公司</option></select></div>
<div class="field"><label>送货合同</label><div class="ctrl muted">内部主体 · 无需合同</div></div>
<div class="field"><label>送货方式</label><select><option>山峡自提</option></select></div>
</div>
<table class="data" style="margin-top:10px">
<thead><tr><th>产品</th><th>计划数量</th><th>包装规格</th><th>备注</th></tr></thead>
<tbody>
<tr>
<td>97% 精制硫酸</td>
<td><input value="5" /></td>
<td><input value="槽罐" /></td>
<td><input value="余量入库" /></td>
</tr>
</tbody>
</table>
<div class="grid-2" style="margin-top:12px">
<div class="field span-2"><label>送货地址</label><input value="山峡仓库 · 默认地址" /></div>
<div class="field"><label>送货时间</label><input value="2026-08-26 17:00" /></div>
<div class="field"><label>送货联系方式</label><input value="库管 136****0004" /></div>
<div class="field span-2"><label>注意事项</label><input value="走地磅通道" /></div>
</div>
<div style="margin-top:12px" class="checkline default-on">
<input type="checkbox" checked />
<span>生成地磅单 · <strong>入库</strong>(默认勾选)</span>
</div>
</div>
<p class="hint" style="margin-bottom:0">数量校验示意:装货合计 30t · 送货合计 10+15+5=30t · 平衡。</p>
</div>
</div>
<div class="section">
<div class="section-hd"><h3>运输信息(保留 · 计划级)</h3><span class="tag muted">安排时完善</span></div>
<div class="section-bd">
<div class="grid-4">
<div class="field"><label>车辆类型</label><div class="ctrl muted">安排时选择</div></div>
<div class="field"><label>车牌号</label><div class="ctrl muted">—</div></div>
<div class="field"><label>司机</label><div class="ctrl muted">—</div></div>
<div class="field"><label>运输状态</label><div class="ctrl muted">待安排</div></div>
</div>
</div>
</div>
<div class="btn-row" style="justify-content:flex-end">
<button class="btn" type="button">取消</button>
<button class="btn ghost" type="button">保存</button>
<button class="btn primary" type="button">保存并安排运输</button>
</div>
</div>
<!-- TAB 2 ARRANGE -->
<div class="tab-pane" id="tab-arrange">
<p class="hint ok">安排仍是「一车一次」;地磅勾选按装货段 / 送货段分别保留并可改。内部主体段默认已勾。</p>
<div class="section">
<div class="section-hd"><h3>车辆 / 司机(保留现状交互)</h3></div>
<div class="section-bd">
<div class="grid-4">
<div class="field"><label>车辆来源</label><select><option>自有</option><option>承运商</option></select></div>
<div class="field"><label>车牌</label><select><option>皖LB1283</option></select></div>
<div class="field"><label>司机</label><select><option>张师傅</option></select></div>
<div class="field"><label>押运</label><select><option>李押运</option></select></div>
</div>
</div>
</div>
<div class="section">
<div class="section-hd"><h3>各地磅生成开关(按段)</h3></div>
<div class="section-bd">
<div class="checkline" style="margin-bottom:8px"><input type="checkbox" /><span>装货 #1 · XX 供应商 · 外部 · 地磅(可选)</span></div>
<div class="checkline" style="margin-bottom:8px"><input type="checkbox" /><span>送货 #1 · A 客户 · 外部 · 地磅(可选)</span></div>
<div class="checkline" style="margin-bottom:8px"><input type="checkbox" /><span>送货 #2 · B 客户 · 外部 · 地磅(可选)</span></div>
<div class="checkline default-on"><input type="checkbox" checked /><span>送货 #3 · 山峡 · <strong>入库地磅</strong>(默认勾选)</span></div>
</div>
</div>
<div class="btn-row" style="justify-content:flex-end">
<button class="btn" type="button">取消</button>
<button class="btn primary" type="button">确认安排</button>
</div>
</div>
<!-- TAB 3 LINKS -->
<div class="tab-pane" id="tab-links">
<p class="hint">司机链接、现场链接按装货/送货段拆分:每段各自传附件;涉及出入库(地磅/库存)的现场链接需先传数量 + 附件。</p>
<div class="link-grid">
<div class="link-card">
<h4>司机链接 · 按段回传</h4>
<div class="kv">
<div class="k">链接</div><div class="v">https://…/driver/token-xxx</div>
<div class="k">说明</div><div class="v">一个司机入口,内部分段:装货 / 送货#1 / #2 / #3</div>
</div>
<div style="margin-top:12px;font-size:12px;font-weight:600;color:var(--text-muted)">装货 #1 附件</div>
<div class="upload-row">
<div class="upload-tile filled">装货单.jpg</div>
<div class="upload-tile">+ 上传</div>
</div>
<div style="margin-top:12px;font-size:12px;font-weight:600;color:var(--text-muted)">送货 #1 A 客户附件</div>
<div class="upload-row">
<div class="upload-tile filled">签收单.jpg</div>
<div class="upload-tile">+ 上传</div>
</div>
<div style="margin-top:12px;font-size:12px;font-weight:600;color:var(--text-muted)">送货 #2 / #3 …</div>
<div class="upload-row">
<div class="upload-tile">分段上传</div>
</div>
</div>
<div class="link-card">
<h4>现场链接 · 出入库段优先数量</h4>
<div class="kv">
<div class="k">送货 #3</div><div class="v">山峡入库 · 现场链接独立</div>
<div class="k">要求</div><div class="v">先填实际数量,再传附件</div>
</div>
<div class="field" style="margin-top:12px">
<label>实际入库数量(吨)</label>
<input value="5.02" />
</div>
<div class="upload-row">
<div class="upload-tile filled">地磅单.pdf</div>
<div class="upload-tile filled">现场照.jpg</div>
<div class="upload-tile">+ 上传</div>
</div>
<p class="hint warn" style="margin:12px 0 0">若装货段也是山峡/云栋出库,同样单独现场链接:数量 + 附件。</p>
</div>
</div>
</div>
<!-- TAB 4 ARCHIVE -->
<div class="tab-pane" id="tab-archive">
<p class="hint ok">归档按装货段、各送货段独立进行。按你的口径:装货归档填「入库数量/单价/金额」;各送货客户独立填「出库数量/单价/金额」。</p>
<div class="section">
<div class="section-hd"><h3>装货归档 · #1 XX 供应商</h3><span class="tag green">入库侧字段</span></div>
<div class="section-bd">
<table class="data">
<thead>
<tr><th>产品</th><th>计划</th><th>入库数量</th><th>入库单价</th><th>入库金额</th></tr>
</thead>
<tbody>
<tr>
<td>97% 精制硫酸</td>
<td>30</td>
<td><input value="30.00" /></td>
<td><input value="420" /></td>
<td><input class="muted" value="12600.00" readonly style="background:#f8fafc" /></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="section">
<div class="section-hd"><h3>送货归档 · #1 A 客户</h3><span class="tag blue">出库侧字段</span></div>
<div class="section-bd">
<table class="data">
<thead>
<tr><th>产品</th><th>计划</th><th>出库数量</th><th>出库单价</th><th>出库金额</th></tr>
</thead>
<tbody>
<tr>
<td>97% 精制硫酸</td>
<td>10</td>
<td><input value="10.05" /></td>
<td><input value="680" /></td>
<td><input value="6834.00" readonly style="background:#f8fafc" /></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="section">
<div class="section-hd"><h3>送货归档 · #2 B 客户</h3><span class="tag blue">出库侧字段</span></div>
<div class="section-bd">
<table class="data">
<thead>
<tr><th>产品</th><th>计划</th><th>出库数量</th><th>出库单价</th><th>出库金额</th></tr>
</thead>
<tbody>
<tr>
<td>97% 精制硫酸</td>
<td>15</td>
<td><input value="14.98" /></td>
<td><input value="680" /></td>
<td><input value="10186.40" readonly style="background:#f8fafc" /></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="section">
<div class="section-hd"><h3>送货归档 · #3 山峡入库</h3><span class="tag amber">出库侧字段口径?</span></div>
<div class="section-bd">
<p class="hint warn">你说送货一律用出库数量/单价/金额;但本段业务是「入库」。示意仍按「送货=出库字段」画,是否要对内部入库段改用入库字段?待确认。</p>
<table class="data">
<thead>
<tr><th>产品</th><th>计划</th><th>出库数量</th><th>出库单价</th><th>出库金额</th></tr>
</thead>
<tbody>
<tr>
<td>97% 精制硫酸</td>
<td>5</td>
<td><input value="5.02" /></td>
<td><input value="420" /></td>
<td><input value="2108.40" readonly style="background:#f8fafc" /></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- TAB 5 FREIGHT -->
<div class="tab-pane" id="tab-freight">
<p class="hint ok">运费不区分装货/送货,仍挂在计划(或运输单)级,与现状一致;仅新增「运费备注」。</p>
<div class="section">
<div class="section-hd"><h3>运费(计划级)</h3></div>
<div class="section-bd">
<div class="grid-4">
<div class="field"><label>是否有运费</label><select><option>是</option><option>否</option></select></div>
<div class="field"><label>计费方式</label><select><option>按重量</option><option>按趟次</option></select></div>
<div class="field"><label>运费单价</label><input value="80" /></div>
<div class="field"><label>运费金额</label><input value="2400" /></div>
<div class="field span-all"><label>运费备注(新增)</label><textarea placeholder="例如:一车多卸,含 A/B 两家及回库,过路费另计…">一车三卸,含回库 5t;过路费另报。</textarea></div>
</div>
</div>
</div>
<div class="section">
<div class="section-hd"><h3>结算链路(不变)</h3></div>
<div class="section-bd">
<div class="pills">
<span class="pill">未结算计划组单</span>
<span class="pill muted">→</span>
<span class="pill">审批</span>
<span class="pill muted">→</span>
<span class="pill">财务发放</span>
</div>
</div>
</div>
</div>
<!-- TAB 6 QUESTIONS -->
<div class="tab-pane" id="tab-questions">
<div class="section">
<div class="section-hd"><h3>我已按此理解画稿 · 请点选纠偏</h3></div>
<div class="section-bd">
<p class="subtitle" style="margin:0 0 12px;color:var(--text-muted)">点击选项会记入会话,也可直接在对话里回复。</p>
<div class="options" data-multiselect style="display:grid;gap:10px">
<div class="option" data-choice="load-internal-outbound" onclick="typeof toggleSelect==='function'&&toggleSelect(this)" style="display:flex;gap:12px;padding:12px;border:1px solid var(--border);border-radius:8px;cursor:pointer;background:#fff">
<div class="letter" style="width:28px;height:28px;border-radius:50%;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;flex-shrink:0">A</div>
<div class="content">
<h3 style="margin:0 0 4px;font-size:14px">装货=山峡/云栋 → 地磅出库(我画的)</h3>
<p style="margin:0;color:var(--text-muted);font-size:12px">同意:内部装货是仓库出库,免合同,默认勾地磅出库单</p>
</div>
</div>
<div class="option" data-choice="delivery-qty-balance" onclick="typeof toggleSelect==='function'&&toggleSelect(this)" style="display:flex;gap:12px;padding:12px;border:1px solid var(--border);border-radius:8px;cursor:pointer;background:#fff">
<div class="letter" style="width:28px;height:28px;border-radius:50%;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;flex-shrink:0">B</div>
<div class="content">
<h3 style="margin:0 0 4px;font-size:14px">装货合计必须 = 送货合计 = 计划产品总量</h3>
<p style="margin:0;color:var(--text-muted);font-size:12px">同意做强校验;若允许损耗/途损再另说</p>
</div>
</div>
<div class="option" data-choice="multi-load" onclick="typeof toggleSelect==='function'&&toggleSelect(this)" style="display:flex;gap:12px;padding:12px;border:1px solid var(--border);border-radius:8px;cursor:pointer;background:#fff">
<div class="letter" style="width:28px;height:28px;border-radius:50%;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;flex-shrink:0">C</div>
<div class="content">
<h3 style="margin:0 0 4px;font-size:14px">装货也允许多段(一车多装)</h3>
<p style="margin:0;color:var(--text-muted);font-size:12px">不仅一车多卸,也可能多点装货</p>
</div>
</div>
<div class="option" data-choice="archive-internal-inbound-fields" onclick="typeof toggleSelect==='function'&&toggleSelect(this)" style="display:flex;gap:12px;padding:12px;border:1px solid var(--border);border-radius:8px;cursor:pointer;background:#fff">
<div class="letter" style="width:28px;height:28px;border-radius:50%;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;flex-shrink:0">D</div>
<div class="content">
<h3 style="margin:0 0 4px;font-size:14px">山峡入库送货段归档应改用「入库」字段</h3>
<p style="margin:0;color:var(--text-muted);font-size:12px">而不是一律出库字段</p>
</div>
</div>
</div>
</div>
</div>
<div class="footer-note">
<strong>下一步:</strong>请浏览各 Tab,看理解是否对齐。确认后我会再给 2~3 种数据模型方案(主表+停靠段表 vs 保留 plan_type 推导等),然后落设计文档。
</div>
</div>
</div>
</div>
<script>
(function () {
var buttons = document.querySelectorAll('.tab-btn');
var panes = document.querySelectorAll('.tab-pane');
buttons.forEach(function (btn) {
btn.addEventListener('click', function () {
var id = btn.getAttribute('data-tab');
buttons.forEach(function (b) { b.classList.toggle('active', b === btn); });
panes.forEach(function (p) { p.classList.toggle('active', p.id === 'tab-' + id); });
});
});
})();
</script>
</body>
</html>