417 lines
19 KiB
HTML
417 lines
19 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>运输计划列表 · 合并单元格 Demo</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;
|
||
--row-alt: #fafafa;
|
||
--row-hover: #f1f5f9;
|
||
--bg-page: #f1f5f9;
|
||
--shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
|
||
--radius: 10px;
|
||
--warn: #d97706;
|
||
--danger: #dc2626;
|
||
--load-accent: #059669;
|
||
--load-bg: #ecfdf5;
|
||
--delivery-accent: #0284c7;
|
||
--delivery-bg: #f0f9ff;
|
||
--plan-divider: #94a3b8;
|
||
}
|
||
* { 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: 1360px; margin: 0 auto; padding: 24px 20px 64px; }
|
||
|
||
.hero {
|
||
background: linear-gradient(135deg, #ecfdf5 0%, #fff 55%, #f0f9ff 100%);
|
||
border: 1px solid var(--border);
|
||
border-radius: var(--radius);
|
||
padding: 20px 24px;
|
||
margin-bottom: 16px;
|
||
box-shadow: var(--shadow);
|
||
}
|
||
.hero h1 { margin: 0 0 8px; font-size: 20px; font-weight: 700; }
|
||
.hero h1 em { font-style: normal; color: var(--primary-dark); }
|
||
.hero p { margin: 0; color: var(--text-muted); font-size: 13px; max-width: 880px; }
|
||
.legend {
|
||
display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px;
|
||
}
|
||
.legend-item {
|
||
display: inline-flex; align-items: center; gap: 8px;
|
||
font-size: 12px; color: var(--text-muted);
|
||
padding: 4px 10px; border-radius: 999px;
|
||
background: #fff; border: 1px solid var(--border);
|
||
}
|
||
.legend-swatch {
|
||
width: 14px; height: 14px; border-radius: 3px; flex-shrink: 0;
|
||
}
|
||
.legend-swatch.plan { background: #fff; border: 2px solid var(--plan-divider); }
|
||
.legend-swatch.load { background: var(--load-bg); border: 1px solid #a7f3d0; }
|
||
.legend-swatch.delivery { background: var(--delivery-bg); border: 1px solid #bae6fd; }
|
||
|
||
.panel {
|
||
background: var(--surface);
|
||
border: 1px solid var(--border);
|
||
border-radius: var(--radius);
|
||
box-shadow: var(--shadow);
|
||
overflow: hidden;
|
||
}
|
||
.panel-top {
|
||
display: flex; align-items: center; gap: 8px;
|
||
padding: 14px 18px;
|
||
border-bottom: 1px solid var(--border);
|
||
}
|
||
.panel-top h2 {
|
||
margin: 0; font-size: 15px; font-weight: 700;
|
||
display: flex; align-items: center; gap: 8px;
|
||
}
|
||
.panel-top h2::before {
|
||
content: ""; width: 3px; height: 15px; border-radius: 2px; background: var(--primary);
|
||
}
|
||
.toolbar {
|
||
display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
|
||
padding: 10px 16px; background: var(--table-head); border-bottom: 1px solid var(--border);
|
||
}
|
||
.btn {
|
||
display: inline-flex; align-items: center; justify-content: center;
|
||
height: 34px; padding: 0 12px; border-radius: 8px;
|
||
font-size: 13px; font-weight: 600; border: 1px solid var(--border);
|
||
background: #fff; color: var(--text); cursor: pointer; font-family: inherit;
|
||
}
|
||
.btn-primary { background: var(--primary); border-color: var(--primary); color: #fff; }
|
||
.sel-hint { font-size: 12px; color: var(--text-muted); margin-right: auto; }
|
||
.sel-hint b { color: var(--primary-dark); }
|
||
|
||
.table-wrap { overflow-x: auto; }
|
||
table {
|
||
width: 100%; border-collapse: collapse; font-size: 13px;
|
||
min-width: 1100px;
|
||
}
|
||
|
||
/* 表头：上下两行，标明左右两区 */
|
||
thead .group-row th {
|
||
font-size: 11px; font-weight: 700; letter-spacing: .05em;
|
||
padding: 10px 12px 6px; border-bottom: none;
|
||
}
|
||
thead .group-row .g-plan {
|
||
text-align: center; color: var(--text-muted);
|
||
background: #fff; border-right: 2px solid var(--plan-divider);
|
||
}
|
||
thead .group-row .g-stop {
|
||
text-align: center; color: var(--primary-dark);
|
||
background: #f0fdf9;
|
||
}
|
||
thead .col-row th {
|
||
background: var(--table-head);
|
||
color: var(--text-muted);
|
||
font-size: 12px; font-weight: 600;
|
||
text-align: left;
|
||
padding: 8px 12px 10px;
|
||
border-bottom: 1px solid var(--border);
|
||
white-space: nowrap;
|
||
}
|
||
thead .col-row .th-plan { border-right: 2px solid var(--plan-divider); }
|
||
|
||
tbody td {
|
||
padding: 10px 12px;
|
||
border-bottom: 1px solid var(--border);
|
||
vertical-align: middle;
|
||
}
|
||
tbody tr:hover td { background: var(--row-hover); }
|
||
|
||
/* 左侧计划区：合并单元格 */
|
||
td.td-plan {
|
||
background: #fff !important;
|
||
border-right: 2px solid var(--plan-divider);
|
||
vertical-align: middle;
|
||
}
|
||
tbody tr:hover td.td-plan { background: #fff !important; }
|
||
|
||
/* 右侧段区 */
|
||
td.td-stop { background: #fcfffe; }
|
||
tbody tr.row-load td.td-stop { background: var(--load-bg); }
|
||
tbody tr.row-delivery td.td-stop { background: #fafcff; }
|
||
tbody tr:hover td.td-stop { filter: brightness(0.98); }
|
||
|
||
/* 每个计划块最后一行：加粗底边，视觉上「一条计划」结束 */
|
||
tbody tr.plan-end td { border-bottom: 2px solid var(--plan-divider); }
|
||
tbody tr.plan-end td.td-plan { border-bottom: 2px solid var(--plan-divider); }
|
||
|
||
.link {
|
||
color: var(--primary-dark); font-weight: 700;
|
||
text-decoration: none; font-size: 14px;
|
||
}
|
||
.link:hover { text-decoration: underline; }
|
||
.tag {
|
||
display: inline-flex; padding: 2px 8px; border-radius: 4px;
|
||
font-size: 12px; font-weight: 600; white-space: nowrap;
|
||
}
|
||
.tag-success { background: var(--primary-dark); color: #fff; }
|
||
.tag-danger { background: var(--danger); color: #fff; }
|
||
.tag-warning { background: var(--warn); color: #fff; }
|
||
.muted { color: var(--text-muted); font-size: 12px; }
|
||
|
||
.stop-tag {
|
||
display: inline-flex; align-items: center;
|
||
padding: 2px 9px; border-radius: 999px;
|
||
font-size: 11px; font-weight: 700;
|
||
}
|
||
.stop-tag.load {
|
||
background: var(--load-bg); color: var(--load-accent);
|
||
border: 1px solid #a7f3d0;
|
||
}
|
||
.stop-tag.delivery {
|
||
background: var(--delivery-bg); color: var(--delivery-accent);
|
||
border: 1px solid #bae6fd;
|
||
}
|
||
.customer { font-weight: 600; }
|
||
.internal {
|
||
display: inline-block; margin-left: 4px;
|
||
font-size: 10px; font-weight: 600; color: var(--primary-dark);
|
||
background: var(--primary-bg); border: 1px solid #a7f3d0;
|
||
border-radius: 4px; padding: 0 4px; vertical-align: middle;
|
||
}
|
||
.addr { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
|
||
.qty { color: var(--primary-dark); font-weight: 700; }
|
||
.product-stack > div + div { margin-top: 3px; }
|
||
|
||
.copy-stack { display: flex; flex-direction: column; gap: 4px; }
|
||
.copy-stack .btn { height: 28px; font-size: 11px; padding: 0 8px; width: 100%; }
|
||
|
||
.explain {
|
||
margin: 16px 18px 18px;
|
||
padding: 12px 14px;
|
||
border-radius: 8px;
|
||
background: var(--primary-bg);
|
||
border: 1px solid #a7f3d0;
|
||
font-size: 12px;
|
||
color: #065f46;
|
||
line-height: 1.65;
|
||
}
|
||
.explain code {
|
||
background: rgba(255,255,255,.7);
|
||
padding: 1px 5px; border-radius: 4px;
|
||
font-size: 11px;
|
||
}
|
||
|
||
.pager {
|
||
display: flex; justify-content: space-between; align-items: center;
|
||
padding: 10px 16px; border-top: 1px solid var(--border);
|
||
font-size: 12px; color: var(--text-muted);
|
||
}
|
||
|
||
/* 示意：rowspan 标注（仅 demo） */
|
||
.rowspan-hint {
|
||
display: block; margin-top: 6px;
|
||
font-size: 10px; color: #94a3b8;
|
||
font-weight: 500; letter-spacing: .02em;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="page">
|
||
<header class="hero">
|
||
<h1>运输计划列表 · <em>合并单元格</em> Demo</h1>
|
||
<p>
|
||
一个运输计划若含 <strong>1 个装货 + 2 个送货</strong>，表格占 <strong>3 行</strong>。
|
||
左侧「计划主信息」列使用 <code>rowspan=3</code> 合并为一块；右侧装货、送货#1、送货#2 各占一行。
|
||
列划分与线上一致：计划区（编号/状态/日期/类型/车牌/复制）+ 段区（段次/客户/地址时间/产品/计划数量/地磅）。
|
||
</p>
|
||
<div class="legend">
|
||
<span class="legend-item"><span class="legend-swatch plan"></span>计划主信息（合并单元格）</span>
|
||
<span class="legend-item"><span class="legend-swatch load"></span>装货段（1 行）</span>
|
||
<span class="legend-item"><span class="legend-swatch delivery"></span>送货段（每段 1 行）</span>
|
||
</div>
|
||
</header>
|
||
|
||
<section class="panel">
|
||
<div class="panel-top"><h2>运输计划</h2></div>
|
||
<div class="toolbar">
|
||
<span class="sel-hint">已选 <b>1</b> 项（按<strong>计划</strong>勾选，非按段）</span>
|
||
<button type="button" class="btn btn-primary">新增计划</button>
|
||
<button type="button" class="btn">安排运输</button>
|
||
</div>
|
||
|
||
<div class="table-wrap">
|
||
<table>
|
||
<thead>
|
||
<tr class="group-row">
|
||
<th class="g-plan" colspan="8">计划主信息 · 合并单元格（rowspan = 装货 1 行 + 送货 N 行）</th>
|
||
<th class="g-stop" colspan="6">装货 / 送货 · 每段一行</th>
|
||
</tr>
|
||
<tr class="col-row">
|
||
<th class="th-plan" style="width:40px"><input type="checkbox" checked /></th>
|
||
<th class="th-plan" style="width:48px">序号</th>
|
||
<th class="th-plan" style="width:140px">计划编号</th>
|
||
<th class="th-plan" style="width:84px">跟进状态</th>
|
||
<th class="th-plan" style="width:96px">计划日期</th>
|
||
<th class="th-plan" style="width:76px">单据类型</th>
|
||
<th class="th-plan" style="width:100px">车牌号</th>
|
||
<th class="th-plan" style="width:100px">复制</th>
|
||
<th style="width:76px">段次</th>
|
||
<th style="width:160px">客户</th>
|
||
<th style="width:180px">地址 / 时间</th>
|
||
<th style="width:140px">段内产品</th>
|
||
<th style="width:72px">计划数量</th>
|
||
<th style="width:64px">地磅</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<!-- ==================== 计划 1：1装 + 2送 → 3行，左侧 rowspan=3 ==================== -->
|
||
<tr class="row-load">
|
||
<td class="td-plan" rowspan="3"><input type="checkbox" checked /></td>
|
||
<td class="td-plan" rowspan="3">
|
||
1
|
||
<span class="rowspan-hint">rowspan=3</span>
|
||
</td>
|
||
<td class="td-plan" rowspan="3">
|
||
<a class="link" href="#">PL20250826001</a>
|
||
<div class="muted">跟进：张三</div>
|
||
</td>
|
||
<td class="td-plan" rowspan="3"><span class="tag tag-success">已安排</span></td>
|
||
<td class="td-plan" rowspan="3">2025-08-26</td>
|
||
<td class="td-plan" rowspan="3">出库单</td>
|
||
<td class="td-plan" rowspan="3">皖A·12345</td>
|
||
<td class="td-plan" rowspan="3">
|
||
<div class="copy-stack">
|
||
<button type="button" class="btn">复制给司机</button>
|
||
<button type="button" class="btn">复制给现场</button>
|
||
</div>
|
||
</td>
|
||
<!-- 右侧：装货行 -->
|
||
<td class="td-stop"><span class="stop-tag load">装货</span></td>
|
||
<td class="td-stop">
|
||
<span class="customer">安庆市山峡化工有限公司</span><span class="internal">内部</span>
|
||
</td>
|
||
<td class="td-stop"><div class="addr">安徽省安庆市大观区 …</div><div class="addr">08-26 08:00</div></td>
|
||
<td class="td-stop">
|
||
<div class="product-stack">
|
||
<div>硫酸 <span class="muted">32%工业级</span></div>
|
||
<div>盐酸 <span class="muted">31%</span></div>
|
||
</div>
|
||
</td>
|
||
<td class="td-stop">
|
||
<div class="product-stack">
|
||
<div><span class="qty">28 吨</span></div>
|
||
<div><span class="qty">12 吨</span></div>
|
||
</div>
|
||
</td>
|
||
<td class="td-stop"><span class="tag tag-success" style="font-size:11px">出库</span></td>
|
||
</tr>
|
||
<tr class="row-delivery">
|
||
<!-- 左侧 8 列已被上行 rowspan 占用，本行只渲染右侧 6 列 -->
|
||
<td class="td-stop"><span class="stop-tag delivery">送货 #1</span></td>
|
||
<td class="td-stop"><span class="customer">合肥某某贸易有限公司</span></td>
|
||
<td class="td-stop"><div class="addr">合肥市蜀山区 …</div><div class="addr">08-26 14:00</div></td>
|
||
<td class="td-stop">硫酸 <span class="muted">32%工业级</span></td>
|
||
<td class="td-stop"><span class="qty">28 吨</span></td>
|
||
<td class="td-stop muted">—</td>
|
||
</tr>
|
||
<tr class="row-delivery plan-end">
|
||
<td class="td-stop"><span class="stop-tag delivery">送货 #2</span></td>
|
||
<td class="td-stop"><span class="customer">芜湖某某物流有限公司</span></td>
|
||
<td class="td-stop"><div class="addr">芜湖市镜湖区 …</div><div class="addr">08-26 17:30</div></td>
|
||
<td class="td-stop">盐酸 <span class="muted">31%</span></td>
|
||
<td class="td-stop"><span class="qty">12 吨</span></td>
|
||
<td class="td-stop muted">—</td>
|
||
</tr>
|
||
|
||
<!-- ==================== 计划 2：1装 + 1送 → 2行，左侧 rowspan=2 ==================== -->
|
||
<tr class="row-load">
|
||
<td class="td-plan" rowspan="2"><input type="checkbox" /></td>
|
||
<td class="td-plan" rowspan="2">
|
||
2
|
||
<span class="rowspan-hint">rowspan=2</span>
|
||
</td>
|
||
<td class="td-plan" rowspan="2"><a class="link" href="#">PL20250826002</a></td>
|
||
<td class="td-plan" rowspan="2"><span class="tag tag-danger">待安排</span></td>
|
||
<td class="td-plan" rowspan="2">2025-08-26</td>
|
||
<td class="td-plan" rowspan="2">入库单</td>
|
||
<td class="td-plan" rowspan="2 muted">—</td>
|
||
<td class="td-plan" rowspan="2 muted">—</td>
|
||
<td class="td-stop"><span class="stop-tag load">装货</span></td>
|
||
<td class="td-stop"><span class="customer">江苏某某供应商</span></td>
|
||
<td class="td-stop"><div class="addr">南京市江宁区 …</div><div class="addr">08-26 09:00</div></td>
|
||
<td class="td-stop">甲醇</td>
|
||
<td class="td-stop"><span class="qty">20 吨</span></td>
|
||
<td class="td-stop muted">—</td>
|
||
</tr>
|
||
<tr class="row-delivery plan-end">
|
||
<td class="td-stop"><span class="stop-tag delivery">送货 #1</span></td>
|
||
<td class="td-stop">
|
||
<span class="customer">安徽云栋化工有限公司</span><span class="internal">内部</span>
|
||
</td>
|
||
<td class="td-stop"><div class="addr">安庆市 …</div><div class="addr">08-26 15:00</div></td>
|
||
<td class="td-stop">甲醇</td>
|
||
<td class="td-stop"><span class="qty">20 吨</span></td>
|
||
<td class="td-stop"><span class="tag tag-success" style="font-size:11px">入库</span></td>
|
||
</tr>
|
||
|
||
<!-- ==================== 计划 3：1装 + 1送 → 2行 ==================== -->
|
||
<tr class="row-load">
|
||
<td class="td-plan" rowspan="2"><input type="checkbox" /></td>
|
||
<td class="td-plan" rowspan="2">3<span class="rowspan-hint">rowspan=2</span></td>
|
||
<td class="td-plan" rowspan="2"><a class="link" href="#">PL20250825018</a></td>
|
||
<td class="td-plan" rowspan="2"><span class="tag tag-warning">等通知</span></td>
|
||
<td class="td-plan" rowspan="2">2025-08-25</td>
|
||
<td class="td-plan" rowspan="2">直销单</td>
|
||
<td class="td-plan" rowspan="2 muted">—</td>
|
||
<td class="td-plan" rowspan="2 muted">—</td>
|
||
<td class="td-stop"><span class="stop-tag load">装货</span></td>
|
||
<td class="td-stop"><span class="customer">山东某某工厂</span></td>
|
||
<td class="td-stop"><div class="addr">济南市 …</div><div class="addr">08-25 10:00</div></td>
|
||
<td class="td-stop">双氧水</td>
|
||
<td class="td-stop"><span class="qty">15 吨</span></td>
|
||
<td class="td-stop muted">—</td>
|
||
</tr>
|
||
<tr class="row-delivery plan-end">
|
||
<td class="td-stop"><span class="stop-tag delivery">送货 #1</span></td>
|
||
<td class="td-stop"><span class="customer">南京某某客户</span></td>
|
||
<td class="td-stop"><div class="addr">南京市 …</div><div class="addr">08-25 16:00</div></td>
|
||
<td class="td-stop">双氧水</td>
|
||
<td class="td-stop"><span class="qty">15 吨</span></td>
|
||
<td class="td-stop muted">—</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<div class="explain">
|
||
<strong>读表方式（以 PL20250826001 为例）：</strong><br />
|
||
① 左侧合并块 = 一条运输计划（勾选、编号、状态、车牌、复制只出现 1 次）。<br />
|
||
② 右侧第 1 行 = 装货段（山峡，硫酸+盐酸，地磅出库）。<br />
|
||
③ 右侧第 2 行 = 送货#1（合肥，硫酸 28 吨）。<br />
|
||
④ 右侧第 3 行 = 送货#2（芜湖，盐酸 12 吨）。<br />
|
||
⑤ 实现：<code>flattenPlanListRows</code> + <code>el-table :span-method</code>，<code>rowspan = 1 + deliveries.length</code>；勾选/分页按计划。<br />
|
||
⑥ 已落地页：<code>web-admin/src/views/pl/plan/index.vue</code>（列设置 key <code>pl-plan-list-columns-v4</code>）。
|
||
</div>
|
||
|
||
<div class="pager">
|
||
<span>共 128 条计划 · 第 1 / 7 页</span>
|
||
<span>分页按<strong>计划</strong>计数，不按段行</span>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
</body>
|
||
</html>
|