WxxyDeveloper/JSL_OrganizeInternalOAWeb
9
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

侧边栏2

Browse Source
This commit is contained in:
妖姐 2024-03-11 01:46:29 +08:00
parent 1af09a21d4
commit 94c26c35a6
2 changed files with 114 additions and 105 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

85
src/components/HomeComponents/NavBar.vue
View File

@ -18,8 +18,6 @@
<span class="text-gray-900 mr-6 ">{{ username }}</span>
<img :src="avatar" alt="User Avatar" class="w-10 h-10 rounded-full " @click="showDrawer">
</div>
<a-drawer
v-model:open="open"
class="custom-class"
@ -40,28 +38,24 @@
</div>
</template>
<div class="flex flex-col space-y-4 mb-4 ">
<span class="lg:hover:text-blue-700" ><UserOutlined />我的项目</span>
<span class="lg:hover:text-blue-700" ><MailOutlined />消息</span>
<span class="lg:hover:text-blue-700"><BellOutlined />日报</span>
<span class="lg:hover:text-blue-700" @click="JumpPersonalBelonging"><UserOutlined class="mr-1.5"/>我的项目</span>
<span class="lg:hover:text-blue-700" @click="JumpMessage" ><MailOutlined class="mr-1.5"/>消息</span>
<span class="lg:hover:text-blue-700" @click="JumpDailyPaper"><BellOutlined class="mr-1.5"/>日报</span>
</div>
<div class="flex flex-col space-y-4">
<hr class="mb-2">
<span class="lg:hover:text-blue-700"><ToolOutlined />我管理的</span>
<span class="lg:hover:text-blue-700" @click="JumpMyManage"><ToolOutlined class="mr-1.5"/>我管理的</span>
<hr>
<span class=" lg:hover:text-blue-700"><MessageOutlined />个人信息管理</span>
<span class=" lg:hover:text-blue-700" @click="JumpPersonalInformation"><MessageOutlined class="mr-1.5" />个人信息管理</span>
<div v-if="role === true" class="flex flex-col space-y-4">
<hr>
<span class=" lg:hover:text-blue-700" ><UserOutlined />我负责的</span>
<span class=" lg:hover:text-blue-700" @click="JumpMyResponsible" ><UserOutlined class="mr-1.5" />我负责的</span>
</div>
</div>
<div class="fixed bottom-0 right-0 bg-white w-[24.5vw] h-[10vh] items-center ">
<span @click="exitLogin" class="bg-gray-50 lg:hover:text-blue-400 text-lg bottom-2 fixed ">退出登录</span>
</div>
<!-- <a-button type="primary" ghost>退出登录</a-button>-->
<span @click="exitLogin" class="bg-gray-50 lg:hover:text-blue-400 text-lg bottom-2 fixed right-2">退出登录</span>
</a-drawer>
</div>
@ -124,14 +118,13 @@
</template>
<script setup>
import {onMounted, reactive, ref} from "vue";
import {onMounted, ref} from "vue";
import requests from "../../js/request.js";
import {message} from "ant-design-vue";
import {useRouter} from "vue-router";
import {BellOutlined, MailOutlined, MessageOutlined, ToolOutlined, UserOutlined} from '@ant-design/icons-vue';
const router = useRouter()
const closable = ref(false)
const isDropdownOpen = ref(false);
const textColor = ref("black");
@ -139,22 +132,35 @@ const isLoggedIn = ref(false);
const username =ref('') ;
const avatar =ref('')
const token = window.localStorage.getItem('token')
const states = reactive({
data:[],
})
const role =ref(false)
// 侧边栏
const open = ref(false);
const afterOpenChange = bool => {
console.log('open', bool);
};
const showDrawer = () => {
open.value = true;
};
function toggleDropdown(){
isDropdownOpen.value = !isDropdownOpen.value;
}
function changeColor() {
// 当按钮被点击时，将文字颜色改为蓝色
textColor.value = 'blue';
}
function exitLogin(){
requests.logout(token).then((res) => {
if(res.data.code === 200){
router.push("/login")
console.log(res)
message.success("退出成功！")
}else{
message.error("退出失败！")
}
})
}
onMounted(() => {
requests.userGetProfile(token).then((res)=>{
@ -173,27 +179,26 @@ onMounted(() => {
router.push("/login")
}
})
// if(token !=null){
// isLoggedIn.value = true;
// username.value = window.localStorage.getItem('username');
// }
// 假设在登录成功后，从服务器获取用户信息
// 然后更新data中的相关数据
})
// 侧边栏
const open = ref(false);
const afterOpenChange = bool => {
console.log('open', bool);
};
const showDrawer = () => {
open.value = true;
};
// 跳转
function JumpPersonalBelonging (){
router.push("/WorkLoad/PersonalBelongings")
}
function JumpMessage (){
router.push("WorkLoad/Message")
}
function JumpDailyPaper (){
router.push("/WorkLoad/DailyPaper")
}
function JumpMyManage (){
router.push("/WorkLoad/I_Manage")
}
function JumpPersonalInformation (){
router.push("/WorkLoad/PersonalInformation")
}
// function MyResponsible(){
// router.push("")
// }
</script>

132
src/components/WorkLoadComponents/Header.vue
View File

@ -1,69 +1,70 @@
<template>
<div class="flex flex-col">
<nav class="text-base z-50 sticky top-0 bg-white border-gray-200">
<!-- <div class="text-sky-600">000</div> -->
<div class="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4">
<a class="flex items-center space-x-3 rtl:space-x-reverse" href="/src/js">
<span class="self-center text-2xl font-semibold whitespace-nowrap">LOGO</span>
</a>
<button aria-controls="navbar-dropdown" aria-expanded="false" class="inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200" data-collapse-toggle="navbar-dropdown" type="button">
<span class="sr-only">Open main menu</span>
<svg aria-hidden="true" class="w-5 h-5" fill="none" viewBox="0 0 17 14" xmlns="http://www.w3.org/2000/svg">
<path d="M1 1h15M1 7h15M1 13h15" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
</svg>
</button>
<div class="flex md:order-2 md:space-x-0 rtl:space-x-reverse">
<a class="text-black focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-center" href="/login">
登录 |
</a>
<a class="text-black focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg pl-2 text-center" href="/register">
注册
</a>
</div>
<div id="navbar-dropdown" class="w-full md:block md:w-auto">
<ul class="flex flex-col font-medium p-4 md:p-0 mt-4 border border-gray-100 rounded-lg bg-gray-50 md:space-x-8 rtl:space-x-reverse md:flex-row md:mt-0 md:border-0 md:bg-white">
<li>
<a aria-current="page" class="block py-2 px-3 text-white bg-blue-700 rounded md:bg-transparent md:text-blue-500 md:p-0" href="/src/js">
首页
</a>
</li>
<li>
<a class="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0" href="/Project" @click="changeColor">
项目
</a>
</li>
<li class="relative">
<button id="dropdownNavbarLink" class="flex items-center justify-between w-full py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 md:w-auto" data-dropdown-toggle="dropdownNavbar" @click="toggleDropdown()">
关于
<svg aria-hidden="true" class="w-2.5 h-2.5 ms-2.5" fill="none" viewBox="0 0 10 6" xmlns="http://www.w3.org/2000/svg">
<path d="m1 1 4 4 4-4" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
</svg>
</button>
<!-- Dropdown menu -->
<div v-if="isDropdownOpen" id="dropdownNavbar" class="absolute font-normal bg-white divide-y divide-gray-100 rounded-lg shadow w-44">
<ul aria-labelledby="dropdownLargeButton" class="py-2 text-sm text-gray-700 dark:text-gray-400">
<li>
<a class="block px-4 py-2 hover:bg-gray-100" href="#">关于我们</a>
</li>
<li>
<a class="block px-4 py-2 hover:bg-gray-100" href="#">加入我们</a>
</li>
<li>
<a class="block px-4 py-2 hover:bg-gray-100" href="#">项目合作</a>
</li>
</ul>
</div>
</li>
<li>
<a class="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0" href="#">团队</a>
</li>
<li>
<a class="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0" href="/New">新闻</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- <nav class="text-base z-50 sticky top-0 bg-white border-gray-200">-->
<!-- &lt;!&ndash; <div class="text-sky-600">000</div> &ndash;&gt;-->
<!-- <div class="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4">-->
<!-- <a class="flex items-center space-x-3 rtl:space-x-reverse" href="/src/js">-->
<!-- <span class="self-center text-2xl font-semibold whitespace-nowrap">LOGO</span>-->
<!-- </a>-->
<!-- <button aria-controls="navbar-dropdown" aria-expanded="false" class="inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200" data-collapse-toggle="navbar-dropdown" type="button">-->
<!-- <span class="sr-only">Open main menu</span>-->
<!-- <svg aria-hidden="true" class="w-5 h-5" fill="none" viewBox="0 0 17 14" xmlns="http://www.w3.org/2000/svg">-->
<!-- <path d="M1 1h15M1 7h15M1 13h15" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>-->
<!-- </svg>-->
<!-- </button>-->
<!-- <div class="flex md:order-2 md:space-x-0 rtl:space-x-reverse">-->
<!-- <a class="text-black focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-center" href="/login">-->
<!-- 登录 |-->
<!-- </a>-->
<!-- <a class="text-black focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg pl-2 text-center" href="/register">-->
<!-- 注册-->
<!-- </a>-->
<!-- </div>-->
<!-- <div id="navbar-dropdown" class="w-full md:block md:w-auto">-->
<!-- <ul class="flex flex-col font-medium p-4 md:p-0 mt-4 border border-gray-100 rounded-lg bg-gray-50 md:space-x-8 rtl:space-x-reverse md:flex-row md:mt-0 md:border-0 md:bg-white">-->
<!-- <li>-->
<!-- <a aria-current="page" class="block py-2 px-3 text-white bg-blue-700 rounded md:bg-transparent md:text-blue-500 md:p-0" href="/src/js">-->
<!-- 首页-->
<!-- </a>-->
<!-- </li>-->
<!-- <li>-->
<!-- <a class="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0" href="/Project" @click="changeColor">-->
<!-- 项目-->
<!-- </a>-->
<!-- </li>-->
<!-- <li class="relative">-->
<!-- <button id="dropdownNavbarLink" class="flex items-center justify-between w-full py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 md:w-auto" data-dropdown-toggle="dropdownNavbar" @click="toggleDropdown()">-->
<!-- 关于-->
<!-- <svg aria-hidden="true" class="w-2.5 h-2.5 ms-2.5" fill="none" viewBox="0 0 10 6" xmlns="http://www.w3.org/2000/svg">-->
<!-- <path d="m1 1 4 4 4-4" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>-->
<!-- </svg>-->
<!-- </button>-->
<!-- &lt;!&ndash; Dropdown menu &ndash;&gt;-->
<!-- <div v-if="isDropdownOpen" id="dropdownNavbar" class="absolute font-normal bg-white divide-y divide-gray-100 rounded-lg shadow w-44">-->
<!-- <ul aria-labelledby="dropdownLargeButton" class="py-2 text-sm text-gray-700 dark:text-gray-400">-->
<!-- <li>-->
<!-- <a class="block px-4 py-2 hover:bg-gray-100" href="#">关于我们</a>-->
<!-- </li>-->
<!-- <li>-->
<!-- <a class="block px-4 py-2 hover:bg-gray-100" href="#">加入我们</a>-->
<!-- </li>-->
<!-- <li>-->
<!-- <a class="block px-4 py-2 hover:bg-gray-100" href="#">项目合作</a>-->
<!-- </li>-->
<!-- </ul>-->
<!-- </div>-->
<!-- </li>-->
<!-- <li>-->
<!-- <a class="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0" href="#">团队</a>-->
<!-- </li>-->
<!-- <li>-->
<!-- <a class="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0" href="/New">新闻</a>-->
<!-- </li>-->
<!-- </ul>-->
<!-- </div>-->
<!-- </div>-->
<!-- </nav>-->
<NavBar></NavBar>
<nav class="bg-gray-50">
<div class="max-w-screen-xl px-4 py-3 ml-6">
<div class="flex items-center">
@ -141,7 +142,10 @@
}
</style>
<script>
import NavBar from "@/components/HomeComponents/NavBar.vue";
export default {
components: {NavBar},
data() {
return {
isDropdownOpen: false,