mirror of
https://gitee.com/ulthon/ulthon_admin.git
synced 2026-07-05 17:42:49 +08:00
切换新版layui;增加表格多模板机制;增加local操作方法;增加页面记忆操作方法;删除多余代码;
This commit is contained in:
@@ -1,3 +1,4 @@
|
||||
|
||||
(function () {
|
||||
|
||||
window.onInitElemStyle = function () {
|
||||
@@ -313,6 +314,19 @@
|
||||
icon: 'layui-icon-template-1',
|
||||
extend: 'data-table-id="' + options.id + '"'
|
||||
});
|
||||
|
||||
if (options.layoutDefault === true) {
|
||||
// 自动判断,手机端默认card,电脑端默认table
|
||||
if (admin.checkMobile()) {
|
||||
options.layoutDefault = 'card';
|
||||
} else {
|
||||
options.layoutDefault = 'table';
|
||||
}
|
||||
}
|
||||
|
||||
options.layoutDefault = admin.trySetPageSetting('table-layout-default', options.layoutDefault);
|
||||
|
||||
|
||||
}
|
||||
|
||||
if (options.search) {
|
||||
@@ -328,7 +342,13 @@
|
||||
}
|
||||
|
||||
|
||||
|
||||
var optionBefore = function () { };
|
||||
if (options.before != undefined) {
|
||||
optionBefore = options.before;
|
||||
}
|
||||
options.before = function (tableIns) {
|
||||
optionBefore(tableIns);
|
||||
};
|
||||
|
||||
var optionDone = function () { };
|
||||
if (options.done != undefined) {
|
||||
@@ -336,7 +356,6 @@
|
||||
}
|
||||
options.done = function (res, curr, count) {
|
||||
optionDone(res, curr, count);
|
||||
console.log(res, curr, count);
|
||||
|
||||
// 监听表格内的复制组件
|
||||
admin.api.copyText('[lay-id=' + options.id + ']');
|
||||
@@ -718,46 +737,190 @@
|
||||
}
|
||||
|
||||
var tableId = options.id;
|
||||
var elem = options.elem;
|
||||
console.log(tableId);
|
||||
|
||||
var layuiTableElemName = '[lay-table-id="' + tableId + '"]';
|
||||
var elem = options.elem;
|
||||
|
||||
// 初始化参数
|
||||
options.labelList = options.layoutList.map((item) => {
|
||||
options.layoutList = options.layoutList.map((item) => {
|
||||
if (item == 'table') {
|
||||
return {
|
||||
name: 'table',
|
||||
icon: 'layui-icon layui-icon-table',
|
||||
title: '默认表格',
|
||||
|
||||
};
|
||||
}
|
||||
if (item == 'card') {
|
||||
} else if (item == 'card') {
|
||||
return {
|
||||
name: 'card',
|
||||
title: '默认卡片',
|
||||
'tplFunction': function (data) {
|
||||
icon: 'layui-icon layui-icon-form',
|
||||
tplFunction: function (options, res, container) {
|
||||
console.log('card func');
|
||||
|
||||
console.log(options);
|
||||
console.log(res);
|
||||
console.log(container);
|
||||
|
||||
var baseItem = `
|
||||
<div class="ul-data-card">
|
||||
<div class="header">
|
||||
<div class="main">
|
||||
#
|
||||
<span></span>
|
||||
</div>
|
||||
<div class="plus">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="body">
|
||||
<div class="main">
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer">
|
||||
<div class="main">
|
||||
|
||||
</div>
|
||||
<div class="plus">
|
||||
</div>
|
||||
</div>
|
||||
</div>`;
|
||||
var baseDataItem = `
|
||||
<div class="item">
|
||||
<div class="item-title">
|
||||
|
||||
</div>
|
||||
<div class="item-value">
|
||||
|
||||
</div>
|
||||
</div>`;
|
||||
|
||||
res.data.forEach(row => {
|
||||
|
||||
var rowItem = $.extend(true, {}, row);
|
||||
|
||||
var baseElem = $(baseItem).appendTo(container);
|
||||
|
||||
if (options.cols[0][0].type == 'checkbox' || options.cols[0[0]].type == 'radio') {
|
||||
$('<input name="layTableCheckbox" type="' + options.cols[0][0].type + '">')
|
||||
.appendTo(baseElem.find('.header').find('.plus'));
|
||||
|
||||
}
|
||||
|
||||
rowItem.LAY_COL = $.extend(true, {}, options.cols[0][1]);
|
||||
baseElem.find('.header').find('.main').find('span').html(
|
||||
options.cols[0][1].templet(rowItem)
|
||||
);
|
||||
|
||||
options.cols[0].forEach(LAY_COL => {
|
||||
var dataItem = $.extend(true, {}, row);
|
||||
dataItem.LAY_COL = $.extend(true, {}, LAY_COL);
|
||||
if (LAY_COL.type == 'checkbox' || LAY_COL.type == 'radio') {
|
||||
return;
|
||||
}
|
||||
|
||||
if (LAY_COL.templet == ua.table.tool) {
|
||||
// 暂时隐藏按钮
|
||||
// baseElem.find('.footer .plus').html(dataItem.LAY_COL.templet(dataItem));
|
||||
return;
|
||||
}
|
||||
|
||||
if (LAY_COL.field == 'create_time') {
|
||||
baseElem.find('.footer .main').html(dataItem.LAY_COL.templet(dataItem));
|
||||
return;
|
||||
}
|
||||
|
||||
var baseDataItemElem = $(baseDataItem).appendTo(baseElem.find('.body .main'));
|
||||
baseDataItemElem.find('.item-title').html(
|
||||
dataItem.LAY_COL.title + ':'
|
||||
);
|
||||
baseDataItemElem.find('.item-value').html(
|
||||
dataItem.LAY_COL.templet(dataItem)
|
||||
);
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
return '';
|
||||
}
|
||||
};
|
||||
} else {
|
||||
if (item.icon == undefined) {
|
||||
item.icon = 'layui-icon layui-icon-component';
|
||||
}
|
||||
if (item.title == undefined) {
|
||||
item.title = item.name;
|
||||
}
|
||||
}
|
||||
return item;
|
||||
});
|
||||
|
||||
var optionBefore = options.before;
|
||||
options.before = function (res, curr, count) {
|
||||
optionBefore(res, curr, count);
|
||||
console.log('layout before fun');
|
||||
|
||||
var currentLayout = admin.getPageSetting('table-layout-default', 'table');
|
||||
// 隐藏所有数据体内容
|
||||
var layuiTableElem = $(layuiTableElemName);
|
||||
|
||||
options.layoutList.forEach((item) => {
|
||||
if (item.name == 'table') {
|
||||
layuiTableElem.find('.layui-table-box').hide();
|
||||
} else {
|
||||
layuiTableElem.find('.layui-table-custom.layui-table-custom-' + item.name).hide();
|
||||
}
|
||||
});
|
||||
|
||||
if (currentLayout == 'table') {
|
||||
layuiTableElem.find('.layui-table-box').show();
|
||||
} else {
|
||||
var className = '.layui-table-custom.layui-table-custom-' + currentLayout;
|
||||
// 如果不存在则创建
|
||||
if (!layuiTableElem.find(className).length) {
|
||||
layuiTableElem.find('.layui-table-box').before('<div class="layui-table-custom layui-table-custom-' + currentLayout + '"></div>');
|
||||
}
|
||||
layuiTableElem.find(className).show();
|
||||
loading.show();
|
||||
}
|
||||
};
|
||||
|
||||
var optionDone = options.done;
|
||||
options.done = function (res, curr, count) {
|
||||
optionDone(res, curr, count);
|
||||
console.log('layout done fun');
|
||||
|
||||
var currentLayout = admin.getPageSetting('table-layout-default', 'table');
|
||||
// 隐藏所有数据体内容
|
||||
var layuiTableElem = $(layuiTableElemName);
|
||||
|
||||
options.layoutList.forEach((item) => {
|
||||
if (currentLayout == 'table') {
|
||||
// 如果是table,则不用生成数据,显示出来就行,before已经显示过了
|
||||
return;
|
||||
}
|
||||
|
||||
if (currentLayout != item.name) {
|
||||
// 如果不是,则不进行任何操作
|
||||
return;
|
||||
}
|
||||
|
||||
var className = '.layui-table-custom.layui-table-custom-' + item.name;
|
||||
|
||||
// 清空里面的数据
|
||||
layuiTableElem.find(className).html('');
|
||||
loading.hide()
|
||||
|
||||
item.tplFunction(options, res, layuiTableElem.find(className));
|
||||
|
||||
|
||||
|
||||
|
||||
});
|
||||
|
||||
};
|
||||
// 生成html
|
||||
var layoutElemId = 'layout-list-option-' + tableId;
|
||||
// 构建下拉选择
|
||||
var layoutHtml = '<div id="' + layoutElemId + '" class="">';
|
||||
|
||||
layoutHtml += '</div>';
|
||||
|
||||
$(elem).before(layoutHtml);
|
||||
|
||||
|
||||
return options;
|
||||
|
||||
@@ -1413,7 +1576,10 @@
|
||||
},
|
||||
listenToolbar: function (layFilter, tableId) {
|
||||
table.on('toolbar(' + layFilter + ')', function (obj) {
|
||||
console.log(obj);
|
||||
|
||||
var options = obj.config;
|
||||
var tableId = obj.config.id;
|
||||
// 搜索表单的显示
|
||||
switch (obj.event) {
|
||||
case 'TABLE_SEARCH':
|
||||
@@ -1426,13 +1592,64 @@
|
||||
}
|
||||
break;
|
||||
case 'TABLE_LAYOUT':
|
||||
var searchFieldsetId = 'searchFieldset_' + tableId;
|
||||
var _that = $("#" + searchFieldsetId);
|
||||
if (_that.hasClass("layui-hide")) {
|
||||
_that.removeClass('layui-hide');
|
||||
} else {
|
||||
_that.addClass('layui-hide');
|
||||
var layoutElemId = 'layout-list-option-' + tableId;
|
||||
var layoutElemIdName = '#' + layoutElemId;
|
||||
|
||||
var currentLayout = admin.getPageSetting('table-layout-default', 'table');
|
||||
|
||||
// 构建下拉选择
|
||||
var layoutHtml = '<div id="' + layoutElemId + '" class="ul-nav-block table-tpl-container">';
|
||||
|
||||
options.layoutList.forEach(item => {
|
||||
var currentClassName = '';
|
||||
if (item.name == currentLayout) {
|
||||
currentClassName = 'current';
|
||||
}
|
||||
layoutHtml += `
|
||||
<div class="item ${currentClassName}" data-name="${item.name}">
|
||||
<div class="item-icon"><i class="${item.icon}"></i></div>
|
||||
<div class="item-title">${item.title}</div>
|
||||
</div>`;
|
||||
});
|
||||
|
||||
layoutHtml += '</div>';
|
||||
|
||||
var toolbarLayoutElem = $('[lay-table-id="' + tableId + '"]').find('[lay-event="TABLE_LAYOUT"]');
|
||||
if (toolbarLayoutElem.find(layoutElemIdName).length > 0) {
|
||||
// If it is, remove the HTML
|
||||
$(layoutElemIdName).remove();
|
||||
}
|
||||
layoulElem = $(layoutHtml);
|
||||
layoulElem.appendTo(toolbarLayoutElem);
|
||||
|
||||
|
||||
layoulElem.on('click', function (event) {
|
||||
|
||||
var item = $(event.target).closest('.item');
|
||||
if (item.length > 0) {
|
||||
// 点击操作
|
||||
item.addClass('current').siblings().removeClass('current');
|
||||
|
||||
var layoutName = item.data('name');
|
||||
admin.setPageSetting('table-layout-default', layoutName);
|
||||
|
||||
table.reloadData(tableId, {}, true);
|
||||
} else {
|
||||
// 其他区域操作
|
||||
}
|
||||
|
||||
// 不要冒泡
|
||||
event.stopPropagation();
|
||||
});
|
||||
|
||||
// Remove any existing click event listeners to avoid duplicates
|
||||
$(document).off('click.table-layout').on('click.table-layout', function (event) {
|
||||
|
||||
if (!$(event.target).closest(toolbarLayoutElem).length) {
|
||||
// If it is, remove the HTML
|
||||
$(layoutElemIdName).remove();
|
||||
}
|
||||
});
|
||||
break;
|
||||
}
|
||||
});
|
||||
@@ -2671,8 +2888,39 @@
|
||||
pwd += $chars.charAt(Math.floor(Math.random() * maxPos));
|
||||
}
|
||||
return pwd;
|
||||
},
|
||||
getPageSetting(key, defaultValue, global = false) {
|
||||
if (!global) {
|
||||
key = window.CONFIG.PAGE_KEY_NAME + '_' + key;
|
||||
}
|
||||
return tools.getLocal(key, defaultValue);
|
||||
},
|
||||
setPageSetting(key, value, global) {
|
||||
if (!global) {
|
||||
key = window.CONFIG.PAGE_KEY_NAME + '_' + key;
|
||||
}
|
||||
return tools.setLocal(key, value);
|
||||
},
|
||||
/**
|
||||
* 如果不存在则写入,返回有效的值
|
||||
* 如果不存在则返回新的值,否则返回之前设置的值
|
||||
*
|
||||
* @param {string} key
|
||||
* @param {mixed} value
|
||||
* @param {boolean} global
|
||||
* @returns
|
||||
*/
|
||||
trySetPageSetting(key, value, global) {
|
||||
var oldValue = admin.getPageSetting(key, undefined, global);
|
||||
if (!oldValue) {
|
||||
admin.setPageSetting(key, value, global);
|
||||
return value;
|
||||
}
|
||||
|
||||
return oldValue;
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
window.ulAdmin = window.ua = admin;
|
||||
})();
|
||||
Reference in New Issue
Block a user