oa-approval-dingtalk-screens-demo.html 26 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta name="viewport" content="width=device-width, initial-scale=1" />
  6. <title>OA 审批 · 前端界面规划 Demo(Fresh Mint)</title>
  7. <style>
  8. :root {
  9. --primary: #10b981;
  10. --primary-dark: #059669;
  11. --primary-bg: #ecfdf5;
  12. --text: #0f172a;
  13. --muted: #64748b;
  14. --border: #e2e8f0;
  15. --bg: #f1f5f9;
  16. --card: #fff;
  17. --warn: #d97706;
  18. --danger: #dc2626;
  19. --sidebar: 220px;
  20. --top: 52px;
  21. --radius: 10px;
  22. }
  23. * { box-sizing: border-box; }
  24. body {
  25. margin: 0;
  26. font: 14px/1.5 Inter, system-ui, -apple-system, "PingFang SC", sans-serif;
  27. color: var(--text);
  28. background: var(--bg);
  29. }
  30. .shell { display: flex; min-height: 100vh; }
  31. .sidebar {
  32. width: var(--sidebar);
  33. background: #fff;
  34. border-right: 1px solid var(--border);
  35. padding: 16px 0;
  36. flex-shrink: 0;
  37. }
  38. .brand {
  39. padding: 0 16px 16px;
  40. font-weight: 700;
  41. color: var(--primary-dark);
  42. border-bottom: 1px solid var(--border);
  43. margin-bottom: 8px;
  44. }
  45. .nav-group {
  46. font-size: 11px;
  47. color: var(--muted);
  48. padding: 12px 16px 6px;
  49. text-transform: uppercase;
  50. letter-spacing: .04em;
  51. }
  52. .nav-item {
  53. display: block;
  54. width: 100%;
  55. text-align: left;
  56. border: 0;
  57. background: transparent;
  58. padding: 10px 16px;
  59. cursor: pointer;
  60. color: var(--text);
  61. font-size: 14px;
  62. }
  63. .nav-item:hover { background: var(--primary-bg); }
  64. .nav-item.active {
  65. background: var(--primary-bg);
  66. color: var(--primary-dark);
  67. font-weight: 600;
  68. border-right: 3px solid var(--primary);
  69. }
  70. .main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
  71. .topbar {
  72. height: var(--top);
  73. background: #fff;
  74. border-bottom: 1px solid var(--border);
  75. display: flex;
  76. align-items: center;
  77. padding: 0 24px;
  78. gap: 12px;
  79. }
  80. .topbar h1 { margin: 0; font-size: 16px; font-weight: 600; }
  81. .badge {
  82. font-size: 11px;
  83. padding: 2px 8px;
  84. border-radius: 999px;
  85. background: var(--primary-bg);
  86. color: var(--primary-dark);
  87. }
  88. .content { padding: 24px; flex: 1; overflow: auto; }
  89. .panel {
  90. background: var(--card);
  91. border: 1px solid var(--border);
  92. border-radius: var(--radius);
  93. padding: 16px 20px;
  94. margin-bottom: 16px;
  95. }
  96. .panel h2 {
  97. margin: 0 0 12px;
  98. font-size: 16px;
  99. display: flex;
  100. align-items: center;
  101. gap: 8px;
  102. }
  103. .panel h2::before {
  104. content: "";
  105. width: 3px;
  106. height: 16px;
  107. background: var(--primary);
  108. border-radius: 2px;
  109. }
  110. .muted { color: var(--muted); font-size: 13px; }
  111. .toolbar {
  112. display: flex;
  113. gap: 8px;
  114. align-items: center;
  115. margin-bottom: 12px;
  116. flex-wrap: wrap;
  117. }
  118. .btn {
  119. border: 1px solid var(--border);
  120. background: #fff;
  121. border-radius: 8px;
  122. padding: 7px 14px;
  123. cursor: pointer;
  124. font-size: 13px;
  125. display: inline-flex;
  126. align-items: center;
  127. gap: 6px;
  128. }
  129. .btn.primary {
  130. background: var(--primary);
  131. border-color: var(--primary);
  132. color: #fff;
  133. }
  134. .btn.ghost { background: #fff; }
  135. table { width: 100%; border-collapse: collapse; }
  136. th, td {
  137. text-align: left;
  138. padding: 10px 12px;
  139. border-bottom: 1px solid var(--border);
  140. font-size: 13px;
  141. }
  142. th { color: var(--muted); font-weight: 500; background: #f8fafc; }
  143. .tag {
  144. display: inline-block;
  145. padding: 2px 8px;
  146. border-radius: 6px;
  147. font-size: 12px;
  148. background: var(--primary-bg);
  149. color: var(--primary-dark);
  150. }
  151. .tag.warn { background: #fff7ed; color: var(--warn); }
  152. .tag.info { background: #f1f5f9; color: var(--muted); }
  153. .grid-apps {
  154. display: grid;
  155. grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  156. gap: 12px;
  157. }
  158. .app-card {
  159. border: 1px solid var(--border);
  160. border-radius: 10px;
  161. padding: 16px 12px;
  162. text-align: center;
  163. cursor: pointer;
  164. background: #fff;
  165. }
  166. .app-card:hover { border-color: var(--primary); background: var(--primary-bg); }
  167. .app-icon {
  168. width: 48px; height: 48px; margin: 0 auto 8px;
  169. border-radius: 12px; background: #fef3c7;
  170. display: flex; align-items: center; justify-content: center;
  171. font-size: 22px;
  172. }
  173. .steps {
  174. display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px;
  175. }
  176. .step {
  177. padding: 6px 12px; border-radius: 8px; background: #f8fafc;
  178. border: 1px solid var(--border); font-size: 13px; cursor: pointer;
  179. }
  180. .step.on {
  181. background: var(--primary-bg);
  182. border-color: #a7f3d0;
  183. color: var(--primary-dark);
  184. font-weight: 600;
  185. }
  186. .form-stack label {
  187. display: block; font-size: 12px; color: var(--muted); margin: 12px 0 4px;
  188. }
  189. .form-stack input, .form-stack textarea, .form-stack select {
  190. width: 100%; max-width: 480px;
  191. border: 1px solid var(--border);
  192. border-radius: 8px;
  193. padding: 8px 10px;
  194. font: inherit;
  195. }
  196. .designer {
  197. display: grid;
  198. grid-template-columns: 180px 1fr 220px;
  199. gap: 0;
  200. border: 1px solid var(--border);
  201. border-radius: 10px;
  202. min-height: 360px;
  203. overflow: hidden;
  204. }
  205. .designer aside {
  206. background: #f8fafc;
  207. border-right: 1px solid var(--border);
  208. padding: 12px;
  209. font-size: 12px;
  210. }
  211. .designer aside:last-child { border-right: 0; border-left: 1px solid var(--border); }
  212. .ctrl {
  213. display: inline-block;
  214. margin: 4px;
  215. padding: 6px 8px;
  216. background: #fff;
  217. border: 1px solid var(--border);
  218. border-radius: 6px;
  219. }
  220. .phone {
  221. width: 280px;
  222. margin: 16px auto;
  223. border: 1px solid var(--border);
  224. border-radius: 16px;
  225. background: #fff;
  226. padding: 12px;
  227. min-height: 280px;
  228. box-shadow: 0 8px 24px rgba(15, 23, 42, .06);
  229. }
  230. .flow {
  231. display: flex;
  232. flex-direction: column;
  233. align-items: center;
  234. gap: 0;
  235. padding: 24px;
  236. background: #f8fafc;
  237. border-radius: 10px;
  238. }
  239. .flow-node {
  240. width: 220px;
  241. border-radius: 8px;
  242. overflow: hidden;
  243. border: 1px solid var(--border);
  244. background: #fff;
  245. box-shadow: 0 1px 2px rgba(0,0,0,.04);
  246. }
  247. .flow-node .hd { padding: 8px 12px; color: #fff; font-size: 13px; font-weight: 600; }
  248. .flow-node .bd { padding: 10px 12px; font-size: 13px; color: var(--muted); }
  249. .flow-node.start .hd { background: #0f766e; }
  250. .flow-node.approval .hd { background: #d97706; }
  251. .flow-node.cc .hd { background: #0891b2; }
  252. .flow-end {
  253. margin-top: 8px;
  254. padding: 6px 16px;
  255. border-radius: 999px;
  256. background: #e2e8f0;
  257. font-size: 12px;
  258. color: var(--muted);
  259. }
  260. .plus {
  261. width: 24px; height: 24px; border-radius: 50%;
  262. background: #fff; border: 1px solid var(--primary);
  263. color: var(--primary); display: flex; align-items: center; justify-content: center;
  264. margin: 8px 0; font-weight: 700;
  265. }
  266. .split-detail {
  267. display: grid;
  268. grid-template-columns: 1.2fr .8fr;
  269. gap: 16px;
  270. }
  271. .timeline { border-left: 2px solid #a7f3d0; padding-left: 16px; margin-left: 8px; }
  272. .tl-item { margin-bottom: 16px; position: relative; }
  273. .tl-item::before {
  274. content: "";
  275. width: 10px; height: 10px; border-radius: 50%;
  276. background: var(--primary);
  277. position: absolute; left: -22px; top: 4px;
  278. }
  279. .overview {
  280. display: grid;
  281. grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  282. gap: 12px;
  283. }
  284. .ov-card {
  285. border: 1px solid var(--border);
  286. border-radius: 10px;
  287. padding: 14px;
  288. background: #fff;
  289. cursor: pointer;
  290. }
  291. .ov-card:hover { border-color: var(--primary); }
  292. .ov-card b { display: block; margin-bottom: 4px; }
  293. .ov-num { font-size: 22px; font-weight: 700; color: var(--primary-dark); }
  294. .screen { display: none; }
  295. .screen.on { display: block; }
  296. .note {
  297. background: #fffbeb;
  298. border: 1px solid #fde68a;
  299. border-radius: 8px;
  300. padding: 10px 12px;
  301. font-size: 13px;
  302. margin-bottom: 16px;
  303. color: #92400e;
  304. }
  305. @media (max-width: 900px) {
  306. .designer { grid-template-columns: 1fr; }
  307. .split-detail { grid-template-columns: 1fr; }
  308. .sidebar { width: 180px; }
  309. }
  310. </style>
  311. </head>
  312. <body>
  313. <div class="shell">
  314. <aside class="sidebar">
  315. <div class="brand">OA 审批 Demo</div>
  316. <div class="nav-group">总览</div>
  317. <button class="nav-item active" data-screen="overview">界面规划总览</button>
  318. <div class="nav-group">配置侧(管理)</div>
  319. <button class="nav-item" data-screen="apps">① 审批管理</button>
  320. <button class="nav-item" data-screen="roles">② 工作流角色</button>
  321. <button class="nav-item" data-screen="designer">③ 四步设计器</button>
  322. <div class="nav-group">办理侧(全员)</div>
  323. <button class="nav-item" data-screen="start">④ 发起审批</button>
  324. <button class="nav-item" data-screen="pending">⑤ 待处理</button>
  325. <button class="nav-item" data-screen="done">⑥ 已处理</button>
  326. <button class="nav-item" data-screen="mine">⑦ 我发起的</button>
  327. <button class="nav-item" data-screen="cc">⑧ 抄送我的</button>
  328. <button class="nav-item" data-screen="detail">⑨ 审批详情</button>
  329. </aside>
  330. <div class="main">
  331. <header class="topbar">
  332. <h1 id="title">界面规划总览</h1>
  333. <span class="badge">Fresh Mint · 仿钉钉交互</span>
  334. </header>
  335. <div class="content">
  336. <!-- OVERVIEW -->
  337. <div class="screen on" id="screen-overview">
  338. <div class="note">
  339. 产品前端规划:侧栏 <b>7</b> 个菜单入口 + 配置 <b>4</b> 步设计器 + <b>1</b> 个详情页(无独立菜单)= <b>共 12 个主要界面视图</b>。
  340. 下方可点卡片跳转各 Demo 屏(线框级示意,非像素级还原)。
  341. </div>
  342. <div class="panel">
  343. <h2>配置侧 · 4 个入口 / 视图</h2>
  344. <div class="overview">
  345. <div class="ov-card" data-go="apps"><span class="ov-num">01</span><b>审批管理</b><span class="muted">应用列表,新增/编辑进入设计器</span></div>
  346. <div class="ov-card" data-go="roles"><span class="ov-num">02</span><b>工作流角色</b><span class="muted">自定义角色 + 预置总经理/董事长</span></div>
  347. <div class="ov-card" data-go="designer"><span class="ov-num">03–06</span><b>四步设计器</b><span class="muted">基础 → 表单 → 流程 → 高级</span></div>
  348. </div>
  349. </div>
  350. <div class="panel">
  351. <h2>办理侧 · 6 个入口 / 视图</h2>
  352. <div class="overview">
  353. <div class="ov-card" data-go="start"><span class="ov-num">07</span><b>发起审批</b><span class="muted">模板宫格 → 填单提交</span></div>
  354. <div class="ov-card" data-go="pending"><span class="ov-num">08</span><b>待处理</b><span class="muted">我的审批待办列表</span></div>
  355. <div class="ov-card" data-go="done"><span class="ov-num">09</span><b>已处理</b><span class="muted">我已办过的任务</span></div>
  356. <div class="ov-card" data-go="mine"><span class="ov-num">10</span><b>我发起的</b><span class="muted">我提交的申请</span></div>
  357. <div class="ov-card" data-go="cc"><span class="ov-num">11</span><b>抄送我的</b><span class="muted">知会只读</span></div>
  358. <div class="ov-card" data-go="detail"><span class="ov-num">12</span><b>审批详情</b><span class="muted">表单+进度+操作(无菜单)</span></div>
  359. </div>
  360. </div>
  361. </div>
  362. <!-- APPS -->
  363. <div class="screen" id="screen-apps">
  364. <div class="panel">
  365. <h2>审批管理</h2>
  366. <p class="muted">管理系统内所有审批应用(模板)。点「新建」或「设计」进入四步配置。</p>
  367. <div class="toolbar">
  368. <span class="muted">已选 0 项</span>
  369. <button class="btn primary" data-go="designer">+ 新建审批</button>
  370. <button class="btn">批量停用</button>
  371. </div>
  372. <table>
  373. <thead>
  374. <tr><th>应用名称</th><th>分组</th><th>状态</th><th>更新时间</th><th>操作</th></tr>
  375. </thead>
  376. <tbody>
  377. <tr>
  378. <td>请假申请</td><td>人事</td><td><span class="tag">已发布</span></td><td>2026-07-14</td>
  379. <td><a href="#" data-go="designer">设计</a> · 停用</td>
  380. </tr>
  381. <tr>
  382. <td>用章申请</td><td>行政</td><td><span class="tag warn">草稿</span></td><td>2026-07-13</td>
  383. <td><a href="#" data-go="designer">设计</a> · 发布</td>
  384. </tr>
  385. </tbody>
  386. </table>
  387. </div>
  388. </div>
  389. <!-- ROLES -->
  390. <div class="screen" id="screen-roles">
  391. <div class="panel">
  392. <h2>工作流角色</h2>
  393. <p class="muted">独立于系统菜单角色。预置「总经理 / 董事长」不可删,只维护成员;另可自定义如「财务审批」。</p>
  394. <div class="toolbar">
  395. <button class="btn primary">+ 新建角色</button>
  396. </div>
  397. <table>
  398. <thead><tr><th>名称</th><th>编码</th><th>类型</th><th>成员数</th><th>操作</th></tr></thead>
  399. <tbody>
  400. <tr><td>总经理</td><td>GM</td><td><span class="tag">预置</span></td><td>1</td><td>维护成员</td></tr>
  401. <tr><td>董事长</td><td>CHAIRMAN</td><td><span class="tag">预置</span></td><td>1</td><td>维护成员</td></tr>
  402. <tr><td>财务审批</td><td>FINANCE</td><td><span class="tag info">自定义</span></td><td>3</td><td>编辑 · 成员 · 删除</td></tr>
  403. </tbody>
  404. </table>
  405. </div>
  406. </div>
  407. <!-- DESIGNER -->
  408. <div class="screen" id="screen-designer">
  409. <div class="panel">
  410. <div class="toolbar" style="justify-content:space-between">
  411. <div class="steps" id="designer-steps">
  412. <div class="step on" data-step="1">① 基础设置</div>
  413. <div class="step" data-step="2">② 表单设计</div>
  414. <div class="step" data-step="3">③ 流程设计</div>
  415. <div class="step" data-step="4">④ 高级设置</div>
  416. </div>
  417. <div>
  418. <button class="btn">预览</button>
  419. <button class="btn primary">发布</button>
  420. </div>
  421. </div>
  422. <div id="dstep-1">
  423. <h2>基础设置</h2>
  424. <div class="form-stack">
  425. <label>图标 / 表单名称 *</label>
  426. <input value="请假申请" maxlength="50" />
  427. <label>所在分组 *</label>
  428. <select><option>人事</option><option>行政</option></select>
  429. <label>表单说明</label>
  430. <textarea rows="2" placeholder="请输入"></textarea>
  431. <label>谁可以发起 *</label>
  432. <div><label style="display:inline"><input type="radio" checked name="who"/> 全部</label>
  433. &nbsp;<label style="display:inline"><input type="radio" name="who"/> 指定成员</label></div>
  434. <label>表单管理员 *</label>
  435. <div><label style="display:inline"><input type="radio" checked name="adm"/> 全部 OA 管理员</label>
  436. &nbsp;<label style="display:inline"><input type="radio" name="adm"/> 指定管理员</label></div>
  437. </div>
  438. </div>
  439. <div id="dstep-2" style="display:none">
  440. <h2>表单设计</h2>
  441. <p class="muted">左控件库 · 中画布(PC/手机)· 右属性。Web/移动共用 Schema。</p>
  442. <div class="designer">
  443. <aside>
  444. <div class="muted">布局</div>
  445. <span class="ctrl">分栏</span>
  446. <div class="muted" style="margin-top:8px">基础</div>
  447. <span class="ctrl">单行</span><span class="ctrl">多行</span><span class="ctrl">数字</span>
  448. <span class="ctrl">单选</span><span class="ctrl">多选</span><span class="ctrl">日期</span>
  449. <span class="ctrl">电话</span>
  450. <div class="muted" style="margin-top:8px">增强</div>
  451. <span class="ctrl">附件</span><span class="ctrl">金额</span><span class="ctrl">部门</span>
  452. <span class="ctrl">省市区</span><span class="ctrl">公式</span><span class="ctrl">关联审批</span>
  453. </aside>
  454. <div>
  455. <div class="toolbar" style="padding:8px 12px;border-bottom:1px solid var(--border)">
  456. <button class="btn primary" style="padding:4px 10px">手机</button>
  457. <button class="btn" style="padding:4px 10px">PC</button>
  458. </div>
  459. <div class="phone">
  460. <div style="margin-bottom:12px"><span class="muted">请假类型</span><br/>年假 ▾</div>
  461. <div style="margin-bottom:12px"><span class="muted">开始日期</span><br/>2026-07-20</div>
  462. <div style="border:1px dashed #a7f3d0;border-radius:8px;padding:20px;text-align:center;color:var(--muted)">拖拽控件到此处</div>
  463. </div>
  464. </div>
  465. <aside>
  466. <b>单行输入框</b>
  467. <label style="display:block;margin-top:8px" class="muted">标题</label>
  468. <input style="width:100%" value="事由" />
  469. <label style="display:block;margin-top:8px" class="muted">必填</label>
  470. <input type="checkbox" checked /> 是
  471. </aside>
  472. </div>
  473. </div>
  474. <div id="dstep-3" style="display:none">
  475. <h2>流程设计</h2>
  476. <p class="muted">竖向树:发起人 → 审批/抄送/条件 → 结束。选人:成员 / 工作流角色 / 部门负责人 / 主管 / 自选。</p>
  477. <div class="flow">
  478. <div class="flow-node start"><div class="hd">发起人</div><div class="bd">全员可发起 ›</div></div>
  479. <div class="plus">+</div>
  480. <div class="flow-node approval"><div class="hd">审批人</div><div class="bd">发起人部门负责人 · 或签 ›</div></div>
  481. <div class="plus">+</div>
  482. <div class="flow-node approval"><div class="hd">审批人</div><div class="bd">工作流角色 · 总经理 ›</div></div>
  483. <div class="plus">+</div>
  484. <div class="flow-node cc"><div class="hd">抄送人</div><div class="bd">发起人自选 ›</div></div>
  485. <div class="flow-end">流程结束</div>
  486. </div>
  487. </div>
  488. <div id="dstep-4" style="display:none">
  489. <h2>高级设置</h2>
  490. <div style="display:grid;grid-template-columns:200px 1fr;gap:16px">
  491. <div style="border-right:1px solid var(--border);padding-right:12px">
  492. <div style="padding:8px;background:var(--primary-bg);border-radius:8px;color:var(--primary-dark)">高级流程设置</div>
  493. <div class="muted" style="padding:8px">数据标题(二期)</div>
  494. <div class="muted" style="padding:8px">打印模板(二期)</div>
  495. </div>
  496. <div class="form-stack">
  497. <label><input type="checkbox" checked /> 允许撤销进行中的审批</label>
  498. <label><input type="checkbox" /> 审批人去重</label>
  499. <label><input type="checkbox" checked /> 允许加签</label>
  500. <label><input type="checkbox" checked /> 无直属主管时回退部门负责人(默认开)</label>
  501. <label>审批意见</label>
  502. <select><option>可不填,展示意见页</option><option>必须填写</option></select>
  503. </div>
  504. </div>
  505. </div>
  506. </div>
  507. </div>
  508. <!-- START -->
  509. <div class="screen" id="screen-start">
  510. <div class="panel">
  511. <h2>发起审批</h2>
  512. <p class="muted">按分组展示模板 → 打开填单(Schema 渲染,含附件)→ 提交。</p>
  513. <p style="font-weight:600;margin:12px 0 8px">人事</p>
  514. <div class="grid-apps">
  515. <div class="app-card" data-go="detail"><div class="app-icon">📋</div>请假申请</div>
  516. <div class="app-card"><div class="app-icon">📝</div>加班申请</div>
  517. </div>
  518. <p style="font-weight:600;margin:16px 0 8px">行政</p>
  519. <div class="grid-apps">
  520. <div class="app-card"><div class="app-icon">🔏</div>用章申请</div>
  521. </div>
  522. </div>
  523. </div>
  524. <!-- PENDING -->
  525. <div class="screen" id="screen-pending">
  526. <div class="panel">
  527. <h2>待处理</h2>
  528. <p class="muted">当前用户待审批任务。点进详情可同意/拒绝/加签。</p>
  529. <table>
  530. <thead><tr><th>标题</th><th>发起人</th><th>类型</th><th>到达时间</th><th></th></tr></thead>
  531. <tbody>
  532. <tr><td>张三的请假申请</td><td>张三</td><td>请假</td><td>07-14 10:20</td><td><a href="#" data-go="detail">处理</a></td></tr>
  533. <tr><td>李四的用章申请</td><td>李四</td><td>用章</td><td>07-14 09:01</td><td><a href="#" data-go="detail">处理</a></td></tr>
  534. </tbody>
  535. </table>
  536. </div>
  537. </div>
  538. <!-- DONE / MINE / CC -->
  539. <div class="screen" id="screen-done">
  540. <div class="panel">
  541. <h2>已处理</h2>
  542. <p class="muted">我已审批过的任务,详情只读。</p>
  543. <table>
  544. <thead><tr><th>标题</th><th>结论</th><th>处理时间</th></tr></thead>
  545. <tbody>
  546. <tr><td>王五的请假</td><td><span class="tag">已同意</span></td><td>07-13 18:00</td></tr>
  547. </tbody>
  548. </table>
  549. </div>
  550. </div>
  551. <div class="screen" id="screen-mine">
  552. <div class="panel">
  553. <h2>我发起的</h2>
  554. <p class="muted">我提交的申请;按高级设置可撤销进行中的单。</p>
  555. <table>
  556. <thead><tr><th>标题</th><th>状态</th><th>发起时间</th><th></th></tr></thead>
  557. <tbody>
  558. <tr><td>我的请假申请</td><td><span class="tag warn">审批中</span></td><td>07-14 11:00</td><td>撤销 · <a href="#" data-go="detail">详情</a></td></tr>
  559. </tbody>
  560. </table>
  561. </div>
  562. </div>
  563. <div class="screen" id="screen-cc">
  564. <div class="panel">
  565. <h2>抄送我的</h2>
  566. <p class="muted">知会类任务,只读查看。</p>
  567. <table>
  568. <thead><tr><th>标题</th><th>发起人</th><th>抄送时间</th></tr></thead>
  569. <tbody>
  570. <tr><td>赵六的用章申请</td><td>赵六</td><td>07-12 15:30</td></tr>
  571. </tbody>
  572. </table>
  573. </div>
  574. </div>
  575. <!-- DETAIL -->
  576. <div class="screen" id="screen-detail">
  577. <div class="panel">
  578. <h2>审批详情</h2>
  579. <p class="muted">无独立侧栏菜单,从列表进入。表单回显 + 进度时间轴 + 操作区。</p>
  580. <div class="split-detail">
  581. <div>
  582. <div style="margin-bottom:12px"><b>请假类型</b><div>年假</div></div>
  583. <div style="margin-bottom:12px"><b>日期</b><div>2026-07-20 ~ 2026-07-22</div></div>
  584. <div style="margin-bottom:12px"><b>事由</b><div>回家办事</div></div>
  585. <div style="margin-bottom:12px"><b>附件</b><div class="muted">行程单.pdf(预览 / 下载)</div></div>
  586. <div class="toolbar" style="margin-top:20px">
  587. <button class="btn primary">同意</button>
  588. <button class="btn">拒绝</button>
  589. <button class="btn">加签</button>
  590. </div>
  591. </div>
  592. <div>
  593. <b>审批进度</b>
  594. <div class="timeline" style="margin-top:12px">
  595. <div class="tl-item"><b>发起人 · 张三</b><div class="muted">07-14 10:00 已提交</div></div>
  596. <div class="tl-item"><b>部门负责人 · 赵六</b><div class="muted">待处理(部门负责人)</div></div>
  597. <div class="tl-item"><b>总经理</b><div class="muted">未到达</div></div>
  598. </div>
  599. </div>
  600. </div>
  601. </div>
  602. </div>
  603. </div>
  604. </div>
  605. </div>
  606. <script>
  607. const titles = {
  608. overview: '界面规划总览',
  609. apps: '① 审批管理',
  610. roles: '② 工作流角色',
  611. designer: '③ 四步设计器',
  612. start: '④ 发起审批',
  613. pending: '⑤ 待处理',
  614. done: '⑥ 已处理',
  615. mine: '⑦ 我发起的',
  616. cc: '⑧ 抄送我的',
  617. detail: '⑨ 审批详情'
  618. };
  619. function show(id) {
  620. document.querySelectorAll('.screen').forEach(el => el.classList.toggle('on', el.id === 'screen-' + id));
  621. document.querySelectorAll('.nav-item').forEach(el => el.classList.toggle('active', el.dataset.screen === id));
  622. document.getElementById('title').textContent = titles[id] || id;
  623. }
  624. document.querySelectorAll('[data-screen]').forEach(btn => {
  625. btn.addEventListener('click', () => show(btn.dataset.screen));
  626. });
  627. document.querySelectorAll('[data-go]').forEach(el => {
  628. el.addEventListener('click', (e) => { e.preventDefault(); show(el.dataset.go); });
  629. });
  630. document.querySelectorAll('#designer-steps .step').forEach(step => {
  631. step.addEventListener('click', () => {
  632. document.querySelectorAll('#designer-steps .step').forEach(s => s.classList.remove('on'));
  633. step.classList.add('on');
  634. for (let i = 1; i <= 4; i++) {
  635. document.getElementById('dstep-' + i).style.display = (String(i) === step.dataset.step) ? 'block' : 'none';
  636. }
  637. });
  638. });
  639. </script>
  640. </body>
  641. </html>