用js写一个组织架构选择人和选择部门的组件

好的，下面是一个用纯 JavaScript 实现的组织架构选择人和选择部门的组件：

<!-- HTML 结构 -->
<div id="org-tree"></div>

// JavaScript 代码
var orgTree = {
  // 组织架构数据
  data: [
    {
      id: "1",
      name: "总经理办公室",
      type: "department",
      children: [
        {
          id: "11",
          name: "财务部",
          type: "department",
          children: [
            {
              id: "111",
              name: "会计组",
              type: "department",
              children: [
                {
                  id: "1111",
                  name: "张三",
                  type: "user"
                },
                {
                  id: "1112",
                  name: "李四",
                  type: "user"
                }
              ]
            },
            {
              id: "112",
              name: "出纳组",
              type: "department",
              children: [
                {
                  id: "1121",
                  name: "王五",
                  type: "user"
                }
              ]
            }
          ]
        },
        {
          id: "12",
          name: "市场部",
          type: "department",
          children: [
            {
              id: "121",
              name: "市场组",
              type: "department",
              children: [
                {
                  id: "1211",
                  name: "赵六",
                  type: "user"
                }
              ]
            }
          ]
        }
      ]
    }
  ],
  // 初始化组织架构树
  init: function(element, onSelect) {
    // 保存当前选择的节点
    this.currentNode = null;
    // 创建根节点
    var rootNode = document.createElement("div");
    rootNode.className = "org-tree-node root-node";
    rootNode.innerHTML = '<span>组织架构</span>';
    // 创建树容器
    var treeContainer = document.createElement("div");
    treeContainer.className = "org-tree";
    treeContainer.appendChild(rootNode);
    // 递归创建子节点
    this.createNode(this.data, rootNode, onSelect);
    // 将树容器插入到指定元素中
    element.appendChild(treeContainer);
  },
  // 创建节点
  createNode: function(data, parentNode, onSelect) {
    for (var i = 0; i < data.length; i++) {
      var node = data[i];
      // 创建节点元素
      var nodeElement = document.createElement("div");
      nodeElement.className = "org-tree-node";
      nodeElement.setAttribute("data-id", node.id);
      nodeElement.setAttribute("data-type", node.type);
      nodeElement.innerHTML = "<span>" + node.name + "</span>";
      // 添加点击事件
      nodeElement.onclick = function() {
        // 获取节点 ID 和类型
        var id = this.getAttribute("data-id");
        var type = this.getAttribute("data-type");
        // 如果当前节点已被选中，则取消选中
        if (this.classList.contains("selected")) {
          this.classList.remove("selected");
          orgTree.currentNode = null;
          onSelect && onSelect(null, null);
        } else {
          // 否则选中该节点，并将当前节点设置为选中节点
          if (orgTree.currentNode) {
            orgTree.currentNode.classList.remove("selected");
          }
          this.classList.add("selected");
          orgTree.currentNode = this;
          onSelect && onSelect(id, type);
        }
      };
      // 将节点元素插入到父节点中
      parentNode.appendChild(nodeElement);
      // 如果节点有子节点，则递归创建子节点
      if (node.children && node.children.length > 0) {
        var childrenNode = document.createElement("div");
        childrenNode.className = "org-tree-children";
        nodeElement.appendChild(childrenNode);
        this.createNode(node.children, childrenNode, onSelect);
      }
    }
  }
};

使用方法：

// 选择部门
orgTree.init(document.getElementById("org-tree"), function(id, type) {
  if (type === "department") {
    console.log("选择了部门：" + id);
  }
});

// 选择人员
orgTree.init(document.getElementById("org-tree"), function(id, type) {
  if (type === "user") {
    console.log("选择了人员：" + id);
  }
});

这个组件会在指定的元素中创建一个组织架构树，支持选择部门和人员。当选择部门时，会返回部门的 ID；当选择人员时，会返回人员的 ID。您可以根据需要自行修改代码。