|
|
layui.define(['ztree', 'jquery','axios'], function (exports) {
|
|
|
"use strict";
|
|
|
// 定义模块名称为 'selectOrg'
|
|
|
let MOD_NAME = 'selectOrg',
|
|
|
// 引入 layui 的 jQuery 模块
|
|
|
$ = layui.jquery,
|
|
|
// 引入 layui 的 axios 模块
|
|
|
axios = layui.axios,
|
|
|
// 引入 layui 的 ztree 模块
|
|
|
ztree = layui.ztree;
|
|
|
// 定义 selectOrg 类
|
|
|
let selectOrg = function () {
|
|
|
// 初始化版本号为 '1.1.0'
|
|
|
this.v = '1.1.0';
|
|
|
};
|
|
|
|
|
|
selectOrg.prototype.render = function (opt) {
|
|
|
// 获取目标元素
|
|
|
let elem = $(opt.elem);
|
|
|
// 获取渲染完成后的回调函数，默认为空函数
|
|
|
let tableDone = opt.done || function(){};
|
|
|
// 设置表格高度，默认为315px
|
|
|
opt.height = opt.height || 315;
|
|
|
// 设置表格最小宽度，默认为300px
|
|
|
opt.width = opt.width || 300;
|
|
|
// 为元素绑定点击事件，防止事件冒泡
|
|
|
elem.off('click').on('click', function(e) {
|
|
|
// 阻止事件冒泡
|
|
|
e.stopPropagation();
|
|
|
// 如果页面上已经存在treeSelect元素，则返回false
|
|
|
if($('div.treeSelect').length >= 1){
|
|
|
return false;
|
|
|
}
|
|
|
// 计算treeSelect的top和left位置
|
|
|
let t = elem.offset().top + elem.outerHeight()+"px";
|
|
|
let l = elem.offset().left +"px";
|
|
|
// 构建treeSelect的HTML结构
|
|
|
let treeBox = '<div class="treeSelect layui-anim layui-anim-upbit" style="left:'+l+';top:'+t+';border: 1px solid #d2d2d2;background-color: #fff;box-shadow: 0 2px 4px rgba(0,0,0,.12);padding:10px 10px 0 10px;position: absolute;z-index:66666666;margin: 5px 0;border-radius: 2px;min-width:'+opt.width+'px;max-height: 300px;overflow: auto;">';
|
|
|
// 如果opt.checked为真，则添加确定按钮
|
|
|
if(opt.checked){
|
|
|
treeBox += '<div><button type="button" style="float: right" class="layui-btn layui-btn-normal layui-btn-sm tree-sure">确定</button></div>';
|
|
|
}
|
|
|
// 添加ztree容器
|
|
|
treeBox += '<div class="ztree" id="ztree_xx">';
|
|
|
treeBox += '</div>';
|
|
|
// 将treeBox转换为jQuery对象
|
|
|
treeBox = $(treeBox);
|
|
|
// 将treeBox添加到body元素中
|
|
|
$('body').append(treeBox);
|
|
|
|
|
|
|
|
|
|
|
|
let setting = {
|
|
|
// 定义树结构的基本数据格式
|
|
|
data: {
|
|
|
simpleData: {
|
|
|
enable: true // 启用简单数据模式
|
|
|
}
|
|
|
},
|
|
|
// 定义点击事件的回调函数
|
|
|
callback:{
|
|
|
onClick:function (event, treeId, treeNode) {
|
|
|
// 如果未选中任何节点
|
|
|
if(!opt.checked){
|
|
|
$('.treeSelect').remove(); // 移除树选择元素
|
|
|
opt.done([treeNode]); // 执行完成回调函数并传递当前点击的节点
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
// 定义树节点的选中状态
|
|
|
check:{
|
|
|
enable: opt.checked // 根据外部传入的 opt.checked 决定是否启用节点选中功能
|
|
|
}
|
|
|
};
|
|
|
|
|
|
// 使用 axios 获取组织树数据，并初始化 ztree
|
|
|
axios.get('org/tree').then(function (response) {
|
|
|
// 初始化 ztree，传入目标元素、配置和数据
|
|
|
ztree.init($("#ztree_xx"), setting, response.data);
|
|
|
|
|
|
// 获取 ztree 对象
|
|
|
let treeObj = ztree.getZTreeObj("ztree_xx");
|
|
|
if(opt.checked){
|
|
|
// 如果 opt.checked 为真，初始化 checked 节点
|
|
|
opt.selected.forEach(v=>{
|
|
|
// 根据 id 获取节点
|
|
|
let checkNodes = treeObj.getNodesByParam("id", v, null);
|
|
|
// 设置节点为选中状态
|
|
|
treeObj.checkNode(checkNodes[0], true);
|
|
|
});
|
|
|
// 确定按钮点击事件，获取选中的节点并处理
|
|
|
$('.tree-sure').click(function () {
|
|
|
// 获取所有选中的节点
|
|
|
let arr = treeObj.getCheckedNodes(true);
|
|
|
// 调用 done 方法处理选中的节点
|
|
|
opt.done(arr);
|
|
|
// 更新 opt.selected 为选中节点的 id 数组
|
|
|
opt.selected = arr.map(item=>item.id);
|
|
|
// 移除树框
|
|
|
treeBox.remove();
|
|
|
});
|
|
|
}
|
|
|
|
|
|
}).catch(function (error) {
|
|
|
// 捕获并打印错误信息
|
|
|
console.log(error);
|
|
|
});
|
|
|
// 监听文档的 mouseup 事件，用于移除树选择框
|
|
|
$(document).mouseup(function(e){
|
|
|
// 获取用户设置的容器元素和树选择框元素
|
|
|
let userSet_con = $(''+opt.elem+',.treeSelect');
|
|
|
// 如果点击的目标不是用户设置的容器或其子元素，则移除树选择框
|
|
|
if(!userSet_con.is(e.target) && userSet_con.has(e.target).length === 0){
|
|
|
treeBox.remove();
|
|
|
}
|
|
|
});
|
|
|
|
|
|
}); // elem end
|
|
|
// 导出模块，创建新的 selectOrg 实例
|
|
|
exports(MOD_NAME, new selectOrg()); |
