zkxw/docs/demos/oa-start-history-demo.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>OA 发起审批 · 历史记录 Demo</title>
  <style>
    :root {
      --primary: #10b981;
      --primary-dark: #059669;
      --primary-bg: #ecfdf5;
      --text: #334155;
      --text-strong: #0f172a;
      --text-muted: #94a3b8;
      --border: #cbd5e1;
      --bg: #f8fafc;
      --danger: #ef4444;
      --warning: #d97706;
      --info: #64748b;
    }
    * { box-sizing: border-box; }
    body {
      margin: 0;
      font-family: Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
      font-size: 14px;
      line-height: 1.5;
      color: var(--text);
      background: var(--bg);
    }
    .page { max-width: 1100px; margin: 0 auto; padding: 24px; }
    .note {
      margin-bottom: 16px;
      padding: 12px 16px;
      background: #fff;
      border: 1px solid var(--border);
      border-radius: 10px;
      color: var(--text-muted);
      font-size: 13px;
    }
    .note strong { color: var(--text-strong); }
    .search-wrap { display: flex; justify-content: center; margin: 8px 0 20px; }
    .search {
      width: min(520px, 100%);
      height: 42px;
      padding: 0 16px 0 40px;
      border: 1px solid var(--border);
      border-radius: 999px;
      background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2394a3b8' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85zm-5.242.656a5 5 0 1 1 0-10 5 5 0 0 1 0 10z'/%3E%3C/svg%3E") 14px center no-repeat;
      box-shadow: 0 1px 2px rgb(15 23 42 / 6%);
      outline: none;
    }
    .tabs { display: flex; gap: 28px; margin-bottom: 8px; }
    .tab {
      padding: 0 0 12px;
      border: 0;
      background: none;
      font-size: 16px;
      font-weight: 600;
      color: var(--text);
      cursor: pointer;
    }
    .tab.active {
      color: var(--text-strong);
      box-shadow: inset 0 -3px 0 var(--text-strong);
    }
    .hint { color: var(--text-muted); font-size: 13px; margin: 8px 0 20px; }
    .section-head {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 14px;
    }
    .section-head h3 { margin: 0; font-size: 14px; font-weight: 600; }
    .dot { width: 6px; height: 6px; border-radius: 50%; background: #f87171; }
    .meta { margin-left: auto; color: var(--text-muted); font-size: 12px; }
    .card-row { display: flex; flex-wrap: wrap; gap: 16px; }
    .card {
      display: flex;
      flex-direction: column;
      gap: 12px;
      width: 280px;
      min-height: 100px;
      padding: 14px 16px 10px;
      background: #fff;
      border: 1px solid var(--border);
      border-radius: 14px;
      box-shadow: 0 2px 8px rgb(15 23 42 / 8%);
      transition: border-color .15s, box-shadow .15s, transform .15s;
    }
    .card:hover {
      border-color: #86efac;
      box-shadow: 0 4px 14px rgb(16 185 129 / 16%);
      transform: translateY(-1px);
    }
    .card-main { display: flex; gap: 14px; align-items: center; }
    .icon {
      width: 40px; height: 40px; border-radius: 10px;
      background: linear-gradient(135deg, #34d399, #059669);
      color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 14px;
      flex-shrink: 0;
    }
    .icon.blue { background: linear-gradient(135deg, #60a5fa, #2563eb); }
    .icon.amber { background: linear-gradient(135deg, #fbbf24, #d97706); }
    .name { display: block; font-weight: 600; color: var(--text-strong); }
    .desc { display: block; margin-top: 4px; font-size: 12px; color: var(--text-muted); }
    .ops {
      display: flex;
      gap: 6px;
      justify-content: flex-end;
      padding-top: 8px;
      border-top: 1px solid #f1f5f9;
    }
    .btn {
      height: 26px;
      padding: 0 10px;
      border-radius: 5px;
      border: 1px solid var(--border);
      background: #fff;
      color: var(--text);
      font-size: 11px;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 3px;
    }
    .btn:hover { border-color: #86efac; color: var(--primary-dark); }
    .btn.primary {
      background: var(--primary);
      border-color: var(--primary);
      color: #fff;
    }
    .btn.primary:hover { background: var(--primary-dark); border-color: var(--primary-dark); color: #fff; }
    .btn.ghost-perm {
      border-style: dashed;
      color: var(--text-muted);
    }
    .legend {
      margin-top: 28px;
      padding: 14px 16px;
      background: #fff;
      border: 1px dashed #86efac;
      border-radius: 10px;
      font-size: 13px;
    }
    .legend code {
      padding: 1px 6px;
      background: var(--primary-bg);
      border-radius: 4px;
      color: var(--primary-dark);
      font-size: 12px;
    }

    /* Dialog */
    .mask {
      position: fixed; inset: 0;
      background: rgb(15 23 42 / 45%);
      display: none;
      align-items: flex-start;
      justify-content: center;
      padding: 40px 16px 24px;
      z-index: 50;
      overflow: auto;
    }
    .mask.open { display: flex; }
    .dialog {
      width: min(1080px, 100%);
      max-height: calc(100vh - 80px);
      background: #fff;
      border-radius: 12px;
      box-shadow: 0 20px 50px rgb(15 23 42 / 25%);
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }
    .dialog-h {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 16px 20px;
      border-bottom: 1px solid #e2e8f0;
    }
    .dialog-h h2 {
      margin: 0;
      font-size: 16px;
      color: var(--text-strong);
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .dialog-h h2::before {
      content: "";
      width: 3px; height: 16px;
      background: var(--primary);
      border-radius: 2px;
    }
    .close {
      width: 28px; height: 28px; border: 0; background: transparent;
      font-size: 18px; color: var(--text-muted); cursor: pointer; border-radius: 6px;
    }
    .close:hover { background: #f1f5f9; }
    .dialog-b { padding: 16px 20px; overflow: auto; flex: 1; }
    .filter {
      padding: 14px 16px;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      margin-bottom: 14px;
    }
    .filter-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px 16px;
    }
    .field label {
      display: block;
      font-size: 11px;
      color: var(--text-muted);
      margin-bottom: 4px;
    }
    .field input, .field select {
      width: 100%;
      height: 36px;
      padding: 0 10px;
      border: 1px solid var(--border);
      border-radius: 8px;
      background: #fff;
      font-size: 13px;
      color: var(--text);
    }
    .filter-actions {
      display: flex;
      justify-content: flex-end;
      gap: 8px;
      margin-top: 12px;
    }
    .btn-md {
      height: 36px;
      padding: 0 14px;
      border-radius: 8px;
      font-size: 13px;
      border: 1px solid var(--border);
      background: #fff;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }
    .btn-md.main {
      background: var(--primary);
      border-color: var(--primary);
      color: #fff;
    }
    table {
      width: 100%;
      border-collapse: collapse;
      font-size: 13px;
    }
    th, td {
      padding: 10px 8px;
      text-align: center;
      border-bottom: 1px solid #f1f5f9;
      white-space: nowrap;
    }
    th {
      color: var(--text-muted);
      font-weight: 600;
      background: #fafbfc;
      font-size: 12px;
    }
    tr:nth-child(even) td { background: #fafbfc; }
    tr:hover td { background: var(--primary-bg); }
    .tag {
      display: inline-block;
      padding: 2px 8px;
      border-radius: 999px;
      font-size: 12px;
      line-height: 1.4;
    }
    .tag.ok { background: #ecfdf5; color: #059669; }
    .tag.run { background: #ecfdf5; color: #047857; }
    .tag.reject { background: #fef2f2; color: #dc2626; }
    .tag.cancel { background: #f1f5f9; color: #64748b; }
    .link {
      color: var(--primary-dark);
      background: none;
      border: 0;
      cursor: pointer;
      font-size: 13px;
      padding: 0 4px;
    }
    .pager {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 12px;
      margin-top: 12px;
      padding-top: 12px;
      border-top: 1px solid #e2e8f0;
      color: var(--text-muted);
      font-size: 13px;
    }
    .pager .btn { height: 28px; }
    .dyn-col { background: #f0fdf4 !important; color: #047857; }
    .dyn-cell { color: var(--text-strong); }
    @media (max-width: 900px) {
      .filter-grid { grid-template-columns: 1fr 1fr; }
      .card { width: 100%; }
    }
  </style>
</head>
<body>
  <div class="page">
    <div class="note">
      <strong>Demo 说明：</strong>在「发起审批」流程卡片上，【发起】左侧增加【历史记录】（按钮始终显示；全员数据靠权限字符）。
      点击有权限示意卡片上的「历史记录」可打开弹窗。下方虚线按钮仅示意「无全员权限时仍显示历史，但只看本人」。
    </div>

    <div class="search-wrap">
      <input class="search" placeholder="请输入审批单名称" readonly />
    </div>

    <div class="tabs">
      <button class="tab active" type="button">全部</button>
      <button class="tab" type="button">人事</button>
      <button class="tab" type="button">财务</button>
      <button class="tab" type="button">行政</button>
    </div>
    <div class="hint">选择一个审批单即可发起 · 有权限时可查看该流程全员历史</div>

    <div class="section-head">
      <h3>人事</h3>
      <span class="dot"></span>
      <span class="meta">3 个表单</span>
    </div>
    <div class="card-row">
      <!-- 有权限：历史记录 + 发起 -->
      <div class="card">
        <div class="card-main">
          <div class="icon">假</div>
          <div>
            <span class="name">请假申请</span>
            <span class="desc">事假 / 年假 / 病假等</span>
          </div>
        </div>
        <div class="ops">
          <button class="btn" type="button" onclick="openHistory('请假申请')">历史记录</button>
          <button class="btn primary" type="button">发起</button>
        </div>
      </div>

      <div class="card">
        <div class="card-main">
          <div class="icon blue">出</div>
          <div>
            <span class="name">出差申请</span>
            <span class="desc">差旅事前审批</span>
          </div>
        </div>
        <div class="ops">
          <button class="btn" type="button" onclick="openHistory('出差申请')">历史记录</button>
          <button class="btn primary" type="button">发起</button>
        </div>
      </div>

      <!-- 无权限：仅发起 -->
      <div class="card">
        <div class="card-main">
          <div class="icon amber">补</div>
          <div>
            <span class="name">补卡申请</span>
            <span class="desc">无历史权限时不显示按钮</span>
          </div>
        </div>
        <div class="ops">
          <button class="btn ghost-perm" type="button" title="示意：无权限则不渲染此按钮" disabled>历史记录（隐藏）</button>
          <button class="btn primary" type="button">发起</button>
        </div>
      </div>
    </div>

    <div class="legend">
      <div><strong>交互点：</strong>点击「请假申请 / 出差申请」的 <code>历史记录</code> 打开弹窗</div>
      <div style="margin-top:6px">弹窗内：筛选（流程名称只读、审批状态、审批 ID、发起/完成时间段；全员权限另有申请人）+ 列表（标准列 + 表单前 6 个业务字段）+ 分页；操作查看/打印</div>
    </div>
  </div>

  <div class="mask" id="mask" onclick="onMask(event)">
    <div class="dialog" role="dialog" aria-modal="true">
      <div class="dialog-h">
        <h2 id="dlgTitle">历史记录 · 请假申请</h2>
        <button class="close" type="button" onclick="closeHistory()" aria-label="关闭">×</button>
      </div>
      <div class="dialog-b">
        <div class="filter">
          <div class="filter-grid">
            <div class="field">
              <label>流程名称</label>
              <input id="fAppName" value="请假申请" />
            </div>
            <div class="field">
              <label>审批状态</label>
              <select>
                <option value="">全部</option>
                <option>进行中</option>
                <option selected>已完成</option>
                <option>已拒绝</option>
                <option>已打回</option>
                <option>已撤销</option>
              </select>
            </div>
            <div class="field">
              <label>审批 ID</label>
              <input placeholder="请输入审批 ID" />
            </div>
            <div class="field">
              <label>发起时间</label>
              <input value="2026-08-01 至 2026-08-28" />
            </div>
            <div class="field">
              <label>完成时间</label>
              <input placeholder="YYYY-MM-DD 至 YYYY-MM-DD" />
            </div>
          </div>
          <div class="filter-actions">
            <button class="btn-md" type="button">重置</button>
            <button class="btn-md main" type="button">搜索</button>
          </div>
        </div>

        <div style="overflow:auto">
          <table>
            <thead>
              <tr>
                <th>序号</th>
                <th>审批 ID</th>
                <th>流程名称</th>
                <th>申请人</th>
                <th class="dyn-col">请假类型 ★</th>
                <th class="dyn-col">开始日期 ★</th>
                <th class="dyn-col">请假天数 ★</th>
                <th class="dyn-col">结束日期 ★</th>
                <th class="dyn-col">请假事由 ★</th>
                <th class="dyn-col">附件说明 ★</th>
                <th>发起时间</th>
                <th>完成时间</th>
                <th>审批状态</th>
                <th>当前节点</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>1</td>
                <td>a1b2c3d4-e5f6</td>
                <td>请假申请</td>
                <td>张三</td>
                <td class="dyn-cell">年假</td>
                <td class="dyn-cell">2026-09-01</td>
                <td class="dyn-cell">2</td>
                <td class="dyn-cell">2026-09-02</td>
                <td class="dyn-cell">家庭事务</td>
                <td class="dyn-cell">-</td>
                <td>2026-08-28 09:12</td>
                <td>2026-08-28 11:30</td>
                <td><span class="tag ok">已完成</span></td>
                <td>—</td>
                <td><button class="link" type="button">查看</button></td>
              </tr>
              <tr>
                <td>2</td>
                <td>b2c3d4e5-f6a7</td>
                <td>请假申请</td>
                <td>李四</td>
                <td class="dyn-cell">事假</td>
                <td class="dyn-cell">2026-08-29</td>
                <td class="dyn-cell">1</td>
                <td class="dyn-cell">2026-08-29</td>
                <td class="dyn-cell">外出办事</td>
                <td class="dyn-cell">-</td>
                <td>2026-08-27 14:05</td>
                <td>—</td>
                <td><span class="tag run">进行中</span></td>
                <td>部门负责人</td>
                <td><button class="link" type="button">查看</button></td>
              </tr>
              <tr>
                <td>3</td>
                <td>c3d4e5f6-a7b8</td>
                <td>请假申请</td>
                <td>王五</td>
                <td class="dyn-cell">病假</td>
                <td class="dyn-cell">2026-08-26</td>
                <td class="dyn-cell">3</td>
                <td class="dyn-cell">2026-08-28</td>
                <td class="dyn-cell">就医</td>
                <td class="dyn-cell">医院证明</td>
                <td>2026-08-25 10:22</td>
                <td>2026-08-25 16:40</td>
                <td><span class="tag reject">已拒绝</span></td>
                <td>—</td>
                <td><button class="link" type="button">查看</button></td>
              </tr>
              <tr>
                <td>4</td>
                <td>d4e5f6a7-b8c9</td>
                <td>请假申请</td>
                <td>赵六</td>
                <td class="dyn-cell">年假</td>
                <td class="dyn-cell">2026-08-22</td>
                <td class="dyn-cell">0.5</td>
                <td class="dyn-cell">2026-08-22</td>
                <td class="dyn-cell">休息</td>
                <td class="dyn-cell">-</td>
                <td>2026-08-20 08:50</td>
                <td>2026-08-20 09:10</td>
                <td><span class="tag cancel">已撤销</span></td>
                <td>—</td>
                <td><button class="link" type="button">查看</button></td>
              </tr>
            </tbody>
          </table>
        </div>

        <div class="pager">
          <span>共 28 条</span>
          <button class="btn" type="button">上一页</button>
          <span>第 1 / 3 页</span>
          <button class="btn" type="button">下一页</button>
        </div>

        <p style="margin:14px 0 0;font-size:12px;color:var(--text-muted)">
          ★ 绿色表头为业务字段（表单前 6 列），插在「申请人」与「发起时间」之间；不同流程列名不同。审批 ID 为实例 id。
        </p>
      </div>
    </div>
  </div>

  <script>
    function openHistory(name) {
      document.getElementById('dlgTitle').textContent = '历史记录 · ' + name;
      document.getElementById('fAppName').value = name;
      document.getElementById('mask').classList.add('open');
    }
    function closeHistory() {
      document.getElementById('mask').classList.remove('open');
    }
    function onMask(e) {
      if (e.target.id === 'mask') closeHistory();
    }
    document.addEventListener('keydown', function (e) {
      if (e.key === 'Escape') closeHistory();
    });
  </script>
</body>
</html>