综述: 完善公告管理功能

- 在公告管理表格中新增"启用时间"列,显示公告的启用时间
- 在添加公告弹窗中增加启用时间选择器,支持设置公告启用时间
- 优化公告添加功能,增加启用时间验证和格式化显示
- 完善公告管理页面的用户体验,提供更详细的信息展示
This commit is contained in:
linbin 2025-09-25 01:26:09 +08:00
parent dde8821285
commit 5aaa837e22
1 changed files with 36 additions and 1 deletions

View File

@ -503,6 +503,7 @@
<th>序号</th> <th>序号</th>
<th>公告通知</th> <th>公告通知</th>
<th>位置</th> <th>位置</th>
<th>启用时间</th>
<th>状态</th> <th>状态</th>
<th>操作</th> <th>操作</th>
</tr> </tr>
@ -512,6 +513,7 @@
<td>1</td> <td>1</td>
<td>2312312</td> <td>2312312</td>
<td>菜市场详情页</td> <td>菜市场详情页</td>
<td>2024-03-20 09:00</td>
<td><span class="status-badge status-enabled">已启用</span></td> <td><span class="status-badge status-enabled">已启用</span></td>
<td> <td>
<button class="btn btn-primary" style="margin-right: 5px;">编辑</button> <button class="btn btn-primary" style="margin-right: 5px;">编辑</button>
@ -522,6 +524,7 @@
<td>2</td> <td>2</td>
<td>春节菜市场关闭您</td> <td>春节菜市场关闭您</td>
<td>菜市场详情页</td> <td>菜市场详情页</td>
<td>2024-03-25 08:00</td>
<td><span class="status-badge status-enabled">已启用</span></td> <td><span class="status-badge status-enabled">已启用</span></td>
<td> <td>
<button class="btn btn-primary" style="margin-right: 5px;">编辑</button> <button class="btn btn-primary" style="margin-right: 5px;">编辑</button>
@ -579,6 +582,19 @@
</div> </div>
</div> </div>
<div class="modal-form-group">
<label>
<span class="required">*</span>启用时间
</label>
<input
type="datetime-local"
class="form-control"
id="enable-time"
style="width: 100%;"
required
/>
</div>
<div class="modal-form-group"> <div class="modal-form-group">
<label> <label>
<span class="required">*</span>应用 <span class="required">*</span>应用
@ -612,6 +628,10 @@
document.getElementById('announcement-form').reset(); document.getElementById('announcement-form').reset();
document.getElementById('selected-app').textContent = '用户'; document.getElementById('selected-app').textContent = '用户';
updateDropdownSelection('用户'); updateDropdownSelection('用户');
// 设置默认启用时间为当前时间
const now = new Date();
const offsetTime = new Date(now.getTime() - now.getTimezoneOffset() * 60000);
document.getElementById('enable-time').value = offsetTime.toISOString().slice(0, 16);
} }
function closeModal() { function closeModal() {
@ -639,14 +659,29 @@
const content = document.getElementById('announcement-content').value.trim(); const content = document.getElementById('announcement-content').value.trim();
const isEnabled = document.getElementById('status-switch').checked; const isEnabled = document.getElementById('status-switch').checked;
const app = document.getElementById('selected-app').textContent; const app = document.getElementById('selected-app').textContent;
const enableTime = document.getElementById('enable-time').value;
if (!content) { if (!content) {
alert('请输入公告内容'); alert('请输入公告内容');
return; return;
} }
if (!enableTime) {
alert('请选择启用时间');
return;
}
// 格式化显示启用时间
const formattedTime = new Date(enableTime).toLocaleString('zh-CN', {
year: 'numeric',
month: '2-digit',
day: '2-digit',
hour: '2-digit',
minute: '2-digit'
});
// 模拟添加成功 // 模拟添加成功
alert(`公告添加成功!\n内容${content}\n状态${isEnabled ? '启用' : '禁用'}\n应用${app}`); alert(`公告添加成功!\n内容${content}\n状态${isEnabled ? '启用' : '禁用'}\n应用${app}\n启用时间${formattedTime}`);
closeModal(); closeModal();
} }