oa-or-and-sign-progress-display-demo.html 29 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta name="viewport" content="width=device-width, initial-scale=1" />
  6. <title>或签 / 会签 · 审批进度 &amp; PDF 展示 Demo</title>
  7. <style>
  8. :root {
  9. --primary: #10b981;
  10. --primary-dark: #059669;
  11. --primary-bg: #ecfdf5;
  12. --text: #0f172a;
  13. --text-2: #334155;
  14. --muted: #94a3b8;
  15. --border: #e2e8f0;
  16. --bg: #f1f5f9;
  17. --warn: #d97706;
  18. --warn-bg: #fff7ed;
  19. --and: #2563eb;
  20. --and-bg: #eff6ff;
  21. --radius: 10px;
  22. }
  23. * { box-sizing: border-box; }
  24. body {
  25. margin: 0;
  26. min-height: 100vh;
  27. font: 14px/1.5 Inter, system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  28. color: var(--text);
  29. background: linear-gradient(180deg, #eefcf6 0%, var(--bg) 160px) fixed;
  30. }
  31. .page {
  32. max-width: 1100px;
  33. margin: 0 auto;
  34. padding: 24px 20px 80px;
  35. }
  36. .hero {
  37. margin-bottom: 20px;
  38. padding: 16px 18px;
  39. background: #fff;
  40. border: 1px solid var(--border);
  41. border-radius: var(--radius);
  42. }
  43. .hero h1 {
  44. margin: 0 0 6px;
  45. font-size: 18px;
  46. font-weight: 700;
  47. color: var(--primary-dark);
  48. }
  49. .hero p {
  50. margin: 0;
  51. color: var(--text-2);
  52. font-size: 13px;
  53. line-height: 1.55;
  54. }
  55. .hero .rules {
  56. display: grid;
  57. gap: 8px;
  58. margin-top: 12px;
  59. padding: 10px 12px;
  60. background: #f8fafc;
  61. border-radius: 8px;
  62. border: 1px dashed var(--border);
  63. font-size: 12px;
  64. color: var(--text-2);
  65. }
  66. .hero .rules b { color: var(--text); }
  67. .hero .fmt {
  68. margin-top: 10px;
  69. padding: 8px 10px;
  70. font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  71. font-size: 12px;
  72. line-height: 1.6;
  73. color: var(--text);
  74. background: #ecfdf5;
  75. border-radius: 6px;
  76. white-space: pre-wrap;
  77. }
  78. .tabs {
  79. display: flex;
  80. flex-wrap: wrap;
  81. gap: 8px;
  82. margin-bottom: 16px;
  83. }
  84. .tab {
  85. border: 1px solid var(--border);
  86. background: #fff;
  87. border-radius: 8px;
  88. padding: 8px 14px;
  89. font: inherit;
  90. font-size: 13px;
  91. cursor: pointer;
  92. color: var(--text-2);
  93. }
  94. .tab:hover { border-color: #a7f3d0; }
  95. .tab.is-on {
  96. color: var(--primary-dark);
  97. background: var(--primary-bg);
  98. border-color: #6ee7b7;
  99. font-weight: 600;
  100. }
  101. .panel { display: none; }
  102. .panel.is-on { display: block; }
  103. .grid-2 {
  104. display: grid;
  105. grid-template-columns: 1fr 1fr;
  106. gap: 16px;
  107. }
  108. @media (max-width: 900px) {
  109. .grid-2 { grid-template-columns: 1fr; }
  110. }
  111. .block {
  112. background: #fff;
  113. border: 1px solid var(--border);
  114. border-radius: var(--radius);
  115. overflow: hidden;
  116. }
  117. .block__hd {
  118. display: flex;
  119. align-items: center;
  120. justify-content: space-between;
  121. gap: 8px;
  122. padding: 10px 14px;
  123. border-bottom: 1px solid var(--border);
  124. background: #f8fafc;
  125. font-size: 13px;
  126. font-weight: 600;
  127. }
  128. .block__hd .sub {
  129. font-weight: 400;
  130. color: var(--muted);
  131. font-size: 12px;
  132. }
  133. .block__bd { padding: 12px 14px 14px; }
  134. .note {
  135. margin: 0 0 12px;
  136. padding: 8px 10px;
  137. font-size: 12px;
  138. line-height: 1.5;
  139. color: var(--text-2);
  140. background: #f8fafc;
  141. border-left: 3px solid var(--primary);
  142. border-radius: 0 6px 6px 0;
  143. }
  144. /* —— 审批进度 —— */
  145. .oa-flow-preview {
  146. margin: 0;
  147. padding: 12px;
  148. background: #f8fafc;
  149. border: 1px solid var(--border);
  150. border-radius: 10px;
  151. }
  152. .oa-flow-preview__title {
  153. margin-bottom: 10px;
  154. color: var(--text-2);
  155. font-size: 13px;
  156. font-weight: 600;
  157. }
  158. .oa-flow-step {
  159. display: flex;
  160. gap: 8px;
  161. align-items: stretch;
  162. }
  163. .oa-flow-rail {
  164. display: flex;
  165. flex-direction: column;
  166. align-items: center;
  167. width: 16px;
  168. flex-shrink: 0;
  169. }
  170. .oa-flow-dot {
  171. width: 10px;
  172. height: 10px;
  173. margin-top: 12px;
  174. background: #94a3b8;
  175. border-radius: 50%;
  176. box-shadow: 0 0 0 3px #e2e8f0;
  177. flex-shrink: 0;
  178. }
  179. .oa-flow-dot.ok {
  180. background: var(--primary);
  181. box-shadow: 0 0 0 3px var(--primary-bg);
  182. }
  183. .oa-flow-dot.pending {
  184. background: var(--warn);
  185. box-shadow: 0 0 0 3px var(--warn-bg);
  186. }
  187. .oa-flow-line {
  188. width: 2px;
  189. flex: 1;
  190. min-height: 10px;
  191. margin: 4px 0;
  192. background: #e2e8f0;
  193. }
  194. .oa-flow-card {
  195. flex: 1;
  196. min-width: 0;
  197. margin-bottom: 6px;
  198. padding: 9px 12px;
  199. background: #fff;
  200. border: 1px solid var(--border);
  201. border-radius: 6px;
  202. }
  203. .oa-flow-card__row {
  204. display: flex;
  205. flex-wrap: wrap;
  206. gap: 6px 8px;
  207. align-items: center;
  208. }
  209. .oa-flow-card__name {
  210. color: var(--text);
  211. font-size: 12px;
  212. font-weight: 600;
  213. }
  214. .oa-flow-badge {
  215. padding: 0 5px;
  216. font-size: 10px;
  217. font-weight: 500;
  218. line-height: 16px;
  219. border-radius: 4px;
  220. }
  221. .oa-flow-badge.or { color: var(--warn); background: var(--warn-bg); }
  222. .oa-flow-badge.and { color: var(--and); background: var(--and-bg); }
  223. .oa-flow-badge.ok { color: var(--primary-dark); background: var(--primary-bg); }
  224. .oa-flow-card__meta { color: var(--muted); font-size: 11px; }
  225. .oa-flow-card__sep { color: #cbd5e1; font-size: 11px; }
  226. .oa-flow-card__people {
  227. display: inline-flex;
  228. flex: 1 1 140px;
  229. flex-wrap: wrap;
  230. gap: 4px;
  231. align-items: center;
  232. justify-content: flex-end;
  233. margin-left: auto;
  234. }
  235. .oa-person-chip {
  236. display: inline-flex;
  237. gap: 3px;
  238. align-items: center;
  239. padding: 1px 6px 1px 2px;
  240. color: var(--text-2);
  241. font-size: 11px;
  242. background: #f1f5f9;
  243. border-radius: 999px;
  244. white-space: nowrap;
  245. }
  246. .oa-person-chip__dot {
  247. display: grid;
  248. place-items: center;
  249. width: 16px;
  250. height: 16px;
  251. color: #fff;
  252. font-size: 9px;
  253. font-weight: 700;
  254. background: #94a3b8;
  255. border-radius: 50%;
  256. }
  257. .oa-person-chip.is-ok {
  258. color: var(--primary-dark);
  259. background: var(--primary-bg);
  260. font-weight: 600;
  261. box-shadow: 0 0 0 1px #a7f3d0;
  262. }
  263. .oa-person-chip.is-ok .oa-person-chip__dot { background: var(--primary); }
  264. .oa-person-chip.is-pending {
  265. color: var(--warn);
  266. background: var(--warn-bg);
  267. }
  268. .oa-person-chip.is-pending .oa-person-chip__dot { background: var(--warn); }
  269. .oa-person-chip.is-mute {
  270. color: #94a3b8;
  271. background: #f8fafc;
  272. opacity: 0.72;
  273. }
  274. .oa-person-chip.is-mute .oa-person-chip__dot { background: #cbd5e1; }
  275. .oa-person-chip__st {
  276. margin-left: 2px;
  277. font-size: 10px;
  278. opacity: 0.85;
  279. }
  280. /* 纯文本行:姓名 意见 时间 */
  281. .person-lines {
  282. margin-top: 8px;
  283. display: grid;
  284. gap: 4px;
  285. }
  286. .person-line {
  287. margin: 0;
  288. padding: 0;
  289. color: var(--text-2);
  290. font-size: 12px;
  291. line-height: 1.55;
  292. word-break: break-word;
  293. }
  294. .person-line.is-ok {
  295. color: var(--primary-dark);
  296. font-weight: 500;
  297. }
  298. .person-line.is-pending {
  299. color: var(--warn);
  300. }
  301. .person-line.is-mute {
  302. color: var(--muted);
  303. }
  304. /* —— PDF —— */
  305. .pdf-sheet {
  306. background: #fff;
  307. border: 1px solid #94a3b8;
  308. font-size: 12px;
  309. color: #0f172a;
  310. }
  311. .pdf-sheet__title {
  312. padding: 10px 12px;
  313. text-align: center;
  314. font-size: 15px;
  315. font-weight: 700;
  316. border-bottom: 1px solid #94a3b8;
  317. }
  318. .pdf-flow-table {
  319. width: 100%;
  320. border-collapse: collapse;
  321. }
  322. .pdf-flow-table th,
  323. .pdf-flow-table td {
  324. border: 1px solid #94a3b8;
  325. padding: 8px 10px;
  326. vertical-align: top;
  327. text-align: left;
  328. }
  329. .pdf-flow-table th {
  330. width: 88px;
  331. background: #f8fafc;
  332. font-weight: 600;
  333. text-align: center;
  334. vertical-align: middle;
  335. }
  336. .pdf-node-title {
  337. font-weight: 600;
  338. margin-bottom: 6px;
  339. }
  340. .pdf-person-lines {
  341. display: grid;
  342. gap: 3px;
  343. }
  344. .pdf-person-line {
  345. margin: 0;
  346. line-height: 1.55;
  347. word-break: break-word;
  348. }
  349. .pdf-person-line.is-active {
  350. font-weight: 600;
  351. color: #059669;
  352. }
  353. .pdf-person-line.is-mute {
  354. color: #94a3b8;
  355. }
  356. .pdf-meta {
  357. margin-top: 4px;
  358. color: #64748b;
  359. font-size: 11px;
  360. }
  361. .legend {
  362. margin-top: 14px;
  363. padding: 10px 12px;
  364. background: #fff;
  365. border: 1px solid var(--border);
  366. border-radius: 8px;
  367. font-size: 12px;
  368. color: var(--text-2);
  369. }
  370. .legend strong { color: var(--text); }
  371. .legend ul { margin: 6px 0 0; padding-left: 18px; }
  372. </style>
  373. </head>
  374. <body>
  375. <div class="page">
  376. <div class="hero">
  377. <h1>或签 / 会签 · 审批进度 &amp; PDF「审批流程」展示 Demo</h1>
  378. <p>
  379. 同节点多人合并为一张节点卡;明细不用表格,统一为纯文本行。
  380. </p>
  381. <div class="fmt">张三 同意 2026-07-23 09:10:10
  382. 李四 同意123123 2026-07-23 09:12:10</div>
  383. <div class="rules">
  384. <div><b>或签</b>:未批时展示全部可审批人;一人审批后高亮该人(含意见行),其余人灰显不高亮。</div>
  385. <div><b>会签</b>:始终每人一行「姓名 意见 时间」;未批可用「待处理」占位。</div>
  386. </div>
  387. </div>
  388. <div class="tabs" role="tablist">
  389. <button type="button" class="tab is-on" data-tab="or-pending">① 或签 · 未审批</button>
  390. <button type="button" class="tab" data-tab="or-done">② 或签 · 一人已批</button>
  391. <button type="button" class="tab" data-tab="and-pending">③ 会签 · 未审批</button>
  392. <button type="button" class="tab" data-tab="and-partial">④ 会签 · 部分已批</button>
  393. <button type="button" class="tab" data-tab="and-done">⑤ 会签 · 全部完成</button>
  394. </div>
  395. <!-- ① -->
  396. <section class="panel is-on" id="panel-or-pending">
  397. <p class="note">或签未批:节点卡上 chip 展示全部待处理人;尚无意见行(或可写「甲 待处理」等占位,见会签未批)。</p>
  398. <div class="grid-2">
  399. <div class="block">
  400. <div class="block__hd">界面 · 审批进度 <span class="sub">OaProgressChain</span></div>
  401. <div class="block__bd">
  402. <div class="oa-flow-preview">
  403. <div class="oa-flow-preview__title"><span>审批进度</span></div>
  404. <div class="oa-flow-step">
  405. <div class="oa-flow-rail"><div class="oa-flow-dot ok"></div><div class="oa-flow-line"></div></div>
  406. <div class="oa-flow-card">
  407. <div class="oa-flow-card__row">
  408. <span class="oa-flow-card__name">发起人</span>
  409. <span class="oa-flow-badge ok">已提交</span>
  410. <span class="oa-flow-card__sep">·</span>
  411. <span class="oa-flow-card__meta">2026-07-23 09:00:00</span>
  412. <span class="oa-flow-card__people">
  413. <span class="oa-person-chip is-ok"><span class="oa-person-chip__dot">张</span>张三</span>
  414. </span>
  415. </div>
  416. </div>
  417. </div>
  418. <div class="oa-flow-step">
  419. <div class="oa-flow-rail"><div class="oa-flow-dot pending"></div></div>
  420. <div class="oa-flow-card">
  421. <div class="oa-flow-card__row">
  422. <span class="oa-flow-card__name">部门审批</span>
  423. <span class="oa-flow-badge or">或签</span>
  424. <span class="oa-flow-badge or">进行中</span>
  425. <span class="oa-flow-card__people">
  426. <span class="oa-person-chip is-pending"><span class="oa-person-chip__dot">甲</span>甲<span class="oa-person-chip__st">待处理</span></span>
  427. <span class="oa-person-chip is-pending"><span class="oa-person-chip__dot">乙</span>乙<span class="oa-person-chip__st">待处理</span></span>
  428. <span class="oa-person-chip is-pending"><span class="oa-person-chip__dot">丙</span>丙<span class="oa-person-chip__st">待处理</span></span>
  429. </span>
  430. </div>
  431. </div>
  432. </div>
  433. </div>
  434. </div>
  435. </div>
  436. <div class="block">
  437. <div class="block__hd">打印 PDF · 审批流程</div>
  438. <div class="block__bd">
  439. <div class="pdf-sheet">
  440. <div class="pdf-sheet__title">请假审批</div>
  441. <table class="pdf-flow-table">
  442. <tr>
  443. <th rowspan="2">审批流程</th>
  444. <td>
  445. <div class="pdf-node-title">【发起人】 张三 已提交</div>
  446. <div class="pdf-meta">2026-07-23 09:00:00</div>
  447. </td>
  448. </tr>
  449. <tr>
  450. <td>
  451. <div class="pdf-node-title">【部门审批·或签】 进行中</div>
  452. <div class="pdf-person-lines">
  453. <p class="pdf-person-line">甲 待处理</p>
  454. <p class="pdf-person-line">乙 待处理</p>
  455. <p class="pdf-person-line">丙 待处理</p>
  456. </div>
  457. </td>
  458. </tr>
  459. </table>
  460. </div>
  461. </div>
  462. </div>
  463. </div>
  464. </section>
  465. <!-- ② -->
  466. <section class="panel" id="panel-or-done">
  467. <p class="note">甲已同意:高亮甲 + 一行「甲 同意,材料齐全 时间」;乙丙灰显「无需处理」。</p>
  468. <div class="grid-2">
  469. <div class="block">
  470. <div class="block__hd">界面 · 审批进度</div>
  471. <div class="block__bd">
  472. <div class="oa-flow-preview">
  473. <div class="oa-flow-preview__title"><span>审批进度</span></div>
  474. <div class="oa-flow-step">
  475. <div class="oa-flow-rail"><div class="oa-flow-dot ok"></div><div class="oa-flow-line"></div></div>
  476. <div class="oa-flow-card">
  477. <div class="oa-flow-card__row">
  478. <span class="oa-flow-card__name">发起人</span>
  479. <span class="oa-flow-badge ok">已提交</span>
  480. <span class="oa-flow-card__people">
  481. <span class="oa-person-chip is-ok"><span class="oa-person-chip__dot">张</span>张三</span>
  482. </span>
  483. </div>
  484. </div>
  485. </div>
  486. <div class="oa-flow-step">
  487. <div class="oa-flow-rail"><div class="oa-flow-dot ok"></div><div class="oa-flow-line"></div></div>
  488. <div class="oa-flow-card">
  489. <div class="oa-flow-card__row">
  490. <span class="oa-flow-card__name">部门审批</span>
  491. <span class="oa-flow-badge or">或签</span>
  492. <span class="oa-flow-badge ok">已同意</span>
  493. <span class="oa-flow-card__people">
  494. <span class="oa-person-chip is-ok"><span class="oa-person-chip__dot">甲</span>甲<span class="oa-person-chip__st">已同意</span></span>
  495. <span class="oa-person-chip is-mute"><span class="oa-person-chip__dot">乙</span>乙<span class="oa-person-chip__st">无需处理</span></span>
  496. <span class="oa-person-chip is-mute"><span class="oa-person-chip__dot">丙</span>丙<span class="oa-person-chip__st">无需处理</span></span>
  497. </span>
  498. </div>
  499. <div class="person-lines">
  500. <p class="person-line is-ok">甲 同意,材料齐全 2026-07-23 10:05:00</p>
  501. <p class="person-line is-mute">乙 无需处理</p>
  502. <p class="person-line is-mute">丙 无需处理</p>
  503. </div>
  504. </div>
  505. </div>
  506. <div class="oa-flow-step">
  507. <div class="oa-flow-rail"><div class="oa-flow-dot ok"></div></div>
  508. <div class="oa-flow-card">
  509. <div class="oa-flow-card__row">
  510. <span class="oa-flow-card__name">流程结束</span>
  511. <span class="oa-flow-badge ok">已结束</span>
  512. </div>
  513. </div>
  514. </div>
  515. </div>
  516. </div>
  517. </div>
  518. <div class="block">
  519. <div class="block__hd">打印 PDF · 审批流程</div>
  520. <div class="block__bd">
  521. <div class="pdf-sheet">
  522. <div class="pdf-sheet__title">请假审批</div>
  523. <table class="pdf-flow-table">
  524. <tr>
  525. <th rowspan="3">审批流程</th>
  526. <td>
  527. <div class="pdf-node-title">【发起人】 张三 已提交</div>
  528. <div class="pdf-meta">2026-07-23 09:00:00</div>
  529. </td>
  530. </tr>
  531. <tr>
  532. <td>
  533. <div class="pdf-node-title">【部门审批·或签】 已同意</div>
  534. <div class="pdf-person-lines">
  535. <p class="pdf-person-line is-active">甲 同意,材料齐全 2026-07-23 10:05:00</p>
  536. <p class="pdf-person-line is-mute">乙 无需处理</p>
  537. <p class="pdf-person-line is-mute">丙 无需处理</p>
  538. </div>
  539. </td>
  540. </tr>
  541. <tr>
  542. <td>
  543. <div class="pdf-node-title">流程结束</div>
  544. <div class="pdf-meta">2026-07-23 10:05:00</div>
  545. </td>
  546. </tr>
  547. </table>
  548. </div>
  549. </div>
  550. </div>
  551. </div>
  552. </section>
  553. <!-- ③ -->
  554. <section class="panel" id="panel-and-pending">
  555. <p class="note">会签未批:每人一行占位「姓名 待处理」。</p>
  556. <div class="grid-2">
  557. <div class="block">
  558. <div class="block__hd">界面 · 审批进度</div>
  559. <div class="block__bd">
  560. <div class="oa-flow-preview">
  561. <div class="oa-flow-preview__title"><span>审批进度</span></div>
  562. <div class="oa-flow-step">
  563. <div class="oa-flow-rail"><div class="oa-flow-dot ok"></div><div class="oa-flow-line"></div></div>
  564. <div class="oa-flow-card">
  565. <div class="oa-flow-card__row">
  566. <span class="oa-flow-card__name">发起人</span>
  567. <span class="oa-flow-badge ok">已提交</span>
  568. <span class="oa-flow-card__people">
  569. <span class="oa-person-chip is-ok"><span class="oa-person-chip__dot">张</span>张三</span>
  570. </span>
  571. </div>
  572. </div>
  573. </div>
  574. <div class="oa-flow-step">
  575. <div class="oa-flow-rail"><div class="oa-flow-dot pending"></div></div>
  576. <div class="oa-flow-card">
  577. <div class="oa-flow-card__row">
  578. <span class="oa-flow-card__name">部门审批</span>
  579. <span class="oa-flow-badge and">会签</span>
  580. <span class="oa-flow-badge or">进行中</span>
  581. </div>
  582. <div class="person-lines">
  583. <p class="person-line is-pending">甲 待处理</p>
  584. <p class="person-line is-pending">乙 待处理</p>
  585. <p class="person-line is-pending">丙 待处理</p>
  586. </div>
  587. </div>
  588. </div>
  589. </div>
  590. </div>
  591. </div>
  592. <div class="block">
  593. <div class="block__hd">打印 PDF · 审批流程</div>
  594. <div class="block__bd">
  595. <div class="pdf-sheet">
  596. <div class="pdf-sheet__title">请假审批</div>
  597. <table class="pdf-flow-table">
  598. <tr>
  599. <th rowspan="2">审批流程</th>
  600. <td>
  601. <div class="pdf-node-title">【发起人】 张三 已提交</div>
  602. <div class="pdf-meta">2026-07-23 09:00:00</div>
  603. </td>
  604. </tr>
  605. <tr>
  606. <td>
  607. <div class="pdf-node-title">【部门审批·会签】 进行中</div>
  608. <div class="pdf-person-lines">
  609. <p class="pdf-person-line">甲 待处理</p>
  610. <p class="pdf-person-line">乙 待处理</p>
  611. <p class="pdf-person-line">丙 待处理</p>
  612. </div>
  613. </td>
  614. </tr>
  615. </table>
  616. </div>
  617. </div>
  618. </div>
  619. </div>
  620. </section>
  621. <!-- ④ -->
  622. <section class="panel" id="panel-and-partial">
  623. <p class="note">会签部分完成:已批写「姓名 意见 时间」;未批仍写「姓名 待处理」。</p>
  624. <div class="grid-2">
  625. <div class="block">
  626. <div class="block__hd">界面 · 审批进度</div>
  627. <div class="block__bd">
  628. <div class="oa-flow-preview">
  629. <div class="oa-flow-preview__title"><span>审批进度</span></div>
  630. <div class="oa-flow-step">
  631. <div class="oa-flow-rail"><div class="oa-flow-dot ok"></div><div class="oa-flow-line"></div></div>
  632. <div class="oa-flow-card">
  633. <div class="oa-flow-card__row">
  634. <span class="oa-flow-card__name">发起人</span>
  635. <span class="oa-flow-badge ok">已提交</span>
  636. <span class="oa-flow-card__people">
  637. <span class="oa-person-chip is-ok"><span class="oa-person-chip__dot">张</span>张三</span>
  638. </span>
  639. </div>
  640. </div>
  641. </div>
  642. <div class="oa-flow-step">
  643. <div class="oa-flow-rail"><div class="oa-flow-dot pending"></div></div>
  644. <div class="oa-flow-card">
  645. <div class="oa-flow-card__row">
  646. <span class="oa-flow-card__name">部门审批</span>
  647. <span class="oa-flow-badge and">会签</span>
  648. <span class="oa-flow-badge or">进行中</span>
  649. <span class="oa-flow-card__sep">·</span>
  650. <span class="oa-flow-card__meta">2/3 已处理</span>
  651. </div>
  652. <div class="person-lines">
  653. <p class="person-line is-ok">甲 同意 2026-07-23 10:01:00</p>
  654. <p class="person-line is-ok">乙 无异议 2026-07-23 10:20:00</p>
  655. <p class="person-line is-pending">丙 待处理</p>
  656. </div>
  657. </div>
  658. </div>
  659. </div>
  660. </div>
  661. </div>
  662. <div class="block">
  663. <div class="block__hd">打印 PDF · 审批流程</div>
  664. <div class="block__bd">
  665. <div class="pdf-sheet">
  666. <div class="pdf-sheet__title">请假审批</div>
  667. <table class="pdf-flow-table">
  668. <tr>
  669. <th rowspan="2">审批流程</th>
  670. <td>
  671. <div class="pdf-node-title">【发起人】 张三 已提交</div>
  672. <div class="pdf-meta">2026-07-23 09:00:00</div>
  673. </td>
  674. </tr>
  675. <tr>
  676. <td>
  677. <div class="pdf-node-title">【部门审批·会签】 进行中(2/3)</div>
  678. <div class="pdf-person-lines">
  679. <p class="pdf-person-line is-active">甲 同意 2026-07-23 10:01:00</p>
  680. <p class="pdf-person-line is-active">乙 无异议 2026-07-23 10:20:00</p>
  681. <p class="pdf-person-line">丙 待处理</p>
  682. </div>
  683. </td>
  684. </tr>
  685. </table>
  686. </div>
  687. </div>
  688. </div>
  689. </div>
  690. </section>
  691. <!-- ⑤ -->
  692. <section class="panel" id="panel-and-done">
  693. <p class="note">会签完成:每人一行「姓名 意见 时间」,界面与 PDF 一致。</p>
  694. <div class="grid-2">
  695. <div class="block">
  696. <div class="block__hd">界面 · 审批进度</div>
  697. <div class="block__bd">
  698. <div class="oa-flow-preview">
  699. <div class="oa-flow-preview__title"><span>审批进度</span></div>
  700. <div class="oa-flow-step">
  701. <div class="oa-flow-rail"><div class="oa-flow-dot ok"></div><div class="oa-flow-line"></div></div>
  702. <div class="oa-flow-card">
  703. <div class="oa-flow-card__row">
  704. <span class="oa-flow-card__name">发起人</span>
  705. <span class="oa-flow-badge ok">已提交</span>
  706. <span class="oa-flow-card__people">
  707. <span class="oa-person-chip is-ok"><span class="oa-person-chip__dot">张</span>张三</span>
  708. </span>
  709. </div>
  710. </div>
  711. </div>
  712. <div class="oa-flow-step">
  713. <div class="oa-flow-rail"><div class="oa-flow-dot ok"></div><div class="oa-flow-line"></div></div>
  714. <div class="oa-flow-card">
  715. <div class="oa-flow-card__row">
  716. <span class="oa-flow-card__name">部门审批</span>
  717. <span class="oa-flow-badge and">会签</span>
  718. <span class="oa-flow-badge ok">已同意</span>
  719. </div>
  720. <div class="person-lines">
  721. <p class="person-line is-ok">甲 同意 2026-07-23 10:01:00</p>
  722. <p class="person-line is-ok">乙 无异议 2026-07-23 10:20:00</p>
  723. <p class="person-line is-ok">丙 批准 2026-07-23 11:00:00</p>
  724. </div>
  725. </div>
  726. </div>
  727. <div class="oa-flow-step">
  728. <div class="oa-flow-rail"><div class="oa-flow-dot ok"></div></div>
  729. <div class="oa-flow-card">
  730. <div class="oa-flow-card__row">
  731. <span class="oa-flow-card__name">流程结束</span>
  732. <span class="oa-flow-badge ok">已结束</span>
  733. </div>
  734. </div>
  735. </div>
  736. </div>
  737. </div>
  738. </div>
  739. <div class="block">
  740. <div class="block__hd">打印 PDF · 审批流程</div>
  741. <div class="block__bd">
  742. <div class="pdf-sheet">
  743. <div class="pdf-sheet__title">请假审批</div>
  744. <table class="pdf-flow-table">
  745. <tr>
  746. <th rowspan="3">审批流程</th>
  747. <td>
  748. <div class="pdf-node-title">【发起人】 张三 已提交</div>
  749. <div class="pdf-meta">2026-07-23 09:00:00</div>
  750. </td>
  751. </tr>
  752. <tr>
  753. <td>
  754. <div class="pdf-node-title">【部门审批·会签】 已同意</div>
  755. <div class="pdf-person-lines">
  756. <p class="pdf-person-line is-active">甲 同意 2026-07-23 10:01:00</p>
  757. <p class="pdf-person-line is-active">乙 无异议 2026-07-23 10:20:00</p>
  758. <p class="pdf-person-line is-active">丙 批准 2026-07-23 11:00:00</p>
  759. </div>
  760. </td>
  761. </tr>
  762. <tr>
  763. <td>
  764. <div class="pdf-node-title">流程结束</div>
  765. <div class="pdf-meta">2026-07-23 11:00:00</div>
  766. </td>
  767. </tr>
  768. </table>
  769. </div>
  770. </div>
  771. </div>
  772. </div>
  773. </section>
  774. <div class="legend">
  775. <strong>统一行格式</strong>
  776. <ul>
  777. <li>已处理:<code>姓名 审批意见 审批时间</code>(空格分隔,一行一人)</li>
  778. <li>未处理:<code>姓名 待处理</code></li>
  779. <li>或签免处理:<code>姓名 无需处理</code>(灰显,不高亮)</li>
  780. <li>不用表头、不用三列表格。</li>
  781. </ul>
  782. </div>
  783. </div>
  784. <script>
  785. const tabs = document.querySelectorAll('.tab')
  786. const panels = {
  787. 'or-pending': document.getElementById('panel-or-pending'),
  788. 'or-done': document.getElementById('panel-or-done'),
  789. 'and-pending': document.getElementById('panel-and-pending'),
  790. 'and-partial': document.getElementById('panel-and-partial'),
  791. 'and-done': document.getElementById('panel-and-done')
  792. }
  793. tabs.forEach((btn) => {
  794. btn.addEventListener('click', () => {
  795. tabs.forEach((t) => t.classList.remove('is-on'))
  796. btn.classList.add('is-on')
  797. Object.values(panels).forEach((p) => p.classList.remove('is-on'))
  798. panels[btn.dataset.tab].classList.add('is-on')
  799. })
  800. })
  801. </script>
  802. </body>
  803. </html>