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

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

@ -1,69 +1,70 @@
<template> <template>
<div class="flex flex-col"> <div class="flex flex-col">
<nav class="text-base z-50 sticky top-0 bg-white border-gray-200"> <!-- <nav class="text-base z-50 sticky top-0 bg-white border-gray-200">-->
<!-- <div class="text-sky-600">000</div> --> <!-- &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"> <!-- <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"> <!-- <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> <!-- <span class="self-center text-2xl font-semibold whitespace-nowrap">LOGO</span>-->
</a> <!-- </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"> <!-- <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> <!-- <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"> <!-- <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"/> <!-- <path d="M1 1h15M1 7h15M1 13h15" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>-->
</svg> <!-- </svg>-->
</button> <!-- </button>-->
<div class="flex md:order-2 md:space-x-0 rtl:space-x-reverse"> <!-- <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 class="text-black focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-center" href="/login">-->
登录 | <!-- 登录 |-->
</a> <!-- </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 class="text-black focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg pl-2 text-center" href="/register">-->
注册 <!-- 注册-->
</a> <!-- </a>-->
</div> <!-- </div>-->
<div id="navbar-dropdown" class="w-full md:block md:w-auto"> <!-- <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"> <!-- <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> <!-- <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 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> <!-- </a>-->
</li> <!-- </li>-->
<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 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> <!-- </a>-->
</li> <!-- </li>-->
<li class="relative"> <!-- <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()"> <!-- <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"> <!-- <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"/> <!-- <path d="m1 1 4 4 4-4" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>-->
</svg> <!-- </svg>-->
</button> <!-- </button>-->
<!-- Dropdown menu --> <!-- &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"> <!-- <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"> <!-- <ul aria-labelledby="dropdownLargeButton" class="py-2 text-sm text-gray-700 dark:text-gray-400">-->
<li> <!-- <li>-->
<a class="block px-4 py-2 hover:bg-gray-100" href="#">关于我们</a> <!-- <a class="block px-4 py-2 hover:bg-gray-100" href="#">关于我们</a>-->
</li> <!-- </li>-->
<li> <!-- <li>-->
<a class="block px-4 py-2 hover:bg-gray-100" href="#">加入我们</a> <!-- <a class="block px-4 py-2 hover:bg-gray-100" href="#">加入我们</a>-->
</li> <!-- </li>-->
<li> <!-- <li>-->
<a class="block px-4 py-2 hover:bg-gray-100" href="#">项目合作</a> <!-- <a class="block px-4 py-2 hover:bg-gray-100" href="#">项目合作</a>-->
</li> <!-- </li>-->
</ul> <!-- </ul>-->
</div> <!-- </div>-->
</li> <!-- </li>-->
<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> <!-- <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>-->
<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> <!-- <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> <!-- </li>-->
</ul> <!-- </ul>-->
</div> <!-- </div>-->
</div> <!-- </div>-->
</nav> <!-- </nav>-->
<NavBar></NavBar>
<nav class="bg-gray-50"> <nav class="bg-gray-50">
<div class="max-w-screen-xl px-4 py-3 ml-6"> <div class="max-w-screen-xl px-4 py-3 ml-6">
<div class="flex items-center"> <div class="flex items-center">
@ -141,7 +142,10 @@
} }
</style> </style>
<script> <script>
import NavBar from "@/components/HomeComponents/NavBar.vue";
export default { export default {
components: {NavBar},
data() { data() {
return { return {
isDropdownOpen: false, isDropdownOpen: false,