feat(后端控制路由): ✨ 添加消息中心页面组件🏷

web/src/api/menu/index.ts

@@ -1,4 +1,4 @@
-import request from '/@/utils/request';
+import { request } from "/@/utils/service";
 
 /**
  * 后端控制菜单模拟json，路径在 https://gitee.com/lyt-top/vue-next-admin-images/tree/master/menu
@@ -8,6 +8,13 @@ import request from '/@/utils/request';
  */
 export function useMenuApi() {
 	return {
+		getSystemMenu: (params?: object) => {
+			return request({
+				url: '/api/system/menu/web_router/',
+				method: 'get',
+				params,
+			});
+		},
 		getMenuAdmin: (params?: object) => {
 			return request({
 				url: '/gitee/lyt-top/vue-next-admin-images/raw/master/menu/adminMenu.json',

web/src/router/backEnd.ts

@@ -10,6 +10,7 @@ import { formatTwoStageRoutes, formatFlatteningRoutes, router } from '/@/router/
 import { useRoutesList } from '/@/stores/routesList';
 import { useTagsViewRoutes } from '/@/stores/tagsViewRoutes';
 import { useMenuApi } from '/@/api/menu/index';
+import { handleMenu } from '../utils/menu';
 
 const menuApi = useMenuApi();
 
@@ -43,10 +44,9 @@ export async function initBackEndControlRoutes() {
 	await useUserInfo().setUserInfos();
 	// 获取路由菜单数据
 	const res = await getBackEndControlRoutes();
-	// 存储接口原始路由（未处理component），根据需求选择使用
-	useRequestOldRoutes().setRequestOldRoutes(JSON.parse(JSON.stringify(res.data)));
+
 	// 处理路由（component），替换 dynamicRoutes（/@/router/route）第一个顶级 children 的路由
-	dynamicRoutes[0].children = await backEndComponent(res.data);
+	dynamicRoutes[0].children = await backEndComponent(handleMenu(res.data));
 	// 添加动态路由
 	await setAddRoute();
 	// 设置路由到 vuex routesList 中（已处理成多级嵌套路由）及缓存多级嵌套数组处理后的一维数组
@@ -102,14 +102,7 @@ export async function setAddRoute() {
  * @returns 返回后端路由菜单数据
  */
 export function getBackEndControlRoutes() {
-	// 模拟 admin 与 test
-	const stores = useUserInfo(pinia);
-	const { userInfos } = storeToRefs(stores);
-	const auth = userInfos.value.roles[0];
-	// 管理员 admin
-	if (auth === 'admin') return menuApi.getMenuAdmin();
-	// 其它用户 test
-	else return menuApi.getMenuTest();
+	return menuApi.getSystemMenu();
 }
 
 /**

web/src/router/route.ts

@@ -47,10 +47,10 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [
 				},
 			},
 			{
-				path: '/config',
+				path: '/system',
 				name: 'system',
 				component: () => import('/@/layout/routerView/parent.vue'),
-				redirect: '/system/menu',
+				redirect: '/system',
 				meta: {
 					title: 'message.router.system',
 					isLink: '',

web/src/stores/themeConfig.ts

@@ -123,7 +123,7 @@ export const useThemeConfig = defineStore('themeConfig', {
 			 * 后端控制路由
 			 */
 			// 是否开启后端控制路由
-			isRequestRoutes: false,
+			isRequestRoutes: true,
 
 			/**
 			 * 全局网站标题 / 副标题

web/src/utils/menu.ts

@@ -0,0 +1,49 @@
+import XEUtils from "xe-utils"
+
+/**
+ * @description: 处理后端菜单数据格式
+ * @param {Array} menuData
+ * @return {*}
+ */
+export const handleMenu = (menuData: Array<any>) => {
+    // 先处理menu meta数据转换
+    const handleMeta = (item: any) => {
+        item.meta = {
+            title: item.title,
+            isLink: item.is_link,
+            isHide: !item.visible,
+            isKeepAlive: true,
+            isAffix: false,
+            isIframe: false,
+            roles: ['admin'],
+            icon: item.icon
+        }
+
+        return item
+    }
+    menuData.forEach((val) => {
+        handleMeta(val)
+        val.path = val.web_path
+    })
+
+    const data = XEUtils.toArrayTree(menuData, {
+        parentKey: 'parent',
+        strict: true,
+    })
+    const menu = [
+        {
+            path: '/home', name: 'home', component: '/system/home/index', meta: {
+                title: 'message.router.home',
+                isLink: '',
+                isHide: false,
+                isKeepAlive: true,
+                isAffix: true,
+                isIframe: false,
+                roles: ['admin'],
+                icon: 'iconfont icon-shouye'
+            }
+        },
+        ...data
+    ]
+    return menu
+}

web/src/utils/setIconfont.ts

@@ -1,7 +1,7 @@
 // 字体图标 url
 const cssCdnUrlList: Array<string> = [
 	'//at.alicdn.com/t/font_2298093_y6u00apwst.css',
-	'//at.alicdn.com/t/c/font_3882322_8vb7gh5lw4t.css', //dvadmin3项目用icon
+	'//at.alicdn.com/t/c/font_3882322_9ah7y8m9175.css', //dvadmin3项目用icon
 	'//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css',
 ];
 // 第三方 js url

web/src/views/system/messageCenter/api.ts

@@ -0,0 +1,41 @@
+import { request } from '/@/utils/service';
+import { PageQuery, AddReq, DelReq, EditReq, InfoReq } from '@fast-crud/fast-crud';
+
+export const apiPrefix = '/api/system/dept/';
+export function GetList(query: PageQuery) {
+    return request({
+        url: apiPrefix,
+        method: 'get',
+        data: query,
+    });
+}
+export function GetObj(id: InfoReq) {
+    return request({
+        url: apiPrefix + id,
+        method: 'get',
+    });
+}
+
+export function AddObj(obj: AddReq) {
+    return request({
+        url: apiPrefix,
+        method: 'post',
+        data: obj,
+    });
+}
+
+export function UpdateObj(obj: EditReq) {
+    return request({
+        url: apiPrefix + obj.id + '/',
+        method: 'put',
+        data: obj,
+    });
+}
+
+export function DelObj(id: DelReq) {
+    return request({
+        url: apiPrefix + id + '/',
+        method: 'delete',
+        data: { id },
+    });
+}

web/src/views/system/messageCenter/crud.tsx

@@ -0,0 +1,51 @@
+import * as api from "./api";
+import { dict, PageQuery, AddReq, DelReq, EditReq, CrudExpose, CrudOptions, } from "@fast-crud/fast-crud";
+import { request } from "/@/utils/service";
+import { dictionary } from "/@/utils/dictionary";
+interface CreateCrudOptionsTypes {
+    crudOptions: CrudOptions;
+}
+
+export const createCrudOptions = function ({ crudExpose }: { crudExpose: CrudExpose }): CreateCrudOptionsTypes {
+    const pageRequest = async (query: PageQuery) => {
+        return await api.GetList(query);
+    };
+    const editRequest = async ({ form, row }: EditReq) => {
+        form.id = row.id;
+        return await api.UpdateObj(form);
+    };
+    const delRequest = async ({ row }: DelReq) => {
+        return await api.DelObj(row.id);
+    };
+    const addRequest = async ({ form }: AddReq) => {
+        return await api.AddObj(form);
+    };
+    return {
+        crudOptions: {
+            request: {
+                pageRequest,
+                addRequest,
+                editRequest,
+                delRequest
+            },
+            columns: {
+                _index: {
+                    title: '序号',
+                    form: { show: false },
+                    column: {
+                        //type: 'index',
+                        align: 'center',
+                        width: '70px',
+                        columnSetDisabled: true, //禁止在列设置中选择
+                        formatter: (context) => {
+                            //计算序号,你可以自定义计算规则，此处为翻页累加
+                            let index = context.index ?? 1;
+                            let pagination = crudExpose.crudBinding.value.pagination;
+                            return ((pagination.currentPage ?? 1) - 1) * pagination.pageSize + index + 1;
+                        },
+                    },
+                },
+            }
+        },
+    }
+}

web/src/views/system/messageCenter/index.vue

@@ -0,0 +1,26 @@
+<template>
+	<fs-page>
+		<fs-crud ref="crudRef" v-bind="crudBinding"> </fs-crud>
+	</fs-page>
+</template>
+
+<script lang="ts" setup>
+import { ref, onMounted } from 'vue';
+import { useExpose, useCrud } from '@fast-crud/fast-crud';
+import { createCrudOptions } from './crud';
+// crud组件的ref
+const crudRef = ref();
+// crud 配置的ref
+const crudBinding = ref();
+// 暴露的方法
+const { crudExpose } = useExpose({ crudRef, crudBinding });
+// 你的crud配置
+const { crudOptions } = createCrudOptions({ crudExpose });
+// 初始化crud配置
+const { resetCrudOptions } = useCrud({ crudExpose, crudOptions });
+
+// 页面打开后获取列表数据
+onMounted(() => {
+	crudExpose.doRefresh();
+});
+</script>