vue-菜单管理

使用场景

给不同的用户赋予不同的菜单权限并且动态控制我们的菜单的时候，就需要用到菜单管理，有时候我们项目极为庞大，牵扯几千个菜单，放到前端也会极大占据资源，通过接口来控制角色可以访问哪些菜单是最佳选择。

1、接口引入

封装相关的接口，还是跟我们之前差不多，新建文件src\api\system\menu.js

import request from '@/utils/request.js'
const apiTypeurl='/api/menu';
// 查询菜单列表
export function listMenu (n) {
    return request({
      url: apiTypeurl,
      method: 'get',
      params:n
    })
}

// 添加菜单
export function addMenu (n) {
    return request({
            url: apiTypeurl,
            method: 'post',
            data:n
    })
}

// 删除菜单
export function delMenu (id) {
    return request({
      url:apiTypeurl+ '/'+id,
      method: 'delete'
    })      
}

// 修改菜单
export function updateMenu(n) {
    return request({
            url: apiTypeurl,
            method: 'put',
            data:n
    })
}

// 获取菜单详情
export function getMenu(id) {
    return request({
      url:apiTypeurl+ '/'+id,
      method: 'get'
    })
}
// 修改菜单状态 
export function changeMenuStatus (MenuId,status) {
    return request({
            url: apiTypeurl+'/status/'+MenuId,
            method: 'put',
            data:status
    })
}

2、增加页面路由

在页面的路由之中添加相关页面的路由部分src\router\index.tsx

 {
    path: '/system/menu',
    name: 'menu',
    meta: { title: '菜单管理', icon: '<User/>', },
    children: [],
    component: () => import('@/views/system/menu/index.vue'),
},

3、查询页面搭建

整个页面的部分我们都写到这个里面 src\views\system\menu.vue,先搭建一个简单的页面

👉导入接口

<script setup name="Menu">
import { ref, reactive, toRefs, onMounted, watch, getCurrentInstance } from 'vue'
import { addMenu, delMenu, getMenu, listMenu, updateMenu } from "@/api/system/menu";
</script>

👉查询部分

<el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch">
    <el-form-item label="菜单名称" prop="menuName">
      <el-input
          v-model="queryParams.menuName"
          placeholder="请输入菜单名称"
          clearable
          style="width: 200px"
          @keyup.enter="handleQuery"
      />
  </el-form-item>
  <el-form-item>
    <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
    <el-button icon="Refresh" @click="resetQuery">重置</el-button>
  </el-form-item>
</el-form>

/** 搜索按钮操作 */
function handleQuery() {
  getList();
}
/** 查询列表 */
function getList() {
  loading.value = true;
  listMenu(queryParams.value).then(response => {
    menuList.value = response.data;
    loading.value = false;
  });
}

查询一下，查询部分我们已经写好了。

👉列表展示

这里我们菜单的展示使用el-table的tree模式，展示菜单的层级关系，先来看看我们正常的展示

<el-table
  max-height="540"
    v-if="refreshTable"
    v-loading="loading"
    :data="menuList"
    row-key="menuId"
    :default-expand-all="isExpandAll"
    :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
>
    <el-table-column prop="menuName" label="菜单名称" :show-overflow-tooltip="true" width="160"></el-table-column>
    <el-table-column prop="icon" label="图标" align="center" width="100">
      <template #default="scope">
          <svg-icon :icon-class="scope.row.icon" />
      </template>
    </el-table-column>
    <el-table-column prop="orderNum" label="排序" width="60"></el-table-column>
    <el-table-column prop="perms" label="权限标识" :show-overflow-tooltip="true"></el-table-column>
    <el-table-column prop="component" label="组件路径" :show-overflow-tooltip="true"></el-table-column>
    <el-table-column prop="status" label="状态" width="80">
      <template #default="scope">
          <dict-tag :options="sys_normal_disable" :value="scope.row.status" />
      </template>
    </el-table-column>
  <!--  <el-table-column label="创建时间" align="center" width="160" prop="createTime">
      <template #default="scope">
          <span>{{ parseTime(scope.row.createTime) }}</span>
      </template>
    </el-table-column> -->
    <el-table-column label="操作" align="center" width="210" class-name="small-padding fixed-width">
      <template #default="scope">
          <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:menu:edit']">修改</el-button>
          <el-button link type="primary" icon="Plus" @click="handleAdd(scope.row)" v-hasPermi="['system:menu:add']">新增</el-button>
          <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:menu:remove']">删除</el-button>
      </template>
    </el-table-column>
</el-table>

这个时候我们的数据格式还是平铺的扁平化数组，接下来我们需要将扁平化数组转换为树形结构

4、转换数据格式

👉数据格式

先看看我们后端返回的数据格式以及我们想要的数据格式

// 数据格式
[
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
]

//我们想要的数据格式 
[
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
    children: [
      {
        date: '2016-05-03',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
      },
    ],
  },
]

👉 转换思路

简单看看我们的数据转换思路

1、我们利用的就是parent_id，通过parent_id来找到对应的子节点，然后将其添加到对应的父节点中
2、判断是否有childrenList子节点数据,从而达到层结构的转换

👉 转换方法

这里我们就写一个方法转化一下，还是写到我们的methods中

export function handleTree(data, id, parentId, children) {
  let config = {
    id: id || 'id',
    parentId: parentId || 'parentId',
    childrenList: children || 'children'
  };

  var childrenListMap = {};
  var nodeIds = {};
  var tree = [];

  for (let d of data) {
    let parentId = d[config.parentId];
    if (childrenListMap[parentId] == null) {
      childrenListMap[parentId] = [];
    }
    nodeIds[d[config.id]] = d;
    childrenListMap[parentId].push(d);
  }

  for (let d of data) {
    let parentId = d[config.parentId];
    if (nodeIds[parentId] == null) {
      tree.push(d);
    }
  }

  for (let t of tree) {
    adaptToChildrenList(t);
  }

  function adaptToChildrenList(o) {
    if (childrenListMap[o[config.id]] !== null) {
      o[config.childrenList] = childrenListMap[o[config.id]];
    }
    if (o[config.childrenList]) {
      for (let c of o[config.childrenList]) {
        adaptToChildrenList(c);
      }
    }
  }
  return tree;
}
// 挂载到公共方法下
import { handleTree} from '@/utils/methods.js'
export default {
  install(app) {
    app.config.globalProperties.$handleTree = handleTree
  }
}

👉 使用

menuList.value = proxy.$handleTree(response.data, "menuId");

5、新增部分

新增部分也十分简单

// 新增弹窗
<el-dialog :title="title" v-model="open" 
width="680px" append-to-body
draggable
overflow>
  <el-form ref="menuRef" :model="form" :rules="rules" label-width="100px">
    <el-row>
        <el-col :span="24">
          <el-form-item label="上级菜单">
              <el-tree-select
                v-model="form.parentId"
                :data="menuOptions"
                :props="{ value: 'menuId', label: 'menuName', children: 'children' }"
                value-key="menuId"
                placeholder="选择上级菜单"
                check-strictly
              />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="菜单类型" prop="menuType">
              <el-radio-group v-model="form.menuType">
                <el-radio value="M">目录</el-radio>
                <el-radio value="C">菜单</el-radio>
                <el-radio value="F">按钮</el-radio>
              </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12" v-if="form.menuType != 'F'">
          <el-form-item label="菜单图标" prop="icon">
              <el-popover
                placement="bottom-start"
                :width="540"
                trigger="click"
              >
                <template #reference>
                    <el-input v-model="form.icon" placeholder="点击选择图标" @blur="showSelectIcon" readonly>
                      <template #prefix>
                          <svg-icon
                            v-if="form.icon"
                            :icon-class="form.icon"
                            class="el-input__icon"
                            style="height: 32px;width: 16px;"
                          />
                          <el-icon v-else style="height: 32px;width: 16px;"><search /></el-icon>
                      </template>
                    </el-input>
                </template>
                <icon-select ref="iconSelectRef" @selected="selected" :active-icon="form.icon" />
              </el-popover>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="显示排序" prop="orderNum">
              <el-input-number v-model="form.orderNum" controls-position="right" :min="0" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="菜单名称" prop="menuName">
              <el-input v-model="form.menuName" placeholder="请输入菜单名称" />
          </el-form-item>
        </el-col>
        <el-col :span="12" v-if="form.menuType == 'C'">
          <el-form-item prop="routeName">
              <template #label>
                <span>
                    <el-tooltip content="默认不填则和路由地址相同：如地址为：`user`，则名称为`User`（注意：因为router会删除名称相同路由，为避免名字的冲突，特殊情况下请自定义，保证唯一性）" placement="top">
                      <el-icon><question-filled /></el-icon>
                    </el-tooltip>
                    路由名称
                </span>
              </template>
              <el-input v-model="form.routeName" placeholder="请输入路由名称" />
          </el-form-item>
        </el-col>
        <el-col :span="12" v-if="form.menuType != 'F'">
          <el-form-item>
              <template #label>
                <span>
                    <el-tooltip content="选择是外链则路由地址需要以`http(s)://`开头" placement="top">
                      <el-icon><question-filled /></el-icon>
                    </el-tooltip>是否外链
                </span>
              </template>
              <el-radio-group v-model="form.isFrame">
                <el-radio value="0">是</el-radio>
                <el-radio value="1">否</el-radio>
              </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12" v-if="form.menuType != 'F'">
          <el-form-item prop="path">
              <template #label>
                <span>
                    <el-tooltip content="访问的路由地址，如：`user`，如外网地址需内链访问则以`http(s)://`开头" placement="top">
                      <el-icon><question-filled /></el-icon>
                    </el-tooltip>
                    路由地址
                </span>
              </template>
              <el-input v-model="form.path" placeholder="请输入路由地址" />
          </el-form-item>
        </el-col>
        <el-col :span="12" v-if="form.menuType == 'C'">
          <el-form-item prop="component">
              <template #label>
                <span>
                    <el-tooltip content="访问的组件路径，如：`system/user/index`，默认在`views`目录下" placement="top">
                      <el-icon><question-filled /></el-icon>
                    </el-tooltip>
                    组件路径
                </span>
              </template>
              <el-input v-model="form.component" placeholder="请输入组件路径" />
          </el-form-item>
        </el-col>
        <el-col :span="12" v-if="form.menuType != 'M'">
          <el-form-item>
              <el-input v-model="form.perms" placeholder="请输入权限标识" maxlength="100" />
              <template #label>
                <span>
                    <el-tooltip content="控制器中定义的权限字符，如：@PreAuthorize(`@ss.hasPermi('system:user:list')`)" placement="top">
                      <el-icon><question-filled /></el-icon>
                    </el-tooltip>
                    权限字符
                </span>
              </template>
          </el-form-item>
        </el-col>
        <el-col :span="12" v-if="form.menuType == 'C'">
          <el-form-item>
              <el-input v-model="form.query" placeholder="请输入路由参数" maxlength="255" />
              <template #label>
                <span>
                    <el-tooltip content='访问路由的默认传递参数，如：`{"id": 1, "name": "ry"}`' placement="top">
                      <el-icon><question-filled /></el-icon>
                    </el-tooltip>
                    路由参数
                </span>
              </template>
          </el-form-item>
        </el-col>
        <el-col :span="12" v-if="form.menuType == 'C'">
          <el-form-item>
              <template #label>
                <span>
                    <el-tooltip content="选择是则会被`keep-alive`缓存，需要匹配组件的`name`和地址保持一致" placement="top">
                      <el-icon><question-filled /></el-icon>
                    </el-tooltip>
                    是否缓存
                </span>
              </template>
              <el-radio-group v-model="form.isCache">
                <el-radio value="0">缓存</el-radio>
                <el-radio value="1">不缓存</el-radio>
              </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12" v-if="form.menuType != 'F'">
          <el-form-item>
              <template #label>
                <span>
                    <el-tooltip content="选择隐藏则路由将不会出现在侧边栏，但仍然可以访问" placement="top">
                      <el-icon><question-filled /></el-icon>
                    </el-tooltip>
                    显示状态
                </span>
              </template>
              <el-radio-group v-model="form.visible">
                <el-radio value="0">显示</el-radio>
                <el-radio value="1">隐藏</el-radio>
              </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item>
              <template #label>
                <span>
                    <el-tooltip content="选择停用则路由将不会出现在侧边栏，也不能被访问" placement="top">
                      <el-icon><question-filled /></el-icon>
                    </el-tooltip>
                    菜单状态
                </span>
              </template>
              <el-radio-group v-model="form.status">
                <el-radio-group v-model="form.visible">
                  <el-radio value="0">正常</el-radio>
                  <el-radio value="1">停用</el-radio>
                </el-radio-group>
              </el-radio-group>
          </el-form-item>
        </el-col>
    </el-row>
  </el-form>
  <template #footer>
    <div class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
    </div>
  </template>
</el-dialog>

// 新增
addMenu(form.value).then(response => {
  if(response.code==200){
    proxy.$modal.msgSuccess("新增成功");
    open.value = false;
    getList();
    }
});

测试一下新增功能，ok！

5、修改部分

<el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:menu:edit']">修改</el-button>
/** 修改按钮操作 */
async function handleUpdate(row) {
  reset();
  await getTreeselect();
  getMenu(row.menuId).then(response => {
    form.value = response.data;
    open.value = true;
    title.value = "修改菜单";
  });
}
updateMenu(form.value).then(response => {
  if(response.code==200){
    proxy.$modal.msgSuccess("修改成功");
    open.value = false;
      getList();
  }
});

测试一下修改部分，ok！

6、删除部分

<el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:menu:remove']">删除</el-button>  
        
const handleDelete = async (record) => {
  try {
    await delMenu(record.menu_id);
    message.success('删除成功');
    handleSearch();
  } catch (error) {
    message.error('删除失败，请重试！');
  }
};

这边我们尝试一下，我们的删除已经成功了 ！