|
|
@@ -0,0 +1,636 @@
|
|
|
+<!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;
|
|
|
+ --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: 16px;
|
|
|
+ box-shadow: var(--shadow);
|
|
|
+ }
|
|
|
+ .hero h1 { margin: 0 0 8px; font-size: 22px; font-weight: 700; }
|
|
|
+ .hero h1 em { font-style: normal; color: var(--primary-dark); }
|
|
|
+ .hero p { margin: 0; color: var(--text-muted); max-width: 920px; }
|
|
|
+ .meta {
|
|
|
+ display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px;
|
|
|
+ }
|
|
|
+ .chip {
|
|
|
+ display: inline-flex; align-items: center; gap: 6px;
|
|
|
+ padding: 4px 10px; border-radius: 999px;
|
|
|
+ background: var(--primary-bg); color: var(--primary-dark);
|
|
|
+ font-size: 12px; font-weight: 600;
|
|
|
+ }
|
|
|
+ .chip.muted { background: #f1f5f9; color: var(--text-muted); }
|
|
|
+
|
|
|
+ .compare-bar {
|
|
|
+ display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
|
|
|
+ margin-bottom: 14px;
|
|
|
+ }
|
|
|
+ .compare-btn {
|
|
|
+ border: 1px solid var(--border);
|
|
|
+ background: #fff;
|
|
|
+ color: var(--text-muted);
|
|
|
+ border-radius: 999px;
|
|
|
+ padding: 8px 16px;
|
|
|
+ font-size: 13px;
|
|
|
+ font-weight: 600;
|
|
|
+ cursor: pointer;
|
|
|
+ font-family: inherit;
|
|
|
+ transition: all .15s ease;
|
|
|
+ }
|
|
|
+ .compare-btn:hover { border-color: #a7f3d0; color: var(--primary-dark); }
|
|
|
+ .compare-btn.active {
|
|
|
+ background: var(--primary);
|
|
|
+ border-color: var(--primary);
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ .compare-btn .badge {
|
|
|
+ display: inline-block;
|
|
|
+ margin-left: 6px;
|
|
|
+ padding: 1px 7px;
|
|
|
+ border-radius: 999px;
|
|
|
+ font-size: 11px;
|
|
|
+ font-weight: 700;
|
|
|
+ background: rgba(255,255,255,.22);
|
|
|
+ }
|
|
|
+ .compare-btn:not(.active) .badge {
|
|
|
+ background: var(--primary-bg);
|
|
|
+ color: var(--primary-dark);
|
|
|
+ }
|
|
|
+ .hint {
|
|
|
+ margin-left: auto;
|
|
|
+ font-size: 12px;
|
|
|
+ color: var(--text-muted);
|
|
|
+ }
|
|
|
+ .hint strong { color: var(--primary-dark); }
|
|
|
+
|
|
|
+ .panel {
|
|
|
+ background: var(--surface);
|
|
|
+ border: 1px solid var(--border);
|
|
|
+ border-radius: var(--radius);
|
|
|
+ box-shadow: var(--shadow);
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+ .panel-top {
|
|
|
+ padding: 14px 18px;
|
|
|
+ border-bottom: 1px solid var(--border);
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 12px;
|
|
|
+ }
|
|
|
+ .panel-top h2 {
|
|
|
+ margin: 0;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 700;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 8px;
|
|
|
+ }
|
|
|
+ .panel-top h2::before {
|
|
|
+ content: "";
|
|
|
+ width: 3px;
|
|
|
+ height: 16px;
|
|
|
+ border-radius: 2px;
|
|
|
+ background: var(--primary);
|
|
|
+ }
|
|
|
+ .panel-note {
|
|
|
+ margin-left: auto;
|
|
|
+ font-size: 12px;
|
|
|
+ color: var(--text-muted);
|
|
|
+ }
|
|
|
+
|
|
|
+ .toolbar {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ gap: 8px;
|
|
|
+ align-items: center;
|
|
|
+ padding: 12px 16px;
|
|
|
+ border-bottom: 1px solid var(--border);
|
|
|
+ }
|
|
|
+ .pill {
|
|
|
+ border: 1px solid var(--border);
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 999px;
|
|
|
+ padding: 6px 12px;
|
|
|
+ font-size: 12px;
|
|
|
+ color: var(--text-muted);
|
|
|
+ cursor: default;
|
|
|
+ }
|
|
|
+ .pill.active {
|
|
|
+ background: var(--primary-bg);
|
|
|
+ border-color: #a7f3d0;
|
|
|
+ color: var(--primary-dark);
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+ .search {
|
|
|
+ flex: 1;
|
|
|
+ min-width: 220px;
|
|
|
+ max-width: 360px;
|
|
|
+ height: 36px;
|
|
|
+ border: 1px solid var(--border);
|
|
|
+ border-radius: 8px;
|
|
|
+ padding: 0 12px;
|
|
|
+ color: var(--text-muted);
|
|
|
+ background: #fff;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 13px;
|
|
|
+ }
|
|
|
+ .btn {
|
|
|
+ height: 36px;
|
|
|
+ border-radius: 8px;
|
|
|
+ border: 1px solid var(--border);
|
|
|
+ background: #fff;
|
|
|
+ padding: 0 14px;
|
|
|
+ font-size: 13px;
|
|
|
+ font-weight: 600;
|
|
|
+ color: var(--text);
|
|
|
+ cursor: default;
|
|
|
+ }
|
|
|
+ .btn.main {
|
|
|
+ background: var(--primary);
|
|
|
+ border-color: var(--primary);
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+
|
|
|
+ table {
|
|
|
+ width: 100%;
|
|
|
+ border-collapse: collapse;
|
|
|
+ table-layout: fixed;
|
|
|
+ }
|
|
|
+ th, td {
|
|
|
+ padding: 10px 12px;
|
|
|
+ border-bottom: 1px solid var(--border);
|
|
|
+ text-align: center;
|
|
|
+ vertical-align: middle;
|
|
|
+ font-size: 13px;
|
|
|
+ }
|
|
|
+ th {
|
|
|
+ background: var(--table-head);
|
|
|
+ color: var(--text-muted);
|
|
|
+ font-weight: 600;
|
|
|
+ white-space: nowrap;
|
|
|
+ }
|
|
|
+ tr:nth-child(even) td { background: var(--row-alt); }
|
|
|
+ tr:hover td { background: var(--row-hover); }
|
|
|
+ .col-left { text-align: left; }
|
|
|
+ .muted { color: var(--text-muted); }
|
|
|
+ .plan-no {
|
|
|
+ color: var(--primary-dark);
|
|
|
+ font-weight: 600;
|
|
|
+ text-decoration: none;
|
|
|
+ }
|
|
|
+ .new-col {
|
|
|
+ position: relative;
|
|
|
+ background: linear-gradient(180deg, #ecfdf5 0%, #f8fafc 100%) !important;
|
|
|
+ box-shadow: inset 0 0 0 2px rgba(16, 185, 129, 0.35);
|
|
|
+ }
|
|
|
+ td.new-col {
|
|
|
+ background: #ecfdf5 !important;
|
|
|
+ box-shadow: inset 0 0 0 1px rgba(16, 185, 129, 0.25);
|
|
|
+ }
|
|
|
+ .hdr {
|
|
|
+ display: inline-flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 6px;
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
+ .funnel {
|
|
|
+ width: 16px;
|
|
|
+ height: 16px;
|
|
|
+ border: 0;
|
|
|
+ background: transparent;
|
|
|
+ cursor: pointer;
|
|
|
+ padding: 0;
|
|
|
+ color: var(--text-muted);
|
|
|
+ display: inline-flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
+ .funnel.active { color: var(--primary-dark); }
|
|
|
+ .funnel svg { width: 14px; height: 14px; }
|
|
|
+
|
|
|
+ .times-join { letter-spacing: 0.01em; }
|
|
|
+ .times-tags {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ gap: 4px;
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
+ .tag {
|
|
|
+ display: inline-block;
|
|
|
+ padding: 1px 8px;
|
|
|
+ border-radius: 4px;
|
|
|
+ background: var(--info-bg);
|
|
|
+ color: var(--info);
|
|
|
+ font-size: 12px;
|
|
|
+ font-weight: 600;
|
|
|
+ border: 1px solid #bae6fd;
|
|
|
+ }
|
|
|
+ .times-stack {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ gap: 2px;
|
|
|
+ align-items: center;
|
|
|
+ line-height: 1.35;
|
|
|
+ }
|
|
|
+
|
|
|
+ .status {
|
|
|
+ display: inline-block;
|
|
|
+ padding: 2px 8px;
|
|
|
+ border-radius: 4px;
|
|
|
+ font-size: 12px;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #fff;
|
|
|
+ background: var(--primary-dark);
|
|
|
+ }
|
|
|
+ .status.warn { background: var(--warn); }
|
|
|
+
|
|
|
+ .filter-pop {
|
|
|
+ display: none;
|
|
|
+ position: absolute;
|
|
|
+ top: calc(100% + 6px);
|
|
|
+ left: 50%;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ width: 280px;
|
|
|
+ background: #fff;
|
|
|
+ border: 1px solid var(--border);
|
|
|
+ border-radius: 10px;
|
|
|
+ box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
|
|
|
+ padding: 12px;
|
|
|
+ z-index: 20;
|
|
|
+ text-align: left;
|
|
|
+ }
|
|
|
+ .filter-pop.open { display: block; }
|
|
|
+ .filter-pop label {
|
|
|
+ display: block;
|
|
|
+ font-size: 11px;
|
|
|
+ color: var(--text-muted);
|
|
|
+ margin-bottom: 4px;
|
|
|
+ }
|
|
|
+ .filter-pop .row {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: 1fr 1fr;
|
|
|
+ gap: 8px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ }
|
|
|
+ .filter-pop input {
|
|
|
+ width: 100%;
|
|
|
+ height: 32px;
|
|
|
+ border: 1px solid var(--border);
|
|
|
+ border-radius: 6px;
|
|
|
+ padding: 0 8px;
|
|
|
+ font-size: 12px;
|
|
|
+ font-family: inherit;
|
|
|
+ }
|
|
|
+ .filter-pop .actions {
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
+ gap: 8px;
|
|
|
+ }
|
|
|
+ .filter-pop .actions button {
|
|
|
+ height: 28px;
|
|
|
+ border-radius: 6px;
|
|
|
+ border: 1px solid var(--border);
|
|
|
+ background: #fff;
|
|
|
+ padding: 0 10px;
|
|
|
+ font-size: 12px;
|
|
|
+ cursor: pointer;
|
|
|
+ font-family: inherit;
|
|
|
+ }
|
|
|
+ .filter-pop .actions .ok {
|
|
|
+ background: var(--primary);
|
|
|
+ border-color: var(--primary);
|
|
|
+ color: #fff;
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+ .filter-note {
|
|
|
+ font-size: 11px;
|
|
|
+ color: var(--text-muted);
|
|
|
+ margin: 0 0 10px;
|
|
|
+ line-height: 1.4;
|
|
|
+ }
|
|
|
+
|
|
|
+ .legend {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: 1fr 1fr 1fr;
|
|
|
+ gap: 12px;
|
|
|
+ margin-top: 16px;
|
|
|
+ }
|
|
|
+ @media (max-width: 960px) { .legend { grid-template-columns: 1fr; } }
|
|
|
+ .legend-card {
|
|
|
+ background: #fff;
|
|
|
+ border: 1px solid var(--border);
|
|
|
+ border-radius: var(--radius);
|
|
|
+ padding: 14px 16px;
|
|
|
+ box-shadow: var(--shadow);
|
|
|
+ }
|
|
|
+ .legend-card h3 {
|
|
|
+ margin: 0 0 6px;
|
|
|
+ font-size: 13px;
|
|
|
+ font-weight: 700;
|
|
|
+ }
|
|
|
+ .legend-card p {
|
|
|
+ margin: 0;
|
|
|
+ font-size: 12px;
|
|
|
+ color: var(--text-muted);
|
|
|
+ }
|
|
|
+ .legend-card.rec {
|
|
|
+ border-color: #a7f3d0;
|
|
|
+ background: linear-gradient(180deg, #ecfdf5, #fff);
|
|
|
+ }
|
|
|
+ .rec-badge {
|
|
|
+ display: inline-block;
|
|
|
+ margin-left: 6px;
|
|
|
+ padding: 1px 7px;
|
|
|
+ border-radius: 999px;
|
|
|
+ font-size: 11px;
|
|
|
+ background: var(--primary);
|
|
|
+ color: #fff;
|
|
|
+ font-weight: 700;
|
|
|
+ vertical-align: middle;
|
|
|
+ }
|
|
|
+ .data-note {
|
|
|
+ margin-top: 14px;
|
|
|
+ padding: 12px 14px;
|
|
|
+ background: #fff;
|
|
|
+ border: 1px dashed #a7f3d0;
|
|
|
+ border-radius: 10px;
|
|
|
+ font-size: 12px;
|
|
|
+ color: var(--text-muted);
|
|
|
+ }
|
|
|
+ .data-note strong { color: var(--text); }
|
|
|
+ code {
|
|
|
+ font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
|
+ font-size: 11px;
|
|
|
+ background: #f1f5f9;
|
|
|
+ padding: 1px 5px;
|
|
|
+ border-radius: 4px;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+ <div class="page">
|
|
|
+ <header class="hero">
|
|
|
+ <h1>运输计划 · 新增列 <em>送货时间</em></h1>
|
|
|
+ <p>
|
|
|
+ 插入位置:<strong>计划日期</strong> 之后。数据来自各<strong>送货段</strong>
|
|
|
+ <code>pl_plan_delivery.delivery_time</code>,去重后展示;列头漏斗支持日期区间过滤
|
|
|
+ (与计划日期列交互一致)。下方可切换三种单元格展示方案。
|
|
|
+ </p>
|
|
|
+ <div class="meta">
|
|
|
+ <span class="chip">列:送货时间</span>
|
|
|
+ <span class="chip">去重 · 升序</span>
|
|
|
+ <span class="chip">过滤:日期区间</span>
|
|
|
+ <span class="chip muted">表单取值格式 YYYY-MM-DD</span>
|
|
|
+ </div>
|
|
|
+ </header>
|
|
|
+
|
|
|
+ <div class="compare-bar">
|
|
|
+ <button type="button" class="compare-btn active" data-mode="join">
|
|
|
+ A · 逗号拼接 <span class="badge">推荐</span>
|
|
|
+ </button>
|
|
|
+ <button type="button" class="compare-btn" data-mode="tags">B · 标签堆叠</button>
|
|
|
+ <button type="button" class="compare-btn" data-mode="stack">C · 多行换行</button>
|
|
|
+ <span class="hint">当前方案:<strong id="modeLabel">逗号拼接</strong></span>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <section class="panel">
|
|
|
+ <div class="panel-top">
|
|
|
+ <h2>运输计划列表(示意)</h2>
|
|
|
+ <span class="panel-note">绿色描边列为新增「送货时间」· 点击漏斗可预览过滤浮层</span>
|
|
|
+ </div>
|
|
|
+ <div class="toolbar">
|
|
|
+ <span class="pill active">今天</span>
|
|
|
+ <span class="pill">近 7 天</span>
|
|
|
+ <span class="pill">本月</span>
|
|
|
+ <div class="search">计划编号 / 供方 / 需方 / 产品名称 / 车牌号</div>
|
|
|
+ <button class="btn main" type="button">新增计划</button>
|
|
|
+ <button class="btn" type="button">安排运输</button>
|
|
|
+ </div>
|
|
|
+ <div style="overflow-x: auto;">
|
|
|
+ <table>
|
|
|
+ <thead>
|
|
|
+ <tr>
|
|
|
+ <th style="width: 48px;">#</th>
|
|
|
+ <th class="col-left" style="width: 140px;">计划编号</th>
|
|
|
+ <th style="width: 100px;">跟进状态</th>
|
|
|
+ <th style="width: 120px;">
|
|
|
+ <span class="hdr">计划日期
|
|
|
+ <span class="funnel" title="计划日期过滤(既有)" aria-hidden="true">
|
|
|
+ <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 6h16M7 12h10M10 18h4"/></svg>
|
|
|
+ </span>
|
|
|
+ </span>
|
|
|
+ </th>
|
|
|
+ <th style="width: 168px;" class="new-col">
|
|
|
+ <span class="hdr">送货时间
|
|
|
+ <button type="button" class="funnel active" id="deliveryFilterBtn" title="送货时间过滤" aria-label="送货时间过滤">
|
|
|
+ <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 6h16M7 12h10M10 18h4"/></svg>
|
|
|
+ </button>
|
|
|
+ </span>
|
|
|
+ <div class="filter-pop" id="deliveryFilterPop">
|
|
|
+ <p class="filter-note">
|
|
|
+ 过滤语义示意:任一送货段时间落在区间内即命中该计划
|
|
|
+ (EXISTS 子查询,不对主表 <code>pl_plan.delivery_time</code> 过滤)。
|
|
|
+ </p>
|
|
|
+ <div class="row">
|
|
|
+ <div>
|
|
|
+ <label>开始日期</label>
|
|
|
+ <input type="date" value="2026-09-12" />
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <label>结束日期</label>
|
|
|
+ <input type="date" value="2026-09-14" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="actions">
|
|
|
+ <button type="button" id="filterReset">重置</button>
|
|
|
+ <button type="button" class="ok" id="filterOk">确定</button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </th>
|
|
|
+ <th style="width: 90px;">单据类型</th>
|
|
|
+ <th style="width: 110px;">车牌号</th>
|
|
|
+ <th class="col-left">客户 / 段次摘要</th>
|
|
|
+ </tr>
|
|
|
+ </thead>
|
|
|
+ <tbody id="tbody"></tbody>
|
|
|
+ </table>
|
|
|
+ </div>
|
|
|
+ </section>
|
|
|
+
|
|
|
+ <div class="legend">
|
|
|
+ <article class="legend-card rec">
|
|
|
+ <h3>A · 逗号拼接<span class="rec-badge">推荐</span></h3>
|
|
|
+ <p>与「多值文本列」一致,窄列可读;去重后如 <code>09-12, 09-14</code>。合并单元格场景最稳。</p>
|
|
|
+ </article>
|
|
|
+ <article class="legend-card">
|
|
|
+ <h3>B · 标签堆叠</h3>
|
|
|
+ <p>视觉区分更强,但列宽吃得更多,合并行高度波动大。</p>
|
|
|
+ </article>
|
|
|
+ <article class="legend-card">
|
|
|
+ <h3>C · 多行换行</h3>
|
|
|
+ <p>每行一个日期,对齐清晰;行高会随段次数增加,列表节奏变松。</p>
|
|
|
+ </article>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="data-note">
|
|
|
+ <strong>示例数据说明:</strong>
|
|
|
+ PO20260912001 有 3 个送货段,时间 <code>09-12 / 09-12 / 09-14</code> → 去重后 2 个;
|
|
|
+ PO20260912002 单段;PO20260912003 两段不同日;PO20260912004 无送货时间 → 展示「—」。
|
|
|
+ 主表冗余字段 <code>pl_plan.delivery_time</code> 仅同步首段,<strong>不作为本列数据源</strong>。
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <script>
|
|
|
+ const rows = [
|
|
|
+ {
|
|
|
+ no: 'PO20260912001',
|
|
|
+ status: '待安排',
|
|
|
+ statusClass: 'warn',
|
|
|
+ planDate: '2026-09-12',
|
|
|
+ times: ['2026-09-12', '2026-09-12', '2026-09-14'],
|
|
|
+ type: '直销单',
|
|
|
+ plate: '皖A·D1234',
|
|
|
+ customer: '甲客户 → 乙客户 / 丙客户'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ no: 'PO20260912002',
|
|
|
+ status: '已安排',
|
|
|
+ statusClass: '',
|
|
|
+ planDate: '2026-09-12',
|
|
|
+ times: ['2026-09-12'],
|
|
|
+ type: '出库单',
|
|
|
+ plate: '皖A·E5678',
|
|
|
+ customer: '云栋仓库 → 丁客户'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ no: 'PO20260912003',
|
|
|
+ status: '已安排',
|
|
|
+ statusClass: '',
|
|
|
+ planDate: '2026-09-13',
|
|
|
+ times: ['2026-09-13', '2026-09-15'],
|
|
|
+ type: '入库单',
|
|
|
+ plate: '—',
|
|
|
+ customer: '戊供应商 → 山峡库'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ no: 'PO20260912004',
|
|
|
+ status: '等通知',
|
|
|
+ statusClass: 'warn',
|
|
|
+ planDate: '2026-09-14',
|
|
|
+ times: [],
|
|
|
+ type: '直销单',
|
|
|
+ plate: '—',
|
|
|
+ customer: '己客户(待补送货时间)'
|
|
|
+ }
|
|
|
+ ]
|
|
|
+
|
|
|
+ function uniqSorted(times) {
|
|
|
+ return [...new Set(times.filter(Boolean))].sort()
|
|
|
+ }
|
|
|
+
|
|
|
+ function shortDate(iso) {
|
|
|
+ if (!iso) return '—'
|
|
|
+ const m = String(iso).match(/(\d{4})-(\d{2})-(\d{2})/)
|
|
|
+ return m ? `${m[2]}-${m[3]}` : iso
|
|
|
+ }
|
|
|
+
|
|
|
+ function renderTimes(times, mode) {
|
|
|
+ const list = uniqSorted(times)
|
|
|
+ if (!list.length) return '<span class="muted">—</span>'
|
|
|
+ if (mode === 'tags') {
|
|
|
+ return `<div class="times-tags">${list.map((t) => `<span class="tag">${shortDate(t)}</span>`).join('')}</div>`
|
|
|
+ }
|
|
|
+ if (mode === 'stack') {
|
|
|
+ return `<div class="times-stack">${list.map((t) => `<span>${shortDate(t)}</span>`).join('')}</div>`
|
|
|
+ }
|
|
|
+ return `<span class="times-join">${list.map(shortDate).join(', ')}</span>`
|
|
|
+ }
|
|
|
+
|
|
|
+ const labels = { join: '逗号拼接', tags: '标签堆叠', stack: '多行换行' }
|
|
|
+ let mode = 'join'
|
|
|
+
|
|
|
+ function render() {
|
|
|
+ const tbody = document.getElementById('tbody')
|
|
|
+ tbody.innerHTML = rows.map((r, i) => `
|
|
|
+ <tr>
|
|
|
+ <td class="muted">${i + 1}</td>
|
|
|
+ <td class="col-left"><a class="plan-no" href="#">${r.no}</a></td>
|
|
|
+ <td><span class="status ${r.statusClass}">${r.status}</span></td>
|
|
|
+ <td>${r.planDate}</td>
|
|
|
+ <td class="new-col">${renderTimes(r.times, mode)}</td>
|
|
|
+ <td>${r.type}</td>
|
|
|
+ <td>${r.plate}</td>
|
|
|
+ <td class="col-left muted">${r.customer}</td>
|
|
|
+ </tr>
|
|
|
+ `).join('')
|
|
|
+ document.getElementById('modeLabel').textContent = labels[mode]
|
|
|
+ }
|
|
|
+
|
|
|
+ document.querySelectorAll('.compare-btn').forEach((btn) => {
|
|
|
+ btn.addEventListener('click', () => {
|
|
|
+ document.querySelectorAll('.compare-btn').forEach((b) => b.classList.remove('active'))
|
|
|
+ btn.classList.add('active')
|
|
|
+ mode = btn.dataset.mode
|
|
|
+ render()
|
|
|
+ })
|
|
|
+ })
|
|
|
+
|
|
|
+ const pop = document.getElementById('deliveryFilterPop')
|
|
|
+ const filterBtn = document.getElementById('deliveryFilterBtn')
|
|
|
+ filterBtn.addEventListener('click', (e) => {
|
|
|
+ e.stopPropagation()
|
|
|
+ pop.classList.toggle('open')
|
|
|
+ })
|
|
|
+ document.getElementById('filterOk').addEventListener('click', () => pop.classList.remove('open'))
|
|
|
+ document.getElementById('filterReset').addEventListener('click', () => {
|
|
|
+ pop.querySelectorAll('input').forEach((el) => { el.value = '' })
|
|
|
+ })
|
|
|
+ document.addEventListener('click', (e) => {
|
|
|
+ if (!pop.contains(e.target) && e.target !== filterBtn && !filterBtn.contains(e.target)) {
|
|
|
+ pop.classList.remove('open')
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ render()
|
|
|
+ </script>
|
|
|
+</body>
|
|
|
+</html>
|