feat:内容管理新增分页

src/router/index.js

@@ -6,7 +6,14 @@ import { useRouterGuard } from './routerGuard/routerGuard'
 
 const router = createRouter({
   history: createWebHashHistory('/'),
-  routes: [...loginRoute, ...authRoute]
+  routes: [...loginRoute, ...authRoute],
+  scrollBehavior(to, from, savedPosition) {
+    if (savedPosition) {
+      return savedPosition
+    } else {
+      return { top: 0, behavior: 'smooth' }
+    }
+  }
 })
 
 useRouterGuard(router)

src/views/content/content.vue

@@ -23,9 +23,15 @@ const searchFromData = ref({
   timeRange: [],
   page: 1,
   size: 10,
+  total: 0,
   sort: 'desc'
 })
 
+const onCurrentPageChange = (n) => {
+  searchFromData.value.page = n
+  getContentListData()
+}
+
 const handleSubmitSearch = () => {
   getContentListData()
 }
@@ -38,6 +44,7 @@ const getContentListData = () => {
   }).then((res) => {
     if (res.code === 20200) {
       blogList.value = res.data.list
+      searchFromData.value.total = res.data.total
     } else {
       ElMessage({
         message: '获取内容列表失败',
@@ -220,8 +227,9 @@ const onEditorSubmit = (data) => {
           <el-input
             v-model="searchFromData.title"
             placeholder="请输入标题"
-            clearable
             style="width: 220px"
+            clearable
+            disabled
           ></el-input>
         </el-form-item>
         <el-form-item label="时间">
@@ -234,10 +242,11 @@ const onEditorSubmit = (data) => {
             end-placeholder="结束日期"
             value-format="YYYY-MM-DD"
             clearable
+            disabled
           ></el-date-picker>
         </el-form-item>
         <el-form-item>
-          <el-button @click="handleSubmitSearch">搜索</el-button>
+          <el-button @click="handleSubmitSearch" disabled>搜索</el-button>
         </el-form-item>
       </el-form>
     </div>
@@ -246,6 +255,7 @@ const onEditorSubmit = (data) => {
         <el-table-column label="序号" type="index" align="center" width="90"></el-table-column>
         <el-table-column label="标题" prop="title" align="center" width="140"></el-table-column>
         <el-table-column label="作者" prop="author" align="center" width="100"></el-table-column>
+        <el-table-column label="分类" prop="category" align="center" width="100"></el-table-column>
         <el-table-column label="摘要" prop="summary" header-align="center"></el-table-column>
         <el-table-column
           label="发布日期"
@@ -288,6 +298,18 @@ const onEditorSubmit = (data) => {
         </el-table-column>
       </el-table>
     </div>
+    <!-- 分页器 -->
+    <div class="list-pagination">
+      <el-pagination
+        layout="prev, pager, next"
+        prev-text="上一页"
+        next-text="下一页"
+        :page-size="searchFromData.size"
+        :current-page="searchFromData.page"
+        :total="searchFromData.total"
+        @update:current-page="onCurrentPageChange"
+      ></el-pagination>
+    </div>
 
     <!-- 编辑器dialog -->
     <el-dialog
@@ -313,5 +335,11 @@ const onEditorSubmit = (data) => {
   }
   > .content-list {
   }
+  .list-pagination {
+    padding: 10px 40px;
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+  }
 }
 </style>