<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="UTF-8">
		<title>组织架构</title>
		<link rel="stylesheet" th:href="@{/js/plugins/bootstrapselect/css/tree.css}" />
		<link rel="stylesheet" th:href="@{/js/plugins/bootstrapselect/css/base.css}" />
		<link rel="stylesheet" th:href="@{/css/common/page_new.css}" />
		<link rel="stylesheet" th:href="@{/js/plugins/bootstrapselect/css/product_list.css}" />
		<link rel="stylesheet" th:href="@{/js/plugins/ztree/zTreeStyle.css}" />
		<link rel="stylesheet"  th:href="@{/css/layui.css}"  media="all">
	</head>
	<style>
		.box .search_pro span {
			width: 24%;
			justify-content: normal;
			align-items: center;
			margin-left: 10px;
			float: left;
			margin-top: 10px;
		}
		.ztree * {font-size: 10pt;font-family:"Microsoft Yahei",Verdana,Simsun,"Segoe UI Web Light","Segoe UI Light","Segoe UI Web Regular","Segoe UI","Segoe UI Symbol","Helvetica Neue",Arial}
		.ztree li ul{ margin:0; padding:0}
		.ztree li {line-height:30px;}
		.ztree li a {width:200px;height:30px;padding-top: 0px;}
		.ztree li a:hover {text-decoration:none; background-color: #E7E7E7;}
		/*.ztree li a span.button.switch {visibility:hidden}*/
		.ztree.showIcon li a span.button.switch {visibility:visible}
		.ztree li a.curSelectedNode {background-color:#D4D4D4;border:0;height:30px;}
		.ztree li span {line-height:30px;}
		.ztree li span.button.switch {width: 16px;height: 16px;}

		.ztree li a.level0 span {font-size: 150%;font-weight: bold;}
		.ztree li span.button {
						margin-top: -7px;
						width: 50px;
						height:50px;
						background: url("../../../js/plugins/ztree/img/left_menuForOutLook.png")no-repeat;
		}
		.ztree li span.button.switch.level0 {width: 20px; height:20px}
		.ztree li span.button.switch.level1 {width: 20px; height:20px}
		.ztree li span.button.noline_open {background-position: 0 0;}
		.ztree li span.button.noline_close {background-position: -18px 0;}
		.ztree li span.button.noline_open.level0 {background-position: 0 -18px;}
		.ztree li span.button.noline_close.level0 {background-position: -18px -18px;}

		.ztree li span.button.switch.level0 {visibility:hidden; width:1px;}
		.ztree li ul.level0 {padding:0; background:none;}
		.layui-table th{
			text-align: center;
		}
	</style>
	<body style="width: 100%;">
	<input type="hidden" id="pages">
	<input type="hidden" id="pid">
	<input type="hidden" id="id">
	<input type="hidden" id="pids" value="a">
	<input type="hidden" id="type" value="2">
		<div class="centent" style="height:auto;position: fixed;float:left;width: 15%!important;box-sizing: border-box;">
			<input type="text" id="key" value="" style="border: 1px solid #EEEEEE;height: 29px;margin-left: 10px;margin-top: 10px;text-indent: 11px;" class="empty"  placeholder="请输入关键字"/>
			<div class="treebox scrollXY">
				<div class="zTreeDemoBackground left">
					<ul id="treeDemo" class="ztree"></ul>
				</div>
			</div>
		</div>
	<!--right-->
	<div class="box" style="float: left;max-width: 85%;height: 680px;box-sizing: border-box;margin: 0;padding: 10px;">
		<h2><span></span>组织架构列表<button onclick="reload()">刷新</button></h2>

		<div class="search"  id="organization" hidden>
			<p class="title">条件查询</p>
			<p class="search_pro" style="padding-left: 0px;">
				<label class="layui-form-label">组织名称:</label>
				<input style="width: 200px" type="text" name="name" lay-verify="title" autocomplete="off" placeholder="请输入组织名称" class="layui-input">
				<span class="cx">
					<button style="background-color: #005ba7;margin-left: 10px;margin-top: -10px" class="layui-btn" onclick="queryDeviceRecords(1)">查询</button>
				</span>
				<button id="addOr" style="background-color: #005ba7;margin-left: 345px;" class="layui-btn layui-btn-radius" onclick="add(1)">添加组织</button></span>
				<button id="addMe" style="background-color: #005ba7" class="layui-btn layui-btn-radius" onclick="add(2)">添加人员</button></span>
			</p>
		</div>

		<div class="search" hidden id="user">
			<p class="title">条件查询</p>
			<p class="search_pro" style="padding-left: 0px;">
				<label class="layui-form-label">人员名称:</label>
				<input style="width: 200px" type="text" name="userName" lay-verify="title" autocomplete="off" placeholder="请输入人员名称" class="layui-input">
				<span class="cx">
					<button style=" background-color: #005ba7;margin-left: 10px;margin-top: -10px" class="layui-btn" onclick="queryDeviceRecords(2)">查询</button>
				</span>
				<button id="addOr" style=" background-color: #005ba7;margin-left: 345px;" class="layui-btn layui-btn-radius" onclick="add(1)">添加组织</button></span>
				<button id="addMe" style="background-color: #005ba7" class="layui-btn layui-btn-radius" onclick="add(2)">添加人员</button></span>
			</p>
		</div>




		<div class="content">
			<p class="title list_ti"><span>数据列表</span>
			</p>
			<table border="" cellspacing="" cellpadding="" class="layui-table" lay-size="sm">
			</table>
		</div>
		<div class="footer" style="display: flex;justify-content: space-between;align-items:center;padding:10px 10px;border:1px solid #e4e4e4;font-size:14px;color:#999">
			<div style="width:auto;height:25px;display: flex;">
			</div>
			<div class="message">
				共<i class="blue" id="total" style="color: red"></i>条记录，当前显示第&nbsp;<i class="blue" id="pageNum" style="color: red"></i>&nbsp;页
			</div>
			<div class="pagediv">

			</div>
		</div>
	</div>
	</body>
	<script th:src="@{/js/plugins/bootstrapselect/jquery.min.js}"></script>
	<script type="text/javascript" th:src="@{/js/plugins/bootstrapselect/page_new.js}"></script>
	<script type="text/javascript" th:src="@{/js/plugins/bootstrapselect/treescroll.min.js}"></script>
	<script th:src="@{/js/plugins/layer/layer.js}"></script>
	<script th:src="@{/js/plugins/ztree/jquery.ztree.core.js}"></script>
	<script th:src="@{/js/plugins/ztree/jquery.ztree.exhide.js}"></script>
	<script th:src="@{/js/plugins/ztree/fuzzysearch.js}"></script>

	<script type="text/javascript">
		$(function () {
			$.post(
				"/bpm/user/getOrganization",
				{
                    pageSize:10,
                    pageNum:1,
				},
                function (data) {
                    $("#add").hide();
                    var size = data.data.pageInfo.pages;
                    if (!data.data.pageInfo.pages){
                        size = 0;
                    }
                    var current = data.data.pageInfo.pageNum;
                    /*分页*/
                    $(".pagediv").createPage({
                        pageNum: size,//总页码
                        current: current,//当前页
                        shownum: 10,//每页显示个数
                        showPageNum: true, //显示总页数
                        showToPage: true, //显示跳转页码
                        backfun: function (page) {
                            flushHtml(page.current);
                        }
                    });
                    flushHtml(1);
                },"json"
			)
            var setting = {
                check: {
                    enable: true//checkbox
                },
                view: {
                    showLine: false,
                    showIcon: false,
                    selectedMulti: false,
                    nameIsHTML: true, //allow html in node name for highlight use
                    dblClickExpand: dblClickExpand,
                    addDiyDom: addDiyDom
                },
                edit: {
                    enable: false,
                    editNameSelectAll: false
                },
                data: {
                    simpleData: {
                        enable: true
                    }
                },
                callback: {
                    beforeClick: beforeClick
                }
            };

            function dblClickExpand(treeId, treeNode) {
                return treeNode.level > 0;
            }

            function showIconForTree(treeId, treeNode) {
                return !treeNode.isParent;
            };

            var zNodes =[];
            //加载zTree
            var  treeObj ;
			$.post(
			    "/bpm/user/getOrganizationList", function (data) {
                    zNodes = data.data;
                    treeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);
                    fuzzySearch('treeDemo','#key',null,true); //initialize fuzzysearch function
                },'json'
			)


            function addDiyDom(treeId, treeNode) {
                var spaceWidth = 5;
                var switchObj = $("#" + treeNode.tId + "_switch"),
                    icoObj = $("#" + treeNode.tId + "_ico");
                switchObj.remove();
                icoObj.before(switchObj);

                if (treeNode.level > 1) {
                    var spaceStr = "<span style='display: inline-block;width:" + (spaceWidth * treeNode.level)+ "px'></span>";
                    switchObj.before(spaceStr);
                }
            }

            function beforeClick(treeId, treeNode) {
                $("#pid").val(treeNode.pId);
                $("#id").val(treeNode.id);
                $.post(
                    "/bpm/user/getOrganization",
                    {
                        pageSize:10,
                        pageNum:1,
                        id:treeNode.id,
						pId:treeNode.pId
                    },
                    function (data) {
                        $("[name='name']").val("");
                        var size = data.data.pageInfo.pages;
                        if (!data.data.pageInfo.pages){
                            size = 0;
                        }
                        var current = data.data.pageInfo.pageNum;
                        /*分页*/
                        $(".pagediv").createPage({
                            pageNum: size,//总页码
                            current: current,//当前页
                            shownum: 10,//每页显示个数
                            showPageNum: true, //显示总页数
                            showToPage: true, //显示跳转页码
                            backfun: function (page) {
                                flushHtml(page.current,treeNode.id,treeNode.pId);
                            }
                        });
                        flushHtml(1,treeNode.id,treeNode.pId);
                    },"json"
                )
            }

        })

        function flushHtml(current,id,pId) {
            var pageNum = 1;
            if(current){
                pageNum = current;
            }
            var name = $("[name='name']").val();
            $.post(
                "/bpm/user/getOrganization",
                {
                    pageSize:10,
                    pageNum:pageNum,
                    id:id,
					pId:pId,
                    name:name,
                },
                function (data) {
                    selectListAll(data.data.pageInfo,data.data.type);
                },'json'
            );
        }
        function selectListAll(data,type) {
            var pages = data.pages;
            var total = data.total;
            var pageNum = data.pageNum;
            data = data.list;
            var content = '';
            if (type == 2){
                $("#user").show()
                $("#organization").hide()
                $("#addMe").show();
                $("#addOr").show();
                $("#spanB").html("人员信息：")
                content += "<thead><tr><th>人员编号</th><th>人员名称</th><th>职位</th><th>部门</th><th>所属组织编码</th><th>加入时间</th><th >操作</th></tr></thead>";
			}else {
                $("#user").hide()
                $("#organization").show()
                $("#addOr").show();
                $("#addMe").hide();
                $("#spanB").html("组织名称：")
                content += "<thead><tr><th>序号</th><th>组织名称</th><th>上级组织</th><th >操作</th></tr></thead>";
            }
            if(data!=null){
                if (type==2) {
                    for (var i in data) {
                        content += "<tr><td>"+ data[i].id + "</td><td>" + data[i].name + "</td><td>" + data[i].position + "</td><td>" + data[i].department + "</td><td>" + data[i].code +"</td><td>" + data[i].createdTime + "</td><td>" + "<a href='#' onclick='gotoDetails(\"" + data[i].name + "\",\"" + data[i].position + "\",\"" + data[i].department + "\",\"" + data[i].code + "\",\"" + data[i].createdTime + "\")'>查看</a></td></tr>";
                    }
                }else{
                    for (var i in data) {
                        var a = 1;
                        var c = Number(a) + Number(i);
                        content += "<tr><td>" + c + "</td><td>" + data[i].name + "</td><td>" + data[i].parentName + "</td><td><a href='#' onclick='dele(" + data[i].id + ",\"" + data[i].name + "\")'>删除</a> <a href='#' onclick='edit(" + data[i].id + ")'>编辑</a></td></tr>";
                    }
				}
                $('#pages').text(pages);
                $('#total').text(total);
                $('#pageNum').text(pageNum);
            }else{
                content+= '<div class="tipImg"><img src="/images/non.png" ><p class="tipNon">暂无数据</p></div>';
                $('#pages').text(0);
                $('#total').text(0);
                $('#pageNum').text(0);
            }
            $('table').html(content);
        }

        function gotoDetails(name,position,department,code,createdTime){
            var content = '<div><p>人员名称：'+name+'</p><p>职位：'+position+'</p><p>部门：'+department+'</p><p>所属组织编码：'+code+'</p><p>加入时间：'+createdTime+'</p></div>';
            layer.alert(content)
        }

        /*条件查询*/
        function queryDeviceRecords(typea) {
            var pId = $("#pid").val();
            var id = $("#id").val();
            var type = $("#type").val();
            var name;
            if (typea ==1 ){
                name = $("[name='name']").val();
			}else if(typea ==2){
                name = $("[name='userName']").val();
			}
            $.post(
                "/bpm/user/getOrganization",
                {
                    pageSize:10,
                    pageNum:1,
                    pId:pId,
                    id:id,
                    name:name,
                    type:type
                },function (data) {
                    selectListAll(data.data.pageInfo,data.data.type);
                    var size = data.data.pageInfo.pages;
                    if (!data.data.pageInfo.pages){
                        size = 0;
                    }
                    /*分页*/
                    $(".pagediv").createPage({
                        pageNum: size,//总页码
                        current: 1,//当前页
                        shownum: 10,//每页显示个数
                        showPageNum: true, //显示总页数
                        showToPage: true, //显示跳转页码
                        backfun: function (page) {
                            flushHtml(page.current,id);
                        }
                    });
                },'json')
        }

        function dele(id,name) {
            var pId = $("#pid").val();
            if(pId==''){
                pId=0;
            }
            layer.open({
                id:1,
                type: 1,
                title:'确认删除吗',
                skin:'layui-layer-rim',
                area:['300px', '165px'],
                content: '<div style="margin-top: 22px;margin-left: 8px;">您确定删除'+name+"及所有下级吗？</div>"
                ,
                btn:['保存','取消'],
                btn1: function (index,layero) {
					$.post(
					    "/bpm/user/deleteOrganization",
						{"id":id,"pId":pId},
						function (data) {
					        console.log(data)
                            if (data.code==200){
                                layer.msg('操作成功',{icon:1,time:1000},function () {
                                    location.reload();
                                })
                            }else{
                                layer.msg(data.message,{icon:2,time:1000});
                            }
                        },'json'
					)
                },
                btn2:function (index,layero) {
                    layer.close(index);
                }
            });
        }

        function edit(id) {
            var pId = $("#pid").val();
            if (pId==1||pId==''){
                var content = '<div style="margin-top: 13px;margin-left: 27px;"><span ><b>组织名称：</b><input type="text" value="" placeholder="请输入组织名称" name="oName" style="color: black;height: 30px;border: 1px solid #EEEEEE;text-indent: 5px;margin-left: 16px;"/></span><br>\n' +
                    '\t\t<span ><b>组织简写(英)：</b><input type="text" value="" placeholder="请输入组织简写" name="abbreviationName" style="color: black;height: 30px;border: 1px solid #EEEEEE;text-indent: 5px;"/></span><br>\n';
            }else {
                var content = '<div style="margin-top: 13px;margin-left: 27px;"><span ><b>人员名称：</b><input type="text" value="" placeholder="请输入人员名称" name="oName" style="color: black;height: 30px;border: 1px solid #EEEEEE;text-indent: 5px;margin-left: 16px;"/></span><br>\n' +
                    '\t\t<span ><b style="margin-left: 32px;">职位：</b><input type="text" value="" placeholder="请输入职位" name="position" style="color: black;height: 30px;border: 1px solid #EEEEEE;text-indent: 5px;    margin-left: 16px;"/></span><br>\n';
            }
            //联系方式验证规则
            var tel=/^[1][3,4,5,6,7,8,9][0-9]{9}$/;
            var phones=/^(\d3,4\d3,4|\d{3,4}-)?\d{7,8}$/;

            if(pId==1 || pId==''){
                layer.open({
                    id:1,
                    type: 1,
                    title:'添加组织',
                    skin:'layui-layer-rim',
                    area:['360px', '330px'],

                    content: content
                    ,
                    btn:['保存','取消'],
                    btn1: function (index,layero) {
                        var name = $("[name='oName']").val();
                        var abbreviationName = $("[name='abbreviationName']").val();
                        if (name==''){
                            layer.msg("组织名称不能为空");
                        }else if (abbreviationName==''){
                            layer.msg("组织简写不可为空");
                        }else {
                            $.post(
                                "/bpm/user/editOrganization",
                                {
                                    "name":name,
                                    "abbreviationName":abbreviationName,
                                    "id":id
                                },
                                function (data) {
                                    if (data.code==200){
                                        layer.msg('操作成功',{icon:1,time:1000},function () {
                                            location.reload();
                                        })
                                    }else{
                                        layer.msg(data.message,{icon:2,time:1000});
                                    }
                                },'json'
                            )
                        }
                    },
                    btn2:function (index,layero) {
                        layer.close(index);
                    }
                });
                $.post(
                    "/bpm/user/getOrganizationInfo",
                    {"id":id},
                    function (data) {
                        data = data.data;
                        $("[name='oName']").val(data.name);
                        $("[name='abbreviationName']").val(data.abbreviationName);
                    },'json'
                )
			}else {
                layer.open({
                    id:1,
                    type: 1,
                    title:'添加组织',
                    skin:'layui-layer-rim',
                    area:['360px', '330px'],

                    content: content
                    ,
                    btn:['保存','取消'],
                    btn1: function (index,layero) {
                        var name = $("[name='oName']").val();
                        var abbreviationName = $("[name='abbreviationName']").val();
                        if (name==''){
                            layer.msg("组织名称不能为空");
                        }else if (abbreviationName==''){
                            layer.msg("组织简写不可为空");
                        }else {
                            $.post(
                                "bpm/user/editOrganization",
                                {
                                    "name":name,
                                    "abbreviationName":abbreviationName,
                                    "id":id
                                },
                                function (data) {
                                    if (data.code==200){
                                        layer.msg('操作成功',{icon:1,time:1000},function () {
                                            location.reload();
                                        })
                                    }else{
                                        layer.msg(data.message,{icon:2,time:1000});
                                    }
                                },'json'
                            )
                        }
                    },
                    btn2:function (index,layero) {
                        layer.close(index);
                    }
                });
                $.post(
                    "/bpm/user/getOrganizationInfo",
                    {"id":id},
                    function (data) {
                        data = data.data;
                        $("[name='oName']").val(data.name);
                        $("[name='abbreviationName']").val(data.abbreviationName);
                    },'json'
                )
			}


        }

		function add(type) {
            var pId = $("#pid").val();
            var id = $("#id").val();
            if (type==1){
                var content = '<div style="margin-top: 13px;margin-left: 27px;"><span ><b>组织名称：</b><input type="text" value="" placeholder="请输入组织名称" name="oName" style="color: black;height: 30px;border: 1px solid #EEEEEE;text-indent: 5px;margin-left: 26px;"/></span><br>\n' +
                    '\t\t<span ><b>组织简写(英)：</b><input type="text" value="" placeholder="请输入组织简写" name="abbreviationName" style="color: black;height: 30px;border: 1px solid #EEEEEE;text-indent: 5px;"/></span><br>\n';
			}else if (pId==1&& type==2){
                var content = '<div style="margin-top: 13px;margin-left: 27px;"><span ><b>人员名称：</b><input type="text" value="" placeholder="请输入人员名称" name="oName" style="color: black;height: 30px;border: 1px solid #EEEEEE;text-indent: 5px;margin-left: 16px;"/></span><br>\n' +
                    '\t\t<span ><b>所在部门：</b><select name="areaId" id="areaId" style="color: black;height: 30px;border: 1px solid #EEEEEE;text-indent: 5px;margin-left: 16px;width: 159px;"></select></span><br>\n' +
                    '\t\t<span ><b style="margin-left: 32px;">职位：</b><input type="text" value="" placeholder="请输入职位" name="position" style="color: black;height: 30px;border: 1px solid #EEEEEE;text-indent: 5px;    margin-left: 16px;"/></span><br>\n';
            }
			else {
                var content = '<div style="margin-top: 13px;margin-left: 27px;"><span ><b>人员名称：</b><input type="text" value="" placeholder="请输入人员名称" name="oName" style="color: black;height: 30px;border: 1px solid #EEEEEE;text-indent: 5px;margin-left: 16px;"/></span><br>\n' +
                    '\t\t<span ><b style="margin-left: 32px;">职位：</b><input type="text" value="" placeholder="请输入职位" name="position" style="color: black;height: 30px;border: 1px solid #EEEEEE;text-indent: 5px;    margin-left: 16px;"/></span><br>\n';
			}
            //联系方式验证规则
            var tel=/^[1][3,4,5,6,7,8,9][0-9]{9}$/;
            var phones=/^(\d3,4\d3,4|\d{3,4}-)?\d{7,8}$/;

            if (pId==1){
                var desc = "<option value=''>"+'请选择'+"</option>";
                $.post(
                    "/bpm/user/getAreaAll",
                    {
                        "id":id
                    },
                    function (data) {
                        data=data.data
                        for(var i in data){
                            desc+="<option value='"+data[i].id+"'>"+data[i].name+"</option>";
                        }
                        $("#areaId").html(desc)
                    },'json'
                )
            }

            if(type==1){

                layer.open({
                    id:1,
                    type: 1,
                    title:'添加组织',
                    skin:'layui-layer-rim',
                    area:['360px', '330px'],

                    content: content
                    ,
                    btn:['保存','取消'],
                    btn1: function (index,layero) {
                        var name = $("[name='oName']").val();
                        var abbreviationName = $("[name='abbreviationName']").val();
                        if (name==''){
                            layer.msg("组织名称不能为空");
                        }else if (abbreviationName==''){
                            layer.msg("组织简称不可为空");
                        }else {
                            $.post(
                                "/bpm/user/addOrganization",
                                {
                                    "name":name,
                                    "abbreviationName":abbreviationName,
                                    "pId":pId,
                                    "id":id
                                },
                                function (data) {
                                    if (data.code==200){
                                        layer.msg('操作成功',{icon:1,time:1000},function () {
                                            location.reload();
                                        })
                                    }else{
                                        layer.msg(data.message,{icon:2,time:1000});
                                    }
                                },'json'
                            )
                        }
                    },
                    btn2:function (index,layero) {
                        layer.close(index);
                    }
                });
			}
			else if(pId==1 && type==2){
				layer.open({
					id:1,
					type: 1,
					title:'添加部门人员',
					skin:'layui-layer-rim',
					area:['360px', '330px'],

					content: content
					,
					btn:['保存','取消'],
					btn1: function (index,layero) {
						var name = $("[name='oName']").val();
						var position = $("[name='position']").val();
						var areaId = $("[name='areaId']").val();
						if (name==''){
							layer.msg("人员名称不能为空");
						}else if (position==''){
							layer.msg("职位");
						}else {
							$.post(
								"/bpm/user/addOrganizationMember",
								{
									"type":1,
									"department":areaId,
									"name":name,
									"position":position,
									"pId":pId,
									"id":id
								},
								function (data) {
									if (data.code==200){
										layer.msg('操作成功',{icon:1,time:1000},function () {
											location.reload();
										})
									}else{
										layer.msg(data.message,{icon:2,time:1000});
									}
								},'json'
							)
						}
					},
					btn2:function (index,layero) {
						layer.close(index);
					}
				});
			}else{
                layer.open({
                    id:1,
                    type: 1,
                    title:'添加部门人员',
                    skin:'layui-layer-rim',
                    area:['360px', '330px'],

                    content: content
                    ,
                    btn:['保存','取消'],
                    btn1: function (index,layero) {
                        var name = $("[name='oName']").val();
                        var position = $("[name='position']").val();
                        if (name==''){
                            layer.msg("人员名称不能为空");
                        }else if (position==''){
                            layer.msg("职位");
                        }else {
                            $.post(
                                "/bpm/user/addOrganizationMember",
                                {
                                    "name":name,
                                    "position":position,
                                    "pId":pId,
                                    "id":id
                                },
                                function (data) {
                                    if (data.code==200){
                                        layer.msg('操作成功',{icon:1,time:1000},function () {
                                            location.reload();
                                        })
                                    }else{
                                        layer.msg(data.message,{icon:2,time:1000});
                                    }
                                },'json'
                            )
                        }
                    },
                    btn2:function (index,layero) {
                        layer.close(index);
                    }
                });
			}


        }
        function reload() {
			location.reload();
        }


	</script>
</html>
