项目页
This commit is contained in:
parent
2cda8ceaad
commit
8bb47ce056
@ -1,59 +1,12 @@
|
||||
<template>
|
||||
<div class="relative h-full bg-gray-50 flex w-[100vw]">
|
||||
<div class="mt-12">
|
||||
<nav class="ml-16 flex space-x-[30vw]">
|
||||
<!-- <div class="inline-flex rounded-md " role="group">-->
|
||||
<!-- <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>
|
||||
<div class="mt-0">
|
||||
<div class="flex flex-row justify-between">
|
||||
<div class="ml-3">
|
||||
<!-- 第一个是 全部 所以独立出来 -->
|
||||
<a-checkable-tag
|
||||
v-model:checked="tagAll"
|
||||
@change="checked => handleClickAll(checked)"
|
||||
|
||||
>
|
||||
全部
|
||||
</a-checkable-tag>
|
||||
@ -66,53 +19,14 @@
|
||||
{{ tag.name }}
|
||||
</a-checkable-tag>
|
||||
</div>
|
||||
<div>
|
||||
<a-checkbox-group v-model:value="projStatus" :options="['进行中','已完成']" />
|
||||
<div class="">
|
||||
<a-checkbox-group v-model:value="projStatus" :options="['进行中','已完成']" class="mr-3" />
|
||||
</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>
|
||||
|
||||
<div class="flex flex-wrap mt-5 w-full">
|
||||
<div class="flex flex-wrap justify-between mt-5 w-full">
|
||||
<template v-for="(project, index) in projects" :key="index">
|
||||
<a-card class="transition-transform transform-gpu hover:scale-105 relative w-[19vw] h-60 mb-4 mr-3 rounded-none bg-cover bg-center bg-[url('@/assert/images/img12.jpg')]" @mouseleave="showButton[index]=false" @mouseover="showButton[index]=true">
|
||||
<a-card class="transition-transform transform-gpu hover:scale-105 relative w-[24vw] h-60 mb-4 rounded-none bg-cover bg-center bg-[url('@/assert/images/img12.jpg')]" @mouseleave="showButton[index]=false" @mouseover="showButton[index]=true">
|
||||
<div class="flex absolute left-0 bottom-0 min-h-[30%] w-full bg-white">
|
||||
<p class="ml-6 mt-4 text-lg font-bold tracking-tight text-gray-900">{{ project.name }}</p>
|
||||
<div class="ml-auto mr-10">
|
||||
@ -126,13 +40,6 @@
|
||||
</a-card>
|
||||
</template>
|
||||
</div>
|
||||
<!-- <a-pagination-->
|
||||
<!-- v-model:current="current1"-->
|
||||
<!-- v-model:pageSize="pageSize"-->
|
||||
<!-- show-size-changer-->
|
||||
<!-- :total="500"-->
|
||||
<!-- @showSizeChange="onShowSizeChange"-->
|
||||
<!-- />-->
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -141,18 +48,12 @@ import {onMounted, reactive, ref, watch} from "vue";
|
||||
import request from "@/js/request.js";
|
||||
import router from "@/router/index.js";
|
||||
|
||||
// const LearnMore= ref(false)
|
||||
// function LearnMore(index=1){
|
||||
// index++
|
||||
// }
|
||||
const showButton = reactive([]);
|
||||
const projects = ref([]);
|
||||
const id =ref(1)
|
||||
const pageSize = ref(20);
|
||||
const current1 = ref(3);
|
||||
const onShowSizeChange = (current, pageSize) => {
|
||||
console.log(current, pageSize);
|
||||
};
|
||||
|
||||
watch(pageSize, () => {
|
||||
console.log('pageSize', pageSize.value);
|
||||
});
|
||||
@ -183,7 +84,6 @@ const tagAll=ref(true)
|
||||
|
||||
const token = window.localStorage.getItem('token')
|
||||
|
||||
const projList=ref([])
|
||||
|
||||
|
||||
|
||||
@ -195,61 +95,44 @@ const handleClickAll=(checked)=>{
|
||||
})
|
||||
// 发送获取全部数据的请求
|
||||
request.projectGetCustom(selectedTagNames.value).then(res=>{
|
||||
projects.value=res.data.data
|
||||
console.log(res.data.data)
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
const selectedTagNames =ref([])
|
||||
const selectedTags =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); // 将项目名称添加到数组中
|
||||
tag.checked = checked; // 更新checkbox的选中状态
|
||||
|
||||
if (checked) {
|
||||
tagAll.value = false;
|
||||
|
||||
selectedTags.value.push(tag.name); // 将选中的tag.name添加到数组中
|
||||
} else {
|
||||
const index = selectedTags.value.indexOf(tag.name);
|
||||
if (index !== -1) {
|
||||
selectedTags.value.splice(index, 1); // 从数组中移除取消选中的tag.name
|
||||
}
|
||||
let flag = true;
|
||||
selectTags.value.forEach((item, index) => {
|
||||
if (item) {
|
||||
flag = false;
|
||||
}
|
||||
})
|
||||
if(flag){
|
||||
tagAll.value=true
|
||||
// selectedTagNames.value.splice(index, 1); // 从数组中移除项目名称
|
||||
});
|
||||
if (flag) {
|
||||
tagAll.value = true;
|
||||
}
|
||||
}
|
||||
|
||||
// 在这里触发向后端请求数据的操作，将selectedTags作为参数发送到后端
|
||||
request.projectGetCustom(selectedTags).then((res) =>{
|
||||
projects.value = res.data.data;
|
||||
})
|
||||
};
|
||||
|
||||
//选择全部按钮，其他按钮不可选
|
||||
const toggleSelectionDisabled = () => {
|
||||
selectionDisabled.value = !selectionDisabled.value;
|
||||
if (selectionDisabled.value) {
|
||||
// 清空选中的按钮
|
||||
selectedButtons.value = [];
|
||||
}
|
||||
};
|
||||
|
||||
const toggleSelection = (button) => {
|
||||
// 如果禁止选择，直接返回
|
||||
if (selectionDisabled.value) {
|
||||
return;
|
||||
}
|
||||
//选择其他按钮
|
||||
const index = selectedButtons.value.indexOf(button);
|
||||
if (index > -1) {
|
||||
selectedButtons.value.splice(index, 1); // 如果已选中，再次点击时移除
|
||||
} else {
|
||||
selectedButtons.value.push(button); // 如果未选中，点击时添加
|
||||
}
|
||||
};
|
||||
|
||||
const buttonClass = (button) => ({
|
||||
'px-4 py-2 text-sm font-medium border focus:z-10 focus:ring-1': true,
|
||||
'text-gray-900 bg-white border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:ring-blue-100 focus:text-blue-700 outline-none ': (!selectedButtons.value.includes(button) && !selectionDisabled.value) || (button === 'DisableSelection' && !selectionDisabled.value),
|
||||
'bg-blue-400 text-white': selectedButtons.value.includes(button) || (button === 'DisableSelection' && selectionDisabled.value), // 选中状态的样式
|
||||
});
|
||||
|
||||
// 点击跳转事件
|
||||
// function MainMessage(id){
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user