fe6b4e59ec
将 openModal/closeModal 提升为顶层唯一定义，公司端启动即加载断档提醒， 并在 await 前提取表单引用；补充 Playwright 两端冒烟与源码契约测试。 Co-authored-by: Cursor <cursoragent@cursor.com> Co-authored-by: multica-agent <github@multica.ai>
1114 lines
63 KiB
HTML
1114 lines
63 KiB
HTML
<!doctype html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<meta name="description" content="金牛集团公司业务端" />
|
||
<title>公司业务端 · 金牛集团</title>
|
||
<link rel="stylesheet" href="design-system.css?v=6" />
|
||
</head>
|
||
<body data-portal="company">
|
||
<a class="skip-link" href="#main-content">跳到主要内容</a>
|
||
<div class="shell">
|
||
<aside class="sidebar" id="sidebar" aria-label="公司业务导航">
|
||
<div class="side-brand">
|
||
<div class="brand-name">金牛实业 · 资金往来</div>
|
||
<div class="brand-sub">HENAN JINNIU INDUSTRIAL GROUP</div>
|
||
<span class="side-role company">公司业务端</span>
|
||
</div>
|
||
<nav class="side-nav">
|
||
<div class="nav-group">业务</div>
|
||
<a class="active" data-view="workspace" href="#workspace"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"><rect x="3" y="3" width="8" height="8" rx="1.5"/><rect x="13" y="3" width="8" height="5" rx="1.5"/><rect x="13" y="10" width="8" height="11" rx="1.5"/><rect x="3" y="13" width="8" height="8" rx="1.5"/></svg><span class="nav-label">工作台</span></a>
|
||
<a data-view="upload" href="#upload"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"><path d="M12 16V4m0 0l-4 4m4-4l4 4"/><path d="M4 15v3a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-3"/></svg><span class="nav-label">流水导入</span></a>
|
||
<a data-view="manual" href="#manual"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"><path d="M12 20h9"/><path d="M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"/></svg><span class="nav-label">手工记录</span></a>
|
||
<a data-view="flows" href="#flows"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"><path d="M4 6h16M4 12h16M4 18h10"/></svg><span class="nav-label">流水管理</span></a>
|
||
<a data-view="transfers" href="#transfers"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"><path d="M7 7h13v3l-4-2.5L20 5V8"/><path d="M17 17H4v-3l4 2.5L4 19v-3"/><rect x="3" y="3" width="18" height="18" rx="2"/></svg><span class="nav-label">转账往来</span><span class="nav-badge" id="transfersNavBadge" hidden>0</span></a>
|
||
<a data-view="reconcile" href="#reconcile"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"><path d="M9 11.5l2 2 4-4.5"/><rect x="4" y="3" width="16" height="18" rx="2"/></svg><span class="nav-label">往来确认</span><span class="nav-badge">5</span></a>
|
||
<div class="nav-group">账户与消息</div>
|
||
<a data-view="accounts" href="#accounts"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3 10h18"/></svg><span class="nav-label">银行账户</span></a>
|
||
<a data-view="notifications" href="#notifications"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"><path d="M6 9a6 6 0 1 1 12 0c0 5 2 6 2 6H4s2-1 2-6"/><path d="M10 19a2 2 0 0 0 4 0"/></svg><span class="nav-label">通知</span><span class="nav-badge">3</span></a>
|
||
</nav>
|
||
<div class="side-foot">
|
||
<div class="user-row">
|
||
<span class="avatar">牛</span>
|
||
<div>
|
||
<div class="user-name">牛女士</div>
|
||
<div class="user-meta">金牛煤业 · 煤业出纳</div>
|
||
</div>
|
||
<button class="logout" type="button">退出</button>
|
||
</div>
|
||
</div>
|
||
</aside>
|
||
|
||
<div class="main">
|
||
<div class="topbar">
|
||
<span class="crumb">公司业务端 / <b id="currentViewName">工作台</b></span>
|
||
<div class="topbar-right">
|
||
<span class="tag">账期 2026-07</span>
|
||
<span class="tag">统计截止 2026-08-20</span>
|
||
</div>
|
||
</div>
|
||
|
||
<main class="content" id="main-content">
|
||
<section class="app-view is-active" data-page="workspace">
|
||
<div class="page-head">
|
||
<div>
|
||
<h1>工作台</h1>
|
||
<p class="page-sub"><span class="company-identity">河南金牛煤业有限公司</span> · 2026 年 7 月账期。本月 18 项账期任务已完成 13 项，剩余 4 项待办，其中 3 项阻断结账。</p>
|
||
</div>
|
||
<div class="page-actions">
|
||
<button class="btn" data-open-upload>上传流水</button>
|
||
<button class="btn btn-primary" id="workspaceUnilateralCta" data-view-link="reconcile">去确认单边流水 (0)</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<div class="card-head">
|
||
<span class="card-title">账期流程 · 2026-07<span class="sub" id="workspaceFlowSub">当前停在第 3 步「往来确认」，完成后即可等待集团结账</span></span>
|
||
<span class="pill pill-warn">结账日顺延至 08-29</span>
|
||
</div>
|
||
<div class="flow">
|
||
<a class="flow-step part" data-view-link="upload" href="#upload">
|
||
<div class="fs-top"><span class="fs-idx">01</span><span class="fs-dot"></span><span class="fs-name">流水导入</span></div>
|
||
<div class="fs-state">部分完成</div>
|
||
<div class="fs-meta">2/3 账户已覆盖 · 交行 7710 待审核</div>
|
||
</a>
|
||
<a class="flow-step done" data-view-link="manual" href="#manual">
|
||
<div class="fs-top"><span class="fs-idx">02</span><span class="fs-dot"></span><span class="fs-name">手工补录</span></div>
|
||
<div class="fs-state">已完成</div>
|
||
<div class="fs-meta">7 月手工记录 5 笔已提交</div>
|
||
</a>
|
||
<a class="flow-step doing" data-view-link="reconcile" href="#reconcile">
|
||
<div class="fs-top"><span class="fs-idx">03</span><span class="fs-dot"></span><span class="fs-name">往来确认</span></div>
|
||
<div class="fs-state" id="workspaceConfirmState">加载中…</div>
|
||
<div class="fs-meta" id="workspaceConfirmMeta">正在读取待确认单边流水</div>
|
||
</a>
|
||
<div class="flow-step wait">
|
||
<div class="fs-top"><span class="fs-idx">04</span><span class="fs-dot"></span><span class="fs-name">管理复核</span></div>
|
||
<div class="fs-state">等待集团</div>
|
||
<div class="fs-meta">2 笔复核在途 · 无需本公司操作</div>
|
||
</div>
|
||
<div class="flow-step wait">
|
||
<div class="fs-top"><span class="fs-idx">05</span><span class="fs-dot"></span><span class="fs-name">账期结账</span></div>
|
||
<div class="fs-state">08-29</div>
|
||
<div class="fs-meta">需先完成上方前 3 步</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="grid grid-3-2" style="margin-top: 14px;">
|
||
<div class="stack">
|
||
<div class="notice danger" id="companyCoverageNotice" style="display: none; margin-bottom: 14px;">
|
||
<div>
|
||
<div class="n-title" id="companyCoverageTitle">流水断档提醒</div>
|
||
<div class="n-body" id="companyCoverageBody"></div>
|
||
</div>
|
||
<div class="row" style="margin-top: 10px; gap: 8px; flex-wrap: wrap;">
|
||
<button type="button" class="btn btn-sm btn-primary" data-view-link="upload">去上传</button>
|
||
<button type="button" class="btn btn-sm" id="openAttestationFromWorkspace">提交无业务说明</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card" id="workspaceTodos">
|
||
<div class="card-head">
|
||
<span class="card-title">本月待办<span class="sub" id="workspaceTodoSub">按权威待确认单边流水同步</span></span>
|
||
<span class="pill pill-warn" id="workspacePendingStatus">加载中</span>
|
||
</div>
|
||
<div id="workspaceTodoList"></div>
|
||
<div class="table-foot" id="workspaceTodoFoot">
|
||
<span>正在读取待办…</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<div class="card-head">
|
||
<span class="card-title">账户覆盖情况<span class="sub">本公司已登记银行账户与流水上传覆盖区间</span></span>
|
||
<button class="btn btn-sm btn-ghost" data-view-link="accounts">管理账户 →</button>
|
||
</div>
|
||
<div class="table-wrap" style="border: 0;">
|
||
<table class="ds-table">
|
||
<thead>
|
||
<tr><th>银行账户</th><th>流水覆盖区间</th><th>状态</th></tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td class="cell-main">工商银行<span class="cell-sub">尾号 3305 · 基本户</span></td>
|
||
<td class="meta">2026-01-01 ~ 2026-08-20</td>
|
||
<td><span class="pill pill-success">已覆盖</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td class="cell-main">中国银行<span class="cell-sub">尾号 9916 · 一般户</span></td>
|
||
<td class="meta">2026-01-01 ~ 2026-08-12</td>
|
||
<td><span class="pill pill-warn">部分覆盖</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td class="cell-main">交通银行<span class="cell-sub">尾号 7710 · 一般户</span></td>
|
||
<td class="meta">未上传</td>
|
||
<td><span class="pill pill-info">待审核</span></td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="stack">
|
||
<div class="card" id="workspaceTransfersCard">
|
||
<div class="card-head">
|
||
<span class="card-title">转账往来概览<span class="sub" id="workspaceTransfersSub">加载中…</span></span>
|
||
</div>
|
||
<div class="mini-stats" id="workspaceTransfersStats">
|
||
<div class="mini-stat">
|
||
<div class="ms-label">转入合计</div>
|
||
<div class="ms-value pos" id="wsTfIn">—</div>
|
||
</div>
|
||
<div class="mini-stat">
|
||
<div class="ms-label">转出合计</div>
|
||
<div class="ms-value neg" id="wsTfOut">—</div>
|
||
</div>
|
||
<div class="mini-stat">
|
||
<div class="ms-label" id="wsTfNetLabel">期间净变动</div>
|
||
<div class="ms-value" id="wsTfNet">—</div>
|
||
</div>
|
||
<div class="mini-stat">
|
||
<div class="ms-label">待确认 · 不计入合计</div>
|
||
<div class="ms-value" id="wsTfPending" style="color: var(--warn);">—</div>
|
||
</div>
|
||
</div>
|
||
<button class="btn btn-ghost" data-view-link="transfers" style="width: 100%; margin-top: 12px;">查看转账往来明细 →</button>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<div class="card-head">
|
||
<span class="card-title">最新通知<span class="sub">来自管理端</span></span>
|
||
<button class="btn btn-sm btn-ghost" data-view-link="notifications">全部通知 (3) →</button>
|
||
</div>
|
||
<div class="list-row">
|
||
<span class="pill pill-warn">提醒</span>
|
||
<div class="lr-main">
|
||
<div class="lr-title">7 月账期结账日顺延至 08-29</div>
|
||
<div class="lr-sub">请在此之前完成往来确认事项</div>
|
||
</div>
|
||
<span class="lr-side meta">08-18</span>
|
||
</div>
|
||
<div class="list-row">
|
||
<span class="pill pill-warn">提醒</span>
|
||
<div class="lr-main">
|
||
<div class="lr-title">3 笔单边流水待确认</div>
|
||
<div class="lr-sub">涉及金牛置业、金牛贸易往来</div>
|
||
</div>
|
||
<span class="lr-side meta">08-16</span>
|
||
</div>
|
||
<div class="list-row">
|
||
<span class="pill pill-success">通过</span>
|
||
<div class="lr-main">
|
||
<div class="lr-title">中行尾号 9916 流水导入成功</div>
|
||
<div class="lr-sub">流水覆盖至 08-12</div>
|
||
</div>
|
||
<span class="lr-side meta">08-12</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="app-view" data-page="upload">
|
||
<div class="page-head">
|
||
<div>
|
||
<h1>流水导入</h1>
|
||
<p class="page-sub">上传银行导出的 Excel 流水文件，系统按表头识别银行模板、解析期间与明细并做覆盖校验。当前账期 2026-07，仅已审核通过的账户可导入。</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="grid grid-1-2">
|
||
<div class="card">
|
||
<div class="card-head">
|
||
<span class="card-title">上传流水<span class="sub">先选账户，再选择或拖入流水文件</span></span>
|
||
</div>
|
||
<form id="uploadForm" novalidate>
|
||
<div class="field" style="margin-bottom: 14px;">
|
||
<label for="accountSelect">选择银行账户</label>
|
||
<select class="select" id="accountSelect" required><option value="">请选择账户</option></select>
|
||
<span class="hint">仅已审核通过的账户可上传；选择账户与文件后方可解析</span>
|
||
</div>
|
||
<div class="field" style="margin-bottom: 14px;">
|
||
<label>流水文件</label>
|
||
<input type="file" id="fileInput" accept=".xls,.xlsx" hidden />
|
||
<div class="dropzone" id="dropzone" tabindex="0" role="button" aria-label="拖放或点击选择流水文件">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><path d="M12 16V5m0 0L8 9m4-4l4 4"/><path d="M4 15v3a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-3"/></svg>
|
||
<div class="dz-title">拖放银行流水文件到此处</div>
|
||
<div class="dz-sub">或 <span class="dz-browse">点击选择文件</span>，支持银行导出的 Excel</div>
|
||
<div class="dz-formats">.XLS / .XLSX · MAX 20MB</div>
|
||
</div>
|
||
<div class="file-chip" id="filePreview" hidden>
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><path d="M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z"/><path d="M14 3v5h5"/></svg>
|
||
<div class="fc-info">
|
||
<div class="fc-name" id="fileName"></div>
|
||
<div class="fc-meta" id="fileMeta"></div>
|
||
</div>
|
||
<button type="button" class="fc-remove" id="removeFile" aria-label="移除已选文件">×</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="notice info" id="parseResult" hidden>
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" style="width: 18px; height: 18px; flex: none; margin-top: 1px;"><use href="icons.svg#circle-check"/></svg>
|
||
<div style="flex: 1; min-width: 0;">
|
||
<div class="n-title" id="parseTitle">文件解析完成</div>
|
||
<div class="n-body" id="parseSummary"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="sheetReview" hidden>
|
||
<div class="card-title" style="margin: 14px 0 6px;">工作表处理</div>
|
||
<span class="hint" style="display: block; margin-bottom: 10px;">解析成功不等于业务确认：只有勾选并确认的工作表才会进入后续匹配与计算。</span>
|
||
<div id="sheetList" aria-live="polite"></div>
|
||
</div>
|
||
|
||
<button class="btn btn-primary" id="parseButton" type="submit" disabled style="width: 100%; margin-top: 14px;"><span>开始解析</span></button>
|
||
<span class="hint" style="display: block; margin-top: 8px; text-align: center;">请先选择流水文件，选择后此按钮方可点击</span>
|
||
|
||
<div class="detail-box" style="margin-top: 14px;">
|
||
<div style="font-weight: 650; margin-bottom: 6px;">导入规则</div>
|
||
<div class="stack" style="gap: 5px;">
|
||
<div>· 同一账户同一月份重复导入时，新批次覆盖旧批次</div>
|
||
<div>· 导入后系统自动与对方公司流水轧算往来余额</div>
|
||
<div>· 无法解析的行转入审核中心，不影响其余明细入库</div>
|
||
</div>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<div class="card-head">
|
||
<span class="card-title">历史导入批次<span class="sub">2026 年 7 月账期 · 本公司全部账户</span></span>
|
||
</div>
|
||
<div class="table-wrap" style="border: 0;">
|
||
<table class="ds-table">
|
||
<thead>
|
||
<tr>
|
||
<th>批次</th><th>银行账户</th><th>流水期间</th>
|
||
<th class="num-col">明细数</th><th>覆盖状态</th><th>解析状态</th>
|
||
<th>上传时间</th><th>操作</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody id="importRows"></tbody>
|
||
</table>
|
||
</div>
|
||
<div class="table-foot">
|
||
<span id="importFoot">暂无批次</span>
|
||
<span class="meta">同一账户同一月份重复导入时，新批次覆盖旧批次</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="app-view" data-page="manual">
|
||
<div class="page-head">
|
||
<div>
|
||
<h1>手工记录</h1>
|
||
<p class="page-sub">登记未通过银行流水体现的往来业务，如个人过账、现金收付与未入账回单。提交后由管理员审核，通过后计入本公司往来台账。</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="grid grid-1-2">
|
||
<div class="card">
|
||
<div class="card-head">
|
||
<span class="card-title">登记手工往来<span class="sub">带 * 为必填项，提交后进入待审核状态</span></span>
|
||
</div>
|
||
<form id="manualEntryForm" novalidate>
|
||
<div class="grid grid-2" style="gap: 12px;">
|
||
<div class="field"><label>交易日期 *</label><input class="input num-input" name="transactionDate" type="date" value="2026-08-06" required /></div>
|
||
<div class="field"><label>收付方向 *</label><select class="select" name="direction" required><option>付款</option><option>收款</option></select></div>
|
||
<div class="field"><label>金额（元）*</label><input class="input num-input" name="amount" type="number" min="0.01" step="0.01" required /></div>
|
||
<div class="field"><label>资金来源 *</label><select class="select" name="sourceAccount" required><option value="">请选择</option><option>个人过账</option></select></div>
|
||
<div class="field"><label>对方类型 *</label><select class="select" name="counterpartyType" required><option>集团内部公司</option><option>个人过账方</option><option>外部单位</option></select></div>
|
||
<div class="field"><label>对方名称 *</label><input class="input" name="counterparty" maxlength="100" placeholder="公司全称或个人姓名" required /></div>
|
||
<div class="field"><label>对方账号</label><input class="input" name="counterpartyAccount" maxlength="64" placeholder="可选" /></div>
|
||
<div class="field"><label>往来科目 *</label><select class="select" name="subject" required><option>应收</option><option>应付</option><option>其他应收</option><option>其他应付</option></select></div>
|
||
</div>
|
||
<div class="field" style="margin-top: 12px;"><label>业务摘要 *</label><input class="input" name="summary" maxlength="120" placeholder="例如：个人代付后转回" required /></div>
|
||
<div class="field" style="margin-top: 12px;"><label>补充说明 *</label><textarea class="textarea" name="remark" rows="3" maxlength="500" placeholder="说明形成原因和核对依据" required></textarea></div>
|
||
<div class="grid grid-2" style="gap: 12px; margin-top: 12px;">
|
||
<div class="field"><label>关联银行流水号</label><input class="input" name="bankReference" maxlength="80" placeholder="可选" /></div>
|
||
<div class="field"><label>证明附件</label><input class="input" name="evidence" type="file" accept=".pdf,.png,.jpg,.jpeg,.xls,.xlsx" /></div>
|
||
</div>
|
||
<div class="notice info" style="margin-top: 14px;">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" style="width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--info);"><circle cx="12" cy="12" r="8.5"/><path d="M12 8v5M12 16.5v.01"/></svg>
|
||
<div><div class="n-title">手工记录与银行原始流水分开留痕</div><div class="n-body">管理员复核通过后才纳入往来计算，撤回后需重新登记提交。</div></div>
|
||
</div>
|
||
<button class="btn btn-primary" type="submit" style="width: 100%; margin-top: 16px;">提交管理复核</button>
|
||
</form>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<div class="card-head">
|
||
<span class="card-title">已提交记录<span class="sub">账期 2026-07 内本公司提交的手工往来，<span class="num" id="manualPendingStatus">0</span> 笔待管理复核</span></span>
|
||
</div>
|
||
<div class="table-wrap" style="border: 0;">
|
||
<table class="ds-table">
|
||
<thead>
|
||
<tr>
|
||
<th>日期</th><th>方向</th><th>对方</th><th>科目</th>
|
||
<th class="num-col">金额（元）</th><th class="wrap">摘要</th><th>审核状态</th><th>操作</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody id="manualRecordRows"></tbody>
|
||
</table>
|
||
</div>
|
||
<div class="empty" id="manualEmpty" hidden>
|
||
<div class="e-title">暂无已提交记录</div>
|
||
登记的手工往来提交后会显示在这里。
|
||
</div>
|
||
<div class="table-foot">
|
||
<span id="manualFoot">共 0 条</span>
|
||
<span class="meta">审核由管理员在 1 个工作日内完成</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="app-view" data-page="flows">
|
||
<div class="notice danger" id="flowsCoverageNotice" style="display: none; margin-bottom: 14px;">
|
||
<div>
|
||
<div class="n-title">流水断档提醒</div>
|
||
<div class="n-body" id="flowsCoverageBody"></div>
|
||
</div>
|
||
<div class="row" style="margin-top: 10px; gap: 8px;">
|
||
<button type="button" class="btn btn-sm btn-primary" data-view-link="upload">去上传</button>
|
||
<button type="button" class="btn btn-sm" id="openAttestationFromFlows">提交无业务说明</button>
|
||
</div>
|
||
</div>
|
||
<div class="page-head">
|
||
<div>
|
||
<h1>流水管理</h1>
|
||
<p class="page-sub">本公司名下银行账户的原始流水及归集状态。集团内往来流水将进入往来确认与归集链路，外部流水不参与归集。</p>
|
||
</div>
|
||
<div class="page-actions">
|
||
<button class="btn btn-primary" id="exportFlows">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" style="width: 15px; height: 15px;"><path d="M12 4v11m0 0l-4-4m4 4l4-4"/><path d="M4 17v2.5A1.5 1.5 0 0 0 5.5 21h13a1.5 1.5 0 0 0 1.5-1.5V17"/></svg>
|
||
导出 CSV
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="filters">
|
||
<div class="field">
|
||
<label for="flowBank">银行</label>
|
||
<select class="select" id="flowBank"><option>全部银行</option><option>工商银行</option><option>中国银行</option><option>交通银行</option></select>
|
||
</div>
|
||
<div class="field">
|
||
<label for="flowAccount">账户</label>
|
||
<select class="select" id="flowAccount"><option>全部账户</option><option>3305</option><option>9916</option><option>7710</option></select>
|
||
</div>
|
||
<div class="field">
|
||
<label for="flowStart">日期起</label>
|
||
<input class="input num-input" id="flowStart" type="date" value="2026-07-01" />
|
||
</div>
|
||
<div class="field">
|
||
<label for="flowEnd">日期止</label>
|
||
<input class="input num-input" id="flowEnd" type="date" value="2026-08-20" />
|
||
</div>
|
||
<div class="field" style="min-width: 200px;">
|
||
<label for="flowKeyword">关键词</label>
|
||
<input class="input" id="flowKeyword" type="text" placeholder="对方单位 / 摘要 / 流水号" />
|
||
</div>
|
||
<button class="btn" id="resetFlowFilters">重置</button>
|
||
<button class="btn btn-primary" id="applyFlowFilters">查询</button>
|
||
</div>
|
||
|
||
<div class="table-wrap">
|
||
<table class="ds-table" id="flowTable">
|
||
<thead>
|
||
<tr>
|
||
<th>日期</th>
|
||
<th>银行账户</th>
|
||
<th>方向</th>
|
||
<th class="wrap">对方单位</th>
|
||
<th class="wrap">摘要</th>
|
||
<th>银行流水号</th>
|
||
<th>归集状态</th>
|
||
<th class="num-col">金额</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody></tbody>
|
||
</table>
|
||
<div class="empty" id="flowEmpty" hidden>
|
||
<div class="e-title">没有符合条件的流水</div>
|
||
调整筛选条件后重新查询。
|
||
</div>
|
||
<div class="table-foot">
|
||
<span id="flowCount">共 0 笔</span>
|
||
<span class="num" id="flowSum"></span>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="app-view" data-page="transfers">
|
||
<div id="transfersOverviewLayer">
|
||
<div class="page-head">
|
||
<div>
|
||
<h1>转账往来</h1>
|
||
<p class="page-sub" id="transfersPageSub">加载本公司与集团内其他公司的转账往来…</p>
|
||
</div>
|
||
<div class="page-actions">
|
||
<button class="btn" type="button" id="transfersExportBtn">导出台账</button>
|
||
<button class="btn btn-primary" type="button" id="transfersGoConfirm" data-view-link="reconcile" hidden>去确认待确认</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="transfersLoading" class="card" hidden>
|
||
<div class="grid grid-4" style="margin-bottom: 14px;">
|
||
<div class="skeleton" style="height: 88px;"></div>
|
||
<div class="skeleton" style="height: 88px;"></div>
|
||
<div class="skeleton" style="height: 88px;"></div>
|
||
<div class="skeleton" style="height: 88px;"></div>
|
||
</div>
|
||
<div class="skeleton skeleton-line" style="width: 70%;"></div>
|
||
<div class="skeleton skeleton-line" style="width: 92%;"></div>
|
||
<div class="skeleton skeleton-line" style="width: 55%; margin-bottom: 0;"></div>
|
||
<div class="loading-inline" style="margin-top: 16px;">加载中，正在计算往来余额…</div>
|
||
</div>
|
||
|
||
<div id="transfersError" class="notice danger" hidden>
|
||
<div>
|
||
<div class="n-title">转账往来数据加载失败</div>
|
||
<div class="n-body" id="transfersErrorBody">服务器连接异常。为避免误读，本页不展示任何金额。</div>
|
||
</div>
|
||
<div class="row" style="margin-top: 12px; gap: 8px;">
|
||
<button class="btn btn-primary" type="button" id="transfersRetryBtn">重新加载</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="transfersEmpty" class="card" hidden>
|
||
<div class="grid grid-4" id="transfersEmptyStats"></div>
|
||
<div class="empty" style="margin-top: 14px;">
|
||
<div class="e-title">该期间暂无转账往来</div>
|
||
<div>可能尚未导入流水，或集团内往来确认尚未完成。导入本公司银行流水后，系统会自动计算公司间往来。</div>
|
||
<div class="row" style="justify-content: center; margin-top: 14px; gap: 8px;">
|
||
<button class="btn btn-primary" type="button" data-view-link="upload">去导入流水</button>
|
||
<button class="btn" type="button" data-view-link="accounts">查看银行账户</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="transfersData" hidden>
|
||
<div class="grid grid-4" id="transfersStatGrid">
|
||
<div class="card stat-card" id="tfStatOpeningCard" hidden>
|
||
<div class="stat-label"><span class="stat-dot muted"></span>期初余额</div>
|
||
<div class="stat-value" id="tfStatOpening">—</div>
|
||
<div class="stat-foot">起算日前一日结转</div>
|
||
</div>
|
||
<div class="card stat-card">
|
||
<div class="stat-label"><span class="stat-dot info"></span>往来公司数</div>
|
||
<div class="stat-value" id="tfStatCompanies">—<span class="unit">家</span></div>
|
||
<div class="stat-foot" id="tfStatCompaniesFoot">统计窗口内有往来的对方公司</div>
|
||
</div>
|
||
<div class="card stat-card">
|
||
<div class="stat-label"><span class="stat-dot success"></span>本期转入 · 流入</div>
|
||
<div class="stat-value amt-in" id="tfStatIn">—</div>
|
||
<div class="stat-foot">已确认转入合计 · 待确认不计入</div>
|
||
</div>
|
||
<div class="card stat-card">
|
||
<div class="stat-label"><span class="stat-dot danger"></span>本期转出 · 流出</div>
|
||
<div class="stat-value amt-out" id="tfStatOut">—</div>
|
||
<div class="stat-foot">已确认转出合计 · 待确认不计入</div>
|
||
</div>
|
||
<div class="card stat-card">
|
||
<div class="stat-label"><span class="stat-dot info"></span><span id="tfStatNetTitle">期间净变动</span></div>
|
||
<div class="stat-value" id="tfStatNet">—</div>
|
||
<div class="stat-foot" id="tfStatNetFoot">正数=应收方向 · 负数=应付方向</div>
|
||
</div>
|
||
<div class="card stat-card" id="tfStatEndingCard" hidden>
|
||
<div class="stat-label"><span class="stat-dot success"></span>期末余额</div>
|
||
<div class="stat-value" id="tfStatEnding">—</div>
|
||
<div class="stat-foot">期初 + 本期变动</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="xfer-split" id="transfersSplit" style="margin-top: 14px;">
|
||
<div class="xfer-split-pane confirmed">
|
||
<div class="xfer-split-head">
|
||
<span class="pill pill-success">已确认</span>
|
||
<span class="meta" id="tfConfirmedCount">0 笔</span>
|
||
</div>
|
||
<div class="xfer-split-value num" id="tfConfirmedNet">—</div>
|
||
<div class="xfer-split-note">计入上方合计与期间净变动</div>
|
||
</div>
|
||
<div class="xfer-split-pane pending">
|
||
<div class="xfer-split-head">
|
||
<span class="pill pill-warn">待确认</span>
|
||
<span class="meta" id="tfPendingCount">0 笔</span>
|
||
</div>
|
||
<div class="xfer-split-value num" id="tfPendingAmount">—</div>
|
||
<div class="xfer-split-note">单列展示，不计入已确认合计</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card" style="margin-top: 14px;">
|
||
<div class="card-head">
|
||
<span class="card-title">按对方公司查看<span class="sub">点击行进入该公司往来明细</span></span>
|
||
<span class="pill pill-info">仅本公司数据</span>
|
||
</div>
|
||
<div class="table-wrap" style="border: 0;">
|
||
<table class="ds-table" id="transfersCpTable">
|
||
<thead>
|
||
<tr>
|
||
<th>对方公司</th>
|
||
<th class="num-col">已确认转入</th>
|
||
<th class="num-col">已确认转出</th>
|
||
<th class="num-col">净往来</th>
|
||
<th>方向</th>
|
||
<th>待确认</th>
|
||
<th>最近往来日</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody id="transfersCpBody"></tbody>
|
||
<tfoot id="transfersCpFoot"></tfoot>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="notice info" style="margin-top: 14px;">
|
||
<div class="n-title">口径说明</div>
|
||
<div class="n-body">仅含集团内公司间转账（HEL-169）。已确认与待确认严格分开；待确认不计入合计。起算日/期初未就绪时展示「期间净变动」，不得当作期末余额。银行原始流水只读，调整须走冲销/调整单留痕。</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="transfersDetailLayer" hidden>
|
||
<div class="page-head">
|
||
<div>
|
||
<button class="btn btn-ghost" type="button" id="transfersBackBtn" style="padding-left: 0; margin-bottom: 4px;">← 返回总览</button>
|
||
<h1 id="transfersDetailTitle">往来明细</h1>
|
||
<p class="page-sub" id="transfersDetailSub">筛选后加载更多 · 单位：万元</p>
|
||
</div>
|
||
<div class="page-actions">
|
||
<button class="btn" type="button" id="transfersDetailExportBtn">导出台账</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="grid grid-3" id="transfersDetailStats" style="margin-bottom: 14px;">
|
||
<div class="card stat-card">
|
||
<div class="stat-label">往来笔数</div>
|
||
<div class="stat-value" id="tfDetailCount">—</div>
|
||
<div class="stat-foot" id="tfDetailCountFoot">当前筛选</div>
|
||
</div>
|
||
<div class="card stat-card">
|
||
<div class="stat-label">转入 · 流入</div>
|
||
<div class="stat-value amt-in" id="tfDetailIn">—</div>
|
||
</div>
|
||
<div class="card stat-card">
|
||
<div class="stat-label">转出 · 流出</div>
|
||
<div class="stat-value amt-out" id="tfDetailOut">—</div>
|
||
</div>
|
||
</div>
|
||
|
||
<form class="filters" id="transfersFilterForm" novalidate>
|
||
<div class="field">
|
||
<label for="tfFilterDirection">方向</label>
|
||
<select class="select" id="tfFilterDirection" name="direction">
|
||
<option value="">全部</option>
|
||
<option value="in">转入</option>
|
||
<option value="out">转出</option>
|
||
</select>
|
||
</div>
|
||
<div class="field">
|
||
<label for="tfFilterState">确认状态</label>
|
||
<select class="select" id="tfFilterState" name="state">
|
||
<option value="">全部</option>
|
||
<option value="confirmed">已确认</option>
|
||
<option value="pending">待确认</option>
|
||
</select>
|
||
</div>
|
||
<div class="field">
|
||
<label for="tfFilterFrom">日期起</label>
|
||
<input class="input num-input" id="tfFilterFrom" name="from" type="date" />
|
||
</div>
|
||
<div class="field">
|
||
<label for="tfFilterTo">日期止</label>
|
||
<input class="input num-input" id="tfFilterTo" name="to" type="date" />
|
||
</div>
|
||
<button class="btn" type="button" id="tfFilterReset">清空筛选</button>
|
||
<button class="btn btn-primary" type="submit">查询</button>
|
||
</form>
|
||
|
||
<div class="table-wrap">
|
||
<table class="ds-table" id="transfersEventTable">
|
||
<thead>
|
||
<tr>
|
||
<th>日期</th>
|
||
<th class="wrap">摘要</th>
|
||
<th>方向</th>
|
||
<th class="num-col">金额（万元）</th>
|
||
<th>状态</th>
|
||
<th></th>
|
||
</tr>
|
||
</thead>
|
||
<tbody id="transfersEventBody"></tbody>
|
||
</table>
|
||
<div class="empty" id="transfersEventEmpty" hidden>
|
||
<div class="e-title">当前筛选条件下没有流水</div>
|
||
<div>可清空筛选后重试，或返回总览查看其他对方公司。</div>
|
||
<div class="row" style="justify-content: center; margin-top: 12px;">
|
||
<button class="btn" type="button" id="tfEmptyClear">清空筛选</button>
|
||
</div>
|
||
</div>
|
||
<div class="table-foot">
|
||
<span id="transfersEventFoot">共 0 笔</span>
|
||
<button class="btn btn-sm" type="button" id="transfersLoadMore" hidden>加载更多</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="app-view" data-page="reconcile">
|
||
<div class="page-head">
|
||
<div>
|
||
<h1>往来确认</h1>
|
||
<p class="page-sub">处理本公司流水与对方公司对账出现的单边记录，并确认往来科目归属。7 月结账日因故顺延至 08-29，逾期未确认将阻断本公司结账。</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="notice warn" id="blocking-notice" style="margin-bottom: 16px;">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" style="width: 18px; height: 18px; flex: none; margin-top: 1px;"><path d="M12 8v5M12 16.5v.01"/><path d="M10.3 4.1L2.8 17a2 2 0 0 0 1.7 3h15a2 2 0 0 0 1.7-3L13.7 4.1a2 2 0 0 0-3.4 0z"/></svg>
|
||
<div>
|
||
<div class="n-title" id="notice-title">正在读取待确认单边流水…</div>
|
||
<div class="n-body" id="notice-body">工作台与往来确认共用同一权威待确认集合。</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="tabs">
|
||
<button type="button" class="active" id="tab-match" aria-pressed="true">单边流水匹配<span class="tab-count" id="count-match">0</span></button>
|
||
<button type="button" id="tab-subject" aria-pressed="false">科目确认<span class="tab-count" id="count-subject">2</span></button>
|
||
</div>
|
||
|
||
<section id="panel-match">
|
||
<div class="stack" id="match-stack"></div>
|
||
|
||
<div class="card" style="margin-top: 14px; display: none;" id="matched-summary">
|
||
<div class="card-head">
|
||
<span class="card-title">已匹配记录<span class="sub">本页已确认的单边流水</span></span>
|
||
</div>
|
||
<div id="matched-list"></div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="panel-subject" style="display: none;">
|
||
<div class="card" style="padding: 0;">
|
||
<div class="table-wrap" style="border: 0;">
|
||
<table class="ds-table">
|
||
<thead>
|
||
<tr>
|
||
<th>日期</th><th>对方</th><th class="num-col">金额</th><th>摘要</th><th>当前建议科目</th><th>科目确认</th><th>状态</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr data-subject-row>
|
||
<td class="num">2026-07-18</td>
|
||
<td class="cell-main">金牛新能源</td>
|
||
<td class="num-col amt-in">¥680,000.00</td>
|
||
<td>矿区光伏场地租赁费</td>
|
||
<td><span class="tag">其他应收</span></td>
|
||
<td>
|
||
<div class="row" style="gap: 8px;">
|
||
<select class="select" style="min-height: 30px; padding: 4px 8px;"><option>应收</option><option>应付</option><option selected>其他应收</option><option>其他应付</option></select>
|
||
<button class="btn btn-sm btn-primary subject-confirm-btn">确认</button>
|
||
</div>
|
||
</td>
|
||
<td class="subject-status"><span class="pill pill-warn">待确认</span></td>
|
||
</tr>
|
||
<tr data-subject-row>
|
||
<td class="num">2026-07-25</td>
|
||
<td class="cell-main">金牛农业</td>
|
||
<td class="num-col amt-out">¥420,000.00</td>
|
||
<td>职工食堂食材统采分摊</td>
|
||
<td><span class="tag">其他应付</span></td>
|
||
<td>
|
||
<div class="row" style="gap: 8px;">
|
||
<select class="select" style="min-height: 30px; padding: 4px 8px;"><option>应收</option><option>应付</option><option>其他应收</option><option selected>其他应付</option></select>
|
||
<button class="btn btn-sm btn-primary subject-confirm-btn">确认</button>
|
||
</div>
|
||
</td>
|
||
<td class="subject-status"><span class="pill pill-warn">待确认</span></td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<div class="table-foot">
|
||
<span>共 2 条待确认 · 确认后可在「流水管理」中继续查看</span>
|
||
<span class="num">合计 ¥1,100,000.00</span>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</section>
|
||
|
||
<section class="app-view" data-page="accounts">
|
||
<div class="page-head">
|
||
<div>
|
||
<h1>银行账户</h1>
|
||
<p class="page-sub">本公司名下已登记银行账户。仅审核通过的账户可上传流水，账号对外仅显示尾号。</p>
|
||
</div>
|
||
<div class="page-actions">
|
||
<button class="btn btn-primary" id="openAccountDialog">提交新账户登记</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="notice info" style="margin-bottom: 14px;">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" style="width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--info);"><circle cx="12" cy="12" r="8.5"/><path d="M12 8v5M12 16.5v.01"/></svg>
|
||
<div>
|
||
<div class="n-title">新账户需管理员审核通过后方可上传流水</div>
|
||
<div class="n-body">提交登记后由管理员核对开户信息，审核周期一般 1 个工作日；审核结果将通过站内通知告知。</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<div class="card-head">
|
||
<span class="card-title">本公司账户<span class="sub">共 <span id="account-count">0</span> 个 · 统计截止 2026-08-20</span></span>
|
||
</div>
|
||
<div class="table-wrap" style="border: 0;">
|
||
<table class="ds-table">
|
||
<thead>
|
||
<tr>
|
||
<th>银行 / 账号</th>
|
||
<th>账户类型</th>
|
||
<th>启用状态</th>
|
||
<th>流水覆盖区间</th>
|
||
<th>审核状态</th>
|
||
<th>操作</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody id="account-tbody"></tbody>
|
||
</table>
|
||
</div>
|
||
<div class="empty" id="account-empty" hidden>
|
||
<div class="e-title">暂无已登记账户</div>
|
||
点击右上角「提交新账户登记」提交开户信息。
|
||
</div>
|
||
<div class="table-foot">
|
||
<span id="account-foot">共 0 个账户</span>
|
||
<span class="meta">仅审核通过的账户可上传流水并参与归集</span>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="app-view" data-page="notifications">
|
||
<div class="page-head">
|
||
<div>
|
||
<h1>通知</h1>
|
||
<p class="page-sub">系统与管理员发送给本公司的全部消息。7 月账期结账因故顺延至 2026-08-29，请优先处理未读与处理中事项。</p>
|
||
</div>
|
||
<div class="page-actions">
|
||
<button class="btn btn-ghost" id="mark-all-read">全部标为已读</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<div class="tabs" id="notice-tabs">
|
||
<button type="button" class="active" data-filter="all" aria-pressed="true">全部<span class="tab-count" id="count-all">9</span></button>
|
||
<button type="button" data-filter="unread" aria-pressed="false">未读<span class="tab-count" id="count-unread">3</span></button>
|
||
<button type="button" data-filter="doing" aria-pressed="false">处理中<span class="tab-count" id="count-doing">2</span></button>
|
||
<button type="button" data-filter="done" aria-pressed="false">已完成<span class="tab-count" id="count-done">4</span></button>
|
||
</div>
|
||
|
||
<div id="notice-list">
|
||
<div class="list-row" data-status="unread">
|
||
<span class="pill pill-danger" style="flex: none;">未读</span>
|
||
<span class="tag">系统</span>
|
||
<div class="lr-main">
|
||
<div class="lr-title">7 月流水存在断档风险：交行 尾号 7710 未上传</div>
|
||
<div class="lr-sub"><span class="meta">2026-08-20 14:32</span> · 交行 7710 账户（待审核）7 月流水尚未上传，距 7 月结账日（顺延至 08-29）仅剩 9 天，请尽快补传。</div>
|
||
</div>
|
||
<div class="lr-side"><button class="btn btn-sm btn-mark-read">标记已读</button></div>
|
||
</div>
|
||
<div class="list-row" data-status="unread">
|
||
<span class="pill pill-danger" style="flex: none;">未读</span>
|
||
<span class="tag">系统</span>
|
||
<div class="lr-main">
|
||
<div class="lr-title">您有 2 笔单边流水待选择对方证据</div>
|
||
<div class="lr-sub"><span class="meta">2026-08-19 09:15</span> · 与金牛置业的煤炭采购款 ¥3,200,000.00 等 2 笔流水仅有本方记录，需选择对方银行流水佐证。</div>
|
||
</div>
|
||
<div class="lr-side"><button class="btn btn-sm btn-mark-read">标记已读</button></div>
|
||
</div>
|
||
<div class="list-row" data-status="unread">
|
||
<span class="pill pill-danger" style="flex: none;">未读</span>
|
||
<span class="tag">管理员</span>
|
||
<div class="lr-main">
|
||
<div class="lr-title">管理员提醒：请于 08-29 前完成待确认事项</div>
|
||
<div class="lr-sub"><span class="meta">2026-08-18 16:40</span> · 7 月账期结账顺延至 08-29，贵公司当前仍有 5 项往来确认未完成，请合理安排时间。</div>
|
||
</div>
|
||
<div class="lr-side"><button class="btn btn-sm btn-mark-read">标记已读</button></div>
|
||
</div>
|
||
<div class="list-row" data-status="doing">
|
||
<span class="pill pill-warn" style="flex: none;">处理中</span>
|
||
<span class="tag">系统</span>
|
||
<div class="lr-main">
|
||
<div class="lr-title">手工记录科目待确认：其他应收 ¥86,500.00</div>
|
||
<div class="lr-sub"><span class="meta">2026-08-15 10:02</span> · 07-28 录入的矿区备用金垫付记录，往来科目「其他应收」待管理员复核。</div>
|
||
</div>
|
||
<div class="lr-side"><button class="btn btn-sm btn-primary" data-view-link="manual">去处理</button></div>
|
||
</div>
|
||
<div class="list-row" data-status="doing">
|
||
<span class="pill pill-warn" style="flex: none;">处理中</span>
|
||
<span class="tag">管理员</span>
|
||
<div class="lr-main">
|
||
<div class="lr-title">往来确认回复：置业已确认 320 万煤炭采购款</div>
|
||
<div class="lr-sub"><span class="meta">2026-08-12 11:26</span> · 金牛置业已确认 07-14 煤炭采购款 ¥3,200,000.00，请补充本方工行 3305 账户流水证据完成闭环。</div>
|
||
</div>
|
||
<div class="lr-side"><button class="btn btn-sm btn-primary" data-view-link="reconcile">去处理</button></div>
|
||
</div>
|
||
<div class="list-row" data-status="done">
|
||
<span class="pill pill-success" style="flex: none;">已完成</span>
|
||
<span class="tag">系统</span>
|
||
<div class="lr-main">
|
||
<div class="lr-title">流水导入成功：中行 尾号 9916 · 42 笔</div>
|
||
<div class="lr-sub"><span class="meta">2026-08-06 15:52</span> · 7 月中行一般户流水已导入，42 笔全部校验通过，无重复记录。</div>
|
||
</div>
|
||
</div>
|
||
<div class="list-row" data-status="done">
|
||
<span class="pill pill-success" style="flex: none;">已完成</span>
|
||
<span class="tag">系统</span>
|
||
<div class="lr-main">
|
||
<div class="lr-title">流水导入成功：工行 尾号 3305 · 86 笔</div>
|
||
<div class="lr-sub"><span class="meta">2026-08-06 15:48</span> · 7 月工行基本户流水已导入，86 笔全部校验通过，无重复记录。</div>
|
||
</div>
|
||
</div>
|
||
<div class="list-row" data-status="done">
|
||
<span class="pill pill-success" style="flex: none;">已完成</span>
|
||
<span class="tag">管理员</span>
|
||
<div class="lr-main">
|
||
<div class="lr-title">交行 尾号 7710 账户开户资料已受理</div>
|
||
<div class="lr-sub"><span class="meta">2026-07-22 13:10</span> · 新账户开户资料已提交管理员，审核通过后方可启用并上传流水。</div>
|
||
</div>
|
||
</div>
|
||
<div class="list-row" data-status="done">
|
||
<span class="pill pill-success" style="flex: none;">已完成</span>
|
||
<span class="tag">系统</span>
|
||
<div class="lr-main">
|
||
<div class="lr-title">2026 年 6 月账期已结账</div>
|
||
<div class="lr-sub"><span class="meta">2026-07-05 09:00</span> · 6 月账期已按每月 5 日结账规则完成结账，期末数据已锁定，不可再修改。</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="empty" id="notice-empty" style="display: none;">
|
||
<div class="e-title">暂无该状态的通知</div>
|
||
<div>切换其他状态查看，或等待新的系统与管理员消息。</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 导入批次详情弹窗 -->
|
||
<div class="modal-backdrop" id="attestationDialog">
|
||
<div class="modal">
|
||
<div class="modal-head">
|
||
<span class="modal-title">提交无业务说明</span>
|
||
<button type="button" class="modal-close" data-close-attestation aria-label="关闭">×</button>
|
||
</div>
|
||
<p class="modal-sub">说明经管理员审核通过后仅关闭断档提醒，不会生成银行流水。</p>
|
||
<form id="attestationForm" novalidate>
|
||
<input type="hidden" id="att-gap-start" name="gap_start" />
|
||
<input type="hidden" id="att-gap-end" name="gap_end" />
|
||
<input type="hidden" id="att-account-id" name="bank_account_id" />
|
||
<div class="field">
|
||
<label>断档区间</label>
|
||
<div class="meta num" id="att-gap-label">—</div>
|
||
</div>
|
||
<div class="field">
|
||
<label for="att-reason">说明（至少 5 个字）</label>
|
||
<textarea class="input" id="att-reason" name="reason" rows="3" required></textarea>
|
||
</div>
|
||
<div class="field">
|
||
<label for="att-evidence">佐证（可选）</label>
|
||
<input class="input" id="att-evidence" name="evidence" placeholder="如：节假日无业务、账户停用说明编号" />
|
||
</div>
|
||
<div class="modal-actions">
|
||
<button type="button" class="btn" data-close-attestation>取消</button>
|
||
<button type="submit" class="btn btn-primary">提交审核</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="modal-backdrop" id="modal-batch">
|
||
<div class="modal">
|
||
<div class="modal-head">
|
||
<span class="modal-title">导入批次详情</span>
|
||
<button type="button" class="modal-close" data-close="modal-batch" aria-label="关闭">×</button>
|
||
</div>
|
||
<p class="modal-sub" id="mb-sub">—</p>
|
||
<div class="detail-box">
|
||
<dl class="kv">
|
||
<dt>批次号</dt><dd id="mb-id">—</dd>
|
||
<dt>账户</dt><dd id="mb-bank">—</dd>
|
||
<dt>流水期间</dt><dd id="mb-period">—</dd>
|
||
<dt>明细数量</dt><dd id="mb-count">—</dd>
|
||
<dt>覆盖状态</dt><dd id="mb-cover">—</dd>
|
||
<dt>解析状态</dt><dd id="mb-parse">—</dd>
|
||
<dt>导入人</dt><dd id="mb-user">本公司出纳</dd>
|
||
<dt>导入时间</dt><dd id="mb-time">—</dd>
|
||
</dl>
|
||
</div>
|
||
<div class="modal-actions">
|
||
<button type="button" class="btn" data-close="modal-batch">关闭</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 撤回手工记录弹窗 -->
|
||
<div class="modal-backdrop" id="withdraw-modal">
|
||
<div class="modal">
|
||
<div class="modal-head">
|
||
<span class="modal-title">撤回手工记录</span>
|
||
<button type="button" class="modal-close" data-close="withdraw-modal" aria-label="关闭">×</button>
|
||
</div>
|
||
<p class="modal-sub">撤回后该记录将从审核队列中移除，且不可恢复，需重新登记提交。</p>
|
||
<div class="detail-box">
|
||
<dl class="kv">
|
||
<dt>业务日期</dt><dd id="wd-date">—</dd>
|
||
<dt>对方公司</dt><dd id="wd-peer">—</dd>
|
||
<dt>金额</dt><dd id="wd-amount">—</dd>
|
||
<dt>摘要</dt><dd id="wd-summary" style="font-family: var(--font-body);">—</dd>
|
||
</dl>
|
||
</div>
|
||
<div class="modal-actions">
|
||
<button type="button" class="btn" data-close="withdraw-modal">取消</button>
|
||
<button type="button" class="btn btn-danger" id="wd-confirm">确认撤回</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 流水详情弹窗 -->
|
||
<div class="modal-backdrop" id="tx-modal">
|
||
<div class="modal wide">
|
||
<div class="modal-head">
|
||
<span class="modal-title">流水详情</span>
|
||
<button type="button" class="modal-close" id="tx-modal-close" aria-label="关闭">×</button>
|
||
</div>
|
||
<p class="modal-sub" id="tx-modal-sub"></p>
|
||
<div class="detail-box">
|
||
<div class="card-title" style="margin-bottom: 10px;">原始流水</div>
|
||
<dl class="kv">
|
||
<dt>银行流水号</dt><dd id="d-serial"></dd>
|
||
<dt>银行</dt><dd id="d-bank"></dd>
|
||
<dt>账户</dt><dd id="d-account"></dd>
|
||
<dt>交易时间</dt><dd id="d-time"></dd>
|
||
<dt>对方户名</dt><dd id="d-peer"></dd>
|
||
<dt>对方账号</dt><dd id="d-peer-acct"></dd>
|
||
<dt>金额</dt><dd id="d-amount"></dd>
|
||
</dl>
|
||
</div>
|
||
<div class="detail-box" style="margin-top: 12px;">
|
||
<div class="card-title" style="margin-bottom: 10px;">归集链路</div>
|
||
<dl class="kv">
|
||
<dt>归集状态</dt><dd id="d-status"></dd>
|
||
<dt>归集往来</dt><dd id="d-pair"></dd>
|
||
<dt>本方科目</dt><dd id="d-subject"></dd>
|
||
<dt>归集批次</dt><dd id="d-batch"></dd>
|
||
<dt>说明</dt><dd id="d-note" style="font-family: var(--font-body);"></dd>
|
||
</dl>
|
||
</div>
|
||
<div class="modal-actions">
|
||
<button type="button" class="btn" id="tx-modal-ok">关闭</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 账户明细弹窗 -->
|
||
<div class="modal-backdrop" id="modal-account-detail">
|
||
<div class="modal">
|
||
<div class="modal-head">
|
||
<span class="modal-title" id="ad-title">账户明细</span>
|
||
<button type="button" class="modal-close" data-close="modal-account-detail" aria-label="关闭">×</button>
|
||
</div>
|
||
<p class="modal-sub" id="ad-sub">本公司 · 登记账户明细</p>
|
||
<div class="detail-box" style="margin-bottom: 12px;">
|
||
<dl class="kv">
|
||
<dt>开户银行</dt><dd id="ad-bank">—</dd>
|
||
<dt>账号尾号</dt><dd id="ad-tail">—</dd>
|
||
<dt>账户类型</dt><dd id="ad-type">—</dd>
|
||
<dt>开户行名称</dt><dd id="ad-branch">—</dd>
|
||
<dt>登记日期</dt><dd id="ad-reg">—</dd>
|
||
<dt>启用状态</dt><dd id="ad-status">—</dd>
|
||
<dt>审核状态</dt><dd id="ad-audit">—</dd>
|
||
<dt>用途说明</dt><dd id="ad-purpose" style="font-family: var(--font-body);">—</dd>
|
||
</dl>
|
||
</div>
|
||
<div class="detail-box">
|
||
<dl class="kv">
|
||
<dt>申请启用</dt><dd id="ad-effective">—</dd>
|
||
<dt>流水覆盖区间</dt><dd id="ad-range">—</dd>
|
||
<dt>退回原因</dt><dd id="ad-reason" style="font-family: var(--font-body);">—</dd>
|
||
</dl>
|
||
</div>
|
||
<div class="modal-actions">
|
||
<button type="button" class="btn" data-close="modal-account-detail">关闭</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 登记银行账户弹窗 -->
|
||
<div class="modal-backdrop" id="accountDialog">
|
||
<div class="modal">
|
||
<div class="modal-head">
|
||
<span class="modal-title">登记银行账户</span>
|
||
<button type="button" class="modal-close" data-close="accountDialog" aria-label="关闭">×</button>
|
||
</div>
|
||
<p class="modal-sub">账户提交后由管理员复核，复核通过前不能上传流水，也不参与账户识别与覆盖计算。</p>
|
||
<form id="accountForm" novalidate>
|
||
<div class="grid grid-2">
|
||
<div class="field">
|
||
<label>开户银行</label>
|
||
<input class="input" name="bank" placeholder="例如：郑州银行" required />
|
||
</div>
|
||
<div class="field">
|
||
<label>账户类型</label>
|
||
<select class="select" name="type"><option>基本户</option><option>一般户</option><option>专用户</option></select>
|
||
</div>
|
||
</div>
|
||
<div class="field" style="margin-top: 12px;">
|
||
<label>银行账号</label>
|
||
<input class="input num-input" name="accountNumber" inputmode="numeric" required />
|
||
<span class="hint">仅尾号对外显示，完整账号仅管理员可见</span>
|
||
</div>
|
||
<div class="field" style="margin-top: 12px;">
|
||
<label>启用日期</label>
|
||
<input class="input num-input" name="startDate" type="date" required />
|
||
</div>
|
||
<div class="modal-actions">
|
||
<button type="button" class="btn" data-close="accountDialog">取消</button>
|
||
<button type="submit" class="btn btn-primary">提交登记</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
<aside class="drawer" id="transferEvidenceDrawer" aria-label="银行原始流水" aria-hidden="true">
|
||
<div class="drawer-head">
|
||
<div>
|
||
<span class="pill pill-info" id="tfEvTag">银行原始流水 · 只读</span>
|
||
<h2 class="d-title" id="tfEvTitle">原始流水</h2>
|
||
<p class="d-desc" id="tfEvDesc"></p>
|
||
</div>
|
||
<button type="button" class="icon-button" data-close-transfer-evidence aria-label="关闭" title="关闭">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"><path d="M6 6l12 12M18 6L6 18"/></svg>
|
||
</button>
|
||
</div>
|
||
<div class="drawer-body">
|
||
<dl class="kv" id="tfEvFields"></dl>
|
||
</div>
|
||
<div class="drawer-tip">
|
||
<strong>铁律提示</strong>
|
||
银行原始流水永远只读。金额或归属有误时，须由管理员通过冲销/调整单留痕处理，本页不得直接改数。
|
||
</div>
|
||
<div class="drawer-foot">
|
||
<button type="button" class="btn" data-close-transfer-evidence>关闭</button>
|
||
</div>
|
||
</aside>
|
||
|
||
<div class="toast-region" id="toastRegion" aria-live="polite"></div>
|
||
<script src="app.js?v=13"></script>
|
||
</body>
|
||
</html>
|