220 lines
6.4 KiB
HTML
220 lines
6.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en-us" id="extr-page">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<link rel="stylesheet" type="text/css" media="screen" href="../../css/bootstrap.min.css">
|
|
<link rel="stylesheet" href="../../css/ztree/zTreeStyle/zTreeStyle.css" type="text/css">
|
|
<link rel="stylesheet" href="../../css/ztree/demo.css" type="text/css">
|
|
<style>
|
|
/* 为ztree添加样式 */
|
|
.ztree {
|
|
border: 1px solid #617775;
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
background-color: #fbfbfb;
|
|
border-radius: 4px;
|
|
}
|
|
.ztree::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
ul.ztree {
|
|
margin-top: 10px;
|
|
width: 220px;
|
|
height: 360px;
|
|
overflow-y: scroll;
|
|
overflow-x: auto;
|
|
border-width: 1px;
|
|
border-style: solid;
|
|
border-color: rgb(97, 119, 117);
|
|
border-image: initial;
|
|
background: #fbfbfb;
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12" style="margin-top: 5%;">
|
|
<form class="form-horizontal" onsubmit="return false" id="form">
|
|
<fieldset>
|
|
<input type="hidden" id="id" name="id">
|
|
<div class="form-group">
|
|
<label class="col-md-2 control-label"><i class="tip-required"
|
|
style="color: red;font-size: 20px">*</i>角色:</label>
|
|
<div class="col-md-10">
|
|
<input class="form-control" placeholder="角色" type="text" name="name" id="name"
|
|
data-bv-notempty="true"
|
|
data-bv-notempty-message="角色 不能为空">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label class="col-md-2 control-label"><i class="tip-required" style="color: red;font-size: 20px">*</i>权限类型:</label>
|
|
<div class="col-md-10">
|
|
<label><input type="checkbox" name="backend" id="backend" value="0" data-bv-group="permission"> 后台</label>
|
|
<label><input type="checkbox" name="backend" id="screen" value="1" data-bv-group="permission"> 大屏</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label class="col-md-2 control-label"><i class="tip-required"
|
|
style="color: red;font-size: 20px">*</i>角色级别:</label>
|
|
<div class="col-md-10">
|
|
<select class="form-control" name="level" id="level" data-bv-notempty="true" data-bv-notempty-message="角色级别不能为空">>
|
|
<option value="">请选择角色级别</option>
|
|
<option value="1">公司级</option>
|
|
<option value="2">分公司级</option>
|
|
<option value="3">项目部级</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label class="col-md-2 control-label">描述:</label>
|
|
<div class="col-md-10">
|
|
<textarea class="form-control" placeholder="描述" name="description" id="description"></textarea>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="col-md-2 control-label">权限:</label>
|
|
<div class="col-md-10">
|
|
<ul id="treeDemo" class="ztree" required></ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-actions">
|
|
<div class="row" align="center">
|
|
<div class="col-md-12">
|
|
<button class="btn btn-primary" onclick="coler()">返回</button>
|
|
<button class="btn btn-primary" type="submit" onclick="add()">
|
|
<i class="fa fa-save"></i> 保存
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</fieldset>
|
|
</form>
|
|
</div>
|
|
|
|
|
|
<script type="text/javascript" src="../../js/jquery/jquery-3.6.0.js"></script>
|
|
<script type="text/javascript" src="../../js/jq.js"></script>
|
|
<script type="text/javascript" src="../../../public/public.js"></script>
|
|
<script type="text/javascript" src="../../js/plugin/bootstrapvalidator/bootstrapValidator.min.js"></script>
|
|
<script type="text/javascript" src="../../js/common.js"></script>
|
|
<script type="text/javascript" src="../../layui/layui.js"></script>
|
|
<script type="text/javascript" src="../../js/libs/jquery.ztree.all-3.5.min.js"></script>
|
|
<script type="text/javascript" src="../../js/my/ztree-menu.js"></script>
|
|
<script type="text/javascript" src="../../js/publicJs.js"></script>
|
|
<script type="text/javascript">
|
|
var id = localStorage.getItem("id");
|
|
console.log(id);
|
|
layui.use('layer', function(){
|
|
var layer = layui.layer;
|
|
});
|
|
|
|
$.fn.zTree.init($("#treeDemo"), getSetttings(), getMenuTree());
|
|
initData();
|
|
|
|
function initData(){
|
|
// var id = getUrlParam("id");
|
|
if(id != ""){
|
|
$.ajax({
|
|
type : 'get',
|
|
url : czl_ht_url + '/roles/'+id,
|
|
async : false,
|
|
success : function(data) {
|
|
$("#id").val(data.id);
|
|
$("#name").val(data.name);
|
|
$("#description").val(data.description);
|
|
var backend;
|
|
var screen;
|
|
if (data.rolePower.includes("0")) {
|
|
backend = true;
|
|
|
|
} else {
|
|
backend = false;
|
|
}
|
|
if (data.rolePower.includes("1")) {
|
|
screen = true;
|
|
} else {
|
|
screen = false;
|
|
}
|
|
$("#backend").prop('checked', backend);
|
|
$("#screen").prop('checked', screen);
|
|
$("#level").val(data.level);
|
|
}
|
|
});
|
|
|
|
initMenuDatas(id);
|
|
}
|
|
}
|
|
|
|
|
|
$('#form').bootstrapValidator({
|
|
message: 'This value is not valid',
|
|
feedbackIcons: {
|
|
valid: 'glyphicon glyphicon-ok',
|
|
invalid: 'glyphicon glyphicon-remove',
|
|
validating: 'glyphicon glyphicon-refresh'
|
|
},
|
|
fields: {
|
|
name: {
|
|
validators: {
|
|
notEmpty: {
|
|
message: '角色不能为空'
|
|
}
|
|
}
|
|
},
|
|
backend: {
|
|
validators: {
|
|
choice: {
|
|
min: 1,
|
|
max: 2,
|
|
message: '请选择权限类型'
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
|
|
|
|
function add() {
|
|
var bootstrapValidator = $("#form").data('bootstrapValidator');
|
|
bootstrapValidator.validate();
|
|
if(!bootstrapValidator.isValid()){
|
|
return;
|
|
}
|
|
|
|
var formdata = $("#form").serializeObject();
|
|
formdata.permissionIds = getCheckedMenuIds();
|
|
formdata.backend = $('#backend').is(':checked') ? "0" : " ";
|
|
formdata.screen = $('#screen').is(':checked') ? "1" : " ";
|
|
formdata.level = $("#level").val();
|
|
formdata.id = id;
|
|
|
|
$.ajax({
|
|
type : 'post',
|
|
url : czl_ht_url + '/roles',
|
|
contentType: "application/json; charset=utf-8",
|
|
data : JSON.stringify(formdata),
|
|
success : function(data) {
|
|
layer.msg("成功", {shift: -1, time: 1000}, function(){
|
|
var index = parent.layer.getFrameIndex(window.name); // 获取窗口索引
|
|
parent.layer.close(index); // 关闭弹窗
|
|
parent.location.reload(); // 刷新父页面
|
|
});
|
|
}
|
|
});
|
|
}
|
|
|
|
function coler(){
|
|
var index = parent.layer.getFrameIndex(window.name); // 获取窗口索引
|
|
parent.layer.close(index); // 关闭弹窗
|
|
}
|
|
|
|
|
|
</script>
|
|
</body>
|
|
</html> |