From 80dc0b98a72083434129e9627d02cc9b31c5ad8d Mon Sep 17 00:00:00 2001
From: donghao <donghao@supervision.ltd>
Date: Mon, 5 Feb 2024 14:43:54 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20mock=E6=95=B0=E6=8D=AE=E4=B8=8E?=
=?UTF-8?q?=E9=80=9A=E7=94=A8=E7=AE=A1=E7=90=86=E5=B9=B3=E5=8F=B0=E4=B8=80?=
=?UTF-8?q?=E8=87=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
mock/alarm.ts | 61 +++++---------------
mock/pools/alarmData.ts | 52 +++++++++++++++++
mock/typing.ts | 17 ++++++
mock/utils/apiMock.ts | 35 +++++++++++
src/components/CustomTable/src/baseTable.tsx | 12 ++--
src/store/modules/user.ts | 42 ++++++++++----
src/utils/http/index.ts | 2 +-
src/views/alarm/index.vue | 51 ++++++++++------
8 files changed, 190 insertions(+), 82 deletions(-)
create mode 100644 mock/pools/alarmData.ts
create mode 100644 mock/typing.ts
create mode 100644 mock/utils/apiMock.ts
diff --git a/mock/alarm.ts b/mock/alarm.ts
index 006d953..10be7c4 100644
--- a/mock/alarm.ts
+++ b/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
+ }
+ })
};
}
}
diff --git a/mock/pools/alarmData.ts b/mock/pools/alarmData.ts
new file mode 100644
index 0000000..5392bf4
--- /dev/null
+++ b/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
+ }
+};
diff --git a/mock/typing.ts b/mock/typing.ts
new file mode 100644
index 0000000..ded9753
--- /dev/null
+++ b/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 标识当前是模拟数据
+}
diff --git a/mock/utils/apiMock.ts b/mock/utils/apiMock.ts
new file mode 100644
index 0000000..b671844
--- /dev/null
+++ b/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 });
+}
diff --git a/src/components/CustomTable/src/baseTable.tsx b/src/components/CustomTable/src/baseTable.tsx
index f42eb58..f64ac75 100644
--- a/src/components/CustomTable/src/baseTable.tsx
+++ b/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
};
diff --git a/src/store/modules/user.ts b/src/store/modules/user.ts
index 5d6b337..463508c 100644
--- a/src/store/modules/user.ts
+++ b/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);
+ });
+ }
});
}
}
diff --git a/src/utils/http/index.ts b/src/utils/http/index.ts
index 3a39993..11ea2c6 100644
--- a/src/utils/http/index.ts
+++ b/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 = [];
diff --git a/src/views/alarm/index.vue b/src/views/alarm/index.vue
index 1247f2e..0310900 100644
--- a/src/views/alarm/index.vue
+++ b/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"