線上庫存盤點系統
:root { –primary: #2563eb; –bg: #f8fafc; –text: #1e293b; }
body { font-family: -apple-system, BlinkMacSystemFont, “Segoe UI", Roboto, sans-serif; background: var(–bg); color: var(–text); padding: 1rem; margin: 0; }
.container { max-width: 900px; margin: 0 auto; background: #fff; padding: 1.5rem; border-radius: 8px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1); }
h1 { font-size: 1.5rem; margin-top: 0; }
.toolbar { display: flex; gap: 0.5rem; margin-bottom: 1rem; flex-wrap: wrap; }
input, select, button { padding: 0.5rem 0.75rem; border: 1px solid #cbd5e1; border-radius: 4px; font-size: 0.95rem; }
button { background: var(–primary); color: white; border: none; cursor: pointer; }
button:hover { opacity: 0.9; }
table { width: 100%; border-collapse: collapse; margin-top: 1rem; }
th, td { border-bottom: 1px solid #e2e8f0; padding: 0.75rem; text-align: left; }
th { background: #f1f5f9; }
.diff-neg { color: #dc2626; font-weight: bold; }
.diff-pos { color: #16a34a; font-weight: bold; }
.qty-input { width: 70px; }
📦 線上庫存盤點表
| 編號/條碼 |
品名 |
帳面數 |
實盤數 |
盤差 (盤盈虧) |
備註 |
操作 |
let inventory = JSON.parse(localStorage.getItem(‘inventory_data’) || ‘[]’);
function render() {
const tbody = document.getElementById(‘inventoryBody’);
tbody.innerHTML = “;
inventory.forEach((item, index) => {
const diff = (item.actual !== " && item.actual !== null) ? (item.actual – item.system) : 0;
let diffClass = “;
if (item.actual !== " && diff 0) diffClass = ‘diff-pos’;
tbody.innerHTML += `
| ${item.sku} |
${item.name} |
${item.system} |
|
${item.actual === " || item.actual === null ? ‘-‘ : diff} |
|
|
`;
});
localStorage.setItem(‘inventory_data’, JSON.stringify(inventory));
}
function addItem() {
const name = document.getElementById(‘itemName’).value.trim();
const sku = document.getElementById(‘itemSku’).value.trim();
const sys = parseFloat(document.getElementById(‘sysQty’).value) || 0;
if (!name) return alert(‘請輸入品名’);
inventory.push({ sku: sku || ‘N/A’, name, system: sys, actual: “, note: " });
document.getElementById(‘itemName’).value = “;
document.getElementById(‘itemSku’).value = “;
document.getElementById(‘sysQty’).value = “;
render();
}
function updateActual(idx, val) {
inventory[idx].actual = val === " ? " : parseFloat(val);
render();
}
function updateNote(idx, val) {
inventory[idx].note = val;
render();
}
function deleteItem(idx) {
if (confirm(‘確定刪除此品項？’)) {
inventory.splice(idx, 1);
render();
}
}
function exportCSV() {
let csv = “編號/條碼,品名,帳面數,實盤數,盤差,備註\n";
inventory.forEach(i => {
const diff = (i.actual !== " && i.actual !== null) ? (i.actual – i.system) : “;
csv += `"${i.sku}","${i.name}",${i.system},${i.actual ?? “},${diff},"${i.note || “}"\n`;
});
const blob = new Blob([“\uFEFF" + csv], { type: ‘text/csv;charset=utf-8;’ });
const link = document.createElement(“a");
link.href = URL.createObjectURL(blob);
link.download = `庫存盤點表_${new Date().toISOString().slice(0,10)}.csv`;
link.click();
}
render();
璃鳴 