fresh-mint-pl-plan-form-available-qty-demo.html 21 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432
  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. --bg-page: #f1f5f9;
  20. --shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  21. --shadow-lg: 0 12px 40px rgba(15, 23, 42, 0.14);
  22. --radius: 10px;
  23. --qty-plan: #dc2626;
  24. --qty-avail: #059669;
  25. --load-bg: #ecfdf5;
  26. --delivery-bg: #f0f9ff;
  27. }
  28. * { box-sizing: border-box; }
  29. body {
  30. margin: 0; min-height: 100vh;
  31. font-family: Inter, -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;
  32. font-size: 14px; line-height: 1.5; color: var(--text); background: var(--bg-page);
  33. }
  34. .demo-page { max-width: 1100px; margin: 0 auto; padding: 28px 24px 80px; }
  35. .demo-head h1 { margin: 0 0 8px; font-size: 22px; font-weight: 700; }
  36. .demo-head h1 span { color: var(--primary); }
  37. .demo-head p { margin: 0; color: var(--text-muted); max-width: 900px; }
  38. .meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
  39. .pill {
  40. display: inline-flex; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 500;
  41. background: var(--primary-bg); color: var(--primary-dark); border: 1px solid #a7f3d0;
  42. }
  43. .pill.muted { background: #f1f5f9; color: var(--text-muted); border-color: #e2e8f0; }
  44. .pill.red { background: #fef2f2; color: var(--qty-plan); border-color: #fecaca; }
  45. .pill.green { background: var(--primary-bg); color: var(--qty-avail); border-color: #a7f3d0; }
  46. .brief { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 16px 0; }
  47. @media (max-width: 800px) { .brief { grid-template-columns: 1fr; } }
  48. .card {
  49. background: var(--surface); border: 1px solid var(--border);
  50. border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow);
  51. }
  52. .card h2 {
  53. margin: 0 0 8px; font-size: 14px; font-weight: 600;
  54. padding-left: 10px; border-left: 3px solid var(--primary); color: var(--primary-dark);
  55. }
  56. .card ul { margin: 0; padding-left: 18px; color: var(--text-muted); font-size: 13px; }
  57. .card li { margin: 4px 0; }
  58. .card li strong { color: var(--text); }
  59. .dialog-shell {
  60. background: var(--surface); border: 1px solid var(--border);
  61. border-radius: 12px; box-shadow: var(--shadow-lg); overflow: hidden;
  62. }
  63. .dialog-header {
  64. display: flex; align-items: center; justify-content: space-between;
  65. padding: 14px 20px; border-bottom: 1px solid var(--border);
  66. }
  67. .dialog-header h3 { margin: 0; font-size: 16px; font-weight: 600; }
  68. .dialog-body { padding: 16px 20px 20px; max-height: 70vh; overflow: auto; }
  69. .dialog-footer {
  70. display: flex; justify-content: flex-end; gap: 8px;
  71. padding: 12px 20px; border-top: 1px solid var(--border);
  72. }
  73. .btn {
  74. appearance: none; display: inline-flex; align-items: center; gap: 6px;
  75. height: 32px; padding: 0 12px; border-radius: 8px; font-size: 13px; font-weight: 500;
  76. border: 1px solid var(--border); background: #fff; color: var(--text); cursor: pointer;
  77. }
  78. .btn.primary { background: var(--primary); border-color: var(--primary); color: #fff; }
  79. .section { border: 1px solid var(--border); border-radius: 10px; margin-bottom: 14px; overflow: hidden; }
  80. .section-head {
  81. display: flex; align-items: center; justify-content: space-between;
  82. padding: 10px 14px; font-weight: 600; font-size: 13px;
  83. }
  84. .section.load .section-head { background: var(--load-bg); color: var(--primary-dark); }
  85. .section.delivery .section-head { background: var(--delivery-bg); color: #0369a1; }
  86. .section-body { padding: 12px 14px 14px; }
  87. .kv { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 12px; }
  88. .kv .label { font-size: 11px; color: var(--text-muted); }
  89. .kv .value { font-size: 13px; font-weight: 500; }
  90. .product-card {
  91. border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; background: #fff; margin-bottom: 10px;
  92. }
  93. .row1, .row2 { display: grid; gap: 10px; align-items: end; }
  94. .row1 { grid-template-columns: 1.4fr 1fr 1fr 1fr 0.7fr; margin-bottom: 10px; }
  95. .row2 { grid-template-columns: 1.1fr 1.1fr 1fr 1fr 1fr; }
  96. @media (max-width: 900px) { .row1, .row2 { grid-template-columns: 1fr 1fr; } }
  97. .field .flabel { display: block; font-size: 11px; color: var(--text-muted); margin-bottom: 4px; }
  98. .field .fval {
  99. height: 36px; display: flex; align-items: center; padding: 0 10px;
  100. border: 1px solid var(--border); border-radius: 8px; background: #f8fafc; font-size: 13px;
  101. }
  102. .field .fval.input {
  103. background: #fff; justify-content: flex-end; font-variant-numeric: tabular-nums; font-weight: 600;
  104. }
  105. .field .fval.input.plan {
  106. color: var(--qty-plan); border-color: #fecaca; background: #fff5f5;
  107. }
  108. .field .fval.input.plan.is-over { box-shadow: 0 0 0 1px var(--qty-plan); }
  109. .over-tip { margin-top: 4px; font-size: 11px; color: var(--qty-plan); }
  110. .avail-wrap { display: flex; align-items: center; gap: 6px; height: 36px; }
  111. .avail-num { font-size: 15px; font-weight: 700; color: var(--qty-avail); font-variant-numeric: tabular-nums; }
  112. .help-btn {
  113. width: 20px; height: 20px; border-radius: 50%;
  114. border: 1px solid #a7f3d0; background: var(--primary-bg);
  115. color: var(--primary-dark); font-size: 12px; font-weight: 700;
  116. cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0;
  117. }
  118. .help-btn:hover { background: var(--primary); color: #fff; border-color: var(--primary); }
  119. .mask {
  120. position: fixed; inset: 0; background: rgba(15, 23, 42, 0.45);
  121. display: none; align-items: center; justify-content: center;
  122. padding: 24px; z-index: 50; backdrop-filter: none;
  123. }
  124. .mask.show { display: flex; }
  125. .qty-dialog {
  126. width: min(640px, 100%); background: #fff; border-radius: 12px;
  127. border: 1px solid var(--border); box-shadow: var(--shadow-lg); overflow: hidden;
  128. }
  129. .qty-dialog-header {
  130. display: flex; align-items: center; justify-content: space-between;
  131. padding: 14px 18px; border-bottom: 1px solid var(--border);
  132. }
  133. .qty-dialog-header h4 { margin: 0; font-size: 15px; font-weight: 600; color: var(--primary-dark); }
  134. .qty-dialog-body { padding: 16px 18px; max-height: 60vh; overflow: auto; }
  135. .qty-dialog-footer {
  136. display: flex; justify-content: flex-end; gap: 8px;
  137. padding: 12px 18px; border-top: 1px solid var(--border);
  138. }
  139. .stats { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-bottom: 12px; }
  140. .stat { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; padding: 10px; }
  141. .stat .k { font-size: 11px; color: var(--text-muted); }
  142. .stat .v { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
  143. .stat .v.green { color: var(--qty-avail); }
  144. .sub { margin: 0 0 8px; font-size: 13px; font-weight: 600; }
  145. .qty-dialog table { width: 100%; border-collapse: collapse; font-size: 13px; }
  146. .qty-dialog th, .qty-dialog td { border: 1px solid var(--border); padding: 8px 10px; text-align: left; }
  147. .qty-dialog th { background: #f8fafc; font-weight: 600; }
  148. .qty-dialog td.num { text-align: right; font-variant-numeric: tabular-nums; }
  149. .qty-dialog a { color: var(--primary-dark); text-decoration: none; font-weight: 500; }
  150. .legend {
  151. margin-top: 14px; padding: 12px 14px; border-radius: 10px;
  152. background: #fff; border: 1px dashed #a7f3d0; font-size: 13px; color: var(--text-muted);
  153. }
  154. .legend strong { color: var(--primary-dark); }
  155. </style>
  156. </head>
  157. <body>
  158. <div class="demo-page">
  159. <header class="demo-head">
  160. <h1>运输计划表单 · <span>可安排数量</span></h1>
  161. <p>
  162. 装货/送货产品区:可安排(绿)在计划数量(红)前;超可安排仅标红提示,仍可保存/安排(安排接口硬拦)。
  163. 问号<strong>点击弹窗</strong>展示合同数量、已安排、可安排,及已安排该产品的运输计划列表。
  164. </p>
  165. <div class="meta">
  166. <span class="pill muted">/#/pl/plan-module/plan</span>
  167. <span class="pill green">可安排 · 绿</span>
  168. <span class="pill red">计划数量 · 红 · 超量仅提示</span>
  169. <span class="pill">? · 点击弹窗</span>
  170. </div>
  171. </header>
  172. <div class="brief">
  173. <div class="card">
  174. <h2>已确认</h2>
  175. <ul>
  176. <li>计划数量 &gt; 可安排 → <strong>仅标红</strong>,不拦保存/安排</li>
  177. <li>安排时仍走合同数量硬拦接口</li>
  178. <li>问号 → <strong>弹窗</strong>(非气泡悬停)</li>
  179. </ul>
  180. </div>
  181. <div class="card">
  182. <h2>口径</h2>
  183. <ul>
  184. <li>可安排 = 合同数量 − 已安排(编辑扣本计划旧量)</li>
  185. <li>按本段合同分别计算</li>
  186. <li>框架无固定量:可安排「—」,弹窗说明不限额</li>
  187. </ul>
  188. </div>
  189. </div>
  190. <div class="dialog-shell">
  191. <div class="dialog-header">
  192. <h3>编辑运输计划 · YP20260830021</h3>
  193. <button type="button" class="btn" tabindex="-1">×</button>
  194. </div>
  195. <div class="dialog-body">
  196. <section class="section load">
  197. <div class="section-head">
  198. <span>装货信息</span>
  199. <span style="font-weight:500;font-size:12px;">合同 HT-CG-2026-102</span>
  200. </div>
  201. <div class="section-body">
  202. <div class="kv">
  203. <div><div class="label">装货客户</div><div class="value">云栋供应商</div></div>
  204. <div><div class="label">装货地址</div><div class="value">安庆某某园区 A 库</div></div>
  205. <div><div class="label">装货时间</div><div class="value">2026-08-31 09:00</div></div>
  206. </div>
  207. <article class="product-card">
  208. <div class="row1">
  209. <div class="field"><span class="flabel">产品名称</span><div class="fval">液碱 32%</div></div>
  210. <div class="field"><span class="flabel">别名</span><div class="fval">—</div></div>
  211. <div class="field"><span class="flabel">品牌</span><div class="fval">不限品牌</div></div>
  212. <div class="field"><span class="flabel">规格型号</span><div class="fval">—</div></div>
  213. <div class="field"><span class="flabel">单位</span><div class="fval">吨</div></div>
  214. </div>
  215. <div class="row2">
  216. <div class="field">
  217. <span class="flabel">可安排数量</span>
  218. <div class="avail-wrap">
  219. <span class="avail-num">50.000</span>
  220. <button type="button" class="help-btn" data-open="dlg-load" title="查看合同用量">?</button>
  221. </div>
  222. </div>
  223. <div class="field">
  224. <span class="flabel">计划数量</span>
  225. <div class="fval input plan">40.000</div>
  226. </div>
  227. <div class="field"><span class="flabel">包装规格</span><div class="fval">槽罐</div></div>
  228. <div class="field"><span class="flabel">送货方式</span><div class="fval">送货上门</div></div>
  229. <div class="field"><span class="flabel">备注</span><div class="fval">—</div></div>
  230. </div>
  231. </article>
  232. <article class="product-card">
  233. <div class="row1">
  234. <div class="field"><span class="flabel">产品名称</span><div class="fval">98% 硫酸(超量示意)</div></div>
  235. <div class="field"><span class="flabel">别名</span><div class="fval">—</div></div>
  236. <div class="field"><span class="flabel">品牌</span><div class="fval">—</div></div>
  237. <div class="field"><span class="flabel">规格型号</span><div class="fval">工业级</div></div>
  238. <div class="field"><span class="flabel">单位</span><div class="fval">吨</div></div>
  239. </div>
  240. <div class="row2">
  241. <div class="field">
  242. <span class="flabel">可安排数量</span>
  243. <div class="avail-wrap">
  244. <span class="avail-num">20.000</span>
  245. <button type="button" class="help-btn" data-open="dlg-over" title="查看合同用量">?</button>
  246. </div>
  247. </div>
  248. <div class="field">
  249. <span class="flabel">计划数量</span>
  250. <div class="fval input plan is-over">30.000</div>
  251. <div class="over-tip">已超过可安排数量,安排时将被拦截</div>
  252. </div>
  253. <div class="field"><span class="flabel">包装规格</span><div class="fval">槽罐</div></div>
  254. <div class="field"><span class="flabel">送货方式</span><div class="fval">自提</div></div>
  255. <div class="field"><span class="flabel">备注</span><div class="fval">标红仍可暂存</div></div>
  256. </div>
  257. </article>
  258. </div>
  259. </section>
  260. <section class="section delivery">
  261. <div class="section-head">
  262. <span>送货信息 #1</span>
  263. <span style="font-weight:500;font-size:12px;">合同 HT-XS-2026-088</span>
  264. </div>
  265. <div class="section-body">
  266. <div class="kv">
  267. <div><div class="label">送货客户</div><div class="value">某某贸易公司</div></div>
  268. <div><div class="label">送货地址</div><div class="value">合肥某某仓储</div></div>
  269. <div><div class="label">送货时间</div><div class="value">2026-08-31 16:00</div></div>
  270. </div>
  271. <article class="product-card">
  272. <div class="row1">
  273. <div class="field"><span class="flabel">产品名称</span><div class="fval">液碱 32%</div></div>
  274. <div class="field"><span class="flabel">别名</span><div class="fval">—</div></div>
  275. <div class="field"><span class="flabel">品牌</span><div class="fval">不限品牌</div></div>
  276. <div class="field"><span class="flabel">规格型号</span><div class="fval">—</div></div>
  277. <div class="field"><span class="flabel">单位</span><div class="fval">吨</div></div>
  278. </div>
  279. <div class="row2">
  280. <div class="field">
  281. <span class="flabel">可安排数量</span>
  282. <div class="avail-wrap">
  283. <span class="avail-num">140.000</span>
  284. <button type="button" class="help-btn" data-open="dlg-del" title="查看合同用量">?</button>
  285. </div>
  286. </div>
  287. <div class="field">
  288. <span class="flabel">计划数量</span>
  289. <div class="fval input plan">40.000</div>
  290. </div>
  291. <div class="field"><span class="flabel">包装规格</span><div class="fval">槽罐</div></div>
  292. <div class="field"><span class="flabel">送货方式</span><div class="fval">送货上门</div></div>
  293. <div class="field"><span class="flabel">备注</span><div class="fval">—</div></div>
  294. </div>
  295. </article>
  296. </div>
  297. </section>
  298. </div>
  299. <div class="dialog-footer">
  300. <button type="button" class="btn">✕ 取消</button>
  301. <button type="button" class="btn primary">✓ 保存并安排</button>
  302. </div>
  303. </div>
  304. <p class="legend">
  305. <strong>交互:</strong>点击「?」打开二级弹窗(无背景模糊)。超量行仅红色强调 + 小字提示,不禁止保存。
  306. </p>
  307. </div>
  308. <!-- 用量明细弹窗:装货正常 -->
  309. <div class="mask" id="dlg-load" role="dialog" aria-modal="true">
  310. <div class="qty-dialog">
  311. <div class="qty-dialog-header">
  312. <h4>合同用量 · 液碱 32%</h4>
  313. <button type="button" class="btn" data-close>×</button>
  314. </div>
  315. <div class="qty-dialog-body">
  316. <p style="margin:0 0 10px;font-size:13px;color:var(--text-muted);">云栋供应商 - HT-CG-2026-102(装货)</p>
  317. <div class="stats">
  318. <div class="stat"><div class="k">合同数量</div><div class="v">200.000</div></div>
  319. <div class="stat"><div class="k">已安排</div><div class="v">150.000</div></div>
  320. <div class="stat"><div class="k">可安排</div><div class="v green">50.000</div></div>
  321. </div>
  322. <div class="sub">已安排本产品的运输计划</div>
  323. <table>
  324. <thead>
  325. <tr><th>计划编号</th><th>计划日期</th><th class="num">计划数量</th><th>状态</th></tr>
  326. </thead>
  327. <tbody>
  328. <tr><td><a href="javascript:;">YP20260812003</a></td><td>2026-08-12</td><td class="num">80.000</td><td>已归档</td></tr>
  329. <tr><td><a href="javascript:;">YP20260820008</a></td><td>2026-08-20</td><td class="num">70.000</td><td>已安排</td></tr>
  330. </tbody>
  331. </table>
  332. </div>
  333. <div class="qty-dialog-footer">
  334. <button type="button" class="btn primary" data-close>✓ 知道了</button>
  335. </div>
  336. </div>
  337. </div>
  338. <div class="mask" id="dlg-over" role="dialog" aria-modal="true">
  339. <div class="qty-dialog">
  340. <div class="qty-dialog-header">
  341. <h4>合同用量 · 98% 硫酸</h4>
  342. <button type="button" class="btn" data-close>×</button>
  343. </div>
  344. <div class="qty-dialog-body">
  345. <p style="margin:0 0 10px;font-size:13px;color:var(--text-muted);">云栋供应商 - HT-CG-2026-102(装货)</p>
  346. <div class="stats">
  347. <div class="stat"><div class="k">合同数量</div><div class="v">100.000</div></div>
  348. <div class="stat"><div class="k">已安排</div><div class="v">80.000</div></div>
  349. <div class="stat"><div class="k">可安排</div><div class="v green">20.000</div></div>
  350. </div>
  351. <div class="sub">已安排本产品的运输计划</div>
  352. <table>
  353. <thead>
  354. <tr><th>计划编号</th><th>计划日期</th><th class="num">计划数量</th><th>状态</th></tr>
  355. </thead>
  356. <tbody>
  357. <tr><td><a href="javascript:;">YP20260810001</a></td><td>2026-08-10</td><td class="num">80.000</td><td>已安排</td></tr>
  358. </tbody>
  359. </table>
  360. </div>
  361. <div class="qty-dialog-footer">
  362. <button type="button" class="btn primary" data-close>✓ 知道了</button>
  363. </div>
  364. </div>
  365. </div>
  366. <div class="mask" id="dlg-del" role="dialog" aria-modal="true">
  367. <div class="qty-dialog">
  368. <div class="qty-dialog-header">
  369. <h4>合同用量 · 液碱 32%</h4>
  370. <button type="button" class="btn" data-close>×</button>
  371. </div>
  372. <div class="qty-dialog-body">
  373. <p style="margin:0 0 10px;font-size:13px;color:var(--text-muted);">某某贸易公司 - HT-XS-2026-088(送货)</p>
  374. <div class="stats">
  375. <div class="stat"><div class="k">合同数量</div><div class="v">180.000</div></div>
  376. <div class="stat"><div class="k">已安排</div><div class="v">40.000</div></div>
  377. <div class="stat"><div class="k">可安排</div><div class="v green">140.000</div></div>
  378. </div>
  379. <div class="sub">已安排本产品的运输计划</div>
  380. <table>
  381. <thead>
  382. <tr><th>计划编号</th><th>计划日期</th><th class="num">计划数量</th><th>状态</th></tr>
  383. </thead>
  384. <tbody>
  385. <tr><td><a href="javascript:;">YP20260815002</a></td><td>2026-08-15</td><td class="num">40.000</td><td>已安排</td></tr>
  386. </tbody>
  387. </table>
  388. </div>
  389. <div class="qty-dialog-footer">
  390. <button type="button" class="btn primary" data-close>✓ 知道了</button>
  391. </div>
  392. </div>
  393. </div>
  394. <script>
  395. (function () {
  396. function openMask(id) {
  397. var el = document.getElementById(id)
  398. if (el) el.classList.add('show')
  399. }
  400. function closeAll() {
  401. document.querySelectorAll('.mask').forEach(function (m) { m.classList.remove('show') })
  402. }
  403. document.querySelectorAll('[data-open]').forEach(function (btn) {
  404. btn.addEventListener('click', function () { openMask(btn.getAttribute('data-open')) })
  405. })
  406. document.querySelectorAll('[data-close]').forEach(function (btn) {
  407. btn.addEventListener('click', closeAll)
  408. })
  409. document.querySelectorAll('.mask').forEach(function (mask) {
  410. mask.addEventListener('click', function (e) {
  411. if (e.target === mask) closeAll()
  412. })
  413. })
  414. })()
  415. </script>
  416. </body>
  417. </html>