对比新文件 |
| | |
| | | <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> |