517 lines
22 KiB
HTML
517 lines
22 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>企业级日报系统 - 完整功能演示</title>
|
|||
|
|
<link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
|
|||
|
|
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
|
|||
|
|
<script src="https://unpkg.com/element-plus/dist/index.full.js"></script>
|
|||
|
|
<style>
|
|||
|
|
body {
|
|||
|
|
margin: 0;
|
|||
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|||
|
|
background: #f5f7fa;
|
|||
|
|
}
|
|||
|
|
.app-container {
|
|||
|
|
display: flex;
|
|||
|
|
height: 100vh;
|
|||
|
|
}
|
|||
|
|
.sidebar {
|
|||
|
|
width: 240px;
|
|||
|
|
background: #304156;
|
|||
|
|
color: white;
|
|||
|
|
padding: 0;
|
|||
|
|
overflow-y: auto;
|
|||
|
|
}
|
|||
|
|
.sidebar-logo {
|
|||
|
|
height: 60px;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
border-bottom: 1px solid rgba(255,255,255,0.1);
|
|||
|
|
font-size: 18px;
|
|||
|
|
font-weight: 600;
|
|||
|
|
}
|
|||
|
|
.main-container {
|
|||
|
|
flex: 1;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
}
|
|||
|
|
.navbar {
|
|||
|
|
height: 60px;
|
|||
|
|
background: white;
|
|||
|
|
border-bottom: 1px solid #e4e7ed;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
padding: 0 20px;
|
|||
|
|
box-shadow: 0 1px 4px rgba(0,21,41,0.08);
|
|||
|
|
}
|
|||
|
|
.content-area {
|
|||
|
|
flex: 1;
|
|||
|
|
padding: 20px;
|
|||
|
|
overflow-y: auto;
|
|||
|
|
}
|
|||
|
|
.page-header {
|
|||
|
|
margin-bottom: 20px;
|
|||
|
|
}
|
|||
|
|
.page-title {
|
|||
|
|
font-size: 24px;
|
|||
|
|
font-weight: 500;
|
|||
|
|
color: #303133;
|
|||
|
|
margin: 0 0 8px 0;
|
|||
|
|
}
|
|||
|
|
.page-description {
|
|||
|
|
color: #606266;
|
|||
|
|
margin: 0;
|
|||
|
|
}
|
|||
|
|
.demo-tabs {
|
|||
|
|
background: white;
|
|||
|
|
border-radius: 8px;
|
|||
|
|
box-shadow: 0 2px 12px rgba(0,0,0,0.1);
|
|||
|
|
overflow: hidden;
|
|||
|
|
}
|
|||
|
|
.stat-grid {
|
|||
|
|
display: grid;
|
|||
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|||
|
|
gap: 20px;
|
|||
|
|
margin-bottom: 30px;
|
|||
|
|
}
|
|||
|
|
.stat-card {
|
|||
|
|
background: linear-gradient(135deg, #409eff 0%, #66b1ff 100%);
|
|||
|
|
color: white;
|
|||
|
|
padding: 24px;
|
|||
|
|
border-radius: 8px;
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
.stat-card.success { background: linear-gradient(135deg, #67c23a 0%, #85ce61 100%); }
|
|||
|
|
.stat-card.warning { background: linear-gradient(135deg, #e6a23c 0%, #ebb563 100%); }
|
|||
|
|
.stat-card.info { background: linear-gradient(135deg, #909399 0%, #a6a9ad 100%); }
|
|||
|
|
.stat-number {
|
|||
|
|
font-size: 32px;
|
|||
|
|
font-weight: bold;
|
|||
|
|
margin-bottom: 8px;
|
|||
|
|
}
|
|||
|
|
.stat-label {
|
|||
|
|
font-size: 14px;
|
|||
|
|
opacity: 0.9;
|
|||
|
|
}
|
|||
|
|
.report-form {
|
|||
|
|
background: white;
|
|||
|
|
padding: 20px;
|
|||
|
|
border-radius: 8px;
|
|||
|
|
margin-bottom: 20px;
|
|||
|
|
}
|
|||
|
|
.report-list {
|
|||
|
|
background: white;
|
|||
|
|
border-radius: 8px;
|
|||
|
|
}
|
|||
|
|
.report-item {
|
|||
|
|
padding: 20px;
|
|||
|
|
border-bottom: 1px solid #f0f0f0;
|
|||
|
|
}
|
|||
|
|
.report-item:last-child {
|
|||
|
|
border-bottom: none;
|
|||
|
|
}
|
|||
|
|
.report-meta {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
margin-bottom: 10px;
|
|||
|
|
}
|
|||
|
|
.report-date {
|
|||
|
|
font-weight: 600;
|
|||
|
|
color: #409eff;
|
|||
|
|
}
|
|||
|
|
.report-content {
|
|||
|
|
color: #606266;
|
|||
|
|
line-height: 1.6;
|
|||
|
|
margin-bottom: 10px;
|
|||
|
|
}
|
|||
|
|
.report-actions {
|
|||
|
|
text-align: right;
|
|||
|
|
}
|
|||
|
|
.user-avatar {
|
|||
|
|
width: 32px;
|
|||
|
|
height: 32px;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
background: #409eff;
|
|||
|
|
color: white;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
font-weight: 600;
|
|||
|
|
margin-right: 10px;
|
|||
|
|
}
|
|||
|
|
.user-info {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
.hamburger {
|
|||
|
|
cursor: pointer;
|
|||
|
|
padding: 10px;
|
|||
|
|
}
|
|||
|
|
@media (max-width: 768px) {
|
|||
|
|
.app-container {
|
|||
|
|
flex-direction: column;
|
|||
|
|
}
|
|||
|
|
.sidebar {
|
|||
|
|
width: 100%;
|
|||
|
|
height: auto;
|
|||
|
|
}
|
|||
|
|
.stat-grid {
|
|||
|
|
grid-template-columns: repeat(2, 1fr);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<div id="app">
|
|||
|
|
<div class="app-container">
|
|||
|
|
<!-- 侧边栏 -->
|
|||
|
|
<div class="sidebar">
|
|||
|
|
<div class="sidebar-logo">
|
|||
|
|
📊 日报系统
|
|||
|
|
</div>
|
|||
|
|
<el-menu
|
|||
|
|
:default-active="activeMenu"
|
|||
|
|
background-color="#304156"
|
|||
|
|
text-color="#bfcbd9"
|
|||
|
|
active-text-color="#ffffff"
|
|||
|
|
@select="handleMenuSelect"
|
|||
|
|
>
|
|||
|
|
<el-menu-item index="dashboard">
|
|||
|
|
<el-icon><House /></el-icon>
|
|||
|
|
<span>工作台</span>
|
|||
|
|
</el-menu-item>
|
|||
|
|
<el-menu-item index="reports">
|
|||
|
|
<el-icon><Document /></el-icon>
|
|||
|
|
<span>日报管理</span>
|
|||
|
|
</el-menu-item>
|
|||
|
|
<el-menu-item index="create">
|
|||
|
|
<el-icon><Plus /></el-icon>
|
|||
|
|
<span>创建日报</span>
|
|||
|
|
</el-menu-item>
|
|||
|
|
<el-menu-item index="profile">
|
|||
|
|
<el-icon><User /></el-icon>
|
|||
|
|
<span>个人中心</span>
|
|||
|
|
</el-menu-item>
|
|||
|
|
</el-menu>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 主内容区 -->
|
|||
|
|
<div class="main-container">
|
|||
|
|
<!-- 顶部导航 -->
|
|||
|
|
<div class="navbar">
|
|||
|
|
<div class="navbar-left">
|
|||
|
|
<div class="hamburger">
|
|||
|
|
<el-icon><Fold /></el-icon>
|
|||
|
|
</div>
|
|||
|
|
<span>企业级日报系统演示</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="navbar-right">
|
|||
|
|
<div class="user-info">
|
|||
|
|
<div class="user-avatar">张</div>
|
|||
|
|
<span>张三</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 内容区域 -->
|
|||
|
|
<div class="content-area">
|
|||
|
|
<!-- 工作台 -->
|
|||
|
|
<div v-show="activeMenu === 'dashboard'">
|
|||
|
|
<div class="page-header">
|
|||
|
|
<h1 class="page-title">工作台</h1>
|
|||
|
|
<p class="page-description">欢迎回来，张三！</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 统计卡片 -->
|
|||
|
|
<div class="stat-grid">
|
|||
|
|
<div class="stat-card">
|
|||
|
|
<div class="stat-number">156</div>
|
|||
|
|
<div class="stat-label">总日报数</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="stat-card success">
|
|||
|
|
<div class="stat-number">23</div>
|
|||
|
|
<div class="stat-label">本月日报</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="stat-card warning">
|
|||
|
|
<div class="stat-number">5</div>
|
|||
|
|
<div class="stat-label">本周日报</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="stat-card info">
|
|||
|
|
<div class="stat-number">92%</div>
|
|||
|
|
<div class="stat-label">完成率</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 快捷操作 -->
|
|||
|
|
<el-card header="快捷操作" class="mb-20">
|
|||
|
|
<div style="display: flex; gap: 15px; flex-wrap: wrap;">
|
|||
|
|
<el-button type="primary" @click="activeMenu = 'create'">
|
|||
|
|
<el-icon><Plus /></el-icon>
|
|||
|
|
创建日报
|
|||
|
|
</el-button>
|
|||
|
|
<el-button @click="activeMenu = 'reports'">
|
|||
|
|
<el-icon><Document /></el-icon>
|
|||
|
|
查看日报
|
|||
|
|
</el-button>
|
|||
|
|
<el-button type="success">
|
|||
|
|
<el-icon><DataAnalysis /></el-icon>
|
|||
|
|
数据统计
|
|||
|
|
</el-button>
|
|||
|
|
</div>
|
|||
|
|
</el-card>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 日报列表 -->
|
|||
|
|
<div v-show="activeMenu === 'reports'">
|
|||
|
|
<div class="page-header">
|
|||
|
|
<h1 class="page-title">日报管理</h1>
|
|||
|
|
<p class="page-description">查看和管理您的日报</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 搜索表单 -->
|
|||
|
|
<el-card class="mb-20">
|
|||
|
|
<el-form :inline="true">
|
|||
|
|
<el-form-item label="日期范围">
|
|||
|
|
<el-date-picker
|
|||
|
|
type="daterange"
|
|||
|
|
range-separator="至"
|
|||
|
|
start-placeholder="开始日期"
|
|||
|
|
end-placeholder="结束日期"
|
|||
|
|
/>
|
|||
|
|
</el-form-item>
|
|||
|
|
<el-form-item label="关键词">
|
|||
|
|
<el-input placeholder="搜索工作总结" />
|
|||
|
|
</el-form-item>
|
|||
|
|
<el-form-item>
|
|||
|
|
<el-button type="primary">搜索</el-button>
|
|||
|
|
<el-button>重置</el-button>
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-form>
|
|||
|
|
</el-card>
|
|||
|
|
|
|||
|
|
<!-- 日报表格 -->
|
|||
|
|
<el-card>
|
|||
|
|
<template #header>
|
|||
|
|
<div style="display: flex; justify-content: space-between; align-items: center;">
|
|||
|
|
<span>日报列表</span>
|
|||
|
|
<el-button type="primary" @click="activeMenu = 'create'">
|
|||
|
|
<el-icon><Plus /></el-icon>
|
|||
|
|
新建日报
|
|||
|
|
</el-button>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<el-table :data="reportData" stripe>
|
|||
|
|
<el-table-column prop="date" label="日期" width="120" />
|
|||
|
|
<el-table-column prop="summary" label="工作总结" show-overflow-tooltip />
|
|||
|
|
<el-table-column prop="plan" label="明日计划" show-overflow-tooltip />
|
|||
|
|
<el-table-column prop="status" label="状态" width="80">
|
|||
|
|
<template #default="scope">
|
|||
|
|
<el-tag :type="scope.row.status === '已发布' ? 'success' : 'warning'">
|
|||
|
|
{{ scope.row.status }}
|
|||
|
|
</el-tag>
|
|||
|
|
</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
<el-table-column label="操作" width="200">
|
|||
|
|
<template #default="scope">
|
|||
|
|
<el-button type="text" size="small">查看</el-button>
|
|||
|
|
<el-button type="text" size="small">编辑</el-button>
|
|||
|
|
<el-button type="text" size="small" style="color: #f56c6c;">删除</el-button>
|
|||
|
|
</template>
|
|||
|
|
</el-table-column>
|
|||
|
|
</el-table>
|
|||
|
|
</el-card>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 创建日报 -->
|
|||
|
|
<div v-show="activeMenu === 'create'">
|
|||
|
|
<div class="page-header">
|
|||
|
|
<h1 class="page-title">创建日报</h1>
|
|||
|
|
<p class="page-description">填写今日工作总结和明日计划</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<el-card>
|
|||
|
|
<el-form :model="reportForm" label-width="100px">
|
|||
|
|
<el-form-item label="日报日期">
|
|||
|
|
<el-date-picker
|
|||
|
|
v-model="reportForm.date"
|
|||
|
|
type="date"
|
|||
|
|
placeholder="选择日期"
|
|||
|
|
/>
|
|||
|
|
</el-form-item>
|
|||
|
|
|
|||
|
|
<el-form-item label="工作总结">
|
|||
|
|
<el-input
|
|||
|
|
v-model="reportForm.summary"
|
|||
|
|
type="textarea"
|
|||
|
|
:rows="6"
|
|||
|
|
placeholder="请详细描述今日完成的工作内容、取得的成果等"
|
|||
|
|
/>
|
|||
|
|
</el-form-item>
|
|||
|
|
|
|||
|
|
<el-form-item label="明日计划">
|
|||
|
|
<el-input
|
|||
|
|
v-model="reportForm.plan"
|
|||
|
|
type="textarea"
|
|||
|
|
:rows="4"
|
|||
|
|
placeholder="请规划明日的工作内容和目标"
|
|||
|
|
/>
|
|||
|
|
</el-form-item>
|
|||
|
|
|
|||
|
|
<el-form-item label="遇到困难">
|
|||
|
|
<el-input
|
|||
|
|
v-model="reportForm.difficulties"
|
|||
|
|
type="textarea"
|
|||
|
|
:rows="3"
|
|||
|
|
placeholder="描述工作中遇到的问题或困难（可选）"
|
|||
|
|
/>
|
|||
|
|
</el-form-item>
|
|||
|
|
|
|||
|
|
<el-form-item label="发布状态">
|
|||
|
|
<el-radio-group v-model="reportForm.status">
|
|||
|
|
<el-radio label="published">立即发布</el-radio>
|
|||
|
|
<el-radio label="draft">保存为草稿</el-radio>
|
|||
|
|
</el-radio-group>
|
|||
|
|
</el-form-item>
|
|||
|
|
|
|||
|
|
<el-form-item>
|
|||
|
|
<el-button type="primary" @click="submitReport">提交日报</el-button>
|
|||
|
|
<el-button>重置</el-button>
|
|||
|
|
<el-button @click="activeMenu = 'reports'">返回列表</el-button>
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-form>
|
|||
|
|
</el-card>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 个人中心 -->
|
|||
|
|
<div v-show="activeMenu === 'profile'">
|
|||
|
|
<div class="page-header">
|
|||
|
|
<h1 class="page-title">个人中心</h1>
|
|||
|
|
<p class="page-description">管理您的个人信息和账户设置</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<el-row :gutter="20">
|
|||
|
|
<el-col :span="8">
|
|||
|
|
<el-card header="个人信息">
|
|||
|
|
<div style="text-align: center; margin-bottom: 20px;">
|
|||
|
|
<div class="user-avatar" style="width: 80px; height: 80px; font-size: 32px; margin: 0 auto 15px;">张</div>
|
|||
|
|
<h3>张三</h3>
|
|||
|
|
<p style="color: #909399;">前端工程师</p>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<p><strong>用户名:</strong> zhangsan</p>
|
|||
|
|
<p><strong>邮箱:</strong> zhangsan@example.com</p>
|
|||
|
|
<p><strong>部门:</strong> 技术部</p>
|
|||
|
|
<p><strong>职位:</strong> 前端工程师</p>
|
|||
|
|
<p><strong>注册时间:</strong> 2024-01-01</p>
|
|||
|
|
</div>
|
|||
|
|
</el-card>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="16">
|
|||
|
|
<el-card header="编辑资料">
|
|||
|
|
<el-form label-width="80px">
|
|||
|
|
<el-form-item label="姓名">
|
|||
|
|
<el-input value="张三" />
|
|||
|
|
</el-form-item>
|
|||
|
|
<el-form-item label="邮箱">
|
|||
|
|
<el-input value="zhangsan@example.com" />
|
|||
|
|
</el-form-item>
|
|||
|
|
<el-form-item label="部门">
|
|||
|
|
<el-input value="技术部" />
|
|||
|
|
</el-form-item>
|
|||
|
|
<el-form-item label="职位">
|
|||
|
|
<el-input value="前端工程师" />
|
|||
|
|
</el-form-item>
|
|||
|
|
<el-form-item>
|
|||
|
|
<el-button type="primary">保存修改</el-button>
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-form>
|
|||
|
|
</el-card>
|
|||
|
|
</el-col>
|
|||
|
|
</el-row>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
const { createApp } = Vue;
|
|||
|
|
const { ElMessage } = ElementPlus;
|
|||
|
|
|
|||
|
|
createApp({
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
activeMenu: 'dashboard',
|
|||
|
|
reportForm: {
|
|||
|
|
date: new Date(),
|
|||
|
|
summary: '',
|
|||
|
|
plan: '',
|
|||
|
|
difficulties: '',
|
|||
|
|
status: 'published'
|
|||
|
|
},
|
|||
|
|
reportData: [
|
|||
|
|
{
|
|||
|
|
date: '2024-01-15',
|
|||
|
|
summary: '完成了用户认证模块的开发，包括登录、注册和权限验证功能...',
|
|||
|
|
plan: '开始日报管理模块的前端界面开发，集成富文本编辑器...',
|
|||
|
|
status: '已发布'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
date: '2024-01-14',
|
|||
|
|
summary: '设计了数据库表结构，完成了项目架构搭建...',
|
|||
|
|
plan: '实现日报CRUD功能，添加数据验证和错误处理...',
|
|||
|
|
status: '已发布'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
date: '2024-01-13',
|
|||
|
|
summary: '参与需求评审会议，整理产品功能清单...',
|
|||
|
|
plan: '完善产品文档，准备用户测试方案...',
|
|||
|
|
status: '草稿'
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
handleMenuSelect(index) {
|
|||
|
|
this.activeMenu = index;
|
|||
|
|
},
|
|||
|
|
submitReport() {
|
|||
|
|
if (!this.reportForm.summary || !this.reportForm.plan) {
|
|||
|
|
ElMessage.warning('请填写工作总结和明日计划');
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
ElMessage.success('日报提交成功！');
|
|||
|
|
|
|||
|
|
// 添加到列表
|
|||
|
|
this.reportData.unshift({
|
|||
|
|
date: this.reportForm.date.toISOString().split('T')[0],
|
|||
|
|
summary: this.reportForm.summary.substring(0, 50) + '...',
|
|||
|
|
plan: this.reportForm.plan.substring(0, 50) + '...',
|
|||
|
|
status: this.reportForm.status === 'published' ? '已发布' : '草稿'
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 重置表单
|
|||
|
|
this.reportForm = {
|
|||
|
|
date: new Date(),
|
|||
|
|
summary: '',
|
|||
|
|
plan: '',
|
|||
|
|
difficulties: '',
|
|||
|
|
status: 'published'
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 跳转到列表页
|
|||
|
|
this.activeMenu = 'reports';
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}).use(ElementPlus).mount('#app');
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|