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

更新头部导航栏

Browse Source
This commit is contained in:
妖姐 2024-03-14 15:20:12 +08:00
parent 26a1a38d56
commit ac9513e651
3 changed files with 267 additions and 119 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -71,62 +71,136 @@
</a> </a>
</div> </div>
</div> </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" id="home" class=" nav-link block py-2 px-3 text-white bg-blue-700 rounded md:bg-transparent md:text-blue-500 md:p-0" href="/" onclick="changeColor('home')">
首页
</a>
</li> <!-- <div id="navbar-dropdown" class="w-full md:block md:w-auto">-->
<li> <!-- <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">-->
<a id="project" class=" nav-link 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" onclick="changeColor('projects')"> <!-- <li>-->
项目 <!-- <a aria-current="page" id="home" class=" nav-link block py-2 px-3 text-white bg-blue-700 rounded md:bg-transparent md:text-blue-500 md:p-0" href="/" onclick="changeColor('home')">-->
</a> <!-- 首页-->
</li> <!-- </a>-->
<li class="relative">
<button id="about" class=" nav-link 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="changeColor('about')"> <!-- </li>-->
关于 <!-- <li>-->
<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"> <!-- <a id="project" class=" nav-link 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" onclick="changeColor('projects')">-->
<path d="m1 1 4 4 4-4" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/> <!-- 项目-->
</svg> <!-- </a>-->
</button> <!-- </li>-->
<!-- Dropdown menu --> <!-- <li class="relative">-->
<div v-if="isDropdownOpen" id="dropdownNavbar" class="absolute font-normal bg-white divide-y divide-gray-100 rounded-lg shadow w-44"> <!-- <button id="about" class=" nav-link 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="changeColor('about')">-->
<ul aria-labelledby="dropdownLargeButton" class="py-2 text-sm text-gray-700 dark:text-gray-400"> <!-- 关于-->
<li> <!-- <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">-->
<a class="block px-4 py-2 hover:bg-gray-100" href="#">关于我们</a> <!-- <path d="m1 1 4 4 4-4" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>-->
</li> <!-- </svg>-->
<li> <!-- </button>-->
<a class="block px-4 py-2 hover:bg-gray-1 00" href="#">加入我们</a> <!-- &lt;!&ndash; Dropdown menu &ndash;&gt;-->
</li> <!-- <div v-if="isDropdownOpen" id="dropdownNavbar" class="absolute font-normal bg-white divide-y divide-gray-100 rounded-lg shadow w-44">-->
<li> <!-- <ul aria-labelledby="dropdownLargeButton" class="py-2 text-sm text-gray-700 dark:text-gray-400">-->
<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>-->
</ul> <!-- </li>-->
</div> <!-- <li>-->
</li> <!-- <a class="block px-4 py-2 hover:bg-gray-1 00" href="#">加入我们</a>-->
<li> <!-- </li>-->
<a id="team" class=" nav-link 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="#" @click="changeColor('team')">团队</a> <!-- <li>-->
</li> <!-- <a class="block px-4 py-2 hover:bg-gray-100" href="#">项目合作</a>-->
<li> <!-- </li>-->
<a id="new" class=" nav-link 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" @click="changeColor('new')">新闻</a> <!-- </ul>-->
</li> <!-- </div>-->
</ul> <!-- </li>-->
</div> <!-- <li>-->
<!-- <a id="team" class=" nav-link 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="#" @click="changeColor('team')">团队</a>-->
<!-- </li>-->
<!-- <li>-->
<!-- <a id="new" class=" nav-link 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" @click="changeColor('new')">新闻</a>-->
<!-- </li>-->
<!-- </ul>-->
<!-- </div>-->
<a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" />
</div> </div>
</nav> </nav>
</template> </template>
<script setup> <script setup>
import {onMounted, ref} from "vue"; import {h, 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 items = ref([
{
key: 'mail',
// label: '首页',
title: '首页',
label: h(
'a',
{
onClick: () =>{
router.push('/')
updateCurrent('mail')
}
},
'首页',
),
},
{
key: 'app',
label: h(
'a',
{
onClick: () => {
router.push('/Project')
updateCurrent('app')
}
},
'项目',
),
title: '项目',
},
{
key: 'sub1',
label: '关于',
title: '关于',
children: [
{
label: '关于我们',
key: 'setting:1',
},
{
label: '加入我们',
key: 'setting:2',
},
{
label: '项目合作',
key: 'setting:3',
},
],
},
{
key: 'alipay',
title: '团队',
label: '团队'
},
{
key: 'new',
title: '新闻',
label: '新闻',}
]);
const appValue = current[0].key; // 使用点号访问属性
const current = ref();
// 传对应key给current但是没用怎么回事
function updateCurrent(key) {
current.value = [key];
console.log('6666',current.value)
}
const router = useRouter() const router = useRouter()
const closable = ref(false) const closable = ref(false)
const isDropdownOpen = ref(false); const isDropdownOpen = ref(false);

1
src/js/request.js
View File

@ -659,6 +659,5 @@ export default {
messageGet, messageGet,
getTagsProjectList
} }

225
src/views/ProjectPage/ProjectCard.vue
View File

@ -2,86 +2,112 @@
<div class="relative h-full bg-gray-50 flex w-[100vw]"> <div class="relative h-full bg-gray-50 flex w-[100vw]">
<div class="mt-12"> <div class="mt-12">
<nav class="ml-16 flex space-x-[30vw]"> <nav class="ml-16 flex space-x-[30vw]">
<div class="inline-flex rounded-md " role="group"> <!-- <div class="inline-flex rounded-md " role="group">-->
<button <!-- <button-->
type="button" <!-- type="button"-->
@click="toggleSelectionDisabled" <!-- @click="toggleSelectionDisabled"-->
class="w-[8vw] rounded-lg " <!-- class="w-[8vw] rounded-lg "-->
:class="buttonClass('DisableSelection')" <!-- :class="buttonClass('DisableSelection')"-->
> <!-- >-->
全部 <!-- 全部-->
</button> <!-- </button>-->
<button <!-- <button-->
:class="buttonClass('web')" <!-- :class="buttonClass('web')"-->
type="button" <!-- type="button"-->
@click="toggleSelection('web')" <!-- @click="toggleSelection('web')"-->
class="w-[6vw] rounded-lg" <!-- class="w-[6vw] rounded-lg"-->
> <!-- >-->
Web <!-- Web-->
</button> <!-- </button>-->
<button <!-- <button-->
:class="buttonClass('Ai')" <!-- :class="buttonClass('Ai')"-->
type="button" <!-- type="button"-->
@click="toggleSelection('Ai')" <!-- @click="toggleSelection('Ai')"-->
class="w-[6vw] rounded-lg" <!-- class="w-[6vw] rounded-lg"-->
> <!-- >-->
Ai <!-- Ai-->
</button> <!-- </button>-->
<button <!-- <button-->
:class="buttonClass('App')" <!-- :class="buttonClass('App')"-->
type="button" <!-- type="button"-->
@click="toggleSelection('App')" <!-- @click="toggleSelection('App')"-->
class="w-[6vw] rounded-lg " <!-- class="w-[6vw] rounded-lg "-->
> <!-- >-->
App <!-- App-->
</button> <!-- </button>-->
<button <!-- <button-->
:class="buttonClass('大数据')" <!-- :class="buttonClass('大数据')"-->
type="button" <!-- type="button"-->
@click="toggleSelection('大数据')" <!-- @click="toggleSelection('大数据')"-->
class="w-[6vw] rounded-lg " <!-- class="w-[6vw] rounded-lg "-->
> <!-- >-->
大数据 <!-- 大数据-->
</button> <!-- </button>-->
</div> <!-- </div>-->
<div class="flex space-x-12">
<label class="inline-flex items-center space-x-2 hover:text-blue-600">
<input
type="checkbox"
class="form-checkbox h-5 w-5 text-red-400 rounded-lg focus:ring-white"
v-model="selectedStatus.weikaishi"
/>
<span class="text-sm">未开始</span>
</label>
<label class="inline-flex items-center space-x-2 hover:text-blue-600">
<input
type="checkbox"
class="form-checkbox h-5 w-5 text-blue-400 rounded-lg focus:ring-white"
v-model="selectedStatus.jinxingzhong"
/>
<span class="text-sm">进行中</span>
</label>
<label class="inline-flex items-center space-x-2 hover:text-blue-600"> <div class="flex flex-row justify-between">
<input <div>
type="checkbox" <!-- 第一个是 全部 所以独立出来 -->
class="form-checkbox h-5 w-5 text-green-400 rounded-full focus:ring-white" <a-checkable-tag
v-model="selectedStatus.yiwancheng" v-model:checked="tagAll"
/> @change="checked => handleClickAll(checked)"
<span class="text-sm">已完成</span>
</label>
<label class="inline-flex items-center space-x-2 hover:text-blue-600"> >
<input 全部
type="checkbox" </a-checkable-tag>
class="form-checkbox h-5 w-5 text-red-400 rounded-full focus:ring-white " <a-checkable-tag
v-model="selectedStatus.stop" v-for="(tag, index) in tagsData"
/> :key="tag.id"
<span class="text-sm ">暂停</span> v-model:checked="selectTags[index]"
</label> @change="checked => handleChange(tag, checked)"
>
{{ tag.name }}
</a-checkable-tag>
</div>
<div>
<a-checkbox-group v-model:value="projStatus" :options="['进行中','已完成']" />
</div>
</div> </div>
<!-- <div class="flex space-x-12">-->
<!-- <label class="inline-flex items-center space-x-2 hover:text-blue-600">-->
<!-- <input-->
<!-- type="checkbox"-->
<!-- class="form-checkbox h-5 w-5 text-red-400 rounded-lg focus:ring-white"-->
<!-- v-model="selectedStatus.weikaishi"-->
<!-- />-->
<!-- <span class="text-sm">未开始</span>-->
<!-- </label>-->
<!-- <label class="inline-flex items-center space-x-2 hover:text-blue-600">-->
<!-- <input-->
<!-- type="checkbox"-->
<!-- class="form-checkbox h-5 w-5 text-blue-400 rounded-lg focus:ring-white"-->
<!-- v-model="selectedStatus.jinxingzhong"-->
<!-- />-->
<!-- <span class="text-sm">进行中</span>-->
<!-- </label>-->
<!-- <label class="inline-flex items-center space-x-2 hover:text-blue-600">-->
<!-- <input-->
<!-- type="checkbox"-->
<!-- class="form-checkbox h-5 w-5 text-green-400 rounded-full focus:ring-white"-->
<!-- v-model="selectedStatus.yiwancheng"-->
<!-- />-->
<!-- <span class="text-sm">已完成</span>-->
<!-- </label>-->
<!-- <label class="inline-flex items-center space-x-2 hover:text-blue-600">-->
<!-- <input-->
<!-- type="checkbox"-->
<!-- class="form-checkbox h-5 w-5 text-red-400 rounded-full focus:ring-white "-->
<!-- v-model="selectedStatus.stop"-->
<!-- />-->
<!-- <span class="text-sm ">暂停</span>-->
<!-- </label>-->
<!-- </div>-->
</nav> </nav>
<div class="flex flex-wrap mt-5 w-full"> <div class="flex flex-wrap mt-5 w-full">
@ -134,6 +160,10 @@ watch(current1, () => {
console.log('current', current1.value); console.log('current', current1.value);
}); });
onMounted(() =>{ onMounted(() =>{
request.getTagsProjectList(token).then(res=>{
console.log(res.data.data)
tagsData.value=res.data.data
})
getAllProject() getAllProject()
}) })
function getAllProject(){ function getAllProject(){
@ -145,7 +175,52 @@ function getAllProject(){
}) })
} }
const tagsData = ref([]);
const selectTags = ref([false, false, false, false]);
const projStatus = ref();
const tagAll=ref(true)
const token = window.localStorage.getItem('token')
const projList=ref([])
//当选中全部时，其他的都不选中
const handleClickAll=(checked)=>{
if(checked){
selectTags.value.forEach((item,index)=>{
selectTags.value[index]=false
})
// 发送获取全部数据的请求
request.projectGetCustom(selectedTagNames.value).then(res=>{
console.log(res.data.data)
})
}
}
const selectedTagNames =ref([])
// 当选中其他的时候， 全部 不选中
const handleChange = (tag, checked) => {
if(checked){
tagAll.value=false
// selectedTagNames.value.push(tag.name=''); // 将项目名称添加到数组中
}
else{
let flag=true
selectTags.value.forEach((item,index)=>{
if(item){
flag=false
// selectedTagNames.value.push(tag.name); // 将项目名称添加到数组中
}
})
if(flag){
tagAll.value=true
// selectedTagNames.value.splice(index, 1); // 从数组中移除项目名称
}
}
};
//选择全部按钮，其他按钮不可选 //选择全部按钮，其他按钮不可选
const toggleSelectionDisabled = () => { const toggleSelectionDisabled = () => {