ComplianceServer/oldcode/WEB/layui-v2.5.4/tabrightmenu.js

layui.define(['element'], function (exports) {
    let element = layui.element;
    const $ = layui.jquery;

    let MOD_NAME = 'tabrightmenu';
    let RIGHTMENUMOD = function () {
        this.v = '1.0.0';
        this.author = 'TangHanF';
        this.email = 'guofu_gh@163.com';
        this.filter = '';//Tab选项卡的事件过滤

    };
    String.prototype.format = function () {
        if (arguments.length == 0) return this;
        let param = arguments[0];
        let s = this;
        if (typeof (param) == 'object') {
            for (var key in param) s = s.replace(new RegExp("\\{" + key + "\\}", "g"), param[key]);
            return s;
        } else {
            for (var i = 0; i < arguments.length; i++) s = s.replace(new RegExp("\\{" + i + "\\}", "g"), arguments[i]);
            return s;
        }
    }

    function createStyle(ulClassName) {
        let style = '.{name} {position: absolute;width: 180px;z-index: 9999;display: none;background-color: #fff;padding: 2px;color: #333;border: 1px solid #d2d2d2;border-radius: 2px;cursor: pointer;box-shadow: 0 2px 4px rgba(0,0,0,.12); }.{name} li {text-align: left;padding:0px 5px 0 20px; display: block;height: 30px;line-height: 32px;color:#444; border:1px solid white;border-radius:5px;}.{name} li:hover {background-color: #eaf2ff;border:1px solid #b7d2ff;border-radius:5px;color: black;}'
            .format({ name: ulClassName });
        return style;
    }

    /**
     * 初始化
     */
    RIGHTMENUMOD.prototype.render = function (opt) {
        createStyle();

        if (!opt.container) {
            //console.error("[ERROR]使用rightmenu组件需要制定'container'属性！");
            return;
        }
        if (!opt.filter) {
            //console.error("[ERROR]使用rightmenu组件需要制定'filter'属性！");
            return;
        }
        this.filter = opt.filter;

        let defaultNavArr = [
            { eventName: 'refresh', title: '刷新' },
            { eventName: 'closethis', title: '关闭当前' },
            { eventName: 'closeall', title: '关闭所有' },
            { eventName: 'hr', title: '分割线' },
            { eventName: 'closeothers', title: '关闭其它' },
            { eventName: 'closeleft', title: '关闭左侧所有' },
            { eventName: 'closeright', title: '关闭右侧所有' },
            { eventName: 'openinnewwin', title: '在新的窗体打开' },

        ];
        opt = opt || {};
        opt.navArr = opt.navArr || defaultNavArr;
        CreateRightMenu(opt);
    };


    /**
     * 创建右键菜单项目
     * @param rightMenuConfig
     * @constructor
     */
    function CreateRightMenu(rightMenuConfig) {
        // 使用"filter"属性作为css样式名称
        $("<style></style>").text(createStyle(rightMenuConfig.filter)).appendTo($("head"));//将样式添加的head中去了
        let li = '';
        $.each(rightMenuConfig.navArr, function (index, conf) {
            // li += '<li data-type="' + conf.eventName + '"><i class="layui-icon layui-icon-face-smile"></i> ' + conf.title + '</li>';
            if (conf.eventName == "hr") {//添加分割线
                li += "<hr/>";
            } else {
                li += '<li data-type="{eventName}"><div class="layui-icon {icon}"></div>&nbsp;&nbsp;{title}</li>'
                    .format({ eventName: conf.eventName, icon: conf.icon ? conf.icon : "", title: conf.title });
            }
        })
        let tmpHtml = '<ul class="{className}">{liStr} </ul>'.format({ liStr: li, className: rightMenuConfig.filter })
        $(rightMenuConfig.container).after(tmpHtml);//先添加隐藏的右键菜单
        _CustomRightClick(rightMenuConfig);//
    }


    /**
     * 绑定右键菜单
     * @constructor
     */
    function _CustomRightClick(rightMenuConfig) {

        //屏蔽Tab右键
        //$("#" + rightmenuObj.filter + ' li').on('contextmenu', function () {
        //    return false;
        //})
        $(document).on("click", "#" + rightmenuObj.filter + ' li', function () {
           
            return false;
        })

        //$('#' + rightmenuObj.filter + ',' + rightmenuObj.filter + ' li').click(function () {
        //    $('.' + rightMenuConfig.filter).hide();
        //});
        $(document).on("contextmenu", '#' + rightmenuObj.filter + ',' + rightmenuObj.filter + ' li', function () {
           
            $('.' + rightMenuConfig.filter).hide();
        });
        //console.log("[事件绑定，元素]" + rightmenuObj.filter + ' li')
        //$("#" + rightmenuObj.filter + ' li').on('contextmenu', function (e) {
        //    let popupmenu = $("." + rightMenuConfig.filter);
        //    let leftValue = ($(document).width() - e.clientX) < popupmenu.width() ? (e.clientX - popupmenu.width()) : e.clientX;
        //    let topValue = ($(document).height() - e.clientY) < popupmenu.height() ? (e.clientY - popupmenu.height()) : e.clientY;
        //    popupmenu.css({left: leftValue, top: topValue}).show();
        //    return false;
        //});
        $(document).on("contextmenu", "#" + rightmenuObj.filter + ' li', function (e) {
            $(this).click();
            let popupmenu = $("." + rightMenuConfig.filter);
            let leftValue = ($(document).width() - e.clientX) < popupmenu.width() ? (e.clientX - popupmenu.width()) : e.clientX;
            let topValue = ($(document).height() - e.clientY) < popupmenu.height() ? (e.clientY - popupmenu.height()) : e.clientY;
            popupmenu.css({ left: leftValue - 2, top: topValue - 2 }).show();
            return false;
        })
        // 点击空白处隐藏弹出菜单
        $(document).on("mouseleave", "." + rightmenuObj.filter, function (event) {
            event.stopPropagation();
            $("." + rightMenuConfig.filter).hide();
        });


        /**
         * 注册tab右键菜单点击事件
         */
        //console.log("[注册tab右键菜单点击事件]" + '.' + rightMenuConfig.filter + ' li');
        //$('.' + rightMenuConfig.filter + ' li').click(function () {
        $(document).on("click", '.' + rightMenuConfig.filter + ' li', function () {
            let currentActiveTabID = $("#" + rightMenuConfig.filter + ">li[class='layui-this']").attr('lay-id');// 获取当前激活的选项卡ID
            let tabtitle = $("#" + rightMenuConfig.filter + " li");
            let allTabIDArr = [];
            $.each(tabtitle, function (i) {
                allTabIDArr[i] = $(this).attr("lay-id");
            })

            // 事件处理
            switch ($(this).attr("data-type")) {
                case "closethis"://关闭当前，如果开始了tab可关闭，实际意义不大
                    tabDelete(currentActiveTabID, rightMenuConfig.filter);
                    break;
                case "closeall"://关闭所有
                    tabDeleteAll(allTabIDArr, rightMenuConfig.filter);
                    break;
                case "closeothers"://关闭非当前
                    $.each(allTabIDArr, function (i) {
                        let tmpTabID = allTabIDArr[i];
                        console.log(tmpTabID);
                        console.log(rightMenuConfig);
                        if (currentActiveTabID != tmpTabID && (rightMenuConfig.lockId == null || tmpTabID != rightMenuConfig.lockId))
                            tabDelete(tmpTabID, rightMenuConfig.filter);
                    })
                    break;
                case "closeleft"://关闭左侧全部
                    let indexCloseleft = allTabIDArr.indexOf(currentActiveTabID);
                    tabDeleteAll(allTabIDArr.slice(0, indexCloseleft));
                    break;
                case "closeright"://关闭右侧全部
                    let indexCloseright = allTabIDArr.indexOf(currentActiveTabID);
                    tabDeleteAll(allTabIDArr.slice(indexCloseright + 1));
                    break;
                case "refresh":
                    // 重新加载iFrame，实现更新。注意：如果你不是使用的iFrame则无效，具体刷新实现自行处理
                    // document.getElementById(currentActiveTabID).contentWindow.location.reload(true);
                    refreshiFrame();
                    break;
                case "openinnewwin":
                    opennewWin();
                    break;
                default:
                    let currentTitle = $("#" + rightMenuConfig.filter + ">li[class='layui-this']").text();
                    rightMenuConfig.registMethod[$(this).attr("data-type")](currentActiveTabID, currentTitle, rightMenuConfig.container, $(this)[0]);

            }
            $('.rightmenu').hide();
            event.stopPropagation();
            $("." + rightMenuConfig.filter).hide();
        })
    }

    let tabDelete = function (id, currentNav) {
        //console.log("删除的TabID：" + id + ",所属组：" + currentNav);
        element.tabDelete(currentNav, id);//删除
    }
    let tabDeleteAll = function (ids, currentNav) {
        $.each(ids, function (i, item) {
            element.tabDelete(currentNav, item);
        })
    }
    /**
     * 重新加载iFrame，实现更新
     * @returns {boolean}
     */
    let refreshiFrame = function () {
        let $curFrame = $('iframe:visible');
        $curFrame.attr("src", $curFrame.attr("src"));
        return false;
    }
    /**
     *复制打开新的页面
     *  @returns {boolean}
     */
    let opennewWin = function () {
        let $curFrame = $('iframe:visible').attr("src");
        window.open($curFrame);
        return false;
    }

    let rightmenuObj = new RIGHTMENUMOD();
    exports(MOD_NAME, rightmenuObj);
})