458 lines
20 KiB
HTML
458 lines
20 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>系统公告管理 - OA系统</title>
|
||
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
|
||
<!-- 统一布局样式 -->
|
||
<link rel="stylesheet" href="unified-layout.css">
|
||
<style>
|
||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||
body {
|
||
font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
|
||
background: #f0f2f5;
|
||
overflow: hidden;
|
||
}
|
||
.layout-container {
|
||
height: 100vh;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
.navbar {
|
||
height: 50px;
|
||
background: #fff;
|
||
border-bottom: 1px solid #e6e6e6;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 0 20px;
|
||
box-shadow: 0 1px 4px rgba(0,21,41,.08);
|
||
}
|
||
.navbar-left {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
.logo {
|
||
font-size: 20px;
|
||
font-weight: bold;
|
||
color: #409EFF;
|
||
cursor: pointer;
|
||
}
|
||
.nav-menu { display: flex; gap: 8px; margin-left: 16px; }
|
||
.nav-item { padding: 8px 16px; cursor: pointer; border-radius: 4px; color: #303133; }
|
||
.nav-item:hover { background: #ecf5ff; color: #409EFF; }
|
||
.nav-item.active { background: #409EFF; color: #fff; }
|
||
.navbar-right {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 20px;
|
||
}
|
||
.main-container {
|
||
flex: 1;
|
||
display: flex;
|
||
overflow: hidden;
|
||
}
|
||
.app-main {
|
||
flex: 1;
|
||
overflow: hidden;
|
||
display: flex;
|
||
flex-direction: column;
|
||
background: #f0f2f5;
|
||
}
|
||
.sidebar {
|
||
width: 210px;
|
||
background: #fff;
|
||
border-right: 1px solid #e6e6e6;
|
||
overflow-y: auto;
|
||
}
|
||
.menu-item { padding: 12px 24px; cursor: pointer; }
|
||
.menu-item.active {
|
||
background: #409EFF;
|
||
color: #fff;
|
||
}
|
||
.content {
|
||
flex: 1;
|
||
padding: 20px;
|
||
overflow-y: auto;
|
||
background: #fff;
|
||
margin: 10px;
|
||
border-radius: 4px;
|
||
}
|
||
.page-header {
|
||
margin-bottom: 24px;
|
||
padding-bottom: 16px;
|
||
border-bottom: 1px solid #f0f0f0;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
.page-title {
|
||
font-size: 20px;
|
||
font-weight: 500;
|
||
color: #303133;
|
||
}
|
||
.search-form {
|
||
background: #fafafa;
|
||
padding: 16px;
|
||
border-radius: 4px;
|
||
margin-bottom: 16px;
|
||
}
|
||
.form-row {
|
||
display: flex;
|
||
gap: 16px;
|
||
margin-bottom: 12px;
|
||
}
|
||
.form-item {
|
||
flex: 1;
|
||
}
|
||
.form-input, .form-select {
|
||
width: 100%;
|
||
padding: 6px 12px;
|
||
border: 1px solid #d9d9d9;
|
||
border-radius: 4px;
|
||
}
|
||
.btn {
|
||
padding: 6px 16px;
|
||
border: none;
|
||
border-radius: 4px;
|
||
cursor: pointer;
|
||
}
|
||
.btn-primary {
|
||
background: #409EFF;
|
||
color: white;
|
||
}
|
||
.btn-default {
|
||
background: white;
|
||
color: #333;
|
||
border: 1px solid #d9d9d9;
|
||
}
|
||
.btn-danger {
|
||
background: #ff4d4f;
|
||
color: white;
|
||
}
|
||
table {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
}
|
||
th, td {
|
||
padding: 12px;
|
||
text-align: left;
|
||
border-bottom: 1px solid #f0f0f0;
|
||
}
|
||
th {
|
||
background: #fafafa;
|
||
font-weight: 500;
|
||
}
|
||
.status-badge {
|
||
padding: 2px 8px;
|
||
border-radius: 4px;
|
||
font-size: 12px;
|
||
}
|
||
.status-published {
|
||
background: #f6ffed;
|
||
color: #52c41a;
|
||
}
|
||
.status-draft {
|
||
background: #fff7e6;
|
||
color: #d46b08;
|
||
}
|
||
.action-link {
|
||
color: #409EFF;
|
||
cursor: pointer;
|
||
margin-right: 12px;
|
||
}
|
||
.action-link.danger {
|
||
color: #ff4d4f;
|
||
}
|
||
</style>
|
||
<!-- Vue.js -->
|
||
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
|
||
<!-- Element UI JS -->
|
||
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
|
||
</head>
|
||
<body>
|
||
<div id="app">
|
||
<div class="layout-container">
|
||
<div class="navbar">
|
||
<div class="navbar-left">
|
||
<div class="logo" onclick="window.location.href='dashboard.html'">OA系统</div>
|
||
<div class="nav-menu">
|
||
<div class="nav-item" onclick="window.location.href='dashboard.html'">首页</div>
|
||
<div class="nav-item" onclick="window.location.href='project-initiation.html'">商机管理</div>
|
||
<div class="nav-item" onclick="window.location.href='project-start.html'">过程管理</div>
|
||
<div class="nav-item" onclick="window.location.href='finance-invoice.html'">财务管理</div>
|
||
<div class="nav-item" onclick="window.location.href='report-project-detail.html'">报表管理</div>
|
||
<div class="nav-item active">系统设置</div>
|
||
</div>
|
||
</div>
|
||
<div class="navbar-right">
|
||
<span style="color: #303133;">张三</span><span style="color: #909399; margin: 0 8px;">|</span>
|
||
<a href="profile.html" style="color: #409EFF; text-decoration: none;">个人中心</a>
|
||
<span>|</span>
|
||
<a href="login.html" style="color: #409EFF; text-decoration: none;">退出</a>
|
||
</div>
|
||
</div>
|
||
<div class="main-container">
|
||
<div class="sidebar">
|
||
<div class="menu-item" onclick="window.location.href='settings-org.html'">组织架构</div>
|
||
<div class="menu-item" onclick="window.location.href='settings-user.html'">账号管理</div>
|
||
<div class="menu-item" onclick="window.location.href='settings-role.html'">权限配置</div>
|
||
<div class="menu-item" onclick="window.location.href='settings-workflow.html'">流程配置</div>
|
||
<div class="menu-item active">系统公告</div>
|
||
<div class="menu-item" onclick="window.location.href='settings-dict.html'">字典管理</div>
|
||
<div class="menu-item" onclick="window.location.href='settings-param.html'">参数配置</div>
|
||
<div class="menu-item" onclick="window.location.href='settings-log.html'">操作日志</div>
|
||
</div>
|
||
<div class="content">
|
||
<div class="page-header">
|
||
<div class="page-title">系统公告管理</div>
|
||
<button class="btn btn-primary" onclick="addNotice()">+ 发布公告</button>
|
||
</div>
|
||
|
||
<div class="search-form">
|
||
<div class="form-row">
|
||
<div class="form-item">
|
||
<input type="text" class="form-input" placeholder="搜索公告标题" id="searchTitle">
|
||
</div>
|
||
<div class="form-item">
|
||
<select class="form-select" id="filterCategory">
|
||
<option value="">全部分类</option>
|
||
<option value="系统">系统公告</option>
|
||
<option value="业务">业务通知</option>
|
||
<option value="安全">安全提醒</option>
|
||
<option value="其他">其他</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-item">
|
||
<select class="form-select" id="filterStatus">
|
||
<option value="">全部状态</option>
|
||
<option value="published">已发布</option>
|
||
<option value="draft">草稿</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-item" style="display: flex; gap: 8px;">
|
||
<button class="btn btn-primary" onclick="searchNotices()">查询</button>
|
||
<button class="btn btn-default" onclick="resetSearch()">重置</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>公告标题</th>
|
||
<th>分类</th>
|
||
<th>发布人</th>
|
||
<th>发布时间</th>
|
||
<th>状态</th>
|
||
<th>阅读量</th>
|
||
<th>操作</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>系统维护通知</td>
|
||
<td>系统公告</td>
|
||
<td>系统管理员</td>
|
||
<td>2025-01-20 10:00</td>
|
||
<td><span class="status-badge status-published">已发布</span></td>
|
||
<td>156</td>
|
||
<td>
|
||
<span class="action-link" onclick="viewNotice('1')">查看</span>
|
||
<span class="action-link" onclick="editNotice('1')">编辑</span>
|
||
<span class="action-link danger" onclick="deleteNotice('1')">删除</span>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td>年终安全检查公告</td>
|
||
<td>安全提醒</td>
|
||
<td>行政部</td>
|
||
<td>2025-01-18 14:30</td>
|
||
<td><span class="status-badge status-published">已发布</span></td>
|
||
<td>89</td>
|
||
<td>
|
||
<span class="action-link" onclick="viewNotice('2')">查看</span>
|
||
<span class="action-link" onclick="editNotice('2')">编辑</span>
|
||
<span class="action-link danger" onclick="deleteNotice('2')">删除</span>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td>新功能上线通知</td>
|
||
<td>系统公告</td>
|
||
<td>系统管理员</td>
|
||
<td>2025-01-19 09:00</td>
|
||
<td><span class="status-badge status-published">已发布</span></td>
|
||
<td>234</td>
|
||
<td>
|
||
<span class="action-link" onclick="viewNotice('3')">查看</span>
|
||
<span class="action-link" onclick="editNotice('3')">编辑</span>
|
||
<span class="action-link danger" onclick="deleteNotice('3')">删除</span>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td>项目流程优化说明</td>
|
||
<td>业务通知</td>
|
||
<td>经营管理部</td>
|
||
<td>-</td>
|
||
<td><span class="status-badge status-draft">草稿</span></td>
|
||
<td>0</td>
|
||
<td>
|
||
<span class="action-link" onclick="viewNotice('4')">查看</span>
|
||
<span class="action-link" onclick="editNotice('4')">编辑</span>
|
||
<span class="action-link" onclick="publishNotice('4')">发布</span>
|
||
<span class="action-link danger" onclick="deleteNotice('4')">删除</span>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<script src="common.js"></script>
|
||
<script>
|
||
function addNotice() {
|
||
const content = `
|
||
<form style="padding: 10px 0;">
|
||
<div style="margin-bottom: 16px;">
|
||
<label style="display: block; margin-bottom: 8px; color: #606266;">
|
||
<span style="color: #ff4d4f;">*</span>公告标题
|
||
</label>
|
||
<input type="text" id="notice-title" class="form-input" placeholder="请输入公告标题" required>
|
||
</div>
|
||
<div style="margin-bottom: 16px;">
|
||
<label style="display: block; margin-bottom: 8px; color: #606266;">
|
||
<span style="color: #ff4d4f;">*</span>公告分类
|
||
</label>
|
||
<select id="notice-category" class="form-select">
|
||
<option value="系统">系统公告</option>
|
||
<option value="业务">业务通知</option>
|
||
<option value="安全">安全提醒</option>
|
||
<option value="其他">其他</option>
|
||
</select>
|
||
</div>
|
||
<div style="margin-bottom: 16px;">
|
||
<label style="display: block; margin-bottom: 8px; color: #606266;">
|
||
<span style="color: #ff4d4f;">*</span>公告内容
|
||
</label>
|
||
<textarea id="notice-content" class="form-input" rows="6" placeholder="请输入公告内容" required style="resize: vertical;"></textarea>
|
||
</div>
|
||
<div style="margin-bottom: 16px;">
|
||
<label style="display: block; margin-bottom: 8px; color: #606266;">推送设置</label>
|
||
<div style="display: flex; gap: 16px;">
|
||
<label style="display: flex; align-items: center; font-size: 14px; color: #606266;">
|
||
<input type="checkbox" id="push-message" checked style="margin-right: 8px;">
|
||
发送消息通知
|
||
</label>
|
||
<label style="display: flex; align-items: center; font-size: 14px; color: #606266;">
|
||
<input type="checkbox" id="push-email" style="margin-right: 8px;">
|
||
发送邮件通知
|
||
</label>
|
||
</div>
|
||
</div>
|
||
</form>
|
||
`;
|
||
|
||
CommonUtils.createModal('发布公告', content, () => {
|
||
const title = document.getElementById('notice-title').value.trim();
|
||
const content = document.getElementById('notice-content').value.trim();
|
||
|
||
if (!title || !content) {
|
||
CommonUtils.showMessage('请填写完整信息', 'error');
|
||
return false;
|
||
}
|
||
|
||
const category = document.getElementById('notice-category').value;
|
||
const pushMessage = document.getElementById('push-message').checked;
|
||
const pushEmail = document.getElementById('push-email').checked;
|
||
|
||
CommonUtils.showMessage('公告已发布', 'success');
|
||
return true;
|
||
});
|
||
}
|
||
|
||
function viewNotice(id) {
|
||
CommonUtils.showMessage('查看公告：' + id);
|
||
// 实际应用中应该跳转到公告详情页面
|
||
}
|
||
|
||
function editNotice(id) {
|
||
const content = `
|
||
<form style="padding: 10px 0;">
|
||
<div style="margin-bottom: 16px;">
|
||
<label style="display: block; margin-bottom: 8px; color: #606266;">
|
||
<span style="color: #ff4d4f;">*</span>公告标题
|
||
</label>
|
||
<input type="text" id="edit-notice-title" class="form-input" value="系统维护通知" required>
|
||
</div>
|
||
<div style="margin-bottom: 16px;">
|
||
<label style="display: block; margin-bottom: 8px; color: #606266;">
|
||
<span style="color: #ff4d4f;">*</span>公告分类
|
||
</label>
|
||
<select id="edit-notice-category" class="form-select">
|
||
<option value="系统" selected>系统公告</option>
|
||
<option value="业务">业务通知</option>
|
||
<option value="安全">安全提醒</option>
|
||
<option value="其他">其他</option>
|
||
</select>
|
||
</div>
|
||
<div style="margin-bottom: 16px;">
|
||
<label style="display: block; margin-bottom: 8px; color: #606266;">
|
||
<span style="color: #ff4d4f;">*</span>公告内容
|
||
</label>
|
||
<textarea id="edit-notice-content" class="form-input" rows="6" required style="resize: vertical;">系统将于2025年1月25日进行维护，预计维护时间2小时...</textarea>
|
||
</div>
|
||
</form>
|
||
`;
|
||
|
||
CommonUtils.createModal('编辑公告', content, () => {
|
||
const title = document.getElementById('edit-notice-title').value.trim();
|
||
const content = document.getElementById('edit-notice-content').value.trim();
|
||
|
||
if (!title || !content) {
|
||
CommonUtils.showMessage('请填写完整信息', 'error');
|
||
return false;
|
||
}
|
||
|
||
CommonUtils.showMessage('公告已更新', 'success');
|
||
return true;
|
||
});
|
||
}
|
||
|
||
function publishNotice(id) {
|
||
CommonUtils.confirm('确认发布该公告？', () => {
|
||
CommonUtils.showMessage('公告已发布', 'success');
|
||
return true;
|
||
});
|
||
}
|
||
|
||
function deleteNotice(id) {
|
||
CommonUtils.confirm('确认删除该公告？删除后无法恢复。', () => {
|
||
CommonUtils.showMessage('公告已删除', 'success');
|
||
return true;
|
||
});
|
||
}
|
||
|
||
function searchNotices() {
|
||
const title = document.getElementById('searchTitle').value;
|
||
const category = document.getElementById('filterCategory').value;
|
||
const status = document.getElementById('filterStatus').value;
|
||
CommonUtils.showMessage('查询中...');
|
||
}
|
||
|
||
function resetSearch() {
|
||
document.getElementById('searchTitle').value = '';
|
||
document.getElementById('filterCategory').value = '';
|
||
document.getElementById('filterStatus').value = '';
|
||
CommonUtils.showMessage('已重置');
|
||
}
|
||
</script>
|
||
<script src="unified-layout.js"></script>
|
||
<script>
|
||
initUnifiedLayout('settings');
|
||
</script>
|
||
</body>
|
||
</html>
|
||
|