/**
* laytp极速后台框架layUI的js扩展，后台界面使用
* @version: 2.0
* @Author: JunStar
* @Date: 2018年09月20日11:47:00
* @Last Modified by: JunStar
* @Last Modified time: 2021-09-22 17:19:40
*/
layui.define([
"facade", // 助手函数
"laytpForm", // 表单元素组件
"laytpDropdown", // 数据表格顶部批量操作下拉组件
"laytpTable", // 数据表格处理完成后需要执行的操作组件
"button", // 按钮点击过渡效果组件
"drawer", // 抽屉组件
"react", // 模拟react的响应式组件，允许注册一些数据，方法，钩子并提供简单的响应式
], function (exports) {
const MOD_NAME = "laytp";
let $ = layui.jquery
, facade = layui.facade
, laytp = {}
;
window.$ = $;
//数据表格，格式化展示数据
laytp.tableFormatter = {
custom: ["#FF5722", "#009688", "#FFB800", "#2F4056", "#1E9FFF", "#393D49", "#999999", "#0b1bf8", "#7a0bf8", "#f00bf8", "#5FB878", "#1E9FFF", "#2F4056"],
status: function (field, value, json, isTreeTable) {
let customIndex = 0, key;
if (value) {
for (key in json['value']) {
if (value.toString() === json['value'][key].toString()) {
if (isTreeTable) {
return '' + json['text'][key] + '';
} else {
return '' + json['text'][key] + '';
}
}
customIndex++;
}
}
return '';
},
colorPicker: function (value) {
return " \n\t\t\t";
},
//form_type=checkbox
flag: function (value, dataList) {
let html = '';
let customIndex = 0, key, v;
let valueArr = value.toString().split(',');
for (key in dataList.value) {
for (v in valueArr) {
if (valueArr[v].toString() === dataList.value[key].toString()) {
customIndex = key % laytp.tableFormatter.custom.length;
html += '' + dataList.text[key] + '';
}
}
}
return html;
},
images: function (value) {
let html = "";
if (value) {
let valueArr = value.split(", "), key;
for (key in valueArr) {
html += '
';
}
}
return html;
},
showImage: function (url) {
layui.facade.popupDiv({
title: '查看图片',
path: "/admin/showImage.html?img_url=" + window.btoa(url)
});
},
video: function (value) {
let html = '';
if (value) {
let i = 1;
let valueArr = value.split(','), key;
for (key in valueArr) {
html += '视频' + i + ' ';
i++;
}
}
return html;
},
showVideo: function (url) {
layui.facade.popupDiv({
title: '查看视频',
path: "/admin/showVideo.html?video_url=" + window.btoa(url)
});
},
audio: function (value) {
let html = '';
if (value) {
let i = 1;
let valueArr = value.split(','), key;
for (key in valueArr) {
html += '音频' + i + ' ';
i++;
}
}
return html;
},
showAudio: function (url) {
layui.facade.popupDiv({
title: '查看音频',
path: "/admin/showAudio.html?audio_url=" + window.btoa(url)
});
},
file: function (value) {
let html = '';
if (value) {
let i = 1;
let valueArr = value.split(','), key;
for (key in valueArr) {
html += '文件' + i + ' ';
i++;
}
}
return html;
},
};
/**
* 监听数据表格顶部左侧默认按钮点击事件
*/
laytp.tableToolbar = function (obj, isTreeTable) {
// 窗口句柄
let indexes = [];
if (obj.event === "add") {
let options = {};
options.title = "添 加";
options.path = facade.compatibleHtmlPath(window.htmlPrefix) + "add.html";
indexes.push(facade.popupDiv(options));
} else if (obj.event === "edit") {
let checkData, checkStatus;
if (isTreeTable) {
checkStatus = layui.treeTable.checkStatus(obj.config.id);
} else {
checkStatus = layui.table.checkStatus(obj.config.id);
}
checkData = checkStatus.data;
if (checkData.length === 0) {
facade.error("请选择数据");
return false;
}
if (checkData.length >= 30) {
facade.error("选择数据量过多，最多选择30条数据，总共选择了" + checkData.length + "条数据");
return false;
}
let key;
for (key in checkData) {
indexes.push(facade.popupDiv({
title: "编辑",
path: facade.compatibleHtmlPath(window.htmlPrefix) + "edit.html?id=" + checkData[key].id
}));
}
} else if (obj.event === "del") {
let checkData, checkStatus;
if (isTreeTable) {
checkStatus = layui.treeTable.checkStatus(obj.config.id);
} else {
checkStatus = layui.table.checkStatus(obj.config.id);
}
checkData = checkStatus.data;
if (checkData.length === 0) {
facade.error("请选择数据");
return false;
}
let ids = [];
let key;
for (key in checkData) {
ids.push(checkData[key].id);
}
if (isTreeTable) {
facade.popupConfirm({ text: "确定删除么?", route: window.apiPrefix + "del", data: { ids: ids } }, function (res) {
if (res.code === 0) {
if (typeof obj.del === "function") {
obj.del();
} else {
funController.tableRender();
}
}
});
} else {
facade.popupConfirm({ text: "确定删除么?", route: window.apiPrefix + "del", data: { ids: ids } });
}
} else if (obj.event === "search") {
layui.drawer.open({
direction: "right",
dom: "#search-form",
distance: "70%",
success: function (d) {
var windowHeight = d.height;
var height = parseInt(windowHeight) - 115;
$(".search-form-body").css("height", height + 'px');
$(".search-form-body").css("max-height", height + 'px');
$(".search-form-body").css("overflow-y", "auto");
}
});
} else if (obj.event === "recycle-search") {
layui.drawer.open({
direction: "right",
dom: "#recycle-search-form",
distance: "70%",
success: function (d) {
var windowHeight = d.height;
var height = parseInt(windowHeight) - 115;
$(".search-form-body").css("height", height + 'px');
$(".search-form-body").css("max-height", height + 'px');
$(".search-form-body").css("overflow-y", "auto");
}
});
} else if (obj.event === "recycle") {
let options = {};
options.title = "回收站";
options.path = facade.compatibleHtmlPath(window.htmlPrefix) + "recycle.html";
options.offset = "auto";
options.width = facade.isMobile() ? '100%' : '90%';
options.height = facade.isMobile() ? '100%' : '90%';
options.anim = 2;
indexes.push(facade.popupDiv(options));
} else if (obj.event === "restore") {
let checkData, checkStatus;
if (isTreeTable) {
checkStatus = layui.treeTable.checkStatus(obj.config.id);
} else {
checkStatus = layui.table.checkStatus(obj.config.id);
}
checkData = checkStatus.data;
if (checkData.length === 0) {
facade.error("请选择数据");
return false;
}
let key;
let ids = [];
for (key in checkData) {
ids.push(checkData[key].id);
}
facade.ajax({
route: window.apiPrefix + "restore",
data: { ids: ids },
showLoading: true
}).done(function (res) {
if (res.code === 0) {
parent.funController.tableRender();
funRecycleController.tableRender();
}
});
} else if (obj.event === "true-del") {
let checkData, checkStatus;
if (isTreeTable) {
checkStatus = layui.treeTable.checkStatus(obj.config.id);
} else {
checkStatus = layui.table.checkStatus(obj.config.id);
}
checkData = checkStatus.data;
if (checkData.length === 0) {
facade.error("请选择数据");
return false;
}
let key;
let ids = [];
for (key in checkData) {
ids.push(checkData[key].id);
}
facade.popupConfirm({
text: "真的在回收站删除么？此次删除将不能还原",
route: window.apiPrefix + "trueDel",
data: { ids: ids }
});
} else if (obj.event === "refresh") {
if (typeof funController !== "undefined") {
funController.tableRender(layui.form.val("layui-form"), $(".layui-laypage-em").next().html());
}
} else if (obj.event === "recycle-refresh") {
if (typeof funRecycleController !== "undefined") {
funRecycleController.tableRender(layui.form.val("layui-form"), $(".layui-laypage-em").next().html());
}
}
// 返回窗口句柄
if (indexes.length === 1) return indexes.pop();
else return [...indexes];
};
/**
* 监听数据表格操作列，默认按钮点击事件
*/
laytp.tableTool = function (obj, isTreeTable) {
let indexes = [];
if (obj.event === "del") {
if (isTreeTable) {
facade.popupConfirm({ text: "真的删除么?", route: window.apiPrefix + "del", data: { ids: [obj.data.id] } }, function (res) {
if (res.code === 0) {
obj.del();
}
});
} else {
facade.popupConfirm({ text: "真的删除么?", route: window.apiPrefix + "del", data: { ids: [obj.data.id] } });
}
} else if (obj.event === "edit") {
let options = {};
options.title = "编 辑";
options.path = facade.compatibleHtmlPath(window.htmlPrefix) + "edit.html?id=" + obj.data.id;
indexes.push(facade.popupDiv(options));
} else if (obj.event === "restore") {
facade.ajax({ route: window.apiPrefix + "restore", data: { ids: [obj.data.id] } }).done(function (res) {
if (res.code === 0) {
parent.funController.tableRender();
funRecycleController.tableRender();
}
});
} else if (obj.event === "true-del") {
facade.popupConfirm({
text: "真的在回收站删除么？此次删除将不能还原",
route: window.apiPrefix + "trueDel",
data: { ids: [obj.data.id] }
});
}
if (indexes.length === 1) return indexes.pop();
else return indexes;
};
//初始化
laytp.init = {
/**
* 全局ajax设置
* - 设置默认的headers
* - ajax过度效果设置
*/
ajaxSet: function () {
let commonHeaders = {
"LayTp-Admin-Token": facade.getCookie("laytpAdminToken"),
"Cache-Control": "no-cache"
};
$.ajaxSetup({
timeout: 30000,
headers: commonHeaders,
});
},
/**
* 点击按钮弹出表单层
* 所有拥有popupDiv类名的节点，点击后都会弹出层
* data-name 弹窗标题，默认为当前节点的html()
* data-url 必填,弹窗展示的静态文件url
* data-btn 弹出层底部按钮，只有两种设置方式，1.不设置，表示弹出一个表单，底部展示['确定','取消']两个按钮，点击确定按钮可以提交表单。2.设置为空字符串，表示弹出一个非表单层，仅展示页面，底部没有按钮，其他复杂的弹出层，比如有三个或者三个以上按钮，请自行编写JS实现
* data-width 属性为弹窗的宽度百分比，非必填，默认值在/a/index.html中设置
* data-height 属性为弹窗的高度百分比，非必填，默认值在/a/index.html中设置
* data-shade 属性为弹窗背景阴影，非必填，默认值在/a/index.html中设置
*/
popupDiv: function () {
$(document).off("click", ".popupDiv").on("click", ".popupDiv", function () {
let options = {};
options.title = $(this).data("title") ? $(this).data("title") : $(this).html();
options.shade = $(this).data("shade");
if (!options.shade) options.shade = 0.01;
options.width = $(this).data("width");
options.height = $(this).data("height");
options.path = $(this).data("url");
facade.popupDiv(options);
});
},
/**
* 点击按钮打开新的tab menu
* 所有拥有tabMenu类名的节点，点击后都会打开新的tab menu
* data-id 菜单ID，用于菜单自动选中
* data-url 必填,弹窗展示的静态文件url
* data-title tab菜单的名称
*/
openTabMenu: function () {
$(document).off("click", ".openTabMenu").on("click", ".openTabMenu", function () {
if (parent.config.tab.muiltTab) {
parent.bodyTab.addTabOnly({
id: $(this).data("id"),
title: $(this).data("title"),
url: $(this).data("url"),
icon: "",
close: true
}, 300);
} else {
parent.bodyFrame.changePage($(this).data("url"), "", true);
}
});
},
/**
* 监听拥有laytpClickSearch样式的节点，点击进行表单搜索
*/
laytpClickSearch: function () {
$(document).off("click", ".laytpClickSearch").on("click", ".laytpClickSearch", function () {
let field = $(this).data('field');
if (!field) facade.error("tab的字段名未定义");
let value = $(this).data('val');
$("#" + field).val(value);
layui.form.render('select');
$("button[lay-filter=laytp-search-form]").click();
$("button[lay-filter=laytp-recycle-search-form]").click();
});
},
/**
* 监听.delArrayItem节点，删除表格中的一行
* .delArrayItem节点存在的位置举例：系统配置，数组类型配置，删除某一个数组元素
*/
delArrayItem: function () {
$(document).off("click", ".delArrayItem").on('click', '.delArrayItem', function () {
let clickObj = $(this);
let childrenLength = clickObj.parent().parent().parent().children().length;
if (childrenLength > 2) {
clickObj.parent().parent().remove();
} else {
facade.error('请留下这唯一的一行数据');
}
});
},
/**
* 监听.addArrayItem节点，追加表格中的一行
* .addArrayItem节点存在的位置举例：系统配置，数组类型配置，追加一个数组元素
*/
addArrayItem: function () {
$(document).off("click", ".addArrayItem").on('click', '.addArrayItem', function () {
let clickObj = $(this);
var itemHtml = clickObj.parent().parent().prev().prop("outerHTML");
clickObj.parent().parent().before(itemHtml);
layui.form.render();
layui.laytp.init.tableDnd();
});
},
/**
* 监听.tableDnd节点，允许拖动排序
* .tableDnd节点存在的位置举例：系统配置，数组类型配置，拖动排序数组元素
*
* 要求
* - 页面上要加载jquery_3.3.1.js和jquery.tablednd.js两个js库
* - table的class要加上tableDnd
*
* 注意
* - 使用任意layui.js不存在的第三方jQuery库都需要加载
* ```
* /static/component/jquery_3.3.1.js
* ```
* - 然后再加载第三方jQuery库，比如当前是表格排序库
* ```
* /static/component/jquery.tablednd.js
* ```
* - 且一定要注意加载顺序，layui.js要优先加载，否则layui可能会报错
* - 先加载layui.js
* - 然后加载layuiConfig.js
* - 再加载jquery_3.3.1.js
* - 最后加载第三方jQuery库jquery.tablednd.js
*/
tableDnd: function () {
layui.each($(".tableDnd"), function (key, item) {
$(item).tableDnD({});
});
},
/**
* 监听拥有layerTips样式的节点，渲染layerTips组件
* data-color 弹窗背景颜色
* data-time 弹窗展示时间，单位秒
* data-text 弹窗内文本
*/
layerTips: function () {
var tipsIndex;
// 鼠标进入层就展示Tips
$(document).off('mouseover', '.layerTips').on('mouseover', '.layerTips', function () {
let obj = $(this);
let color = (typeof obj.data('color') != 'undefined') ? obj.data('color') : '#3595CC';
let time = (typeof obj.data('time') != 'undefined') ? obj.data('time') : 5000;
let text = $(this).data('text');
tipsIndex = layui.layer.tips(text, this, {
tips: [4, color]
, time: time
});
});
// 鼠标离开层就关闭Tips
$(document).off('mouseout', '.layerTips').on('mouseout', '.layerTips', function () {
layui.layer.close(tipsIndex);
});
},
/**
* 监听拥有layerImgTips样式的节点，渲染layerImgTips组件
* data-time 弹窗展示时间，单位秒
* data-text 弹窗内文本
*/
layerImgTips: function () {
var tipsIndex;
// 鼠标进入层就展示Tips
$(document).off('mouseover', '.layerImgTips').on('mouseover', '.layerImgTips', function (e) {
let position = 2;
if (e.screenY > (window.screen.height) / 2) {
position = 1
}
let obj = $(this);
let time = (typeof obj.data('time') != 'undefined') ? obj.data('time') : 5000;
var img = "![](" + $(this).attr()
";
tipsIndex = layui.layer.tips(img, this, {
tips: [position]
, time: time
, area: ['300px']
, skin: "laytpLayerImgTips"
});
});
// 鼠标离开层就关闭Tips
$(document).off('mouseout', '.layerImgTips').on('mouseout', '.layerImgTips', function () {
layui.layer.close(tipsIndex);
});
},
//锁屏
lockScreen: function () {
let lockScreenStatus = localStorage.getItem("laytpLockScreen");
$(document).ready(function () {
if (lockScreenStatus === "locked") {
layui.facade.popupDiv({
title: '锁屏',
path: '/admin/lockScreen.html',
shade: 0.5
});
}
});
$(document).on('click', '#lockScreen', function () {
layui.layer.confirm('锁屏后，需要使用登录密码解锁，确定锁屏么?', { title: "锁屏确认继续", skin: "laytp" }, function (index) {
layui.layer.close(index);
localStorage.setItem("laytpLockScreen", "locked");
layui.facade.popupDiv({
title: '锁屏',
path: '/admin/lockScreen.html',
shade: 0.5
});
});
});
},
};
layui.each(laytp.init, function (key, item) {
if (typeof item === "function") {
item();
}
});
layui.laytpForm.render();
//输出模块
exports(MOD_NAME, laytp);
layui.laytp = laytp;
window.laytp = laytp;
window.$ = $;
});