beacon框架C与L的交互功能开发（L触发C）

syant

beacon框架C与L的交互功能开发（L触发C）
<button class="layui-btn layui-btn-normal layui-btn-sm data-add-btn" layuimini-content-href="S.php/bom/bomupload" data-title="新增BOM" data-icon="fa fa-search"> 新增BOM </button>


1、看L触发L的处理逻辑
搜索：layuimini-content-href

>>>>d:\project.syant\0005php\htdocs\wms\js\lay-module\layuimini\minitab.js<<<<<
            $('body').on('click', '[layuimini-content-href]', function () {

处理代码：

1. /**
   
2.              * 在iframe子菜单上打开新窗口
   
3.              */
   
4.             $('body').on('click', '[layuimini-content-href]', function () {
   
5.                 var loading = parent.layer.load(0, {shade: false, time: 2 * 1000});
   
6.                 var tabId = $(this).attr('layuimini-content-href'),
   
7.                     href = $(this).attr('layuimini-content-href'),
   
8.                     title = $(this).attr('data-title'),
   
9.                     target = $(this).attr('target');
   
10.                 if (target === '_blank') {
    
11.                     parent.layer.close(loading);
    
12.                     window.open(href, "_blank");
    
13.                     return false;
    
14.                 }
    
15.                 if (tabId === null || tabId === undefined) tabId = new Date().getTime();
    
16.                 var checkTab = miniTab.check(tabId, true);
    
17.                 if (!checkTab) {
    
18.                     miniTab.create({
    
19.                         tabId: tabId,
    
20.                         href: href,
    
21.                         title: title,
    
22.                         isIframe: true,
    
23.                         maxTabNum: options.maxTabNum,
    
24.                     });
    
25.                 }
    
26.                 parent.layui.element.tabChange('layuiminiTab', tabId);
    
27.                 parent.layer.close(loading);
    
28.             });

复制代码

syant

二、看C触发C的逻辑
<li class="active" pid="103"><a href="/erp/C.php/custinfo?ref=addtabs" addtabs="111" class="" url="/erp/C.php/custinfo" py="khpz" pinyin="kehupeizhi"><i class="fa fa-circle-o fa-fw"></i> <span>客户配置</span> <span class="pull-right-container"> </span></a> </li>
搜索：addtabs
>>>>c:\apache24\htdocs\dba\assets\js\backend.js<<<<<
            $(document).on('click', '.btn-addtabs,.addtabsit', function (e) {

1. //点击包含.btn-addtabs的元素时新增选项卡
   
2.             $(document).on('click', '.btn-addtabs,.addtabsit', function (e) {
   
3.                 var that = this;
   
4.                 var options = $.extend({}, $(that).data() || {});
   
5.                 var url = Backend.api.replaceids(that, $(that).data("url") || $(that).attr('href'));
   
6.                 var title = $(that).attr("title") || $(that).data("title") || $(that).data('original-title');
   
7.                 var icon = $(that).attr("icon") || $(that).data("icon");
   
8.                 if (typeof options.confirm !== 'undefined') {
   
9.                     Layer.confirm(options.confirm, function (index) {
   
10.                         Backend.api.addtabs(url, title, icon);
    
11.                         Layer.close(index);
    
12.                     });
    
13.                 } else {
    
14.                     Backend.api.addtabs(url, title, icon);
    
15.                 }
    
16.                 return false;
    
17.             });

复制代码

syant

三、验证C触发C
用了关键函数: Backend.api.addtabs(url, title, icon);
<a href="javascript:Backend.api.addtabs('http://www.baidu.com', 'test', '');" class="btn btn-primary" title="{:__('Refresh')}" ><i class="fa fa-refresh"></i> </a>

可以实现！

syant

发布兼容函数：

1. window.callOuterFunction = function(url, title, icon) {
   
2.             if (window.parent) {         // 调用外层页面的函数
   
3.                                 if(window.parent.Backend){        //如果外层是C
   
4.                                         window.parent.Backend.api.addtabs(url, title, icon);
   
5.                                 }else{                                                //如果外层是L
   
6.                                         var tabId = url;
   
7.                                         var checkTab = parent.layui.miniTab.check(tabId, true);
   
8.                                         if (!checkTab) {
   
9.                                                 parent.layui.miniTab.create({
   
10.                                                         tabId: tabId,
    
11.                                                         href: url,
    
12.                                                         title: title,
    
13.                                                         isIframe: true,
    
14.                                                         maxTabNum:100000,
    
15.                                                 });
    
16.                                         }
    
17.                                     parent.layui.element.tabChange('layuiminiTab', tabId);
    
18.                 }
    
19.             } else {
    
20.             }
    
21.         }       

复制代码