模板引入layui，及各功能模块使用指南

引入layui

只需引用一个CSS文件和两个JS文件，声明需要加载的模块，然后初始化操作即可。
1、引用CSS文件，放在页头。

<link rel="stylesheet" href="/assets/gougu/css/gougu.css">

PS：如果是布局母模板需要引入 layout.css。

<link rel="stylesheet" href="/assets/gougu/css/layout.css">

2、声明需要加载的模块，并完成初始化元素操作函数等，放在页脚。

//声明需要加载的模块
const moduleInit = ['tool', 'admin'];

//初始化操作
function gouguInit() {
    //do something here
}

moduleInit是需要引入基于layui的第三方插件名称，比如上面的代码是引用了tool和admin插件，如果只是使用layui自带的功能模块的话，这里留空就行。

gouguInit是加载完layui后调用的方法，需要引用layui里面的方法的js代码写在这里面，具体可以参考已有的页面模板。

3、引用的JS文件，放在页面的最下面。

<script src="/assets/layui/layui.js"></script>
<script src="/assets/gougu/gouguInit.js"></script>

PS:关于静态文件的引入，勾股CMS，勾股OA系统已经在母模板里面统一引入了，大家在做二次开发的时候无需再次引入，上面的内容更多是说明和辅助大家理解。

页面内需要打开新的tab

1、系统自带集成的方式。

目标元素添加样式名称tab-a,tab链接地址data-url，tab标题data-title，这样点击该链接的时候系统就会自动以tab的方式打开页面。

<a class="layui-btn tab-a" data-url="/home/position/add" data-title="添加岗位">+ 添加岗位</a>

2、自定义编码的方式。

<button class="layui-btn layui-btn-normal" lay-event="add">+ 添加岗位</button>

调用脚本方法：tool.tabAdd(url,title);
参数：url是tab链接地址，title是tab标题。

//声明需要加载的模块
const moduleInit = ['tool'];
//初始化操作
function gouguInit() {
    let tool = layui.tool;
    $('[lay-event="add"]').on('click',function(){
        tool.tabAdd('/home/position/add','添加岗位');
    })
}

页面内关闭当前tab

<button class="layui-btn layui-btn-normal" lay-event="close">关闭当前tab页面</button>

//声明需要加载的模块
const moduleInit = ['tool'];
//初始化操作
function gouguInit() {
    let tool = layui.tool;
    $('[lay-event="close"]').on('click',function(){
        tool.tabClose();
    })
}

页面右侧打开页面

1、系统自带集成的方式。
目标元素添加样式名称right-a,链接地址data-url，这样点击该链接的时候系统就会自动以右侧的方式打开页面。

<a class="layui-btn right-a" data-url="/home/position/view?id=2">员工详情</a>

2、自定义编码的方式。

<button class="layui-btn layui-btn-normal" data-uid="2" lay-event="view">+ 员工详情</button>

调用脚本方法：tool.side(url);
参数：url是页面链接地址。

//声明需要加载的模块
const moduleInit = ['tool'];
//初始化操作
function gouguInit() {
    let tool = layui.tool;
    $('[lay-event="view"]').on('click',function(){
        let uid = $(this).data('uid');
        tool.side('/home/position/view?id='+uid);
    })
}

页面内关闭当前右开页面

<button class="layui-btn layui-btn-normal" lay-event="close">关闭当前右开页面</button>

调用脚本方法：parent.layui.tool.close();
参数：delay是延迟关闭参数，一般是在编辑完页面数据后需要自动关闭页面的场景用到，数字，比如：1000。

function gouguInit() {
    $('[lay-event="close"]').on('click',function(){
        parent.layui.tool.close();
        //parent.layui.tool.close(1000);//延时1秒关闭
    })
}