|
|
@@ -0,0 +1,620 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="zh-CN">
|
|
|
+<head>
|
|
|
+ <meta charset="UTF-8">
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
+ <title>菜单管理</title>
|
|
|
+ <link rel="stylesheet" href="../../lib/layui/css/layui.css">
|
|
|
+ <style>
|
|
|
+ body { padding: 15px; background: #f5f7fa; }
|
|
|
+
|
|
|
+ .menu-container {
|
|
|
+ display: flex;
|
|
|
+ gap: 20px;
|
|
|
+ height: calc(100vh - 90px);
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 左侧树形区域 */
|
|
|
+ .menu-tree-panel {
|
|
|
+ width: 380px;
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 8px;
|
|
|
+ box-shadow: 0 2px 12px rgba(0,0,0,0.08);
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+
|
|
|
+ .panel-header {
|
|
|
+ padding: 16px 20px;
|
|
|
+ border-bottom: 1px solid #ebeef5;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .panel-header h3 {
|
|
|
+ margin: 0;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #303133;
|
|
|
+ }
|
|
|
+
|
|
|
+ .search-box {
|
|
|
+ padding: 12px 20px;
|
|
|
+ border-bottom: 1px solid #f0f2f5;
|
|
|
+ }
|
|
|
+
|
|
|
+ .search-box input {
|
|
|
+ width: 100%;
|
|
|
+ padding: 8px 12px;
|
|
|
+ border: 1px solid #dcdfe6;
|
|
|
+ border-radius: 4px;
|
|
|
+ font-size: 14px;
|
|
|
+ transition: all 0.3s;
|
|
|
+ }
|
|
|
+
|
|
|
+ .search-box input:focus {
|
|
|
+ border-color: #409eff;
|
|
|
+ outline: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tree-content {
|
|
|
+ flex: 1;
|
|
|
+ overflow-y: auto;
|
|
|
+ padding: 12px;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 树形节点样式 */
|
|
|
+ .custom-tree-node {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding: 8px 12px;
|
|
|
+ border-radius: 6px;
|
|
|
+ transition: all 0.2s;
|
|
|
+ cursor: pointer;
|
|
|
+ margin-bottom: 4px;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+
|
|
|
+ .custom-tree-node:hover {
|
|
|
+ background: #f5f7fa;
|
|
|
+ }
|
|
|
+
|
|
|
+ .custom-tree-node.active {
|
|
|
+ background: #ecf5ff;
|
|
|
+ }
|
|
|
+
|
|
|
+ .node-icon {
|
|
|
+ width: 28px;
|
|
|
+ height: 28px;
|
|
|
+ border-radius: 6px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ margin-right: 10px;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .node-icon.directory { background: #e1f3f8; color: #009688; }
|
|
|
+ .node-icon.menu { background: #ecf5ff; color: #409eff; }
|
|
|
+ .node-icon.button { background: #fef0f0; color: #f56c6c; }
|
|
|
+
|
|
|
+ .node-info {
|
|
|
+ flex: 1;
|
|
|
+ min-width: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .node-name {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #303133;
|
|
|
+ font-weight: 500;
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ }
|
|
|
+
|
|
|
+ .node-path {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #909399;
|
|
|
+ margin-top: 2px;
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ }
|
|
|
+
|
|
|
+ .node-actions {
|
|
|
+ display: none;
|
|
|
+ gap: 6px;
|
|
|
+ margin-left: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .custom-tree-node:hover .node-actions {
|
|
|
+ display: flex;
|
|
|
+ }
|
|
|
+
|
|
|
+ .node-actions button {
|
|
|
+ width: 28px;
|
|
|
+ height: 28px;
|
|
|
+ border: none;
|
|
|
+ border-radius: 4px;
|
|
|
+ cursor: pointer;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ transition: all 0.2s;
|
|
|
+ }
|
|
|
+
|
|
|
+ .node-actions .btn-edit { background: #ecf5ff; color: #409eff; }
|
|
|
+ .node-actions .btn-edit:hover { background: #409eff; color: #fff; }
|
|
|
+ .node-actions .btn-add { background: #f0f9eb; color: #67c23a; }
|
|
|
+ .node-actions .btn-add:hover { background: #67c23a; color: #fff; }
|
|
|
+ .node-actions .btn-del { background: #fef0f0; color: #f56c6c; }
|
|
|
+ .node-actions .btn-del:hover { background: #f56c6c; color: #fff; }
|
|
|
+
|
|
|
+ .node-expand {
|
|
|
+ width: 20px;
|
|
|
+ height: 20px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ cursor: pointer;
|
|
|
+ color: #909399;
|
|
|
+ margin-right: 5px;
|
|
|
+ transition: transform 0.3s;
|
|
|
+ }
|
|
|
+
|
|
|
+ .node-expand.expanded { transform: rotate(90deg); }
|
|
|
+ .node-expand.empty { visibility: hidden; }
|
|
|
+
|
|
|
+ .children-nodes {
|
|
|
+ padding-left: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 右侧详情区域 */
|
|
|
+ .menu-detail-panel {
|
|
|
+ flex: 1;
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 8px;
|
|
|
+ box-shadow: 0 2px 12px rgba(0,0,0,0.08);
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+
|
|
|
+ .detail-header {
|
|
|
+ padding: 16px 20px;
|
|
|
+ border-bottom: 1px solid #ebeef5;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .detail-header h3 {
|
|
|
+ margin: 0;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #303133;
|
|
|
+ }
|
|
|
+
|
|
|
+ .detail-content {
|
|
|
+ padding: 24px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .detail-empty {
|
|
|
+ text-align: center;
|
|
|
+ padding: 80px 0;
|
|
|
+ color: #909399;
|
|
|
+ }
|
|
|
+
|
|
|
+ .detail-empty i {
|
|
|
+ font-size: 60px;
|
|
|
+ margin-bottom: 16px;
|
|
|
+ color: #dcdfe6;
|
|
|
+ }
|
|
|
+
|
|
|
+ .info-grid {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: repeat(2, 1fr);
|
|
|
+ gap: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .info-item {
|
|
|
+ padding: 16px;
|
|
|
+ background: #fafafa;
|
|
|
+ border-radius: 6px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .info-item.full-width {
|
|
|
+ grid-column: span 2;
|
|
|
+ }
|
|
|
+
|
|
|
+ .info-label {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #909399;
|
|
|
+ margin-bottom: 6px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .info-value {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #303133;
|
|
|
+ }
|
|
|
+
|
|
|
+ .menu-type-tag {
|
|
|
+ display: inline-block;
|
|
|
+ padding: 2px 10px;
|
|
|
+ border-radius: 4px;
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .menu-type-tag.M { background: #e1f3f8; color: #009688; }
|
|
|
+ .menu-type-tag.C { background: #ecf5ff; color: #409eff; }
|
|
|
+ .menu-type-tag.F { background: #fef0f0; color: #f56c6c; }
|
|
|
+
|
|
|
+ .menu-status {
|
|
|
+ display: inline-block;
|
|
|
+ padding: 2px 10px;
|
|
|
+ border-radius: 4px;
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .menu-status.normal { background: #f0f9eb; color: #67c23a; }
|
|
|
+ .menu-status.disabled { background: #f4f4f5; color: #909399; }
|
|
|
+
|
|
|
+ /* 按钮样式 */
|
|
|
+ .btn-primary {
|
|
|
+ background: #409eff;
|
|
|
+ color: #fff;
|
|
|
+ border: none;
|
|
|
+ padding: 8px 16px;
|
|
|
+ border-radius: 4px;
|
|
|
+ cursor: pointer;
|
|
|
+ font-size: 14px;
|
|
|
+ display: inline-flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 6px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn-primary:hover {
|
|
|
+ background: #66b1ff;
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn-default {
|
|
|
+ background: #fff;
|
|
|
+ color: #606266;
|
|
|
+ border: 1px solid #dcdfe6;
|
|
|
+ padding: 8px 16px;
|
|
|
+ border-radius: 4px;
|
|
|
+ cursor: pointer;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn-default:hover {
|
|
|
+ color: #409eff;
|
|
|
+ border-color: #c6e2ff;
|
|
|
+ background: #ecf5ff;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 滚动条样式 */
|
|
|
+ .tree-content::-webkit-scrollbar,
|
|
|
+ .detail-content::-webkit-scrollbar {
|
|
|
+ width: 6px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tree-content::-webkit-scrollbar-thumb,
|
|
|
+ .detail-content::-webkit-scrollbar-thumb {
|
|
|
+ background: #dcdfe6;
|
|
|
+ border-radius: 3px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tree-content::-webkit-scrollbar-track,
|
|
|
+ .detail-content::-webkit-scrollbar-track {
|
|
|
+ background: #f5f7fa;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 动画 */
|
|
|
+ @keyframes fadeIn {
|
|
|
+ from { opacity: 0; transform: translateY(10px); }
|
|
|
+ to { opacity: 1; transform: translateY(0); }
|
|
|
+ }
|
|
|
+
|
|
|
+ .detail-content {
|
|
|
+ animation: fadeIn 0.3s ease;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+ <div class="menu-container">
|
|
|
+ <!-- 左侧树形区域 -->
|
|
|
+ <div class="menu-tree-panel">
|
|
|
+ <div class="panel-header">
|
|
|
+ <h3><i class="layui-icon layui-icon-app"></i> 菜单列表</h3>
|
|
|
+ <button class="btn-primary" onclick="addMenu(0)">
|
|
|
+ <i class="layui-icon layui-icon-add-1"></i> 添加
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ <div class="search-box">
|
|
|
+ <input type="text" id="searchInput" placeholder="搜索菜单名称..." oninput="filterMenu(this.value)">
|
|
|
+ </div>
|
|
|
+ <div class="tree-content" id="menuTree"></div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 右侧详情区域 -->
|
|
|
+ <div class="menu-detail-panel">
|
|
|
+ <div class="detail-header">
|
|
|
+ <h3><i class="layui-icon layui-icon-survey"></i> 菜单详情</h3>
|
|
|
+ <div id="detailActions" style="display: none;">
|
|
|
+ <button class="btn-default" onclick="editCurrentMenu()">
|
|
|
+ <i class="layui-icon layui-icon-edit"></i> 编辑
|
|
|
+ </button>
|
|
|
+ <button class="btn-default" onclick="addChildMenu()">
|
|
|
+ <i class="layui-icon layui-icon-add-1"></i> 添加下级
|
|
|
+ </button>
|
|
|
+ <button class="btn-default" style="color: #f56c6c;" onclick="delCurrentMenu()">
|
|
|
+ <i class="layui-icon layui-icon-delete"></i> 删除
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="detail-content" id="detailContent">
|
|
|
+ <div class="detail-empty">
|
|
|
+ <i class="layui-icon layui-icon-survey"></i>
|
|
|
+ <p>请选择一个菜单查看详情</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <script src="../../lib/jquery.min.js"></script>
|
|
|
+ <script src="../../lib/layui/layui.js"></script>
|
|
|
+ <script src="../../js/config.js"></script>
|
|
|
+ <script src="../../js/common.js"></script>
|
|
|
+ <script>
|
|
|
+ var currentMenu = null;
|
|
|
+ var menuData = [];
|
|
|
+
|
|
|
+ // 加载菜单数据
|
|
|
+ function loadMenuTree() {
|
|
|
+ Common.get(Config.api.menu.tree, function(res) {
|
|
|
+ if (res.code === 200) {
|
|
|
+ menuData = res.data || [];
|
|
|
+ renderTree(menuData);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ // 渲染树形结构
|
|
|
+ function renderTree(data, container) {
|
|
|
+ container = container || $('#menuTree');
|
|
|
+ container.empty();
|
|
|
+
|
|
|
+ data.forEach(function(item) {
|
|
|
+ var hasChildren = item.children && item.children.length > 0;
|
|
|
+ var iconClass = getMenuTypeClass(item.menuType);
|
|
|
+ var iconText = getMenuTypeText(item.menuType);
|
|
|
+
|
|
|
+ var node = $('<div class="custom-tree-node" data-id="' + item.id + '">' +
|
|
|
+ '<span class="node-expand ' + (hasChildren ? 'expanded' : 'empty') + '" onclick="toggleNode(this, event)">' +
|
|
|
+ '<i class="layui-icon layui-icon-right"></i></span>' +
|
|
|
+ '<span class="node-icon ' + iconClass + '"><i class="layui-icon ' + (item.icon || 'layui-icon-file') + '"></i></span>' +
|
|
|
+ '<div class="node-info">' +
|
|
|
+ '<div class="node-name">' + item.menuName + '</div>' +
|
|
|
+ '<div class="node-path">' + (item.menuUrl || '无 URL') + '</div>' +
|
|
|
+ '</div>' +
|
|
|
+ '<div class="node-actions">' +
|
|
|
+ '<button class="btn-edit" onclick="event.stopPropagation(); editMenu(' + item.id + ')" title="编辑"><i class="layui-icon layui-icon-edit"></i></button>' +
|
|
|
+ '<button class="btn-add" onclick="event.stopPropagation(); addMenu(' + item.id + ')" title="添加下级"><i class="layui-icon layui-icon-add-1"></i></button>' +
|
|
|
+ '<button class="btn-del" onclick="event.stopPropagation(); delMenu(' + item.id + ')" title="删除"><i class="layui-icon layui-icon-delete"></i></button>' +
|
|
|
+ '</div>' +
|
|
|
+ '</div>');
|
|
|
+
|
|
|
+ container.append(node);
|
|
|
+
|
|
|
+ // 存储完整数据
|
|
|
+ node.data('menuData', item);
|
|
|
+
|
|
|
+ // 点击选中
|
|
|
+ node.on('click', function(e) {
|
|
|
+ if (!$(e.target).closest('.node-actions').length) {
|
|
|
+ selectNode($(this));
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ // 子节点
|
|
|
+ if (hasChildren) {
|
|
|
+ var childrenContainer = $('<div class="children-nodes"></div>');
|
|
|
+ container.append(childrenContainer);
|
|
|
+ renderTree(item.children, childrenContainer);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ // 获取菜单类型样式
|
|
|
+ function getMenuTypeClass(type) {
|
|
|
+ switch(type) {
|
|
|
+ case 'M': return 'directory';
|
|
|
+ case 'C': return 'menu';
|
|
|
+ case 'F': return 'button';
|
|
|
+ default: return 'menu';
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 获取菜单类型文本
|
|
|
+ function getMenuTypeText(type) {
|
|
|
+ switch(type) {
|
|
|
+ case 'M': return '目录';
|
|
|
+ case 'C': return '菜单';
|
|
|
+ case 'F': return '按钮';
|
|
|
+ default: return '未知';
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 展开/折叠节点
|
|
|
+ function toggleNode(element, event) {
|
|
|
+ event.stopPropagation();
|
|
|
+ var $this = $(element);
|
|
|
+ var $children = $this.closest('.custom-tree-node').siblings('.children-nodes');
|
|
|
+
|
|
|
+ if ($children.length > 0) {
|
|
|
+ $this.toggleClass('expanded');
|
|
|
+ $children.slideToggle(200);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 选中节点
|
|
|
+ function selectNode($node) {
|
|
|
+ $('.custom-tree-node').removeClass('active');
|
|
|
+ $node.addClass('active');
|
|
|
+
|
|
|
+ currentMenu = $node.data('menuData');
|
|
|
+ showDetail(currentMenu);
|
|
|
+ }
|
|
|
+
|
|
|
+ // 显示详情
|
|
|
+ function showDetail(menu) {
|
|
|
+ $('#detailActions').show();
|
|
|
+
|
|
|
+ var statusClass = menu.status === '1' ? 'normal' : 'disabled';
|
|
|
+ var statusText = menu.status === '1' ? '正常' : '禁用';
|
|
|
+
|
|
|
+ var typeClass = menu.menuType;
|
|
|
+ var typeText = getMenuTypeText(menu.menuType);
|
|
|
+
|
|
|
+ var html = '<div class="info-grid">' +
|
|
|
+ '<div class="info-item">' +
|
|
|
+ '<div class="info-label">菜单名称</div>' +
|
|
|
+ '<div class="info-value">' + menu.menuName + '</div>' +
|
|
|
+ '</div>' +
|
|
|
+ '<div class="info-item">' +
|
|
|
+ '<div class="info-label">菜单类型</div>' +
|
|
|
+ '<div class="info-value"><span class="menu-type-tag ' + typeClass + '">' + typeText + '</span></div>' +
|
|
|
+ '</div>' +
|
|
|
+ '<div class="info-item">' +
|
|
|
+ '<div class="info-label">菜单编码</div>' +
|
|
|
+ '<div class="info-value">' + (menu.menuCode || '无') + '</div>' +
|
|
|
+ '</div>' +
|
|
|
+ '<div class="info-item">' +
|
|
|
+ '<div class="info-label">菜单状态</div>' +
|
|
|
+ '<div class="info-value"><span class="menu-status ' + statusClass + '">' + statusText + '</span></div>' +
|
|
|
+ '</div>' +
|
|
|
+ '<div class="info-item">' +
|
|
|
+ '<div class="info-label">菜单图标</div>' +
|
|
|
+ '<div class="info-value"><i class="layui-icon ' + (menu.icon || 'layui-icon-file') + '"></i> ' + (menu.icon || '无') + '</div>' +
|
|
|
+ '</div>' +
|
|
|
+ '<div class="info-item">' +
|
|
|
+ '<div class="info-label">排序号</div>' +
|
|
|
+ '<div class="info-value">' + (menu.orderNum || 0) + '</div>' +
|
|
|
+ '</div>' +
|
|
|
+ '<div class="info-item full-width">' +
|
|
|
+ '<div class="info-label">菜单路径</div>' +
|
|
|
+ '<div class="info-value">' + (menu.menuUrl || '无') + '</div>' +
|
|
|
+ '</div>' +
|
|
|
+ '<div class="info-item full-width">' +
|
|
|
+ '<div class="info-label">组件路径</div>' +
|
|
|
+ '<div class="info-value">' + (menu.component || '无') + '</div>' +
|
|
|
+ '</div>' +
|
|
|
+ '</div>';
|
|
|
+
|
|
|
+ $('#detailContent').html(html);
|
|
|
+ }
|
|
|
+
|
|
|
+ // 搜索菜单
|
|
|
+ function filterMenu(keyword) {
|
|
|
+ if (!keyword) {
|
|
|
+ renderTree(menuData);
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ var filtered = filterTreeData(menuData, keyword);
|
|
|
+ renderTree(filtered);
|
|
|
+ }
|
|
|
+
|
|
|
+ // 过滤树形数据
|
|
|
+ function filterTreeData(data, keyword) {
|
|
|
+ var result = [];
|
|
|
+
|
|
|
+ data.forEach(function(item) {
|
|
|
+ if (item.menuName.toLowerCase().indexOf(keyword.toLowerCase()) >= 0) {
|
|
|
+ result.push(item);
|
|
|
+ } else if (item.children && item.children.length > 0) {
|
|
|
+ var filteredChildren = filterTreeData(item.children, keyword);
|
|
|
+ if (filteredChildren.length > 0) {
|
|
|
+ var newItem = $.extend({}, item);
|
|
|
+ newItem.children = filteredChildren;
|
|
|
+ result.push(newItem);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ return result;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 添加菜单
|
|
|
+ function addMenu(parentId) {
|
|
|
+ var url = parentId === 0 ? 'menu_form.html?id=' : 'menu_form.html?parentId=' + parentId;
|
|
|
+ Common.open({
|
|
|
+ title: parentId === 0 ? '添加顶级菜单' : '添加下级菜单',
|
|
|
+ area: ['600px', '550px'],
|
|
|
+ content: url,
|
|
|
+ end: function() {
|
|
|
+ loadMenuTree();
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ // 编辑菜单
|
|
|
+ function editMenu(id) {
|
|
|
+ Common.open({
|
|
|
+ title: '编辑菜单',
|
|
|
+ area: ['600px', '550px'],
|
|
|
+ content: 'menu_form.html?id=' + id,
|
|
|
+ end: function() {
|
|
|
+ loadMenuTree();
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ // 编辑当前菜单
|
|
|
+ function editCurrentMenu() {
|
|
|
+ if (currentMenu) {
|
|
|
+ editMenu(currentMenu.id);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 添加下级(当前选中)
|
|
|
+ function addChildMenu() {
|
|
|
+ if (currentMenu) {
|
|
|
+ addMenu(currentMenu.id);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 删除菜单
|
|
|
+ function delMenu(id) {
|
|
|
+ var node = $('.custom-tree-node[data-id="' + id + '"]');
|
|
|
+ var menu = node.data('menuData');
|
|
|
+
|
|
|
+ Common.confirm('确定要删除菜单 【' + menu.menuName + '】 吗?<br><span style="color: #f56c6c; font-size: 12px;">删除后将无法恢复,请谨慎操作!</span>', function() {
|
|
|
+ Common.del(Config.api.menu.remove + '/' + id, function(res) {
|
|
|
+ Common.success('删除成功', function() {
|
|
|
+ loadMenuTree();
|
|
|
+ if (currentMenu && currentMenu.id === id) {
|
|
|
+ currentMenu = null;
|
|
|
+ $('#detailActions').hide();
|
|
|
+ $('#detailContent').html('<div class="detail-empty"><i class="layui-icon layui-icon-survey"></i><p>请选择一个菜单查看详情</p></div>');
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ // 删除当前菜单
|
|
|
+ function delCurrentMenu() {
|
|
|
+ if (currentMenu) {
|
|
|
+ delMenu(currentMenu.id);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 初始化
|
|
|
+ $(function() {
|
|
|
+ loadMenuTree();
|
|
|
+ });
|
|
|
+ </script>
|
|
|
+</body>
|
|
|
+</html>
|