<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>部门列表</title>
    <link rel="stylesheet" th:href="@{/lib/layui/css/layui.css}" media="all">
    <link rel="stylesheet" th:href="@{/css/public.css}" media="all">
    <link rel="stylesheet" th:href="@{/lib/font-awesome-4.7.0/css/font-awesome.min.css}" media="all">
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">
        <table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>
    </div>

    <div class="layui-form layuimini-form">
        <!-- 右侧悬浮按钮 -->
        <div class="right-bottom-btn" style="padding-right: 0px; margin-right: 0px">
            <button class="layui-btn" lay-submit lay-filter="saveBtn"><i
                    class="layui-icon layui-icon-ok"></i>提交
            </button>
            <button class="layui-btn" lay-filter="cancleBtn"><i
                    class="layui-icon layui-icon-close"></i>取消
            </button>
        </div>
    </div>
</div>
<script th:src="@{/lib/jquery-3.4.1/jquery-3.4.1.min.js}" charset="utf-8"></script>
<script th:src="@{/lib/layui/layui.js}" charset="utf-8"></script>
<script th:src="@{/lib/coco-message/coco-message.js}" charset="utf-8"></script>
<script th:src="@{/js/lay-config.js}" charset="utf-8"></script>
<script type="text/javascript" th:inline="javascript">
    AjaxUtil.ctx = /*[[@{/}]]*/'';
    var dept = 0;
    layui.use(['form', 'table', 'treeTable'], function () {
        var form = layui.form,
            treeTable = layui.treeTable;

        var isShow = true;
        var pid = null;

        var insTb = treeTable.render({
            elem: '#currentTableId',
            url: AjaxUtil.ctx + 'deptinfo/list',
            skin: 'line',
            tree: {
                treeColIndex: 1,
                treeSpid: "0",
                iconIndex: 0,           // 折叠图标显示在第几列
                isPidData: true,        // 是否是id、pid形式数据
                idName: 'deptId',  // id字段名称
                pidName: 'parentId', // pid字段名称
                arrowType: 'arrow2',
                getIcon: 'ew-tree-icon-style2'
            },
            treeDefaultClose: isShow,
            method: 'GET',
            page: false,
            cols: [
                [
                    {field: 'deptName', minWidth: '200px', title: '部门名称'}
                ]
            ]
        });

        //监听行选中
        treeTable.on('row(currentTableId)', function (obj) {
            dept = obj.data;
            obj.tr.addClass('layui-bg-blue').siblings().removeClass('layui-bg-blue');
        });

        //双击
        treeTable.on('rowDouble(currentTableId)', function (obj) {
            xkfl = obj.data
            obj.tr.addClass('layui-bg-blue').siblings().removeClass('layui-bg-blue');

            parent.setData(xkfl.id, xkfl.name);
            parent.layer.close(parent.layer.getFrameIndex(window.name));// 关闭子窗口
        });

        // 监听确认按钮
        form.on('submit(saveBtn)', function (data) {
            if (dept == null) {
                Message.warning("请选择所属部门", 1000);
                return;
            }
            parent.setData(dept.deptId, dept.deptName);
            parent.layer.close(parent.layer.getFrameIndex(window.name));// 关闭子窗口

            return false;
        });

        // 监听取消按钮
        $("button[lay-filter='cancleBtn']").click(function () {
            var iframeIndex = parent.layer.getFrameIndex(window.name);
            parent.layer.close(iframeIndex);
        });
    });
</script>
</body>
</html>