From 3ab830bc2b66fa034a841be2da21436d80abf1c0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=B0=B1=E7=9C=A0=E4=BB=AA=E5=BC=8F?= <854085467@qq.com> Date: Sat, 13 Mar 2021 21:42:53 +0800 Subject: [PATCH] version to 3.6.7.release --- admin/data/message.json | 88 +++++++++ component/pear/css/pear-module/message.css | 46 +++++ component/pear/css/pear-module/topBar.css | 10 +- component/pear/css/pear.all.css | 5 +- component/pear/css/pear.css | 5 +- component/pear/modules/admin.js | 45 ++++- component/pear/modules/autocomplete.js | 214 +++++++++++++++++++++ component/pear/modules/message.js | 115 +++++++++++ component/pear/pear.all.js | 6 +- component/pear/pear.js | 3 +- config/pear.config.yml | 5 +- index.html | 8 + 12 files changed, 533 insertions(+), 17 deletions(-) create mode 100644 admin/data/message.json create mode 100644 component/pear/css/pear-module/message.css create mode 100644 component/pear/modules/autocomplete.js create mode 100644 component/pear/modules/message.js diff --git a/admin/data/message.json b/admin/data/message.json new file mode 100644 index 0000000..164001d --- /dev/null +++ b/admin/data/message.json @@ -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" + }] + } +] diff --git a/component/pear/css/pear-module/message.css b/component/pear/css/pear-module/message.css new file mode 100644 index 0000000..45decaa --- /dev/null +++ b/component/pear/css/pear-module/message.css @@ -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;} + + diff --git a/component/pear/css/pear-module/topBar.css b/component/pear/css/pear-module/topBar.css index 71799b9..c3d5bec 100644 --- a/component/pear/css/pear-module/topBar.css +++ b/component/pear/css/pear-module/topBar.css @@ -1,5 +1,5 @@ -.layui-fixbar li{ - border-radius: 4px; - background-color: #5FB878; - color: white; - } \ No newline at end of file +.layui-fixbar li { + border-radius: 4px; + background-color: #5FB878; + color: white; +} diff --git a/component/pear/css/pear.all.css b/component/pear/css/pear.all.css index 48e85e4..6af6a52 100644 --- a/component/pear/css/pear.all.css +++ b/component/pear/css/pear.all.css @@ -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"); \ No newline at end of file +@import url("pear-module/tag.css"); \ No newline at end of file diff --git a/component/pear/css/pear.css b/component/pear/css/pear.css index 48e85e4..6af6a52 100644 --- a/component/pear/css/pear.css +++ b/component/pear/css/pear.css @@ -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"); \ No newline at end of file +@import url("pear-module/tag.css"); \ No newline at end of file diff --git a/component/pear/modules/admin.js b/component/pear/modules/admin.js index 16798e3..d86996c 100644 --- a/component/pear/modules/admin.js +++ b/component/pear/modules/admin.js @@ -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: "
来源 :   " + + form + "
标题 :   " + title + + "
内容 :   " + context + "
", //支持获取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) { diff --git a/component/pear/modules/autocomplete.js b/component/pear/modules/autocomplete.js new file mode 100644 index 0000000..1f198ec --- /dev/null +++ b/component/pear/modules/autocomplete.js @@ -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: ['
', '
', '
', '
'] + .join(''), + layout: ['
{{d.text}}
'].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 = $(''); + $.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); +}) diff --git a/component/pear/modules/message.js b/component/pear/modules/message.js new file mode 100644 index 0000000..12fd829 --- /dev/null +++ b/component/pear/modules/message.js @@ -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 = '
  • ' + + '' + + '
    '; + + var noticeTitle = ''; + + noticeContent += '
    '; + + notice += noticeTitle; + + notice += noticeContent; + + notice += '
    • '; + + return notice; + + } + + exports(MOD_NAME, new message()); +}) diff --git a/component/pear/pear.all.js b/component/pear/pear.all.js index 0c3824e..44463c7 100644 --- a/component/pear/pear.all.js +++ b/component/pear/pear.all.js @@ -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); }); \ No newline at end of file diff --git a/component/pear/pear.js b/component/pear/pear.js index a5879fa..44463c7 100644 --- a/component/pear/pear.js +++ b/component/pear/pear.js @@ -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); }); \ No newline at end of file diff --git a/config/pear.config.yml b/config/pear.config.yml index d6fa264..aac323c 100644 --- a/config/pear.config.yml +++ b/config/pear.config.yml @@ -73,4 +73,7 @@ other: ## 主页动画时长 keepLoad: "1200" ## 布局顶部主题 - autoHead: false \ No newline at end of file + autoHead: false +header: + ## 站内消息，数据来源，通过 false 设置关闭 + message: "admin/data/message.json" \ No newline at end of file diff --git a/index.html b/index.html index fccd9ca..dd54fe4 100644 --- a/index.html +++ b/index.html @@ -26,6 +26,7 @@