Browse Source

style: compact member ledger filters

彭峰 12 hours ago
parent
commit
7787d89763

+ 1 - 1
projects/xiaoshu-admin/src/app/components/member-credit-account.component.html

@@ -22,7 +22,7 @@
 @if(store){<div class="scroll"><table><thead><tr><th>时间</th><th>业务</th><th>账户</th><th>数量</th><th>学员</th><th>原因</th></tr></thead><tbody>@for(t of value.transactions;track t.objectId){<tr><td>{{t.createdAt|date:'yyyy-MM-dd HH:mm':'+0800'}}</td><td>{{kindLabel(t.kind)}}</td><td>{{label(t.account)}}</td><td>{{t.amount}}</td><td>{{t.studentId||'—'}}</td><td>{{t.reason}}</td></tr>}</tbody></table></div>}
 }
 @if(!store){<section class="ledger-panel"><header class="section-header"><h3>全部课时流水</h3><button type="button" (click)="export()" [disabled]="exporting()">{{exporting()?'正在导出…':'导出 Excel'}}</button></header><p>时间均为北京时间;成套充值按一笔业务展示,可展开查看双方账户明细。</p>
-<div class="form-grid"><label>账户<select [(ngModel)]="filterAccount"><option value="">全部账户</option>@for(a of data()?.accounts||[];track a.account){<option [value]="a.account">{{a.label}}</option>}</select></label><label class="credit-direction">业务类型<select [(ngModel)]="filterKind"><option value="">全部业务</option>@for(k of ['transfer','refund','adjust','lesson','recharge','deduction'];track k){<option [value]="k">{{kindLabel(k)}}</option>}</select></label><app-operations-date-filter label="开始日期" [value]="dateFrom" (valueChange)="dateFrom=$event"/><app-operations-date-filter label="结束日期" [value]="dateTo" (valueChange)="dateTo=$event"/><div class="account-actions"><button type="button" (click)="query()">查询</button><button type="button" (click)="query(true)">重置</button></div></div>
+<div class="form-grid ledger-filters"><label>账户<select [(ngModel)]="filterAccount"><option value="">全部账户</option>@for(a of data()?.accounts||[];track a.account){<option [value]="a.account">{{a.label}}</option>}</select></label><label class="credit-direction">业务类型<select [(ngModel)]="filterKind"><option value="">全部业务</option>@for(k of ['transfer','refund','adjust','lesson','recharge','deduction'];track k){<option [value]="k">{{kindLabel(k)}}</option>}</select></label><app-operations-date-filter label="开始日期" [value]="dateFrom" (valueChange)="dateFrom=$event"/><app-operations-date-filter label="结束日期" [value]="dateTo" (valueChange)="dateTo=$event"/><div class="account-actions"><button type="button" (click)="query()">查询</button><button type="button" (click)="query(true)">重置</button></div></div>
 @if(ledgerError()){<p role="alert" class="error">{{ledgerError()}}</p>}@if(ledgerBusy()){<p role="status">正在加载流水…</p>}
 @for(row of ledger()?.items||[];track row.groupId){<details class="ledger-entry"><summary><time>{{row.at|date:'yyyy-MM-dd HH:mm':'+0800'}}</time><strong>{{kindLabel(row.lines[0].kind)}}</strong><span>@for(l of row.lines;track l.account){ {{label(l.account)}} {{l.delta>0?'+':''}}{{l.delta}} }</span><small>{{row.lines[0].reason||'未记录'}}</small></summary><div class="scroll"><table><thead><tr><th>账户</th><th>增减</th><th>调整前</th><th>调整后</th><th>操作人</th><th>来源与单据</th><th>门店</th></tr></thead><tbody>@for(l of row.lines;track l.account){<tr><td>{{label(l.account)}}</td><td>{{l.delta}}</td><td>{{l.before??'未记录'}}</td><td>{{l.after??'未记录'}}</td><td>{{l.operator||'未记录'}}</td><td>{{l.source==='legacy'?'旧系统':'新系统'}}<small>{{l.reference}}</small>@if(l.lessonId){<button type="button" (click)="lessonId=l.lessonId">查看上课记录</button>}</td><td>{{l.storeId||'未记录'}}@if(l.balances){<small>余额 {{l.balances.storeBefore??'—'}} → {{l.balances.storeAfter??'—'}}</small>}</td></tr>}</tbody></table></div><p>原因:{{row.lines[0].reason||'未记录'}}</p></details>}@empty{ @if(!ledgerBusy()&&!ledgerError()){<p>暂无符合条件的流水</p>} }
 <div class="section-header"><span>共 {{ledger()?.total||0}} 笔业务</span><label>每页<select [(ngModel)]="pageSize" (ngModelChange)="query()"><option [ngValue]="20">20 条</option><option [ngValue]="50">50 条</option><option [ngValue]="100">100 条</option></select></label><div class="account-actions"><button type="button" (click)="turn(-1)" [disabled]="page<=1||ledgerBusy()">上一页</button><span>{{page}}</span><button type="button" (click)="turn(1)" [disabled]="page*pageSize>=(ledger()?.total||0)||ledgerBusy()">下一页</button></div></div></section>}

+ 13 - 0
projects/xiaoshu-admin/src/app/components/member-enrollment.scss

@@ -56,3 +56,16 @@ input[type=checkbox]:disabled { cursor:not-allowed; }
     > .credit-source, > .credit-reason, > .credit-evidence { flex-basis:100%; }
   }
 }
+
+.ledger-filters {
+  display:flex; flex-wrap:wrap; align-items:flex-end; gap:10px 12px;
+  > label { flex:0 1 160px; gap:5px; }
+  > app-operations-date-filter { flex:0 1 180px; --date-filter-height:48px; }
+  > .account-actions { flex:0 0 auto; }
+}
+@media(max-width:650px) {
+  .ledger-filters {
+    display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px;
+    > app-operations-date-filter, > .account-actions { grid-column:1 / -1; }
+  }
+}