统一样式
This commit is contained in:
+106
-212
@@ -4,239 +4,133 @@
|
||||
<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>
|
||||
|
||||
<style>
|
||||
body {
|
||||
background: #f0f2f5;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto;
|
||||
}
|
||||
|
||||
.detail-container {
|
||||
max-width: 900px;
|
||||
margin: 60px auto;
|
||||
padding: 32px;
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 8px 24px rgba(0,0,0,0.08);
|
||||
}
|
||||
|
||||
.back-link {
|
||||
display: inline-block;
|
||||
margin-bottom: 20px;
|
||||
color: #4CAF50;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.detail-header {
|
||||
border-bottom: 2px solid #4CAF50;
|
||||
padding-bottom: 15px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.detail-title {
|
||||
font-size: 22px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 16px;
|
||||
color: #4CAF50;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.info-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.info-item {
|
||||
padding: 14px;
|
||||
background: #fafafa;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.info-label {
|
||||
font-size: 12px;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.info-value {
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.status {
|
||||
padding: 4px 10px;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.done {
|
||||
background: #e8f5e9;
|
||||
color: #2e7d32;
|
||||
}
|
||||
|
||||
.pending {
|
||||
background: #fff3e0;
|
||||
color: #ef6c00;
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
margin-top: 30px;
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 10px 20px;
|
||||
border-radius: 6px;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: #4CAF50;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: #6c757d;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.loading, .error-message {
|
||||
text-align: center;
|
||||
padding: 40px;
|
||||
}
|
||||
|
||||
.error-message {
|
||||
color: #c33;
|
||||
background: #fee;
|
||||
border-radius: 6px;
|
||||
}
|
||||
</style>
|
||||
</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 class="detail-container">
|
||||
<a href="./index.html" class="back-link">← 返回查询页面</a>
|
||||
<div id="detailContent" class="detail-panel feedback-card">
|
||||
正在加载单据详情...
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<div id="detailContent">
|
||||
<div class="loading">正在加载详情...</div>
|
||||
</div>
|
||||
</div>
|
||||
<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';
|
||||
<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;
|
||||
if (!window._sbClient) {
|
||||
window._sbClient = window.supabase.createClient(SUPABASE_URL, SUPABASE_ANON_KEY);
|
||||
}
|
||||
const sbClient = window._sbClient;
|
||||
|
||||
try {
|
||||
const { data: ticket, error } = await sbClient
|
||||
.from('tickets')
|
||||
.select('*')
|
||||
.eq('id', ticketId)
|
||||
.single();
|
||||
async function loadTicketDetail() {
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
const ticketId = urlParams.get('id');
|
||||
|
||||
if (error) throw error;
|
||||
|
||||
if (!ticket) {
|
||||
showError('未找到该单据');
|
||||
if (!ticketId) {
|
||||
showError('未提供单据 ID。');
|
||||
return;
|
||||
}
|
||||
|
||||
displayTicketDetail(ticket);
|
||||
try {
|
||||
const { data: ticket, error } = await sbClient
|
||||
.from('tickets')
|
||||
.select('*')
|
||||
.eq('id', ticketId)
|
||||
.single();
|
||||
|
||||
} catch (error) {
|
||||
showError(error.message);
|
||||
if (error) throw error;
|
||||
if (!ticket) {
|
||||
showError('未找到该单据。');
|
||||
return;
|
||||
}
|
||||
|
||||
displayTicketDetail(ticket);
|
||||
} catch (error) {
|
||||
showError(error.message || '加载失败');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function displayTicketDetail(ticket) {
|
||||
const el = document.getElementById('detailContent');
|
||||
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.innerHTML = `
|
||||
<div class="detail-header">
|
||||
<h1 class="detail-title">
|
||||
${ticket.ticket_number || ''} / ${ticket.customer_name || ''}
|
||||
</h1>
|
||||
</div>
|
||||
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="info-grid">
|
||||
${item('编号', ticket.ticket_number)}
|
||||
${item('姓名', ticket.customer_name)}
|
||||
${item('事由', ticket.reason)}
|
||||
${item('处理结果', ticket.result)}
|
||||
${item('金额', '¥' + Number(ticket.amount || 0).toFixed(2))}
|
||||
${item('开具人', ticket.issuer)}
|
||||
${item('日期', formatDate(ticket.created_at))}
|
||||
${item('状态', `
|
||||
<span class="status ${ticket.processed ? 'done' : 'pending'}">
|
||||
${ticket.status ? '已处理' : '待处理'}
|
||||
</span>
|
||||
`, true)}
|
||||
${item('办结否', `
|
||||
<span class="status ${ticket.status ? 'TRUE' : 'FALSE'}">
|
||||
${ticket.processed ? '已办结' : '未办结'}
|
||||
</span>
|
||||
`, true)}
|
||||
${item('办结日期', formatDate(ticket.processed_at) || '暂无')}
|
||||
${item('备注', ticket.remarks || '无')}
|
||||
</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>
|
||||
`;
|
||||
}
|
||||
|
||||
<div class="action-buttons">
|
||||
<button class="btn btn-primary" onclick="goPrint()">打印</button>
|
||||
<button class="btn btn-secondary" onclick="history.back()">返回</button>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
function goPrint() {
|
||||
window.open(`print.html?id=${new URLSearchParams(location.search).get('id')}`, '_blank');
|
||||
}
|
||||
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 item(label, value, isHTML = false) {
|
||||
return `
|
||||
<div class="info-item">
|
||||
<div class="info-label">${label}</div>
|
||||
<div class="info-value">${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 formatDate(dateString) {
|
||||
if (!dateString) return '暂无';
|
||||
return new Date(dateString).toLocaleString('zh-CN');
|
||||
}
|
||||
|
||||
function showError(msg) {
|
||||
document.getElementById('detailContent').innerHTML =
|
||||
`<div class="error-message">${msg}</div>`;
|
||||
}
|
||||
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>
|
||||
document.addEventListener('DOMContentLoaded', loadTicketDetail);
|
||||
</script>
|
||||
<script src="https://cdn.jsdmirror.cn/gh/bishshi/wechat-detect@main/wechat-detect.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user