| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654 |
- <!DOCTYPE html>
- <html lang="zh-CN">
- <head>
- <meta charset="UTF-8" />
- <meta name="viewport" content="width=device-width, initial-scale=1" />
- <title>OA 审批 · 前端界面规划 Demo(Fresh Mint)</title>
- <style>
- :root {
- --primary: #10b981;
- --primary-dark: #059669;
- --primary-bg: #ecfdf5;
- --text: #0f172a;
- --muted: #64748b;
- --border: #e2e8f0;
- --bg: #f1f5f9;
- --card: #fff;
- --warn: #d97706;
- --danger: #dc2626;
- --sidebar: 220px;
- --top: 52px;
- --radius: 10px;
- }
- * { box-sizing: border-box; }
- body {
- margin: 0;
- font: 14px/1.5 Inter, system-ui, -apple-system, "PingFang SC", sans-serif;
- color: var(--text);
- background: var(--bg);
- }
- .shell { display: flex; min-height: 100vh; }
- .sidebar {
- width: var(--sidebar);
- background: #fff;
- border-right: 1px solid var(--border);
- padding: 16px 0;
- flex-shrink: 0;
- }
- .brand {
- padding: 0 16px 16px;
- font-weight: 700;
- color: var(--primary-dark);
- border-bottom: 1px solid var(--border);
- margin-bottom: 8px;
- }
- .nav-group {
- font-size: 11px;
- color: var(--muted);
- padding: 12px 16px 6px;
- text-transform: uppercase;
- letter-spacing: .04em;
- }
- .nav-item {
- display: block;
- width: 100%;
- text-align: left;
- border: 0;
- background: transparent;
- padding: 10px 16px;
- cursor: pointer;
- color: var(--text);
- font-size: 14px;
- }
- .nav-item:hover { background: var(--primary-bg); }
- .nav-item.active {
- background: var(--primary-bg);
- color: var(--primary-dark);
- font-weight: 600;
- border-right: 3px solid var(--primary);
- }
- .main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
- .topbar {
- height: var(--top);
- background: #fff;
- border-bottom: 1px solid var(--border);
- display: flex;
- align-items: center;
- padding: 0 24px;
- gap: 12px;
- }
- .topbar h1 { margin: 0; font-size: 16px; font-weight: 600; }
- .badge {
- font-size: 11px;
- padding: 2px 8px;
- border-radius: 999px;
- background: var(--primary-bg);
- color: var(--primary-dark);
- }
- .content { padding: 24px; flex: 1; overflow: auto; }
- .panel {
- background: var(--card);
- border: 1px solid var(--border);
- border-radius: var(--radius);
- padding: 16px 20px;
- margin-bottom: 16px;
- }
- .panel h2 {
- margin: 0 0 12px;
- font-size: 16px;
- display: flex;
- align-items: center;
- gap: 8px;
- }
- .panel h2::before {
- content: "";
- width: 3px;
- height: 16px;
- background: var(--primary);
- border-radius: 2px;
- }
- .muted { color: var(--muted); font-size: 13px; }
- .toolbar {
- display: flex;
- gap: 8px;
- align-items: center;
- margin-bottom: 12px;
- flex-wrap: wrap;
- }
- .btn {
- border: 1px solid var(--border);
- background: #fff;
- border-radius: 8px;
- padding: 7px 14px;
- cursor: pointer;
- font-size: 13px;
- display: inline-flex;
- align-items: center;
- gap: 6px;
- }
- .btn.primary {
- background: var(--primary);
- border-color: var(--primary);
- color: #fff;
- }
- .btn.ghost { background: #fff; }
- table { width: 100%; border-collapse: collapse; }
- th, td {
- text-align: left;
- padding: 10px 12px;
- border-bottom: 1px solid var(--border);
- font-size: 13px;
- }
- th { color: var(--muted); font-weight: 500; background: #f8fafc; }
- .tag {
- display: inline-block;
- padding: 2px 8px;
- border-radius: 6px;
- font-size: 12px;
- background: var(--primary-bg);
- color: var(--primary-dark);
- }
- .tag.warn { background: #fff7ed; color: var(--warn); }
- .tag.info { background: #f1f5f9; color: var(--muted); }
- .grid-apps {
- display: grid;
- grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
- gap: 12px;
- }
- .app-card {
- border: 1px solid var(--border);
- border-radius: 10px;
- padding: 16px 12px;
- text-align: center;
- cursor: pointer;
- background: #fff;
- }
- .app-card:hover { border-color: var(--primary); background: var(--primary-bg); }
- .app-icon {
- width: 48px; height: 48px; margin: 0 auto 8px;
- border-radius: 12px; background: #fef3c7;
- display: flex; align-items: center; justify-content: center;
- font-size: 22px;
- }
- .steps {
- display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px;
- }
- .step {
- padding: 6px 12px; border-radius: 8px; background: #f8fafc;
- border: 1px solid var(--border); font-size: 13px; cursor: pointer;
- }
- .step.on {
- background: var(--primary-bg);
- border-color: #a7f3d0;
- color: var(--primary-dark);
- font-weight: 600;
- }
- .form-stack label {
- display: block; font-size: 12px; color: var(--muted); margin: 12px 0 4px;
- }
- .form-stack input, .form-stack textarea, .form-stack select {
- width: 100%; max-width: 480px;
- border: 1px solid var(--border);
- border-radius: 8px;
- padding: 8px 10px;
- font: inherit;
- }
- .designer {
- display: grid;
- grid-template-columns: 180px 1fr 220px;
- gap: 0;
- border: 1px solid var(--border);
- border-radius: 10px;
- min-height: 360px;
- overflow: hidden;
- }
- .designer aside {
- background: #f8fafc;
- border-right: 1px solid var(--border);
- padding: 12px;
- font-size: 12px;
- }
- .designer aside:last-child { border-right: 0; border-left: 1px solid var(--border); }
- .ctrl {
- display: inline-block;
- margin: 4px;
- padding: 6px 8px;
- background: #fff;
- border: 1px solid var(--border);
- border-radius: 6px;
- }
- .phone {
- width: 280px;
- margin: 16px auto;
- border: 1px solid var(--border);
- border-radius: 16px;
- background: #fff;
- padding: 12px;
- min-height: 280px;
- box-shadow: 0 8px 24px rgba(15, 23, 42, .06);
- }
- .flow {
- display: flex;
- flex-direction: column;
- align-items: center;
- gap: 0;
- padding: 24px;
- background: #f8fafc;
- border-radius: 10px;
- }
- .flow-node {
- width: 220px;
- border-radius: 8px;
- overflow: hidden;
- border: 1px solid var(--border);
- background: #fff;
- box-shadow: 0 1px 2px rgba(0,0,0,.04);
- }
- .flow-node .hd { padding: 8px 12px; color: #fff; font-size: 13px; font-weight: 600; }
- .flow-node .bd { padding: 10px 12px; font-size: 13px; color: var(--muted); }
- .flow-node.start .hd { background: #0f766e; }
- .flow-node.approval .hd { background: #d97706; }
- .flow-node.cc .hd { background: #0891b2; }
- .flow-end {
- margin-top: 8px;
- padding: 6px 16px;
- border-radius: 999px;
- background: #e2e8f0;
- font-size: 12px;
- color: var(--muted);
- }
- .plus {
- width: 24px; height: 24px; border-radius: 50%;
- background: #fff; border: 1px solid var(--primary);
- color: var(--primary); display: flex; align-items: center; justify-content: center;
- margin: 8px 0; font-weight: 700;
- }
- .split-detail {
- display: grid;
- grid-template-columns: 1.2fr .8fr;
- gap: 16px;
- }
- .timeline { border-left: 2px solid #a7f3d0; padding-left: 16px; margin-left: 8px; }
- .tl-item { margin-bottom: 16px; position: relative; }
- .tl-item::before {
- content: "";
- width: 10px; height: 10px; border-radius: 50%;
- background: var(--primary);
- position: absolute; left: -22px; top: 4px;
- }
- .overview {
- display: grid;
- grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
- gap: 12px;
- }
- .ov-card {
- border: 1px solid var(--border);
- border-radius: 10px;
- padding: 14px;
- background: #fff;
- cursor: pointer;
- }
- .ov-card:hover { border-color: var(--primary); }
- .ov-card b { display: block; margin-bottom: 4px; }
- .ov-num { font-size: 22px; font-weight: 700; color: var(--primary-dark); }
- .screen { display: none; }
- .screen.on { display: block; }
- .note {
- background: #fffbeb;
- border: 1px solid #fde68a;
- border-radius: 8px;
- padding: 10px 12px;
- font-size: 13px;
- margin-bottom: 16px;
- color: #92400e;
- }
- @media (max-width: 900px) {
- .designer { grid-template-columns: 1fr; }
- .split-detail { grid-template-columns: 1fr; }
- .sidebar { width: 180px; }
- }
- </style>
- </head>
- <body>
- <div class="shell">
- <aside class="sidebar">
- <div class="brand">OA 审批 Demo</div>
- <div class="nav-group">总览</div>
- <button class="nav-item active" data-screen="overview">界面规划总览</button>
- <div class="nav-group">配置侧(管理)</div>
- <button class="nav-item" data-screen="apps">① 审批管理</button>
- <button class="nav-item" data-screen="roles">② 工作流角色</button>
- <button class="nav-item" data-screen="designer">③ 四步设计器</button>
- <div class="nav-group">办理侧(全员)</div>
- <button class="nav-item" data-screen="start">④ 发起审批</button>
- <button class="nav-item" data-screen="pending">⑤ 待处理</button>
- <button class="nav-item" data-screen="done">⑥ 已处理</button>
- <button class="nav-item" data-screen="mine">⑦ 我发起的</button>
- <button class="nav-item" data-screen="cc">⑧ 抄送我的</button>
- <button class="nav-item" data-screen="detail">⑨ 审批详情</button>
- </aside>
- <div class="main">
- <header class="topbar">
- <h1 id="title">界面规划总览</h1>
- <span class="badge">Fresh Mint · 仿钉钉交互</span>
- </header>
- <div class="content">
- <!-- OVERVIEW -->
- <div class="screen on" id="screen-overview">
- <div class="note">
- 产品前端规划:侧栏 <b>7</b> 个菜单入口 + 配置 <b>4</b> 步设计器 + <b>1</b> 个详情页(无独立菜单)= <b>共 12 个主要界面视图</b>。
- 下方可点卡片跳转各 Demo 屏(线框级示意,非像素级还原)。
- </div>
- <div class="panel">
- <h2>配置侧 · 4 个入口 / 视图</h2>
- <div class="overview">
- <div class="ov-card" data-go="apps"><span class="ov-num">01</span><b>审批管理</b><span class="muted">应用列表,新增/编辑进入设计器</span></div>
- <div class="ov-card" data-go="roles"><span class="ov-num">02</span><b>工作流角色</b><span class="muted">自定义角色 + 预置总经理/董事长</span></div>
- <div class="ov-card" data-go="designer"><span class="ov-num">03–06</span><b>四步设计器</b><span class="muted">基础 → 表单 → 流程 → 高级</span></div>
- </div>
- </div>
- <div class="panel">
- <h2>办理侧 · 6 个入口 / 视图</h2>
- <div class="overview">
- <div class="ov-card" data-go="start"><span class="ov-num">07</span><b>发起审批</b><span class="muted">模板宫格 → 填单提交</span></div>
- <div class="ov-card" data-go="pending"><span class="ov-num">08</span><b>待处理</b><span class="muted">我的审批待办列表</span></div>
- <div class="ov-card" data-go="done"><span class="ov-num">09</span><b>已处理</b><span class="muted">我已办过的任务</span></div>
- <div class="ov-card" data-go="mine"><span class="ov-num">10</span><b>我发起的</b><span class="muted">我提交的申请</span></div>
- <div class="ov-card" data-go="cc"><span class="ov-num">11</span><b>抄送我的</b><span class="muted">知会只读</span></div>
- <div class="ov-card" data-go="detail"><span class="ov-num">12</span><b>审批详情</b><span class="muted">表单+进度+操作(无菜单)</span></div>
- </div>
- </div>
- </div>
- <!-- APPS -->
- <div class="screen" id="screen-apps">
- <div class="panel">
- <h2>审批管理</h2>
- <p class="muted">管理系统内所有审批应用(模板)。点「新建」或「设计」进入四步配置。</p>
- <div class="toolbar">
- <span class="muted">已选 0 项</span>
- <button class="btn primary" data-go="designer">+ 新建审批</button>
- <button class="btn">批量停用</button>
- </div>
- <table>
- <thead>
- <tr><th>应用名称</th><th>分组</th><th>状态</th><th>更新时间</th><th>操作</th></tr>
- </thead>
- <tbody>
- <tr>
- <td>请假申请</td><td>人事</td><td><span class="tag">已发布</span></td><td>2026-07-14</td>
- <td><a href="#" data-go="designer">设计</a> · 停用</td>
- </tr>
- <tr>
- <td>用章申请</td><td>行政</td><td><span class="tag warn">草稿</span></td><td>2026-07-13</td>
- <td><a href="#" data-go="designer">设计</a> · 发布</td>
- </tr>
- </tbody>
- </table>
- </div>
- </div>
- <!-- ROLES -->
- <div class="screen" id="screen-roles">
- <div class="panel">
- <h2>工作流角色</h2>
- <p class="muted">独立于系统菜单角色。预置「总经理 / 董事长」不可删,只维护成员;另可自定义如「财务审批」。</p>
- <div class="toolbar">
- <button class="btn primary">+ 新建角色</button>
- </div>
- <table>
- <thead><tr><th>名称</th><th>编码</th><th>类型</th><th>成员数</th><th>操作</th></tr></thead>
- <tbody>
- <tr><td>总经理</td><td>GM</td><td><span class="tag">预置</span></td><td>1</td><td>维护成员</td></tr>
- <tr><td>董事长</td><td>CHAIRMAN</td><td><span class="tag">预置</span></td><td>1</td><td>维护成员</td></tr>
- <tr><td>财务审批</td><td>FINANCE</td><td><span class="tag info">自定义</span></td><td>3</td><td>编辑 · 成员 · 删除</td></tr>
- </tbody>
- </table>
- </div>
- </div>
- <!-- DESIGNER -->
- <div class="screen" id="screen-designer">
- <div class="panel">
- <div class="toolbar" style="justify-content:space-between">
- <div class="steps" id="designer-steps">
- <div class="step on" data-step="1">① 基础设置</div>
- <div class="step" data-step="2">② 表单设计</div>
- <div class="step" data-step="3">③ 流程设计</div>
- <div class="step" data-step="4">④ 高级设置</div>
- </div>
- <div>
- <button class="btn">预览</button>
- <button class="btn primary">发布</button>
- </div>
- </div>
- <div id="dstep-1">
- <h2>基础设置</h2>
- <div class="form-stack">
- <label>图标 / 表单名称 *</label>
- <input value="请假申请" maxlength="50" />
- <label>所在分组 *</label>
- <select><option>人事</option><option>行政</option></select>
- <label>表单说明</label>
- <textarea rows="2" placeholder="请输入"></textarea>
- <label>谁可以发起 *</label>
- <div><label style="display:inline"><input type="radio" checked name="who"/> 全部</label>
- <label style="display:inline"><input type="radio" name="who"/> 指定成员</label></div>
- <label>表单管理员 *</label>
- <div><label style="display:inline"><input type="radio" checked name="adm"/> 全部 OA 管理员</label>
- <label style="display:inline"><input type="radio" name="adm"/> 指定管理员</label></div>
- </div>
- </div>
- <div id="dstep-2" style="display:none">
- <h2>表单设计</h2>
- <p class="muted">左控件库 · 中画布(PC/手机)· 右属性。Web/移动共用 Schema。</p>
- <div class="designer">
- <aside>
- <div class="muted">布局</div>
- <span class="ctrl">分栏</span>
- <div class="muted" style="margin-top:8px">基础</div>
- <span class="ctrl">单行</span><span class="ctrl">多行</span><span class="ctrl">数字</span>
- <span class="ctrl">单选</span><span class="ctrl">多选</span><span class="ctrl">日期</span>
- <span class="ctrl">电话</span>
- <div class="muted" style="margin-top:8px">增强</div>
- <span class="ctrl">附件</span><span class="ctrl">金额</span><span class="ctrl">部门</span>
- <span class="ctrl">省市区</span><span class="ctrl">公式</span><span class="ctrl">关联审批</span>
- </aside>
- <div>
- <div class="toolbar" style="padding:8px 12px;border-bottom:1px solid var(--border)">
- <button class="btn primary" style="padding:4px 10px">手机</button>
- <button class="btn" style="padding:4px 10px">PC</button>
- </div>
- <div class="phone">
- <div style="margin-bottom:12px"><span class="muted">请假类型</span><br/>年假 ▾</div>
- <div style="margin-bottom:12px"><span class="muted">开始日期</span><br/>2026-07-20</div>
- <div style="border:1px dashed #a7f3d0;border-radius:8px;padding:20px;text-align:center;color:var(--muted)">拖拽控件到此处</div>
- </div>
- </div>
- <aside>
- <b>单行输入框</b>
- <label style="display:block;margin-top:8px" class="muted">标题</label>
- <input style="width:100%" value="事由" />
- <label style="display:block;margin-top:8px" class="muted">必填</label>
- <input type="checkbox" checked /> 是
- </aside>
- </div>
- </div>
- <div id="dstep-3" style="display:none">
- <h2>流程设计</h2>
- <p class="muted">竖向树:发起人 → 审批/抄送/条件 → 结束。选人:成员 / 工作流角色 / 部门负责人 / 主管 / 自选。</p>
- <div class="flow">
- <div class="flow-node start"><div class="hd">发起人</div><div class="bd">全员可发起 ›</div></div>
- <div class="plus">+</div>
- <div class="flow-node approval"><div class="hd">审批人</div><div class="bd">发起人部门负责人 · 或签 ›</div></div>
- <div class="plus">+</div>
- <div class="flow-node approval"><div class="hd">审批人</div><div class="bd">工作流角色 · 总经理 ›</div></div>
- <div class="plus">+</div>
- <div class="flow-node cc"><div class="hd">抄送人</div><div class="bd">发起人自选 ›</div></div>
- <div class="flow-end">流程结束</div>
- </div>
- </div>
- <div id="dstep-4" style="display:none">
- <h2>高级设置</h2>
- <div style="display:grid;grid-template-columns:200px 1fr;gap:16px">
- <div style="border-right:1px solid var(--border);padding-right:12px">
- <div style="padding:8px;background:var(--primary-bg);border-radius:8px;color:var(--primary-dark)">高级流程设置</div>
- <div class="muted" style="padding:8px">数据标题(二期)</div>
- <div class="muted" style="padding:8px">打印模板(二期)</div>
- </div>
- <div class="form-stack">
- <label><input type="checkbox" checked /> 允许撤销进行中的审批</label>
- <label><input type="checkbox" /> 审批人去重</label>
- <label><input type="checkbox" checked /> 允许加签</label>
- <label><input type="checkbox" checked /> 无直属主管时回退部门负责人(默认开)</label>
- <label>审批意见</label>
- <select><option>可不填,展示意见页</option><option>必须填写</option></select>
- </div>
- </div>
- </div>
- </div>
- </div>
- <!-- START -->
- <div class="screen" id="screen-start">
- <div class="panel">
- <h2>发起审批</h2>
- <p class="muted">按分组展示模板 → 打开填单(Schema 渲染,含附件)→ 提交。</p>
- <p style="font-weight:600;margin:12px 0 8px">人事</p>
- <div class="grid-apps">
- <div class="app-card" data-go="detail"><div class="app-icon">📋</div>请假申请</div>
- <div class="app-card"><div class="app-icon">📝</div>加班申请</div>
- </div>
- <p style="font-weight:600;margin:16px 0 8px">行政</p>
- <div class="grid-apps">
- <div class="app-card"><div class="app-icon">🔏</div>用章申请</div>
- </div>
- </div>
- </div>
- <!-- PENDING -->
- <div class="screen" id="screen-pending">
- <div class="panel">
- <h2>待处理</h2>
- <p class="muted">当前用户待审批任务。点进详情可同意/拒绝/加签。</p>
- <table>
- <thead><tr><th>标题</th><th>发起人</th><th>类型</th><th>到达时间</th><th></th></tr></thead>
- <tbody>
- <tr><td>张三的请假申请</td><td>张三</td><td>请假</td><td>07-14 10:20</td><td><a href="#" data-go="detail">处理</a></td></tr>
- <tr><td>李四的用章申请</td><td>李四</td><td>用章</td><td>07-14 09:01</td><td><a href="#" data-go="detail">处理</a></td></tr>
- </tbody>
- </table>
- </div>
- </div>
- <!-- DONE / MINE / CC -->
- <div class="screen" id="screen-done">
- <div class="panel">
- <h2>已处理</h2>
- <p class="muted">我已审批过的任务,详情只读。</p>
- <table>
- <thead><tr><th>标题</th><th>结论</th><th>处理时间</th></tr></thead>
- <tbody>
- <tr><td>王五的请假</td><td><span class="tag">已同意</span></td><td>07-13 18:00</td></tr>
- </tbody>
- </table>
- </div>
- </div>
- <div class="screen" id="screen-mine">
- <div class="panel">
- <h2>我发起的</h2>
- <p class="muted">我提交的申请;按高级设置可撤销进行中的单。</p>
- <table>
- <thead><tr><th>标题</th><th>状态</th><th>发起时间</th><th></th></tr></thead>
- <tbody>
- <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>
- </tbody>
- </table>
- </div>
- </div>
- <div class="screen" id="screen-cc">
- <div class="panel">
- <h2>抄送我的</h2>
- <p class="muted">知会类任务,只读查看。</p>
- <table>
- <thead><tr><th>标题</th><th>发起人</th><th>抄送时间</th></tr></thead>
- <tbody>
- <tr><td>赵六的用章申请</td><td>赵六</td><td>07-12 15:30</td></tr>
- </tbody>
- </table>
- </div>
- </div>
- <!-- DETAIL -->
- <div class="screen" id="screen-detail">
- <div class="panel">
- <h2>审批详情</h2>
- <p class="muted">无独立侧栏菜单,从列表进入。表单回显 + 进度时间轴 + 操作区。</p>
- <div class="split-detail">
- <div>
- <div style="margin-bottom:12px"><b>请假类型</b><div>年假</div></div>
- <div style="margin-bottom:12px"><b>日期</b><div>2026-07-20 ~ 2026-07-22</div></div>
- <div style="margin-bottom:12px"><b>事由</b><div>回家办事</div></div>
- <div style="margin-bottom:12px"><b>附件</b><div class="muted">行程单.pdf(预览 / 下载)</div></div>
- <div class="toolbar" style="margin-top:20px">
- <button class="btn primary">同意</button>
- <button class="btn">拒绝</button>
- <button class="btn">加签</button>
- </div>
- </div>
- <div>
- <b>审批进度</b>
- <div class="timeline" style="margin-top:12px">
- <div class="tl-item"><b>发起人 · 张三</b><div class="muted">07-14 10:00 已提交</div></div>
- <div class="tl-item"><b>部门负责人 · 赵六</b><div class="muted">待处理(部门负责人)</div></div>
- <div class="tl-item"><b>总经理</b><div class="muted">未到达</div></div>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- <script>
- const titles = {
- overview: '界面规划总览',
- apps: '① 审批管理',
- roles: '② 工作流角色',
- designer: '③ 四步设计器',
- start: '④ 发起审批',
- pending: '⑤ 待处理',
- done: '⑥ 已处理',
- mine: '⑦ 我发起的',
- cc: '⑧ 抄送我的',
- detail: '⑨ 审批详情'
- };
- function show(id) {
- document.querySelectorAll('.screen').forEach(el => el.classList.toggle('on', el.id === 'screen-' + id));
- document.querySelectorAll('.nav-item').forEach(el => el.classList.toggle('active', el.dataset.screen === id));
- document.getElementById('title').textContent = titles[id] || id;
- }
- document.querySelectorAll('[data-screen]').forEach(btn => {
- btn.addEventListener('click', () => show(btn.dataset.screen));
- });
- document.querySelectorAll('[data-go]').forEach(el => {
- el.addEventListener('click', (e) => { e.preventDefault(); show(el.dataset.go); });
- });
- document.querySelectorAll('#designer-steps .step').forEach(step => {
- step.addEventListener('click', () => {
- document.querySelectorAll('#designer-steps .step').forEach(s => s.classList.remove('on'));
- step.classList.add('on');
- for (let i = 1; i <= 4; i++) {
- document.getElementById('dstep-' + i).style.display = (String(i) === step.dataset.step) ? 'block' : 'none';
- }
- });
- });
- </script>
- </body>
- </html>
|