index.html 33 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131
  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.0" />
  6. <title>入库放行审核弹窗 · 证据展示 Demo</title>
  7. <link rel="preconnect" href="https://fonts.googleapis.com" />
  8. <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  9. <link
  10. href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
  11. rel="stylesheet"
  12. />
  13. <style>
  14. :root {
  15. --primary: #10b981;
  16. --primary-dark: #059669;
  17. --primary-bg: #ecfdf5;
  18. --text: #1e293b;
  19. --text-muted: #64748b;
  20. --text-label: #334155;
  21. --border: #d9e8e2;
  22. --border-soft: #e2e8f0;
  23. --bg-page: #f1f5f9;
  24. --surface: #ffffff;
  25. --table-head: #f8fafc;
  26. --shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  27. --radius: 10px;
  28. --radius-sm: 8px;
  29. --mask: rgba(15, 23, 42, 0.35);
  30. --warn: #d97706;
  31. --warn-bg: #fffbeb;
  32. --danger: #dc2626;
  33. --danger-bg: #fef2f2;
  34. }
  35. * {
  36. box-sizing: border-box;
  37. }
  38. html,
  39. body {
  40. margin: 0;
  41. min-height: 100%;
  42. }
  43. body {
  44. font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif;
  45. font-size: 14px;
  46. line-height: 1.5;
  47. color: var(--text);
  48. background: var(--bg-page);
  49. }
  50. button,
  51. summary {
  52. font-family: inherit;
  53. }
  54. .page {
  55. min-height: 100vh;
  56. display: flex;
  57. flex-direction: column;
  58. }
  59. .banner {
  60. position: sticky;
  61. top: 0;
  62. z-index: 20;
  63. background: var(--surface);
  64. border-bottom: 1px solid var(--border-soft);
  65. padding: 14px 24px 16px;
  66. box-shadow: var(--shadow);
  67. }
  68. .banner h1 {
  69. margin: 0;
  70. font-size: 16px;
  71. font-weight: 700;
  72. letter-spacing: -0.02em;
  73. }
  74. .banner p {
  75. margin: 6px 0 0;
  76. font-size: 13px;
  77. color: var(--text-muted);
  78. max-width: 920px;
  79. }
  80. .banner p strong {
  81. color: var(--primary-dark);
  82. font-weight: 600;
  83. }
  84. .scheme-row {
  85. display: flex;
  86. flex-wrap: wrap;
  87. align-items: center;
  88. gap: 8px;
  89. margin-top: 12px;
  90. }
  91. .scheme-row span {
  92. font-size: 12px;
  93. color: var(--text-muted);
  94. margin-right: 4px;
  95. }
  96. .scheme-btn {
  97. height: 32px;
  98. padding: 0 12px;
  99. border-radius: 8px;
  100. border: 1px solid var(--border);
  101. background: var(--surface);
  102. color: var(--text);
  103. font-size: 12px;
  104. font-weight: 600;
  105. cursor: pointer;
  106. transition:
  107. background 0.15s,
  108. border-color 0.15s,
  109. color 0.15s;
  110. }
  111. .scheme-btn:hover {
  112. background: #f8fafc;
  113. }
  114. .scheme-btn.is-active {
  115. background: var(--primary);
  116. border-color: var(--primary);
  117. color: #fff;
  118. }
  119. .scheme-btn.is-rec::after {
  120. content: '推荐';
  121. margin-left: 6px;
  122. font-size: 10px;
  123. font-weight: 700;
  124. padding: 1px 5px;
  125. border-radius: 4px;
  126. background: rgba(255, 255, 255, 0.22);
  127. }
  128. .scheme-btn:not(.is-active).is-rec::after {
  129. background: var(--primary-bg);
  130. color: var(--primary-dark);
  131. }
  132. .toggle {
  133. margin-left: auto;
  134. display: inline-flex;
  135. align-items: center;
  136. gap: 8px;
  137. height: 32px;
  138. padding: 0 10px;
  139. border-radius: 8px;
  140. border: 1px solid var(--border);
  141. background: var(--surface);
  142. font-size: 12px;
  143. color: var(--text-label);
  144. cursor: pointer;
  145. }
  146. .toggle input {
  147. accent-color: var(--primary);
  148. }
  149. .stage {
  150. flex: 1;
  151. position: relative;
  152. min-height: 0;
  153. }
  154. .backdrop {
  155. position: absolute;
  156. inset: 0;
  157. background: var(--mask);
  158. display: flex;
  159. align-items: flex-start;
  160. justify-content: center;
  161. padding: 16px 16px 24px;
  162. overflow: auto;
  163. }
  164. .dialog {
  165. background: var(--surface);
  166. border-radius: var(--radius);
  167. box-shadow: 0 16px 48px rgba(15, 23, 42, 0.18);
  168. display: none;
  169. flex-direction: column;
  170. max-height: calc(100vh - 140px);
  171. width: min(1120px, 100%);
  172. overflow: hidden;
  173. }
  174. .dialog.is-show {
  175. display: flex;
  176. }
  177. .dialog--current {
  178. width: min(640px, 100%);
  179. }
  180. .dialog--stack {
  181. width: min(760px, 100%);
  182. }
  183. .dialog-head {
  184. flex-shrink: 0;
  185. padding: 16px 22px 14px;
  186. border-bottom: 1px solid var(--border-soft);
  187. }
  188. .dialog-head__row {
  189. display: flex;
  190. align-items: flex-start;
  191. justify-content: space-between;
  192. gap: 12px;
  193. }
  194. .dialog-head h2 {
  195. margin: 0;
  196. font-size: 16px;
  197. font-weight: 700;
  198. }
  199. .icon-btn {
  200. width: 28px;
  201. height: 28px;
  202. border: none;
  203. background: transparent;
  204. color: var(--text-muted);
  205. border-radius: 6px;
  206. cursor: pointer;
  207. display: inline-flex;
  208. align-items: center;
  209. justify-content: center;
  210. }
  211. .icon-btn:hover {
  212. background: #f1f5f9;
  213. color: var(--text);
  214. }
  215. .sample-meta {
  216. display: grid;
  217. grid-template-columns: repeat(2, minmax(0, 1fr));
  218. gap: 8px 24px;
  219. margin-top: 12px;
  220. padding: 10px 14px;
  221. background: var(--table-head);
  222. border: 1px solid var(--border-soft);
  223. border-radius: 8px;
  224. }
  225. .meta-row {
  226. display: flex;
  227. gap: 8px;
  228. font-size: 13px;
  229. min-width: 0;
  230. }
  231. .meta-row .k {
  232. color: var(--text-label);
  233. flex-shrink: 0;
  234. }
  235. .meta-row .v {
  236. font-weight: 600;
  237. font-variant-numeric: tabular-nums;
  238. overflow-wrap: anywhere;
  239. }
  240. .verdict {
  241. display: flex;
  242. flex-wrap: wrap;
  243. gap: 8px;
  244. margin-top: 10px;
  245. }
  246. .chip {
  247. display: inline-flex;
  248. align-items: center;
  249. gap: 6px;
  250. height: 24px;
  251. padding: 0 8px;
  252. border-radius: 6px;
  253. font-size: 12px;
  254. font-weight: 600;
  255. background: #f1f5f9;
  256. color: var(--text-muted);
  257. }
  258. .chip svg {
  259. width: 12px;
  260. height: 12px;
  261. }
  262. .chip--ok {
  263. background: var(--primary-bg);
  264. color: #047857;
  265. }
  266. .chip--bad {
  267. background: var(--danger-bg);
  268. color: var(--danger);
  269. }
  270. .chip--warn {
  271. background: var(--warn-bg);
  272. color: var(--warn);
  273. }
  274. .dialog-body {
  275. flex: 1;
  276. min-height: 0;
  277. overflow: auto;
  278. padding: 18px 22px;
  279. }
  280. .dialog--split .dialog-body {
  281. display: grid;
  282. grid-template-columns: minmax(0, 1.7fr) minmax(320px, 0.95fr);
  283. gap: 0;
  284. padding: 0;
  285. overflow: hidden;
  286. }
  287. .evidence-pane {
  288. min-width: 0;
  289. overflow: auto;
  290. padding: 16px 18px 18px 22px;
  291. border-right: 1px solid var(--border-soft);
  292. background: #fcfdfd;
  293. }
  294. .form-pane {
  295. min-width: 0;
  296. overflow: auto;
  297. padding: 16px 22px 18px 18px;
  298. background: var(--surface);
  299. }
  300. .pane-title {
  301. margin: 0 0 10px;
  302. font-size: 12px;
  303. font-weight: 700;
  304. letter-spacing: 0.04em;
  305. color: var(--text-muted);
  306. }
  307. .block {
  308. border: 1px solid var(--border-soft);
  309. border-radius: 8px;
  310. background: var(--surface);
  311. margin-bottom: 10px;
  312. overflow: hidden;
  313. }
  314. .block > summary {
  315. list-style: none;
  316. cursor: pointer;
  317. display: flex;
  318. align-items: center;
  319. justify-content: space-between;
  320. gap: 8px;
  321. padding: 10px 12px;
  322. font-size: 13px;
  323. font-weight: 700;
  324. background: var(--surface);
  325. }
  326. .block > summary::-webkit-details-marker {
  327. display: none;
  328. }
  329. .block > summary:hover {
  330. background: #f8fafc;
  331. }
  332. .block-title {
  333. display: flex;
  334. align-items: center;
  335. gap: 8px;
  336. }
  337. .chev {
  338. width: 14px;
  339. height: 14px;
  340. color: var(--text-muted);
  341. transition: transform 0.15s;
  342. }
  343. details[open] > summary .chev {
  344. transform: rotate(180deg);
  345. }
  346. .block-body {
  347. padding: 0 12px 12px;
  348. border-top: 1px solid #f1f5f9;
  349. }
  350. .kv-grid {
  351. display: grid;
  352. grid-template-columns: repeat(2, minmax(0, 1fr));
  353. gap: 10px 20px;
  354. padding-top: 12px;
  355. }
  356. .kv {
  357. min-width: 0;
  358. display: flex;
  359. flex-direction: column;
  360. gap: 2px;
  361. }
  362. .kv.span {
  363. grid-column: 1 / -1;
  364. }
  365. .kv dt {
  366. margin: 0;
  367. font-size: 12px;
  368. font-weight: 500;
  369. color: var(--text-label);
  370. }
  371. .kv dd {
  372. margin: 0;
  373. font-size: 13px;
  374. color: var(--text);
  375. word-break: break-word;
  376. }
  377. .tag {
  378. display: inline-flex;
  379. align-items: center;
  380. height: 20px;
  381. padding: 0 7px;
  382. border-radius: 4px;
  383. font-size: 12px;
  384. font-weight: 600;
  385. }
  386. .tag--success {
  387. background: var(--primary-bg);
  388. color: #047857;
  389. }
  390. .tag--info {
  391. background: #f1f5f9;
  392. color: var(--text-muted);
  393. }
  394. .tag--danger {
  395. background: var(--danger-bg);
  396. color: var(--danger);
  397. }
  398. .tag--warn {
  399. background: var(--warn-bg);
  400. color: var(--warn);
  401. }
  402. .checks {
  403. display: flex;
  404. flex-wrap: wrap;
  405. gap: 8px 16px;
  406. }
  407. .check {
  408. display: inline-flex;
  409. align-items: center;
  410. gap: 6px;
  411. font-size: 13px;
  412. color: var(--text);
  413. }
  414. .box {
  415. width: 14px;
  416. height: 14px;
  417. border-radius: 3px;
  418. border: 1px solid #86efac;
  419. background: var(--primary-bg);
  420. color: #047857;
  421. display: inline-flex;
  422. align-items: center;
  423. justify-content: center;
  424. flex-shrink: 0;
  425. }
  426. .box--off {
  427. border-color: #fecaca;
  428. background: var(--danger-bg);
  429. color: var(--danger);
  430. }
  431. .subhead {
  432. margin: 12px 0 8px;
  433. font-size: 12px;
  434. font-weight: 600;
  435. color: var(--text-muted);
  436. }
  437. .wo-row {
  438. display: flex;
  439. flex-wrap: wrap;
  440. gap: 12px 24px;
  441. padding-top: 10px;
  442. }
  443. .task-grid {
  444. display: grid;
  445. grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  446. gap: 8px;
  447. margin-top: 8px;
  448. }
  449. .task {
  450. border: 1px solid var(--border-soft);
  451. border-radius: 8px;
  452. overflow: hidden;
  453. background: #fff;
  454. }
  455. .task__h {
  456. display: flex;
  457. align-items: center;
  458. justify-content: space-between;
  459. gap: 8px;
  460. padding: 8px 10px;
  461. border-bottom: 1px solid #f1f5f9;
  462. font-size: 13px;
  463. font-weight: 600;
  464. }
  465. .task__b {
  466. padding: 8px 10px;
  467. display: grid;
  468. gap: 4px;
  469. font-size: 12px;
  470. color: var(--text-muted);
  471. }
  472. .task__b b {
  473. font-weight: 500;
  474. color: var(--text);
  475. }
  476. .process-item {
  477. margin-top: 8px;
  478. padding: 8px 10px;
  479. border: 1px dashed #d1fae5;
  480. border-radius: 8px;
  481. background: #f8fffb;
  482. }
  483. .empty {
  484. padding: 10px 0 4px;
  485. font-size: 13px;
  486. color: var(--text-muted);
  487. }
  488. .field {
  489. margin-bottom: 14px;
  490. }
  491. .field label {
  492. display: block;
  493. font-size: 13px;
  494. font-weight: 500;
  495. margin-bottom: 6px;
  496. }
  497. .radios {
  498. display: flex;
  499. gap: 16px;
  500. height: 36px;
  501. align-items: center;
  502. }
  503. .radios label {
  504. display: inline-flex;
  505. align-items: center;
  506. gap: 6px;
  507. margin: 0;
  508. cursor: pointer;
  509. font-weight: 400;
  510. }
  511. textarea,
  512. .input-like {
  513. width: 100%;
  514. border: 1px solid var(--border);
  515. border-radius: 8px;
  516. padding: 8px 10px;
  517. font: inherit;
  518. font-size: 13px;
  519. resize: vertical;
  520. outline: none;
  521. }
  522. textarea:focus {
  523. border-color: var(--primary);
  524. box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2);
  525. }
  526. .attach-row {
  527. display: flex;
  528. flex-wrap: wrap;
  529. gap: 12px;
  530. }
  531. .upload-card {
  532. width: 120px;
  533. height: 88px;
  534. border: 1px dashed #a7f3d0;
  535. border-radius: 8px;
  536. background: #f0fdf4;
  537. display: flex;
  538. flex-direction: column;
  539. align-items: center;
  540. justify-content: center;
  541. gap: 4px;
  542. color: #047857;
  543. font-size: 11px;
  544. cursor: pointer;
  545. }
  546. .hint {
  547. margin: 8px 0 0;
  548. font-size: 12px;
  549. color: var(--text-label);
  550. }
  551. .dialog-foot {
  552. flex-shrink: 0;
  553. display: flex;
  554. justify-content: flex-end;
  555. gap: 8px;
  556. padding: 12px 22px;
  557. border-top: 1px solid var(--border-soft);
  558. background: var(--table-head);
  559. }
  560. .btn {
  561. height: 36px;
  562. padding: 0 16px;
  563. border-radius: 8px;
  564. font-size: 14px;
  565. font-weight: 600;
  566. display: inline-flex;
  567. align-items: center;
  568. gap: 6px;
  569. cursor: pointer;
  570. border: 1px solid var(--border);
  571. background: #fff;
  572. color: var(--text);
  573. }
  574. .btn svg {
  575. width: 16px;
  576. height: 16px;
  577. }
  578. .btn--main {
  579. background: var(--primary);
  580. border-color: var(--primary);
  581. color: #fff;
  582. }
  583. .btn--main:hover {
  584. background: var(--primary-dark);
  585. border-color: var(--primary-dark);
  586. }
  587. .note {
  588. margin: 0 0 12px;
  589. padding: 8px 10px;
  590. border-radius: 8px;
  591. background: #f8fafc;
  592. border: 1px solid var(--border-soft);
  593. font-size: 12px;
  594. color: var(--text-muted);
  595. }
  596. .tabs {
  597. display: flex;
  598. gap: 0;
  599. border-bottom: 1px solid var(--border-soft);
  600. margin: 0 -18px 12px;
  601. padding: 0 18px;
  602. }
  603. .tab {
  604. height: 36px;
  605. padding: 0 14px;
  606. border: none;
  607. background: transparent;
  608. font-size: 13px;
  609. font-weight: 600;
  610. color: var(--text-muted);
  611. cursor: pointer;
  612. border-bottom: 2px solid transparent;
  613. margin-bottom: -1px;
  614. }
  615. .tab.is-active {
  616. color: var(--primary-dark);
  617. border-bottom-color: var(--primary);
  618. }
  619. .tab-panel {
  620. display: none;
  621. }
  622. .tab-panel.is-show {
  623. display: block;
  624. }
  625. .fail-only {
  626. display: none;
  627. }
  628. body.is-fail .pass-only {
  629. display: none;
  630. }
  631. body.is-fail .fail-only {
  632. display: inline-flex;
  633. }
  634. body.is-fail .fail-block {
  635. display: block;
  636. }
  637. .current-hint {
  638. margin: 0 0 14px;
  639. font-size: 13px;
  640. color: var(--text-muted);
  641. }
  642. @media (max-width: 900px) {
  643. .dialog--split .dialog-body {
  644. grid-template-columns: 1fr;
  645. }
  646. .evidence-pane {
  647. border-right: none;
  648. border-bottom: 1px solid var(--border-soft);
  649. max-height: 46vh;
  650. }
  651. .kv-grid {
  652. grid-template-columns: 1fr;
  653. }
  654. }
  655. @media (prefers-reduced-motion: reduce) {
  656. * {
  657. transition: none !important;
  658. }
  659. }
  660. </style>
  661. </head>
  662. <body>
  663. <div class="page">
  664. <header class="banner">
  665. <h1>入库放行审核弹窗 · 如何展示接收 / 质检 / 生产信息</h1>
  666. <p>
  667. 审核时需要对照样本链路做结论,但不该把「查看详情」整页塞进表单。
  668. <strong>推荐方案 A:左侧滚动看证据,右侧固定填结论</strong>——表单始终在视野内,顶部用 3
  669. 枚状态 Tag 2 秒扫读是否可放行,需要时再展开细节。实现时可复用现有查看弹窗里的接收字段、质检分组与生产任务卡片。
  670. </p>
  671. <div class="scheme-row">
  672. <span>方案</span>
  673. <button type="button" class="scheme-btn" data-scheme="current">现状</button>
  674. <button type="button" class="scheme-btn is-active is-rec" data-scheme="a">A 左右分栏</button>
  675. <button type="button" class="scheme-btn" data-scheme="b">B 折叠叠放</button>
  676. <button type="button" class="scheme-btn" data-scheme="c">C 证据 Tab</button>
  677. <label class="toggle">
  678. <input id="failToggle" type="checkbox" />
  679. 模拟质检不通过
  680. </label>
  681. </div>
  682. </header>
  683. <div class="stage">
  684. <div class="backdrop">
  685. <!-- 现状 -->
  686. <section id="dlg-current" class="dialog dialog--current" aria-label="现状审核弹窗">
  687. <div class="dialog-head">
  688. <div class="dialog-head__row">
  689. <h2>入库放行审核</h2>
  690. <button class="icon-btn" type="button" aria-label="关闭" tabindex="-1">
  691. <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2">
  692. <path d="M6 6l12 12M18 6L6 18" />
  693. </svg>
  694. </button>
  695. </div>
  696. <div class="sample-meta">
  697. <div class="meta-row"><span class="k">实验室入库编码</span><span class="v">UBMC202608003</span></div>
  698. <div class="meta-row"><span class="k">样本编码</span><span class="v">KYJZ2026080009</span></div>
  699. </div>
  700. </div>
  701. <div class="dialog-body">
  702. <p class="current-hint">当前弹窗只有身份摘要 + 结论表单,看不到接收 / 质检 / 生产,审核员必须先点「查看」再回来填结论。</p>
  703. <div id="form-current"></div>
  704. </div>
  705. <div class="dialog-foot" data-foot></div>
  706. </section>
  707. <!-- 方案 A -->
  708. <section id="dlg-a" class="dialog dialog--split is-show" aria-label="方案A 左右分栏">
  709. <div class="dialog-head">
  710. <div class="dialog-head__row">
  711. <h2>入库放行审核</h2>
  712. <button class="icon-btn" type="button" aria-label="关闭" tabindex="-1">
  713. <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2">
  714. <path d="M6 6l12 12M18 6L6 18" />
  715. </svg>
  716. </button>
  717. </div>
  718. <div class="sample-meta">
  719. <div class="meta-row"><span class="k">实验室入库编码</span><span class="v">UBMC202608003</span></div>
  720. <div class="meta-row"><span class="k">样本编码</span><span class="v">KYJZ2026080009</span></div>
  721. </div>
  722. <div class="verdict" data-verdict></div>
  723. </div>
  724. <div class="dialog-body">
  725. <div class="evidence-pane">
  726. <p class="pane-title">样本证据(只读)</p>
  727. <div data-evidence></div>
  728. </div>
  729. <div class="form-pane">
  730. <p class="pane-title">审核操作</p>
  731. <p class="note">看完左侧证据后再填结论。不通过时建议写明原因。</p>
  732. <div data-form></div>
  733. </div>
  734. </div>
  735. <div class="dialog-foot" data-foot></div>
  736. </section>
  737. <!-- 方案 B -->
  738. <section id="dlg-b" class="dialog dialog--stack" aria-label="方案B 折叠叠放">
  739. <div class="dialog-head">
  740. <div class="dialog-head__row">
  741. <h2>入库放行审核</h2>
  742. <button class="icon-btn" type="button" aria-label="关闭" tabindex="-1">
  743. <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2">
  744. <path d="M6 6l12 12M18 6L6 18" />
  745. </svg>
  746. </button>
  747. </div>
  748. <div class="sample-meta">
  749. <div class="meta-row"><span class="k">实验室入库编码</span><span class="v">UBMC202608003</span></div>
  750. <div class="meta-row"><span class="k">样本编码</span><span class="v">KYJZ2026080009</span></div>
  751. </div>
  752. <div class="verdict" data-verdict></div>
  753. </div>
  754. <div class="dialog-body">
  755. <p class="note">证据与表单同一列滚动。弹窗更窄,但填结论时可能滚离证据区。</p>
  756. <div data-evidence></div>
  757. <div data-form></div>
  758. </div>
  759. <div class="dialog-foot" data-foot></div>
  760. </section>
  761. <!-- 方案 C -->
  762. <section id="dlg-c" class="dialog dialog--split" aria-label="方案C 证据Tab">
  763. <div class="dialog-head">
  764. <div class="dialog-head__row">
  765. <h2>入库放行审核</h2>
  766. <button class="icon-btn" type="button" aria-label="关闭" tabindex="-1">
  767. <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2">
  768. <path d="M6 6l12 12M18 6L6 18" />
  769. </svg>
  770. </button>
  771. </div>
  772. <div class="sample-meta">
  773. <div class="meta-row"><span class="k">实验室入库编码</span><span class="v">UBMC202608003</span></div>
  774. <div class="meta-row"><span class="k">样本编码</span><span class="v">KYJZ2026080009</span></div>
  775. </div>
  776. <div class="verdict" data-verdict></div>
  777. </div>
  778. <div class="dialog-body">
  779. <div class="evidence-pane">
  780. <div class="tabs" role="tablist">
  781. <button type="button" class="tab is-active" data-tab="recv">接收信息</button>
  782. <button type="button" class="tab" data-tab="qc">质检信息</button>
  783. <button type="button" class="tab" data-tab="prod">生产信息</button>
  784. </div>
  785. <div class="tab-panel is-show" data-panel="recv" data-ev-recv></div>
  786. <div class="tab-panel" data-panel="qc" data-ev-qc></div>
  787. <div class="tab-panel" data-panel="prod" data-ev-prod></div>
  788. </div>
  789. <div class="form-pane">
  790. <p class="pane-title">审核操作</p>
  791. <p class="note">Tab 降低一屏密度,但无法同时对照三类证据。</p>
  792. <div data-form></div>
  793. </div>
  794. </div>
  795. <div class="dialog-foot" data-foot></div>
  796. </section>
  797. </div>
  798. </div>
  799. </div>
  800. <template id="tpl-verdict">
  801. <span class="chip chip--ok pass-only">
  802. <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4"><path d="M5 12l5 5L20 7" /></svg>
  803. 接收 已接收
  804. </span>
  805. <span class="chip chip--ok pass-only">
  806. <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4"><path d="M5 12l5 5L20 7" /></svg>
  807. 门禁质检 全部通过
  808. </span>
  809. <span class="chip chip--bad fail-only">
  810. <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4"><path d="M6 6l12 12M18 6L6 18" /></svg>
  811. 门禁质检 存在不通过
  812. </span>
  813. <span class="chip chip--ok">
  814. <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4"><path d="M5 12l5 5L20 7" /></svg>
  815. 生产 已完成
  816. </span>
  817. </template>
  818. <template id="tpl-recv">
  819. <details class="block" open>
  820. <summary>
  821. <span class="block-title">接收信息</span>
  822. <svg class="chev" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 9l6 6 6-6" /></svg>
  823. </summary>
  824. <div class="block-body">
  825. <dl class="kv-grid">
  826. <div class="kv"><dt>接收时间</dt><dd>2026-08-10 14:22</dd></div>
  827. <div class="kv"><dt>接收经手人</dt><dd>张敏</dd></div>
  828. <div class="kv"><dt>实验室入库编码</dt><dd>UBMC202608003</dd></div>
  829. <div class="kv"><dt>接收温度(℃)</dt><dd>4.2℃</dd></div>
  830. <div class="kv"><dt>结论</dt><dd><span class="tag tag--success">接收</span></dd></div>
  831. <div class="kv span">
  832. <dt>检查项</dt>
  833. <dd>
  834. <div class="checks">
  835. <span class="check"><span class="box"><svg viewBox="0 0 24 24" width="10" height="10" fill="none" stroke="currentColor" stroke-width="3"><path d="M5 12l4 4L19 7"/></svg></span>包装完好</span>
  836. <span class="check"><span class="box"><svg viewBox="0 0 24 24" width="10" height="10" fill="none" stroke="currentColor" stroke-width="3"><path d="M5 12l4 4L19 7"/></svg></span>无渗漏</span>
  837. <span class="check"><span class="box"><svg viewBox="0 0 24 24" width="10" height="10" fill="none" stroke="currentColor" stroke-width="3"><path d="M5 12l4 4L19 7"/></svg></span>标识清晰</span>
  838. </div>
  839. </dd>
  840. </div>
  841. <div class="kv span"><dt>备注</dt><dd>—</dd></div>
  842. </dl>
  843. <p class="subhead">生产接收</p>
  844. <dl class="kv-grid" style="padding-top: 0">
  845. <div class="kv"><dt>处理时间</dt><dd>2026-08-10 16:05</dd></div>
  846. <div class="kv"><dt>处理人</dt><dd>李伟</dd></div>
  847. </dl>
  848. </div>
  849. </details>
  850. </template>
  851. <template id="tpl-qc">
  852. <details class="block" open>
  853. <summary>
  854. <span class="block-title">
  855. 质检信息
  856. <span class="tag tag--success pass-only">门禁通过</span>
  857. <span class="tag tag--danger fail-only">门禁不通过</span>
  858. </span>
  859. <svg class="chev" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 9l6 6 6-6" /></svg>
  860. </summary>
  861. <div class="block-body">
  862. <p class="subhead">样本接收质检(入库门禁)</p>
  863. <div class="wo-row">
  864. <div class="kv"><dt>工单号</dt><dd>QC2026080012</dd></div>
  865. <div class="kv"><dt>工单状态</dt><dd><span class="tag tag--success">已完成</span></dd></div>
  866. </div>
  867. <div class="task-grid">
  868. <article class="task">
  869. <div class="task__h">无菌检测 <span class="tag tag--success">通过</span></div>
  870. <div class="task__b">任务号 <b>QCT-0812-01</b></div>
  871. </article>
  872. <article class="task">
  873. <div class="task__h">细胞活性 <span class="tag tag--success">通过</span></div>
  874. <div class="task__b">任务号 <b>QCT-0812-02</b></div>
  875. </article>
  876. <article class="task pass-only">
  877. <div class="task__h">病原筛查 <span class="tag tag--success">通过</span></div>
  878. <div class="task__b">任务号 <b>QCT-0812-03</b></div>
  879. </article>
  880. <article class="task fail-only fail-block">
  881. <div class="task__h">病原筛查 <span class="tag tag--danger">不通过</span></div>
  882. <div class="task__b">任务号 <b>QCT-0812-03</b> · 结论备注:HBsAg 阳性,需复核</div>
  883. </article>
  884. </div>
  885. <p class="subhead">生产过程质检</p>
  886. <div class="process-item">
  887. <div class="wo-row" style="padding-top: 0">
  888. <div class="kv"><dt>质检对象</dt><dd>CP-UBMC-001 · 脐血单个核细胞</dd></div>
  889. <div class="kv"><dt>生产工单</dt><dd>PW2026080008</dd></div>
  890. </div>
  891. <div class="task-grid">
  892. <article class="task">
  893. <div class="task__h">内毒素 <span class="tag tag--success">通过</span></div>
  894. <div class="task__b">任务号 <b>QCT-0814-01</b></div>
  895. </article>
  896. </div>
  897. </div>
  898. </div>
  899. </details>
  900. </template>
  901. <template id="tpl-prod">
  902. <details class="block" open>
  903. <summary>
  904. <span class="block-title">生产信息</span>
  905. <svg class="chev" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 9l6 6 6-6" /></svg>
  906. </summary>
  907. <div class="block-body">
  908. <div class="wo-row">
  909. <div class="kv"><dt>工单号</dt><dd>PW2026080008</dd></div>
  910. <div class="kv"><dt>工单状态</dt><dd><span class="tag tag--success">已完成</span></dd></div>
  911. </div>
  912. <div class="task-grid">
  913. <article class="task">
  914. <div class="task__h">分离制备 <span class="tag tag--success">通过</span></div>
  915. <div class="task__b">任务号 <b>PT-0808-01</b><br />完成时间 <b>2026-08-12 11:20</b></div>
  916. </article>
  917. <article class="task">
  918. <div class="task__h">冻存入库 <span class="tag tag--success">通过</span></div>
  919. <div class="task__b">任务号 <b>PT-0808-02</b><br />完成时间 <b>2026-08-13 09:40</b></div>
  920. </article>
  921. </div>
  922. </div>
  923. </details>
  924. </template>
  925. <template id="tpl-form">
  926. <div class="field">
  927. <label>审核结论</label>
  928. <div class="radios">
  929. <label><input type="radio" name="c" value="tg" checked /> 通过</label>
  930. <label><input type="radio" name="c" value="btg" /> 不通过</label>
  931. </div>
  932. </div>
  933. <div class="field">
  934. <label>备注</label>
  935. <textarea rows="3" placeholder="可选"></textarea>
  936. </div>
  937. <div class="field">
  938. <label>附件</label>
  939. <div class="attach-row">
  940. <div class="upload-card">
  941. <svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 5v14M5 12h14" /></svg>
  942. 上传附件
  943. </div>
  944. </div>
  945. <p class="hint">支持拖拽或点击上传,单文件不超过 20MB</p>
  946. </div>
  947. </template>
  948. <template id="tpl-foot">
  949. <button type="button" class="btn">
  950. <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 6l12 12M18 6L6 18" /></svg>
  951. 取消
  952. </button>
  953. <button type="button" class="btn btn--main">
  954. <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12l5 5L20 7" /></svg>
  955. 确定
  956. </button>
  957. </template>
  958. <script>
  959. const clone = (id) => document.getElementById(id).content.cloneNode(true)
  960. function fillEvidence(root) {
  961. root.appendChild(clone('tpl-recv'))
  962. root.appendChild(clone('tpl-qc'))
  963. root.appendChild(clone('tpl-prod'))
  964. }
  965. document.querySelectorAll('[data-verdict]').forEach((el) => el.appendChild(clone('tpl-verdict')))
  966. document.querySelectorAll('[data-evidence]').forEach(fillEvidence)
  967. document.querySelector('[data-ev-recv]').appendChild(clone('tpl-recv'))
  968. document.querySelector('[data-ev-qc]').appendChild(clone('tpl-qc'))
  969. document.querySelector('[data-ev-prod]').appendChild(clone('tpl-prod'))
  970. let formSeq = 0
  971. function mountForm(el) {
  972. const node = clone('tpl-form')
  973. const name = `c${formSeq++}`
  974. node.querySelectorAll('input[type="radio"]').forEach((r) => {
  975. r.name = name
  976. })
  977. el.appendChild(node)
  978. }
  979. mountForm(document.getElementById('form-current'))
  980. document.querySelectorAll('[data-form]').forEach(mountForm)
  981. document.querySelectorAll('[data-foot]').forEach((el) => el.appendChild(clone('tpl-foot')))
  982. const dialogs = {
  983. current: document.getElementById('dlg-current'),
  984. a: document.getElementById('dlg-a'),
  985. b: document.getElementById('dlg-b'),
  986. c: document.getElementById('dlg-c')
  987. }
  988. document.querySelectorAll('.scheme-btn').forEach((btn) => {
  989. btn.addEventListener('click', () => {
  990. document.querySelectorAll('.scheme-btn').forEach((b) => b.classList.remove('is-active'))
  991. btn.classList.add('is-active')
  992. Object.values(dialogs).forEach((d) => d.classList.remove('is-show'))
  993. dialogs[btn.dataset.scheme].classList.add('is-show')
  994. })
  995. })
  996. document.getElementById('failToggle').addEventListener('change', (e) => {
  997. document.body.classList.toggle('is-fail', e.target.checked)
  998. })
  999. document.querySelectorAll('.tab').forEach((tab) => {
  1000. tab.addEventListener('click', () => {
  1001. const pane = tab.closest('.evidence-pane')
  1002. pane.querySelectorAll('.tab').forEach((t) => t.classList.remove('is-active'))
  1003. pane.querySelectorAll('.tab-panel').forEach((p) => p.classList.remove('is-show'))
  1004. tab.classList.add('is-active')
  1005. pane.querySelector(`[data-panel="${tab.dataset.tab}"]`).classList.add('is-show')
  1006. })
  1007. })
  1008. </script>
  1009. </body>
  1010. </html>