Skip to content

B
buildbank-replica
Commit 184f8a5e authored by 何波's avatar 何波
Browse files
Options

历史回单

parent fd7e0bd9
Hide whitespace changes
Inline Side-by-side
Showing with 263 additions and 72 deletions
history_receipt.html
View file @ 184f8a5e
......@@ -343,7 +343,7 @@
}
/* 温馨提示 */
.tips-section {
margin-top: 125px;
margin-top: 50px;
background-color: #f0f7ff;
padding: 10px;
border: 1px solid #e8e8e8;
......@@ -494,9 +494,8 @@
padding: 0 10px 0 10px;
height: 35px;
line-height: 35px;
}
.splitPage {
float: right;
display: flex;
justify-content: space-between;
}
.splitPage a {
color: #0066b3;
......@@ -521,6 +520,42 @@
.pageGoTo {
margin: 0 0 0 10px;
}
.btnArea {
padding-top: 5px;
margin-top: 15px;
min-height: 60px;
}
.btnCenter {
padding: 0;
text-align: center;
}
.btnLine {
margin-top: 10px;
}
.button_lessThan4 {
width: 100px;
height: 35px;
text-align: center;
border: none;
cursor: pointer;
color: #FFF;
background: url(https://xc.b2bstatic3.ccb.com/V6/STY6/CN/images7/btn100.png) no-repeat;
margin-right: 15px;
font-weight: bold;
font-size: 14px;
}
.button_lessThan4_dis {
width: 100px;
height: 35px;
text-align: center;
border: none;
cursor: pointer;
color: #FFF;
background: url(https://xc.b2bstatic3.ccb.com/V6/STY6/CN/images7/btn100Dis.png) no-repeat;
margin-right: 15px;
font-weight: bold;
font-size: 14px;
}
</style>
</head>
......@@ -693,7 +728,7 @@
<tr>
<td></td>
<td colspan="3">
<button class="buttonx" type="submit">查询</button>
<button class="buttonx" type="submit" id="queryBtn">查询</button>
</td>
</tr>
</tbody>
......@@ -713,44 +748,19 @@
<td nowrap="">预约日期</td>
<td nowrap="">状态</td>
</tr>
<tr onclick="trClick(this)" class="tableListBody">
<td nowrap=""><input type="radio" name="CREDIT"></td>
<input type="hidden" name="AccNo1" value="42050123704500001941">
<input type="hidden" name="MdRcd_PK_ID1" value="20260507400001295065">
<input type="hidden" name="Snd_Stat1" value="3">
<td nowrap="">20260507400001295065</td>
<td nowrap="">42050123704500001941</td>
<td nowrap="">20230401</td>
<td nowrap="">20230430</td>
<td nowrap="">999999</td>
<td nowrap="">20260507</td>
<td nowrap="">
历史回单数据不存在
</td>
</tr>
<tr onclick="trClick(this)" class="tableListBody">
<td nowrap=""><input type="radio" name="CREDIT"></td>
<input type="hidden" name="AccNo1" value="42050123704500001941">
<input type="hidden" name="MdRcd_PK_ID1" value="20260428400001252654">
<input type="hidden" name="Snd_Stat1" value="3">
<td nowrap="">20260428400001252654</td>
<td nowrap="">42050123704500001941</td>
<td nowrap="">20230301</td>
<td nowrap="">20230331</td>
<td nowrap="">999999</td>
<td nowrap="">20260428</td>
<td nowrap="">
历史回单数据不存在
</td>
</tr>
</tbody>
</table>
<div class="tableFooter">
<div class="footerLine">
共 2 条
<div class="footerLeft">共 2 条</div>
<div class="splitPage"><a style="margin-right:8px;" href="javascript:TxtSubmit(&quot;PAGE|&quot;,&quot;1|&quot;,AA)">首页</a><span style="margin-right:8px;">&lt;上一页</span><span class="curPageNum">1</span><span style="margin-right:8px;">下一页&gt;</span><span style="margin-right:8px;">共<b>1</b>页</span>到第<input type="text" id="splitPage1778145521055" class="inPage" maxlength="4" >页<a class="pageGoTo" href="javascript:jumpToPage('1','','',AA,'splitPage1778145521055')">转至</a><input type="text" name="donothinghidetext" style="display:none;" value=""></div>
</div>
</div>
<div class="btnArea">
<div class="btnLine btnCenter">
<input type="button" disabled class="button_lessThan4" id="xiazai" name="Submit41" value="下载" onclick="download();">
</div>
</div>
<!-- 温馨提示 -->
<div class="tips-section">
<div class="tips-title">温馨提示</div>
......@@ -758,6 +768,7 @@
<p>2.对于—户通账户（含历史回单查询区间为一户通账户的），输入主户只可查询主户回单，输入精确子户账号方可查询子账户回单。</p>
<p>3.历史回单预约仅支持单联式回单（普通回单）。</p>
<p>4.历史回单下载记录保留时间为1个月，请您尽快下载已加载完成的历史回单。</p>
</div>
<script src="./calendar-plugin/calendar.js"></script>
</body>
......@@ -770,14 +781,25 @@ function sendHeight() {
value: pageHeight + 50
}, '*');
}
window.addEventListener('load', sendHeight);
// 日期格式
function getTodayYYYYMMDD() {
function getLastMonthOfThreeYearsAgoRange() {
const now = new Date();
now.setDate(now.getDate() - 1);
const y = now.getFullYear();
const m = String(now.getMonth() + 1).padStart(2, '0');
const d = String(now.getDate()).padStart(2, '0');
return `${y}${m}${d}`;
const baseYear = now.getFullYear() - 3;
const targetMonth = now.getMonth();
let year = baseYear;
let month = targetMonth;
if (month === 0) {
year = baseYear - 1;
month = 12;
}
const start = `${year}${String(month).padStart(2, '0')}01`;
const lastDay = new Date(year, month, 0).getDate();
const end = `${year}${String(month).padStart(2, '0')}${String(lastDay).padStart(2, '0')}`;
return {
startDate: start,
endDate: end
};
}
/**
* 解析 YYYYMMDD 格式为 Date 对象
......@@ -790,7 +812,7 @@ function parseYYYYMMDD(dateStr) {
const day = parseInt(dateStr.substring(6, 8));
return new Date(year, month, day);
}
/**
/**
* 检测 YYYYMMDD 格式的日期间隔是否大于三个月
* @param {string} startStr - 开始日期，如 20250101
* @param {string} endStr - 结束日期，如 20260101
......@@ -808,15 +830,15 @@ let sxstartDate = '';
let sxendDate = '';
// 页面加载默认赋值
window.addEventListener("DOMContentLoaded", () => {
const today = getTodayYYYYMMDD();
startDate = today;
endDate = today;
sxstartDate = today;
sxendDate = today;
const today = getLastMonthOfThreeYearsAgoRange();
startDate = today.startDate;
endDate = today.endDate;
sxstartDate = today.startDate;
sxendDate = today.endDate;
document.getElementById("dateFrom").value = startDate;
document.getElementById("dateTo").value = endDate;
document.getElementById("dateFroms").value = endDate;
document.getElementById("dateTos").value = endDate;
document.getElementById("dateFroms").value = sxstartDate;
document.getElementById("dateTos").value = sxendDate;
});
const handleBlur = (dateId) => {
console.log(
......@@ -888,31 +910,9 @@ new CalendarPlugin({
handleBlurs('dateTos');
}
});
// 快速日期
document.querySelectorAll("input[name=quickDate]").forEach((el) => {
el.addEventListener("change", () => {
const days = parseInt(el.value, 10);
const now = new Date();
const year = now.getFullYear();
const month = String(now.getMonth() + 1).padStart(2, "0"); // 补零
const day = String(now.getDate()).padStart(2, "0");
const formattedDate = `${year}-${month}-${day}`;
const today = new Date(formattedDate);
const from = new Date(today.getTime() - days * 86400000);
const fmt = (d) =>
d.getFullYear() +
String(d.getMonth() + 1).padStart(2, "0") +
String(d.getDate()).padStart(2, "0");
startDate = fmt(from);
endDate = fmt(today);
document.getElementById("dateFrom").value = startDate;
document.getElementById("dateTo").value = endDate;
});
});
function openFilter(element) {
var isChecked = element.checked;
var conditionTB = document.getElementById("conditionTB");
console.log("复选框当前状态:", isChecked);
if(isChecked) {
conditionTB.style.display = 'inline-block';
sendHeight();
......@@ -921,4 +921,194 @@ function openFilter(element) {
sendHeight();
}
}
const STORAGE_KEY = "receipt_table_data";
let tableData = [];
// 初始化
window.addEventListener("DOMContentLoaded", () => {
initData();
renderTable();
bindEvents();
});
function initData() {
const local = localStorage.getItem(STORAGE_KEY);
if (local) {
tableData = JSON.parse(local);
return;
}
// 初始模拟数据（你原来的）
tableData = [
{
id: "20260507400001295065",
account: "42050123704500001941",
start: "20230401",
end: "20230430",
operator: "999999",
date: "20260507",
status: "历史回单数据不存在"
},
{
id: "20260428400001252654",
account: "42050123704500001941",
start: "20230301",
end: "20230331",
operator: "999999",
date: "20260428",
status: "历史回单数据不存在"
}
];
save();
}
function save() {
localStorage.setItem(STORAGE_KEY, JSON.stringify(tableData));
}
function renderTable() {
const tbody = document.querySelector("#tableList1 tbody");
const header = tbody.querySelector(".tableListHead").outerHTML;
let html = header;
tableData.forEach((item, index) => {
html += `
<tr class="tableListBody" onclick="selectRow('${item.status}')">
<td><input type="radio" name="CREDIT"></td>
<td>${item.id}</td>
<td>${item.account}</td>
<td>${item.start}</td>
<td>${item.end}</td>
<td>${item.operator}</td>
<td>${item.date}</td>
<td>${item.status}</td>
</tr>
`;
});
tbody.innerHTML = html;
updateCount();
}
// 预约
document.querySelector("form")?.addEventListener("submit", function (e) {
e.preventDefault();
function getThreeYearsAgoDate() {
const d = new Date();
d.setFullYear(d.getFullYear() - 3);
const y = d.getFullYear();
const m = String(d.getMonth() + 1).padStart(2, "0");
const day = String(d.getDate()).padStart(2, "0");
return `${y}${m}${day}`;
}
const limitDate = getThreeYearsAgoDate();
const start = document.getElementById("dateFrom").value;
const end = document.getElementById("dateTo").value;
if (start > limitDate || end > limitDate) {
alert("交易发生错误，错误码：YBLA01015343，错误信息：三年内回单请前往回单查询打印正常操作，该服务仅支持三年前已归档数据预约");
return;
}
const newItem = {
id: getToday() + Date.now(),
account: "42050123704500001941",
start: document.getElementById("dateFrom").value,
end: document.getElementById("dateTo").value,
operator: "999999",
date: getToday(),
status: "历史回单数据预约待处理"
};
tableData.unshift(newItem);
save();
renderTable();
setTimeout(() => {
updateStatus(newItem.id, "历史回单数据不存在");
}, 60000);
});
function updateStatus(id, status) {
const item = tableData.find(d => d.id === id);
if (!item) return;
item.status = status;
save();
renderTable();
}
function getToday() {
const d = new Date();
const y = d.getFullYear();
const m = String(d.getMonth() + 1).padStart(2, "0");
const day = String(d.getDate()).padStart(2, "0");
return `${y}${m}${day}`;
}
function updateCount() {
document.querySelector(".footerLeft").innerText =
`共 ${tableData.length} 条`;
}
// 查询
function bindEvents() {
document.getElementById("queryBtn").onclick = function (e) {
e.preventDefault();
filterTable();
};
}
function filterTable() {
const status = document.getElementById("LCS_Cd")?.value || "";
const accountInput = document.querySelector('input[name="counterName"]')?.value.trim() || "";
const start = document.getElementById("dateFroms")?.value || "";
const end = document.getElementById("dateTos")?.value || "";
let result = tableData;
// 状态筛选
if (status) {
result = result.filter(item => item.status.includes(status));
}
// 模糊账号/名称（这里只按账号做示例）
if (accountInput) {
result = result.filter(item =>
item.account.includes(accountInput) || item.id.includes(accountInput)
);
}
// 日期筛选（简单区间）
if (start && end) {
result = result.filter(item =>
item.start >= start && item.end <= end
);
}
renderCustomTable(result);
}
function renderCustomTable(list) {
const tbody = document.querySelector("#tableList1 tbody");
const header = tbody.querySelector(".tableListHead").outerHTML;
let html = header;
list.forEach((item, index) => {
html += `
<tr class="tableListBody" onclick="selectRow('${item.status}')">
<td><input type="radio" name="CREDIT"></td>
<td>${item.id}</td>
<td>${item.account}</td>
<td>${item.start}</td>
<td>${item.end}</td>
<td>${item.operator}</td>
<td>${item.date}</td>
<td>${item.status}</td>
</tr>
`;
});
tbody.innerHTML = html;
document.querySelector(".footerLeft").innerText =
`共 ${list.length} 条`;
}
function selectRow(row) {
const btn = document.getElementById("xiazai");
if (!row || row !== "历史回单数据预约成功") {
btn.disabled = true;
btn.className = "button_lessThan4_dis";
} else {
btn.disabled = false;
btn.className = "button_lessThan4";
}
}
// 下载
function downloadFile() {
const checked = document.querySelector("input[type=radio]:checked");
if (!checked) return alert("请选择数据");
const index = Array.from(document.querySelectorAll("input[type=radio]")).indexOf(checked);
const item = tableData[index];
if (item.status !== "历史回单数据预约成功") {
alert("只有成功状态才能下载");
return;
}
alert("下载：" + item.id);
}
</script>
\ No newline at end of file
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