Files
caiwuzongzhang/web/company.html
T
2026-08-25 12:15:24 +08:00

963 lines
58 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!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=4" />
</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="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" data-view-link="reconcile">去确认单边流水 (3)</button>
</div>
</div>
<div class="card">
<div class="card-head">
<span class="card-title">账期流程 · 2026-07<span class="sub">当前停在第 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">待处理 5 笔</div>
<div class="fs-meta" id="workspaceConfirmMeta">单边流水 3 笔 · 科目确认 2 笔</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="card" id="workspaceTodos">
<div class="card-head">
<span class="card-title">本月待办<span class="sub">本月任务 13/18 · 按处理顺序排列,前 3 项阻断结账</span></span>
<span class="pill pill-warn" id="workspacePendingStatus">4 项待处理</span>
</div>
<div class="list-row" data-task-type="match" data-detail="task-match">
<span class="pill pill-danger">阻断</span>
<div class="lr-main">
<div class="lr-title">处理 3 笔单边流水确认</div>
<div class="lr-sub">选择对方银行流水作为证据后提交确认</div>
</div>
<button class="btn btn-sm" data-view-link="reconcile">去确认</button>
</div>
<div class="list-row" data-task-type="subject" data-detail="task-subject">
<span class="pill pill-danger">阻断</span>
<div class="lr-main">
<div class="lr-title">确认 2 笔其他应收科目</div>
<div class="lr-sub">核对后改判或维持原科目</div>
</div>
<button class="btn btn-sm" data-view-link="manual">去处理</button>
</div>
<div class="list-row" data-detail="task-upload">
<span class="pill pill-danger">阻断</span>
<div class="lr-main">
<div class="lr-title">补传交行尾号 7710 账户 7 月流水</div>
<div class="lr-sub">账户已登记,待总行审核通过后即可导入</div>
</div>
<button class="btn btn-sm" data-view-link="accounts">查看账户</button>
</div>
<div class="list-row" data-detail="task-reconcile">
<span class="pill pill-muted">一般</span>
<div class="lr-main">
<div class="lr-title">核对与金牛置业 320 万往来</div>
<div class="lr-sub">置业 8821 账户 7 月流水断档,需人工核对</div>
</div>
<button class="btn btn-sm" data-view-link="flows">去核对</button>
</div>
<div class="table-foot">
<span>完成以上 4 项后,7 月账期即可提交集团结账</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">
<div class="card-head">
<span class="card-title">本公司往来合计<span class="sub">2026-01-01 至 2026-08-20 · 与集团总账口径一致 · 单位:万元</span></span>
</div>
<div class="mini-stats">
<div class="mini-stat">
<div class="ms-label">借方合计</div>
<div class="ms-value">18,420.50<span class="unit">万元</span></div>
</div>
<div class="mini-stat">
<div class="ms-label">贷方合计</div>
<div class="ms-value">12,386.00<span class="unit">万元</span></div>
</div>
<div class="mini-stat">
<div class="ms-label">明细笔数</div>
<div class="ms-value">128<span class="unit"></span></div>
</div>
<div class="mini-stat">
<div class="ms-label">期末净往来 · 应收方向</div>
<div class="ms-value pos">+6,034.50<span class="unit">万元</span></div>
</div>
</div>
<button class="btn btn-ghost" data-view-link="flows" 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="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="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">5 项待确认,是 7 月结账的阻断项</div>
<div class="n-body" id="notice-body">含单边流水匹配 3 项、科目确认 2 项。请于 2026-08-29(7 月顺延结账日)前处理完毕,否则集团无法对贵公司执行 7 月结账。</div>
</div>
</div>
<div class="tabs">
<button type="button" class="active" id="tab-match" aria-pressed="true">单边流水匹配<span class="tab-count" id="count-match">3</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 class="card" data-match-card>
<div class="card-head">
<span class="card-title">2026-07-14 付 <span class="num amt-out">¥3,200,000.00</span> 给金牛置业<span class="sub">摘要:煤炭采购款</span></span>
<span class="pill pill-danger">单边</span>
</div>
<div class="detail-box" style="margin-bottom: 12px;">
<dl class="kv">
<dt>本方流水号</dt><dd>MY-ICBC-3305-20260714-018</dd>
<dt>本方账户</dt><dd>工商银行基本户 · 尾号 3305</dd>
<dt>对方户名</dt><dd>河南金牛置业有限公司</dd>
</dl>
</div>
<div class="field" style="margin-bottom: 14px;">
<label>候选对方银行证据(选择 1 条进行匹配)</label>
<label class="list-row" style="border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px; margin-bottom: 8px; cursor: pointer;">
<input type="radio" name="ev-1" style="width: auto;" />
<div class="lr-main">
<div class="lr-title">金牛置业 · 建设银行一般户 · 尾号 6642</div>
<div class="lr-sub num">2026-07-14 收 ¥3,200,000.00 · 对方流水号 ZY-CCB-6642-20260714-006</div>
</div>
<span class="pill pill-success lr-side">匹配度 高</span>
</label>
<label class="list-row" style="border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px; margin-bottom: 8px; cursor: pointer;">
<input type="radio" name="ev-1" style="width: auto;" />
<div class="lr-main">
<div class="lr-title">金牛置业 · 中国银行基本户 · 尾号 8821</div>
<div class="lr-sub num">2026-07-15 收 ¥3,200,000.00 · 对方流水号 ZY-BOC-8821-20260715-011</div>
</div>
<span class="pill pill-warn lr-side">匹配度 中</span>
</label>
<span class="hint">提示:置业中行尾号 8821 账户 07-06 至 07-16 流水断档,其 07-15 记录为对方后补手工记录,匹配度较低,请优先核对建行 6642。</span>
</div>
<div class="row">
<button class="btn btn-primary" data-match-confirm disabled data-match-summary="2026-07-14 付 ¥3,200,000.00 给金牛置业 · 煤炭采购款 · 已匹配置业建行 6642 收款记录">确认匹配</button>
<a class="btn btn-ghost" data-view-link="flows">查看本方流水</a>
</div>
</div>
<div class="card" data-match-card>
<div class="card-head">
<span class="card-title">2026-07-22 付 <span class="num amt-out">¥950,000.00</span> 给金牛物流<span class="sub">摘要:7 月矿区运输费</span></span>
<span class="pill pill-danger">单边</span>
</div>
<div class="detail-box" style="margin-bottom: 12px;">
<dl class="kv">
<dt>本方流水号</dt><dd>MY-ICBC-3305-20260722-031</dd>
<dt>本方账户</dt><dd>工商银行基本户 · 尾号 3305</dd>
<dt>对方户名</dt><dd>河南金牛物流有限公司</dd>
</dl>
</div>
<div class="field" style="margin-bottom: 14px;">
<label>候选对方银行证据(选择 1 条进行匹配)</label>
<label class="list-row" style="border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px; margin-bottom: 8px; cursor: pointer;">
<input type="radio" name="ev-2" style="width: auto;" />
<div class="lr-main">
<div class="lr-title">金牛物流 · 农业银行基本户 · 尾号 5508</div>
<div class="lr-sub num">2026-07-22 收 ¥950,000.00 · 对方流水号 WL-ABC-5508-20260722-014</div>
</div>
<span class="pill pill-success lr-side">匹配度 高</span>
</label>
<label class="list-row" style="border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px; margin-bottom: 8px; cursor: pointer;">
<input type="radio" name="ev-2" style="width: auto;" />
<div class="lr-main">
<div class="lr-title">金牛物流 · 工商银行一般户 · 尾号 2201</div>
<div class="lr-sub num">2026-07-23 收 ¥950,000.00 · 对方流水号 WL-ICBC-2201-20260723-002</div>
</div>
<span class="pill pill-warn lr-side">匹配度 中</span>
</label>
</div>
<div class="row">
<button class="btn btn-primary" data-match-confirm disabled data-match-summary="2026-07-22 付 ¥950,000.00 给金牛物流 · 7 月矿区运输费 · 已匹配物流农行 5508 收款记录">确认匹配</button>
<a class="btn btn-ghost" data-view-link="flows">查看本方流水</a>
</div>
</div>
<div class="card" data-match-card>
<div class="card-head">
<span class="card-title">2026-07-09 收 <span class="num amt-in">¥1,860,000.00</span> 自金牛贸易<span class="sub">摘要:精煤销售款</span></span>
<span class="pill pill-danger">单边</span>
</div>
<div class="detail-box" style="margin-bottom: 12px;">
<dl class="kv">
<dt>本方流水号</dt><dd>MY-BOC-9916-20260709-007</dd>
<dt>本方账户</dt><dd>中国银行一般户 · 尾号 9916</dd>
<dt>对方户名</dt><dd>河南金牛贸易有限公司</dd>
</dl>
</div>
<div class="field" style="margin-bottom: 14px;">
<label>候选对方银行证据(选择 1 条进行匹配)</label>
<label class="list-row" style="border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px; margin-bottom: 8px; cursor: pointer;">
<input type="radio" name="ev-3" style="width: auto;" />
<div class="lr-main">
<div class="lr-title">金牛贸易 · 交通银行基本户 · 尾号 8077</div>
<div class="lr-sub num">2026-07-09 付 ¥1,860,000.00 · 对方流水号 MY-BCM-8077-20260709-019</div>
</div>
<span class="pill pill-success lr-side">匹配度 高</span>
</label>
<label class="list-row" style="border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px; margin-bottom: 8px; cursor: pointer;">
<input type="radio" name="ev-3" style="width: auto;" />
<div class="lr-main">
<div class="lr-title">金牛贸易 · 中国银行一般户 · 尾号 3340</div>
<div class="lr-sub num">2026-07-08 付 ¥1,860,000.00 · 对方流水号 MY-BOC-3340-20260708-021</div>
</div>
<span class="pill pill-warn lr-side">匹配度 中</span>
</label>
</div>
<div class="row">
<button class="btn btn-primary" data-match-confirm disabled data-match-summary="2026-07-09 收 ¥1,860,000.00 自金牛贸易 · 精煤销售款 · 已匹配贸易交行 8077 付款记录">确认匹配</button>
<a class="btn btn-ghost" data-view-link="flows">查看本方流水</a>
</div>
</div>
</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="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>
<div class="toast-region" id="toastRegion" aria-live="polite"></div>
<script src="app.js?v=4"></script>
</body>
</html>