reghao
/
devops


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128
							<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:mo="https://gitee.com/aun/Timo">
<head th:replace="/common/template :: header(~{::title},~{::link},~{::style})">
    <link rel="stylesheet" th:href="@{/lib/zTree_v3/css/zTreeStyle/zTreeStyle.css}" type="text/css">
</head>
<body>
<div class="layui-form timo-compile">
    <form th:action="@{/api/auth/menu}">
        <div class="layui-form-item">
            <label class="layui-form-label required">名字</label>
            <div class="layui-input-inline">
                <label>
                    <input class="layui-input" type="text" name="name"  placeholder="请输入名字">
                </label>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label required">URL 地址</label>
            <div class="layui-input-inline">
                <label>
                    <input class="layui-input url-input" type="text" name="url"  placeholder="请输入URL地址">
                </label>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">菜单图标</label>
            <div class="layui-input-inline">
                <label>
                    <input class="layui-input icon-input" type="text" name="icon"  placeholder="请输入菜单图标">
                </label>
            </div>
            <i th:class="'icon-show '+${menu?.icon}" style="line-height: 38px;"></i>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label required">父级菜单</label>
            <div class="layui-input-inline">
                <label>
                    <input class="layui-input select-tree" th:attr="data-url=@{/api/auth/menu/1}, data-value=${pMenu?.id}"
                           type="text" name="pid"  placeholder="请选择父级菜单（必须是目录类型）">
                </label>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label required">菜单类型</label>
            <div class="layui-input-inline">
                <label>
                    <select name="type" mo:dict="MENU_TYPE" mo-selected="${menu?.type}" mo-empty="" lay-verify="type"></select>
                </label>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">排序</label>
            <div class="layui-input-inline">
                <label>
                    <select class="select-pos" name="pos" lay-verify="pos"
                            th:attr="data-url=@{/api/auth/menu/sorted}, data-id=${menu?.id}, data-pos=${menu?.pos}"></select>
                </label>
            </div>
            <div class="layui-input-info">（之后）</div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label required">分配角色</label>
            <div class="layui-input-block">
                <input th:each="item:${allRoles}" type="checkbox" name="roles" th:title="${item.name}"
                       th:value="${item.id}" th:checked="${#sets.contains(menuRoles, item)}" lay-skin="primary">
            </div>
        </div>
        <div class="layui-form-item timo-finally">
            <button class="layui-btn ajax-submit"><i class="fa fa-check-circle"></i> 保存</button>
            <button class="layui-btn btn-secondary close-popup"><i class="fa fa-times-circle"></i> 关闭</button>
        </div>
    </form>
</div>

<script th:replace="/common/template :: script"></script>
<script type="text/javascript" th:src="@{/js/plugins/jquery-2.2.4.min.js}"></script>
<script type="text/javascript" th:src="@{/lib/zTree_v3/js/jquery.ztree.core.min.js}"></script>
<script type="text/javascript" th:src="@{/js/timoTree.js}"></script>

<script type="text/javascript">
    layui.use(['form'], function () {
        window.form = layui.form;
        // 初始化排序字段下拉选项
        var pid = $(".select-tree").data('value');
        if (pid !== undefined){
            sortRender({id: pid});
        }
    });

    // 初始化下拉树
    $.fn.selectTree({
        rootTree: '根',
        // 选中后事件
        onSelected: sortRender
    });

    // 重新渲染排序字段的下拉选项
    function sortRender(treeNode) {
        var pid = treeNode.id;
        var pos = $(".select-pos");
        var id = pos.data('id') ? pos.data('id') : 0;
        var url = pos.data('url') + "/" + pid + "/" + id;
        $.get(url, function (result) {
            result = result.data
            var options = '';
            var posNum = Object.keys(result).length;
            if(pid === $(".select-tree").data('value') && pos.data('pos')){
                posNum = pos.data('pos') - 1;
            }
            result[0] = "首位";
            // TODO key 应该是 int 类型才对
            for(var key in result){
                var selected = posNum === parseInt(key) ? "selected=''" : "";
                options += "<option value='"+ key +"' " + selected + ">"+ result[key] +"</option>";
            }
            pos.html(options);
            form.render('select');
        });
    }

    // 监听变动图标
    $(".icon-input").on("input propertychange", function(){
        $(".icon-show").attr("class", "icon-show "+$(this).val());
    });
</script>
</body>
</html>