oa-receive-account-demo.html 23 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743
  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(Fresh Mint)</title>
  7. <link rel="preconnect" href="https://fonts.googleapis.com" />
  8. <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  9. <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
  10. <style>
  11. :root {
  12. --primary: #10b981;
  13. --primary-dark: #059669;
  14. --primary-bg: #ecfdf5;
  15. --text: #1e293b;
  16. --text-muted: #64748b;
  17. --border: #d9e8e2;
  18. --bg-page: #fefefe;
  19. --surface: #ffffff;
  20. --table-head: #f8fafc;
  21. --row-alt: #fafafa;
  22. --row-hover: #f1f5f9;
  23. --shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  24. --radius: 10px;
  25. --content-padding: 24px;
  26. --backdrop: rgba(15, 23, 42, 0.35);
  27. }
  28. * { box-sizing: border-box; }
  29. body {
  30. margin: 0;
  31. min-height: 100vh;
  32. font-family: Inter, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  33. font-size: 14px;
  34. line-height: 1.5;
  35. color: var(--text);
  36. background: var(--bg-page);
  37. }
  38. .layout { display: flex; min-height: 100vh; }
  39. .sidebar {
  40. width: 220px;
  41. flex-shrink: 0;
  42. background: var(--surface);
  43. border-right: 1px solid var(--border);
  44. padding: 24px 16px;
  45. }
  46. .logo {
  47. font-size: 16px;
  48. font-weight: 700;
  49. padding: 0 12px 20px;
  50. margin-bottom: 8px;
  51. border-bottom: 1px solid var(--border);
  52. }
  53. .logo span { color: var(--primary); }
  54. .nav-group {
  55. margin: 0 0 4px;
  56. padding: 8px 12px;
  57. font-size: 12px;
  58. font-weight: 700;
  59. color: var(--text-muted);
  60. letter-spacing: 0.02em;
  61. }
  62. .nav a {
  63. display: block;
  64. padding: 8px 12px 8px 14px;
  65. margin: 2px 0;
  66. border-radius: var(--radius);
  67. color: var(--text-muted);
  68. text-decoration: none;
  69. font-weight: 500;
  70. font-size: 13px;
  71. }
  72. .nav a:hover { background: var(--row-alt); color: var(--text); }
  73. .nav a.active {
  74. background: var(--primary-bg);
  75. color: var(--primary-dark);
  76. font-weight: 600;
  77. }
  78. .main {
  79. flex: 1;
  80. min-width: 0;
  81. display: flex;
  82. flex-direction: column;
  83. }
  84. .header {
  85. height: 56px;
  86. padding: 0 var(--content-padding);
  87. display: flex;
  88. align-items: center;
  89. justify-content: space-between;
  90. background: var(--surface);
  91. border-bottom: 1px solid var(--border);
  92. }
  93. .crumb { font-size: 13px; color: var(--text-muted); }
  94. .crumb b { color: var(--text); font-weight: 600; }
  95. .demo-hint {
  96. font-size: 12px;
  97. color: var(--primary-dark);
  98. background: var(--primary-bg);
  99. padding: 4px 10px;
  100. border-radius: 999px;
  101. font-weight: 600;
  102. }
  103. .content {
  104. flex: 1;
  105. padding: var(--content-padding);
  106. }
  107. .panel {
  108. background: var(--surface);
  109. border: 1px solid var(--border);
  110. border-radius: var(--radius);
  111. box-shadow: var(--shadow);
  112. overflow: hidden;
  113. }
  114. .panel-top {
  115. padding: 16px 20px 12px;
  116. }
  117. .title-bar-heading {
  118. margin: 0;
  119. font-size: 16px;
  120. font-weight: 700;
  121. display: flex;
  122. align-items: center;
  123. gap: 10px;
  124. }
  125. .title-bar-heading::before {
  126. content: "";
  127. width: 3px;
  128. height: 16px;
  129. border-radius: 2px;
  130. background: var(--primary);
  131. flex-shrink: 0;
  132. }
  133. .filter-block {
  134. padding: 0 20px 16px;
  135. }
  136. .filter-grid {
  137. display: grid;
  138. grid-template-columns: repeat(4, minmax(0, 1fr));
  139. gap: 12px 16px;
  140. }
  141. .field label {
  142. display: block;
  143. font-size: 11px;
  144. color: var(--text-muted);
  145. margin-bottom: 6px;
  146. font-weight: 500;
  147. }
  148. .field input,
  149. .field select,
  150. .field textarea {
  151. width: 100%;
  152. height: 36px;
  153. padding: 0 12px;
  154. border: 1px solid var(--border);
  155. border-radius: 8px;
  156. font: inherit;
  157. color: var(--text);
  158. background: var(--surface);
  159. outline: none;
  160. }
  161. .field textarea {
  162. height: auto;
  163. min-height: 72px;
  164. padding: 10px 12px;
  165. resize: vertical;
  166. }
  167. .field input:focus,
  168. .field select:focus,
  169. .field textarea:focus {
  170. border-color: var(--primary);
  171. box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2);
  172. }
  173. .filter-actions {
  174. display: flex;
  175. justify-content: flex-end;
  176. gap: 8px;
  177. margin-top: 12px;
  178. }
  179. .btn {
  180. appearance: none;
  181. border: 1px solid var(--border);
  182. background: var(--surface);
  183. color: var(--text);
  184. height: 36px;
  185. padding: 0 14px;
  186. border-radius: 8px;
  187. font: inherit;
  188. font-weight: 600;
  189. font-size: 13px;
  190. cursor: pointer;
  191. display: inline-flex;
  192. align-items: center;
  193. gap: 6px;
  194. }
  195. .btn:hover { background: var(--row-alt); }
  196. .btn-main {
  197. background: var(--primary);
  198. border-color: var(--primary);
  199. color: #fff;
  200. }
  201. .btn-main:hover { background: var(--primary-dark); border-color: var(--primary-dark); }
  202. .btn-ghost { color: var(--text-muted); }
  203. .list-toolbar {
  204. padding: 12px 20px;
  205. background: var(--table-head);
  206. border-top: 1px solid var(--border);
  207. display: flex;
  208. align-items: center;
  209. gap: 12px;
  210. }
  211. .sel-num { color: var(--primary-dark); font-weight: 700; }
  212. .list-body { border-top: 1px solid var(--border); }
  213. table.list-table {
  214. width: 100%;
  215. border-collapse: collapse;
  216. }
  217. .list-table th {
  218. background: var(--table-head);
  219. color: var(--text-muted);
  220. font-weight: 600;
  221. font-size: 13px;
  222. text-align: left;
  223. padding: 12px 14px;
  224. border-bottom: 1px solid var(--border);
  225. white-space: nowrap;
  226. }
  227. .list-table td {
  228. padding: 12px 14px;
  229. border-bottom: 1px solid var(--border);
  230. vertical-align: middle;
  231. }
  232. .list-table tbody tr:nth-child(even) td { background: var(--row-alt); }
  233. .list-table tbody tr:hover td { background: var(--row-hover); }
  234. .list-table .ops { white-space: nowrap; }
  235. .btn-op {
  236. appearance: none;
  237. border: none;
  238. background: transparent;
  239. color: var(--primary-dark);
  240. font: inherit;
  241. font-size: 13px;
  242. font-weight: 600;
  243. cursor: pointer;
  244. padding: 4px 6px;
  245. border-radius: 6px;
  246. }
  247. .btn-op:hover { background: var(--primary-bg); }
  248. .btn-op.danger { color: #dc2626; }
  249. .btn-op.danger:hover { background: #fef2f2; }
  250. .tag {
  251. display: inline-flex;
  252. align-items: center;
  253. height: 22px;
  254. padding: 0 8px;
  255. border-radius: 4px;
  256. font-size: 12px;
  257. font-weight: 600;
  258. white-space: nowrap;
  259. }
  260. .tag.alipay { background: var(--primary-bg); color: var(--primary-dark); }
  261. .tag.personal { background: #eff6ff; color: #2563eb; }
  262. .tag.corporate { background: #fff7ed; color: #c2410c; }
  263. .tag.muted { background: var(--table-head); color: var(--text-muted); }
  264. .pagination {
  265. display: flex;
  266. align-items: center;
  267. justify-content: space-between;
  268. padding: 12px 20px;
  269. border-top: 1px solid var(--border);
  270. color: var(--text-muted);
  271. font-size: 13px;
  272. }
  273. .pager-btns { display: flex; gap: 6px; }
  274. .pager-btns button {
  275. min-width: 32px;
  276. height: 32px;
  277. border: 1px solid var(--border);
  278. border-radius: 6px;
  279. background: var(--surface);
  280. cursor: pointer;
  281. font: inherit;
  282. }
  283. .pager-btns button.active {
  284. background: var(--primary);
  285. border-color: var(--primary);
  286. color: #fff;
  287. font-weight: 600;
  288. }
  289. /* Dialog */
  290. .backdrop {
  291. position: fixed;
  292. inset: 0;
  293. background: var(--backdrop);
  294. backdrop-filter: none;
  295. display: none;
  296. align-items: flex-start;
  297. justify-content: center;
  298. padding: 16px;
  299. z-index: 1000;
  300. overflow: auto;
  301. }
  302. .backdrop.is-open { display: flex; }
  303. .dialog {
  304. width: min(720px, 100%);
  305. margin: auto;
  306. background: var(--surface);
  307. border-radius: var(--radius);
  308. box-shadow: 0 20px 40px rgba(15, 23, 42, 0.15);
  309. max-height: calc(100vh - 100px);
  310. display: flex;
  311. flex-direction: column;
  312. overflow: hidden;
  313. }
  314. .dialog-header {
  315. padding: 16px 20px;
  316. border-bottom: 1px solid var(--border);
  317. font-size: 16px;
  318. font-weight: 700;
  319. flex-shrink: 0;
  320. }
  321. .dialog-body {
  322. padding: 20px;
  323. overflow-y: auto;
  324. flex: 1;
  325. min-height: 0;
  326. }
  327. .dialog-footer {
  328. padding: 12px 20px;
  329. border-top: 1px solid var(--border);
  330. background: var(--table-head);
  331. display: flex;
  332. justify-content: flex-end;
  333. gap: 8px;
  334. flex-shrink: 0;
  335. }
  336. .form-grid-2 {
  337. display: grid;
  338. grid-template-columns: 1fr 1fr;
  339. gap: 16px;
  340. }
  341. .form-col-span-2 { grid-column: 1 / -1; }
  342. .form-item label {
  343. display: block;
  344. font-size: 13px;
  345. font-weight: 600;
  346. margin-bottom: 6px;
  347. }
  348. .form-item label .req { color: #dc2626; margin-right: 2px; }
  349. .type-hint {
  350. margin: 0 0 16px;
  351. padding: 10px 12px;
  352. background: var(--primary-bg);
  353. border-radius: 8px;
  354. color: var(--primary-dark);
  355. font-size: 13px;
  356. }
  357. .bank-only { display: none; }
  358. .bank-only.is-show { display: contents; }
  359. .view-grid {
  360. display: grid;
  361. grid-template-columns: 1fr 1fr;
  362. gap: 14px 20px;
  363. }
  364. .view-item .k {
  365. font-size: 12px;
  366. color: var(--text-muted);
  367. margin-bottom: 4px;
  368. }
  369. .view-item .v { font-weight: 500; word-break: break-all; }
  370. .view-item.full { grid-column: 1 / -1; }
  371. .snapshot-full {
  372. display: flex;
  373. flex-direction: column;
  374. gap: 8px;
  375. }
  376. .snapshot-full .line {
  377. padding: 10px 12px;
  378. background: var(--row-alt);
  379. border-radius: 8px;
  380. border: 1px solid var(--border);
  381. line-height: 1.6;
  382. word-break: break-word;
  383. }
  384. .snapshot-full .line .muted {
  385. color: var(--text-muted);
  386. font-size: 12px;
  387. }
  388. @media (max-width: 960px) {
  389. .sidebar { display: none; }
  390. .filter-grid { grid-template-columns: 1fr 1fr; }
  391. .form-grid-2, .view-grid { grid-template-columns: 1fr; }
  392. }
  393. </style>
  394. </head>
  395. <body>
  396. <div class="layout">
  397. <aside class="sidebar">
  398. <div class="logo">中科兴皖 · <span>OA</span></div>
  399. <div class="nav">
  400. <div class="nav-group">OA审批</div>
  401. <a href="#">审批管理</a>
  402. <a href="#">工作流角色</a>
  403. <a href="#">发起审批</a>
  404. <a href="#">待办中心</a>
  405. <a href="#">已办中心</a>
  406. <a href="#">我发起的</a>
  407. <a href="#">抄送我的</a>
  408. <a class="active" href="#">收款账户管理</a>
  409. </div>
  410. </aside>
  411. <div class="main">
  412. <header class="header">
  413. <div class="crumb">OA审批 / <b>收款账户管理</b></div>
  414. <span class="demo-hint">Demo · 可点新增/编辑/查看;下方「审批展示」为完整字段快照</span>
  415. </header>
  416. <div class="content">
  417. <section class="panel">
  418. <div class="panel-top">
  419. <h2 class="title-bar-heading">收款账户管理</h2>
  420. </div>
  421. <div class="filter-block">
  422. <div class="filter-grid">
  423. <div class="field">
  424. <label>关键词</label>
  425. <input placeholder="户名 / 账号 / 银行" />
  426. </div>
  427. <div class="field">
  428. <label>账户类型</label>
  429. <select id="filterType">
  430. <option value="">全部</option>
  431. <option value="alipay">支付宝</option>
  432. <option value="personal">个人银行卡</option>
  433. <option value="corporate">对公银行账户</option>
  434. </select>
  435. </div>
  436. </div>
  437. <div class="filter-actions">
  438. <button class="btn btn-ghost" type="button">重置</button>
  439. <button class="btn btn-main" type="button">搜索</button>
  440. </div>
  441. </div>
  442. <div class="list-toolbar">
  443. <div>已选 <span class="sel-num">0</span> 项</div>
  444. <button class="btn btn-main" type="button" onclick="openForm('add')">+ 新增账户</button>
  445. <button class="btn" type="button">批量删除</button>
  446. </div>
  447. <div class="list-body">
  448. <table class="list-table">
  449. <thead>
  450. <tr>
  451. <th style="width:48px"><input type="checkbox" /></th>
  452. <th style="width:64px">序号</th>
  453. <th>账户类型</th>
  454. <th>户名</th>
  455. <th>账号</th>
  456. <th>银行</th>
  457. <th>开户地 / 支行</th>
  458. <th>备注</th>
  459. <th style="min-width:200px">操作</th>
  460. </tr>
  461. </thead>
  462. <tbody id="tableBody"></tbody>
  463. </table>
  464. </div>
  465. <div class="pagination">
  466. <span>共 3 条</span>
  467. <div class="pager-btns">
  468. <button type="button">‹</button>
  469. <button class="active" type="button">1</button>
  470. <button type="button">›</button>
  471. </div>
  472. </div>
  473. </section>
  474. <section class="panel" style="margin-top:16px">
  475. <div class="panel-top">
  476. <h2 class="title-bar-heading">审批单 · 收款账户完整展示(只读快照)</h2>
  477. </div>
  478. <div style="padding:0 20px 20px">
  479. <div class="field" style="margin-bottom:8px">
  480. <label style="font-size:13px;font-weight:600;color:var(--text)">收款账户</label>
  481. </div>
  482. <div class="snapshot-full" id="snapshotPreview"></div>
  483. </div>
  484. </section>
  485. </div>
  486. </div>
  487. </div>
  488. <!-- 新增 / 编辑 -->
  489. <div class="backdrop" id="formBackdrop" onclick="if(event.target===this)closeForm()">
  490. <div class="dialog" role="dialog" aria-modal="true">
  491. <div class="dialog-header" id="formTitle">新增收款账户</div>
  492. <div class="dialog-body">
  493. <p class="type-hint" id="typeHint">支付宝仅需填写户名、账号与备注。</p>
  494. <div class="form-grid-2">
  495. <div class="form-item form-col-span-2">
  496. <label><span class="req">*</span>账户类型</label>
  497. <select id="accountType" onchange="onTypeChange()">
  498. <option value="alipay">支付宝</option>
  499. <option value="personal">个人银行卡</option>
  500. <option value="corporate">对公银行账户</option>
  501. </select>
  502. </div>
  503. <div class="form-item">
  504. <label><span class="req">*</span>户名</label>
  505. <input id="accountName" placeholder="请输入户名" />
  506. </div>
  507. <div class="form-item">
  508. <label><span class="req">*</span>账号</label>
  509. <input id="accountNo" placeholder="请输入账号" />
  510. </div>
  511. <div class="bank-only" id="bankFields">
  512. <div class="form-item">
  513. <label><span class="req">*</span>银行</label>
  514. <input id="bankName" placeholder="如:中国工商银行" />
  515. </div>
  516. <div class="form-item">
  517. <label><span class="req">*</span>银行所在省 / 市</label>
  518. <div style="display:flex;gap:8px">
  519. <select id="bankProvince" style="flex:1">
  520. <option value="">请选择省</option>
  521. <option>安徽省</option>
  522. <option>江苏省</option>
  523. <option>浙江省</option>
  524. </select>
  525. <select id="bankCity" style="flex:1">
  526. <option value="">请选择市</option>
  527. <option>合肥市</option>
  528. <option>芜湖市</option>
  529. <option>南京市</option>
  530. </select>
  531. </div>
  532. </div>
  533. <div class="form-item form-col-span-2">
  534. <label><span class="req">*</span>银行支行</label>
  535. <input id="bankBranch" placeholder="请输入开户支行全称" />
  536. </div>
  537. </div>
  538. <div class="form-item form-col-span-2">
  539. <label>备注</label>
  540. <textarea id="remark" placeholder="选填"></textarea>
  541. </div>
  542. </div>
  543. </div>
  544. <div class="dialog-footer">
  545. <button class="btn" type="button" onclick="closeForm()">✕ 取消</button>
  546. <button class="btn btn-main" type="button" onclick="closeForm()">✓ 确定</button>
  547. </div>
  548. </div>
  549. </div>
  550. <!-- 查看 -->
  551. <div class="backdrop" id="viewBackdrop" onclick="if(event.target===this)closeView()">
  552. <div class="dialog" style="width:min(640px,100%)">
  553. <div class="dialog-header">查看收款账户</div>
  554. <div class="dialog-body">
  555. <div class="view-grid" id="viewBody"></div>
  556. </div>
  557. <div class="dialog-footer">
  558. <button class="btn btn-main" type="button" onclick="closeView()">关闭</button>
  559. </div>
  560. </div>
  561. </div>
  562. <script>
  563. const TYPE_META = {
  564. alipay: { label: '支付宝', tag: 'alipay', hint: '支付宝仅需填写户名、账号与备注。' },
  565. personal: { label: '个人银行卡', tag: 'personal', hint: '个人银行卡需填写户名、账号、银行、省/市、支行与备注。' },
  566. corporate: { label: '对公银行账户', tag: 'corporate', hint: '对公银行账户需填写户名、账号、银行、省/市、支行与备注。' }
  567. }
  568. const rows = [
  569. {
  570. id: 1,
  571. type: 'alipay',
  572. accountName: '张三',
  573. accountNo: '138****8888',
  574. bankName: '—',
  575. region: '—',
  576. bankBranch: '—',
  577. remark: '日常报销收款'
  578. },
  579. {
  580. id: 2,
  581. type: 'personal',
  582. accountName: '李四',
  583. accountNo: '6222 **** **** 1234',
  584. bankName: '中国工商银行',
  585. region: '安徽省 / 合肥市',
  586. bankBranch: '工行合肥长江中路支行',
  587. remark: ''
  588. },
  589. {
  590. id: 3,
  591. type: 'corporate',
  592. accountName: '中科兴皖生物科技有限公司',
  593. accountNo: '3401 **** **** 5678',
  594. bankName: '中国建设银行',
  595. region: '安徽省 / 合肥市',
  596. bankBranch: '建行合肥高新支行',
  597. remark: '对公付款默认账户'
  598. }
  599. ]
  600. function formatFullLine(r) {
  601. const meta = TYPE_META[r.type]
  602. const parts = [meta.label, r.accountName, r.accountNo]
  603. if (r.type !== 'alipay') {
  604. parts.push(r.bankName, r.region, r.bankBranch)
  605. }
  606. if (r.remark) parts.push(r.remark)
  607. return parts.filter(Boolean).join(' · ')
  608. }
  609. function renderSnapshotPreview() {
  610. const el = document.getElementById('snapshotPreview')
  611. el.innerHTML = rows.map((r) =>
  612. `<div class="line">${formatFullLine(r)}<div class="muted">快照 id=${r.id} · 主数据后续修改不影响本行</div></div>`
  613. ).join('')
  614. }
  615. function renderTable() {
  616. const tbody = document.getElementById('tableBody')
  617. tbody.innerHTML = rows.map((r, i) => {
  618. const meta = TYPE_META[r.type]
  619. return `<tr>
  620. <td><input type="checkbox" /></td>
  621. <td>${i + 1}</td>
  622. <td><span class="tag ${meta.tag}">${meta.label}</span></td>
  623. <td>${r.accountName}</td>
  624. <td>${r.accountNo}</td>
  625. <td>${r.bankName}</td>
  626. <td>${r.type === 'alipay' ? '—' : `${r.region}<div style="color:var(--text-muted);font-size:12px;margin-top:2px">${r.bankBranch}</div>`}</td>
  627. <td>${r.remark || '<span class="tag muted">无</span>'}</td>
  628. <td class="ops">
  629. <button class="btn-op" type="button" onclick="openView(${r.id})">查看</button>
  630. <button class="btn-op" type="button" onclick="openForm('edit', ${r.id})">编辑</button>
  631. <button class="btn-op danger" type="button">删除</button>
  632. </td>
  633. </tr>`
  634. }).join('')
  635. renderSnapshotPreview()
  636. }
  637. function onTypeChange() {
  638. const type = document.getElementById('accountType').value
  639. const meta = TYPE_META[type]
  640. document.getElementById('typeHint').textContent = meta.hint
  641. const bank = document.getElementById('bankFields')
  642. if (type === 'alipay') bank.classList.remove('is-show')
  643. else bank.classList.add('is-show')
  644. }
  645. function openForm(mode, id) {
  646. document.getElementById('formTitle').textContent = mode === 'add' ? '新增收款账户' : '编辑收款账户'
  647. const row = rows.find(r => r.id === id)
  648. if (row) {
  649. document.getElementById('accountType').value = row.type
  650. document.getElementById('accountName').value = row.accountName
  651. document.getElementById('accountNo').value = row.accountNo.replace(/\s|\*/g, '') || row.accountNo
  652. document.getElementById('bankName').value = row.bankName === '—' ? '' : row.bankName
  653. document.getElementById('bankBranch').value = row.bankBranch === '—' ? '' : row.bankBranch
  654. document.getElementById('remark').value = row.remark || ''
  655. } else {
  656. document.getElementById('accountType').value = 'alipay'
  657. document.getElementById('accountName').value = ''
  658. document.getElementById('accountNo').value = ''
  659. document.getElementById('bankName').value = ''
  660. document.getElementById('bankBranch').value = ''
  661. document.getElementById('remark').value = ''
  662. document.getElementById('bankProvince').value = ''
  663. document.getElementById('bankCity').value = ''
  664. }
  665. onTypeChange()
  666. document.getElementById('formBackdrop').classList.add('is-open')
  667. }
  668. function closeForm() {
  669. document.getElementById('formBackdrop').classList.remove('is-open')
  670. }
  671. function openView(id) {
  672. const row = rows.find(r => r.id === id)
  673. if (!row) return
  674. const meta = TYPE_META[row.type]
  675. const isBank = row.type !== 'alipay'
  676. const items = [
  677. { k: '账户类型', v: `<span class="tag ${meta.tag}">${meta.label}</span>` },
  678. { k: '户名', v: row.accountName },
  679. { k: '账号', v: row.accountNo },
  680. ]
  681. if (isBank) {
  682. items.push(
  683. { k: '银行', v: row.bankName },
  684. { k: '银行所在省 / 市', v: row.region },
  685. { k: '银行支行', v: row.bankBranch, full: true }
  686. )
  687. }
  688. items.push({ k: '备注', v: row.remark || '—', full: true })
  689. document.getElementById('viewBody').innerHTML = items.map(it =>
  690. `<div class="view-item${it.full ? ' full' : ''}"><div class="k">${it.k}</div><div class="v">${it.v}</div></div>`
  691. ).join('')
  692. document.getElementById('viewBackdrop').classList.add('is-open')
  693. }
  694. function closeView() {
  695. document.getElementById('viewBackdrop').classList.remove('is-open')
  696. }
  697. document.addEventListener('keydown', (e) => {
  698. if (e.key === 'Escape') { closeForm(); closeView() }
  699. })
  700. renderTable()
  701. </script>
  702. </body>
  703. </html>