rain/jiapu
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

家谱现有接口调试50%

Browse Source
This commit is contained in:
rain
2026-07-09 17:29:25 +08:00
commit 6050508144
262 changed files with 63354 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/js/lay-module/cascader/cascader.css
+1653
View File
File diff suppressed because it is too large Load Diff
public/js/lay-module/cascader/cascader.js
+2119
View File
File diff suppressed because it is too large Load Diff
public/js/lay-module/checkbox/checkbox.css
+10
View File
@@ -0,0 +1,10 @@
.checkBox .block{float:left; margin:5px;padding:6px 15px;height:18px;text-align:center; border:1px solid #ccc;position:relative;cursor:pointer;overflow:hidden;}
.checkBox .block .choice{position:absolute;right:0px;bottom:0px;display:none;}
.checkBox .block.on{border:1px solid #1E9FFF;}
.checkBox .block.on .choice{position:absolute;right:0px;bottom:0px;display:block;}
.checkBox .block.on .choice .triangle{position:absolute;right:0px;bottom:0px;border-bottom:18px solid #1E9FFF;border-left: 18px solid transparent;}
.checkBox .block.on .choice .right{position:absolute;right:5px;bottom:5px;width:10px;height:10px;}
.checkBox .block .del{width:18px; height:18px; background:#fff; border:0px solid #ccc; border-radius:3px; overflow:hidden; cursor:pointer; position:absolute; bottom:-20px; right:0px; transition: background .3s ease, border .2s ease, bottom .2s ease;display:block;}
.checkBox .block .del:hover{background:#FF5722; border:1px solid #FF5722;}
.checkBox .block:hover .del{bottom:0px;}
.checkBox .block.on .del{display:none}
public/js/lay-module/checkbox/checkbox.js
+69
View File
@@ -0,0 +1,69 @@
layui.define('jquery', function(exports){
"use strict";
var $ = layui.$
,hint = layui.hint();
var CheckBox = function(options){
this.options = options;
};
//初始化
CheckBox.prototype.init = function(elem){
var that = this;
elem.addClass('checkBox'); //添加checkBox样式
that.checkbox(elem);
};
//树节点解析
CheckBox.prototype.checkbox = function(elem,children){
var that = this, options = that.options;
var nodes = children || options.nodes;
layui.each(nodes, function(index, item){
var li = $(['<li class="block'+(item.on?' on':'')+'" value="'+item.name+'" onmouseover="layui.layer.tips(\''+item.type+'\',this,{tips:2})" onmouseout="layui.layer.closeAll(\'tips\');">'+item.name,'<i class="choice"><i class="triangle"></i><i class="right layui-icon layui-icon-ok"></i></i><i class="del"><i class="layui-icon layui-icon-delete"></i></i><span class="hide">'+(item.on?'<input type="hidden" name="'+item.name+'" value="'+item.type+'">':'')+'</span></li>'].join(''));
elem.append(li);
//触发点击节点回调
typeof options.click === 'function' && that.click(li, item);
//触发删除节点回调
typeof options.del === 'function' && that.del(li, item);
});
};
//点击节点回调
CheckBox.prototype.click = function(elem, item){
var that = this, options = that.options;
elem.on('click', function(e){
elem.toggleClass("on");
if(elem.hasClass("on")){
item.on = true;
elem.children("span.hide").html('<input type="hidden" name="'+item.name+'" value="'+item.type+'">');
}else{
item.on = false;
elem.children("span.hide").html('');
}
layui.stope(e);
options.click(item);
});
};
//点击节点回调
CheckBox.prototype.del = function(elem, item){
var that = this, options = that.options;
elem.children('i.del').on('click', function(e){
var index = layer.confirm('确定删除 ['+item.name+'] 吗？', {
btn: ['删除','取消']
}, function(){
layer.close(index);
if(options.del(item)){
elem.closest(".block").remove();
layui.stope(e);
}
});
return false;
});
};
//暴露接口
exports('checkbox', function(options){
var checkbox = new CheckBox(options = options || {});
var elem = $(options.elem);
if(!elem[0]){
return hint.error('layui.checkbox 没有找到'+ options.elem +'元素');
}
checkbox.init(elem);
});
}).link(layui.cache.base+"checkbox/checkbox.css?v="+(new Date).getTime());
public/js/lay-module/dropdownTable/dropdownTable.js
+677
View File
@@ -0,0 +1,677 @@
layui.define(['jquery', 'dropdown', 'table', 'form'], function (exports) {
"use strict";
var dropdown = layui.dropdown, //下拉菜单
table = layui.table, //table组件
$ = layui.jquery, //jQuery
form = layui.form, //表单
moduleName = 'dropdownTable', //模块名
dropdownTable = {
version: '1.0.4',
config: {
selectType: 'radio',
emptyMsg: '点击此处选择'
},
index: layui[moduleName] ? (layui[moduleName].index + 10000) : 0,
set: function (options) {
this.config = $.extend(true, {}, that.config, options);
let config = this.config,
selectType = config.selectType,
selectField = { type: selectType, fixed: 'left' },
cols = config?.selectTable?.cols ?? [[]];
cols.forEach((item) => {
if (JSON.stringify(item).indexOf(JSON.stringify(selectField)) < 0) {
item.splice(0, 0, selectField);
}
});
return that;
}
},
//操作当前实例
thisModule = function () {
let that = this,
options = that.config,
id = options.id || that.index;
thisModule.that[id] = that; //记录当前实例对象
return {
config: options,
reload: function (options) {
that.reload.call(that, options);
}
};
},
//构造器
Class = function (options) {
let index = ++dropdownTable.index;
this.index = index;
this.tableId = 'dropdown-select-table-' + index; //初始化当前下拉表格的ID
this.dropdownId = 'dropdown-' + index; //初始化当前下拉组件的ID
//其中selectedIds为初始化被选择的值，selectedDisplayValues为初始化被选中值的显示值
this.config = $.extend(true, {}, dropdownTable.config, options, {
selectedIds: [],
selectedDisplayValues: []
});
let config = this.config,
selectType = config.selectType,
selectField = { type: selectType, fixed: 'left' },
selectTableCols = config?.selectTable?.cols ?? [[]];
if (selectType === 'checkbox') {
selectTableCols.forEach((item) => {
if (JSON.stringify(item).indexOf(JSON.stringify(selectField)) < 0) {
item.splice(0, 0, selectField);
}
});
}
this.render();
};
//重载表格实例
Class.prototype.reloadSelectTable = function (selectTableConfig) {
let config = this.config;
layui.each(selectTableConfig, function (key, item) {
if (layui.type(item) === 'array') {
delete config.selectTable[key];
}
});
$.extend(true, config.selectTable, selectTableConfig);
this.clearSelected();
};
//清空选中
Class.prototype.clearSelected = function () {
let config = this.config,
bindInput = config.bindInput;
$(bindInput).val("");
$(bindInput)[0].dataset.displayValue = '';
$.extend(config, { selectedIds: [], selectedDisplayValues: [] });
this.setSelectedDisplayAndValue();
}
//渲染
Class.prototype.render = function () {
let that = this,
options = that.config,
_this = options.elem = $(options.elem);
if (!_this[0]) {
return;
}
that.initElemArea();
that.iniDropdown();
};
//初始化绑定元素区域
Class.prototype.initElemArea = function () {
let that = this,
config = this.config,
elem = config.elem,
searchName = this.config?.searchName ?? 'keywords';
$(elem).css({
'display': 'inline-block',
'width': '80%',
'height': '100%',
'min-height': '35px',
'border': '1px solid #eee',
'line-height': '35px',
'box-sizing': 'border-box',
'padding': '0 10px',
'cursor': 'pointer'
});
$(elem).hover(() => {
$(elem).css({ 'border-color': '#e2e2e2' });
}, () => {
$(elem).css({ 'border-color': '#eee' });
});
let selectButton = $("<button type='button' class='layui-btn layui-btn-primary'>选择</button>")
selectButton.css({
'display': 'inline-block',
'width': '20%',
'min-width': '45px',
'height': '100%',
'box-sizing': 'border-box',
'font-size': '12px',
'padding': '0',
'line-height': '36px'
});
if (config?.needPopup ?? true) {
$(elem).after(selectButton);
} else {
$(elem).css({ 'width': '100%' });
}
let selectContent = `
<div class="select-container" >
<div class="layui-row">
<div class="layui-col-md7 table-container">
<div class="layui-bg-green header">
<div class="layui-font-14">选择</div>
<form class="layui-form" style="float: right;" lay-filter="data-table-search-form">
<div class="layui-form-item" style="margin:0;">
<div class="layui-input-inline">
<input type="text" id="data_table_${searchName}" name="data_table_${searchName}" placeholder="请输入您要搜索的内容" class="layui-input">
</div>
<div class="layui-inline">
<button id="data-table-search-button" type="button" class="layui-btn layui-btn-primary" style="background-color:white"><i class="layui-icon layui-icon-search"></i></button>
</div>
</div>
</form>
</div>
<!--表格-->
<div class="table-item">
<table class="layui-hide" id="data-table" lay-filter="data-table"></table>
</div>
</div>
<div class="layui-col-md5 table-container">
<div class="layui-bg-green header">
<div class="layui-font-14">选择结果</div>
</div>
<div class="table-item">
<table class="layui-hide" id="selected-table" lay-filter="selected-table"></table>
<script type="text/html" id="selected-table-opt-bar">
<div class="layui-clear-space">
<a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">移除</a>
</div>
</script>
</div>
</div>
</div>
</div>
<style>
.select-container{
width:100%;
padding:10px;
box-sizing:border-box;
}
.table-container {
box-sizing: border-box;
padding-right: 10px;
}
.table-container>.header {
width: 100%;
display: table;
padding: 5px 10px;
box-sizing: border-box;
min-height: 50px;
}
.table-container>.header>* {
display: table-cell;
vertical-align: middle;
}
.table-container>.table-item {
margin-top: 20px;
}
</style>
`
selectButton.click(() => {
layer.open({
title: '选择',
type: 1,
area: ['70%', '80%'],
maxmin: true,
btn: ['确认', '取消'],
content: selectContent,
success: () => {
renderSelectedTable();
renderDataTable();
bindTableEvent();
initSelectedTable();
bindDataTableSearchFormEvent();
},
yes: index => {
let selectedData = table.getData('selected-table') ?? [];
let selectedIds = selectedData.map(item => item.id);
config.selectedIds = selectedIds;
config.selectedDisplayValues = selectedData.map(item => item.displayValue);
that.setSelectedDisplayAndValue();
layer.close(index);
let onSelected = config.onSelected;
if ($.isFunction(onSelected)) {
onSelected(selectedIds);
}
}
});
});
function renderDataTable() {
let tableNeedConfig = {
id: 'data-table',
elem: '#data-table',
done: function (res) {
setDataTableSelected();
}
},
tableConfig = $.extend({}, config.selectTable, tableNeedConfig);
table.render(tableConfig);
}
function renderSelectedTable() {
table.render({
elem: '#selected-table',
cols: [
[
{ field: 'id', title: 'ID', width: 80, sort: true },
{ field: 'displayValue', title: '值' },
{ field: 'originValue', title: '原始值', hide: true },
{ fixed: 'right', title: '操作', width: 70, toolbar: '#selected-table-opt-bar' }
]
],
data: []
});
}
function bindDataTableSearchFormEvent() {
$('#data-table-search-button').click(() => {
let where = {},
searchValue = $('#data_table_' + searchName).val();
where[searchName] = searchValue;
table.reloadData('data-table', { page: { curr: 1 }, where: where });
});
}
function bindTableEvent() {
table.on('row(data-table)', (obj) => {
let data = obj.data;
selectedTableReload({
'id': data[config.selectTable.uniqueId],
'displayValue': data[config.selectTable.displayField],
'originValue': JSON.stringify(data)
});
});
table.on('tool(selected-table)', obj => {
if (obj.event === 'del') {
obj.del();
setDataTableSelected();
}
});
}
function selectedTableReload(selectedData) {
let originData = table.getData('selected-table') ?? [];
if (originData.map(item => item.id).includes(selectedData.id)) {
originData = originData.filter(item => item.id !== selectedData.id);
} else {
if (config.selectType === 'radio') {
originData = [];
}
originData.push(selectedData)
}
table.reload('selected-table', {
data: originData
});
setDataTableSelected();
}
function setDataTableSelected() {
let selectedIds = (table.getData('selected-table') ?? []).map(item => item.id + '');
let data = (table.getData('data-table') ?? []);
data.forEach((item, index) => {
if (config.selectType === 'checkbox') {
table.setRowChecked('data-table', {
type: 'checkbox',
index: index,
checked: selectedIds.includes(item.id + '')
});
} else if (selectedIds.includes(item.id + '')) {
table.setRowChecked('data-table', {
type: 'radio',
index: index,
checked: true
});
}
});
}
function initSelectedTable() {
let bindInput = config.bindInput,
bindInputValue = $(bindInput).val() ?? '',
bindInputDisplayValue = $(bindInput)[0].dataset.displayValue ?? '';
config.selectedIds = bindInputValue.split("$").filter(item => item !== '');
config.selectedDisplayValues = bindInputDisplayValue.split("$").filter(item => item !== '');
config.selectedIds.forEach((id, index) => {
selectedTableReload({
'id': id,
'displayValue': config.selectedDisplayValues[index]
});
});
}
}
//初始化下拉组件
Class.prototype.iniDropdown = function () {
let that = this,
config = that.config,
elem = config.elem;
dropdown.render({
id: config.id ?? that.index,
elem: elem,
trigger: 'click',
content: that.iniSelectTableHtml(),
style: config?.style ?? 'min-width:450px;box-sizing:border-box; padding:10px;width:' + $(elem).width() + 'px',
ready: () => {
that.iniSelectTable();
that.bindRowCheckToSelectTable();
that.bindSelectBoxEventToSelectTable();
that.bindSearchToSelectTable();
}
});
};
//初始化table的html文件
Class.prototype.iniSelectTableHtml = function () {
let index = this.index,
tableId = this.tableId,
searchName = this.config?.searchName ?? 'keywords',
selectTableSearchFormId = 'select-table-search-' + index,
selectTableSearchButtonId = 'select-table-search-button-' + index;
$.extend(this.config, {
selectTableSearchFormId: selectTableSearchFormId,
selectTableSearchButtonId: selectTableSearchButtonId
});
return [
'<div class="chosen-window">',
'<script type="text/html" id="' + selectTableSearchFormId + '">',
'<form class="layui-form layui-row">',
'<div class="layui-inline">',
'<div class="layui-input-inline">',
'<input type="text" name="' + searchName + '" placeholder="请输入要搜索的内容" class="layui-input">',
'</div>',
'</div>',
'<div class="layui-inline"><button class="layui-btn" lay-submit lay-filter="' + selectTableSearchButtonId + '">搜索</button></div>',
'</form>',
'</script>',
'<table class="layui-hide" id="' + tableId + '" lay-filter="' + tableId + '"></table>',
'</div>',
].join('');
}
//初始化表格
Class.prototype.iniSelectTable = function () {
let that = this,
config = that.config,
tableId = that.tableId,
selectTable = config.selectTable,
tableNeedConfig = {
id: tableId,
elem: '#' + tableId,
toolbar: '#' + config.selectTableSearchFormId,
defaultToolbar: ['filter'],
done: function (res) {
that.iniDefaultSelected(res.data)
}
},
tableConfig = $.extend({}, selectTable, tableNeedConfig);
table.render(tableConfig);
};
//处理默认选中值的问题
Class.prototype.iniDefaultSelected = function (tableData = []) {
let that = this,
tableId = that.tableId,
config = that.config,
selectType = config.selectType,
bindInput = config.bindInput,
bindInputValue = $(bindInput).val() ?? '',
bindInputDisplayValue = $(bindInput)[0].dataset.displayValue ?? '';
config.selectedIds = bindInputValue.split("$").filter(item => item !== '');
config.selectedDisplayValues = bindInputDisplayValue.split("$").filter(item => item !== '');
if (tableData.length === 0) {
that.setSelectedDisplayAndValue();
return;
}
table.setRowChecked(tableId, { index: 'all', checked: false });
let selectedIds = config.selectedIds;
if (selectedIds.length > 0) {
let tableIdData = tableData.map(item => item[config.selectTable.uniqueId].toString());
if (selectType === 'radio' && selectedIds.length === 1) {
let selectedItemIndex = tableIdData.indexOf(selectedIds[0].toString());
if (selectedItemIndex >= 0) {
table.setRowChecked(tableId, { type: selectType, index: selectedItemIndex, checked: true })
}
} else {
tableIdData.forEach(function (item, itemIndex) {
table.setRowChecked(tableId, {
type: selectType,
index: itemIndex,
checked: selectedIds.includes(item)
});
});
}
}
that.setSelectedDisplayAndValue();
}
//处理选择框事件
Class.prototype.bindSelectBoxEventToSelectTable = function () {
let that = this,
options = that.config,
selectType = options.selectType,
uniqueId = options.selectTable.uniqueId,
displayField = options.selectTable.displayField,
tableId = that.tableId;
if (selectType === 'radio') { //单选
table.on('radio(' + tableId + ')', function (obj) {
dealRadioSelectedData(obj.checked, obj.data);
});
} else { //复选框
table.on('checkbox(' + tableId + ')', function (obj) {
let eventType = obj.type,
checked = obj.checked;
if (eventType === 'all') {
table.getData(tableId).forEach(function (rowData) {
dealCheckboxSelectedData(checked, rowData);
});
}
if (eventType === 'one') {
dealCheckboxSelectedData(checked, obj.data);
}
});
}
function dealRadioSelectedData(checked, rowData) {
let rowId = rowData[uniqueId].toString();
that.config.selectedIds = [];
that.config.selectedDisplayValues = [];
if (checked) {
that.config.selectedIds.push(rowId);
that.config.selectedDisplayValues.push(rowData[displayField]);
}
that.setSelectedDisplayAndValue();
}
function dealCheckboxSelectedData(checked, rowData) {
let rowId = rowData[uniqueId].toString();
//处理选中
if (checked && !that.config.selectedIds.includes(rowId)) {
that.config.selectedIds.push(rowId);
that.config.selectedDisplayValues.push(rowData[displayField]);
}
//处理未选中
if (!checked) {
let cancelIndex = that.config.selectedIds.indexOf(rowId);
if (rowId > -1) {
that.config.selectedIds.splice(cancelIndex, 1);
that.config.selectedDisplayValues.splice(cancelIndex, 1);
}
}
that.setSelectedDisplayAndValue();
}
}
//绑定行点击事件到选择表中
Class.prototype.bindRowCheckToSelectTable = function () {
let that = this,
tableId = that.tableId,
options = that.config,
selectType = options.selectType,
uniqueId = options.selectTable.uniqueId,
displayField = options.selectTable.displayField;
table.on('row(' + tableId + ')', function (obj) {
let rowId = obj.data[uniqueId].toString(),
checked;
if (!that.config.selectedIds.includes(rowId)) {
if (selectType === 'radio') {
that.config.selectedIds = [];
that.config.selectedDisplayValues = [];
}
that.config.selectedIds.push(rowId);
that.config.selectedDisplayValues.push(obj.data[displayField]);
checked = true;
} else {
let cancelSelectedIdIndex = that.config.selectedIds.indexOf(rowId);
that.config.selectedIds.splice(cancelSelectedIdIndex, 1);
that.config.selectedDisplayValues.splice(cancelSelectedIdIndex, 1);
checked = false;
}
obj.setRowChecked({
type: selectType,
checked: checked
});
//加入选中事件
let onSelected = options.onSelected;
if (checked && $.isFunction(onSelected)) {
onSelected(new Array(obj.data[options.selectTable.uniqueId]));
}
that.setSelectedDisplayAndValue();
});
};
//绑定表格的搜索事件
Class.prototype.bindSearchToSelectTable = function () {
let tableId = this.tableId,
selectTableSearchButtonId = this.config.selectTableSearchButtonId;
form.on('submit(' + selectTableSearchButtonId + ')', function (data) {
table.reloadData(tableId, { page: { curr: 1 }, where: data.field });
return false;
});
}
//设置显示值和实际存储值
Class.prototype.setSelectedDisplayAndValue = function () {
let that = this,
tableId = that.tableId,
options = that.config,
elem = options.elem,
bindInput = options.bindInput,
selectedIds = options?.selectedIds ?? [],
selectDisplayValues = options.selectedDisplayValues,
emptyMsg = options.emptyMsg;
elem.find("span").remove();
if (selectedIds.length > 0 && selectedIds.length === selectDisplayValues.length) {
selectedIds.forEach((item, itemIndex) => {
let selectedDisplayValue = selectDisplayValues[itemIndex],
closeObject = $('<span style="margin-left:5px;color:#fff" data-selected-id="' + item + '">×<span>'),
displayHtml = [
'<span class="layui-badge layui-bg-green">' + selectedDisplayValue,
'</span>',
].join(''),
displayObject = $(displayHtml).append(closeObject);
displayObject.attr({
"style": "margin-left:5px;font-size:14px;padding:4px 6px"
});
//绑定鼠标事件
closeObject.on('mouseenter mouseleave', function (event) {
let optType = event.type,
fontColor = optType === 'mouseleave' ? 'white' : 'red';
$(this).attr({ "style": "color:" + fontColor + ";margin-left:5px;cursor:pointer" });
});
closeObject.on('click', function () {
let _this = this,
tableIdData = table.getData(tableId).map(item => item[options.selectTable.uniqueId]),
selectedId = _this.dataset.selectedId,
cancelSelectedIdIndex = that.config.selectedIds.indexOf(selectedId);
that.config.selectedIds.splice(cancelSelectedIdIndex, 1);
that.config.selectedDisplayValues.splice(cancelSelectedIdIndex, 1);
if (tableIdData.includes(selectedId)) {
if (options.selectType === 'radio') {
table.setRowChecked(tableId, {
type: 'radio',
index: 'all',
checked: false
});
} else {
table.setRowChecked(tableId, {
type: options.selectType,
index: tableIdData.indexOf(selectedId),
checked: false
});
}
}
that.setSelectedDisplayAndValue();
});
elem.append(displayObject);
});
} else {
elem.append('<span class="layui-font-gray layui-font-14" style="margin-left:5px;">' + emptyMsg + '</span>');
}
$(bindInput).val(selectedIds.join("$"));
$(bindInput)[0].dataset.displayValue = selectDisplayValues.join("$");
}
//记录所有实例
thisModule.that = {}; //记录所有实例对象
//获取当前实例对象
thisModule.getThis = function (id) {
let that = thisModule.that[id];
if (!that) {
hint.error(id ? (moduleName + ' instance with ID \'' + id + '\' not found') : 'ID argument required');
}
return that;
}
//重载实例
dropdownTable.reloadSelectTable = function (id, selectTableConfig) {
let that = thisModule.getThis(id);
that.reloadSelectTable(selectTableConfig);
return thisModule.call(that);
}
//请空已选择
dropdownTable.clearSelected = function (id) {
let that = thisModule.getThis(id);
that.clearSelected();
}
//核心入口
dropdownTable.render = function (options) {
let inst = new Class(options);
if (dropdownTable.index === 1) {
console.log("欢迎使用Hg科技的dropdownTable组件，version:" + dropdownTable.version + ",期待您的建议！");
}
inst.iniDefaultSelected();
return thisModule.call(inst);
}
exports(moduleName, dropdownTable);
});
public/js/lay-module/echarts/echarts.js
+19
View File
File diff suppressed because one or more lines are too long
public/js/lay-module/echarts/echartsTheme.js
+492
View File
@@ -0,0 +1,492 @@
layui.define(function(exports) {
exports('echartsTheme',
{
"color": [
"#3fb1e3",
"#6be6c1",
"#626c91",
"#a0a7e6",
"#c4ebad",
"#96dee8"
],
"backgroundColor": "rgba(252,252,252,0)",
"textStyle": {},
"title": {
"textStyle": {
"color": "#666666"
},
"subtextStyle": {
"color": "#999999"
}
},
"line": {
"itemStyle": {
"normal": {
"borderWidth": "3"
}
},
"lineStyle": {
"normal": {
"width": "4"
}
},
"symbolSize": "10",
"symbol": "emptyCircle",
"smooth": true
},
"radar": {
"itemStyle": {
"normal": {
"borderWidth": "3"
}
},
"lineStyle": {
"normal": {
"width": "4"
}
},
"symbolSize": "10",
"symbol": "emptyCircle",
"smooth": true
},
"bar": {
"itemStyle": {
"normal": {
"barBorderWidth": 0,
"barBorderColor": "#ccc"
},
"emphasis": {
"barBorderWidth": 0,
"barBorderColor": "#ccc"
}
}
},
"pie": {
"itemStyle": {
"normal": {
"borderWidth": 0,
"borderColor": "#ccc"
},
"emphasis": {
"borderWidth": 0,
"borderColor": "#ccc"
}
}
},
"scatter": {
"itemStyle": {
"normal": {
"borderWidth": 0,
"borderColor": "#ccc"
},
"emphasis": {
"borderWidth": 0,
"borderColor": "#ccc"
}
}
},
"boxplot": {
"itemStyle": {
"normal": {
"borderWidth": 0,
"borderColor": "#ccc"
},
"emphasis": {
"borderWidth": 0,
"borderColor": "#ccc"
}
}
},
"parallel": {
"itemStyle": {
"normal": {
"borderWidth": 0,
"borderColor": "#ccc"
},
"emphasis": {
"borderWidth": 0,
"borderColor": "#ccc"
}
}
},
"sankey": {
"itemStyle": {
"normal": {
"borderWidth": 0,
"borderColor": "#ccc"
},
"emphasis": {
"borderWidth": 0,
"borderColor": "#ccc"
}
}
},
"funnel": {
"itemStyle": {
"normal": {
"borderWidth": 0,
"borderColor": "#ccc"
},
"emphasis": {
"borderWidth": 0,
"borderColor": "#ccc"
}
}
},
"gauge": {
"itemStyle": {
"normal": {
"borderWidth": 0,
"borderColor": "#ccc"
},
"emphasis": {
"borderWidth": 0,
"borderColor": "#ccc"
}
}
},
"candlestick": {
"itemStyle": {
"normal": {
"color": "#e6a0d2",
"color0": "transparent",
"borderColor": "#e6a0d2",
"borderColor0": "#3fb1e3",
"borderWidth": "2"
}
}
},
"graph": {
"itemStyle": {
"normal": {
"borderWidth": 0,
"borderColor": "#ccc"
}
},
"lineStyle": {
"normal": {
"width": "1",
"color": "#cccccc"
}
},
"symbolSize": "10",
"symbol": "emptyCircle",
"smooth": true,
"color": [
"#3fb1e3",
"#6be6c1",
"#626c91",
"#a0a7e6",
"#c4ebad",
"#96dee8"
],
"label": {
"normal": {
"textStyle": {
"color": "#ffffff"
}
}
}
},
"map": {
"itemStyle": {
"normal": {
"areaColor": "#eeeeee",
"borderColor": "#aaaaaa",
"borderWidth": 0.5
},
"emphasis": {
"areaColor": "rgba(63,177,227,0.25)",
"borderColor": "#3fb1e3",
"borderWidth": 1
}
},
"label": {
"normal": {
"textStyle": {
"color": "#ffffff"
}
},
"emphasis": {
"textStyle": {
"color": "rgb(63,177,227)"
}
}
}
},
"geo": {
"itemStyle": {
"normal": {
"areaColor": "#eeeeee",
"borderColor": "#aaaaaa",
"borderWidth": 0.5
},
"emphasis": {
"areaColor": "rgba(63,177,227,0.25)",
"borderColor": "#3fb1e3",
"borderWidth": 1
}
},
"label": {
"normal": {
"textStyle": {
"color": "#ffffff"
}
},
"emphasis": {
"textStyle": {
"color": "rgb(63,177,227)"
}
}
}
},
"categoryAxis": {
"axisLine": {
"show": true,
"lineStyle": {
"color": "#cccccc"
}
},
"axisTick": {
"show": false,
"lineStyle": {
"color": "#333"
}
},
"axisLabel": {
"show": true,
"textStyle": {
"color": "#999999"
}
},
"splitLine": {
"show": true,
"lineStyle": {
"color": [
"#eeeeee"
]
}
},
"splitArea": {
"show": false,
"areaStyle": {
"color": [
"rgba(250,250,250,0.05)",
"rgba(200,200,200,0.02)"
]
}
}
},
"valueAxis": {
"axisLine": {
"show": true,
"lineStyle": {
"color": "#cccccc"
}
},
"axisTick": {
"show": false,
"lineStyle": {
"color": "#333"
}
},
"axisLabel": {
"show": true,
"textStyle": {
"color": "#999999"
}
},
"splitLine": {
"show": true,
"lineStyle": {
"color": [
"#eeeeee"
]
}
},
"splitArea": {
"show": false,
"areaStyle": {
"color": [
"rgba(250,250,250,0.05)",
"rgba(200,200,200,0.02)"
]
}
}
},
"logAxis": {
"axisLine": {
"show": true,
"lineStyle": {
"color": "#cccccc"
}
},
"axisTick": {
"show": false,
"lineStyle": {
"color": "#333"
}
},
"axisLabel": {
"show": true,
"textStyle": {
"color": "#999999"
}
},
"splitLine": {
"show": true,
"lineStyle": {
"color": [
"#eeeeee"
]
}
},
"splitArea": {
"show": false,
"areaStyle": {
"color": [
"rgba(250,250,250,0.05)",
"rgba(200,200,200,0.02)"
]
}
}
},
"timeAxis": {
"axisLine": {
"show": true,
"lineStyle": {
"color": "#cccccc"
}
},
"axisTick": {
"show": false,
"lineStyle": {
"color": "#333"
}
},
"axisLabel": {
"show": true,
"textStyle": {
"color": "#999999"
}
},
"splitLine": {
"show": true,
"lineStyle": {
"color": [
"#eeeeee"
]
}
},
"splitArea": {
"show": false,
"areaStyle": {
"color": [
"rgba(250,250,250,0.05)",
"rgba(200,200,200,0.02)"
]
}
}
},
"toolbox": {
"iconStyle": {
"normal": {
"borderColor": "#999999"
},
"emphasis": {
"borderColor": "#666666"
}
}
},
"legend": {
"textStyle": {
"color": "#999999"
}
},
"tooltip": {
"axisPointer": {
"lineStyle": {
"color": "#cccccc",
"width": 1
},
"crossStyle": {
"color": "#cccccc",
"width": 1
}
}
},
"timeline": {
"lineStyle": {
"color": "#626c91",
"width": 1
},
"itemStyle": {
"normal": {
"color": "#626c91",
"borderWidth": 1
},
"emphasis": {
"color": "#626c91"
}
},
"controlStyle": {
"normal": {
"color": "#626c91",
"borderColor": "#626c91",
"borderWidth": 0.5
},
"emphasis": {
"color": "#626c91",
"borderColor": "#626c91",
"borderWidth": 0.5
}
},
"checkpointStyle": {
"color": "#3fb1e3",
"borderColor": "rgba(63,177,227,0.15)"
},
"label": {
"normal": {
"textStyle": {
"color": "#626c91"
}
},
"emphasis": {
"textStyle": {
"color": "#626c91"
}
}
}
},
"visualMap": {
"color": [
"#2a99c9",
"#afe8ff"
]
},
"dataZoom": {
"backgroundColor": "rgba(255,255,255,0)",
"dataBackgroundColor": "rgba(222,222,222,1)",
"fillerColor": "rgba(114,230,212,0.25)",
"handleColor": "#cccccc",
"handleSize": "100%",
"textStyle": {
"color": "#999999"
}
},
"markPoint": {
"label": {
"normal": {
"textStyle": {
"color": "#ffffff"
}
},
"emphasis": {
"textStyle": {
"color": "#ffffff"
}
}
}
}
});
});
public/js/lay-module/hashes/hashes.js
+1762
View File
File diff suppressed because it is too large Load Diff
public/js/lay-module/inputTag/inputTag.css
+87
View File
@@ -0,0 +1,87 @@
@keyframes fariy-fadein {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.fairy-tag-container {
width: auto;
min-height: 100px;
padding: 5px;
border: 1px solid #e6e6e6;
background-color: #ffffff;
}
.fairy-tag-container:hover {
border-color: #d2d2d2;
}
.fairy-tag-container span.fairy-tag {
float: left;
font-size: 13px;
padding: 5px 8px;
margin-right: 5px;
margin-bottom: 5px;
border-radius: 2px;
line-height: 16px;
}
.fairy-tag-container span.fairy-tag a {
font-size: 11px;
font-weight: bolder;
color: #ffffff;
text-decoration: none;
margin-left: 6px;
}
.fairy-tag-container span.fairy-tag a:hover {
cursor: pointer;
}
.fairy-tag-container span.fairy-bg-red {
background-color: #FF5722;
}
.fairy-tag-container span.fairy-bg-orange {
background-color: #FFB800;
}
.fairy-tag-container span.fairy-bg-green {
background-color: #009688;
}
.fairy-tag-container span.fairy-bg-cyan {
background-color: #2F4056;
}
.fairy-tag-container span.fairy-bg-blue {
background-color: #1E9FFF;
}
.fairy-tag-container span.fairy-bg-black {
background-color: #393D49;
}
.fairy-tag-container span.fairy-bg-red,
.fairy-tag-container span.fairy-bg-orange,
.fairy-tag-container span.fairy-bg-green,
.fairy-tag-container span.fairy-bg-cyan,
.fairy-tag-container span.fairy-bg-blue,
.fairy-tag-container span.fairy-bg-black {
color: #ffffff;
}
.fairy-tag-container .fairy-anim-fadein {
animation: fariy-fadein 0.3s both;
}
.fairy-tag-container .fairy-tag-input[type='text'] {
width: 80px;
font-size: 13px;
padding: 6px;
background: transparent;
border: 0 none;
outline: 0;
}
.fairy-tag-container .fairy-tag-input[type='text']:focus::-webkit-input-placeholder {
color: transparent;
}
.fairy-tag-container .fairy-tag-input[type='text']:focus:-moz-placeholder {
color: transparent;
}
.fairy-tag-container .fairy-tag-input[type='text']:focus:-moz-placeholder {
color: transparent;
}
.fairy-tag-container .fairy-tag-input[type='text']:focus:-ms-input-placeholder {
color: transparent;
}
/*# sourceMappingURL=inputTag.css.map */
public/js/lay-module/inputTag/inputTag.js
+150
View File
@@ -0,0 +1,150 @@
/*
* Name: inputTag
* Author: cshaptx4869
* Project: https://github.com/cshaptx4869/inputTag
*/
(function (define) {
define(['jquery'], function ($) {
"use strict";
class InputTag {
options = {
elem: '.fairy-tag-input',
theme: ['fairy-bg-red', 'fairy-bg-orange', 'fairy-bg-green', 'fairy-bg-cyan', 'fairy-bg-blue', 'fairy-bg-black'],
data: [],
removeKeyNum: 8,
createKeyNum: 13,
permanentData: [],
};
get elem() {
return $(this.options.elem);
}
get copyData() {
return [...this.options.data];
}
constructor(options) {
this.render(options);
}
render(options) {
this.init(options);
this.listen();
}
init(options) {
var spans = '', that = this;
this.options = $.extend(this.options, options);
!this.elem.attr('placeholder') && this.elem.attr('placeholder', '添加标签');
$.each(this.options.data, function (index, item) {
spans += that.spanHtml(item);
});
this.elem.before(spans);
}
listen() {
var that = this;
this.elem.parent().on('click', 'a', function () {
that.removeItem($(this).parent('span'));
});
this.elem.parent().on('click', function () {
that.elem.focus();
});
this.elem.keydown(function (event) {
var keyNum = (event.keyCode ? event.keyCode : event.which);
if (keyNum === that.options.removeKeyNum) {
if (!that.elem.val().trim()) {
var closeItems = that.elem.parent().find('a');
if (closeItems.length) {
that.removeItem($(closeItems[closeItems.length - 1]).parent('span'));
event.preventDefault();
}
}
} else if (keyNum === that.options.createKeyNum) {
that.createItem();
event.preventDefault();
}
});
}
createItem() {
var value = this.elem.val().trim();
if (this.options.beforeCreate && typeof this.options.beforeCreate === 'function') {
var modifiedValue = this.options.beforeCreate(this.copyData, value);
if (typeof modifiedValue == 'string' && modifiedValue) {
value = modifiedValue;
} else {
value = '';
}
}
if (value) {
if (!this.options.data.includes(value)) {
this.options.data.push(value);
this.elem.before(this.spanHtml(value));
this.onChange(value, 'create');
}
}
this.elem.val('');
}
removeItem(target) {
var that = this;
var closeSpan = target.remove(),
closeSpanText = $(closeSpan).children('span').text();
var value = that.options.data.splice($.inArray(closeSpanText, that.options.data), 1);
value.length === 1 && that.onChange(value[0], 'remove');
}
randomColor() {
return this.options.theme[Math.floor(Math.random() * this.options.theme.length)];
}
spanHtml(value) {
return '<span class="fairy-tag fairy-anim-fadein ' + this.randomColor() + '">' +
'<span>' + value + '</span>' +
(this.options.permanentData.includes(value) ? '' : '<a href="#" title="删除标签">&times;</a>') +
'</span>';
}
onChange(value, type) {
this.options.onChange && typeof this.options.onChange === 'function' && this.options.onChange(this.copyData, value, type);
}
getData() {
return this.copyData;
}
clearData() {
this.options.data = [];
this.elem.prevAll('span.fairy-tag').remove();
}
}
return {
render(options) {
return new InputTag(options);
}
}
});
}(typeof define === 'function' && define.amd ? define : function (deps, factory) {
layui.link(layui.cache.base + "inputTag/inputTag.css?v="+(new Date).getTime());
var MOD_NAME = 'inputTag';
if (typeof module !== 'undefined' && module.exports) { //Node
module.exports = factory(require('jquery'));
} else if (window.layui && layui.define) {
layui.define('jquery', function (exports) { //layui加载
exports(MOD_NAME, factory(layui.jquery));
});
} else {
window[MOD_NAME] = factory(window.jQuery);
}
}));
public/js/lay-module/ipicker/iPicker.js
+1322
View File
File diff suppressed because one or more lines are too long
public/js/lay-module/jmSheet/jmSheet.css
+80
View File
@@ -0,0 +1,80 @@
.jmSheet {
width: 100%;
background-color: #f8f8f8 !important;
}
.jmSheet li {
height: 55px;
border-bottom: 1px solid #eee;
display: flex;
/* justify-content: center; */
align-items: center;
box-sizing: border-box;
background-color: #fff;
gap: 10px;
padding: 0 10px;
}
.jmSheet li>.text {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.jmSheet li:hover {
cursor: pointer;
}
.jmSheet li:hover span {
color: #16b777;
}
.jmSheet li .img {
position: relative;
width: 24px;
height: 24px;
overflow: hidden;
border-radius: 5px;
}
.jmSheet li .img img {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
}
.jmSheet li span {
font-size: 14px;
color: rgba(0, 0, 0, .8);
font-weight: 600;
}
.jmSheet li .desc {
font-weight: normal;
color: #c2c2c2;
font-size: 12px;
}
.jmSheet .close {
height: 55px;
margin-top: 8px;
display: flex;
justify-content: center;
align-items: center;
background: #fff;
}
.jmSheet>h3 {
height: 40px;
display: flex;
justify-content: center;
align-items: center;
background-color: #fff;
font-weight: normal;
font-size: 14px;
border-bottom: 1px solid #eee;
color: #00000080;
box-sizing: border-box;
}
public/js/lay-module/jmSheet/jmSheet.js
+88
View File
@@ -0,0 +1,88 @@
layui.define(["jquery", "layer"], function (exports) {
"use strict";
var $ = layui.$;
var layer = layui.layer;
var jmSheet = {
open: function (obj) {
if (typeof obj.shadeClose === 'undefined') {
obj.shadeClose = true;
}
var align = "center"
if (typeof obj.align !== "undefined" && obj.align != "") {
switch (obj.align) {
case "left":
align = "flex-start";
break;
case "right":
align = "flex-end";
break;
default:
align = "center";
}
}
var html = "";
$.each(obj.content, function (k, v) {
var img = "";
if (typeof v.img !== 'undefined' && v.img != "") {
img = `<div class="img"><img src="${v.img}"></div>`;
}
html += `<li style="justify-content:${align};">
${img}
<div class="text">
<span>${v.text}</span>
<span class="desc">${v.desc || ''}</span>
</div>
</li>`
})
var btnClose = "";
var btnCloseSize = 0;
if (typeof obj.shadeClose !== 'undefined' && !obj.shadeClose) {
btnClose = `<a href="javascript:;" class="close">取消</a>`;
btnCloseSize = (55 + 8);
}
var title = "";
var titleSize = 0;
if (typeof obj.title !== 'undefined' && obj.title != "") {
title = `<h3>${obj.title}</h3>`;
titleSize = 40;
}
//弹出
var open = layer.open({
type: 1,
title: false,
closeBtn: 0,
offset: 'b',
anim: 'slideUp', // 从下往上
area: ['100%', titleSize + btnCloseSize + 55 * obj.content.length + 'px'],
shade: 0.1,
shadeClose: obj.shadeClose, // 是否点击遮罩关闭
id: obj.id || '',
content:
`<div class="jmSheet ${obj.addClass || ''}">
${title}
<ul>${html}</ul>
${btnClose}
</div>`
});
//关闭
$(`#layui-layer${open} .jmSheet .close`).on("click", function () {
layer.close(open);
})
//点击列表
$(`#layui-layer${open} .jmSheet`).on("click", "li", function () {
obj.callback($(this).index(), this, obj.content[$(this).index()]);
})
}
}
exports('jmSheet', jmSheet); // 输出模块
}).link(layui.cache.base+"jmSheet/jmSheet.css?v="+(new Date).getTime());
public/js/lay-module/layarea/layarea.js
+4040
View File
File diff suppressed because it is too large Load Diff
public/js/lay-module/layselect/layselect.js
+177
View File
@@ -0,0 +1,177 @@
/**
* layselect 下拉框插件，只支持单选
* @author:Darker.Wang
* @version:1.1（优化增加数据内部控制元素默认选择）
* @version:1.2（优化支持指定请求头认证，修复元素默认选择优先级错乱）
* render参数{
* 属性：
* elem：元素ID，带#号必传
* url：请求路径的URL，必传
* data:请求url所携带的参数，可选
* type:请求方式，默认为get，可选
* option:元素数据，数组，用于不通过请求url获取数据，本地自动赋值，可选
* select:指定选中的索引项，可选，分组时索引为：groupNum-itemNum,如：1-2 表示第一组里的第二个元素
* 方法：
* format:格式化方法映射，将返回的Data元素映射乘标准格式
* success:成功回调，返回加载后的对象数组
* fail:失败回调，加载失败的处理
* onselect:点击选择时事件响应（如事件无响应，记得加lay-filter属性=id）
* headers:可选，用于传递请求头认证，默认为：{Accept: "application/json; charset=utf-8"}
* contentType:可选，用于指定请求接口的数据类型，默认为：application/json
* }
* 请求返回需对象格式：rtvObj=option={status,code,codeName,select,...}，不满足的通过format映射处理 status=0 时表示禁用
* 其他说明：
* 1、分组展示按照：groupName，groupChildren 数组 [rtvObj]
* 2、暂不支持多选（后期版本规划：支持多选，在select标签上设置属性：multiple="true"）
* 3、获取原始数据，可通过调用success得到，返回原始数据的集合
* 4、点击事件回调，可通过实现onselect 触发，参数为当前点击的值
* @param exports
* @returns 返回一个对象
* 码云地址：https://gitee.com/godbirds/layselect
*/
layui.define(['element','form','jquery'],function(exports){
var element = layui.element;
var form = layui.form;
var $ = layui.jquery;
var obj={
//{elem,url,data,type,format}
render:function(param){
var that = this;
var eid = param.elem;
that.selectValues=new Array();
if(param.type == null || param.type==undefined){
param.type = 'get';//默认get请求
}
if(param.data){
param.data = JSON.stringify(data);
}else{
param.data = {}
}
if(param.url == null || param.url == '' || param.url==undefined){
if(param.option == null || param.option == undefined){
param.option = new Array();//重新定义为了正常显示下拉框
}
that._init(eid,param,param.option);
}else{
$.ajax({
url: param.url,
type: param.type,
data: param.data,
async: 'false',
dataType: 'json',
headers: param.headers||{Accept: "application/json; charset=utf-8"},
contentType : param.contentType||'application/json',//指定json头
success: function(data){
that._init(eid,param,data)
},
error: function (e) {
//加载失败执行回调函数
console.log("Ajax request "+param.url+" error! ");
if(param.fail){
param.fail(e);//加载失败回调函数，请求URL时才会触发
}
}
});
}
/***
* 初始化：data=[{code,status,codeName,select,groupName,groupChildren}]
*/
that._init=function(eid,param,data){
$(eid).empty();//请求成功时清空
$(eid).prepend("<option value=''>请选择</option>");//添加第一个option值
var option = new Array();
if(param.format){//格式化
for (var i = 0; i < data.length; i++) {
var tdata = param.format(data[i]);
option.push({
code:tdata.code,
status:tdata.status||'1',
select:tdata.select||'false',
codeName:tdata.codeName,
groupName:tdata.groupName,
groupChildren:tdata.groupChildren
});
}
}else{//不格式化
for (var i = 0; i < data.length; i++) {
option.push({
code:data[i].code,
status:data[i].status||'1',
select:data[i].select||'false',
codeName:data[i].codeName,
groupName:data[i].groupName,
groupChildren:data[i].groupChildren
});
}
}
var isgroup = false;
for (var i = 0; i < option.length; i++) {
//分组
if(option[i].groupChildren != null && option[i].groupChildren != undefined &&
option[i].groupChildren != '' && option[i].groupChildren.length > 0){
isgroup = true;//分组标识
$(eid).append("<optgroup label='"+option[i].groupName+"'>");
option[i].groupChildren.forEach(function(item,index){
var status = "";var topborder ="",buttomborder="",checkoff="";
if(item.status && item.status == '0'){status = "disabled='disabled'";}//是否有效
$(eid).append("<option value='"+item.code+"' "+status+">"+item.codeName+"</option>");
//优先级：内部数据option中的选中标识优先级高于外部指定的优先级
if(item.select != undefined && (item.select == 'true' || item.select == true) && item.status != '0'){
that.selectValues.push(item);
}
});
$(eid).append("</optgroup>");
}else{//不分组
isgroup = false;//分组标识
var status = "";var topborder ="",buttomborder="",checkoff="";
if(option[i].status && option[i].status == '0'){status = "disabled='disabled'";}//是否有效
$(eid).append("<option value='"+option[i].code+"' "+status+">"+option[i].codeName+"</option>");
//内部数据option中的选中标识优先级高于外部指定的优先级
if(option[i].select != undefined && (option[i].select == 'true' || option[i].select == true) && option[i].status != '0'){
that.selectValues.push(option[i]);
}
}
}
//内部无选中则判断外部是否指定，遵循内部优先级高于外部
if(that.selectValues.length == 0 && param.select != undefined){
var item;
var si = param.select+"";
if(isgroup && si.indexOf("-") > 0){//分组时索引为指定为 group-item
var s = si.split("-");//拆分组
item = option[s[0]].groupChildren[s[1]];
}else{
item = option[si];
}
if(item && item.status != '0'){
that.selectValues.push(item);
}
}//选择指定选中项
//var k = eid.replace('#','');
var multiple = $(eid).attr('multiple');//多选控制，暂时无用
//console.log(eid,that.selectValues);
if(that.selectValues.length>0){//默认选中数据在循环外部，提高渲染效率
that.selectValues.forEach(function(item,index){
$(eid).find("option[value = '"+item.code+"']").attr("selected","selected");
});
}else{
//$(eid).find("option[value = '']").attr("selected","selected");//默认选中请选择
}
//加载成功执行回调函数
if(param.success){
//console.log(k+" call success",option);
param.success(option);
option = null;
}
//监听事件：这里做自己想做的事情
form.render('select');//select是固定写法 不是选择器
form.on('select('+eid.replace('#','')+')', function(data){
if(param.onselect){//点击选择事件
param.onselect(data.value);
}
});
}
}
};
exports('layselect',obj);
});
public/js/lay-module/layuimini/miniAdmin.js
+368
View File
@@ -0,0 +1,368 @@
/**
* date:2020/02/27
* author:Mr.Chung
* version:2.0
* description:layuimini 主体框架扩展
*/
layui.define(["jquery", "miniMenu", "element", "miniTab", "miniTheme"], function (exports) {
var $ = layui.$,
layer = layui.layer,
miniMenu = layui.miniMenu,
miniTheme = layui.miniTheme,
element = layui.element ,
miniTab = layui.miniTab;
if (!/http(s*):\/\//.test(location.href)) {
var tips = "请先将项目部署至web容器（Apache/Tomcat/Nginx/IIS/等），否则部分数据将无法显示";
return layer.alert(tips);
}
var miniAdmin = {
/**
* 后台框架初始化
* @param options.iniUrl 后台初始化接口地址
* @param options.clearUrl 后台清理缓存接口
* @param options.urlHashLocation URL地址hash定位
* @param options.bgColorDefault 默认皮肤
* @param options.multiModule 是否开启多模块
* @param options.menuChildOpen 是否展开子菜单
* @param options.loadingTime 初始化加载时间
* @param options.pageAnim iframe窗口动画
* @param options.maxTabNum 最大的tab打开数量
*/
render: function (options) {
options.iniUrl = options.iniUrl || null;
options.clearUrl = options.clearUrl || null;
options.urlHashLocation = options.urlHashLocation || false;
options.bgColorDefault = options.bgColorDefault || 0;
options.multiModule = options.multiModule || false;
options.menuChildOpen = options.menuChildOpen || false;
options.loadingTime = options.loadingTime || 0;
options.pageAnim = options.pageAnim || false;
options.maxTabNum = options.maxTabNum || 200;
options.isHideOpenMenu = !options.isHideOpenMenu ? options.isHideOpenMenu : true;
$.getJSON(options.iniUrl, function (data) {
if (data == null) {
miniAdmin.error('暂无菜单信息')
} else {
miniAdmin.renderLogo(data.logoInfo);
miniAdmin.renderClear(options.clearUrl);
miniAdmin.renderHome(data.homeInfo);
miniAdmin.renderAnim(options.pageAnim);
miniAdmin.listen();
miniMenu.render({
menuList: data.menuInfo,
multiModule: options.multiModule,
menuChildOpen: options.menuChildOpen
});
miniTab.render({
filter: 'layuiminiTab',
urlHashLocation: options.urlHashLocation,
multiModule: options.multiModule,
menuChildOpen: options.menuChildOpen,
maxTabNum: options.maxTabNum,
menuList: data.menuInfo,
homeInfo: data.homeInfo,
listenSwichCallback: function () {
miniAdmin.renderDevice();
}
});
miniTheme.render({
bgColorDefault: options.bgColorDefault,
listen: true,
});
miniAdmin.deleteLoader(options.loadingTime);
miniAdmin.isHideOpenMenu(options.isHideOpenMenu);
}
}).fail(function () {
miniAdmin.error('菜单接口有误');
});
},
/**
* 点击左侧下拉菜单，关闭其他下拉菜单
* @param data
*/
isHideOpenMenu: function (data) {
$(".layui-side").on("click", ".layui-nav-item", function () {
if (data) {
$(this).siblings('li').attr('class', 'layui-nav-item');
}
});
},
/**
* 初始化logo
* @param data
*/
renderLogo: function (data) {
var html = '<a href="' + data.href + '"><img src="' + data.image + '" style="width:95%;" alt="logo"><h1>' + data.title + '</h1></a>';
$('.layuimini-logo').html(html);
},
/**
* 初始化首页
* @param data
*/
renderHome: function (data) {
sessionStorage.setItem('layuiminiHomeHref', data.href);
$('#layuiminiHomeTabId').html('<span class="layuimini-tab-active"></span><span class="disable-close">' + data.title + '</span><i class="layui-icon layui-unselect layui-tab-close">ဆ</i>');
$('#layuiminiHomeTabId').attr('lay-id', data.href);
$('#layuiminiHomeTabIframe').html('<iframe width="100%" height="100%" frameborder="no" border="0" marginwidth="0" marginheight="0" src="' + data.href + '"></iframe>');
},
/**
* 初始化缓存地址
* @param clearUrl
*/
renderClear: function (clearUrl) {
$('.layuimini-clear').attr('data-href',clearUrl);
},
/**
* 初始化iframe窗口动画
* @param anim
*/
renderAnim: function (anim) {
if (anim) {
$('#layuimini-bg-color').after('<style id="layuimini-page-anim">' +
'.layui-tab-item.layui-show {animation:moveTop 1s;-webkit-animation:moveTop 1s;animation-fill-mode:both;-webkit-animation-fill-mode:both;position:relative;height:100%;-webkit-overflow-scrolling:touch;}\n' +
'@keyframes moveTop {0% {opacity:0;-webkit-transform:translateY(30px);-ms-transform:translateY(30px);transform:translateY(30px);}\n' +
' 100% {opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);}\n' +
'}\n' +
'@-o-keyframes moveTop {0% {opacity:0;-webkit-transform:translateY(30px);-ms-transform:translateY(30px);transform:translateY(30px);}\n' +
' 100% {opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);}\n' +
'}\n' +
'@-moz-keyframes moveTop {0% {opacity:0;-webkit-transform:translateY(30px);-ms-transform:translateY(30px);transform:translateY(30px);}\n' +
' 100% {opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);}\n' +
'}\n' +
'@-webkit-keyframes moveTop {0% {opacity:0;-webkit-transform:translateY(30px);-ms-transform:translateY(30px);transform:translateY(30px);}\n' +
' 100% {opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);}\n' +
'}' +
'</style>');
}
},
fullScreen: function () {
var el = document.documentElement;
var rfs = el.requestFullScreen || el.webkitRequestFullScreen;
if (typeof rfs != "undefined" && rfs) {
rfs.call(el);
} else if (typeof window.ActiveXObject != "undefined") {
var wscript = new ActiveXObject("WScript.Shell");
if (wscript != null) {
wscript.SendKeys("{F11}");
}
} else if (el.msRequestFullscreen) {
el.msRequestFullscreen();
} else if (el.oRequestFullscreen) {
el.oRequestFullscreen();
} else if (el.webkitRequestFullscreen) {
el.webkitRequestFullscreen();
} else if (el.mozRequestFullScreen) {
el.mozRequestFullScreen();
} else {
miniAdmin.error('浏览器不支持全屏调用！');
}
},
/**
* 退出全屏
*/
exitFullScreen: function () {
var el = document;
var cfs = el.cancelFullScreen || el.webkitCancelFullScreen || el.exitFullScreen;
if (typeof cfs != "undefined" && cfs) {
cfs.call(el);
} else if (typeof window.ActiveXObject != "undefined") {
var wscript = new ActiveXObject("WScript.Shell");
if (wscript != null) {
wscript.SendKeys("{F11}");
}
} else if (el.msExitFullscreen) {
el.msExitFullscreen();
} else if (el.oRequestFullscreen) {
el.oCancelFullScreen();
}else if (el.mozCancelFullScreen) {
el.mozCancelFullScreen();
} else if (el.webkitCancelFullScreen) {
el.webkitCancelFullScreen();
} else {
miniAdmin.error('浏览器不支持全屏调用！');
}
},
/**
* 初始化设备端
*/
renderDevice: function () {
if (miniAdmin.checkMobile()) {
$('.layuimini-tool i').attr('data-side-fold', 1);
$('.layuimini-tool i').attr('class', 'layui-icon layui-icon-list');
$('.layui-layout-body').removeClass('layuimini-mini');
$('.layui-layout-body').addClass('layuimini-all');
}
},
/**
* 初始化加载时间
* @param loadingTime
*/
deleteLoader: function (loadingTime) {
if (loadingTime) {
setTimeout(function () {
$('.layuimini-loader').fadeOut();
}, loadingTime * 1000)
} else {
$('.layuimini-loader').fadeOut();
}
},
/**
* 成功
* @param title
* @returns {*}
*/
success: function (title) {
return layer.msg(title, {icon: 1, shade: this.shade, scrollbar: false, time: 2000, shadeClose: true});
},
/**
* 失败
* @param title
* @returns {*}
*/
error: function (title) {
return layer.msg(title, {icon: 2, shade: this.shade, scrollbar: false, time: 3000, shadeClose: true});
},
/**
* 判断是否为手机
* @returns {boolean}
*/
checkMobile: function () {
var ua = navigator.userAgent.toLocaleLowerCase();
var pf = navigator.platform.toLocaleLowerCase();
var isAndroid = (/android/i).test(ua) || ((/iPhone|iPod|iPad/i).test(ua) && (/linux/i).test(pf))
|| (/ucweb.*linux/i.test(ua));
var isIOS = (/iPhone|iPod|iPad/i).test(ua) && !isAndroid;
var isWinPhone = (/Windows Phone|ZuneWP7/i).test(ua);
var clientWidth = document.documentElement.clientWidth;
if (!isAndroid && !isIOS && !isWinPhone && clientWidth > 1024) {
return false;
} else {
return true;
}
},
/**
* 监听
*/
listen: function () {
/**
* 清理
*/
$('body').on('click', '[data-clear]', function () {
var loading = layer.load(0, {shade: false, time: 2 * 1000});
sessionStorage.clear();
// 判断是否清理服务端
var clearUrl = $(this).attr('data-href');
if (clearUrl != undefined && clearUrl != '' && clearUrl != null) {
$.getJSON(clearUrl, function (data, status) {
layer.close(loading);
if (data.code != 0) {
return miniAdmin.error(data.msg);
} else {
return miniAdmin.success(data.msg);
}
}).fail(function () {
layer.close(loading);
return miniAdmin.error('清理缓存接口有误');
});
} else {
layer.close(loading);
return miniAdmin.success('清除缓存成功');
}
});
/**
* 刷新
*/
$('body').on('click', '[data-refresh]', function () {
$(".layui-tab-item.layui-show").find("iframe")[0].contentWindow.location.reload();
miniAdmin.success('刷新成功');
});
/**
* 监听提示信息
*/
$("body").on("mouseenter", ".layui-nav-tree .menu-li", function () {
if (miniAdmin.checkMobile()) {
return false;
}
var classInfo = $(this).attr('class'),
tips = $(this).prop("innerHTML"),
isShow = $('.layuimini-tool i').attr('data-side-fold');
if (isShow == 0 && tips) {
tips = "<ul class='layuimini-menu-left-zoom layui-nav layui-nav-tree layui-this'><li class='layui-nav-item layui-nav-itemed'>"+tips+"</li></ul>" ;
window.openTips = layer.tips(tips, $(this), {
tips: [2, '#2f4056'],
time: 300000,
skin:"popup-tips",
success:function (el) {
var left = $(el).position().left - 10 ;
$(el).css({ left:left });
element.render();
}
});
}
});
$("body").on("mouseleave", ".popup-tips", function () {
if (miniAdmin.checkMobile()) {
return false;
}
var isShow = $('.layuimini-tool i').attr('data-side-fold');
if (isShow == 0) {
try {
layer.close(window.openTips);
} catch (e) {
console.log(e.message);
}
}
});
/**
* 全屏
*/
$('body').on('click', '[data-check-screen]', function () {
var check = $(this).attr('data-check-screen');
if (check == 'full') {
miniAdmin.fullScreen();
$(this).attr('data-check-screen', 'exit');
$(this).html('<i class="layui-icon layui-icon-screen-restore"></i>');
} else {
miniAdmin.exitFullScreen();
$(this).attr('data-check-screen', 'full');
$(this).html('<i class="layui-icon layui-icon-screen-full"></i>');
}
});
/**
* 点击遮罩层
*/
$('body').on('click', '.layuimini-make', function () {
miniAdmin.renderDevice();
});
}
};
exports("miniAdmin", miniAdmin);
});
public/js/lay-module/layuimini/miniMenu.js
+253
View File
@@ -0,0 +1,253 @@
/**
* date:2020/02/27
* author:Mr.Chung
* version:2.0
* description:layuimini 菜单框架扩展
*/
layui.define(["element","laytpl" ,"jquery"], function (exports) {
var element = layui.element,
$ = layui.$,
laytpl = layui.laytpl,
layer = layui.layer;
var miniMenu = {
/**
* 菜单初始化
* @param options.menuList 菜单数据信息
* @param options.multiModule 是否开启多模块
* @param options.menuChildOpen 是否展开子菜单
*/
render: function (options) {
options.menuList = options.menuList || [];
options.multiModule = options.multiModule || false;
options.menuChildOpen = options.menuChildOpen || false;
if (options.multiModule) {
miniMenu.renderMultiModule(options.menuList, options.menuChildOpen);
} else {
miniMenu.renderSingleModule(options.menuList, options.menuChildOpen);
}
miniMenu.listen();
},
/**
* 单模块
* @param menuList 菜单数据
* @param menuChildOpen 是否默认展开
*/
renderSingleModule: function (menuList, menuChildOpen) {
menuList = menuList || [];
var leftMenuHtml = '',
childOpenClass = '',
leftMenuCheckDefault = 'layui-this';
var me = this ;
if (menuChildOpen) childOpenClass = ' layui-nav-itemed';
leftMenuHtml = this.renderLeftMenu(menuList,{ childOpenClass:childOpenClass }) ;
$('.layui-layout-body').addClass('layuimini-single-module'); //单模块标识
$('.layuimini-header-menu').remove();
$('.layuimini-menu-left').html(leftMenuHtml);
element.init();
},
/**
* 渲染一级菜单
*/
compileMenu: function(menu,isSub){
var menuHtml = '<li {{#if( d.menu){ }} data-menu="{{d.menu}}" {{#}}} class="layui-nav-item menu-li {{d.childOpenClass}} {{d.className}}" {{#if( d.id){ }} id="{{d.id}}" {{#}}}> <a href="javascript:;" {{#if( d.menu){ }} data-menu="{{d.menu}}" {{#}}} {{#if( d.dizhi){ }} layuimini-href="{{d.dizhi}}" {{#}}} {{#if( d.target){ }} target="{{d.target}}" {{#}}}>{{#if( d.icon){ }} <i class="layui-icon layui-icon-{{d.icon}}"></i> {{#}}} <span class="layui-left-nav {{-d.title}}">{{-d.title}}</span></a> {{# if(d.children){}} {{-d.children}} {{#}}} </li>' ;
if(isSub){
menuHtml = '<dd class="menu-dd {{d.childOpenClass}} {{ d.className }}"> <a href="javascript:;" {{#if( d.menu){ }} data-menu="{{d.menu}}" {{#}}} {{#if( d.id){ }} id="{{d.id}}" {{#}}} {{#if(( !d.children || !d.children.length ) && d.dizhi){ }} layuimini-href="{{d.dizhi}}" {{#}}} {{#if( d.target){ }} target="{{d.target}}" {{#}}}> {{#if( d.icon){ }} <i class="layui-icon layui-icon-{{d.icon}}"></i> {{#}}} <span class="layui-left-nav {{-d.title}}"> {{-d.title}}</span></a> {{# if(d.children){}} {{-d.children}} {{#}}}</dd>'
}
return laytpl(menuHtml).render(menu);
},
compileMenuContainer :function(menu,isSub){
var wrapperHtml = '<ul class="layui-nav layui-nav-tree layui-left-nav-tree {{d.className}}" id="{{d.id}}">{{-d.children}}</ul>' ;
if(isSub){
wrapperHtml = '<dl class="layui-nav-child">{{-d.children}}</dl>' ;
}
if(!menu.children){
return "";
}
return laytpl(wrapperHtml).render(menu);
},
each:function(list,callback){
var _list = [];
for(var i = 0 ,length = list.length ; i<length ;i++ ){
_list[i] = callback(i,list[i]) ;
}
return _list ;
},
renderChildrenMenu:function(menuList,options){
var me = this ;
menuList = menuList || [] ;
// console.log("menuList",menuList);
var html = this.each(menuList,function (idx,menu) {
if(menu.children && menu.children.length){
menu.children = me.renderChildrenMenu(menu.children,{ childOpenClass: options.childOpenClass || '' });
}
menu.className = "" ;
menu.childOpenClass = options.childOpenClass || ''
return me.compileMenu(menu,true)
}).join("");
return me.compileMenuContainer({ children:html },true)
},
renderLeftMenu :function(leftMenus,options){
options = options || {};
var me = this ;
var leftMenusHtml = me.each(leftMenus || [],function (idx,leftMenu) { // 左侧菜单遍历
var children = me.renderChildrenMenu(leftMenu.children, { childOpenClass:options.childOpenClass });
var leftMenuHtml = me.compileMenu({
href: leftMenu.href,
dizhi: leftMenu.dizhi,
id:leftMenu.id,
target: leftMenu.target,
childOpenClass: options.childOpenClass,
icon: leftMenu.icon,
title: leftMenu.title,
children: children,
className: '',
});
return leftMenuHtml ;
}).join("");
leftMenusHtml = me.compileMenuContainer({ id:options.parentMenuId,className:options.leftMenuCheckDefault,children:leftMenusHtml }) ;
return leftMenusHtml ;
},
/**
* 多模块
* @param menuList 菜单数据
* @param menuChildOpen 是否默认展开
*/
renderMultiModule: function (menuList, menuChildOpen) {
menuList = menuList || [];
var me = this ;
var headerMenuHtml = '',
headerMobileMenuHtml = '',
leftMenuHtml = '',
leftMenuCheckDefault = 'layui-this',
childOpenClass = '',
headerMenuCheckDefault = 'layui-this';
if (menuChildOpen) childOpenClass = ' layui-nav-itemed';
var headerMenuHtml = this.each(menuList, function (index, val) { //顶部菜单渲染
var menu = 'multi_module_' + index ;
var id = menu+"HeaderId";
var topMenuItemHtml = "" ;
topMenuItemHtml = me.compileMenu({
className:headerMenuCheckDefault,
menu:menu,
id:id,
title:val.title,
href:"",
target:"",
children:""
});
leftMenuHtml+=me.renderLeftMenu(val.children,{
parentMenuId:menu,
childOpenClass:childOpenClass,
leftMenuCheckDefault:leftMenuCheckDefault
});
headerMobileMenuHtml +=me.compileMenu({ id:id,menu:menu,id:id,icon:val.icon, title:val.title, },true);
headerMenuCheckDefault = "";
leftMenuCheckDefault = "layui-hide" ;
return topMenuItemHtml ;
}).join("");
$('.layui-layout-body').addClass('layuimini-multi-module'); //多模块标识
$('.layuimini-menu-header-pc').html(headerMenuHtml); //电脑
$('.layuimini-menu-left').html(leftMenuHtml);
$('.layuimini-menu-header-mobile').html(headerMobileMenuHtml); //手机
element.init();
},
/**
* 监听
*/
listen: function () {
/**
* 菜单模块切换
*/
$('body').on('click', '[data-menu]', function () {
var loading = layer.load(0, {shade: false, time: 2 * 1000});
var menuId = $(this).attr('data-menu');
// header
$(".layuimini-header-menu .layui-nav-item.layui-this").removeClass('layui-this');
$(this).addClass('layui-this');
// left
$(".layuimini-menu-left .layui-nav.layui-nav-tree.layui-this").addClass('layui-hide');
$(".layuimini-menu-left .layui-nav.layui-nav-tree.layui-this.layui-hide").removeClass('layui-this');
$("#" + menuId).removeClass('layui-hide');
$("#" + menuId).addClass('layui-this');
layer.close(loading);
});
/**
* 菜单缩放
*/
$('body').on('click', '.layuimini-site-mobile', function () {
var loading = layer.load(0, {shade: false, time: 2 * 1000});
var isShow = $('.layuimini-tool [data-side-fold]').attr('data-side-fold');
if (isShow == 1) { // 缩放
$('.layuimini-tool [data-side-fold]').attr('data-side-fold', 0);
$('.layuimini-tool [data-side-fold]').attr('class', 'layui-icon layui-icon-spread-left');
$('.layui-layout-body').removeClass('layuimini-all');
$('.layui-layout-body').addClass('layuimini-mini');
} else { // 正常
$('.layuimini-tool [data-side-fold]').attr('data-side-fold', 1);
$('.layuimini-tool [data-side-fold]').attr('class', 'layui-icon layui-icon-shrink-right');
$('.layui-layout-body').removeClass('layuimini-mini');
$('.layui-layout-body').addClass('layuimini-all');
layer.close(window.openTips);
}
element.init();
layer.close(loading);
});
/**
* 菜单缩放
*/
$('body').on('click', '[data-side-fold]', function () {
var loading = layer.load(0, {shade: false, time: 2 * 1000});
var isShow = $('.layuimini-tool [data-side-fold]').attr('data-side-fold');
if (isShow == 1) { // 缩放
$('.layuimini-tool [data-side-fold]').attr('data-side-fold', 0);
$('.layuimini-tool [data-side-fold]').attr('class', 'layui-icon layui-icon-spread-left');
$('.layui-layout-body').removeClass('layuimini-all');
$('.layui-layout-body').addClass('layuimini-mini');
// $(".menu-li").each(function (idx,el) {
// $(el).addClass("hidden-sub-menu");
// });
} else { // 正常
$('.layuimini-tool [data-side-fold]').attr('data-side-fold', 1);
$('.layuimini-tool [data-side-fold]').attr('class', 'layui-icon layui-icon-shrink-right');
$('.layui-layout-body').removeClass('layuimini-mini');
$('.layui-layout-body').addClass('layuimini-all');
// $(".menu-li").each(function (idx,el) {
// $(el).removeClass("hidden-sub-menu");
// });
layer.close(window.openTips);
}
element.init();
layer.close(loading);
});
/**
* 手机端点开模块
*/
$('body').on('click', '.layuimini-header-menu.layuimini-mobile-show dd', function () {
var loading = layer.load(0, {shade: false, time: 2 * 1000});
var check = $('.layuimini-tool [data-side-fold]').attr('data-side-fold');
if(check === "1"){
$('.layuimini-site-mobile').trigger("click");
element.init();
}
layer.close(loading);
});
},
};
exports("miniMenu", miniMenu);
});
public/js/lay-module/layuimini/miniTab.js
+676
View File
@@ -0,0 +1,676 @@
/**
* date:2020/02/27
* author:Mr.Chung
* version:2.0
* description:layuimini tab框架扩展
* 新增功能: 点击左侧菜单，如果标签存在则刷新，不存在则新建
* 修改bug: 打开多个标签时，点击关闭当前标签时会把当前标签及后面的标签全部关闭的bug，364行
*/
layui.define(["element", "layer", "jquery","tabs"], function (exports) {
var element = layui.element,
tabs=layui.tabs,
layer = layui.layer,
$ = layui.$;
var miniTab = {
/**
* 初始化tab
* @param options
*/
render: function (options) {
options.filter = options.filter || null;
options.multiModule = options.multiModule || false;
options.urlHashLocation = options.urlHashLocation || false;
options.maxTabNum = options.maxTabNum || 200;
options.menuList = options.menuList || []; // todo 后期菜单想改为不操作dom, 而是直接操作初始化传过来的数据
options.homeInfo = options.homeInfo || {};
options.listenSwichCallback = options.listenSwichCallback || function () {
};
miniTab.listen(options);
miniTab.listenRoll();
miniTab.listenSwitch(options);
miniTab.listenHash(options);
},
/**
* 新建tab窗口
* @param options.tabId
* @param options.href
* @param options.title
* @param options.isIframe
* @param options.maxTabNum
*/
create: function (options) {
options.href = options.href || null;
options.tabId = options.tabId || options.href;
options.title = options.title || null;
options.isIframe = options.isIframe || false;
options.maxTabNum = options.maxTabNum || 200;
if ($(".layuimini-tab .layui-tab-title li").length >= options.maxTabNum) {
layer.msg('Tab窗口已达到限定数量，请先关闭部分Tab');
return false;
}
var ele = element;
if (options.isIframe) ele = parent.layui.element;
//
console.log('aaa');
ele.tabAdd('layuiminiTab', {
title: '<span class="layuimini-tab-active"></span><span>' + options.title + '</span><i class="layui-icon layui-unselect layui-tab-close">ဆ</i>' //用于演示
, content: '<iframe width="100%" height="100%" frameborder="no" border="0" marginwidth="0" marginheight="0" id="'+options.tabId+'" src="' + options.href + '"></iframe>'
, id: options.tabId
});
console.log('bbb');
//
$('.layuimini-menu-left').attr('layuimini-tab-tag', 'add');
sessionStorage.setItem('layuiminimenu_' + options.tabId, options.title);
},
/**
* 切换选项卡
* @param tabId
*/
change: function (tabId) {
element.tabChange('layuiminiTab', tabId);
},
/**
* 删除tab窗口
* @param tabId
* @param isParent
*/
delete: function (tabId, isParent) {
// todo 未知BUG，不知道是不是layui问题，必须先删除元素
$(".layuimini-tab .layui-tab-title .layui-unselect.layui-tab-bar").remove();
if (isParent === true) {
parent.layui.element.tabDelete('layuiminiTab', tabId);
} else {
element.tabDelete('layuiminiTab', tabId);
}
},
/**
* 在iframe层打开新tab方法
*/
openNewTabByIframe: function (options) {
options.href = options.href || null;
options.id = options.id || options.href;
options.title = options.title || null;
var loading = parent.layer.load(0, {shade: false, time: 2 * 1000});
if (options.href === null || options.href === undefined) options.href = new Date().getTime();
var checkTab = miniTab.check(options.id, true);
if (!checkTab) {
parent.layui.element.tabChange('layuiminiTab','0');
setTimeout(function(){
miniTab.create({
tabId: options.id,
href: options.href,
title: options.title,
isIframe: true,
});
parent.layui.element.tabChange('layuiminiTab', options.id);
parent.layer.close(loading);
},100);
}else{
parent.layui.element.tabChange('layuiminiTab', options.id);
parent.layer.close(loading);
}
},
openNewTab: function (options) {
// console.log(options,'o');
options.href = options.href || null;
options.id = options.id || options.href;
options.title = options.title || null;
// console.log(options,'p');
var loading = layer.load(0, {shade: false, time: 2 * 1000});
if (options.href === null || options.href === undefined) options.href = new Date().getTime();
var checkTab = miniTab.check(options.id, true);
// console.log(checkTab,'po',options.id);
if (!checkTab) {
layui.element.tabChange('layuiminiTab','0');
setTimeout(() => {
miniTab.create({
tabId: options.id,
href: options.href,
title: options.title,
isIframe: true,
});
layui.element.tabChange('layuiminiTab', options.id);
layer.close(loading);
}, 100);
}else{
layui.element.tabChange('layuiminiTab', options.id);
layer.close(loading);
}
},
/**
* 在iframe层关闭当前tab方法
*/
deleteCurrentByIframe: function () {
var ele = $(".layuimini-tab .layui-tab-title li.layui-this", parent.document);
if (ele.length > 0) {
var layId = $(ele[0]).attr('lay-id');
miniTab.delete(layId, true);
}
},
/**
* 判断tab窗口
*/
check: function (tabId, isIframe) {
// 判断选项卡上是否有
tabId=tabId+"";
var checkTab = false;
if (isIframe === undefined || isIframe === false) {
$(".layui-tab-title li").each(function () {
var checkTabId = $(this).attr('lay-id');
if (checkTabId != null && checkTabId === tabId) {
checkTab = true;
}
});
} else {
parent.layui.$(".layui-tab-title li").each(function () {
var checkTabId = $(this).attr('lay-id');
if (checkTabId != null && checkTabId === tabId) {
checkTab = true;
}
});
}
return checkTab;
},
/**
* 开启tab右键菜单
* @param tabId
* @param left
*/
openTabRignMenu: function (tabId, left) {
miniTab.closeTabRignMenu();
var menuHtml = '<div class="layui-unselect layui-form-select layui-form-selected layuimini-tab-mousedown layui-show" data-tab-id="' + tabId + '" style="left: ' + left + 'px!important">\n' +
'<dl>\n' +
'<dd><a href="javascript:;" layuimini-tab-menu-close="current">关 闭 当 前</a></dd>\n' +
'<dd><a href="javascript:;" layuimini-tab-menu-close="other">关 闭 其 他</a></dd>\n' +
'<dd><a href="javascript:;" layuimini-tab-menu-close="all">关 闭 全 部</a></dd>\n' +
'<dd><a href="javascript:;" layuimini-tab-menu-close="divorced">脱 离 标 签</a></dd>\n' +
'</dl>\n' +
'</div>';
var makeHtml = '<div class="layuimini-tab-make"></div>';
$('.layuimini-tab .layui-tab-title').after(menuHtml);
$('.layuimini-tab .layui-tab-content').after(makeHtml);
},
/**
* 关闭tab右键菜单
*/
closeTabRignMenu: function () {
$('.layuimini-tab-mousedown').remove();
$('.layuimini-tab-make').remove();
},
/**
* 查询菜单信息
* @param href
* @param menuList
*/
searchMenu: function (href, menuList) {
var menu;
for (key in menuList) {
var item = menuList[key];
if (item.href === href) {
menu = item;
break;
}
if (item.child) {
newMenu = miniTab.searchMenu(href, item.child);
if (newMenu) {
menu = newMenu;
break;
}
}
}
return menu;
},
/**
* 监听
* @param options
*/
listen: function (options) {
options = options || {};
options.maxTabNum = options.maxTabNum || 200;
/**
* 打开新窗口
*/
$('body').on('click', '[layuimini-href]', function () {
var loading = layer.load(0, {shade: false, time: 2 * 1000});
var tabId = $(this).attr('layuimini-href'),
href = $(this).attr('layuimini-href'),
title = $(this).text(),
target = $(this).attr('target');
var el = $("[layuimini-href='" + href + "']", ".layuimini-menu-left");
layer.close(window.openTips);
if (el.length) {
$(el).closest(".layui-nav-tree").find(".layui-this").removeClass("layui-this");
$(el).parent().addClass("layui-this");
}
if (target === '_blank') {
layer.close(loading);
window.open(href, "_blank");
return false;
}
if (tabId === null || tabId === undefined) tabId = new Date().getTime();
var checkTab = miniTab.check(tabId);
if(checkTab){
miniTab.change(tabId);
}
if (!checkTab) {
miniTab.create({
tabId: tabId,
href: href,
title: title,
isIframe: false,
maxTabNum: options.maxTabNum,
});
}
element.tabChange('layuiminiTab', tabId);
layer.close(loading);
});
/**
* 在iframe子菜单上打开新窗口
*/
$('body').on('click', '[layuimini-content-href]', function () {
var loading = parent.layer.load(0, {shade: false, time: 2 * 1000});
var tabId = $(this).attr('layuimini-content-href'),
href = $(this).attr('layuimini-content-href'),
title = $(this).attr('data-title'),
target = $(this).attr('target');
if (target === '_blank') {
parent.layer.close(loading);
window.open(href, "_blank");
return false;
}
if (tabId === null || tabId === undefined) tabId = new Date().getTime();
var checkTab = miniTab.check(tabId, true);
if (!checkTab) {
miniTab.create({
tabId: tabId,
href: href,
title: title,
isIframe: true,
maxTabNum: options.maxTabNum,
});
}
parent.layui.element.tabChange('layuiminiTab', tabId);
parent.layer.close(loading);
});
/**
* 关闭选项卡
**/
$('body').on('click', '.layuimini-tab .layui-tab-title .layui-tab-close', function () {
var loading = layer.load(0, {shade: false, time: 2 * 1000});
var $parent = $(this).parent();
var tabId = $parent.attr('lay-id');
if (tabId !== undefined || tabId !== null) {
miniTab.delete(tabId);
}
layer.close(loading);
});
/**
* 选项卡操作
*/
$('body').on('click', '[layuimini-tab-close]', function () {
var loading = layer.load(0, {shade: false, time: 2 * 1000});
var closeType = $(this).attr('layuimini-tab-close');
$(".layuimini-tab .layui-tab-title li").each(function () {
var tabId = $(this).attr('lay-id');
var id = $(this).attr('id');
var isCurrent = $(this).hasClass('layui-this');
if (id !== 'layuiminiHomeTabId') {
if (closeType === 'all') {
miniTab.delete(tabId);
} else {
if (closeType === 'current' && isCurrent) {
miniTab.delete(tabId);
} else if (closeType === 'other' && !isCurrent) {
miniTab.delete(tabId);
}
}
}
});
layer.close(loading);
});
/**
* 禁用网页右键
*/
$(".layuimini-tab .layui-tab-title").unbind("mousedown").bind("contextmenu", function (e) {
e.preventDefault();
return false;
});
/**
* 注册鼠标右键
*/
$('body').on('mousedown', '.layuimini-tab .layui-tab-title li', function (e) {
var left = $(this).offset().left - $('.layuimini-tab ').offset().left + ($(this).width() / 2),
tabId = $(this).attr('lay-id');
if (e.which === 3) {
miniTab.openTabRignMenu(tabId, left);
}
});
/**
* 关闭tab右键菜单
*/
$('body').on('click', '.layui-body,.layui-header,.layuimini-menu-left,.layuimini-tab-make', function () {
miniTab.closeTabRignMenu();
});
/**
* tab右键选项卡操作
*/
$('body').on('click', '[layuimini-tab-menu-close]', function () {
var loading = layer.load(0, {shade: false, time: 2 * 1000});
var closeType = $(this).attr('layuimini-tab-menu-close'),
currentTabId = $('.layuimini-tab-mousedown').attr('data-tab-id');
$(".layuimini-tab .layui-tab-title li").each(function () {
var tabId = $(this).attr('lay-id');
var id = $(this).attr('id');
if (id !== 'layuiminiHomeTabId') {
if (closeType === 'all') {
miniTab.delete(tabId);
} else {
if (closeType === 'current' && currentTabId === tabId) {
miniTab.delete(tabId);
return false;
} else if (closeType === 'other' && currentTabId !== tabId) {
miniTab.delete(tabId);
} else if (closeType === 'divorced' && currentTabId === tabId) {
miniTab.divorced(tabId);
}
}
}
});
miniTab.closeTabRignMenu();
layer.close(loading);
});
},
/**
* 监听tab切换
* @param options
*/
listenSwitch: function (options) {
options.filter = options.filter || null;
options.multiModule = options.multiModule || false;
options.urlHashLocation = options.urlHashLocation || false;
options.listenSwichCallback = options.listenSwichCallback || function () {
};
element.on('tab(' + options.filter + ')', function (data) {
var tabId = $(this).attr('lay-id');
if (options.urlHashLocation) {
location.hash = '/' + tabId;
}
if (typeof options.listenSwichCallback === 'function') {
options.listenSwichCallback();
}
if (typeof options.switchtoindex === 'function') {
options.switchtoindex();
}
// 判断是否为新增窗口
if ($('.layuimini-menu-left').attr('layuimini-tab-tag') === 'add') {
$('.layuimini-menu-left').attr('layuimini-tab-tag', 'no')
}
$("div.layui-side ul li.layui-nav-itemed").removeClass("layui-nav-itemed");
$("[layuimini-href]").parent().removeClass('layui-this');
if (options.multiModule) {
miniTab.listenSwitchMultiModule(tabId);
} else {
miniTab.listenSwitchSingleModule(tabId);
}
miniTab.rollPosition();
});
},
/**
* 监听hash变化
* @param options
* @returns {boolean}
*/
listenHash: function (options) {
options.urlHashLocation = options.urlHashLocation || false;
options.maxTabNum = options.maxTabNum || 200;
options.homeInfo = options.homeInfo || {};
options.menuList = options.menuList || [];
if (!options.urlHashLocation) return false;
var tabId = location.hash.replace(/^#\//, '');
if (tabId === null || tabId === undefined || tabId ==='') return false;
// 判断是否为首页
if(tabId ===options.homeInfo.href) return false;
// 判断是否为右侧菜单
var menu = miniTab.searchMenu(tabId, options.menuList);
if (menu !== undefined) {
miniTab.create({
tabId: tabId,
href: tabId,
title: menu.title,
isIframe: false,
maxTabNum: options.maxTabNum,
});
$('.layuimini-menu-left').attr('layuimini-tab-tag', 'no');
element.tabChange('layuiminiTab', tabId);
return false;
}
// 判断是否为快捷菜单
var isSearchMenu = false;
$("[layuimini-content-href]").each(function () {
if ($(this).attr("layuimini-content-href") === tabId) {
var title = $(this).attr("data-title");
miniTab.create({
tabId: tabId,
href: tabId,
title: title,
isIframe: false,
maxTabNum: options.maxTabNum,
});
$('.layuimini-menu-left').attr('layuimini-tab-tag', 'no');
element.tabChange('layuiminiTab', tabId);
isSearchMenu = true;
return false;
}
});
if (isSearchMenu) return false;
// 既不是右侧菜单、快捷菜单,就直接打开
var title = sessionStorage.getItem('layuiminimenu_' + tabId) === null ? tabId : sessionStorage.getItem('layuiminimenu_' + tabId);
miniTab.create({
tabId: tabId,
href: tabId,
title: title,
isIframe: false,
maxTabNum: options.maxTabNum,
});
element.tabChange('layuiminiTab', tabId);
return false;
},
/**
* 监听滚动
*/
listenRoll: function () {
$(".layuimini-tab-roll-left").click(function () {
miniTab.rollClick("left");
});
$(".layuimini-tab-roll-right").click(function () {
miniTab.rollClick("right");
});
},
/**
* 单模块切换
* @param tabId
*/
listenSwitchSingleModule: function (tabId) {
$("[layuimini-href]").each(function () {
if ($(this).attr("layuimini-href") === tabId) {
// 自动展开菜单栏
var addMenuClass = function ($element, type) {
if (type === 1) {
$element.addClass('layui-this');
if ($element.hasClass('layui-nav-item') && $element.hasClass('layui-this')) {
$(".layuimini-header-menu li").attr('class', 'layui-nav-item');
} else {
addMenuClass($element.parent().parent(), 2);
}
} else {
$element.addClass('layui-nav-itemed');
if ($element.hasClass('layui-nav-item') && $element.hasClass('layui-nav-itemed')) {
$(".layuimini-header-menu li").attr('class', 'layui-nav-item');
} else {
addMenuClass($element.parent().parent(), 2);
}
}
};
addMenuClass($(this).parent(), 1);
return false;
}
});
},
/**
* 多模块切换
* @param tabId
*/
listenSwitchMultiModule: function (tabId) {
$("[layuimini-href]").each(function () {
if ($(this).attr("layuimini-href") === tabId) {
// 自动展开菜单栏
var addMenuClass = function ($element, type) {
if (type === 1) {
$element.addClass('layui-this');
if ($element.hasClass('layui-nav-item') && $element.hasClass('layui-this')) {
var moduleId = $element.parent().attr('id');
$(".layuimini-header-menu li").attr('class', 'layui-nav-item');
$("#" + moduleId + "HeaderId").addClass("layui-this");
$(".layuimini-menu-left .layui-nav.layui-nav-tree").attr('class', 'layui-nav layui-nav-tree layui-hide');
$("#" + moduleId).attr('class', 'layui-nav layui-nav-tree layui-this');
} else {
addMenuClass($element.parent().parent(), 2);
}
} else {
$element.addClass('layui-nav-itemed');
if ($element.hasClass('layui-nav-item') && $element.hasClass('layui-nav-itemed')) {
var moduleId = $element.parent().attr('id');
$(".layuimini-header-menu li").attr('class', 'layui-nav-item');
$("#" + moduleId + "HeaderId").addClass("layui-this");
$(".layuimini-menu-left .layui-nav.layui-nav-tree").attr('class', 'layui-nav layui-nav-tree layui-hide');
$("#" + moduleId).attr('class', 'layui-nav layui-nav-tree layui-this');
} else {
addMenuClass($element.parent().parent(), 2);
}
}
};
addMenuClass($(this).parent(), 1);
return false;
}
});
},
/**
* 自动定位
*/
rollPosition: function () {
var $tabTitle = $('.layuimini-tab .layui-tab-title');
var autoLeft = 0;
$tabTitle.children("li").each(function () {
if ($(this).hasClass('layui-this')) {
return false;
} else {
autoLeft += $(this).outerWidth();
}
});
$tabTitle.animate({
scrollLeft: autoLeft - $tabTitle.width() / 3
}, 200);
},
/**
* 点击滚动
* @param direction
*/
rollClick: function (direction) {
var $tabTitle = $('.layuimini-tab .layui-tab-title');
var left = $tabTitle.scrollLeft();
if ('left' === direction) {
$tabTitle.animate({
scrollLeft: left - 450
}, 200);
} else {
$tabTitle.animate({
scrollLeft: left + 450
}, 200);
}
},
/**
* 脱离标签栏
* @param tabId
*/
divorced: function (tabId) {
let tabtitle = $("ul.layui-tab-title").children('li[lay-id="' + tabId + '"]');
let title = tabtitle.children("span").text();
let tab = $("div.layui-tab-item").children("iframe[id='" + tabId + "']");
let id = tabId.replace(/[^\u4e00-\u9fa5\w]/g, "");
layer.open({
id: id,
title: title,
type: 1,
content: "",
shadeClose: false,
shade: 0,
maxmin: true,
area: ['50%', '80%'],
success: function (layero, index) {
//layero tab
tabtitle.hide();
tabtitle.removeClass("layui-this");
tab.parent("div.layui-tab-item").attr("layui-id", index);
tab.appendTo($(layero).children("div#" + id));
//$(layero).children("div#" + id)[0].addendChild(tab[0]);
},
cancel: function (index, layero) {
let iframe = $(layero).children("div#" + id).children("iframe");
iframe.appendTo($("div.layui-tab-item[layui-id=" + index + "]"));
//$("div.layui-tab-item.layui-show")[0].addendChild(iframe[0]);
tabtitle.addClass("layui-this");
tabtitle.show();
},
end: function () {
layer.msg("已关闭");
}
});
}
};
exports("miniTab", miniTab);
});
public/js/lay-module/layuimini/miniTheme.js
+469
View File
@@ -0,0 +1,469 @@
/**
* date:2020/02/28
* author:Mr.Chung
* version:2.0
* description:layuimini tab框架扩展
*/
layui.define(["jquery", "layer"], function (exports) {
var $ = layui.$,
layer = layui.layer;
var miniTheme = {
/**
* 主题配置项
* @param bgcolorId
* @returns {{headerLogo, menuLeftHover, headerRight, menuLeft, headerRightThis, menuLeftThis}|*|*[]}
*/
config: function (bgcolorId) {
var bgColorConfig = [
{
headerRightBg: '#ffffff', //头部右侧背景色
headerRightBgThis: '#e4e4e4', //头部右侧选中背景色,
headerRightColor: 'rgba(107, 107, 107, 0.7)', //头部右侧字体颜色,
headerRightChildColor: 'rgba(107, 107, 107, 0.7)', //头部右侧下拉字体颜色,
headerRightColorThis: '#565656', //头部右侧鼠标选中,
headerRightNavMore: 'rgba(160, 160, 160, 0.7)', //头部右侧更多下拉颜色,
headerRightNavMoreBg: '#247AE0', //头部右侧更多下拉列表选中背景色,
headerRightNavMoreColor: '#ffffff', //头部右侧更多下拉列表字体色,
headerRightToolColor: '#565656', //头部缩放按钮样式,
headerLogoBg: '#192027', //logo背景颜色,
headerLogoColor: 'rgb(191, 187, 187)', //logo字体颜色,
leftMenuNavMore: 'rgb(191, 187, 187)', //左侧菜单更多下拉样式,
leftMenuBg: '#28333E', //左侧菜单背景,
leftMenuBgThis: '#247AE0', //左侧菜单选中背景,
leftMenuChildBg: '#0c0f13', //左侧菜单子菜单背景,
leftMenuColor: 'rgb(191, 187, 187)', //左侧菜单字体颜色,
leftMenuColorThis: '#ffffff', //左侧菜单选中字体颜色,
tabActiveColor: '#247AE0', //tab选项卡选中颜色,
},
{
headerRightBg: '#23262e', //头部右侧背景色
headerRightBgThis: '#0c0c0c', //头部右侧选中背景色,
headerRightColor: 'rgba(255,255,255,.7)', //头部右侧字体颜色,
headerRightChildColor: '#676767', //头部右侧下拉字体颜色,
headerRightColorThis: '#ffffff', //头部右侧鼠标选中,
headerRightNavMore: 'rgba(255,255,255,.7)', //头部右侧更多下拉颜色,
headerRightNavMoreBg: '#1aa094', //头部右侧更多下拉列表选中背景色,
headerRightNavMoreColor: '#ffffff', //头部右侧更多下拉列表字体色,
headerRightToolColor: '#bbe3df', //头部缩放按钮样式,
headerLogoBg: '#0c0c0c', //logo背景颜色,
headerLogoColor: '#ffffff', //logo字体颜色,
leftMenuNavMore: 'rgb(191, 187, 187)', //左侧菜单更多下拉样式,
leftMenuBg: '#23262e', //左侧菜单背景,
leftMenuBgThis: '#737373', //左侧菜单选中背景,
leftMenuChildBg: 'rgba(0,0,0,.3)', //左侧菜单子菜单背景,
leftMenuColor: 'rgb(191, 187, 187)', //左侧菜单字体颜色,
leftMenuColorThis: '#ffffff', //左侧菜单选中字体颜色,
tabActiveColor: '#23262e', //tab选项卡选中颜色,
},
{
headerRightBg: '#ffa4d1', //头部右侧背景色
headerRightBgThis: '#bf7b9d', //头部右侧选中背景色,
headerRightColor: 'rgba(255,255,255,.7)', //头部右侧字体颜色,
headerRightChildColor: '#676767', //头部右侧下拉字体颜色,
headerRightColorThis: '#ffffff', //头部右侧鼠标选中,
headerRightNavMore: 'rgba(255,255,255,.7)', //头部右侧更多下拉颜色,
headerRightNavMoreBg: '#ffa4d1', //头部右侧更多下拉列表选中背景色,
headerRightNavMoreColor: '#ffffff', //头部右侧更多下拉列表字体色,
headerRightToolColor: '#bbe3df', //头部缩放按钮样式,
headerLogoBg: '#e694bd', //logo背景颜色,
headerLogoColor: '#ffffff', //logo字体颜色,
leftMenuNavMore: 'rgb(191, 187, 187)', //左侧菜单更多下拉样式,
leftMenuBg: '#1f1f1f', //左侧菜单背景,
leftMenuBgThis: '#737373', //左侧菜单选中背景,
leftMenuChildBg: 'rgba(0,0,0,.3)', //左侧菜单子菜单背景,
leftMenuColor: 'rgb(191, 187, 187)', //左侧菜单字体颜色,
leftMenuColorThis: '#ffffff', //左侧菜单选中字体颜色,
tabActiveColor: '#ffa4d1', //tab选项卡选中颜色,
},
{
headerRightBg: '#1aa094', //头部右侧背景色
headerRightBgThis: '#197971', //头部右侧选中背景色,
headerRightColor: 'rgba(255,255,255,.7)', //头部右侧字体颜色,
headerRightChildColor: '#676767', //头部右侧下拉字体颜色,
headerRightColorThis: '#ffffff', //头部右侧鼠标选中,
headerRightNavMore: 'rgba(255,255,255,.7)', //头部右侧更多下拉颜色,
headerRightNavMoreBg: '#1aa094', //头部右侧更多下拉列表选中背景色,
headerRightNavMoreColor: '#ffffff', //头部右侧更多下拉列表字体色,
headerRightToolColor: '#bbe3df', //头部缩放按钮样式,
headerLogoBg: '#0c0c0c', //logo背景颜色,
headerLogoColor: '#ffffff', //logo字体颜色,
leftMenuNavMore: 'rgb(191, 187, 187)', //左侧菜单更多下拉样式,
leftMenuBg: '#23262e', //左侧菜单背景,
leftMenuBgThis: '#1aa094', //左侧菜单选中背景,
leftMenuChildBg: 'rgba(0,0,0,.3)', //左侧菜单子菜单背景,
leftMenuColor: 'rgb(191, 187, 187)', //左侧菜单字体颜色,
leftMenuColorThis: '#ffffff', //左侧菜单选中字体颜色,
tabActiveColor: '#1aa094', //tab选项卡选中颜色,
},
{
headerRightBg: '#1e9fff', //头部右侧背景色
headerRightBgThis: '#0069b7', //头部右侧选中背景色,
headerRightColor: 'rgba(255,255,255,.7)', //头部右侧字体颜色,
headerRightChildColor: '#676767', //头部右侧下拉字体颜色,
headerRightColorThis: '#ffffff', //头部右侧鼠标选中,
headerRightNavMore: 'rgba(255,255,255,.7)', //头部右侧更多下拉颜色,
headerRightNavMoreBg: '#1e9fff', //头部右侧更多下拉列表选中背景色,
headerRightNavMoreColor: '#ffffff', //头部右侧更多下拉列表字体色,
headerRightToolColor: '#bbe3df', //头部缩放按钮样式,
headerLogoBg: '#0c0c0c', //logo背景颜色,
headerLogoColor: '#ffffff', //logo字体颜色,
leftMenuNavMore: 'rgb(191, 187, 187)', //左侧菜单更多下拉样式,
leftMenuBg: '#1f1f1f', //左侧菜单背景,
leftMenuBgThis: '#1e9fff', //左侧菜单选中背景,
leftMenuChildBg: 'rgba(0,0,0,.3)', //左侧菜单子菜单背景,
leftMenuColor: 'rgb(191, 187, 187)', //左侧菜单字体颜色,
leftMenuColorThis: '#ffffff', //左侧菜单选中字体颜色,
tabActiveColor: '#1e9fff', //tab选项卡选中颜色,
},
{
headerRightBg: '#ffb800', //头部右侧背景色
headerRightBgThis: '#d09600', //头部右侧选中背景色,
headerRightColor: 'rgba(255,255,255,.7)', //头部右侧字体颜色,
headerRightChildColor: '#676767', //头部右侧下拉字体颜色,
headerRightColorThis: '#ffffff', //头部右侧鼠标选中,
headerRightNavMore: 'rgba(255,255,255,.7)', //头部右侧更多下拉颜色,
headerRightNavMoreBg: '#d09600', //头部右侧更多下拉列表选中背景色,
headerRightNavMoreColor: '#ffffff', //头部右侧更多下拉列表字体色,
headerRightToolColor: '#bbe3df', //头部缩放按钮样式,
headerLogoBg: '#243346', //logo背景颜色,
headerLogoColor: '#ffffff', //logo字体颜色,
leftMenuNavMore: 'rgb(191, 187, 187)', //左侧菜单更多下拉样式,
leftMenuBg: '#2f4056', //左侧菜单背景,
leftMenuBgThis: '#8593a7', //左侧菜单选中背景,
leftMenuChildBg: 'rgba(0,0,0,.3)', //左侧菜单子菜单背景,
leftMenuColor: 'rgb(191, 187, 187)', //左侧菜单字体颜色,
leftMenuColorThis: '#ffffff', //左侧菜单选中字体颜色,
tabActiveColor: '#ffb800', //tab选项卡选中颜色,
},
{
headerRightBg: '#e82121', //头部右侧背景色
headerRightBgThis: '#ae1919', //头部右侧选中背景色,
headerRightColor: 'rgba(255,255,255,.7)', //头部右侧字体颜色,
headerRightChildColor: '#676767', //头部右侧下拉字体颜色,
headerRightColorThis: '#ffffff', //头部右侧鼠标选中,
headerRightNavMore: 'rgba(255,255,255,.7)', //头部右侧更多下拉颜色,
headerRightNavMoreBg: '#ae1919', //头部右侧更多下拉列表选中背景色,
headerRightNavMoreColor: '#ffffff', //头部右侧更多下拉列表字体色,
headerRightToolColor: '#bbe3df', //头部缩放按钮样式,
headerLogoBg: '#0c0c0c', //logo背景颜色,
headerLogoColor: '#ffffff', //logo字体颜色,
leftMenuNavMore: 'rgb(191, 187, 187)', //左侧菜单更多下拉样式,
leftMenuBg: '#1f1f1f', //左侧菜单背景,
leftMenuBgThis: '#3b3f4b', //左侧菜单选中背景,
leftMenuChildBg: 'rgba(0,0,0,.3)', //左侧菜单子菜单背景,
leftMenuColor: 'rgb(191, 187, 187)', //左侧菜单字体颜色,
leftMenuColorThis: '#ffffff', //左侧菜单选中字体颜色,
tabActiveColor: '#e82121', //tab选项卡选中颜色,
},
{
headerRightBg: '#963885', //头部右侧背景色
headerRightBgThis: '#772c6a', //头部右侧选中背景色,
headerRightColor: 'rgba(255,255,255,.7)', //头部右侧字体颜色,
headerRightChildColor: '#676767', //头部右侧下拉字体颜色,
headerRightColorThis: '#ffffff', //头部右侧鼠标选中,
headerRightNavMore: 'rgba(255,255,255,.7)', //头部右侧更多下拉颜色,
headerRightNavMoreBg: '#772c6a', //头部右侧更多下拉列表选中背景色,
headerRightNavMoreColor: '#ffffff', //头部右侧更多下拉列表字体色,
headerRightToolColor: '#bbe3df', //头部缩放按钮样式,
headerLogoBg: '#243346', //logo背景颜色,
headerLogoColor: '#ffffff', //logo字体颜色,
leftMenuNavMore: 'rgb(191, 187, 187)', //左侧菜单更多下拉样式,
leftMenuBg: '#2f4056', //左侧菜单背景,
leftMenuBgThis: '#586473', //左侧菜单选中背景,
leftMenuChildBg: 'rgba(0,0,0,.3)', //左侧菜单子菜单背景,
leftMenuColor: 'rgb(191, 187, 187)', //左侧菜单字体颜色,
leftMenuColorThis: '#ffffff', //左侧菜单选中字体颜色,
tabActiveColor: '#963885', //tab选项卡选中颜色,
},
{
headerRightBg: '#2D8CF0', //头部右侧背景色
headerRightBgThis: '#0069b7', //头部右侧选中背景色,
headerRightColor: 'rgba(255,255,255,.7)', //头部右侧字体颜色,
headerRightChildColor: '#676767', //头部右侧下拉字体颜色,
headerRightColorThis: '#ffffff', //头部右侧鼠标选中,
headerRightNavMore: 'rgba(255,255,255,.7)', //头部右侧更多下拉颜色,
headerRightNavMoreBg: '#0069b7', //头部右侧更多下拉列表选中背景色,
headerRightNavMoreColor: '#ffffff', //头部右侧更多下拉列表字体色,
headerRightToolColor: '#bbe3df', //头部缩放按钮样式,
headerLogoBg: '#0069b7', //logo背景颜色,
headerLogoColor: '#ffffff', //logo字体颜色,
leftMenuNavMore: 'rgb(191, 187, 187)', //左侧菜单更多下拉样式,
leftMenuBg: '#1f1f1f', //左侧菜单背景,
leftMenuBgThis: '#2D8CF0', //左侧菜单选中背景,
leftMenuChildBg: 'rgba(0,0,0,.3)', //左侧菜单子菜单背景,
leftMenuColor: 'rgb(191, 187, 187)', //左侧菜单字体颜色,
leftMenuColorThis: '#ffffff', //左侧菜单选中字体颜色,
tabActiveColor: '#2d8cf0', //tab选项卡选中颜色,
},
{
headerRightBg: '#ffb800', //头部右侧背景色
headerRightBgThis: '#d09600', //头部右侧选中背景色,
headerRightColor: 'rgba(255,255,255,.7)', //头部右侧字体颜色,
headerRightChildColor: '#676767', //头部右侧下拉字体颜色,
headerRightColorThis: '#ffffff', //头部右侧鼠标选中,
headerRightNavMore: 'rgba(255,255,255,.7)', //头部右侧更多下拉颜色,
headerRightNavMoreBg: '#d09600', //头部右侧更多下拉列表选中背景色,
headerRightNavMoreColor: '#ffffff', //头部右侧更多下拉列表字体色,
headerRightToolColor: '#bbe3df', //头部缩放按钮样式,
headerLogoBg: '#d09600', //logo背景颜色,
headerLogoColor: '#ffffff', //logo字体颜色,
leftMenuNavMore: 'rgb(191, 187, 187)', //左侧菜单更多下拉样式,
leftMenuBg: '#2f4056', //左侧菜单背景,
leftMenuBgThis: '#3b3f4b', //左侧菜单选中背景,
leftMenuChildBg: 'rgba(0,0,0,.3)', //左侧菜单子菜单背景,
leftMenuColor: 'rgb(191, 187, 187)', //左侧菜单字体颜色,
leftMenuColorThis: '#ffffff', //左侧菜单选中字体颜色,
tabActiveColor: '#ffb800', //tab选项卡选中颜色,
},
{
headerRightBg: '#e82121', //头部右侧背景色
headerRightBgThis: '#ae1919', //头部右侧选中背景色,
headerRightColor: 'rgba(255,255,255,.7)', //头部右侧字体颜色,
headerRightChildColor: '#676767', //头部右侧下拉字体颜色,
headerRightColorThis: '#ffffff', //头部右侧鼠标选中,
headerRightNavMore: 'rgba(255,255,255,.7)', //头部右侧更多下拉颜色,
headerRightNavMoreBg: '#ae1919', //头部右侧更多下拉列表选中背景色,
headerRightNavMoreColor: '#ffffff', //头部右侧更多下拉列表字体色,
headerRightToolColor: '#bbe3df', //头部缩放按钮样式,
headerLogoBg: '#d91f1f', //logo背景颜色,
headerLogoColor: '#ffffff', //logo字体颜色,
leftMenuNavMore: 'rgb(191, 187, 187)', //左侧菜单更多下拉样式,
leftMenuBg: '#1f1f1f', //左侧菜单背景,
leftMenuBgThis: '#3b3f4b', //左侧菜单选中背景,
leftMenuChildBg: 'rgba(0,0,0,.3)', //左侧菜单子菜单背景,
leftMenuColor: 'rgb(191, 187, 187)', //左侧菜单字体颜色,
leftMenuColorThis: '#ffffff', //左侧菜单选中字体颜色,
tabActiveColor: '#e82121', //tab选项卡选中颜色,
},
{
headerRightBg: '#963885', //头部右侧背景色
headerRightBgThis: '#772c6a', //头部右侧选中背景色,
headerRightColor: 'rgba(255,255,255,.7)', //头部右侧字体颜色,
headerRightChildColor: '#676767', //头部右侧下拉字体颜色,
headerRightColorThis: '#ffffff', //头部右侧鼠标选中,
headerRightNavMore: 'rgba(255,255,255,.7)', //头部右侧更多下拉颜色,
headerRightNavMoreBg: '#772c6a', //头部右侧更多下拉列表选中背景色,
headerRightNavMoreColor: '#ffffff', //头部右侧更多下拉列表字体色,
headerRightToolColor: '#bbe3df', //头部缩放按钮样式,
headerLogoBg: '#772c6a', //logo背景颜色,
headerLogoColor: '#ffffff', //logo字体颜色,
leftMenuNavMore: 'rgb(191, 187, 187)', //左侧菜单更多下拉样式,
leftMenuBg: '#2f4056', //左侧菜单背景,
leftMenuBgThis: '#626f7f', //左侧菜单选中背景,
leftMenuChildBg: 'rgba(0,0,0,.3)', //左侧菜单子菜单背景,
leftMenuColor: 'rgb(191, 187, 187)', //左侧菜单字体颜色,
leftMenuColorThis: '#ffffff', //左侧菜单选中字体颜色,
tabActiveColor: '#963885', //tab选项卡选中颜色,
}
];
if (bgcolorId === undefined) {
return bgColorConfig;
} else {
return bgColorConfig[bgcolorId];
}
},
/**
* 初始化
* @param options
*/
render: function (options) {
options.bgColorDefault = options.bgColorDefault || false;
options.listen = options.listen || false;
var bgcolorId = sessionStorage.getItem('layuiminiBgcolorId');
if (bgcolorId === null || bgcolorId === undefined || bgcolorId === '') {
bgcolorId = options.bgColorDefault;
}
miniTheme.buildThemeCss(bgcolorId);
if (options.listen) miniTheme.listen(options);
},
/**
* 构建主题样式
* @param bgcolorId
* @returns {boolean}
*/
buildThemeCss: function (bgcolorId) {
if (!bgcolorId) {
return false;
}
var bgcolorData = miniTheme.config(bgcolorId);
var styleHtml = '/*头部右侧背景色 headerRightBg */\n' +
'.layui-layout-admin .layui-header {\n' +
' background-color: ' + bgcolorData.headerRightBg + ' !important;\n' +
'}\n' +
'\n' +
'/*头部右侧选中背景色 headerRightBgThis */\n' +
'.layui-layout-admin .layui-header .layuimini-header-content > ul > .layui-nav-item.layui-this, .layuimini-tool i:hover {\n' +
' background-color: ' + bgcolorData.headerRightBgThis + ' !important;\n' +
'}\n' +
'\n' +
'/*头部右侧字体颜色 headerRightColor */\n' +
'.layui-layout-admin .layui-header .layui-nav .layui-nav-item a {\n' +
' color: ' + bgcolorData.headerRightColor + ';\n' +
'}\n' +
'/**头部右侧下拉字体颜色 headerRightChildColor */\n' +
'.layui-layout-admin .layui-header .layui-nav .layui-nav-item .layui-nav-child a {\n' +
' color: ' + bgcolorData.headerRightChildColor + '!important;\n' +
'}\n'+
'\n' +
'/*头部右侧鼠标选中 headerRightColorThis */\n' +
'.layui-header .layuimini-menu-header-pc.layui-nav .layui-nav-item a:hover, .layui-header .layuimini-header-menu.layuimini-pc-show.layui-nav .layui-this a {\n' +
' color: ' + bgcolorData.headerRightColorThis + ' !important;\n' +
'}\n' +
'\n' +
'/*头部右侧更多下拉颜色 headerRightNavMore */\n' +
'.layui-header .layui-nav .layui-nav-more {\n' +
' border-top-color: ' + bgcolorData.headerRightNavMore + ' !important;\n' +
'}\n' +
'\n' +
'/*头部右侧更多下拉颜色 headerRightNavMore */\n' +
'.layui-header .layui-nav .layui-nav-mored, .layui-header .layui-nav-itemed > a .layui-nav-more {\n' +
' border-color: transparent transparent ' + bgcolorData.headerRightNavMore + ' !important;\n' +
'}\n' +
'\n' +
'/**头部右侧更多下拉配置色 headerRightNavMoreBg headerRightNavMoreColor */\n' +
'.layui-header .layui-nav .layui-nav-child dd.layui-this a, .layui-header .layui-nav-child dd.layui-this, .layui-layout-admin .layui-header .layui-nav .layui-nav-item .layui-nav-child .layui-this a {\n' +
' background-color: ' + bgcolorData.headerRightNavMoreBg + ' !important;\n' +
' color:' + bgcolorData.headerRightNavMoreColor + ' !important;\n' +
'}\n' +
'\n' +
'/*头部缩放按钮样式 headerRightToolColor */\n' +
'.layui-layout-admin .layui-header .layuimini-tool i {\n' +
' color: ' + bgcolorData.headerRightToolColor + ';\n' +
'}\n' +
'\n' +
'/*logo背景颜色 headerLogoBg */\n' +
'.layui-layout-admin .layuimini-logo {\n' +
' background-color: ' + bgcolorData.headerLogoBg + ' !important;\n' +
'}\n' +
'\n' +
'/*logo字体颜色 headerLogoColor */\n' +
'.layui-layout-admin .layuimini-logo h1 {\n' +
' color: ' + bgcolorData.headerLogoColor + ';\n' +
'}\n' +
'\n' +
'/*左侧菜单更多下拉样式 leftMenuNavMore */\n' +
'.layuimini-menu-left .layui-nav .layui-nav-more,.layuimini-menu-left-zoom.layui-nav .layui-nav-more {\n' +
' border-top-color: ' + bgcolorData.leftMenuNavMore + ';\n' +
'}\n' +
'\n' +
'/*左侧菜单更多下拉样式 leftMenuNavMore */\n' +
'.layuimini-menu-left .layui-nav .layui-nav-mored, .layuimini-menu-left .layui-nav-itemed > a .layui-nav-more, .layuimini-menu-left-zoom.layui-nav .layui-nav-mored, .layuimini-menu-left-zoom.layui-nav-itemed > a .layui-nav-more {\n' +
' border-color: transparent transparent ' + bgcolorData.leftMenuNavMore + ' !important;\n' +
'}\n' +
'\n' +
'/*左侧菜单背景 leftMenuBg */\n' +
'.layui-side.layui-bg-black, .layui-side.layui-bg-black > .layuimini-menu-left > ul, .layuimini-menu-left-zoom > ul {\n' +
' background-color: ' + bgcolorData.leftMenuBg + ' !important;\n' +
'}\n' +
'\n' +
'/*左侧菜单选中背景 leftMenuBgThis */\n' +
'.layuimini-menu-left .layui-nav-tree .layui-this, .layuimini-menu-left .layui-nav-tree .layui-this > a, .layuimini-menu-left .layui-nav-tree .layui-nav-child dd.layui-this, .layuimini-menu-left .layui-nav-tree .layui-nav-child dd.layui-this a, .layuimini-menu-left-zoom.layui-nav-tree .layui-this, .layuimini-menu-left-zoom.layui-nav-tree .layui-this > a, .layuimini-menu-left-zoom.layui-nav-tree .layui-nav-child dd.layui-this, .layuimini-menu-left-zoom.layui-nav-tree .layui-nav-child dd.layui-this a {\n' +
' background-color: ' + bgcolorData.leftMenuBgThis + ' !important\n' +
'}\n' +
'\n' +
'/*左侧菜单子菜单背景 leftMenuChildBg */\n' +
'.layuimini-menu-left .layui-nav-itemed > .layui-nav-child{\n' +
' background-color: ' + bgcolorData.leftMenuChildBg + ' !important;\n' +
'}\n' +
'\n' +
'/*左侧菜单字体颜色 leftMenuColor */\n' +
'.layuimini-menu-left .layui-nav .layui-nav-item a, .layuimini-menu-left-zoom.layui-nav .layui-nav-item a {\n' +
' color: ' + bgcolorData.leftMenuColor + ' !important;\n' +
'}\n' +
'\n' +
'/*左侧菜单选中字体颜色 leftMenuColorThis */\n' +
'.layuimini-menu-left .layui-nav .layui-nav-item a:hover, .layuimini-menu-left .layui-nav .layui-this a, .layuimini-menu-left-zoom.layui-nav .layui-nav-item a:hover, .layuimini-menu-left-zoom.layui-nav .layui-this a {\n' +
' color:' + bgcolorData.leftMenuColorThis + ' !important;\n' +
'}\n' +
'\n' +
'/**tab选项卡选中颜色 tabActiveColor */\n' +
'.layuimini-tab .layui-tab-title .layui-this .layuimini-tab-active {\n' +
' background-color: ' + bgcolorData.tabActiveColor + ';\n' +
'}\n';
$('#layuimini-bg-color').html(styleHtml);
},
/**
* 构建主题选择html
* @param options
* @returns {string}
*/
buildBgColorHtml: function (options) {
options.bgColorDefault = options.bgColorDefault || 0;
var bgcolorId = parseInt(sessionStorage.getItem('layuiminiBgcolorId'));
if (isNaN(bgcolorId)) bgcolorId = options.bgColorDefault;
var bgColorConfig = miniTheme.config();
var html = '';
$.each(bgColorConfig, function (key, val) {
if (key === bgcolorId) {
html += '<li class="layui-this" data-select-bgcolor="' + key + '">\n';
} else {
html += '<li data-select-bgcolor="' + key + '">\n';
}
html += '<a href="javascript:;" data-skin="skin-blue" style="" class="clearfix full-opacity-hover">\n' +
'<div><span style="display:block; width: 20%; float: left; height: 12px; background: ' + val.headerLogoBg + ';"></span><span style="display:block; width: 80%; float: left; height: 12px; background: ' + val.headerRightBg + ';"></span></div>\n' +
'<div><span style="display:block; width: 20%; float: left; height: 40px; background: ' + val.leftMenuBg + ';"></span><span style="display:block; width: 80%; float: left; height: 40px; background: #ffffff;"></span></div>\n' +
'</a>\n' +
'</li>';
});
return html;
},
/**
* 监听
* @param options
*/
listen: function (options) {
$('body').on('click', '[data-bgcolor]', function () {
var loading = layer.load(0, {shade: false, time: 2 * 1000});
var clientHeight = (document.documentElement.clientHeight) - 60;
var bgColorHtml = miniTheme.buildBgColorHtml(options);
var html = '<div class="layuimini-color">\n' +
'<div class="color-title">\n' +
'<span>配色方案</span>\n' +
'</div>\n' +
'<div class="color-content">\n' +
'<ul>\n' + bgColorHtml + '</ul>\n' +
'</div>\n' +
'</div>';
layer.open({
type: 1,
title: false,
closeBtn: 0,
shade: 0.2,
anim: 2,
shadeClose: true,
id: 'layuiminiBgColor',
area: ['340px', clientHeight + 'px'],
offset: 'rb',
content: html,
success: function (index, layero) {
},
end: function () {
$('.layuimini-select-bgcolor').removeClass('layui-this');
}
});
layer.close(loading);
});
$('body').on('click', '[data-select-bgcolor]', function () {
var bgcolorId = $(this).attr('data-select-bgcolor');
$('.layuimini-color .color-content ul .layui-this').attr('class', '');
$(this).attr('class', 'layui-this');
sessionStorage.setItem('layuiminiBgcolorId', bgcolorId);
miniTheme.render({
bgColorDefault: bgcolorId,
listen: false,
});
});
}
};
exports("miniTheme", miniTheme);
})
;
public/js/lay-module/layuimini/xphp.js
+248
View File
@@ -0,0 +1,248 @@
/**
* date:2020/02/27
* author:Mr.Chung
* version:2.0
* description:layuimini 主体框架扩展
*/
layui.define(["jquery","element", "miniTab"], function (exports) {
var $ = layui.$,
layer = layui.layer,
dropdown = layui.dropdown,
element = layui.element ,
miniTab = layui.miniTab;
if (!/http(s*):\/\//.test(location.href)) {
var tips = "请先将项目部署至web容器（Apache/Tomcat/Nginx/IIS/等），否则部分数据将无法显示";
return layer.alert(tips);
}
var xphp = {
/**
* 后台框架初始化
* @param options.iniUrl 后台初始化接口地址
* @param options.urlHashLocation URL地址hash定位
* @param options.bgColorDefault 默认皮肤
* @param options.multiModule 是否开启多模块
* @param options.menuChildOpen 是否展开子菜单
* @param options.loadingTime 初始化加载时间
* @param options.pageAnim iframe窗口动画
* @param options.maxTabNum 最大的tab打开数量
*/
render: function (options) {
options.iniUrl = options.iniUrl || null;
options.urlHashLocation = options.urlHashLocation || false;
options.bgColorDefault = options.bgColorDefault || 0;
options.multiModule = options.multiModule || false;
options.menuChildOpen = options.menuChildOpen || false;
options.loadingTime = options.loadingTime || 0;
options.pageAnim = options.pageAnim || false;
options.maxTabNum = options.maxTabNum || 200;
options.isHideOpenMenu = !options.isHideOpenMenu ? options.isHideOpenMenu : true;
$.getJSON(options.iniUrl, function (data) {
if (data == null) {
xphp.error('暂无菜单信息')
} else {
xphp.renderHome(data.homeInfo);
xphp.renderAnim(options.pageAnim);
xphp.listen();
dropdown.render({
elem: '.menuitemon',
data:data.menuInfo,
customName: {
id: 'id',
title: 'title',
children: 'children'
},
trigger: 'hover',
click: function(obj){
miniTab.openNewTab({...obj,href:obj.dizhi});
}
});
//tab页
miniTab.render({
filter: 'layuiminiTab',
urlHashLocation: options.urlHashLocation,
multiModule: options.multiModule,
menuChildOpen: options.menuChildOpen,
maxTabNum: options.maxTabNum,
menuList: data.menuInfo,
homeInfo: data.homeInfo,
switchtoindex:options.switchtoindex||false,
listenSwichCallback: function () {
xphp.renderDevice();
}
});
xphp.deleteLoader(options.loadingTime);
xphp.isHideOpenMenu(options.isHideOpenMenu);
}
}).fail(function () {
xphp.error('菜单接口有误');
});
},
/**
* 点击左侧下拉菜单，关闭其他下拉菜单
* @param data
*/
isHideOpenMenu: function (data) {
$(".layui-side").on("click", ".layui-nav-item", function () {
if (data) {
$(this).siblings('li').attr('class', 'layui-nav-item');
}
});
},
/**
* 初始化首页
* @param data
*/
renderHome: function (data) {
sessionStorage.setItem('layuiminiHomeHref', data.href);
$('#layuiminiHomeTabId').html('<span class="layuimini-tab-active"></span><span class="disable-close">' + data.title + '</span><i class="layui-icon layui-unselect layui-tab-close">ဆ</i>');
$('#layuiminiHomeTabId').attr('lay-id', data.id);
$('#layuiminiHomeTabIframe').html('<iframe width="100%" height="100%" frameborder="no" border="0" marginwidth="0" marginheight="0" src="' + data.href + '"></iframe>');
},
/**
* 初始化iframe窗口动画
* @param anim
*/
renderAnim: function (anim) {
if (anim) {
$('#layuimini-bg-color').after('<style id="layuimini-page-anim">' +
'.layui-tab-item.layui-show {animation:moveTop 1s;-webkit-animation:moveTop 1s;animation-fill-mode:both;-webkit-animation-fill-mode:both;position:relative;height:100%;-webkit-overflow-scrolling:touch;}\n' +
'@keyframes moveTop {0% {opacity:0;-webkit-transform:translateY(30px);-ms-transform:translateY(30px);transform:translateY(30px);}\n' +
' 100% {opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);}\n' +
'}\n' +
'@-o-keyframes moveTop {0% {opacity:0;-webkit-transform:translateY(30px);-ms-transform:translateY(30px);transform:translateY(30px);}\n' +
' 100% {opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);}\n' +
'}\n' +
'@-moz-keyframes moveTop {0% {opacity:0;-webkit-transform:translateY(30px);-ms-transform:translateY(30px);transform:translateY(30px);}\n' +
' 100% {opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);}\n' +
'}\n' +
'@-webkit-keyframes moveTop {0% {opacity:0;-webkit-transform:translateY(30px);-ms-transform:translateY(30px);transform:translateY(30px);}\n' +
' 100% {opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);}\n' +
'}' +
'</style>');
}
},
/**
* 初始化设备端
*/
renderDevice: function () {
if (xphp.checkMobile()) {
$('.layuimini-tool i').attr('data-side-fold', 1);
$('.layuimini-tool i').attr('class', 'layui-icon layui-icon-list');
$('.layui-layout-body').removeClass('layuimini-mini');
$('.layui-layout-body').addClass('layuimini-all');
}
},
/**
* 初始化加载时间
* @param loadingTime
*/
deleteLoader: function (loadingTime) {
if (loadingTime) {
setTimeout(function () {
$('.layuimini-loader').fadeOut();
}, loadingTime * 1000)
} else {
$('.layuimini-loader').fadeOut();
}
},
/**
* 成功
* @param title
* @returns {*}
*/
success: function (title) {
return layer.msg(title, {icon: 1, shade: this.shade, scrollbar: false, time: 2000, shadeClose: true});
},
/**
* 失败
* @param title
* @returns {*}
*/
error: function (title) {
return layer.msg(title, {icon: 2, shade: this.shade, scrollbar: false, time: 3000, shadeClose: true});
},
/**
* 判断是否为手机
* @returns {boolean}
*/
checkMobile: function () {
var ua = navigator.userAgent.toLocaleLowerCase();
var pf = navigator.platform.toLocaleLowerCase();
var isAndroid = (/android/i).test(ua) || ((/iPhone|iPod|iPad/i).test(ua) && (/linux/i).test(pf))
|| (/ucweb.*linux/i.test(ua));
var isIOS = (/iPhone|iPod|iPad/i).test(ua) && !isAndroid;
var isWinPhone = (/Windows Phone|ZuneWP7/i).test(ua);
var clientWidth = document.documentElement.clientWidth;
if (!isAndroid && !isIOS && !isWinPhone && clientWidth > 1024) {
return false;
} else {
return true;
}
},
/**
* 监听
*/
listen: function () {
/**
* 监听提示信息
*/
$("body").on("mouseenter", ".layui-nav-tree .menu-li", function () {
if (xphp.checkMobile()) {
return false;
}
var classInfo = $(this).attr('class'),
tips = $(this).prop("innerHTML"),
isShow = $('.layuimini-tool i').attr('data-side-fold');
if (isShow == 0 && tips) {
tips = "<ul class='layuimini-menu-left-zoom layui-nav layui-nav-tree layui-this'><li class='layui-nav-item layui-nav-itemed'>"+tips+"</li></ul>" ;
window.openTips = layer.tips(tips, $(this), {
tips: [2, '#2f4056'],
time: 300000,
skin:"popup-tips",
success:function (el) {
var left = $(el).position().left - 10 ;
$(el).css({ left:left });
element.render();
}
});
}
});
$("body").on("mouseleave", ".popup-tips", function () {
if (xphp.checkMobile()) {
return false;
}
var isShow = $('.layuimini-tool i').attr('data-side-fold');
if (isShow == 0) {
try {
layer.close(window.openTips);
} catch (e) {
console.log(e.message);
}
}
});
/**
* 点击遮罩层
*/
$('body').on('click', '.layuimini-make', function () {
xphp.renderDevice();
});
}
};
exports("xphp", xphp);
});
public/js/lay-module/location/img/location.cur
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.2 KiB

public/js/lay-module/location/img/location_blue.cur
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.2 KiB

public/js/lay-module/location/location.css
+101
View File
@@ -0,0 +1,101 @@
.ew-map-select-tool {
padding: 5px 15px;
box-shadow: 0 1px 0 0 rgba(0, 0, 0, .05);
}
.inline-block {
display: inline-block;
}
.layui-btn.icon-btn {
padding: 0 10px;
}
.pull-right {
float: right;
}
.map-select:after, .map-select:before {
content: '';
display: block;
clear: both;
}
.ew-map-select-poi {
height: 505px;
width: 250px;
overflow-x: hidden;
overflow-y: auto;
float: left;
position: relative;
display: block;
box-sizing: border-box;
}
.ew-map-select-search-list-item {
padding: 10px 30px 10px 15px;
border-bottom: 1px solid #e8e8e8;
cursor: pointer;
position: relative;
}
.ew-map-select-search-list-item .ew-map-select-search-list-item-title {
font-size: 14px;
color: #262626;
}
.ew-map-select-search-list-item .ew-map-select-search-list-item-address {
font-size: 12px;
color: #595959;
padding-top: 5px;
}
.ew-map-select-search-list-item-icon-ok {
position: absolute;
right: 15px;
top: 50%;
transform: translateY(-50%);
}
#ew-map-select-tips {
position: absolute;
z-index: 999;
background: #fff;
max-height: 430px;
overflow: auto;
top: 48px;
left: 56px;
width: 280px;
box-shadow: 0 2px 4px rgba(0,0,0,.12);
border: 1px solid #d2d2d2;
}
#ew-map-select-tips .ew-map-select-search-list-item {
padding: 10px 15px 10px 35px;
}
.ew-map-select-search-list-item-icon-search {
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
}
.ew-map-select-search-list-item .ew-map-select-search-list-item-title {
font-size: 14px;
color: #262626;
}
.ew-map-select-search-list-item .ew-map-select-search-list-item-address {
font-size: 12px;
color: #595959;
padding-top: 5px;
}
.cur-load0 {
display: none;
background: url('./img/location.cur');
}
.cur-load1 {
display: none;
background: url('./img/location_blue.cur');
}
public/js/lay-module/location/location.js
+759
View File
@@ -0,0 +1,759 @@
layui.define(['layer', 'locationX'], function (exports) {
var $ = layui.jquery,
layer = layui.layer,
MOD_NAME = "location",
GPS = layui.locationX;
var tpl0 = '<div class="cur-load0"></div>\n' +
'<div class="cur-load1"></div>\n' +
'<div class="ew-map-select-tool" style="position: relative;">\n' +
' 经度：<input id="lng" class="layui-input inline-block" style="width: 190px;" autocomplete="off"/>\n' +
' &nbsp;&nbsp;&nbsp;纬度：<input id="lat" class="layui-input inline-block" style="width: 190px;" autocomplete="off"/>\n' +
' <button id="ew-map-select-btn-ok" class="layui-btn icon-btn pull-right" type="button"><i\n' +
' class="layui-icon">&#xe605;</i>确定\n' +
' </button>\n' +
'</div>\n' +
'<div id="map" style="width: 100%;height: calc(100% - 48px);"></div>';
var tpl1 ='<div class="cur-load0"></div>\n' +
'<div class="cur-load1"></div>\n' +
'<div class="ew-map-select-tool" style="position: relative;">\n' +
' 搜索：<input id="ew-map-select-input-search" class="layui-input icon-search inline-block" style="width: 190px;" placeholder="输入关键字搜索" autocomplete="off" />\n' +
' <div id="ew-map-select-tips" class="ew-map-select-search-list layui-hide" style="left: 0px;width: 248px;"></div>\n' +
' &nbsp;&nbsp;经度：<input id="lng" class="layui-input inline-block" style="width: 190px;" autocomplete="off" />\n' +
' &nbsp;&nbsp;&nbsp;纬度：<input id="lat" class="layui-input inline-block" style="width: 190px;" autocomplete="off" />\n' +
' <button id="ew-map-select-btn-ok" class="layui-btn icon-btn pull-right" type="button"><i class="layui-icon">&#xe605;</i>确定</button>\n' +
'</div>\n' +
'<div class="map-select">\n' +
'\n' +
' <div id="map" style="width: 600px;height: 505px;float: right;"></div>\n' +
' <div id="ew-map-select-poi" class="layui-col-sm5 ew-map-select-search-list ew-map-select-poi">\n' +
' </div>\n' +
'\n' +
'</div>';
var obj = function (config) {
this.config = {
// 默认中心点位置是北京天安门，所有坐标系都用此坐标，偏的不大
type: 0, // 0 : 仅定位 1： 带有搜索的定位
longitude: 116.404,
latitude: 39.915,
title: '定位',
zoom: 18,
apiType: "baiduMap",
coordinate: "baiduMap",
mapType: 0,
searchKey: '村',
init: function () {
return {longitude: 116.404, latitude: 39.915};
},
success: function () {
},
onClickTip: function (data) {
console.log(data);
}
}
this.config = $.extend(this.config, config);
// 初始化经纬度信息
var initData = this.config.init();
this.config.longitude = initData.longitude;
this.config.latitude = initData.latitude;
this.lng = this.config.longitude;
this.lat = this.config.latitude;
// 转换初始坐标
this.initCoordinate = function (lng, lat) {
var o = this;
if (o.config.apiType == o.config.coordinate) {
return {lng: lng, lat: lat};
} else if (o.config.apiType == 'baiduMap' && o.config.coordinate == 'tiandiMap') {
var res = GPS.WGS84_bd(lat, lng);
return {lng: res.lon.toFixed(5), lat: res.lat.toFixed(5)};
} else if (o.config.apiType == 'tiandiMap' && o.config.coordinate == 'baiduMap') {
var res = GPS.bd_WGS84(lat, lng);
return {lng: res.lon.toFixed(5), lat: res.lat.toFixed(5)};
} else if (o.config.apiType == 'gaodeMap' && o.config.coordinate == 'baiduMap') {
var res = GPS.bd_decrypt(lat, lng);
return {lng: res.lon.toFixed(5), lat: res.lat.toFixed(5)};
} else if (o.config.apiType == 'baiduMap' && o.config.coordinate == 'gaodeMap') {
var res = GPS.bd_encrypt(lat, lng);
return {lng: res.lon.toFixed(5), lat: res.lat.toFixed(5)};
} else if (o.config.apiType == 'gaodeMap' && o.config.coordinate == 'tiandiMap') {
var res = GPS.gcj_encrypt(lat, lng);
return {lng: res.lon.toFixed(5), lat: res.lat.toFixed(5)};
} else if (o.config.apiType == 'tiandiMap' && o.config.coordinate == 'gaodeMap') {
var res = GPS.gcj_decrypt(lat, lng);
return {lng: res.lon.toFixed(5), lat: res.lat.toFixed(5)};
}
}
if (this.config.longitude && this.config.latitude && this.config.mapType != this.config.coordinate) {
var tbd = this.initCoordinate(this.config.longitude, this.config.latitude);
this.config.longitude = tbd.lng;
this.config.latitude = tbd.lat;
}
this.transformCoordinate = function (lng, lat) {
var o = this;
if (o.config.apiType == o.config.coordinate) {
return {lng: lng, lat: lat};
} else if (o.config.apiType == 'baiduMap' && o.config.coordinate == 'tiandiMap') {
var res = GPS.bd_WGS84(lat, lng);
return {lng: res.lon.toFixed(5), lat: res.lat.toFixed(5)};
} else if (o.config.apiType == 'tiandiMap' && o.config.coordinate == 'baiduMap') {
var res = GPS.WGS84_bd(lat, lng);
return {lng: res.lon.toFixed(5), lat: res.lat.toFixed(5)};
} else if (o.config.apiType == 'gaodeMap' && o.config.coordinate == 'baiduMap') {
var res = GPS.bd_encrypt(lat, lng);
return {lng: res.lon.toFixed(5), lat: res.lat.toFixed(5)};
} else if (o.config.apiType == 'baiduMap' && o.config.coordinate == 'gaodeMap') {
var res = GPS.bd_decrypt(lat, lng);
return {lng: res.lon.toFixed(5), lat: res.lat.toFixed(5)};
} else if (o.config.apiType == 'gaodeMap' && o.config.coordinate == 'tiandiMap') {
var res = GPS.gcj_decrypt(lat, lng);
return {lng: res.lon.toFixed(5), lat: res.lat.toFixed(5)};
} else if (o.config.apiType == 'tiandiMap' && o.config.coordinate == 'gaodeMap') {
var res = GPS.gcj_encrypt(lat, lng);
return {lng: res.lon.toFixed(5), lat: res.lat.toFixed(5)};
}
}
this.openBaiduMap = function () {
var o = this;
var map; // 创建地图实例
if (o.config.mapType == 1) {
map = new BMap.Map("map", {enableMapClick: false, mapType: BMAP_SATELLITE_MAP});
} else if (o.config.mapType == 2) {
map = new BMap.Map("map", {enableMapClick: false, mapType: BMAP_HYBRID_MAP});
} else {
map = new BMap.Map("map", {enableMapClick: false, mapType: BMAP_NORMAL_MAP});
}
map.enableScrollWheelZoom(); //启用滚轮放大缩小，默认禁用
var point = new BMap.Point(o.config.longitude ? o.config.longitude : 116.404, o.config.latitude ? o.config.latitude : 39.915); // 创建点坐标
map.centerAndZoom(point, o.config.zoom);
map.setDefaultCursor("url('" + layui.cache.base + "location/img/location.cur') 17 35,auto"); //设置地图默认的鼠标指针样式
var marker = new BMap.Marker(map.getCenter()); // 创建标注
map.addOverlay(marker); // 将标注添加到地图中
map.addEventListener("click", function (e) {
var tbd = o.transformCoordinate(e.point.lng, e.point.lat);
//显示经纬度
$("#lng").val(tbd.lng);
$("#lat").val(tbd.lat);
o.lng = tbd.lng;
o.lat = tbd.lat;
var point = new BMap.Point(e.point.lng, e.point.lat);
map.removeOverlay(marker);
marker = new BMap.Marker(point);
map.addOverlay(marker);
if (o.config.type==1){
searchNearBy(e.point.lng, e.point.lat);
}
});
// 标记中心点
var markCenter = function (lng, lat){
var tbd = o.transformCoordinate(lng, lat);
//显示经纬度
$("#lng").val(tbd.lng);
$("#lat").val(tbd.lat);
o.lng = tbd.lng;
o.lat = tbd.lat;
var point = new BMap.Point(lng, lat);
map.removeOverlay(marker);
marker = new BMap.Marker(point);
map.addOverlay(marker);
if (o.config.type==1){
searchNearBy(lng, lat);
}
}
// 搜索附近方法
var searchNearBy = function (lng, lat){
var point = new BMap.Point(lng, lat);
var localSearch = new BMap.LocalSearch(point, {
pageCapacity: 10,
onSearchComplete: function (result){
var htmlList = '';
$.each(result,function (i,val){
$.each(val.Hr,function (i,ad){
htmlList += '<div data-lng="' + ad.point.lng + '" data-lat="' + ad.point.lat + '" data-title="'+ ad.title +'" data-address="'+ ad.address +'" class="ew-map-select-search-list-item">';
htmlList += ' <div class="ew-map-select-search-list-item-title">' + ad.title + '</div>';
htmlList += ' <div class="ew-map-select-search-list-item-address">' + ad.address + '</div>';
htmlList += ' <div class="ew-map-select-search-list-item-icon-ok layui-hide"><i class="layui-icon layui-icon-ok-circle"></i></div>';
htmlList += '</div>';
});
});
$('#ew-map-select-poi').html(htmlList);
}
});
localSearch.searchNearby([o.config.searchKey,'镇','街道','店'],point,1000);
}
// 初始化搜索
if (o.config.type==1){
o.initBaiduSearch(map,searchNearBy,markCenter);
}
}
this.initBaiduSearch = function (map,searchNearBy,markCenter){
var o = this;
searchNearBy(o.config.longitude ? o.config.longitude : 116.404, o.config.latitude ? o.config.latitude : 39.915);
// poi列表点击事件
$('#ew-map-select-poi').off('click').on('click', '.ew-map-select-search-list-item', function () {
$('#ew-map-select-tips').addClass('layui-hide');
$('#ew-map-select-poi .ew-map-select-search-list-item-icon-ok').addClass('layui-hide');
$(this).find('.ew-map-select-search-list-item-icon-ok').removeClass('layui-hide');
$('#ew-map-select-center-img').removeClass('bounceInDown');
setTimeout(function () {
$('#ew-map-select-center-img').addClass('bounceInDown');
});
var lng = $(this).data('lng');
var lat = $(this).data('lat');
//
var point = new BMap.Point(lng, lat);
map.centerAndZoom(point, map.getZoom());
markCenter(lng, lat);
var title = $(this).data('title');
var address = $(this).data('address');
o.config.onClickTip({title:title,address:address,lng:lng,lat:lat});
});
// 搜索提示
var $inputSearch = $('#ew-map-select-input-search');
$inputSearch.off('input').on('input', function () {
var keywords = $(this).val();
var $selectTips = $('#ew-map-select-tips');
if (!keywords) {
$selectTips.html('');
$selectTips.addClass('layui-hide');
}
var autoComplete = new BMap.LocalSearch('全国', {
pageCapacity: 10,
onSearchComplete: function (result){
if (undefined == result){
return ;
}
var htmlList = '';
$.each(result.Hr,function (i,ad){
htmlList += '<div data-lng="' + ad.point.lng + '" data-lat="' + ad.point.lat + '" data-title="'+ ad.title +'" data-address="'+ ad.address +'" class="ew-map-select-search-list-item">';
htmlList += ' <div class="ew-map-select-search-list-item-icon-search"><i class="layui-icon layui-icon-search"></i></div>';
htmlList += ' <div class="ew-map-select-search-list-item-title">' + ad.title + '</div>';
htmlList += ' <div class="ew-map-select-search-list-item-address">' + ad.address + '</div>';
htmlList += '</div>';
});
$selectTips.html(htmlList);
if (result.Hr.length === 0) $('#ew-map-select-tips').addClass('layui-hide');
else $('#ew-map-select-tips').removeClass('layui-hide');
}
});
autoComplete.search(keywords);
});
$inputSearch.off('blur').on('blur', function () {
var keywords = $(this).val();
var $selectTips = $('#ew-map-select-tips');
if (!keywords) {
$selectTips.html('');
$selectTips.addClass('layui-hide');
}
});
$inputSearch.off('focus').on('focus', function () {
var keywords = $(this).val();
if (keywords) $('#ew-map-select-tips').removeClass('layui-hide');
});
// tips列表点击事件
$('#ew-map-select-tips').off('click').on('click', '.ew-map-select-search-list-item', function () {
$('#ew-map-select-tips').addClass('layui-hide');
var lng = $(this).data('lng');
var lat = $(this).data('lat');
var point = new BMap.Point(lng, lat);
map.centerAndZoom(point, map.getZoom());
markCenter(lng, lat);
var title = $(this).data('title');
var address = $(this).data('address');
o.config.onClickTip({title:title,address:address,lng:lng,lat:lat});
});
}
this.openTiandiMap = function () {
var o = this;
var map = new T.Map("map"); // 创建地图实例
if (o.config.mapType == 1) {
map.setMapType(TMAP_SATELLITE_MAP);
} else if (o.config.mapType == 2) {
map.setMapType(TMAP_HYBRID_MAP);
} else {
map.setMapType(TMAP_NORMAL_MAP);
}
map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
var latLng = new T.LngLat(o.config.longitude ? o.config.longitude : 116.404, o.config.latitude ? o.config.latitude : 39.915);
map.centerAndZoom(latLng, o.config.zoom);
var marker = new T.Marker(latLng); // 创建标注
map.addOverLay(marker);// 将标注添加到地图中
if (undefined === window.T.MarkTool) {
setTimeout(function () {
initMarkerTool();
}, 200);
} else {
initMarkerTool();
}
function initMarkerTool() {
var markerTool = new T.MarkTool(map, {follow: true});
markerTool.open();
/*标注事件*/
var mark = function (e) {
$.each(map.getOverlays(), function (i, marker) {
if (marker != e.currentMarker) {
map.removeOverLay(marker);
}
})
//显示经纬度
var tbd = o.transformCoordinate(e.currentLnglat.getLng(), e.currentLnglat.getLat());
$("#lng").val(tbd.lng);
$("#lat").val(tbd.lat);
o.lng = tbd.lng;
o.lat = tbd.lat;
markerTool = new T.MarkTool(map, {follow: true});
markerTool.open();
markerTool.addEventListener("mouseup", mark);
if (o.config.type==1){
searchNearBy(e.currentLnglat.getLng(), e.currentLnglat.getLat());
}
}
//绑定mouseup事件 在用户每完成一次标注时触发事件。
markerTool.addEventListener("mouseup", mark);
}
// 标记中心点
var markCenter = function (lng, lat) {
$.each(map.getOverlays(), function (i, marker) {
map.removeOverLay(marker);
})
//显示经纬度
var tbd = o.transformCoordinate(lng, lat);
$("#lng").val(tbd.lng);
$("#lat").val(tbd.lat);
o.lng = tbd.lng;
o.lat = tbd.lat;
var latLng = new T.LngLat(lng, lat);
var marker = new T.Marker(latLng); // 创建标注
map.addOverLay(marker);// 将标注添加到地图中
if (o.config.type==1){
searchNearBy(lng, lat);
}
}
// 搜索附近方法
var searchNearBy = function (lng, lat){
var point = new T.LngLat(lng,lat);
var localSearch = new T.LocalSearch(map, {
pageCapacity: 10,
onSearchComplete: function (result){
var htmlList = '';
$.each(result.getPois(),function (i,ad){
var lnglat = ad.lonlat.split(" ");
htmlList += '<div data-lng="' + lnglat[0] + '" data-lat="' + lnglat[1] + '" data-title="'+ ad.name +'" data-address="'+ ad.address +'" class="ew-map-select-search-list-item">';
htmlList += ' <div class="ew-map-select-search-list-item-title">' + ad.name + '</div>';
htmlList += ' <div class="ew-map-select-search-list-item-address">' + ad.address + '</div>';
htmlList += ' <div class="ew-map-select-search-list-item-icon-ok layui-hide"><i class="layui-icon layui-icon-ok-circle"></i></div>';
htmlList += '</div>';
});
$('#ew-map-select-poi').html(htmlList);
}
});
localSearch.setQueryType(1);
localSearch.searchNearby(o.config.searchKey,point,1000);
}
if (o.config.type==1){
o.initTiandiSearch(map,searchNearBy,markCenter);
}
}
this.initTiandiSearch = function (map,searchNearBy,markCenter){
var o = this;
searchNearBy(o.config.longitude ? o.config.longitude : 116.404, o.config.latitude ? o.config.latitude : 39.915);
// poi列表点击事件
$('#ew-map-select-poi').off('click').on('click', '.ew-map-select-search-list-item', function () {
$('#ew-map-select-tips').addClass('layui-hide');
$('#ew-map-select-poi .ew-map-select-search-list-item-icon-ok').addClass('layui-hide');
$(this).find('.ew-map-select-search-list-item-icon-ok').removeClass('layui-hide');
$('#ew-map-select-center-img').removeClass('bounceInDown');
setTimeout(function () {
$('#ew-map-select-center-img').addClass('bounceInDown');
});
var lng = $(this).data('lng');
var lat = $(this).data('lat');
//
var point = new T.LngLat(lng, lat);
map.centerAndZoom(point, map.getZoom());
markCenter(lng, lat);
var title = $(this).data('title');
var address = $(this).data('address');
o.config.onClickTip({title:title,address:address,lng:lng,lat:lat});
});
// 搜索提示
var $inputSearch = $('#ew-map-select-input-search');
$inputSearch.off('input').on('input', function () {
var keywords = $(this).val();
var $selectTips = $('#ew-map-select-tips');
if (!keywords) {
$selectTips.html('');
$selectTips.addClass('layui-hide');
}
var autoComplete = new T.LocalSearch(map, {
pageCapacity: 10,
onSearchComplete: function (result){
if (undefined == result){
return ;
}
var htmlList = '';
$.each(result.getPois(),function (i,ad){
var lnglat = ad.lonlat.split(" ");
htmlList += '<div data-lng="' + lnglat[0] + '" data-lat="' + lnglat[1] + '" data-title="'+ ad.name +'" data-address="'+ ad.address +'" class="ew-map-select-search-list-item">';
htmlList += ' <div class="ew-map-select-search-list-item-title">' + ad.name + '</div>';
htmlList += ' <div class="ew-map-select-search-list-item-address">' + ad.address + '</div>';
htmlList += ' <div class="ew-map-select-search-list-item-icon-ok layui-hide"><i class="layui-icon layui-icon-ok-circle"></i></div>';
htmlList += '</div>';
});
$selectTips.html(htmlList);
if (result.getPois().length === 0) $('#ew-map-select-tips').addClass('layui-hide');
else $('#ew-map-select-tips').removeClass('layui-hide');
}
});
autoComplete.setQueryType(1);
autoComplete.search(keywords);
});
$inputSearch.off('blur').on('blur', function () {
var keywords = $(this).val();
var $selectTips = $('#ew-map-select-tips');
if (!keywords) {
$selectTips.html('');
$selectTips.addClass('layui-hide');
}
});
$inputSearch.off('focus').on('focus', function () {
var keywords = $(this).val();
if (keywords) $('#ew-map-select-tips').removeClass('layui-hide');
});
// tips列表点击事件
$('#ew-map-select-tips').off('click').on('click', '.ew-map-select-search-list-item', function () {
$('#ew-map-select-tips').addClass('layui-hide');
var lng = $(this).data('lng');
var lat = $(this).data('lat');
var point = new T.LngLat(lng, lat);
map.centerAndZoom(point, map.getZoom());
markCenter(lng, lat);
var title = $(this).data('title');
var address = $(this).data('address');
o.config.onClickTip({title:title,address:address,lng:lng,lat:lat});
});
}
this.openGaodeMap = function () {
var o = this;
// 创建地图实例
var layers = [];
if (o.config.mapType == '1') {
var satellite = new AMap.TileLayer.Satellite();
layers.push(satellite);
} else if (o.config.mapType == '2') {
var satellite = new AMap.TileLayer.Satellite();
var roadNet = new AMap.TileLayer.RoadNet();
layers.push(satellite);
layers.push(roadNet);
} else {
var layer = new AMap.TileLayer();
layers.push(layer);
}
var map = new AMap.Map("map",
{
resizeEnable: true,
zoom: o.config.zoom,
center: [o.config.longitude ? o.config.longitude : 116.404, o.config.latitude ? o.config.latitude : 39.915],
layers: layers
});
map.setDefaultCursor("url('" + layui.cache.base + "location/img/location_blue.cur') 17 35,auto");
// 初始化中间点标记
var marker = new AMap.Marker({
icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
position: [o.config.longitude ? o.config.longitude : 116.404, o.config.latitude ? o.config.latitude : 39.915]
});
map.add(marker);
var markCenter = function (e) {
// 标记中心点
map.clearMap();
// alert('您在[ '+e.lnglat.getLng()+','+e.lnglat.getLat()+' ]的位置点击了地图！');
//显示经纬度
var tbd = o.transformCoordinate(e.lng, e.lat);
$("#lng").val(tbd.lng);
$("#lat").val(tbd.lat);
o.lng = tbd.lng;
o.lat = tbd.lat;
var marker = new AMap.Marker({
icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
position: [e.lng, e.lat]
});
map.add(marker);
if (o.config.type == 1) {
searchNearBy(e.lng, e.lat);
}
}
var clickHandler = function (e) {
markCenter({lng: e.lnglat.getLng(), lat: e.lnglat.getLat()});
};
// 绑定事件
map.on('click', clickHandler);
// 附近搜索方法
var searchNearBy = function (lng, lat) {
AMap.service(['AMap.PlaceSearch'], function () {
var placeSearch = new AMap.PlaceSearch({
type: '', pageSize: 10, pageIndex: 1
});
var cpoint = [lng, lat];
placeSearch.searchNearBy('', cpoint, 1000, function (status, result) {
if (status === 'complete') {
var pois = result.poiList.pois;
var htmlList = '';
for (var i = 0; i < pois.length; i++) {
var poiItem = pois[i];
if (poiItem.location !== undefined) {
htmlList += '<div data-lng="' + poiItem.location.lng + '" data-lat="' + poiItem.location.lat + '" data-title="'+ poiItem.name +'" data-address="'+ poiItem.address +'" class="ew-map-select-search-list-item">';
htmlList += ' <div class="ew-map-select-search-list-item-title">' + poiItem.name + '</div>';
htmlList += ' <div class="ew-map-select-search-list-item-address">' + poiItem.address + '</div>';
htmlList += ' <div class="ew-map-select-search-list-item-icon-ok layui-hide"><i class="layui-icon layui-icon-ok-circle"></i></div>';
htmlList += '</div>';
}
}
$('#ew-map-select-poi').html(htmlList);
}
});
});
};
// 初始化search
if (o.config.type == 1) {
o.initGaodeSearch(map, markCenter, searchNearBy);
}
}
this.initGaodeSearch = function (map, markCenter, searchNearBy) {
var o = this;
// poi列表点击事件
$('#ew-map-select-poi').off('click').on('click', '.ew-map-select-search-list-item', function () {
$('#ew-map-select-tips').addClass('layui-hide');
$('#ew-map-select-poi .ew-map-select-search-list-item-icon-ok').addClass('layui-hide');
$(this).find('.ew-map-select-search-list-item-icon-ok').removeClass('layui-hide');
$('#ew-map-select-center-img').removeClass('bounceInDown');
setTimeout(function () {
$('#ew-map-select-center-img').addClass('bounceInDown');
});
var lng = $(this).data('lng');
var lat = $(this).data('lat');
var name = $(this).find('.ew-map-select-search-list-item-title').text();
var address = $(this).find('.ew-map-select-search-list-item-address').text();
//
map.setZoomAndCenter(map.getZoom(), [lng, lat]);
markCenter({lng: lng, lat: lat});
var title = $(this).data('title');
var address = $(this).data('address');
o.config.onClickTip({title:title,address:address,lng:lng,lat:lat});
});
searchNearBy(o.config.longitude ? o.config.longitude : 116.404, o.config.latitude ? o.config.latitude : 39.915);
// 搜索提示
var $inputSearch = $('#ew-map-select-input-search');
$inputSearch.off('input').on('input', function () {
var keywords = $(this).val();
var $selectTips = $('#ew-map-select-tips');
if (!keywords) {
$selectTips.html('');
$selectTips.addClass('layui-hide');
}
AMap.plugin('AMap.Autocomplete', function () {
var autoComplete = new AMap.Autocomplete({city: '全国'});
autoComplete.search(keywords, function (status, result) {
if (result.tips) {
var tips = result.tips;
var htmlList = '';
for (var i = 0; i < tips.length; i++) {
var tipItem = tips[i];
if (tipItem.location !== undefined) {
htmlList += '<div data-lng="' + tipItem.location.lng + '" data-lat="' + tipItem.location.lat + '" data-title="'+ tipItem.name +'" data-address="'+ tipItem.address +'" class="ew-map-select-search-list-item">';
htmlList += ' <div class="ew-map-select-search-list-item-icon-search"><i class="layui-icon layui-icon-search"></i></div>';
htmlList += ' <div class="ew-map-select-search-list-item-title">' + tipItem.name + '</div>';
htmlList += ' <div class="ew-map-select-search-list-item-address">' + tipItem.address + '</div>';
htmlList += '</div>';
}
}
$selectTips.html(htmlList);
if (tips.length === 0) $('#ew-map-select-tips').addClass('layui-hide');
else $('#ew-map-select-tips').removeClass('layui-hide');
} else {
$selectTips.html('');
$selectTips.addClass('layui-hide');
}
});
});
});
$inputSearch.off('blur').on('blur', function () {
var keywords = $(this).val();
var $selectTips = $('#ew-map-select-tips');
if (!keywords) {
$selectTips.html('');
$selectTips.addClass('layui-hide');
}
});
$inputSearch.off('focus').on('focus', function () {
var keywords = $(this).val();
if (keywords) $('#ew-map-select-tips').removeClass('layui-hide');
});
// tips列表点击事件
$('#ew-map-select-tips').off('click').on('click', '.ew-map-select-search-list-item', function () {
$('#ew-map-select-tips').addClass('layui-hide');
var lng = $(this).data('lng');
var lat = $(this).data('lat');
map.setZoomAndCenter(map.getZoom(), [lng, lat]);
markCenter({lng: lng, lat: lat});
var title = $(this).data('title');
var address = $(this).data('address');
o.config.onClickTip({title:title,address:address,lng:lng,lat:lat});
});
}
this.openMap = function () {
var o = this;
if (o.config.apiType == "baiduMap") {
var index = layer.open({
type: 1,
area: ["850px", "600px"],
title: o.config.title,
content: o.config.type == 0 ? tpl0:tpl1,
success: function () {
// 回显数据 中心标记经纬度
$("#lng").val(o.lng);
$("#lat").val(o.lat);
// 渲染地图
if (undefined === window.BMap) {
$.getScript("http://api.map.baidu.com/getscript?v=2.0&ak=tCNPmUfNmy4nTR3VYW71a6IgyWMaOSUb&services=&t=20200824135534", function () {
o.openBaiduMap();
});
} else {
o.openBaiduMap();
}
// 绑定事件
$("#ew-map-select-btn-ok").on("click", function () {
o.config.success({lng: o.lng ? o.lng : 116.404, lat: o.lat ? o.lat : 39.915});
layer.close(index);
})
}
});
} else if (o.config.apiType == "tiandiMap") {
var index = layer.open({
type: 1,
area: ["850px", "600px"],
title: o.config.title,
content: o.config.type == 0 ? tpl0:tpl1,
success: function () {
// 回显数据 中心标记经纬度
$("#lng").val(o.lng);
$("#lat").val(o.lat);
// 渲染地图
if (undefined === window.T) {
$.getScript("http://api.tianditu.gov.cn/api?v=4.0&tk=a8718394c98e9ae85b0d7af352653ce2&callback=init", function () {
o.openTiandiMap();
})
} else {
o.openTiandiMap();
}
// 绑定事件
$("#ew-map-select-btn-ok").on("click", function () {
o.config.success({lng: o.lng ? o.lng : 116.404, lat: o.lat ? o.lat : 39.915});
layer.close(index);
})
}
});
} else if (o.config.apiType == "gaodeMap") {
var index = layer.open({
type: 1,
area: ["850px", "600px"],
title: o.config.title,
content: o.config.type == 0 ? tpl0:tpl1,
success: function () {
// 回显数据 中心标记经纬度
$("#lng").val(o.lng);
$("#lat").val(o.lat);
// 渲染地图
if (undefined === window.AMap) {
$.getScript("https://webapi.amap.com/maps?v=1.4.14&key=006d995d433058322319fa797f2876f5", function () {
o.openGaodeMap();
});
} else {
o.openGaodeMap();
}
// 绑定事件
$("#ew-map-select-btn-ok").on("click", function () {
o.config.success({lng: o.lng ? o.lng : 116.404, lat: o.lat ? o.lat : 39.915});
layer.close(index);
})
}
});
}
}
};
layui.link(layui.cache.base + "location/location.css?v="+(new Date).getTime()); // 加载css
/*导出模块,用一个location对象来管理obj，不需要外部new obj*/
var location = function () {
}
location.prototype.render = function (elem, config) {
$(elem).on("click", function () {
var _this = new obj(config);
_this.openMap();
})
}
var locationObj = new location();
exports(MOD_NAME, locationObj);
})
public/js/lay-module/location/locationX.js
+168
View File
@@ -0,0 +1,168 @@
layui.define(['layer'],function (exports) {
var $ = layui.jquery,
layer=layui.layer,
MOD_NAME = "locationX";
var GPS = {
PI : 3.14159265358979324,
x_pi : 3.14159265358979324 * 3000.0 / 180.0,
delta : function (lat, lon) {
// Krasovsky 1940
//
// a = 6378245.0, 1/f = 298.3
// b = a * (1 - f)
// ee = (a^2 - b^2) / a^2;
var a = 6378245.0; // a: 卫星椭球坐标投影到平面地图坐标系的投影因子。
var ee = 0.00669342162296594323; // ee: 椭球的偏心率。
var dLat = this.transformLat(lon - 105.0, lat - 35.0);
var dLon = this.transformLon(lon - 105.0, lat - 35.0);
var radLat = lat / 180.0 * this.PI;
var magic = Math.sin(radLat);
magic = 1 - ee * magic * magic;
var sqrtMagic = Math.sqrt(magic);
dLat = (dLat * 180.0) / ((a * (1 - ee)) / (magic * sqrtMagic) * this.PI);
dLon = (dLon * 180.0) / (a / sqrtMagic * Math.cos(radLat) * this.PI);
return {'lat': dLat, 'lon': dLon};
},
//WGS-84 to GCJ-02
gcj_encrypt : function (wgsLat, wgsLon) {
if (this.outOfChina(wgsLat, wgsLon))
return {'lat': wgsLat, 'lon': wgsLon};
var d = this.delta(wgsLat, wgsLon);
return {'lat' : wgsLat + d.lat,'lon' : wgsLon + d.lon};
},
//GCJ-02 to WGS-84
gcj_decrypt : function (gcjLat, gcjLon) {
if (this.outOfChina(gcjLat, gcjLon))
return {'lat': gcjLat, 'lon': gcjLon};
var d = this.delta(gcjLat, gcjLon);
return {'lat': gcjLat - d.lat, 'lon': gcjLon - d.lon};
},
//GCJ-02 to WGS-84 exactly
gcj_decrypt_exact : function (gcjLat, gcjLon) {
var initDelta = 0.01;
var threshold = 0.000000001;
var dLat = initDelta, dLon = initDelta;
var mLat = gcjLat - dLat, mLon = gcjLon - dLon;
var pLat = gcjLat + dLat, pLon = gcjLon + dLon;
var wgsLat, wgsLon, i = 0;
while (1) {
wgsLat = (mLat + pLat) / 2;
wgsLon = (mLon + pLon) / 2;
var tmp = this.gcj_encrypt(wgsLat, wgsLon)
dLat = tmp.lat - gcjLat;
dLon = tmp.lon - gcjLon;
if ((Math.abs(dLat) < threshold) && (Math.abs(dLon) < threshold))
break;
if (dLat > 0) pLat = wgsLat; else mLat = wgsLat;
if (dLon > 0) pLon = wgsLon; else mLon = wgsLon;
if (++i > 10000) break;
}
//console.log(i);
return {'lat': wgsLat, 'lon': wgsLon};
},
//GCJ-02 to BD-09
bd_encrypt : function (gcjLat, gcjLon) {
var x = gcjLon, y = gcjLat;
var z = Math.sqrt(x * x + y * y) + 0.00002 * Math.sin(y * this.x_pi);
var theta = Math.atan2(y, x) + 0.000003 * Math.cos(x * this.x_pi);
bdLon = z * Math.cos(theta) + 0.0065;
bdLat = z * Math.sin(theta) + 0.006;
return {'lat' : bdLat,'lon' : bdLon};
},
//BD-09 to GCJ-02
bd_decrypt : function (bdLat, bdLon) {
var x = bdLon - 0.0065, y = bdLat - 0.006;
var z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * this.x_pi);
var theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * this.x_pi);
var gcjLon = z * Math.cos(theta);
var gcjLat = z * Math.sin(theta);
return {'lat' : gcjLat, 'lon' : gcjLon};
},
//
bd_WGS84:function(bdLat, bdLon){
var gcj=GPS.bd_decrypt(bdLat, bdLon);
return GPS.gcj_decrypt(gcj.lat,gcj.lon);
},
// 天地图坐标->百度坐标
WGS84_bd:function(bdLat, bdLon){
var gcj=GPS.gcj_encrypt(bdLat, bdLon);
return GPS.bd_encrypt(gcj.lat,gcj.lon);
},
//WGS-84 to Web mercator
//mercatorLat -> y mercatorLon -> x
mercator_encrypt : function(wgsLat, wgsLon) {
var x = wgsLon * 20037508.34 / 180.;
var y = Math.log(Math.tan((90. + wgsLat) * this.PI / 360.)) / (this.PI / 180.);
y = y * 20037508.34 / 180.;
return {'lat' : y, 'lon' : x};
/*
if ((Math.abs(wgsLon) > 180 || Math.abs(wgsLat) > 90))
return null;
var x = 6378137.0 * wgsLon * 0.017453292519943295;
var a = wgsLat * 0.017453292519943295;
var y = 3189068.5 * Math.log((1.0 + Math.sin(a)) / (1.0 - Math.sin(a)));
return {'lat' : y, 'lon' : x};
//*/
},
// Web mercator to WGS-84
// mercatorLat -> y mercatorLon -> x
mercator_decrypt : function(mercatorLat, mercatorLon) {
var x = mercatorLon / 20037508.34 * 180.;
var y = mercatorLat / 20037508.34 * 180.;
y = 180 / this.PI * (2 * Math.atan(Math.exp(y * this.PI / 180.)) - this.PI / 2);
return {'lat' : y, 'lon' : x};
/*
if (Math.abs(mercatorLon) < 180 && Math.abs(mercatorLat) < 90)
return null;
if ((Math.abs(mercatorLon) > 20037508.3427892) || (Math.abs(mercatorLat) > 20037508.3427892))
return null;
var a = mercatorLon / 6378137.0 * 57.295779513082323;
var x = a - (Math.floor(((a + 180.0) / 360.0)) * 360.0);
var y = (1.5707963267948966 - (2.0 * Math.atan(Math.exp((-1.0 * mercatorLat) / 6378137.0)))) * 57.295779513082323;
return {'lat' : y, 'lon' : x};
//*/
},
// two point's distance
distance : function (latA, lonA, latB, lonB) {
var earthR = 6371000.;
var x = Math.cos(latA * this.PI / 180.) * Math.cos(latB * this.PI / 180.) * Math.cos((lonA - lonB) * this.PI / 180);
var y = Math.sin(latA * this.PI / 180.) * Math.sin(latB * this.PI / 180.);
var s = x + y;
if (s > 1) s = 1;
if (s < -1) s = -1;
var alpha = Math.acos(s);
var distance = alpha * earthR;
return distance;
},
outOfChina : function (lat, lon) {
if (lon < 72.004 || lon > 137.8347)
return true;
if (lat < 0.8293 || lat > 55.8271)
return true;
return false;
},
transformLat : function (x, y) {
var ret = -100.0 + 2.0 * x + 3.0 * y + 0.2 * y * y + 0.1 * x * y + 0.2 * Math.sqrt(Math.abs(x));
ret += (20.0 * Math.sin(6.0 * x * this.PI) + 20.0 * Math.sin(2.0 * x * this.PI)) * 2.0 / 3.0;
ret += (20.0 * Math.sin(y * this.PI) + 40.0 * Math.sin(y / 3.0 * this.PI)) * 2.0 / 3.0;
ret += (160.0 * Math.sin(y / 12.0 * this.PI) + 320 * Math.sin(y * this.PI / 30.0)) * 2.0 / 3.0;
return ret;
},
transformLon : function (x, y) {
var ret = 300.0 + x + 2.0 * y + 0.1 * x * x + 0.1 * x * y + 0.1 * Math.sqrt(Math.abs(x));
ret += (20.0 * Math.sin(6.0 * x * this.PI) + 20.0 * Math.sin(2.0 * x * this.PI)) * 2.0 / 3.0;
ret += (20.0 * Math.sin(x * this.PI) + 40.0 * Math.sin(x / 3.0 * this.PI)) * 2.0 / 3.0;
ret += (150.0 * Math.sin(x / 12.0 * this.PI) + 300.0 * Math.sin(x / 30.0 * this.PI)) * 2.0 / 3.0;
return ret;
}
};
exports(MOD_NAME,GPS);
})
public/js/lay-module/mods/extend/jsan-notice.css
+96
View File
@@ -0,0 +1,96 @@
/**
消息盒子容器
*/
.lay-jsan-notice-marker {
position: absolute;
}
/**
消息盒子基础样式
*/
.lay-jsan-notice-marker-box {
/*position: absolute;*/
width: 35px;
height: 35px;
border: 1px solid #e2e2e2;
text-align: center;
line-height: 35px;
color: #e2e2e2;
float: left;
background-color: #ffffff;
}
/**
消息盒子鼠标悬停样式
*/
.lay-jsan-notice-marker-box:hover {
background-color: #f2f2f2;
color: #1E9FFF;
}
/**
消息盒子中图标样式
*/
.lay-jsan-notice-marker-icon {
font-size: 26px!important;
}
/**
最新消息，消息盒子样式
*/
.lay-jsan-notice-marker-news {
color: #FF5722!important;
}
/**
消息盒子操作按钮
*/
.lay-jsan-notice-marker-btn {
/*position: absolute;*/
width: 15px;
height: 35px;
border: 1px solid #e2e2e2;
text-align: center;
line-height: 35px;
color: #e2e2e2;
float: left;
background-color: #ffffff;
font-size: 16px;
}
.lay-jsan-notice-marker-btn:hover {
background-color: #f2f2f2;
color: #1E9FFF;
}
.lay-jsan-notice-marker-item {
padding: 5px 0 5px 10px;
background-color: #f2f2f2;
border-radius: 5px;
margin-bottom: 12px;
}
.lay-jsan-notice-marker-item:hover {
background-color: #dddddd;
cursor: pointer;
}
.lay-jsan-notice-marker-item-title-new {
color: #FF5722;
}
.lay-jsan-notice-marker-item-title {
font-size: 14px;
font-weight: bold;
}
.lay-jsan-notice-marker-item-date {
font-size: 10px;
color: #d2d2d2;
padding: 2px 0 2px 0;
}
.lay-jsan-notice-marker-item-content {
font-size: 12px;
color: #d2d2d2;
}
public/js/lay-module/mods/extend/jsan-notice.js
+243
View File
@@ -0,0 +1,243 @@
// noinspection ThisExpressionReferencesGlobalObjectJS
/**
* 基于layui v-2.5.4 版本，封装的消息组件
* 作者：jsan
* 日期：2019-07-28
*/
(function (root, factroy) {
typeof root.layui === "object" && layui.define ? layui.define(["layer"], function(mods){mods("jsanNotice", factroy(layui.layer))}) : factroy(root.layer);
}(this, function (layer) {
// //引入css
layui.link(layui.cache.base+"mods/extend/jsan-notice.css?v="+(new Date).getTime());
/**
* 消息盒子方法
* @param option 参数对象：
* elem 元素选择器，如：#test
* positionX 盒子左右定位位置[right,left]，默认right
* positionY 盒子相对位置，可以选择不同的单位长度，如：100px
* lowKey true隐藏，false显示
* noticeWindow 详细消息窗口属性
*/
layer.noticeMarker = function (option) {
const $ = layui.$,
that = {},
POSITION_X_STYLE = typeof option["positionX"] === "undefined" || option["positionX"] === "right" ? "right: 1px;" : option["positionX"]+" 1px;",
POSITION_Y_STYPE = typeof option["positionY"] === "undefined" ? "top: 0;" : "top: "+option["positionY"]+";",
MARKER = "lay-jsan-notice-marker",
MARKER_BOX = "lay-jsan-notice-marker-box",
MARKER_BOX_NEWS = "lay-jsan-notice-marker-news",
MARKER_BOX_ICON = "layui-icon layui-icon-speaker lay-jsan-notice-marker-icon",
MARKER_BOX_BTN = "lay-jsan-notice-marker-btn",
MARKER_BOX_HIDE_BTN_ICON = "layui-icon layui-icon-"+(typeof option["positionX"] === "undefined" || option["positionX"] === "right" ? "right" : "left"),
MARKER_BOX_SHOW_BTN_ICON = "layui-icon layui-icon-"+(typeof option["positionX"] === "undefined" || option["positionX"] === "right" ? "left" : "right");
that.properties = {}; //初始化属性
$(option.elem).hide(); //隐藏初始化元素
that.properties.index = NOTICE_MARKER_INDEX++; //消息框唯一标识
that.properties.isOpen = option["lowKey"]; //初始化是否显示
that.properties.option = option; //录入初始化配置
that.properties.option.positionX = typeof option["positionX"] === "undefined" ? "right" : option["positionX"]; //初始化定位
that.properties.option.positionY = typeof option["positionY"] === "undefined" ? "right" : option["positionY"]; //初始化定位
that.properties.marker = $("<div id='notice-marker-"+that.properties.index+"' class='"+MARKER+"' style='"+POSITION_X_STYLE+POSITION_Y_STYPE+"'></div>"); //容器
that.properties.markerBoxBtn = $("<div class='"+MARKER_BOX_BTN+"'></div>"); //提示显示角标
that.properties.markerBoxBtnIcon = $("<i class='"+MARKER_BOX_HIDE_BTN_ICON+"'></i>"); //提示显示角标
that.properties.markerBox = $("<div class='"+MARKER_BOX+"'></div>"); //消息盒子
that.properties.markerBoxIcon = $("<i class='"+MARKER_BOX_ICON+"'></i>"); //消息盒子图标
//初始化默认方法
/**
* 消息提醒方法
* @param option 参数对象
* lowKey true隐藏，false显示
*/
that.remind = function(option) {
if(option["lowKey"] && that.properties.isOpen) {
//提醒时不弹出
this.hideBox();
}else if(!option["lowKey"] && !that.properties.isOpen) {
this.showBox();
}
this.properties.markerBox.addClass(MARKER_BOX_NEWS);
this.properties.markerBoxBtn.addClass(MARKER_BOX_NEWS);
};
/**
* 隐藏消息盒子方法
*/
that.hideBox = function() {
if(this.properties.isOpen) {
this.properties.markerBox.hide();
this.properties.markerBoxBtnIcon.removeClass(MARKER_BOX_HIDE_BTN_ICON);
this.properties.markerBoxBtnIcon.addClass(MARKER_BOX_SHOW_BTN_ICON);
this.properties.isOpen = false;
}
};
/**
* 显示消息盒子方法
*/
that.showBox = function() {
if(!this.properties.isOpen) {
this.properties.markerBox.show();
this.properties.markerBoxBtnIcon.removeClass(MARKER_BOX_SHOW_BTN_ICON);
this.properties.markerBoxBtnIcon.addClass(MARKER_BOX_HIDE_BTN_ICON);
this.properties.isOpen = true;
}
};
//封装渲染
that.properties.markerBoxBtn.html(that.properties.markerBoxBtnIcon);
that.properties.markerBox.html(that.properties.markerBoxIcon);
that.properties.marker.html(that.properties.option["positionX"] === "left" ? that.properties.markerBox : that.properties.markerBoxBtn);
that.properties.marker.append(that.properties.option["positionX"] === "left" ? that.properties.markerBoxBtn : that.properties.markerBox);
$("body").append(that.properties.marker);
//隐藏/显示事件
that.properties.markerBoxBtn.unbind().on("click", that, function (event) {
event.data.properties.isOpen ? event.data.hideBox() : event.data.showBox();
});
//初始化详细消息窗口
/**
* type 1：组件自带消息窗口，2：打开用户自定义窗口，默认是1
* title 消息窗口标题
* classType 消息类型（type=1时生效） 属于Object类型 {"id": "name"} 如：{"notice": "通知", "alerted": "预警", "other": "其他"}
* url 自定义消息窗口时打开的链接
* width 消息窗口宽度 可以选择不同的单位长度，如：100px
* height 消息窗口高度 可以选择不同的单位长度，如：100px
* contentWidth 消息内容窗口宽度
* contentHeight 消息内容窗口高度
*/
if(typeof that.properties.option.noticeWindow === "object" && that.properties.option.noticeWindow["type"] !== 2) {
that.noticeWindow = {};
that.noticeWindow.index = that.properties.index;
that.noticeWindow.width = typeof that.properties.option.noticeWindow["width"] === "string" ? that.properties.option.noticeWindow["width"] : "150px";
that.noticeWindow.height = typeof that.properties.option.noticeWindow["height"] === "string" ? that.properties.option.noticeWindow["height"] : "560px";
that.noticeWindow.contentWidth = typeof that.properties.option.noticeWindow["contentWidth"] === "string" ? that.properties.option.noticeWindow["contentWidth"] : "650px";
that.noticeWindow.contentHeight = typeof that.properties.option.noticeWindow["contentHeight"] === "string" ? that.properties.option.noticeWindow["contentHeight"] : "560px";
that.noticeWindow.window = $("<div id='notice-marker-window-"+that.noticeWindow.index+"' class='layui-tab' lay-filter='notice-marker-window-"+that.noticeWindow.index+"'></div>");
that.noticeWindow.tabTitle = $("<ul id='notice-marker-window-title-"+that.noticeWindow.index+"' class='layui-tab-title'></ul>");
that.noticeWindow.tabContent = $("<div id='notice-marker-window-content-"+that.noticeWindow.index+"' class='layui-tab-content'></div>");
const classType = {};
if(typeof that.properties.option.noticeWindow["classType"] === "object") {
for(let tab in that.properties.option.noticeWindow["classType"]) {
classType[tab] = ["<li id='notice-marker-window-title-"+tab+"'>"+that.properties.option.noticeWindow["classType"][tab]+"<span class='layui-badge-dot layui-hide'></span></li>", "<div id='notice-marker-window-content-"+tab+"' lay-id='notice-marker-window-content-"+tab+"' class='layui-tab-item'></div>"];
}
}else {
classType['notice'] = ["<li id='notice-marker-window-title-notice'>消息</li>", "<div id='notice-marker-window-content-notice' lay-id='notice-marker-window-content-\"+tab+\"' class='layui-tab-item'></div>"];
}
that.noticeWindow.classType = classType;
//详细消息窗口渲染
that.noticeWindow.window.html(that.noticeWindow.tabTitle);
that.noticeWindow.window.append(that.noticeWindow.tabContent);
for(let tab in that.noticeWindow.classType) {
that.noticeWindow.tabTitle.append(that.noticeWindow.classType[tab][0]);
that.noticeWindow.tabContent.append(that.noticeWindow.classType[tab][1]);
}
that.noticeWindow.window.hide();
that.noticeWindow.tabTitle.find("li").eq(0).addClass("layui-this");
that.noticeWindow.tabContent.find(".layui-tab-item").eq(0).addClass("layui-show");
$("body").append(that.noticeWindow.window);
layui.use('element', function(){});
that.properties.markerBox.unbind().on("click", that, function (event) {
event.data.hideBox();
layer.open({
type: 1,
id: "notice-marker-window-layer-"+that.noticeWindow.index,
title: typeof event.data.properties.option.noticeWindow["title"] === "string" ? event.data.properties.option.noticeWindow["title"] : "<i class='layui-icon layui-icon-friends'></i>",
area: [event.data.noticeWindow.width - 12, event.data.noticeWindow.height],
offset: [event.data.properties.option.positionY, (that.properties.option["positionX"] === "right" ? ($("body").width()-16-Number(that.noticeWindow.width.replace("px", "")))+"px" : "16px")],
shade: 0,
maxmin: true,
content: $("#"+event.data.noticeWindow.window.attr("id")),
cancel: function () {
that.noticeWindow.window.hide();
}
});
event.data.properties.markerBox.removeClass(MARKER_BOX_NEWS);
event.data.properties.markerBoxBtn.removeClass(MARKER_BOX_NEWS);
});
/**
* 向消息窗口推送消息
* @param option 参数对象
* lowKey 是否使用盒子提醒 true不提醒，false提醒
* classTypeId 消息所属消息类型的id
* content 需要推送的类型集合 Array，每组数据包括：
* title 消息标题。最大27位长度，大于27会自动省略
* content 消息内容。最大44位长度，大于44位自动省略
* date 消息发布时间 yyyy-MM-dd HH:mm:ss
* url 点击消息后跳转位置
*/
that.addNews = function (option) {
for(let i in option.content) {
const item = $("<div class='lay-jsan-notice-marker-item' notice-url = '" + option.content[i]["url"] + "'></div>");
item.append("<div class='lay-jsan-notice-marker-item-title lay-jsan-notice-marker-item-title-new'>"+(option.content[i]["title"].length > 28 ? option.content[i]["title"].substring(0, 25)+"..." : option.content[i]["title"] )+"</div>");
item.append("<div class='lay-jsan-notice-marker-item-date'>"+option.content[i]["date"]+"</div>");
item.append("<div class='lay-jsan-notice-marker-item-content'>"+(option.content[i]["content"].length > 45 ? option.content[i]["content"].substring(0, 43)+"..." : option.content[i]["content"])+"</div>");
$("#notice-marker-window-content-"+option["classTypeId"]).prepend(item);
}
$("#notice-marker-window-title-"+option["classTypeId"]).find(".layui-badge-dot").removeClass("layui-hide");
noticeMarkerItemEvent(option, this);
const lowKey = typeof option["lowKey"] === "undefined" ? false : option["lowKey"];
this.remind({"lowKey": lowKey});
};
var noticeMarkerItemEvent = function (option, that) {
$("#notice-marker-window-content-"+option["classTypeId"]+" .lay-jsan-notice-marker-item").unbind().on("click", function (event) {
$(this).find(".lay-jsan-notice-marker-item-title").eq(0).removeClass("lay-jsan-notice-marker-item-title-new");
if($("#notice-marker-window-content-"+option["classTypeId"]).find(".lay-jsan-notice-marker-item-title-new").length === 0) {
$("#notice-marker-window-title-"+option["classTypeId"]).find(".layui-badge-dot").addClass("layui-hide");
}
$(this).attr("notice-url");
layer.open({
type: 2,
title: that.properties.option.noticeWindow["title"],
area: [that.noticeWindow.contentWidth, that.noticeWindow.contentHeight],
shade: 0,
maxmin: true,
content: $(this).attr("notice-url")
});
});
}
}else if(typeof that.properties.option.noticeWindow === "object" && that.properties.option.noticeWindow["type"] === 2) {
that.noticeWindow = {};
that.noticeWindow.index = that.properties.index;
that.noticeWindow.url = that.properties.option.noticeWindow["url"];
that.noticeWindow.width = typeof that.properties.option.noticeWindow["width"] === "string" ? that.properties.option.noticeWindow["width"] : "150px";
that.noticeWindow.height = typeof that.properties.option.noticeWindow["height"] === "string" ? that.properties.option.noticeWindow["height"] : "560px";
that.properties.markerBox.unbind().on("click", that, function (event) {
event.data.hideBox();
layer.open({
type: 2,
id: "notice-marker-window-layer-"+that.noticeWindow.index,
title: typeof event.data.properties.option.noticeWindow["title"] === "string" ? event.data.properties.option.noticeWindow["title"] : "<i class='layui-icon layui-icon-friends'></i>",
area: [event.data.noticeWindow.width, event.data.noticeWindow.height],
offset: [event.data.properties.option.positionY, (that.properties.option["positionX"] === "right" ? ($("body").width()-16-Number(that.noticeWindow.width.replace("px", "")))+"px" : "16px")],
shade: 0,
maxmin: true,
content: event.data.noticeWindow.url
});
});
}
//初始显示设置
that.properties.isOpen ? that.hideBox() : that.showBox();
return that;
};
return {mod: "jsanNotice", v: "1.0.11"};
}));
NOTICE_MARKER_INDEX = 1;
public/js/lay-module/mods/mods.js
+78
View File
@@ -0,0 +1,78 @@
(function(root,factroy){
typeof root.layui === 'object' && layui.define ? layui.define(function(mods){mods('mods',factroy(layui))}) : null;
}(this,function(layui){
'use strict';
// 预定义插件列表
var list = {
jsanNotice:'mods/extend/jsan-notice'
};
// 插件加载器
var mods = function(mod_name,callback){
var extend = {};
// 如果是官方模块
// 引入单个插件
if(typeof mod_name === 'string'){
if(!isLayui(mod_name)){
if(typeof list[mod_name] !== 'string') throw new Error('引入的插件'+mod_name+'不在预定义列表中');
extend[mod_name] = list[mod_name];
}
}
// 批量引入插件
else if(Array.isArray(mod_name)){
for(var i=0,item;item = mod_name[i++];){
if(!isLayui(item)){
if(typeof list[item] !== 'string') throw new Error('引入的插件'+item+'不在预定义列表中');
extend[item] = list[item];
}
}
}
else{
throw new Error('mods()中，传入了无效的参数');
}
if(typeof callback !== 'function') throw Error('第二个参数必须是函数');
layui.extend(extend).use(mod_name,function(){
var arg = [];
for(var i=0,item;item = arguments[i++];){
arg.push(item);
}
callback.apply(layui,arg);
});
}
var isLayui = function(mod){
return typeof layui_mods[mod] === 'string' ? true : false;
};
if(typeof Array.isArray !== 'function'){
Array.isArray = function(val){
return Object.prototype.toString.call(val) === '[object Array]' ? true : false;
}
}
var layui_mods = {
layer:'layer',
laydate:'laydate',
layedit:'layedit',
laypage:'laypage',
laytpl:'laytpl',
table:'table',
form:'form',
upload:'upload',
jquery:'jquery',
code:'code',
carousel:'carousel',
element:'element',
flow:'flow',
mobile:'mobile',
rate:'rate',
tree:'tree',
util:'util',
};
return mods;
}));
public/js/lay-module/moreMenus/moreMenus.js
+101
View File
@@ -0,0 +1,101 @@
/**
* @Name: 基于layui
* @Author: 潘晨晨
* 最近修改时间: 2021/04/22
*/
layui.define(['jquery'],function(exports){
var $ = layui.jquery;
var obj ={
init:function(element){
//默认
element.data = element.data || [ {name:'暂无数据'}]
element.rows = element.rows || 1
element.moreUpText = element.moreUpText || '更多'
element.moreDownText = element.moreDownText || '收起'
element.href = element.href || false
element.herfBlank = element.herfBlank?'_blank':'_self'
element.themeColor = element.themeColor || 'green'
element.size = element.size ? 'layui-btn-'+element.size :'layui-btn'
var html;
var box = $(element.elemId);
var boxHeight ;
var itemHeight ;
var flag = true; // 如果外面包裹了pack的变false
var dyc = false;
box.addClass('box-item-pcc');
element.data.forEach(e=>{
boxHeight = box.height();
itemHeight = $('.item-pcc').outerHeight(true);
element.href ? html = '<a class="item-pcc layui-bg-'+element.themeColor+' '+element.size+'" href="'+element.href+'?id='+e.id+'" target="'+element.herfBlank+'">'+e.name+'</a>':html = '<span class="item-pcc layui-bg-'+element.themeColor+' '+element.size+'">'+e.name+'</span>'
if((boxHeight>itemHeight*element.rows) && flag){
morePosition();
flag =false;
}
box.append(html);
})
boxHeight = box.height();
itemHeight = $('.item-pcc').outerHeight(true);
if(boxHeight>itemHeight*element.rows){
more(); //第一次渲染页面
dyc =true
}
$(document).on('click','#more-pcc',function(){ //点击更多
more()
})
function morePosition(el){
if(flag){
if(el&&dyc){ //如果不是第一次渲染并且
box.find('#more-box-pcc').remove();
}
else{
$('.item-pcc').wrapAll("<span class='pack-pcc'></span>")
}
var list = $('.pack-pcc .item-pcc').eq(-3);
list.before('<span id="more-box-pcc" class="item-pcc more-pcc '+element.size+'"><a class="layui-font-'+element.themeColor+' " id="more-pcc">'+element.moreUpText+'</a></span>');
}
}
function more(){
if(box.height()>itemHeight*element.rows){
box.css('height',itemHeight*element.rows);
morePosition(true)
}else{
box.css('height','auto');
box.find('#more-box-pcc').remove();
box.append('<span id="more-box-pcc" class="item-pcc more-pcc '+element.size+'"><a class="layui-font-'+element.themeColor+'" id="more-pcc">'+element.moreDownText+'</a></span>');
flag = true;
}
}
}
}
var $style = $('<style type="text/css">\
.box-item-pcc { overflow: hidden; display: inline-block; width: 70%;} \
.box-item-pcc .item-pcc { margin:0 5px 5px 5px; box-sizing: border-box; display: inline-block; }\
.box-item-pcc .more-pcc { float: right; background: none; }\
.box-item-pcc a { cursor: pointer; }\
.layui-font-red{color:#FF5722!important}\
.layui-font-orange{color:#FFB800!important}\
.layui-font-green{color:#009688!important}\
.layui-font-cyan{color:#2F4056!important}\
.layui-font-blue{color:#01AAED!important}\
.layui-font-black{color:#000!important}\
.layui-font-gray{color:#c2c2c2!important}\
</style>');
$($('head')[0]).append($style);
exports('moreMenus',obj);
});
public/js/lay-module/notice/notice.css
+228
View File
@@ -0,0 +1,228 @@
.toast-title {
font-weight: bold;
}
.toast-message {
-ms-word-wrap: break-word;
word-wrap: break-word;
}
.toast-message a,
.toast-message label {
color: #FFFFFF;
}
.toast-message a:hover {
color: #CCCCCC;
text-decoration: none;
}
.toast-close-button {
position: relative;
right: -0.3em;
top: -0.3em;
float: right;
font-size: 20px;
font-weight: bold;
color: #FFFFFF;
-webkit-text-shadow: 0 1px 0 #ffffff;
text-shadow: 0 1px 0 #ffffff;
opacity: 0.8;
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
filter: alpha(opacity=80);
line-height: 1;
}
.toast-close-button:hover,
.toast-close-button:focus {
color: #000000;
text-decoration: none;
cursor: pointer;
opacity: 0.4;
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40);
filter: alpha(opacity=40);
}
.rtl .toast-close-button {
left: -0.3em;
float: left;
right: 0.3em;
}
/*Additional properties for button version
iOS requires the button element instead of an anchor tag.
If you want the anchor version, it requires `href="#"`.*/
button.toast-close-button {
padding: 0;
cursor: pointer;
background: transparent;
border: 0;
-webkit-appearance: none;
}
.toast-top-center {
top: 0;
right: 0;
width: 100%;
}
.toast-bottom-center {
bottom: 0;
right: 0;
width: 100%;
}
.toast-top-full-width {
top: 0;
right: 0;
width: 100%;
}
.toast-bottom-full-width {
bottom: 0;
right: 0;
width: 100%;
}
.toast-top-left {
top: 12px;
left: 12px;
}
.toast-top-right {
top: 12px;
right: 12px;
}
.toast-bottom-right {
right: 12px;
bottom: 12px;
}
.toast-bottom-left {
bottom: 12px;
left: 12px;
}
#toast-container {
position: fixed;
z-index: 999999;
pointer-events: none;
/*overrides*/
}
#toast-container * {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
#toast-container > div {
position: relative;
pointer-events: auto;
overflow: hidden;
margin: 0 0 6px;
padding: 15px 15px 15px 50px;
width: 300px;
-moz-border-radius: 3px 3px 3px 3px;
-webkit-border-radius: 3px 3px 3px 3px;
border-radius: 3px 3px 3px 3px;
background-position: 15px center;
background-repeat: no-repeat;
-moz-box-shadow: 0 0 12px #999999;
-webkit-box-shadow: 0 0 12px #999999;
box-shadow: 0 0 12px #999999;
color: #FFFFFF;
opacity: 0.8;
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
filter: alpha(opacity=80);
}
#toast-container > div.rtl {
direction: rtl;
padding: 15px 50px 15px 15px;
background-position: right 15px center;
}
#toast-container > div:hover {
-moz-box-shadow: 0 0 12px #000000;
-webkit-box-shadow: 0 0 12px #000000;
box-shadow: 0 0 12px #000000;
opacity: 1;
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
filter: alpha(opacity=100);
cursor: pointer;
}
#toast-container > .toast-info {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGwSURBVEhLtZa9SgNBEMc9sUxxRcoUKSzSWIhXpFMhhYWFhaBg4yPYiWCXZxBLERsLRS3EQkEfwCKdjWJAwSKCgoKCcudv4O5YLrt7EzgXhiU3/4+b2ckmwVjJSpKkQ6wAi4gwhT+z3wRBcEz0yjSseUTrcRyfsHsXmD0AmbHOC9Ii8VImnuXBPglHpQ5wwSVM7sNnTG7Za4JwDdCjxyAiH3nyA2mtaTJufiDZ5dCaqlItILh1NHatfN5skvjx9Z38m69CgzuXmZgVrPIGE763Jx9qKsRozWYw6xOHdER+nn2KkO+Bb+UV5CBN6WC6QtBgbRVozrahAbmm6HtUsgtPC19tFdxXZYBOfkbmFJ1VaHA1VAHjd0pp70oTZzvR+EVrx2Ygfdsq6eu55BHYR8hlcki+n+kERUFG8BrA0BwjeAv2M8WLQBtcy+SD6fNsmnB3AlBLrgTtVW1c2QN4bVWLATaIS60J2Du5y1TiJgjSBvFVZgTmwCU+dAZFoPxGEEs8nyHC9Bwe2GvEJv2WXZb0vjdyFT4Cxk3e/kIqlOGoVLwwPevpYHT+00T+hWwXDf4AJAOUqWcDhbwAAAAASUVORK5CYII=") !important;
}
#toast-container > .toast-error {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAHOSURBVEhLrZa/SgNBEMZzh0WKCClSCKaIYOED+AAKeQQLG8HWztLCImBrYadgIdY+gIKNYkBFSwu7CAoqCgkkoGBI/E28PdbLZmeDLgzZzcx83/zZ2SSXC1j9fr+I1Hq93g2yxH4iwM1vkoBWAdxCmpzTxfkN2RcyZNaHFIkSo10+8kgxkXIURV5HGxTmFuc75B2RfQkpxHG8aAgaAFa0tAHqYFfQ7Iwe2yhODk8+J4C7yAoRTWI3w/4klGRgR4lO7Rpn9+gvMyWp+uxFh8+H+ARlgN1nJuJuQAYvNkEnwGFck18Er4q3egEc/oO+mhLdKgRyhdNFiacC0rlOCbhNVz4H9FnAYgDBvU3QIioZlJFLJtsoHYRDfiZoUyIxqCtRpVlANq0EU4dApjrtgezPFad5S19Wgjkc0hNVnuF4HjVA6C7QrSIbylB+oZe3aHgBsqlNqKYH48jXyJKMuAbiyVJ8KzaB3eRc0pg9VwQ4niFryI68qiOi3AbjwdsfnAtk0bCjTLJKr6mrD9g8iq/S/B81hguOMlQTnVyG40wAcjnmgsCNESDrjme7wfftP4P7SP4N3CJZdvzoNyGq2c/HWOXJGsvVg+RA/k2MC/wN6I2YA2Pt8GkAAAAASUVORK5CYII=") !important;
}
#toast-container > .toast-success {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADsSURBVEhLY2AYBfQMgf///3P8+/evAIgvA/FsIF+BavYDDWMBGroaSMMBiE8VC7AZDrIFaMFnii3AZTjUgsUUWUDA8OdAH6iQbQEhw4HyGsPEcKBXBIC4ARhex4G4BsjmweU1soIFaGg/WtoFZRIZdEvIMhxkCCjXIVsATV6gFGACs4Rsw0EGgIIH3QJYJgHSARQZDrWAB+jawzgs+Q2UO49D7jnRSRGoEFRILcdmEMWGI0cm0JJ2QpYA1RDvcmzJEWhABhD/pqrL0S0CWuABKgnRki9lLseS7g2AlqwHWQSKH4oKLrILpRGhEQCw2LiRUIa4lwAAAABJRU5ErkJggg==") !important;
}
#toast-container > .toast-warning {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGYSURBVEhL5ZSvTsNQFMbXZGICMYGYmJhAQIJAICYQPAACiSDB8AiICQQJT4CqQEwgJvYASAQCiZiYmJhAIBATCARJy+9rTsldd8sKu1M0+dLb057v6/lbq/2rK0mS/TRNj9cWNAKPYIJII7gIxCcQ51cvqID+GIEX8ASG4B1bK5gIZFeQfoJdEXOfgX4QAQg7kH2A65yQ87lyxb27sggkAzAuFhbbg1K2kgCkB1bVwyIR9m2L7PRPIhDUIXgGtyKw575yz3lTNs6X4JXnjV+LKM/m3MydnTbtOKIjtz6VhCBq4vSm3ncdrD2lk0VgUXSVKjVDJXJzijW1RQdsU7F77He8u68koNZTz8Oz5yGa6J3H3lZ0xYgXBK2QymlWWA+RWnYhskLBv2vmE+hBMCtbA7KX5drWyRT/2JsqZ2IvfB9Y4bWDNMFbJRFmC9E74SoS0CqulwjkC0+5bpcV1CZ8NMej4pjy0U+doDQsGyo1hzVJttIjhQ7GnBtRFN1UarUlH8F3xict+HY07rEzoUGPlWcjRFRr4/gChZgc3ZL2d8oAAAAASUVORK5CYII=") !important;
}
#toast-container.toast-top-center > div,
#toast-container.toast-bottom-center > div {
width: 300px;
margin-left: auto;
margin-right: auto;
}
#toast-container.toast-top-full-width > div,
#toast-container.toast-bottom-full-width > div {
width: 96%;
margin-left: auto;
margin-right: auto;
}
.toast {
background-color: #030303;
}
.toast-success {
background-color: #51A351;
}
.toast-error {
background-color: #BD362F;
}
.toast-info {
background-color: #2F96B4;
}
.toast-warning {
background-color: #F89406;
}
.toast-progress {
position: absolute;
left: 0;
bottom: 0;
height: 4px;
background-color: #000000;
opacity: 0.4;
-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40);
filter: alpha(opacity=40);
}
/*Responsive Design*/
@media all and (max-width: 240px) {
#toast-container > div {
padding: 8px 8px 8px 50px;
width: 11em;
}
#toast-container > div.rtl {
padding: 8px 50px 8px 8px;
}
#toast-container .toast-close-button {
right: -0.2em;
top: -0.2em;
}
#toast-container .rtl .toast-close-button {
left: -0.2em;
right: 0.2em;
}
}
@media all and (min-width: 241px) and (max-width: 480px) {
#toast-container > div {
padding: 8px 8px 8px 50px;
width: 18em;
}
#toast-container > div.rtl {
padding: 8px 50px 8px 8px;
}
#toast-container .toast-close-button {
right: -0.2em;
top: -0.2em;
}
#toast-container .rtl .toast-close-button {
left: -0.2em;
right: 0.2em;
}
}
@media all and (min-width: 481px) and (max-width: 768px) {
#toast-container > div {
padding: 15px 15px 15px 50px;
width: 25em;
}
#toast-container > div.rtl {
padding: 15px 50px 15px 15px;
}
}
public/js/lay-module/notice/notice.js
+486
View File
File diff suppressed because one or more lines are too long
public/js/lay-module/numinput/numinput.js
+1
View File
File diff suppressed because one or more lines are too long
public/js/lay-module/openTable/openTable.css
+84
View File
@@ -0,0 +1,84 @@
/**
@ Name：表格可展开显示更多列
@ Author：hbm
@ License：MIT
@ gitee：https://gitee.com/hbm_461/layui_extend_openTable
*/
/* 样式加载完毕的标识 */
html #layuicss-regionSelect {
display: none;
position: absolute;
width: 1989px;
}
.layui-openTable {
}
/* 组件样式 */
.openTable-i-table-open {
display: block;
width: 10px;
height: 10px;
user-select: none;
background: url(./right.svg) 0 0 no-repeat;
background-size: 10px 10px;
}
/*表格展开三角动画*/
.openTable-open-dow {
transform: rotate(90deg)
}
.openTable-i-table-open {
position: relative;
display: inline-block;
transition: transform .2s ease-in-out;
}
.openTable-open-td {
padding-bottom: 20px !important;
background-color: #fdfdfd !important;
}
.openTable-open-td:hover {
background-color: white;
}
/*展开列 容器*/
.openTable-open-item-div {
display: inline-block;
margin-top: 20px;
margin-right: 20px;
font-size: 16px;
}
/*展开列 title*/
.openTable-item-title {
color: #99a9bf;
}
/*展开列 可修改 */
.openTable-exp-value-edit {
background-color: #F6F6F6;
}
/*展开列 仅展示 */
.openTable-exp-value {
padding: 0 20px 0 20px;
min-width: 80px;
display: inline-block;
border: none;
border-bottom: #dedede solid 1px;
padding-bottom: 2px;
padding-top: 4px !important
}
.openTable-open-item-div input {
height: 29px !important;
}
public/js/lay-module/openTable/openTable.js
+258
View File
@@ -0,0 +1,258 @@
/**
@ Name：表格冗余列可展开显示
@ Author：hbm
@ License：MIT
*/
layui.define(['form', 'table'], function (exports) {
var $ = layui.$
, table = layui.table
, form = layui.form
, VERSION = 1.0, MOD_NAME = 'openTable', ELEM = '.layui-openTable', ON = 'on', OFF = 'off'
//外部接口
, openTable = {
index: layui.openTable ? (layui.openTable.index + 10000) : 0
//设置全局项
, set: function (options) {
var that = this;
that.config = $.extend({}, that.config, options);
return that;
}
//事件监听
, on: function (events, callback) {
return layui.onevent.call(this, MOD_NAME, events, callback);
}
}
//操作当前实例
, thisIns = function () {
var that = this
, options = that.config
, id = options.id || options.index;
return {
reload: function (options) {
that.reload.call(that, options);
}
, config: options
}
}
//构造器
, Class = function (options) {
var that = this;
that.index = ++openTable.index;
that.config = $.extend({}, that.config, openTable.config, options);
that.render();
};
//默认配置
Class.prototype.config = {
openType: 0
};
//渲染视图
Class.prototype.render = function () {
var that = this
, options = that.config
, colArr = options.cols[0]
, openCols = options.openCols || []
, done = options.done;
delete options["done"];
// 1、在第一列 插入可展开操作
colArr.splice(0, 0, {
align: 'left',
width: 50,
templet: function (item) {
return "<i class='openTable-i-table-open ' status='off' data='"
// 把当前列的数据绑定到控件
+ (JSON.stringify(item))
+ "' title='展开'></i>";
}
});
// 2、表格Render
table.render(
$.extend({
done: function (res, curr, count) {
initExpandedListener();
if (done) {
done(res, curr, count)
}
}
}, options));
// 3、展开事件
function initExpandedListener() {
//扩大点击事件范围 为父级div
$(".openTable-i-table-open")
.parent()
.unbind()
.click(function () {
var that = $(this).children();
// 关闭类型
if (options.openType === 0) {
var sta = $(".openTable-open-dow").attr("status"),
isThis = (that.attr("data") === $(".openTable-open-dow").attr("data"));
//1、关闭展开的
$(".openTable-open-dow")
.addClass("openTable-open-up")
.removeClass("openTable-open-dow")
.attr("status", OFF);
//2、如果当前 = 展开 && 不等于当前的 关闭
if (sta === ON && isThis) {
$(".openTable-open-td").slideUp(100, function () {
$(".openTable-open-td").remove();
});
return;
} else {
that.attr("status", OFF)
$(".openTable-open-td").remove();
}
}
var _this = this
, item = JSON.parse(that.attr("data"))
, status = that.attr("status") === 'on';
// 1、如果当前为打开，再次点击则关闭
if (status) {
that.removeClass("openTable-open-dow");
that.attr("status", 'off');
this.addTR.find("div").slideUp(100, function () {
_this.addTR.remove();
});
return;
}
var html = ["<div style='margin-left: 50px;display: none'>"];
// 2、从左到右依次排列 Item
openCols.forEach(function (val, index) {
// 1、自定义模板
if (val.templet) {
html.push("<div class='openTable-open-item-div'>")
html.push(val.templet(item));
html.push("</div>")
// 2、可下拉选择类型
} else if (val.type && val.type === 'select') {
var child = ["<div id='" + val.field + "' class='openTable-open-item-div' >"];
child.push("<span style='color: #99a9bf'>" + val["title"] + "：</span>");
child.push("<div class='layui-input-inline'><select lay-filter='" + val.field + "'>");
val.items.forEach(function (it) {
it = val.onDraw(it, item);
child.push("<option value='" + it.id + "' ");
child.push(it.isSelect ? " selected='selected' " : "");
child.push(" >" + it.value + "</option>");
});
child.push("</select></div>");
child.push("</div>");
html.push(child.join(""));
setTimeout(function () {
layui.form.render();
// 监听 select 修改
layui.form.on('select(' + val.field + ')', function (data) {
if (options.edit && val.onSelect(data, item)) {
var json = {};
json.value = data.value;
json.field = val.field;
item[val.field] = data.value;
json.data = JSON.parse(JSON.stringify(item));
options.edit(json);
}
});
}, 20);
} else {
// 3、默认类型
html.push("<div class='openTable-open-item-div'>");
html.push("<span class='openTable-item-title'>" + val["title"] + "：</span>");
html.push((val.edit ?
("<input class='openTable-exp-value openTable-exp-value-edit' autocomplete='off' name='" + val["field"] + "' value='" + item[val["field"]] + "'/>")
: ("<span class='openTable-exp-value' >" + item[val["field"]] + "</span>")
));
html.push("</div>");
}
});
that.addClass("openTable-open-dow");
// 把添加的 tr 绑定到当前 移除时使用
this.addTR = $([
"<tr><td class='openTable-open-td' colspan='" + (colArr.length + 1) + "'>"
, html.join("") + "</div>"
, "</td></tr>"].join("")
);
that.parent().parent().parent().after(this.addTR);
this.addTR.find("div").slideDown(200);
that.attr("status", 'on');
$(".openTable-exp-value-edit")
.blur(function () {
var that = $(this), name = that.attr("name"), val = that.val();
// 设置了回调 &&发生了修改
if (options.edit && item[name] + "" !== val) {
var json = {};
json.value = that.val();
json.field = that.attr("name");
item[name] = val;
json.data = item;
options.edit(json);
}
}).keypress(function (even) {
even.which === 13 && $(this).blur()
})
});
}
// 4、监听排序事件
var elem = $(options.elem).attr("lay-filter");
// 5、监听表格排序
table.on('sort(' + elem + ')', function (obj) {
if (options.sort) {
options.sort(obj)
}
// 重新绑定事件
initExpandedListener();
});
// 6、单元格编辑
layui.table.on('edit(' + elem + ')', function (obj) {
if (options.edit) {
options.edit(obj)
}
});
};
//核心入口
openTable.render = function (options) {
var ins = new Class(options);
return thisIns.call(ins);
};
//加载组件所需样式
layui.link(layui.cache.base + "openTable/openTable.css?v="+(new Date).getTime(), function () {
//此处的“openTable”要对应 openTable.css 中的样式： html #layuicss-openTable{}
}, 'openTable');
exports('openTable', openTable);
});
public/js/lay-module/openTable/right.svg
+1
View File
@@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1574129071108" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="722" xmlns:xlink="http://www.w3.org/1999/xlink" width="512" height="512"><defs><style type="text/css"></style></defs><path d="M804.288 520.288c1.119-14.86-3.681-30.045-15.009-41.627l-446.179-446.499c-21.028-20.961-55.078-20.961-76.291 0.033-21.065 20.999-20.921 55.265-0.11 76.258l411.912 411.875-411.946 411.731c-20.849 21.098-21.176 55.046-0.071 76.187 21.279 21.031 55.222 20.993 76.363-0.038l446.323-446.148c11.4-11.472 16.128-26.658 15.009-41.772v0 0 0zM804.288 520.288z" p-id="723"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 751 B

public/js/lay-module/passwordIntensity/passwordIntensity.js
+316
View File
@@ -0,0 +1,316 @@
/*!
* passwordIntensity v1.0
* author JerryZst
* qq 1309579432
* Date: 2021/01/20 0007
*/
layui.define(['jquery', 'element'], function (exports) {
var $ = layui.jquery;
var element = layui.element;
var _MOD = 'passwordIntensity';
var passwordIntensity = function (opt) {
this.version = 'passwordIntensity-1.0';
this.tmpId = new Date().getTime();
this.tmpId = opt.uniqueId ? opt.uniqueId : this.tmpId + Math.round(Math.random() * 1000 + 9999);
this.passwordLevel = [
'low',
'middle',
'midhigh',
'high',
]
this._level = null;
// 配置项
this.options = $.extend(true, {
data: opt.data || '',
chang: opt.chang || 8,
on: opt.on || null,
}, opt);
this.init(); // 初始化
this.bindEvents(); // 绑定事件
};
/** 获取各个组件 */
passwordIntensity.prototype.getComponents = function () {
var that = this;
var $elem = $(that.options.elem);
var filter = $elem.attr('lay-filter');
if (!filter) {
filter = that.options.elem.substring(1);
$elem.attr('lay-filter', filter);
}
return {
$elem: $elem, // 容器
filter: filter, // 容器的lay-filter
};
};
// 初始化
passwordIntensity.prototype.init = function () {
var components = this.getComponents();
var html = "";
for (var i = 0; i < this.passwordLevel.length; i++) {
var color = "";
var name = "";
var levelId = this.tmpId + this.passwordLevel[i];
if (this.passwordLevel[i] === 'low') {
name = "弱";
color = "layui-bg-red";
} else if (this.passwordLevel[i] === 'middle') {
name = "中";
color = "layui-bg-orange";
} else if (this.passwordLevel[i] === 'midhigh') {
name = "中上";
color = "layui-bg-orange";
} else {
name = "强";
color = "layui-bg-green";
}
html += '<div class="layui-col-md3 layui-col-sm3 layui-col-xs3" style="text-align: center">' +
'<div class="layui-progress layui-progress-big" lay-filter="' + levelId + '">' +
'<div id="' + levelId + '" class="layui-progress-bar ' + color + '" lay-percent="0%">' + '</div>' +
'</div>' + '<span style="background: white;font-size: 12px">' + name + '</span></div>';
}
html = '<div id="' + this.tmpId + '" class="layui-row layui-col-space2" style="margin-top: 5px">' + html + '</div>';
components.$elem.parent('div').append(html);
if (this.options.data) {
components.$elem.val(this.options.data);
var that = this;
var _level = checkStrong(this.options.data,this.options.chang);
switch (_level) {
case 0:
that.setLevel('low', '100%');
break;
case 1:
that.setLevel('low', '100%');
break;
case 2:
that.setLevel('middle', '100%');
break;
case 3:
that.setLevel('midhigh', '100%');
break;
default:
that.setLevel('high', '100%');
break;
}
}
return html;
}
/**
* 绑定事件
*/
passwordIntensity.prototype.bindEvents = function () {
var components = this.getComponents();
var that = this;
// 实时输入事件
components.$elem.off('input propertychange').on('input propertychange', function () {
var pwd = $(this).val();
if (pwd == "" || pwd == null) {
that.setLevel('');
that._level = null;
} else {
var _level = checkStrong(pwd,that.options.chang);
that._level = _level;
switch (_level) {
case 0:
that.setLevel('low', '100%');
break;
case 1:
that.setLevel('low', '100%');
break;
case 2:
that.setLevel('middle', '100%');
break;
case 3:
that.setLevel('midhigh', '100%');
break;
default:
that.setLevel('high', '100%');
break;
}
}
});
// 光标消失事件
components.$elem.off('blur').on('blur', function () {
var pwd = $(this).val();
if (pwd == "" || pwd == null) {
that.setLevel('');
that._level = null;
} else {
var _level = checkStrong(pwd,that.options.chang);
that._level = _level;
switch (_level) {
case 0:
that.setLevel('low', '100%');
break;
case 1:
that.setLevel('low', '100%');
break;
case 2:
that.setLevel('middle', '100%');
break;
case 3:
that.setLevel('midhigh', '100%');
break;
default:
that.setLevel('high', '100%');
break;
}
}
});
}
/**
* 设置级别
*/
passwordIntensity.prototype.setLevel = function (level, value) {
value = value || '100%';
for (var i = 0; i < this.passwordLevel.length; i++) {
if (level === '') {
element.progress(this.tmpId + this.passwordLevel[i], '0%');
} else {
if (level === this.passwordLevel[i]) {
element.progress(this.tmpId + level, value);
} else {
if (value === '100%') {
element.progress(this.tmpId + this.passwordLevel[i], '0%');
}
}
}
}
return true;
}
/**
* 返回当前的密码级别
* @returns {string}
*/
passwordIntensity.prototype.getLevel = function () {
return _levelByName(this._level);
}
/**
* 当前密码是否弱
* @returns {boolean}
*/
passwordIntensity.prototype.isLow = function () {
return _levelByName(this._level) === 'low' || this._level === null;
}
/**
* 当前密码是否中
* @returns {boolean}
*/
passwordIntensity.prototype.isMiddle = function () {
return _levelByName(this._level) === 'middle';
}
/**
* 当前密码是否强
* @returns {boolean}
*/
passwordIntensity.prototype.isHigh = function () {
return _levelByName(this._level) === 'high';
}
/**
* 当前密码是否强
* @returns {boolean}
*/
passwordIntensity.prototype.ismidHigh = function () {
return _levelByName(this._level) === 'midhigh';
}
/**
* 级别转换
* @param level
* @returns {string}
* @private
*/
function _levelByName(level) {
var name = 'low';
switch (level) {
case 0:
name = "low";
break;
case 1:
name = "low";
break;
case 2:
name = "middle";
//that.setLevel('middle', '100%');
break;
case 3:
name = "midhigh";
//that.setLevel('midhigh', '100%');
break;
default:
name = "high";
break;
}
return name;
}
/**
* 监听事件 // 预留
* @param events
* @param callback
* @returns {*}
*/
passwordIntensity.prototype.on = function (events, callback) {
return layui.onevent.call(this, _MOD, events, callback);
};
//判断输入密码的类型
function charMode(iN) {
if (iN >= 48 && iN <= 57) //数字
return 1;
if (iN >= 65 && iN <= 90) //大写
return 2;
if (iN >= 97 && iN <= 122) //小写
return 4;
else
return 8;
}
//计算密码模式
function bitTotal(num) {
modes = 0;
for (i = 0; i < 4; i++) {
if (num & 1) modes++;
num >>>= 1;
}
return modes;
}
//返回强度级别
function checkStrong(sPW,chang) {
if (sPW.length <= 6) {
return 0; //密码太短
}
if(sPW.length < chang){
return 0;
}
Modes = 0;
for (i = 0; i < sPW.length; i++) {
//密码模式
Modes |= charMode(sPW.charCodeAt(i));
}
return bitTotal(Modes);
}
/** 外部方法 */
var iS = {
/* 渲染 */
render: function (options) {
return new passwordIntensity(options);
},
/* 事件监听 */
on: function (events, callback) {
return layui.onevent.call(this, _MOD, events, callback);
}
};
exports(_MOD, iS);
});
public/js/lay-module/regionCheckBox/regionCheckBox.css
+59
View File
@@ -0,0 +1,59 @@
/**
@ Name：layui.regionCheckBox 中国省市复选框
@ Author：wanmianji
*/
html #layuicss-regionCheckBox {
display: none;
position: absolute;
width: 1989px;
}
.layui-regionContent {
margin: 6px;
border: 1px solid #e6e6e6;
}
.layui-regionContent .all {
margin-left: 15px;
}
.layui-regionContent .area {
margin-bottom: 0;
}
.layui-regionContent .area label {
width: 45px;
}
.layui-regionContent .area .province {
margin-left: 75px;
}
.layui-regionContent .province ul li {
float: left;
position: relative;
border: 1px solid #fff;
padding: 9px 0 9px 15px;
}
.layui-regionContent .province ul li .layui-form-checkbox[lay-skin=primary] {
margin-top: 0;
}
.layui-regionContent .province ul li.parent:hover {
border: 1px solid #e4e4e4;
}
.layui-regionContent .province .city{
position: absolute;
background: #fff;
width: 330px;
left: -1px;
top: 100%;
z-index: 2;
line-height: 26px;
border: 1px solid #e4e4e4;
padding: 6px 0 6px 15px;
display: none;
}
public/js/lay-module/regionCheckBox/regionCheckBox.js
+292
View File
@@ -0,0 +1,292 @@
/**
@ Name：layui.regionCheckBox 中国省市复选框
@ Author：wanmianji
*/
layui.define('form', function(exports){
'use strict';
var $ = layui.$
,form = layui.form
,MOD_NAME = 'regionCheckBox', ELEM_CLASS = 'layui-regionContent'
,regionCheckBox = {
index: layui.regionCheckBox ? (layui.regionCheckBox.index + 10000) : 0
,set: function(options){
var that = this;
that.config = $.extend({}, that.config, options);
return that;
}
,on: function(events, callback){
return layui.onevent.call(this, MOD_NAME, events, callback);
}
}
,thisIns = function(){
var that = this
,options = that.config
,id = options.id || options.index;
return {
reload: function(options){
that.config = $.extend({}, that.config, options);
that.render();
}
,val: function(valueArr){
setValue(options, valueArr);
}
,config: options
};
}
,Class = function(options){
var that = this;
that.index = ++regionCheckBox.index;
that.config = $.extend({}, that.config, regionCheckBox.config, options);
that.render();
};
Class.prototype.config = {
data: []
,all: ['所有地域', '所有地域']
,value: []
,width: '550px'
,border: true
,change: function(result){}
,ready: function(){}
};
Class.prototype.render = function(){
var that = this
,options = that.config;
options.elem = $(options.elem);
var id = options.elem.attr('id');
if(!options.elem.hasClass('layui-form')){
options.elem.addClass('layui-form');
}
options.elem.addClass(ELEM_CLASS);
options.elem.css('width', options.width);
if(!options.border){
options.elem.css('border', 'none');
}
options.elem.attr('lay-filter', 'region-' + id);
options.elem.html(getCheckBoxs(options));
//初始值
setValue(options, options.value);
options.elem.find('.parent').mouseover(function() {
$(this).find('.city').show();
});
options.elem.find('.parent').mouseout(function() {
$(this).find('.city').hide();
});
form.on('checkbox(regionCheckBox-'+id+')', function(data) {
if($(data.elem).parents('.all').length > 0) { //选择全部
if(data.elem.checked) {
options.elem.find(':checkbox').prop('checked', true);
} else {
options.elem.find(':checkbox').prop('checked', false);
}
} else {
//选择省（不包括直辖市）
if($(data.elem).parent().hasClass('parent')) {
if(data.elem.checked) {
$(data.elem).parent().find('.city :checkbox').prop('checked', true);
} else {
$(data.elem).parent().find('.city :checkbox').prop('checked', false);
}
}
//选择城市
if($(data.elem).parent().hasClass('city')) {
$(data.elem).parents('.parent').attr('name', options.name);
if(data.elem.checked) {
var is_all = true;
$(data.elem).parent().find(':checkbox').each(function(i, item) {
if(! item.checked) {
is_all = false;
return false;
}
});
if(is_all) {
$(data.elem).parents('.parent').find(':checkbox:first').prop('checked', true);
}
} else {
$(data.elem).parents('.parent').find(':checkbox:first').prop('checked', false);
}
}
//选择除全部外任意
if(data.elem.checked) {
var is_all = true;
options.elem.find('.province :checkbox').each(function(i, item) {
if(! item.checked) {
is_all = false;
return false;
}
});
if(is_all) {
options.elem.find('.all :checkbox').prop('checked', true);
}
} else {
options.elem.find('.all :checkbox').prop('checked', false);
}
}
form.render('checkbox', options.elem.attr('lay-filter'));
renderParentDom(options.elem);
initName(options);
options.change(data);
});
options.ready();
}
function getCheckBoxs(options){
var data = options.data,
all = options.all,
name = options.name,
id = options.elem.attr('id'),
skin = 'primary',
filter = 'regionCheckBox-' + id,
boxs = '',
hasArea = true;
if(all != null && all.length == 2){
boxs = '<div class="layui-form-item all">' +
'<input type="checkbox" name="' + name + '" value="' + all[0] + '" title="' + all[1] + '" lay-skin="' + skin + '" lay-filter="' + filter + '">' +
'</div>' + boxs;
}
if(data[0].TYPE == 'province'){
hasArea = false;
}
if(!hasArea){
boxs += '<div class="layui-form-item" style="margin-bottom: 0;">' +
'<div class="province">' +
'<ul>';
}
for(var i=0; i<data.length; i++){
var area = data[i];
if(area.TYPE == 'area'){
boxs += '<div class="layui-form-item area">' +
'<label class="layui-form-label">' + area.TITLE + '</label>' +
'<div class="province">' +
'<ul>';
var provinceList = area.CHILDREN;
for(var j=0; j<provinceList.length; j++){
boxs += getProvinceLi(provinceList[j], options);
}
boxs += '</ul></div></div>';
}else if(area.TYPE == 'province'){
boxs += getProvinceLi(area, options);
}
}
if(!hasArea){
boxs += '</ul></div>';
}
return boxs;
}
function getProvinceLi(province, options){
var name = options.name,
id = options.elem.attr('id'),
skin = 'primary',
filter = 'regionCheckBox-' + id,
li = '';
var cityList = province.CHILDREN;
var city_num = cityList == null ? 0 : cityList.length;
li += '<li' + (city_num > 0 ? ' class="parent"' : '') + '>' +
'<input type="checkbox" name="' + name + '" value="' + province.VALUE + '" title="' + province.TITLE + '" lay-skin="' + skin + '" lay-filter="' + filter + '">';
if(city_num > 0){
li += '<div class="city">';
for(var k=0; k<city_num; k++){
var city = cityList[k];
li += '<input type="checkbox" name="' + name + '" value="' + city.VALUE + '" title="' + city.TITLE + '" lay-skin="' + skin + '" lay-filter="' + filter + '">';
}
li += '</div>';
}
li += '</li>';
return li;
}
function setValue(options, valueArr){
options.elem.find(':checkbox').prop('checked', false);
var all_value = options.elem.find('.all :checkbox').val();
if(valueArr.indexOf(all_value) > -1){
options.elem.find(':checkbox').prop('checked', true);
}else{
if(typeof valueArr == 'string'){
valueArr = valueArr.split(',');
}
for(var i=0; i<valueArr.length; i++){
var value = valueArr[i]
,$elem = options.elem.find(':checkbox[value="'+value+'"]');
$elem.prop('checked', true);
if(value.indexOf('-') < 0){ //省
$elem.parent().find('.city :checkbox').prop('checked', true);
}
}
}
form.render('checkbox', options.elem.attr('lay-filter'));
renderParentDom(options.elem);
initName(options);
}
function initName(options){
var $elem = options.elem;
$elem.find(':checkbox').attr('name', options.name);
if($elem.find('.all :checkbox').prop('checked')){
$elem.find('.province :checkbox').removeAttr('name');
}else{
$elem.find('.parent').find(':checkbox:first:checked').each(function() {
$(this).parent().find('.city :checkbox').removeAttr('name');
});
}
}
function renderParentDom(elem){
elem.find('.parent').find(':checkbox:first').not(':checked').each(function() {
var is_yes_all = true;
var is_no_all = true;
$(this).parent().find('.city :checkbox').each(function(i, item) {
if(item.checked) {
is_no_all = false;
} else {
is_yes_all = false;
}
});
if(!is_yes_all && !is_no_all) {
$(this).parent().find('.layui-icon:first').removeClass('layui-icon-ok');
$(this).parent().find('.layui-icon:first').css('border-color', '#5FB878');
$(this).parent().find('.layui-icon:first').css('background-color', '#5FB878');
}
});
}
regionCheckBox.render = function(options){
var ins = new Class(options);
return thisIns.call(ins);
};
exports('regionCheckBox', regionCheckBox);
}).link(layui.cache.base+"regionCheckBox/regionCheckBox.css?v="+(new Date).getTime());
public/js/lay-module/selectM/selectM.js
+291
View File
@@ -0,0 +1,291 @@
/*
* @version: 2.0
* @Author: tomato
* @Date: 2018-5-5 11:29:57
* @Last Modified by: tomato
* @Last Modified time: 2018-5-26 18:08:43
*/
//多选下拉框
layui.define(['jquery', 'layer'], function(exports){
var MOD_NAME = 'selectM';
var $ = layui.jquery,layer=layui.layer;
var obj = function(config){
this.disabledIndex =[];
//当前选中的值名数据
this.selected = [];
//当前选中的值
this.values =[];
//当前选中的名称
this.names =[];
//初始化设置参数
this.config = {
//选择器id或class
elem: '',
//候选项数据[{id:"1",name:"名称1",status:0},{id:"2",name:"名称2",status:1}]
data: [],
//默认选中值
selected: [],
//空值项提示，支持将{max}替换为max
tips: '请选择 最多 {max} 个',
//最多选中个数，默认5
max : 5,
//选择框宽度
width:null,
//值验证，与lay-verify一致
verify: '',
//input的name 不设置与选择器相同(去#.)
name: '',
//值的分隔符
delimiter: ',',
//候选项数据的键名 status=0为禁用状态
field: {idName:'id',titleName:'name',statusName:'status'}
}
this.config = $.extend(this.config,config);
//创建选项元素
this.createOption = function(){
var o=this,c=o.config,f=c.field,d = c.data;
var s = c.selected;
$E = $(c.elem);
var tips = c.tips.replace('{max}',c.max);
var inputName = c.name=='' ? c.elem.replace('#','').replace('.','') : c.name;
var verify = c.verify=='' ? '' : 'lay-verify="'+c.verify+'" ';
var html = '';
html += '<div class="layui-unselect layui-form-select">';
html += '<div class="layui-select-title">';
html += '<input '+verify+'name="'+inputName+'" type="text" readonly="" class="layui-input layui-unselect">';
html += '</div>';
html += '<div class="layui-input multiple">';
html += '</div>';
html += '<dl class="layui-anim layui-anim-upbit">';
html += '<dd lay-value="" class="layui-select-tips">'+tips+'</dd>';
for(var i=0;i<d.length;i++){
var disabled1='',disabled2='';
if(d[i][f.statusName]==0){
o.disabledIndex[d[i][f.idName]] = d[i][f.titleName];
disabled1 = d[i][f.statusName]==0 ? 'layui-disabled' : '';
disabled2 = d[i][f.statusName]==0 ? ' layui-checkbox-disbaled layui-disabled' : '';
}
html +='<dd lay-value="'+d[i][f.idName]+'" class="'+disabled1+'">';
html += '<div class="layui-unselect layui-form-checkbox'+disabled2+'" lay-skin="primary">';
html += '<span>'+d[i][f.titleName]+'</span><i class="layui-icon">&#xe605;</i>';
html += '</div>';
html +='</dd>';
}
html += '</dl>';
html += '</div>';
$E.html(html);
}
//设置选中值
this.set = function(selected){
var o=this,c=o.config;
var s = typeof selected=='undefined' ? c.selected : selected;
$E = $(c.elem);
$E.find('.layui-form-checkbox').removeClass('layui-form-checked');
$E.find('dd').removeClass('layui-this');
//为默认选中值添加类名
var max = s.length>c.max ? c.max : s.length;
for(var i=0;i<max;i++){
if(s[i] && !o.disabledIndex.hasOwnProperty(s[i])){
$E.find('dd[lay-value='+s[i]+']').addClass('layui-this');
}
}
$E.find('dd.layui-this').each(function(){
$(this).find('div').addClass('layui-form-checked');
});
o.setSelected(selected);
}
this.redata=function(data){
this.config.data = data;
this.createOption();
}
//设置选中值 每次点击操作后执行
this.setSelected = function(first){
var o=this,c=o.config,f=c.field;
$E = $(c.elem);
var values=[],names=[],selected = [],spans = [];
var items = $E.find('dd.layui-this');
if(items.length==0){
var tips = c.tips.replace('{max}',c.max);
spans.push('<span class="tips">'+tips+'</span>');
}
else{
items.each(function(){
$this = $(this);
var item ={};
var v = $this.attr('lay-value');
var n = $this.find('span').text();
item[f.idName] = v;
item[f.titleName] = n;
values.push(v);
names.push(n);
spans.push('<a href="javascript:;"><span lay-value="'+v+'">'+n+'</span><i class="layui-icon">&#x1006;</i></a>');
selected.push(item);
});
}
spans.push('<i class="layui-edge" style="pointer-events: none;"></i>');
$E.find('.multiple').html(spans.join(''));
$E.find('.layui-select-title').find('input').each(function(){
if(typeof first=='undefined'){
this.defaultValue = values.join(c.delimiter);
}
this.value = values.join(c.delimiter);
});
var h = $E.find('.multiple').height()+14;
$E.find('.layui-form-select dl').css('top',h+'px');
o.values=values,o.names=names,o.selected = selected;
}
//ajax方式获取候选数据
this.getData = function(url){
var d;
$.ajax({
url:url,
dataType:'json',
async:false,
success:function(json){
d=json;
},
error: function(){
console.error(MOD_NAME+' hint：候选数据ajax请求错误 ');
d = false;
}
});
return d;
}
};
//渲染一个实例
obj.prototype.render = function(){
var o=this,c=o.config,f=c.field;
$E = $(c.elem);
if($E.length==0){
console.error(MOD_NAME+' hint：找不到容器 ' +c.elem);
return false;
}
if(Object.prototype.toString.call(c.data)!='[object Array]'){
var data = o.getData(c.data);
if(data===false){
console.error(MOD_NAME+' hint：缺少分类数据');
return false;
}
o.config.data = data;
}
//给容器添加一个类名
$E.addClass('lay-ext-mulitsel');
if(/^\d+$/.test(c.width)){
$E.css('width',c.width+'px');
}
//添加专属的style
if($('#lay-ext-mulitsel-style').length==0){
var style = '.lay-ext-mulitsel .layui-form-select dl dd div{margin-top:0px!important;}.lay-ext-mulitsel .layui-form-select dl dd.layui-this{background-color:#fff}.lay-ext-mulitsel .layui-input.multiple{line-height:auto;height:auto;padding:4px 10px 4px 10px;overflow:hidden;min-height:38px;margin-top:-38px;left:0;z-index:99;position:relative;background:#fff;}.lay-ext-mulitsel .layui-input.multiple a{padding:2px 5px;background:#5FB878;border-radius:2px;color:#fff;display:block;line-height:20px;height:20px;margin:2px 5px 2px 0;float:left;}.lay-ext-mulitsel .layui-input.multiple a i{margin-left:4px;font-size:14px;} .lay-ext-mulitsel .layui-input.multiple a i:hover{background-color:#009E94;border-radius:2px;}.lay-ext-mulitsel .danger{border-color:#FF5722!important}.lay-ext-mulitsel .tips{pointer-events: none;position: absolute;left: 10px;top: 10px;color:#757575;}';
$('<style id="lay-ext-mulitsel-style"></style>').text(style).appendTo($('head'));
};
//创建选项
o.createOption();
//设置选中值
o.set();
//展开/收起选项
$E.on('click','.layui-select-title,.multiple,.multiple.layui-edge',function(e){
//隐藏其他实例显示的弹层
$('.lay-ext-mulitsel').not(c.elem).removeClass('layui-form-selected');
if($(c.elem).is('.layui-form-selected')){
$(c.elem).removeClass('layui-form-selected');
$(document).off('click',mEvent);
}
else{
$(c.elem).addClass('layui-form-selected');
$(document).on('click',mEvent=function(e){
if(e.target.id!==c.elem && e.target.className!=='layui-input multiple'){
$(c.elem).removeClass('layui-form-selected');
$(document).off('click',mEvent);
}
});
}
});
//点击选项
$E.on('click','dd',function(e){
var _dd = $(this);
if(_dd.hasClass('layui-disabled')){
return false;
}
//点 请选择
if(_dd.is('.layui-select-tips')){
_dd.siblings().removeClass('layui-this');
$(c.elem).find('.layui-form-checkbox').removeClass('layui-form-checked');
}
//取消选中
else if(_dd.is('.layui-this')){
_dd.removeClass('layui-this');
_dd.find('.layui-form-checkbox').removeClass('layui-form-checked');
e.stopPropagation();
}
//选中
else{
if(o.selected.length >= c.max){
$(c.elem+' .multiple').addClass('danger');
layer.tips('最多只能选择 '+c.max+' 个', c.elem+' .multiple', {
tips: 3,
time: 1000,
end:function(){
$(c.elem+' .multiple').removeClass('danger');
}
});
return false;
}
else{
_dd.addClass('layui-this');
_dd.find('.layui-form-checkbox').addClass('layui-form-checked');
e.stopPropagation();
}
}
o.setSelected();
});
//删除选项
$E.on('click','a i',function(e){
var _this = $(this).prev('span');
var v = _this.attr('lay-value');
if(v){
var _dd = $(c.elem).find('dd[lay-value='+v+']');
_dd.removeClass('layui-this');
_dd.find('.layui-form-checkbox').removeClass('layui-form-checked');
}
o.setSelected();
_this.parent().remove();
e.stopPropagation();
});
//验证失败样式
$E.find('input').focus(function(){
$(c.elem+' .multiple').addClass('danger');
setTimeout(function(){
$(c.elem+' .multiple').removeClass('danger');
},3000);
});
}
//输出模块
exports(MOD_NAME, function (config) {
var _this = new obj(config);
_this.render();
return _this;
});
});
public/js/lay-module/selectN/selectN.js
+279
View File
@@ -0,0 +1,279 @@
/*
* @version: 1.2
* @Author: tomato
* @Date: 2018-4-24 22:56:00
* @Last Modified by: tomato
* @Last Modified time: 2018-5-26 18:08:43
*/
//无限级下拉框
layui.define(['jquery', 'form'], function(exports){
var MOD_NAME = 'selectN';
var $ = layui.jquery;
var form = layui.form;
var obj = function(config){
//当前选中数据值名数据
this.selected =[];
//当前选中的值
this.values = [];
//当前选中的名
this.names = [];
//当前选中最后一个值
this.lastValue = '';
//当前选中最后一个值
this.lastName = '';
//是否已选
this.isSelected = false;
//初始化配置
this.config = {
//选择器id或class
elem: '',
//无限级分类数据
data: [],
//默认选中值
selected: [],
//空值项提示，可设置为数组['请选择省','请选择市','请选择县']
tips: '请选择',
//是否允许搜索，可设置为数组[true,true,true]
search:false,
//选择项宽度，可设置为数组['80','90','100']
width:null,
//为真只取最后一个值
last: false,
//值验证，与lay-verify一致
verify: '',
//事件过滤器，lay-filter名
filter: '',
//input的name 不设置与选择器相同(去#.)
name: '',
//数据分隔符
delimiter: ',',
//数据的键名 status=0为禁用状态
field:{idName:'id',titleName:'name',statusName:'status',childName:'children'},
//多表单区分 form.render(type, filter); 为class="layui-form" 所在元素的 lay-filter="" 的值
formFilter: null
}
//实例化配置
this.config = $.extend(this.config,config);
//“请选择”文字
this.setTips = function(){
var o = this,c = o.config;
if(Object.prototype.toString.call(c.tips)!='[object Array]'){
return c.tips;
}
else{
var i=$(c.elem).find('select').length;
return c.tips.hasOwnProperty(i) ? c.tips[i] : '请选择';
}
}
//设置是否允许搜索
this.setSearch = function(){
var o = this,c = o.config;
if(Object.prototype.toString.call(c.search)!='[object Array]'){
return c.search===true ? 'lay-search ' : ' ';
}
else{
var i=$(c.elem).find('select').length;
if(c.search.hasOwnProperty(i)){
return c.search[i]===true ? 'lay-search ' : ' ';
}
}
return ' ';
}
//设置是否允许搜索
this.setWidth = function(){
var o = this,c = o.config;
if(Object.prototype.toString.call(c.width)!='[object Array]'){
return /^\d+$/.test(c.width) ? 'style="width:'+c.width+'px;" ' : ' ';
}
else{
var i=$(c.elem).find('select').length;
if(c.width.hasOwnProperty(i)){
return /^\d+$/.test(c.width[i]) ? 'style="width:'+c.width[i]+'px;" ' : ' ';
}
}
}
//创建一个Select
this.createSelect = function(optionData){
var o = this,c = o.config,f=c.field;
var html = '';
html+= '<div class="layui-input-inline" '+o.setWidth()+'>';
html+= ' <select '+o.setSearch()+'lay-filter="'+c.filter+'">';
html+= ' <option value="">'+o.setTips()+'</option>';
for(var i=0;i<optionData.length;i++){
var disabled = optionData[i][f.statusName]==0 ? 'disabled="" ' : '';
html+= ' <option '+disabled+'value="'+optionData[i][f.idName]+'">'+optionData[i][f.titleName]+'</option>';
}
html+= ' </select>';
html+= '</div>';
return html;
};
//获取当前option的数据
this.getOptionData=function(catData,optionIndex){
var f = this.config.field;
var item = catData;
for(var i=0;i<optionIndex.length;i++){
if('undefined' == typeof item[optionIndex[i]]){
item = null;
break;
}
else if('undefined' == typeof item[optionIndex[i]][f.childName]){
item = null;
break;
}
else{
item = item[optionIndex[i]][f.childName];
}
}
return item;
};
//初始化
this.set = function(selected){
var o = this,c = o.config;
$E = $(c.elem);
//创建顶级select
var verify = c.verify=='' ? '' : 'lay-verify="'+c.verify+'" ';
var html = '<div style="height:0px;width:0px;overflow:hidden"><input '+verify+'name="'+c.name+'"></div>';
html += o.createSelect(c.data);
$E.html(html);
selected = typeof selected=='undefined' ? c.selected : selected;
var index=[];
for(var i=0;i<selected.length;i++){
//设置最后一个select的选中值
$E.find('select:last').val(selected[i]);
//获取该选中值的索引
var lastIndex = $E.find('select:last').get(0).selectedIndex-1;
index.push(lastIndex);
//取出下级的选项值
var childItem = o.getOptionData(c.data,index);
//下级选项值存在则创建select
if(childItem){
var html = o.createSelect(childItem);
$E.append(html);
}
}
form.render('select',c.formFilter);
o.getSelected();
};
//下拉事件
this.change = function(elem){
var o = this,c = o.config;
var $thisItem = elem.parent();
//移除后面的select
$thisItem.nextAll('div.layui-input-inline').remove();
var index=[];
//获取所有select，取出选中项的值和索引
$thisItem.parent().find('select').each(function(){
index.push($(this).get(0).selectedIndex-1);
});
var childItem = o.getOptionData(c.data,index);
if(childItem){
var html = o.createSelect(childItem);
$thisItem.after(html);
form.render('select',c.formFilter);
}
o.getSelected();
};
//获取所有值-数组 每次选择后执行
this.getSelected=function(){
var o = this,c = o.config;
var values =[];
var names =[];
var selected =[];
$E = $(c.elem);
$E.find('select').each(function(){
var item = {};
var v = $(this).val()
var n = $(this).find('option:selected').text();
item.value = v;
item.name = n;
values.push(v);
names.push(n);
selected.push(item);
});
o.selected =selected;
o.values = values;
o.names = names;
o.lastValue = $E.find('select:last').val();
o.lastName = $E.find('option:selected:last').text();
o.isSelected = o.lastValue=='' ? false : true;
var inputVal = c.last===true ? o.lastValue : o.values.join(c.delimiter);
$E.find('input[name="'+c.name+'"]').val(inputVal);
};
//ajax方式获取候选数据
this.getData = function(url){
var d;
$.ajax({
url:url,
dataType:'json',
async:false,
success:function(json){
d=json;
},
error: function(){
console.error(MOD_NAME+' hint：候选数据ajax请求错误 ');
d = false;
}
});
return d;
}
};
//渲染一个实例
obj.prototype.render = function(){
var o=this,c=o.config;
$E = $(c.elem);
if($E.length==0){
console.error(MOD_NAME+' hint：找不到容器 '+c.elem);
return false;
}
if(Object.prototype.toString.call(c.data)!='[object Array]'){
var data = o.getData(c.data);
if(data===false){
console.error(MOD_NAME+' hint：缺少分类数据');
return false;
}
o.config.data = data;
}
c.filter = c.filter=='' ? c.elem.replace('#','').replace('.','') : c.filter;
c.name = c.name=='' ? c.elem.replace('#','').replace('.','') : c.name;
o.config = c;
//初始化
o.set();
//监听下拉事件
form.on('select('+c.filter+')',function(data){
o.change($(data.elem));
});
//验证失败样式
$E.find('input[name="'+c.name+'"]').focus(function(){
var t = $(c.elem).offset().top;
$('html,body').scrollTop(t-200);
$(c.elem).find('select:last').addClass('layui-form-danger');
setTimeout(function(){
$(c.elem).find('select:last').removeClass('layui-form-danger');
},3000);
});
}
//输出模块
exports(MOD_NAME, function (config) {
var _this = new obj(config);
_this.render();
return _this;
});
});
public/js/lay-module/selectY/selectY.css
+13
View File
@@ -0,0 +1,13 @@
/* selectY 样式表*/
.selectY-box{position: relative;height: 30px;}
.selectY-box .show{position:relative;height:28px;line-height: 28px;padding:0 25px 0 10px;min-width:30px;display: inline-block;background-color:#fff;cursor: pointer}
.selectY-box .show:after{font-family:'layui-icon'!important;content: "\e602";color:#e6e6e6;position: absolute;top:0;right:5px}
.selectY-box .show i{color:#e6e6e6;padding:0 5px}
.selectY-box .pop{position: absolute;z-index:99;top:29px;left:0;display: none;box-shadow: 0 2px 5px 0 rgba(0,0,0,.1);}
.selectY-box .show,.selectY-box .pop ul{border:1px solid #e6e6e6;}
.selectY-box .pop ul{background-color:#fff;min-width:160px;height:237px;padding:5px 0;float:left;margin-left: -1px;overflow :auto;}
.selectY-box .pop ul:first-child{margin-left:0}
.selectY-box .pop ul li{padding:5px 30px 5px 20px;position: relative;cursor: pointer}
.selectY-box .pop ul li.child-row:after{font-family:'layui-icon'!important;content: "\e602";color:#e6e6e6;position: absolute;top:5px;right:10px}
.selectY-box .pop ul li:hover{background-color:#f8f8f8}
.selectY-box .pop ul li.active{color:red}
public/js/lay-module/selectY/selectY.js
+196
View File
@@ -0,0 +1,196 @@
/**
*
* selectY,只需要pid,id,name，就可以无限级选择
selectY({
elem:'#demo',
data:data,
//url为ajax 获取json数据，当url属性有值时，不提取data属性值
//url:'https://cityApi.html',
placeholder:'请选择地址',
disabledTips:'当前区域没有产品',
success:function(e){
console.log(e.data);
console.log(e.ids);
}
});
*
*/
layui.define('layer',function (exports) {
var $ = layui.$, layer = layui.layer;
'use strict';
var P = function(o){
this.c = {
//input type = hidden 的元素
elem:'',
data:'',
url:'',
placeholder:'请选择：',
disabledTips:'',
success:function(){}
//separator: '&nbsp;/&nbsp;'
};
this.c = $.extend(this.c,o);
this.getData = function(url){
var res;
$.ajax({
url:url,
type: "get",
dataType:'json',
async:false,
success:function(e){
res = e.data || layer.msg('数据接口错误，请正确配置');
},
error: function(){
layer.msg('数据接口错误，请正确配置');
res = '';
}
});
return res;
};
//生成树
// this.toTree = function(data,pid){
// var o = this, tree = [], temp;
// for (var i = 0; i < data.length; i++) {
// if (data[i].pid == pid) {
// var obj = data[i];
// temp = o.toTree(data, data[i].id);
// if (temp.length > 0) {
// obj.children = temp;
// }
// tree.push(obj);
// }
// }
// return tree;
// };
this.getChild = function(data,pid){
var child = [];
for (var i = 0; i < data.length; i++) {
if (data[i].pid == pid) {
child.push(data[i]);
}
}
return child;
};
this.createChild = function(items){
var o = this;
var ul = '<ul>';
for(var i = 0; i < items.length; i++){
var row = o.getChild(o.data,items[i].id);
row = row.length != 0 ? 'child-row' : '';
var off = items[i].off ? 'layui-disabled' : '';
ul += '<li class ="'+row+' '+off+'" data-id="'+items[i].id+'">'+items[i].name+'</li>'
}
ul += '</ul>';
return ul;
};
this.setValue = function (value) {
var o = this, data = o.data, itemID = [];
for(var i=0;i<data.length;i++){
for(var j=0;j<value.length;j++){
if(value[j] == data[i].name){
//data[i].checked = true;
itemID.push(data[i].id);
}
}
}
return itemID;
};
this.showPopup = function (data,id) {
var o =this;
var items = o.getChild(data,id);
if(items.length != 0){
var itemsHtml = o.createChild(items);
$(o.c.elem).parent().find('.pop').append(itemsHtml);
}
};
this.scroll = function () {
var o = this, c = o.c, ele = c.elem;
var x = $(ele).parent().find('.pop ul');
for(var j = 0; j < x.length; j ++){
var e = x.eq(j).children('li.active');
if (e[0]) {
var t = e.position().top, i = x.eq(j).height(), a = e.height();
t > i && x.eq(j).scrollTop(t + x.eq(j).scrollTop() - i + a + 3),
t < 0 && x.eq(j).scrollTop(t + x.eq(j).scrollTop() - 5)
}
}
};
this.data = this.c.url ? this.getData(this.c.url) : this.c.data;
}
P.prototype.render = function(){
var o = this, c = o.c, e = c.elem;
var html = '<div class="selectY-box"></div>',
show = '<span class="show"><span class="cl-exp">'+c.placeholder+'</span></span>',
pop = '<div class="pop"></div>';
$(e).wrap(html);
$(e).after(show + pop);
o.showPopup(o.data,0);
if($(e).val()!=''){
var value = $(e).val().split('/');
var showValue = value.join('<i>/</i>');
$(e).parent().find('.show').html(showValue);
var setID = this.setValue(value);
for(var i = 0; i < setID.length; i ++){
o.showPopup(o.data,setID[i]);
var fistUi = $(e).parent().find('.pop ul');
fistUi.eq(i).find('li[data-id='+setID[i]+']').addClass('active');
}
}
$(e).parent().find('.pop').on('click','ul li',function (en) {
if($(this).hasClass("layui-disabled")){
layer.msg(c.disabledTips);
return false;
}
$(this).addClass('active').siblings().removeClass('active');
$(this).parent().nextAll('ul').remove();
var id = $(this).data('id');
o.showPopup(o.data,id);
if(!$(this).hasClass("child-row")){
$(e).parent().find('.pop').hide();
var activeLi = $(e).parent().find('.pop li.active');
var checkValue = [], ids = [];
for(var i = 0; i < activeLi.length; i ++){
checkValue.push(activeLi.eq(i).html());
ids.push(activeLi.eq(i).data('id'))
}
var inputValue = checkValue.join('/');
var showValue = checkValue.join('<i>/</i>');
$(e).val(inputValue);
$(e).parent().find('.show').html(showValue);
//回调函数
if (typeof c.success === "function") {
var callback = {
//数据name 如安徽省/合肥市/蜀山区
data:inputValue,
//数据ID数组,如1,8,16
ids:ids
};
c.success(callback);
}
}
layui.stope(en);
});
$(e).parent().find('.show').on('click',function(en){
//if()
$(e).parent().find('.pop').show();
o.scroll();
layui.stope(en);
})
$(document).on('click',function(){
$(e).parent().find('.pop').hide();
})
}
exports('selectY', function(o){
var t = new P(o);
t.render();
});
}).link(layui.cache.base+"selectY/selectY.css?v="+(new Date).getTime());
public/js/lay-module/selectY/selectY2.js
+233
View File
@@ -0,0 +1,233 @@
layui.define('layer', function(exports) {
var $ = layui.$, layer = layui.layer;
'use strict';
var SelectY2 = function(o) {
this.c = {
elem: '',
data: '',
url: '',
placeholder: '请选择：',
disabledTips: '',
success: function() {}
};
this.c = $.extend(this.c, o);
this.init();
};
SelectY2.prototype = {
init: function() {
this.data = this.c.url ? this.getData(this.c.url) : this.c.data;
this.render();
},
getData: function(url) {
var res;
$.ajax({
url: url,
type: "get",
dataType: 'json',
async: false,
success: function(e) {
res = e.data || layer.msg('数据接口错误，请正确配置');
},
error: function() {
layer.msg('数据接口错误，请正确配置');
res = '';
}
});
return res;
},
getChild: function(data, pid) {
var child = [];
for (var i = 0; i < data.length; i++) {
if (data[i].pid == pid) {
child.push(data[i]);
}
}
return child;
},
createChild: function(items) {
var o = this;
var ul = '<ul>';
for (var i = 0; i < items.length; i++) {
var row = o.getChild(o.data, items[i].id);
row = row.length != 0 ? 'child-row' : '';
var off = items[i].off ? 'layui-disabled' : '';
ul += '<li class="' + row + ' ' + off + '" data-id="' + items[i].id + '">' + items[i].name + '</li>';
}
ul += '</ul>';
return ul;
},
setValue: function(value) {
var o = this, data = o.data;
var elem = $(o.c.elem);
var parent = elem.parent();
// 清空当前选中状态和弹出层内容
parent.find('.pop').empty();
parent.find('.show').html(o.c.placeholder);
elem.val('');
// 查找匹配的值路径
var path = [];
var currentItems = o.getChild(data, 0); // 从顶级开始
for (var i = 0; i < value.length; i++) {
var found = false;
for (var j = 0; j < currentItems.length; j++) {
if (currentItems[j].name === value[i]) {
path.push(currentItems[j]);
currentItems = o.getChild(data, currentItems[j].id);
found = true;
break;
}
}
if (!found) {
break; // 如果没找到匹配项，中断循环
}
}
if (path.length > 0) {
// 重建弹出层结构
parent.find('.pop').empty();
for (var k = 0; k < path.length; k++) {
var items = o.getChild(data, k === 0 ? 0 : path[k-1].id);
var itemsHtml = o.createChild(items);
parent.find('.pop').append(itemsHtml);
// 激活当前层级的选择项
var currentUl = parent.find('.pop ul').eq(k);
currentUl.find('li[data-id="' + path[k].id + '"]').addClass('active');
}
// 添加下一级（如果有）
var lastItem = path[path.length - 1];
var childItems = o.getChild(data, lastItem.id);
if (childItems.length > 0) {
var childHtml = o.createChild(childItems);
parent.find('.pop').append(childHtml);
}
// 更新显示值和输入框值
var showValue = path.map(function(item) { return item.name; }).join('<i>/</i>');
var inputValue = path.map(function(item) { return item.name; }).join('/');
parent.find('.show').html(showValue);
elem.val(inputValue);
// 调用成功回调
if (typeof o.c.success === "function") {
var ids = path.map(function(item) { return item.id; });
var vvv = path.map(function(item){return item.name;});
o.c.success({
data: vvv,
ids: ids
});
}
// 返回 ID 数组（关键修改）
return path.map(function(item) { return item.id; });
}
return []; // 如果没有匹配项，返回空数组
},
showPopup: function(data, id) {
var o = this;
var items = o.getChild(data, id);
if (items.length != 0) {
var itemsHtml = o.createChild(items);
$(o.c.elem).parent().find('.pop').append(itemsHtml);
}
},
scroll: function() {
var o = this, c = o.c, ele = c.elem;
var x = $(ele).parent().find('.pop ul');
for (var j = 0; j < x.length; j++) {
var e = x.eq(j).children('li.active');
if (e[0]) {
var t = e.position().top, i = x.eq(j).height(), a = e.height();
t > i && x.eq(j).scrollTop(t + x.eq(j).scrollTop() - i + a + 3),
t < 0 && x.eq(j).scrollTop(t + x.eq(j).scrollTop() - 5)
}
}
},
render: function() {
var o = this, c = o.c, e = c.elem;
var html = '<div class="selectY-box"></div>',
show = '<span class="show"><span class="cl-exp">' + c.placeholder + '</span></span>',
pop = '<div class="pop"></div>';
$(e).wrap(html);
$(e).after(show + pop);
o.showPopup(o.data, 0);
if ($(e).val() != '') {
var value = $(e).val().split('/');
var showValue = value.join('<i>/</i>');
$(e).parent().find('.show').html(showValue);
// 获取 setValue 返回的 ID 数组
var setID = o.setValue(value);
for (var i = 0; i < setID.length; i++) {
o.showPopup(o.data, setID[i]);
var fistUi = $(e).parent().find('.pop ul');
fistUi.eq(i).find('li[data-id=' + setID[i] + ']').addClass('active');
}
}
$(e).parent().find('.pop').on('click', 'ul li', function(en) {
if ($(this).hasClass("layui-disabled")) {
layer.msg(c.disabledTips);
return false;
}
$(this).addClass('active').siblings().removeClass('active');
$(this).parent().nextAll('ul').remove();
var id = $(this).data('id');
o.showPopup(o.data, id);
if (!$(this).hasClass("child-row")) {
$(e).parent().find('.pop').hide();
var activeLi = $(e).parent().find('.pop li.active');
var checkValue = [], ids = [];
for (var i = 0; i < activeLi.length; i++) {
checkValue.push(activeLi.eq(i).html());
ids.push(activeLi.eq(i).data('id'))
}
var inputValue = checkValue.join('/');
var showValue = checkValue.join('<i>/</i>');
$(e).val(inputValue);
$(e).parent().find('.show').html(showValue);
if (typeof c.success === "function") {
var callback = {
data: checkValue,
ids: ids
};
c.success(callback);
}
}
layui.stope(en);
});
$(e).parent().find('.show').on('click', function(en) {
$(e).parent().find('.pop').show();
o.scroll();
layui.stope(en);
});
$(document).on('click', function() {
$(e).parent().find('.pop').hide();
});
}
};
exports('selectY2', function(o) {
return new SelectY2(o);
});
}).link(layui.cache.base + "selectY/selectY.css?v=" + (new Date).getTime());
public/js/lay-module/sliderTime/sliderTime.css
+168
View File
@@ -0,0 +1,168 @@
@charset "UTF-8";
/*sliderTime*/
.layui-slider-bar-selected {
position: absolute;
background-color: #696969;
height: 100%;
z-index: 1;
}
.step-hour {
height: 20px !important;
width: 1px !important;
top: -16px !important;
}
.step-half-hour {
height: 10px !important;
width: 1px !important;
top: -6px !important;
}
.step-hour,
.step-half-hour,
.step-start-wrap,
.step-end-wrap {
border-radius: 0;
border-radius: unset;
}
.layui-slider-step {
border-radius: 0;
height: 6px;
width: 1px;
top: -2px;
}
.layui-slider-bar {
z-index: 1;
}
.step-start-num {
position: absolute;
left: -18px;
top: 8px;
}
.step-end-num {
position: absolute;
right: -15px;
top: 6px;
}
.step-start-wrap {
position: absolute;
left: 0px;
top: -16px;
height: 20px;
width: 2px;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
.step-end-wrap {
position: absolute;
right: -2px;
top: -16px;
height: 20px;
width: 2px;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
.slider-danger-tips {
position: absolute;
top: 12px;
z-index: 66666666;
white-space: nowrap;
display: none;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
border-radius: 3px;
height: 25px;
line-height: 25px;
padding: 0 10px;
}
.layui-disabled .step-hour, .layui-disabled .step-half-hour, .layui-disabled .step-start-wrap, .layui-disabled .step-end-wrap, .layui-disabled .layui-slider-step {
background: #696969;
}
/*垂直*/
.layui-slider-vertical .step-start-num {
left: -16px;
top: inherit;
top: unset;
bottom: -22px;
}
.layui-slider-vertical .step-end-num {
top: -22px;
right: inherit;
right: unset;
left: -16px;
}
.layui-slider-vertical .step-start-wrap {
height: 2px;
width: 20px;
bottom: 0;
top: inherit;
top: unset;
left: 10px;
}
.layui-slider-vertical .step-end-wrap {
height: 2px;
width: 20px;
right: inherit;
right: unset;
left: 10px;
top: 0;
}
.layui-slider-vertical .step-hour {
height: 1px !important;
width: 20px !important;
top: inherit !important;
top: unset !important;
}
.layui-slider-vertical .step-half-hour{
height: 1px !important;
width: 10px !important;
top: inherit !important;
top: unset !important;
}
.layui-slider-vertical .layui-slider-step{
height: 1px;
width: 4px;
}
.layui-slider-vertical .layui-slider-bar-selected{
width: 4px;
bottom: 150px;
height: 37.5%;
}
.layui-slider-vertical .slider-danger-tips{
top: inherit;
top: unset;
left: 100px;
}
/*主题颜色*/
.step-hour,
.step-half-hour,
.step-start-wrap,
.step-end-wrap {
background: #009688
}
.layui-slider-step {
background: #00bfb1;
}
.slider-danger-tips {
color: #FFF;
background: #FF5722;
}
public/js/lay-module/sliderTime/sliderTime.js
+327
View File
@@ -0,0 +1,327 @@
/**
* 时间范围滑块选择插件
* 基于 layui.slider 扩展的时间范围选择插件
*
* sliderTime.js License By momo
* V1.0 2021-04-19
*
*
* 使用说明：
* 1.sliderTime 基于 layui.slider，所以 slider 的配置都得以保留
* 2.range 参数强制为 true
* 3.新增 disabledValue 属性，禁止选择时间范围
* 例如：[[8:00, 10:00], [14:00, 15:00]]
* 4.新增 disabledText 属性，禁止选择时间范围被选中后的提示内容，不配置不显示提示
* 例如：'{start} - {end} 已占用'，支持start和end时间占位符
* 5.新增 getValue 方法，返回当前选择的时间段（时间格式）
* 6.新增 isOccupation 方法，返回当前选择的时间段是否包含了禁止选择的时间段
* 7.新增 numToTime 公用方法，用于将十进制转为时间格式。例如：480 → 08:00
* 8.新增 timeToNum 公用方法，用于将时间格式转为十进制。例如：24:00 → 1440
*/
layui.define(['slider'], function (exports) {
"use strict";
var MOD_NAME = 'sliderTime',
$ = layui.jquery,
slider = layui.slider;
;
/**
* 外部接口
*/
var SliderTime = {
config: {}
/**
* 核心入口
*/
, render: function (options) {
var object = new Class(options);
return thisSliderTime.call(object);
}
/**
* 数字转时间格式
*/
, numToTime: function (value) {
var hours = Math.floor(value / 60);
var mins = (value - hours * 60);
return (hours < 10 ? "0" + hours : hours) + ":" + (mins < 10 ? "0" + mins : mins);
}
/**
* 时间转数字
*/
, timeToNum: function (value) {
var time = value.split(":");
return time[0] * 60 + parseInt(time[1]);
}
};
/**
* 构造器
*/
var Class = function (options) {
var that = this;
that.config = $.extend({}, SliderTime.config, options);
that.render();
};
/**
* 操作当前实例
*/
var thisSliderTime = function () {
var that = this
, options = that.config;
return {
/**
* 设置时间段
*/
setValue: function (value, index) {
if (index !== 1) {
index = 0;
}
value = SliderTime.timeToNum(value);
var start, end, width,
$wrap = $(options.elem).find('.layui-slider-wrap'),
val = [$wrap.eq(0).data("value"), $wrap.eq(1).data("value")];
if (value === val[0] || value === val[1]) {
// 设置值等于当前最小或最大值，不移动
return;
} else if (value > val[1]) {
// 设置值大于当前最大值，移动后面圆点
val[1] > val[0] ? index = 1 : index = 0;
val[index] = value;
} else if (value < val[0]) {
// 设置值小于当前最小值，移动前面圆点
val[0] < val[1] ? index = 0 : index = 1;
val[index] = value;
} else {
// 设置值间与中间，则按照index移动
index === 0 ? val[0] = value : val[1] = value;
}
$wrap.eq(index).data("value", value);
start = (val[0] - options.min) / (options.max - options.min) * 100;
end = (val[1] - options.min) / (options.max - options.min) * 100;
// 设置圆点位置
if ("vertical" === options.type) {
$(options.elem).find('.layui-slider-wrap').eq(index).css("bottom", (index === 0 ? start : end) + '%');
} else {
$(options.elem).find('.layui-slider-wrap').eq(index).css("left", (index === 0 ? start : end) + '%');
}
// 设置滑动位置
width = Math.abs(end - start);
if ("vertical" === options.type) {
$(options.elem).find('.layui-slider-bar').css({
"height": width + '%',
"bottom": (start < end ? start : end) + '%'
});
} else {
$(options.elem).find('.layui-slider-bar').css({
"width": width + '%',
"left": (start < end ? start : end) + '%'
});
}
return;
// return that.slider.setValue(SliderTime.timeToNum(value), index)
}
/**
* 获取选中的时间段
*/
, getValue: function () {
var $wrap = $(options.elem).find('.layui-slider-wrap');
var value = [$wrap.eq(0).data("value"), $wrap.eq(1).data("value")];
//如果前面的圆点超过了后面的圆点值，则调换顺序
if (value[0] > value[1]) {
value.reverse();
}
return [SliderTime.numToTime(value[0]), SliderTime.numToTime(value[1])];
}
/**
* 选择的时间段是否包含被禁止选择的时间段
* 包含：返回禁止选择的时间段
* 不包含：false
*/
, isOccupation: function () {
if (options.disabledValue) {
var $wrap = $(options.elem).find('.layui-slider-wrap');
var value = [$wrap.eq(0).data("value"), $wrap.eq(1).data("value")];
//如果前面的圆点超过了后面的圆点值，则调换顺序
if (value[0] > value[1]) {
value.reverse();
}
for (var i in options.disabledValue) {
var date = options.disabledValue[i];
var min = SliderTime.timeToNum(date[0]);
var max = SliderTime.timeToNum(date[1]);
if (value[0] > min && value[0] < max
|| value[1] > min && value[1] < max
|| value[0] <= min && value[1] >= max) {
return date;
} else {
that.closeTips(options.elem);
}
}
return false;
} else {
return false;
}
}
, config: options
}
};
/**
* 滑块渲染
* @param options
*/
Class.prototype.render = function () {
var that = this
, options = that.config;
// 是否显示时刻，默认是
options.showstep = options.showstep == false ? false : true;
// 开启滑块的范围拖拽
options.range = true;
// 最小值，最小为0=0:00
options.min = options.min == undefined || SliderTime.timeToNum(options.min) < 0 ? 0 : SliderTime.timeToNum(options.min);
// 最大值，最大为1440=24*60=24:00
options.max = options.max == undefined || SliderTime.timeToNum(options.max);
// options.max = options.max == undefined || SliderTime.timeToNum(options.max) > 1440 ? 1440 : SliderTime.timeToNum(options.max);
//间隔值不能大于 max
options.step = options.step > options.max ? options.max : options.step;
// 初始值
options.value = typeof (options.value) == 'object' ? options.value : [SliderTime.numToTime(options.min), SliderTime.numToTime(options.min)];
options.value[0] = SliderTime.timeToNum(options.value[0]);
options.value[1] = SliderTime.timeToNum(options.value[1]);
// 初始化
that.slider = slider.render({
elem: options.elem
, type: options.type
, height: options.height
, theme: options.theme
, range: options.range
, showstep: options.showstep
, min: options.min
, max: options.max
, step: options.step
, value: options.value
, disabled: options.disabled
, setTips: function (value) {
value = SliderTime.numToTime(value);
if (options.setTips) {
return options.setTips(value);
} else {
return value;
}
}
, change: function (value) {
if (options.disabledValue && options.disabledText) {
// 当滑动到禁用时间范围时，自动提醒
for (var i in options.disabledValue) {
var date = options.disabledValue[i];
var min = SliderTime.timeToNum(date[0]);
var max = SliderTime.timeToNum(date[1]);
if (value[0] > min && value[0] < max
|| value[1] > min && value[1] < max
|| value[0] <= min && value[1] >= max) {
var disabledText = options.disabledText.replace('{start}', date[0]).replace('{end}', date[1])
that.showTips(options, disabledText)
break;
} else {
that.closeTips(options.elem);
}
}
}
if (options.change) {
options.change(value);
}
}
});
// 扩展元素
$(options.elem).find('.layui-slider')
// 开始结尾刻度时间
.append('<div class="step-start-num">' + SliderTime.numToTime(options.min) + '</div>')
.append('<div class="step-end-num">' + SliderTime.numToTime(options.max) + '</div>')
// 警告提示Tips
.append('<div class="slider-danger-tips"></div>');
if (options.showstep) {
// 开始结尾刻度标识
$(options.elem).find('.layui-slider')
.append('<div class="step-start-wrap"></div>')
.append('<div class="step-end-wrap"></div>');
}
// 定义整点和半点时刻标识
var $steps = $(options.elem).find('.layui-slider .layui-slider-step');
for (var i = 0, num = options.min; num <= options.max && i < $steps.length - 1; i++, num += options.step) {
if (that.numToMins(num) == 0 && i > 0) {
$steps.eq(i - 1).addClass('step-hour');
} else if (that.numToMins(num) == 30) {
$steps.eq(i - 1).addClass('step-half-hour');
}
}
// 初始化选中禁止选择时间范围
if (options.disabledValue) {
options.disabledValue.forEach(function (date) {
var dateNum = [SliderTime.timeToNum(date[0]), SliderTime.timeToNum(date[1])];
var start = (dateNum[0] - options.min) / (options.max - options.min) * 100,
end = (dateNum[1] - options.min) / (options.max - options.min) * 100,
width = end - start;
var selectedSlider = '<div class="layui-slider-bar-selected layui-disabled" style=" ' + ("vertical" === options.type ? "height" : "width") + ':' + width + '%; ' + ("vertical" === options.type ? "bottom" : "left") + ':' + start + '% ;"></div>';
$(options.elem).find('.layui-slider-bar').after(selectedSlider);
});
}
// 主题设置
if (options.theme) {
$(options.elem).find('.step-hour,.step-half-hour,.step-start-wrap,.step-end-wrap,.layui-slider-step').css("background", options.theme);
}
};
/**
* 数字转分钟
*/
Class.prototype.numToMins = function (value) {
var hours = Math.floor(value / 60);
var mins = (value - hours * 60);
return mins;
};
/**
* 显示警告信息
*/
Class.prototype.showTips = function (options, text) {
if ("vertical" === options.type) {
$(options.elem).find('.slider-danger-tips').css({
"display": "block",
"bottom": $(options.elem).find('.layui-slider-tips')[0].style.bottom
}).text(text);
} else {
$(options.elem).find('.slider-danger-tips').css({
"display": "block",
"left": $(options.elem).find('.layui-slider-tips')[0].style.left
}).text(text);
}
};
/**
* 关闭警告信息
*/
Class.prototype.closeTips = function (elem) {
$(elem).find('.slider-danger-tips').css({
"display": "none"
}).text('');
};
// 加载css
layui.link(layui.cache.base + "sliderTime/sliderTime.css?v="+(new Date).getTime());
exports(MOD_NAME, SliderTime);
});
public/js/lay-module/sliderVerify/sliderVerify.js
+1
View File
File diff suppressed because one or more lines are too long
public/js/lay-module/step-lay/step.css
+79
View File
@@ -0,0 +1,79 @@
.lay-step {
font-size: 0;
width: 400px;
margin: 0 auto;
max-width: 100%;
padding-left: 200px;
}
.step-item {
display: inline-block;
line-height: 26px;
position: relative;
font-size: 14px;
}
.step-item-tail {
width: 100%;
padding: 0 10px;
position: absolute;
left: 0;
top: 13px;
}
.step-item-tail i {
display: inline-block;
width: 100%;
height: 1px;
vertical-align: top;
background: #c2c2c2;
position: relative;
}
.step-item-tail .step-item-tail-done {
background: #009688;
}
.step-item-head {
position: relative;
display: inline-block;
height: 26px;
width: 26px;
text-align: center;
vertical-align: top;
color: #009688;
border: 1px solid #009688;
border-radius: 50%;
background: #ffffff;
}
.step-item-head.step-item-head-active {
background: #009688;
color: #ffffff;
}
.step-item-main {
display: block;
position: relative;
margin-left: -50%;
margin-right: 50%;
padding-left: 26px;
text-align: center;
}
.step-item-main-title {
font-weight: bolder;
color: #555555;
}
.step-item-main-desc {
color: #aaaaaa;
}
.lay-step + [carousel-item]:before {
display: none;
}
.lay-step + [carousel-item] > * {
background-color: transparent;
}
public/js/lay-module/step-lay/step.js
+101
View File
@@ -0,0 +1,101 @@
layui.define(['layer', 'carousel'], function (exports) {
var $ = layui.jquery;
var layer = layui.layer;
var carousel = layui.carousel;
// 添加步骤条dom节点
var renderDom = function (elem, stepItems, postion) {
var stepDiv = '<div class="lay-step">';
for (var i = 0; i < stepItems.length; i++) {
stepDiv += '<div class="step-item">';
// 线
if (i < (stepItems.length - 1)) {
if (i < postion) {
stepDiv += '<div class="step-item-tail"><i class="step-item-tail-done"></i></div>';
} else {
stepDiv += '<div class="step-item-tail"><i class=""></i></div>';
}
}
// 数字
var number = stepItems[i].number;
if (!number) {
number = i + 1;
}
if (i == postion) {
stepDiv += '<div class="step-item-head step-item-head-active"><i class="layui-icon">' + number + '</i></div>';
} else if (i < postion) {
stepDiv += '<div class="step-item-head"><i class="layui-icon layui-icon-ok"></i></div>';
} else {
stepDiv += '<div class="step-item-head "><i class="layui-icon">' + number + '</i></div>';
}
// 标题和描述
var title = stepItems[i].title;
var desc = stepItems[i].desc;
if (title || desc) {
stepDiv += '<div class="step-item-main">';
if (title) {
stepDiv += '<div class="step-item-main-title">' + title + '</div>';
}
if (desc) {
stepDiv += '<div class="step-item-main-desc">' + desc + '</div>';
}
stepDiv += '</div>';
}
stepDiv += '</div>';
}
stepDiv += '</div>';
$(elem).prepend(stepDiv);
// 计算每一个条目的宽度
var bfb = 100 / stepItems.length;
$('.step-item').css('width', bfb + '%');
};
var step = {
// 渲染步骤条
render: function (param) {
param.indicator = 'none'; // 不显示指示器
param.arrow = 'always'; // 始终显示箭头
param.autoplay = false; // 关闭自动播放
if (!param.stepWidth) {
param.stepWidth = '400px';
}
// 渲染轮播图
carousel.render(param);
// 渲染步骤条
var stepItems = param.stepItems;
renderDom(param.elem, stepItems, 0);
$('.lay-step').css('width', param.stepWidth);
//监听轮播切换事件
carousel.on('change(' + param.filter + ')', function (obj) {
$(param.elem).find('.lay-step').remove();
renderDom(param.elem, stepItems, obj.index);
$('.lay-step').css('width', param.stepWidth);
});
// 隐藏左右箭头按钮
$(param.elem).find('.layui-carousel-arrow').css('display', 'none');
// 去掉轮播图的背景颜色
$(param.elem).css('background-color', 'transparent');
},
// 下一步
next: function (elem) {
$(elem).find('.layui-carousel-arrow[lay-type=add]').trigger('click');
},
// 上一步
pre: function (elem) {
$(elem).find('.layui-carousel-arrow[lay-type=sub]').trigger('click');
}
};
layui.link(layui.cache.base + "step-lay/step.css?v="+(new Date).getTime());
exports('step', step);
});
public/js/lay-module/tableMerge/tableMerge.js
+75
View File
@@ -0,0 +1,75 @@
/**
* Created by YujieYang.
* @name: 子表格扩展
* @author: 杨玉杰
* @version 1.0
*/
layui.define(['table'], function (exports) {
var $ = layui.jquery;
// 封装方法
var mod = {
/**
* 渲染入口
* @param myTable
*/
render: function (myTable) {
var tableBox = $(myTable.elem).next().children('.layui-table-box'),
$main = $(tableBox.children('.layui-table-body').children('table').children('tbody').children('tr').toArray().reverse()),
$fixLeft = $(tableBox.children('.layui-table-fixed-l').children('.layui-table-body').children('table').children('tbody').children('tr').toArray().reverse()),
$fixRight = $(tableBox.children('.layui-table-fixed-r').children('.layui-table-body').children('table').children('tbody').children('tr').toArray().reverse()),
cols = myTable.cols[0], mergeRecord = {};
for (let i = 0; i < cols.length; i++) {
var item3 = cols[i], field=item3.field;
if (item3.merge) {
var mergeField = [field];
if (item3.merge !== true) {
if (typeof item3.merge == 'string') {
mergeField = [item3.merge]
} else {
mergeField = item3.merge
}
}
mergeRecord[i] = {mergeField: mergeField, rowspan:1}
}
}
$main.each(function (i) {
for (var item in mergeRecord) {
if (i==$main.length-1 || isMaster(i, item)) {
$(this).children('[data-key$="-'+item+'"]').attr('rowspan', mergeRecord[item].rowspan).css('position','static');
$fixLeft.eq(i).children('[data-key$="-'+item+'"]').attr('rowspan', mergeRecord[item].rowspan).css('position','static');
$fixRight.eq(i).children('[data-key$="-'+item+'"]').attr('rowspan', mergeRecord[item].rowspan).css('position','static');
mergeRecord[item].rowspan = 1;
} else {
$(this).children('[data-key$="-'+item+'"]').remove();
$fixLeft.eq(i).children('[data-key$="-'+item+'"]').remove();
$fixRight.eq(i).children('[data-key$="-'+item+'"]').remove();
mergeRecord[item].rowspan +=1;
}
}
})
function isMaster (index, item) {
var mergeField = mergeRecord[item].mergeField;
var dataLength = layui.table.cache[myTable.id].length;
for (var i=0; i<mergeField.length; i++) {
if (layui.table.cache[myTable.id][dataLength-2-index][mergeField[i]]
!== layui.table.cache[myTable.id][dataLength-1-index][mergeField[i]]) {
return true;
}
}
return false;
}
}
};
// 输出
exports('tableMerge', mod);
});
public/js/lay-module/tableSelect/tableSelect.js
+260
View File
@@ -0,0 +1,260 @@
layui.define(['table', 'jquery', 'form'], function (exports) {
"use strict";
var MOD_NAME = 'tableSelect',
$ = layui.jquery,
table = layui.table,
form = layui.form;
var tableSelect = function () {
this.v = '1.1.0';
};
/**
* 初始化表格选择器
*/
tableSelect.prototype.render = function (opt) {
var elem = $(opt.elem);
var tableDone = opt.table.done || function(){};
//默认设置
opt.searchKey = opt.searchKey || 'keyword';
opt.searchPlaceholder = opt.searchPlaceholder || '关键词搜索';
opt.checkedKey = opt.checkedKey;
opt.table.page = opt.table.page || true;
opt.table.height = opt.table.height || 315;
elem.off('click').on('click', function(e) {
e.stopPropagation();
if($('div.tableSelect').length >= 1){
return false;
}
var t = elem.offset().top + elem.outerHeight()+"px";
var l = elem.offset().left +"px";
var tableName = "tableSelect_table_" + new Date().getTime();
var tableBox = '<div class="tableSelect layui-anim layui-anim-upbit" style="left:'+l+';top:'+t+';border: 1px solid #d2d2d2;background-color: #fff;box-shadow: 0 2px 4px rgba(0,0,0,.12);padding:10px 10px 0 10px;position: absolute;z-index:66666666;margin: 5px 0;border-radius: 2px;min-width:530px;">';
tableBox += '<div class="tableSelectBar">';
tableBox += '<form class="layui-form" action="" style="display:inline-block;">';
tableBox += '<input style="display:inline-block;width:190px;height:30px;vertical-align:middle;margin-right:-1px;border: 1px solid #C9C9C9;" type="text" name="'+opt.searchKey+'" placeholder="'+opt.searchPlaceholder+'" autocomplete="off" class="layui-input"><button class="layui-btn layui-btn-sm layui-btn-primary tableSelect_btn_search" lay-submit lay-filter="tableSelect_btn_search"><i class="layui-icon layui-icon-search"></i></button>';
tableBox += '</form>';
tableBox += '<button style="float:right;" class="layui-btn layui-btn-sm tableSelect_btn_select">选择<span></span></button>';
tableBox += '</div>';
tableBox += '<table id="'+tableName+'" lay-filter="'+tableName+'"></table>';
tableBox += '</div>';
tableBox = $(tableBox);
$('body').append(tableBox);
//数据缓存
var checkedData = [];
//渲染TABLE
opt.table.elem = "#"+tableName;
opt.table.id = tableName;
opt.table.done = function(res, curr, count){
defaultChecked(res, curr, count);
setChecked(res, curr, count);
tableDone(res, curr, count);
};
var tableSelect_table = table.render(opt.table);
//分页选中保存数组
table.on('radio('+tableName+')', function(obj){
if(opt.checkedKey){
checkedData = table.checkStatus(tableName).data
}
updataButton(table.checkStatus(tableName).data.length)
})
table.on('checkbox('+tableName+')', function(obj){
if(opt.checkedKey){
if(obj.checked){
for (var i=0;i<table.checkStatus(tableName).data.length;i++){
checkedData.push(table.checkStatus(tableName).data[i])
}
}else{
if(obj.type=='all'){
for (var j=0;j<table.cache[tableName].length;j++) {
for (var i=0;i<checkedData.length;i++){
if(checkedData[i][opt.checkedKey] == table.cache[tableName][j][opt.checkedKey]){
checkedData.splice(i,1)
}
}
}
}else{
//因为LAYUI问题，操作到变化全选状态时获取到的obj为空，这里用函数获取未选中的项。
function nu (){
var noCheckedKey = '';
for (var i=0;i<table.cache[tableName].length;i++){
if(!table.cache[tableName][i].LAY_CHECKED){
noCheckedKey = table.cache[tableName][i][opt.checkedKey];
}
}
return noCheckedKey
}
var noCheckedKey = obj.data[opt.checkedKey] || nu();
for (var i=0;i<checkedData.length;i++){
if(checkedData[i][opt.checkedKey] == noCheckedKey){
checkedData.splice(i,1);
}
}
}
}
checkedData = uniqueObjArray(checkedData, opt.checkedKey);
updataButton(checkedData.length)
}else{
updataButton(table.checkStatus(tableName).data.length)
}
});
//渲染表格后选中
function setChecked (res, curr, count) {
for(var i=0;i<res.data.length;i++){
for (var j=0;j<checkedData.length;j++) {
if(res.data[i][opt.checkedKey] == checkedData[j][opt.checkedKey]){
res.data[i].LAY_CHECKED = true;
var index= res.data[i]['LAY_TABLE_INDEX'];
var checkbox = $('#'+tableName+'').next().find('tr[data-index=' + index + '] input[type="checkbox"]');
checkbox.prop('checked', true).next().addClass('layui-form-checked');
var radio = $('#'+tableName+'').next().find('tr[data-index=' + index + '] input[type="radio"]');
radio.prop('checked', true).next().addClass('layui-form-radioed').find("i").html('&#xe643;');
}
}
}
var checkStatus = table.checkStatus(tableName);
if(checkStatus.isAll){
$('#'+tableName+'').next().find('.layui-table-header th[data-field="0"] input[type="checkbox"]').prop('checked', true);
$('#'+tableName+'').next().find('.layui-table-header th[data-field="0"] input[type="checkbox"]').next().addClass('layui-form-checked');
}
updataButton(checkedData.length)
}
//写入默认选中值(puash checkedData)
function defaultChecked (res, curr, count){
if(opt.checkedKey && elem.attr('ts-selected')){
var selected = elem.attr('ts-selected').split(",");
for(var i=0;i<res.data.length;i++){
for(var j=0;j<selected.length;j++){
if(res.data[i][opt.checkedKey] == selected[j]){
//cc.push(i);
checkedData.push(res.data[i])
table.setRowChecked(tableName, {
index:i,type:opt.table.cols[0][0].type
});
}
}
}
checkedData = uniqueObjArray(checkedData, opt.checkedKey);
}
// return cc;
}
//更新选中数量
function updataButton (n) {
tableBox.find('.tableSelect_btn_select span').html(n==0?'':'('+n+')')
}
//数组去重
function uniqueObjArray(arr, type){
var newArr = [];
var tArr = [];
if(arr.length == 0){
return arr;
}else{
if(type){
for(var i=0;i<arr.length;i++){
if(!tArr[arr[i][type]]){
newArr.push(arr[i]);
tArr[arr[i][type]] = true;
}
}
return newArr;
}else{
for(var i=0;i<arr.length;i++){
if(!tArr[arr[i]]){
newArr.push(arr[i]);
tArr[arr[i]] = true;
}
}
return newArr;
}
}
}
//FIX位置
var overHeight = (elem.offset().top + elem.outerHeight() + tableBox.outerHeight() - $(window).scrollTop()) > $(window).height();
var overWidth = (elem.offset().left + tableBox.outerWidth()) > $(window).width();
overHeight && tableBox.css({'top':'auto','bottom':'0px'});
overWidth && tableBox.css({'left':'auto','right':'5px'})
//关键词搜索
form.on('submit(tableSelect_btn_search)', function(data){
tableSelect_table.reload({
where: data.field,
page: {
curr: 1
}
});
return false;
});
//双击行选中
table.on('rowDouble('+tableName+')', function(obj){
var checkStatus = {data:[obj.data]};
selectDone(checkStatus);
})
//按钮选中
tableBox.find('.tableSelect_btn_select').on('click', function() {
var checkStatus = table.checkStatus(tableName);
if(checkedData.length > 1){
checkStatus.data = checkedData;
}
selectDone(checkStatus);
})
//写值回调和关闭
function selectDone (checkStatus){
if(opt.checkedKey){
var selected = [];
for(var i=0;i<checkStatus.data.length;i++){
selected.push(checkStatus.data[i][opt.checkedKey])
}
elem.attr("ts-selected",selected.join(","));
}
opt.done(elem, checkStatus);
tableBox.remove();
delete table.cache[tableName];
checkedData = [];
}
//点击其他区域关闭
$(document).mouseup(function(e){
var userSet_con = $(''+opt.elem+',.tableSelect');
if(!userSet_con.is(e.target) && userSet_con.has(e.target).length === 0){
tableBox.remove();
delete table.cache[tableName];
checkedData = [];
}
});
})
}
/**
* 隐藏选择器
*/
tableSelect.prototype.hide = function (opt) {
$('.tableSelect').remove();
}
//自动完成渲染
var tableSelect = new tableSelect();
//FIX 滚动时错位
if(window.top == window.self){
$(window).scroll(function () {
tableSelect.hide();
});
}
exports(MOD_NAME, tableSelect);
})
public/js/lay-module/tableTree/tableEdit.js
+466
View File
@@ -0,0 +1,466 @@
layui.define(["laydate","laytpl","table","layer"],function(exports) {
"use strict";
var moduleName = 'tableEdit',_layui = layui,laytpl = _layui.laytpl
,$ = _layui.$,laydate = _layui.laydate,table = _layui.table,layer = _layui.layer
,selectTpl = [ //单选下拉框模板
'<div class="layui-tableEdit-div" style="{{d.style}}">'
,'<ul class="layui-tableEdit-ul">'
,'{{# if(d.data){ }}'
,'{{# d.data.forEach(function(item){ }}'
,'{{# var selectedClass = d.callbackFn(item) }}'
,'<li class="{{ selectedClass }}" data-name="{{ item.name }}" data-value="{{ item.value }}">'
,'<div class="layui-unselect layui-form-checkbox" lay-skin="primary"><span>{{ item.value }}</span></div>'
,'</li>'
,'{{# }); }}'
,'{{# } else { }}'
,'<li>无数据</li>'
,'{{# } }}'
,'</ul>'
, '</div>'
].join('')
,selectMoreTpl = [ //多选下拉框模板
'<div class="layui-tableEdit-div" style="{{d.style}}">'
,'<div class="layui-tableEdit-tpl">'
,'<ul>'
,'{{# if(d.data){ }}'
,'{{# d.data.forEach(function(item){ }}'
,'{{# var selectedClass = d.callbackFn(item) }}'
,'<li class="{{ selectedClass }}" data-name="{{ item.name }}" data-value="{{ item.value }}">'
,'<div class="layui-unselect layui-form-checkbox" lay-skin="primary"><span>{{ item.value }}</span><i class="layui-icon layui-icon-ok"></i></div>'
,'</li>'
,'{{# }); }}'
,'{{# } else { }}'
,'<li>无数据</li>'
,'{{# } }}'
,'</ul>'
,'</div>'
,'<div style="line-height: 36px;">'
,'<div style="float: left">'
,'<button type="button" event-type="close" class="layui-btn layui-btn-sm layui-btn-primary">关闭</button>'
,'</div>'
,'<div style="text-align: right">'
,'<button event-type="confirm" type="button" class="layui-btn layui-btn-sm layui-btn-primary">确定</button>'
,'</div>'
,'</div>'
,'</div>'
].join('');
//组件用到的css样式
var thisCss = [];
thisCss.push('.layui-tableEdit-div{position:absolute;background-color:#fff;font-size:14px;border:1px solid #d2d2d2;z-index:19910908445;max-height: 252px;}');
thisCss.push('.layui-tableEdit-tpl{max-height:216px;overflow-y:auto;}');
thisCss.push('.layui-tableEdit-div li{line-height:36px;padding-left:5px;}');
thisCss.push('.layui-tableEdit-div li:hover{background-color:#f2f2f2;}');
thisCss.push('.layui-tableEdit-selected{background-color:#5FB878;}');
thisCss.push('.layui-tableEdit-checked i{background-color:#60b979!important;}');
thisCss.push('.layui-tableEdit-ul div{padding-left:0px!important;}');
thisCss.push('.layui-tableEdit-input{text-align:center;position:absolute;left:0;bottom:0;width:100%;height:38px;z-index: 19910908;}');
thisCss.push('.layui-tableEdit-add{position: absolute;right: 3px;top: 21px;margin-top: -15px;z-index: 199109084;}')
thisCss.push('.layui-tableEdit-sub{position: absolute;left: 3px;top: 21px;margin-top: -15px;z-index: 199109084;}')
var thisStyle = document.createElement('style');
thisStyle.innerHTML = thisCss.join('\n'),document.getElementsByTagName('head')[0].appendChild(thisStyle);
var configs = {
callbacks:{}
,
verify: {
required: [
/[\S]+/
,'必填项不能为空'
]
,phone: [
/^1[34578]\d{9}$/
,'请输入正确的手机号'
]
,email: [
/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/
,'邮箱格式不正确'
]
,url: [
/(^#)|(^http(s*):\/\/[^\s]+\.[^\s]+)/
,'链接格式不正确'
]
,number:[
/(^[-+]?\d+$)|(^[-+]?\d+\.\d+$)/
,'只能填写数字'
]
,date: [
/^(\d{4})[-\/](\d{1}|0\d{1}|1[0-2])([-\/](\d{1}|0\d{1}|[1-2][0-9]|3[0-1]))*$/
,'日期格式不正确'
]
,identity: [
/(^\d{15}$)|(^\d{17}(x|X|\d)$)/
,'请输入正确的身份证号'
]
}
};
var Class = function () { //单列模式 也就是只能new一个对象。
var instance;
Class = function Class() {
return instance;
};
Class.prototype = this; //保留原型属性
instance = new Class();
instance.constructor = Class; //重置构造函数指针
return instance
}; //构造器
var singleInstance = new Class();
var inFunc = function () {singleInstance.leaveStat = false;},outFunc = function () {singleInstance.leaveStat = true;};
document.onclick = function () {if(singleInstance.leaveStat)singleInstance.deleteAll();};
//日期选择框
Class.prototype.date = function(options){
var othis = this;
othis.callback = options.callback,othis.element = options.element,othis.dateType = options.dateType;
othis.dateType = othis.isEmpty(othis.dateType) ? "datetime":othis.dateType;
var that = options.element;
if ($(that).find('input').length>0)return;
othis.deleteAll(),othis.leaveStat = false;
var input = $('<input class="layui-input layui-tableEdit-input" type="text">');
(39 - that.offsetHeight > 3) && input.css('height','30px');
(that.offsetHeight - 39 > 3) && input.css('height','50px');
$(that).append(input),input.focus();
//日期时间选择器 (show: true 表示直接显示)
laydate.render({elem: input[0],type: othis.dateType,show: true,done:function (value, date) {
othis.deleteAll();
if(othis.callback)othis.callback.call(that,value);
}});
$('div.layui-laydate').hover(inFunc,outFunc),$(that).hover(inFunc,outFunc);
_layui.stope();
};
//输入框
Class.prototype.input = function(options){
var othis = this;
othis.callback = options.callback,othis.element = options.element;
othis.oldValue = options.oldValue;
othis.oldValue = othis.oldValue ? othis.oldValue : '';
var that = options.element;
if ($(that).find('input').length>0)return;
othis.deleteAll(),othis.leaveStat = false;
var input = $('<input class="layui-input layui-tableEdit-input" style="z-index: 99999999999" type="text">');
(39 - that.offsetHeight > 3) && input.css('height','30px');
(that.offsetHeight - 39 > 3) && input.css('height','50px');
input.val(othis.oldValue);
$(that).append(input),input.focus();
input.click(function (e) {
_layui.stope(e);
});
input.bind('change', function(e){othis.callback.call(othis.element,this.value)});
$(that).hover(inFunc,outFunc);
_layui.stope();
};
//带加号和减号的输入框(只支持输入数字)
Class.prototype.signedInput = function(options){
var othis = this;
othis.callback = options.callback,othis.element = options.element;
othis.oldValue = options.oldValue;
othis.oldValue = othis.oldValue ? othis.oldValue : '';
var that = options.element;
if ($(that).find('input').length>0)return;
othis.deleteAll(),othis.leaveStat = false;
var thisWidth = that.offsetWidth-49;
var input = $('<input class="layui-input layui-tableEdit-input" style="left: 24px;width: '+thisWidth+'px" type="text">');//
var leftBtn = $('<button type="button" class="layui-btn layui-btn-sm layui-tableEdit-sub"><i class="layui-icon layui-icon-subtraction" style="margin-top:-14px!important;position: absolute;left:2px!important"></i></button>');
var rightBtn = $('<button type="button" class="layui-btn layui-btn-sm layui-tableEdit-add"><i class="layui-icon layui-icon-addition" style="margin-top:-14px!important;position: absolute;right:-1px!important"></i></button>');
if(39 - that.offsetHeight > 3){
input.css('height','30px');leftBtn.css('top','16px');rightBtn.css('top','16px');
}
if(that.offsetHeight - 39 > 3){
input.css('height','50px');leftBtn.css('top','25px');rightBtn.css('top','25px');
}
input.val(othis.oldValue);
$(that).append(leftBtn);leftBtn.find('i').html('');
$(that).append(input),input.focus();$(that).append(rightBtn);rightBtn.find('i').html('');
input.click(function (e) {
_layui.stope(e);
});
input.bind('change', function(e){othis.callback.call(othis.element,this.value)});
$(that).hover(inFunc,outFunc);
_layui.stope();
$(that).find('button.layui-tableEdit-sub,button.layui-tableEdit-add').bind('click',function () {
var input = $(that).find('input.layui-tableEdit-input');
var val = input.val();
if(!val || val.length<=0)val=0;
val = parseInt(val);
if($(this).hasClass('layui-tableEdit-add')){
++val;input.val(val);
othis.callback.call(othis.element,val)
}else{
--val;input.val(val);
othis.callback.call(othis.element,val)
}
})
};
//判断是否为空函数
Class.prototype.isEmpty = function(dataStr){return typeof dataStr === 'undefined' || dataStr === null || dataStr.length <= 0;};
//生成下拉框函数入口
Class.prototype.register = function(options){
var othis = this;
othis.enabled = options.enabled,othis.callback = options.callback;
othis.data = options.data,othis.element = options.element;
othis.selectedData = options.selectedData;
var that = othis.element;
if($(that).find('input.layui-tableEdit-input')[0]) return;
othis.deleteAll(),othis.leaveStat = false;
var input = $('<input class="layui-input layui-tableEdit-input" placeholder="请选择">')
,tableEdit = $('<div class="layui-tableEdit"></div>')
,tableBody = $(that).parents('div.layui-table-body')
,tablePage = $(that).parents('div.layui-table-box').eq(0).next();
(39 - that.offsetHeight > 3) && input.css('height','30px');
(that.offsetHeight - 39 > 3) && input.css('height','50px');
tableEdit.append(input),$(that).append(tableEdit),input.focus();
var thisY = input[0].getBoundingClientRect().top //输入框y坐标
,thisHeight = ((39 - that.offsetHeight > 3) ? 30 : input[0].offsetHeight) //输入框高度
,thisHeight = ((that.offsetHeight - 39 > 3) ? 50 :thisHeight)
,thisWidth = input[0].offsetWidth //输入框宽度
,elemY = that.getBoundingClientRect().top //输入框y坐标
,tableBodyY = tableBody[0].getBoundingClientRect().top
,pageY = tablePage[0].getBoundingClientRect().top
,tableBodyHeight = tableBody.height() //表格高度
,isType = thisY-tableBodyY > 0.8*tableBodyHeight
,type = isType ? 'top: auto;bottom: '+(thisHeight+2)+'px;' : 'bottom: auto;top: '+(thisHeight+2)+'px;';
if(elemY<tableBodyY)tableBody[0].scrollTop = that.offsetTop; //调整滚动条位置
var style = type+'width: '+thisWidth+'px;left: 0px;'+(othis.enabled ? '':'overflow-y: auto;');
var getClassFn = function(item){
if(othis.isEmpty(othis.selectedData) || othis.isEmpty(item.name))return "";
var selectedClass;
if(typeof othis.selectedData === 'string' || Object.prototype.toString.call(othis.selectedData) === '[object Number]'){
selectedClass = (item.name+"" === othis.selectedData+"") || (item.value+"" === othis.selectedData+"") ? "layui-tableEdit-selected"+(othis.enabled ? " layui-tableEdit-checked":'') : "";
}
if(typeof othis.selectedData === 'object'){
selectedClass = (item.name+"" === othis.selectedData.name+"") ? "layui-tableEdit-selected"+(othis.enabled ? " layui-tableEdit-checked":'') : "";
}
if(Array.isArray(othis.selectedData)){
for(var i=0;i<othis.selectedData.length;i++){
selectedClass = (item.name+"" === othis.selectedData[i].name+"") ? "layui-tableEdit-selected layui-tableEdit-checked" : "";
if(!othis.isEmpty(selectedClass)) break;
}
}
return selectedClass;
};
tableEdit.append(laytpl(othis.enabled ? selectMoreTpl : selectTpl).render({data: othis.data,style: style,callbackFn:getClassFn}));
var $tableEdit = $('div.layui-tableEdit-div')[0];
(thisY+$tableEdit.offsetHeight+thisHeight > pageY) && !isType && (tableBody[0].scrollTop = that.offsetTop);//调整滚动条位置
othis.events();
};
//删除所有下拉框和时间选择框
Class.prototype.deleteAll = function(){
$('div.layui-tableEdit-div,div.layui-tableEdit,div.layui-laydate,input.layui-tableEdit-input,button.layui-tableEdit-sub,button.layui-tableEdit-add').remove();
delete this.leaveStat;//清除（离开状态属性）
};
//注册事件
Class.prototype.events = function(){
var othis = this;
var searchFunc = function(val){ //关键字搜索
$('div.layui-tableEdit-div li').each(function () {
othis.isEmpty(val) || $(this).data('value').indexOf(val) > -1 ? $(this).show() : $(this).hide();
});
},liClickFunc = function(){ //给li元素注册点击事件
var liArr = $('div.layui-tableEdit-div li');
liArr.unbind('click'),liArr.bind('click',function (e) {
_layui.stope(e);
if(othis.enabled){//多选
$(this).hasClass("layui-tableEdit-checked") ? ($(this).removeClass("layui-tableEdit-checked"),
$(this).removeClass("layui-tableEdit-selected"))
: $(this).addClass("layui-tableEdit-checked")
}else {//单选
othis.deleteAll();
if(othis.callback)othis.callback.call(othis.element,{name:$(this).data("name"),value:$(this).data("value")});
}
});
},btnClickFunc = function (){ //给button按钮注册点击事件
$("div.layui-tableEdit-div button").bind('click',function () {
var eventType = $(this).attr("event-type"), btn = this,dataList = new Array();
if(eventType === 'close') singleInstance.deleteAll(); //“关闭”按钮
if(eventType === 'confirm') { //“确定”按钮
$('div.layui-tableEdit-div li').each(function (e) {
if(!$(this).hasClass("layui-tableEdit-checked"))return;
dataList.push({name:$(this).data("name"),value:$(this).data("value")});
});
othis.deleteAll();
if(othis.callback)othis.callback.call(othis.element,dataList);
}
});
};
//事件注册
$(othis.element).find('input.layui-tableEdit-input').bind('input propertychange', function(){searchFunc(this.value)});
othis.enabled ? (liClickFunc(),btnClickFunc()) : liClickFunc();
$(othis.element).hover(inFunc,outFunc);
};
var AopEvent = function(cols){this.config = {colsConfig:{}};this.parseCols(cols)};//aop构造器
/**
* 解析出tableEdit组件所需要的配置信息
* @param cols
*/
AopEvent.prototype.parseCols = function(cols){
var that = this;
cols.forEach(function (ite) {
ite.forEach(function (item) {
if(!item.config)return;
that.config.colsConfig[item.field] = item.config;
});
});
};
/**
* aop代理event
* @param event 事件名称
* @param callback 回调函数
*/
AopEvent.prototype.on = function(event,callback){
var othis = this;othis.config.event = event,othis.config.callback = callback;
table.on(othis.config.event,function (obj) {
var zthis = this,field = $(zthis).data('field'),config = othis.config.colsConfig[field];
if(!config){
othis.config.callback.call(zthis,obj);return;
}
obj.field = field;
var callbackFn = function (res) {
if(config.verify && !othis.verify(res,config.verify,this))return; //验证为空
obj.value = Array.isArray(res) ? (res.length>0 ? res : [{name:'',value:''}]) : res;
othis.config.callback.call(zthis,obj);
if(!singleInstance.isEmpty(config.cascadeSelectField)){
var csElement = $(this.parentNode).find("td[data-field='"+config.cascadeSelectField+"']");
$(csElement).attr("cascadeSelect-data",JSON.stringify({data:res,field:field}));
}
};
var csd = $(this).attr("cascadeSelect-data");//联动数据
if(singleInstance.isEmpty(csd)){ //非联动事件
if(config.type === 'select'){
singleInstance.register({data:config.data,element:zthis,enabled:config.enabled,selectedData:obj.data[field],callback:callbackFn});
}else if(config.type === 'date'){
singleInstance.date({dateType:config.dateType,element:zthis,callback:callbackFn});
}else if(config.type === 'input'){
singleInstance.input({element:zthis,oldValue:obj.data[field],callback:callbackFn});
}else if(config.type === 'signedInput'){
singleInstance.signedInput({element:zthis,oldValue:obj.data[field],callback:callbackFn});
}else othis.config.callback.call(zthis,obj);
} else {//联动事件
if(config.type === 'date') return;
//获取当前单元格的table表格的lay-filter属性值
var filter = $(zthis).parents('div.layui-table-view').eq(0).prev().attr('lay-filter')
,rs = active.callbackFn.call(zthis,'clickBefore('+filter+')',JSON.parse(csd));
//异步操作,由使用者调用。
//判断条件为rs为空时。
if(singleInstance.isEmpty(rs)){
active.on("async("+filter+")",function (result) {
singleInstance.register({data:result.data,element:zthis,enabled:result.enabled,selectedData:obj.data[field],callback:callbackFn});
})
}else {
singleInstance.register({data:rs.data,element:zthis,enabled:rs.enabled,selectedData:obj.data[field],callback:callbackFn});
}
}
});
};
/**
* 验证数据是否符合要求
* @param data 被验证数据
* @param verify 正则参数
* @param td 当前单元格
* @returns {boolean} true验证通过 false验证未通过
*/
AopEvent.prototype.verify = function (data,verify,td) {
var verifyObj = configs.verify[verify.type];
var verifyMsg = verify.msg;
verifyMsg = verifyMsg ? verifyMsg : (verifyObj ? verifyObj[1] : '必填项不能为空');
if(singleInstance.isEmpty(data)){
layer.tips(verifyMsg, td,{tipsMore:true});
return false;
}
if(Array.isArray(data) && data.length <= 0){
layer.tips(verifyMsg, td,{tipsMore:true});
return false;
}
if((typeof data === 'object' && singleInstance.isEmpty(data.name))
|| data.name === 'undefined'){
layer.tips(verifyMsg, td,{tipsMore:true});
return false;
}
if(!verifyObj && !verify.regx){
return true;
}
if(verify.regx){ //自定义正则判断
if(typeof verify.regx === "function"){//为函数时
if(verify.regx(data))return true;
layer.tips(verifyMsg, td,{tipsMore:true});
return false;
}
if(typeof verify.regx === "string"){ //为字符串正则时
var regx = new RegExp(verify.regx);
if(regx.test(data))return true;
layer.tips(verifyMsg, td,{tipsMore:true});
return false;
}
if(verify.regx.test(data))return true; //为正则时
layer.tips(verifyMsg, td,{tipsMore:true});
return false;
}
if(!verifyObj[0].test(data)){
layer.tips(verifyMsg, td,{tipsMore:true});
return false;
}
return true;
};
/**
* 提交数据的验证
* @param options {elem:'#test',data:[],verifyKey:'id'}
* elem: 表格id,带井号 data: 验证数据,数组类型。
* verifyKey: data中的元素的唯一值字段，且必须在表格中有此字段的单元格。
* @returns {*}
*/
AopEvent.prototype.submitValidate = function (options) {
var that = this,failedTds = [];
if(!options || singleInstance.isEmpty(options.verifyKey)
|| singleInstance.isEmpty(options.data)
|| singleInstance.isEmpty(options.elem))return failedTds;
var body = $(options.elem).next().find('div.layui-table-box div.layui-table-body tr');
options.data.forEach(function (item) {
for(var field in item){
var config = that.config.colsConfig[field];
if(!config || !config.verify)continue;
var verify = config.verify;
var tds = body.find('td[data-field="'+options.verifyKey+'"]');
var thisTd;
tds.each(function () {
var text = $(this).find('div.layui-table-cell').text();
if(text+'' === item[options.verifyKey]+''){
thisTd = $(this);
}
});
if(!thisTd)continue;
var td = thisTd.parent().children('td[data-field="'+field+'"]');
if(!that.verify(item[field],verify,td))failedTds.push(td[0]);
}
});
return failedTds;
};
var active = {
aopObj:function(cols){return new AopEvent(cols);},
on:function (event,callback) {
var filter = event.match(/\((.*)\)$/),eventName = (filter ? (event.replace(filter[0],'')+'_'+ filter[1]) : event);
configs.callbacks[moduleName+'_'+eventName]=callback;
},
callbackFn:function (event,params) {
var filter = event.match(/\((.*)\)$/),eventName = (filter ? (event.replace(filter[0],'')+'_'+ filter[1]) : event);
var key = moduleName+'_'+eventName,func = configs.callbacks[key];
if(!func) return;
return func.call(this,params);
}
};
active.on("tableEdit(getEntity)",function () {
return singleInstance;
});
exports(moduleName, active);
});
public/js/lay-module/tableTree/tableTree.js
+1255
View File
File diff suppressed because it is too large Load Diff
public/js/lay-module/tablefilter/tableFilter.css
+22
View File
@@ -0,0 +1,22 @@
/*table 过滤*/
.layui-table-filter {height:100%;cursor: pointer;position: absolute;right:15px;padding:0 5px;}
.layui-table-filter i {font-size: 12px;color: #ccc;}
.layui-table-filter:hover i {color: #666;}
.layui-table-filter.tableFilter-has i {color: #1E9FFF;}
.layui-table-filter-view {min-width:200px;background:#FFFFFF;border: 1px solid #d2d2d2;box-shadow: 0 2px 4px rgba(0,0,0,.12);position:absolute;top:0px;left:0px;z-index:90000000;}
.layui-table-filter-box {padding:10px;}
.layui-table-filter-box .loading {width: 100%;height: 100%;text-align: center;line-height: 150px;}
.layui-table-filter-box .loading i {font-size: 18px;}
.layui-table-filter-box input.layui-input {margin-bottom:10px;}
.layui-table-filter-box ul {border: 1px solid #eee;height:150px;overflow: auto;margin-bottom:10px;padding:5px 10px 5px 10px;}
.layui-table-filter-box ul li {padding:3px 0;}
.layui-table-filter-box ul.radio {padding:0px;}
.layui-table-filter-box ul.radio li {padding:0px;}
.layui-table-filter-box ul li .layui-form-radio {display: block;color:#666;margin:0px;padding:0px;transition: .1s linear;}
.layui-table-filter-box ul li .layui-form-radio div {display: block;padding:0 10px;}
.layui-table-filter-box ul li .layui-form-radio i {display: none;}
.layui-table-filter-box ul li .layui-form-radio:hover {background:#f9f9f9;}
.layui-table-filter-box ul li .layui-form-radio.layui-form-radioed {background:#5FB878;color: #fff;}
.layui-table-filter-date {margin-bottom:10px;}
.layui-table-filter-date .layui-laydate {box-shadow:none;border:0;}
public/js/lay-module/tablefilter/tableFilter.js
+532
View File
@@ -0,0 +1,532 @@
/**
TABLEFILTER
**/
layui.define(['table', 'jquery', 'form', 'laydate'], function (exports) {
var MOD_NAME = 'tableFilter',
$ = layui.jquery,
table = layui.table,
form = layui.form,
laydate = layui.laydate;
var tableFilter = {
"v" : '1.0.0'
};
//缓存
tableFilter.cache = {}
//渲染
tableFilter.render = function(opt){
//配置默认值
var elem = $(opt.elem || '#table'),
elemId = elem.attr("id") || "table_" + new Date().getTime(),
filters = opt.filters || [],
parent = opt.parent || 'body',
mode = opt.mode || "local";
opt.done = opt.done || function(){};
//写入默认缓存
tableFilter.cache[elemId]={};
//主运行
var main = function (){
//默认过滤
if(mode == "local"){
var trsIndex = tableFilter.getShowTrIndex(elem, elemId, filters);
if(trsIndex.length > 0){
var trs = elem.next().find('.layui-table-body tr');
trs.each(function(i, tr){
if($.inArray($(tr).data("index"), trsIndex) != -1){
$(tr).removeClass("layui-hide")
}else{
$(tr).addClass("layui-hide")
}
})
}else{
elem.next().find('.layui-table-body tr').removeClass("layui-hide")
}
//FIX全选监听
tableFilter.fixAll(elem);
//重载表格尺寸 (FIX刷新表格时的表格异常)
table.resize(elemId);
}
//遍历过滤项
layui.each(filters, function(i, filter){
var filterField = filter.field,
filterName = filter.name || filter.field,
filterType = filter.type || "input",
filterData = filter.data || [],
filterUrl = filter.url || "";
//插入图标
var th = elem.next().find('.layui-table-header th[data-field="'+filterField+'"]');
var icon = filterType == 'input' ? 'layui-icon-search' : 'layui-icon-down';
var filterIcon = $('<span class="layui-table-filter layui-inline"><i class="layui-icon '+icon+'"></i></span>');
th.find('.layui-table-cell').append(filterIcon)
//图标默认高亮
if(tableFilter.cache[elemId][filterName]){
filterIcon.addClass("tableFilter-has")
}else{
filterIcon.removeClass("tableFilter-has")
}
//图标点击事件
filterIcon.on("click", function(e) {
e.stopPropagation();
//得到过滤项的选项
//如果开启本地 并且没设置数据 就读本地数据
if( !filter.data && !filterUrl && filterType != "input"){
filterData = tableFilter.eachTds(elem, filterField);
}
//弹出层
var t = $(this).offset().top + $(parent).scrollTop() + $(this).outerHeight() + 5 +"px";
var l_fix = filterType == "date" ? 530 : 164;
var l = $(this).offset().left - ($('body').outerWidth(true) - $(parent).outerWidth(true)) - l_fix +"px";
var filterBox = $('<div class="layui-table-filter-view layui-anim layui-anim-fadein" style="top:'+t+';left:'+l+';"><div class="layui-table-filter-box"><form class="layui-form" lay-filter="table-filter-form"></form></div></div>');
if(filterType == "input"){
filterBox.find('form').append('<input type="search" name="'+filterName+'" lay-verify="required" lay-verType="tips" placeholder="关键词" class="layui-input">');
}
if(filterType == "checkbox"){
filterBox.find('form').append('<ul></ul>');
if(!filterUrl){
layui.each(filterData, function(i, item){
filterBox.find('ul').append('<li><input type="checkbox" name="'+filterName+'['+item.key+']" value="'+item.key+'" title="'+item.value+'" lay-skin="primary"></li>');
})
}
}
if(filterType == "radio"){
filterBox.find('form').append('<ul class="radio"></ul>');
if(!filterUrl){
filterBox.find('ul').append('<li><input type="radio" name="'+filterName+'" value="" title="All" checked></li>');
layui.each(filterData, function(i, item){
filterBox.find('ul').append('<li><input type="radio" name="'+filterName+'" value="'+item.key+'" title="'+item.value+'"></li>');
})
}
}
if(filterType == "date"){
filterBox.find('form').append('<div class="layui-table-filter-date"></div>');
filterBox.find('form').append('<input type="text" name="'+filterName+'" lay-verify="required" lay-verType="tips" placeholder="请选择日期" class="layui-input">');
}
filterBox.find('form').append('<button class="layui-btn layui-btn-normal layui-btn-sm" lay-submit lay-filter="tableFilter">确定</button>');
filterBox.find('form').append('<button type="button" class="layui-btn layui-btn-primary layui-btn-sm filter-del layui-btn-disabled" disabled>取消过滤</button>');
//设置清除是否可用
$(this).hasClass('tableFilter-has') && filterBox.find('.filter-del').removeClass("layui-btn-disabled").removeAttr("disabled","disabled");
//加入DOM
$(parent).append(filterBox);
//赋值FORM
form.val("table-filter-form", tableFilter.toLayuiFrom(elemId, filterName, filterType));
//渲染layui form
form.render(null, 'table-filter-form');
//渲染日期
if(filterType == "date"){
laydate.render({
elem: '.layui-table-filter-date',
range: true,
type: 'date',
value: $('.layui-table-filter-date').next().val(),
position: 'static',
showBottom: false,
change: function(value, date, endDate){
$('.layui-table-filter-date').next().val(value)
}
});
}
//渲染FORM 如果是searchInput 就默认选中
var searchInput = filterBox.find('form input[type="search"]');
searchInput.focus().select();
//处理异步filterData
if((filterType == 'checkbox' || filterType == 'radio') && filterUrl){
var filterBoxUl = filterBox.find('.layui-table-filter-box ul');
filterBoxUl.append('<div class="loading"><i class="layui-icon layui-icon-loading layui-anim layui-anim-rotate layui-anim-loop"></i></div>');
$.getJSON(filterUrl + "?_t=" + new Date().getTime(), function(res, status, xhr){
filterBoxUl.empty();
filterType == "radio" && filterBoxUl.append('<li><input type="radio" name="'+filterName+'" value="" title="All" checked></li>');
layui.each(res.data, function(i, item){
filterType == "checkbox" && filterBoxUl.append('<li><input type="checkbox" name="'+filterName+'['+item.key+']" value="'+item.key+'" title="'+item.value+'" lay-skin="primary"></li>');
filterType == "radio" && filterBoxUl.append('<li><input type="radio" name="'+filterName+'" value="'+item.key+'" title="'+item.value+'"></li>');
})
form.render(null, 'table-filter-form');
form.val("table-filter-form", tableFilter.toLayuiFrom(elemId, filterName, filterType));
});
}
//点击确认开始过滤
form.on('submit(tableFilter)', function(data){
//重构复选框结果
if(filterType == "checkbox"){
var NEWfield = [];
for(var key in data.field){
NEWfield.push(data.field[key])
}
data.field[filterName] = NEWfield
}
//过滤项写入缓存
tableFilter.cache[elemId][filterName] = data.field[filterName];
//如果有过滤项 icon就高亮
if(tableFilter.cache[elemId][filterName].length > 0){
filterIcon.addClass("tableFilter-has")
}else{
filterIcon.removeClass("tableFilter-has")
}
if(mode == "local"){
//本地交叉过滤
var trsIndex = tableFilter.getShowTrIndex(elem, elemId, filters);
if(trsIndex.length > 0 || data.field[filterName].length > 0){
var trs = elem.next().find('.layui-table-body tr');
trs.each(function(i, tr){
if($.inArray($(tr).data("index"), trsIndex) != -1){
$(tr).removeClass("layui-hide")
}else{
$(tr).addClass("layui-hide")
}
})
}else{
elem.next().find('.layui-table-body tr').removeClass("layui-hide")
}
//更新合计行
tableFilter.updataTotal(elem);
//更新序列号
tableFilter.upNumbers(elem);
//取消表格选中
tableFilter.uncheck(elem);
//重载表格尺寸
table.resize(elemId)
}else if(mode == "api"){
//服务端交叉过滤
//将数组转字符串
var new_where = {};
for (var key in tableFilter.cache[elemId]) {
var filterKey = key,
filterValue = tableFilter.cache[elemId][key];
if($.isArray(filterValue)){
new_where[filterKey] = filterValue.join(",");
}else{
new_where[filterKey] = filterValue;
}
}
table.reload(elemId,{"where":new_where})
}
//写入回调函数
opt.done(tableFilter.cache[elemId]);
filterBox.remove();
return false;
})
//点击清除此项过滤
filterBox.find('.layui-table-filter-box .filter-del').on('click', function(e) {
delete tableFilter.cache[elemId][filterName];
filterIcon.removeClass("tableFilter-has");
if(mode == "local"){
var trsIndex = tableFilter.getShowTrIndex(elem, elemId, filters);
if(trsIndex.length > 0){
var trs = elem.next().find('.layui-table-body tr');
trs.each(function(i, tr){
if($.inArray($(tr).data("index"), trsIndex) != -1){
$(tr).removeClass("layui-hide")
}else{
$(tr).addClass("layui-hide")
}
})
}else{
elem.next().find('.layui-table-body tr').removeClass("layui-hide")
}
//更新合计行
tableFilter.updataTotal(elem)
//更新序列号
tableFilter.upNumbers(elem)
//取消表格选中
tableFilter.uncheck(elem)
//重载表格尺寸
table.resize(elemId)
}else if(mode == "api"){
//需要清除where里的对应的值
var where = {};
where[filterName] = ''
table.reload(elemId,{"where" : where})
}
opt.done(tableFilter.cache[elemId]);
filterBox.remove();
})
//点击其他区域关闭
$(document).mouseup(function(e){
var userSet_con = $('.layui-table-filter-view');
if(!userSet_con.is(e.target) && userSet_con.has(e.target).length === 0){
filterBox.remove();
}
});
})
})
};
main();
//函数返回
var returnObj = {
'config' : opt,
'reload' : function(opt){
main();
//更新序列号
tableFilter.upNumbers(elem);
}
}
return returnObj
}
//遍历行获取本地列集合 return tdsArray[]
tableFilter.eachTds = function(elem, filterField){
var tdsText = [],
tdsArray = [];
var tds = elem.next().find('.layui-table-body td[data-field="'+filterField+'"]');
tds.each(function(i, td){
tdsText.push($.trim(td.innerText))
})
tdsText = tableFilter.tool.uniqueObjArray(tdsText);
layui.each(tdsText, function(i, item){
tdsArray.push({'key':item, 'value':item})
})
return tdsArray;
}
//获取匹配的TR的data-index return trsIndex[]
tableFilter.getShowTrIndex = function(elem, elemId, filters){
var trsIndex = [];
var filterValues = tableFilter.cache[elemId];
for (var key in filterValues) {
var filterKey = key,
filterValue = filterValues[key];
//如果有name比对filterField
layui.each(filters, function(i, item){
if(filterKey == item.name){
filterKey = item.field
}
})
var tds = elem.next().find('.layui-table-body td[data-field="'+filterKey+'"]');
//获取这一次过滤的匹配
var this_trsIndex = [];
tds.each(function(i, td){
if($.isArray(filterValue)){
//过滤值=数组 inArray 复选框
if($.inArray($.trim(td.innerText), filterValue) >= 0 && filterValue && filterValue.length > 0){
this_trsIndex.push($(td).parent().data("index"))
}
}else if(filterValue.indexOf(" - ") >= 0){
//是否在时间段内
var d = $.trim(td.innerText);
var s = filterValue.split(" - ")[0];
var e = filterValue.split(" - ")[1];
if(tableFilter.tool.isDuringDate(d,s,e)){
this_trsIndex.push($(td).parent().data("index"))
}
}else{
//过滤值=字符串 indexOf 单选框 输入框
if($.trim(td.innerText).indexOf(filterValue) >= 0){
this_trsIndex.push($(td).parent().data("index"))
}
}
})
//取最终结果 合并数组后去相同值
//第一次 不合并
if(trsIndex.length <= 0){
trsIndex = this_trsIndex
}else{
if(this_trsIndex.length > 0){
//这一次有值 和前面N次取相同值
trsIndex = tableFilter.tool.getSameArray(trsIndex, this_trsIndex);
}else{
//这一次没值 前面N次有值,如果字符串过滤未有值 就显示空
trsIndex = $.isArray(filterValue) ? trsIndex : [];
}
}
}
return tableFilter.tool.uniqueObjArray(trsIndex);
}
//JSON 数据转layuiFOMR 可用的 处理checkbox
tableFilter.toLayuiFrom = function(elemId, filterName, filterType){
var form_val = JSON.stringify(tableFilter.cache[elemId]);
form_val = JSON.parse(form_val);
if(filterType == "checkbox"){
layui.each(form_val[filterName], function(i, value){
form_val[filterName + "["+value+"]"] = true;
})
delete form_val[filterName];
}
return form_val;
}
//更新合计行数据
tableFilter.updataTotal = function(elem){
var elemId = elem.attr("id");
table.eachCols(elemId, function(i, item){
if(item.totalRow){
var tdAllnum = 0;
var tds = elem.next().find('.layui-table-body td[data-field="'+item.field+'"]')
tds.each(function(i, td){
if(!$(td).parent().hasClass('layui-hide')){
//FIX JS计算精度
tdAllnum = (tdAllnum*10 + Number($.trim(td.innerText))*10)/10
}
})
var totalTds = elem.next().find('.layui-table-total td[data-field="'+item.field+'"]')
totalTds.each(function(i, td){
$(td).find(".layui-table-cell").html(tdAllnum || "0")
})
}
})
}
//更新序号列
tableFilter.upNumbers = function(elem){
//当前第几页
var cur = elem.next().find('.layui-laypage-curr').text();
cur = Number(cur || '1')
var limit = elem.next().find('.layui-laypage-limits select').val();
limit = Number(limit)
var trs = elem.next().find('.layui-table-main tr');
var n = cur==1 ? 0 : limit*(cur-1);
trs.each(function(i, tr){
if(!$(tr).hasClass('layui-hide')){
n += 1;
$(tr).find('.laytable-cell-numbers').html(n)
}
})
if(elem.next().find('.layui-table-fixed').length >= 1){
var trs_f = elem.next().find('.layui-table-fixed .layui-table-body tr');
var n_f = cur==1 ? 0 : limit*(cur-1);
trs_f.each(function(i, tr_f){
if(!$(tr_f).hasClass('layui-hide')){
n_f += 1;
$(tr_f).find('.laytable-cell-numbers').html(n_f)
}
})
}
}
//表格取消选中
tableFilter.uncheck = function(elem){
var elemId = elem.attr("id");
var tableName = elem.attr("lay-filter");
var trs = elem.next().find('.layui-table-fixed-l tr');
trs.each(function(i, tr){
var c = $(tr).find("[name='layTableCheckbox']");
if(c.prop("checked")){
$(tr).find('.layui-form-checked i').click()
}
})
}
//FIX 表格全选选中隐藏项
tableFilter.fixAll = function(elem){
var elemId = elem.attr("id");
var tableName = elem.attr("lay-filter");
var trs = elem.next().find('.layui-table-main tr');
table.on('checkbox('+tableName+')', function(obj){
if(obj.type=="all"){
var data = table.cache[elemId];
trs.each(function(i, tr){
if($(tr).hasClass('layui-hide')){
data[i].LAY_CHECKED = false;
}
})
}
})
}
//隐藏选择器
tableFilter.hide = function(){
$('.layui-table-filter-view').remove();
}
//工具
tableFilter.tool = {
//数组&对象数组去重
'uniqueObjArray' : function(arr, type){
var newArr = [];
var tArr = [];
if(arr.length == 0){
return arr;
}else{
if(type){
for(var i=0;i<arr.length;i++){
if(!tArr[arr[i][type]]){
newArr.push(arr[i]);
tArr[arr[i][type]] = true;
}
}
return newArr;
}else{
for(var i=0;i<arr.length;i++){
if(!tArr[arr[i]]){
newArr.push(arr[i]);
tArr[arr[i]] = true;
}
}
return newArr;
}
}
},
//合并数组取相同项
'getSameArray' : function(arry1, arry2){
var newArr = [];
for (var i = 0; i < arry1.length; i++) {
for (var j = 0; j < arry2.length; j++) {
if(arry2[j] === arry1[i]){
newArr.push(arry2[j]);
}
}
}
return newArr;
},
'isDuringDate' : function(dateStr, beginDateStr, endDateStr){
var curDate = new Date(dateStr),
beginDate = new Date(beginDateStr),
endDate = new Date(endDateStr);
if (curDate >= beginDate && curDate <= endDate) {
return true;
}
return false;
}
}
//输出接口
exports(MOD_NAME, tableFilter);
}).link(layui.cache.base+"tablefilter/tableFilter.css?v="+(new Date).getTime());
public/js/lay-module/textool/textool.js
+308
View File
@@ -0,0 +1,308 @@
/**
* Layui 文本输入工具组件
*
* @author iTanken
* @since 20200310
*/
layui.define(['jquery'], function (exports) {
var $ = layui.$, baseClassName = 'layext-text-tool', extClassName = 'layext-textool-pane',
style, alignRight = true, alignClass, nodes = [], tools = {
"hide": null, "count": null, "copy": null, "reset": null, "clear": null,
hideIndex: -1, countIndex: -1, copyIndex: -1, resetIndex: -1, clearIndex: -1,
hideName: "hide", countName: "count", copyName: "copy", resetName: "reset", clearName: "clear",
hideClass: "layext-textool-minmax", countClass: "layext-textool-count", maxClass: "layext-textool-max",
copyClass: "layext-textool-copy", resetClass: "layext-textool-reset", clearClass: "layext-textool-clear",
copyTextId: baseClassName + '-copy-text', lengthClass: 'layext-textool-length',
lengthOverClass: baseClassName + '-length-over', laytips: 'layext-textool-laytips'
}, defaultOptions = {
// 根据元素 id 值单独渲染，为空默认根据 class='layext-text-tool' 批量渲染
eleId: null,
// 批量设置输入框最大长度，可结合 eleId 单独设置最大长度
maxlength: -1,
// 初始化回调，无参
initEnd: $.noop,
// 显示回调，参数为当前输入框和工具条面板的 jQuery 对象
showEnd: $.noop,
// 隐藏回调，参数为当前输入框和工具条面板的 jQuery 对象
hideEnd: $.noop,
// 初始化展开，默认展开，否则收起
initShow: true,
// 工具条是否位于输入框内部，默认位于外部
inner: false,
// 工具条对齐方向，默认右对齐，可选左对齐 'left'
align: 'right',
// 启用指定工具模块，默认依次为字数统计、复制内容、重置内容、清空内容，按数组顺序显示
tools: ['count', 'copy', 'reset', 'clear'],
// 工具按钮提示类型，默认为 'title' 属性，可选 'laytips'，使用 layer 组件的吸附提示， 其他值不显示提示
tipType: 'title',
// 吸附提示背景颜色
tipColor: '#01AAED',
// 工具条字体颜色
color: '#666666',
// 工具条背景颜色
bgColor: '#FFFFFF',
// 工具条边框颜色
borderColor: '#E6E6E6',
// 工具条附加样式类名
className: '',
// z-index
zIndex: 19891014
}, Class = function (custom) {
var _this = this;
_this.tipsAttr = null;
_this.selector = null;
_this.init(_this, custom || {});
};
/** 初始化 */
Class.prototype.init = function (_this, custom) {
_this.options = $.extend({}, defaultOptions, custom);
_this.selector = $.trim(_this.options.eleId) === '' ? '.' + baseClassName : '#' + _this.options.eleId;
_this.initStyle(_this);
_this.initPrototype();
$(_this.selector).each(function (i, n) {
var $this = $(this), maxlength = _this.options.maxlength;
!isNaN(maxlength) && maxlength > -1 && $this.attr('maxlength', maxlength);
_this.addTextool(_this, $this);
});
_this.initTips(_this);
typeof _this.options.initEnd === 'function' && _this.options.initEnd();
};
/** 初始化扩展样式 */
Class.prototype.initStyle = function (_this) {
_this.options.zIndex = isNaN(_this.options.zIndex) ? 0 : _this.options.zIndex || 0;
style = ['<style type="text/css">',
'#', tools.copyTextId, ' { width: 0; height: 0; position: absolute; top: -190000px; }',
_this.selector, ' { position: relative; z-index: ', _this.options.zIndex + (_this.options.inner ? 0 : 1), '; }',
_this.selector, ' + .', extClassName, ' { position: relative; z-index: ', _this.options.zIndex, '; margin-top: -2px; display: block; outline: none; }',
_this.selector, ' + .', extClassName, ' * { color: ', (_this.options.color || '#666666'), '; }',
_this.selector, ' + .', extClassName, ' a > i { font-size: 12px!important; }',
_this.selector, ' + .', extClassName, ' a { padding: 0 3px; cursor: pointer; }',
_this.selector, ' + .', extClassName, ' a:active { background-color: #E2E2E2; opacity: 0.8; }',
_this.selector, ' + .', extClassName, ' .', tools.lengthClass, ' * { font-family: Consolas, sans-serif; }',
_this.selector, ' + .', extClassName, ' .', tools.lengthClass, ' { display: inline-block; border-width: 0 1px; }', /* border: 1px solid #F6F6F6; */
_this.selector, ' + .', extClassName, ' .', tools.lengthClass, ' * { font-family: Consolas, sans-serif; }',
_this.selector, ' + .', extClassName, ' .', tools.lengthOverClass, ' { color: #FF5722; }',
_this.selector, ' + .', extClassName, ' .', tools.countClass, ', ', _this.selector, ' + .', extClassName, ' .', tools.maxClass, ' { display: inline-block; min-width: 26px; height: 16px; line-height: 18px; }',
_this.selector, ' + .', extClassName, ' > .layui-badge { overflow: hidden; border-color: ', (_this.options.borderColor || '#E6E6E6'), '; background-color: ', (_this.options.bgColor || '#FFFFFF'), '; }',
_this.selector, ' + .', extClassName, '-r.', extClassName, '-inner > .layui-badge { border-right: 0 none; border-radius: 15px 0 17px; margin-right: 1px; }',
_this.selector, ' + .', extClassName, '-l.', extClassName, '-inner > .layui-badge { border-left: 0 none; border-radius: 0 15px 0; margin-left: 1px; }',
_this.selector, ' + .', extClassName, '-inner > .layui-badge { top: -18px; border-bottom: 0 none; opacity: 0.8; }',
_this.selector, ' + .', extClassName, '-inner > .layui-badge:hover { opacity: 1; }',
_this.selector, ' + .', extClassName, ' .', tools.maxClass, ' { opacity: 0.9; }',
_this.selector, ' + .', extClassName, '-r { text-align: right; }',
_this.selector, ' + .', extClassName, '-l { text-align: left; }',
_this.selector, ' + .', extClassName, '-inner { height: 0; }',
'</style>'].join('');
$('head link:last')[0] && $('head link:last').after(style) || $('head').append(style);
};
/** 初始化默认方法，处理 JS 兼容问题 */
Class.prototype.initPrototype = function () {
// 获取数组元素下标
!Array.prototype.indexOf && (Array.prototype.indexOf = function (array, value) {
array = array || [];
for (var i = array.length; i--;) {
if (array[i] == value) {
return i;
}
}
return -1;
});
};
/** 添加文本工具 */
Class.prototype.addTextool = function (_this, $target) {
var $extPane = $target.next('.' + extClassName);
// 若已存在，则移除元素，支持重复渲染
$extPane && $extPane.length && $extPane.remove();
// 添加元素
$target.after(_this.getToolsNode(_this, $target));
$extPane = $target.next('.' + extClassName);
_this.setEvent(_this, $target, $extPane);
$extPane.fadeIn(200, function() {
!_this.options.initShow && $extPane.find('.' + tools.hideClass).trigger('click');
});
};
/** 复制文本 */
Class.prototype.copyText = function (_this, $target) {
if (!$target) {
return false;
}
!$('#' + tools.copyTextId).length && $('body').append('<textarea id=' + tools.copyTextId + ' readonly="readonly"></textarea>');
var $copy = $('#' + tools.copyTextId), value = $target.val();
$copy.val(value === '' ? ' ' : value).select();
document.execCommand('copy');
_this.showTip(_this, $target, '已复制！');
};
/** 设置内容长度 */
Class.prototype.setValLength = function (_this, $target) {
var $length = $target.next('.' + extClassName).find('.' + tools.countClass);
$length.text($target.val().length);
if ($target.val().length > $target.attr('maxlength')) {
$length.addClass(tools.lengthOverClass);
} else if ($length.hasClass(tools.lengthOverClass)) {
$length.removeClass(tools.lengthOverClass);
}
}
/** 设置工具条事件 */
Class.prototype.setEvent = function (_this, $target, $extPane) {
_this.setValLength(_this, $target);
var initValue = $target.val();
// 文本工具条按钮点击事件
$extPane.on('click', 'a', function (e) {
var $this = $(this), $icon = $this.children('i.layui-icon');
if ($this.hasClass(tools.hideClass)) {
// 收起展开按钮事件
$this.nextAll().toggle('fast');
$this.prevAll().toggle('fast');
if ($icon.hasClass('layui-icon-more')) {
$icon.removeClass('layui-icon-more').addClass('layui-icon-more-vertical');
$this.attr(_this.tipsAttr, '展开');
typeof _this.options.hideEnd === 'function' && _this.options.hideEnd($target, $extPane);
} else {
$icon.removeClass('layui-icon-more-vertical').addClass('layui-icon-more');
$this.attr(_this.tipsAttr, '收起');
typeof _this.options.showEnd === 'function' && _this.options.showEnd($target, $extPane);
}
_this.tipsAttr === tools.laytips && _this.showTip(_this, $this, $this.attr(_this.tipsAttr));
}
if ($this.hasClass(tools.copyClass)) {
// 复制按钮事件
_this.copyText(_this, $target);
}
if ($this.hasClass(tools.resetClass)) {
// 重置按钮事件
$target.val(initValue);
_this.setValLength(_this, $target);
}
if ($this.hasClass(tools.clearClass)) {
// 清空按钮事件
$target.val('');
_this.setValLength(_this, $target);
}
layui.stope(e);
return false;
});
// 字数统计事件
$target.on('keyup input', function (e) {
_this.setValLength(_this, $target);
layui.stope(e);
return false;
});
};
/** 获取工具条节点 */
Class.prototype.getToolsNode = function (_this, $target) {
if (!$target) return false;
// 总是显示收起展开按钮
tools.hide = ['<a href="javascript:;"', _this.getTips(_this, '收起'), 'class="', tools.hideClass, '"><i class="layui-icon layui-icon-more"></i></a>'].join('');
// 至少显示一个工具模块
_this.options.tools = _this.options.tools || [tools.countName];
// 字数统计
tools.countIndex = _this.options.tools.indexOf(tools.countName);
if (tools.countIndex > -1) {
var maxlength = $target.attr('maxlength') || -1;
tools.count = ['<span class="', tools.lengthClass, '"><b class="', tools.countClass, '"', _this.getTips(_this, '当前字数'), '>0</b>',
(maxlength < 0 ? '' : ['/<span class="', tools.maxClass, '"', _this.getTips(_this, '最大字数'), '>', maxlength, '</span>'].join('')), '</span>'].join('');
}
// 复制内容
tools.copyIndex = _this.options.tools.indexOf(tools.copyName);
if (tools.copyIndex > -1) {
tools.copy = ['<a href="javascript:;" class="', tools.copyClass, '"', _this.getTips(_this, '复制'),
'><i class="layui-icon layui-icon-file"></i></a>'].join('');
}
// 重置内容
tools.resetIndex = _this.options.tools.indexOf(tools.resetName);
if (tools.resetIndex > -1) {
tools.reset = ['<a href="javascript:;" class="', tools.resetClass, '"', _this.getTips(_this, '重置'),
'><i class="layui-icon layui-icon-refresh-1"></i></a>'].join('');
}
// 清空内容
tools.clearIndex = _this.options.tools.indexOf(tools.clearName);
if (tools.clearIndex > -1) {
tools.clear = ['<a href="javascript:;" class="', tools.clearClass, '"', _this.getTips(_this, '清空'),
'><i class="layui-icon layui-icon-close"></i></a>'].join('');
}
if (_this.options.align === 'left') {
// 居左对齐
alignRight = false;
alignClass = extClassName + '-l';
} else {
// 居右对其
alignRight = true;
alignClass = extClassName + '-r';
}
// 处理工具条节点
nodes = ['<span class="layui-unselect ', extClassName, ' ', alignClass, ' ', (_this.options.inner ? extClassName + '-inner ' : ''),
$.trim(_this.options.className), ' layui-anim layui-anim-fadein"><span class="layui-badge layui-badge-rim">'];
!alignRight && nodes.push(tools.hide);
for (var i = 0; i < _this.options.tools.length; i++) {
nodes.push(tools[_this.options.tools[i]] || '');
}
alignRight && nodes.push(tools.hide);
nodes.push('</span></span>');
return nodes.join('');
};
/** 获取提示信息属性 */
Class.prototype.getTips = function (_this, msg) {
switch (_this.options.tipType) {
case 'title':
_this.tipsAttr = 'title';
break;
case 'laytips':
_this.tipsAttr = tools.laytips;
break;
default:
return '';
}
return [' ', _this.tipsAttr, '=', msg, ' '].join('');
};
/** 初始化吸附提示 */
Class.prototype.initTips = function (_this) {
$('[' + tools.laytips + ']').each(function (i, n) {
var $target = $(n);
if ($.trim($target.attr(_this.tipsAttr)) !== '') {
$target.hover(function () {
_this.showTip(_this, $target, $target.attr(_this.tipsAttr));
}, _this.hideTip);
}
});
};
/** 显示吸附提示 */
Class.prototype.showTip = function (_this, $target, msg) {
_this.hideTip();
layui.layer.tips(msg, $target, { tips: [1, _this.options.tipColor || '#01AAED'], time: 2e3, anim: 5, zIndex: (_this.options.zIndex || 0) + 2 });
};
/** 隐藏吸附提示 */
Class.prototype.hideTip = function () {
layui.layer.closeAll('tips');
};
exports('textool', {
/** 初始化入口方法 */
init: function (custom) {
return new Class(custom);
}
});
});
public/js/lay-module/textool/textool.min.js
Vendored
+1
View File
File diff suppressed because one or more lines are too long
public/js/lay-module/transferTable/transferTable.js
+271
View File
@@ -0,0 +1,271 @@
layui.define('table', function (exports) {
var $ = layui.$
, table = layui.table
//字符常量
, MOD_NAME = 'transferTable', ELEM = '.layui-transferTable'
//外部接口
, transferTable = {
index: layui.transferTable ? (layui.transferTable.index + 10000) : 0
//设置全局项
, set: function (options) {
var that = this;
that.config = $.extend({}, that.config, options);
return that;
}
, get: function (id) {
if (this.config && this.config[id]) {
return this.config[id].data
} else {
return []
}
}
, reload: function (id, options) {
table.reload(id, options)
}
}
//操作当前实例
, transfer = function () {
var that = this
, options = that.config
, id = options.id || options.index;
return {
reload: function (options) {
that.reload.call(that, options);
}
, config: options
}
}
//构造器
, Class = function (options) {
var that = this;
that.index = ++transferTable.index;
that.left_table_id = "left_table_" + that.index;
that.rigth_table_id = "rigth_table_" + that.index;
//表格重载ID 如果配置里面没有 自动分配一个ID
that.reload_left = that.left_table_id;
that.reload_right = that.rigth_table_id;
if (options.id && options.id.length) {
that.reload_left = options.id[0]
that.reload_right = options.id[1] || options.id[0] + '_2'
} else {
//没有配置ID 默认给表格中添加ID 用于重载
options.id = [that.reload_left, that.reload_right]
}
//全局设置
if (options.id_name) {
idName = options.id_name;
if (options.where && options.where[idName]) {
var d = [];
var tableid = that.reload_right;
d[tableid] = {data: options.where[idName]}
transferTable.set(d)
}
}
that.config = $.extend({}, that.config, transferTable.config, options);
that.render();
};
Class.prototype.render = function () {
//ID里面放表格样式
this.tableHtml()
// 配置表格参数
this.loadTable()
// 移动数据
this.moveData()
// 监听双击事件 并移动数据
this.doubleData()
}
Class.prototype.tableHtml = function () {
var that = this,
options = that.config,
left_table = '<table class="layui-hide" id="' + that.left_table_id + '" lay-filter="' + that.left_table_id + '"></table>',
rigth_table = '<table class="layui-hide" id="' + that.rigth_table_id + '" lay-filter="' + that.rigth_table_id + '"></table>',
html = '<div style="width:100%;margin:0 auto;overflow: hidden">' +
'<div style="width:45%;float: left;">' + left_table + '</div>' +
'<div style="width:10%;float: left;">' +
'<div class="btns" style="text-align: center;">' +
'<button data-tid="' + that.left_table_id + '" class="' + that.left_table_id + ' layui-btn layui-btn-disabled btn left" style="margin-bottom: 15px;"><i class="layui-icon layui-icon-next"></i></button><br>' +
'<button data-tid="' + that.rigth_table_id + '" class="' + that.rigth_table_id + ' layui-btn layui-btn-disabled btn rigth"><i class="layui-icon layui-icon-prev"></i></button>' +
'</div>' +
'</div>' +
'<div style="width:45%;float: left;">' + rigth_table + '</div>' +
'<div>';
$(options.elem).append(html)
}
Class.prototype.loadTable = function () {
//传递的参数 table.render 表格
var that = this,
options = that.config,
lt = [that.left_table_id, that.rigth_table_id]
$.each(lt, function (k, id) {
var config = {elem: '#' + id}
$.each(options, function (key, val) {
if (val[k] || val[k] === false) {
var value = val[k]
} else {
var value = val[0]
}
if (typeof val == 'function') {
config[key] = options[key]
} else if (key !== 'elem' && key !== 'id_name' && key !== 'where') {
config[key] = value
}
})
if (options.where) {
config.where = options.where
}
table.render(config);
})
//计算表格高度 居中中间按钮
var th = $('#' + lt[0]).next('div').height() / 2;
var bh = $('.btns').height() / 2;
$('.btns').css('margin-top', th - bh)
//监听表格选中
table.on('checkbox(' + that.left_table_id + ')', function (obj) {
//左边表格点击触发
var checkStatus = table.checkStatus(that.reload_left)
, data = checkStatus.data;
if (data.length > 0) {
$('.' + that.left_table_id).removeClass('layui-btn-disabled')
} else {
$('.' + that.left_table_id).addClass('layui-btn-disabled')
}
});
table.on('checkbox(' + that.rigth_table_id + ')', function (obj) {
//右边表格点击触发
var checkStatus = table.checkStatus(that.reload_right)
, data = checkStatus.data;
if (data.length > 0) {
$('.' + that.rigth_table_id).removeClass('layui-btn-disabled')
} else {
$('.' + that.rigth_table_id).addClass('layui-btn-disabled')
}
});
}
Class.prototype.moveData = function () {
//绑定点击事件
var that = this,
idName = that.config.id_name;
$('.' + that.left_table_id).on('click', function () {
if (!$(this).hasClass('layui-btn-disabled')) {
var checkStatus = table.checkStatus(that.reload_left)
, data = checkStatus.data;
that.leftReload(that, data)
}
$(this).addClass('layui-btn-disabled')
})
$('.' + that.rigth_table_id).on('click', function () {
if (!$(this).hasClass('layui-btn-disabled')) {
var checkStatus = table.checkStatus(that.reload_right)
, data = checkStatus.data;
that.rigthReload(that, data)
}
$(this).addClass('layui-btn-disabled')
})
}
Class.prototype.doubleData = function () {
var that = this;
table.on('rowDouble(' + that.left_table_id + ')', function (obj) {
//左边移动到右边
var data = [];
data.push(obj.data)
that.leftReload(that, data)
});
table.on('rowDouble(' + that.rigth_table_id + ')', function (obj) {
//右边移动到左边
var data = [];
data.push(obj.data)
that.rigthReload(that, data)
});
}
//重载表格
Class.prototype.leftReload = function (that, data) {
if (data && data.length > 0) {
if (that.config.where && that.config.where[idName]) {
var id_data = that.config.where[idName] + "";
id_data = id_data.split(',')
} else {
var id_data = [];
}
$.each(data, function (k, v) {
id_data.push('' + v[idName])
})
//全局存储
id_data = $.unique(id_data);
var ids_str = id_data.join(',')
var d = [];
var tableid = that.reload_right;
d[tableid] = {data: ids_str}
transferTable.set(d)
//配置存储ID
if (!that.config.where) {
that.config.where = {}
}
this.config.where[idName] = ids_str
//重载表格
var reload_config = {
page: {curr: 1},
where: {}
}
if (that.config.done) {
delete reload_config.page;
}
reload_config.where[idName] = ids_str
table.reload(that.reload_left, reload_config)
table.reload(that.reload_right, reload_config)
}
}
Class.prototype.rigthReload = function (that, data) {
if (data && data.length) {
var sel_data = [];
$.each(data, function (k, v) {
sel_data.push('' + v[idName])
})
var id_data = that.config.where[idName] + "";
id_data = id_data.split(',');
var moveD = []; //移除后保留的ID集合
$.each(id_data, function (k, v) {
if ($.inArray(v, sel_data) == -1) moveD.push(v)
})
id_data = $.unique(moveD);
var ids_str = id_data.join(',')
var d = [];
var tableid = that.reload_right;
d[tableid] = {data: ids_str}
transferTable.set(d)
//配置存储ID
this.config.where[idName] = ids_str
//重载表格
var reload_config = {
page: {curr: 1},
where: {}
}
if (that.config.done) {
delete reload_config.page;
}
reload_config.where[idName] = ids_str
table.reload(that.reload_left, reload_config)
table.reload(that.reload_right, reload_config)
}
}
transferTable.render = function (options) {
var ins = new Class(options);
return transfer.call(ins);
};
exports('transferTable', transferTable);
});
public/js/lay-module/treetable-lay/treetable.css
+18
View File
@@ -0,0 +1,18 @@
.treeTable-empty {
width: 20px;
display: inline-block;
}
.treeTable-icon {
cursor: pointer;
}
.treeTable-icon .layui-icon-triangle-d:before {
content: "\e623";
}
.treeTable-icon.open .layui-icon-triangle-d:before {
content: "\e625";
background-color: transparent;
}
public/js/lay-module/treetable-lay/treetable.js
+206
View File
@@ -0,0 +1,206 @@
layui.define(['layer', 'table'], function (exports) {
var $ = layui.jquery;
var layer = layui.layer;
var table = layui.table;
var treetable = {
// 渲染树形表格
render: function (param) {
// 检查参数
if (!treetable.checkParam(param)) {
return;
}
// 获取数据
if (param.data) {
treetable.init(param, param.data);
} else {
$.getJSON(param.url, param.where, function (res) {
treetable.init(param, res.data);
});
}
},
// 渲染表格
init: function (param, data) {
var mData = [];
var doneCallback = param.done;
var tNodes = data;
// 补上id和pid字段
for (var i = 0; i < tNodes.length; i++) {
var tt = tNodes[i];
if (!tt.id) {
if (!param.treeIdName) {
layer.msg('参数treeIdName不能为空', {icon: 5});
return;
}
tt.id = tt[param.treeIdName];
}
if (!tt.pid) {
if (!param.treePidName) {
layer.msg('参数treePidName不能为空', {icon: 5});
return;
}
tt.pid = tt[param.treePidName];
}
}
// 对数据进行排序
var sort = function (s_pid, data) {
for (var i = 0; i < data.length; i++) {
if (data[i].pid == s_pid) {
var len = mData.length;
if (len > 0 && mData[len - 1].id == s_pid) {
mData[len - 1].isParent = true;
}
mData.push(data[i]);
sort(data[i].id, data);
}
}
};
sort(param.treeSpid, tNodes);
// 重写参数
param.url = undefined;
param.data = mData;
param.page = {
count: param.data.length,
limit: param.data.length
};
param.cols[0][param.treeColIndex].templet = function (d) {
var mId = d.id;
var mPid = d.pid;
var isDir = d.isParent;
var emptyNum = treetable.getEmptyNum(mPid, mData);
var iconHtml = '';
for (var i = 0; i < emptyNum; i++) {
iconHtml += '<span class="treeTable-empty"></span>';
}
if (isDir) {
iconHtml += '<i class="layui-icon layui-icon-triangle-d"></i> <i class="layui-icon layui-icon-layer"></i>';
} else {
iconHtml += '<i class="layui-icon layui-icon-file"></i>';
}
iconHtml += '&nbsp;&nbsp;';
var ttype = isDir ? 'dir' : 'file';
var vg = '<span class="treeTable-icon open" lay-tid="' + mId + '" lay-tpid="' + mPid + '" lay-ttype="' + ttype + '">';
return vg + iconHtml + d[param.cols[0][param.treeColIndex].field] + '</span>'
};
param.done = function (res, curr, count) {
$(param.elem).next().addClass('treeTable');
$('.treeTable .layui-table-page').css('display', 'none');
$(param.elem).next().attr('treeLinkage', param.treeLinkage);
// 绑定事件换成对body绑定
/*$('.treeTable .treeTable-icon').click(function () {
treetable.toggleRows($(this), param.treeLinkage);
});*/
if (param.treeDefaultClose) {
treetable.foldAll(param.elem);
}
if (doneCallback) {
doneCallback(res, curr, count);
}
};
// 渲染表格
table.render(param);
},
// 计算缩进的数量
getEmptyNum: function (pid, data) {
var num = 0;
if (!pid) {
return num;
}
var tPid;
for (var i = 0; i < data.length; i++) {
if (pid == data[i].id) {
num += 1;
tPid = data[i].pid;
break;
}
}
return num + treetable.getEmptyNum(tPid, data);
},
// 展开/折叠行
toggleRows: function ($dom, linkage) {
var type = $dom.attr('lay-ttype');
if ('file' == type) {
return;
}
var mId = $dom.attr('lay-tid');
var isOpen = $dom.hasClass('open');
if (isOpen) {
$dom.removeClass('open');
} else {
$dom.addClass('open');
}
$dom.closest('tbody').find('tr').each(function () {
var $ti = $(this).find('.treeTable-icon');
var pid = $ti.attr('lay-tpid');
var ttype = $ti.attr('lay-ttype');
var tOpen = $ti.hasClass('open');
if (mId == pid) {
if (isOpen) {
$(this).hide();
if ('dir' == ttype && tOpen == isOpen) {
$ti.trigger('click');
}
} else {
$(this).show();
if (linkage && 'dir' == ttype && tOpen == isOpen) {
$ti.trigger('click');
}
}
}
});
},
// 检查参数
checkParam: function (param) {
if (!param.treeSpid && param.treeSpid != 0) {
layer.msg('参数treeSpid不能为空', {icon: 5});
return false;
}
if (!param.treeColIndex && param.treeColIndex != 0) {
layer.msg('参数treeColIndex不能为空', {icon: 5});
return false;
}
return true;
},
// 展开所有
expandAll: function (dom) {
$(dom).next('.treeTable').find('.layui-table-body tbody tr').each(function () {
var $ti = $(this).find('.treeTable-icon');
var ttype = $ti.attr('lay-ttype');
var tOpen = $ti.hasClass('open');
if ('dir' == ttype && !tOpen) {
$ti.trigger('click');
}
});
},
// 折叠所有
foldAll: function (dom) {
$(dom).next('.treeTable').find('.layui-table-body tbody tr').each(function () {
var $ti = $(this).find('.treeTable-icon');
var ttype = $ti.attr('lay-ttype');
var tOpen = $ti.hasClass('open');
if ('dir' == ttype && tOpen) {
$ti.trigger('click');
}
});
}
};
layui.link(layui.cache.base + "treetable-lay/treetable.css?v="+(new Date).getTime());
// 给图标列绑定事件
$('body').on('click', '.treeTable .treeTable-icon', function () {
var treeLinkage = $(this).parents('.treeTable').attr('treeLinkage');
if ('true' == treeLinkage) {
treetable.toggleRows($(this), true);
} else {
treetable.toggleRows($(this), false);
}
});
exports('treetable', treetable);
});
public/js/lay-module/wangEditor/fonts/w-e-icon.woff
BIN
View File
Binary file not shown.
public/js/lay-module/wangEditor/wangEditor.css
+411
View File
File diff suppressed because one or more lines are too long
public/js/lay-module/wangEditor/wangEditor.js
+4678
View File
File diff suppressed because one or more lines are too long
public/js/lay-module/wangEditor/wangEditor.min.css
Vendored
+1
View File
File diff suppressed because one or more lines are too long
public/js/lay-module/wangEditor/wangEditor.min.js
Vendored
+4
View File
File diff suppressed because one or more lines are too long