feat(menu.vue):添加菜单模块

src/api/system/menu.ts

@@ -1,8 +1,95 @@
 import request from '@/utils/request'
 
-export function getRouteList() {
+/**
+ * 获取路由列表
+ */
+export function listRoutes() {
     return request({
         url: '/youlai-admin/api/v2/menus/route',
         method: 'get'
     })
-}
+}
+
+/**
+ * 获取(表格)菜单列表
+ *
+ * @param queryParams
+ */
+export function listTableMenus(queryParams: object) {
+    return request({
+        url: '/youlai-admin/api/v1/menus/table',
+        method: 'get',
+        params: queryParams
+    })
+}
+
+/**
+ * 获取(下拉)菜单列表
+ */
+export function listSelectMenus() {
+    return request({
+        url: '/youlai-admin/api/v1/menus/select',
+        method: 'get'
+    })
+}
+
+/**
+ * 获取(树形下拉)菜单列表
+ */
+export function listTreeSelectMenus() {
+    return request({
+        url: '/youlai-admin/api/v1/menus/tree-select',
+        method: 'get'
+    })
+}
+
+
+/**
+ * 获取菜单详情
+ * @param id
+ */
+export function getMenuDetail(id: number) {
+    return request({
+        url: '/youlai-admin/api/v1/menus/' + id,
+        method: 'get'
+    })
+}
+
+/**
+ * 添加菜单
+ *
+ * @param data
+ */
+export function addMenu(data: object) {
+    return request({
+        url: '/youlai-admin/api/v1/menus',
+        method: 'post',
+        data: data
+    })
+}
+
+/**
+ * 修改菜单
+ *
+ * @param id
+ * @param data
+ */
+export function updateMenu(id: number, data: object) {
+    return request({
+        url: '/youlai-admin/api/v1/menus/' + id,
+        method: 'put',
+        data: data
+    })
+}
+
+/**
+ * 批量删除菜单
+ *
+ * @param ids 菜单ID，多个以英文逗号(,)分割
+ */
+export function deleteMenu(ids: string) {
+    return request({
+        url: '/youlai-admin/api/v1/menus/' + ids,
+        method: 'delete'
+    })
+}

src/store/modules/permission.ts

@@ -2,7 +2,7 @@ import {Module} from "vuex";
 import {PermissionState, RootStateTypes} from "@store/interface";
 import {RouteRecordRaw} from 'vue-router'
 import {constantRoutes} from '@/router'
-import {getRouteList} from "@/api/system/menu";
+import {listRoutes} from "@/api/system/menu";
 
 const modules = import.meta.glob("../../views/**/**.vue");
 export const Layout = () => import( '@/layout/index.vue')
@@ -64,7 +64,7 @@ const permissionModule: Module<PermissionState, RootStateTypes> = {
     actions: {
         generateRoutes({commit}, roles: string[]) {
             return new Promise((resolve, reject) => {
-                getRouteList().then(response => {
+                listRoutes().then(response => {
                     const asyncRoutes = response.data
                     let accessedRoutes = filterAsyncRoutes(asyncRoutes, roles)
                     commit('SET_ROUTES', accessedRoutes)

src/styles/element-plus.scss

@@ -48,7 +48,12 @@
   box-sizing: content-box;
 }
 
-// select row color
+// 选中行背景色值
 .el-table__body tr.current-row td {
   background-color: #e1f3d8b5 !important;
-}
+}
+
+// card 的header统一高度
+.el-card__header{
+  height: 61px!important;
+}

src/views/system/dict/components/Dict.vue

@@ -158,6 +158,7 @@ const state = reactive({
 })
 
 function handleQuery() {
+  emit('dictClick',{})
   state.loading = true
   listDictWithPage(state.queryParams).then(response => {
     const {data, total} = response as any

src/views/system/dict/index.vue

@@ -3,9 +3,10 @@
     <el-row :gutter="10">
       <el-col :span="12" :xs="24">
         <el-card class="box-card">
-          <div class="clearfix" slot="header">
+          <template #header>
-            <b>字典列表</b>
+            <svg-icon color="#000" icon-class="dict"/>
-          </div>
+            字典列表
+          </template>
           <!-- 字典列表子组件 -->
           <dict @dictClick="handleDictClick"/>
         </el-card>
@@ -13,12 +14,13 @@
 
       <el-col :span="12" :xs="24">
         <el-card class="box-card">
-          <div class="clearfix" slot="header">
+          <template #header>
-            <b  v-if=" state.dictCode" style="margin-right: 5px">字典</b>
+            <svg-icon color="#333" v-if=" state.dictCode" icon-class="education" />
-            <el-tag type="success" v-if=" state.dictCode" ><b>{{ state.dictName }}</b></el-tag>
+            <span v-if=" state.dictCode" style="margin:0 5px;">字典</span>
-            <b  v-if=" state.dictCode" style="margin-left: 5px">数据项</b>
+            <el-tag type="primary" v-if=" state.dictCode" size="small">{{ state.dictName }}</el-tag>
-            <el-tag type="warning"  v-if=" !state.dictCode">未选择字典</el-tag>
+            <span v-if=" state.dictCode" style="margin-left: 5px">数据项</span>
-          </div>
+            <el-tag type="warning" v-if=" !state.dictCode" size="small">未选择字典</el-tag>
+          </template>
           <!-- 字典项组件 -->
           <dict-item :dictName="state.dictName" :dictCode='state.dictCode'/>
         </el-card>
@@ -28,6 +30,7 @@
 </template>
 
 <script setup lang="ts">
+import SvgIcon from '@/components/SvgIcon/index.vue';
 import Dict from './components/Dict.vue'
 import DictItem from './components/DictItem.vue'
 
@@ -39,12 +42,12 @@ const state = reactive({
 })
 
 const handleDictClick = (dictRow: any) => {
-  state.dictName = dictRow.name
+  if(dictRow){
-  state.dictCode = dictRow.code
+    state.dictName = dictRow.name
+    state.dictCode = dictRow.code
+  }else{
+    state.dictName = ''
+    state.dictCode = ''
+  }
 }
-
 </script>
-
-<style scoped>
-
-</style>

src/views/system/menu/components/Menu.vue

@@ -0,0 +1,18 @@
+<template>
+  <div>
+    <el-form>
+      123
+    </el-form>
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Menu"
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/system/menu/components/Perm.vue

@@ -0,0 +1,13 @@
+<template>
+
+</template>
+
+<script>
+export default {
+  name: "Perm"
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/system/menu/index.vue

@@ -0,0 +1,48 @@
+<template>
+  <div class="app-container">
+    <el-row :gutter="10">
+      <el-col :span="10" :xs="24">
+        <el-card class="box-card" shadow="always">
+          <template #header>
+            <svg-icon color="#000" icon-class="menu"/> 菜单列表
+          </template>
+          <menu-table @menuClick="handleMenuClick"/>
+        </el-card>
+      </el-col>
+      <el-col :span="14" :xs="24">
+        <el-card class="box-card" shadow="always">
+          <div slot="header">
+            <b v-if=" state.dictCode" style="margin-right: 5px">菜单</b>
+            <el-tag type="success" v-if=" state.dictCode"><b>{{ state.dictName }}</b></el-tag>
+            <b v-if=" state.dictCode" style="margin-left: 5px">数据权限</b>
+            <el-tag type="warning" v-if=" !state.dictCode">未选择菜单</el-tag>
+          </div>
+          <perm-table :menuId="state.menuId" :menuName="state.menuName"/>
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script setup lang="ts">
+import SvgIcon from '@/components/SvgIcon/index.vue';
+import MenuTable from './components/Menu.vue'
+import PermTable from './components/Perm.vue'
+
+import {reactive} from 'vue'
+
+const state = reactive({
+  menuId: undefined,
+  menuName: ''
+})
+
+const handleMenuClick = (menuRow: any) => {
+  state.menuId = menuRow.id
+  state.menuName = menuRow.name
+}
+
+</script>
+
+<style scoped>
+
+</style>