JSL_OrganizeInternalOAWeb/src/views/ProjectPage/ProjectCard.vue

<template>
    <a-spin  :spinning="false"  tip="Loading..." >
    <div class="relative h-full bg-gray-50 flex w-full  overflow-x-hidden">
        <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>
                        <a-checkable-tag
                                v-for="(tag, index) in tagsData"
                                :key="tag.id"
                                v-model:checked="selectTags[index]"
                                @change="checked => handleChange(tag, checked)"
                        >
                            {{ tag.name }}
                        </a-checkable-tag>
                    </div>
                    <div class="">
                        <a-checkbox-group v-model:value="data.isFinish" :options="options" class="mr-3" />
                    </div>
                </div>

            <template v-if="projects.length === 0">
                <!-- 数据为空时的提示信息 -->
                <div class="w-full h-[80vh]  ">
                        <img src="../../../public/33.png" class="w-[300px] h-[300px] mt-[20vh] ml-[40vw]">
                </div>
            </template>
            <template v-else>
            <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-[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">
                                <button v-if="showButton[index]" class="mt-8 w-6 h-6 flex items-center justify-center bg-green-400 text-black rounded-full transition duration-300 ease-in-out transform hover:scale-105" @click="MainMessage(project)">
                                    <svg aria-hidden="true" class="rtl:rotate-180 w-4 h-4 text-white" fill="none" viewBox="0 0 14 10" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M1 5h12m0 0L9 1m4 4L9 9" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
                                    </svg>
                                </button>
                            </div>
                        </div>
                    </a-card>
                </template>
            </div>
            </template>
        </div>
    </div>
    </a-spin>
</template>
<script setup>
import {onMounted, reactive, ref, watch} from "vue";
import request from "@/js/request.js";
import router from "@/router/index.js";

const showButton = reactive([]);
const projects = ref([]);
const id =ref(1)
const data = reactive({
  id:null,
  tags:[],
  isFinish:[0,1,2,-1]
})
// const loading  =ref(false)
onMounted(() =>{

    request.getTagsProjectList().then(res=>{
        console.log("tagsData:",res)
        tagsData.value=res.data.data

    })
    getAllProject()


})
function  getAllProject(){
    request.projectGetCustom(data).then((res)=>{
        projects.value = res.data.data;
    })
    // loading.value = true;
    // console.log('zmhuisss',loading.value)
}

const tagsData = ref([]);
const selectTags = ref([false, false, false, false]);
const options = [
  {
    label: '未开始',
    value: 0,
  },
  {
    label: '进行中',
    value: 2,
  },
  {
    label: '已完成',
    value: 1,
  },
  {
    label: '已暂停',
    value: -1,
  },
]
watch(() =>data.isFinish, async (newValue, oldValue) =>{
  console.log("data.isFinish", data.isFinish)
  getAllProject()
})

const tagAll=ref(true)
const token = window.localStorage.getItem('token')

//当选中全部时，其他的都不选中
const handleClickAll=(checked)=>{
    if(checked){
        selectTags.value.forEach((item,index)=>{
            selectTags.value[index]=false
        })
      selectedTags.value = []
    }

  // console.log("selectedTags",selectedTags.value)
}
const  selectedTags =ref([])

// 当选中其他的时候， 全部 不选中
const handleChange = (tag, checked) => {
    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;
        }
    }
};

function MainMessage(project) {
console.log(project.id)
    window.localStorage.setItem('id',project.id)
        router.push('/ProjectMessage');

}
watch(() => selectedTags.value.length, async (newValue, oldValue) =>{
  data.tags = []
  selectedTags.value.forEach((item,index)=>{
    data.tags.push(item)
  })
  getAllProject()
})

</script>