From e6bdc34995298e807824097e555c3e46fb746e3b Mon Sep 17 00:00:00 2001
From: zxh <279049017@qq.com>
Date: Wed, 26 Aug 2020 09:48:53 +0800
Subject: [PATCH] 调整表格的宽度
---
kidgrow-web/kidgrow-web-manager/src/main/resources/static/pages/system/role.html | 249 ++++++++++++++++++++++++++++++++++++++-----------
1 files changed, 194 insertions(+), 55 deletions(-)
diff --git a/kidgrow-web/kidgrow-web-manager/src/main/resources/static/pages/system/role.html b/kidgrow-web/kidgrow-web-manager/src/main/resources/static/pages/system/role.html
index 581fd44..ce7367f 100644
--- a/kidgrow-web/kidgrow-web-manager/src/main/resources/static/pages/system/role.html
+++ b/kidgrow-web/kidgrow-web-manager/src/main/resources/static/pages/system/role.html
@@ -1,11 +1,11 @@
-<link rel="stylesheet" href="/assets/libs/zTree/css/zTreeStyle/zTreeStyle.css"/>
+<link rel="stylesheet" href="/assets/libs/zTree/css/zTreeStyle/zTreeStyle.css" />
<script type="text/javascript" src="/assets/libs/zTree/js/jquery.ztree.all-3.5.min.js"></script>
<div class="layui-card">
<div class="layui-card-header">
<h2 class="header-title">角色管理</h2>
<span class="layui-breadcrumb pull-right">
- <a href="#!console">首页</a>
- <a><cite>角色管理</cite></a>
+ <a href="#!console">首页</a>
+ <a><cite>角色管理</cite></a>
</span>
</div>
<div class="layui-card-body">
@@ -16,13 +16,13 @@
<option value="">-请选择-</option>
<option value="name">角色名称</option>
</select> 
- <input id="role-edit-value" class="layui-input search-input" type="text" placeholder="输入关键字"/> 
+ <input id="role-edit-value" class="layui-input search-input" type="text" placeholder="按关键字" /> 
<button id="role-btn-search" class="layui-btn icon-btn"><i class="layui-icon"></i>搜索</button>
- <button id="role-btn-add" class="layui-btn icon-btn"><i class="layui-icon"></i>添加</button>
+ <button id="role-btn-add" class="layui-btn icon-btn permissions" permissions="saveOrUpdate"><i class="layui-icon"></i>添加</button>
</div>
<!-- 数据表格 -->
- <table class="layui-table" id="role-table" lay-filter="role-table"></table>
+ <table class="layui-hide" id="role-table" lay-filter="role-table"></table>
</div>
</div>
@@ -57,11 +57,55 @@
</form>
</script>
+<!-- 数据权限 表单弹窗 -->
+<script type="text/html" id="role-model-role">
+ <form id="role-form" lay-filter="role-form" class="layui-form model-form">
+ <input name="id" type="hidden"/>
+ <div class="layui-form-item">
+ <label class="layui-form-label">角色名</label>
+ <div class="layui-input-block">
+ <input name="name" placeholder="请输入角色名" type="text" class="layui-input" maxlength="20"
+ lay-verify="required" required/>
+ </div>
+ </div>
+ <div class="layui-form-item">
+ <label class="layui-form-label">Code</label>
+ <div class="layui-input-block">
+ <input name="code" placeholder="请输入Code" type="text" class="layui-input" maxlength="20"
+ lay-verify="required" required />
+ </div>
+ </div>
+ <div class="layui-form-item">
+ <label class="layui-form-label">权限范围</label>
+ <div class="layui-input-block">
+ <select name="type" lay-filter="role_organization">
+ <option value="">请选择权限</option>
+ <option value="1">全部数据权限</option>
+ <option value="2">自定义数据权限</option>
+ <option value="3">本部门数据权限</option>
+ <option value="4">本部门及以下数据权限</option>
+ <option value="5">仅本人数据权限</option>
+ </select>
+ </div>
+ </div>
+ <div class="layui-form-item" id="tree">
+ <!-- <label class="layui-form-label">数据权限</label> -->
+ <!-- <div id="orgParentId-tree" class="demo-tree demo-tree-box"></div> -->
+ <ul id="treeMenu-role" class="ztree" style="padding: 25px 0px 20px 60px;"></ul>
+ </div>
+ <div class="layui-form-item model-form-footer">
+ <button class="layui-btn layui-btn-primary" ew-event="closeDialog" type="button">取消</button>
+ <button class="layui-btn" lay-filter="role-form-submit-role" lay-submit>保存</button>
+ </div>
+ </form>
+</script>
+
<!-- 表格操作列 -->
<script type="text/html" id="role-table-bar">
- <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">修改</a>
- <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
- <a class="layui-btn layui-btn-xs" lay-event="auth">权限分配</a>
+ <a class="layui-btn layui-btn-primary layui-btn-xs permissions" permissions="updateEnabled" lay-event="edit">修改</a>
+ <a class="layui-btn layui-btn-danger layui-btn-xs permissions" permissions="role-del" lay-event="del">删除</a>
+ <a class="layui-btn layui-btn-xs permissions" permissions="menus-granted" lay-event="auth">权限分配</a>
+ <a class="layui-btn layui-btn-xs permissions" permissions="sysroleorganization" lay-event="auth_role">分配数据权限</a>
</script>
<!-- 表格状态列 -->
@@ -71,7 +115,7 @@
</script>
<script>
- layui.use(['form', 'table', 'util', 'config', 'admin', 'formSelects'], function () {
+ layui.use(['form', 'table', 'util', 'config', 'tree', 'admin', 'formSelects'], function () {
var form = layui.form;
var table = layui.table;
var config = layui.config;
@@ -79,28 +123,36 @@
var util = layui.util;
var admin = layui.admin;
var formSelects = layui.formSelects;
- var clientsAll =null;
+ //树形插件
+ var tree = layui.tree;
+ var layer = layui.layer
+ , $ = layui.jquery;
+ //常量
+ var clientsAll = null;
//渲染表格
table.render({
elem: '#role-table',
url: config.base_server + 'api-user/roles',
- headers:{'Authorization': 'Bearer ' + config.getToken().access_token},
+ headers: { 'Authorization': 'Bearer ' + config.getToken().access_token },
page: true,
+ cellMinWidth: 80,
cols: [[
- {type: 'numbers'},
- {field: 'id', sort: true, title: 'ID',width: 80},
- {field: 'name', sort: true, title: '角色名'},
- {field: 'code', sort: true, title: 'Code'},
- {field: 'tenantId', sort: true, title: '应用标识'},
- {
- field: 'createTime', sort: true, templet: function (d) {
- return util.toDateString(d.createTime);
- }, title: '创建时间'
- },
- {field: 'enabled', width: 100,sort: true, templet: '#role-tpl-state', title: '状态'},
- {align: 'center', toolbar: '#role-table-bar', title: '操作',width: 250}
- ]]
+ { field: 'name', sort: true, title: '角色名' },
+ { field: 'code', sort: true, title: 'Code' },
+ { field: 'tenantId', sort: true, title: '应用标识' },
+ // {
+ // field: 'createTime', sort: true, templet: function (d) {
+ // return util.toDateString(d.createTime);
+ // }, title: '创建时间'
+ // },
+ { field: 'createTime', width: 250, sort: true, title: '创建时间', templet: "<div>{{layui.util.toDateString(d.createTime, 'yyyy/MM/dd HH:mm')}}</div>" },
+ { field: 'enabled', width: 100, sort: true, templet: '#role-tpl-state', title: '状态' },
+ { align: 'center', toolbar: '#role-table-bar', title: '操作', width: 320 }
+ ]],
+ done:function(res){
+ permissionsInput(res,config);
+ }
});
// 获取应用列表
@@ -109,8 +161,8 @@
layer.closeAll('loading');
if (0 === data.code) {
let selected = false;
- clientsAll=data.data;
- $.each(data.data,function(index,item){
+ clientsAll = data.data;
+ $.each(data.data, function (index, item) {
if (config.clientId === item.clientId) {
selected = true;
} else {
@@ -121,7 +173,7 @@
})
form.render();
} else {
- layer.msg(data.msg, {icon: 2, time: 500});
+ layer.msg(data.msg, { icon: 2, time: 2000 });
}
}, 'GET');
@@ -132,20 +184,47 @@
// 表单提交事件
form.on('submit(role-form-submit)', function (data) {
- data.field.tenantId=$('#role_clients_add').val();
+ data.field.tenantId = $('#role_clients_add').val();
let tenantId = $('#role_clients_add').val();
layer.load(2);
- admin.req('api-user/roles/saveOrUpdate?tenantId='+tenantId, JSON.stringify(data.field), function (data) {
+ admin.req('api-user/roles/saveOrUpdate?tenantId=' + tenantId, JSON.stringify(data.field), function (data) {
layer.closeAll('loading');
- // console.log(data);
if (data.code === 0) {
- layer.msg(data.msg, {icon: 1, time: 500});
+ layer.msg(data.msg, { icon: 1, time: 2000 });
table.reload('role-table');
layer.closeAll('page');
} else {
- layer.msg(data.msg, {icon: 2, time: 500});
+ layer.msg(data.msg, { icon: 2, time: 2000 });
}
}, $('#role-form').attr('method'));
+ return false;
+ });
+ // 表单提交事件
+ form.on('submit(role-form-submit-role)', function (data) {
+ var array=new Array();
+ var treeObj = $.fn.zTree.getZTreeObj('treeMenu-role');
+ var nodes = treeObj.getCheckedNodes(true);
+ $.each(nodes,function(i,item){
+ if(!item.children){
+ array.push(item.id);
+ }
+ })
+ if(array.length>0){
+ data.field.orgIds=array
+ }
+ data.field.roleId= data.field.id
+ layer.load(2);
+ admin.req('api-user/sysroleorganization', JSON.stringify(data.field), function (data) {
+ layer.closeAll('loading');
+ if (data.code === 0) {
+ layer.msg(data.msg, { icon: 1, time: 2000 });
+ table.reload('role-table');
+ layer.closeAll('page');
+ } else {
+ layer.msg(data.msg, { icon: 2, time: 2000 });
+ }
+ }, $('#role-form').attr('method'));
+ layer.closeAll('page');
return false;
});
@@ -157,7 +236,9 @@
} else if (obj.event === 'del') { //删除
doDelete(obj);
} else if (obj.event === 'auth') { // 权限分配
- showMenuDialog(obj.data.id,obj.data.tenantId);
+ showMenuDialog(obj.data.id, obj.data.tenantId);
+ } else if (obj.event === 'auth_role') {
+ showEditModelRole(data);//分配数据权限
}
});
@@ -170,9 +251,9 @@
}, function (data) {
layer.closeAll('loading');
if (data.code == 0) {
- layer.msg(data.msg, {icon: 1, time: 500});
+ layer.msg(data.msg, { icon: 1, time: 2000 });
} else {
- layer.msg(data.msg, {icon: 2, time: 500});
+ layer.msg(data.msg, { icon: 2, time: 2000 });
$(obj.elem).prop('checked', !obj.elem.checked);
form.render('checkbox');
}
@@ -184,9 +265,37 @@
$('#role-btn-search').click(function () {
var key = $('#role-search-key').val();
var value = $('#role-edit-value').val();
- table.reload('role-table', {where: {searchKey: key, searchValue: value}});
+ table.reload('role-table', { where: { searchKey: key, searchValue: value } });
});
+ var getData = function () {
+ admin.req('api-user/sysroleorganization/getTree', { is_del: 0 }, function (data) {
+ layer.closeAll('loading');
+ var data1 = [{
+ name: '常用文件夹',
+ id: 1,
+ children: [
+ { name: '所有未读', id: 11 },
+ { name: '置顶邮件', id: 12 },
+ { name: '标签邮件', id: 13 }]
+ }];
+ if (0 === data.code) {
+ var setting = {
+ check: { enable: true },
+ data: {
+ simpleData: {
+ enable: true
+ }
+ }
+ };
+ $.fn.zTree.init($('#treeMenu-role'), setting, data.data);
+ layer.closeAll('loading');
+
+ } else {
+ layer.msg(data.msg, { icon: 2, time: 2000 });
+ }
+ }, 'get');
+ }
// 显示编辑弹窗
var showEditModel = function (data) {
layer.open({
@@ -199,10 +308,10 @@
$('#role-form')[0].reset();
$('#role-form').attr('method', 'POST');
if (data) {
- $("input[name='code']").attr('disabled',true);
- $("input[name='code']").attr('class',"layui-input layui-disabled");
+ $("input[name='code']").attr('disabled', true);
+ $("input[name='code']").attr('class', "layui-input layui-disabled");
let selected = false;
- $.each(clientsAll,function(index,item){
+ $.each(clientsAll, function (index, item) {
if (data.tenantId === item.clientId) {
selected = true;
} else {
@@ -211,37 +320,67 @@
//往下拉菜单里添加元素
$('#role_clients_add').append(new Option(item.clientName, item.clientId, false, selected));
})
- $('#role_clients_add').attr('disabled',true);
+ $('#role_clients_add').attr('disabled', true);
form.render();
form.val('role-form', data);
$('#role-form').attr('method', 'POST');
}
- else{
- $.each(clientsAll,function(index,item){
+ else {
+ $.each(clientsAll, function (index, item) {
//往下拉菜单里添加元素
$('#role_clients_add').append(new Option(item.clientName, item.clientId));
})
- $('#role_clients_add').attr('disabled',false);
+ $('#role_clients_add').attr('disabled', false);
form.render();
$('#role-form').attr('method', 'POST');
}
}
});
};
+ //数据权限的点击事件
+ form.on('select(role_organization)', function (data) {
+ if (data.value == 2) {
+ $("#tree").show();
+ }else{
+ $("#tree").hide();
+ }
+ });
+ // 显示分配数据权限弹窗
+ var showEditModelRole = function (data) {
+ layer.open({
+ type: 1,
+ title: "分配数据权限",
+ area: '450px',
+ offset: '120px',
+ content: $('#role-model-role').html(),
+ success: function () {
+ $('#role-form')[0].reset();
+ $('#role-form').attr('method', 'POST');
+ if (data) {
+ getData();
+ if(data.type!=2){
+ $("#tree").hide();
+ }
+ form.render();
+ form.val('role-form', data);
+ }
+ }
+ });
+ };
// 删除
var doDelete = function (obj) {
layer.confirm('确定要删除吗？', function (i) {
let tenantId = $('#role_clients').val();
layer.close(i);
layer.load(2);
- admin.req('api-user/roles/' + obj.data.id+'?tenantId='+tenantId, {}, function (data) {
+ admin.req('api-user/roles/' + obj.data.id + '?tenantId=' + tenantId, {}, function (data) {
layer.closeAll('loading');
if (data.code === 0) {
- layer.msg(data.msg, {icon: 1, time: 500});
+ layer.msg(data.msg, { icon: 1, time: 2000 });
obj.del();
} else {
- layer.msg(data.msg, {icon: 2, time: 500});
+ layer.msg(data.msg, { icon: 2, time: 2000 });
}
}, 'DELETE');
});
@@ -249,7 +388,7 @@
// 菜单管理
- var showMenuDialog = function (roleId,tenantId) {
+ var showMenuDialog = function (roleId, tenantId) {
// let tenantId = $('#role_clients').val();
layer.open({
type: 1,
@@ -263,14 +402,14 @@
$(layero).children('.layui-layer-content').css('overflow-y', 'auto');
layer.load(2);
var setting = {
- check: {enable: true},
+ check: { enable: true },
data: {
simpleData: {
enable: true
}
}
};
- admin.req('api-user/menus/'+roleId+'/menus', {tenantId: tenantId}, function (data) {
+ admin.req('api-user/menus/' + roleId + '/menus', { tenantId: tenantId }, function (data) {
if (data.code === 0) {
$.fn.zTree.init($('#treeMenu'), setting, data.data);
layer.closeAll('loading');
@@ -290,13 +429,13 @@
data.roleId = roleId;
data.menuIds = ids;
- admin.req('api-user/menus/granted?tenantId='+tenantId, JSON.stringify(data) , function (data) {
+ admin.req('api-user/menus/granted?tenantId=' + tenantId, JSON.stringify(data), function (data) {
layer.closeAll('loading');
if (0 == data.code) {
- layer.msg(data.msg, {icon: 1, time: 500});
+ layer.msg(data.msg, { icon: 1, time: 2000 });
layer.close(index);
} else {
- layer.msg(data.msg, {icon: 2, time: 500});
+ layer.msg(data.msg, { icon: 2, time: 2000 });
}
}, 'POST');
}
@@ -304,8 +443,8 @@
}
// 应用下来框点击事件
- form.on('select(role_clients)', function(data){
- table.reload('role-table', {where: {tenantId: data.value}});
+ form.on('select(role_clients)', function (data) {
+ table.reload('role-table', { where: { tenantId: data.value } });
});
});
--
Gitblit v1.8.0