django-simpleui使用
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_HOME_ACTION = False
显示：
SIMPLEUI_HOME_ACTION = True
离线模式
SIMPLEUI_STATIC_OFFLINE = True
