项目列表添加是否发布筛选

src/views/project/items/components/ProjectItemsList/hooks/useData.hook.ts

@@ -18,6 +18,7 @@ export const useDataListInit = () => {
     count: 10,
   });
 
+  const state = ref('0')
   const list = ref<ChartList>([]);
   // const list = ref<ChartList>([
   //   {
@@ -58,6 +59,7 @@ export const useDataListInit = () => {
     const res = await projectListApi({
       page: paginat.page,
       limit: paginat.limit,
+      state: state.value == '0'? '': state.value,
     });
     if (res && res.items) {
       const { total } = res as any; // 这里的count与data平级，不在Response结构中
@@ -87,6 +89,13 @@ export const useDataListInit = () => {
     fetchList();
   };
 
+  // 修改筛选条件
+  const changeState = (value) => {
+    console.log(111,value)
+    state.value = value
+    fetchList();
+  }
+
   // 修改大小
   const changeSize = (_size: number) => {
     paginat.limit = _size;
@@ -147,10 +156,12 @@ export const useDataListInit = () => {
     loading,
     paginat,
     list,
+    state,
     fetchList,
     releaseHandle,
     changeSize,
     changePage,
     deleteHandle,
+    changeState,
   };
 };

src/views/project/items/components/ProjectItemsList/index.vue

@@ -1,12 +1,23 @@
 <template>
   <div class="go-items-list">
+    <div class="filter">
+      <a-select
+        v-model:value="state"
+        style="width: 200px"
+        @change="changeState"
+      >
+        <a-select-option value="0">全部</a-select-option>
+        <a-select-option value="1">已发布</a-select-option>
+        <a-select-option value="-1">未发布</a-select-option>
+      </a-select>
+    </div>
     <!-- 加载 -->
     <div v-show="loading">
       <go-loading></go-loading>
     </div>
     <!-- 列表 -->
-    <div v-show="!loading">
-      <n-grid :x-gap="20" :y-gap="20" cols="2 s:2 m:3 l:4 xl:4 xxl:4" responsive="screen">
+    <div v-show="!loading" style="height: calc(100vh - 230px); overflow: auto;">
+      <n-grid :x-gap="20" :y-gap="18" cols="2 s:2 m:3 l:4 xl:4 xxl:4" responsive="screen">
         <n-grid-item v-for="(item, index) in list" :key="item.id">
           <project-items-card
             :cardData="item"
@@ -54,7 +65,7 @@
   const { CopyIcon, EllipsisHorizontalCircleSharpIcon } = icon.ionicons5;
   const { modalData, modalShow, closeModal, previewHandle, resizeHandle, editHandle } =
     useModalDataInit();
-  const { loading, paginat, list, changeSize, changePage, releaseHandle, deleteHandle } =
+  const { loading, paginat, list, state, changeSize, changePage, releaseHandle, deleteHandle, changeState } =
     useDataListInit();
 </script>
 
@@ -64,7 +75,7 @@
     display: flex;
     flex-direction: column;
     justify-content: space-between;
-    min-height: calc(100vh - #{$--header-height} - 40px - 2px);
+    min-height: calc(100vh - #{$--header-height} - 40px - 40px);
     .list-content {
       position: relative;
       height: $contentHeight;
@@ -74,5 +85,10 @@
       justify-content: flex-end;
       margin-top: 20px;
     }
+    .filter{
+      display: flex;
+      justify-content: end;
+      margin-bottom: 10px;
+    }
   }
 </style>