|
|
@@ -0,0 +1,638 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="zh-CN">
|
|
|
+<head>
|
|
|
+ <meta charset="UTF-8" />
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
|
+ <title>CRM 日期列头排序 Demo · 正序 / 倒序</title>
|
|
|
+ <style>
|
|
|
+ :root {
|
|
|
+ --primary: #10b981;
|
|
|
+ --primary-dark: #059669;
|
|
|
+ --primary-bg: #ecfdf5;
|
|
|
+ --text: #1e293b;
|
|
|
+ --text-muted: #64748b;
|
|
|
+ --border: #e2e8f0;
|
|
|
+ --border-mint: #d9e8e2;
|
|
|
+ --table-head: #f8fafc;
|
|
|
+ --warning: #d97706;
|
|
|
+ --radius: 8px;
|
|
|
+ --shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
|
|
|
+ }
|
|
|
+
|
|
|
+ * { box-sizing: border-box; }
|
|
|
+ body {
|
|
|
+ margin: 0;
|
|
|
+ padding: 24px;
|
|
|
+ color: var(--text);
|
|
|
+ background: #f1f5f9;
|
|
|
+ font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", sans-serif;
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 1.5;
|
|
|
+ }
|
|
|
+
|
|
|
+ .page { max-width: 1120px; margin: 0 auto; }
|
|
|
+ h1 { margin: 0 0 8px; font-size: 22px; font-weight: 700; }
|
|
|
+ h2 { margin: 0 0 10px; font-size: 16px; font-weight: 600; }
|
|
|
+ .desc { margin: 0 0 20px; color: var(--text-muted); font-size: 13px; }
|
|
|
+ .desc code {
|
|
|
+ font-size: 12px;
|
|
|
+ padding: 1px 5px;
|
|
|
+ border-radius: 4px;
|
|
|
+ background: #e2e8f0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .callout {
|
|
|
+ margin-bottom: 20px;
|
|
|
+ padding: 12px 14px;
|
|
|
+ border: 1px solid #a7f3d0;
|
|
|
+ border-radius: 10px;
|
|
|
+ background: var(--primary-bg);
|
|
|
+ color: var(--text);
|
|
|
+ font-size: 13px;
|
|
|
+ }
|
|
|
+ .callout strong { color: var(--primary-dark); }
|
|
|
+
|
|
|
+ .tabs {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ gap: 8px;
|
|
|
+ margin-bottom: 16px;
|
|
|
+ }
|
|
|
+ .tab {
|
|
|
+ border: 1px solid var(--border);
|
|
|
+ background: #fff;
|
|
|
+ color: var(--text-muted);
|
|
|
+ border-radius: 999px;
|
|
|
+ padding: 6px 14px;
|
|
|
+ font-size: 13px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ .tab:hover { border-color: #a7f3d0; color: var(--text); }
|
|
|
+ .tab.active {
|
|
|
+ border-color: var(--primary);
|
|
|
+ background: var(--primary-bg);
|
|
|
+ color: var(--primary-dark);
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+
|
|
|
+ .panel {
|
|
|
+ background: #fff;
|
|
|
+ border: 1px solid var(--border-mint);
|
|
|
+ border-radius: 10px;
|
|
|
+ overflow: hidden;
|
|
|
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
|
|
|
+ margin-bottom: 20px;
|
|
|
+ }
|
|
|
+ .panel-top {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ gap: 12px;
|
|
|
+ padding: 14px 16px;
|
|
|
+ border-bottom: 1px solid var(--border);
|
|
|
+ }
|
|
|
+ .title-bar {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 8px;
|
|
|
+ margin: 0;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+ .title-bar::before {
|
|
|
+ content: "";
|
|
|
+ width: 3px;
|
|
|
+ height: 16px;
|
|
|
+ border-radius: 2px;
|
|
|
+ background: var(--primary);
|
|
|
+ }
|
|
|
+ .hint {
|
|
|
+ font-size: 12px;
|
|
|
+ color: var(--text-muted);
|
|
|
+ }
|
|
|
+
|
|
|
+ .toolbar {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 10px;
|
|
|
+ padding: 10px 16px;
|
|
|
+ border-bottom: 1px solid var(--border);
|
|
|
+ font-size: 13px;
|
|
|
+ color: var(--text-muted);
|
|
|
+ }
|
|
|
+ .sort-badge {
|
|
|
+ display: none;
|
|
|
+ align-items: center;
|
|
|
+ gap: 6px;
|
|
|
+ padding: 2px 8px;
|
|
|
+ border-radius: 999px;
|
|
|
+ background: var(--primary-bg);
|
|
|
+ color: var(--primary-dark);
|
|
|
+ font-size: 12px;
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+ .sort-badge.show { display: inline-flex; }
|
|
|
+
|
|
|
+ table {
|
|
|
+ width: 100%;
|
|
|
+ border-collapse: collapse;
|
|
|
+ table-layout: fixed;
|
|
|
+ }
|
|
|
+ th, td {
|
|
|
+ padding: 10px 12px;
|
|
|
+ border-bottom: 1px solid var(--border);
|
|
|
+ text-align: center;
|
|
|
+ font-size: 13px;
|
|
|
+ vertical-align: middle;
|
|
|
+ }
|
|
|
+ th {
|
|
|
+ background: var(--table-head);
|
|
|
+ color: var(--text-muted);
|
|
|
+ font-weight: 600;
|
|
|
+ user-select: none;
|
|
|
+ white-space: nowrap;
|
|
|
+ }
|
|
|
+ tr:nth-child(even) td { background: #f8fafc; }
|
|
|
+ tr:hover td { background: #ecfdf5; }
|
|
|
+ td.left { text-align: left; }
|
|
|
+ .muted { color: var(--text-muted); }
|
|
|
+ .tag {
|
|
|
+ display: inline-block;
|
|
|
+ padding: 2px 8px;
|
|
|
+ border-radius: 4px;
|
|
|
+ background: #059669;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+ .tag.warn { background: #d97706; }
|
|
|
+
|
|
|
+ .col-header {
|
|
|
+ display: inline-flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ gap: 4px;
|
|
|
+ max-width: 100%;
|
|
|
+ }
|
|
|
+ .col-label {
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ }
|
|
|
+ .col-label.clickable {
|
|
|
+ cursor: pointer;
|
|
|
+ border-radius: 4px;
|
|
|
+ padding: 2px 4px;
|
|
|
+ }
|
|
|
+ .col-label.clickable:hover,
|
|
|
+ .col-label.clickable.is-sorted {
|
|
|
+ color: var(--primary-dark);
|
|
|
+ background: var(--primary-bg);
|
|
|
+ }
|
|
|
+
|
|
|
+ .icon-btn {
|
|
|
+ display: inline-flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ width: 22px;
|
|
|
+ height: 22px;
|
|
|
+ border: none;
|
|
|
+ border-radius: 4px;
|
|
|
+ background: transparent;
|
|
|
+ color: #94a3b8;
|
|
|
+ cursor: pointer;
|
|
|
+ padding: 0;
|
|
|
+ }
|
|
|
+ .icon-btn:hover { background: #e2e8f0; color: var(--text); }
|
|
|
+ .icon-btn.active {
|
|
|
+ color: var(--primary-dark);
|
|
|
+ background: var(--primary-bg);
|
|
|
+ }
|
|
|
+
|
|
|
+ .sort-pair {
|
|
|
+ display: inline-flex;
|
|
|
+ flex-direction: column;
|
|
|
+ gap: 0;
|
|
|
+ line-height: 1;
|
|
|
+ margin-left: 2px;
|
|
|
+ }
|
|
|
+ .sort-pair button {
|
|
|
+ display: block;
|
|
|
+ width: 14px;
|
|
|
+ height: 10px;
|
|
|
+ border: none;
|
|
|
+ padding: 0;
|
|
|
+ background: transparent;
|
|
|
+ color: #cbd5e1;
|
|
|
+ cursor: pointer;
|
|
|
+ font-size: 9px;
|
|
|
+ line-height: 1;
|
|
|
+ }
|
|
|
+ .sort-pair button:hover { color: var(--text-muted); }
|
|
|
+ .sort-pair button.on { color: var(--primary-dark); }
|
|
|
+
|
|
|
+ .approach-grid {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: repeat(3, 1fr);
|
|
|
+ gap: 12px;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ }
|
|
|
+ @media (max-width: 900px) {
|
|
|
+ .approach-grid { grid-template-columns: 1fr; }
|
|
|
+ }
|
|
|
+ .card {
|
|
|
+ background: #fff;
|
|
|
+ border: 1px solid var(--border-mint);
|
|
|
+ border-radius: 10px;
|
|
|
+ padding: 14px;
|
|
|
+ }
|
|
|
+ .card.rec { border-color: var(--primary); box-shadow: 0 0 0 1px #a7f3d0; }
|
|
|
+ .card h3 {
|
|
|
+ margin: 0 0 6px;
|
|
|
+ font-size: 14px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 8px;
|
|
|
+ }
|
|
|
+ .badge {
|
|
|
+ font-size: 11px;
|
|
|
+ font-weight: 600;
|
|
|
+ padding: 2px 6px;
|
|
|
+ border-radius: 999px;
|
|
|
+ background: var(--primary);
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ .card p {
|
|
|
+ margin: 0 0 12px;
|
|
|
+ font-size: 12px;
|
|
|
+ color: var(--text-muted);
|
|
|
+ }
|
|
|
+ .mock-th {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ gap: 4px;
|
|
|
+ padding: 10px;
|
|
|
+ background: var(--table-head);
|
|
|
+ border: 1px solid var(--border);
|
|
|
+ border-radius: 6px;
|
|
|
+ font-size: 13px;
|
|
|
+ font-weight: 600;
|
|
|
+ color: var(--text-muted);
|
|
|
+ }
|
|
|
+
|
|
|
+ .complexity {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: 1fr 1fr;
|
|
|
+ gap: 12px;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ }
|
|
|
+ @media (max-width: 700px) {
|
|
|
+ .complexity { grid-template-columns: 1fr; }
|
|
|
+ }
|
|
|
+ .complexity .card h3 { margin-bottom: 8px; }
|
|
|
+ .complexity ul {
|
|
|
+ margin: 0;
|
|
|
+ padding-left: 18px;
|
|
|
+ font-size: 12px;
|
|
|
+ color: var(--text-muted);
|
|
|
+ }
|
|
|
+ .complexity li { margin-bottom: 4px; }
|
|
|
+
|
|
|
+ .footer-note {
|
|
|
+ font-size: 12px;
|
|
|
+ color: var(--text-muted);
|
|
|
+ margin-top: 8px;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+ <div class="page">
|
|
|
+ <h1>CRM 日期列头排序 Demo</h1>
|
|
|
+ <p class="desc">
|
|
|
+ 在现有漏斗过滤旁增加日期列排序(正序 / 倒序)。样式对齐 Fresh Mint。
|
|
|
+ 打开本文件即可交互:点击切换排序,表格会即时重排。
|
|
|
+ </p>
|
|
|
+
|
|
|
+ <div class="callout">
|
|
|
+ <strong>工作量结论:</strong>
|
|
|
+ 只给 <code>type: 'datetime'</code> 的列加排序 —— 改公共列头组件 + 列表查询加一个排序参数,改动集中、可控。
|
|
|
+ 若所有有漏斗的列(文本/枚举/数字/日期)都加 —— 前端交互可复用,但后端几乎每个 CRM 列表接口都要做白名单排序字段,工作量大约是「日期方案」的 2~3 倍,且数字/文本排序语义更啰嗦。
|
|
|
+ <strong>建议先只做日期列。</strong>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="complexity">
|
|
|
+ <div class="card rec">
|
|
|
+ <h3>方案范围 A · 仅日期列 <span class="badge">推荐</span></h3>
|
|
|
+ <ul>
|
|
|
+ <li>前端:列头组件识别 datetime → 显示排序控件</li>
|
|
|
+ <li>后端:列表支持 <code>sortField</code> + <code>sortOrder</code>(白名单仅日期字段)</li>
|
|
|
+ <li>默认仍是 <code>create_time DESC</code>;点列头后覆盖</li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ <div class="card">
|
|
|
+ <h3>方案范围 B · 所有漏斗列</h3>
|
|
|
+ <ul>
|
|
|
+ <li>交互可做成通用,但文本/枚举排序价值一般</li>
|
|
|
+ <li>数字列还要处理空值、精度</li>
|
|
|
+ <li>每个列表 API 白名单字段更多,联调面大</li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <h2>交互样式对比(选一种即可)</h2>
|
|
|
+ <div class="approach-grid">
|
|
|
+ <div class="card rec">
|
|
|
+ <h3>样式 1 · 点击列名循环 <span class="badge">推荐</span></h3>
|
|
|
+ <p>无排序 → 升序 → 降序 → 无。漏斗只管过滤,互不干扰。</p>
|
|
|
+ <div class="mock-th">
|
|
|
+ <span style="color:var(--primary-dark);background:var(--primary-bg);padding:2px 4px;border-radius:4px;">创建时间 ↑</span>
|
|
|
+ <span class="icon-btn active" title="过滤" aria-hidden="true">
|
|
|
+ <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 3H2l8 9.46V19l4 2v-8.54L22 3z"/></svg>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="card">
|
|
|
+ <h3>样式 2 · 双三角(Element 风格)</h3>
|
|
|
+ <p>上下三角独立点选;与漏斗并排,更贴近表格库默认习惯。</p>
|
|
|
+ <div class="mock-th">
|
|
|
+ <span>创建时间</span>
|
|
|
+ <span class="sort-pair" aria-hidden="true">
|
|
|
+ <button class="on">▲</button>
|
|
|
+ <button>▼</button>
|
|
|
+ </span>
|
|
|
+ <span class="icon-btn" title="过滤">
|
|
|
+ <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 3H2l8 9.46V19l4 2v-8.54L22 3z"/></svg>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="card">
|
|
|
+ <h3>样式 3 · 放进漏斗面板</h3>
|
|
|
+ <p>排序入口藏在过滤弹层里;列头更干净,但多一步点击。</p>
|
|
|
+ <div class="mock-th">
|
|
|
+ <span>创建时间</span>
|
|
|
+ <span class="icon-btn active">
|
|
|
+ <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 3H2l8 9.46V19l4 2v-8.54L22 3z"/></svg>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="tabs" role="tablist" aria-label="交互样式">
|
|
|
+ <button type="button" class="tab active" data-mode="cycle">试用样式 1 · 点击列名</button>
|
|
|
+ <button type="button" class="tab" data-mode="carets">试用样式 2 · 双三角</button>
|
|
|
+ <button type="button" class="tab" data-mode="popover">试用样式 3 · 漏斗内排序</button>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="panel">
|
|
|
+ <div class="panel-top">
|
|
|
+ <h2 class="title-bar">客户列表(示意)</h2>
|
|
|
+ <span class="hint" id="modeHint">日期列:点击列名循环 无 → 升序 → 降序</span>
|
|
|
+ </div>
|
|
|
+ <div class="toolbar">
|
|
|
+ <span>已选 0 项</span>
|
|
|
+ <span class="sort-badge" id="sortBadge"></span>
|
|
|
+ <span style="margin-left:auto" class="hint">非日期列仅有漏斗,无排序</span>
|
|
|
+ </div>
|
|
|
+ <table>
|
|
|
+ <thead>
|
|
|
+ <tr>
|
|
|
+ <th style="width:18%">
|
|
|
+ <div class="col-header">
|
|
|
+ <span class="col-label">客户名称</span>
|
|
|
+ <button type="button" class="icon-btn" title="过滤(示意)" tabindex="-1">
|
|
|
+ <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 3H2l8 9.46V19l4 2v-8.54L22 3z"/></svg>
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ </th>
|
|
|
+ <th style="width:12%">
|
|
|
+ <div class="col-header">
|
|
|
+ <span class="col-label">状态</span>
|
|
|
+ <button type="button" class="icon-btn" title="过滤(示意)" tabindex="-1">
|
|
|
+ <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 3H2l8 9.46V19l4 2v-8.54L22 3z"/></svg>
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ </th>
|
|
|
+ <th style="width:18%" data-date-col="lastTime">
|
|
|
+ <div class="col-header" id="hdr-lastTime"></div>
|
|
|
+ </th>
|
|
|
+ <th style="width:18%" data-date-col="dealTime">
|
|
|
+ <div class="col-header" id="hdr-dealTime"></div>
|
|
|
+ </th>
|
|
|
+ <th style="width:18%" data-date-col="createTime">
|
|
|
+ <div class="col-header" id="hdr-createTime"></div>
|
|
|
+ </th>
|
|
|
+ <th style="width:16%">
|
|
|
+ <div class="col-header">
|
|
|
+ <span class="col-label">负责人</span>
|
|
|
+ <button type="button" class="icon-btn" title="过滤(示意)" tabindex="-1">
|
|
|
+ <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 3H2l8 9.46V19l4 2v-8.54L22 3z"/></svg>
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ </th>
|
|
|
+ </tr>
|
|
|
+ </thead>
|
|
|
+ <tbody id="tbody"></tbody>
|
|
|
+ </table>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <p class="footer-note">
|
|
|
+ 说明:同一时刻只允许一列排序(点另一日期列会替换当前排序)。清空排序后恢复默认「创建时间倒序」展示(与现网列表默认一致)。
|
|
|
+ 文件路径:<code>docs/crm-date-column-sort-demo.html</code>
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <script>
|
|
|
+ const FILTER_SVG =
|
|
|
+ '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 3H2l8 9.46V19l4 2v-8.54L22 3z"/></svg>'
|
|
|
+
|
|
|
+ const DATE_COLS = [
|
|
|
+ { prop: 'lastTime', label: '最后跟进时间' },
|
|
|
+ { prop: 'dealTime', label: '成交时间' },
|
|
|
+ { prop: 'createTime', label: '创建时间' }
|
|
|
+ ]
|
|
|
+
|
|
|
+ const LABEL = {
|
|
|
+ lastTime: '最后跟进时间',
|
|
|
+ dealTime: '成交时间',
|
|
|
+ createTime: '创建时间'
|
|
|
+ }
|
|
|
+
|
|
|
+ let mode = 'cycle' // cycle | carets | popover
|
|
|
+ /** @type {{ prop: string, order: 'asc' | 'desc' } | null} */
|
|
|
+ let sort = null
|
|
|
+
|
|
|
+ const rows = [
|
|
|
+ { name: '杭州绿源新材料', status: '跟进中', lastTime: '2026-09-01 10:20', dealTime: '', createTime: '2026-03-12 09:10', owner: '张三' },
|
|
|
+ { name: '宁波海天化工', status: '已成交', lastTime: '2026-08-28 16:40', dealTime: '2026-07-02 11:00', createTime: '2025-11-08 14:22', owner: '李四' },
|
|
|
+ { name: '嘉兴宏达科技', status: '跟进中', lastTime: '2026-09-06 09:05', dealTime: '', createTime: '2026-01-20 08:30', owner: '王五' },
|
|
|
+ { name: '绍兴蓝海贸易', status: '已成交', lastTime: '2026-07-15 13:18', dealTime: '2026-06-18 15:40', createTime: '2025-09-30 17:55', owner: '赵六' },
|
|
|
+ { name: '温州精工实业', status: '跟进中', lastTime: '2026-09-08 11:32', dealTime: '', createTime: '2026-05-03 10:00', owner: '张三' },
|
|
|
+ { name: '湖州安泰材料', status: '已成交', lastTime: '2026-08-02 09:48', dealTime: '2026-08-01 16:20', createTime: '2026-02-14 13:45', owner: '钱七' }
|
|
|
+ ]
|
|
|
+
|
|
|
+ function parseTs(v) {
|
|
|
+ if (!v) return Number.NEGATIVE_INFINITY
|
|
|
+ return Date.parse(String(v).replace(/-/g, '/')) || 0
|
|
|
+ }
|
|
|
+
|
|
|
+ function sortedRows() {
|
|
|
+ const data = rows.slice()
|
|
|
+ if (!sort) {
|
|
|
+ data.sort((a, b) => parseTs(b.createTime) - parseTs(a.createTime))
|
|
|
+ return data
|
|
|
+ }
|
|
|
+ const { prop, order } = sort
|
|
|
+ data.sort((a, b) => {
|
|
|
+ const av = parseTs(a[prop])
|
|
|
+ const bv = parseTs(b[prop])
|
|
|
+ // 空日期沉底
|
|
|
+ const aEmpty = !a[prop]
|
|
|
+ const bEmpty = !b[prop]
|
|
|
+ if (aEmpty && bEmpty) return 0
|
|
|
+ if (aEmpty) return 1
|
|
|
+ if (bEmpty) return -1
|
|
|
+ return order === 'asc' ? av - bv : bv - av
|
|
|
+ })
|
|
|
+ return data
|
|
|
+ }
|
|
|
+
|
|
|
+ function cycleSort(prop) {
|
|
|
+ if (!sort || sort.prop !== prop) {
|
|
|
+ sort = { prop, order: 'asc' }
|
|
|
+ } else if (sort.order === 'asc') {
|
|
|
+ sort = { prop, order: 'desc' }
|
|
|
+ } else {
|
|
|
+ sort = null
|
|
|
+ }
|
|
|
+ render()
|
|
|
+ }
|
|
|
+
|
|
|
+ function setSort(prop, order) {
|
|
|
+ if (sort && sort.prop === prop && sort.order === order) {
|
|
|
+ sort = null
|
|
|
+ } else {
|
|
|
+ sort = { prop, order }
|
|
|
+ }
|
|
|
+ render()
|
|
|
+ }
|
|
|
+
|
|
|
+ function arrowText(prop) {
|
|
|
+ if (!sort || sort.prop !== prop) return ''
|
|
|
+ return sort.order === 'asc' ? ' ↑' : ' ↓'
|
|
|
+ }
|
|
|
+
|
|
|
+ function filterBtn(prop) {
|
|
|
+ const active = mode === 'popover' && sort && sort.prop === prop
|
|
|
+ return `<button type="button" class="icon-btn${active ? ' active' : ''}" data-filter="${prop}" title="过滤">${FILTER_SVG}</button>`
|
|
|
+ }
|
|
|
+
|
|
|
+ function renderHeader(prop, label) {
|
|
|
+ const el = document.getElementById('hdr-' + prop)
|
|
|
+ if (!el) return
|
|
|
+ const isSorted = sort && sort.prop === prop
|
|
|
+
|
|
|
+ if (mode === 'cycle') {
|
|
|
+ el.innerHTML = `
|
|
|
+ <span class="col-label clickable${isSorted ? ' is-sorted' : ''}" data-cycle="${prop}" title="点击切换排序">${label}${arrowText(prop)}</span>
|
|
|
+ ${filterBtn(prop)}
|
|
|
+ `
|
|
|
+ } else if (mode === 'carets') {
|
|
|
+ const ascOn = isSorted && sort.order === 'asc'
|
|
|
+ const descOn = isSorted && sort.order === 'desc'
|
|
|
+ el.innerHTML = `
|
|
|
+ <span class="col-label">${label}</span>
|
|
|
+ <span class="sort-pair">
|
|
|
+ <button type="button" class="${ascOn ? 'on' : ''}" data-caret="${prop}" data-order="asc" title="升序">▲</button>
|
|
|
+ <button type="button" class="${descOn ? 'on' : ''}" data-caret="${prop}" data-order="desc" title="降序">▼</button>
|
|
|
+ </span>
|
|
|
+ ${filterBtn(prop)}
|
|
|
+ `
|
|
|
+ } else {
|
|
|
+ el.innerHTML = `
|
|
|
+ <span class="col-label">${label}</span>
|
|
|
+ ${filterBtn(prop)}
|
|
|
+ `
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ function renderBody() {
|
|
|
+ const tbody = document.getElementById('tbody')
|
|
|
+ tbody.innerHTML = sortedRows()
|
|
|
+ .map(
|
|
|
+ (r) => `
|
|
|
+ <tr>
|
|
|
+ <td class="left">${r.name}</td>
|
|
|
+ <td><span class="tag${r.status === '跟进中' ? ' warn' : ''}">${r.status}</span></td>
|
|
|
+ <td>${r.lastTime || '<span class="muted">—</span>'}</td>
|
|
|
+ <td>${r.dealTime || '<span class="muted">—</span>'}</td>
|
|
|
+ <td>${r.createTime}</td>
|
|
|
+ <td>${r.owner}</td>
|
|
|
+ </tr>`
|
|
|
+ )
|
|
|
+ .join('')
|
|
|
+ }
|
|
|
+
|
|
|
+ function renderBadge() {
|
|
|
+ const badge = document.getElementById('sortBadge')
|
|
|
+ if (!sort) {
|
|
|
+ badge.classList.remove('show')
|
|
|
+ badge.textContent = ''
|
|
|
+ return
|
|
|
+ }
|
|
|
+ badge.classList.add('show')
|
|
|
+ badge.textContent = `排序:${LABEL[sort.prop]} · ${sort.order === 'asc' ? '正序(升序)' : '倒序(降序)'}`
|
|
|
+ }
|
|
|
+
|
|
|
+ function render() {
|
|
|
+ DATE_COLS.forEach((c) => renderHeader(c.prop, c.label))
|
|
|
+ renderBody()
|
|
|
+ renderBadge()
|
|
|
+ }
|
|
|
+
|
|
|
+ document.querySelector('.tabs').addEventListener('click', (e) => {
|
|
|
+ const btn = e.target.closest('.tab')
|
|
|
+ if (!btn) return
|
|
|
+ document.querySelectorAll('.tab').forEach((t) => t.classList.remove('active'))
|
|
|
+ btn.classList.add('active')
|
|
|
+ mode = btn.dataset.mode
|
|
|
+ const hints = {
|
|
|
+ cycle: '日期列:点击列名循环 无 → 升序 → 降序',
|
|
|
+ carets: '日期列:点上下三角切换升/降序;再点同一方向可取消',
|
|
|
+ popover: '日期列:点漏斗打开面板,在面板里选正序/倒序(本 Demo 简化为直接切换)'
|
|
|
+ }
|
|
|
+ document.getElementById('modeHint').textContent = hints[mode]
|
|
|
+ render()
|
|
|
+ })
|
|
|
+
|
|
|
+ document.querySelector('thead').addEventListener('click', (e) => {
|
|
|
+ const cycle = e.target.closest('[data-cycle]')
|
|
|
+ if (cycle) {
|
|
|
+ cycleSort(cycle.dataset.cycle)
|
|
|
+ return
|
|
|
+ }
|
|
|
+ const caret = e.target.closest('[data-caret]')
|
|
|
+ if (caret) {
|
|
|
+ setSort(caret.dataset.caret, caret.dataset.order)
|
|
|
+ return
|
|
|
+ }
|
|
|
+ const filter = e.target.closest('[data-filter]')
|
|
|
+ if (filter && mode === 'popover') {
|
|
|
+ const prop = filter.dataset.filter
|
|
|
+ const choice = window.prompt(
|
|
|
+ `${LABEL[prop]} 排序\n输入 asc=正序 / desc=倒序 / clear=清除`,
|
|
|
+ sort && sort.prop === prop ? sort.order : 'desc'
|
|
|
+ )
|
|
|
+ if (choice == null) return
|
|
|
+ const v = String(choice).trim().toLowerCase()
|
|
|
+ if (v === 'clear' || v === '') {
|
|
|
+ sort = null
|
|
|
+ } else if (v === 'asc' || v === 'desc') {
|
|
|
+ sort = { prop, order: v }
|
|
|
+ }
|
|
|
+ render()
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ render()
|
|
|
+ </script>
|
|
|
+</body>
|
|
|
+</html>
|