菜单切图
This commit is contained in:
Mrtangl
parent
7525c7418a
commit
f370ecec76
|
|
@ -60,3 +60,24 @@ export function apiConfigGetMenu() {
|
|||
export function apiConfigGetAuth() {
|
||||
return request.get('/config/getAuth')
|
||||
}
|
||||
|
||||
/* 菜单 */
|
||||
// 菜单详情
|
||||
export function apiMenuDetail(params: any) {
|
||||
return request.get('/system/menu/detail', { params })
|
||||
}
|
||||
|
||||
// 新增菜单
|
||||
export function apiMenuAdd(params: any) {
|
||||
return request.post('/system/menu/add', params)
|
||||
}
|
||||
|
||||
// 编辑菜单
|
||||
export function apiMenuEdit(params: any) {
|
||||
return request.post('/system/menu/edit', params)
|
||||
}
|
||||
|
||||
// 删除菜单
|
||||
export function apiMenuDelete(params: { id: number }) {
|
||||
return request.post('/system/menu/del', params)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -15,6 +15,7 @@
|
|||
<el-dropdown-item>个人设置</el-dropdown-item>
|
||||
</router-link>
|
||||
</el-dropdown-menu>
|
||||
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item command="logout">退出登录</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
|
|
|
|||
|
|
@ -33,6 +33,20 @@ const routes: RouteRecordRaw = {
|
|||
parent: '/permission/role',
|
||||
hidden: true
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/permission/menu',
|
||||
component: () => import('@/views/permission/menu/index.vue'),
|
||||
meta: { title: '菜单', permission: ['view'] }
|
||||
},
|
||||
{
|
||||
path: '/permission/menu/edit',
|
||||
component: () => import('@/views/permission/menu/edit.vue'),
|
||||
meta: {
|
||||
title: '菜单',
|
||||
parent: '/permission/menu',
|
||||
hidden: true
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,142 @@
|
|||
<template>
|
||||
<div class="menu-edit">
|
||||
<el-card shadow="never">
|
||||
<el-page-header :content="id ? '编辑菜单' : '新增菜单'" @back="$router.back()" />
|
||||
</el-card>
|
||||
|
||||
<el-card class="m-t-15" shadow="never">
|
||||
<!-- <el-radio-group v-model="radio" class="m-l-60">
|
||||
<el-radio
|
||||
:label="menuDataType.CATALOG"
|
||||
@change="changeType(menuDataType.CATALOG)"
|
||||
>
|
||||
目录
|
||||
</el-radio>
|
||||
<el-radio :label="menuDataType.MENU" @change="changeType(menuDataType.MENU)">
|
||||
菜单
|
||||
</el-radio>
|
||||
<el-radio
|
||||
:label="menuDataType.BUTTON"
|
||||
@change="changeType(menuDataType.BUTTON)"
|
||||
>
|
||||
按钮
|
||||
</el-radio>
|
||||
</el-radio-group> -->
|
||||
|
||||
<div class="m-t-15">
|
||||
<el-form
|
||||
ref="form"
|
||||
:model="formData"
|
||||
label-width="120px"
|
||||
size="small"
|
||||
style="max-width: 460px"
|
||||
>
|
||||
<el-form-item label="菜单类型">
|
||||
<el-radio-group v-model="radio">
|
||||
<el-radio
|
||||
:label="menuDataType.CATALOG"
|
||||
@change="changeType(menuDataType.CATALOG)"
|
||||
>
|
||||
目录
|
||||
</el-radio>
|
||||
<el-radio
|
||||
:label="menuDataType.MENU"
|
||||
@change="changeType(menuDataType.MENU)"
|
||||
>
|
||||
菜单
|
||||
</el-radio>
|
||||
<el-radio
|
||||
:label="menuDataType.BUTTON"
|
||||
@change="changeType(menuDataType.BUTTON)"
|
||||
>
|
||||
按钮
|
||||
</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="父级菜单">
|
||||
<el-cascader
|
||||
style="width: 340px"
|
||||
:options="menuList"
|
||||
:props="{
|
||||
checkStrictly: true,
|
||||
emitPath: false,
|
||||
label: 'title',
|
||||
value: 'id'
|
||||
}"
|
||||
clearable
|
||||
></el-cascader>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="菜单图标">
|
||||
<el-input show-word-limit placeholder="请输入名称"></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="菜单名称">
|
||||
<el-input show-word-limit placeholder="请输入名称"></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="路由地址">
|
||||
<el-input show-word-limit placeholder="请输入名称"></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<div v-if="radio == menuDataType.CATALOG">
|
||||
<el-form-item label="排序">
|
||||
<el-input
|
||||
show-word-limit
|
||||
type="number"
|
||||
placeholder="请输入名称"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div v-else-if="radio == menuDataType.MENU">
|
||||
<el-form-item label="排序">
|
||||
<el-input
|
||||
show-word-limit
|
||||
type="number"
|
||||
placeholder="请输入名称"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="ssss">
|
||||
<el-input
|
||||
show-word-limit
|
||||
type="number"
|
||||
placeholder="请输入名称"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<div v-else></div>
|
||||
</el-form>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { useAdmin } from '@/core/hooks/app'
|
||||
import { onMounted, reactive, ref } from 'vue'
|
||||
import { apiConfigGetMenu, apiMenuDetail, apiMenuAdd, apiMenuEdit, apiMenuDelete } from '@/api/auth'
|
||||
|
||||
const menuDataType = {
|
||||
CATALOG: 'M', // 目录
|
||||
MENU: 'C', // 菜单
|
||||
BUTTON: 'A' // 按钮
|
||||
}
|
||||
|
||||
const { router, route } = useAdmin()
|
||||
const id: any = route.query.id
|
||||
|
||||
const radio = ref(menuDataType.CATALOG)
|
||||
|
||||
// 切换
|
||||
const changeType = (val: string) => {
|
||||
menuDataType.value = val
|
||||
}
|
||||
|
||||
// 父级菜单选择
|
||||
const menuList = ref<any>([])
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
|
|
@ -0,0 +1,90 @@
|
|||
<template>
|
||||
<div class="menu">
|
||||
<el-card shadow="never">
|
||||
<router-link to="/permission/menu/edit">
|
||||
<el-button type="primary" size="small">添加菜单</el-button>
|
||||
</router-link>
|
||||
|
||||
<el-table
|
||||
:data="menuTableData"
|
||||
class="m-t-24"
|
||||
row-key="id"
|
||||
default-expand-all
|
||||
:tree-props="{ children: 'children' }"
|
||||
size="mini"
|
||||
>
|
||||
<el-table-column prop="menuName" label="名称"> </el-table-column>
|
||||
<el-table-column prop="menuType" label="菜单类型">
|
||||
<template #default="scope">
|
||||
<span v-if="scope.row.menuType == menuDataType.CATALOG">{{ '目录' }}</span>
|
||||
<span v-else-if="scope.row.menuType == menuDataType.MENU">
|
||||
{{ '菜单' }}
|
||||
</span>
|
||||
<span v-else>{{ '按钮' }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="menuIcon" label="图标"> </el-table-column>
|
||||
<el-table-column prop="menuSort" label="排序"> </el-table-column>
|
||||
<el-table-column prop="perms" label="权限标识"> </el-table-column>
|
||||
<el-table-column prop="paths" label="组件路径"> </el-table-column>
|
||||
<el-table-column prop="isDisable" label="状态"> </el-table-column>
|
||||
<el-table-column prop="createTime" label="创建时间"> </el-table-column>
|
||||
<el-table-column label="操作">
|
||||
<template #default="scope">
|
||||
<router-link
|
||||
class="m-r-10"
|
||||
:to="{
|
||||
path: '/permission/menu/edit',
|
||||
query: {
|
||||
id: scope.row.id
|
||||
}
|
||||
}"
|
||||
>
|
||||
<el-button type="text" size="mini">编辑</el-button>
|
||||
</router-link>
|
||||
|
||||
<popup class="m-r-10 inline" @confirm="handleDelete(scope.row.id)">
|
||||
<template #trigger>
|
||||
<el-button type="text" size="mini">删除</el-button>
|
||||
</template>
|
||||
</popup>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import Popup from '@/components/popup/index.vue'
|
||||
import { usePages } from '@/core/hooks/pages'
|
||||
import { onMounted, reactive, ref } from 'vue'
|
||||
import { apiConfigGetMenu, apiMenuDetail, apiMenuAdd, apiMenuEdit, apiMenuDelete } from '@/api/auth'
|
||||
|
||||
const menuDataType = {
|
||||
CATALOG: 'M', // 目录
|
||||
MENU: 'C', // 菜单
|
||||
BUTTON: 'A' // 按钮
|
||||
}
|
||||
|
||||
const menuTableData = ref([])
|
||||
|
||||
// 获取菜单列表
|
||||
const getMenuTableData = () => {
|
||||
apiConfigGetMenu().then(data => {
|
||||
menuTableData.value = data
|
||||
})
|
||||
}
|
||||
|
||||
// 删除菜单
|
||||
const handleDelete = async (id: number) => {
|
||||
await apiMenuDelete({ id })
|
||||
getMenuTableData()
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getMenuTableData()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
|
|
@ -11,7 +11,11 @@
|
|||
<el-table-column prop="name" label="名称"></el-table-column>
|
||||
<el-table-column prop="sort" label="排序"></el-table-column>
|
||||
<el-table-column prop="remark" label="备注"></el-table-column>
|
||||
<el-table-column prop="isDisable" label="状态"></el-table-column>
|
||||
<el-table-column prop="isDisable" label="状态">
|
||||
<template #default="scope">
|
||||
<span>{{ scope.row.isDisable == 0 ? '启用' : '关闭' }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop label="权限"></el-table-column>
|
||||
<el-table-column prop="createTime" label="创建时间"></el-table-column>
|
||||
<el-table-column prop label="操作">
|
||||
|
|
|
|||
|
|
@ -102,8 +102,8 @@ const rules = reactive<object>({
|
|||
|
||||
// 获取个人设置
|
||||
const getAuthAdminMySelf = async (): Promise<void> => {
|
||||
formData.value = await apiUserInfo()
|
||||
console.log(formData.value, 'formData')
|
||||
let res = await apiUserInfo()
|
||||
formData.value = res?.user
|
||||
}
|
||||
|
||||
// 设置个人设置
|
||||
|
|
|
|||
Loading…
Reference in New Issue