' +
'
' + ticket.id + '' +
'
' +
'
' + escapeHtml(ticket.ti
tle) + '
' +
'
负责人：' + escapeHtml(tic
ket.assignee) + ' · ' + formatDate(ticket.createdAt) + '' +
📡 BC-M06-001 · DEV-010桔子 · 工单管理界面·环节3·响应式布局+数据导出 20
'
' +
'
' +
'' + statusInf
o.label + '' +
'' +
'
' +
'
';
}).join('');
}
// === HTML转义（防XSS） ===
function escapeHtml(str) {
const div = document.createElement('div');
div.textContent = str;
return div.innerHTML;
}
// === 格式化日期 ===
function formatDate(dateStr) {
const d = new Date(dateStr);
return d.getFullYear() + '-' +
String(d.getMonth() + 1).padStart(2, '0') + '-' +
String(d.getDate()).padStart(2, '0') + ' ' +
String(d.getHours()).padStart(2, '0') + ':' +
String(d.getMinutes()).padStart(2, '0');
}
// === 切换工单状态 ===
function toggleStatus(id) {
const ticket = tickets.find(t => t.id === id);
if (!ticket) return;
ticket.status = STATUS_FLOW[ticket.status].next;
saveTickets();
renderAll();
}
📡 BC-M06-001 · DEV-010桔子 · 工单管理界面·环节3·响应式布局+数据导出 21
// === 删除工单 ===
function deleteTicket(id) {
if (!confirm('确认删除这条工单？')) return;
tickets = tickets.filter(t => t.id !== id);
saveTickets();
renderAll();
}
// === 新建工单弹窗 ===
function openModal() {
document.getElementById('modalOverlay').classList.add('sh
ow');
document.getElementById('inputTitle').value = '';
document.getElementById('inputAssignee').value = '';
document.getElementById('inputDetail').value = '';
document.getElementById('inputTitle').focus();
}
function closeModal() {
document.getElementById('modalOverlay').classList.remove
('show');
}
// === 提交新建工单 ===
function submitTicket() {
const title = document.getElementById('inputTitle').valu
e.trim();
const assignee = document.getElementById('inputAssigne
e').value.trim();
const detail = document.getElementById('inputDetail').val
ue.trim();
if (!title) {
alert('请填写工单标题');
return;
}
if (!assignee) {
alert('请填写负责人');
📡 BC-M06-001 · DEV-010桔子 · 工单管理界面·环节3·响应式布局+数据导出 22
return;
}
const newTicket = {
id: generateId(),
title: title,
assignee: assignee,
detail: detail,
status: 'pending',
createdAt: new Date().toISOString()
};
tickets.unshift(newTicket);
saveTickets();
closeModal();
renderAll();
}
// === 重置全部工单 ===
function resetTickets() {
if (!confirm('确认清空所有工单数据？此操作不可恢复！')) return;
tickets = [];
saveTickets();
renderAll();
}
// ============================================
// 环节3新增：导出功能
// ============================================
// === 导出下拉菜单控制 ===
function toggleExportMenu() {
const dropdown = document.getElementById('exportDropdow
n');
const clickAway = document.getElementById('clickAway');
const isOpen = dropdown.classList.contains('show');
if (isOpen) {
📡 BC-M06-001 · DEV-010桔子 · 工单管理界面·环节3·响应式布局+数据导出 23
closeExportMenu();
} else {
dropdown.classList.add('show');
clickAway.classList.add('show');
}
}
function closeExportMenu() {
document.getElementById('exportDropdown').classList.remov
e('show');
document.getElementById('clickAway').classList.remove('sh
ow');
}
// === 导出为 JSON 文件 ===
function exportJSON() {
closeExportMenu();
if (tickets.length === 0) {
alert('当前没有工单数据可导出');
return;
}
const data = JSON.stringify(tickets, null, 2);
const blob = new Blob([data], { type: 'application/json;c
harset=utf-8' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'HoloLake-Tickets-' + getDateStamp() + '.jso
n';
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url);
}
📡 BC-M06-001 · DEV-010桔子 · 工单管理界面·环节3·响应式布局+数据导出 24
// === 导出为 CSV 文件 ===
function exportCSV() {
closeExportMenu();
if (tickets.length === 0) {
alert('当前没有工单数据可导出');
return;
}
// CSV表头
const header = '编号,标题,负责人,状态,详情,创建时间';
// CSV内容行
const rows = tickets.map(t => {
const statusLabel = STATUS_FLOW[t.status] ? STATUS_FLOW
[t.status].label : t.status;
return [
t.id,
csvEscape(t.title),
csvEscape(t.assignee),
statusLabel,
csvEscape(t.detail || ''),
formatDate(t.createdAt)
].join(',');
});
const csv = '\uFEFF' + header + '\n' + rows.join('\n');
const blob = new Blob([csv], { type: 'text/csv;charset=ut
f-8' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'HoloLake-Tickets-' + getDateStamp() + '.cs
v';
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
📡 BC-M06-001 · DEV-010桔子 · 工单管理界面·环节3·响应式布局+数据导出 25
URL.revokeObjectURL(url);
}
// === CSV字段转义（处理逗号和引号） ===
function csvEscape(str) {
if (!str) return '';
if (str.includes(',') || str.includes('"') || str.include
s('\n')) {
return '"' + str.replace(/"/g, '""') + '"';
}
return str;
}
// === 生成日期戳（用于文件名） ===
function getDateStamp() {
const now = new Date();
return now.getFullYear() +
String(now.getMonth() + 1).padStart(2, '0') +
String(now.getDate()).padStart(2, '0') + '-' +
String(now.getHours()).padStart(2, '0') +
String(now.getMinutes()).padStart(2, '0');
}
// === 统一渲染 ===
function renderAll() {
renderStats();
renderTickets();
}
// === 筛选/排序变化时重新渲染 ===
document.getElementById('filterStatus').addEventListener('c
hange', renderTickets);
document.getElementById('sortBy').addEventListener('chang
e', renderTickets);
// === 弹窗点击遮罩关闭 ===
document.getElementById('modalOverlay').addEventListener('c
lick', function(e) {
📡 BC-M06-001 · DEV-010桔子 · 工单管理界面·环节3·响应式布局+数据导出 26
if (e.target === this) closeModal();
});
// === 页面加载完成 · 首次渲染 ===
renderAll();