/**
|
* Created by weidy on 2018/5/3. 主页，与vciWebPortal的区别是，portal是整个架构，这个是其中的主页
|
*/
|
layui.define(['layer'],function(exports){
|
/**
|
* 与之前easyui的portal，或者extjs的portal有区别的地方是，这个主页里的挂件不支持拖拽
|
* 实现方式也相同，先确定有多少列，然后显示每列中的挂件
|
* 主页通常一个系统只有一个，因此这里不再添加filter的方式
|
*/
|
var Home = function(){
|
this.styleConfig = {
|
filter:'layui-index-home',
|
padding:'5px',//每个元素之间的间隙
|
colspace:15//每一列的偏移量,支持1,3,5,8,10,12,15,18,20,22,28,30;也可以在layui.css里定义
|
};
|
this.config = {
|
requestDataType:'ajax',//请求数据的类型，提供ajax,data两种，data表示直接设置列
|
ajaxUrl:'',//异步请求的路径
|
ajaxWhere:{},//异步请求的附加属性
|
backDefineColumns:12//后台定义的列是按12份还是10份的；10份是为了兼容以前的平台
|
};
|
this.backPath = configData.compatibility?path:configData.frameworkPath;
|
this.MOUDLENAME = "vciWebPortalHome";
|
this.data = [];//如果是数据的时候
|
this.columns = [];//最终获取到列的信息
|
this.needInitItem = [];
|
this.tabItems = {};
|
};
|
Home.prototype.setConfig = function(config){
|
var that = this;
|
$.extend(that.config,config);
|
};
|
Home.prototype.setData = function(data){
|
var that = this;
|
that.data = data;
|
};
|
Home.prototype.getContent = function(){
|
//获取初始的html，用于兼容portal中的选项卡打开
|
var that = this;
|
return '<div class="layui-index-home layui-fluid" style="padding:' + that.styleConfig.padding +';overflow:hidden;" layui-filter="' + that.styleConfig.filter + '"></div> ';
|
};
|
Home.prototype.init = function(){
|
var that = this;
|
//先判断是哪种方式
|
if('ajax' == that.config.requestDataType.toLowerCase()){
|
//异步请求方式
|
//服务端必须返回的是JSON对象格式，JSON对象包含success,msg,obj属性
|
if(layui.util.isNull(that.config.ajaxUrl)){
|
$webUtil.showErrorMsg("ajaxUrl没有设置值");
|
return false;
|
}
|
$webUtil.post(that.config.ajaxUrl,that.config.ajaxWhere,function(result){
|
if(result.success){
|
that.columns =result.obj;
|
that.showColumns();
|
}else{
|
$webUtil.showErrorMsg(result.msg);
|
}
|
},function(xhr,error){},that.backPath,false);
|
}else{
|
//直接设置数据
|
that.columns = that.data;
|
that.showColumns();
|
}
|
};
|
Home.prototype.showColumns = function(){
|
//显示列
|
var that = this,root = $('[layui-filter="' + that.styleConfig.filter + '"]');
|
//先添加一个完成的行
|
var row = $('<div class="layui-row layui-col-space' + that.styleConfig.colspace + '"></div>');
|
root.html(row);
|
var colHtml = "";
|
layui.each(that.columns,function(_index,record){
|
/***
|
* layui原生支持了将一行的内容切分成了12份，而不是常规的10份。主要是其适配平板，手机和桌面
|
* width--宽度，最大为backDefineColumns
|
* 高度是自动的，不能设置,是在具体的挂件里设置的
|
* id--列的主键
|
* portlets 里面的挂件
|
*/
|
if(layui.util.isNull(record.id)) {
|
record.id = layui.util.uuid();
|
}
|
if(that.config.backDefineColumns == 10){//如果后台是按10来设置的，那得转化一下
|
record.width = Math.ceil(record.width*1/10*12);//向上进1
|
}
|
colHtml += that.getColumnHtml(record);
|
});
|
row.html(colHtml);
|
that.initItems();
|
that.bindListeners();
|
try{
|
if(respond){//IE9下刷新格栅
|
respond.update();
|
}
|
}catch (e){
|
|
}
|
};
|
Home.prototype.getColumnHtml = function(column){
|
var that = this;
|
var html = "";
|
if(layui.util.isNull(column.id)) {
|
column.id = layui.util.uuid();
|
}
|
if(that.config.backDefineColumns == 10){//如果后台是按10来设置的，那得转化一下
|
column.width = Math.ceil(column.width*1/10*12);//向上进1
|
}
|
html += '<div class="layui-col-md' + column.width*1 + '" layui-index-home-data-id="' + column.id + '">';
|
if(column.children && column.children.length>0){
|
//说明还包含了子列的
|
html += '<div class="layui-row layui-col-space' + that.styleConfig.colspace +'">';
|
layui.each(column.children,function(_index,child){
|
if(child.enable) {
|
html += that.getColumnHtml(child);
|
}
|
});
|
html += '</div>';
|
}else if(column.portlets && column.portlets.length >0){
|
//说明直接显示挂件了
|
html += that.getPortletHtml(column.portlets) ;
|
}
|
html += '</div>';
|
return html;
|
};
|
Home.prototype.getPortletHtml = function(portlets){
|
var that = this;
|
/**
|
* 获取挂件的html
|
* portlet
|
*/
|
var html = "";
|
if(portlets){
|
layui.each(portlets,function(_index,record){
|
/**
|
* id 每一个挂件的主键
|
* title 挂件的名称
|
* type 挂件的类型 card,tab
|
* centerUrl 跳转到功能的url
|
* info 提示信息
|
* items 具体展示的对象
|
*/
|
if(layui.util.isNull(record.id)) {
|
record.id = layui.util.uuid();
|
}
|
html += '<div class="layui-card" layui-index-home-data-id="' + record.id + '">';
|
if('tab'!= record.type){
|
//不是选项卡的，都是按card来执行
|
html += '<div class="layui-card-header">' + record.title ;
|
if(layui.util.isNotNull(record.centerUrl)){
|
html +='<i class="layui-icon layui-icon-release layui-vci-portlet-center " lay-center-url="' + record.centerUrl + '" lay-center-id="' + record.id + '" lay-center-title="'+ record.title + '" ></i>';
|
}
|
if(layui.util.isNotNull(record.info)){
|
html += '<i class="layui-icon layui-icon-tips" lay-tips="' + record.info +'" ></i>';
|
}//标题
|
html += '</div>';
|
|
html += '<div class="layui-card-body ' ;//主体
|
html += ($webUtil.isNotNull(record.customClass)? record.customClass : '') + ' "';//自定义类
|
html += ($webUtil.isNotNull(record.customStyle) ? (' style="' + record.customStyle + '" ') : ''); //自定义样式
|
html += '>';
|
//轮播和card都只有一个item
|
if(record.items && record.items.length >0){
|
/**
|
* item对象
|
* id 主键
|
* title 名称，用于具体的操作
|
* type 类型 layui,url,
|
* url
|
*/
|
if("url" == record.type){
|
html += '<iframe src="' + record.item[0].url + '"></iframe>';
|
}else{
|
var sourceData = {};
|
var url = record.items[0].url;
|
if($webUtil.isNotNull(url)) {
|
if (url.indexOf("?") > -1) {
|
var params = url.substring(url.indexOf("?") + 1);
|
url = url.substring(0, url.indexOf("?"));
|
var paramsArray = params.split("&");
|
for (var i = 0; i < paramsArray.length; i++) {
|
var preParam = paramsArray[i].split("=");
|
sourceData[preParam[0]] = preParam[1];
|
}
|
}
|
that.needInitItem.push({parentId: record.id, items: record.items[0]});
|
}
|
}
|
}
|
html += '</div>';
|
}else{
|
html += '<div class="layui-tab layui-tab-brief" layui-filter="' + record.id +'"></div>';
|
that.tabItems[record.id] = record.items;
|
}
|
html += '</div>';
|
});
|
}
|
return html;
|
};
|
Home.prototype.initItems = function(){
|
var that = this;
|
if(that.needInitItem && that.needInitItem.length > 0){
|
layui.each( that.needInitItem,function(_index,record){
|
var sourceData = {};
|
var url = record.items.url;
|
if($webUtil.isNotNull(url)){
|
if(url.indexOf("?") > -1){
|
var params = url.substring(url.indexOf("?")+1);
|
url = url.substring(0,url.indexOf("?"));
|
var paramsArray = params.split("&");
|
for(var i = 0 ; i < paramsArray.length ; i ++){
|
var preParam =paramsArray[i].split("=");
|
sourceData[preParam[0]] = preParam[1];
|
}
|
}
|
layui.use([url],function(){
|
var newTabClass = layui[url];
|
newTabClass.id = record.items.id;
|
newTabClass.sourceData = sourceData;
|
$('[layui-index-home-data-id="' + record.parentId + '"] .layui-card-body').append(newTabClass.getContent());
|
newTabClass.init();
|
});
|
}
|
});
|
}
|
if(that.tabItems){
|
var element = layui.element;
|
for(var tabId in that.tabItems){
|
var record = that.tabItems[tabId];
|
layui.each(record,function(_itemIndex,_item){
|
var sourceData = {};
|
var url =_item.url;
|
if($webUtil.isNotNull(url)){
|
if(url.indexOf("?") > -1) {
|
var params = url.substring(url.indexOf("?") + 1);
|
url = url.substring(0, url.indexOf("?"));
|
var paramsArray = params.split("&");
|
for (var i = 0; i < paramsArray.length; i++) {
|
var preParam = paramsArray[i].split("=");
|
sourceData[preParam[0]] = preParam[1];
|
}
|
}
|
layui.use([url],function(){
|
var newTabClass = layui[url];
|
newTabClass.id = item.id;
|
newTabClass.sourceData = sourceData;
|
element.tabAdd(tabId, {
|
title:_item.title,
|
id:_item.id,
|
item:newTabClass
|
});
|
});
|
}
|
});
|
}
|
}
|
};
|
Home.prototype.bindListeners = function(){
|
var that = this;
|
$(".layui-vci-portlet-center").click(function(){
|
var thisIcon = $(this);
|
var id = thisIcon.attr("lay-center-id");
|
var title = thisIcon.attr("lay-center-title");
|
var url = thisIcon.attr("lay-center-url");
|
portal.showTabByMenu(id,{
|
id:id,
|
text:title,
|
bsUrl:url
|
});
|
});
|
};
|
var home = new Home();
|
exports(home.MOUDLENAME,home);
|
});
|
