修复个人项目bug

src/views/WorkLoadPage/PersonalProject.vue

@@ -1,19 +1,28 @@
 <template>
   <div class="relative h-full bg-gray-50 flex">
     <div class="mt-12">
-      <nav class="ml-16 flex space-x-72">
-        <ul class="flex space-x-24">
-          <li class="hover:text-blue-500">全部</li>
-          <li class="hover:text-blue-500">Web</li>
-          <li class="hover:text-blue-500">Ai</li>
-          <li class="hover:text-blue-500">App</li>
-        </ul>
-        <ul class="flex space-x-12">
-          <a-checkbox>未开始</a-checkbox>
-          <a-checkbox>进行中</a-checkbox>
-          <a-checkbox>已完成</a-checkbox>
-        </ul>
-      </nav>
+      <div class="flex flex-row justify-between">
+        <div>
+          <!-- 第一个是 全部 所以独立出来 -->
+          <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>
+          <a-checkbox-group v-model:value="projStatus" :options="['进行中','已完成']" />
+        </div>
+      </div>
       <div class="flex space-x-9 ml-16 mt-12">
         <a-card class="transition-transform transform-gpu hover:scale-105 relative w-[350px] h-64 rounded-none bg-cover bg-center bg-[url('@/assert/images/img25.jpg')]" @mouseleave="LearnMore1=false" @mouseover="LearnMore1=true">
           <div class="flex absolute left-0 bottom-0 min-h-[30%] w-full bg-white">
@@ -53,23 +62,78 @@
         </a-card>
       </div>
     </div>
-    <a-card class="mt-12 rounded-2xl absolute right-20 w-96 h-[750px] border-gray-200">
-      <div class=" flex flex-col space-y-52">
-        <p class="text-xl font-bold">项目消息：</p>
-        <p class="text-xl font-bold">项目推荐：</p>
-      </div>
-    </a-card>
+<!--    <a-card class="mt-12 rounded-2xl absolute right-20 w-96 h-[750px] border-gray-200">-->
+<!--      <div class=" flex flex-col space-y-52">-->
+<!--        <p class="text-xl font-bold">项目消息：</p>-->
+<!--        <p class="text-xl font-bold">项目推荐：</p>-->
+<!--      </div>-->
+<!--    </a-card>-->
   </div>
 </template>
 
-<script>
-export default {
-  data() {
-    return {
-      LearnMore1:false,
-      LearnMore2:false,
-      LearnMore3:false
-    };
-  },
+<script setup>
+
+import {onMounted, ref} from "vue";
+import request from '@/js/request.js'
+
+const LearnMore1 = ref(false)
+const LearnMore2 = ref(false)
+const LearnMore3 = ref(false)
+
+const token = window.localStorage.getItem('token')
+
+const projStatus = ref();
+const tagAll=ref(true)
+const tagsData = ref([]);
+const selectTags = ref([false, false, false, false]);
+
+onMounted(
+    ()=>{
+
+      // 设置标签
+      request.getTagsProjectList(token).then(res=>{
+        console.log(res.data.data)
+        tagsData.value=res.data.data
+      })
+      // 默认获取全部数据
+      request.projectGet(token).then(res=>{
+        console.log(res)
+
+      })
+    }
+)
+
+//当选中全部时，其他的都不选中
+const handleClickAll=(checked)=>{
+  if(checked){
+    selectTags.value.forEach((item,index)=>{
+      selectTags.value[index]=false
+    })
+    // 发送获取全部数据的请求
+    request.projectGet(token).then(res=>{
+      console.log(res.data.data)
+    })
+  }
+}
+
+// 当选中其他的时候， 全部 不选中
+const handleChange = (tag, checked) => {
+  if(checked){
+    tagAll.value=false
+  }
+  else{
+    let flag=true
+    selectTags.value.forEach((item,index)=>{
+      if(item){
+        flag=false
+      }
+    })
+    if(flag){
+      tagAll.value=true
+    }
+  }
 };
+
+
+
 </script>