Skip to content

B
buildbank-replica
Commit 3c5a821b authored by 黄同智's avatar 黄同智
Browse files
Options

更多

Co-authored-by: 's avatarCopilot <copilot@github.com>
parent e96642c9
Expand all Show whitespace changes
Inline Side-by-side
Showing with 94 additions and 23 deletions
account_detail-long.html 0 → 100644
View file @ 3c5a821b
This diff is collapsed.
account_detail.html
View file @ 3c5a821b
......@@ -284,10 +284,6 @@
</div>
<span class="form-question question1">？</span>
</div>
<div class="form-row">
<label class="form-label">交易金额：</label>
<input type="text" class="form-input small" name="amtFrom">
......
account_list.html
View file @ 3c5a821b
......@@ -152,13 +152,13 @@
}
.lashen {
transform: scaleY(1.8);
transform: scaleY(1.6);
color: #1890ff;
}
.detail-table th {
background-color: #c8e0f5;
padding: 10px;
padding: 0px 5px;
text-align: left;
font-weight: normal;
}
......@@ -180,6 +180,7 @@
.detail-table td {
padding: 0 5px;
border: none;
overflow-wrap: break-word;
}
.toolbar-box {
......@@ -409,8 +410,8 @@
<table class="detail-table grid" id="resultTable">
<thead>
<tr>
<th class="col-select" style="min-width: 54px;">选择</th>
<th style="min-width: 84px;">
<th class="col-select" style="width: 42px;">选择</th>
<th style="width: 77px;">
<div class="xflex">
<span>交易时间 </span>
<div class="jiantou">
......@@ -419,7 +420,7 @@
</div>
</div>
</th>
<th colspan="2" style="min-width: 200px;">
<th colspan="2" style="width: 220px;">
<div class="thbox">
<div>发生额/元</div>
<div class="flex">
......@@ -440,7 +441,7 @@
</div>
</div>
</th>
<th style="min-width: 84px;">
<th style="width: 110px;">
<div class="xflex">
<span>余额 </span>
<div class="jiantou">
......@@ -449,7 +450,7 @@
</div>
</div>
</th>
<th style="min-width: 160px;">
<th style="width: 151px;">
<div class="xflex">
<span>对方户名 </span>
<div class="jiantou">
......@@ -458,7 +459,7 @@
</div>
</div>
</th>
<th style="min-width: 160px;">
<th style="width: 150px;">
<div class="xflex">
<span>对方账号 </span>
<div class="jiantou">
......@@ -467,7 +468,7 @@
</div>
</div>
</th>
<th style="min-width: 100px;">
<th style="width: 101px;">
<div class="xflex">
<span>对方<br>开户机构 </span>
<div class="jiantou">
......@@ -476,7 +477,7 @@
</div>
</div>
</th>
<th style="min-width: 85px;">
<th style="width: 86px;">
<div class="xflex">
<span>记账日期 </span>
<div class="jiantou">
......@@ -485,7 +486,7 @@
</div>
</div>
</th>
<th style="min-width: 85px;">
<th style="width: 76px;">
<div class="xflex">
<span>摘要 </span>
<div class="jiantou">
......@@ -494,7 +495,7 @@
</div>
</div>
</th>
<th style="min-width: 100px;">
<th style="width: 101px;">
<div class="xflex">
<span>备注 </span>
<div class="jiantou">
......@@ -503,8 +504,54 @@
</div>
</div>
</th>
<th>
<div class="lashen">>></div>
<th class="thmore" style="width: 143px;display: none;">
<div class="xflex">
<span>账户明细编号-<br>交易流水号 </span>
<div class="jiantou">
<div class="top"></div>
<div class="down"></div>
</div>
</div>
</th>
<th class="thmore" style="width: 70px;display: none;">
<div class="xflex">
<span>企业-<br>流水号 </span>
<div class="jiantou">
<div class="top"></div>
<div class="down"></div>
</div>
</div>
</th>
<th class="thmore" style="width: 108px;display: none;">
<div class="xflex">
<span>凭证种类</span>
<div class="jiantou">
<div class="top"></div>
<div class="down"></div>
</div>
</div>
</th>
<th class="thmore" style="width: 108px;display: none;">
<div class="xflex">
<span>凭证号</span>
<div class="jiantou">
<div class="top"></div>
<div class="down"></div>
</div>
</div>
</th>
<th class="thmore" style="width: 108px;display: none;">
<div class="xflex">
<span>交易介质编号</span>
<div class="jiantou">
<div class="top"></div>
<div class="down"></div>
</div>
</div>
</th>
<th style="width: 40px;">
<div id="moreright" class="lashen" onclick="lookmore()">>></div>
<div id="moreleft" style="display: none;" class="lashen" onclick="noLookmore()"><<</div>
</th>
</tr>
</thead>
......@@ -558,6 +605,9 @@
</html>
<script>
let table = document.getElementById("resultTable");
table.style.width = "1145px";
table.style.tableLayout = "fixed"; // 关键！
let CURRENT_ROWS = [];
let CURRENT_RANGE = { from: '', to: '' };
const params = JSON.parse(localStorage.getItem('accountQueryParams') || '{}');
......@@ -599,7 +649,7 @@
});
}
function render(rows) {
function render(rows, more) {
CURRENT_ROWS = rows;
const tbody = document.getElementById('tbody');
tbody.innerHTML = '';
......@@ -607,6 +657,8 @@
rows.forEach(r => {
totDebit += r.debit; totCredit += r.credit;
const tr = document.createElement('tr');
const moreTds = more ? `<td>222</td><td>222</td><td>222</td><td>222</td><td>222</td>` : '';
tr.innerHTML = `
<td class="center col-select"><input type="checkbox"></td>
<td class="center">${r.tradeTime?.replaceAll('-', '')}</td>
......@@ -619,6 +671,7 @@
<td class="center">${r.postDate?.replaceAll('-', '') || ''}</td>
<td class="center">${r.summary || ''}</td>
<td>${r.remark || ''}</td>
${moreTds}
<td></td>
`;
tbody.appendChild(tr);
......@@ -633,8 +686,6 @@
function doSearch() {
const v = params;
const rows = filterData(v);
console.log(3333, rows, v)
CURRENT_RANGE.from = v.dateFrom;
CURRENT_RANGE.to = v.dateTo;
// document.getElementById('resultArea').style.display = '';
......@@ -642,9 +693,33 @@
// document.getElementById('resultArea').scrollIntoView({ behavior: 'smooth', block: 'start' });
}
function lookmore() {
const ths = document.querySelectorAll('.thmore');
ths.forEach(th => {
if (th.style.display === 'none') {
th.style.display = '';
} else {
th.style.display = 'none';
}
});
const moreleft = document.getElementById('moreleft');
moreleft.style.display = '';
const moreright = document.getElementById('moreright');
moreright.style.display = 'none';
render(CURRENT_ROWS, true);
}
function noLookmore() {
const ths = document.querySelectorAll('.thmore');
ths.forEach(th => {
th.style.display = 'none';
});
const moreleft = document.getElementById('moreleft');
moreleft.style.display = 'none';
const moreright = document.getElementById('moreright');
moreright.style.display = '';
render(CURRENT_ROWS, false);
}
function onBack() {
window.history.back();
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment