master

分支 (2)

管理

管理

master

v2.0

ok-admin
/
role-edit.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>编辑角色</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="lib/layui/css/layui.css">
    <link rel="stylesheet" href="css/okadmin.css">
    <link rel="stylesheet" href="font/iconfont.css">
    <link rel="stylesheet" href="lib/zTree_v3/css/zTreeStyle/zTreeStyle.css">
</head>
<body>
<div class="ok-body">
    <!--面包屑导航区域-->
    <div class="ok-body-breadcrumb">
        <span class="layui-breadcrumb">
            <a><cite>首页</cite></a>
            <a><cite>会员管理</cite></a>
            <a><cite>角色列表</cite></a>
            <a><cite>编辑角色</cite></a>
        </span>
        <a class="layui-btn layui-btn-sm" href="javascript:location.replace(location.href);" title="刷新">
            <i class="layui-icon layui-icon-refresh"></i>
        </a>
    </div>
    <!--form表单-->
    <form class="layui-form ok-form">
        <div class="layui-form-item">
            <label class="layui-form-label">角色名</label>
            <div class="layui-input-block">
                <input type="text" name="name" placeholder="请输入角色名" autocomplete="off" class="layui-input" lay-verify="required">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">备注</label>
            <div class="layui-input-block">
                <input type="text" name="remarks" placeholder="请输入备注" autocomplete="off" class="layui-input" lay-verify="required">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">权限</label>
            <div class="layui-input-block">
                <ul class="ztree" id="permissionTree"></ul>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="edit">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>
<!--js逻辑-->
<script src="lib/layui/layui.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="lib/zTree_v3/js/jquery.ztree.all.js"></script>
<script type="text/javascript">
    layui.use(['element', 'form'], function () {
        var form = layui.form;

        // zTree设置
        var setting = {
            data: {
                simpleData: {
                    enable: true,
                    idKey: "id",
                    pIdKey: "parentId",
                    rootPId: 0
                }
            },
            check: {
                enable: true,
                chkStyle: "checkbox",
                radioType: "all"
            }
        };

        // zTree异步请求所有权限树节点
        var treeObj, loadIndex;
        $.ajax({
            url: 'data/permission-tree.json',
            type: 'post',
            dataType: 'json',
            data: {roleId: 1},
            beforeSend: function () {
                loadIndex = layer.load(0, {shade: 0.1});
            },
            complete: function () {
                layer.close(loadIndex);
            },
            success: function (data) {
                treeObj = $.fn.zTree.init($("#permissionTree"), setting, data);
                treeObj.expandAll(true);
            },
            error: function () {
                layer.msg('服务器错误', {icon: 5, time: 1000});
            }
        });

        form.on('submit(edit)', function (data) {
            console.log(data.field);
            layer.msg("编辑成功！", {icon: 6, time: 1000, anim: 4}, function () {
                parent.layer.close(parent.layer.getFrameIndex(window.name));
            });
            return false;
        });
    })
</script>
</body>
</html>