菜单切图

admin/src/api/auth.ts

@@ -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)
+}

admin/src/layout/components/layout-header.vue

@@ -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>

admin/src/router/modules/permission.ts

@@ -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
+            }
         }
     ]
 }

admin/src/views/permission/menu/edit.vue

@@ -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>

admin/src/views/permission/menu/index.vue

@@ -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>

admin/src/views/permission/role/index.vue

@@ -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="操作">

admin/src/views/setting/personal/personal_data.vue

@@ -102,8 +102,8 @@ const rules = reactive<object>({
 
 // 获取个人设置
 const getAuthAdminMySelf = async (): Promise<void> => {
-    formData.value = await apiUserInfo()
+    let res = await apiUserInfo()
-    console.log(formData.value, 'formData')
+    formData.value = res?.user
 }
 
 // 设置个人设置