190 lines
10 KiB
HTML
190 lines
10 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; }
|
|
.content { flex:1; padding:20px; overflow-y:auto; }
|
|
.card { background:#fff; border:1px solid #e6e6e6; border-radius:4px; box-shadow:0 1px 3px rgba(0,0,0,0.04); padding:20px; margin-bottom:16px; }
|
|
.search-bar { display:flex; gap:10px; align-items:center; margin-bottom:12px; }
|
|
.search-input { flex:1; height:38px; border:1px solid #dcdfe6; border-radius:4px; padding:0 12px; }
|
|
.btn { padding:8px 14px; border:none; border-radius:4px; cursor:pointer; }
|
|
.btn-primary { background:#409EFF; color:#fff; }
|
|
.btn-default { background:#fff; color:#303133; border:1px solid #dcdfe6; }
|
|
.filters { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:12px; }
|
|
.form-select, .form-input { height:36px; padding:0 10px; border:1px solid #dcdfe6; border-radius:4px; min-width:150px; }
|
|
.result-item { padding:12px; border-bottom:1px solid #f0f0f0; }
|
|
.result-title { font-size:16px; font-weight:500; color:#303133; display:flex; justify-content:space-between; }
|
|
.result-meta { font-size:12px; color:#909399; margin-top:6px; }
|
|
.tag { display:inline-block; padding:2px 8px; border-radius:10px; background:#ecf5ff; color:#409EFF; font-size:12px; margin-right:6px; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="app">
|
|
<div class="layout-container">
|
|
<div class="navbar">
|
|
<div class="navbar-left">
|
|
<div class="logo" onclick="goHome()">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 style="color:#909399;">|</span>
|
|
<a href="login.html" style="color:#409EFF; text-decoration:none;">退出</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="content">
|
|
<div class="card">
|
|
<div class="search-bar">
|
|
<input id="kw" class="search-input" placeholder="搜索项目/合同/发票/流程单号/客户...">
|
|
<button class="btn btn-primary" onclick="doSearch()">搜索</button>
|
|
<button class="btn btn-default" onclick="resetSearch()">重置</button>
|
|
</div>
|
|
<div class="filters">
|
|
<select id="filter-type" class="form-select">
|
|
<option value="">类型</option>
|
|
<option value="项目">项目</option>
|
|
<option value="合同">合同</option>
|
|
<option value="发票">发票</option>
|
|
<option value="请款">请款</option>
|
|
<option value="审批">审批</option>
|
|
</select>
|
|
<select id="filter-status" class="form-select">
|
|
<option value="">状态</option>
|
|
<option value="进行中">进行中</option>
|
|
<option value="已完成">已完成</option>
|
|
<option value="待审批">待审批</option>
|
|
</select>
|
|
<input type="date" id="filter-start" class="form-input">
|
|
<input type="date" id="filter-end" class="form-input">
|
|
<select id="filter-owner" class="form-select">
|
|
<option value="">负责人</option>
|
|
<option value="张三">张三</option>
|
|
<option value="李四">李四</option>
|
|
<option value="王五">王五</option>
|
|
</select>
|
|
<select id="filter-dept" class="form-select">
|
|
<option value="">部门</option>
|
|
<option value="经营管理部">经营管理部</option>
|
|
<option value="财务部">财务部</option>
|
|
<option value="技术部">技术部</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<div class="result-item" style="font-weight:500;color:#303133;">搜索结果</div>
|
|
<div id="result-list"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script src="common.js"></script>
|
|
<script src="unified-layout.js"></script>
|
|
<script>
|
|
const data = [
|
|
{ id:'P-25-1', type:'项目', title:'XX工程项目', meta:'项目编号 25-1 | 负责人 张三', status:'进行中', link:'project-detail.html' },
|
|
{ id:'HT-001', type:'合同', title:'XX工程合同', meta:'合同金额 1200万 | 客户 A公司', status:'已完成', link:'contract-detail.html' },
|
|
{ id:'FP-003', type:'发票', title:'发票开具 25-3', meta:'金额 56万 | 申请人 李四', status:'待审批', link:'invoice-detail.html' },
|
|
{ id:'SP-009', type:'审批', title:'立项审批 25-1', meta:'节点 部门审核 | 提交人 张三', status:'待审批', link:'approval-detail.html' }
|
|
];
|
|
|
|
function doSearch() {
|
|
const kw = document.getElementById('kw').value.trim();
|
|
const type = document.getElementById('filter-type').value;
|
|
const status = document.getElementById('filter-status').value;
|
|
const start = document.getElementById('filter-start').value;
|
|
const end = document.getElementById('filter-end').value;
|
|
const owner = document.getElementById('filter-owner').value;
|
|
const dept = document.getElementById('filter-dept').value;
|
|
const list = data.filter(item => {
|
|
if (type && item.type !== type) return false;
|
|
if (status && item.status !== status) return false;
|
|
if (kw && !(item.title.includes(kw) || item.meta.includes(kw) || item.id.includes(kw))) return false;
|
|
if (owner && !item.meta.includes(owner)) return false;
|
|
if (dept && !item.meta.includes(dept)) return false;
|
|
// 日期过滤示意
|
|
if (start && end && new Date(start) > new Date(end)) {
|
|
CommonUtils.showMessage('开始日期不能晚于结束日期', 'error');
|
|
return false;
|
|
}
|
|
return true;
|
|
});
|
|
render(list);
|
|
}
|
|
|
|
function resetSearch() {
|
|
document.getElementById('kw').value = '';
|
|
document.getElementById('filter-type').value = '';
|
|
document.getElementById('filter-status').value = '';
|
|
document.getElementById('filter-start').value = '';
|
|
document.getElementById('filter-end').value = '';
|
|
document.getElementById('filter-owner').value = '';
|
|
document.getElementById('filter-dept').value = '';
|
|
render(data);
|
|
}
|
|
|
|
function render(list) {
|
|
const box = document.getElementById('result-list');
|
|
if (!list.length) {
|
|
box.innerHTML = '<div class="result-item" style="color:#909399;">无匹配结果</div>';
|
|
return;
|
|
}
|
|
box.innerHTML = list.map(item => `
|
|
<div class="result-item">
|
|
<div class="result-title">
|
|
<div>${item.title}</div>
|
|
<div>
|
|
<span class="tag">${item.type}</span>
|
|
<span class="tag">${item.status}</span>
|
|
</div>
|
|
</div>
|
|
<div class="result-meta">${item.meta}</div>
|
|
<div style="margin-top:8px;">
|
|
<span class="btn btn-default" style="padding:6px 10px;" onclick="openLink('${item.link}')">查看</span>
|
|
<span class="btn btn-default" style="padding:6px 10px;margin-left:6px;" onclick="copyId('${item.id}')">复制ID</span>
|
|
</div>
|
|
</div>
|
|
`).join('');
|
|
}
|
|
|
|
function openLink(link) { window.location.href = link; }
|
|
function copyId(id) {
|
|
navigator.clipboard?.writeText(id);
|
|
CommonUtils.showMessage('已复制：' + id);
|
|
}
|
|
|
|
render(data);
|
|
initUnifiedLayout('search');
|
|
</script>
|
|
</body>
|
|
</html>
|
|
|