{% load i18n %}



    <link rel="stylesheet" href="/static/js/jquery-treeview/jquery.treeview.css" />
	<script src="/static/js/jquery-treeview/jquery.treeview.js" type="text/javascript"></script>

    <link rel="stylesheet" href="/static/js/jQuery-contextMenu-master/dist/jquery.contextMenu.min.css" />
   
    
    <script src="/static/js/jQuery-contextMenu-master/dist/jquery.contextMenu.js" type="text/javascript"></script>
    <script src="/static/js/jQuery-contextMenu-master/dist/jquery.ui.position.js" type="text/javascript"></script>
   


<style>
  
    #chart-main .chart-list{
        min-height:750px;
        max-height:750px;
        border-right:1px solid #ddd;
        overflow-y:auto;
    }
    #chart-main .chart-list .tt{
        cursor:pointer;
    }
</style>


<script type="text/javascript">
    $(document).ready(function(){            

        $("#browser").treeview({
			toggle: function() {
				//console.log("%s was toggled.", $(this).find(">span").text());
			}
		});      
        $('#browser li span.tt').click(function(){           
            event.stopPropagation(); 
            $.ajax({url:"/company/orginazition/liststaff/?dept_id="+$(this).attr('dept_id'),success:function(html){
                $("#div-list").html(html);
            }});
        });


        $('.bnt-list-position').click(function(){
            event.stopPropagation(); 
            event.preventDefault();
            $.ajax({url:$(this).attr('href'),success:function(html){
                $("#div-list").html(html);
            }});
        
            
        });


        $('#div-list').on('click','table tbody td a',function(){            
            event.stopPropagation(); 
            event.preventDefault();
            var url=$(this).attr('href');
            var tt=$(this).attr('tt');            
            $.OpenUrlCfmDlg(url,tt,'保存','取消');
        });


        $('#div-list').on('click','.btn-add',function(){    
            event.stopPropagation(); 
            event.preventDefault();

            var tt_url=$('#list-tt').attr('current');           
            var pos=tt_url.indexOf('?');  
            var url=$(this).attr('href');
            if (pos>-1){
                url=url+tt_url.substr(pos,tt_url.length-pos);
            };
            var tt=$(this).attr('tt');            
            $.OpenUrlCfmDlg(url,tt+'-新建','保存','取消');
        });

        {% if perms.company.sys_admin %}
            $.contextMenu({
                selector: '#browser .tt', 
                callback: function(key, options) {                    
                    var dept_id=$(this).attr('dept_id');
                    var parent_id=$(this).attr('pid');
                    var act='';
                    var url='/company/orginazition/edit/department/';                    
                    switch (key){
                        case 'edit':
                            act='修改';
                            url=url+dept_id+'/';
                            break;
                        case 'add':
                            act='新建';
                            url=url+'?parent_id='+parent_id;
                            break;
                    };
                    if(['edit','add'].indexOf(key)>-1){
                        $.OpenUrlCfmDlg(url,"组织架构-"+act,'保存','取消');
                    };
                },
                items: {
                    "edit": {name: "修改", icon: "edit"},
                    "add": {name: "插入", icon: "add"},               
                    "sep1": "---------",
                    "quit": {name: "退出", icon: function(){
                        return 'context-menu-icon context-menu-icon-quit';
                    }}
                }
            });
        {% endif %}

    });
</script>






<ol class="breadcrumb">
    <li>{% trans "公司管理" %}</li>
    <li>{% trans "组织架构" %}</li>

    <a  class='pull-right btn btn-primary btn-xs bnt-list-position' href="/company/orginazition/listposition/">岗位职务</a>
</ol>




<div class="clearfix"></div>

<div class='x_panel' id='chart-main'>

    <div class='col-sm-3 chart-list'>
    <ul id="browser" class="filetree treeview-famfamfam">
    <li><span class='folder tt' dept_id='{{departments.id}}' pid='{{departments.id}}'>{{departments.name}} ({{departments.headcount.total}})</span>            
        {% for c in departments.children %}<ul>            
            <li class='closed'><span class='folder tt' dept_id='{{c.id}}' pid='{{c.parent_id}}'>{{c.name}} ({{c.headcount.total}})</span>  
            {% for cc in c.children %}<ul>                  
                <li class='closed'><span class='folder tt' dept_id='{{cc.id}}' pid='{{cc.parent_id}}'>{{cc.name}} ({{cc.headcount.total}})</span>                
                {% for ccc in cc.children %}<ul>
                    <li><span class='file tt' dept_id='{{ccc.id}}' pid='{{ccc.parent_id}}'>{{ccc.name}} ({{ccc.headcount.total}})</span></li>
                </ul>{% endfor %}
                </li>
            </ul>{% endfor %}                   
            </li>           
        </ul>{% endfor %}
    </li></ul>
    </div>

    <div class='col-sm-9' id="div-list"></div>
</div>


