mirror of https://gitee.com/stylefeng/guns
【org】修改组织架构样式
chenjinlong
parent
2a64e32d2a
commit
f482a14cc9
|
|
@ -22,7 +22,7 @@ public class OrganizationViewController {
|
||||||
*/
|
*/
|
||||||
@GetResource(name = "机构管理-首页-视图", path = "/view/organization")
|
@GetResource(name = "机构管理-首页-视图", path = "/view/organization")
|
||||||
public String indexView() {
|
public String indexView() {
|
||||||
return "/modular/system/organization/organization.html";
|
return "/modular/system/organization/organization_1.html";
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,235 @@
|
||||||
|
layui.use(['layer', 'form', 'table', 'util', 'admin', 'tree', 'dropdown', 'xmSelect', 'treeTable'], function () {
|
||||||
|
var $ = layui.jquery;
|
||||||
|
var layer = layui.layer;
|
||||||
|
var form = layui.form;
|
||||||
|
var table = layui.table;
|
||||||
|
var util = layui.util;
|
||||||
|
var admin = layui.admin;
|
||||||
|
var tree = layui.tree;
|
||||||
|
var xmSelect = layui.xmSelect;
|
||||||
|
var selObj, treeData; // 左树选中数据
|
||||||
|
|
||||||
|
/* 渲染树形 */
|
||||||
|
function renderTree() {
|
||||||
|
$.get(Feng.ctxPath + '/hrOrganization/treeLayui', function (res) {
|
||||||
|
tree.render({
|
||||||
|
elem: '#organizationTree',
|
||||||
|
onlyIconControl: true,
|
||||||
|
data: res.data,
|
||||||
|
click: function (obj) {
|
||||||
|
selObj = obj;
|
||||||
|
$('#organizationTree').find('.ew-tree-click').removeClass('ew-tree-click');
|
||||||
|
$(obj.elem).children('.layui-tree-entry').addClass('ew-tree-click');
|
||||||
|
insTb.reload({
|
||||||
|
where: {organizationId: obj.data.organizationId},
|
||||||
|
page: {curr: 1},
|
||||||
|
url: Feng.ctxPath + '/hrOrganization/page'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
$('#organizationTree').find('.layui-tree-entry:first>.layui-tree-main>.layui-tree-txt').trigger('click');
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
renderTree();
|
||||||
|
|
||||||
|
/* 添加 */
|
||||||
|
$('#organizationAddBtn').click(function () {
|
||||||
|
showEditModel(null, selObj ? selObj.data.parentId : null);
|
||||||
|
});
|
||||||
|
|
||||||
|
/* 修改 */
|
||||||
|
$('#organizationEditBtn').click(function () {
|
||||||
|
if (!selObj) return layer.msg('未选择机构', {icon: 2});
|
||||||
|
showEditModel(selObj.data);
|
||||||
|
});
|
||||||
|
|
||||||
|
/* 删除 */
|
||||||
|
$('#organizationDelBtn').click(function () {
|
||||||
|
if (!selObj) return layer.msg('未选择机构', {icon: 2});
|
||||||
|
doDel(selObj);
|
||||||
|
});
|
||||||
|
|
||||||
|
/* 显示表单弹窗 */
|
||||||
|
function showEditModel(mData, pid) {
|
||||||
|
admin.open({
|
||||||
|
type: 1,
|
||||||
|
area: '600px',
|
||||||
|
title: (mData ? '修改' : '添加') + '机构',
|
||||||
|
content: $('#organizationEditDialog').html(),
|
||||||
|
success: function (layero, dIndex) {
|
||||||
|
// 回显表单数据
|
||||||
|
form.val('organizationEditForm', mData);
|
||||||
|
// 表单提交事件
|
||||||
|
form.on('submit(organizationEditSubmit)', function (data) {
|
||||||
|
data.field.parentId = insXmSel.getValue('valueStr');
|
||||||
|
var loadIndex = layer.load(2);
|
||||||
|
$.get(mData ? '../../json/ok.json' : '../../json/ok.json', data.field, function (res) {
|
||||||
|
layer.close(loadIndex);
|
||||||
|
if (200 === res.code) {
|
||||||
|
layer.close(dIndex);
|
||||||
|
layer.msg(res.msg, {icon: 1});
|
||||||
|
renderTree();
|
||||||
|
} else {
|
||||||
|
layer.msg(res.msg, {icon: 2});
|
||||||
|
}
|
||||||
|
}, 'json');
|
||||||
|
return false;
|
||||||
|
});
|
||||||
|
// 渲染下拉树
|
||||||
|
var insXmSel = xmSelect.render({
|
||||||
|
el: '#organizationEditParentSel',
|
||||||
|
height: '250px',
|
||||||
|
data: treeData,
|
||||||
|
initValue: mData ? [mData.parentId] : (pid ? [pid] : []),
|
||||||
|
model: {label: {type: 'text'}},
|
||||||
|
prop: {
|
||||||
|
name: 'organizationName',
|
||||||
|
value: 'organizationId'
|
||||||
|
},
|
||||||
|
radio: true,
|
||||||
|
clickClose: true,
|
||||||
|
tree: {
|
||||||
|
show: true,
|
||||||
|
indent: 15,
|
||||||
|
strict: false,
|
||||||
|
expandedKeys: true
|
||||||
|
}
|
||||||
|
});
|
||||||
|
// 禁止弹窗出现滚动条
|
||||||
|
$(layero).children('.layui-layer-content').css('overflow', 'visible');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 删除 */
|
||||||
|
function doDel(obj) {
|
||||||
|
layer.confirm('确定要删除此机构吗？', {
|
||||||
|
skin: 'layui-layer-admin',
|
||||||
|
shade: .1
|
||||||
|
}, function (i) {
|
||||||
|
layer.close(i);
|
||||||
|
var loadIndex = layer.load(2);
|
||||||
|
$.get('../../json/ok.json', {
|
||||||
|
id: obj.data.organizationId,
|
||||||
|
}, function (res) {
|
||||||
|
layer.close(loadIndex);
|
||||||
|
if (200 === res.code) {
|
||||||
|
layer.msg(res.msg, {icon: 1});
|
||||||
|
renderTree();
|
||||||
|
} else {
|
||||||
|
layer.msg(res.msg, {icon: 2});
|
||||||
|
}
|
||||||
|
}, 'json');
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 渲染表格 */
|
||||||
|
var insTb = table.render({
|
||||||
|
elem: '#organizationUserTable',
|
||||||
|
data: [],
|
||||||
|
height: 'full-100',
|
||||||
|
page: true,
|
||||||
|
//toolbar: '#organizationUserTbToolBar',
|
||||||
|
cellMinWidth: 100,
|
||||||
|
cols: [[
|
||||||
|
{type: 'checkbox'},
|
||||||
|
{type: 'numbers'},
|
||||||
|
{field: 'orgId', hide: true, title: '主键id'},
|
||||||
|
{field: 'orgName', sort: true, title: '机构名称'},
|
||||||
|
{field: 'orgCode', sort: true, title: '机构编码'},
|
||||||
|
{field: 'orgSort', sort: true, title: '排序'},
|
||||||
|
{field: 'orgRemark', sort: true, title: '备注'},
|
||||||
|
{title: '操作', toolbar: '#organizationUserTbBar', align: 'center', width: 120, minWidth: 120}
|
||||||
|
]],
|
||||||
|
done: function () {
|
||||||
|
// 表格搜索
|
||||||
|
form.on('submit(organizationUserTbSearch)', function (data) {
|
||||||
|
insTb.reload({where: data.field, page: {curr: 1}});
|
||||||
|
return false;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
parseData: Feng.parseData
|
||||||
|
});
|
||||||
|
|
||||||
|
/* 表格工具条点击事件 */
|
||||||
|
table.on('tool(organizationUserTable)', function (obj) {
|
||||||
|
if (obj.event === 'edit') { // 修改
|
||||||
|
showEditModel2(obj.data);
|
||||||
|
} else if (obj.event === 'del') { // 删除
|
||||||
|
doDel2(obj);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
/* 表格头工具栏点击事件 */
|
||||||
|
table.on('toolbar(organizationUserTable)', function (obj) {
|
||||||
|
if (obj.event === 'add') { // 添加
|
||||||
|
showEditModel2();
|
||||||
|
} else if (obj.event === 'del') { // 删除
|
||||||
|
var checkRows = table.checkStatus('organizationUserTable');
|
||||||
|
if (checkRows.data.length === 0) {
|
||||||
|
layer.msg('请选择要删除的数据', {icon: 2});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
var ids = checkRows.data.map(function (d) {
|
||||||
|
return d.userId;
|
||||||
|
});
|
||||||
|
doDel2({ids: ids});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
/* 显示表单弹窗2 */
|
||||||
|
function showEditModel2(mData) {
|
||||||
|
admin.open({
|
||||||
|
type: 1,
|
||||||
|
title: (mData ? '修改' : '添加') + '用户',
|
||||||
|
content: $('#organizationUserEditDialog').html(),
|
||||||
|
success: function (layero, dIndex) {
|
||||||
|
// 回显表单数据
|
||||||
|
form.val('organizationUserEditForm', mData);
|
||||||
|
// 表单提交事件
|
||||||
|
form.on('submit(organizationUserEditSubmit)', function (data) {
|
||||||
|
data.field.organizationId = selObj ? selObj.data.organizationId : undefined;
|
||||||
|
var loadIndex = layer.load(2);
|
||||||
|
$.get(mData ? '../../json/ok.json' : '../../json/ok.json', data.field, function (res) {
|
||||||
|
layer.close(loadIndex);
|
||||||
|
if (200 === res.code) {
|
||||||
|
layer.close(dIndex);
|
||||||
|
layer.msg(res.msg, {icon: 1});
|
||||||
|
insTb.reload({page: {curr: 1}});
|
||||||
|
} else {
|
||||||
|
layer.msg(res.msg, {icon: 2});
|
||||||
|
}
|
||||||
|
}, 'json');
|
||||||
|
return false;
|
||||||
|
});
|
||||||
|
// 禁止弹窗出现滚动条
|
||||||
|
$(layero).children('.layui-layer-content').css('overflow', 'visible');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 删除2 */
|
||||||
|
function doDel2(obj) {
|
||||||
|
layer.confirm('确定要删除选中用户吗？', {
|
||||||
|
skin: 'layui-layer-admin',
|
||||||
|
shade: .1
|
||||||
|
}, function (i) {
|
||||||
|
layer.close(i);
|
||||||
|
var loadIndex = layer.load(2);
|
||||||
|
$.get('../../json/ok.json', {
|
||||||
|
id: obj.data ? obj.data.userId : '',
|
||||||
|
ids: obj.ids ? obj.ids.join(',') : ''
|
||||||
|
}, function (res) {
|
||||||
|
layer.close(loadIndex);
|
||||||
|
if (200 === res.code) {
|
||||||
|
layer.msg(res.msg, {icon: 1});
|
||||||
|
insTb.reload({page: {curr: 1}});
|
||||||
|
} else {
|
||||||
|
layer.msg(res.msg, {icon: 2});
|
||||||
|
}
|
||||||
|
}, 'json');
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,104 @@
|
||||||
|
@layout("/layout/_container.html",{js:["/assets/modular/system/organization/organization_1.js"]}){
|
||||||
|
<style>
|
||||||
|
/* 左树 */
|
||||||
|
#organizationTreeBar {
|
||||||
|
padding: 10px 15px;
|
||||||
|
border: 1px solid #e6e6e6;
|
||||||
|
background-color: #f2f2f2;
|
||||||
|
}
|
||||||
|
|
||||||
|
#organizationTree {
|
||||||
|
border: 1px solid #e6e6e6;
|
||||||
|
border-top: none;
|
||||||
|
padding: 10px 5px;
|
||||||
|
overflow: auto;
|
||||||
|
height: -webkit-calc(100vh - 125px);
|
||||||
|
height: -moz-calc(100vh - 125px);
|
||||||
|
height: calc(100vh - 125px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.layui-tree-entry .layui-tree-txt {
|
||||||
|
padding: 0 5px;
|
||||||
|
border: 1px transparent solid;
|
||||||
|
text-decoration: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.layui-tree-entry.ew-tree-click .layui-tree-txt {
|
||||||
|
background-color: #fff3e0;
|
||||||
|
border: 1px #FFE6B0 solid;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 右表搜索表单 */
|
||||||
|
#organizationUserTbSearchForm .layui-form-label {
|
||||||
|
box-sizing: border-box !important;
|
||||||
|
width: 90px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
#organizationUserTbSearchForm .layui-input-block {
|
||||||
|
margin-left: 90px !important;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<!-- 正文开始 -->
|
||||||
|
<div class="layui-fluid" style="padding-bottom: 0;">
|
||||||
|
<div class="layui-row layui-col-space15">
|
||||||
|
<div class="layui-col-md3">
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-body" style="padding: 10px;">
|
||||||
|
<!-- 树工具栏 -->
|
||||||
|
<div class="layui-form toolbar" id="organizationTreeBar">
|
||||||
|
<button id="organizationAddBtn" class="layui-btn layui-btn-sm icon-btn">
|
||||||
|
<i class="layui-icon"></i>添加
|
||||||
|
</button>
|
||||||
|
<button id="organizationEditBtn" class="layui-btn layui-btn-sm layui-btn-warm icon-btn">
|
||||||
|
<i class="layui-icon"></i>修改
|
||||||
|
</button>
|
||||||
|
<button id="organizationDelBtn"
|
||||||
|
class="layui-btn layui-btn-sm layui-btn-danger icon-btn">
|
||||||
|
<i class="layui-icon"></i>删除
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<!-- 左树 -->
|
||||||
|
<div id="organizationTree"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-col-md9">
|
||||||
|
<div class="layui-card">
|
||||||
|
<div class="layui-card-body" style="padding: 10px;">
|
||||||
|
<!-- 表格工具栏2 -->
|
||||||
|
<form class="layui-form toolbar">
|
||||||
|
<div class="layui-form-item">
|
||||||
|
<div class="layui-inline">
|
||||||
|
<label class="layui-form-label">组织名称:</label>
|
||||||
|
<div class="layui-input-inline">
|
||||||
|
<input name="orgName" class="layui-input" placeholder="组织名称"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-inline">
|
||||||
|
<label class="layui-form-label">组织编码:</label>
|
||||||
|
<div class="layui-input-inline">
|
||||||
|
<input name="orgCode" class="layui-input" placeholder="组织编码"/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layui-inline"> 
|
||||||
|
<button class="layui-btn icon-btn" lay-filter="dictTbSearch" lay-submit><i class="layui-icon"></i>搜索</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
<!-- 数据表格 -->
|
||||||
|
<table id="organizationUserTable" lay-filter="organizationUserTable"></table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 表格操作列 -->
|
||||||
|
<script type="text/html" id="organizationUserTbBar">
|
||||||
|
<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>
|
||||||
|
</script>
|
||||||
|
|
||||||
|
@}
|
||||||
Loading…
Reference in New Issue