462 lines
24 KiB
HTML
462 lines
24 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;
|
||
}
|
||
.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;
|
||
}
|
||
.guide-nav {
|
||
display: flex;
|
||
gap: 12px;
|
||
margin-bottom: 24px;
|
||
padding-bottom: 16px;
|
||
border-bottom: 1px solid #f0f0f0;
|
||
}
|
||
.guide-nav-item {
|
||
padding: 8px 16px;
|
||
border: 1px solid #dcdfe6;
|
||
border-radius: 4px;
|
||
background: white;
|
||
color: #606266;
|
||
cursor: pointer;
|
||
font-size: 14px;
|
||
}
|
||
.guide-nav-item.active {
|
||
background: #409EFF;
|
||
color: white;
|
||
border-color: #409EFF;
|
||
}
|
||
.guide-section {
|
||
margin-bottom: 32px;
|
||
}
|
||
.guide-section-title {
|
||
font-size: 18px;
|
||
font-weight: 500;
|
||
color: #303133;
|
||
margin-bottom: 16px;
|
||
padding-bottom: 8px;
|
||
border-bottom: 2px solid #409EFF;
|
||
}
|
||
.guide-step {
|
||
margin-bottom: 24px;
|
||
padding: 16px;
|
||
background: #f5f7fa;
|
||
border-radius: 8px;
|
||
border-left: 4px solid #409EFF;
|
||
}
|
||
.step-title {
|
||
font-size: 16px;
|
||
font-weight: 500;
|
||
color: #303133;
|
||
margin-bottom: 8px;
|
||
}
|
||
.step-content {
|
||
font-size: 14px;
|
||
color: #606266;
|
||
line-height: 1.8;
|
||
}
|
||
.step-image {
|
||
margin-top: 12px;
|
||
padding: 12px;
|
||
background: white;
|
||
border-radius: 4px;
|
||
text-align: center;
|
||
color: #909399;
|
||
font-size: 13px;
|
||
}
|
||
.tip-box {
|
||
background: #fff7e6;
|
||
border: 1px solid #ffe58f;
|
||
border-radius: 4px;
|
||
padding: 12px 16px;
|
||
margin-top: 12px;
|
||
font-size: 13px;
|
||
color: #d46b08;
|
||
}
|
||
</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="app-main">
|
||
<div class="content">
|
||
<div class="page-header">
|
||
<div class="page-title">操作指南</div>
|
||
<div>
|
||
<button class="btn btn-default" onclick="window.location.href='help-center.html'" style="padding: 6px 16px; border: 1px solid #dcdfe6; border-radius: 4px; background: white; color: #606266; cursor: pointer;">返回帮助中心</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="guide-nav">
|
||
<div class="guide-nav-item active" onclick="switchGuide('project')">商机管理</div>
|
||
<div class="guide-nav-item" onclick="switchGuide('process')">过程管理</div>
|
||
<div class="guide-nav-item" onclick="switchGuide('finance')">财务管理</div>
|
||
<div class="guide-nav-item" onclick="switchGuide('report')">报表管理</div>
|
||
<div class="guide-nav-item" onclick="switchGuide('settings')">系统设置</div>
|
||
</div>
|
||
|
||
<div id="guideContent">
|
||
<!-- 商机管理指南 -->
|
||
<div id="guide-project" class="guide-content">
|
||
<div class="guide-section">
|
||
<div class="guide-section-title">1. 项目立项</div>
|
||
<div class="guide-step">
|
||
<div class="step-title">步骤1：进入立项申请页面</div>
|
||
<div class="step-content">点击顶部导航栏"商机管理" → 左侧菜单"立项申请"</div>
|
||
</div>
|
||
<div class="guide-step">
|
||
<div class="step-title">步骤2：填写项目基本信息</div>
|
||
<div class="step-content">
|
||
• 项目编号：系统自动生成（年份+序号，如25-1）<br>
|
||
• 项目名称：输入项目名称<br>
|
||
• 客户名称：输入客户公司名称<br>
|
||
• 服务内容：选择服务类型（结算审计、工程咨询、跟踪审计等）<br>
|
||
• 预计金额：输入项目预计金额
|
||
</div>
|
||
</div>
|
||
<div class="guide-step">
|
||
<div class="step-title">步骤3：上传附件（可选）</div>
|
||
<div class="step-content">点击"选择文件"按钮，选择需要上传的附件，单个文件最大50MB</div>
|
||
</div>
|
||
<div class="guide-step">
|
||
<div class="step-title">步骤4：提交审核</div>
|
||
<div class="step-content">点击"提交审核"按钮，系统将自动提交给经营管理部审核</div>
|
||
<div class="tip-box">💡 提示：可以点击"保存草稿"先保存，稍后再提交</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="guide-section">
|
||
<div class="guide-section-title">2. 项目查询</div>
|
||
<div class="guide-step">
|
||
<div class="step-title">查询项目</div>
|
||
<div class="step-content">
|
||
• 进入"项目查询"页面<br>
|
||
• 使用项目编号、项目名称、服务内容、项目状态等条件筛选<br>
|
||
• 点击"查询"按钮查看结果<br>
|
||
• 可以切换到"看板视图"查看项目状态分布
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="guide-section">
|
||
<div class="guide-section-title">3. 投标和合同管理</div>
|
||
<div class="guide-step">
|
||
<div class="step-title">更新项目状态</div>
|
||
<div class="step-content">
|
||
• 在项目查询页面，找到对应项目<br>
|
||
• 点击"编辑"按钮<br>
|
||
• 更新项目状态为"投标中"或"已签合同"<br>
|
||
• 可上传投标附件或合同附件
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 过程管理指南 -->
|
||
<div id="guide-process" class="guide-content" style="display: none;">
|
||
<div class="guide-section">
|
||
<div class="guide-section-title">1. 项目启动</div>
|
||
<div class="guide-step">
|
||
<div class="step-title">步骤1：选择关联项目</div>
|
||
<div class="step-content">在启动申请页面，选择已立项的项目，系统会自动导入项目信息</div>
|
||
</div>
|
||
<div class="guide-step">
|
||
<div class="step-title">步骤2：启动编号自动生成</div>
|
||
<div class="step-content">系统根据立项编号、项目类型和启动序号自动生成启动编号（如：25-3-2-4）</div>
|
||
</div>
|
||
<div class="guide-step">
|
||
<div class="step-title">步骤3：分配人员和工作内容</div>
|
||
<div class="step-content">
|
||
• 添加执业工程师<br>
|
||
• 为每个工程师分配工作内容（根据服务类型动态显示）<br>
|
||
• 工作内容可多选
|
||
</div>
|
||
</div>
|
||
<div class="guide-step">
|
||
<div class="step-title">步骤4：费用计算（可选）</div>
|
||
<div class="step-content">
|
||
• 输入合同金额和折扣率<br>
|
||
• 系统根据服务类型自动显示计算公式<br>
|
||
• 自动计算最终费用
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="guide-section">
|
||
<div class="guide-section-title">2. 成果提交</div>
|
||
<div class="guide-step">
|
||
<div class="step-title">选择成果类型</div>
|
||
<div class="step-content">
|
||
• 结算类项目：需要提交初稿、对账、最终成果<br>
|
||
• 其他项目：直接提交最终成果
|
||
</div>
|
||
</div>
|
||
<div class="guide-step">
|
||
<div class="step-title">多人提交成果</div>
|
||
<div class="step-content">
|
||
• 如果项目分配给多人，需要所有人员都提交成果<br>
|
||
• 系统会显示提交进度（已提交/待提交）<br>
|
||
• 所有人员提交完成后，进入组长审核环节
|
||
</div>
|
||
<div class="tip-box">💡 提示：对账金额与初稿金额差距过大时，系统会提醒</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 财务管理指南 -->
|
||
<div id="guide-finance" class="guide-content" style="display: none;">
|
||
<div class="guide-section">
|
||
<div class="guide-section-title">1. 开票申请</div>
|
||
<div class="guide-step">
|
||
<div class="step-title">申请条件</div>
|
||
<div class="step-content">项目需满足以下条件之一：<br>• 已签合同<br>• 已提交正式成果</div>
|
||
</div>
|
||
<div class="guide-step">
|
||
<div class="step-title">申请流程</div>
|
||
<div class="step-content">
|
||
• 进入"开票管理"页面<br>
|
||
• 点击"开票申请"按钮<br>
|
||
• 选择符合条件的项目<br>
|
||
• 填写开票信息<br>
|
||
• 提交申请
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="guide-section">
|
||
<div class="guide-section-title">2. 回款录入</div>
|
||
<div class="guide-step">
|
||
<div class="step-title">录入回款</div>
|
||
<div class="step-content">
|
||
• 在"回款管理"页面找到已开票的项目<br>
|
||
• 点击"录入回款"<br>
|
||
• 输入回款金额<br>
|
||
• 更新订单状态为"已回款"
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="guide-section">
|
||
<div class="guide-section-title">3. 请款申请</div>
|
||
<div class="guide-step">
|
||
<div class="step-title">申请流程</div>
|
||
<div class="step-content">
|
||
• 进入"请款管理"页面<br>
|
||
• 点击"请款申请"<br>
|
||
• 填写请款信息（事由、金额等）<br>
|
||
• 提交给总经理审核<br>
|
||
• 审核通过后，出纳更新状态为"已付款"
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 报表管理指南 -->
|
||
<div id="guide-report" class="guide-content" style="display: none;">
|
||
<div class="guide-section">
|
||
<div class="guide-section-title">1. 项目报表</div>
|
||
<div class="guide-step">
|
||
<div class="step-title">项目明细表</div>
|
||
<div class="step-content">显示项目从立项到回款的所有明细信息，支持多条件查询和导出Excel</div>
|
||
</div>
|
||
<div class="guide-step">
|
||
<div class="step-title">项目汇总表</div>
|
||
<div class="step-content">按项目状态、负责人汇总项目数量，支持时间段查询</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="guide-section">
|
||
<div class="guide-section-title">2. 产值报表</div>
|
||
<div class="guide-step">
|
||
<div class="step-title">产值明细表</div>
|
||
<div class="step-content">
|
||
• 根据项目过程信息计算每个项目对应到执业者的完成产值<br>
|
||
• 显示产值计算公式说明<br>
|
||
• 支持按项目、执业者、时间段查询
|
||
</div>
|
||
</div>
|
||
<div class="guide-step">
|
||
<div class="step-title">产值汇总表</div>
|
||
<div class="step-content">
|
||
• 按执业者统计指定时间段的产值完成情况<br>
|
||
• 支持图表展示（柱状图、折线图、饼图）<br>
|
||
• 可导出Excel
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="guide-section">
|
||
<div class="guide-section-title">3. 财务报表</div>
|
||
<div class="guide-step">
|
||
<div class="step-title">应收账款报表</div>
|
||
<div class="step-content">按客户单位汇总和明细展示应收账款情况，支持图表展示</div>
|
||
</div>
|
||
<div class="guide-step">
|
||
<div class="step-title">应付账款报表</div>
|
||
<div class="step-content">对应请款申请的明细和汇总信息</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 系统设置指南 -->
|
||
<div id="guide-settings" class="guide-content" style="display: none;">
|
||
<div class="guide-section">
|
||
<div class="guide-section-title">1. 组织架构管理</div>
|
||
<div class="guide-step">
|
||
<div class="step-title">添加部门</div>
|
||
<div class="step-content">在组织架构树中，点击"添加"按钮，输入部门名称，选择上级部门</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="guide-section">
|
||
<div class="guide-section-title">2. 账号管理</div>
|
||
<div class="guide-step">
|
||
<div class="step-title">新增账号</div>
|
||
<div class="step-content">
|
||
• 点击"新增账号"按钮<br>
|
||
• 填写用户名、姓名、部门等信息<br>
|
||
• 设置角色和权限<br>
|
||
• 保存
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="guide-section">
|
||
<div class="guide-section-title">3. 流程配置</div>
|
||
<div class="guide-step">
|
||
<div class="step-title">配置审核流程</div>
|
||
<div class="step-content">
|
||
• 选择流程类型（立项、启动、成果等）<br>
|
||
• 添加审核节点<br>
|
||
• 设置审核条件（如金额阈值）<br>
|
||
• 配置超时提醒
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<script src="common.js"></script>
|
||
<script>
|
||
function switchGuide(type) {
|
||
// 更新导航状态
|
||
document.querySelectorAll('.guide-nav-item').forEach(item => item.classList.remove('active'));
|
||
event.target.classList.add('active');
|
||
|
||
// 显示对应内容
|
||
document.querySelectorAll('.guide-content').forEach(content => content.style.display = 'none');
|
||
document.getElementById('guide-' + type).style.display = 'block';
|
||
}
|
||
</script>
|
||
<script src="unified-layout.js"></script>
|
||
<script>
|
||
initUnifiedLayout('help');
|
||
</script>
|
||
</body>
|
||
</html>
|
||
|