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")
|
||||
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