Skip to content

D
digital-operation-platform
Commit 2cf2fba3 by 刘勇
Options

初始化项目

parent 51673b1b
Showing with 195 additions and 114 deletions
index.html
......@@ -4,7 +4,7 @@
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>消息中心业务服务平台</title>
<title>政企数字运营平台</title>
</head>
<body>
<div id="app"></div>
......
src/utils/directives.js
import { getInfo } from "@/api/login";
export const directives = app => {
app.directive('debounce', {
// 自定义指令挂载时的处理逻辑
......
src/views/home - 副本.vue 0 → 100644
<template>
<template>
<div class="home">
<el-affix :offset="0">
<div class="header">
<div class="header_left">
<div class="logo"></div>
<div>消息中心业务服务平台</div>
</div>
<div class="header_right">
<el-badge is-dot>
<el-icon style="font-size: 25px;cursor: pointer;"><BellFilled color="#fff" /></el-icon>
</el-badge>
<el-icon style="font-size: 25px;cursor: pointer;"><QuestionFilled color="#fff" /></el-icon>
<el-dropdown>
<div class="dropdownBox">
<div class="avatar"></div>
<el-icon>
<CaretBottom color="#fff" />
</el-icon>
</div>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item @click="goLogin">退出系统</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
<span style="color: #fff;">{{ userName }}</span>
</div>
</div>
</el-affix>
<el-row style="height: calc(100% - 50px);">
<el-col :span="4">
<el-menu
:default-active="default_active"
:router="true"
style="height: 100%;"
class="side-menu"
>
<TreeNode
v-for="item in menuTree"
:key="item.id"
:menu="item"
/>
</el-menu>
</el-col>
<el-col :span="20" style="padding: 6px;">
<RouterView />
</el-col>
</el-row>
</div>
</template>
<script setup>
import { onMounted, ref, watch } from 'vue';
import { CaretBottom, Platform, QuestionFilled, Menu, InfoFilled, HelpFilled, WarningFilled, Briefcase, Promotion, Comment, Tools, Grid, BellFilled, Management } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { RouterView, useRouter, useRoute } from 'vue-router';
// import { logout, getRouters } from "@/api/login";
import TreeNode from '@/components/TreeNode.vue';
const router = useRouter();
const route = useRoute();
const default_active = ref('');
const menuTree = ref([]);
const userName = ref('');
onMounted(() => {
userName.value = JSON.parse(localStorage.getItem('userInfo')).loginName;
getMenu();
})
// 监听路由变化
watch(
() => route.path, // 监听 path 变化
(newPath, oldPath) => {
default_active.value = newPath.split('/')[1];
}
);
const goLogin = () => {
// logout().then(res => {
// if(res.code == '0000') {
// ElMessage({
// message: '退出成功!',
// type: 'success',
// })
// localStorage.removeItem('userInfo')
// router.push('/')
// }
// })
}
const getMenu = () => {
// getRouters().then(res => {
// if(res.code == '0000') {
// const result = buildCleanTree(res.result);
// menuTree.value = result;
// default_active.value = route.name;
// }
// })
}
//剔除菜单数据中的按钮数据
const buildCleanTree = source => {
return source
.filter(node => Object.prototype.hasOwnProperty.call(node, 'path')) // 剔除无 path
.map(node => {
// 先递归处理子节点
const children = Array.isArray(node.children)
? buildCleanTree(node.children)
: undefined;
// 如果子节点为空数组，就不带 children；否则带上
return children?.length
? { ...node, children }
: (({ children: _, ...rest }) => rest)(node); // 去掉空 children
});
}
const handleOpen = (key, keyPath) => {
}
</script>
<style scoped>
.home{
height: 100vh;
}
.dropdownBox{
padding-top: 2px;
cursor: pointer;
display: flex;
align-items: flex-end;
}
.dropdownBox:focus-visible{
outline: none;
}
.avatar{
width: 22px;
height: 22px;
background-color: #fff;
border-radius: 22px;
margin-right: 2px;
}
.logo{
width: 30px;
height: 30px;
background-color: #fff;
border-radius: 30px;
margin-right: 10px;
}
.header{
height: 50px;
background-color: #409EFF;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 30px;
}
.header_left{
display: flex;
align-items: center;
color: #fff;
font-weight: bold;
}
.header_right{
display: flex;
align-items: flex-start;
width: 10%;
justify-content: space-between;
}
.el-menu--vertical {
--el-menu-item-height: 40px;
--el-menu-sub-item-height: 40px;
}
</style>
src/views/home.vue
......@@ -4,117 +4,28 @@
<div class="header">
<div class="header_left">
<div class="logo"></div>
<div>消息中心业务服务平台</div>
<div>政企数字运营平台</div>
</div>
<div class="header_right">
<el-badge is-dot>
<el-icon style="font-size: 25px;cursor: pointer;"><BellFilled color="#fff" /></el-icon>
</el-badge>
<el-icon style="font-size: 25px;cursor: pointer;"><QuestionFilled color="#fff" /></el-icon>
<el-dropdown>
<div class="dropdownBox">
<div class="avatar"></div>
<el-icon>
<CaretBottom color="#fff" />
</el-icon>
</div>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item @click="goLogin">退出系统</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
<span style="color: #fff;">{{ userName }}</span>
右边
</div>
</div>
</el-affix>
<el-row style="height: calc(100% - 50px);">
<el-col :span="4">
<el-menu
:default-active="default_active"
:router="true"
style="height: 100%;"
class="side-menu"
>
<TreeNode
v-for="item in menuTree"
:key="item.id"
:menu="item"
/>
</el-menu>
</el-col>
<el-col :span="20" style="padding: 6px;">
<RouterView />
</el-col>
</el-row>
<div style="height: calc(100% - 50px);">
<RouterView />
</div>
</div>
</template>
<script setup>
import { onMounted, ref, watch } from 'vue';
import { CaretBottom, Platform, QuestionFilled, Menu, InfoFilled, HelpFilled, WarningFilled, Briefcase, Promotion, Comment, Tools, Grid, BellFilled, Management } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { RouterView, useRouter, useRoute } from 'vue-router';
import { logout, getRouters } from "@/api/login";
import TreeNode from '@/components/TreeNode.vue';
const router = useRouter();
const route = useRoute();
const default_active = ref('');
const menuTree = ref([]);
const userName = ref('');
// import { logout, getRouters } from "@/api/login";
onMounted(() => {
userName.value = JSON.parse(localStorage.getItem('userInfo')).loginName;
getMenu();
})
// 监听路由变化
watch(
() => route.path, // 监听 path 变化
(newPath, oldPath) => {
default_active.value = newPath.split('/')[1];
}
);
const goLogin = () => {
logout().then(res => {
if(res.code == '0000') {
ElMessage({
message: '退出成功!',
type: 'success',
})
localStorage.removeItem('userInfo')
router.push('/')
}
})
}
const getMenu = () => {
getRouters().then(res => {
if(res.code == '0000') {
const result = buildCleanTree(res.result);
menuTree.value = result;
default_active.value = route.name;
}
})
}
//剔除菜单数据中的按钮数据
const buildCleanTree = source => {
return source
.filter(node => Object.prototype.hasOwnProperty.call(node, 'path')) // 剔除无 path
.map(node => {
// 先递归处理子节点
const children = Array.isArray(node.children)
? buildCleanTree(node.children)
: undefined;
// 如果子节点为空数组，就不带 children；否则带上
return children?.length
? { ...node, children }
: (({ children: _, ...rest }) => rest)(node); // 去掉空 children
});
}
const handleOpen = (key, keyPath) => {
}
</script>
<style scoped>
.home{
......
src/views/login.vue
......@@ -18,7 +18,7 @@
<script setup>
import { useRouter } from 'vue-router'
import { reactive, ref } from 'vue'
import { login, getInfo } from "@/api/login";
// import { login, getInfo } from "@/api/login";
import { ElMessage } from 'element-plus'
const loginForm = reactive({
......@@ -27,20 +27,21 @@
})
const router = useRouter();
const goHome = () => {
login(loginForm).then(res => {
if(res.code == '0000') {
ElMessage({
message: '登录成功!',
type: 'success',
})
getInfo().then(res2 => {
localStorage.setItem('permissions', JSON.stringify(res2.result.permissions))
localStorage.setItem('usersData', JSON.stringify(res2.result.user))
})
localStorage.setItem('userInfo', JSON.stringify(loginForm))
router.push('/home')
}
})
router.push('/home')
// login(loginForm).then(res => {
// if(res.code == '0000') {
// ElMessage({
// message: '登录成功!',
// type: 'success',
// })
// getInfo().then(res2 => {
// localStorage.setItem('permissions', JSON.stringify(res2.result.permissions))
// localStorage.setItem('usersData', JSON.stringify(res2.result.user))
// })
// localStorage.setItem('userInfo', JSON.stringify(loginForm))
// router.push('/home')
// }
// })
}
//解析路由参数
// 示例用法
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment