综述: 完善公告管理功能
- 在公告管理表格中新增"启用时间"列,显示公告的启用时间 - 在添加公告弹窗中增加启用时间选择器,支持设置公告启用时间 - 优化公告添加功能,增加启用时间验证和格式化显示 - 完善公告管理页面的用户体验,提供更详细的信息展示
This commit is contained in:
		
							parent
							
								
									dde8821285
								
							
						
					
					
						commit
						5aaa837e22
					
				|  | @ -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(); | ||||||
|         } |         } | ||||||
| 
 | 
 | ||||||
|  |  | ||||||
		Loading…
	
		Reference in New Issue