+131
-199
@@ -4,17 +4,22 @@
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>单据详情</title>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Zhi+Mang+Xing&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="../css/style.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: 40px auto;
|
||||
padding: 30px;
|
||||
background: white;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||
border-radius: 8px;
|
||||
margin: 60px auto;
|
||||
padding: 32px;
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 8px 24px rgba(0,0,0,0.08);
|
||||
}
|
||||
|
||||
.back-link {
|
||||
@@ -24,10 +29,6 @@
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.back-link:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.detail-header {
|
||||
border-bottom: 2px solid #4CAF50;
|
||||
padding-bottom: 15px;
|
||||
@@ -35,73 +36,52 @@
|
||||
}
|
||||
|
||||
.detail-title {
|
||||
font-size: 24px;
|
||||
color: #333;
|
||||
font-size: 22px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.detail-section {
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 18px;
|
||||
font-size: 16px;
|
||||
color: #4CAF50;
|
||||
margin-bottom: 15px;
|
||||
border-left: 3px solid #4CAF50;
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
.info-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.info-item {
|
||||
padding: 15px;
|
||||
background: #f9f9f9;
|
||||
border-radius: 4px;
|
||||
padding: 14px;
|
||||
background: #fafafa;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.info-label {
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
margin-bottom: 5px;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.info-value {
|
||||
font-size: 16px;
|
||||
color: #333;
|
||||
font-weight: bold;
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.status-badge {
|
||||
display: inline-block;
|
||||
padding: 5px 15px;
|
||||
border-radius: 20px;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
.status {
|
||||
padding: 4px 10px;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.status-pending {
|
||||
background-color: #fff3cd;
|
||||
color: #856404;
|
||||
.done {
|
||||
background: #e8f5e9;
|
||||
color: #2e7d32;
|
||||
}
|
||||
|
||||
.status-processing {
|
||||
background-color: #cce5ff;
|
||||
color: #004085;
|
||||
}
|
||||
|
||||
.status-completed {
|
||||
background-color: #d4edda;
|
||||
color: #155724;
|
||||
}
|
||||
|
||||
.status-cancelled {
|
||||
background-color: #f8d7da;
|
||||
color: #721c24;
|
||||
.pending {
|
||||
background: #fff3e0;
|
||||
color: #ef6c00;
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
@@ -112,193 +92,145 @@
|
||||
|
||||
.btn {
|
||||
padding: 10px 20px;
|
||||
border-radius: 6px;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background-color: #4CAF50;
|
||||
background: #4CAF50;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background-color: #45a049;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background-color: #6c757d;
|
||||
background: #6c757d;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background-color: #5a6268;
|
||||
}
|
||||
|
||||
.loading {
|
||||
.loading, .error-message {
|
||||
text-align: center;
|
||||
padding: 40px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.error-message {
|
||||
background-color: #fee;
|
||||
color: #c33;
|
||||
padding: 15px;
|
||||
border-radius: 4px;
|
||||
margin: 20px 0;
|
||||
background: #fee;
|
||||
border-radius: 6px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="detail-container">
|
||||
<a href="index.html" class="back-link">← 返回查询页面</a>
|
||||
|
||||
<div id="detailContent">
|
||||
<div class="loading">正在加载详情...</div>
|
||||
</div>
|
||||
<div class="detail-container">
|
||||
<!-- 修复返回路径 -->
|
||||
<a href="ticket.html" class="back-link">← 返回查询页面</a>
|
||||
|
||||
<div id="detailContent">
|
||||
<div class="loading">正在加载详情...</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// 初始化 Supabase 客户端
|
||||
const SUPABASE_URL = 'YOUR_SUPABASE_URL';
|
||||
const SUPABASE_ANON_KEY = 'YOUR_SUPABASE_ANON_KEY';
|
||||
|
||||
const supabase = window.supabase.createClient(SUPABASE_URL, SUPABASE_ANON_KEY);
|
||||
<script>
|
||||
const SUPABASE_URL = 'https://chixssrphfgxvqqigkzo.supabase.co';
|
||||
const SUPABASE_ANON_KEY = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImNoaXhzc3JwaGZneHZxcWlna3pvIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NzQ2OTE0OTEsImV4cCI6MjA5MDI2NzQ5MX0.Az_Ew2J2zdOMcSV0UNAjBS-LPqGpqhsaN4IyZ5R7iqU';
|
||||
|
||||
async function loadTicketDetail() {
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
const ticketId = urlParams.get('id');
|
||||
// 防重复初始化（关键修复）
|
||||
if (!window._sbClient) {
|
||||
window._sbClient = window.supabase.createClient(
|
||||
SUPABASE_URL,
|
||||
SUPABASE_ANON_KEY
|
||||
);
|
||||
}
|
||||
const sbClient = window._sbClient;
|
||||
|
||||
if (!ticketId) {
|
||||
document.getElementById('detailContent').innerHTML = `
|
||||
<div class="error-message">
|
||||
错误：未提供单据 ID
|
||||
</div>
|
||||
`;
|
||||
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;
|
||||
}
|
||||
|
||||
try {
|
||||
const { data: ticket, error } = await supabase
|
||||
.from('tickets')
|
||||
.select('*')
|
||||
.eq('id', ticketId)
|
||||
.single();
|
||||
displayTicketDetail(ticket);
|
||||
|
||||
if (error) throw error;
|
||||
|
||||
if (!ticket) {
|
||||
document.getElementById('detailContent').innerHTML = `
|
||||
<div class="error-message">
|
||||
未找到该单据信息
|
||||
</div>
|
||||
`;
|
||||
return;
|
||||
}
|
||||
|
||||
displayTicketDetail(ticket);
|
||||
|
||||
} catch (error) {
|
||||
console.error('加载详情失败:', error);
|
||||
document.getElementById('detailContent').innerHTML = `
|
||||
<div class="error-message">
|
||||
加载失败：${error.message}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
} catch (error) {
|
||||
showError(error.message);
|
||||
}
|
||||
}
|
||||
|
||||
function displayTicketDetail(ticket) {
|
||||
const contentDiv = document.getElementById('detailContent');
|
||||
function displayTicketDetail(ticket) {
|
||||
const el = document.getElementById('detailContent');
|
||||
|
||||
contentDiv.innerHTML = `
|
||||
<div class="detail-header">
|
||||
<h1 class="detail-title">单据详情 - ${ticket.ticket_number || ''} / ${ticket.customer_name || ''}</h1>
|
||||
</div>
|
||||
el.innerHTML = `
|
||||
<div class="detail-header">
|
||||
<h1 class="detail-title">
|
||||
${ticket.ticket_number || ''} / ${ticket.customer_name || ''}
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
<div class="detail-section">
|
||||
<h3 class="section-title">基本信息</h3>
|
||||
<div class="info-grid">
|
||||
<div class="info-item">
|
||||
<div class="info-label">编号</div>
|
||||
<div class="info-value">${ticket.ticket_number || '无'}</div>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<div class="info-label">姓名</div>
|
||||
<div class="info-value">${ticket.customer_name || '未填写'}</div>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<div class="info-label">事由</div>
|
||||
<div class="info-value">${ticket.reason || '无'}</div>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<div class="info-label">处理结果</div>
|
||||
<div class="info-value">${ticket.result || '无'}</div>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<div class="info-label">金额</div>
|
||||
<div class="info-value">¥${ticket.amount?.toFixed(2) || '0.00'}</div>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<div class="info-label">开具人</div>
|
||||
<div class="info-value">${ticket.issuer || '未填写'}</div>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<div class="info-label">日期</div>
|
||||
<div class="info-value">${formatDate(ticket.created_at || ticket.date)}</div>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<div class="info-label">处理状态</div>
|
||||
<div class="info-value">${ticket.processed ? '已处理' : '未处理'}</div>
|
||||
</div>
|
||||
</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.processed ? '已处理' : '未处理'}
|
||||
</span>
|
||||
`, true)}
|
||||
</div>
|
||||
|
||||
<div class="action-buttons">
|
||||
<button class="btn btn-primary" onclick="window.print()">打印单据</button>
|
||||
<button class="btn btn-secondary" onclick="history.back()">返回列表</button>
|
||||
</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 getTicketTypeName(type) {
|
||||
const types = {
|
||||
'invoice': '发票',
|
||||
'receipt': '收据',
|
||||
'order': '订单',
|
||||
'other': '其他'
|
||||
};
|
||||
return types[type] || type;
|
||||
}
|
||||
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 getStatusName(status) {
|
||||
const statusMap = {
|
||||
'pending': '待处理',
|
||||
'processing': '处理中',
|
||||
'completed': '已完成',
|
||||
'cancelled': '已取消'
|
||||
};
|
||||
return statusMap[status] || status;
|
||||
}
|
||||
function formatDate(dateString) {
|
||||
if (!dateString) return '暂无';
|
||||
return new Date(dateString).toLocaleString('zh-CN');
|
||||
}
|
||||
|
||||
function formatDate(dateString) {
|
||||
if (!dateString) return '暂无';
|
||||
const date = new Date(dateString);
|
||||
return date.toLocaleDateString('zh-CN', {
|
||||
year: 'numeric',
|
||||
month: '2-digit',
|
||||
day: '2-digit',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
second: '2-digit'
|
||||
});
|
||||
}
|
||||
function showError(msg) {
|
||||
document.getElementById('detailContent').innerHTML =
|
||||
`<div class="error-message">${msg}</div>`;
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', loadTicketDetail);
|
||||
</script>
|
||||
|
||||
// 页面加载时获取详情
|
||||
document.addEventListener('DOMContentLoaded', loadTicketDetail);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
+195
-146
@@ -4,90 +4,129 @@
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>单据查询</title>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Zhi+Mang+Xing&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="../css/style.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;
|
||||
}
|
||||
|
||||
.ticket-container {
|
||||
max-width: 800px;
|
||||
margin: 40px auto;
|
||||
padding: 30px;
|
||||
background: white;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||
border-radius: 8px;
|
||||
max-width: 900px;
|
||||
margin: 60px auto;
|
||||
padding: 32px;
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 8px 24px rgba(0,0,0,0.08);
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.search-form {
|
||||
margin-bottom: 30px;
|
||||
margin-bottom: 24px;
|
||||
padding: 20px;
|
||||
background: #f5f5f5;
|
||||
border-radius: 8px;
|
||||
background: #fafafa;
|
||||
border-radius: 10px;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
|
||||
gap: 16px;
|
||||
align-items: end;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 15px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
font-size: 13px;
|
||||
color: #666;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.form-control {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
padding: 10px 12px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.form-control:focus {
|
||||
border-color: #4CAF50;
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 2px rgba(76,175,80,0.15);
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 10px 20px;
|
||||
background-color: #4CAF50;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
height: 40px;
|
||||
background: linear-gradient(135deg, #4CAF50, #43a047);
|
||||
border-radius: 6px;
|
||||
color: #fff;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background-color: #45a049;
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 12px rgba(76,175,80,0.3);
|
||||
}
|
||||
|
||||
.result-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.result-table th,
|
||||
.result-table td {
|
||||
padding: 12px;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid #ddd;
|
||||
margin-top: 16px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.result-table th {
|
||||
background-color: #4CAF50;
|
||||
color: white;
|
||||
background: #fafafa;
|
||||
text-align: left;
|
||||
padding: 12px;
|
||||
font-weight: 600;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
.result-table td {
|
||||
padding: 12px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.result-table tr:hover {
|
||||
background-color: #f5f5f5;
|
||||
background: #fafafa;
|
||||
}
|
||||
|
||||
.status {
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.status.done {
|
||||
background: #e8f5e9;
|
||||
color: #2e7d32;
|
||||
}
|
||||
|
||||
.status.pending {
|
||||
background: #fff3e0;
|
||||
color: #ef6c00;
|
||||
}
|
||||
|
||||
.no-result {
|
||||
text-align: center;
|
||||
padding: 40px;
|
||||
padding: 60px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.loading {
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
padding: 30px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
@@ -95,15 +134,15 @@
|
||||
background-color: #fee;
|
||||
color: #c33;
|
||||
padding: 10px;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 15px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.back-link {
|
||||
display: inline-block;
|
||||
margin-bottom: 20px;
|
||||
font-size: 14px;
|
||||
color: #4CAF50;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.back-link:hover {
|
||||
@@ -111,130 +150,140 @@
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="ticket-container">
|
||||
<a href="../index.html" class="back-link">← 返回首页</a>
|
||||
|
||||
<h1 style="text-align: center; margin-bottom: 30px;">单据查询</h1>
|
||||
<div class="ticket-container">
|
||||
<a href="../index.html" class="back-link">← 返回首页</a>
|
||||
|
||||
<div class="search-form">
|
||||
<div class="form-group">
|
||||
<label for="searchTerm">编号 / 姓名</label>
|
||||
<input type="text" id="searchTerm" class="form-control" placeholder="请输入单据编号或姓名">
|
||||
</div>
|
||||
<h1>单据查询</h1>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="dateFrom">开始日期</label>
|
||||
<input type="date" id="dateFrom" class="form-control">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="dateTo">结束日期</label>
|
||||
<input type="date" id="dateTo" class="form-control">
|
||||
</div>
|
||||
|
||||
<button onclick="searchTickets()" class="btn">查询</button>
|
||||
<div class="search-form">
|
||||
<div class="form-group">
|
||||
<label>编号 / 姓名</label>
|
||||
<input type="text" id="searchTerm" class="form-control">
|
||||
</div>
|
||||
|
||||
<div id="searchResults">
|
||||
<!-- 查询结果将在这里显示 -->
|
||||
<div class="form-group">
|
||||
<label>开始日期</label>
|
||||
<input type="date" id="dateFrom" class="form-control">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>结束日期</label>
|
||||
<input type="date" id="dateTo" class="form-control">
|
||||
</div>
|
||||
|
||||
<button id="searchBtn" class="btn">查询</button>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// 1. 只声明一次变量
|
||||
const SUPABASE_URL = 'https://chixssrphfgxvqqigkzo.supabase.co';
|
||||
const SUPABASE_ANON_KEY = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImNoaXhzc3JwaGZneHZxcWlna3pvIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NzQ2OTE0OTEsImV4cCI6MjA5MDI2NzQ5MX0.Az_Ew2J2zdOMcSV0UNAjBS-LPqGpqhsaN4IyZ5R7iqU';
|
||||
|
||||
// 2. 初始化客户端 (确保只在这里初始化一次)
|
||||
const supabase = window.supabase.createClient(SUPABASE_URL, SUPABASE_ANON_KEY);
|
||||
<div id="searchResults"></div>
|
||||
</div>
|
||||
|
||||
// 3. 定义查询函数
|
||||
async function searchTickets() {
|
||||
const searchTerm = document.getElementById('searchTerm').value.trim();
|
||||
const dateFrom = document.getElementById('dateFrom').value;
|
||||
const dateTo = document.getElementById('dateTo').value;
|
||||
<script>
|
||||
const SUPABASE_URL = 'https://chixssrphfgxvqqigkzo.supabase.co';
|
||||
const SUPABASE_ANON_KEY = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImNoaXhzc3JwaGZneHZxcWlna3pvIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NzQ2OTE0OTEsImV4cCI6MjA5MDI2NzQ5MX0.Az_Ew2J2zdOMcSV0UNAjBS-LPqGpqhsaN4IyZ5R7iqU';
|
||||
|
||||
const resultsDiv = document.getElementById('searchResults');
|
||||
resultsDiv.innerHTML = '<div class="loading">正在查询...</div>';
|
||||
// 防止重复初始化
|
||||
if (!window._sbClient) {
|
||||
window._sbClient = window.supabase.createClient(
|
||||
SUPABASE_URL,
|
||||
SUPABASE_ANON_KEY
|
||||
);
|
||||
}
|
||||
const sbClient = window._sbClient;
|
||||
|
||||
try {
|
||||
let query = supabase.from('tickets').select('*');
|
||||
async function searchTickets() {
|
||||
const searchTerm = document.getElementById('searchTerm').value.trim();
|
||||
const dateFrom = document.getElementById('dateFrom').value;
|
||||
const dateTo = document.getElementById('dateTo').value;
|
||||
|
||||
if (searchTerm) {
|
||||
const escapedTerm = searchTerm.replace(/%/g, '\\%').replace(/_/g, '\\_');
|
||||
query = query.or(`ticket_number.ilike.%${escapedTerm}%,customer_name.ilike.%${escapedTerm}%`);
|
||||
}
|
||||
const resultsDiv = document.getElementById('searchResults');
|
||||
resultsDiv.innerHTML = '<div class="loading">正在查询...</div>';
|
||||
|
||||
if (dateFrom) query = query.gte('created_at', dateFrom);
|
||||
if (dateTo) query = query.lte('created_at', dateTo);
|
||||
try {
|
||||
let query = sbClient.from('tickets').select('*');
|
||||
|
||||
const { data, error } = await query;
|
||||
if (error) throw error;
|
||||
if (searchTerm) {
|
||||
const escapedTerm = searchTerm
|
||||
.replace(/%/g, '\\%')
|
||||
.replace(/_/g, '\\_');
|
||||
|
||||
displayResults(data);
|
||||
|
||||
} catch (error) {
|
||||
console.error('查询错误:', error);
|
||||
resultsDiv.innerHTML = `<div class="error-message">查询失败：${error.message}</div>`;
|
||||
query = query.or(
|
||||
`ticket_number.ilike.%${escapedTerm}%,customer_name.ilike.%${escapedTerm}%`
|
||||
);
|
||||
}
|
||||
|
||||
if (dateFrom) query = query.gte('created_at', dateFrom);
|
||||
if (dateTo) query = query.lte('created_at', dateTo);
|
||||
|
||||
const { data, error } = await query;
|
||||
if (error) throw error;
|
||||
|
||||
displayResults(data);
|
||||
} catch (error) {
|
||||
resultsDiv.innerHTML = `<div class="error-message">查询失败：${error.message}</div>`;
|
||||
}
|
||||
}
|
||||
|
||||
function displayResults(tickets) {
|
||||
const resultsDiv = document.getElementById('searchResults');
|
||||
|
||||
if (!tickets || tickets.length === 0) {
|
||||
resultsDiv.innerHTML = '<div class="no-result">未找到符合条件的单据</div>';
|
||||
return;
|
||||
}
|
||||
|
||||
// 4. 定义结果显示函数
|
||||
function displayResults(tickets) {
|
||||
const resultsDiv = document.getElementById('searchResults');
|
||||
if (!tickets || tickets.length === 0) {
|
||||
resultsDiv.innerHTML = '<div class="no-result">未找到符合条件的单据</div>';
|
||||
return;
|
||||
}
|
||||
|
||||
let html = `
|
||||
<table class="result-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>编号</th><th>姓名</th><th>事由</th><th>金额</th><th>日期</th><th>状态</th><th>操作</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
`;
|
||||
|
||||
tickets.forEach(ticket => {
|
||||
html += `
|
||||
let html = `
|
||||
<table class="result-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<td>${ticket.ticket_number || ''}</td>
|
||||
<td>${ticket.customer_name || ''}</td>
|
||||
<td>${ticket.reason || ''}</td>
|
||||
<td>¥${Number(ticket.amount || 0).toFixed(2)}</td>
|
||||
<td>${formatDate(ticket.created_at)}</td>
|
||||
<td>${ticket.processed ? '已处理' : '未处理'}</td>
|
||||
<td><button class="btn" onclick="viewDetail('${ticket.id}')">详情</button></td>
|
||||
<th>编号</th><th>姓名</th><th>事由</th><th>金额</th><th>日期</th><th>状态</th><th>操作</th>
|
||||
</tr>
|
||||
`;
|
||||
});
|
||||
</thead>
|
||||
<tbody>
|
||||
`;
|
||||
|
||||
html += '</tbody></table>';
|
||||
resultsDiv.innerHTML = html;
|
||||
}
|
||||
|
||||
function formatDate(dateString) {
|
||||
if (!dateString) return '';
|
||||
return new Date(dateString).toLocaleDateString('zh-CN');
|
||||
}
|
||||
|
||||
function viewDetail(ticketId) {
|
||||
window.location.href = `detail.html?id=${ticketId}`;
|
||||
}
|
||||
|
||||
// 5. 绑定回车键
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const input = document.getElementById('searchTerm');
|
||||
if (input) {
|
||||
input.addEventListener('keypress', function(e) {
|
||||
if (e.key === 'Enter') searchTickets();
|
||||
});
|
||||
}
|
||||
tickets.forEach(ticket => {
|
||||
html += `
|
||||
<tr>
|
||||
<td>${ticket.ticket_number || ''}</td>
|
||||
<td>${ticket.customer_name || ''}</td>
|
||||
<td>${ticket.reason || ''}</td>
|
||||
<td>¥${Number(ticket.amount || 0).toFixed(2)}</td>
|
||||
<td>${formatDate(ticket.created_at)}</td>
|
||||
<td>
|
||||
<span class="status ${ticket.processed ? 'done' : 'pending'}">
|
||||
${ticket.processed ? '已处理' : '未处理'}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
<button class="btn" onclick="viewDetail('${ticket.id}')">详情</button>
|
||||
</td>
|
||||
</tr>
|
||||
`;
|
||||
});
|
||||
</script>
|
||||
|
||||
html += '</tbody></table>';
|
||||
resultsDiv.innerHTML = html;
|
||||
}
|
||||
|
||||
function formatDate(dateString) {
|
||||
if (!dateString) return '';
|
||||
return new Date(dateString).toLocaleDateString('zh-CN');
|
||||
}
|
||||
|
||||
function viewDetail(id) {
|
||||
window.location.href = `detail.html?id=${id}`;
|
||||
}
|
||||
|
||||
// 事件绑定（替代 onclick）
|
||||
document.getElementById('searchBtn').addEventListener('click', searchTickets);
|
||||
|
||||
document.getElementById('searchTerm').addEventListener('keypress', function(e) {
|
||||
if (e.key === 'Enter') searchTickets();
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,157 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>打印单据</title>
|
||||
|
||||
<style>
|
||||
body {
|
||||
font-family: Arial, "Microsoft YaHei";
|
||||
background: white;
|
||||
}
|
||||
|
||||
/* ===== A4 容器 ===== */
|
||||
.page {
|
||||
width: 210mm;
|
||||
min-height: 297mm;
|
||||
margin: auto;
|
||||
padding: 20mm;
|
||||
position: relative;
|
||||
background: white;
|
||||
}
|
||||
|
||||
/* ===== 水印 ===== */
|
||||
.watermark {
|
||||
position: absolute;
|
||||
top: 40%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%) rotate(-30deg);
|
||||
font-size: 60px;
|
||||
color: rgba(0,0,0,0.08);
|
||||
white-space: nowrap;
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
/* ===== 标题 ===== */
|
||||
.title {
|
||||
text-align: center;
|
||||
font-size: 22px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
/* ===== 信息表格 ===== */
|
||||
.table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin-top: 10px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.table td {
|
||||
border: 1px solid #ddd;
|
||||
padding: 10px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.label {
|
||||
width: 25%;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
/* ===== 页脚 ===== */
|
||||
.footer {
|
||||
position: absolute;
|
||||
bottom: 20mm;
|
||||
left: 20mm;
|
||||
right: 20mm;
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
/* ===== 打印优化 ===== */
|
||||
@media print {
|
||||
.no-print {
|
||||
display: none;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.page {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="page" id="content">
|
||||
|
||||
<!-- 水印 -->
|
||||
<div class="watermark">BISS · OFFICIAL</div>
|
||||
|
||||
<div class="title">单据详情</div>
|
||||
|
||||
<table class="table" id="table">
|
||||
<tr><td class="label">编号</td><td id="ticket_number"></td></tr>
|
||||
<tr><td class="label">姓名</td><td id="customer_name"></td></tr>
|
||||
<tr><td class="label">事由</td><td id="reason"></td></tr>
|
||||
<tr><td class="label">金额</td><td id="amount"></td></tr>
|
||||
<tr><td class="label">开具人</td><td id="issuer"></td></tr>
|
||||
<tr><td class="label">日期</td><td id="created_at"></td></tr>
|
||||
</table>
|
||||
|
||||
<!-- 页脚 -->
|
||||
<div class="footer">
|
||||
<div>打印时间：<span id="print_time"></span></div>
|
||||
<div>系统自动生成</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script>
|
||||
|
||||
<script>
|
||||
const SUPABASE_URL = 'https://chixssrphfgxvqqigkzo.supabase.co';
|
||||
const SUPABASE_ANON_KEY = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImNoaXhzc3JwaGZneHZxcWlna3pvIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NzQ2OTE0OTEsImV4cCI6MjA5MDI2NzQ5MX0.Az_Ew2J2zdOMcSV0UNAjBS-LPqGpqhsaN4IyZ5R7iqU';
|
||||
|
||||
const sb = window.supabase.createClient(SUPABASE_URL, SUPABASE_ANON_KEY);
|
||||
|
||||
function formatDate(d){
|
||||
return new Date(d).toLocaleString('zh-CN');
|
||||
}
|
||||
|
||||
async function load() {
|
||||
const id = new URLSearchParams(location.search).get('id');
|
||||
|
||||
const { data } = await sb.from('tickets').select('*').eq('id', id).single();
|
||||
|
||||
if (!data) return;
|
||||
|
||||
document.getElementById('ticket_number').innerText = data.ticket_number || '';
|
||||
document.getElementById('customer_name').innerText = data.customer_name || '';
|
||||
document.getElementById('reason').innerText = data.reason || '';
|
||||
document.getElementById('amount').innerText = '¥' + (data.amount || 0).toFixed(2);
|
||||
document.getElementById('issuer').innerText = data.issuer || '';
|
||||
document.getElementById('created_at').innerText = formatDate(data.created_at);
|
||||
|
||||
// 打印时间（核心你要的）
|
||||
document.getElementById('print_time').innerText = new Date().toLocaleString('zh-CN');
|
||||
|
||||
// 自动打印（稳定延迟）
|
||||
setTimeout(() => {
|
||||
window.print();
|
||||
}, 300);
|
||||
}
|
||||
|
||||
load();
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user