//视图路由
|
layui
|
.extend({
|
loadBar: 'lay/modules/loadBar',
|
dropdown: 'lay/modules/dropdown'
|
})
|
.define(
|
['jquery', 'laytpl', 'element', 'form', 'loadBar', 'dropdown'],
|
function (exports) {
|
var $ = layui.jquery;
|
var laytpl = layui.laytpl;
|
var conf = layui.conf;
|
conf.viewTabs = currentUser.isTab === '1';
|
var loadBar = layui.loadBar;
|
var self = {
|
ie8:
|
navigator.appName === 'Microsoft Internet Explorer' &&
|
navigator.appVersion.split(';')[1].replace(/[ ]/g, '') === 'MSIE8.0',
|
container: $('#' + conf.container),
|
containerBody: null
|
};
|
self.loadBar = loadBar;
|
/**
|
* 字符串是否含有html标签的检测
|
* @param htmlStr
|
*/
|
self.checkHtml = function (htmlStr) {
|
var reg = /<[^>]+>/g;
|
return reg.test(htmlStr)
|
};
|
self.parse = function (container) {
|
if (container === undefined) container = self.containerBody;
|
var template =
|
container.get(0).tagName === 'SCRIPT'
|
? container
|
: container.find('[template]');
|
|
var renderTemplate = function (template, data, callback) {
|
laytpl(template.html()).render(data, function (html) {
|
try {
|
html = $(
|
self.checkHtml(html) ? html : '<span>' + html + '</span>'
|
)
|
} catch (err) {
|
html = $('<span>' + html + '</span>')
|
}
|
|
html.attr('is-template', true);
|
template.after(html);
|
if ($.isFunction(callback)) callback(html)
|
})
|
};
|
|
layui.each(template, function (index, t) {
|
var tem = $(t);
|
var url = tem.attr('lay-url') || '';
|
var api = tem.attr('lay-api') || '';
|
var type = tem.attr('lay-type') || 'get';
|
var data = new Function('return ' + tem.attr('lay-data'))();
|
var done = tem.attr('lay-done') || '';
|
|
if (url || api) {
|
//进行AJAX请求
|
self.request({
|
url: url,
|
api: api,
|
type: type,
|
data: data,
|
success: function (res) {
|
templateData = data;
|
renderTemplate(tem, res.data);
|
if (done) new Function(done)()
|
}
|
})
|
} else {
|
renderTemplate(
|
tem,
|
{},
|
self.ie8
|
? function (elem) {
|
if (elem[0] && elem[0].tagName !== 'LINK') return;
|
container.hide();
|
elem.load(function () {
|
container.show()
|
})
|
}
|
: null
|
);
|
if (done) new Function(done)()
|
}
|
})
|
};
|
self.loading = function (elem) {
|
elem.append(
|
(this.elemLoad = $(
|
'<i class="layui-anim layui-anim-rotate layui-anim-loop layui-icon layui-icon-loading febs-loading"></i>'
|
))
|
)
|
};
|
self.loadend = function () {
|
this.elemLoad && this.elemLoad.remove()
|
};
|
|
self.setTitle = function (title) {
|
$(document).attr({title: title + ' - ' + conf.name})
|
};
|
self.clear = function () {
|
self.containerBody.html('')
|
};
|
|
self.modal = {};
|
|
self.modal.base = function (msg, params) {
|
params = params || {};
|
params.titleIcoColor = params.titleIcoColor || '#5a8bff';
|
params.titleIco = params.titleIco || 'exclaimination';
|
params.title = params.title || [
|
'<i class="layui-icon layui-icon-' +
|
params.titleIco +
|
'" style="font-size:12px;background:' +
|
params.titleIcoColor +
|
';display:inline-block;position:relative;top:-2px;height:21px;line-height:21px;text-align:center;width:21px;color:#fff;border-radius:50%;margin-right:12px;"></i>' +
|
params.titleValue,
|
'background:#fff;border:none;font-weight:bold;font-size:16px;color:#08132b;padding-top:20px;height:36px;line-height:46px;padding-bottom:0;'
|
];
|
params = $.extend(
|
{
|
skin: 'layui-layer-admin-modal febs-alert',
|
area: [$(window).width() <= 750 ? '60%' : '400px'],
|
closeBtn: 0,
|
shadeClose: false
|
},
|
params
|
);
|
layer.alert(msg, params);
|
};
|
|
self.notify = function (title, msg, yes, params) {
|
params = params || {};
|
params.titleIco = 'exclaimination';
|
params.titleIcoColor = '#ffc107';
|
params.titleValue = title;
|
params.shadeClose = false;
|
params = $.extend({
|
btn: ['确定']
|
, yes: function (index, layero) {
|
yes && (yes)();
|
layer.close(index);
|
}
|
}, params);
|
self.modal.base(msg, params);
|
};
|
|
self.loadHtml = function (url, callback) {
|
url = url || conf.entry;
|
loadBar.start();
|
var queryIndex = url.indexOf('?');
|
if (queryIndex !== -1) url = url.slice(0, queryIndex);
|
$.ajax({
|
url:
|
(url.indexOf(conf.base) === 0 ? '' : conf.views) +
|
url +
|
conf.engine +
|
'?v=' +
|
conf.v,
|
type: 'get',
|
data: {
|
'invalid_ie_cache': new Date().getTime()
|
},
|
dataType: 'html',
|
success: function (r) {
|
var result;
|
try {
|
result = JSON.parse(r);
|
} catch (e) {
|
result = {'code': 'err'};
|
}
|
if (result.code === 401) {
|
self.notify('登录失效', '登录已失效，请重新登录', function () {
|
window.location.reload();
|
window.location.hash = '';
|
});
|
loadBar.finish();
|
return;
|
}
|
if (result.code === 403) {
|
self.tab.change('/403');
|
loadBar.finish();
|
return;
|
}
|
if (result.code === 404) {
|
self.tab.change('/404');
|
loadBar.finish();
|
return;
|
}
|
if (result.code === 500) {
|
self.tab.change('/500');
|
loadBar.finish();
|
return;
|
}
|
callback({html: r, url: url});
|
loadBar.finish()
|
},
|
error: function (res) {
|
if (res.status === 404) {
|
self.tab.change('/404');
|
}
|
if (res.status === 403) {
|
self.tab.change('/403');
|
}
|
if (res.status === 500) {
|
self.tab.change('/500');
|
}
|
self.log(
|
'请求视图文件异常\n文件路径：' + url + '\n状态：' + res.status
|
);
|
loadBar.error();
|
}
|
})
|
};
|
|
self.tab = {
|
isInit: false,
|
data: [],
|
tabMenuTplId: 'TPL-app-tabsmenu',
|
minLeft: null,
|
maxLeft: null,
|
wrap: '.febs-tabs-wrap',
|
menu: '.febs-tabs-menu',
|
next: '.febs-tabs-next',
|
prev: '.febs-tabs-prev',
|
step: 200,
|
init: function () {
|
var tab = this;
|
var btnCls = tab.wrap + ' .febs-tabs-btn';
|
|
layui.dropdown.render({
|
elem: '.febs-tabs-down',
|
click: function (name) {
|
if (name === 'all') {
|
tab.delAll();
|
}
|
if (name === 'other') {
|
tab.delOther();
|
}
|
if (name === 'current') {
|
tab.del(layui.febs.route.fileurl);
|
}
|
if (name === 'refresh') {
|
tab.refresh();
|
}
|
},
|
options: [
|
{
|
name: 'current',
|
title: '关闭当前选项卡'
|
},
|
{
|
name: 'other',
|
title: '关闭其他选项卡'
|
},
|
{
|
name: 'all',
|
title: '关闭所有选项卡'
|
},
|
{
|
name: 'refresh',
|
title: '刷新当前选项卡'
|
}
|
]
|
});
|
|
$(document).on('click', btnCls, function (e) {
|
var url = $(this).attr('lay-url');
|
if ($(e.target).hasClass('febs-tabs-close')) {
|
tab.del(url)
|
} else {
|
var type = $(this).attr('data-type');
|
if (type === 'page') {
|
tab.change(tab.has(url))
|
} else if (type === 'prev' || type === 'next') {
|
tab.menuElem = $(tab.menu);
|
var menu = tab.menuElem;
|
tab.minLeft = tab.minLeft || parseInt(menu.css('left'));
|
tab.maxLeft = tab.maxLeft || $(tab.next).offset().left;
|
|
var left = 0;
|
if (type === 'prev') {
|
left = parseInt(menu.css('left')) + tab.step;
|
if (left >= tab.minLeft) left = tab.minLeft
|
} else {
|
left = parseInt(menu.css('left')) - tab.step;
|
var last = menu.find('li:last');
|
if (last.offset().left + last.width() < tab.maxLeft) return
|
}
|
menu.css('left', left)
|
}
|
}
|
});
|
|
$('.febs-tabs-hidden').addClass('layui-show');
|
this.isInit = true
|
},
|
has: function (url) {
|
var exists = false;
|
layui.each(this.data, function (i, data) {
|
if (data.fileurl === url) return (exists = data)
|
});
|
return exists
|
},
|
delAll: function (type) {
|
var tab = this;
|
var menuBtnClas = tab.menu + ' .febs-tabs-btn';
|
$(menuBtnClas).each(function () {
|
var url = $(this).attr('lay-url');
|
if (url === conf.entry) return true;
|
tab.del(url)
|
})
|
},
|
delOther: function () {
|
var tab = this;
|
var menuBtnClas = tab.menu + ' .febs-tabs-btn';
|
$(menuBtnClas + '.febs-tabs-active')
|
.siblings()
|
.each(function () {
|
var url = $(this).attr('lay-url');
|
tab.del(url)
|
})
|
},
|
del: function (url, backgroundDel) {
|
var tab = this;
|
if (tab.data.length <= 1 && backgroundDel === undefined) return;
|
layui.each(tab.data, function (i, data) {
|
if (data.fileurl === url) {
|
tab.data.splice(i, 1);
|
return true
|
}
|
});
|
|
var lay = '[lay-url="' + url + '"]';
|
var thisBody = $(
|
'#' + conf.containerBody + ' > .febs-tabs-item' + lay
|
);
|
var thisMenu = $(this.menu).find(lay);
|
thisMenu.remove();
|
thisBody.remove();
|
|
if (backgroundDel === undefined) {
|
if (thisMenu.hasClass('febs-tabs-active')) {
|
$(this.menu + ' li:last').click()
|
}
|
}
|
},
|
refresh: function (url) {
|
url = url || layui.febs.route.fileurl;
|
if (this.has(url)) {
|
this.del(url, true);
|
self.renderTabs(url)
|
}
|
},
|
clear: function () {
|
this.data = [];
|
this.isInit = false;
|
$(document).off('click', this.wrap + ' .febs-tabs-btn')
|
},
|
change: function (route, callback) {
|
if (typeof route == 'string') {
|
route = layui.router('#' + route);
|
route.fileurl = '/' + route.path.join('/')
|
}
|
var fileurl = route.fileurl;
|
var tab = this;
|
if (tab.isInit === false) tab.init();
|
|
var changeView = function (lay) {
|
$('#' + conf.containerBody + ' > .febs-tabs-item' + lay)
|
.show()
|
.siblings()
|
.hide()
|
};
|
|
var lay = '[lay-url="' + fileurl + '"]';
|
|
var activeCls = 'febs-tabs-active';
|
|
var existsTab = tab.has(fileurl);
|
if (existsTab) {
|
var menu = $(this.menu);
|
var currentMenu = menu.find(lay);
|
|
if (existsTab.href !== route.href) {
|
tab.del(existsTab.fileurl, true);
|
tab.change(route);
|
return false
|
//tab.del(route.fileurl)
|
}
|
currentMenu
|
.addClass(activeCls)
|
.siblings()
|
.removeClass(activeCls);
|
|
changeView(lay);
|
|
this.minLeft = this.minLeft || parseInt(menu.css('left'));
|
|
var offsetLeft = currentMenu.offset().left;
|
if (offsetLeft - this.minLeft - $(this.next).width() < 0) {
|
$(this.prev).click()
|
} else if (offsetLeft - this.minLeft > menu.width() * 0.5) {
|
$(this.next).click()
|
}
|
$(document).scrollTop(-100);
|
|
layui.febs.navigate(route.href)
|
} else {
|
self.loadHtml(fileurl, function (res) {
|
var htmlElem = $(
|
"<div><div class='febs-tabs-item' lay-url='" +
|
fileurl +
|
"'>" +
|
res.html +
|
'</div></div>'
|
);
|
var params = self.fillHtml(fileurl, htmlElem, 'prepend');
|
route.title = params.title;
|
tab.data.push(route);
|
layui.febs.render(tab.tabMenuTplId);
|
|
var currentMenu = $(tab.menu + ' ' + lay);
|
currentMenu.addClass(activeCls);
|
|
changeView(lay);
|
|
if ($.isFunction(callback)) callback(params)
|
})
|
}
|
layui.febs.sidebarFocus(route.href);
|
return false
|
},
|
onChange: function () {
|
}
|
};
|
|
self.fillHtml = function (url, htmlElem, modeName) {
|
var fluid = htmlElem.find('.layui-fluid[lay-title]');
|
var title = '';
|
if (fluid.length > 0) {
|
title = fluid.attr('lay-title');
|
// self.setTitle(title)
|
}
|
|
var container = self.containerBody || self.container;
|
container[modeName](htmlElem.html());
|
if (modeName === 'prepend') {
|
self.parse(container.children('[lay-url="' + url + '"]'))
|
} else {
|
self.parse(container)
|
}
|
return {title: title, url: url, htmlElem: htmlElem}
|
};
|
//解析普通文件
|
self.render = function (fileurl, callback) {
|
self.loadHtml(fileurl, function (res) {
|
var htmlElem = $('<div>' + res.html + '</div>');
|
var params = self.fillHtml(res.url, htmlElem, 'html');
|
if ($.isFunction(callback)) callback(params)
|
})
|
};
|
//加载 tab
|
self.renderTabs = function (route, callback) {
|
var tab = self.tab;
|
tab.change(route, callback)
|
};
|
//加载layout文件
|
self.renderLayout = function (callback, url) {
|
if (url === undefined) url = 'layout';
|
self.containerBody = null;
|
|
self.render(url, function (res) {
|
self.containerBody = $('#' + conf.containerBody);
|
if (conf.viewTabs === true) {
|
self.containerBody.addClass('febs-tabs-body')
|
}
|
layui.febs.appBody = self.containerBody;
|
if ($.isFunction(callback)) callback()
|
})
|
};
|
//加载单页面
|
self.renderIndPage = function (fileurl, callback) {
|
self.renderLayout(function () {
|
self.containerBody = null;
|
if ($.isFunction(callback)) callback()
|
}, fileurl)
|
};
|
self.log = function (msg, type) {
|
if (conf.debug === false) return;
|
if (type === undefined) type = 'error';
|
console.error(msg)
|
};
|
self.createRequestParams = function (params) {
|
var success = params.success;
|
var error = params.error;
|
|
if (params.api) {
|
if (!layui.api[params.api]) {
|
self.log('请求错误 api.' + params.api + ' 不存在');
|
return
|
}
|
params.url = conf.requestUrl + layui.api[params.api]
|
} else if (params.url) {
|
params.url = conf.requestUrl + params.url
|
}
|
|
var defaultParams = {
|
timeout: 5000,
|
type: 'get',
|
dataType: 'json',
|
headers: conf.requestHeaders || {},
|
success: function (res) {
|
if ($.isFunction(success)) success(res)
|
},
|
error: function (res) {
|
if (res.status === conf.logoutHttpCode) {
|
// do nothing
|
} else {
|
layer.msg('请检查您的网络连接');
|
self.log('请检查您的网络连接，错误信息：' + JSON.stringify(res))
|
}
|
|
if ($.isFunction(error)) error(res)
|
}
|
};
|
|
if (self.ie8) {
|
if (conf.debug) $.support.cors = true;
|
defaultParams.cache = false
|
}
|
delete params.success;
|
delete params.error;
|
|
return $.extend(defaultParams, params)
|
};
|
self.request = function (params) {
|
params = self.createRequestParams(params);
|
$.ajax(params)
|
};
|
exports('view', self)
|
}
|
);
|
