70 lines
4.1 KiB
JavaScript
70 lines
4.1 KiB
JavaScript
const UnclaimedPage = {
|
||
filters: {},
|
||
|
||
async render() { return '<div class="loading"><i class="fas fa-spinner"></i></div>'; },
|
||
|
||
async mount() {
|
||
document.getElementById('page-title').textContent = '待处ç<E2809E>†å·¥å<C2A5>?;
|
||
document.getElementById('page-actions').innerHTML = '';
|
||
|
||
const ct = document.getElementById('page-content');
|
||
ct.innerHTML = `
|
||
<div class="filter-bar">
|
||
<select id="u-type" onchange="UnclaimedPage.applyFilters()"><option value="">全部类型</option>${Object.entries(U.TYPE).map(([k,v])=>`<option value="${k}">${v}</option>`).join('')}</select>
|
||
<button class="btn btn-o btn-sm" onclick="UnclaimedPage.applyFilters()"><i class="fas fa-filter"></i></button>
|
||
<button class="btn btn-o btn-sm" onclick="UnclaimedPage.reset()"><i class="fas fa-undo"></i></button>
|
||
</div>
|
||
<div id="unclaimed-list"></div>
|
||
`;
|
||
await this.load();
|
||
},
|
||
|
||
async load() {
|
||
const list = document.getElementById('unclaimed-list');
|
||
U.loading(list);
|
||
try {
|
||
const params = new URLSearchParams();
|
||
if (this.filters.type) params.set('type', this.filters.type);
|
||
const qs = params.toString();
|
||
const tickets = await API.get('/tickets/unclaimed' + (qs ? '?' + qs : ''));
|
||
this.renderList(list, tickets);
|
||
} catch (e) { list.innerHTML = `<div class="alert alert-e">${e.message}</div>`; }
|
||
},
|
||
|
||
renderList(ct, tickets) {
|
||
ct.innerHTML = tickets.length === 0
|
||
? `<div class="empty"><i class="fas fa-check-circle"></i><p>所有工å<C2A5>•å·²å¤„ç<E2809E>†å®Œæ¯•</p></div>`
|
||
: `<div class="card"><div class="card-h"><span>${tickets.length} 个待处ç<E2809E>†å·¥å<C2A5>•</span><span class="ts tm">按状æ€<C3A6>优先级排åº<C3A5></span></div><div class="table-wrap"><table><thead><tr>
|
||
<th>#</th><th>类型</th><th>æ ‡é¢˜</th><th>æ<><C3A6>交è€?/th><th>对象/详情</th><th>状æ€?/th><th>优先çº?/th><th>时间</th><th>æ“<C3A6>作</th>
|
||
</tr></thead><tbody>${tickets.map(t => `
|
||
<tr>
|
||
<td>${t.id}</td><td>${U.badge(t.type,'type')}</td>
|
||
<td><a href="#" onclick="App.navigate('ticket',${t.id});return false" style="color:var(--p);text-decoration:none;font-weight:600">${U.esc(t.title)}</a></td>
|
||
<td>${U.esc(t.reporter_game_name)}<br><span class="tm ts">UID:${U.esc(t.reporter_game_uid)}</span></td>
|
||
<td>${t.type==='report'?`${U.esc(t.target_game_name||'?')}<br><span class="tm ts">${U.esc(t.reason||'')}</span>`
|
||
:(t.type==='appeal'||t.type==='result_appeal')?`<span class="tm ts">${U.esc(t.reason||'')}</span>`
|
||
:`<span class="tm ts">${U.esc((t.description||'').substring(0,30))}</span>`}</td>
|
||
<td>${U.badge(t.status,'status')}</td>
|
||
<td>${U.badge(t.priority,'priority')}</td>
|
||
<td class="ts">${U.date(t.created_at)}</td>
|
||
<td>
|
||
<button class="btn btn-s btn-sm" onclick="UnclaimedPage.quickClaim(${t.id})"><i class="fas fa-hand-paper"></i> 接å<C2A5>•</button>
|
||
<button class="btn btn-o btn-sm" onclick="App.navigate('ticket',${t.id})"><i class="fas fa-eye"></i></button>
|
||
</td>
|
||
</tr>`).join('')}</tbody></table></div></div>`;
|
||
},
|
||
|
||
async quickClaim(id) {
|
||
U.modal('接å<EFBFBD>•è®¤é¢†', `<form id="qc-form"><div class="form-group"><label>åˆ<C3A5>始回å¤<C3A5> (玩家å<C2B6>¯è§<C3A8>)</label><textarea id="qc-reply" rows="3" placeholder="接å<C2A5>•æ—¶å<C2B6>‘é€<C3A9>给玩家的回å¤?.."></textarea></div><div class="form-group"><label>处ç<E2809E>†å¤‡æ³¨ (内部)</label><textarea id="qc-note" rows="2" placeholder="内部备注，玩家ä¸<C3A4>å<EFBFBD>¯è§<C3A8>"></textarea></div><div class="modal-f"><button type="button" class="btn btn-o" data-action="App:closeModal">å<>–消</button><button type="submit" class="btn btn-s"><i class="fas fa-hand-paper"></i> 确认接å<C2A5>•</button></div></form>`);
|
||
document.getElementById('qc-form').onsubmit = async e => { e.preventDefault();
|
||
try { await API.post(`/tickets/${id}/claim`, {claim_note: document.getElementById('qc-note').value, initial_reply: document.getElementById('qc-reply').value}); App.closeModal(); this.load(); } catch(ex){alert(ex.message);}
|
||
};
|
||
},
|
||
|
||
applyFilters() {
|
||
this.filters.type = document.getElementById('u-type').value;
|
||
this.load();
|
||
},
|
||
reset() { this.filters = {}; this.load(); }
|
||
};
|