101 lines
4.5 KiB
JavaScript
101 lines
4.5 KiB
JavaScript
const SUPABASE_URL = 'https://chixssrphfgxvqqigkzo.supabase.co';
|
|
const SUPABASE_ANON_KEY = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImNoaXhzc3JwaGZneHZxcWlna3pvIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NzQ2OTE0OTEsImV4cCI6MjA5MDI2NzQ5MX0.Az_Ew2J2zdOMcSV0UNAjBS-LPqGpqhsaN4IyZ5R7iqU';
|
|
|
|
if (!window._sbClient) {
|
|
window._sbClient = window.supabase.createClient(SUPABASE_URL, SUPABASE_ANON_KEY);
|
|
}
|
|
const sbClient = window._sbClient;
|
|
|
|
async function loadTicketDetail() {
|
|
const urlParams = new URLSearchParams(window.location.search);
|
|
const ticketId = urlParams.get('id');
|
|
|
|
if (!ticketId) {
|
|
showError('未提供单据 ID。');
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const { data: ticket, error } = await sbClient
|
|
.from('tickets')
|
|
.select('*')
|
|
.eq('id', ticketId)
|
|
.single();
|
|
|
|
if (error) throw error;
|
|
if (!ticket) {
|
|
showError('未找到该单据。');
|
|
return;
|
|
}
|
|
|
|
displayTicketDetail(ticket);
|
|
} catch (error) {
|
|
showError(error.message || '加载失败');
|
|
}
|
|
}
|
|
|
|
function displayTicketDetail(ticket) {
|
|
const el = document.getElementById('detailContent');
|
|
const processedLabel = ticket.processed ? '已处理' : '未处理';
|
|
const completionLabel = ticket.status ? '已办结' : '未办结';
|
|
const amount = Number(ticket.amount || 0).toLocaleString('zh-CN', {
|
|
style: 'currency',
|
|
currency: 'CNY'
|
|
});
|
|
|
|
el.classList.remove('feedback-card');
|
|
el.innerHTML = `
|
|
<div class="ticket-header">
|
|
<div>
|
|
<div class="section-kicker">Ticket Detail</div>
|
|
<h1 class="ticket-title">${ticket.ticket_number || '-'} / ${ticket.customer_name || '-'}</h1>
|
|
<p class="ticket-subtitle">单据全量信息、处理状态与打印操作在此统一展示。</p>
|
|
</div>
|
|
<div class="top-actions-group">
|
|
<span class="status-pill ${ticket.processed ? 'done' : 'pending'}">${processedLabel}</span>
|
|
<span class="status-pill ${ticket.status ? 'done' : 'pending'}">${completionLabel}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ticket-detail-grid">
|
|
${item('编号', ticket.ticket_number)}
|
|
${item('姓名', ticket.customer_name)}
|
|
${item('事由', ticket.reason)}
|
|
${item('处理结果', ticket.result)}
|
|
${item('金额', amount, 'money')}
|
|
${item('开具人', ticket.issuer)}
|
|
${item('创建时间', formatDate(ticket.created_at))}
|
|
${item('办结日期', formatDate(ticket.processed_at))}
|
|
${item('处理状态', `<span class="status-pill ${ticket.processed ? 'done' : 'pending'}">${processedLabel}</span>`, '', true)}
|
|
${item('办结状态', `<span class="status-pill ${ticket.status ? 'done' : 'pending'}">${completionLabel}</span>`, '', true)}
|
|
${item('备注', ticket.remarks || '无', '', false, true)}
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
function item(label, value, extraClass = '', isHTML = false, isWide = false) {
|
|
return `
|
|
<div class="detail-item${isWide ? ' wide' : ''}">
|
|
<span class="detail-label">${label}</span>
|
|
<div class="detail-value${extraClass ? ` ${extraClass}` : ''}">${isHTML ? value : (value || '无')}</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
function goPrint() {
|
|
window.open(`print.html?id=${new URLSearchParams(location.search).get('id')}`, '_blank');
|
|
}
|
|
|
|
function formatDate(dateString) {
|
|
if (!dateString) return '暂无';
|
|
return new Date(dateString).toLocaleString('zh-CN');
|
|
}
|
|
|
|
function showError(msg) {
|
|
const el = document.getElementById('detailContent');
|
|
el.classList.add('feedback-card');
|
|
el.innerHTML = `<div class="error-state">${msg}</div>`;
|
|
}
|
|
|
|
document.addEventListener('DOMContentLoaded', loadTicketDetail);
|