feat(client): 财务应收应付汇总增加往来单位搜索(两端,原型同步)

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
wangjia
2026-07-14 12:02:44 +08:00
parent 6069b390df
commit edb85c88da
14 changed files with 762 additions and 360 deletions
+13 -5
View File
@@ -28,6 +28,8 @@
.sec-head{display:flex; align-items:baseline; gap:10px; margin:0 0 12px;}
.sec-head h2{margin:0; font-size:var(--fs-h2); color:var(--heading); font-weight:700;}
.sec-head .sh-sub{font-size:var(--fs-xs); color:var(--muted);}
/* 汇总卡头部往来单位搜索(即时本地过滤,非 combo 单选) */
.sec-head .sum-search{margin-left:auto; width:220px; align-self:center;}
.block{margin-bottom:22px;}
/* ====== 新增原子:条形图 .barchart / .bar ====== */
@@ -108,7 +110,9 @@
<!-- 4. 应收/应付 汇总表 -->
<div class="block">
<div class="sec-head"><h2>应收 / 应付 汇总</h2><span class="sh-sub">按往来单位 · 点击行查看流水</span></div>
<div class="sec-head"><h2>应收 / 应付 汇总</h2><span class="sh-sub">按往来单位 · 点击行查看流水</span>
<div class="searchbox sum-search"><svg viewBox="0 0 24 24"><use href="#i-search"/></svg><input id="sumSearch" placeholder="搜索往来单位…" oninput="sumKw=this.value; buildSummary();"></div>
</div>
<div class="table"><table>
<thead><tr><th>往来单位</th><th class="num">应收</th><th class="num">应付</th><th class="num">净额</th><th class="act">操作</th></tr></thead>
<tbody id="sumBody"></tbody>
@@ -181,19 +185,23 @@ const SUMMARY=[
{name:'川渝糖酒集团',recv:0,pay:60400}
];
function yuan(n){ return '¥'+n.toLocaleString(); }
// 汇总卡「往来单位」搜索:本地即时过滤(数据已全量加载,非服务端分页,搜索口径=显示口径)
let sumKw='';
function buildSummary(){
document.getElementById('sumBody').innerHTML=SUMMARY.map((s,i)=>{
const q=sumKw.trim().toLowerCase();
const rows=SUMMARY.map((s,i)=>({...s,i})).filter(s=>!q||s.name.toLowerCase().includes(q));
document.getElementById('sumBody').innerHTML=rows.length?rows.map(s=>{
const net=s.recv-s.pay;
const netCls=net>0?'net-pos':(net<0?'net-neg':'');
const netTxt=(net>0?'+':'')+yuan(net);
return `<tr class="click" onclick="openPartner(${i})">
return `<tr class="click" onclick="openPartner(${s.i})">
<td class="pname">${s.name}</td>
<td class="num">${s.recv?yuan(s.recv):'—'}</td>
<td class="num">${s.pay?yuan(s.pay):'—'}</td>
<td class="num ${netCls}">${netTxt}</td>
<td class="act" onclick="event.stopPropagation()"><span class="link" onclick="openPartner(${i})">查看</span></td>
<td class="act" onclick="event.stopPropagation()"><span class="link" onclick="openPartner(${s.i})">查看</span></td>
</tr>`;
}).join('');
}).join(''):`<tr><td colspan="5"><div class="empty">没有匹配的往来单位</div></td></tr>`;
}
/* ---- 5. 收支流水 ---- */
+13 -3
View File
@@ -38,6 +38,9 @@
<div class="k"><div class="kl">应付合计</div><div class="kv">¥9.6万</div><div class="kd warn">5 笔未结</div></div>
</div>
<div class="seg" style="width:100%; margin-top:14px"><button class="on" style="flex:1" onclick="setTab('ar')">应收</button><button style="flex:1" onclick="setTab('ap')">应付</button><button style="flex:1" onclick="setTab('flow')">流水</button></div>
<!-- 应收/应付分段头部往来单位搜索(同口径本地过滤,仅 ar/ap 显示;流水分段
沿用上方时间行「往来单位」chip → sheet 单选,不重复) -->
<div class="m-search" id="sumSearchRow" style="margin-top:12px"><svg viewBox="0 0 24 24"><use href="#i-search"/></svg><input id="sumKwInput" placeholder="搜索往来单位…" oninput="sumKw=this.value; render();"></div>
<div class="m-section" id="cnt">应收账款</div>
<div id="list"></div>
</div>
@@ -100,15 +103,22 @@ function drawPartnerOpts(kw){
}
function setFlowParty(v){ flowParty=v; closeSheet(); render(); }
// 应收/应付分段「往来单位」搜索:本地即时过滤(数据已全量加载,搜索口径=显示口径)
let sumKw='';
function render(){
const cfg={ar:['应收账款',AR],ap:['应付账款',AP],flow:['资金流水',FLOW]}[tab];
// 往来单位筛选仅作用于「流水」分段(对应真实端 financeListProvider.setPartner 只过滤流水表)
const rows=tab==='flow'?cfg[1].filter(r=>flowParty==='全部'||r.party.split(' · ')[0]===flowParty):cfg[1];
let rows=tab==='flow'?cfg[1].filter(r=>flowParty==='全部'||r.party.split(' · ')[0]===flowParty):cfg[1];
document.getElementById('sumSearchRow').style.display=tab==='flow'?'none':'flex';
if(tab!=='flow'){
const q=sumKw.trim().toLowerCase();
if(q) rows=rows.filter(r=>r.party.toLowerCase().includes(q));
}
document.getElementById('cnt').textContent=`${cfg[0]} · 共 ${rows.length}`;
document.getElementById('list').innerHTML=rows.map(r=>`<div class="m-card"><div class="m-row">
document.getElementById('list').innerHTML=rows.length?rows.map(r=>`<div class="m-card"><div class="m-row">
<div class="mc-main"><div class="mc-nm">${r.party}</div><div class="mc-sub">${r.date}</div></div>
<div class="mc-right"><span class="badge b-${r.status}">${r.status}</span><span class="mc-amt">${r.amt}</span></div>
</div></div>`).join('');
</div></div>`).join(''):`<div class="m-empty"><svg viewBox="0 0 24 24"><use href="#i-box"/></svg>${tab==='flow'?'暂无数据':'没有匹配的往来单位'}</div>`;
document.getElementById('partyVal').textContent=flowParty==='全部'?'':flowParty;
document.getElementById('chipParty').classList.toggle('on',flowParty!=='全部');
}