feat: :feat: 分页后去详情页返回记住页码

.env.development

@@ -5,4 +5,4 @@ NODE_ENV='development'
 
 VITE_APP_TITLE = 'shuimu-dashboard-h5'
 VITE_APP_PORT = 3000
-VITE_APP_BASE_API = '/dev-api'
+VITE_APP_BASE_API = 'https://devapi.shuimuai.com/'

.stylelintrc.cjs

@@ -39,5 +39,12 @@ module.exports = {
         ignoreProperties: ["menuBg", "menuText", "menuActiveText"],
       },
     ],
+    // at-rule-no-unknown: 屏蔽一些scss等语法检查
+    "at-rule-no-unknown": [
+      true,
+      {
+        ignoreAtRules: ["mixin", "extend", "content"],
+      },
+    ],
   },
 };

package.json

@@ -31,8 +31,7 @@
     ],
     "*.{vue,html}": [
       "eslint --fix",
-      "prettier --write",
-      "stylelint --fix"
+      "prettier --write"
     ],
     "*.{scss,css}": [
       "stylelint --fix",

src/store/modules/user.ts

@@ -62,17 +62,13 @@ export const useUserStore = defineStore("user", () => {
 
   // 注销
   function logout() {
-    return new Promise<void>((resolve, reject) => {
-      logoutApi()
-        .then(() => {
-          resetRouter();
-          resetToken();
-          location.reload(); // 清空路由
-          resolve();
-        })
-        .catch((error) => {
-          reject(error);
-        });
+    return new Promise<void>((resolve) => {
+      logoutApi().finally(() => {
+        resetRouter();
+        resetToken();
+        location.reload(); // 清空路由
+        resolve();
+      });
     });
   }
 

src/utils/index.ts

@@ -13,13 +13,15 @@ export function isExternal(path: string) {
 export function getUrlParam(name: string): string {
   let value = "";
   const paramsStr = window.location.href.split("?")[1];
-  const paramArr = paramsStr.split("&");
-  paramArr.some((item) => {
-    if (item.includes(name)) {
-      value = item.split("=")[1] || "";
-      return;
-    }
-  });
+  if (paramsStr) {
+    const paramArr = paramsStr.split("&");
+    paramArr.some((item) => {
+      if (item.includes(name)) {
+        value = item.split("=")[1] || "";
+        return;
+      }
+    });
+  }
   return value;
 }
 

src/views/student/index.vue

@@ -1,11 +1,13 @@
 <script setup lang="ts">
+import {useRouter} from "vue-router";
 import {GradeList} from "@/api/grade/types";
 import {useUserStore} from "@/store/modules/user";
 import {getGradeSelect} from "@/api/grade";
 import {getStudentLists} from "@/api/student";
 import {StudentItem, StudentParams} from "@/api/student/types";
-import {trimInput} from "@/utils";
+import {getUrlParam, trimInput} from "@/utils";
 
+const router = useRouter();
 const userStore = useUserStore();
 defineOptions({
   name: "StudentIndex",
@@ -32,7 +34,7 @@ async function getGradeData(schoolId: number) {
 /**
  * 学生数据
  */
-const studentSearch: StudentParams = reactive({
+const pageParams: StudentParams = reactive({
   school_id: userStore.schoolId,
   grade_id: 0,
   search: "",
@@ -43,15 +45,15 @@ const dataMessage = ref("加载中...");
 const studentCount = ref(0);
 const studentData = ref<StudentItem[]>();
 async function getStudentData(schoolId: number) {
-  studentSearch.school_id = schoolId;
-  getStudentLists(studentSearch)
+  pageParams.school_id = schoolId;
+  getStudentLists(pageParams)
     .then(({data}) => {
       const {count, lists} = data;
       studentCount.value = count;
       studentData.value = lists;
       if (!(count && count > 0 && lists.length > 0)) {
         dataMessage.value = "没有符合搜索条件的记录！";
-        if (studentSearch.grade_id == 0 && studentSearch.search == "") {
+        if (pageParams.grade_id == 0 && pageParams.search == "") {
           dataMessage.value = "暂时还没有任何学生绑定学校！";
         }
       }
@@ -62,41 +64,41 @@ async function getStudentData(schoolId: number) {
     });
 }
 function getStudentSearch() {
-  getStudentData(userStore.schoolId);
+  const current = router.currentRoute.value.path;
+  router.push(current + "?page=" + pageParams.page + "&size=" + pageParams.page_size);
+  // getStudentData(userStore.schoolId);
 }
 function alertError() {
   ElMessage.error("该学生训练数据还不足以进行训练效果分析，请至少完成16次专注力训练后再来查看。");
 }
 onMounted(() => {
+  let page_no = getUrlParam("page");
+  if (page_no && page_no > 0) {
+    pageParams.page = Number(page_no);
+  }
+  let page_size = getUrlParam("size");
+  if (page_size && page_size > 0) {
+    pageParams.page_size = Number(page_size);
+  }
   // 获取班级
   getGradeData(userStore.schoolId);
   // 获取学生数据
   getStudentData(userStore.schoolId);
 });
-// watch(
-//   () => userStore.schoolId,
-//   (newValue) => {
-//     // 学校切换后重新加载数据
-//     studentSearch.grade_id = 0;
-//     studentSearch.search = "";
-//     getGradeData(newValue);
-//     getStudentData(userStore.schoolId);
-//   }
-// );
 </script>
 
 <template>
   <div class="student-container">
     <!-- 学生查找 -->
     <div class="student-search">
-      <el-select v-model="studentSearch.grade_id" placeholder="全部班级" size="large">
+      <el-select v-model="pageParams.grade_id" placeholder="全部班级" size="large">
         <el-option v-for="item in gradeData" :key="item.id" :label="item.name" :value="item.id" />
       </el-select>
       <el-input
-        v-model="studentSearch.search"
+        v-model="pageParams.search"
         placeholder="请输入学生名称或手机号码"
         size="large"
-        @input="(value:string) => (studentSearch.search = trimInput(value))" />
+        @input="(value:string) => (pageParams.search = trimInput(value))" />
       <el-button size="large" type="primary" @click="getStudentSearch()">查找</el-button>
       <span
         >共<b>{{ studentCount }}</b
@@ -131,8 +133,8 @@ onMounted(() => {
       <pagination
         v-if="studentCount > 0"
         v-model:total="studentCount"
-        v-model:page="studentSearch.page"
-        v-model:limit="studentSearch.page_size"
+        v-model:page="pageParams.page"
+        v-model:limit="pageParams.page_size"
         @pagination="getStudentSearch()" />
     </div>
   </div>
@@ -182,8 +184,6 @@ onMounted(() => {
 }
 
 /* 自定义 el-select 样式 */
-
-/* el-select 各种边框线隐藏 **/
 :deep(.el-select) {
   --el-select-input-focus-border-color: none !important;
 }

src/views/training/index.vue

@@ -1,11 +1,13 @@
 <script setup lang="ts">
+import {useRouter} from "vue-router";
 import {useUserStore} from "@/store/modules/user";
 import {GradeList} from "@/api/grade/types";
 import {TrainingItem, TrainingParams} from "@/api/training/types";
 import {getGradeSelect} from "@/api/grade";
 import {getTrainingLists} from "@/api/training";
-import {trimInput} from "@/utils";
+import {getUrlParam, trimInput} from "@/utils";
 
+const router = useRouter();
 const userStore = useUserStore();
 defineOptions({
   name: "TrainingIndex",
@@ -65,12 +67,22 @@ async function getTrainingData(schoolId: number) {
     });
 }
 function getTrainingSearch() {
-  getTrainingData(userStore.schoolId);
+  const current = router.currentRoute.value.path;
+  router.push(current + "?page=" + pageParams.page + "&size=" + pageParams.page_size);
+  //getTrainingData(userStore.schoolId);
 }
 function alertError() {
   ElMessage.error("本次训练采集的数据不足，无法分析并生成有效报告！");
 }
 onMounted(() => {
+  let page_no = getUrlParam("page");
+  if (page_no && page_no > 0) {
+    pageParams.page = Number(page_no);
+  }
+  let page_size = getUrlParam("size");
+  if (page_size && page_size > 0) {
+    pageParams.page_size = Number(page_size);
+  }
   getGradeData(userStore.schoolId);
   getTrainingData(userStore.schoolId);
 });