Victor_Jay
fc57ed17d4
- Model/Repo/Service/Controller 全栈实现 - CRUD + ListActive（生效时间范围过滤） - 管理后台独立页面 /admin/announcements（列表+弹窗CRUD） - 前台首页 Hero 下方公告栏（info/success/warning/error 四色） - Moderator+ 权限可管理公告
219 lines
9.0 KiB
JavaScript
219 lines
9.0 KiB
JavaScript
/* ============================================================
|
|
Announcements JS — 公告管理页面脚本
|
|
============================================================ */
|
|
(function () {
|
|
'use strict';
|
|
|
|
var pageSize = 20;
|
|
var currentPage = 1;
|
|
var editingId = null;
|
|
|
|
// DOM refs
|
|
var tableBody = document.getElementById('announcementList');
|
|
var pagination = document.getElementById('pagination');
|
|
var btnNew = document.getElementById('btnNewAnnouncement');
|
|
var modalOverlay = document.getElementById('modalOverlay');
|
|
var modalTitle = document.getElementById('modalTitle');
|
|
var modalClose = document.getElementById('modalClose');
|
|
var modalCancel = document.getElementById('modalCancel');
|
|
var modalSave = document.getElementById('modalSave');
|
|
var form = document.getElementById('announcementForm');
|
|
var toast = document.getElementById('toast');
|
|
var announcementId = document.getElementById('announcementId');
|
|
var announcementTitle = document.getElementById('announcementTitle');
|
|
var announcementContent = document.getElementById('announcementContent');
|
|
var announcementType = document.getElementById('announcementType');
|
|
var announcementSort = document.getElementById('announcementSort');
|
|
var announcementStartAt = document.getElementById('announcementStartAt');
|
|
var announcementEndAt = document.getElementById('announcementEndAt');
|
|
var announcementIsActive = document.getElementById('announcementIsActive');
|
|
|
|
if (!tableBody) return;
|
|
|
|
// ---- Toast ----
|
|
function showToast(msg, isError) {
|
|
toast.textContent = msg;
|
|
toast.className = 'toast' + (isError ? ' toast-error' : ' toast-success');
|
|
toast.style.display = 'block';
|
|
setTimeout(function () { toast.style.display = 'none'; }, 2500);
|
|
}
|
|
|
|
// ---- Load list ----
|
|
function loadList(page) {
|
|
currentPage = page || 1;
|
|
fetch('/api/admin/announcements?page=' + currentPage + '&page_size=' + pageSize)
|
|
.then(function (r) { return r.json(); })
|
|
.then(function (resp) {
|
|
if (!resp.success) { showToast(resp.message || '加载失败', true); return; }
|
|
renderTable(resp.data.list);
|
|
renderPagination(resp.data.total);
|
|
})
|
|
.catch(function () { showToast('网络异常', true); });
|
|
}
|
|
|
|
function renderTable(list) {
|
|
if (!list || list.length === 0) {
|
|
tableBody.innerHTML = '<tr><td colspan="8" class="table-empty">暂无公告</td></tr>';
|
|
return;
|
|
}
|
|
var html = '';
|
|
list.forEach(function (a) {
|
|
var typeClass = 'badge-' + a.type;
|
|
var statusClass = a.is_active ? 'badge-active' : 'badge-inactive';
|
|
var timeStr = '';
|
|
if (a.start_at) timeStr += formatDate(a.start_at);
|
|
timeStr += ' ~ ';
|
|
if (a.end_at) timeStr += formatDate(a.end_at);
|
|
else timeStr += '永久';
|
|
html += '<tr>' +
|
|
'<td>' + a.id + '</td>' +
|
|
'<td>' + escapeHtml(a.title) + '</td>' +
|
|
'<td><span class="badge ' + typeClass + '">' + (typeLabel(a.type)) + '</span></td>' +
|
|
'<td><span class="badge ' + statusClass + '">' + (a.is_active ? '启用' : '禁用') + '</span></td>' +
|
|
'<td>' + timeStr + '</td>' +
|
|
'<td>' + a.sort + '</td>' +
|
|
'<td>' + formatDate(a.created_at) + '</td>' +
|
|
'<td><a href="#" class="btn-edit" data-id="' + a.id + '">编辑</a> <a href="#" class="btn-delete" data-id="' + a.id + '">删除</a></td>' +
|
|
'</tr>';
|
|
});
|
|
tableBody.innerHTML = html;
|
|
|
|
// Bind edit/delete
|
|
tableBody.querySelectorAll('.btn-edit').forEach(function (btn) {
|
|
btn.addEventListener('click', function (e) {
|
|
e.preventDefault();
|
|
var id = parseInt(this.getAttribute('data-id'));
|
|
var item = list.find(function (x) { return x.id === id; });
|
|
if (item) openModal(item);
|
|
});
|
|
});
|
|
tableBody.querySelectorAll('.btn-delete').forEach(function (btn) {
|
|
btn.addEventListener('click', function (e) {
|
|
e.preventDefault();
|
|
var id = parseInt(this.getAttribute('data-id'));
|
|
if (confirm('确定删除该公告？')) {
|
|
fetch('/api/admin/announcements/' + id, { method: 'DELETE' })
|
|
.then(function (r) { return r.json(); })
|
|
.then(function (resp) {
|
|
showToast(resp.message || '已删除', !resp.success);
|
|
if (resp.success) loadList(currentPage);
|
|
});
|
|
}
|
|
});
|
|
});
|
|
}
|
|
|
|
function renderPagination(total) {
|
|
var totalPages = Math.ceil(total / pageSize) || 1;
|
|
if (totalPages <= 1) { pagination.style.display = 'none'; return; }
|
|
var html = '';
|
|
for (var i = 1; i <= totalPages; i++) {
|
|
html += '<a href="#" class="page-item' + (i === currentPage ? ' active' : '') + '" data-page="' + i + '">' + i + '</a>';
|
|
}
|
|
pagination.innerHTML = html;
|
|
pagination.style.display = '';
|
|
pagination.querySelectorAll('.page-item').forEach(function (item) {
|
|
item.addEventListener('click', function (e) {
|
|
e.preventDefault();
|
|
loadList(parseInt(this.getAttribute('data-page')));
|
|
});
|
|
});
|
|
}
|
|
|
|
// ---- Modal ----
|
|
function openModal(item) {
|
|
if (item) {
|
|
editingId = item.id;
|
|
modalTitle.textContent = '编辑公告';
|
|
announcementId.value = item.id;
|
|
announcementTitle.value = item.title;
|
|
announcementContent.value = item.content;
|
|
announcementType.value = item.type;
|
|
announcementSort.value = item.sort;
|
|
announcementStartAt.value = item.start_at ? toDatetimeLocal(item.start_at) : '';
|
|
announcementEndAt.value = item.end_at ? toDatetimeLocal(item.end_at) : '';
|
|
announcementIsActive.checked = item.is_active;
|
|
} else {
|
|
editingId = null;
|
|
modalTitle.textContent = '新建公告';
|
|
form.reset();
|
|
announcementId.value = '';
|
|
announcementSort.value = '0';
|
|
announcementType.value = 'info';
|
|
announcementIsActive.checked = true;
|
|
}
|
|
modalOverlay.classList.add('active');
|
|
}
|
|
|
|
function closeModal() {
|
|
modalOverlay.classList.remove('active');
|
|
editingId = null;
|
|
}
|
|
|
|
btnNew.addEventListener('click', function () { openModal(null); });
|
|
modalClose.addEventListener('click', closeModal);
|
|
modalCancel.addEventListener('click', closeModal);
|
|
modalOverlay.addEventListener('click', function (e) { if (e.target === modalOverlay) closeModal(); });
|
|
|
|
modalSave.addEventListener('click', function () {
|
|
var data = {
|
|
title: announcementTitle.value.trim(),
|
|
content: announcementContent.value.trim(),
|
|
type: announcementType.value,
|
|
sort: parseInt(announcementSort.value) || 0,
|
|
start_at: announcementStartAt.value ? new Date(announcementStartAt.value).toISOString() : null,
|
|
end_at: announcementEndAt.value ? new Date(announcementEndAt.value).toISOString() : null,
|
|
is_active: announcementIsActive.checked,
|
|
};
|
|
if (!data.title) { showToast('请输入标题', true); return; }
|
|
if (!data.content) { showToast('请输入内容', true); return; }
|
|
|
|
var url = '/api/admin/announcements';
|
|
var method = 'POST';
|
|
if (editingId) {
|
|
url += '/' + editingId;
|
|
method = 'PUT';
|
|
}
|
|
fetch(url, {
|
|
method: method,
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(data),
|
|
})
|
|
.then(function (r) { return r.json(); })
|
|
.then(function (resp) {
|
|
showToast(resp.message || '保存成功', !resp.success);
|
|
if (resp.success) { closeModal(); loadList(currentPage); }
|
|
})
|
|
.catch(function () { showToast('网络异常', true); });
|
|
});
|
|
|
|
// ---- Helpers ----
|
|
function formatDate(s) {
|
|
if (!s) return '';
|
|
var d = new Date(s);
|
|
return d.getFullYear() + '-' + pad(d.getMonth() + 1) + '-' + pad(d.getDate()) + ' ' + pad(d.getHours()) + ':' + pad(d.getMinutes());
|
|
}
|
|
|
|
function toDatetimeLocal(s) {
|
|
if (!s) return '';
|
|
var d = new Date(s);
|
|
return d.getFullYear() + '-' + pad(d.getMonth() + 1) + '-' + pad(d.getDate()) + 'T' + pad(d.getHours()) + ':' + pad(d.getMinutes());
|
|
}
|
|
|
|
function pad(n) { return n < 10 ? '0' + n : '' + n; }
|
|
|
|
function escapeHtml(s) {
|
|
var div = document.createElement('div');
|
|
div.textContent = s;
|
|
return div.innerHTML;
|
|
}
|
|
|
|
function typeLabel(t) {
|
|
var map = { info: '信息', success: '成功', warning: '警告', error: '错误' };
|
|
return map[t] || t;
|
|
}
|
|
|
|
// ---- Init ----
|
|
loadList(1);
|
|
})();
|