| Server IP : 156.238.232.47 / Your IP : 216.73.216.150 Web Server : nginx/1.25.3 System : Linux C202504152095410 3.10.0-1160.119.1.el7.x86_64 #1 SMP Tue Jun 4 14:43:51 UTC 2024 x86_64 User : www ( 1000) PHP Version : 8.3.25 Disable Function : passthru,exec,system,putenv,chroot,chgrp,chown,shell_exec,popen,proc_open,pcntl_exec,ini_alter,ini_restore,dl,openlog,syslog,readlink,symlink,popepassthru,pcntl_alarm,pcntl_fork,pcntl_waitpid,pcntl_wait,pcntl_wifexited,pcntl_wifstopped,pcntl_wifsignaled,pcntl_wifcontinued,pcntl_wexitstatus,pcntl_wtermsig,pcntl_wstopsig,pcntl_signal,pcntl_signal_dispatch,pcntl_get_last_error,pcntl_strerror,pcntl_sigprocmask,pcntl_sigwaitinfo,pcntl_sigtimedwait,pcntl_exec,pcntl_getpriority,pcntl_setpriority,imap_open,apache_setenv MySQL : OFF | cURL : ON | WGET : ON | Perl : ON | Python : ON | Sudo : ON | Pkexec : ON Directory : /www/data/wwwroot/2026_08_05_01/ |
Upload File : |
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="theme-color" content="#3d98ed" />
<title>出入库查询 - 中储发展</title>
<link rel="stylesheet" href="/index.css" />
</head>
<body>
<div class="app-shell">
<aside class="side-rail" aria-label="主导航">
<div class="avatar" title="当前用户">
<img src="/assets/user.png" alt="" />
</div>
<button class="rail-button active" type="button" title="OMS 工作台" aria-label="OMS 工作台">
<img class="rail-icon" src="/assets/ico_p_7oms.png" alt="" />
</button>
<button class="rail-button report" type="button" title="业务报表" aria-label="业务报表">
<img class="rail-icon" src="/assets/ico_p_report.png" alt="" />
</button>
<button class="back-button" type="button" title="返回" aria-label="返回">
<img class="back-icon" src="/assets/ico_L.png" alt="" />
</button>
</aside>
<section class="workspace">
<header class="topbar">
<img class="company-logo" src="/assets/logo.png" alt="中储发展股份有限公司" />
<nav class="top-actions" aria-label="辅助导航">
<button class="top-action" type="button">自助服务 <span>⌄</span></button>
<button class="top-action" type="button">设置中心 <span>⌄</span></button>
<button class="theme-button" type="button" title="界面主题" aria-label="界面主题"><span class="shirt-icon"></span></button>
</nav>
</header>
<div class="tabbar" role="tablist" aria-label="已打开页面">
<button class="tab" type="button" role="tab" aria-selected="false">工作台</button>
<button class="tab active mode-tab" id="inbound-tab" data-mode="inbound" type="button" role="tab" aria-selected="true">
入库查询 <span class="tab-close" title="关闭页签" aria-label="关闭页签">×</span>
</button>
<button class="tab mode-tab" id="outbound-tab" data-mode="outbound" type="button" role="tab" aria-selected="false">
出库查询 <span class="tab-close" title="关闭页签" aria-label="关闭页签">×</span>
</button>
</div>
<main class="page-panel" id="inbound-panel">
<section class="query-panel" aria-labelledby="query-title">
<div class="query-heading">
<button class="query-toggle" id="query-toggle" type="button" aria-expanded="true">
<span id="query-title">查询条件</span><span class="caret"></span>
</button>
<div class="query-actions">
<button class="button secondary" id="clear-button" type="button">清空</button>
<button class="button primary" id="search-button" type="button">查询</button>
<button class="button secondary" id="export-button" type="button"><span class="export-icon"><img src="/assets/scm.cmstws.com_SCM.Cloud.Web_WorkStation_Index.png" alt="" width="16" height="16" /></span> 导出</button>
</div>
</div>
<form class="query-form" id="query-form">
<label class="form-field">
<span>仓库代码:</span>
<div class="input-wrap"><input id="warehouse" type="text" /><span class="search-icon"></span></div>
</label>
<label class="form-field">
<span>货品名称:</span>
<div class="input-wrap"><input id="goods" type="text" /><span class="search-icon"></span></div>
</label>
<label class="form-field">
<span>存储卡号:</span>
<input id="storage-card" type="text" />
</label>
<label class="form-field">
<span>牌号:</span>
<input id="brand" type="text" />
</label>
<label class="form-field">
<span id="type-label">入库方式:</span>
<select id="business-type">
<option value="">请选择</option>
<option>采购入库</option>
<option>调拨入库</option>
</select>
</label>
<label class="form-field">
<span>开始时间:</span>
<div class="input-wrap time"><span class="time-icon"></span><input id="start-time" type="text" value="2023-12-04 00:00" /></div>
</label>
<label class="form-field">
<span>结束时间:</span>
<div class="input-wrap time"><span class="time-icon"></span><input id="end-time" type="text" value="2023-12-04 23:59" /></div>
</label>
<span class="form-spacer" aria-hidden="true"></span>
</form>
</section>
<section class="result-area" id="result-area" aria-label="入库查询结果">
<div class="table-scroll" id="table-scroll">
<table class="data-table">
<thead>
<tr id="table-head-row"></tr>
</thead>
<tbody id="table-body"></tbody>
</table>
</div>
<div class="total-bar" id="total-bar" aria-label="合计">
<table class="data-table total-table">
<tfoot>
<tr id="total-row"></tr>
</tfoot>
</table>
</div>
<footer class="table-footer">
<button class="columns-button" id="columns-button" type="button"><span>⚙</span> 编辑列</button>
<div class="pagination" aria-label="分页">
<button type="button" disabled aria-label="上一页">‹</button>
<button class="current" type="button" aria-current="page">1</button>
<button type="button" disabled aria-label="下一页">›</button>
<span>共 <b id="result-count">0</b> 条</span>
<select aria-label="每页条数"><option>20条/页</option><option>50条/页</option></select>
</div>
</footer>
</section>
</main>
<section class="welcome-panel" id="welcome-panel" hidden>
<h1>工作台</h1><p>请选择左侧功能进入业务页面。</p>
</section>
</section>
</div>
<dialog class="columns-dialog" id="columns-dialog">
<form method="dialog">
<header><h2>编辑显示列</h2><button value="cancel" type="submit" aria-label="关闭">×</button></header>
<div class="column-options" id="column-options"></div>
<footer><button class="button secondary" value="reset" id="columns-reset" type="button">恢复默认</button><button class="button primary" value="confirm" type="submit">确定</button></footer>
</form>
</dialog>
<div class="toast" id="toast" role="status" aria-live="polite"></div>
<script>
const dataSets = {
inbound: {
title: "入库查询",
fileName: "入库查询.csv",
minWidth: 2020,
queryFields: [
{ key: "warehouseName", label: "仓库代码:", type: "search" },
{ key: "goodsName", label: "货品名称:", type: "search" },
{ key: "storageCard", label: "存储卡号:" },
{ key: "brand", label: "牌号:" },
{ key: "businessType", label: "入库方式:", type: "select", options: ["过户", "采购入库", "调拨入库"] },
{ key: "startTime", label: "开始时间:", type: "time", value: "2023-12-04 00:00" },
{ key: "endTime", label: "结束时间:", type: "time", value: "2023-12-04 23:59" }
],
columns: [
{ key: "warehouseName", label: "仓库名称", width: 170 },
{ key: "owner", label: "存货人名称", width: 240, link: true },
{ key: "goodsName", label: "货品名称", width: 170 },
{ key: "brand", label: "品牌", width: 170 },
{ key: "storageCard", label: "存储卡号", width: 170 },
{ key: "pieces", label: "实收件数", width: 170, total: true },
{ key: "quantity", label: "收货量", width: 170, total: true, decimals: 3 },
{ key: "businessTime", label: "入库时间", width: 285 },
{ key: "orderNo", label: "入库订单号", width: 170, filter: true },
{ key: "signed", label: "是否已签章", width: 155 },
{ key: "businessType", label: "入库方式", width: 155 }
],
rows: [
{ warehouseName: "吴淞仓宝杨路", owner: "厦门市晢亨实业有限公司", goodsName: "铜板", brand: "ONSAN", storageCard: "23W-224459", pieces: 38, quantity: 99.038, businessTime: "2023-12-04 19:09", orderNo: "HZ2312040516", signed: "是", businessType: "过户" },
{ warehouseName: "吴淞仓宝杨路", owner: "厦门市晢亨实业有限公司", goodsName: "铜板", brand: "ONSAN", storageCard: "23W-224458", pieces: 16, quantity: 38.819, businessTime: "2023-12-04 19:09", orderNo: "HZ2312040505", signed: "是", businessType: "过户" },
{ warehouseName: "吴淞仓宝杨路", owner: "厦门市晢亨实业有限公司", goodsName: "铜板", brand: "ONSAN", storageCard: "23W-224458", pieces: 4, quantity: 11.087, businessTime: "2023-12-04 19:09", orderNo: "HZ2312040505", signed: "是", businessType: "过户" }
]
},
outbound: {
title: "出库查询",
fileName: "出库查询.csv",
minWidth: 2590,
queryFields: [
{ key: "warehouseName", label: "仓库代码:", type: "search" },
{ key: "extNo", label: "单据编号(EXT):" },
{ key: "goodsName", label: "货品名称:", type: "search" },
{ key: "storageCard", label: "存储卡号:" },
{ key: "brand", label: "牌号:" },
{ key: "businessType", label: "出库方式:", type: "select", options: ["过户", "销售出库", "调拨出库"] },
{ key: "startTime", label: "开始时间:", type: "time", value: "2023-12-04 00:00" },
{ key: "endTime", label: "结束时间:", type: "time", value: "2023-12-04 23:59" }
],
columns: [
{ key: "warehouseName", label: "仓库名称", width: 150 },
{ key: "status", label: "状态", width: 118, status: true, selectFilter: "无限制" },
{ key: "businessType", label: "出库方式", width: 118 },
{ key: "transportType", label: "运输方式", width: 118 },
{ key: "extNo", label: "单据编号(EXT)", width: 150 },
{ key: "orderNo", label: "出库订单号", width: 150, filter: true, link: true },
{ key: "storageCard", label: "存储卡号", width: 118 },
{ key: "owner", label: "存货人名称", width: 240, link: true },
{ key: "receiver", label: "至存货人名称", width: 290, link: true },
{ key: "goodsName", label: "货品名称", width: 118 },
{ key: "brand", label: "品牌", width: 118 },
{ key: "pieces", label: "出库件数", width: 118, total: true },
{ key: "quantity", label: "发货重量", width: 118, decimals: 3, total: true },
{ key: "businessTime", label: "出库时间", width: 220 },
{ key: "printCount", label: "打印张数", width: 118 }
],
rows: [
{ warehouseName: "吴淞仓宝杨路", status: "货权确认", businessType: "过户", transportType: "", extNo: "ZH20231204-3", orderNo: "HZ2312040548", storageCard: "23W-224459", owner: "厦门市晢亨实业有限公司", receiver: "磐途（厦门）供应链管理有限公司", goodsName: "铜板", brand: "ONSAN", pieces: 38, quantity: 99.038, businessTime: "2023-12-04 19:09", printCount: 0 },
{ warehouseName: "吴淞仓宝杨路", status: "货权确认", businessType: "过户", transportType: "", extNo: "ZH20231204-2", orderNo: "HZ2312040543", storageCard: "23W-224458", owner: "厦门市晢亨实业有限公司", receiver: "磐途（厦门）供应链管理有限公司", goodsName: "铜板", brand: "ONSAN", pieces: 20, quantity: 49.906, businessTime: "2023-12-04 19:09", printCount: 0 }
]
}
};
let currentMode = "inbound";
let visibleRows = [];
const hiddenColumns = new Set();
const queryForm = document.querySelector("#query-form");
const table = document.querySelector(".data-table");
const totalTable = document.querySelector(".total-table");
const tableScroll = document.querySelector("#table-scroll");
const tableHead = document.querySelector("#table-head-row");
const totalRow = document.querySelector("#total-row");
const tbody = document.querySelector("#table-body");
const toast = document.querySelector("#toast");
const dialog = document.querySelector("#columns-dialog");
const options = document.querySelector("#column-options");
function getModeConfig() {
return dataSets[currentMode];
}
function escapeHtml(value) {
return String(value ?? "").replace(/[&<>"']/g, char => ({ "&": "&", "<": "<", ">": ">", '"': """, "'": "'" }[char]));
}
function formatValue(row, column) {
const value = row[column.key] ?? "";
if (column.decimals && typeof value === "number") return value.toFixed(column.decimals);
return escapeHtml(value);
}
function renderQueryForm() {
const fields = getModeConfig().queryFields.map(field => {
const id = `query-${field.key}`;
const value = field.value ?? "";
const control = field.type === "select"
? `<select id="${id}" data-query-key="${field.key}"><option value="">请选择</option>${field.options.map(option => `<option>${option}</option>`).join("")}</select>`
: `<div class="input-wrap ${field.type === "time" ? "time" : ""}">${field.type === "time" ? '<span class="time-icon"></span>' : ""}<input id="${id}" data-query-key="${field.key}" type="text" value="${value}" />${field.type === "search" ? '<span class="search-icon"></span>' : ""}</div>`;
return `<label class="form-field"><span>${field.label}</span>${control}</label>`;
}).join("");
queryForm.innerHTML = `${fields}<span class="form-spacer" aria-hidden="true"></span>`;
}
function renderHeader() {
const config = getModeConfig();
table.style.minWidth = `${config.minWidth}px`;
totalTable.style.minWidth = `${config.minWidth}px`;
tableHead.innerHTML = [
`<th class="index-col"></th>`,
`<th class="check-col"><input id="check-all" type="checkbox" aria-label="全选" /></th>`,
...config.columns.map(column => {
const filter = column.filter
? `<div class="column-filter"><b>=</b><input id="order-filter" type="text" placeholder="请输入${column.label}" /><button id="order-filter-clear" type="button" aria-label="清除订单筛选">×</button></div>`
: "";
const selectFilter = column.selectFilter ? `<div class="select-filter">${column.selectFilter}</div>` : "";
return `<th data-column="${column.key}" class="${filter || selectFilter ? "filter-heading" : ""}" style="width:${column.width}px"><span>${column.label}</span><i class="sort"></i>${selectFilter}${filter}</th>`;
})
].join("");
totalRow.innerHTML = `<td class="index-col"></td><td class="check-col"></td>${config.columns.map((column, index) => {
const attributes = `data-column="${column.key}" style="width:${column.width}px"`;
if (index === 0) return `<td ${attributes}>合计</td>`;
if (column.total) return `<td ${attributes} id="total-${column.key}">0</td>`;
return `<td ${attributes}></td>`;
}).join("")}`;
document.querySelector("#check-all").addEventListener("change", event => document.querySelectorAll(".row-check").forEach(input => input.checked = event.target.checked));
const orderFilter = document.querySelector("#order-filter");
if (orderFilter) {
orderFilter.addEventListener("keydown", event => { if (event.key === "Enter") queryRows(); });
document.querySelector("#order-filter-clear").addEventListener("click", () => { orderFilter.value = ""; queryRows(); });
}
}
tableScroll.addEventListener("scroll", () => {
totalTable.style.transform = `translateX(${-tableScroll.scrollLeft}px)`;
});
function renderRows(rows) {
const columns = getModeConfig().columns;
tbody.innerHTML = rows.length ? rows.map((row, index) => `
<tr>
<td>${index + 1}</td>
<td><input class="row-check" type="checkbox" aria-label="选择第${index + 1}行" /></td>
${columns.map(column => {
const content = column.status
? `<span class="status-cell"><span class="status-dot">✓</span>${formatValue(row, column)}</span>`
: column.link && row[column.key]
? `<a href="#">${formatValue(row, column)}</a>`
: formatValue(row, column);
return `<td data-column="${column.key}">${content}</td>`;
}).join("")}
</tr>`).join("") : `<tr class="empty-row"><td colspan="${columns.length + 2}">暂无符合条件的数据</td></tr>`;
columns.filter(column => column.total).forEach(column => {
const total = rows.reduce((sum, row) => sum + Number(row[column.key] || 0), 0);
document.querySelector(`#total-${column.key}`).textContent = column.decimals ? total.toFixed(column.decimals) : total;
});
document.querySelector("#result-count").textContent = rows.length;
applyHiddenColumns();
}
function getQueryValues() {
const values = {};
queryForm.querySelectorAll("[data-query-key]").forEach(input => {
values[input.dataset.queryKey] = input.value.trim().toLowerCase();
});
const orderFilter = document.querySelector("#order-filter");
if (orderFilter) values.orderNo = orderFilter.value.trim().toLowerCase();
delete values.startTime;
delete values.endTime;
return values;
}
function queryRows() {
const values = getQueryValues();
visibleRows = getModeConfig().rows.filter(row => Object.entries(values).every(([key, value]) => !value || String(row[key] ?? "").toLowerCase().includes(value)));
renderRows(visibleRows);
showToast(`查询完成，共 ${visibleRows.length} 条`);
}
function resetQueryForm() {
getModeConfig().queryFields.forEach(field => {
const input = document.querySelector(`#query-${field.key}`);
if (input) input.value = field.value ?? "";
});
const orderFilter = document.querySelector("#order-filter");
if (orderFilter) orderFilter.value = "";
}
function showToast(message) {
toast.textContent = message;
toast.classList.add("show");
clearTimeout(showToast.timer);
showToast.timer = setTimeout(() => toast.classList.remove("show"), 1800);
}
document.querySelector("#search-button").addEventListener("click", queryRows);
queryForm.addEventListener("submit", event => { event.preventDefault(); queryRows(); });
document.querySelector("#clear-button").addEventListener("click", () => {
resetQueryForm();
visibleRows = [...getModeConfig().rows];
renderRows(visibleRows);
showToast("查询条件已清空");
});
document.querySelector("#query-toggle").addEventListener("click", event => {
const expanded = event.currentTarget.getAttribute("aria-expanded") === "true";
event.currentTarget.setAttribute("aria-expanded", String(!expanded));
queryForm.classList.toggle("collapsed", expanded);
});
document.querySelector("#export-button").addEventListener("click", () => {
const columns = getModeConfig().columns.filter(column => !hiddenColumns.has(column.key));
const csv = [columns.map(column => column.label), ...visibleRows.map(row => columns.map(column => row[column.key] ?? ""))]
.map(line => line.map(value => `"${String(value).replaceAll('"', '""')}"`).join(",")).join("\n");
const link = document.createElement("a");
link.href = URL.createObjectURL(new Blob(["\uFEFF" + csv], { type: "text/csv;charset=utf-8" }));
link.download = getModeConfig().fileName; link.click(); URL.revokeObjectURL(link.href);
showToast("已导出当前查询结果");
});
document.querySelectorAll(".mode-tab").forEach(tab => tab.addEventListener("click", event => setMode(event.currentTarget.dataset.mode)));
document.querySelector(".tab-close").addEventListener("click", event => {
event.stopPropagation(); document.querySelector("#inbound-tab").hidden = true;
document.querySelector("#inbound-panel").hidden = true; document.querySelector("#welcome-panel").hidden = false;
document.querySelector(".tab:first-child").classList.add("active");
});
document.querySelector("#columns-button").addEventListener("click", () => dialog.showModal());
options.addEventListener("change", event => {
event.target.checked ? hiddenColumns.delete(event.target.value) : hiddenColumns.add(event.target.value);
applyHiddenColumns();
});
document.querySelector("#columns-reset").addEventListener("click", () => {
hiddenColumns.clear(); options.querySelectorAll("input").forEach(input => input.checked = true); applyHiddenColumns();
});
function renderColumnOptions() {
options.innerHTML = getModeConfig().columns
.map(column => `<label><input type="checkbox" value="${column.key}" ${hiddenColumns.has(column.key) ? "" : "checked"} /> ${column.label}</label>`)
.join("");
}
function applyHiddenColumns() {
getModeConfig().columns.forEach(column => document.querySelectorAll(`[data-column="${column.key}"]`).forEach(cell => cell.classList.toggle("column-hidden", hiddenColumns.has(column.key))));
}
function setMode(mode) {
currentMode = mode;
const config = getModeConfig();
tableScroll.scrollLeft = 0;
totalTable.style.transform = "translateX(0)";
document.title = `${config.title} - 中储发展`;
document.querySelector("#result-area").setAttribute("aria-label", `${config.title}结果`);
document.querySelectorAll(".mode-tab").forEach(tab => {
const active = tab.dataset.mode === currentMode;
tab.classList.toggle("active", active);
tab.setAttribute("aria-selected", String(active));
});
renderQueryForm();
renderHeader();
renderColumnOptions();
resetQueryForm();
visibleRows = [...config.rows];
renderRows(visibleRows);
}
setMode("inbound");
</script>
</body>
</html>