ui
This commit is contained in:
233
web/statics/component/pear/module/menuSearch.js
Normal file
233
web/statics/component/pear/module/menuSearch.js
Normal file
@@ -0,0 +1,233 @@
|
||||
layui.define(['jquery', 'tools'], function (exports) {
|
||||
"use strict";
|
||||
|
||||
/**
|
||||
* @since Pear Admin 4.0
|
||||
*
|
||||
* Button component
|
||||
* */
|
||||
var MOD_NAME = 'menuSearch',
|
||||
tools = layui.tools,
|
||||
$ = layui.jquery;
|
||||
|
||||
var menuSearch = function (opt) {
|
||||
this.option = opt;
|
||||
};
|
||||
|
||||
/**
|
||||
* @since Pear Admin 4.0
|
||||
*
|
||||
* Button start loading
|
||||
* */
|
||||
menuSearch.prototype.render = function (opt) {
|
||||
|
||||
var options = {
|
||||
select: opt.select,
|
||||
elem: opt.elem,
|
||||
dataProvider: opt.dataProvider,
|
||||
}
|
||||
|
||||
$('body').on("click", options.elem, function () {
|
||||
|
||||
var _html = [
|
||||
`<div class="menu-search-content">
|
||||
<div class="layui-form menu-search-input-wrapper">
|
||||
<div class=" layui-input-wrap layui-input-wrap-prefix">
|
||||
<div class="layui-input-prefix">
|
||||
<i class="layui-icon layui-icon-search"></i>
|
||||
</div>
|
||||
<input type="text" name="menuSearch" value="" placeholder="搜索菜单" autocomplete="off" class="layui-input" lay-affix="clear">
|
||||
</div>
|
||||
</div>
|
||||
<div class="menu-search-no-data">暂 无 信 息</div>
|
||||
<ul class="menu-search-list">
|
||||
</ul>
|
||||
<div class="menu-search-tips">
|
||||
<div>
|
||||
<span class="mr-1">选择</span><kbd class="mr-1 w-5"> ↑ </kbd><kbd class="mr-5 w-5"> ↓ </kbd>
|
||||
<span class="mr-1">确定</span><kbd class="mr-5"> Enter </kbd><span class="mr-1">关闭</span><kbd class="mr-1"> Esc </kbd>
|
||||
</div>
|
||||
</div>
|
||||
</div>`
|
||||
].join('');
|
||||
|
||||
layer.open({
|
||||
type: 1,
|
||||
offset: "10%",
|
||||
area: ['600px'],
|
||||
title: false,
|
||||
closeBtn: 0,
|
||||
shadeClose: true,
|
||||
anim: 0,
|
||||
move: false,
|
||||
content: _html,
|
||||
success: function (layero, layeridx) {
|
||||
|
||||
var $layer = layero;
|
||||
var $content = $(layero).children('.layui-layer-content');
|
||||
var $input = $(".menu-search-input-wrapper input");
|
||||
var $noData = $(".menu-search-no-data");
|
||||
var $list = $(".menu-search-list");
|
||||
var menuData = options.dataProvider();
|
||||
|
||||
$layer.css("border-radius", "6px");
|
||||
$input.off("focus").focus();
|
||||
|
||||
// 搜索输入事件
|
||||
$input.off("input").on("input", tools.debounce(function () {
|
||||
var keywords = $input.val().trim();
|
||||
var filteredMenus = filterHandle(menuData, keywords);
|
||||
|
||||
if (filteredMenus.length) {
|
||||
var tiledMenus = tiledHandle(filteredMenus);
|
||||
var listHtml = createList(tiledMenus);
|
||||
$noData.css("display", "none");
|
||||
$list.html("").append(listHtml).children(":first").addClass("this")
|
||||
} else {
|
||||
$list.html("");
|
||||
$noData.css("display", "flex");
|
||||
}
|
||||
var currentHeight = $(".menu-search-content").outerHeight()
|
||||
$layer.css("height", currentHeight);
|
||||
$content.css("height", currentHeight);
|
||||
}, 500)
|
||||
)
|
||||
|
||||
// 列表点击事件
|
||||
$list.off("click").on("click", "li", function () {
|
||||
var id = $(this).attr("smenu-id");
|
||||
var title = $(this).attr("smenu-title");
|
||||
var url = $(this).attr("smenu-url");
|
||||
var type = $(this).attr("smenu-type");
|
||||
var openType = $(this).attr("smenu-open-type");
|
||||
|
||||
options.select({ id, title, url, type, openType });
|
||||
|
||||
layer.close(layeridx);
|
||||
})
|
||||
|
||||
$list.off('mouseenter').on("mouseenter", "li", function () {
|
||||
$(".menu-search-list li.this").removeClass("this");
|
||||
$(this).addClass("this");
|
||||
}).off("mouseleave").on("mouseleave", "li", function () {
|
||||
$(this).removeClass("this");
|
||||
})
|
||||
|
||||
// 监听键盘事件
|
||||
$('.menu-search-content').off("keydown").keydown(function (e) {
|
||||
if (e.keyCode === 13 || e.keyCode === 32) {
|
||||
e.preventDefault();
|
||||
var that = $(".menu-search-list li.this");
|
||||
var id = that.attr("smenu-id");
|
||||
var title = that.attr("smenu-title");
|
||||
var url = that.attr("smenu-url");
|
||||
var type = that.attr("smenu-type");
|
||||
var openType = that.attr("smenu-open-type");
|
||||
|
||||
options.select({ id, title, url, type, openType });
|
||||
|
||||
layer.close(layeridx);
|
||||
} else if (e.keyCode === 38) {
|
||||
e.preventDefault();
|
||||
var prevEl = $(".menu-search-list li.this").prev();
|
||||
$(".menu-search-list li.this").removeClass("this");
|
||||
if (prevEl.length !== 0) {
|
||||
prevEl.addClass("this");
|
||||
} else {
|
||||
$list.children().last().addClass("this");
|
||||
}
|
||||
} else if (e.keyCode === 40) {
|
||||
e.preventDefault();
|
||||
var nextEl = $(".menu-search-list li.this").next();
|
||||
$(".menu-search-list li.this").removeClass("this");
|
||||
if (nextEl.length !== 0) {
|
||||
nextEl.addClass("this");
|
||||
} else {
|
||||
$list.children().first().addClass("this");
|
||||
}
|
||||
} else if (e.keyCode === 27) {
|
||||
e.preventDefault();
|
||||
layer.close(layeridx);
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
return new menuSearch(options);
|
||||
}
|
||||
|
||||
/**
|
||||
* @since Pear Admin 4.0
|
||||
*
|
||||
* 创建结果列表
|
||||
*/
|
||||
var createList = function (data) {
|
||||
var listHtml = '';
|
||||
$.each(data, function (index, item) {
|
||||
listHtml += `<li smenu-open-type="${item.info.openType}" smenu-id="${item.info.id}" smenu-icon="'${item.info.icon}" smenu-url="${item.info.href}" smenu-title="${item.info.title}" smenu-type="${item.info.type}">
|
||||
<span><i style="margin-right:10px" class="${item.info.icon}"></i>${item.path}</span>
|
||||
<i class="layui-icon layui-icon-right"></i>
|
||||
</li>`
|
||||
})
|
||||
return listHtml;
|
||||
}
|
||||
|
||||
/**
|
||||
* @since Pear Admin 4.0
|
||||
*
|
||||
* Tree 转 path 列表
|
||||
*/
|
||||
var tiledHandle = function (data) {
|
||||
var tiledMenus = [];
|
||||
var treeTiled = function (data, content) {
|
||||
var path = "";
|
||||
var separator = " / ";
|
||||
if (!content) content = "";
|
||||
$.each(data, function (index, item) {
|
||||
if (item.children && item.children.length) {
|
||||
path += content + item.title + separator;
|
||||
var childPath = treeTiled(item.children, path);
|
||||
path += childPath;
|
||||
if (!childPath) path = ""; // 重置路径
|
||||
} else {
|
||||
path += content + item.title
|
||||
tiledMenus.push({ path: path, info: item });
|
||||
path = ""; //重置路径
|
||||
}
|
||||
})
|
||||
return path;
|
||||
};
|
||||
treeTiled(data);
|
||||
|
||||
return tiledMenus;
|
||||
}
|
||||
|
||||
/**
|
||||
* @since Pear Admin 4.0
|
||||
*
|
||||
* 查询匹配算法
|
||||
*/
|
||||
var filterHandle = function (filterData, val) {
|
||||
if (!val) return [];
|
||||
var filteredMenus = [];
|
||||
filterData = $.extend(true, {}, filterData);
|
||||
$.each(filterData, function (index, item) {
|
||||
if (item.children && item.children.length) {
|
||||
var children = filterHandle(item.children, val)
|
||||
var obj = $.extend({}, item, { children: children });
|
||||
if (children && children.length) {
|
||||
filteredMenus.push(obj);
|
||||
} else if (item.title.indexOf(val) >= 0) {
|
||||
item.children = []; // 父级匹配但子级不匹配,就去除子级
|
||||
filteredMenus.push($.extend({}, item));
|
||||
}
|
||||
} else if (item.title.indexOf(val) >= 0) {
|
||||
filteredMenus.push(item);
|
||||
}
|
||||
})
|
||||
return filteredMenus;
|
||||
}
|
||||
|
||||
exports(MOD_NAME, new menuSearch());
|
||||
});
|
||||
Reference in New Issue
Block a user