| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689 |
- <!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;
- --text-2: #334155;
- --muted: #64748b;
- --border: #e2e8f0;
- --bg: #f1f5f9;
- --card: #fff;
- --warn: #d97706;
- --warn-bg: #fff7ed;
- --danger: #dc2626;
- --radius: 10px;
- }
- * { box-sizing: border-box; }
- body {
- margin: 0;
- min-height: 100vh;
- font: 14px/1.5 Inter, system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
- color: var(--text);
- background: linear-gradient(180deg, #eefcf6 0%, var(--bg) 160px) fixed;
- }
- .page {
- max-width: 1080px;
- margin: 0 auto;
- padding: 24px 20px 80px;
- }
- .hero {
- margin-bottom: 16px;
- padding: 16px 18px;
- background: #fff;
- border: 1px solid var(--border);
- border-radius: var(--radius);
- }
- .hero h1 {
- margin: 0 0 6px;
- font-size: 18px;
- font-weight: 700;
- color: var(--primary-dark);
- }
- .hero p {
- margin: 0;
- color: var(--text-2);
- font-size: 13px;
- }
- .hero .hint {
- margin-top: 10px;
- padding: 8px 12px;
- background: #f8fafc;
- border: 1px dashed var(--border);
- border-radius: 8px;
- font-size: 12px;
- color: var(--muted);
- }
- .tabs {
- display: flex;
- flex-wrap: wrap;
- gap: 8px;
- margin-bottom: 16px;
- }
- .tab {
- border: 1px solid var(--border);
- background: #fff;
- border-radius: 8px;
- padding: 8px 14px;
- font: inherit;
- font-size: 13px;
- cursor: pointer;
- color: var(--text-2);
- }
- .tab:hover { border-color: #a7f3d0; }
- .tab.is-on {
- color: var(--primary-dark);
- background: var(--primary-bg);
- border-color: #a7f3d0;
- font-weight: 600;
- }
- .panel {
- background: var(--card);
- border: 1px solid var(--border);
- border-radius: var(--radius);
- padding: 16px 20px;
- margin-bottom: 16px;
- }
- .panel-top {
- display: flex;
- align-items: flex-start;
- justify-content: space-between;
- gap: 16px;
- flex-wrap: wrap;
- padding-bottom: 14px;
- border-bottom: 1px solid var(--border);
- margin-bottom: 16px;
- }
- .title-wrap {
- display: flex;
- align-items: center;
- gap: 10px;
- flex-wrap: wrap;
- }
- .btn {
- border: 1px solid var(--border);
- background: #fff;
- border-radius: 8px;
- padding: 7px 14px;
- cursor: pointer;
- font: inherit;
- font-size: 13px;
- display: inline-flex;
- align-items: center;
- gap: 6px;
- color: var(--text);
- height: 36px;
- }
- .btn:hover { border-color: #a7f3d0; background: #f8fafc; }
- .btn.primary {
- background: var(--primary);
- border-color: var(--primary);
- color: #fff;
- }
- .btn.primary:hover { background: var(--primary-dark); border-color: var(--primary-dark); }
- .btn.transfer {
- border-color: #93c5fd;
- color: #1d4ed8;
- background: #eff6ff;
- }
- .btn.transfer:hover { background: #dbeafe; }
- .btn:disabled { opacity: .45; cursor: not-allowed; }
- .actions { display: flex; flex-wrap: wrap; gap: 8px; }
- h2.title {
- margin: 0;
- font-size: 16px;
- font-weight: 600;
- display: flex;
- align-items: center;
- gap: 8px;
- }
- h2.title::before {
- content: "";
- width: 3px;
- height: 16px;
- background: var(--primary);
- border-radius: 2px;
- }
- .tag {
- display: inline-block;
- padding: 2px 8px;
- border-radius: 6px;
- font-size: 12px;
- background: var(--warn-bg);
- color: var(--warn);
- }
- .tag.ok { background: var(--primary-bg); color: var(--primary-dark); }
- .tag.info { background: #f1f5f9; color: var(--muted); }
- .tag.xfer { background: #eff6ff; color: #1d4ed8; }
- .section { margin-bottom: 20px; }
- .section h3 {
- margin: 0 0 10px;
- font-size: 14px;
- font-weight: 600;
- color: var(--text-2);
- }
- .form-view {
- display: grid;
- grid-template-columns: 1fr 1fr;
- gap: 12px 16px;
- padding: 12px;
- background: #f8fafc;
- border-radius: 8px;
- border: 1px solid var(--border);
- }
- .field label {
- display: block;
- font-size: 11px;
- color: var(--muted);
- margin-bottom: 4px;
- }
- .field .val {
- font-size: 14px;
- color: var(--text);
- min-height: 22px;
- }
- .field.span2 { grid-column: 1 / -1; }
- @media (max-width: 720px) {
- .form-view { grid-template-columns: 1fr; }
- }
- /* progress chain */
- .chain { display: flex; flex-direction: column; gap: 0; }
- .chain-item {
- display: grid;
- grid-template-columns: 28px 1fr;
- gap: 12px;
- position: relative;
- padding-bottom: 18px;
- }
- .chain-item:last-child { padding-bottom: 0; }
- .dot {
- width: 28px;
- height: 28px;
- border-radius: 50%;
- display: flex;
- align-items: center;
- justify-content: center;
- font-size: 12px;
- font-weight: 600;
- z-index: 1;
- background: var(--primary-bg);
- color: var(--primary-dark);
- border: 2px solid #a7f3d0;
- }
- .dot.pending { background: var(--warn-bg); color: var(--warn); border-color: #fdba74; }
- .dot.xfer { background: #eff6ff; color: #1d4ed8; border-color: #93c5fd; }
- .dot.done { background: var(--primary-bg); color: var(--primary-dark); }
- .dot.start { background: #f1f5f9; color: var(--muted); border-color: var(--border); }
- .chain-item::before {
- content: "";
- position: absolute;
- left: 13px;
- top: 28px;
- bottom: 0;
- width: 2px;
- background: var(--border);
- }
- .chain-item:last-child::before { display: none; }
- .card-body { min-width: 0; }
- .card-title {
- font-weight: 600;
- font-size: 14px;
- margin-bottom: 4px;
- display: flex;
- align-items: center;
- gap: 8px;
- flex-wrap: wrap;
- }
- .card-meta { font-size: 12px; color: var(--muted); }
- .card-lines {
- margin-top: 6px;
- font-size: 13px;
- color: var(--text-2);
- line-height: 1.55;
- }
- .card-lines .comment {
- margin-top: 4px;
- padding: 6px 8px;
- background: #f8fafc;
- border-radius: 6px;
- color: var(--muted);
- font-size: 12px;
- }
- /* modal */
- .mask {
- position: fixed;
- inset: 0;
- background: rgba(15, 23, 42, .45);
- display: none;
- align-items: center;
- justify-content: center;
- z-index: 50;
- padding: 16px;
- backdrop-filter: none;
- }
- .mask.open { display: flex; }
- .dialog {
- width: min(520px, 100%);
- background: #fff;
- border-radius: var(--radius);
- border: 1px solid var(--border);
- max-height: calc(100vh - 100px);
- display: flex;
- flex-direction: column;
- box-shadow: 0 20px 40px rgba(15, 23, 42, .12);
- }
- .dialog-hd {
- padding: 14px 18px;
- border-bottom: 1px solid var(--border);
- font-weight: 600;
- font-size: 15px;
- }
- .dialog-bd {
- padding: 16px 18px;
- overflow: auto;
- }
- .dialog-ft {
- padding: 12px 18px;
- border-top: 1px solid var(--border);
- display: flex;
- justify-content: flex-end;
- gap: 8px;
- }
- .form-item { margin-bottom: 14px; }
- .form-item:last-child { margin-bottom: 0; }
- .form-item > label {
- display: block;
- font-size: 12px;
- color: var(--muted);
- margin-bottom: 6px;
- }
- .form-item .req { color: var(--danger); margin-left: 2px; }
- select, textarea, input[type="text"] {
- width: 100%;
- border: 1px solid var(--border);
- border-radius: 8px;
- padding: 8px 10px;
- font: inherit;
- height: 36px;
- background: #fff;
- }
- textarea { height: auto; min-height: 72px; resize: vertical; }
- select:focus, textarea:focus, input:focus {
- outline: none;
- border-color: var(--primary);
- box-shadow: 0 0 0 3px rgba(16, 185, 129, .15);
- }
- .note {
- font-size: 12px;
- color: var(--muted);
- margin-top: 6px;
- }
- .toast {
- position: fixed;
- top: 24px;
- left: 50%;
- transform: translateX(-50%) translateY(-12px);
- background: #0f172a;
- color: #fff;
- padding: 10px 16px;
- border-radius: 8px;
- font-size: 13px;
- opacity: 0;
- pointer-events: none;
- transition: .2s ease;
- z-index: 60;
- }
- .toast.show {
- opacity: 1;
- transform: translateX(-50%) translateY(0);
- }
- .compare {
- display: grid;
- grid-template-columns: 1fr 1fr;
- gap: 12px;
- }
- @media (max-width: 800px) {
- .compare { grid-template-columns: 1fr; }
- }
- .mini-card {
- border: 1px solid var(--border);
- border-radius: 8px;
- padding: 12px;
- background: #f8fafc;
- }
- .mini-card h4 {
- margin: 0 0 8px;
- font-size: 13px;
- color: var(--primary-dark);
- }
- .mini-card ul {
- margin: 0;
- padding-left: 18px;
- font-size: 12px;
- color: var(--text-2);
- line-height: 1.7;
- }
- .highlight-btn {
- outline: 2px solid #3b82f6;
- outline-offset: 2px;
- animation: pulse 1.4s ease-in-out infinite;
- }
- @keyframes pulse {
- 0%, 100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, .35); }
- 50% { box-shadow: 0 0 0 6px rgba(59, 130, 246, 0); }
- }
- .view { display: none; }
- .view.is-on { display: block; }
- </style>
- </head>
- <body>
- <div class="page">
- <div class="hero">
- <h1>OA 审批 ·【转交】交互 Demo</h1>
- <p>在现有「同意 / 拒绝 / 打回 / 加签」旁增加「转交」。本页演示审批详情顶栏、转交弹窗与转交后进度展示。</p>
- <div class="hint">
- 已定语义:转交 = 将<strong>本人当前待办</strong>交给另一人处理;转交后本人不再持有该待办;进度记录「已转交」。
- 与加签区别:加签是<strong>新增</strong>审批人,本人待办仍在。说明可选;无应用开关;可选租户内用户(排除本人与本节点已有待办)。
- </div>
- </div>
- <div class="tabs" role="tablist">
- <button class="tab is-on" data-tab="detail" type="button">1. 详情顶栏(含转交)</button>
- <button class="tab" data-tab="dialog" type="button">2. 转交弹窗</button>
- <button class="tab" data-tab="after" type="button">3. 转交后进度</button>
- <button class="tab" data-tab="diff" type="button">4. 与加签对比</button>
- </div>
- <!-- View 1: detail -->
- <div class="view is-on" id="view-detail">
- <section class="panel">
- <div class="panel-top">
- <div class="title-wrap">
- <button class="btn" type="button" disabled>← 返回</button>
- <h2 class="title">差旅报销 · 张三 · 2026-07-23</h2>
- <span class="tag">审批中</span>
- </div>
- <div class="actions">
- <button class="btn primary" type="button">✓ 同意</button>
- <button class="btn" type="button">✕ 拒绝</button>
- <button class="btn" type="button">↺ 打回</button>
- <button class="btn" type="button">+ 加签</button>
- <button class="btn transfer highlight-btn" type="button" id="btn-open-transfer">↗ 转交</button>
- </div>
- </div>
- <div class="section">
- <h3>表单内容</h3>
- <div class="form-view">
- <div class="field">
- <label>申请人</label>
- <div class="val">张三</div>
- </div>
- <div class="field">
- <label>部门</label>
- <div class="val">研发中心 / 平台组</div>
- </div>
- <div class="field">
- <label>报销金额</label>
- <div class="val">¥ 2,860.00</div>
- </div>
- <div class="field">
- <label>出差城市</label>
- <div class="val">合肥</div>
- </div>
- <div class="field span2">
- <label>事由</label>
- <div class="val">客户现场实施与验收</div>
- </div>
- </div>
- </div>
- <div class="section">
- <h3>审批进度</h3>
- <div class="chain" id="chain-before">
- <div class="chain-item">
- <div class="dot start">起</div>
- <div class="card-body">
- <div class="card-title">提交 <span class="tag ok">已提交</span></div>
- <div class="card-meta">张三 · 07-23 09:12</div>
- </div>
- </div>
- <div class="chain-item">
- <div class="dot pending">审</div>
- <div class="card-body">
- <div class="card-title">部门负责人 <span class="tag">审批中</span></div>
- <div class="card-meta">当前处理人:李四</div>
- <div class="card-lines">李四 · 待处理</div>
- </div>
- </div>
- <div class="chain-item">
- <div class="dot start">审</div>
- <div class="card-body">
- <div class="card-title">财务复核 <span class="tag info">未到达</span></div>
- <div class="card-meta">王五</div>
- </div>
- </div>
- </div>
- </div>
- </section>
- </div>
- <!-- View 2: dialog focus -->
- <div class="view" id="view-dialog">
- <section class="panel">
- <div class="panel-top">
- <div class="title-wrap">
- <h2 class="title">转交弹窗示意</h2>
- <span class="tag xfer">交互稿</span>
- </div>
- <div class="actions">
- <button class="btn transfer" type="button" id="btn-open-transfer-2">打开转交弹窗</button>
- </div>
- </div>
- <p style="margin:0 0 12px;color:var(--text-2);font-size:13px;">
- 字段对齐现有「加签」弹窗:选择用户 + 说明。差异点:转交人为<strong>单选</strong>(一人接手),说明<strong>可选</strong>。
- </p>
- <div class="compare">
- <div class="mini-card">
- <h4>字段</h4>
- <ul>
- <li>转交给(必填,单选用户)</li>
- <li>转交说明(可选)</li>
- <li>不可选:自己、已在本节点待办中的人</li>
- </ul>
- </div>
- <div class="mini-card">
- <h4>提交后效果</h4>
- <ul>
- <li>本人待办关闭为「已转交」</li>
- <li>目标人新增同节点 pending 待办</li>
- <li>进度展示「李四 已转交 …」+「赵六 待处理」</li>
- <li>无应用开关;全应用可转交;允许再转交</li>
- </ul>
- </div>
- </div>
- </section>
- </div>
- <!-- View 3: after transfer -->
- <div class="view" id="view-after">
- <section class="panel">
- <div class="panel-top">
- <div class="title-wrap">
- <button class="btn" type="button" disabled>← 返回</button>
- <h2 class="title">差旅报销 · 张三 · 2026-07-23</h2>
- <span class="tag">审批中</span>
- </div>
- <div class="actions">
- <span class="note" style="align-self:center;">李四已转交,本人操作区消失(非当前处理人)</span>
- </div>
- </div>
- <div class="section">
- <h3>审批进度(转交后)</h3>
- <div class="chain">
- <div class="chain-item">
- <div class="dot start">起</div>
- <div class="card-body">
- <div class="card-title">提交 <span class="tag ok">已提交</span></div>
- <div class="card-meta">张三 · 07-23 09:12</div>
- </div>
- </div>
- <div class="chain-item">
- <div class="dot pending">审</div>
- <div class="card-body">
- <div class="card-title">部门负责人 <span class="tag">审批中</span></div>
- <div class="card-meta">当前处理人:赵六</div>
- <div class="card-lines">
- 李四 · 已转交 · 07-23 10:05
- <div class="comment">转交说明:出差中,请赵六代为审批</div>
- 赵六 · 待处理
- </div>
- </div>
- </div>
- <div class="chain-item">
- <div class="dot start">审</div>
- <div class="card-body">
- <div class="card-title">财务复核 <span class="tag info">未到达</span></div>
- <div class="card-meta">王五</div>
- </div>
- </div>
- </div>
- </div>
- </section>
- </div>
- <!-- View 4: diff -->
- <div class="view" id="view-diff">
- <section class="panel">
- <div class="panel-top">
- <div class="title-wrap">
- <h2 class="title">转交 vs 加签</h2>
- </div>
- </div>
- <div class="compare">
- <div class="mini-card">
- <h4>转交</h4>
- <ul>
- <li>替换处理人:A → B</li>
- <li>A 待办结束(已转交)</li>
- <li>通常单选一人</li>
- <li>不改变节点人数语义(仍是「谁来批」)</li>
- <li>适合:请假/出差临时交接</li>
- </ul>
- </div>
- <div class="mini-card">
- <h4>加签</h4>
- <ul>
- <li>追加处理人:A + B(+C…)</li>
- <li>A 待办仍在</li>
- <li>可多选</li>
- <li>影响或签/会签收口</li>
- <li>适合:需要他人共同意见</li>
- </ul>
- </div>
- </div>
- </section>
- </div>
- </div>
- <!-- Transfer dialog -->
- <div class="mask" id="transfer-mask" aria-hidden="true">
- <div class="dialog" role="dialog" aria-labelledby="xfer-title">
- <div class="dialog-hd" id="xfer-title">转交</div>
- <div class="dialog-bd">
- <div class="form-item">
- <label>转交给<span class="req">*</span></label>
- <select id="xfer-user">
- <option value="">请选择用户</option>
- <option value="u6">赵六(zhaoliu)</option>
- <option value="u7">钱七(qianqi)</option>
- <option value="u8">孙八(sunba)</option>
- </select>
- <div class="note">不可选本人,以及本节点已有待办的用户。</div>
- </div>
- <div class="form-item">
- <label>转交说明(可选)</label>
- <textarea id="xfer-comment" placeholder="可填写转交原因,便于追溯"></textarea>
- </div>
- </div>
- <div class="dialog-ft">
- <button class="btn" type="button" id="btn-cancel-xfer">✕ 取消</button>
- <button class="btn primary" type="button" id="btn-confirm-xfer">✓ 确定转交</button>
- </div>
- </div>
- </div>
- <div class="toast" id="toast"></div>
- <script>
- (function () {
- var tabs = document.querySelectorAll('.tab')
- var views = {
- detail: document.getElementById('view-detail'),
- dialog: document.getElementById('view-dialog'),
- after: document.getElementById('view-after'),
- diff: document.getElementById('view-diff')
- }
- tabs.forEach(function (tab) {
- tab.addEventListener('click', function () {
- tabs.forEach(function (t) { t.classList.remove('is-on') })
- tab.classList.add('is-on')
- Object.keys(views).forEach(function (k) {
- views[k].classList.toggle('is-on', k === tab.dataset.tab)
- })
- })
- })
- var mask = document.getElementById('transfer-mask')
- var toast = document.getElementById('toast')
- function openMask() {
- mask.classList.add('open')
- mask.setAttribute('aria-hidden', 'false')
- }
- function closeMask() {
- mask.classList.remove('open')
- mask.setAttribute('aria-hidden', 'true')
- }
- function showToast(msg) {
- toast.textContent = msg
- toast.classList.add('show')
- setTimeout(function () { toast.classList.remove('show') }, 1800)
- }
- document.getElementById('btn-open-transfer').addEventListener('click', openMask)
- document.getElementById('btn-open-transfer-2').addEventListener('click', openMask)
- document.getElementById('btn-cancel-xfer').addEventListener('click', closeMask)
- mask.addEventListener('click', function (e) {
- if (e.target === mask) closeMask()
- })
- document.getElementById('btn-confirm-xfer').addEventListener('click', function () {
- var uid = document.getElementById('xfer-user').value
- var comment = (document.getElementById('xfer-comment').value || '').trim()
- if (!uid) {
- showToast('请选择转交人')
- return
- }
- closeMask()
- showToast(comment ? '已转交' : '已转交(无说明)')
- // jump to after view
- tabs.forEach(function (t) {
- t.classList.toggle('is-on', t.dataset.tab === 'after')
- })
- Object.keys(views).forEach(function (k) {
- views[k].classList.toggle('is-on', k === 'after')
- })
- })
- })()
- </script>
- </body>
- </html>
|