feat: mock数据与通用管理平台一致

mock/alarm.ts

@@ -2,63 +2,30 @@
  * @Author: donghao donghao@supervision.ltd
  * @Date: 2024-01-17 13:54:43
  * @LastEditors: donghao donghao@supervision.ltd
- * @LastEditTime: 2024-01-22 16:44:06
+ * @LastEditTime: 2024-02-04 16:45:14
  * @FilePath: \General-AI-Platform-Web-Client\mock\alarm.ts
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
 import { MockMethod } from "vite-plugin-mock";
+import { alarmListData } from "./pools/alarmData";
+import { fetchCurrPageByList } from "./utils/apiMock";
 
-function generateRandomDateTime(year) {
-  // 生成随机月份（1-12）
-  const month = Math.floor(Math.random() * 12) + 1;
-
-  // 生成随机日期（1-31）
-  const day = Math.floor(Math.random() * 31) + 1;
-
-  // 生成随机小时（0-23）
-  const hour = Math.floor(Math.random() * 24);
-
-  // 生成随机分钟（0-59）
-  const minute = Math.floor(Math.random() * 60);
-
-  // 生成随机秒钟（0-59）
-  const second = Math.floor(Math.random() * 60);
-
-  // 返回随机日期和时间的字符串
-  return `${year}-${month < 10 ? "0" : ""}${month}-${
-    day < 10 ? "0" : ""
-  }${day} ${hour < 10 ? "0" : ""}${hour}:${minute < 10 ? "0" : ""}${minute}:${
-    second < 10 ? "0" : ""
-  }${second}`;
-}
-function fetchList(): Record<string, any>[] {
-  const currList: Record<string, any>[] = [];
-  // const nameArr = ["玩手机监测", "控制器", "视频监控"];
-  // const deviceGroupArr = [""]
-  for (let i = 0; i < 10; i++) {
-    currList.push({
-      id: 1,
-      createTime: generateRandomDateTime(2023),
-      updateTime: "2023-10-17T02:35:41.14308Z",
-      name: "表面缺陷",
-      code: "DC00001",
-      level: Math.floor(Math.random() * 6) + 1,
-      deviceGroup: "设备组" + parseInt(Math.random() * 10) + 1,
-      remark: ""
-    });
-  }
-  return currList;
-}
 export default [
   {
     url: "/getAlarmList",
     method: "post",
-    response: () => {
+    response: req => {
+      const { page, pageSize } = req.body;
+      // console.log(req);
       return {
-        success: true,
-        data: {
-          list: fetchList()
-        }
+        ...fetchCurrPageByList({
+          ...alarmListData,
+          data: {
+            ...alarmListData.data,
+            page,
+            pageSize: pageSize || 10
+          }
+        })
       };
     }
   }

mock/pools/alarmData.ts

@@ -0,0 +1,52 @@
+function generateRandomDateTime(year) {
+  // 生成随机月份（1-12）
+  const month = Math.floor(Math.random() * 12) + 1;
+
+  // 生成随机日期（1-31）
+  const day = Math.floor(Math.random() * 31) + 1;
+
+  // 生成随机小时（0-23）
+  const hour = Math.floor(Math.random() * 24);
+
+  // 生成随机分钟（0-59）
+  const minute = Math.floor(Math.random() * 60);
+
+  // 生成随机秒钟（0-59）
+  const second = Math.floor(Math.random() * 60);
+
+  // 返回随机日期和时间的字符串
+  return `${year}-${month < 10 ? "0" : ""}${month}-${
+    day < 10 ? "0" : ""
+  }${day} ${hour < 10 ? "0" : ""}${hour}:${minute < 10 ? "0" : ""}${minute}:${
+    second < 10 ? "0" : ""
+  }${second}`;
+}
+function fetchList(): Record<string, any>[] {
+  const currList: Record<string, any>[] = [];
+  // const nameArr = ["玩手机监测", "控制器", "视频监控"];
+  // const deviceGroupArr = [""]
+  for (let i = 0; i < 35; i++) {
+    currList.push({
+      id: 1,
+      createTime: generateRandomDateTime(2023),
+      updateTime: "2023-10-17T02:35:41.14308Z",
+      name: "表面缺陷",
+      code: "DC0000" + i,
+      level: Math.floor(Math.random() * 6) + 1,
+      deviceGroup: "设备组" + parseInt(Math.random() * 10) + 1,
+      remark: ""
+    });
+  }
+  return currList;
+}
+
+const currentData = fetchList();
+
+export const alarmListData = {
+  data: {
+    list: currentData,
+    total: currentData.length,
+    page: 1,
+    pageSize: 10
+  }
+};

mock/typing.ts

@@ -0,0 +1,17 @@
+/**成功返回数据结构 */
+export interface successMockApiProps {
+  code: number; // 0 成功
+  success: boolean; // true 成功
+  data: any; // mock业务层数据
+  msg: string | undefined; // 成功提示
+  isMock: boolean; // true 标识当前是模拟数据
+}
+
+/**失败返回数据结构 */
+export interface failMockApiProps {
+  code?: number; // 7 失败
+  success: boolean; // false 失败
+  data: any; // mock业务层数据
+  msg: string | undefined; // 成功提示
+  isMock: boolean; // true 标识当前是模拟数据
+}

mock/utils/apiMock.ts

@@ -0,0 +1,35 @@
+import { failMockApiProps, successMockApiProps } from "../typing";
+export function fetchMockSuccessFullByOther({
+  data,
+  msg
+}): successMockApiProps {
+  return {
+    code: 0, // 0 成功
+    success: true, // true 成功
+    data: data || null, // mock业务层数据
+    msg: msg | "ok", // 成功提示
+    isMock: true // true 标识当前是模拟数据
+  } as successMockApiProps;
+}
+
+export function fetchMockFailFullByOther({ data, msg }): failMockApiProps {
+  return {
+    code: 599, // 0 成功
+    success: true, // true 成功
+    data: data || null, // mock业务层数据
+    msg: msg | "fail", // 成功提示
+    isMock: true // true 标识当前是模拟数据
+  } as failMockApiProps;
+}
+
+// 分页展示
+export function fetchCurrPageByList({ data }): successMockApiProps {
+  console.log("fetchCurrPageByList_data", data);
+  const { page, pageSize } = data;
+  const prevPage = page - 1;
+  const currPageData = {
+    ...data,
+    list: data.list.slice(prevPage * pageSize, page * pageSize)
+  };
+  return fetchMockSuccessFullByOther({ data: currPageData });
+}

src/components/CustomTable/src/baseTable.tsx

@@ -102,7 +102,7 @@ export default defineComponent({
     /**
      * 页码
      */
-    pageNum: {
+    page: {
       type: Number,
       default: 1
     },
@@ -187,11 +187,11 @@ export default defineComponent({
     /**
      * 改变页数
      */
-    function handlePageNumChange(pageNum: number) {
+    function handlePageNumChange(page: number) {
       const { sortBy, sortOrder } = tableState;
       const { pageSize } = props;
       onChange({
-        pageNum,
+        page,
         pageSize,
         prop: sortBy,
         order: sortOrder,
@@ -208,7 +208,7 @@ export default defineComponent({
         // 下拉框溢出可能导致溢出 body 出现滚动条
         // 加个延迟，等下拉隐藏
         onChange({
-          pageNum: 1,
+          page: 1,
           pageSize,
           prop: sortBy,
           order: sortOrder,
@@ -222,7 +222,7 @@ export default defineComponent({
      */
     function handleTableSortChange({ prop, order }: XTableSort) {
       const { pageSize } = props;
-      onChange({ pageNum: 1, pageSize, prop, order, type: "sort" });
+      onChange({ page: 1, pageSize, prop, order, type: "sort" });
     }
 
     /**
@@ -376,7 +376,7 @@ export default defineComponent({
         layout: props.pagerLayout,
         pageSize: props.pageSize,
         pageSizes: props.pageSizes,
-        currentPage: props.pageNum,
+        currentPage: props.page,
         onSizeChange: handlePageSizeChange,
         onCurrentChange: handlePageNumChange
       };

src/store/modules/user.ts

@@ -1,3 +1,11 @@
+/*
+ * @Author: donghao donghao@supervision.ltd
+ * @Date: 2024-01-12 14:35:28
+ * @LastEditors: donghao donghao@supervision.ltd
+ * @LastEditTime: 2024-02-05 14:42:11
+ * @FilePath: \General-AI-Platform-Web-Client\src\store\modules\user.ts
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ */
 import { defineStore } from "pinia";
 import { store } from "@/store";
 import { userType } from "./types";
@@ -7,7 +15,13 @@ import { storageSession } from "@pureadmin/utils";
 import { getLogin, refreshTokenApi } from "@/api/user";
 import { UserResult, RefreshTokenResult } from "@/api/user";
 import { useMultiTagsStoreHook } from "@/store/modules/multiTags";
-import { type DataInfo, setToken, removeToken, sessionKey } from "@/utils/auth";
+import {
+  type DataInfo,
+  setToken,
+  getToken,
+  removeToken,
+  sessionKey
+} from "@/utils/auth";
 
 export const useUserStore = defineStore({
   id: "pure-user",
@@ -54,16 +68,22 @@ export const useUserStore = defineStore({
     /** 刷新`token` */
     async handRefreshToken(data) {
       return new Promise<RefreshTokenResult>((resolve, reject) => {
-        refreshTokenApi(data)
-          .then(data => {
-            if (data) {
-              setToken(data.data);
-              resolve(data);
-            }
-          })
-          .catch(error => {
-            reject(error);
-          });
+        const tokenData = getToken();
+        // update 已调整为有缓存token,不再次刷新
+        if (tokenData.refreshToken) {
+          resolve(tokenData);
+        } else {
+          refreshTokenApi(data)
+            .then(data => {
+              if (data) {
+                setToken(data.data);
+                resolve(data);
+              }
+            })
+            .catch(error => {
+              reject(error);
+            });
+        }
       });
     }
   }

src/utils/http/index.ts

@@ -88,7 +88,7 @@ class PureHttp {
                     useUserStoreHook()
                       .handRefreshToken({ refreshToken: data.refreshToken })
                       .then(res => {
-                        const token = res.data.accessToken;
+                        const token = getToken() || res.data.accessToken;
                         config.headers["Authorization"] = formatToken(token);
                         PureHttp.requests.forEach(cb => cb(token));
                         PureHttp.requests = [];

src/views/alarm/index.vue

@@ -155,7 +155,7 @@ const svg = `
         " style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)"/>
       `;
 
-const pagination = ref({ current: 1, pageSize: 10, total: 0 });
+const pagination = ref({ currentPage: 1, pageSize: 10, total: 0 });
 
 const listData = ref([]);
 
@@ -169,22 +169,36 @@ const formData = reactive({
 const dataLoading = ref(true);
 
 const getList = async () => {
-  try {
-    const { data } = await getAlarmList();
-    listData.value = data.list;
-    console.log(data.list);
-    pagination.value = {
-      ...pagination.value,
-      total: data.list.length
-    };
-  } catch (e) {
-    console.log(e);
-  } finally {
-    setTimeout(() => {
-      dataLoading.value = false;
-    }, 500);
-  }
+  const { currentPage, pageSize } = pagination.value;
+  const { data } = await getAlarmList({ page: currentPage, pageSize });
+  listData.value = data.list;
+  console.log(data.list);
+  pagination.value = {
+    ...pagination.value,
+    total: data.total
+  };
+  dataLoading.value = false;
+  // try {
+
+  // } catch (e) {
+  //   console.log(e);
+  // } finally {
+  //   setTimeout(() => {
+  //     dataLoading.value = false;
+  //   }, 500);
+  // }
 };
+
+function handleTableChange(record) {
+  console.log("handleTableChange_record", record);
+  pagination.value = {
+    ...pagination.value,
+    currentPage: record.page,
+    pageSize: record.pageSize
+  };
+  getList();
+}
+
 onMounted(() => {
   getList();
 });
@@ -218,10 +232,13 @@ onMounted(() => {
     >
       <template v-if="pagination.total > 0">
         <BaseTable
-          :total="48"
+          :total="pagination.total"
+          :pageSize="pagination.pageSize"
           :dataSource="listData"
           :columns="columns"
           @actions="handleDelete"
+          :page="pagination.currentPage"
+          @change="handleTableChange"
         >
           <!-- <template v-slot:customActions="{ row }">
             <el-button @click="handleDelete(row)" type="danger" size="small"