✨ feat: 添加首页的导航守卫
This commit is contained in:
@@ -1,60 +1,24 @@
|
||||
<template>
|
||||
<div class="home">
|
||||
<div v-if="currentRole.roleKey==='temp'">
|
||||
<div class="onboarding-homepage">
|
||||
<!-- 提示信息 -->
|
||||
<el-alert
|
||||
title="欢迎加入，请尽快补充您的必要信息！"
|
||||
type="info"
|
||||
show-icon>
|
||||
</el-alert>
|
||||
|
||||
<!-- 数据补充表单 -->
|
||||
<el-form :model="employeeData" class="employee-form" label-width="80px">
|
||||
<el-form-item label="姓名">
|
||||
<el-input v-model="employeeData.name"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="邮箱">
|
||||
<el-input v-model="employeeData.email"></el-input>
|
||||
</el-form-item>
|
||||
<!-- 根据实际需求添加更多字段 -->
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="submitForm">提交</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<!-- 流程图 -->
|
||||
<div class="flow-chart">
|
||||
<el-steps :active="activeStep" finish-status="success">
|
||||
<el-step title="填写信息"></el-step>
|
||||
<el-step title="审批中"></el-step>
|
||||
<el-step title="完成"></el-step>
|
||||
</el-steps>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else>
|
||||
<el-container style="height: 100vh;">
|
||||
<el-main>
|
||||
<el-row :gutter="20">
|
||||
<!-- 右侧展示区域 -->
|
||||
<el-col :span="18" class="content-area">
|
||||
<announcements />
|
||||
<financial-charts />
|
||||
</el-col>
|
||||
|
||||
<!-- 左侧功能区域 -->
|
||||
<el-col :span="6" class="sidebar">
|
||||
<quick-access />
|
||||
<inventory />
|
||||
<project-management />
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-main>
|
||||
|
||||
|
||||
</el-container>
|
||||
<div>
|
||||
<el-container style="height: 100vh;">
|
||||
<el-main>
|
||||
<el-row :gutter="20">
|
||||
<!-- 右侧展示区域 -->
|
||||
<el-col :span="18" class="content-area">
|
||||
<announcements />
|
||||
<financial-charts />
|
||||
</el-col>
|
||||
|
||||
<!-- 左侧功能区域 -->
|
||||
<el-col :span="6" class="sidebar">
|
||||
<quick-access />
|
||||
<inventory />
|
||||
<project-management />
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-main>
|
||||
</el-container>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -68,7 +32,6 @@ import Inventory from "../components/Inventory/index.vue";
|
||||
import Announcements from "../components/Announcements/index.vue";
|
||||
import ProjectManagement from "../components/ProjectManagement/index.vue";
|
||||
import FinancialCharts from "../components/FinancialCharts/index.vue";
|
||||
import {currentRole} from "@/api/system/role";
|
||||
|
||||
export default {
|
||||
name: "Index",
|
||||
@@ -81,14 +44,6 @@ export default {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 新员工填写的信息
|
||||
employeeData: {
|
||||
name: "",
|
||||
email: "",
|
||||
// 其他必要字段
|
||||
},
|
||||
// 当前步骤，从 0 开始计数
|
||||
activeStep: 0,
|
||||
version: "0.8.3",
|
||||
commandstats: null,
|
||||
usedmemory: null,
|
||||
@@ -100,29 +55,13 @@ export default {
|
||||
noticeTitle: '',
|
||||
noticeContent: '',
|
||||
drawer: false,
|
||||
currentRole:{}
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getCurrentUserRole();
|
||||
this.getList();
|
||||
this.getListNotice();
|
||||
},
|
||||
methods: {
|
||||
submitForm() {
|
||||
// 这里可以加入表单验证与提交逻辑
|
||||
// 模拟提交后进入下一流程（例如审批中）
|
||||
this.activeStep = 1;
|
||||
this.$message({
|
||||
message: "表单提交成功，进入审批流程！",
|
||||
type: "success"
|
||||
});
|
||||
},
|
||||
getCurrentUserRole(){
|
||||
currentRole().then(res => {
|
||||
this.currentRole = res.data;
|
||||
})
|
||||
},
|
||||
getList() {
|
||||
getCache().then((response) => {
|
||||
this.cache = response.data;
|
||||
|
||||
237
ruoyi-ui/src/views/temp.vue
Normal file
237
ruoyi-ui/src/views/temp.vue
Normal file
@@ -0,0 +1,237 @@
|
||||
<template>
|
||||
<div class="onboarding-container">
|
||||
<!-- 动态背景装饰 -->
|
||||
<div class="decorative-background">
|
||||
<div class="gradient-circle blue"></div>
|
||||
<div class="gradient-circle purple"></div>
|
||||
</div>
|
||||
|
||||
<!-- 初始状态 -->
|
||||
<div v-if="!showForm" class="initiation-card">
|
||||
<div class="welcome-section">
|
||||
<el-image
|
||||
src="https://example.com/onboarding-illustration.svg"
|
||||
class="welcome-illustration"
|
||||
:preview-src-list="[]">
|
||||
<div slot="error" class="image-slot">
|
||||
<i class="el-icon-user-solid"></i>
|
||||
</div>
|
||||
</el-image>
|
||||
<h2 class="welcome-title">欢迎加入团队！</h2>
|
||||
<p class="welcome-subtitle">让我们开始您的入职流程</p>
|
||||
</div>
|
||||
|
||||
<div class="process-steps">
|
||||
<el-steps direction="vertical" :active="0">
|
||||
<el-step title="准备资料"></el-step>
|
||||
<el-step title="信息填写"></el-step>
|
||||
<el-step title="完成认证"></el-step>
|
||||
</el-steps>
|
||||
</div>
|
||||
|
||||
<el-button
|
||||
type="primary"
|
||||
class="start-button"
|
||||
@click="startOnboarding"
|
||||
:loading="loading">
|
||||
{{ loading ? '正在准备表单...' : '开启入职流程' }}
|
||||
<i class="el-icon-right"></i>
|
||||
</el-button>
|
||||
</div>
|
||||
|
||||
<!-- 表单状态 -->
|
||||
<transition name="el-fade-in">
|
||||
<div v-if="showForm" class="form-container">
|
||||
<el-skeleton :rows="5" animated v-if="loading" />
|
||||
|
||||
<div v-else class="form-content">
|
||||
<div class="form-header">
|
||||
<h3>入职信息登记</h3>
|
||||
<el-progress :percentage="33" :show-text="false" />
|
||||
</div>
|
||||
|
||||
<el-form
|
||||
:model="employeeData"
|
||||
class="employee-form"
|
||||
label-position="top">
|
||||
<!-- 原有表单字段 -->
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
showForm: false,
|
||||
loading: false,
|
||||
employeeData: {
|
||||
name: "",
|
||||
email: ""
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async startOnboarding() {
|
||||
this.loading = true
|
||||
try {
|
||||
// 模拟API请求
|
||||
await new Promise(resolve => setTimeout(resolve, 1500))
|
||||
this.showForm = true
|
||||
} finally {
|
||||
this.loading = false
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.onboarding-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.decorative-background {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 0;
|
||||
|
||||
.gradient-circle {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
filter: blur(60px);
|
||||
opacity: 0.15;
|
||||
|
||||
&.blue {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(45deg, #409EFF, #79bbff);
|
||||
top: 20%;
|
||||
left: 10%;
|
||||
}
|
||||
|
||||
&.purple {
|
||||
width: 250px;
|
||||
height: 250px;
|
||||
background: linear-gradient(45deg, #B37FEB, #9254de);
|
||||
bottom: 15%;
|
||||
right: 10%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.initiation-card {
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
border-radius: 16px;
|
||||
padding: 40px;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.05);
|
||||
backdrop-filter: blur(10px);
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
max-width: 600px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.welcome-section {
|
||||
margin-bottom: 2rem;
|
||||
|
||||
.welcome-illustration {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
margin: 0 auto 1.5rem;
|
||||
border-radius: 50%;
|
||||
background: #f0f7ff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 4rem;
|
||||
color: #409EFF;
|
||||
}
|
||||
|
||||
.welcome-title {
|
||||
font-size: 1.8rem;
|
||||
margin-bottom: 0.5rem;
|
||||
color: #303133;
|
||||
}
|
||||
|
||||
.welcome-subtitle {
|
||||
color: #909399;
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.process-steps {
|
||||
margin: 2rem 0;
|
||||
::v-deep .el-step__head {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.start-button {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
font-size: 1.1rem;
|
||||
border-radius: 12px;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
|
||||
}
|
||||
|
||||
i {
|
||||
margin-left: 8px;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
&:hover i {
|
||||
transform: translateX(3px);
|
||||
}
|
||||
}
|
||||
|
||||
.form-container {
|
||||
background: white;
|
||||
border-radius: 16px;
|
||||
padding: 40px;
|
||||
width: 100%;
|
||||
max-width: 800px;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.05);
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
|
||||
.form-header {
|
||||
margin-bottom: 2rem;
|
||||
h3 {
|
||||
font-size: 1.5rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.onboarding-container {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.initiation-card,
|
||||
.form-container {
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.welcome-illustration {
|
||||
width: 150px !important;
|
||||
height: 150px !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user