瀏覽代碼

commit

master
Soleilw 1 年之前
父節點
當前提交
e5f2dfdcb0

+ 23
- 2
src/components/job/swiper/index.vue 查看文件

<div class="login-content"> <div class="login-content">
<a-image width="100vw" height="41vh" <a-image width="100vw" height="41vh"
src="https://mdn.alipayobjects.com/yuyan_qk0oxh/afts/img/V-_oS6r-i7wAAAAAAAAAAAAAFl94AQBr" /> 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-row type="flex" justify="center">
<a-col span="18"> <a-col span="18">
<a-row type="flex" justify="end"> <a-row type="flex" justify="end">
<a-input v-model:value="value" placeholder="验证码" /> <a-input v-model:value="value" placeholder="验证码" />
</a-col> </a-col>
<a-col span="24"> <a-col span="24">
<a-button type="primary" block>登录/注册</a-button>
<a-button type="primary" block @click="login">登录/注册</a-button>
</a-col> </a-col>
<a-col span="24"> <a-col span="24">
忘记密码? 忘记密码?


<script setup lang="ts"> <script setup lang="ts">
import { ref, computed } from 'vue'; 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> </script>


<style lang="less" scoped> <style lang="less" scoped>

+ 74
- 8
src/components/layout/header/aHeader.vue 查看文件

<template> <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> </template>
<script lang="ts" setup> <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> </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> </style>

+ 10
- 29
src/components/layout/index.vue 查看文件

<template> <template>
<div style="min-height: 100vh;"> <div style="min-height: 100vh;">
<a-layout class="layout" style="width: 100%; display: flex;align-items: center;justify-items: center;"> <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> </a-layout-header>
<!-- <layout-swiper ></layout-swiper> -->
<!-- <layout-tabs></layout-tabs> -->
<a-layout-content> <a-layout-content>
<router-view></router-view> <router-view></router-view>
</a-layout-content> </a-layout-content>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { ref, computed } from 'vue'; import { ref, computed } from 'vue';
import { router } from '@/router';
import ASider from './sider/aSider.vue';
import AFooter from './footer/index.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> </script>
<style lang="less">
<style lang="less" scoped>
::-webkit-scrollbar { ::-webkit-scrollbar {
/* 设置滚动条宽度 */ /* 设置滚动条宽度 */
width: 0px; width: 0px;
width: 120px; width: 120px;
height: 31px; height: 31px;
margin: 16px 34px 16px 0; margin: 16px 34px 16px 0;
background: #000;
background: #fff;
}
.login-label {
} }


.ant-layout-content { .ant-layout-content {
background-color: #f0f0f0 !important; background-color: #f0f0f0 !important;
padding-top: 64px; padding-top: 64px;
padding-bottom: 30px; padding-bottom: 30px;
} }


.ant-layout-footer { .ant-layout-footer {

src/components/layout/sider/aSider.vue → src/components/layout/menu/aMenu.vue 查看文件

let { onMenu, routerCur, routerArrayCur, routerArrayParentChildCur } = useMenu(); let { onMenu, routerCur, routerArrayCur, routerArrayParentChildCur } = useMenu();
let selectedMenu = computed(() => { let selectedMenu = computed(() => {
console.log(131,routerCur())
let newSelectedMenu = [routerCur()]; let newSelectedMenu = [routerCur()];
return newSelectedMenu; return newSelectedMenu;
}) })

+ 0
- 0
src/components/layout/sider/aSider.less 查看文件


+ 20
- 3
src/router/routes.ts 查看文件

import { ref , watch } from 'vue';
import { store } from '@/store/index';
import type { AppRouteRecordRaw } from '@/router/types'; import type { AppRouteRecordRaw } from '@/router/types';
import { HomeOutlined } from '@ant-design/icons-vue'; import { HomeOutlined } from '@ant-design/icons-vue';


// } // }
// } // }



// layout路由 // layout路由
export const LayoutRoute: AppRouteRecordRaw = {
export const LayoutRoute : AppRouteRecordRaw = {
path: '', path: '',
name: 'layout', name: 'layout',
component: Layout, component: Layout,
// children: [ // children: [
// ...routesManageModuleList // ...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 = [ export const basicRoutes = [
LayoutRoute LayoutRoute
]
]

+ 4
- 4
src/store/index.ts 查看文件

import { createStore } from 'vuex'; import { createStore } from 'vuex';
import { state } from './state'; import { state } from './state';
import { mutations } from './mutations'; import { mutations } from './mutations';
// import { permissionsModule } from './usePermissionStore';
import { permissionsModule } from './usePermissionStore';


export const store = createStore({ export const store = createStore({
state, state,
mutations, mutations,
// modules: {
// permissions: permissionsModule,
// }
modules: {
permissions: permissionsModule,
}
}) })



+ 16
- 1
src/store/mutations.ts 查看文件

state.routeName = payload.routeName; 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 = { export const mutations = {
getRouteName
getRouteName,
setShowLoginBox,
getLogined,
getRoleName
} }

+ 4
- 1
src/store/state.ts 查看文件

import { StateType } from './types' import { StateType } from './types'


export const state = <StateType>{ export const state = <StateType>{
routeName: ''
routeName: '',
showLoginBox: false,
logined: false,
roleName: ''
} }

+ 4
- 1
src/store/types.ts 查看文件

export interface StateType { export interface StateType {
routeName ?: String
routeName ?: String,
showLoginBox ?: Boolean,
logined ?: Boolean,
roleName ?: String,
} }

+ 56
- 55
src/store/usePermissionStore.ts 查看文件

// 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
};

+ 1
- 1
vite.config.ts 查看文件

// https://vitejs.dev/config/ // https://vitejs.dev/config/
export default defineConfig({ export default defineConfig({
plugins: [vue()], plugins: [vue()],
base: '/web/',
// base: '/web/',
build: { build: {
outDir: 'dist' outDir: 'dist'
}, },

Loading…
取消
儲存