page: 📄 路由查询

src/api/v1/system.ts

@@ -1,13 +1,7 @@
 import { http } from '@/api/service';
-
+import type { BaseResult } from '@/types/BaseResult';
-type Result = {
-	success: boolean;
-	data?: Array<any>;
-};
 
 type ResultTable = {
-	success: boolean;
-	data?: {
 	/** 列表数据 */
 	list: Array<any>;
 	/** 总条目数 */
@@ -15,23 +9,22 @@ type ResultTable = {
 	/** 每页显示条目个数 */
 	pageSize?: number;
 	/** 当前页数 */
-		currentPage?: number;
+	pageNo?: number;
-	};
 };
 
 /** 获取系统管理-用户管理列表 */
 export const getUserList = (data?: object) => {
-	return http.request<ResultTable>('post', '/user', { data });
+	return http.request<BaseResult<ResultTable>>('post', '/user', { data });
 };
 
 /** 系统管理-用户管理-获取所有角色列表 */
 export const getAllRoleList = () => {
-	return http.request<Result>('get', '/list-all-role');
+	return http.request<any>('get', '/list-all-role');
 };
 
 /** 系统管理-用户管理-根据userId，获取对应角色id列表（userId：用户id） */
 export const getRoleIds = (data?: object) => {
-	return http.request<Result>('post', '/list-role-ids', { data });
+	return http.request<any>('post', '/list-role-ids', { data });
 };
 
 /** 获取系统管理-角色管理列表 */
@@ -40,13 +33,14 @@ export const getRoleList = (data?: object) => {
 };
 
 /** 获取系统管理-菜单管理列表 */
-export const getMenuList = (data?: object) => {
+export const getMenuList = (data?: any) => {
-	return http.request<Result>('post', '/menu', { data });
+	// /${data.page}/${data.limit}
+	return http.request<BaseResult<ResultTable>>('get', `router/getMenus`, { data });
 };
 
 /** 获取系统管理-部门管理列表 */
 export const getDeptList = (data?: object) => {
-	return http.request<Result>('post', '/dept', { data });
+	return http.request<any>('post', '/dept', { data });
 };
 
 /** 获取系统监控-在线用户列表 */
@@ -71,15 +65,15 @@ export const getSystemLogsList = (data?: object) => {
 
 /** 获取系统监控-系统日志-根据 id 查日志详情 */
 export const getSystemLogsDetail = (data?: object) => {
-	return http.request<Result>('post', '/system-logs-detail', { data });
+	return http.request<any>('post', '/system-logs-detail', { data });
 };
 
 /** 获取角色管理-权限-菜单权限 */
 export const getRoleMenu = (data?: object) => {
-	return http.request<Result>('post', '/role-menu', { data });
+	return http.request<any>('post', '/role-menu', { data });
 };
 
 /** 获取角色管理-权限-菜单权限-根据角色 id 查对应菜单 */
 export const getRoleMenuIds = (data?: object) => {
-	return http.request<Result>('post', '/role-menu-ids', { data });
+	return http.request<any>('post', '/role-menu-ids', { data });
 };

src/api/v1/user.ts

@@ -53,6 +53,6 @@ export const refreshTokenApi = (data?: object) => {
  * * 退出内容
  * @param data
  */
-export const fetchLogOut = (data?: object) => {
+export const fetchLogout = (data?: object) => {
-	return http.request<BaseResult<any>>('post', 'user/logOut', { data });
+	return http.request<BaseResult<any>>('post', 'user/logout', { data });
 };

src/store/modules/user.ts

@@ -1,6 +1,6 @@
 import { defineStore } from 'pinia';
 import { resetRouter, router, routerArrays, storageLocal, store, type userType } from '../utils';
-import { fetchLogin, fetchLogOut, fetchPostEmailCode, refreshTokenApi } from '@/api/v1/user';
+import { fetchLogin, fetchLogout, fetchPostEmailCode, refreshTokenApi } from '@/api/v1/user';
 import { useMultiTagsStoreHook } from '../multiTags';
 import { type DataInfo, removeToken, setToken, userKey } from '@/utils/auth';
 import { message } from '@/utils/message';
@@ -58,7 +58,7 @@ export const useUserStore = defineStore({
 		 */
 		async logOut() {
 			// 登出
-			const result = await fetchLogOut();
+			const result = await fetchLogout();
 			if (result.code == 200) {
 				this.username = '';
 				this.roles = [];

src/views/menu/index.vue

@@ -1,6 +1,5 @@
 <script lang="ts" setup>
-import { ref } from 'vue';
+import { onMounted, ref } from 'vue';
-import { useMenu } from './utils/hook';
 import { $t } from '@/plugins/i18n';
 import { PureTableBar } from '@/components/TableBar';
 import { useRenderIcon } from '@/components/ReIcon/src/hooks';
@@ -9,6 +8,9 @@ import Delete from '@iconify-icons/ep/delete';
 import EditPen from '@iconify-icons/ep/edit-pen';
 import Refresh from '@iconify-icons/ep/refresh';
 import AddFill from '@iconify-icons/ri/add-circle-line';
+import { columns, dataList, handleDelete, handleSelectionChange, loading, onSearch, openDialog, resetForm } from '@/views/menu/utils/hook';
+import form from '@/views/role/form.vue';
+import PureTable from '@pureadmin/table';
 
 defineOptions({
 	name: 'SystemMenu',
@@ -16,12 +18,18 @@ defineOptions({
 
 const formRef = ref();
 const tableRef = ref();
-const { form, loading, columns, dataList, onSearch, resetForm, openDialog, handleDelete, handleSelectionChange } = useMenu();
 
-function onFullscreen() {
+/**
+ * 全屏
+ */
+const onFullscreen = () => {
 	// 重置表格高度
 	tableRef.value.setAdaptive();
-}
+};
+
+onMounted(() => {
+	onSearch();
+});
 </script>
 
 <template>

src/views/menu/utils/hook.tsx

@@ -4,21 +4,20 @@ import { message } from '@/utils/message';
 import { getMenuList } from '@/api/v1/system';
 import { $t } from '@/plugins/i18n';
 import { addDialog } from '@/components/BaseDialog';
-import { h, onMounted, reactive, ref } from 'vue';
+import { h, reactive, ref } from 'vue';
 import type { FormItemProps } from '../utils/types';
 import { useRenderIcon } from '@/components/ReIcon/src/hooks';
 import { cloneDeep, deviceDetection, isAllEmpty } from '@pureadmin/utils';
 
-export function useMenu() {
+export const form = reactive({
-	const form = reactive({
 	title: '',
-	});
+});
 
-	const formRef = ref();
+export const formRef = ref();
-	const dataList = ref([]);
+export const dataList = ref([]);
-	const loading = ref(true);
+export const loading = ref(true);
 
-	const getMenuType = (type, text = false) => {
+export const getMenuType = (type, text = false) => {
 	switch (type) {
 		case 0:
 			return text ? '菜单' : 'primary';
@@ -29,9 +28,9 @@ export function useMenu() {
 		case 3:
 			return text ? '按钮' : 'info';
 	}
-	};
+};
 
-	const columns: TableColumnList = [
+export const columns: TableColumnList = [
 	{
 		label: '菜单名称',
 		prop: 'title',
@@ -87,33 +86,37 @@ export function useMenu() {
 		width: 210,
 		slot: 'operation',
 	},
-	];
+];
 
-	function handleSelectionChange(val) {
+export function handleSelectionChange(val) {
 	console.log('handleSelectionChange', val);
-	}
+}
 
-	function resetForm(formEl) {
+export function resetForm(formEl) {
 	if (!formEl) return;
 	formEl.resetFields();
 	onSearch();
-	}
+}
 
-	async function onSearch() {
+export async function onSearch() {
 	loading.value = true;
-		const { data } = await getMenuList(); // 这里是返回一维数组结构，前端自行处理成树结构，返回格式要求：唯一id加父节点parentId，parentId取父节点id
+
-		let newData = data;
+	// 获取菜单数据
-		if (!isAllEmpty(form.title)) {
+	const result = await getMenuList();
+	if (result.code !== 200) message(result.message, { type: 'error' });
+
 	// 前端搜索菜单名称
-			newData = newData.filter(item => $t(item.title).includes(form.title));
+	if (!isAllEmpty(form.title)) {
-		}
+		result.data = result.data.filter(item => $t(item.title).includes(form.title));
-		dataList.value = handleTree(newData); // 处理成树结构
-		setTimeout(() => {
-			loading.value = false;
-		}, 500);
 	}
 
-	function formatHigherMenuOptions(treeList) {
+	// 处理成树结构
+	dataList.value = handleTree(result.data);
+
+	loading.value = false;
+}
+
+export function formatHigherMenuOptions(treeList) {
 	if (!treeList || !treeList.length) return;
 	const newTreeList = [];
 	for (let i = 0; i < treeList.length; i++) {
@@ -122,9 +125,9 @@ export function useMenu() {
 		newTreeList.push(treeList[i]);
 	}
 	return newTreeList;
-	}
+}
 
-	function openDialog(title = '新增', row?: FormItemProps) {
+export function openDialog(title = '新增', row?: FormItemProps) {
 	addDialog({
 		title: `${title}菜单`,
 		props: {
@@ -186,32 +189,11 @@ export function useMenu() {
 			});
 		},
 	});
-	}
+}
 
-	function handleDelete(row) {
+export function handleDelete(row) {
 	message(`您删除了菜单名称为${$t(row.title)}的这条数据`, {
 		type: 'success',
 	});
 	onSearch();
-	}
-
-	onMounted(() => {
-		onSearch();
-	});
-
-	return {
-		form,
-		loading,
-		columns,
-		dataList,
-		/** 搜索 */
-		onSearch,
-		/** 重置 */
-		resetForm,
-		/** 新增、修改菜单 */
-		openDialog,
-		/** 删除菜单 */
-		handleDelete,
-		handleSelectionChange,
-	};
 }

src/views/menu/utils/rule.ts

@@ -1,10 +1,10 @@
-import { reactive } from "vue";
+import { reactive } from 'vue';
-import type { FormRules } from "element-plus";
+import type { FormRules } from 'element-plus';
 
 /** 自定义表单规则校验 */
 export const formRules = reactive(<FormRules>{
-  title: [{ required: true, message: "菜单名称为必填项", trigger: "blur" }],
+	title: [{ required: true, message: '菜单名称为必填项', trigger: 'blur' }],
-  name: [{ required: true, message: "路由名称为必填项", trigger: "blur" }],
+	name: [{ required: true, message: '路由名称为必填项', trigger: 'blur' }],
-  path: [{ required: true, message: "路由路径为必填项", trigger: "blur" }],
+	path: [{ required: true, message: '路由路径为必填项', trigger: 'blur' }],
-  auths: [{ required: true, message: "权限标识为必填项", trigger: "blur" }]
+	auths: [{ required: true, message: '权限标识为必填项', trigger: 'blur' }],
 });