Skip to content

H
horse
Commit c09a1d60 authored by 罗超's avatar 罗超
Browse files
Options

1

parent b2f446e1
Hide whitespace changes
Inline Side-by-side
Showing with 150 additions and 92 deletions
src/App.vue
View file @ c09a1d60
......@@ -10,4 +10,5 @@ export default defineComponent({
</script>
<style lang="sass">
@import url('./css/font.sass')
@import url('//at.alicdn.com/t/font_2930340_slk9lu50bhg.css')
</style>
src/boot/permission.ts
View file @ c09a1d60
......@@ -48,10 +48,8 @@ router.beforeEach((to, from, next) => {
//检查是否有权限访问
const authMenu = allAuth.findIndex((x: AuthMenuType) => {
console.log(x.menuUrl,to.path)
return x.menuUrl == to.path
})
console.log(authMenu)
if (authMenu != -1) {
next({
...to,
......
src/components/layout/navs.vue
View file @ c09a1d60
<template>
<q-list>
<nav-item v-for="(x,i) in menus" :menu="x" :key="i"></nav-item>
</q-list>
<q-list>
<div class="firstMenus">
<div v-for="(item) in menus" :key="item.MenuId">
<div class="firstMenusTitle">
<i :class="`iconfont icon-${item.MenuIcon}`" style="margin-right: 5px;"></i>
{{ item.MenuName }}
</div>
<div v-if="item.SubList" class="secondMenus">
<div v-for="_item in item.SubList" :key="_item.MenuId" class="secondMenusTitle">
<div
class="secondMenusText"
:class="{ 'menuActive': currentPath == _item.MenuUrl }"
@click="changeMenu(_item.MenuUrl)"
>{{ _item.MenuName }}</div>
</div>
</div>
</div>
</div>
</q-list>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import navItem from './nav-item.vue'
import { defineComponent, inject } from 'vue'
import router from '@/router'
export default defineComponent({
components: { navItem },
name: 'navs',
props: {
menus: {
type: Array,
required: true
}
},
setup(props) {
let currentPath = inject('currentPath')
let changeMenu = (url: string) => {
router.push({
path: url
})
}
return {
currentPath,
changeMenu
}
}
})
</script>
<style></style>
<style lang="scss" scoped>
.firstMenus {
color: #fff;
.firstMenusTitle {
font-weight: 700;
height: 40px;
line-height: 40px;
padding: 0 20px;
}
}
.secondMenusTitle {
height: 30px;
line-height: 30px;
font-size: 14px;
cursor: pointer;
padding: 0 4px;
border-radius: 5px;
box-shadow: 0 30px 53px 0 rgb(0 0 0 / 12%);
position: relative;
color: #b2b4c7;
display: inline-block;
&:nth-child(odd) {
padding-left: 40px;
padding-right: 0;
min-width: 120px;
}
&:nth-child(even) {
padding-left: 14px;
padding-right: 0;
min-width: 80px;
}
.secondMenusText {
cursor: pointer;
padding: 0 4px;
display: inline-block;
line-height: 21px;
border-radius: 5px;
box-shadow: 0 30px 53px 0 rgb(0 0 0 / 12%);
position: relative;
}
.menuActive {
color: #fff;
background-color: #3470ff;
}
}
</style>
src/layouts/MainLayout.vue
View file @ c09a1d60
<template>
<q-layout view="lhh lpR lFf">
<q-layout view="lhh lpR lFf" class="layout">
<!-- <q-header elevated>
<q-toolbar>
<q-btn flat dense round icon="menu" aria-label="Menu" @click="toggleLeftDrawer" />
......@@ -8,26 +8,37 @@
<div>Quasar v{{ $q.version }}</div>
</q-toolbar>
</q-header> -->
</q-header>-->
<q-drawer v-model="leftDrawerOpen" show-if-above>
<q-drawer v-model="leftDrawerOpen" show-if-above :mini="miniState" :width="260">
<div class="full-height column">
<div class="flex q-px-md q-py-lg items-center">
<div class="flex q-px-md q-py-lg items-center header-logo">
<img src="../assets/images/md-logo.png" style="width: 40%" />
<q-badge style="background: #cbcfe0; height: 18px" class="q-ml-md" transparent>Alpha</q-badge>
<i class="iconfont icon-toggle-left" style="font-size:24px" v-if="!miniState"></i>
<i class="iconfont icon-toggle-right" style="font-size:24px" v-if="miniState"></i>
</div>
<q-scroll-area :thumb-style="scrollStyle.thumbStyle" :bar-style="scrollStyle.barStyle" class="full-height col">
<q-scroll-area
:thumb-style="scrollStyle.thumbStyle"
:bar-style="scrollStyle.barStyle"
class="full-height col"
>
<div class="q-px-md navs-list">
<Navs :menus="menuList"></Navs>
</div>
</q-scroll-area>
<div class="q-pa-md row items-center">
<!-- <div class="q-pa-md row items-center">
<q-avatar rounded size="40px">
<img :src="user.userAvatar" alt="">
<img :src="user.userAvatar" alt />
</q-avatar>
<div class="q-ml-md pfb col" style="font-size:20px">{{user.nickName}}</div>
<svg-icon :size="24" color="hover-g-p svg-icon" icon="Navigation/Sign-out.svg" tips="退出账户" @click="loginOut"></svg-icon>
</div>
<div class="q-ml-md pfb col" style="font-size:20px">{{ user.nickName }}</div>
<svg-icon
:size="24"
color="hover-g-p svg-icon"
icon="Navigation/Sign-out.svg"
tips="退出账户"
@click="loginOut"
></svg-icon>
</div>-->
</div>
</q-drawer>
......@@ -42,18 +53,24 @@ const linksList = [
{
MenuId: 1,
MenuName: '渠道管理',
MenuIcon: 'school',
MenuIcon: 'target-full',
SubList: [
{
MenuId: 8,
MenuName: '我的渠道',
MenuIcon: 'school',
MenuIcon: 'target-full',
MenuUrl: '/index'
},
{
MenuId: 9,
MenuName: '渠道市场',
MenuIcon: 'school',
MenuIcon: 'left',
MenuUrl: 'https://quasar.dev'
},
{
MenuId: 9,
MenuName: '渠道市场1',
MenuIcon: 'right',
MenuUrl: 'https://quasar.dev'
}
]
......@@ -64,12 +81,12 @@ const linksList = [
MenuIcon: 'school',
SubList: [
{
MenuId: 10-1,
MenuId: 10 - 1,
MenuName: '素材分组',
MenuIcon: 'school',
MenuUrl: '/groupingManage'
},
]
},
{
......@@ -78,50 +95,14 @@ const linksList = [
MenuIcon: 'school',
SubList: [
{
MenuId: 11-1,
MenuId: 11 - 1,
MenuName: '客户设置',
MenuIcon: 'school',
MenuUrl: '/customerSetup'
},
]
},
{
MenuId: 2,
MenuName: '数据看板',
MenuIcon: 'code',
MenuUrl: 'https://github.com/quasarframework'
},
{
MenuId: 3,
MenuName: '数据分析',
MenuIcon: 'chat',
MenuUrl: 'https://chat.quasar.dev'
},
{
MenuId: 4,
MenuName: '画像洞察',
MenuIcon: 'record_voice_over',
MenuUrl: 'https://forum.quasar.dev'
},
{
MenuId: 5,
MenuName: '客户线索',
MenuIcon: 'rss_feed',
MenuUrl: 'https://twitter.quasar.dev'
},
{
MenuId: 6,
MenuName: '数据管理',
MenuIcon: 'public',
MenuUrl: 'https://facebook.quasar.dev'
},
{
MenuId: 7,
MenuName: '平台管理',
MenuIcon: 'favorite',
MenuUrl: 'https://awesome.quasar.dev'
}
]
import { defineComponent, ref, reactive, provide, watch } from 'vue'
......@@ -148,14 +129,16 @@ export default defineComponent({
watch(useRouterCurrent, o => {
currentRouterPath.value = o.currentRoute.path
})
const user=getStoreGetter<UserGetter>('user', 'getUser')
const loginOut=()=>{
const user = getStoreGetter<UserGetter>('user', 'getUser')
const loginOut = () => {
dispatchAction<UserActionsType>('user', 'setUserSignout', null)
router.push({
path: '/login'
})
}
let miniState = ref(false)
return {
miniState,
menuList: linksList,
leftDrawerOpen,
scrollStyle,
......@@ -166,12 +149,22 @@ export default defineComponent({
})
</script>
<style>
.layout .q-drawer {
background: linear-gradient(180deg, #1c2658, #0f152e);
}
.navs-list .q-item {
border-radius: 8px;
font-size: 16px !important;
color: #788292 !important;
}
.navs-list .q-item i {
font-size: 1.4rem !important;
</style>
<style lang="scss" scoped>
.header-logo {
display: flex;
justify-content: space-between;
align-items: center;
height: 70px;
padding: 0 20px 0 20px;
color:#fff;
}
</style>
src/module/user/loginModule.ts
View file @ c09a1d60
// import { ResultType } from '@/@types/enumHelper'
// import router from '@/router'
import UserActions from '@/store/modules/user/actions'//{ UserActionsType }
import UserActions from '@/store/modules/user/actions' //{ UserActionsType }
// import { UserGetter } from '@/store/modules/user/getters'
// import { dispatchAction, getStoreGetter, setStoreState } from '@/store/utils'
......@@ -44,12 +44,9 @@ const userUserLoginModule = () => {
Account: userModel.username,
Password: userModel.password
}
// dispatchAction<UserActionsType>('user', 'userLogin', param)
UserActions.userLogin(param)
stateManager.subLogin = false
UserActions.userLogin(param)
stateManager.subLogin = false
}
}
}
......
src/store/modules/user/actions.ts
View file @ c09a1d60
......@@ -48,19 +48,20 @@ const userActions = {
// if (auths != ResultType.EmptyArray) {
// Object.assign(menus, ...auths)
// }
message.successMsg('登录成功')
setStoreState('user', 'menuList', res.data.Data.MenuList)
console.log(55, res)
const token = {
token_type: 'login_auth',
access_token: res.data.Data.Token
if (res.data.Code == 1) {
message.successMsg('登录成功')
setStoreState('user', 'loginUserInfo', res.data.Data)
setStoreState('user', 'menuList', res.data.Data.MenuList)
const token = {
token_type: 'login_auth',
access_token: res.data.Data.Token
}
const expireTime = 60 * 72 * 1000 + new Date().getTime()
setStoreState('user', 'token', { ...token, expireTime })
router.push({
path: '/index'
})
}
console.log(56, token)
const expireTime = 60 * 72 * 1000 + new Date().getTime()
setStoreState('user', 'token', { ...token, expireTime })
router.push({
path: '/index'
})
})
//测试伪造数据
......@@ -77,12 +78,10 @@ const userActions = {
userAvatar: 'https://preview.keenthemes.com/metronic8/demo7/assets/media/avatars/150-26.jpg'
}
setStoreState('user', 'userDetail', loginUser)
}
}
type UserActionsType = typeof userActions
console.log(73, typeof userActions)
export { UserActionsType }
export default userActions
src/store/modules/user/getters.ts
View file @ c09a1d60
......@@ -8,13 +8,12 @@ const userGetter = {
},
getUserAllAuth() {
const menuList: any[] = store.state.user.menuList
console.log((menuList.length > 0 ? menuList : ResultType.EmptyArray),menuList.length,menuList)
return menuList.length > 0 ? menuList : ResultType.EmptyArray
},
getUser(){
const userInfo=store.state.user.userDetail
getUser() {
const userInfo = store.state.user.userDetail
return userInfo
}
},
}
type UserGetter = typeof userGetter
......
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