crm 动态一级二级菜单

2021-09-22 01:33:23

之前代码菜单是写是的

如何让他动态生成了首先添加 2个字段

admin.py 更改显示

from django.contrib import admin

from rbac import models

# Register your models here.

class PermissionAdmin(admin.ModelAdmin):

    list_display = ['url', 'title','is_menu','icon']#列表显示

    list_editable = ['title','is_menu','icon']#可编辑

admin.site.register(models.Permission, PermissionAdmin)

admin.site.register(models.Role)

admin.site.register(models.User)

然后进入 admin 把设为一级菜单的图标设置上去

auth.py 进行 mode筛选

def login(request):

    if request.method == 'POST':

        # 获取用户名和密码

        user = request.POST.get('user')

        pwd = request.POST.get('pwd')

        # 去数剧库进行筛选

        obj = models.User.objects.filter(name=user, pwd=pwd).first()

        if not obj:

            return render(request, 'login.html')

        permission_query = obj.roles.filter(permissions__url__isnull=False).values('permissions__url',

         'permissions__title','permissions__is_menu','permissions__icon').distinct()

        #通过查询到的用户的obj反查角色表,values 正向查询当前用户的权限表的url信息 title

        permission_list=[]#存放权限信息

        menu_list=[]#存放菜单信息

        for item in permission_query:

            permission_list.append({'url':item['permissions__url']})

            if item.get('permissions__is_menu'):

                menu_list.append({'url':item['permissions__url'],'icon':item['permissions__icon'],'title':item['permissions__title']})

        # print('1111',permission_query)  # <QuerySet [{'permissions__url': '/index/', 'permissions__title': '首页'}]>

        #将权限信息写入到session

        request.session[settings.PERMISSION_SESSION_KEY]=permission_list

        #将菜单 信息 写入session

        request.session[settings.MENU_SESSION_KEY]=menu_list

        request.session['is_login'] = True

        return redirect(reverse('index'))

    return render(request, 'login.html')

settings.py中定义

# 白名单

WHITE_LIST = [

    r'^/login/$',

    r'^/reg/$',

    r'^/admin/.*',

]

# 免认证的地址  需要登录 不行权限校验

NO_PERMISSION_LIST = [

    '/index/'

]

#权限信息url key

PERMISSION_SESSION_KEY='permissions'

#存放菜单信息

MENU_SESSION_KEY='menus'

更改一下 rbacapp中更改中间件中 middlewares/rbac.py 相应的值

        # 获取当前用户的权限

        permission_list = request.session[settings.PERMISSION_SESSION_KEY]

        print(permission_list)

        # 权限的校验

        for i in permission_list:

            if re.match('^{}$'.format(i['url']), url):

                return

        # 没匹配成功  没有权限

        return HttpResponse('没有访问的权限')

layout.html中跟改显示这样虽然成功了但是还是写死了menus

            <div class="static-menu">

{#                <a href="/customer/list/" class="active">#}

{#                    <span class="icon-wrap"><i class="fa fa-connectdevelop"></i></span> 客户管理</a>#}

{#                <a href="/payment/list/">#}

{#                    <span class="icon-wrap"><i class="fa fa-code-fork"></i></span> 账单管理</a>#}

                {% for item in request.session.menus %}

                    <a href="{{ item.url }}">

                    <span class="icon-wrap"><i class="fa fa-code-fork"></i></span> {{ item.title }}</a>

                {% endfor %}

            </div>

如何解决?

自定义 inclusion_tag

创建 templatetags目录 rbac.py

from django import  template

from django.conf import  settings

register=template.Library()

import re

@register.inclusion_tag('menu.html')

def menu(request):

    menu_list=request.session.get(settings.MENU_SESSION_KEY)

    for item in menu_list:

        url=item['url']

        if re.match('^{}$'.format(url),request.path_info):

            item['class']='active'

    return  {'menu_list':menu_list}

menu.html

            <div class="static-menu">

                {% for item in menu_list%}

                    <a href="{{ item.url }}" class="{{ item.class }}">

                    <span class="icon-wrap"><i class="fa fa-code-fork"></i></span> {{ item.title }}</a>

                {% endfor %}

            </div>

为了下次直接调用rbac 整合

把之前的判断 web views中的auth.py中的查询写入session部分移动到rbac/server/init_permission.py

from django.conf import settings

def init_permission(request, obj):

    permission_query = obj.roles.filter(permissions__url__isnull=False).values('permissions__url',

                                                                               'permissions__title',

                                                                               'permissions__is_menu',

                                                                               'permissions__icon').distinct()

    permission_list = []  # 存放权限

    menu_list = []  # 存放菜单信息

    for item in permission_query:

        permission_list.append({'url': item['permissions__url']})

        if item.get('permissions__is_menu'):

            menu_list.append({'url': item['permissions__url'], 'icon': item['permissions__icon'],

                              'title': item['permissions__title']})

    # 将权限写入session

    request.session[settings.PERMISSION_SESSION_KEY] = permission_list

    # 将菜单写入 session

    request.session[settings.MENU_SESSION_KEY] = menu_list

    request.session['is_login'] = True

        if not obj:

            return redirect(reverse('login'))

        # 认证成功 进行权限信息初始化（权限、菜单）

        init_permission(request, obj)

        return redirect(reverse('index'))

把 web下的 templatetags 移动到rbac app下

自定义标签inclusion

把menu.html 移动到新建templates/rbac/中

把 css部分移动到 static/css/menu.css

二级菜单调用自动生成

更改modes中的表字段添加 menu表

进入 admin 进行权限划分

更改 server permission.py

    # 权限的列表

    permission_list = []

    # 菜单的字典

    menu_dict ={}

    for i in permission_query:

        # 把权限的信息放入permission_list

        permission_list.append({'url': i['permissions__url']})

        menu_id = i.get('permissions__menu_id')

        if not menu_id:

            continue

        menu_dict.setdefault(menu_id, {

            'title': i['permissions__menu__title'],

            'icon': i['permissions__menu__icon'],

            'children': [

            ]

        })

        menu_dict[menu_id]['children'].append({'title': i['permissions__title'], 'url': i['permissions__url']})

from django import template

from django.conf import settings

import re

register = template.Library()

@register.inclusion_tag('rbac/menu.html')

def menu(request):

    menu_dict = request.session[settings.MENU_SESSION_KEY]

    return {'menu_list': menu_dict.values()}

rbac/static/rbac/css/menu.css

.left-menu .menu-body .static-menu {

}

.left-menu .menu-body .static-menu .icon-wrap {

    width: 20px;

    display: inline-block;

    text-align: center;

}

.left-menu .menu-body .static-menu a {

    text-decoration: none;

    padding: 8px 15px;

    border-bottom: 1px solid #ccc;

    color: #333;

    display: block;

    background: #efefef;

    background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #efefef), color-stop(1, #fafafa));

    background: -ms-linear-gradient(bottom, #efefef, #fafafa);

    background: -moz-linear-gradient(center bottom, #efefef 0%, #fafafa 100%);

    background: -o-linear-gradient(bottom, #efefef, #fafafa);

    filter: progid:dximagetransform.microsoft.gradient(startColorStr='#e3e3e3', EndColorStr='#ffffff');

    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#fafafa',EndColorStr='#efefef')";

    box-shadow: inset 0px 1px 1px white;

}

.left-menu .menu-body .static-menu a:hover {

    color: #2F72AB;

    border-left: 2px solid #2F72AB;

}

.left-menu .menu-body .static-menu a.active {

    color: #2F72AB;

    border-left: 2px solid #2F72AB;

}

.multi-menu .item {

    background-color: white;

}

.multi-menu .item > .title {

    padding: 10px 5px;

    border-bottom: 1px solid #dddddd;

    cursor: pointer;

    color: #333;

    display: block;

    background: #efefef;

    background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #efefef), color-stop(1, #fafafa));

    background: -ms-linear-gradient(bottom, #efefef, #fafafa);

    background: -o-linear-gradient(bottom, #efefef, #fafafa);

    filter: progid:dximagetransform.microsoft.gradient(startColorStr='#e3e3e3', EndColorStr='#ffffff');

    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#fafafa',EndColorStr='#efefef')";

    box-shadow: inset 0 1px 1px white;

}

.multi-menu .item > .body {

    border-bottom: 1px solid #dddddd;

}

.multi-menu .item > .body a {

    display: block;

    padding: 5px 20px;

    text-decoration: none;

    border-left: 2px solid transparent;

    font-size: 13px;

}

.multi-menu .item > .body a:hover {

    border-left: 2px solid #2F72AB;

}

.multi-menu .item > .body a.active {

    border-left: 2px solid #2F72AB;

}

<div class="multi-menu">

    {% for menu in menu_list %}

        <div class="item">

            <div class="title"> <i class="fa {{ menu.icon }}"></i>  {{ menu.title }}</div>

            <div class="body">

                {% for child in menu.children %}

                    <a href="{{ child.url }}"> {{ child.title }} </a>

                {% endfor %}

            </div>

        </div>

    {% endfor %}

</div>

layout.html应用上

{% load staticfiles %}

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>路飞学城</title>

    <link rel="shortcut icon" href="{% static 'imgs/luffy-study-logo.png' %} ">

    <link rel="stylesheet" href="{% static 'plugins/bootstrap/css/bootstrap.css' %} "/>

    <link rel="stylesheet" href="{% static 'plugins/font-awesome/css/font-awesome.css' %} "/>

    <link rel="stylesheet" href="{% static 'css/commons.css' %} "/>

    <link rel="stylesheet" href="{% static 'css/nav.css' %} "/>

    <link rel="stylesheet" href="{% static 'rbac/css/menu.css' %} "/>

    <style>

        body {

            margin: 0;

        }

        .no-radius {

            border-radius: 0;

        }

        .no-margin {

            margin: 0;

        }

        .pg-body > .left-menu {

            background-color: #EAEDF1;

            position: absolute;

            left: 1px;

            top: 48px;

            bottom: 0;

            width: 220px;

            border: 1px solid #EAEDF1;

            overflow: auto;

        }

        .pg-body > .right-body {

            position: absolute;

            left: 225px;

            right: 0;

            top: 48px;

            bottom: 0;

            overflow: scroll;

            border: 1px solid #ddd;

            border-top: 0;

            font-size: 13px;

            min-width: 755px;

        }

        .navbar-right {

            float: right !important;

            margin-right: -15px;

        }

        .luffy-container {

            padding: 15px;

        }

    </style>

</head>

<body>

<div class="pg-header">

    <div class="nav">

        <div class="logo-area left">

            <a href="#">

                <img class="logo" src="{% static 'imgs/logo.svg' %}">

                <span style="font-size: 18px;">路飞学城 </span>

            </a>

        </div>

        <div class="left-menu left">

            <a class="menu-item">资产管理</a>

            <a class="menu-item">用户信息</a>

            <a class="menu-item">路飞管理</a>

            <div class="menu-item">

                <span>使用说明</span>

                <i class="fa fa-caret-down" aria-hidden="true"></i>

                <div class="more-info">

                    <a href="#" class="more-item">管他什么菜单</a>

                    <a href="#" class="more-item">实在是编不了</a>

                </div>

            </div>

        </div>

        <div class="right-menu right clearfix">

            <div class="user-info right">

                <a href="#" class="avatar">

                    <img class="img-circle" src="{% static 'imgs/default.png' %}">

                </a>

                <div class="more-info">

                    <a href="#" class="more-item">个人信息</a>

                    <a href="#" class="more-item">注销</a>

                </div>

            </div>

            <a class="user-menu right">

                消息

                <i class="fa fa-commenting-o" aria-hidden="true"></i>

                <span class="badge bg-success">2</span>

            </a>

            <a class="user-menu right">

                通知

                <i class="fa fa-envelope-o" aria-hidden="true"></i>

                <span class="badge bg-success">2</span>

            </a>

            <a class="user-menu right">

                任务

                <i class="fa fa-bell-o" aria-hidden="true"></i>

                <span class="badge bg-danger">4</span>

            </a>

        </div>

    </div>

</div>

<div class="pg-body">

    <div class="left-menu">

        <div class="menu-body">

            {#                <a href="/customer/list/" class="active">#}

            {#                    <span class="icon-wrap"><i class="fa fa-connectdevelop"></i></span> 客户管理</a>#}

            {#                <a href="/payment/list/">#}

            {#                    <span class="icon-wrap"><i class="fa fa-code-fork"></i></span> 账单管理</a>#}

            {% load rbac %}

            {% menu request %}

        </div>

    </div>

    <div class="right-body">

        <div>

            <ol class="breadcrumb no-radius no-margin" style="border-bottom: 1px solid #ddd;">

                <li><a href="#">首页</a></li>

                <li class="active">客户管理</li>

            </ol>

        </div>

        {% block content %} {% endblock %}

    </div>

</div>

<script src="{% static 'js/jquery-3.3.1.min.js' %} "></script>

<script src="{% static 'plugins/bootstrap/js/bootstrap.js' %} "></script>

<script>

    $('.multi-menu .title').click(function () {

        $(this).next().toggleClass('hide')

    })

</script>

{% block js %} {% endblock %}

</body>

</html>

码农公寓

相关文章