更新头部导航栏
This commit is contained in:
parent
26a1a38d56
commit
ac9513e651
@ -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>
|
<!-- <!– Dropdown menu –>-->
|
||||||
</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);
|
||||||
|
|||||||
@ -659,6 +659,5 @@ export default {
|
|||||||
|
|
||||||
messageGet,
|
messageGet,
|
||||||
|
|
||||||
getTagsProjectList
|
|
||||||
|
|
||||||
}
|
}
|
||||||
@ -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"-->
|
||||||
|
<!-- @click="toggleSelectionDisabled"-->
|
||||||
|
<!-- class="w-[8vw] rounded-lg "-->
|
||||||
|
<!-- :class="buttonClass('DisableSelection')"-->
|
||||||
|
<!-- >-->
|
||||||
|
<!-- 全部-->
|
||||||
|
<!-- </button>-->
|
||||||
|
<!-- <button-->
|
||||||
|
<!-- :class="buttonClass('web')"-->
|
||||||
|
<!-- type="button"-->
|
||||||
|
<!-- @click="toggleSelection('web')"-->
|
||||||
|
<!-- class="w-[6vw] rounded-lg"-->
|
||||||
|
<!-- >-->
|
||||||
|
<!-- Web-->
|
||||||
|
<!-- </button>-->
|
||||||
|
<!-- <button-->
|
||||||
|
<!-- :class="buttonClass('Ai')"-->
|
||||||
|
<!-- type="button"-->
|
||||||
|
<!-- @click="toggleSelection('Ai')"-->
|
||||||
|
<!-- class="w-[6vw] rounded-lg"-->
|
||||||
|
<!-- >-->
|
||||||
|
<!-- Ai-->
|
||||||
|
<!-- </button>-->
|
||||||
|
<!-- <button-->
|
||||||
|
<!-- :class="buttonClass('App')"-->
|
||||||
|
<!-- type="button"-->
|
||||||
|
<!-- @click="toggleSelection('App')"-->
|
||||||
|
<!-- class="w-[6vw] rounded-lg "-->
|
||||||
|
<!-- >-->
|
||||||
|
<!-- App-->
|
||||||
|
<!-- </button>-->
|
||||||
|
<!-- <button-->
|
||||||
|
<!-- :class="buttonClass('大数据')"-->
|
||||||
|
<!-- type="button"-->
|
||||||
|
<!-- @click="toggleSelection('大数据')"-->
|
||||||
|
<!-- class="w-[6vw] rounded-lg "-->
|
||||||
|
<!-- >-->
|
||||||
|
<!-- 大数据-->
|
||||||
|
<!-- </button>-->
|
||||||
|
<!-- </div>-->
|
||||||
|
|
||||||
|
|
||||||
|
<div class="flex flex-row justify-between">
|
||||||
|
<div>
|
||||||
|
<!-- 第一个是 全部 所以独立出来 -->
|
||||||
|
<a-checkable-tag
|
||||||
|
v-model:checked="tagAll"
|
||||||
|
@change="checked => handleClickAll(checked)"
|
||||||
|
|
||||||
type="button"
|
|
||||||
@click="toggleSelectionDisabled"
|
|
||||||
class="w-[8vw] rounded-lg "
|
|
||||||
:class="buttonClass('DisableSelection')"
|
|
||||||
>
|
>
|
||||||
全部
|
全部
|
||||||
</button>
|
</a-checkable-tag>
|
||||||
<button
|
<a-checkable-tag
|
||||||
:class="buttonClass('web')"
|
v-for="(tag, index) in tagsData"
|
||||||
type="button"
|
:key="tag.id"
|
||||||
@click="toggleSelection('web')"
|
v-model:checked="selectTags[index]"
|
||||||
class="w-[6vw] rounded-lg"
|
@change="checked => handleChange(tag, checked)"
|
||||||
>
|
>
|
||||||
Web
|
{{ tag.name }}
|
||||||
</button>
|
</a-checkable-tag>
|
||||||
<button
|
|
||||||
:class="buttonClass('Ai')"
|
|
||||||
type="button"
|
|
||||||
@click="toggleSelection('Ai')"
|
|
||||||
class="w-[6vw] rounded-lg"
|
|
||||||
>
|
|
||||||
Ai
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
:class="buttonClass('App')"
|
|
||||||
type="button"
|
|
||||||
@click="toggleSelection('App')"
|
|
||||||
class="w-[6vw] rounded-lg "
|
|
||||||
>
|
|
||||||
App
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
:class="buttonClass('大数据')"
|
|
||||||
type="button"
|
|
||||||
@click="toggleSelection('大数据')"
|
|
||||||
class="w-[6vw] rounded-lg "
|
|
||||||
>
|
|
||||||
大数据
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="flex space-x-12">
|
<div>
|
||||||
<label class="inline-flex items-center space-x-2 hover:text-blue-600">
|
<a-checkbox-group v-model:value="projStatus" :options="['进行中','已完成']" />
|
||||||
<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>
|
</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 = () => {
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user