137 lines
5.9 KiB
HTML
137 lines
5.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>单据详情</title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;600;700&family=Orbitron:wght@500;700&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="../css/tech-query.css">
|
|
<script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script>
|
|
</head>
|
|
<body>
|
|
<main class="detail-shell">
|
|
<div class="top-actions">
|
|
<a href="./index.html" class="tech-link-button secondary">返回查询页</a>
|
|
<div class="top-actions-group">
|
|
<button class="tech-button secondary" type="button" onclick="history.back()">返回上一页</button>
|
|
<button class="tech-button" type="button" onclick="goPrint()">打印单据</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="detailContent" class="detail-panel feedback-card">
|
|
正在加载单据详情...
|
|
</div>
|
|
</main>
|
|
|
|
<footer class="page-footer">
|
|
<p>© 2026 BI Intelligent Query Interface</p>
|
|
</footer>
|
|
|
|
<script>
|
|
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);
|
|
</script>
|
|
<script src="https://cdn.jsdmirror.cn/gh/bishshi/wechat-detect@main/wechat-detect.js"></script>
|
|
</body>
|
|
</html>
|