feat: 新增首页列表接口

src/utils/router.ts

@@ -114,7 +114,7 @@ export const logout = async () => {
       routerTurnByName(PageEnum.BASE_LOGIN_NAME)
     }
   } catch (error) {
-    window['$message'].success(window['$t']('global.logout_success'))
+    window['$message'].success(window['$t']('global.logout_failure'))
   }
 }
 

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

@@ -1,41 +1,60 @@
-import { ref } from 'vue'
+import { ref, reactive } from 'vue';
 import { goDialog } from '@/utils'
 import { DialogEnum } from '@/enums/pluginEnum'
-import { ChartList } from '../../..'
+import { projectListApi } from '@/api/path/project'
+import { ChartList } from '../../../index.d'
+
 // 数据初始化
 export const useDataListInit = () => {
-  const list = ref<ChartList>([
-    {
-      id: 1,
-      title: '物料1-假数据不可用',
-      release: true,
-      label: '官方案例'
-    },
-    {
-      id: 2,
-      title: '物料2-假数据不可用',
-      release: false,
-      label: '官方案例'
-    },
-    {
-      id: 3,
-      title: '物料3-假数据不可用',
-      release: false,
-      label: '官方案例'
-    },
-    {
-      id: 4,
-      title: '物料4-假数据不可用',
-      release: false,
-      label: '官方案例'
-    },
-    {
-      id: 5,
-      title: '物料5-假数据不可用',
-      release: false,
-      label: '官方案例'
+
+  const paginat = reactive({
+    // 当前页数
+    page: 1,
+    // 每页值
+    limit: 12,
+    // 总数
+    count: 10,
+  })
+
+  const list = ref<ChartList>([])
+
+  // 数据请求
+  const fetchList = async () => {
+    try {
+      const res: any = await projectListApi({
+        page: paginat.page,
+        limit: paginat.limit
+      })
+      if (res.data) {
+        const { count } = res
+        paginat.count = count
+        list.value = res.data.map((e:any) => {
+          const {id, projectName, state, createTime, createUserId} = e
+          return {
+            id: id,
+            title: projectName,
+            createId: createUserId,
+            time: createTime,
+            release: state !== -1
+          }
+        })
+      }
+    } catch (error) {
+      window['$message'].error(window['$t']('http.error_message'))
     }
-  ])
+  }
+
+  // 修改页数
+  const changePage = (_page: number) => {
+    paginat.page = _page
+    fetchList()
+  }
+
+  // 修改大小
+  const changeSize = (_size: number) => {
+    paginat.limit = _size
+    fetchList()
+  }
 
   // 删除
   const deleteHandle = (cardData: object, index: number) => {
@@ -51,8 +70,13 @@ export const useDataListInit = () => {
     })
   }
 
+  // 立即请求
+  fetchList()
+
   return {
+    paginat,
     list,
+    fetchList, changeSize, changePage,
     deleteHandle
   }
 }

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

@@ -17,8 +17,12 @@
     </n-grid>
     <div class="list-pagination">
       <n-pagination
-        :item-count="10"
-        :page-sizes="[10, 20, 30, 40]"
+        :page="paginat.page"
+        :page-size="paginat.limit"
+        :item-count="paginat.count"
+        :page-sizes="[12, 24, 36, 48]"
+        @update:page="changePage"
+        @update:page-size="changeSize"
         show-size-picker
       />
     </div>
@@ -40,9 +44,8 @@ import { useModalDataInit } from './hooks/useModal.hook'
 import { useDataListInit } from './hooks/useData.hook'
 
 const { CopyIcon, EllipsisHorizontalCircleSharpIcon } = icon.ionicons5
-const { list, deleteHandle } = useDataListInit()
-const { modalData, modalShow, closeModal, resizeHandle, editHandle } =
-  useModalDataInit()
+const { modalData, modalShow, closeModal, resizeHandle, editHandle } = useModalDataInit()
+const { paginat, list, changeSize,changePage, fetchList, deleteHandle } = useDataListInit()
 </script>
 
 <style lang="scss" scoped>

src/views/project/items/index.d.ts

@@ -2,7 +2,9 @@ export type Chartype = {
   id: number | string
   title: string // 标题
   label: string // 标签
-  release: boolean // 0未发布 | 1已发布
+  time: string, // 时间
+  createId: string, // 创建者
+  release: boolean // false 未发布 | true 已发布
 }
 
 export type ChartList = Chartype[]