You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

235 lines
7.9 KiB

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<!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>