<template>
|
<div class="system-select-container">
|
<!-- 顶部用户信息栏 -->
|
<div class="user-info-bar">
|
<div class="user-left"></div>
|
<h3 class="user-details">欢迎访问多体系建设信息化系统</h3>
|
<div class="avatar-container">
|
<el-dropdown @command="handleCommand" class="right-menu-item hover-effect" trigger="click">
|
<div class="avatar-wrapper" style="display: flex;align-items: center">
|
<img src="../assets/images/avator.png" class="user-avatar" />
|
<span style="font-size: 16px">{{userName}}（{{userTypeName}}）</span>
|
<el-icon><caret-bottom /></el-icon>
|
</div>
|
<template #dropdown>
|
<el-dropdown-menu>
|
<el-dropdown-item command="info">
|
<span>基本信息</span>
|
</el-dropdown-item>
|
<el-dropdown-item command="password">
|
<span>修改密码</span>
|
</el-dropdown-item>
|
<el-dropdown-item divided command="logout">
|
<span>退出登录</span>
|
</el-dropdown-item>
|
</el-dropdown-menu>
|
</template>
|
</el-dropdown>
|
</div>
|
</div>
|
|
<!-- 系统选择区域 -->
|
<div class="systems-container">
|
<div class="systems-grid">
|
<div
|
v-for="system in systems"
|
:key="system.id"
|
class="system-card"
|
@click="enterSystem(system.id)"
|
>
|
<div class="system-icon">
|
<img :src="system.icon"/>
|
</div>
|
<h3>{{ system.name }}</h3>
|
<p>{{ system.description }}</p>
|
</div>
|
</div>
|
</div>
|
<user-dialog ref="reviewRef" ></user-dialog>
|
</div>
|
</template>
|
|
<script setup>
|
import { ref, onMounted } from 'vue'
|
import { useRouter } from 'vue-router'
|
import {getToken, removeToken} from "@/utils/auth";
|
import Cookies from "js-cookie";
|
import {ElMessage, ElMessageBox} from "element-plus";
|
import useUserStore from '@/store/modules/user'
|
import userDialog from '@/views/build/conpanyFunctionConsult/staffManage/staffRegister/components/staffDialog.vue'
|
import menu1 from '@/assets/icons/menu1.png'
|
import menu2 from '@/assets/icons/menu2.png'
|
import menu3 from '@/assets/icons/menu3.png'
|
import menu4 from '@/assets/icons/menu4.png'
|
import menu5 from '@/assets/icons/menu5.png'
|
import menu6 from '@/assets/icons/menu6.png'
|
|
const router = useRouter()
|
const route = useRoute();
|
const reviewRef = ref();
|
const userInfo = ref();
|
const userName = ref('')
|
const userTypeName = ref('')
|
// 组件挂载时获取用户信息和系统列表
|
onMounted(() => {
|
if(getToken()){
|
userInfo.value = JSON.parse(Cookies.get('userInfo'))
|
userName.value = userInfo.value.username
|
userTypeName.value = userInfo.value.userType == 0 ? '系统管理员' : userInfo.value.userType == 1 ? '企业管理员' :userInfo.value.userType == 2 ? '部门级':userInfo.value.userType == 3 ? '车间级' :userInfo.value.userType == 6 ? '企业用户' :userInfo.value.userType == 4 ? '其他' : '学员'
|
}
|
|
const userStore = useUserStore()
|
userStore.roles = []
|
})
|
// 系统列表
|
const systems = ref([
|
{
|
id: 1,
|
name: 'ISO 9000 质量管理体系',
|
description: '确保产品和服务质量符合国际标准',
|
icon: menu1
|
},
|
{
|
id: 2,
|
name: 'ISO 27001 信息安全体系',
|
description: '保护企业信息资产安全与机密性',
|
icon: menu2
|
},
|
{
|
id: 3,
|
name: 'ISO 45001 安全体系',
|
description: '实现企业安全的持续改进',
|
icon: menu3
|
},
|
{
|
id: 4,
|
name: '项目管理控制',
|
description: '标准化项目管理流程与方法',
|
icon: menu4
|
},
|
{
|
id: 5,
|
name: '承制评价体系',
|
description: '供应商与承包商能力评估标准',
|
icon: menu5
|
},
|
{
|
id: 6,
|
name: '新体系评价',
|
description: '新体系评价',
|
icon: menu6
|
}
|
])
|
function handleCommand(command) {
|
switch (command) {
|
case "info":
|
getInfo();
|
break;
|
case "logout":
|
logout();
|
break;
|
case "password":
|
editPsd();
|
break;
|
default:
|
break;
|
}
|
}
|
// 进入系统
|
const enterSystem = (systemId) => {
|
if(systemId == 1){
|
router.push({ path: "/"});
|
}else{
|
ElMessage.warning('系统正在开发中...')
|
}
|
}
|
function getInfo() {
|
reviewRef.value.openDialog('view',userInfo.value)
|
}
|
function editPsd() {
|
reviewRef.value.openDialog('pwd',userInfo.value)
|
}
|
// 退出登录
|
function logout() {
|
ElMessageBox.confirm('确定注销并退出系统吗？', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}).then(() => {
|
removeToken()
|
location.href = '/homePage';
|
|
}).catch(() => { });
|
}
|
|
|
</script>
|
|
<style scoped lang="scss">
|
.system-select-container {
|
height: 100vh;
|
display: flex;
|
flex-direction: column;
|
background-color: #f5f7fa;
|
}
|
|
.user-info-bar {
|
display: flex;
|
height: 100px;
|
align-items: center;
|
justify-content: space-between;
|
padding: 10px 20px;
|
background-color: #ffffff;
|
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
|
.user-left{
|
width: 20%;
|
}
|
|
.user-details{
|
width: 60%;
|
margin: 0;
|
color: #333;
|
text-align: center;
|
}
|
|
.avatar-container {
|
width: 20%;
|
display: flex;
|
justify-content: center;
|
|
.avatar-wrapper {
|
margin-top: 15px;
|
position: relative;
|
|
.user-avatar {
|
cursor: pointer;
|
width: 40px;
|
height: 40px;
|
border-radius: 10px;
|
margin-right: 15px;
|
}
|
|
i {
|
cursor: pointer;
|
position: absolute;
|
right: -20px;
|
font-size: 12px;
|
}
|
}
|
}
|
|
}
|
|
|
.systems-container {
|
flex: 1;
|
padding: 20px;
|
overflow-y: auto;
|
margin-top: 60px;
|
}
|
|
.systems-grid {
|
display: grid;
|
grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
|
gap: 20px;
|
max-width: 1500px;
|
margin: 0 auto;
|
}
|
|
.system-card {
|
display: flex;
|
height: 200px;
|
flex-direction: column;
|
align-items: center;
|
justify-content: center;
|
padding: 20px;
|
background-color: #ffffff;
|
border-radius: 8px;
|
transition: transform 0.3s, box-shadow 0.3s;
|
cursor: pointer;
|
}
|
|
.system-card:hover {
|
transform: translateY(-5px);
|
box-shadow: 0 6px 12px rgba(100, 100, 100, 0.1);
|
}
|
|
.system-icon img {
|
width: 60px;
|
height: 60px;
|
margin-bottom: 15px;
|
}
|
|
.system-card h3 {
|
margin: 0 0 10px;
|
color: #333;
|
}
|
|
.system-card p {
|
margin: 0;
|
color: #666;
|
font-size: 14px;
|
text-align: center;
|
}
|
</style>
|
