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[] { - const currList: Record[] = []; - // 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[] { + const currList: Record[] = []; + // 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((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(() => { >