836 lines
42 KiB
HTML
836 lines
42 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, 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>
|