blackteay/nova-admin
1
0
Fork 0
mirror of https://github.com/chansee97/nova-admin.git synced 2025-04-06 03:57:54 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(aixos): 完善axios错误处理流程

Browse Source
This commit is contained in:
chen.home 2023-01-12 00:25:48 +08:00
parent 204cb7ad9f
commit ef6392615b
5 changed files with 442 additions and 323 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
src/service/http/help.ts → src/service/http/handle.ts
View File

@ -10,13 +10,13 @@ import {
} from '@/config'; } from '@/config';
type ErrorStatus = keyof typeof ERROR_STATUS; type ErrorStatus = keyof typeof ERROR_STATUS;
/** /**
* @description: 处理axios返回的http错误 * @description: 处理axios或http错误
* @param {AxiosError} err * @param {AxiosError} err
* @return {*} * @return {*}
*/ */
export function handleHttpError(err: AxiosError) { export function handleAxiosError(err: AxiosError) {
const error = { const error = {
type: 'axios', type: 'Axios',
code: DEFAULT_REQUEST_ERROR_CODE, code: DEFAULT_REQUEST_ERROR_CODE,
msg: DEFAULT_REQUEST_ERROR_MSG, msg: DEFAULT_REQUEST_ERROR_MSG,
}; };
@ -43,9 +43,42 @@ export function handleHttpError(err: AxiosError) {
/** /**
* @description: 处理axios请求成功，但返回后端服务器报错 * @description: 处理axios请求成功，但返回后端服务器报错
* @param {AxiosResponse} err * @param {AxiosResponse} response
* @return {*} * @return {*}
*/ */
// export function handleResponseError(err: AxiosResponse) {} export function handleResponseError(response: AxiosResponse) {
const error = {
type: 'Axios',
code: DEFAULT_REQUEST_ERROR_CODE,
msg: DEFAULT_REQUEST_ERROR_MSG,
};
// export function handleBusinessError() {} if (!window.navigator.onLine) {
// 网路错误
Object.assign(error, { code: NETWORK_ERROR_CODE, msg: NETWORK_ERROR_MSG });
} else {
// 请求成功的状态码非200的错误
const errorCode: ErrorStatus = response.status as ErrorStatus;
const msg = ERROR_STATUS[errorCode] || DEFAULT_REQUEST_ERROR_MSG;
Object.assign(error, { type: 'Response', code: errorCode, msg });
}
return error;
}
/**
* @description:
* @param {Record} apiData 接口返回的后台数据
* @param {Service} config axios字段配置
* @return {*}
*/
export function handleBusinessError(apiData: Record<string, any>, config: Service.BackendResultConfig) {
const { codeKey, msgKey } = config;
const error = {
type: 'Business',
code: apiData[codeKey],
msg: apiData[msgKey],
};
return error;
}

57
src/service/http/instance.ts
View File

@ -1,8 +1,7 @@
import axios from 'axios'; import axios from 'axios';
import type { AxiosInstance, AxiosRequestConfig, AxiosResponse, AxiosError } from 'axios'; import type { AxiosInstance, AxiosRequestConfig, AxiosResponse, AxiosError } from 'axios';
import { getToken } from '@/utils'; import { getToken } from '@/utils';
// import { handleHttpError, handleResponseError, handleBusinessError } from './help'; import { handleAxiosError, handleResponseError, handleBusinessError } from './handle';
import { handleHttpError } from './help';
/** /**
* @description: 封装axios请求类 * @description: 封装axios请求类
@ -34,34 +33,44 @@ export default class createAxiosInstance {
// 设置类拦截器的函数 // 设置类拦截器的函数
setInterceptor() { setInterceptor() {
this.instance.interceptors.request.use( this.instance.interceptors.request.use(
(config: AxiosRequestConfig) => { async (config) => {
// 一般会请求拦截里面加token const handleConfig = { ...config };
config.headers!.Authorization = getToken(); if (handleConfig.headers) {
return config; // 设置token
typeof handleConfig.headers.set === 'function' &&
handleConfig.headers.set('Authorization', `Bearer ${getToken() || ''}`);
}
return handleConfig;
}, },
(err: any) => Promise.reject(err) (axiosError: AxiosError) => {
const error = handleAxiosError(axiosError);
Promise.reject(error);
}
); );
this.instance.interceptors.response.use( this.instance.interceptors.response.use(
// 因为接口的数据都在res.data下，所以直接返回res.data async (response) => {
// 系统如果有自定义code也可以在这里处理 const { status } = response;
(res: AxiosResponse) => { if (status === 200) {
// apiData 是 API 返回的数据 // 获取返回的数据
const apiData = res.data; const apiData = response.data;
// 这个 Code 是和后端约定的业务 Code const { codeKey, successCode } = this.backendConfig;
const code = String(res.data[this.backendConfig.codeKey]); // 请求成功
switch (code) { if (apiData[codeKey] == successCode) {
case this.backendConfig.successCode: // return apiData[dataKey];
// code === 200 代表没有错误,直接返回约定的数据内容
return apiData; return apiData;
default: }
// 不是正确的 Code,返回错误提示信息 //TODO 添加刷新token的操作
return Promise.reject(new Error(`Error:${this.backendConfig.dataKey}`)); // 业务请求失败
const error = handleBusinessError(apiData, this.backendConfig);
return Promise.reject(error);
} }
// 接口请求失败
const error = handleResponseError(response);
return Promise.reject(error);
}, },
(err: AxiosError) => { (axiosError: AxiosError) => {
// 这里用来处理http常见错误，进行全局提示等 // 处理http常见错误，进行全局提示等
const error = handleHttpError(err); const error = handleAxiosError(axiosError);
// 这里是AxiosError类型，所以一般我们只reject我们需要的响应即可
return Promise.reject(error); return Promise.reject(error);
} }
); );

248
src/store/modules/route.ts
View File

@ -7,130 +7,130 @@ import { fetchUserRoutes } from '@/service';
import { staticRoutes } from '@/router/modules'; import { staticRoutes } from '@/router/modules';
interface RoutesStatus { interface RoutesStatus {
isInitAuthRoute: boolean; isInitAuthRoute: boolean;
menus: any; menus: any;
userRoutes: AppRoute.Route[]; userRoutes: AppRoute.Route[];
activeMenu: string | null; activeMenu: string | null;
authRouteMode: ImportMetaEnv['VITE_AUTH_ROUTE_MODE']; authRouteMode: ImportMetaEnv['VITE_AUTH_ROUTE_MODE'];
cacheRoutes: string[]; cacheRoutes: string[];
} }
export const useRouteStore = defineStore('route-store', { export const useRouteStore = defineStore('route-store', {
state: (): RoutesStatus => { state: (): RoutesStatus => {
return { return {
userRoutes: [], userRoutes: [],
isInitAuthRoute: false, isInitAuthRoute: false,
menus: [], menus: [],
activeMenu: null, activeMenu: null,
authRouteMode: import.meta.env.VITE_AUTH_ROUTE_MODE, authRouteMode: import.meta.env.VITE_AUTH_ROUTE_MODE,
cacheRoutes: [], cacheRoutes: [],
}; };
}, },
actions: { actions: {
resetRouteStore() { resetRouteStore() {
this.resetRoutes(); this.resetRoutes();
this.$reset(); this.$reset();
}, },
resetRoutes() { resetRoutes() {
/* 删除后面添加的路由 */ /* 删除后面添加的路由 */
router.removeRoute('appRoot'); router.removeRoute('appRoot');
}, },
/* 根据当前路由的name生成面包屑数据 */ /* 根据当前路由的name生成面包屑数据 */
createBreadcrumbFromRoutes(routeName = '/', userRoutes: AppRoute.Route[]) { createBreadcrumbFromRoutes(routeName = '/', userRoutes: AppRoute.Route[]) {
const path: AppRoute.Route[] = []; const path: AppRoute.Route[] = [];
// 筛选所有包含目标的各级路由组合成一维数组 // 筛选所有包含目标的各级路由组合成一维数组
const getPathfromRoutes = (routeName: string, userRoutes: AppRoute.Route[]) => { const getPathfromRoutes = (routeName: string, userRoutes: AppRoute.Route[]) => {
userRoutes.forEach((item) => { userRoutes.forEach((item) => {
if (this.hasPathinAllPath(routeName, item)) { if (this.hasPathinAllPath(routeName, item)) {
path.push(item); path.push(item);
if (item.children && item.children.length !== 0) { if (item.children && item.children.length !== 0) {
getPathfromRoutes(routeName, item.children); getPathfromRoutes(routeName, item.children);
} }
} }
}); });
}; };
getPathfromRoutes(routeName, userRoutes); getPathfromRoutes(routeName, userRoutes);
return path; return path;
}, },
/* 判断当前路由和子路由中是否存在为routeName的路由 */ /* 判断当前路由和子路由中是否存在为routeName的路由 */
hasPathinAllPath(routeName: string, userRoutes: AppRoute.Route) { hasPathinAllPath(routeName: string, userRoutes: AppRoute.Route) {
if (userRoutes.name === routeName) { if (userRoutes.name === routeName) {
return true; return true;
} }
if (userRoutes.children && userRoutes.children.length !== 0) { if (userRoutes.children && userRoutes.children.length !== 0) {
const arr: boolean[] = []; const arr: boolean[] = [];
userRoutes.children.forEach((item) => { userRoutes.children.forEach((item) => {
arr.push(this.hasPathinAllPath(routeName, item)); arr.push(this.hasPathinAllPath(routeName, item));
}); });
return arr.some((item) => { return arr.some((item) => {
return item; return item;
}); });
} }
return false; return false;
}, },
/* 设置当前高亮的菜单key */ /* 设置当前高亮的菜单key */
setActiveMenu(key: string) { setActiveMenu(key: string) {
this.activeMenu = key; this.activeMenu = key;
}, },
/* 生成侧边菜单的数据 */ /* 生成侧边菜单的数据 */
createMenus(userRoutes: AppRoute.Route[]) { createMenus(userRoutes: AppRoute.Route[]) {
this.userRoutes = userRoutes; this.userRoutes = userRoutes;
this.menus = this.transformAuthRoutesToMenus(userRoutes); this.menus = this.transformAuthRoutesToMenus(userRoutes);
}, },
/* 初始化动态路由 */ /* 初始化动态路由 */
async initDynamicRoute() { async initDynamicRoute() {
// 根据用户id来获取用户的路由 // 根据用户id来获取用户的路由
const { userId } = getUserInfo(); const { userId } = getUserInfo();
const { data } = await fetchUserRoutes(userId); const { data: routes } = await fetchUserRoutes(userId);
// 根据用户返回的路由表来生成真实路由 // 根据用户返回的路由表来生成真实路由
const appRoutes = await createDynamicRoutes(data); const appRoutes = await createDynamicRoutes(routes);
// 生成侧边菜单 // 生成侧边菜单
await this.createMenus(data); await this.createMenus(routes);
// 插入路由表 // 插入路由表
router.addRoute(appRoutes); router.addRoute(appRoutes);
}, },
/* 初始化静态路由 */ /* 初始化静态路由 */
async initStaticRoute() { async initStaticRoute() {
// 根据静态路由表来生成真实路由 // 根据静态路由表来生成真实路由
const appRoutes = await createDynamicRoutes(staticRoutes); const appRoutes = await createDynamicRoutes(staticRoutes);
// 生成侧边菜单 // 生成侧边菜单
await this.createMenus(staticRoutes); await this.createMenus(staticRoutes);
// 插入路由表 // 插入路由表
router.addRoute(appRoutes); router.addRoute(appRoutes);
}, },
//* 将返回的路由表渲染成侧边栏 */ //* 将返回的路由表渲染成侧边栏 */
transformAuthRoutesToMenus(userRoutes: AppRoute.Route[]): MenuOption[] { transformAuthRoutesToMenus(userRoutes: AppRoute.Route[]): MenuOption[] {
return userRoutes return userRoutes
.filter((item) => { .filter((item) => {
return !item.meta.hide; return !item.meta.hide;
}) })
.map((item) => { .map((item) => {
const target: MenuOption = { const target: MenuOption = {
label: item.meta.title, label: item.meta.title,
key: item.path, key: item.path,
}; };
// 判断有无图标 // 判断有无图标
if (item.meta.icon) { if (item.meta.icon) {
target.icon = renderIcon(item.meta.icon); target.icon = renderIcon(item.meta.icon);
} }
// 判断子元素 // 判断子元素
if (item.children) { if (item.children) {
const children = this.transformAuthRoutesToMenus(item.children); const children = this.transformAuthRoutesToMenus(item.children);
// 只有子元素有且不为空时才添加 // 只有子元素有且不为空时才添加
if (children.length !== 0) { if (children.length !== 0) {
target.children = children; target.children = children;
} }
} }
return target; return target;
}); });
}, },
async initAuthRoute() { async initAuthRoute() {
this.isInitAuthRoute = false; this.isInitAuthRoute = false;
if (this.authRouteMode === 'dynamic') { if (this.authRouteMode === 'dynamic') {
await this.initDynamicRoute(); await this.initDynamicRoute();
} else { } else {
await this.initStaticRoute(); await this.initStaticRoute();
} }
this.isInitAuthRoute = true; this.isInitAuthRoute = true;
}, },
}, },
}); });

72
src/utils/storage.ts
View File

@ -5,72 +5,72 @@ const DEFAULT_CACHE_TIME = 60 * 60 * 24 * 7;
const prefix = import.meta.env.VITE_STORAGE_PREFIX as string; const prefix = import.meta.env.VITE_STORAGE_PREFIX as string;
interface StorageData { interface StorageData {
value: any; value: any;
expire: number | null; expire: number | null;
} }
/** /**
* LocalStorage部分操作 * LocalStorage部分操作
*/ */
export const setLocal = (key: string, value: unknown, expire: number | null = DEFAULT_CACHE_TIME): void => { export const setLocal = (key: string, value: unknown, expire: number | null = DEFAULT_CACHE_TIME): void => {
const storageData: StorageData = { const storageData: StorageData = {
value, value,
expire: expire !== null ? new Date().getTime() + expire * 1000 : null, expire: expire !== null ? new Date().getTime() + expire * 1000 : null,
}; };
const json = JSON.stringify(storageData); const json = JSON.stringify(storageData);
localStorage.setItem(prefix + key, json); localStorage.setItem(prefix + key, json);
}; };
export const getLocal = (key: string) => { export const getLocal = (key: string) => {
const json = localStorage.getItem(prefix + key); const json = localStorage.getItem(prefix + key);
if (!json) return null; if (!json) return null;
let storageData: StorageData | null = null; let storageData: StorageData | null = null;
storageData = JSON.parse(json as string); storageData = JSON.parse(json as string);
if (storageData) { if (storageData) {
const { value, expire } = storageData; const { value, expire } = storageData;
if (expire === null || expire >= Date.now()) { if (expire === null || expire >= Date.now()) {
return value; return value;
} }
} }
removeLocal(key); removeLocal(key);
return null; return null;
}; };
export const removeLocal = (key: string): void => { export const removeLocal = (key: string): void => {
localStorage.removeItem(prefix + key); localStorage.removeItem(prefix + key);
}; };
export const clearLocal = (): void => { export const clearLocal = (): void => {
localStorage.clear(); localStorage.clear();
}; };
/** /**
* sessionStorage部分操作 * sessionStorage部分操作
*/ */
export function setSession(key: string, value: unknown) { export function setSession(key: string, value: unknown) {
const json = JSON.stringify(value); const json = JSON.stringify(value);
sessionStorage.setItem(prefix + key, json); sessionStorage.setItem(prefix + key, json);
} }
export function getSession<T>(key: string) { export function getSession<T>(key: string) {
const json = sessionStorage.getItem(prefix + key); const json = sessionStorage.getItem(prefix + key);
let data: T | null = null; let data: T | null = null;
if (json) { if (json) {
try { try {
data = JSON.parse(json); data = JSON.parse(json);
} catch { } catch {
// 防止解析失败 // 防止解析失败
} }
} }
return data; return data;
} }
export function removeSession(key: string) { export function removeSession(key: string) {
window.sessionStorage.removeItem(prefix + key); window.sessionStorage.removeItem(prefix + key);
} }
export function clearSession() { export function clearSession() {
window.sessionStorage.clear(); window.sessionStorage.clear();
} }

343
src/views/list/commonList/index.vue
View File

@ -1,29 +1,76 @@
<template> <template>
<n-space vertical size="large"> <n-space
vertical
size="large"
>
<n-card> <n-card>
<n-form ref="formRef" :model="model" label-placement="left" :show-feedback="false"> <n-form
<n-grid :x-gap="30" :cols="18"> ref="formRef"
<n-form-item-gi :span="4" label="姓名" path="condition_1"> :model="model"
<n-input v-model:value="model.condition_1" placeholder="请输入" /> label-placement="left"
:show-feedback="false"
>
<n-grid
:x-gap="30"
:cols="18"
>
<n-form-item-gi
:span="4"
label="姓名"
path="condition_1"
>
<n-input
v-model:value="model.condition_1"
placeholder="请输入"
/>
</n-form-item-gi> </n-form-item-gi>
<n-form-item-gi :span="4" label="年龄" path="condition_2"> <n-form-item-gi
<n-input v-model:value="model.condition_2" placeholder="请输入" /> :span="4"
label="年龄"
path="condition_2"
>
<n-input
v-model:value="model.condition_2"
placeholder="请输入"
/>
</n-form-item-gi> </n-form-item-gi>
<n-form-item-gi :span="4" label="性别" path="condition_3"> <n-form-item-gi
<n-input v-model:value="model.condition_3" placeholder="请输入" /> :span="4"
label="性别"
path="condition_3"
>
<n-input
v-model:value="model.condition_3"
placeholder="请输入"
/>
</n-form-item-gi> </n-form-item-gi>
<n-form-item-gi :span="4" label="地址" path="condition_4"> <n-form-item-gi
<n-input v-model:value="model.condition_4" placeholder="请输入" /> :span="4"
label="地址"
path="condition_4"
>
<n-input
v-model:value="model.condition_4"
placeholder="请输入"
/>
</n-form-item-gi> </n-form-item-gi>
<n-gi :span="1"> <n-gi :span="1">
<n-button type="primary"> <n-button type="primary">
<template #icon><i-icon-park-outline-search /></template> <template #icon>
<i-icon-park-outline-search />
</template>
搜索 搜索
</n-button> </n-button>
</n-gi> </n-gi>
<n-gi :span="1"> <n-gi :span="1">
<n-button strong secondary @click="handleResetSearch"> <n-button
<template #icon><i-icon-park-outline-redo /></template> strong
secondary
@click="handleResetSearch"
>
<template #icon>
<i-icon-park-outline-redo />
</template>
重置 重置
</n-button> </n-button>
</n-gi> </n-gi>
@ -31,24 +78,54 @@
</n-form> </n-form>
</n-card> </n-card>
<n-card> <n-card>
<n-space vertical size="large"> <n-space
vertical
size="large"
>
<div class="flex gap-4"> <div class="flex gap-4">
<n-button type="primary" @click="handleAddTable"> <n-button
<template #icon><i-icon-park-outline-add-one /></template> type="primary"
@click="handleAddTable"
>
<template #icon>
<i-icon-park-outline-add-one />
</template>
新建 新建
</n-button> </n-button>
<n-button strong secondary> <n-button
<template #icon><i-icon-park-outline-afferent /></template> strong
secondary
>
<template #icon>
<i-icon-park-outline-afferent />
</template>
批量导入 批量导入
</n-button> </n-button>
<n-button strong secondary class="ml-a"> <n-button
<template #icon><i-icon-park-outline-download /></template> strong
secondary
class="ml-a"
>
<template #icon>
<i-icon-park-outline-download />
</template>
下载 下载
</n-button> </n-button>
</div> </div>
<n-data-table :columns="columns" :data="listData" :loading="loading" /> <n-data-table
<Pagination :count="100" @change="changePage" /> :columns="columns"
<TableModal v-model:visible="visible" :type="modalType" :modal-data="editData" /> :data="listData"
:loading="loading"
/>
<Pagination
:count="100"
@change="changePage"
/>
<TableModal
v-model:visible="visible"
:type="modalType"
:modal-data="editData"
/>
</n-space> </n-space>
</n-card> </n-card>
</n-space> </n-space>
@ -70,145 +147,145 @@ const model = ref({ ...initialModel });
const formRef = ref<FormInst | null>(); const formRef = ref<FormInst | null>();
const columns: DataTableColumns = [ const columns: DataTableColumns = [
{ {
title: '姓名', title: '姓名',
align: 'center', align: 'center',
key: 'name', key: 'name',
}, },
{ {
title: '年龄', title: '年龄',
align: 'center', align: 'center',
key: 'age', key: 'age',
}, },
{ {
title: '性别', title: '性别',
align: 'center', align: 'center',
key: 'gender', key: 'gender',
render: (row) => { render: (row) => {
const rowData = row as unknown as CommonList.UserList; const rowData = row as unknown as CommonList.UserList;
const tagType = { const tagType = {
'0': { '0': {
label: '女', label: '女',
type: 'primary', type: 'primary',
}, },
'1': { '1': {
label: '男', label: '男',
type: 'success', type: 'success',
}, },
} as const; } as const;
if (rowData.gender) { if (rowData.gender) {
return <NTag type={tagType[rowData.gender].type}>{tagType[rowData.gender].label}</NTag>; return <NTag type={tagType[rowData.gender].type}>{tagType[rowData.gender].label}</NTag>;
} }
}, },
}, },
{ {
title: '邮箱', title: '邮箱',
align: 'center', align: 'center',
key: 'email', key: 'email',
}, },
{ {
title: '地址', title: '地址',
align: 'center', align: 'center',
key: 'address', key: 'address',
}, },
{ {
title: '角色', title: '角色',
align: 'center', align: 'center',
key: 'role', key: 'role',
render: (row) => { render: (row) => {
const rowData = row as unknown as CommonList.UserList; const rowData = row as unknown as CommonList.UserList;
const tagType = { const tagType = {
super: 'primary', super: 'primary',
admin: 'warning', admin: 'warning',
user: 'success', user: 'success',
} as const; } as const;
return <NTag type={tagType[rowData.role]}>{rowData.role}</NTag>; return <NTag type={tagType[rowData.role]}>{rowData.role}</NTag>;
}, },
}, },
{ {
title: '状态', title: '状态',
align: 'center', align: 'center',
key: 'disabled', key: 'disabled',
render: (row) => { render: (row) => {
const rowData = row as unknown as CommonList.UserList; const rowData = row as unknown as CommonList.UserList;
return ( return (
<NSwitch value={rowData.disabled} onUpdateValue={(disabled) => handleUpdateDisabled(disabled, rowData.id)}> <NSwitch value={rowData.disabled} onUpdateValue={(disabled) => handleUpdateDisabled(disabled, rowData.id)}>
{{ checked: () => '启用', unchecked: () => '禁用' }} {{ checked: () => '启用', unchecked: () => '禁用' }}
</NSwitch> </NSwitch>
); );
}, },
}, },
{ {
title: '操作', title: '操作',
align: 'center', align: 'center',
key: 'actions', key: 'actions',
render: (row) => { render: (row) => {
const rowData = row as unknown as CommonList.UserList; const rowData = row as unknown as CommonList.UserList;
return ( return (
<NSpace justify={'center'}> <NSpace justify={'center'}>
<NButton size={'small'} onClick={() => handleEditTable(rowData)}> <NButton size={'small'} onClick={() => handleEditTable(rowData)}>
编辑 编辑
</NButton> </NButton>
<NPopconfirm onPositiveClick={() => sendMail(rowData.id)}> <NPopconfirm onPositiveClick={() => sendMail(rowData.id)}>
{{ {{
default: () => '确认删除', default: () => '确认删除',
trigger: () => <NButton size={'small'}>删除</NButton>, trigger: () => <NButton size={'small'}>删除</NButton>,
}} }}
</NPopconfirm> </NPopconfirm>
</NSpace> </NSpace>
); );
}, },
}, },
]; ];
const sendMail = (id: number) => { const sendMail = (id: number) => {
window.$message.success(`用户id:${id}`); window.$message.success(`用户id:${id}`);
}; };
function handleUpdateDisabled(disabled: boolean, id: number) { function handleUpdateDisabled(disabled: boolean, id: number) {
const index = listData.value.findIndex((item) => item.id === id); const index = listData.value.findIndex((item) => item.id === id);
if (index > -1) { if (index > -1) {
listData.value[index].disabled = disabled; listData.value[index].disabled = disabled;
} }
} }
const listData = ref<CommonList.UserList[]>([]); const listData = ref<CommonList.UserList[]>([]);
onMounted(() => { onMounted(() => {
getUserList(); getUserList();
}); });
async function getUserList() { async function getUserList() {
startLoading(); startLoading();
await fetchUserList().then((res) => { await fetchUserList().then((res) => {
listData.value = res.data; listData.value = res.data;
endLoading(); endLoading();
}); });
} }
function changePage(page: number, size: number) { function changePage(page: number, size: number) {
window.$message.success(`分页器:${page},${size}`); window.$message.success(`分页器:${page},${size}`);
} }
function handleResetSearch() { function handleResetSearch() {
model.value = { ...initialModel }; model.value = { ...initialModel };
} }
type ModalType = 'add' | 'edit'; type ModalType = 'add' | 'edit';
const modalType = ref<ModalType>('add'); const modalType = ref<ModalType>('add');
function setModalType(type: ModalType) { function setModalType(type: ModalType) {
modalType.value = type; modalType.value = type;
} }
const editData = ref<CommonList.UserList | null>(null); const editData = ref<CommonList.UserList | null>(null);
function setEditData(data: CommonList.UserList | null) { function setEditData(data: CommonList.UserList | null) {
editData.value = data; editData.value = data;
} }
function handleEditTable(rowData: CommonList.UserList) { function handleEditTable(rowData: CommonList.UserList) {
setEditData(rowData); setEditData(rowData);
setModalType('edit'); setModalType('edit');
openModal(); openModal();
} }
function handleAddTable() { function handleAddTable() {
openModal(); openModal();
setModalType('add'); setModalType('add');
} }
</script> </script>