TMS/plg-tms-std-web-vue/public/jq/pages/usercenter/organization.html

<!--
 * guoj
 * 2018.11.01
 * 组织管理
 -->
 <style>
  .btn-group {
      width: 100%;
      padding-right: 10px;
      padding-top: 10px;
      text-align: right;
  }
  
  #org_ref,
  #org_save {
      background-color: #1E90FF;
  }
  
  #organ_Tree {
      width: 25%;
      height: 500px;
      border: 1px solid #ccc;
      float: left;
      overflow: hidden;
      margin-top: 10px;
      padding: 10px;
  }
  
  #organ_Form {
      width: 72%;
      height: 500px;
      margin-left: 10px;
      margin-top: 10px;
      border: 1px solid #ccc;
      float: left;
      padding: 10px;
      font-size: 16px;
  }
</style>
<div id="systemUserList" class="plg-tab-container">
  <div class="grid-container-full">
    <div class="plg-grid-panel">
      <div class="btn-group">
        <button class="layui-btn layui-btn-sm" id="org_ref"><i class=" layui-icon ">&#xe669;</i> 刷新</button>
        <button class="layui-btn layui-btn-sm " id="org_save"><i class="layui-icon">&#xe605;</i> 保存</button>
      </div>
      <div id="organ_Tree"></div>
      <div id="organ_Form"></div>
    </div>
  </div>
</div>		

		
<script type="text/javascript">
/**
 * guoj
 * 2018.11.01
 * 组织管理
 */
 (function () {
    var tree2;
    //数据
    var datas;
    var updata_tree;
    //新增节点
    var add_newTreeNode = "";
    var confing2 = {
        isExpand: true, //是否初始化时展开第一个父节点的所有内容
        renderer: "organ_Tree",
        skin: "menu-tree",
        initAjax: {
            url: "/api/service-users/organization/getOrganization/v1.0",
            type: "post"
        },
        toolBar: true,
        setting: {
            async: {
                enable: true,
                url: "/api/service-users/organization/getOrganizationByFatherid/v1.0",
                type: "post",
                contentType: "application/x-www-form-urlencoded",
                autoParam: ["p_id=p_fatherid"],
                dataFilter: function (reeId, parentNode, responseData) {

                    responseData.data.forEach(function (item) {

                        item.isParent = !item.p_leaf

                    });
                    return responseData.data
                },
                headers: {
                    "Authorization": token
                }
            },
            check: {
                enable: true
            },
            data: {
                key: {
                    name: "p_name",
                },
                simpleData: {
                    enable: true,
                    idKey: "p_id",
                    pIdKey: "p_fatherid",
                    rootPId: "0",
                    id: 'p_id',
                }
            },
            callback: {
                //单击事件的回调
                onClick: function (event, treeId, treeNode) {
                    getData(treeNode.p_id, treeNode);
                },
                //复选框的回调
                onCheck: function (e, treeId, treeNode) {

                    // var zTree = this.getZTreeObj(treeId);
                    //var nodes = zTree.getSelectedNodes();
                    //console.log('treeNode :', treeNode);
                    //console.log(treeNode.tId + ", " + treeNode.name + "," + treeNode.checked);
                },



            }
        }
    };


    var tree2 = new PlgZtree(confing2);
    var orgForm_opt = {
        renderer: 'organ_Form',
        items: [
            { type: "settings", position: "label-left", labelWidth: 80, inputWidth: 270 },
            { type: "input", name: "p_id", label: "组织id:", editable: false, validate: "NotEmpty", required: true },
            { type: "input", name: "p_name", label: "名称:" },
            { type: "input", name: "p_fatherid", label: "父级组织:", editable: false, validate: "NotEmpty", required: true },
            { type: 'newcolumn', offset: 10 },
            { type: "input", name: "p_enterpriseid", label: "企业id:" },
            { type: "input", name: "p_lelve", label: "层级:", editable: false, validate: "NotEmpty", required: true },
            { type: "checkbox", name: "p_status", label: "是否启用:" }
        ]
    };
    var orgForm = new PlgForm(orgForm_opt);
    orgForm.disableItem("p_fatherid");
    orgForm.disableItem("p_lelve");
    orgForm.disableItem("p_createtime");
    orgForm.disableItem("p_lastmodifytime");
    orgForm.disableItem("p_creatorid");
    orgForm.disableItem("p_creatorname");

    //添加菜单事件
    tree2.on("addTreeNodeClick", function (event, zTree, treeNode) {
        if (add_newTreeNode != "") {
            layer.msg("请保存后新增")
            return;
        }
        nodeObj.isParent = false;
        if (!treeNode) {
            nodeObj.isParent = true;
            nodeObj.parentMenuId = 0;
            nodeObj.p_lelve = 1;
        } else {
            nodeObj.parentMenuId = treeNode.p_id;
            nodeObj.p_fatherid = treeNode.p_id;
            nodeObj.id = new Date();
            nodeObj.p_lelve = parseInt(treeNode.p_lelve) + 1;
        }
        add_newTreeNode = zTree.addNodes(treeNode, nodeObj);
        zTree.selectNode(add_newTreeNode[0]);
        orgForm.clear();
        orgForm.setFormData(nodeObj);
    })
    //删除菜单事件
    tree2.on("delTreeNodeClick", function (event, zTree, treeNode) {
        if (treeNode.length > 0) {
            layer.confirm(`确认删除"${treeNode[0].p_name}"吗？`, function (index) {
                if (treeNode[0].p_createtime != null || treeNode[0].p_createtime != "") {
                    var data = treeNode[0].p_id;
                    data = { "p_id": data };
                    utilAjaxGJ("/api/service-users/organization/deleteOrganization/v1.0", "put", data, function (data) {
                        layer.msg(data.message);
                        orgForm.clear();
                    });
                }
                layer.close(index)
                zTree.removeNode(treeNode[0]);
            });
        } else {
            layer.alert("请选择删除项")
        }

    })
    var nodeObj = {
        //id
        id: Prolog.createRandomId(),
        name: "新菜单",
        systemId: null,
        //菜单id
        menuId: "m00" + Prolog.createRandomId(),
        parentMenuId: null,
        operateType: 0,
        level: 1,
        enable: true,
        leaf: false,
        path: "cyhx",
        sort: 0,
        //父级id
        p_fatherid: Prolog.createRandomId(),
        // p_id: Prolog.createRandomId(),
        p_name: "新菜单",
    };

    //保存
    document.querySelector("#org_save").onclick = function () {
        //如果设定了yes回调，需进行手工关闭
        var datas = orgForm.getFormData();
        var feik = orgForm.validate();
        if (!feik) {
            return;
        }
        if (datas.path == "cyhx") {
            utilAjaxGJ("/api/service-users/organization/insertOrganization/v1.0", "post", datas, function (data) {
                layer.msg(data.message);
                getData(data.data.p_id, "treeNode", 1);
            });
            return;
        } else {
            utilAjaxGJ("/api/service-users/organization/updateOrganization/v1.0", "put", datas, function (data) {
                layer.msg(data.message);
                getData(datas.p_id, "treeNode", 2);
            });
        }
    }
    //刷新
    document.querySelector("#org_ref").onclick = function () {
        layer.msg("刷新成功");
    }
    //根据id查询数据
    function getData(id, treeNode, type) {
        orgForm.clear();
        if (treeNode.path == "cyhx") {
            orgForm.setFormData(nodeObj);
        }
        utilSyncAjaxGJ("/api/service-users/organization/getPlgFxOrganizationById/v1.0", "get", { p_id: id }, function (data) {
            var datass = data.data;
            orgForm.setFormData(datass);
            if (type == 1) {
                for (var key in datass) {
                    add_newTreeNode[0][key] = datass[key];
                }
                tree2.treeObj.updateNode(add_newTreeNode[0]);
                add_newTreeNode = "";
            }
            if (type == 2) {
                var nodes = tree2.treeObj.getSelectedNodes();
                for (var key in datass) {
                    nodes[0][key] = datass[key];
                }
                tree2.treeObj.updateNode(nodes[0]);
            }
        });
    }
})()
</script>