Files
zkxw/docs/mockups/oa-or-and-sign-progress-display-demo.html
T
zlwuandCursor 569a13a3ea docs(oa): 明确或签/会签在审批进度与 PDF 中的展示规则
统一为纯文本行「姓名 意见 时间」;或签免处理人仍灰显列出;附 HTML Demo 供对照。

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-07-23 14:05:36 +08:00

826 lines
29 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" />
<title>或签 / 会签 · 审批进度 &amp; PDF 展示 Demo</title>
<style>
:root {
--primary: #10b981;
--primary-dark: #059669;
--primary-bg: #ecfdf5;
--text: #0f172a;
--text-2: #334155;
--muted: #94a3b8;
--border: #e2e8f0;
--bg: #f1f5f9;
--warn: #d97706;
--warn-bg: #fff7ed;
--and: #2563eb;
--and-bg: #eff6ff;
--radius: 10px;
}
* { box-sizing: border-box; }
body {
margin: 0;
min-height: 100vh;
font: 14px/1.5 Inter, system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
color: var(--text);
background: linear-gradient(180deg, #eefcf6 0%, var(--bg) 160px) fixed;
}
.page {
max-width: 1100px;
margin: 0 auto;
padding: 24px 20px 80px;
}
.hero {
margin-bottom: 20px;
padding: 16px 18px;
background: #fff;
border: 1px solid var(--border);
border-radius: var(--radius);
}
.hero h1 {
margin: 0 0 6px;
font-size: 18px;
font-weight: 700;
color: var(--primary-dark);
}
.hero p {
margin: 0;
color: var(--text-2);
font-size: 13px;
line-height: 1.55;
}
.hero .rules {
display: grid;
gap: 8px;
margin-top: 12px;
padding: 10px 12px;
background: #f8fafc;
border-radius: 8px;
border: 1px dashed var(--border);
font-size: 12px;
color: var(--text-2);
}
.hero .rules b { color: var(--text); }
.hero .fmt {
margin-top: 10px;
padding: 8px 10px;
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 12px;
line-height: 1.6;
color: var(--text);
background: #ecfdf5;
border-radius: 6px;
white-space: pre-wrap;
}
.tabs {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 16px;
}
.tab {
border: 1px solid var(--border);
background: #fff;
border-radius: 8px;
padding: 8px 14px;
font: inherit;
font-size: 13px;
cursor: pointer;
color: var(--text-2);
}
.tab:hover { border-color: #a7f3d0; }
.tab.is-on {
color: var(--primary-dark);
background: var(--primary-bg);
border-color: #6ee7b7;
font-weight: 600;
}
.panel { display: none; }
.panel.is-on { display: block; }
.grid-2 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
@media (max-width: 900px) {
.grid-2 { grid-template-columns: 1fr; }
}
.block {
background: #fff;
border: 1px solid var(--border);
border-radius: var(--radius);
overflow: hidden;
}
.block__hd {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 10px 14px;
border-bottom: 1px solid var(--border);
background: #f8fafc;
font-size: 13px;
font-weight: 600;
}
.block__hd .sub {
font-weight: 400;
color: var(--muted);
font-size: 12px;
}
.block__bd { padding: 12px 14px 14px; }
.note {
margin: 0 0 12px;
padding: 8px 10px;
font-size: 12px;
line-height: 1.5;
color: var(--text-2);
background: #f8fafc;
border-left: 3px solid var(--primary);
border-radius: 0 6px 6px 0;
}
/* —— 审批进度 —— */
.oa-flow-preview {
margin: 0;
padding: 12px;
background: #f8fafc;
border: 1px solid var(--border);
border-radius: 10px;
}
.oa-flow-preview__title {
margin-bottom: 10px;
color: var(--text-2);
font-size: 13px;
font-weight: 600;
}
.oa-flow-step {
display: flex;
gap: 8px;
align-items: stretch;
}
.oa-flow-rail {
display: flex;
flex-direction: column;
align-items: center;
width: 16px;
flex-shrink: 0;
}
.oa-flow-dot {
width: 10px;
height: 10px;
margin-top: 12px;
background: #94a3b8;
border-radius: 50%;
box-shadow: 0 0 0 3px #e2e8f0;
flex-shrink: 0;
}
.oa-flow-dot.ok {
background: var(--primary);
box-shadow: 0 0 0 3px var(--primary-bg);
}
.oa-flow-dot.pending {
background: var(--warn);
box-shadow: 0 0 0 3px var(--warn-bg);
}
.oa-flow-line {
width: 2px;
flex: 1;
min-height: 10px;
margin: 4px 0;
background: #e2e8f0;
}
.oa-flow-card {
flex: 1;
min-width: 0;
margin-bottom: 6px;
padding: 9px 12px;
background: #fff;
border: 1px solid var(--border);
border-radius: 6px;
}
.oa-flow-card__row {
display: flex;
flex-wrap: wrap;
gap: 6px 8px;
align-items: center;
}
.oa-flow-card__name {
color: var(--text);
font-size: 12px;
font-weight: 600;
}
.oa-flow-badge {
padding: 0 5px;
font-size: 10px;
font-weight: 500;
line-height: 16px;
border-radius: 4px;
}
.oa-flow-badge.or { color: var(--warn); background: var(--warn-bg); }
.oa-flow-badge.and { color: var(--and); background: var(--and-bg); }
.oa-flow-badge.ok { color: var(--primary-dark); background: var(--primary-bg); }
.oa-flow-card__meta { color: var(--muted); font-size: 11px; }
.oa-flow-card__sep { color: #cbd5e1; font-size: 11px; }
.oa-flow-card__people {
display: inline-flex;
flex: 1 1 140px;
flex-wrap: wrap;
gap: 4px;
align-items: center;
justify-content: flex-end;
margin-left: auto;
}
.oa-person-chip {
display: inline-flex;
gap: 3px;
align-items: center;
padding: 1px 6px 1px 2px;
color: var(--text-2);
font-size: 11px;
background: #f1f5f9;
border-radius: 999px;
white-space: nowrap;
}
.oa-person-chip__dot {
display: grid;
place-items: center;
width: 16px;
height: 16px;
color: #fff;
font-size: 9px;
font-weight: 700;
background: #94a3b8;
border-radius: 50%;
}
.oa-person-chip.is-ok {
color: var(--primary-dark);
background: var(--primary-bg);
font-weight: 600;
box-shadow: 0 0 0 1px #a7f3d0;
}
.oa-person-chip.is-ok .oa-person-chip__dot { background: var(--primary); }
.oa-person-chip.is-pending {
color: var(--warn);
background: var(--warn-bg);
}
.oa-person-chip.is-pending .oa-person-chip__dot { background: var(--warn); }
.oa-person-chip.is-mute {
color: #94a3b8;
background: #f8fafc;
opacity: 0.72;
}
.oa-person-chip.is-mute .oa-person-chip__dot { background: #cbd5e1; }
.oa-person-chip__st {
margin-left: 2px;
font-size: 10px;
opacity: 0.85;
}
/* 纯文本行:姓名 意见 时间 */
.person-lines {
margin-top: 8px;
display: grid;
gap: 4px;
}
.person-line {
margin: 0;
padding: 0;
color: var(--text-2);
font-size: 12px;
line-height: 1.55;
word-break: break-word;
}
.person-line.is-ok {
color: var(--primary-dark);
font-weight: 500;
}
.person-line.is-pending {
color: var(--warn);
}
.person-line.is-mute {
color: var(--muted);
}
/* —— PDF —— */
.pdf-sheet {
background: #fff;
border: 1px solid #94a3b8;
font-size: 12px;
color: #0f172a;
}
.pdf-sheet__title {
padding: 10px 12px;
text-align: center;
font-size: 15px;
font-weight: 700;
border-bottom: 1px solid #94a3b8;
}
.pdf-flow-table {
width: 100%;
border-collapse: collapse;
}
.pdf-flow-table th,
.pdf-flow-table td {
border: 1px solid #94a3b8;
padding: 8px 10px;
vertical-align: top;
text-align: left;
}
.pdf-flow-table th {
width: 88px;
background: #f8fafc;
font-weight: 600;
text-align: center;
vertical-align: middle;
}
.pdf-node-title {
font-weight: 600;
margin-bottom: 6px;
}
.pdf-person-lines {
display: grid;
gap: 3px;
}
.pdf-person-line {
margin: 0;
line-height: 1.55;
word-break: break-word;
}
.pdf-person-line.is-active {
font-weight: 600;
color: #059669;
}
.pdf-person-line.is-mute {
color: #94a3b8;
}
.pdf-meta {
margin-top: 4px;
color: #64748b;
font-size: 11px;
}
.legend {
margin-top: 14px;
padding: 10px 12px;
background: #fff;
border: 1px solid var(--border);
border-radius: 8px;
font-size: 12px;
color: var(--text-2);
}
.legend strong { color: var(--text); }
.legend ul { margin: 6px 0 0; padding-left: 18px; }
</style>
</head>
<body>
<div class="page">
<div class="hero">
<h1>或签 / 会签 · 审批进度 &amp; PDF「审批流程」展示 Demo</h1>
<p>
同节点多人合并为一张节点卡;明细不用表格,统一为纯文本行。
</p>
<div class="fmt">张三 同意 2026-07-23 09:10:10
李四 同意123123 2026-07-23 09:12:10</div>
<div class="rules">
<div><b>或签</b>:未批时展示全部可审批人;一人审批后高亮该人(含意见行),其余人灰显不高亮。</div>
<div><b>会签</b>:始终每人一行「姓名 意见 时间」;未批可用「待处理」占位。</div>
</div>
</div>
<div class="tabs" role="tablist">
<button type="button" class="tab is-on" data-tab="or-pending">① 或签 · 未审批</button>
<button type="button" class="tab" data-tab="or-done">② 或签 · 一人已批</button>
<button type="button" class="tab" data-tab="and-pending">③ 会签 · 未审批</button>
<button type="button" class="tab" data-tab="and-partial">④ 会签 · 部分已批</button>
<button type="button" class="tab" data-tab="and-done">⑤ 会签 · 全部完成</button>
</div>
<!-- ① -->
<section class="panel is-on" id="panel-or-pending">
<p class="note">或签未批:节点卡上 chip 展示全部待处理人;尚无意见行(或可写「甲 待处理」等占位,见会签未批)。</p>
<div class="grid-2">
<div class="block">
<div class="block__hd">界面 · 审批进度 <span class="sub">OaProgressChain</span></div>
<div class="block__bd">
<div class="oa-flow-preview">
<div class="oa-flow-preview__title"><span>审批进度</span></div>
<div class="oa-flow-step">
<div class="oa-flow-rail"><div class="oa-flow-dot ok"></div><div class="oa-flow-line"></div></div>
<div class="oa-flow-card">
<div class="oa-flow-card__row">
<span class="oa-flow-card__name">发起人</span>
<span class="oa-flow-badge ok">已提交</span>
<span class="oa-flow-card__sep">·</span>
<span class="oa-flow-card__meta">2026-07-23 09:00:00</span>
<span class="oa-flow-card__people">
<span class="oa-person-chip is-ok"><span class="oa-person-chip__dot">张</span>张三</span>
</span>
</div>
</div>
</div>
<div class="oa-flow-step">
<div class="oa-flow-rail"><div class="oa-flow-dot pending"></div></div>
<div class="oa-flow-card">
<div class="oa-flow-card__row">
<span class="oa-flow-card__name">部门审批</span>
<span class="oa-flow-badge or">或签</span>
<span class="oa-flow-badge or">进行中</span>
<span class="oa-flow-card__people">
<span class="oa-person-chip is-pending"><span class="oa-person-chip__dot">甲</span>甲<span class="oa-person-chip__st">待处理</span></span>
<span class="oa-person-chip is-pending"><span class="oa-person-chip__dot">乙</span>乙<span class="oa-person-chip__st">待处理</span></span>
<span class="oa-person-chip is-pending"><span class="oa-person-chip__dot">丙</span>丙<span class="oa-person-chip__st">待处理</span></span>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="block">
<div class="block__hd">打印 PDF · 审批流程</div>
<div class="block__bd">
<div class="pdf-sheet">
<div class="pdf-sheet__title">请假审批</div>
<table class="pdf-flow-table">
<tr>
<th rowspan="2">审批流程</th>
<td>
<div class="pdf-node-title">【发起人】 张三 已提交</div>
<div class="pdf-meta">2026-07-23 09:00:00</div>
</td>
</tr>
<tr>
<td>
<div class="pdf-node-title">【部门审批·或签】 进行中</div>
<div class="pdf-person-lines">
<p class="pdf-person-line">甲 待处理</p>
<p class="pdf-person-line">乙 待处理</p>
<p class="pdf-person-line">丙 待处理</p>
</div>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</section>
<!-- ② -->
<section class="panel" id="panel-or-done">
<p class="note">甲已同意:高亮甲 + 一行「甲 同意,材料齐全 时间」;乙丙灰显「无需处理」。</p>
<div class="grid-2">
<div class="block">
<div class="block__hd">界面 · 审批进度</div>
<div class="block__bd">
<div class="oa-flow-preview">
<div class="oa-flow-preview__title"><span>审批进度</span></div>
<div class="oa-flow-step">
<div class="oa-flow-rail"><div class="oa-flow-dot ok"></div><div class="oa-flow-line"></div></div>
<div class="oa-flow-card">
<div class="oa-flow-card__row">
<span class="oa-flow-card__name">发起人</span>
<span class="oa-flow-badge ok">已提交</span>
<span class="oa-flow-card__people">
<span class="oa-person-chip is-ok"><span class="oa-person-chip__dot">张</span>张三</span>
</span>
</div>
</div>
</div>
<div class="oa-flow-step">
<div class="oa-flow-rail"><div class="oa-flow-dot ok"></div><div class="oa-flow-line"></div></div>
<div class="oa-flow-card">
<div class="oa-flow-card__row">
<span class="oa-flow-card__name">部门审批</span>
<span class="oa-flow-badge or">或签</span>
<span class="oa-flow-badge ok">已同意</span>
<span class="oa-flow-card__people">
<span class="oa-person-chip is-ok"><span class="oa-person-chip__dot">甲</span>甲<span class="oa-person-chip__st">已同意</span></span>
<span class="oa-person-chip is-mute"><span class="oa-person-chip__dot">乙</span>乙<span class="oa-person-chip__st">无需处理</span></span>
<span class="oa-person-chip is-mute"><span class="oa-person-chip__dot">丙</span>丙<span class="oa-person-chip__st">无需处理</span></span>
</span>
</div>
<div class="person-lines">
<p class="person-line is-ok">甲 同意,材料齐全 2026-07-23 10:05:00</p>
<p class="person-line is-mute">乙 无需处理</p>
<p class="person-line is-mute">丙 无需处理</p>
</div>
</div>
</div>
<div class="oa-flow-step">
<div class="oa-flow-rail"><div class="oa-flow-dot ok"></div></div>
<div class="oa-flow-card">
<div class="oa-flow-card__row">
<span class="oa-flow-card__name">流程结束</span>
<span class="oa-flow-badge ok">已结束</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="block">
<div class="block__hd">打印 PDF · 审批流程</div>
<div class="block__bd">
<div class="pdf-sheet">
<div class="pdf-sheet__title">请假审批</div>
<table class="pdf-flow-table">
<tr>
<th rowspan="3">审批流程</th>
<td>
<div class="pdf-node-title">【发起人】 张三 已提交</div>
<div class="pdf-meta">2026-07-23 09:00:00</div>
</td>
</tr>
<tr>
<td>
<div class="pdf-node-title">【部门审批·或签】 已同意</div>
<div class="pdf-person-lines">
<p class="pdf-person-line is-active">甲 同意,材料齐全 2026-07-23 10:05:00</p>
<p class="pdf-person-line is-mute">乙 无需处理</p>
<p class="pdf-person-line is-mute">丙 无需处理</p>
</div>
</td>
</tr>
<tr>
<td>
<div class="pdf-node-title">流程结束</div>
<div class="pdf-meta">2026-07-23 10:05:00</div>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</section>
<!-- ③ -->
<section class="panel" id="panel-and-pending">
<p class="note">会签未批:每人一行占位「姓名 待处理」。</p>
<div class="grid-2">
<div class="block">
<div class="block__hd">界面 · 审批进度</div>
<div class="block__bd">
<div class="oa-flow-preview">
<div class="oa-flow-preview__title"><span>审批进度</span></div>
<div class="oa-flow-step">
<div class="oa-flow-rail"><div class="oa-flow-dot ok"></div><div class="oa-flow-line"></div></div>
<div class="oa-flow-card">
<div class="oa-flow-card__row">
<span class="oa-flow-card__name">发起人</span>
<span class="oa-flow-badge ok">已提交</span>
<span class="oa-flow-card__people">
<span class="oa-person-chip is-ok"><span class="oa-person-chip__dot">张</span>张三</span>
</span>
</div>
</div>
</div>
<div class="oa-flow-step">
<div class="oa-flow-rail"><div class="oa-flow-dot pending"></div></div>
<div class="oa-flow-card">
<div class="oa-flow-card__row">
<span class="oa-flow-card__name">部门审批</span>
<span class="oa-flow-badge and">会签</span>
<span class="oa-flow-badge or">进行中</span>
</div>
<div class="person-lines">
<p class="person-line is-pending">甲 待处理</p>
<p class="person-line is-pending">乙 待处理</p>
<p class="person-line is-pending">丙 待处理</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="block">
<div class="block__hd">打印 PDF · 审批流程</div>
<div class="block__bd">
<div class="pdf-sheet">
<div class="pdf-sheet__title">请假审批</div>
<table class="pdf-flow-table">
<tr>
<th rowspan="2">审批流程</th>
<td>
<div class="pdf-node-title">【发起人】 张三 已提交</div>
<div class="pdf-meta">2026-07-23 09:00:00</div>
</td>
</tr>
<tr>
<td>
<div class="pdf-node-title">【部门审批·会签】 进行中</div>
<div class="pdf-person-lines">
<p class="pdf-person-line">甲 待处理</p>
<p class="pdf-person-line">乙 待处理</p>
<p class="pdf-person-line">丙 待处理</p>
</div>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</section>
<!-- ④ -->
<section class="panel" id="panel-and-partial">
<p class="note">会签部分完成:已批写「姓名 意见 时间」;未批仍写「姓名 待处理」。</p>
<div class="grid-2">
<div class="block">
<div class="block__hd">界面 · 审批进度</div>
<div class="block__bd">
<div class="oa-flow-preview">
<div class="oa-flow-preview__title"><span>审批进度</span></div>
<div class="oa-flow-step">
<div class="oa-flow-rail"><div class="oa-flow-dot ok"></div><div class="oa-flow-line"></div></div>
<div class="oa-flow-card">
<div class="oa-flow-card__row">
<span class="oa-flow-card__name">发起人</span>
<span class="oa-flow-badge ok">已提交</span>
<span class="oa-flow-card__people">
<span class="oa-person-chip is-ok"><span class="oa-person-chip__dot">张</span>张三</span>
</span>
</div>
</div>
</div>
<div class="oa-flow-step">
<div class="oa-flow-rail"><div class="oa-flow-dot pending"></div></div>
<div class="oa-flow-card">
<div class="oa-flow-card__row">
<span class="oa-flow-card__name">部门审批</span>
<span class="oa-flow-badge and">会签</span>
<span class="oa-flow-badge or">进行中</span>
<span class="oa-flow-card__sep">·</span>
<span class="oa-flow-card__meta">2/3 已处理</span>
</div>
<div class="person-lines">
<p class="person-line is-ok">甲 同意 2026-07-23 10:01:00</p>
<p class="person-line is-ok">乙 无异议 2026-07-23 10:20:00</p>
<p class="person-line is-pending">丙 待处理</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="block">
<div class="block__hd">打印 PDF · 审批流程</div>
<div class="block__bd">
<div class="pdf-sheet">
<div class="pdf-sheet__title">请假审批</div>
<table class="pdf-flow-table">
<tr>
<th rowspan="2">审批流程</th>
<td>
<div class="pdf-node-title">【发起人】 张三 已提交</div>
<div class="pdf-meta">2026-07-23 09:00:00</div>
</td>
</tr>
<tr>
<td>
<div class="pdf-node-title">【部门审批·会签】 进行中(2/3)</div>
<div class="pdf-person-lines">
<p class="pdf-person-line is-active">甲 同意 2026-07-23 10:01:00</p>
<p class="pdf-person-line is-active">乙 无异议 2026-07-23 10:20:00</p>
<p class="pdf-person-line">丙 待处理</p>
</div>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</section>
<!-- ⑤ -->
<section class="panel" id="panel-and-done">
<p class="note">会签完成:每人一行「姓名 意见 时间」,界面与 PDF 一致。</p>
<div class="grid-2">
<div class="block">
<div class="block__hd">界面 · 审批进度</div>
<div class="block__bd">
<div class="oa-flow-preview">
<div class="oa-flow-preview__title"><span>审批进度</span></div>
<div class="oa-flow-step">
<div class="oa-flow-rail"><div class="oa-flow-dot ok"></div><div class="oa-flow-line"></div></div>
<div class="oa-flow-card">
<div class="oa-flow-card__row">
<span class="oa-flow-card__name">发起人</span>
<span class="oa-flow-badge ok">已提交</span>
<span class="oa-flow-card__people">
<span class="oa-person-chip is-ok"><span class="oa-person-chip__dot">张</span>张三</span>
</span>
</div>
</div>
</div>
<div class="oa-flow-step">
<div class="oa-flow-rail"><div class="oa-flow-dot ok"></div><div class="oa-flow-line"></div></div>
<div class="oa-flow-card">
<div class="oa-flow-card__row">
<span class="oa-flow-card__name">部门审批</span>
<span class="oa-flow-badge and">会签</span>
<span class="oa-flow-badge ok">已同意</span>
</div>
<div class="person-lines">
<p class="person-line is-ok">甲 同意 2026-07-23 10:01:00</p>
<p class="person-line is-ok">乙 无异议 2026-07-23 10:20:00</p>
<p class="person-line is-ok">丙 批准 2026-07-23 11:00:00</p>
</div>
</div>
</div>
<div class="oa-flow-step">
<div class="oa-flow-rail"><div class="oa-flow-dot ok"></div></div>
<div class="oa-flow-card">
<div class="oa-flow-card__row">
<span class="oa-flow-card__name">流程结束</span>
<span class="oa-flow-badge ok">已结束</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="block">
<div class="block__hd">打印 PDF · 审批流程</div>
<div class="block__bd">
<div class="pdf-sheet">
<div class="pdf-sheet__title">请假审批</div>
<table class="pdf-flow-table">
<tr>
<th rowspan="3">审批流程</th>
<td>
<div class="pdf-node-title">【发起人】 张三 已提交</div>
<div class="pdf-meta">2026-07-23 09:00:00</div>
</td>
</tr>
<tr>
<td>
<div class="pdf-node-title">【部门审批·会签】 已同意</div>
<div class="pdf-person-lines">
<p class="pdf-person-line is-active">甲 同意 2026-07-23 10:01:00</p>
<p class="pdf-person-line is-active">乙 无异议 2026-07-23 10:20:00</p>
<p class="pdf-person-line is-active">丙 批准 2026-07-23 11:00:00</p>
</div>
</td>
</tr>
<tr>
<td>
<div class="pdf-node-title">流程结束</div>
<div class="pdf-meta">2026-07-23 11:00:00</div>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</section>
<div class="legend">
<strong>统一行格式</strong>
<ul>
<li>已处理:<code>姓名 审批意见 审批时间</code>(空格分隔,一行一人)</li>
<li>未处理:<code>姓名 待处理</code></li>
<li>或签免处理:<code>姓名 无需处理</code>(灰显,不高亮)</li>
<li>不用表头、不用三列表格。</li>
</ul>
</div>
</div>
<script>
const tabs = document.querySelectorAll('.tab')
const panels = {
'or-pending': document.getElementById('panel-or-pending'),
'or-done': document.getElementById('panel-or-done'),
'and-pending': document.getElementById('panel-and-pending'),
'and-partial': document.getElementById('panel-and-partial'),
'and-done': document.getElementById('panel-and-done')
}
tabs.forEach((btn) => {
btn.addEventListener('click', () => {
tabs.forEach((t) => t.classList.remove('is-on'))
btn.classList.add('is-on')
Object.values(panels).forEach((p) => p.classList.remove('is-on'))
panels[btn.dataset.tab].classList.add('is-on')
})
})
</script>
</body>
</html>