任何时候你都可以开始做自己想做的事

搜索|
django-simpleui使用
发布时间:2023-09-22 08:07:12

修改主题

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_HOME_ACTION = False


显示:


SIMPLEUI_HOME_ACTION = True


离线模式

SIMPLEUI_STATIC_OFFLINE = True