|
|
<!DOCTYPE html>
|
|
|
<html lang="en">
|
|
|
<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.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0"
|
|
|
/>
|
|
|
<link rel="stylesheet" href="../../../static/css/font.css" />
|
|
|
<link rel="stylesheet" href="../../../static/css/weadmin.css" />
|
|
|
<link rel="stylesheet" href="../../../lib/ztree/zTreeStyle.css" />
|
|
|
<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
|
|
|
<!--[if lt IE 9]>
|
|
|
<script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
|
|
|
<script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
|
|
|
<![endif]-->
|
|
|
<style>
|
|
|
.ztree li span.button.add {
|
|
|
margin-left: 2px;
|
|
|
margin-right: -1px;
|
|
|
background-position: -144px 0;
|
|
|
vertical-align: top;
|
|
|
}
|
|
|
</style>
|
|
|
</head>
|
|
|
<body>
|
|
|
<div class="weadmin-nav">
|
|
|
<span class="layui-breadcrumb">
|
|
|
<a href="">首页</a>
|
|
|
<a href="">业务管理</a>
|
|
|
<a href="" id="switch">单位维护</a>
|
|
|
<a> <cite>部门维护</cite></a>
|
|
|
</span>
|
|
|
</div>
|
|
|
<div class="weadmin-body" style="height: 500px">
|
|
|
<div class="selectModel" style="height: 100%">
|
|
|
<!-- <div class="pc_selectModel_tree">
|
|
|
<div class="ztree" id="treeDemo"></div>
|
|
|
</div> -->
|
|
|
<div style="margin: 0 0 5px 10px;color: red;">
|
|
|
说明：以拖拽的方式进行操作。
|
|
|
<br/>
|
|
|
设置上下级关系：选中某人员按住鼠标拖拽至另一个人员上，即可设置上下级关系。
|
|
|
<br/>
|
|
|
取消上下级关系：选中下级人员，拖拽至树的下方空白区域，即可解除当前上下级关系。
|
|
|
<br/>
|
|
|
拖拽限制规则：若某人员已有下级，则不可将其拖拽至其他人员上。不能将某人员拖拽到下级人员上。
|
|
|
|
|
|
</div>
|
|
|
<div class="pc_selectModel_tree" style="height: 100%">
|
|
|
<ul id="treeDemo" class="ztree" style="height: 100%"></ul>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<script src="../../../lib/layui/layui.js"></script>
|
|
|
<script src="../../../lib/jquery-3.6.0.min.js"></script>
|
|
|
<script src="../../../lib/ztree/jquery.ztree.core-3.5.min.js"></script>
|
|
|
<script src="../../../lib/ztree/jquery.ztree.exedit-3.5.min.js"></script>
|
|
|
<script>
|
|
|
layui.extend({
|
|
|
admin: "{/}../../../static/js/admin",
|
|
|
});
|
|
|
layui.use(["jquery", "admin", "layer"], function () {});
|
|
|
</script>
|
|
|
<script type="text/javascript">
|
|
|
var zTreeObj;
|
|
|
var selectParentNodeId = null;
|
|
|
var setting = {
|
|
|
edit: {
|
|
|
drag: {
|
|
|
autoExpandTrigger: true,
|
|
|
prev: false,
|
|
|
inner: dropInner,
|
|
|
next: false,
|
|
|
},
|
|
|
enable: true,
|
|
|
showRemoveBtn: false,
|
|
|
showRenameBtn: false,
|
|
|
},
|
|
|
data: {
|
|
|
simpleData: {
|
|
|
enable: true,
|
|
|
},
|
|
|
},
|
|
|
callback: {
|
|
|
beforeDrag: beforeDrag,
|
|
|
beforeDrop: beforeDrop,
|
|
|
beforeDragOpen: beforeDragOpen,
|
|
|
onDrag: onDrag,
|
|
|
onDrop: onDrop,
|
|
|
onExpand: onExpand,
|
|
|
},
|
|
|
};
|
|
|
|
|
|
// var zNodes = [
|
|
|
// { id: 1, pId: 0, name: "张明远" },
|
|
|
// { id: 2, pId: 0, name: "李思涵" },
|
|
|
// { id: 3, pId: 0, name: "王浩宇" },
|
|
|
// { id: 4, pId: 0, name: "陈雨桐" },
|
|
|
// { id: 5, pId: 0, name: "刘子轩" },
|
|
|
// { id: 6, pId: 0, name: "赵雅琪" },
|
|
|
// { id: 7, pId: 0, name: "黄志强" },
|
|
|
// { id: 8, pId: 0, name: "周晓雯" },
|
|
|
// { id: 9, pId: 0, name: "吴天磊" },
|
|
|
// { id: 10, pId: 0, name: "林婉清" },
|
|
|
// ];
|
|
|
|
|
|
function dropInner(treeId, nodes, targetNode) {
|
|
|
if (targetNode && targetNode.dropInner === false) {
|
|
|
return false;
|
|
|
} else {
|
|
|
for (var i = 0, l = curDragNodes.length; i < l; i++) {
|
|
|
if (!targetNode && curDragNodes[i].dropRoot === false) {
|
|
|
return false;
|
|
|
} else if (
|
|
|
curDragNodes[i].parentTId &&
|
|
|
curDragNodes[i].getParentNode() !== targetNode &&
|
|
|
curDragNodes[i].getParentNode().childOuter === false
|
|
|
) {
|
|
|
return false;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
return true;
|
|
|
}
|
|
|
|
|
|
var log,
|
|
|
className = "dark",
|
|
|
curDragNodes,
|
|
|
autoExpandNode;
|
|
|
function beforeDrag(treeId, treeNodes) {
|
|
|
className = className === "dark" ? "" : "dark";
|
|
|
for (var i = 0, l = treeNodes.length; i < l; i++) {
|
|
|
if (treeNodes[i].drag === false) {
|
|
|
curDragNodes = null;
|
|
|
return false;
|
|
|
} else if (
|
|
|
treeNodes[i].parentTId &&
|
|
|
treeNodes[i].getParentNode().childDrag === false
|
|
|
) {
|
|
|
curDragNodes = null;
|
|
|
return false;
|
|
|
}
|
|
|
}
|
|
|
curDragNodes = treeNodes;
|
|
|
return true;
|
|
|
}
|
|
|
function beforeDragOpen(treeId, treeNode) {
|
|
|
autoExpandNode = treeNode;
|
|
|
return true;
|
|
|
}
|
|
|
function beforeDrop(treeId, treeNodes, targetNode, moveType, isCopy) {
|
|
|
className = className === "dark" ? "" : "dark";
|
|
|
return true;
|
|
|
}
|
|
|
function onDrag(event, treeId, treeNodes) {
|
|
|
if (treeNodes[0].pId) {
|
|
|
selectParentNodeId = treeNodes[0].pId;
|
|
|
}
|
|
|
className = className === "dark" ? "" : "dark";
|
|
|
}
|
|
|
function onDrop(event, treeId, treeNodes, targetNode, moveType, isCopy) {
|
|
|
if (targetNode) {
|
|
|
var targetNodeObj = zTreeObj.getNodeByParam("id", targetNode.id);
|
|
|
targetNodeObj.drag = false;
|
|
|
zTreeObj.updateNode(targetNodeObj);
|
|
|
}
|
|
|
if (treeNodes) {
|
|
|
var selectNodeObj = zTreeObj.getNodeByParam("id", treeNodes[0].id);
|
|
|
if (selectNodeObj.pId) {
|
|
|
selectNodeObj.dropInner = false;
|
|
|
zTreeObj.updateNode(selectNodeObj);
|
|
|
} else {
|
|
|
selectNodeObj.dropInner = true;
|
|
|
zTreeObj.updateNode(selectNodeObj);
|
|
|
}
|
|
|
|
|
|
var child_person_id = selectNodeObj.id;
|
|
|
var parent_person_id = "-1";
|
|
|
if (selectNodeObj.pId) {
|
|
|
parent_person_id = selectNodeObj.pId;
|
|
|
}
|
|
|
|
|
|
$.ajax({
|
|
|
type: "POST",
|
|
|
async: false,
|
|
|
url: "/dsBase/companyUser/saveParentChild",
|
|
|
dataType: "json",
|
|
|
data: {
|
|
|
parent_person_id,
|
|
|
child_person_id,
|
|
|
},
|
|
|
success: function (res) {
|
|
|
console.log(res);
|
|
|
},
|
|
|
});
|
|
|
}
|
|
|
if (selectParentNodeId) {
|
|
|
var selectParnetNodeObj = zTreeObj.getNodeByParam(
|
|
|
"id",
|
|
|
selectParentNodeId
|
|
|
);
|
|
|
if (selectParnetNodeObj.children.length == 0) {
|
|
|
selectParnetNodeObj.drag = true;
|
|
|
zTreeObj.updateNode(selectParnetNodeObj);
|
|
|
}
|
|
|
}
|
|
|
className = className === "dark" ? "" : "dark";
|
|
|
}
|
|
|
function onExpand(event, treeId, treeNode) {
|
|
|
if (treeNode === autoExpandNode) {
|
|
|
className = className === "dark" ? "" : "dark";
|
|
|
}
|
|
|
}
|
|
|
|
|
|
$(document).ready(function () {
|
|
|
$.ajax({
|
|
|
type: "GET",
|
|
|
async: false,
|
|
|
url: "/dsBase/companyUser/getTreeData",
|
|
|
dataType: "json",
|
|
|
success: function (res) {
|
|
|
zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, res.data);
|
|
|
zTreeObj.expandAll(true);
|
|
|
},
|
|
|
});
|
|
|
});
|
|
|
</script>
|
|
|
</body>
|
|
|
</html>
|
