fresh-mint-quote-approver-setting-demo.html 24 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786
  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>Fresh Mint · 报价单审批人设置 Demo</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. --surface: #ffffff;
  19. --table-head: #f8fafc;
  20. --bg-page: #f8fafc;
  21. --shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  22. --radius: 10px;
  23. --warn-bg: #fffbeb;
  24. --warn: #d97706;
  25. }
  26. * { box-sizing: border-box; }
  27. body {
  28. margin: 0;
  29. min-height: 100vh;
  30. font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif;
  31. font-size: 14px;
  32. line-height: 1.5;
  33. color: var(--text);
  34. background: var(--bg-page);
  35. }
  36. .demo-page { max-width: 1180px; margin: 0 auto; padding: 32px 24px 96px; }
  37. .demo-head { margin-bottom: 28px; }
  38. .demo-head h1 {
  39. margin: 0 0 8px;
  40. font-size: 24px;
  41. font-weight: 700;
  42. letter-spacing: -0.02em;
  43. }
  44. .demo-head h1 span { color: var(--primary); }
  45. .demo-head p { margin: 0; color: var(--text-muted); max-width: 820px; }
  46. .toc {
  47. display: flex;
  48. flex-wrap: wrap;
  49. gap: 8px;
  50. margin: 20px 0 0;
  51. }
  52. .toc a {
  53. display: inline-flex;
  54. align-items: center;
  55. height: 32px;
  56. padding: 0 12px;
  57. border-radius: 8px;
  58. border: 1px solid var(--border);
  59. background: var(--surface);
  60. color: var(--text);
  61. text-decoration: none;
  62. font-size: 13px;
  63. font-weight: 500;
  64. }
  65. .toc a:hover,
  66. .toc a.rec {
  67. border-color: var(--primary);
  68. color: var(--primary-dark);
  69. background: var(--primary-bg);
  70. }
  71. .section { margin-top: 40px; }
  72. .section-head {
  73. display: flex;
  74. align-items: flex-start;
  75. justify-content: space-between;
  76. gap: 16px;
  77. margin-bottom: 14px;
  78. }
  79. .section-head h2 {
  80. margin: 0 0 4px;
  81. font-size: 18px;
  82. font-weight: 700;
  83. }
  84. .section-head p { margin: 0; color: var(--text-muted); font-size: 13px; max-width: 720px; }
  85. .badge {
  86. flex-shrink: 0;
  87. display: inline-flex;
  88. align-items: center;
  89. height: 26px;
  90. padding: 0 10px;
  91. border-radius: 999px;
  92. font-size: 12px;
  93. font-weight: 600;
  94. white-space: nowrap;
  95. }
  96. .badge-ok { background: var(--primary-bg); color: var(--primary-dark); }
  97. .badge-bad { background: #fef2f2; color: #b91c1c; }
  98. .badge-mid { background: #eff6ff; color: #1d4ed8; }
  99. .badge-warn { background: var(--warn-bg); color: var(--warn); }
  100. .split {
  101. display: grid;
  102. grid-template-columns: 1fr 1fr;
  103. gap: 16px;
  104. }
  105. @media (max-width: 900px) {
  106. .split { grid-template-columns: 1fr; }
  107. }
  108. .panel {
  109. background: var(--surface);
  110. border: 1px solid var(--border);
  111. border-radius: var(--radius);
  112. box-shadow: var(--shadow);
  113. overflow: hidden;
  114. }
  115. .panel-top {
  116. padding: 14px 16px;
  117. border-bottom: 1px solid var(--border);
  118. background: var(--surface);
  119. }
  120. .panel-top h3 {
  121. margin: 0;
  122. font-size: 15px;
  123. font-weight: 700;
  124. position: relative;
  125. padding-left: 10px;
  126. }
  127. .panel-top h3::before {
  128. content: "";
  129. position: absolute;
  130. left: 0;
  131. top: 2px;
  132. bottom: 2px;
  133. width: 3px;
  134. border-radius: 2px;
  135. background: var(--primary);
  136. }
  137. .panel-top .hint {
  138. margin: 6px 0 0;
  139. padding-left: 10px;
  140. font-size: 12px;
  141. color: var(--text-muted);
  142. }
  143. .panel-body { padding: 16px; }
  144. .layout-mock {
  145. display: grid;
  146. grid-template-columns: 180px 1fr;
  147. min-height: 420px;
  148. border: 1px solid var(--border);
  149. border-radius: var(--radius);
  150. overflow: hidden;
  151. background: var(--surface);
  152. box-shadow: var(--shadow);
  153. }
  154. .side {
  155. background: var(--surface);
  156. border-right: 1px solid var(--border);
  157. padding: 16px 12px;
  158. }
  159. .side .logo {
  160. font-weight: 700;
  161. font-size: 13px;
  162. margin-bottom: 16px;
  163. padding: 0 8px;
  164. }
  165. .side .logo span { color: var(--primary); }
  166. .nav-item {
  167. display: block;
  168. padding: 8px 10px;
  169. border-radius: 8px;
  170. font-size: 13px;
  171. color: var(--text-muted);
  172. margin-bottom: 2px;
  173. }
  174. .nav-item.active {
  175. background: var(--primary-bg);
  176. color: var(--primary-dark);
  177. font-weight: 600;
  178. }
  179. .main { padding: 16px; background: var(--bg-page); }
  180. .crumb {
  181. font-size: 12px;
  182. color: var(--text-muted);
  183. margin-bottom: 12px;
  184. }
  185. .form-grid {
  186. display: grid;
  187. grid-template-columns: 1fr 1fr;
  188. gap: 14px 16px;
  189. }
  190. .form-item { display: flex; flex-direction: column; gap: 6px; }
  191. .form-item.full { grid-column: 1 / -1; }
  192. .form-item label {
  193. font-size: 11px;
  194. font-weight: 600;
  195. color: var(--text-muted);
  196. letter-spacing: 0.02em;
  197. }
  198. .form-item label .tip {
  199. margin-left: 6px;
  200. font-weight: 400;
  201. color: #94a3b8;
  202. }
  203. .ctrl {
  204. height: 36px;
  205. border: 1px solid var(--border);
  206. border-radius: 8px;
  207. padding: 0 12px;
  208. display: flex;
  209. align-items: center;
  210. background: #fff;
  211. color: var(--text);
  212. font-size: 14px;
  213. }
  214. .ctrl.multi {
  215. height: auto;
  216. min-height: 36px;
  217. flex-wrap: wrap;
  218. gap: 6px;
  219. padding: 6px 10px;
  220. }
  221. .ctrl.textarea {
  222. height: auto;
  223. min-height: 88px;
  224. align-items: flex-start;
  225. padding: 10px 12px;
  226. color: var(--text-muted);
  227. }
  228. .ctrl.muted { color: var(--text-muted); }
  229. .tag {
  230. display: inline-flex;
  231. align-items: center;
  232. height: 24px;
  233. padding: 0 8px;
  234. border-radius: 6px;
  235. font-size: 12px;
  236. font-weight: 600;
  237. background: var(--primary-bg);
  238. color: var(--primary-dark);
  239. }
  240. .tag.muted {
  241. background: var(--table-head);
  242. color: var(--text-muted);
  243. }
  244. .tag.warn {
  245. background: var(--warn-bg);
  246. color: var(--warn);
  247. }
  248. .btn-row {
  249. display: flex;
  250. justify-content: flex-end;
  251. gap: 8px;
  252. margin-top: 16px;
  253. padding-top: 14px;
  254. border-top: 1px solid var(--border);
  255. }
  256. .btn {
  257. display: inline-flex;
  258. align-items: center;
  259. justify-content: center;
  260. gap: 6px;
  261. height: 36px;
  262. padding: 0 14px;
  263. border-radius: 8px;
  264. border: 1px solid var(--border);
  265. background: var(--surface);
  266. color: var(--text);
  267. font-size: 14px;
  268. font-weight: 600;
  269. font-family: inherit;
  270. cursor: pointer;
  271. }
  272. .btn-main {
  273. background: var(--primary);
  274. border-color: var(--primary);
  275. color: #fff;
  276. }
  277. .dialog {
  278. border: 1px solid var(--border);
  279. border-radius: var(--radius);
  280. background: #fff;
  281. box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12);
  282. overflow: hidden;
  283. max-width: 520px;
  284. margin: 0 auto;
  285. }
  286. .dialog-hd {
  287. padding: 14px 16px;
  288. border-bottom: 1px solid var(--border);
  289. font-weight: 700;
  290. font-size: 15px;
  291. }
  292. .dialog-bd { padding: 16px; }
  293. .dialog-ft {
  294. padding: 12px 16px;
  295. border-top: 1px solid var(--border);
  296. background: var(--table-head);
  297. display: flex;
  298. justify-content: flex-end;
  299. gap: 8px;
  300. }
  301. .callout {
  302. margin-bottom: 12px;
  303. padding: 10px 12px;
  304. border-radius: 8px;
  305. font-size: 12px;
  306. line-height: 1.45;
  307. }
  308. .callout.ok {
  309. background: var(--primary-bg);
  310. color: var(--primary-dark);
  311. border: 1px solid #a7f3d0;
  312. }
  313. .callout.bad {
  314. background: #fef2f2;
  315. color: #b91c1c;
  316. border: 1px solid #fecaca;
  317. }
  318. .flow {
  319. display: flex;
  320. align-items: center;
  321. flex-wrap: wrap;
  322. gap: 8px;
  323. padding: 14px 16px;
  324. background: var(--table-head);
  325. border-bottom: 1px solid var(--border);
  326. font-size: 13px;
  327. }
  328. .flow-step {
  329. display: inline-flex;
  330. align-items: center;
  331. gap: 6px;
  332. padding: 4px 10px;
  333. border-radius: 999px;
  334. background: #fff;
  335. border: 1px solid var(--border);
  336. color: var(--text-muted);
  337. font-weight: 500;
  338. }
  339. .flow-step.on {
  340. background: var(--primary-bg);
  341. border-color: #a7f3d0;
  342. color: var(--primary-dark);
  343. font-weight: 600;
  344. }
  345. .flow-arrow { color: #94a3b8; }
  346. .options {
  347. display: grid;
  348. grid-template-columns: repeat(3, 1fr);
  349. gap: 12px;
  350. }
  351. @media (max-width: 900px) {
  352. .options { grid-template-columns: 1fr; }
  353. }
  354. .option {
  355. border: 1px solid var(--border);
  356. border-radius: var(--radius);
  357. background: #fff;
  358. padding: 14px;
  359. cursor: pointer;
  360. transition: border-color .15s, box-shadow .15s, background .15s;
  361. text-align: left;
  362. font: inherit;
  363. color: inherit;
  364. position: relative;
  365. }
  366. .option:hover {
  367. border-color: #a7f3d0;
  368. background: #f8fffc;
  369. }
  370. .option.selected {
  371. border-color: var(--primary);
  372. background: var(--primary-bg);
  373. box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.18);
  374. }
  375. .option .letter {
  376. display: inline-flex;
  377. width: 24px;
  378. height: 24px;
  379. align-items: center;
  380. justify-content: center;
  381. border-radius: 6px;
  382. background: var(--table-head);
  383. color: var(--text-muted);
  384. font-size: 12px;
  385. font-weight: 700;
  386. margin-bottom: 10px;
  387. }
  388. .option.selected .letter {
  389. background: var(--primary);
  390. color: #fff;
  391. }
  392. .option h3 {
  393. margin: 0 0 6px;
  394. font-size: 14px;
  395. font-weight: 700;
  396. }
  397. .option p {
  398. margin: 0;
  399. font-size: 12px;
  400. color: var(--text-muted);
  401. line-height: 1.5;
  402. }
  403. .option .rec-flag {
  404. position: absolute;
  405. top: 12px;
  406. right: 12px;
  407. font-size: 11px;
  408. font-weight: 700;
  409. color: var(--primary-dark);
  410. background: #fff;
  411. border: 1px solid #a7f3d0;
  412. border-radius: 999px;
  413. padding: 2px 8px;
  414. }
  415. .option ul {
  416. margin: 10px 0 0;
  417. padding-left: 16px;
  418. font-size: 12px;
  419. color: var(--text-muted);
  420. }
  421. .option ul li { margin-bottom: 4px; }
  422. .pick-bar {
  423. position: sticky;
  424. bottom: 0;
  425. margin-top: 20px;
  426. padding: 12px 16px;
  427. border: 1px solid var(--border);
  428. border-radius: var(--radius);
  429. background: #fff;
  430. box-shadow: 0 -4px 20px rgba(15, 23, 42, 0.06);
  431. display: flex;
  432. align-items: center;
  433. justify-content: space-between;
  434. gap: 12px;
  435. }
  436. .pick-bar strong { color: var(--primary-dark); }
  437. .table {
  438. width: 100%;
  439. border-collapse: collapse;
  440. font-size: 13px;
  441. }
  442. .table th {
  443. text-align: left;
  444. padding: 10px 12px;
  445. background: var(--table-head);
  446. color: var(--text-muted);
  447. font-weight: 600;
  448. border-bottom: 1px solid var(--border);
  449. }
  450. .table td {
  451. padding: 10px 12px;
  452. border-bottom: 1px solid var(--border);
  453. }
  454. .table tr:last-child td { border-bottom: none; }
  455. .note {
  456. margin-top: 12px;
  457. font-size: 12px;
  458. color: var(--text-muted);
  459. }
  460. </style>
  461. </head>
  462. <body>
  463. <div class="demo-page">
  464. <header class="demo-head">
  465. <h1>报价单审批人设置 <span>Demo</span></h1>
  466. <p>
  467. 客户痛点:每次「提交审批」都要手选审批人,且每次选的人几乎相同。
  468. 本 Demo 展示:① 新增设置页如何配置默认审批人;② 提交弹窗如何自动带出;③ 三种实现路径供选型。
  469. </p>
  470. <nav class="toc">
  471. <a href="#pain">① 现状痛点</a>
  472. <a href="#setting" class="rec">② 设置页方案</a>
  473. <a href="#submit">③ 提交弹窗改造</a>
  474. <a href="#approaches">④ 三种路径选型</a>
  475. </nav>
  476. </header>
  477. <!-- ① 现状 -->
  478. <section class="section" id="pain">
  479. <div class="section-head">
  480. <div>
  481. <h2>① 现状:每次都要手选</h2>
  482. <p>打开「提交审批」弹窗时,审批人为空,必须重新选择;备注也常重复填写。</p>
  483. </div>
  484. <span class="badge badge-bad">当前体验</span>
  485. </div>
  486. <div class="panel">
  487. <div class="flow">
  488. <span class="flow-step">选中报价单</span>
  489. <span class="flow-arrow">→</span>
  490. <span class="flow-step">点击提交审批</span>
  491. <span class="flow-arrow">→</span>
  492. <span class="flow-step on">手选审批人(重复操作)</span>
  493. <span class="flow-arrow">→</span>
  494. <span class="flow-step">填写备注</span>
  495. <span class="flow-arrow">→</span>
  496. <span class="flow-step">确定</span>
  497. </div>
  498. <div class="panel-body">
  499. <div class="dialog">
  500. <div class="dialog-hd">提交审批</div>
  501. <div class="dialog-bd">
  502. <div class="callout bad">审批人为空,每次都要重新点选;用户反馈「系统不好用」。</div>
  503. <div class="form-item" style="margin-bottom:12px">
  504. <label>选择审批人 <span class="tip">可选择多个审批人,按顺序依次审批</span></label>
  505. <div class="ctrl muted">请选择审批人</div>
  506. </div>
  507. <div class="form-item">
  508. <label>备注说明</label>
  509. <div class="ctrl textarea">请输入备注说明</div>
  510. </div>
  511. </div>
  512. <div class="dialog-ft">
  513. <button class="btn" type="button">取消</button>
  514. <button class="btn btn-main" type="button">确定</button>
  515. </div>
  516. </div>
  517. </div>
  518. </div>
  519. </section>
  520. <!-- ② 设置页 -->
  521. <section class="section" id="setting">
  522. <div class="section-head">
  523. <div>
  524. <h2>② 新增模块:报价单审批人设置</h2>
  525. <p>建议挂在 CRM → 报价相关菜单下(如「报价单审批人设置」)。管理员配置一次,提交时默认带出。</p>
  526. </div>
  527. <span class="badge badge-ok">推荐示意</span>
  528. </div>
  529. <div class="layout-mock">
  530. <aside class="side">
  531. <div class="logo">山峡 <span>CRM</span></div>
  532. <div class="nav-item">报价单管理</div>
  533. <div class="nav-item active">报价单审批人设置</div>
  534. <div class="nav-item">合同管理</div>
  535. <div class="nav-item">客户管理</div>
  536. </aside>
  537. <div class="main">
  538. <div class="crumb">CRM / 报价 / 报价单审批人设置</div>
  539. <div class="panel">
  540. <div class="panel-top">
  541. <h3>报价单审批人设置</h3>
  542. <p class="hint">配置租户级默认审批人;提交报价单审批时自动预填,仍可临时调整。</p>
  543. </div>
  544. <div class="panel-body">
  545. <div class="form-grid">
  546. <div class="form-item full">
  547. <label>
  548. 默认审批人
  549. <span class="tip">支持多人,按选择顺序依次审批</span>
  550. </label>
  551. <div class="ctrl multi">
  552. <span class="tag">1. 张经理</span>
  553. <span class="tag">2. 李总</span>
  554. <span class="tag muted">+ 添加</span>
  555. </div>
  556. </div>
  557. <div class="form-item">
  558. <label>生效范围 <span class="tip">本 Demo 默认租户级</span></label>
  559. <div class="ctrl">全租户统一</div>
  560. </div>
  561. <div class="form-item">
  562. <label>状态</label>
  563. <div class="ctrl"><span class="tag">启用</span></div>
  564. </div>
  565. <div class="form-item full">
  566. <label>默认备注模板 <span class="tip">可选;提交时可改</span></label>
  567. <div class="ctrl textarea" style="color:var(--text)">请按常规折扣政策审批。</div>
  568. </div>
  569. </div>
  570. <div class="btn-row">
  571. <button class="btn" type="button">重置</button>
  572. <button class="btn btn-main" type="button">保存设置</button>
  573. </div>
  574. <p class="note">说明:本示意采用「租户级一份配置」。若后续要按部门/金额分岔,可再扩展,不必首版做满。</p>
  575. </div>
  576. </div>
  577. </div>
  578. </div>
  579. </section>
  580. <!-- ③ 提交弹窗改造 -->
  581. <section class="section" id="submit">
  582. <div class="section-head">
  583. <div>
  584. <h2>③ 提交审批:自动带出默认审批人</h2>
  585. <p>打开弹窗即预填设置中的审批人;用户多数情况只需点「确定」,特殊单仍可改人。</p>
  586. </div>
  587. <span class="badge badge-ok">改造后</span>
  588. </div>
  589. <div class="split">
  590. <div class="panel">
  591. <div class="panel-top">
  592. <h3>改造前</h3>
  593. <p class="hint">每次空白,强制手选</p>
  594. </div>
  595. <div class="panel-body">
  596. <div class="dialog">
  597. <div class="dialog-hd">提交审批</div>
  598. <div class="dialog-bd">
  599. <div class="callout bad">必须重新选择审批人</div>
  600. <div class="form-item" style="margin-bottom:12px">
  601. <label>选择审批人</label>
  602. <div class="ctrl muted">请选择审批人</div>
  603. </div>
  604. <div class="form-item">
  605. <label>备注说明</label>
  606. <div class="ctrl textarea">(空)</div>
  607. </div>
  608. </div>
  609. <div class="dialog-ft">
  610. <button class="btn" type="button">取消</button>
  611. <button class="btn btn-main" type="button">确定</button>
  612. </div>
  613. </div>
  614. </div>
  615. </div>
  616. <div class="panel">
  617. <div class="panel-top">
  618. <h3>改造后</h3>
  619. <p class="hint">默认带出,可改可确认</p>
  620. </div>
  621. <div class="panel-body">
  622. <div class="dialog">
  623. <div class="dialog-hd">提交审批</div>
  624. <div class="dialog-bd">
  625. <div class="callout ok">已按「报价单审批人设置」预填:张经理 → 李总。可修改后提交。</div>
  626. <div class="form-item" style="margin-bottom:12px">
  627. <label>选择审批人 <span class="tip">已预填,可调整</span></label>
  628. <div class="ctrl multi">
  629. <span class="tag">1. 张经理</span>
  630. <span class="tag">2. 李总</span>
  631. </div>
  632. </div>
  633. <div class="form-item">
  634. <label>备注说明</label>
  635. <div class="ctrl textarea" style="color:var(--text)">请按常规折扣政策审批。</div>
  636. </div>
  637. </div>
  638. <div class="dialog-ft">
  639. <button class="btn" type="button">取消</button>
  640. <button class="btn btn-main" type="button">确定</button>
  641. </div>
  642. </div>
  643. </div>
  644. </div>
  645. </div>
  646. </section>
  647. <!-- ④ 三种路径 -->
  648. <section class="section" id="approaches">
  649. <div class="section-head">
  650. <div>
  651. <h2>④ 实现路径选型(请点击选择)</h2>
  652. <p>三种都能解决「重复选人」;范围与复杂度不同。点击卡片选型,底部会显示当前选择。</p>
  653. </div>
  654. <span class="badge badge-mid">待确认</span>
  655. </div>
  656. <div class="options" id="approachOptions">
  657. <button type="button" class="option selected" data-choice="a" onclick="pickApproach(this)">
  658. <span class="rec-flag">推荐</span>
  659. <div class="letter">A</div>
  660. <h3>租户级默认审批人</h3>
  661. <p>新增「报价单审批人设置」页,存一份有序审批人列表;提交弹窗自动预填,仍可改。</p>
  662. <ul>
  663. <li>改动小,最快落地</li>
  664. <li>贴合「每次都选同一批人」</li>
  665. <li>不引入完整工作流引擎</li>
  666. </ul>
  667. </button>
  668. <button type="button" class="option" data-choice="b" onclick="pickApproach(this)">
  669. <div class="letter">B</div>
  670. <h3>记住「上次选的人」</h3>
  671. <p>不做设置页;按当前用户缓存最近一次提交的审批人,下次自动回填。</p>
  672. <ul>
  673. <li>开发更快</li>
  674. <li>无统一管控,新人无默认</li>
  675. <li>换人时可能误用旧配置</li>
  676. </ul>
  677. </button>
  678. <button type="button" class="option" data-choice="c" onclick="pickApproach(this)">
  679. <div class="letter">C</div>
  680. <h3>接入通用审批流</h3>
  681. <p>走 OpenSpec 工作流引擎(指定角色/条件分支)。长期正确,但本期过重。</p>
  682. <ul>
  683. <li>能力完整、可复用合同等业务</li>
  684. <li>依赖尚未落地的工作流子系统</li>
  685. <li>交付周期长,超出当前痛点</li>
  686. </ul>
  687. </button>
  688. </div>
  689. <div class="pick-bar">
  690. <div>
  691. 当前选择:<strong id="pickLabel">A · 租户级默认审批人</strong>
  692. <div class="note" style="margin:4px 0 0">看完后请在对话里回复选型(如「选 A」),我们再继续澄清细节。</div>
  693. </div>
  694. <span class="badge badge-ok" id="pickBadge">方案 A</span>
  695. </div>
  696. <div class="panel" style="margin-top:16px">
  697. <div class="panel-top">
  698. <h3>方案 A 若落地:涉及面速览</h3>
  699. </div>
  700. <table class="table">
  701. <thead>
  702. <tr>
  703. <th>层</th>
  704. <th>内容</th>
  705. </tr>
  706. </thead>
  707. <tbody>
  708. <tr>
  709. <td>菜单 / 页面</td>
  710. <td>CRM 下新增「报价单审批人设置」(表单页,非复杂列表)</td>
  711. </tr>
  712. <tr>
  713. <td>数据</td>
  714. <td>租户维度配置表:有序 approver_ids、可选默认备注、启用状态</td>
  715. </tr>
  716. <tr>
  717. <td>提交审批</td>
  718. <td>打开弹窗时读取配置并预填;未配置则保持现状必选</td>
  719. </tr>
  720. <tr>
  721. <td>权限</td>
  722. <td>设置页建议管理员可改;普通业务员只读使用默认值</td>
  723. </tr>
  724. </tbody>
  725. </table>
  726. </div>
  727. </section>
  728. </div>
  729. <script>
  730. const labels = {
  731. a: 'A · 租户级默认审批人',
  732. b: 'B · 记住上次选的人',
  733. c: 'C · 接入通用审批流'
  734. };
  735. const badges = { a: '方案 A', b: '方案 B', c: '方案 C' };
  736. function pickApproach(el) {
  737. document.querySelectorAll('#approachOptions .option').forEach((n) => n.classList.remove('selected'));
  738. el.classList.add('selected');
  739. const choice = el.getAttribute('data-choice');
  740. document.getElementById('pickLabel').textContent = labels[choice] || choice;
  741. document.getElementById('pickBadge').textContent = badges[choice] || choice;
  742. try {
  743. localStorage.setItem('quote-approver-demo-choice', choice);
  744. } catch (e) {}
  745. }
  746. try {
  747. const saved = localStorage.getItem('quote-approver-demo-choice');
  748. if (saved) {
  749. const el = document.querySelector('#approachOptions .option[data-choice="' + saved + '"]');
  750. if (el) pickApproach(el);
  751. }
  752. } catch (e) {}
  753. </script>
  754. </body>
  755. </html>