168 lines
25 KiB
HTML
168 lines
25 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>A公司业务端 · 往来台账</title>
|
|
<link rel="stylesheet" href="styles.css" />
|
|
</head>
|
|
<body data-portal="company">
|
|
<!--
|
|
THESIS: 公司端是面向出纳的当月处理驾驶舱，拒绝复制总账端的管理视角。
|
|
OWN-WORLD: 与集团一致的深黑玻璃系统，以荧光绿表示可执行动作，以琥珀红区分断档和待确认风险。
|
|
STORY: 出纳从四个本公司指标进入上传、匹配和复核，补齐证据后完成当月确认。
|
|
FIRST VIEWPORT: 浮动公司侧栏与账期顶栏围合工作区；四张待办统计卡领衔，阻断结账的异常和任务队列位于其下。
|
|
FORM: 用户参考图锁定的深色玻璃财务工作台，Operate 模式；seed key fe8a50aa。
|
|
FINISH: unreviewed and undocumented is unfinished; this build ends with the finish review, the verdict, and DESIGN.md
|
|
-->
|
|
<a class="skip-link" href="#main-content">跳到主要内容</a>
|
|
<div class="app-shell">
|
|
<aside class="sidebar" id="sidebar" aria-label="公司业务导航">
|
|
<div class="brand"><span class="brand-mark">往</span><span class="brand-copy"><strong>往来台账</strong><small>公司业务端</small></span></div>
|
|
<div class="company-context"><span>A</span><div><strong>A公司</strong><small>当前登录公司</small></div></div>
|
|
<nav class="nav-list">
|
|
<button class="nav-item is-active" data-view="workspace"><svg><use href="icons.svg#layout-dashboard"/></svg><span>工作台</span><b>4</b></button>
|
|
<button class="nav-item" data-view="upload"><svg><use href="icons.svg#upload"/></svg><span>流水导入</span></button>
|
|
<button class="nav-item" data-view="manual"><svg><use href="icons.svg#plus"/></svg><span>手工记录</span></button>
|
|
<button class="nav-item" data-view="flows"><svg><use href="icons.svg#file-spreadsheet"/></svg><span>流水管理</span></button>
|
|
<button class="nav-item" data-view="reconcile"><svg><use href="icons.svg#arrow-left-right"/></svg><span>往来确认</span><b>2</b></button>
|
|
<button class="nav-item" data-view="accounts"><svg><use href="icons.svg#landmark"/></svg><span>银行账户</span></button>
|
|
<button class="nav-item" data-view="notifications"><svg><use href="icons.svg#bell"/></svg><span>通知</span><b>2</b></button>
|
|
</nav>
|
|
<div class="sidebar-footer">
|
|
<a class="nav-item" href="index.html"><svg><use href="icons.svg#log-out"/></svg><span>退出登录</span></a>
|
|
<div class="user-block"><span class="avatar">牛</span><span><strong>牛女士</strong><small>A公司出纳</small></span></div>
|
|
</div>
|
|
</aside>
|
|
|
|
<div class="workspace">
|
|
<header class="topbar">
|
|
<button class="icon-button menu-button" id="menuButton" aria-label="打开导航" aria-expanded="false" aria-controls="sidebar" title="打开导航"><svg><use href="icons.svg#menu"/></svg></button>
|
|
<div class="workspace-name"><span>A公司</span><strong id="currentViewName">工作台</strong></div>
|
|
<span class="demo-badge">演示数据</span>
|
|
<div class="topbar-actions">
|
|
<label class="search-box"><svg><use href="icons.svg#search"/></svg><span class="sr-only">搜索本公司数据</span><input id="globalSearch" type="search" placeholder="搜索本公司流水或对方" /></label>
|
|
<button class="period-button" type="button"><svg><use href="icons.svg#calendar"/></svg><span>2026 年 7 月</span></button>
|
|
<button class="button primary" data-open-upload><svg><use href="icons.svg#upload"/></svg>上传流水</button>
|
|
</div>
|
|
</header>
|
|
|
|
<main id="main-content">
|
|
<section class="app-view is-active" data-page="workspace">
|
|
<header class="page-heading"><div><h1>本月待办</h1><p>A公司 · 距离集团结账日还有 3 天</p></div><span class="status warning" id="workspacePendingStatus">4 项待处理</span></header>
|
|
<section class="metric-grid" aria-label="本公司关键指标">
|
|
<article class="metric-card danger" data-metric-action="upload" tabindex="0" role="button" aria-label="上传 1 个待补流水账户">
|
|
<div class="metric-copy"><span class="metric-label">待上传账户</span><strong class="metric-value">1<small>/ 4</small></strong></div>
|
|
<span class="metric-icon"><svg><use href="icons.svg#upload"/></svg></span>
|
|
<p class="metric-foot"><strong>工商银行 9481</strong> · 缺少 21 天</p>
|
|
</article>
|
|
<article class="metric-card warning" data-metric-link="reconcile" tabindex="0" role="button" aria-label="确认 1 笔待匹配流水">
|
|
<div class="metric-copy"><span class="metric-label">待确认流水</span><strong class="metric-value">1<small>笔</small></strong></div>
|
|
<span class="metric-icon"><svg><use href="icons.svg#arrow-left-right"/></svg></span>
|
|
<p class="metric-foot"><strong>280.00 万元</strong> · 有 2 个候选</p>
|
|
</article>
|
|
<article class="metric-card" data-metric-link="manual" tabindex="0" role="button" aria-label="查看 1 笔待复核手工记录">
|
|
<div class="metric-copy"><span class="metric-label">待复核记录</span><strong class="metric-value">1<small>笔</small></strong></div>
|
|
<span class="metric-icon"><svg><use href="icons.svg#list-checks"/></svg></span>
|
|
<p class="metric-foot"><strong>已提交总账</strong> · 等待管理员处理</p>
|
|
</article>
|
|
<article class="metric-card success">
|
|
<div class="metric-copy"><span class="metric-label">本月完成进度</span><strong class="metric-value">75<small>%</small></strong></div>
|
|
<span class="metric-icon"><svg><use href="icons.svg#circle-check"/></svg></span>
|
|
<p class="metric-foot"><strong>3 / 4 个账户</strong> · 距结账还有 3 天</p>
|
|
</article>
|
|
</section>
|
|
<section class="company-alert"><svg><use href="icons.svg#circle-alert"/></svg><div><strong>7 月数据尚不能结账</strong><p>工商银行账户缺少 07.01—07.21 流水，补齐后系统将重新计算匹配结果。</p></div><button class="button primary" data-open-upload>补传流水</button></section>
|
|
<div class="company-dashboard-grid">
|
|
<section class="panel task-panel">
|
|
<div class="panel-heading"><div><h2>需要处理</h2><p>按结账影响和期限排序</p></div></div>
|
|
<div class="cashier-tasks">
|
|
<article data-task-type="upload"><span class="task-level danger">1</span><div><h3>补传工商银行流水</h3><p>账户尾号 9481 · 缺少 07.01—07.21</p><small>影响：7 月账户覆盖与双边匹配</small></div><button class="button secondary small" data-open-upload>上传</button></article>
|
|
<article data-task-type="match"><span class="task-level warning">2</span><div><h3>确认 1 笔单边流水</h3><p>对方：B公司 · 07.18 · 280.00 万元</p><small>系统找到 2 个候选，请核对摘要与账号</small></div><button class="button secondary small" data-view-link="reconcile">去匹配</button></article>
|
|
<article data-task-type="subject"><span class="task-level warning">3</span><div><h3>确认往来科目</h3><p>对方：C公司 · 06.27 · 600.00 万元</p><small>待确认：应收或其他应收</small></div><button class="button secondary small" data-view-link="reconcile">去确认</button></article>
|
|
<article><span class="task-level neutral">4</span><div><h3>阅读总账提醒</h3><p>请于 08.08 前完成 7 月银行流水确认</p><small>管理员 · 今天 09:30</small></div><button class="button secondary small" data-view-link="notifications">查看</button></article>
|
|
</div>
|
|
</section>
|
|
<aside class="panel coverage-panel">
|
|
<div class="panel-heading"><div><h2>账户覆盖</h2><p>起算日 2026.01.01</p></div><span class="status warning">3 / 4 连续</span></div>
|
|
<div class="coverage-list"><article><span><strong>中信银行 · 5316</strong><small>01.01—07.31</small></span><em class="status success">连续</em></article><article><span><strong>建设银行 · 0845</strong><small>01.01—07.31</small></span><em class="status success">连续</em></article><article><span><strong>农业银行 · 3650</strong><small>01.01—07.31</small></span><em class="status success">连续</em></article><article><span><strong>工商银行 · 9481</strong><small>缺少 07.01—07.21</small></span><em class="status danger">断档</em></article></div>
|
|
<button class="text-button full-text-button" data-view-link="accounts">查看全部账户</button>
|
|
</aside>
|
|
</div>
|
|
<section class="work-progress" aria-label="本月处理进度"><div><span>1</span><p><strong>流水上传</strong><small>3 / 4 个账户完成</small></p></div><i></i><div><span>2</span><p><strong>异常处理</strong><small>2 项待确认</small></p></div><i></i><div class="pending"><span>3</span><p><strong>公司确认</strong><small>尚未提交</small></p></div><i></i><div class="pending"><span>4</span><p><strong>集团结账</strong><small>次月 5 日</small></p></div></section>
|
|
</section>
|
|
|
|
<section class="app-view" data-page="upload">
|
|
<header class="page-heading"><div><h1>流水导入</h1><p>上传 A公司银行账户流水，系统按表头识别银行模板</p></div><button class="button primary" data-open-upload><svg><use href="icons.svg#upload"/></svg>上传流水</button></header>
|
|
<section class="panel"><div class="table-summary"><span>最近导入批次</span><span>原始文件与解析结果将永久保留</span></div><div class="table-scroll"><table class="data-table"><thead><tr><th>批次</th><th>银行账户</th><th>流水期间</th><th>明细数</th><th>覆盖状态</th><th>解析状态</th><th>上传时间</th></tr></thead><tbody id="importRows"><tr><td><strong>IMP-260806-018</strong></td><td>中信银行 · 5316</td><td>07.01—07.31</td><td>128</td><td><span class="status success">连续</span></td><td><span class="status success">已确认</span></td><td>今天 09:42</td></tr><tr><td><strong>IMP-260731-012</strong></td><td>工商银行 · 9481</td><td>06.01—06.30</td><td>96</td><td><span class="status danger">后续断档</span></td><td><span class="status success">已确认</span></td><td>07.31 16:18</td></tr></tbody></table></div></section>
|
|
</section>
|
|
|
|
<section class="app-view" data-page="manual">
|
|
<header class="page-heading"><div><h1>手工记录</h1><p>登记个人过账或银行流水之外的往来事实</p></div><span class="status warning" id="manualPendingStatus">1 笔待总账复核</span></header>
|
|
<div class="manual-layout">
|
|
<form class="panel manual-form" id="manualEntryForm">
|
|
<div class="panel-heading"><div><h2>新增记录</h2><p>A公司 · 提交人：牛女士</p></div></div>
|
|
<div class="form-body">
|
|
<div class="form-grid"><label class="field"><span>交易日期</span><input name="transactionDate" type="date" value="2026-08-06" required /></label><label class="field"><span>收付方向</span><select name="direction" required><option>付款</option><option>收款</option></select></label></div>
|
|
<div class="form-grid"><label class="field"><span>金额（元）</span><input name="amount" type="number" min="0.01" step="0.01" required /></label><label class="field"><span>资金来源</span><select name="sourceAccount" required><option value="">请选择</option><option>中信银行 · 5316</option><option>工商银行 · 9481</option><option>建设银行 · 0845</option><option>农业银行 · 3650</option><option>个人过账</option></select></label></div>
|
|
<div class="form-grid"><label class="field"><span>对方类型</span><select name="counterpartyType" required><option>集团内部公司</option><option>个人过账方</option><option>外部单位</option></select></label><label class="field"><span>对方名称</span><input name="counterparty" maxlength="100" placeholder="公司全称或个人姓名" required /></label></div>
|
|
<div class="form-grid"><label class="field"><span>对方账号</span><input name="counterpartyAccount" maxlength="64" placeholder="可选" /></label><label class="field"><span>往来科目</span><select name="subject" required><option>应收</option><option>应付</option><option>其他应收</option><option>其他应付</option></select></label></div>
|
|
<label class="field"><span>业务摘要</span><input name="summary" maxlength="120" placeholder="例如：个人代付后转回" required /></label>
|
|
<label class="field"><span>补充说明</span><textarea name="remark" rows="3" maxlength="500" placeholder="说明形成原因和核对依据" required></textarea></label>
|
|
<div class="form-grid"><label class="field"><span>关联银行流水号</span><input name="bankReference" maxlength="80" placeholder="可选" /></label><label class="field"><span>证明附件</span><input name="evidence" type="file" accept=".pdf,.png,.jpg,.jpeg,.xls,.xlsx" /></label></div>
|
|
<p class="form-callout"><svg><use href="icons.svg#circle-alert"/></svg>手工记录与银行原始流水分开留痕；总账复核通过后才纳入往来计算。</p>
|
|
</div>
|
|
<footer><button class="button primary" type="submit"><svg><use href="icons.svg#send"/></svg>提交总账复核</button></footer>
|
|
</form>
|
|
<section class="panel manual-records-panel">
|
|
<div class="panel-heading"><div><h2>本公司记录</h2><p>按提交时间倒序</p></div></div>
|
|
<div class="table-scroll"><table class="data-table manual-records-table"><thead><tr><th>编号 / 日期</th><th>方向 / 科目</th><th>资金来源</th><th>对方</th><th>摘要</th><th class="number">金额（元）</th><th>状态</th></tr></thead><tbody id="manualRecordRows"><tr data-demo-record><td><strong>MR-DEMO-001</strong><small>2026.07.29</small></td><td><strong>付款</strong><small>其他应收</small></td><td>个人过账</td><td><strong>B公司</strong><small>集团内部公司</small></td><td>个人代付后转回</td><td class="number">80,000.00</td><td><span class="status warning">待总账复核</span></td></tr></tbody></table></div>
|
|
</section>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="app-view" data-page="flows">
|
|
<header class="page-heading"><div><h1>流水管理</h1><p>仅查询和导出 A公司的银行流水</p></div><button class="button secondary" id="exportFlows"><svg><use href="icons.svg#download"/></svg>导出当前结果</button></header>
|
|
<section class="filter-grid flow-filters"><label class="field"><span>银行</span><select id="flowBank"><option>全部银行</option><option>中信银行</option><option>工商银行</option><option>建设银行</option></select></label><label class="field"><span>账户</span><select id="flowAccount"><option>全部账户</option><option>5316</option><option>9481</option><option>0845</option></select></label><label class="field"><span>开始日期</span><input id="flowStart" type="date" value="2026-07-01" /></label><label class="field"><span>结束日期</span><input id="flowEnd" type="date" value="2026-07-31" /></label><label class="field grow"><span>摘要 / 对方户名 / 流水号</span><input id="flowKeyword" placeholder="输入关键词" /></label><button class="button primary" id="applyFlowFilters"><svg><use href="icons.svg#search"/></svg>查询</button></section>
|
|
<section class="panel"><div class="table-summary"><span>当前结果 <strong id="flowCount">3</strong> 笔</span><span>金额单位：元</span></div><div class="table-scroll"><table class="data-table" id="flowTable"><thead><tr><th>日期</th><th>银行账户</th><th>方向</th><th>对方户名 / 账号</th><th>摘要</th><th>银行流水号</th><th>归集状态</th><th class="number">金额</th></tr></thead><tbody><tr data-bank="中信银行"><td>2026.07.18</td><td>中信银行 · 5316</td><td>转出</td><td><strong>B公司</strong><small>尾号 9481</small></td><td>往来款</td><td>CIT260718018</td><td><span class="status success">双边匹配</span></td><td class="number">10,000,000.00</td></tr><tr data-bank="建设银行"><td>2026.07.12</td><td>建设银行 · 0845</td><td>转出</td><td><strong>A公司</strong><small>尾号 5316</small></td><td>同名账户调拨</td><td>CCB260712031</td><td><span class="status neutral">同公司调拨</span></td><td class="number">2,000,000.00</td></tr><tr data-bank="中信银行"><td>2026.07.06</td><td>中信银行 · 5316</td><td>转入</td><td><strong>B公司</strong><small>尾号 9481</small></td><td>归还往来款</td><td>CIT260706041</td><td><span class="status success">双边匹配</span></td><td class="number">3,200,000.00</td></tr></tbody></table></div></section>
|
|
</section>
|
|
|
|
<section class="app-view" data-page="reconcile">
|
|
<header class="page-heading"><div><h1>往来确认</h1><p>系统计算为主，只处理无法确定的匹配与科目</p></div></header>
|
|
<section class="reconcile-summary"><div><span>自动确认</span><strong>18 笔</strong><small>无需人工处理</small></div><div><span>单边待匹配</span><strong id="matchPendingCount">1 笔</strong><small>需选择对方证据</small></div><div><span>科目待确认</span><strong id="subjectPendingCount">1 笔</strong><small>需选择会计科目</small></div></section>
|
|
<section class="panel reconcile-panel"><div class="panel-heading"><div><h2>待确认事项</h2><p>每次确认都会记录操作人、时间和依据</p></div></div><div class="review-list" id="reviewList"><article data-review-type="match"><div class="review-main"><span class="task-level warning">匹配</span><div><h3>2026.07.18 · 转出 280.00 万元</h3><p>中信银行 5316 → B公司 · 摘要“往来款”</p></div></div><fieldset class="candidate-options"><legend>选择对方银行证据</legend><label><input type="radio" name="matchCandidate" value="B公司工商银行 9481" checked /><span><strong>B公司 · 工商银行 9481</strong><small>同金额 · 同日 · 对方账号一致 · 推荐</small></span></label><label><input type="radio" name="matchCandidate" value="B公司建设银行 2046" /><span><strong>B公司 · 建设银行 2046</strong><small>同金额 · 相差 1 日 · 摘要相近</small></span></label></fieldset><div class="review-actions"><button class="button secondary small" data-reject>无法匹配，转异常</button><button class="button primary small" data-resolve="match">确认所选匹配</button></div></article><article data-review-type="subject"><div class="review-main"><span class="task-level warning">科目</span><div><h3>2026.06.27 · 转出 600.00 万元</h3><p>建设银行 0845 → C公司 · 摘要“资金调拨”</p></div></div><div class="candidate"><label class="field compact"><span>确认科目</span><select><option>应收</option><option>其他应收</option></select></label><button class="button primary small" data-resolve="subject">确认科目</button></div></article></div><div class="review-history" id="reviewHistory" hidden><h3>本次处理记录</h3></div></section>
|
|
</section>
|
|
|
|
<section class="app-view" data-page="accounts">
|
|
<header class="page-heading"><div><h1>银行账户</h1><p>A公司登记账户与流水覆盖区间</p></div><button class="button secondary" id="openAccountDialog"><svg><use href="icons.svg#plus"/></svg>登记账户</button></header>
|
|
<section class="account-directory" id="accountDirectory"><article><header><span class="bank-mark">中</span><div><strong>中信银行</strong><small>基本户 · 尾号 5316</small></div><em class="status success">连续</em></header><dl><div><dt>启用日期</dt><dd>2026.01.01</dd></div><div><dt>流水覆盖</dt><dd>01.01—07.31</dd></div><div><dt>最近导入</dt><dd>今天 09:42</dd></div></dl></article><article><header><span class="bank-mark">工</span><div><strong>工商银行</strong><small>一般户 · 尾号 9481</small></div><em class="status danger">断档</em></header><dl><div><dt>启用日期</dt><dd>2026.01.01</dd></div><div><dt>流水覆盖</dt><dd>缺 07.01—07.21</dd></div><div><dt>最近导入</dt><dd>07.31 16:18</dd></div></dl></article><article><header><span class="bank-mark">建</span><div><strong>建设银行</strong><small>一般户 · 尾号 0845</small></div><em class="status success">连续</em></header><dl><div><dt>启用日期</dt><dd>2026.01.01</dd></div><div><dt>流水覆盖</dt><dd>01.01—07.31</dd></div><div><dt>最近导入</dt><dd>08.01 10:03</dd></div></dl></article></section>
|
|
</section>
|
|
|
|
<section class="app-view" data-page="notifications">
|
|
<header class="page-heading"><div><h1>通知</h1><p>系统提醒与总账管理员通知</p></div><button class="button secondary" id="markAllRead"><svg><use href="icons.svg#circle-check"/></svg>全部标为已读</button></header>
|
|
<section class="panel notification-page"><div class="notification-list" id="companyNotifications"><article class="is-unread"><span class="notification-icon danger"><svg><use href="icons.svg#circle-alert"/></svg></span><span><strong>7 月工商银行流水尚未上传</strong><small>系统自动提醒 · 今天 08:00 · 截止 08.05</small><p>账户尾号 9481 缺少 07.01—07.21 流水。</p></span><em class="status danger">未读</em></article><article class="is-unread"><span class="notification-icon warning"><svg><use href="icons.svg#bell"/></svg></span><span><strong>请完成 7 月银行流水确认</strong><small>系统管理员 · 今天 09:30 · 截止 08.08</small><p>请先处理断档和两项待确认往来，再提交公司确认。</p></span><em class="status warning">未读</em></article><article><span class="notification-icon success"><svg><use href="icons.svg#circle-check"/></svg></span><span><strong>6 月账期已完成集团结账</strong><small>系统通知 · 07.05 18:10</small></span><em class="status neutral">已读</em></article></div></section>
|
|
</section>
|
|
</main>
|
|
</div>
|
|
</div>
|
|
|
|
<dialog id="uploadDialog" class="dialog upload-dialog">
|
|
<form id="uploadForm">
|
|
<header><div><h2>上传银行流水</h2><p>A公司 · 系统将识别表头与银行模板</p></div><button type="button" class="icon-button" data-close-upload aria-label="关闭" title="关闭"><svg><use href="icons.svg#x"/></svg></button></header>
|
|
<div class="dialog-body"><label class="field"><span>银行账户</span><select id="accountSelect" required><option value="">请选择账户</option><option>中信银行 · 5316</option><option>工商银行 · 9481</option><option>建设银行 · 0845</option><option>农业银行 · 3650</option></select></label><label class="dropzone" id="dropzone"><input id="fileInput" type="file" accept=".xls,.xlsx" /><svg><use href="icons.svg#upload"/></svg><strong>选择或拖入银行流水文件</strong><span>支持 .xls 与 .xlsx，最大 20 MB</span></label><div class="file-preview" id="filePreview" hidden><span class="file-type"><svg><use href="icons.svg#file-spreadsheet"/></svg></span><span><strong id="fileName"></strong><small id="fileMeta"></small></span><button type="button" class="icon-button" id="removeFile" aria-label="移除文件" title="移除文件"><svg><use href="icons.svg#x"/></svg></button></div><div class="parse-result" id="parseResult" hidden><span class="notification-icon"><svg><use href="icons.svg#circle-check"/></svg></span><span><strong>文件解析完成</strong><p id="parseSummary"></p></span></div></div>
|
|
<footer><button type="button" class="button secondary" data-close-upload>取消</button><button class="button primary" id="parseButton" type="submit" disabled><span>开始解析</span></button></footer>
|
|
</form>
|
|
</dialog>
|
|
<dialog id="accountDialog" class="dialog">
|
|
<form id="accountForm">
|
|
<header><div><h2>登记银行账户</h2><p>账户提交后由总账管理员复核</p></div><button type="button" class="icon-button" data-close-account aria-label="关闭" title="关闭"><svg><use href="icons.svg#x"/></svg></button></header>
|
|
<div class="dialog-body"><div class="form-grid"><label class="field"><span>开户银行</span><input name="bank" placeholder="例如：郑州银行" required /></label><label class="field"><span>账户类型</span><select name="type"><option>基本户</option><option>一般户</option><option>专用户</option></select></label></div><label class="field"><span>银行账号</span><input name="accountNumber" inputmode="numeric" required /></label><label class="field"><span>启用日期</span><input name="startDate" type="date" value="2026-08-06" required /></label></div>
|
|
<footer><button type="button" class="button secondary" data-close-account>取消</button><button class="button primary" type="submit">提交登记</button></footer>
|
|
</form>
|
|
</dialog>
|
|
<div class="toast-region" id="toastRegion" aria-live="polite"></div>
|
|
<script src="app.js"></script>
|
|
</body>
|
|
</html>
|