From 6d55691e77bd40a1af27d4a3f704a98c5ecbfd5e Mon Sep 17 00:00:00 2001 From: H0nGzA1 <2505811377@qq.com> Date: Fri, 10 Feb 2023 21:59:28 +0800 Subject: [PATCH] =?UTF-8?q?feat(=E5=90=8E=E7=AB=AF=E6=8E=A7=E5=88=B6?= =?UTF-8?q?=E8=B7=AF=E7=94=B1):=20=E2=9C=A8=20=E6=B7=BB=E5=8A=A0=E6=B6=88?= =?UTF-8?q?=E6=81=AF=E4=B8=AD=E5=BF=83=E9=A1=B5=E9=9D=A2=E7=BB=84=E4=BB=B6?= =?UTF-8?q?=F0=9F=8F=B7?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- web/src/api/menu/index.ts | 9 +++- web/src/router/backEnd.ts | 15 ++---- web/src/router/route.ts | 4 +- web/src/stores/themeConfig.ts | 2 +- web/src/utils/menu.ts | 49 +++++++++++++++++++ web/src/utils/setIconfont.ts | 2 +- web/src/views/system/messageCenter/api.ts | 41 ++++++++++++++++ web/src/views/system/messageCenter/crud.tsx | 51 ++++++++++++++++++++ web/src/views/system/messageCenter/index.vue | 26 ++++++++++ 9 files changed, 183 insertions(+), 16 deletions(-) create mode 100644 web/src/utils/menu.ts create mode 100644 web/src/views/system/messageCenter/api.ts create mode 100644 web/src/views/system/messageCenter/crud.tsx create mode 100644 web/src/views/system/messageCenter/index.vue diff --git a/web/src/api/menu/index.ts b/web/src/api/menu/index.ts index 9c16bb7..c972f79 100644 --- a/web/src/api/menu/index.ts +++ b/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', diff --git a/web/src/router/backEnd.ts b/web/src/router/backEnd.ts index c2c0add..f4f057c 100644 --- a/web/src/router/backEnd.ts +++ b/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(); } /** diff --git a/web/src/router/route.ts b/web/src/router/route.ts index 748f3db..19dcd20 100644 --- a/web/src/router/route.ts +++ b/web/src/router/route.ts @@ -47,10 +47,10 @@ export const dynamicRoutes: Array = [ }, }, { - path: '/config', + path: '/system', name: 'system', component: () => import('/@/layout/routerView/parent.vue'), - redirect: '/system/menu', + redirect: '/system', meta: { title: 'message.router.system', isLink: '', diff --git a/web/src/stores/themeConfig.ts b/web/src/stores/themeConfig.ts index 02b0269..4be03f8 100644 --- a/web/src/stores/themeConfig.ts +++ b/web/src/stores/themeConfig.ts @@ -123,7 +123,7 @@ export const useThemeConfig = defineStore('themeConfig', { * 后端控制路由 */ // 是否开启后端控制路由 - isRequestRoutes: false, + isRequestRoutes: true, /** * 全局网站标题 / 副标题 diff --git a/web/src/utils/menu.ts b/web/src/utils/menu.ts new file mode 100644 index 0000000..c37dd98 --- /dev/null +++ b/web/src/utils/menu.ts @@ -0,0 +1,49 @@ +import XEUtils from "xe-utils" + +/** + * @description: 处理后端菜单数据格式 + * @param {Array} menuData + * @return {*} + */ +export const handleMenu = (menuData: Array) => { + // 先处理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 +} \ No newline at end of file diff --git a/web/src/utils/setIconfont.ts b/web/src/utils/setIconfont.ts index c005a8b..aa47104 100644 --- a/web/src/utils/setIconfont.ts +++ b/web/src/utils/setIconfont.ts @@ -1,7 +1,7 @@ // 字体图标 url const cssCdnUrlList: Array = [ '//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 diff --git a/web/src/views/system/messageCenter/api.ts b/web/src/views/system/messageCenter/api.ts new file mode 100644 index 0000000..199acee --- /dev/null +++ b/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 }, + }); +} diff --git a/web/src/views/system/messageCenter/crud.tsx b/web/src/views/system/messageCenter/crud.tsx new file mode 100644 index 0000000..35d57b7 --- /dev/null +++ b/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; + }, + }, + }, + } + }, + } +} diff --git a/web/src/views/system/messageCenter/index.vue b/web/src/views/system/messageCenter/index.vue new file mode 100644 index 0000000..1fa8634 --- /dev/null +++ b/web/src/views/system/messageCenter/index.vue @@ -0,0 +1,26 @@ + + +