项目预审

src/views/researchProject/review/index.vue

@@ -45,14 +45,14 @@
             v-for="item in statusTabs"
             :key="item.value"
             :class="{ active: activeStatus === item.value }"
-            @click="activeStatus = item.value"
+            @click="changeStatus(item.value)"
           >
             {{ item.label }} <span>{{ statusCount(item.value) }}</span>
           </button>
         </div>
         <div class="project-list">
           <button
-            v-for="project in filteredProjects"
+            v-for="project in pagedProjects"
             :key="project.id"
             class="project-item"
             :class="{ selected: selectedProject?.id === project.id }"
@@ -70,6 +70,15 @@
           </button>
           <el-empty v-if="!filteredProjects.length" description="暂无待审项目" :image-size="72" />
         </div>
+        <Pagination
+          v-if="filteredProjects.length"
+          v-model:page="pagination.pageNo"
+          v-model:limit="pagination.pageSize"
+          :total="filteredProjects.length"
+          :page-sizes="[5, 10, 20]"
+          layout="total, prev, pager, next"
+          @pagination="handlePagination"
+        />
       </ContentWrap>
 
       <ContentWrap v-if="selectedProject" class="review-detail-panel" style="border: none">
@@ -337,6 +346,7 @@ const projects = ref<Project[]>([
   })
 ])
 const queryParams = reactive({ projectName: '', projectType: '', submitDate: '' })
+const pagination = reactive({ pageNo: 1, pageSize: 5 })
 const activeStatus = ref('all')
 const selectedProject = ref<Project>(projects.value[0])
 const activeTab = ref('info')
@@ -350,6 +360,10 @@ const filteredProjects = computed(() =>
       (activeStatus.value === 'all' || item.status === activeStatus.value)
   )
 )
+const pagedProjects = computed(() => {
+  const start = (pagination.pageNo - 1) * pagination.pageSize
+  return filteredProjects.value.slice(start, start + pagination.pageSize)
+})
 const statusCount = (status: string) =>
   status === 'all'
     ? projects.value.length
@@ -361,16 +375,30 @@ const selectProject = (project: Project) => {
   reviewComment.value = ''
   activeTab.value = 'info'
 }
+const changeStatus = (status: string) => {
+  activeStatus.value = status
+  pagination.pageNo = 1
+  handleQuery()
+}
 const resetQuery = () => {
   queryParams.projectName = ''
   queryParams.projectType = ''
   queryParams.submitDate = ''
   activeStatus.value = 'all'
+  pagination.pageNo = 1
 }
 const handleQuery = () => {
+  pagination.pageNo = 1
   if (!filteredProjects.value.includes(selectedProject.value))
     selectedProject.value = filteredProjects.value[0]
 }
+const handlePagination = () => {
+  const maxPage = Math.max(1, Math.ceil(filteredProjects.value.length / pagination.pageSize))
+  if (pagination.pageNo > maxPage) pagination.pageNo = maxPage
+  if (!filteredProjects.value.includes(selectedProject.value)) {
+    selectedProject.value = pagedProjects.value[0]
+  }
+}
 const formatAmount = (amount: number) =>
   amount.toLocaleString('zh-CN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })
 const fileIcon = (kind: Attachment['kind']) =>