django-simpleui使用-526互联

django-simpleui使用

安装

pip install django-simpleui

豆瓣：http://pypi.douban.com/simple/
中科大：https://pypi.mirrors.ustc.edu.cn/simple/
清华：https://pypi.tuna.tsinghua.edu.cn/simple/

settings配置

INSTALLED_APPS = [
    'simpleui',
]

升级simpleui

pip install django-simpleui --upgrade

修改主题

SIMPLEUI_DEFAULT_THEME = 'admin.lte.css'#默认的==》有Simpleui-x，layui等

图标

SIMPLEUI_DEFAULT_ICON = False

True	开启默认图标，默认为True
False	关闭默认图标


#自定义图标
SIMPLEUI_ICON = {
    '系统管理': 'fab fa-apple',
    '员工管理': 'fas fa-user-tie'
}

菜单

system_keep 保留系统菜单   默认为False，不保留。 如果改为True，自定义和系统菜单将会并存
menu_display 过滤显示菜单和排序功能
dynamic 开启动态菜单功能

例子

import time
SIMPLEUI_CONFIG = {
    'system_keep': False,
    'menu_display': ['Simpleui', '测试', '权限认证', '动态菜单测试'],      # 开启排序和过滤功能, 不填此字段为默认排序和全部显示, 空列表[] 为全部不显示.
    'dynamic': True,    # 设置是否开启动态菜单, 默认为False. 如果开启, 则会在每次用户登陆时动态展示菜单内容
    'menus': [{
        'name': 'Simpleui',
        'icon': 'fas fa-code',
        'url': 'https://gitee.com/tompeppa/simpleui',
        # 浏览器新标签中打开
        'newTab': True,
    }, {
        'app': 'auth',
        'name': '权限认证',
        'icon': 'fas fa-user-shield',
        'models': [{
            'name': '用户',
            'icon': 'fa fa-user',
            'url': 'auth/user/'
        }]
    }, {
        # 自2021.02.01+ 支持多级菜单，models 为子菜单名
        'name': '多级菜单测试',
        'icon': 'fa fa-file',
      	# 二级菜单
        'models': [{
            'name': 'Baidu',
            'icon': 'far fa-surprise',
            # 第三级菜单 ，
            'models': [
                {
                  'name': '爱奇艺',
                  'url': 'https://www.iqiyi.com/dianshiju/'
                  # 第四级就不支持了，element只支持了3级
                }, {
                    'name': '百度问答',
                    'icon': 'far fa-surprise',
                    'url': 'https://zhidao.baidu.com/'
                }
            ]
        }, {
            'name': '内网穿透',
            'url': 'https://www.wezoz.com',
            'icon': 'fab fa-github'
        }]
    }, {
        'name': '动态菜单测试' ,
        'icon': 'fa fa-desktop',
        'models': [{
            'name': time.time(),
            'url': 'http://baidu.com',
            'icon': 'far fa-surprise'
        }]
    }]
}

模板

修改模板修改模板

重写首页，在templates目录中新建admin文件夹，然后添加index.html 如果选择继承方式，就只能采用block

 {% extends 'admin/index.html' %}
    {% load static %}

    {% block head %}
        {{ block.super }}
        ..此处写你的代码
    {% endblock %}

    {% block script %}
        {{ block.super }}
        ..此处写你的代码
    {% endblock %}

全部重写

<html>
    <head>
        <title>完全自定义</title>
    </head>
    <body>
        这里你是自定义的html代码
    </body>
</html>

头部添加自定义代码

   {% extends 'admin/index.html' %}
    {% load static %}

    {% block head %}
        {{ block.super }}
        ..此处写你的代码
    {% endblock %}

底部添加自定义代码

    {% extends 'admin/index.html' %}
    {% load static %}

    {% block script %}
        {{ block.super }}
        ..此处写你的代码
    {% endblock %}

自定义按钮

 @admin.register(Employe)
class EmployeAdmin(admin.ModelAdmin):
    list_display = ('id', 'name', 'gender')
   
    # 增加自定义按钮
    actions = ['make_copy', 'custom_button']

    def custom_button(self, request, queryset):
        pass

    # 显示的文本，与django admin一致
    custom_button.short_description = '测试按钮'
    # icon，参考element-ui icon与https://fontawesome.com
    custom_button.icon = 'fas fa-audio-description'

    # 指定element-ui的按钮类型，参考https://element.eleme.cn/#/zh-CN/component/button
    custom_button.type = 'danger'

    # 给按钮追加自定义的颜色
    custom_button.style = 'color:black;'

    def make_copy(self, request, queryset):
        pass
    make_copy.short_description = '复制员工'

字段参数

字段	说明
icon	按钮图标，参考https://element.eleme.cn/#/zh-CN/component/icon与https://fontawesome.com，把class 复制进来即可
type	按钮类型，参考：https://element.eleme.cn/#/zh-CN/component/button
style	自定义css样式
confirm	弹出确认框，在3.4或以上版本中生效

def message_test(self, request, queryset):
        messages.add_message(request, messages.SUCCESS, '操作成功123123123123')
        
    # 给按钮增加确认
    message_test.confirm = '你是否执意要点击这个按钮？'

链接按钮

action_type	按钮动作类型，0=当前页内打开，1=新tab打开，2=浏览器tab打开
action_url	按钮访问链接

# 增加自定义按钮
    actions = ['custom_button']

    def custom_button(self, request, queryset):
        pass

    # 显示的文本，与django admin一致
    custom_button.short_description = '测试按钮'
    # icon，参考element-ui icon与https://fontawesome.com
    custom_button.icon = 'fas fa-audio-description'

    # 指定element-ui的按钮类型，参考https://element.eleme.cn/#/zh-CN/component/button
    custom_button.type = 'danger'

    # 给按钮追加自定义的颜色
    custom_button.style = 'color:black;'

    # 链接按钮，设置之后直接访问该链接
    # 3中打开方式
    # action_type 0=当前页内打开，1=新tab打开，2=浏览器tab打开
    # 设置了action_type，不设置url，页面内将报错
    # 设置成链接类型的按钮后，custom_button方法将不会执行。

    custom_button.action_type = 0
    custom_button.action_url = 'http://www.baidu.com'

layer对话框按钮

#对话框按钮是在admin中进行配置action，可以自定义输入的字段，然后通过ajax请求到action中进行业务的处理。

#需要继承AjaxAdmin 在from simpleui.admin import AjaxAdmin包中simplepro也会同步支持对话框按钮功能

字段说明

下列字段是指action的layer属性

字段	说明
title	对话框标题
tips	对话框提示
confirm_button	确认按钮文本
cancel_button	取消按钮文本
width	对话框宽度，百分比，例如：50%
labelWidth	表格的label宽度，例如：80px
params	对话框表格中的字段，array

params字段

字段	说明
type	类型，取值为：input原生属性，和elementui的：select、date、datetime、rate、color、slider、switch、input_number、checkbox、radio
key	参数名，post参数中获取的名称
value	默认值，数组或文本
label	字段在表格中显示的名称
size	组件的大小，取值为：medium / small / mini
require	是否必选，取值为：True/False
width	输入框宽度，例如：200px
options	选项，数组，type为select、checkbox、radio的时候可用

字段options字段

字段	说明
key	值
label	显示文本

例子

class RecordAdmin(ImportExportActionModelAdmin, AjaxAdmin):
    resource_class = ProxyResource

    list_display = ('id', 'name', 'type', 'money', 'create_date')
    list_per_page = 10

    actions = ('layer_input',)

    def layer_input(self, request, queryset):
        # 这里的queryset 会有数据过滤，只包含选中的数据

        post = request.POST
        # 这里获取到数据后，可以做些业务处理
        # post中的_action 是方法名
        # post中 _selected 是选中的数据，逗号分割
        if not post.get('_selected'):
            return JsonResponse(data={
                'status': 'error',
                'msg': '请先选中数据！'
            })
        else:
            return JsonResponse(data={
                'status': 'success',
                'msg': '处理成功！'
            })

    layer_input.short_description = '弹出对话框输入'
    layer_input.type = 'success'
    layer_input.icon = 'el-icon-s-promotion'

    # 指定一个输入参数，应该是一个数组

    # 指定为弹出层，这个参数最关键
    layer_input.layer = {
        # 弹出层中的输入框配置

        # 这里指定对话框的标题
        'title': '弹出层输入框',
        # 提示信息
        'tips': '这个弹出对话框是需要在admin中进行定义，数据新增编辑等功能，需要自己来实现。',
        # 确认按钮显示文本
        'confirm_button': '确认提交',
        # 取消按钮显示文本
        'cancel_button': '取消',

        # 弹出层对话框的宽度，默认50%
        'width': '40%',

        # 表单中 label的宽度，对应element-ui的 label-width，默认80px
        'labelWidth': "80px",
        'params': [{
            # 这里的type 对应el-input的原生input属性，默认为input
            'type': 'input',
            # key 对应post参数中的key
            'key': 'name',
            # 显示的文本
            'label': '名称',
            # 为空校验，默认为False
            'require': True
        }, {
            'type': 'select',
            'key': 'type',
            'label': '类型',
            'width': '200px',
            # size对应elementui的size，取值为：medium / small / mini
            'size': 'small',
            # value字段可以指定默认值
            'value': '0',
            'options': [{
                'key': '0',
                'label': '收入'
            }, {
                'key': '1',
                'label': '支出'
            }]
        }, {
            'type': 'number',
            'key': 'money',
            'label': '金额',
            # 设置默认值
            'value': 1000
        }, {
            'type': 'date',
            'key': 'date',
            'label': '日期',
        }, {
            'type': 'datetime',
            'key': 'datetime',
            'label': '时间',
        }, {
            'type': 'rate',
            'key': 'star',
            'label': '评价等级'
        }, {
            'type': 'color',
            'key': 'color',
            'label': '颜色'
        }, {
            'type': 'slider',
            'key': 'slider',
            'label': '滑块'
        }, {
            'type': 'switch',
            'key': 'switch',
            'label': 'switch开关'
        }, {
            'type': 'input_number',
            'key': 'input_number',
            'label': 'input number'
        }, {
            'type': 'checkbox',
            'key': 'checkbox',
            # 必须指定默认值
            'value': [],
            'label': '复选框',
            'options': [{
                'key': '0',
                'label': '收入'
            }]
        }]
    }

action 返回结果

{
    'status': 'error',
    'msg': '请先选中数据！'
}

layer 文件上传

@admin.register(Layer)
class LayerAdmin(AjaxAdmin):
    actions = ('upload_file',)

    def upload_file(self, request, queryset):
        # 这里的upload 就是和params中配置的key一样
        upload= request.FILES['upload']
        print(upload)
        pass

    upload_file.short_description = '文件上传对话框'
    upload_file.type = 'success'
    upload_file.icon = 'el-icon-upload'
    upload_file.enable = True

    upload_file.layer = {
        'params': [{
            'type': 'file',
            'key': 'upload',
            'label': '文件'
        }]
    }

关闭登录动画

SIMPLEUI_LOGIN_PARTICLES = False

首页-修改默认

首页配置
SIMPLEUI_HOME_PAGE = 'https://www.baidu.com'

首页标题
SIMPLEUI_HOME_TITLE = '百度一下你就知道'

首页图标,支持element-ui和fontawesome的图标，参考https://fontawesome.com/icons图标
SIMPLEUI_HOME_ICON = 'fa fa-user'

首页-跳转地址

# 设置simpleui 点击首页图标跳转的地址
SIMPLEUI_INDEX = 'https://www.baidu.com'

修改LOGO

SIMPLEUI_LOGO = 'https://avatars2.githubusercontent.com/u/13655483?s=60&v=4'

服务器信息

隐藏：

SIMPLEUI_HOME_INFO = False

显示：

SIMPLEUI_HOME_INFO = True

快速操作

隐藏：

SIMPLEUI_HOME_QUICK = False

显示：

SIMPLEUI_HOME_QUICK = True

离线模式

SIMPLEUI_STATIC_OFFLINE = True

django-simpleui

simpleui

django

django-simpleui simpleui django

django-simpleui

django-simpleui simpleui菜单权限

django-jwt源码simpleui权限

simpleui django admin

526互联

django-simpleui使用

django-simpleui使用

安装

settings配置

升级simpleui

修改主题

图标

菜单

模板

修改模板修改模板

全部重写

头部添加自定义代码

底部添加自定义代码

自定义按钮

字段参数

字段说明

params字段

字段options字段

action 返回结果

layer 文件上传

关闭登录动画

首页-修改默认

首页-跳转地址

修改LOGO

服务器信息

快速操作

最近动作

离线模式