20250819corp
This commit is contained in:
+220
-90
@@ -105,7 +105,7 @@
|
||||
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">查询日期</th>
|
||||
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">车牌号</th>
|
||||
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">手机号</th>
|
||||
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">查询结果</th>
|
||||
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">状态</th>
|
||||
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">登录部门</th>
|
||||
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">登录IP</th>
|
||||
</tr>
|
||||
@@ -119,12 +119,18 @@
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ query.phone }}</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm">
|
||||
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full
|
||||
{% if query.results_count > 0 %}
|
||||
{% if query.results_count == -1 %}
|
||||
bg-warning/10 text-warning
|
||||
{% elif query.results_count > 0 %}
|
||||
bg-success/10 text-success
|
||||
{% else %}
|
||||
bg-error/10 text-error
|
||||
{% endif %}">
|
||||
{{ query.results_count }} 条记录
|
||||
{% if query.results_count == -1 %}
|
||||
待查询
|
||||
{% else %}
|
||||
{{ query.results_count }} 条记录
|
||||
{% endif %}
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{{ query.department }}</td>
|
||||
@@ -219,59 +225,90 @@
|
||||
// 等待DOM加载完成
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// 获取DOM元素
|
||||
const addQueryBtn = document.getElementById('addQueryBtn');
|
||||
const addQueryModal = document.getElementById('addQueryModal');
|
||||
const closeAddModal = document.getElementById('closeAddModal');
|
||||
const cancelAddBtn = document.getElementById('cancelAddBtn');
|
||||
const addQueryForm = document.getElementById('addQueryForm');
|
||||
const addQueryLoading = document.getElementById('addQueryLoading');
|
||||
const detailModal = document.getElementById('detailModal');
|
||||
const closeModal = document.getElementById('closeModal');
|
||||
const loadingState = document.getElementById('loadingState');
|
||||
const noResultState = document.getElementById('noResultState');
|
||||
const resultList = document.getElementById('resultList');
|
||||
const carOwnerCards = document.getElementById('carOwnerCards');
|
||||
var addQueryBtn = document.getElementById('addQueryBtn');
|
||||
var addQueryModal = document.getElementById('addQueryModal');
|
||||
var closeAddModal = document.getElementById('closeAddModal');
|
||||
var cancelAddBtn = document.getElementById('cancelAddBtn');
|
||||
var addQueryForm = document.getElementById('addQueryForm');
|
||||
var addQueryLoading = document.getElementById('addQueryLoading');
|
||||
var detailModal = document.getElementById('detailModal');
|
||||
var closeModal = document.getElementById('closeModal');
|
||||
var loadingState = document.getElementById('loadingState');
|
||||
var noResultState = document.getElementById('noResultState');
|
||||
var resultList = document.getElementById('resultList');
|
||||
var carOwnerCards = document.getElementById('carOwnerCards');
|
||||
|
||||
// 为查询历史记录行添加点击事件
|
||||
document.querySelectorAll('tr[data-history-id]').forEach(row => {
|
||||
row.addEventListener('click', function() {
|
||||
const historyId = this.getAttribute('data-history-id');
|
||||
var rows = document.querySelectorAll('tr[data-history-id]');
|
||||
for (var i = 0; i < rows.length; i++) {
|
||||
rows[i].addEventListener('click', function() {
|
||||
var historyId = this.getAttribute('data-history-id');
|
||||
loadHistoryDetail(historyId);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// 增加查询按钮点击事件
|
||||
addQueryBtn.addEventListener('click', function() {
|
||||
addQueryModal.classList.remove('hidden');
|
||||
// 兼容classList API
|
||||
if (addQueryModal.classList) {
|
||||
addQueryModal.classList.remove('hidden');
|
||||
} else {
|
||||
addQueryModal.className = addQueryModal.className.replace('hidden', '');
|
||||
}
|
||||
addQueryForm.reset();
|
||||
});
|
||||
|
||||
// 关闭增加查询模态框
|
||||
closeAddModal.addEventListener('click', function() {
|
||||
addQueryModal.classList.add('hidden');
|
||||
// 兼容classList API
|
||||
if (addQueryModal.classList) {
|
||||
addQueryModal.classList.add('hidden');
|
||||
} else {
|
||||
addQueryModal.className += ' hidden';
|
||||
}
|
||||
});
|
||||
|
||||
// 取消增加查询
|
||||
cancelAddBtn.addEventListener('click', function() {
|
||||
addQueryModal.classList.add('hidden');
|
||||
// 兼容classList API
|
||||
if (addQueryModal.classList) {
|
||||
addQueryModal.classList.add('hidden');
|
||||
} else {
|
||||
addQueryModal.className += ' hidden';
|
||||
}
|
||||
});
|
||||
|
||||
// 点击增加查询模态框背景关闭
|
||||
addQueryModal.addEventListener('click', function(e) {
|
||||
if (e.target === addQueryModal) {
|
||||
addQueryModal.classList.add('hidden');
|
||||
// 兼容classList API
|
||||
if (addQueryModal.classList) {
|
||||
addQueryModal.classList.add('hidden');
|
||||
} else {
|
||||
addQueryModal.className += ' hidden';
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// 关闭详情模态框
|
||||
closeModal.addEventListener('click', function() {
|
||||
detailModal.classList.add('hidden');
|
||||
// 兼容classList API
|
||||
if (detailModal.classList) {
|
||||
detailModal.classList.add('hidden');
|
||||
} else {
|
||||
detailModal.className += ' hidden';
|
||||
}
|
||||
});
|
||||
|
||||
// 点击详情模态框背景关闭
|
||||
detailModal.addEventListener('click', function(e) {
|
||||
if (e.target === detailModal) {
|
||||
detailModal.classList.add('hidden');
|
||||
// 兼容classList API
|
||||
if (detailModal.classList) {
|
||||
detailModal.classList.add('hidden');
|
||||
} else {
|
||||
detailModal.className += ' hidden';
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
@@ -279,8 +316,8 @@
|
||||
addQueryForm.addEventListener('submit', function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
const plateNumber = document.getElementById('add_plate_number').value.trim();
|
||||
const phone = document.getElementById('add_phone').value.trim();
|
||||
var plateNumber = document.getElementById('add_plate_number').value.trim();
|
||||
var phone = document.getElementById('add_phone').value.trim();
|
||||
|
||||
if (!plateNumber && !phone) {
|
||||
alert('请至少输入车牌号或手机号');
|
||||
@@ -288,107 +325,179 @@
|
||||
}
|
||||
|
||||
// 显示加载状态
|
||||
addQueryForm.classList.add('hidden');
|
||||
addQueryLoading.classList.remove('hidden');
|
||||
// 兼容classList API
|
||||
if (addQueryForm.classList) {
|
||||
addQueryForm.classList.add('hidden');
|
||||
} else {
|
||||
addQueryForm.className += ' hidden';
|
||||
}
|
||||
if (addQueryLoading.classList) {
|
||||
addQueryLoading.classList.remove('hidden');
|
||||
} else {
|
||||
addQueryLoading.className = addQueryLoading.className.replace('hidden', '');
|
||||
}
|
||||
|
||||
// 构建表单数据
|
||||
const formData = new FormData();
|
||||
var formData = new FormData();
|
||||
formData.append('plate_number', plateNumber);
|
||||
formData.append('phone', phone);
|
||||
formData.append('is_add_query', 'true');
|
||||
|
||||
// 发送请求到查询路由
|
||||
fetch('/query', {
|
||||
method: 'POST',
|
||||
body: formData
|
||||
})
|
||||
.then(response => {
|
||||
.then(function(response) {
|
||||
if (!response.ok) {
|
||||
throw new Error('网络错误');
|
||||
}
|
||||
// 重新加载页面以显示新的查询记录
|
||||
window.location.reload();
|
||||
})
|
||||
.catch(error => {
|
||||
.catch(function(error) {
|
||||
console.error('Error submitting query:', error);
|
||||
alert('提交失败，请重试');
|
||||
// 恢复表单显示
|
||||
addQueryForm.classList.remove('hidden');
|
||||
addQueryLoading.classList.add('hidden');
|
||||
// 兼容classList API
|
||||
if (addQueryForm.classList) {
|
||||
addQueryForm.classList.remove('hidden');
|
||||
} else {
|
||||
addQueryForm.className = addQueryForm.className.replace('hidden', '');
|
||||
}
|
||||
if (addQueryLoading.classList) {
|
||||
addQueryLoading.classList.add('hidden');
|
||||
} else {
|
||||
addQueryLoading.className += ' hidden';
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// 加载查询历史详情
|
||||
function loadHistoryDetail(historyId) {
|
||||
// 显示模态框和加载状态
|
||||
detailModal.classList.remove('hidden');
|
||||
loadingState.classList.remove('hidden');
|
||||
noResultState.classList.add('hidden');
|
||||
resultList.classList.add('hidden');
|
||||
// 兼容classList API
|
||||
if (detailModal.classList) {
|
||||
detailModal.classList.remove('hidden');
|
||||
} else {
|
||||
detailModal.className = detailModal.className.replace('hidden', '');
|
||||
}
|
||||
if (loadingState.classList) {
|
||||
loadingState.classList.remove('hidden');
|
||||
} else {
|
||||
loadingState.className = loadingState.className.replace('hidden', '');
|
||||
}
|
||||
if (noResultState.classList) {
|
||||
noResultState.classList.add('hidden');
|
||||
} else {
|
||||
noResultState.className += ' hidden';
|
||||
}
|
||||
if (resultList.classList) {
|
||||
resultList.classList.add('hidden');
|
||||
} else {
|
||||
resultList.className += ' hidden';
|
||||
}
|
||||
carOwnerCards.innerHTML = '';
|
||||
|
||||
// 发送AJAX请求获取详情
|
||||
fetch(`/query_history_detail/${historyId}`)
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
fetch('/query_history_detail/' + historyId)
|
||||
.then(function(response) {
|
||||
return response.json();
|
||||
})
|
||||
.then(function(data) {
|
||||
// 隐藏加载状态
|
||||
loadingState.classList.add('hidden');
|
||||
// 兼容classList API
|
||||
if (loadingState.classList) {
|
||||
loadingState.classList.add('hidden');
|
||||
} else {
|
||||
loadingState.className += ' hidden';
|
||||
}
|
||||
|
||||
if (data.error) {
|
||||
// 显示错误信息
|
||||
noResultState.querySelector('p').textContent = data.error;
|
||||
noResultState.classList.remove('hidden');
|
||||
// 兼容classList API
|
||||
if (noResultState.classList) {
|
||||
noResultState.classList.remove('hidden');
|
||||
} else {
|
||||
noResultState.className = noResultState.className.replace('hidden', '');
|
||||
}
|
||||
} else if (data.car_owners && data.car_owners.length > 0) {
|
||||
// 显示结果列表
|
||||
resultList.classList.remove('hidden');
|
||||
// 兼容classList API
|
||||
if (resultList.classList) {
|
||||
resultList.classList.remove('hidden');
|
||||
} else {
|
||||
resultList.className = resultList.className.replace('hidden', '');
|
||||
}
|
||||
|
||||
// 添加车辆信息卡片
|
||||
data.car_owners.forEach(carOwner => {
|
||||
const card = document.createElement('div');
|
||||
for (var i = 0; i < data.car_owners.length; i++) {
|
||||
var carOwner = data.car_owners[i];
|
||||
var card = document.createElement('div');
|
||||
card.className = 'bg-white border border-gray-200 rounded-lg p-5 shadow-sm hover:shadow-md transition-shadow duration-200';
|
||||
card.innerHTML = `
|
||||
<h4 class="text-lg font-medium text-gray-800 mb-4 flex items-center">
|
||||
<i class="fa fa-car text-primary mr-2"></i>
|
||||
车辆信息
|
||||
</h4>
|
||||
<div class="space-y-3">
|
||||
<div class="flex justify-between items-center">
|
||||
<span class="text-gray-500">车牌号：</span>
|
||||
<span class="font-medium text-gray-800">${carOwner.plate_number}</span>
|
||||
</div>
|
||||
<div class="flex justify-between items-center">
|
||||
<span class="text-gray-500">手机号：</span>
|
||||
<span class="font-medium text-gray-800">${carOwner.phone}</span>
|
||||
</div>
|
||||
<div class="flex justify-between items-center">
|
||||
<span class="text-gray-500">车主姓名：</span>
|
||||
<span class="font-medium text-gray-800">${carOwner.name}</span>
|
||||
</div>
|
||||
<div class="flex justify-between items-center">
|
||||
<span class="text-gray-500">身份证号：</span>
|
||||
<span class="font-medium text-gray-800">${carOwner.id_card}</span>
|
||||
</div>
|
||||
<div class="flex justify-between items-center">
|
||||
<span class="text-gray-500">电子邮箱：</span>
|
||||
<span class="font-medium text-gray-800">${carOwner.email || '未提供'}</span>
|
||||
</div>
|
||||
<div class="flex justify-between items-center">
|
||||
<span class="text-gray-500">居住地址：</span>
|
||||
<span class="font-medium text-gray-800">${carOwner.address || '未提供'}</span>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
// 使用字符串拼接替代模板字符串
|
||||
var cardHtml = '';
|
||||
cardHtml += '<h4 class="text-lg font-medium text-gray-800 mb-4 flex items-center">';
|
||||
cardHtml += ' <i class="fa fa-car text-primary mr-2"></i>';
|
||||
cardHtml += ' 车辆信息';
|
||||
cardHtml += '</h4>';
|
||||
cardHtml += '<div class="space-y-3">';
|
||||
cardHtml += ' <div class="flex justify-between items-center">';
|
||||
cardHtml += ' <span class="text-gray-500">车牌号：</span>';
|
||||
cardHtml += ' <span class="font-medium text-gray-800">' + (carOwner.plate_number || '') + '</span>';
|
||||
cardHtml += ' </div>';
|
||||
cardHtml += ' <div class="flex justify-between items-center">';
|
||||
cardHtml += ' <span class="text-gray-500">手机号：</span>';
|
||||
cardHtml += ' <span class="font-medium text-gray-800">' + (carOwner.phone || '') + '</span>';
|
||||
cardHtml += ' </div>';
|
||||
cardHtml += ' <div class="flex justify-between items-center">';
|
||||
cardHtml += ' <span class="text-gray-500">车主姓名：</span>';
|
||||
cardHtml += ' <span class="font-medium text-gray-800">' + (carOwner.name || '') + '</span>';
|
||||
cardHtml += ' </div>';
|
||||
cardHtml += ' <div class="flex justify-between items-center">';
|
||||
cardHtml += ' <span class="text-gray-500">身份证号：</span>';
|
||||
cardHtml += ' <span class="font-medium text-gray-800">' + (carOwner.id_card || '') + '</span>';
|
||||
cardHtml += ' </div>';
|
||||
cardHtml += ' <div class="flex justify-between items-center">';
|
||||
cardHtml += ' <span class="text-gray-500">电子邮箱：</span>';
|
||||
cardHtml += ' <span class="font-medium text-gray-800">' + (carOwner.email || '未提供') + '</span>';
|
||||
cardHtml += ' </div>';
|
||||
cardHtml += ' <div class="flex justify-between items-center">';
|
||||
cardHtml += ' <span class="text-gray-500">居住地址：</span>';
|
||||
cardHtml += ' <span class="font-medium text-gray-800">' + (carOwner.address || '未提供') + '</span>';
|
||||
cardHtml += ' </div>';
|
||||
cardHtml += '</div>';
|
||||
|
||||
card.innerHTML = cardHtml;
|
||||
carOwnerCards.appendChild(card);
|
||||
});
|
||||
}
|
||||
} else {
|
||||
// 显示无结果状态
|
||||
noResultState.classList.remove('hidden');
|
||||
// 兼容classList API
|
||||
if (noResultState.classList) {
|
||||
noResultState.classList.remove('hidden');
|
||||
} else {
|
||||
noResultState.className = noResultState.className.replace('hidden', '');
|
||||
}
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
.catch(function(error) {
|
||||
// 隐藏加载状态，显示错误信息
|
||||
loadingState.classList.add('hidden');
|
||||
// 兼容classList API
|
||||
if (loadingState.classList) {
|
||||
loadingState.classList.add('hidden');
|
||||
} else {
|
||||
loadingState.className += ' hidden';
|
||||
}
|
||||
noResultState.querySelector('p').textContent = '加载详情时发生错误';
|
||||
noResultState.classList.remove('hidden');
|
||||
// 兼容classList API
|
||||
if (noResultState.classList) {
|
||||
noResultState.classList.remove('hidden');
|
||||
} else {
|
||||
noResultState.className = noResultState.className.replace('hidden', '');
|
||||
}
|
||||
console.error('Error loading history detail:', error);
|
||||
});
|
||||
}
|
||||
@@ -396,17 +505,19 @@
|
||||
// 响应式处理：当窗口大小改变时，重新绑定事件（因为表格可能会重新渲染）
|
||||
window.addEventListener('resize', function() {
|
||||
// 重新绑定事件到查询历史记录行
|
||||
document.querySelectorAll('tr[data-history-id]').forEach(row => {
|
||||
var rows = document.querySelectorAll('tr[data-history-id]');
|
||||
for (var i = 0; i < rows.length; i++) {
|
||||
var row = rows[i];
|
||||
// 先移除旧的事件监听器
|
||||
const newRow = row.cloneNode(true);
|
||||
var newRow = row.cloneNode(true);
|
||||
row.parentNode.replaceChild(newRow, row);
|
||||
|
||||
// 添加新的事件监听器
|
||||
newRow.addEventListener('click', function() {
|
||||
const historyId = this.getAttribute('data-history-id');
|
||||
var historyId = this.getAttribute('data-history-id');
|
||||
loadHistoryDetail(historyId);
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
@@ -416,14 +527,33 @@
|
||||
|
||||
<script>
|
||||
// 全局搜索变量
|
||||
let searchQuery = '';
|
||||
var searchQuery = '';
|
||||
</script>
|
||||
|
||||
<script>
|
||||
// ESC键关闭详情弹窗
|
||||
document.addEventListener('keydown', function(e) {
|
||||
if (e.key === 'Escape' && !document.getElementById('detailModal').classList.contains('hidden')) {
|
||||
document.getElementById('detailModal').classList.add('hidden');
|
||||
// 使用keyCode替代key，提高兼容性
|
||||
var key = e.key || e.keyCode;
|
||||
var isEscape = key === 'Escape' || key === 'Esc' || key === 27;
|
||||
|
||||
var detailModal = document.getElementById('detailModal');
|
||||
var isHidden = false;
|
||||
|
||||
// 兼容classList API
|
||||
if (detailModal.classList) {
|
||||
isHidden = detailModal.classList.contains('hidden');
|
||||
} else {
|
||||
isHidden = detailModal.className.indexOf('hidden') !== -1;
|
||||
}
|
||||
|
||||
if (isEscape && !isHidden) {
|
||||
// 兼容classList API
|
||||
if (detailModal.classList) {
|
||||
detailModal.classList.add('hidden');
|
||||
} else {
|
||||
detailModal.className += ' hidden';
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user