|
|
@@ -0,0 +1,213 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="en" xmlns:th="http://www.thymeleaf.org">
|
|
|
+<head>
|
|
|
+ <meta charset="utf-8">
|
|
|
+ <title>权限维护</title>
|
|
|
+ <meta name="renderer" content="webkit">
|
|
|
+ <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
|
|
+ <meta name="apple-mobile-web-app-status-bar-style" content="black">
|
|
|
+ <meta name="apple-mobile-web-app-capable" content="yes">
|
|
|
+ <meta name="format-detection" content="telephone=no">
|
|
|
+
|
|
|
+ <link rel="stylesheet" href="../../static/assets/lib/layui/css/layui.css" th:href="@{/assets/lib/layui/css/layui.css}" media="all">
|
|
|
+ <link rel="stylesheet" href="../../static/assets/lib/font/css/font-awesome.css" th:href="@{/assets/lib/font/css/font-awesome.css}" media="all">
|
|
|
+ <link rel="stylesheet" href="../../static/assets/lib/jsplus/zTree_v3/css/zTreeStyle/zTreeStyle.css" th:href="@{/assets/lib/jsplus/zTree_v3/css/zTreeStyle/zTreeStyle.css}" media="all">
|
|
|
+ <link rel="stylesheet" href="../../static/assets/css/admin.css" th:href="@{/assets/css/admin.css}">
|
|
|
+
|
|
|
+</head>
|
|
|
+<body class="childrenBody">
|
|
|
+<form class="layui-form" style="width:80%;">
|
|
|
+ <input type="hidden" id="id" name="id" th:value="${session.permission.id}"/>
|
|
|
+ <div class="layui-form-item">
|
|
|
+ <div class="layui-inline">
|
|
|
+ <label class="layui-form-label">模块编码</label>
|
|
|
+ <div class="layui-input-block">
|
|
|
+ <input type="text" id="authCode" name="authCode" th:value="${session.permission.authCode}" class="layui-input"
|
|
|
+ placeholder="请输入模块编码">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="layui-inline">
|
|
|
+ <label class="layui-form-label">模块名称</label>
|
|
|
+ <div class="layui-input-inline">
|
|
|
+ <input type="text" id="authName" name="authName" th:value="${session.permission.authName}" class="layui-input authName" lay-verify="required"
|
|
|
+ placeholder="请输入模块名称">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="layui-form-item">
|
|
|
+ <div class="layui-inline">
|
|
|
+ <label class="layui-form-label">模块类型</label>
|
|
|
+ <div class="layui-input-block">
|
|
|
+ <input type="radio" name="authType" value="0" title="父节点" checked>
|
|
|
+ <input type="radio" name="authType" value="1" title="子节点">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="layui-inline">
|
|
|
+ <label class="layui-form-label">访问地址</label>
|
|
|
+ <div class="layui-input-inline">
|
|
|
+ <input type="text" id="linkUrl" name="linkUrl" th:value="${session.permission.linkUrl}" class="layui-input" lay-verify="required"
|
|
|
+ placeholder="请输入url">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="layui-form-item">
|
|
|
+ <div class="layui-inline">
|
|
|
+ <label class="layui-form-label">权限名称</label>
|
|
|
+ <div class="layui-input-inline">
|
|
|
+ <input type="text" id="permissionName" name="permissionName" th:value="${session.permission.permissionName}" class="layui-input" lay-verify="required"
|
|
|
+ placeholder="请输入权限名称">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="layui-inline">
|
|
|
+ <label class="layui-form-label">权限标识</label>
|
|
|
+ <div class="layui-input-inline">
|
|
|
+ <input type="text" id="permission" name="permission" th:value="${session.permission.permission}" class="layui-input" lay-verify="required"
|
|
|
+ placeholder="请输入权限标识">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="layui-row">
|
|
|
+ <div class="magb15 layui-col-md4 layui-col-xs6">
|
|
|
+ <label class="layui-form-label">父级权限</label>
|
|
|
+ <div class="layui-input-block">
|
|
|
+ <input id="parentId" type="hidden" value=""/>
|
|
|
+ <ul id="permissionTree" class="ztree"></ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <br/>
|
|
|
+ <div class="layui-form-item layui-row layui-col-xs12">
|
|
|
+ <label class="layui-form-label">描述</label>
|
|
|
+ <div class="layui-input-block">
|
|
|
+ <textarea placeholder="请输入描述" id="remark" th:text="${session.permission.remark}" name="remark" class="layui-textarea remark"></textarea>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="layui-form-item layui-row layui-col-xs12">
|
|
|
+ <div class="layui-input-block">
|
|
|
+ <button class="layui-btn layui-btn-sm" lay-submit="" lay-filter="save">立即添加</button>
|
|
|
+ <button type="reset" class="layui-btn layui-btn-sm layui-btn-primary">取消</button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</form>
|
|
|
+<script src="../../static/assets/lib/jquery/jquery.js" th:src="@{/assets/lib/jquery/jquery.js}"></script>
|
|
|
+<script src="../../static/assets/lib/jsplus/zTree_v3/js/jquery.ztree.all.js" th:src="@{/assets/lib/jsplus/zTree_v3/js/jquery.ztree.all.js}"></script>
|
|
|
+<script type="text/javascript" src="../../static/assets/lib/layui/layui.js" th:src="@{/assets/lib/layui/layui.js}"></script>
|
|
|
+<script type="text/javascript" src="../../static/business/upms/permission/save.js" th:src="@{/business/upms/permission/save.js}"></script>
|
|
|
+<script th:inline="javascript" type="text/javascript">
|
|
|
+ var zTreeList = null;
|
|
|
+ $.ajax({
|
|
|
+ //请求方式
|
|
|
+ type : "POST",
|
|
|
+ //请求的媒体类型
|
|
|
+ contentType: "application/json;charset=UTF-8",
|
|
|
+ //请求地址
|
|
|
+ url : "/permission/getTree",
|
|
|
+ //数据,json字符串
|
|
|
+ //请求成功
|
|
|
+ success : function(result) {
|
|
|
+ zTreeList = result.zTreeList;
|
|
|
+
|
|
|
+ var setting = {
|
|
|
+ view: {
|
|
|
+ dblClickExpand: true,//双击节点时,是否自动展开父节点的标识
|
|
|
+ showLine: true,//是否显示节点之间的连线
|
|
|
+ fontCss:{'color':'black','font-weight':'bold'},//字体样式函数
|
|
|
+ selectedMulti: true //设置是否允许同时选中多个节点
|
|
|
+ },
|
|
|
+ check: {
|
|
|
+ chkboxType: {"Y":"s", "N":"ps"},
|
|
|
+ chkStyle: "checkbox",//复选框类型
|
|
|
+ enable: true //每个节点上是否显示 CheckBox
|
|
|
+ },
|
|
|
+ data: {
|
|
|
+ simpleData: {
|
|
|
+ enable: true,
|
|
|
+ idKey: "id",
|
|
|
+ pidKey: "pId",
|
|
|
+ rootPId: "0"
|
|
|
+ }
|
|
|
+ } ,callback:{
|
|
|
+ onCheck:function(e,treeId, treeNode){
|
|
|
+ if(treeId == "permissionTree") {
|
|
|
+ var zTreeObj = $.fn.zTree.getZTreeObj(treeId);
|
|
|
+ optParOrSon(treeId, treeNode,zTreeObj);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ };
|
|
|
+ /**
|
|
|
+ * 选父不选子,选子不选父
|
|
|
+ * */
|
|
|
+ var optParOrSon = function(treeId,treeNode,zTreeObj){
|
|
|
+ if(treeNode.checked){
|
|
|
+ // console.log(treeNode.id);
|
|
|
+ $("#parentId").val(treeNode.id);
|
|
|
+ //取消全部后代节点的选中
|
|
|
+ var childNodes = getChildsByTreeNode(treeNode);
|
|
|
+ for(var i in childNodes){
|
|
|
+ zTreeObj.checkNode(childNodes[i], false, false);
|
|
|
+ }
|
|
|
+ //同时全部祖先节点也不能被选中
|
|
|
+ if(treeNode.getParentNode()){
|
|
|
+ var parNodes = getParsByTreeNode(treeNode);
|
|
|
+ for(var i in parNodes){
|
|
|
+ zTreeObj.checkNode(parNodes[i], false, false);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
+ //展开选中节点
|
|
|
+ var expandCheckedNode = function(){
|
|
|
+ //获取所有选中状态的节点
|
|
|
+ var checkedNodes = zTreeObj.getCheckedNodes(true);
|
|
|
+ for(var i in checkedNodes){
|
|
|
+ var checkedParAll = getParsAll(checkedNodes[i]);
|
|
|
+ for(var j in checkedParAll){
|
|
|
+ zTreeObj.expandNode(checkedParAll[j],true,false);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ };
|
|
|
+
|
|
|
+ //获取所有子节点
|
|
|
+ var getChildsByTreeNode = function(treeNode,childsArr){
|
|
|
+ var childsArr = childsArr || [];
|
|
|
+ if (treeNode.isParent) {//是父节点则获取所有子节点
|
|
|
+ var childs = treeNode.children;
|
|
|
+ for(var i in childs){
|
|
|
+ childsArr.push(childs[i]);
|
|
|
+ getChildsByTreeNode(childs[i],childsArr);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return childsArr;
|
|
|
+ };
|
|
|
+
|
|
|
+ //获取所有父节点
|
|
|
+ var getParsByTreeNode = function(treeNode,parsArr){
|
|
|
+ var parsArr = parsArr || [];
|
|
|
+ var parNode = treeNode.getParentNode();
|
|
|
+ if(parNode){
|
|
|
+ parsArr.push(parNode);
|
|
|
+ getParsByTreeNode(parNode,parsArr);
|
|
|
+ }
|
|
|
+ return parsArr;
|
|
|
+ }
|
|
|
+ $(document).ready(function(){
|
|
|
+ // console.log(zTreeList);
|
|
|
+ zTreeObj = $.fn.zTree.init($("#permissionTree"), setting, zTreeList);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //请求失败,包含具体的错误信息
|
|
|
+ error : function(e){
|
|
|
+ console.log(e.status);
|
|
|
+ console.log(e.responseText);
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+
|
|
|
+</script>
|
|
|
+</body>
|
|
|
+</html>
|