From d5b0cb36b2e5c0659acd222ea2453a7c4dbf8bf1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E7=BA=A2=E4=B8=BD?= <1181930680@qq.com>
Date: Tue, 9 Jul 2024 11:01:01 +0800
Subject: [PATCH] =?UTF-8?q?=E8=8F=9C=E5=8D=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/layout/components/Sider/ReSubMenu.vue | 3 +-
src/layout/components/Sider/Sider.vue | 3 +-
src/router/generator-routers.ts | 7 +-
src/views/system/menu/edit.vue | 119 +++++++++-------------
src/views/system/menu/index.vue | 6 +-
src/views/system/role/index.vue | 2 -
src/views/system/user/columns.ts | 2 +-
7 files changed, 58 insertions(+), 84 deletions(-)
diff --git a/src/layout/components/Sider/ReSubMenu.vue b/src/layout/components/Sider/ReSubMenu.vue
index 791bb7f..2ad67e8 100644
--- a/src/layout/components/Sider/ReSubMenu.vue
+++ b/src/layout/components/Sider/ReSubMenu.vue
@@ -1,7 +1,7 @@
<template>
<el-sub-menu :index="parent.key">
<template #title>
- <el-icon v-if="parent.icon"><component :is="parent.icon" /></el-icon>
+ <icon :name="parent.icon" :size="20" v-if="parent.icon"/>
<span>{{ parent.title }}</span>
</template>
<template v-for="(item, key) in parent.children" :key="item.key">
@@ -16,6 +16,7 @@
</template>
<script lang="ts">
+ import icon from "@/components/icon/index.vue";
export default {
name: 'ReSubMenu',
};
diff --git a/src/layout/components/Sider/Sider.vue b/src/layout/components/Sider/Sider.vue
index 4556ea9..9162b49 100644
--- a/src/layout/components/Sider/Sider.vue
+++ b/src/layout/components/Sider/Sider.vue
@@ -14,7 +14,7 @@
<template v-for="item in menus" :key="item.key">
<el-menu-item v-if="!item.children" :key="getMenuKey(item.key)" :index="item.key">
<template #title>
- <el-icon v-if="item.icon"><component :is="item.icon" /></el-icon>
+ <icon :name="item.icon" :size="20" v-if="item.icon"/>
<span>{{ item.title }}</span>
</template>
</el-menu-item>
@@ -32,6 +32,7 @@
import { useProjectSetting } from '@/hooks/setting/useProjectSetting';
import { useAsyncRouteStore } from '@/store/modules/asyncRoute';
import { useProjectSettingStore } from '@/store/modules/projectSetting';
+ import icon from "@/components/icon/index.vue";
import ReSubMenu from './ReSubMenu.vue';
const collapsed = inject('collapsed');
diff --git a/src/router/generator-routers.ts b/src/router/generator-routers.ts
index 3af649b..2fb6fdf 100644
--- a/src/router/generator-routers.ts
+++ b/src/router/generator-routers.ts
@@ -22,23 +22,24 @@ export const routerGenerator = (routerMap, parent?): any[] => {
return routerMap.map((item) => {
item.meta = {
title:item.name,
- icon:renderIcon(DashboardOutlined),
+ icon:item.icon,
sort:item.sort,
permissions:item.permission
}
const components =''
+ const names = /http(s)?:/.test(item.path)?item.path:item.path.replaceAll('/','')
const currentRouter: any = {
// 路由地址 动态拼接生成如 /dashboard/workplace
path: `${item.path}`,
// 路由名称，建议唯一
- name: item.name || '',
+ name: names,
// 该路由对应页面的 组件
component: item.component,
// meta: 页面标题, 菜单图标, 页面权限(供指令权限用，可去掉)
meta: {
...item.meta,
label: item.meta.title,
- icon: renderIcon(DashboardOutlined) || null,
+ icon: item.meta.icon || null,
permissions: item.meta.permissions || null,
},
};
diff --git a/src/views/system/menu/edit.vue b/src/views/system/menu/edit.vue
index 4f988ce..32c4cb3 100644
--- a/src/views/system/menu/edit.vue
+++ b/src/views/system/menu/edit.vue
@@ -2,7 +2,6 @@
<el-dialog
v-model="props.visible"
:title="props.menuId?'编辑':'新增'"
- :append-to-body="true"
width="600"
:close-on-click-modal="false"
:before-close="dialogClose"
@@ -20,12 +19,12 @@
</el-form-item>
<el-form-item
label="父级菜单"
- prop="pid"
+ prop="parentId"
:rules="{ required: true, message: '请选择父级菜单', trigger: 'change' }"
>
<el-tree-select
class="flex-1"
- v-model="formData.pid"
+ v-model="formData.parentId"
:data="menuOptions"
clearable
node-key="id"
@@ -39,11 +38,11 @@
</el-form-item>
<el-form-item
label="菜单名称"
- prop="menuName"
+ prop="name"
:rules="{ required: true, message: '请输入菜单名称', trigger: 'blur' }"
>
<el-input
- v-model="formData.menuName"
+ v-model="formData.name"
placeholder="请输入菜单名称"
clearable
/>
@@ -55,16 +54,30 @@
>
<IconPicker class="flex-1" v-model="formData.icon"/>
</el-form-item>
-
+ <el-form-item
+ label="是否外链"
+ prop="target"
+ required
+ >
+ <div>
+ <el-radio-group v-model="formData.target">
+ <el-radio :label="1">是</el-radio>
+ <el-radio :label="0">否</el-radio>
+ </el-radio-group>
+ <div class="form-tips">
+ 选择外链打开，刚新窗口打开页面
+ </div>
+ </div>
+ </el-form-item>
<el-form-item
v-if="formData.type==0"
label="路由路径"
- prop="paths"
+ prop="path"
:rules="{ required: true, message: '请输入路由路径', trigger: 'blur' }"
>
<div class="flex-1">
<el-input
- v-model="formData.paths"
+ v-model="formData.path"
placeholder="请输入路由路径"
clearable
/>
@@ -74,7 +87,7 @@
</div>
</el-form-item>
<el-form-item
- v-if="formData.type == 0"
+ v-if="formData.type == 0 && formData.target ==0"
label="组件路径"
prop="component"
:rules="{ required: true, message: '请输入组件路径', trigger: 'blur' }"
@@ -93,28 +106,13 @@
</div>
</el-form-item>
<el-form-item
- label="选中菜单"
- prop="selected"
- v-if="formData.type== 0"
- >
- <div class="flex-1">
- <el-input
- v-model="formData.selected"
- placeholder="请输入路由路径"
- clearable
- />
- <div class="form-tips">
- 访问详情页面，编辑页面时，菜单高亮显示，如`/consumer/lists`
- </div>
- </div>
- </el-form-item>
- <el-form-item
+ v-if="formData.target ==0"
label="权限字符"
- prop="perms"
+ prop="permission"
>
<div class="flex-1">
<el-input
- v-model="formData.perms"
+ v-model="formData.permission"
placeholder="请输入权限字符"
clearable
/>
@@ -123,35 +121,16 @@
</div>
</div>
</el-form-item>
- <el-form-item
- v-if="formData.type == 0"
- label="路由参数"
- prop="params"
- >
- <div>
- <div class="flex-1">
- <el-input
- v-model="formData.params"
- placeholder="请输入路由参数"
- clearable
- />
- </div>
- <div class="form-tips">
- 访问路由的默认传递参数，如：`{"menuId": 1, "name":
- "admin"}`或`menuId=1&name=admin`
- </div>
- </div>
- </el-form-item>
<el-form-item
v-if="formData.type ==0"
label="是否显示"
- prop="isShow"
+ prop="hide"
required
>
<div>
- <el-radio-group v-model="formData.isShow">
- <el-radio :label="1">显示</el-radio>
- <el-radio :label="0">隐藏</el-radio>
+ <el-radio-group v-model="formData.hide">
+ <el-radio :label="0">显示</el-radio>
+ <el-radio :label="1">隐藏</el-radio>
</el-radio-group>
<div class="form-tips">
选择隐藏则路由将不会出现在侧边栏，但仍然可以访问
@@ -161,11 +140,11 @@
<el-form-item
v-if="formData.type ==0"
label="菜单状态"
- prop="isDisable"
+ prop="hide"
required
>
<div>
- <el-radio-group v-model="formData.isDisable">
+ <el-radio-group v-model="formData.hide">
<el-radio :label="0">正常</el-radio>
<el-radio :label="1">停用</el-radio>
</el-radio-group>
@@ -174,9 +153,9 @@
</div>
</div>
</el-form-item>
- <el-form-item label="菜单排序" prop="menuSort">
+ <el-form-item label="菜单排序" prop="sort">
<div>
- <el-input-number v-model="formData.menuSort" :max="9999"/>
+ <el-input-number v-model="formData.sort" :max="9999"/>
<div class="form-tips">数值越小越排前</div>
</div>
</el-form-item>
@@ -193,7 +172,7 @@
</template>
<script lang="ts" setup>
import type {FormInstance} from "element-plus";
-import { menuAdd,menuUpdate,getMenuList } from '@/api/system/menu';
+import { menuAdd,menuUpdate,getMenuList,getMenuDetail } from '@/api/system/menu';
import {onMounted, reactive, readonly, ref, shallowRef} from "vue";
import {getModulesKey} from "@/router";
import {arrayToTree, treeToArray,message,buildTree} from "@/utils/auth";
@@ -231,31 +210,25 @@ const querySearch = (queryString: string, cb: any) => {
const formData = reactive({
menuId: "",
//父级id
- pid: 0,
+ parentId: 0,
//类型
type: 0,
//图标
- menuIcon: "",
+ icon: "",
//名称
- menuName: "",
+ name: "",
//排序号
- menuSort: 0,
+ sort: 0,
// 路由路径
- paths: "",
+ path: "",
//权限链接
- perms: "",
+ permission: "",
//前端组件
component: "",
- //选中路径
- selected: "",
- //路由参数
- params: "",
- //是否缓存 0=否， 1=是
- isCache: 0,
- //是否显示 0=否， 1=是
- isShow: 1,
- //是否禁用 0=否， 1=是
- isDisable: 0
+ //是否显示 0=显示， 1=不显示
+ hide: 0,
+ target:0,
+ status:0
});
const dialogClose = () => {
@@ -295,7 +268,7 @@ const setFormData = (data: Record<any, any>) => {
};
const getDetail = async () => {
- const data = await api.menuDetail(
+ const data = await getMenuDetail(
props.menuId
);
setFormData(data);
@@ -312,7 +285,7 @@ onMounted(() => {
if (props.menuId) {
getDetail()
}else{
- formData.pid=props.pid
+ formData.parentId=props.parentId
}
});
</script>
diff --git a/src/views/system/menu/index.vue b/src/views/system/menu/index.vue
index ba11cd0..354b98d 100644
--- a/src/views/system/menu/index.vue
+++ b/src/views/system/menu/index.vue
@@ -25,7 +25,7 @@
</el-table-column>
<el-table-column align="center" label="图标" prop="icon" min-width="80">
<template #default="{ row }">
- <icon :name="row.icon" :size="20"/>
+ <icon :name="row.icon" :size="20" v-if="row.icon"/>
</template>
</el-table-column>
<el-table-column align="center" label="权限标识" prop="permission" min-width="150" show-overflow-tooltip/>
@@ -69,7 +69,7 @@
import {defineAsyncComponent, nextTick, onMounted, readonly, ref, shallowRef,onActivated} from "vue";
import {getMenuList,menuDelete} from "@/api/system/menu";
import type {ElTable} from "element-plus";
-
+import icon from "@/components/icon/index.vue";
const tableRef = shallowRef<InstanceType<typeof ElTable>>();
import {confirm, message,buildTree} from "@/utils/auth";
@@ -103,7 +103,7 @@ const handleAdd = async (parentId:any) => {
};
const handleEdit = async (data: any) => {
- menuId.value=data.menuId
+ menuId.value=data.id
await nextTick();
editVisible.value=true
};
diff --git a/src/views/system/role/index.vue b/src/views/system/role/index.vue
index b0f8e41..ae62e8d 100644
--- a/src/views/system/role/index.vue
+++ b/src/views/system/role/index.vue
@@ -218,7 +218,6 @@
}
function checkedAllHandle() {
- console.log(treeRef.value);
if (!checkedAll.value) {
checkedKeys.value = getTreeAll(treeData.value);
treeRef.value!.setCheckedKeys(getTreeAll(treeData.value));
@@ -238,7 +237,6 @@
onMounted(async () => {
const treeMenuList = await getMenuList();
- console.log(treeMenuList)
treeMenuList.forEach((item) => {
item.expanded = false;
});
diff --git a/src/views/system/user/columns.ts b/src/views/system/user/columns.ts
index c92832e..f6a88e7 100644
--- a/src/views/system/user/columns.ts
+++ b/src/views/system/user/columns.ts
@@ -53,7 +53,7 @@ export const columns = [
ElTag,
{},
{
- default: () => record.row.roles[0].name,
+ default: () => record.row.roles.length>0?record.row.roles[0].name:'',
},
);
},