root
/
Pear-Admin-Layui
mirror of https://gitee.com/zhang_1334717033/Pear-Admin-Layui
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

version to 3.6.7.release

develop
就眠仪式 2021-03-13 21:42:53 +08:00
parent 89768dff0d
commit 3ab830bc2b
12 changed files with 533 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

88
admin/data/message.json Normal file
View File

@ -0,0 +1,88 @@
[{
"id": 1,
"title": "私信",
"children": [{
"id": 11,
"avatar":"admin/images/avatar.jpg",
"title": "收到一条私人消息",
"context": "这是消息内容。",
"form": "就眠仪式",
"time": "2019-02-15"
}, {
"id": 12,
"avatar":"admin/images/avatar.jpg",
"title": "收到一条私人消息",
"context": "这是消息内容。",
"form": "就眠仪式",
"time": "2019-02-15"
}]
},
{
"id": 2,
"title": "消息",
"children": [{
"id": 11,
"avatar":"admin/images/avatar.jpg",
"title": "收到一条紧急任务",
"context": "这是消息内容。",
"form": "就眠仪式",
"time": "2019-02-15"
}, {
"id": 12,
"avatar":"admin/images/avatar.jpg",
"title": "收到一条紧急任务",
"context": "这是消息内容。",
"form": "就眠仪式",
"time": "2019-02-15"
},
{
"id": 11,
"avatar":"admin/images/avatar.jpg",
"title": "收到一条紧急任务",
"context": "这是消息内容。",
"form": "就眠仪式",
"time": "2019-02-15"
}, {
"id": 12,
"avatar":"admin/images/avatar.jpg",
"title": "收到一条紧急任务",
"context": "这是消息内容。",
"form": "就眠仪式",
"time": "2019-02-15"
},
{
"id": 11,
"avatar":"admin/images/avatar.jpg",
"title": "收到一条紧急任务",
"context": "这是消息内容。",
"form": "就眠仪式",
"time": "2019-02-15"
}, {
"id": 12,
"avatar":"admin/images/avatar.jpg",
"title": "收到一条紧急任务",
"context": "这是消息内容。",
"form": "就眠仪式",
"time": "2019-02-15"
}]
},
{
"id": 3,
"title": "通知",
"children": [{
"id": 11,
"avatar":"admin/images/avatar.jpg",
"title": "收到一条警告通知",
"context": "这是消息内容。",
"form": "就眠仪式",
"time": "2019-02-15"
}, {
"id": 12,
"avatar":"admin/images/avatar.jpg",
"title": "收到一条警告通知",
"context": "这是消息内容。",
"form": "就眠仪式",
"time": "2019-02-15"
}]
}
]

46
component/pear/css/pear-module/message.css Normal file
View File

@ -0,0 +1,46 @@
.pear-notice .layui-this {
color: #5FB878 !important;
}
.pear-notice li {
border-right: 1px solid whitesmoke;
}
.pear-notice * {
color: dimgray !important;
}
.pear-notice{
width: 285px!important;
}
.pear-notice span{
margin-left: 20px;
font-size: 13px;
}
.pear-notice img{
margin-left: 8px;
width: 33px!important;
height: 33px!important;
border-radius: 50px;
}
.pear-notice-item{
height: 45px!important;
line-height: 45px!important;
}
.pear-notice .layui-tab-title{
border: whitesmoke;
}
/** 滚动条样式 */
.pear-notice *::-webkit-scrollbar{width:0px;height:0px;}
.pear-notice *::-webkit-scrollbar-track{background: white;border-radius:2px;}
.pear-notice *::-webkit-scrollbar-thumb{background: #E6E6E6;border-radius:2px;}
.pear-notice *::-webkit-scrollbar-thumb:hover{background: #E6E6E6;}
.pear-notice *::-webkit-scrollbar-corner{background: #f6f6f6;}

10
component/pear/css/pear-module/topBar.css
View File

@ -1,5 +1,5 @@
.layui-fixbar li{
border-radius: 4px;
background-color: #5FB878;
color: white;
}
.layui-fixbar li {
border-radius: 4px;
background-color: #5FB878;
color: white;
}

5
component/pear/css/pear.all.css
View File

@ -6,6 +6,8 @@
@import url("pear-module/iconPicker.css");
@import url("pear-module/treetable.css");
@import url("pear-module/dropdown.css");
@import url("pear-module/message.css");
@import url("pear-module/cropper.css");
@import url("pear-module/loading.css");
@import url("pear-module/topBar.css");
@import url("pear-module/select.css");
@ -24,5 +26,4 @@
@import url("pear-module/step.css");
@import url("pear-module/card.css");
@import url("pear-module/tab.css");
@import url("pear-module/tag.css");
@import url("pear-module/cropper.css");
@import url("pear-module/tag.css");

5
component/pear/css/pear.css
View File

@ -6,6 +6,8 @@
@import url("pear-module/iconPicker.css");
@import url("pear-module/treetable.css");
@import url("pear-module/dropdown.css");
@import url("pear-module/message.css");
@import url("pear-module/cropper.css");
@import url("pear-module/loading.css");
@import url("pear-module/topBar.css");
@import url("pear-module/select.css");
@ -24,5 +26,4 @@
@import url("pear-module/step.css");
@import url("pear-module/card.css");
@import url("pear-module/tab.css");
@import url("pear-module/tag.css");
@import url("pear-module/cropper.css");
@import url("pear-module/tag.css");

45
component/pear/modules/admin.js
View File

@ -1,4 +1,4 @@
layui.define(['table', 'jquery', 'element', 'yaml', 'form', 'tab', 'menu', 'frame', 'theme', 'convert'],
layui.define(['message', 'table', 'jquery', 'element', 'yaml', 'form', 'tab', 'menu', 'frame', 'theme', 'convert'],
function(exports) {
"use strict";
@ -10,13 +10,15 @@ layui.define(['table', 'jquery', 'element', 'yaml', 'form', 'tab', 'menu', 'fram
convert = layui.convert,
pearMenu = layui.menu,
pearFrame = layui.frame,
pearTheme = layui.theme;
pearTheme = layui.theme,
message = layui.message;
let bodyFrame;
let sideMenu;
let bodyTab;
let config;
let logout = function() {};
let msgInstance;
const body = $('body');
@ -69,6 +71,15 @@ layui.define(['table', 'jquery', 'element', 'yaml', 'form', 'tab', 'menu', 'fram
}
}
this.messageRender = function(option) {
var option = {
elem: '.message',
url: option.header.message,
height: '250px'
};
msgInstance = message.render(option);
}
this.logoRender = function(param) {
$(".layui-logo .logo").attr("src", param.logo.image);
$(".layui-logo .title").html(param.logo.title);
@ -214,11 +225,36 @@ layui.define(['table', 'jquery', 'element', 'yaml', 'form', 'tab', 'menu', 'fram
}
this.logout = function(callback) {
logout = callback;
}
this.message = function(callback) {
if(callback!=null){
msgInstance.click(callback);
}else{
msgInstance.click(messageTip);
}
}
};
var messageTip = function(id, title, context, form) {
layer.open({
type: 1,
title: '消息', //标题
area: ['390px', '330px'], //宽高
shade: 0.4, //遮罩透明度
content: "<div style='background-color:whitesmoke;'><div class='layui-card'><div class='layui-card-body'>来源 : &nbsp; " +
form + "</div><div class='layui-card-header' >标题 : &nbsp; " + title +
"</div><div class='layui-card-body' >内容 : &nbsp; " + context + "</div></div></div>", //支持获取DOM元素
btn: ['确认'], //按钮组
scrollbar: false, //屏蔽浏览器滚动条
yes: function(index) { //layer.msg('yes'); //点击确定回调
layer.close(index);
showToast();
}
});
}
function collaspe() {
sideMenu.collaspe();
const admin = $(".pear-admin");
@ -379,6 +415,9 @@ layui.define(['table', 'jquery', 'element', 'yaml', 'form', 'tab', 'menu', 'fram
pearAdmin.bodyRender(param);
pearAdmin.themeRender(param);
pearAdmin.keepLoad(param);
if(param.header.message!=false){
pearAdmin.messageRender(param);
}
}
function getColorById(id) {

214
component/pear/modules/autocomplete.js Normal file
View File

@ -0,0 +1,214 @@
layui.define(['jquery', 'laytpl', 'layer'], function(e) {
"use strict";
var hint = layui.hint(),
$ = layui.jquery,
laytpl = layui.laytpl,
layer = layui.layer,
module = 'autocomplete',
filter = 'layui-autocomplete',
container = 'layui-form-autocomplete',
container_focus = 'layui-form-autocomplete-focus',
system = {
config: {
template: ['<div class="layui-form-autocomplete">', '<dl class="layui-anim layui-anim-upbit">', '</dl>', '</div>']
.join(''),
layout: ['<dd data-index="{{d.index}}">{{d.text}}</dd>'].join(''),
template_txt: '{{d.text}}',
template_val: '{{d.value}}',
cache: false
},
data: {}
},
callback = function() {
var _self = this,
_config = _self.config;
return {
call: function(handle, params) {
if (!_self.handles[handle]) return hint.error(handle + " handle is not defined");
_self.handles[handle].call(_self, params)
}
}
},
job = function(e) {
var _self = this;
_self.config = $.extend({}, _self.config, system.config, e);
_self.render();
};
job.prototype.config = {
response: {
code: 'code',
data: 'data',
msg: 'msg'
},
request: {
keywords: 'keywords'
},
statusCode: 0,
time_limit: 300,
pullTimer: null,
data: {},
temp_data: {},
params: {},
filter: '',
method: 'get',
ajaxParams: {}
}
job.prototype.render = function() {
var _self = this,
_config = _self.config;
if (_config.elem = $(_config.elem), _config.where = _config.where || {}, !_config.elem[0]) return _self;
var _elem = _config.elem,
_container = _elem.next('.' + container),
_html = _self.elem = $(laytpl(_config.template).render({}));
_config.id = _self.id, _container && _container.remove(), _elem.attr('autocomplete', 'off'), _elem.after(_html);
_self.events()
}
job.prototype.pullData = function() {
var _self = this,
_config = _self.config,
_elem = _config.elem,
_container = _elem.next('.' + container);
if (!_config.filter) return _self.renderData([]);
if ((_config.cache || !_config.url) && _config.data instanceof Object && Object.keys(_config.data).length > 0)
return _self.renderData(_config.data);
var keywords = _config.request.keywords
var params = {
t: new Date().getTime()
}
params[keywords] = _config.filter;
var $loading = $('<i class="layui-icon layui-icon-loading layui-anim layui-anim-rotate layui-anim-loop"></i>');
$.ajax($.extend({
type: _config.method,
url: _config.url,
data: $.extend(params, _config.params instanceof Function ? _config.params() : _config.params),
contentType: 'text/json,charset=utf-8',
dataType: "json",
beforeSend: function() {
$loading.attr('style', [
'position:absolute',
'left:' + (_elem.offset().left + _elem.outerWidth() - 20) + 'px',
'top:' + _elem.offset().top + 'px',
'height:' + _elem.height() + 'px',
'line-height:' + _elem.height() + 'px'
].join(';'));
$loading.appendTo('body');
},
success: function(resp) {
$loading.remove();
return _config.statusCode != resp[_config.response.code] ? layer.msg(resp[_config.response.msg]) : _config.data =
resp[_config.response.data], _self.renderData(_config.data)
},
error: function() {
hint.error("请求失败")
}
}, _config.ajaxParams))
}
job.prototype.renderData = function(resp) {
var _self = this,
_config = _self.config,
_elem = _config.elem,
_container = _elem.next('.' + container),
_dom = _container.find('dl'),
_list = [];
_config.temp_data = [];
layui.each(resp, function(i, e) {
if (_config.cache) {
if (e instanceof Object) {
layui.each(e, function(_i, _e) {
if (_e && _e.toString().toLowerCase().indexOf(_config.filter.toLowerCase()) > -1) {
_config.temp_data.push(e), _list.push(laytpl(_config.layout).render({
index: i,
text: laytpl(_config.template_txt).render(e)
}));
return true;
}
});
} else {
if (e && e.toString().toLowerCase().indexOf(_config.filter.toLowerCase()) > -1) {
_config.temp_data.push(e), _list.push(laytpl(_config.layout).render({
index: i,
text: laytpl(_config.template_txt).render(e)
}));
}
}
} else {
_config.temp_data.push(e), _list.push(laytpl(_config.layout).render({
index: i,
text: laytpl(_config.template_txt).render(e)
}));
}
});
_dom.html(_list.join('')), _list.length > 0 ? _container.addClass(container_focus) : _container.removeClass(
container_focus)
}
job.prototype.handles = {
addData: function(data) {
var _self = this,
_config = _self.config;
if (data instanceof Array) {
_config.data = _config.data.concat(data)
} else {
_config.data.push(data)
}
},
setData: function(data) {
var _self = this,
_config = _self.config;
_config.data = data;
}
}
job.prototype.events = function() {
var _self = this,
_config = _self.config,
_elem = _config.elem,
_container = _elem.next('.' + container),
_dom = _container.find('dl');
_elem.unbind('focus').unbind('input propertychange').on('focus', function() {
_config.filter = this.value, _self.renderData(_config.data)
}).on('input propertychange', function(e) {
var _value = this.value;
clearTimeout(_config.pullTimer), _config.pullTimer = setTimeout(function() {
_config.filter = _value, _self.pullData()
}, _config.time_limit)
})
$(document).on('click', function(e) {
var _target = e.target,
_item = _dom.find(_target),
_e = _item.length > 0 ? _item.closest('dd') : undefined;
if (_target === _elem[0]) return false;
if (_e !== undefined) {
if (_e.attr('autocomplete-load') !== undefined) return false;
var curr_data = _config.temp_data[_e.index()]
_elem.val(laytpl(_config.template_val).render(curr_data)), _config.onselect == undefined || _config.onselect(
curr_data)
}
_container.removeClass(container_focus);
})
}
system.init = function(e, c) {
var c = c || {},
_self = this,
_elems = $(e ? 'input[lay-filter="' + e + '"]' : 'input[' + filter + ']');
_elems.each(function(_i, _e) {
var _elem = $(_e),
_lay_data = _elem.attr('lay-data');
try {
_lay_data = new Function("return " + _lay_data)()
} catch (ex) {
return hint.error("autocomplete元素属性lay-data配置项存在语法错误：" + _lay_data)
}
var _config = $.extend({
elem: this
}, system.config, c, _lay_data);
_config.url == undefined && (_config.data == undefined || _config.length === 0) && hint.error(
"autocomplete配置有误，缺少获取数据方式");
system.render(_config);
})
}
system.render = function(e) {
var j = new job(e);
return callback.call(j)
}
system.init(), e(module, system);
})

115
component/pear/modules/message.js Normal file
View File

@ -0,0 +1,115 @@
layui.define(['table', 'jquery', 'element'], function(exports) {
"use strict";
var MOD_NAME = 'message',
$ = layui.jquery,
element = layui.element;
var message = function(opt) {
this.option = opt;
};
message.prototype.render = function(opt) {
//默认配置值
var option = {
elem: opt.elem,
url: opt.url ? opt.url : false,
height: opt.height,
data: opt.data
}
if (option.url != false) {
option.data = getData(option.url);
var notice = createHtml(option);
$(option.elem).html(notice);
}
return new message(option);
}
message.prototype.click = function(callback){
$("*[notice-id]").click(function(event) {
event.preventDefault();
var id = $(this).attr("notice-id");
var title = $(this).attr("notice-title");
var context = $(this).attr("notice-context");
var form = $(this).attr("notice-form");
callback(id, title, context, form);
})
}
/** 同 步 请 求 获 取 数 据 */
function getData(url) {
$.ajaxSettings.async = false;
var data = null;
$.get(url, function(result) {
data = result;
});
$.ajaxSettings.async = true;
return data;
}
function createHtml(option) {
var notice = '<li class="layui-nav-item" lay-unselect="">' +
'<a href="#" class="notice layui-icon layui-icon-notice"><span class="layui-badge-dot"></span></a>' +
'<div class="layui-nav-child layui-tab pear-notice" style="left: -200px;">';
var noticeTitle = '<ul class="layui-tab-title">';
var noticeContent = '<div class="layui-tab-content" style="height:' + option.height + ';overflow-x: hidden;">'
var index = 0;
// 根据 data 便利数据
$.each(option.data, function(i, item) {
if (index === 0) {
noticeTitle += '<li class="layui-this">' + item.title + '</li>';
noticeContent += '<div class="layui-tab-item layui-show">';
} else {
noticeTitle += '<li>' + item.title + '</li>';
noticeContent += '<div class="layui-tab-item">';
}
$.each(item.children, function(i, note) {
noticeContent += '<div class="pear-notice-item" notice-form="' + note.form + '" notice-context="' + note.context +
'" notice-title="' + note.title + '" notice-id="' + note.id + '">' +
'<img src="' + note.avatar + '">' +
'<span>' + note.title + '</span>' +
'<span>' + note.time + '</span>' +
'</div>';
})
noticeContent += '</div>';
index++;
})
noticeTitle += '</ul>';
noticeContent += '</div>';
notice += noticeTitle;
notice += noticeContent;
notice += '</div></li>';
return notice;
}
exports(MOD_NAME, new message());
})

6
component/pear/pear.all.js
View File

@ -11,7 +11,7 @@ window.rootPath = (function(src) {
* */
layui.config({
base: rootPath + "modules/",
version: "3.5.6.Release"
version: "3.6.7.Release"
}).extend({
admin: "admin", // 框架布局组件
menu: "menu", // 数据菜单组件
@ -43,8 +43,8 @@ layui.config({
yaml:"yaml", // yaml 解析组件
context: "context", // 上下文组件
http: "http", // ajax请求组件
theme: "theme" // 主题转换
theme: "theme", // 主题转换
message: "message" // 通知组件
}).use(['layer', 'theme'], function () {
layui.theme.changeTheme(window, false);
});

3
component/pear/pear.js
View File

@ -11,7 +11,7 @@ window.rootPath = (function(src) {
* */
layui.config({
base: rootPath + "modules/",
version: "3.5.5.Release"
version: "3.6.7.Release"
}).extend({
admin: "admin", // 框架布局组件
menu: "menu", // 数据菜单组件
@ -44,6 +44,7 @@ layui.config({
context: "context", // 上下文组件
http: "http", // ajax请求组件
theme: "theme", // 主题转换
message: "message" // 通知组件
}).use(['layer', 'theme'], function () {
layui.theme.changeTheme(window, false);
});

5
config/pear.config.yml
View File

@ -73,4 +73,7 @@ other:
## 主页动画时长
keepLoad: "1200"
## 布局顶部主题
autoHead: false
autoHead: false
header:
## 站内消息，数据来源，通过 false 设置关闭
message: "admin/data/message.json"

8
index.html
View File

@ -26,6 +26,7 @@
<ul class="layui-nav layui-layout-right">
<li class="layui-nav-item layui-hide-xs"><a href="#" class="fullScreen layui-icon layui-icon-screen-full"></a></li>
<li class="layui-nav-item layui-hide-xs"><a href="http://www.pearadmin.com" class="layui-icon layui-icon-website"></a></li>
<li class="layui-nav-item layui-hide-xs message"></li>
<li class="layui-nav-item">
<!-- 头 像 -->
<a href="javascript:;">
@ -102,6 +103,13 @@
// 注销逻辑 返回 true / false
return true;
})
// 初始化消息回调
admin.message();
// 重写消息回调 [消息列表点击事件]
// admin.message(function(id, title, context, form) {});
})
</script>
</body>