| @@ -2,7 +2,7 @@ | |||
| <div class="login-content"> | |||
| <a-image width="100vw" height="41vh" | |||
| src="https://mdn.alipayobjects.com/yuyan_qk0oxh/afts/img/V-_oS6r-i7wAAAAAAAAAAAAAFl94AQBr" /> | |||
| <div class="login-position content-padding-inline"> | |||
| <div v-if="showLoginBox" class="login-position content-padding-inline"> | |||
| <a-row type="flex" justify="center"> | |||
| <a-col span="18"> | |||
| <a-row type="flex" justify="end"> | |||
| @@ -21,7 +21,7 @@ | |||
| <a-input v-model:value="value" placeholder="验证码" /> | |||
| </a-col> | |||
| <a-col span="24"> | |||
| <a-button type="primary" block>登录/注册</a-button> | |||
| <a-button type="primary" block @click="login">登录/注册</a-button> | |||
| </a-col> | |||
| <a-col span="24"> | |||
| 忘记密码? | |||
| @@ -41,6 +41,27 @@ | |||
| <script setup lang="ts"> | |||
| import { ref, computed } from 'vue'; | |||
| import { store } from '@/store/index'; | |||
| const showLoginBox = computed(() => { | |||
| return store.state.showLoginBox | |||
| }) | |||
| const login = () => { | |||
| store.commit('setShowLoginBox', { | |||
| showLoginBox: false | |||
| }) | |||
| store.commit('getLogined', { | |||
| logined: true | |||
| }) | |||
| store.commit('getRoleName', { | |||
| roleName: 'company' | |||
| }) | |||
| sessionStorage.setItem('role', 'company') | |||
| sessionStorage.setItem('token', 'admin') | |||
| } | |||
| </script> | |||
| <style lang="less" scoped> | |||
| @@ -1,14 +1,80 @@ | |||
| <template> | |||
| <a-row type="flex" justify="center"> | |||
| <a-col span="18"> | |||
| <a-row> | |||
| <a-col span="4"> | |||
| <div class="logo" /> | |||
| </a-col> | |||
| <a-col span="16" style="color: aliceblue;"> | |||
| <a-top-menu></a-top-menu> | |||
| </a-col> | |||
| <a-col span="4"> | |||
| <div class="login-label" @click="toLogin"> | |||
| <template v-if="logined"> | |||
| <a-dropdown placement="bottomRight"> | |||
| <template #overlay> | |||
| <a-menu @click="handleMenuClick"> | |||
| <a-menu-item key="1"> | |||
| <a-space :size="80"> | |||
| <div>发布中</div> | |||
| <div>0分</div> | |||
| </a-space> | |||
| </a-menu-item> | |||
| <a-menu-item key="2"> | |||
| <UserOutlined /> | |||
| 2nd menu item | |||
| </a-menu-item> | |||
| <a-menu-item key="3"> | |||
| <UserOutlined /> | |||
| 3rd item | |||
| </a-menu-item> | |||
| </a-menu> | |||
| </template> | |||
| <a-space :size="10"> | |||
| <div style="color: aliceblue;">admin</div> | |||
| <a-avatar style="color: #f56a00; background-color: #fde3cf">U</a-avatar> | |||
| </a-space> | |||
| </a-dropdown> | |||
| </template> | |||
| <template v-else> | |||
| 登录/注册 | |||
| </template> | |||
| </div> | |||
| </a-col> | |||
| </a-row> | |||
| </a-col> | |||
| </a-row> | |||
| </template> | |||
| <script lang="ts" setup> | |||
| import { ref, onMounted, computed } from 'vue'; | |||
| import { store } from '@/store'; | |||
| import { router } from '@/router'; | |||
| import { MenuUnfoldOutlined, MenuFoldOutlined, LogoutOutlined } from '@ant-design/icons-vue'; | |||
| import { ref, onMounted, computed, defineProps, defineEmits } from 'vue'; | |||
| import ATopMenu from '@/components/layout/menu/aMenu.vue'; | |||
| import { store } from '@/store/index'; | |||
| const emit = defineEmits(); | |||
| const toLogin = () => { | |||
| store.commit('setShowLoginBox', { | |||
| showLoginBox: true | |||
| }) | |||
| } | |||
| const logined = computed(() => { | |||
| return store.state.logined | |||
| }) | |||
| </script> | |||
| <style> | |||
| <style lang="less" scoped> | |||
| .logo { | |||
| float: left; | |||
| width: 120px; | |||
| height: 31px; | |||
| margin: 16px 34px 16px 0; | |||
| background: #fff; | |||
| } | |||
| .login-label { | |||
| height: 100%; | |||
| display: flex; | |||
| align-items: center; | |||
| justify-content: flex-end; | |||
| color: #fff; | |||
| } | |||
| </style> | |||
| @@ -1,27 +1,9 @@ | |||
| <template> | |||
| <div style="min-height: 100vh;"> | |||
| <a-layout class="layout" style="width: 100%; display: flex;align-items: center;justify-items: center;"> | |||
| <a-layout-header style="position: fixed; z-index: 99;background: #0a130d;width: 100%;"> | |||
| <a-row type="flex" justify="center"> | |||
| <a-col span="18"> | |||
| <a-row> | |||
| <a-col span="4"> | |||
| <div class="logo" /> | |||
| </a-col> | |||
| <a-col span="16"> | |||
| <a-sider></a-sider> | |||
| </a-col> | |||
| <a-col span="4"> | |||
| <div | |||
| style="display: flex;flex-direction: column;align-items: flex-end;justify-content: center;"> | |||
| 登录/注册</div> | |||
| </a-col> | |||
| </a-row> | |||
| </a-col> | |||
| </a-row> | |||
| <a-layout-header style="position: fixed;z-index: 99;background: #0a130d;width: 100%;"> | |||
| <a-header></a-header> | |||
| </a-layout-header> | |||
| <!-- <layout-swiper ></layout-swiper> --> | |||
| <!-- <layout-tabs></layout-tabs> --> | |||
| <a-layout-content> | |||
| <router-view></router-view> | |||
| </a-layout-content> | |||
| @@ -34,16 +16,11 @@ | |||
| </template> | |||
| <script lang="ts" setup> | |||
| import { ref, computed } from 'vue'; | |||
| import { router } from '@/router'; | |||
| import ASider from './sider/aSider.vue'; | |||
| import AFooter from './footer/index.vue'; | |||
| import { MenuUnfoldOutlined, MenuFoldOutlined, } from '@ant-design/icons-vue'; | |||
| import AHeader from './header/aHeader.vue'; | |||
| const toRouter = () => { | |||
| router.push('/job') | |||
| } | |||
| </script> | |||
| <style lang="less"> | |||
| <style lang="less" scoped> | |||
| ::-webkit-scrollbar { | |||
| /* 设置滚动条宽度 */ | |||
| width: 0px; | |||
| @@ -54,7 +31,11 @@ | |||
| width: 120px; | |||
| height: 31px; | |||
| margin: 16px 34px 16px 0; | |||
| background: #000; | |||
| background: #fff; | |||
| } | |||
| .login-label { | |||
| } | |||
| .ant-layout-content { | |||
| @@ -64,7 +45,7 @@ | |||
| background-color: #f0f0f0 !important; | |||
| padding-top: 64px; | |||
| padding-bottom: 30px; | |||
| } | |||
| .ant-layout-footer { | |||
| @@ -35,6 +35,7 @@ | |||
| let { onMenu, routerCur, routerArrayCur, routerArrayParentChildCur } = useMenu(); | |||
| let selectedMenu = computed(() => { | |||
| console.log(131,routerCur()) | |||
| let newSelectedMenu = [routerCur()]; | |||
| return newSelectedMenu; | |||
| }) | |||
| @@ -1,3 +1,5 @@ | |||
| import { ref , watch } from 'vue'; | |||
| import { store } from '@/store/index'; | |||
| import type { AppRouteRecordRaw } from '@/router/types'; | |||
| import { HomeOutlined } from '@ant-design/icons-vue'; | |||
| @@ -17,8 +19,9 @@ import { routesManageModuleList } from '@/router/manageDynamic'; | |||
| // } | |||
| // } | |||
| // layout路由 | |||
| export const LayoutRoute: AppRouteRecordRaw = { | |||
| export const LayoutRoute : AppRouteRecordRaw = { | |||
| path: '', | |||
| name: 'layout', | |||
| component: Layout, | |||
| @@ -29,9 +32,23 @@ export const LayoutRoute: AppRouteRecordRaw = { | |||
| // children: [ | |||
| // ...routesManageModuleList | |||
| // ] | |||
| } | |||
| let roleName = ref<String>(store.state.roleName) | |||
| console.log(roleName) | |||
| watch(() => roleName, (newVal) => { | |||
| if(roleName == newVal) { | |||
| LayoutRoute.children = [...routesModuleList]; | |||
| LayoutRoute.redirect = '/job/home'; | |||
| } else { | |||
| LayoutRoute.children = [...routesManageModuleList] | |||
| LayoutRoute.redirect = '/manage/home'; | |||
| } | |||
| }) | |||
| console.log(LayoutRoute) | |||
| export const basicRoutes = [ | |||
| LayoutRoute | |||
| ] | |||
| ] | |||
| @@ -1,13 +1,13 @@ | |||
| import { createStore } from 'vuex'; | |||
| import { state } from './state'; | |||
| import { mutations } from './mutations'; | |||
| // import { permissionsModule } from './usePermissionStore'; | |||
| import { permissionsModule } from './usePermissionStore'; | |||
| export const store = createStore({ | |||
| state, | |||
| mutations, | |||
| // modules: { | |||
| // permissions: permissionsModule, | |||
| // } | |||
| modules: { | |||
| permissions: permissionsModule, | |||
| } | |||
| }) | |||
| @@ -2,6 +2,21 @@ const getRouteName = (state, payload) => { | |||
| state.routeName = payload.routeName; | |||
| } | |||
| const setShowLoginBox = (state, payload) => { | |||
| state.showLoginBox = payload.showLoginBox; | |||
| } | |||
| const getLogined = (state, payload) => { | |||
| state.logined = payload.logined; | |||
| } | |||
| const getRoleName = (state, payload) => { | |||
| state.roleName = payload.roleName; | |||
| } | |||
| export const mutations = { | |||
| getRouteName | |||
| getRouteName, | |||
| setShowLoginBox, | |||
| getLogined, | |||
| getRoleName | |||
| } | |||
| @@ -1,5 +1,8 @@ | |||
| import { StateType } from './types' | |||
| export const state = <StateType>{ | |||
| routeName: '' | |||
| routeName: '', | |||
| showLoginBox: false, | |||
| logined: false, | |||
| roleName: '' | |||
| } | |||
| @@ -1,3 +1,6 @@ | |||
| export interface StateType { | |||
| routeName ?: String | |||
| routeName ?: String, | |||
| showLoginBox ?: Boolean, | |||
| logined ?: Boolean, | |||
| roleName ?: String, | |||
| } | |||
| @@ -1,55 +1,56 @@ | |||
| // import { Module } from 'vuex'; | |||
| // import { useAsRouter } from '@/hooks/useAsRouter'; | |||
| // import { routesModuleList } from '@/router/dynamic'; | |||
| // import { LayoutRoute } from '@/router/routes'; | |||
| // const { routerDynamic, routerAdd, routerInit } = useAsRouter(); | |||
| // export interface PermissionState { | |||
| // menuList : string[]; | |||
| // permissionList : string[] | null; | |||
| // breadcrumbList : string[]; | |||
| // } | |||
| // const state : PermissionState = { | |||
| // menuList: [], | |||
| // permissionList: null, | |||
| // breadcrumbList: [] | |||
| // }; | |||
| // const mutations = { | |||
| // SET_PERMISSION(state, routes) { | |||
| // state.permissionList = routes | |||
| // }, | |||
| // SET_MENU(state, menu) { | |||
| // state.menuList = menu | |||
| // } | |||
| // }; | |||
| // const actions = { | |||
| // async FETCH_PERMISSION({ | |||
| // commit | |||
| // }) { | |||
| // try { | |||
| // // let res = await LOGIN.permissions(); | |||
| // // let arr = res.data.data; | |||
| // let arr = ['permission','role', 'account', 'company', 'vip', 'member', 'job', 'department', 'jobSeeker', 'jobResume', 'jobFair','jobFairList', 'information' ,'section','article', 'list']; | |||
| // let routes = routerDynamic(arr, routesModuleList); | |||
| // LayoutRoute.children.push(...routes); | |||
| // commit('SET_MENU', LayoutRoute.children); | |||
| // routerAdd(LayoutRoute); | |||
| // let initialRoutes = routerInit(); | |||
| // commit('SET_PERMISSION', [...initialRoutes]); | |||
| // } catch { | |||
| // } | |||
| // } | |||
| // }; | |||
| // export const permissionsModule : Module<PermissionState> = { | |||
| // namespaced: true, | |||
| // state, | |||
| // mutations, | |||
| // actions | |||
| // }; | |||
| import { Module } from 'vuex'; | |||
| import { useAsRouter } from '@/hooks/useAsRouter'; | |||
| import { routesModuleList } from '@/router/dynamic'; | |||
| import { routesManageModuleList } from '@/router/manageDynamic'; // 企业管理 | |||
| import { LayoutRoute } from '@/router/routes'; | |||
| const { routerDynamic, routerAdd, routerInit } = useAsRouter(); | |||
| export interface PermissionState { | |||
| menuList : string[]; | |||
| permissionList : string[] | null; | |||
| breadcrumbList : string[]; | |||
| } | |||
| const state : PermissionState = { | |||
| menuList: [], | |||
| permissionList: null, | |||
| breadcrumbList: [] | |||
| }; | |||
| const mutations = { | |||
| SET_PERMISSION(state, routes) { | |||
| state.permissionList = routes | |||
| }, | |||
| SET_MENU(state, menu) { | |||
| state.menuList = menu | |||
| } | |||
| }; | |||
| const actions = { | |||
| async FETCH_PERMISSION({ | |||
| commit | |||
| }) { | |||
| try { | |||
| if(sessionStorage.getItem('role') == "company") { | |||
| LayoutRoute.redirect = '/manage/home' | |||
| LayoutRoute.children = routesManageModuleList | |||
| routerAdd(LayoutRoute); | |||
| } else { | |||
| LayoutRoute.children = routesModuleList | |||
| routerAdd(LayoutRoute); | |||
| } | |||
| } catch { | |||
| } | |||
| } | |||
| }; | |||
| export const permissionsModule : Module<PermissionState> = { | |||
| namespaced: true, | |||
| state, | |||
| mutations, | |||
| actions | |||
| }; | |||
| @@ -5,7 +5,7 @@ import path from 'path' | |||
| // https://vitejs.dev/config/ | |||
| export default defineConfig({ | |||
| plugins: [vue()], | |||
| base: '/web/', | |||
| // base: '/web/', | |||
| build: { | |||
| outDir: 'dist' | |||
| }, | |||