应收款管理系统

客户注册<\/h3>×<\/button><\/div>

<\/i> 姓名<\/label><\/div>

<\/i> 电话号码<\/label><\/div>

<\/i> 地址<\/label><\/div>

<\/i> 商号<\/label><\/div>

保存<\/button>取消<\/button><\/div> <\/div> <\/div> <\/div>

应收款登记<\/h3>

×<\/button><\/div>

<\/p>

季节<\/label> 春季<\/option>夏季<\/option>秋季<\/option>冬季<\/option> <\/select> <\/div>

日期<\/label>

<\/div>

品牌<\/label>

<\/select> <\/i><\/button> <\/div> <\/div> <\/div>

销售额(元)<\/label>

<\/div>

付款金额(元)<\/label><\/div>

应收款<\/label><\/div> <\/div>

备注<\/label><\/textarea><\/div> <input type="hidden" id="transId"> <div class="modal-actions"><button id="saveTransBtn" class="btn-primary">保存<\/button><button id="cancelTransBtn" class="btn-secondary">取消<\/button><\/div> <\/div> <\/div> <\/div> <!-- 상세보기 모달 --> <div id="detailPage" class="modal"> <div class="modal-content wide"> <div class="modal-header"> <h3 id="detailCustomerName">客户详情<\/h3> <div class="detail-header-right"> <span class="detail-total-badge" id="detailTotalReceivableHeader">💰 总应收款: 0 元<\/span> <button id="closeDetailBtn" class="btn-save"><i class="fas fa-tachometer-alt"><\/i> 返回仪表板<\/button> <\/div> <\/div> <div class="modal-body"> <div style="display:flex; gap:12px; margin-bottom:24px; flex-wrap:wrap;"> <button id="editCustomerDetailBtn" class="btn-secondary"><i class="fas fa-edit"><\/i> 修改客户信息<\/button> <button id="addTransactionDetailBtn" class="btn-primary"><i class="fas fa-plus"><\/i> 添加交易<\/button> <button id="toggleDeletedBtn" class="btn-outline"><i class="fas fa-trash-restore"><\/i> 查看已删除记录<\/button> <\/div> <div id="detailGroupsContainer"><\/div> <\/div> <\/div> <\/div> <!-- 삭제된 거래 모달 --> <div id="deletedModal" class="modal"> <div class="modal-content wide"> <div class="modal-header"><h3><i class="fas fa-trash-restore"><\/i> 已删除交易记录<\/h3><button class="close-modal" id="closeDeletedModal">×<\/button><\/div> <div class="modal-body"> <div class="table-container"> <table> <thead><tr><th>客户名<\/th><th>日期<\/th><th>季节<\/th><th>品牌<\/th><th>销售额<\/th><th>付款金额<\/th><th>应收款<\/th><th>备注<\/th><th>恢复<\/th><th>永久删除<\/th><\/tr><\/thead> <tbody id="deletedTableBody"><\/tbody> <\/table> <\/div> <\/div> <\/div> <\/div> <!-- 브랜드 관리 모달 --> <div id="brandModal" class="modal"> <div class="modal-content"> <div class="modal-header"><h3><i class="fas fa-tags"><\/i> 品牌管理<\/h3><button class="close-modal" id="closeBrandModal">×<\/button><\/div> <div class="modal-body"> <div style="margin-bottom:16px;"><button id="addBrandBtn" class="btn-primary"><i class="fas fa-plus"><\/i> 新品牌<\/button><\/div> <div class="table-container"> <table> <thead><tr><th>品牌名<\/th><th>管理<\/th><\/tr><\/thead> <tbody id="brandTableBody"><\/tbody> <\/table> <\/div> <\/div> <\/div> <\/div> <!-- 브랜드 등록/수정 모달 --> <div id="brandFormModal" class="modal"> <div class="modal-content"> <div class="modal-header"><h3 id="brandFormTitle">添加品牌<\/h3><button class="close-modal" id="closeBrandFormModal">×<\/button><\/div> <div class="modal-body"> <input type="hidden" id="brandId"> <div class="form-group"><label>品牌名<\/label><input type="text" id="brandName" placeholder="输入品牌名"><\/div> <div class="modal-actions"><button id="saveBrandBtn" class="btn-primary">保存<\/button><button id="cancelBrandFormBtn" class="btn-secondary">取消<\/button><\/div> <\/div> <\/div> <\/div> <!-- 정금 관리 목록 모달 --> <div id="depositModal" class="modal"> <div class="modal-content wide"> <div class="modal-header"> <h3><i class="fas fa-hand-holding-usd"><\/i> 定金管理<\/h3> <div class="deposit-header-right"> <span class="deposit-total-badge" id="depositTotalAmount">💰 总定金: 0 元<\/span> <button id="addDepositBtn" class="btn-primary"><i class="fas fa-plus"><\/i> 登记定金<\/button> <button class="close-modal" id="closeDepositModal">×<\/button> <\/div> <\/div> <div class="modal-body"> <div class="table-container"> <table> <thead><tr><th>季节<\/th><th>日期<\/th><th>客户名<\/th><th>品牌<\/th><th>金额(元)<\/th><th>备注<\/th><th>管理<\/th><\/tr><\/thead> <tbody id="depositTableBody"><\/tbody> <\/table> <\/div> <\/div> <\/div> <\/div> <!-- 정금 등록/수정 모달 --> <div id="depositFormModal" class="modal"> <div class="modal-content"> <div class="modal-header"><h3 id="depositFormTitle">定金登记<\/h3><button class="close-modal" id="closeDepositFormModal">×<\/button><\/div> <div class="modal-body"> <input type="hidden" id="depositId"> <div class="form-row"> <div class="form-group"><label>季节<\/label> <select id="depositSeason"> <option>春季<\/option><option>夏季<\/option><option>秋季<\/option><option>冬季<\/option> <\/select> <\/div> <div class="form-group"><label>日期<\/label><input type="date" id="depositDate"><\/div> <\/div> <div class="form-row"> <div class="form-group"><label>客户名<\/label><input type="text" id="depositCustomerName" list="customerNameList" placeholder="选择或输入客户名" autocomplete="off"><datalist id="customerNameList"><\/datalist><\/div> <div class="form-group"><label>品牌<\/label><select id="depositBrandSelect"><\/select><\/div> <\/div> <div class="form-row"> <div class="form-group"><label>金额(元)<\/label><input type="number" id="depositAmount" placeholder="0"><\/div> <div class="form-group"><label>备注<\/label><input type="text" id="depositMemo" placeholder="备注"><\/div> <\/div> <div class="modal-actions"> <button id="saveDepositBtn" class="btn-primary">保存<\/button> <button id="cancelDepositFormBtn" class="btn-secondary">取消<\/button> <\/div> <\/div> <\/div> <\/div> <script> // ==================== IndexedDB 초기화 ==================== const DB_NAME = 'ReceivableDB'; const DB_VERSION = 7; let db = null; function openDB() { return new Promise((resolve, reject) => { const request = indexedDB.open(DB_NAME, DB_VERSION); request.onerror = (event) => { console.error('IndexedDB错误:', event.target.error); alert('无法访问数据库，请清除浏览器存储数据后刷新页面。'); reject(event.target.error); }; request.onsuccess = () => resolve(request.result); request.onupgradeneeded = (event) => { const db = event.target.result; if (!db.objectStoreNames.contains('customers')) { db.createObjectStore('customers', { keyPath: 'id', autoIncrement: true }); } if (!db.objectStoreNames.contains('transactions')) { db.createObjectStore('transactions', { keyPath: 'id', autoIncrement: true }); } if (!db.objectStoreNames.contains('brands')) { db.createObjectStore('brands', { keyPath: 'id', autoIncrement: true }); } if (!db.objectStoreNames.contains('deposits')) { db.createObjectStore('deposits', { keyPath: 'id', autoIncrement: true }); } }; }); } // CRUD 함수들 (동일) async function getDeposits() { return new Promise((resolve) => { const tx = db.transaction('deposits', 'readonly'); const req = tx.objectStore('deposits').getAll(); req.onsuccess = () => resolve(req.result); }); } async function saveDeposit(deposit) { return new Promise((resolve, reject) => { const tx = db.transaction('deposits', 'readwrite'); const req = deposit.id ? tx.objectStore('deposits').put(deposit) : tx.objectStore('deposits').add(deposit); req.onsuccess = () => resolve(req.result); req.onerror = () => reject(req.error); }); } async function deleteDeposit(id) { return new Promise((resolve, reject) => { const tx = db.transaction('deposits', 'readwrite'); const req = tx.objectStore('deposits').delete(id); req.onsuccess = () => resolve(); req.onerror = () => reject(req.error); }); } async function getBrands() { return new Promise((resolve) => { const tx = db.transaction('brands', 'readonly'); const req = tx.objectStore('brands').getAll(); req.onsuccess = () => resolve(req.result); }); } async function saveBrand(brand) { return new Promise((resolve, reject) => { const tx = db.transaction('brands', 'readwrite'); const req = brand.id ? tx.objectStore('brands').put(brand) : tx.objectStore('brands').add(brand); req.onsuccess = () => resolve(req.result); req.onerror = () => reject(req.error); }); } async function deleteBrand(id) { return new Promise((resolve, reject) => { const tx = db.transaction('brands', 'readwrite'); const req = tx.objectStore('brands').delete(id); req.onsuccess = () => resolve(); req.onerror = () => reject(req.error); }); } async function getCustomers() { return new Promise((resolve) => { const tx = db.transaction('customers', 'readonly'); const req = tx.objectStore('customers').getAll(); req.onsuccess = () => resolve(req.result); }); } async function saveCustomer(customer) { return new Promise((resolve, reject) => { const tx = db.transaction('customers', 'readwrite'); const req = customer.id ? tx.objectStore('customers').put(customer) : tx.objectStore('customers').add(customer); req.onsuccess = () => resolve(req.result); req.onerror = () => reject(req.error); }); } async function deleteCustomer(id) { return new Promise((resolve, reject) => { const tx = db.transaction('customers', 'readwrite'); const req = tx.objectStore('customers').delete(id); req.onsuccess = () => resolve(); req.onerror = () => reject(req.error); }); } async function getTransactions(filter = {}) { return new Promise((resolve) => { const tx = db.transaction('transactions', 'readonly'); const req = tx.objectStore('transactions').getAll(); req.onsuccess = () => { let items = req.result; if (filter.customerId) items = items.filter(t => t.customerId === filter.customerId); if (filter.deleted !== undefined) items = items.filter(t => !!t.deleted === filter.deleted); else items = items.filter(t => !t.deleted); resolve(items); }; }); } async function saveTransaction(trans) { return new Promise((resolve, reject) => { const tx = db.transaction('transactions', 'readwrite'); const store = tx.objectStore('transactions'); let request; if (trans.id && typeof trans.id === 'number' && !isNaN(trans.id)) { request = store.put(trans); } else { const { id, ...newTrans } = trans; request = store.add(newTrans); } request.onsuccess = () => resolve(request.result); request.onerror = () => reject(request.error); }); } async function deleteTransactionSoft(id) { const tx = db.transaction('transactions', 'readwrite'); const store = tx.objectStore('transactions'); const trans = await new Promise((resolve) => { const req = store.get(id); req.onsuccess = () => resolve(req.result); }); if (trans) { trans.deleted = true; await new Promise((resolve) => { const req = store.put(trans); req.onsuccess = () => resolve(); }); } } async function hardDeleteTransaction(id) { return new Promise((resolve, reject) => { const tx = db.transaction('transactions', 'readwrite'); const req = tx.objectStore('transactions').delete(id); req.onsuccess = () => resolve(); req.onerror = () => reject(req.error); }); } async function updateAllTransactionsBrand(oldName, newName) { const tx = db.transaction('transactions', 'readwrite'); const store = tx.objectStore('transactions'); const all = await new Promise((resolve) => { const req = store.getAll(); req.onsuccess = () => resolve(req.result); }); for (let trans of all) { if (trans.brand === oldName) { trans.brand = newName; await new Promise((resolve) => { const req = store.put(trans); req.onsuccess = () => resolve(); }); } } } async function getReceivableSumByCustomer() { const customers = await getCustomers(); const transactions = await getTransactions({ deleted: false }); const map = new Map(); for (const t of transactions) { const receivable = (t.sales || 0) - (t.payment || 0); map.set(t.customerId, (map.get(t.customerId) || 0) + receivable); } return map; } async function updateNavStats() { const customers = await getCustomers(); const transactions = await getTransactions({ deleted: false }); let totalReceivable = 0; for (const t of transactions) totalReceivable += (t.sales - t.payment); document.getElementById('navTotalReceivable').innerText = totalReceivable.toLocaleString(); document.getElementById('navCustomerCount').innerText = customers.length; } async function updateSummaryCards() { await updateNavStats(); const transactions = await getTransactions({ deleted: false }); let totalReceivable = 0; for (const t of transactions) totalReceivable += (t.sales - t.payment); document.getElementById('totalReceivableFooter').innerHTML = formatAmountSpan(totalReceivable) + ' 元'; } function formatAmountSpan(amount) { const abs = Math.abs(amount).toLocaleString(); if (amount < 0) return `<span class="negative">-${abs}</span>`; return abs; } const seasonOrder = { '春季':1, '夏季':2, '秋季':3, '冬季':4 }; async function renderGroupedDetail(customerId, includeDeleted) { let allTrans = await new Promise((resolve) => { const tx = db.transaction('transactions', 'readonly'); const req = tx.objectStore('transactions').getAll(); req.onsuccess = () => resolve(req.result.filter(t => t.customerId === customerId)); }); let filtered = includeDeleted ? allTrans : allTrans.filter(t => !t.deleted); for (let t of filtered) if (t.date) t.year = parseInt(t.date.substring(0,4)); else t.year = 9999; const groups = new Map(); for (let t of filtered) { const key = `${t.year}_${t.season}`; if (!groups.has(key)) groups.set(key, { year: t.year, season: t.season, transactions: [] }); groups.get(key).transactions.push(t); } const sortedGroups = Array.from(groups.values()).sort((a,b) => a.year !== b.year ? a.year - b.year : (seasonOrder[a.season] || 0) - (seasonOrder[b.season] || 0)); const container = document.getElementById('detailGroupsContainer'); container.innerHTML = ''; let grandTotal = 0; for (const group of sortedGroups) { const groupDiv = document.createElement('div'); groupDiv.className = 'season-group'; const header = document.createElement('div'); header.className = 'group-header'; header.innerHTML = `<i class="fas fa-calendar-alt"></i> ${group.year}年 ${group.season}`; groupDiv.appendChild(header); const table = document.createElement('table'); table.className = 'group-table'; table.innerHTML = `<thead><tr><th>日期</th><th>季节</th><th>品牌</th><th>销售额</th><th>付款金额</th><th>应收款</th><th>备注</th><th>管理</th></tr></thead><tbody></tbody>`; const tbody = table.querySelector('tbody'); let groupTotal = 0; for (const trans of group.transactions) { const receivable = (trans.sales || 0) - (trans.payment || 0); if (!trans.deleted) groupTotal += receivable; grandTotal += (trans.deleted ? 0 : receivable); const row = tbody.insertRow(); if (trans.deleted) row.style.backgroundColor = '#fff3e0'; row.insertCell(0).innerText = trans.date || ''; row.insertCell(1).innerText = trans.season || ''; row.insertCell(2).innerText = trans.brand || ''; row.insertCell(3).innerHTML = formatAmountSpan(trans.sales || 0); row.insertCell(4).innerHTML = formatAmountSpan(trans.payment || 0); row.insertCell(5).innerHTML = formatAmountSpan(receivable); row.insertCell(6).innerText = trans.memo || ''; const actionCell = row.insertCell(7); if (!trans.deleted) actionCell.innerHTML = `<div class="action-cell"><button class="action-btn" onclick="editTransaction(${trans.id})"><i class="fas fa-edit"></i> 修改</button><button class="action-btn" style="color:var(--danger-color);" onclick="softDeleteTrans(${trans.id})"><i class="fas fa-trash-alt"></i> 删除</button></div>`; else actionCell.innerHTML = `<button class="action-btn" onclick="restoreTransaction(${trans.id})"><i class="fas fa-trash-restore"></i> 恢复</button>`; } if (group.transactions.length) { const subtotalRow = tbody.insertRow(); subtotalRow.className = 'subtotal-row'; const cell = subtotalRow.insertCell(0); cell.colSpan = 6; cell.innerHTML = '<strong>🌾 季度合计</strong>'; const totalCell = subtotalRow.insertCell(1); totalCell.colSpan = 2; totalCell.style.textAlign = 'right'; totalCell.innerHTML = `<strong>${formatAmountSpan(groupTotal)} 元</strong>`; while(subtotalRow.cells.length > 2) subtotalRow.deleteCell(2); } groupDiv.appendChild(table); container.appendChild(groupDiv); } if (sortedGroups.length === 0) container.innerHTML = '<div style="padding:20px; text-align:center;">📭 没有可显示的交易记录。</div>'; document.getElementById('detailTotalReceivableHeader').innerHTML = `💰 总应收款: ${formatAmountSpan(grandTotal)} 元`; } let currentDetailCustomerId = null, showDeleted = false; window.viewCustomerDetail = async (customerId, customerName) => { currentDetailCustomerId = customerId; showDeleted = false; document.getElementById('detailCustomerName').innerHTML = `<i class="fas fa-user-circle"></i> ${customerName}`; await renderGroupedDetail(customerId, false); document.getElementById('detailPage').style.display = 'flex'; }; window.editTransaction = async (transId) => { const allTrans = await getTransactions({ deleted: false }); const trans = allTrans.find(t => t.id === transId); if (trans) { currentCustomerId = trans.customerId; editingTransId = transId; document.getElementById('transCustomerId').value = trans.customerId; document.getElementById('transId').value = trans.id; document.getElementById('transDate').value = trans.date; document.getElementById('transSeason').value = trans.season; await updateBrandSelect(trans.brand, 'transBrandSelect'); document.getElementById('transSales').value = trans.sales; document.getElementById('transPayment').value = trans.payment; document.getElementById('transReceivable').value = trans.sales - trans.payment; document.getElementById('transMemo').value = trans.memo; const cust = (await getCustomers()).find(c => c.id === trans.customerId); document.getElementById('transCustomerName').innerHTML = `<i class="fas fa-user"></i> 客户: ${cust?.name}`; document.getElementById('transactionModal').style.display = 'flex'; } }; window.softDeleteTrans = async (transId) => { if (confirm('删除(归档)该交易。')) { await deleteTransactionSoft(transId); if (currentDetailCustomerId) await renderGroupedDetail(currentDetailCustomerId, showDeleted); else await loadMainPage(); } }; window.restoreTransaction = async (transId) => { const tx = db.transaction('transactions', 'readwrite'); const store = tx.objectStore('transactions'); const trans = await new Promise((resolve) => { const req = store.get(transId); req.onsuccess = () => resolve(req.result); }); if (trans) { trans.deleted = false; await new Promise((resolve) => { const req = store.put(trans); req.onsuccess = () => resolve(); }); if (currentDetailCustomerId) await renderGroupedDetail(currentDetailCustomerId, showDeleted); else await loadMainPage(); } }; document.getElementById('toggleDeletedBtn').onclick = async () => { showDeleted = !showDeleted; document.getElementById('toggleDeletedBtn').innerHTML = showDeleted ? '<i class="fas fa-eye"></i> 查看当前记录' : '<i class="fas fa-trash-restore"></i> 查看已删除记录'; await renderGroupedDetail(currentDetailCustomerId, showDeleted); }; document.getElementById('editCustomerDetailBtn').onclick = async () => { const customers = await getCustomers(); const customer = customers.find(c => c.id === currentDetailCustomerId); if (customer) openCustomerModal(customer); }; document.getElementById('addTransactionDetailBtn').onclick = () => { const custName = document.getElementById('detailCustomerName').innerText.replace(/[^a-zA-Z\u4e00-\u9fa5\s]/g, '').trim() || "客户"; openTransactionModal(currentDetailCustomerId, custName); }; document.getElementById('closeDetailBtn').onclick = () => { document.getElementById('detailPage').style.display = 'none'; loadMainPage(); }; document.getElementById('saveTransBtn').onclick = async () => { try { const brandName = document.getElementById('transBrandSelect').value; if (!brandName) { alert('请选择品牌。'); return; } const salesVal = parseFloat(document.getElementById('transSales').value) || 0; const paymentVal = parseFloat(document.getElementById('transPayment').value) || 0; const trans = { id: editingTransId ? parseInt(editingTransId) : undefined, customerId: currentCustomerId, date: document.getElementById('transDate').value, season: document.getElementById('transSeason').value, brand: brandName, sales: salesVal, payment: paymentVal, memo: document.getElementById('transMemo').value, deleted: false }; await saveTransaction(trans); document.getElementById('transactionModal').style.display = 'none'; if (document.getElementById('detailPage').style.display === 'flex') await renderGroupedDetail(currentDetailCustomerId, showDeleted); else await loadMainPage(); } catch(err) { alert('保存失败：' + err.message); } }; async function loadMainPage() { const customers = await getCustomers(); const receivableMap = await getReceivableSumByCustomer(); const searchTerm = document.getElementById('searchInput').value.toLowerCase(); const filtered = customers.filter(c => (c.name?.toLowerCase().includes(searchTerm) || c.business?.toLowerCase().includes(searchTerm) || c.phone?.toLowerCase().includes(searchTerm))); const tbody = document.getElementById('customerTableBody'); if (filtered.length === 0) tbody.innerHTML = '<tr><td colspan="5">没有客户<\/td><\/tr>'; else { tbody.innerHTML = ''; for (const c of filtered) { const receivable = receivableMap.get(c.id) || 0; const row = tbody.insertRow(); row.classList.add('clickable-row'); row.addEventListener('click', (e) => { if (e.target.tagName !== 'BUTTON' && e.target.tagName !== 'I') openTransactionModal(c.id, c.name); }); row.insertCell(0).innerText = c.name; row.insertCell(1).innerText = c.business || '-'; row.insertCell(2).innerText = c.phone || '-'; row.insertCell(3).innerHTML = formatAmountSpan(receivable) + ' 元'; const actionCell = row.insertCell(4); actionCell.innerHTML = `<div class="action-cell"> <button class="action-btn" onclick="event.stopPropagation(); editCustomer(${c.id})"><i class="fas fa-edit"></i> 修改</button> <button class="action-btn" style="color:var(--danger-color);" onclick="event.stopPropagation(); deleteCustomerConfirm(${c.id})"><i class="fas fa-trash"></i> 删除</button> <button class="action-btn detail-btn" onclick="event.stopPropagation(); viewCustomerDetail(${c.id}, '${c.name.replace(/'/g, "\\'")}')"><i class="fas fa-list"></i> 详情</button> <\/div>`; } } await updateSummaryCards(); } window.editCustomer = async (id) => { const customers = await getCustomers(); const customer = customers.find(c => c.id === id); if (customer) openCustomerModal(customer); }; window.deleteCustomerConfirm = async (id) => { if (confirm('删除客户将同时删除所有交易记录。')) { const trans = await getTransactions({ customerId: id, deleted: false }); for (const t of trans) await deleteTransactionSoft(t.id); await deleteCustomer(id); await loadMainPage(); } }; function openCustomerModal(customer = null) { document.getElementById('customerModalTitle').innerText = customer ? '修改客户' : '客户注册'; document.getElementById('customerId').value = customer?.id || ''; document.getElementById('custName').value = customer?.name || ''; document.getElementById('custPhone').value = customer?.phone || ''; document.getElementById('custAddress').value = customer?.address || ''; document.getElementById('custBusiness').value = customer?.business || ''; document.getElementById('customerModal').style.display = 'flex'; } document.getElementById('addCustomerBtn').onclick = () => openCustomerModal(); document.getElementById('closeCustomerModal').onclick = () => document.getElementById('customerModal').style.display = 'none'; document.getElementById('cancelCustomerBtn').onclick = () => document.getElementById('customerModal').style.display = 'none'; document.getElementById('saveCustomerBtn').onclick = async () => { const id = document.getElementById('customerId').value; const customer = { name: document.getElementById('custName').value, phone: document.getElementById('custPhone').value, address: document.getElementById('custAddress').value, business: document.getElementById('custBusiness').value }; if (id) customer.id = parseInt(id); await saveCustomer(customer); document.getElementById('customerModal').style.display = 'none'; await loadMainPage(); }; async function updateBrandSelect(selectedBrandName = '', targetSelectId) { const brands = await getBrands(); const select = document.getElementById(targetSelectId); if (!select) return; select.innerHTML = '<option value="">选择品牌</option>'; for (const b of brands) { const option = document.createElement('option'); option.value = b.name; option.textContent = b.name; if (b.name === selectedBrandName) option.selected = true; select.appendChild(option); } } document.getElementById('refreshBrandBtn').onclick = () => updateBrandSelect('', 'transBrandSelect'); let currentCustomerId = null, editingTransId = null; function openTransactionModal(customerId, customerName) { currentCustomerId = customerId; editingTransId = null; document.getElementById('transCustomerName').innerHTML = `<i class="fas fa-user"></i> 客户: ${customerName}`; document.getElementById('transCustomerId').value = customerId; document.getElementById('transId').value = ''; document.getElementById('transDate').value = new Date().toISOString().slice(0,10); document.getElementById('transSeason').value = '春季'; updateBrandSelect('', 'transBrandSelect'); document.getElementById('transSales').value = ''; document.getElementById('transPayment').value = ''; document.getElementById('transReceivable').value = ''; document.getElementById('transMemo').value = ''; document.getElementById('transactionModal').style.display = 'flex'; } function calcReceivable() { const sales = parseFloat(document.getElementById('transSales').value) || 0; const payment = parseFloat(document.getElementById('transPayment').value) || 0; document.getElementById('transReceivable').value = sales - payment; } document.getElementById('transSales').addEventListener('input', calcReceivable); document.getElementById('transPayment').addEventListener('input', calcReceivable); document.getElementById('closeTransModal').onclick = () => document.getElementById('transactionModal').style.display = 'none'; document.getElementById('cancelTransBtn').onclick = () => document.getElementById('transactionModal').style.display = 'none'; let restoreOccurred = false; async function loadDeletedTransactions() { const allTrans = await new Promise((resolve) => { const tx = db.transaction('transactions', 'readonly'); const req = tx.objectStore('transactions').getAll(); req.onsuccess = () => resolve(req.result); }); const deleted = allTrans.filter(t => t.deleted === true); const customers = await getCustomers(); const customerMap = new Map(customers.map(c => [c.id, c])); const tbody = document.getElementById('deletedTableBody'); tbody.innerHTML = ''; if (deleted.length === 0) { tbody.innerHTML = '<tr><td colspan="10">没有已删除的交易<\/td><\/tr>'; return; } for (const t of deleted) { const cust = customerMap.get(t.customerId); if (!cust) continue; const receivable = t.sales - t.payment; const row = tbody.insertRow(); row.insertCell(0).innerText = cust.name; row.insertCell(1).innerText = t.date || ''; row.insertCell(2).innerText = t.season || ''; row.insertCell(3).innerText = t.brand || ''; row.insertCell(4).innerHTML = formatAmountSpan(t.sales); row.insertCell(5).innerHTML = formatAmountSpan(t.payment); row.insertCell(6).innerHTML = formatAmountSpan(receivable); row.insertCell(7).innerText = t.memo || ''; const restoreBtn = document.createElement('button'); restoreBtn.innerHTML = '<i class="fas fa-trash-restore"></i> 恢复'; restoreBtn.className = 'action-btn'; restoreBtn.onclick = async () => { t.deleted = false; await saveTransaction(t); restoreOccurred = true; await loadDeletedTransactions(); }; row.insertCell(8).appendChild(restoreBtn); const hardDelBtn = document.createElement('button'); hardDelBtn.innerHTML = '<i class="fas fa-trash-alt"></i> 永久删除'; hardDelBtn.className = 'action-btn'; hardDelBtn.style.color = 'var(--danger-color)'; hardDelBtn.onclick = async () => { if (confirm('永久删除，不可恢复。')) { await hardDeleteTransaction(t.id); await loadDeletedTransactions(); } }; row.insertCell(9).appendChild(hardDelBtn); } } document.getElementById('deletedRecordsBtn').onclick = () => { restoreOccurred = false; loadDeletedTransactions(); document.getElementById('deletedModal').style.display = 'flex'; }; document.getElementById('closeDeletedModal').onclick = () => { document.getElementById('deletedModal').style.display = 'none'; if (restoreOccurred) { if (currentDetailCustomerId && document.getElementById('detailPage').style.display === 'flex') renderGroupedDetail(currentDetailCustomerId, showDeleted); else loadMainPage(); restoreOccurred = false; } }; async function loadBrandList() { const tbody = document.getElementById('brandTableBody'); if (!tbody) return; const brands = await getBrands(); tbody.innerHTML = ''; for (const b of brands) { const row = tbody.insertRow(); row.insertCell(0).innerText = b.name; const actionCell = row.insertCell(1); const editBtn = document.createElement('button'); editBtn.innerHTML = '<i class="fas fa-edit"></i> 修改'; editBtn.className = 'action-btn'; editBtn.onclick = () => openBrandFormModal(b); const delBtn = document.createElement('button'); delBtn.innerHTML = '<i class="fas fa-trash"></i> 删除'; delBtn.className = 'action-btn'; delBtn.style.color = 'var(--danger-color)'; delBtn.onclick = async () => { const transactions = await getTransactions({ deleted: false }); const used = transactions.some(t => t.brand === b.name); if (used) { alert('该品牌正在交易中使用，无法删除。'); return; } if (confirm(`确定删除品牌“${b.name}”吗？`)) { await deleteBrand(b.id); await loadBrandList(); await updateBrandSelect('', 'transBrandSelect'); } }; actionCell.appendChild(editBtn); actionCell.appendChild(delBtn); } } function openBrandFormModal(brand = null) { document.getElementById('brandFormTitle').innerText = brand ? '修改品牌' : '添加品牌'; document.getElementById('brandId').value = brand?.id || ''; document.getElementById('brandName').value = brand?.name || ''; document.getElementById('brandFormModal').style.display = 'flex'; } document.getElementById('brandManageBtn').onclick = async () => { await loadBrandList(); document.getElementById('brandModal').style.display = 'flex'; }; document.getElementById('closeBrandModal').onclick = () => document.getElementById('brandModal').style.display = 'none'; document.getElementById('addBrandBtn').onclick = () => openBrandFormModal(); document.getElementById('closeBrandFormModal').onclick = () => document.getElementById('brandFormModal').style.display = 'none'; document.getElementById('cancelBrandFormBtn').onclick = () => document.getElementById('brandFormModal').style.display = 'none'; document.getElementById('saveBrandBtn').onclick = async () => { const id = document.getElementById('brandId').value; const newName = document.getElementById('brandName').value.trim(); if (!newName) { alert('请输入品牌名。'); return; } const brands = await getBrands(); const existing = brands.find(b => b.id == id); let oldName = null; if (existing) oldName = existing.name; if (!id && brands.some(b => b.name === newName)) { alert('品牌名已存在。'); return; } const brand = { name: newName }; if (id) brand.id = parseInt(id); await saveBrand(brand); if (oldName && oldName !== newName) { await updateAllTransactionsBrand(oldName, newName); } document.getElementById('brandFormModal').style.display = 'none'; await loadBrandList(); await updateBrandSelect('', 'transBrandSelect'); if (currentDetailCustomerId && document.getElementById('detailPage').style.display === 'flex') await renderGroupedDetail(currentDetailCustomerId, showDeleted); else await loadMainPage(); }; // 定金 관리 let editingDepositId = null; async function updateCustomerDatalist() { const customers = await getCustomers(); const datalist = document.getElementById('customerNameList'); datalist.innerHTML = ''; customers.forEach(c => { if (c.name) { const option = document.createElement('option'); option.value = c.name; datalist.appendChild(option); } }); } async function loadDepositList() { const deposits = await getDeposits(); const tbody = document.getElementById('depositTableBody'); tbody.innerHTML = ''; let totalDeposit = 0; if (deposits.length === 0) { tbody.innerHTML = '<td><td colspan="7">没有定金记录。<\/td><\/tr>'; } else { for (const d of deposits) { totalDeposit += (d.amount || 0); const row = tbody.insertRow(); row.insertCell(0).innerText = d.season || ''; row.insertCell(1).innerText = d.date || ''; row.insertCell(2).innerText = d.customerName || ''; row.insertCell(3).innerText = d.brand || ''; row.insertCell(4).innerHTML = formatAmountSpan(d.amount || 0); row.insertCell(5).innerText = d.memo || ''; const actionCell = row.insertCell(6); actionCell.innerHTML = `<div class="action-cell"><button class="action-btn" onclick="editDeposit(${d.id})"><i class="fas fa-edit"></i> 修改</button><button class="action-btn" style="background:#4caf50; color:white; border-color:#4caf50;" onclick="convertDepositToTransaction(${d.id})"><i class="fas fa-exchange-alt"></i> 转换</button><button class="action-btn" style="color:var(--danger-color);" onclick="deleteDepositItem(${d.id})"><i class="fas fa-trash"></i> 删除</button></div>`; } } document.getElementById('depositTotalAmount').innerHTML = `💰 总定金: ${formatAmountSpan(totalDeposit)} 元`; } window.editDeposit = async (id) => { const deposits = await getDeposits(); const deposit = deposits.find(d => d.id === id); if (deposit) { editingDepositId = deposit.id; document.getElementById('depositFormTitle').innerText = '修改定金'; document.getElementById('depositId').value = deposit.id; document.getElementById('depositSeason').value = deposit.season; document.getElementById('depositDate').value = deposit.date; document.getElementById('depositCustomerName').value = deposit.customerName; await updateBrandSelect(deposit.brand, 'depositBrandSelect'); document.getElementById('depositAmount').value = deposit.amount; document.getElementById('depositMemo').value = deposit.memo; document.getElementById('depositFormModal').style.display = 'flex'; } }; window.convertDepositToTransaction = async (id) => { const deposits = await getDeposits(); const deposit = deposits.find(d => d.id === id); if (!deposit) return; let customers = await getCustomers(); let customer = customers.find(c => c.name === deposit.customerName); if (!customer) { customer = { name: deposit.customerName, phone: '', address: '', business: '' }; const newId = await saveCustomer(customer); customer.id = newId; await updateCustomerDatalist(); } let brands = await getBrands(); if (!brands.some(b => b.name === deposit.brand)) { await saveBrand({ name: deposit.brand }); await updateBrandSelect('', 'transBrandSelect'); } const transaction = { customerId: customer.id, date: deposit.date, season: deposit.season, brand: deposit.brand, sales: 0, payment: deposit.amount, memo: `[定金转换] ${deposit.memo || ''}`, deleted: false }; await saveTransaction(transaction); await deleteDeposit(id); await loadDepositList(); if (currentDetailCustomerId && document.getElementById('detailPage').style.display === 'flex') { await renderGroupedDetail(currentDetailCustomerId, showDeleted); } else { await loadMainPage(); } alert('定金已转换为交易记录。'); }; window.deleteDepositItem = async (id) => { if (confirm('确定删除定金记录吗？')) { await deleteDeposit(id); await loadDepositList(); } }; function openDepositForm(deposit = null) { editingDepositId = deposit?.id || null; document.getElementById('depositFormTitle').innerText = deposit ? '修改定金' : '定金登记'; document.getElementById('depositId').value = deposit?.id || ''; document.getElementById('depositSeason').value = deposit?.season || '春季'; document.getElementById('depositDate').value = deposit?.date || new Date().toISOString().slice(0,10); document.getElementById('depositCustomerName').value = deposit?.customerName || ''; updateBrandSelect(deposit?.brand || '', 'depositBrandSelect'); document.getElementById('depositAmount').value = deposit?.amount || ''; document.getElementById('depositMemo').value = deposit?.memo || ''; document.getElementById('depositFormModal').style.display = 'flex'; } document.getElementById('depositManageBtn').onclick = async () => { await updateCustomerDatalist(); await loadDepositList(); document.getElementById('depositModal').style.display = 'flex'; }; document.getElementById('closeDepositModal').onclick = () => document.getElementById('depositModal').style.display = 'none'; document.getElementById('addDepositBtn').onclick = () => openDepositForm(); document.getElementById('closeDepositFormModal').onclick = () => document.getElementById('depositFormModal').style.display = 'none'; document.getElementById('cancelDepositFormBtn').onclick = () => document.getElementById('depositFormModal').style.display = 'none'; document.getElementById('saveDepositBtn').onclick = async () => { const id = document.getElementById('depositId').value; const season = document.getElementById('depositSeason').value; const date = document.getElementById('depositDate').value; const customerName = document.getElementById('depositCustomerName').value.trim(); const brand = document.getElementById('depositBrandSelect').value; const amount = parseFloat(document.getElementById('depositAmount').value) || 0; const memo = document.getElementById('depositMemo').value; if (!customerName || !brand || !date) { alert('客户名、品牌、日期为必填项。'); return; } const deposit = { season, date, customerName, brand, amount, memo }; if (id) deposit.id = parseInt(id); await saveDeposit(deposit); document.getElementById('depositFormModal').style.display = 'none'; await loadDepositList(); }; // 저장 (alert 제거) document.getElementById('exportBtn').onclick = async () => { const transactions = await getTransactions({ deleted: false }); const customers = await getCustomers(); const customerMap = new Map(customers.map(c => [c.id, c])); const rows = [['客户名', '日期', '季节', '品牌', '销售额', '付款金额', '应收款', '备注']]; for (const t of transactions) { const cust = customerMap.get(t.customerId); if (!cust) continue; rows.push([cust.name, t.date, t.season, t.brand, t.sales, t.payment, t.sales - t.payment, t.memo || '']); } const csv = rows.map(row => row.map(cell => `"${String(cell).replace(/"/g, '""')}"`).join(',')).join('\n'); const blob = new Blob(["\uFEFF" + csv], { type: 'application/octet-stream' }); const link = document.createElement('a'); const url = URL.createObjectURL(blob); link.href = url; link.download = `应收款备份_${new Date().toISOString().split('T')[0]}.txt`; document.body.appendChild(link); link.click(); document.body.removeChild(link); URL.revokeObjectURL(url); }; document.getElementById('importBtn').onclick = () => document.getElementById('csvFileInput').click(); document.getElementById('csvFileInput').onchange = async (e) => { const file = e.target.files[0]; if (!file) return; const fileName = file.name; const fileExt = fileName.split('.').pop().toLowerCase(); const allowedExt = ['csv', 'txt']; const allowedMime = ['text/csv', 'text/plain']; if (!allowedExt.includes(fileExt) && !allowedMime.includes(file.type)) { alert('❌ .csv 또는 .txt 파일만 업로드 가능합니다.\n선택한 파일: ' + fileName); e.target.value = ''; return; } const text = await file.text(); const lines = text.split(/\r?\n/); if (lines.length < 2) { alert('파일에 데이터가 없습니다.'); return; } const headers = lines[0].split(',').map(h => h.replace(/^"|"$/g, '').trim()); const nameIdx = headers.findIndex(h => h.includes('客户名')); const dateIdx = headers.findIndex(h => h.includes('日期')); const seasonIdx = headers.findIndex(h => h.includes('季节')); const brandIdx = headers.findIndex(h => h.includes('品牌')); const salesIdx = headers.findIndex(h => h.includes('销售额')); const paymentIdx = headers.findIndex(h => h.includes('付款金额')); const memoIdx = headers.findIndex(h => h.includes('备注')); if (nameIdx === -1 || dateIdx === -1 || seasonIdx === -1 || brandIdx === -1 || salesIdx === -1 || paymentIdx === -1) { alert('필수 열(客户名, 日期, 季节, 品牌, 销售额, 付款金额)이 없습니다.'); return; } let success = 0, fail = 0; for (let i=1; i<lines.length; i++) { if (!lines[i].trim()) continue; const parts = lines[i].match(/(".*?"|[^,]+)(?=\s*,|\s*$)/g).map(p => p.replace(/^"|"$/g, '').trim()); if (parts.length < 6) { fail++; continue; } const customerName = parts[nameIdx] || ''; const dateStr = parts[dateIdx] || ''; const season = parts[seasonIdx] || ''; const brandName = parts[brandIdx] || ''; const sales = parseFloat(parts[salesIdx].replace(/[^0-9.-]/g, '')) || 0; const payment = parseFloat(parts[paymentIdx].replace(/[^0-9.-]/g, '')) || 0; const memo = (memoIdx !== -1 && parts[memoIdx]) ? parts[memoIdx] : ''; if (!customerName || !dateStr || !season || !brandName) { fail++; continue; } let customers = await getCustomers(); let customer = customers.find(c => c.name === customerName); if (!customer) { customer = { name: customerName, phone: '', address: '', business: '' }; const newId = await saveCustomer(customer); customer.id = newId; } let brands = await getBrands(); if (!brands.some(b => b.name === brandName)) await saveBrand({ name: brandName }); const transaction = { customerId: customer.id, date: dateStr, season: season, brand: brandName, sales: sales, payment: payment, memo: memo, deleted: false }; await saveTransaction(transaction); success++; } alert(`导入完成：成功 ${success} 条，失败 ${fail} 条`); document.getElementById('csvFileInput').value = ''; await loadMainPage(); if (currentDetailCustomerId && document.getElementById('detailPage').style.display === 'flex') await renderGroupedDetail(currentDetailCustomerId, showDeleted); }; document.getElementById('searchBtn').onclick = () => loadMainPage(); document.getElementById('searchInput').addEventListener('keyup', () => loadMainPage()); function showToast(msg, duration = 5000) { let toast = document.querySelector('.toast'); if (toast) toast.remove(); toast = document.createElement('div'); toast.className = 'toast'; toast.innerText = msg; document.body.appendChild(toast); setTimeout(() => { toast.style.opacity = '0'; setTimeout(() => toast.remove(), 300); }, duration); } (async () => { try { db = await openDB(); await updateBrandSelect('', 'transBrandSelect'); await updateBrandSelect('', 'depositBrandSelect'); await loadMainPage(); await updateCustomerDatalist(); showToast('📢 定期备份提醒：请经常使用“保存”按钮导出数据，以防浏览器缓存被清除。', 5000); } catch (err) { console.error('应用初始化失败:', err); alert('应用初始化失败，请清除浏览器存储数据后重试。'); } })(); </script> </body> </html>