修复我管理的页面bug

src/views/WorkLoadPage/I_Manage.vue

@@ -1,102 +1,33 @@
 <template>
-  <div class="flex flex-col h-full bg-gray-50 w-full">
+  <div class="flex flex-col  w-full">
     <a-breadcrumb class="mt-6 ml-6">
       <a-breadcrumb-item>我管理的</a-breadcrumb-item>
       <a-breadcrumb-item><a href="">梁溪区纪委大数据管理平台项目</a></a-breadcrumb-item>
     </a-breadcrumb>
-    <div class="flex space-x-[10vw] ml-96">
-      <div class="inline-flex rounded-md ml-6" role="group">
-        <button
-
-            :class="buttonClass('DisableSelection')"
-            class="w-16 h-8 flex justify-center items-center"
-            type="button"
-            @click="toggleSelectionDisabled"
+    <div class="flex flex-row justify-between mt-3">
+      <div>
+        <!-- 第一个是 全部 所以独立出来 -->
+        <a-checkable-tag
+            v-model:checked="tagAll"
+            @change="checked => handleClickAll(checked)"
         >
           全部
-        </button>
-        <button
-            :class="buttonClass('web')"
-            class="w-16 h-8 flex justify-center items-center"
-            type="button"
-            @click="toggleSelection('web')"
+        </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)"
         >
-          Web
-        </button>
-        <button
-            :class="buttonClass('Ai')"
-            class="w-16 h-8 flex justify-center items-center"
-            type="button"
-            @click="toggleSelection('Ai')"
-        >
-          Ai
-        </button>
-        <button
-            :class="buttonClass('App')"
-            class="w-16 h-8 flex justify-center items-center"
-            type="button"
-            @click="toggleSelection('App')"
-        >
-          App
-        </button>
-        <button
-            :class="buttonClass('大数据')"
-            class="w-20 h-8 flex justify-center items-center"
-            type="button"
-            @click="toggleSelection('大数据')"
-        >
-          大数据
-        </button>
+          {{ tag.name }}
+        </a-checkable-tag>
+      </div>
+      <div>
+        <a-checkbox-group v-model:value="projStatus" :options="['进行中','已完成']" />
       </div>
-      <div class="flex space-x-8">
-        <label class="inline-flex items-center space-x-2 hover:text-blue-600">
-          <input
-              v-model="selectedStatus.weikaishi"
-              class="form-checkbox h-5 w-5 text-red-400 rounded-lg focus:ring-white"
-              type="checkbox"
-          />
-          <span class="text-sm">未开始</span>
-        </label>
-        <label class="inline-flex items-center space-x-2 hover:text-blue-600">
-          <input
-              v-model="selectedStatus.jinxingzhong"
-              class="form-checkbox h-5 w-5 text-blue-400 rounded-lg focus:ring-white"
-              type="checkbox"
-          />
-          <span class="text-sm">进行中</span>
-        </label>
-        <label class="inline-flex items-center space-x-2 hover:text-blue-600">
-          <input
-              v-model="selectedStatus.yiwancheng"
-              class="form-checkbox h-5 w-5 text-green-400 rounded-full focus:ring-white"
-              type="checkbox"
-          />
-          <span class="text-sm">已完成</span>
-        </label>
-        <label class="inline-flex items-center space-x-2 hover:text-blue-600">
-          <input
-              v-model="selectedStatus.stop"
-              class="form-checkbox h-5 w-5 text-red-400 rounded-full focus:ring-white "
-              type="checkbox"
-          />
-          <span class="text-sm ">暂停</span>
-        </label>
     </div>
     </div>
       <div class="mt-12 ml-12 flex space-x-16 h-full">
-        <div class="flex flex-col space-y-6 border-r border-gray-200 w-80 h-full p-8">
-          <p class="text-lg">项目名称：梁溪区纪委大数据管理平台项目</p>
-          <p>项目周期：3个月</p>
-          <p>项目开始日期：2024/3/2</p>
-          <div class="space-y-2">
-            <p>技术选型：</p>
-            <p>前端：vue3</p>
-            <p>后端：java,springboot</p>
-          </div>
-          <p>完成情况：进行中</p>
-          <p>是否发布：未发布</p>
-          <p>负责人：张三</p>
-        </div>
         <div class="flex space-x-9">
           <a-card v-for="(ChildProject, index) in ChildProjects" :key="index" class="transition-transform transform-gpu hover:scale-105 relative w-96 h-64 rounded-none bg-cover bg-center bg-[url('@/assert/images/img23.jpg')]" @mouseleave="showButton[index]=false" @mouseover="showButton[index]=true">
             <div class="flex absolute left-0 bottom-0 min-h-[30%] w-full bg-white">
@@ -116,18 +47,20 @@
           </a-card>
         </div>
       </div>
-    </div>
 </template>
 
 
 <script setup>
-import {onMounted, reactive, ref, watch} from 'vue';
+import {onMounted, reactive, ref} from 'vue';
 import request from "@/js/request.js";
 
 const showButton = reactive([]);
 const token = window.localStorage.getItem('token')
 const ChildProjects = ref([]); // 使用ref创建响应式数据
-const id = ref(13);
+const id = ref(2);
+const tagsData = ref([]);
+const selectTags = ref([false, false, false, false]);
+
 
 onMounted(() =>{
   request.projectWorkGet(id, token).then((res) => {
@@ -135,81 +68,63 @@ onMounted(() =>{
   })
 })
 
+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 toggleSelectionDisabled = () => {
-  selectionDisabled.value = !selectionDisabled.value;
-  if (selectionDisabled.value) {
-    // 清空选中的按钮
-    selectedButtons.value = [];
+}
+// 当选中其他的时候， 全部 不选中
+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
+    }
   }
 };
 
-const toggleSelection = (button) => {
-  // 如果禁止选择，直接返回
-  if (selectionDisabled.value) {
-    return;
+
+
+// 有关新增
+const handleAdd=()=>{
+  console.log('新增')
+
+}
+
+
+
+
+
+// 当组件挂载时 请求tag数据
+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 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), // 选中状态的样式
-});
-
-// @click="selectedTags.web = !selectedTags.web"
-
-// 根据选择的按钮过滤项目列表
-const filteredProjects = ref([]);
-// 根据选择的按钮过滤项目列表
-const selectedButtons = ref(['web','ai','大数据']);
-const selectionDisabled = ref('');
-const selectedStatus = reactive({
-  weikaishi:true,       //1
-  jinxingzhong:true,    //2
-  yiwancheng:true,    //0
-  stop:true             //-1
-}); // 选择的完成进度
-const select = reactive({
-
-})
-const data = reactive({
-  tags:[],
-  isFinish:[]
-})
-const  clickedButton= ref(null)
-// 根据选择的完成进度过滤项目列表
-watch(() => selectedButtons.value, (clickedButton) => {
-  if (selectedButtons.value === 1){
-
-  }
-
-});
-
-watch(selectedStatus, async (newValue, oldValue) => {
-  if (newValue.stop === true) {
-    data.isFinish.push(-1)
-  }
-  if (newValue.jinxingzhong === true) {
-    data.isFinish.push(2)
-  }
-  if (newValue.weikaishi === true ) {
-    data.isFinish.push(1)
-  }
-  if (newValue.yiwancheng === true) {
-    data.isFinish.push(0)
-  }
-
-  request.projectWorkGet(data)
-
-  data.isFinish = []
-})
+)
 
 </script>