crm/app/sys/view/org/index.html

{extend name="public/layout" /}
{block name="title"}组织结构{/block}
{block name="body"}
<style>
    html,
    body {
        min-width: 900px;
    }

    .layui-fluid {
        display: block;
        box-shadow: 0 0 4px 0 #B6CADE;
        border-radius: 5px;
        margin: 15px;
        background-color: #ffffff;
    }

    .cardheader {
        padding-left: 10px;
    }

    .laytable-cell-1-0-1 {
        height: 32px !important;
        line-height: 32px !important;
    }

    .layui-tree-set,
    .layui-tree-entry {
        margin-top: 5px !important;
    }

    .layui-table tr {
        height: 7vh;
    }

    @media screen and (min-width: 992px) {
        .layui-col-md9 {
            margin-left: 1%;
            width: 74%;
        }
    }

    .layui-table thead tr,
    .layui-table-header {
        background-color: #D8E6F1 !important;
    }

    #root-list {
        border-right: 1px solid #f6f6f6;
    }

    #addRoot {
        border-top: 1px solid #f6f6f6;
    }

    .root {
        cursor: pointer;
        text-align: center;
        padding: 10px 1px;
        font-size: 1rem;
        font-weight: bold;
    }

    .root.selected {
        font-size: x-large;
        color: #269efb;
    }

    .root:hover {
        font-size: x-large;
        color: #269efb;
    }

    .layui-form-label {
        width: 150px;
    }

    .layui-input-block {
        margin-left: 180px;
    }

    .strucinfo {
        cursor: pointer;
    }

    .setleader {
        float: right;
    }

    .setleader:hover {
        display: block;
    }

    .employee {
        width: 24px;
        height: 24px;
        background: #71C4FF;
        text-align: center;
        border-radius: 50%;
        line-height: 22px;
        margin-right: 4px;
    }

    .employee>i {
        color: white;
    }

    .leader {
        float: right;
    }

    /*重要 样式*/
    .layui-tree-entry.tree-node-current .layui-tree-main {
        background-color: #d7edbf87;
    }

    /*重要 样式*/


    .layui-btn.layui-btn-success {
        background-color: #009688;
    }

    .filterbutton {
        float: right;
    }

    .layui-layer-content {
        overflow: inherit !important;
    }

    .layui-zz-box {
        border: 1px solid #f2f2f2;
        margin-right: 5px;
    }

    .list>ul:first-child>li>div {
        background-color: #f2f2f2;
        display: block;
        padding: 5px
    }

    .list li {
        min-width: 150px;
    }

    .list li div {
        padding: 3px;
        padding-right: 5px;
    }

    .list>ul ul {
        margin-left: 15px;
    }

    .list .op {
        float: right;
        margin-left: 2px;
    }

    .list i.op:hover,
    .list i.group:hover,
    .list span:hover {
        cursor: pointer;
    }

    .list span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        display: inline-block;
    }
    .list span.title{
        max-width: 85px;
    }
    .list li i:first-child {
        position: relative;
        top: -6px;
        margin-right: 5px;
    }
    @media screen and (min-width: 768px){
        
    }
    .operate {
        position: absolute;
        display: none;
        background-color: white;
        text-align: center;
        box-shadow: 0 0 3px 3px #edededcf;
        z-index: 9;
    }

    .operate li {
        padding: 5px 10px;
        cursor: pointer;
    }

    .operate li:hover {
        color: #249efb;
    }

    .layerbox {
        position: absolute;
        display: none;
        background-color: transparent;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        z-index: 8;
    }

    .leader-select {
        display: none;
        margin: 10px;
    }

    .leader-select .selected {
        border: 1px solid #f2f2f2;
        width: fit-content;
        padding: 5px;
        display: flex;
        min-height: 28px;
    }

    .leader-select .selected ul {
        width: 195px;
    }

    .leader-select .select {
        border: 1px solid #f2f2f2;
        width: auto;
        width: 221px;
        display: none;
        background-color: #f3f3f3;
        position: absolute;
    }

    .leader-select .select li {
        padding: 5px;
        width: auto;
    }

    .leader-select .select li:hover {
        cursor: pointer;
        background-color: #249efb;
        color: white;
    }

    /* 设置滚动条的样式 */
    .layui-zz-box::-webkit-scrollbar {
        width: 10px;
    }

    /* 滚动槽 */
    .layui-zz-box::-webkit-scrollbar-track {
        -webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.3);
    }

    /* 滚动条滑块 */
    .layui-zz-box::-webkit-scrollbar-thumb {
        background: rgba(0, 0, 0, 0.1);
        -webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.5);
    }

    .leader-select .selected li {
        display: inline-block;
        background-color: #D4E4ED;
        border-radius: 10%;
        padding: 3px 4px;
        font-size: xx-small;
        margin: 3px;
    }

    .leader-select .selected li>i {
        cursor: pointer;
    }

    .leader-select .selected>i {
        position: relative;
        top: 6px;
    }

    .leader-select .selected li>i {
        font-size: 12px;
    }

    .addspancolor>div span {
        color: #249efb !important;
    }

    .addspancolor>div .layui-icon {
        color: #249efb !important;
    }

    .layui-btn-primary {
        color: #249EFB;
        border: 1px solid #249EFB;
    }

    .layui-btn-primary:hover {
        background-color: #E3F7FF;
        color: #249EFB;
    }

    .org-type {
        color: #F54D64 !important;
        border-radius: 50%;
        padding: 2px;
        font-style: normal;
        background-color: #FFC6CE;
        display: inline-block;
        width: 16px;
        text-align: center;
        height: 16px;
        font-size: 14px;
        line-height: 16px;
        margin-left: 5px;
    }

    .org-oranger {
        background-color: #FFD933 !important;
        color: #FFAD33 !important;
    }

    .org-blue {
        background-color: #A7D7F9 !important;
        color: #249EFB !important;
    }

    .layui-btn-xs,
    .layui-btn-xs:hover {
        border: 1px solid #249EFB;
        background-color: #fff;
        color: #249EFB;
        padding: 0px 10px;
    }

    .layui-btn-danger,
    .layui-btn-danger:hover {
        color: #FF5722;
        background-color: #fff;
        border: 1px solid #FF5722;
        padding: 0px 10px;
    }

    .layui-tab-title .layui-this {
        color: #249EFB !important;
    }

    .layui-tab-title .layui-this:after {
        width: 50px;
        height: 4px;
        top: 37px;
        background-color: #249EFB;
        border: none;
        left: 50%;
        transform: translateX(-50%);
    }

    .layui-tab-title li {
        margin: 0px 5px;
    }

    .layui-card {
        padding: 0px;
    }

    .layui-card-body {
        padding: 10px 0px;
    }

    .link {
        display: inline-block;
        width: 100%;
        height: 100%;
    }

    .xl {
        height: auto;
        overflow-y: scroll;
        max-height: 200px;
    }

    .xl li {
        background-color: white;
        height: 28px;
        line-height: 200%;
    }

    .layui-tab-title {
        border-bottom: 1px solid #f5f5f5;
    }
</style>

<body>
    <div class="layui-fluid">
        <div class="layui-card">
            <div class="layui-tab">
                <ul class="layui-tab-title">
                    <li class="layui-this" style="margin-left: -5px;">
                        组织架构
                    </li>
                    <li>
                        <a href="{:url('org/designer')}" class="link">设计师管理</a>
                    </li>
                    <li>
                        <a href="{:url('recruitment/index')}" class="link">招聘管理</a>
                    </li>
                </ul>
            </div>
            <div class="layui-card-body">
                <div class="layui-row">
                    <div class="layui-col-md12 layui-col-xs12 layui-col-sm12">
                        <div class="layui-tab layui-tab-brief" lay-filter="component-tabs-hash">
                            <div class="layui-tab-content">
                                <div class="layui-tab-item layui-show">
                                    <div class="layui-col-md3 layui-col-xs3 layui-col-sm3" style="min-width: 200px;">
                                        <div class="layui-inline" style="height: 38px;">
                                            <p class="cardheader"
                                                style="font-size:22px;font-weight: bold;color: #111;margin-top:10px;">
                                                <span>组织结构</span>
                                            </p>
                                        </div>
                                        <div class="layui-zz-box"
                                            style="margin-top:15px;overflow: auto;height: 74.2vh;">
                                            <div class="tree">
                                                <div class="list">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="layui-col-md9 layui-col-xs9 layui-col-sm9">
                                        <div class="layui-inline" style="width:100%;">
                                            <button class="layui-btn layuiadmin-btn-admin layui-btn-primary"
                                                data-type="invite">邀请人员</button>
                                            <!--<button id="verifyapplier"
                        class="layui-btn layuiadmin-btn-admin layui-btn-warm filterbutton rander"
                        data-type="verifyapplier">人员审核</button>-->
                                            <button id="verifyapplier"
                                                class="layui-btn layuiadmin-btn-admin layui-btn-warm rander"
                                                data-type="verifyapplier">人员审核</button>

                                            <button id="employeelist"
                                                class="layui-btn layuiadmin-btn-admin layui-btn-success rander"
                                                data-type="employeelist" style="display: none">员工管理</button>


                                            <button id="employeelist_all"
                                                class="layui-btn layui-btn-warm  {if condition=" $count <=0"}
                                                layui-btn-disabled {/if}" data-type="employeelist" style="display:none"
                                                {if condition="$count <= 0" } disabled="disabled" {/if}>一键审核通过</button>

                                            <div style="float:right;" class="flexRow layui-form">
                                                <div class="layui-inline" style="width: 100px;">
                                                    <div class="layui-input-inline">
                                                        <select name="disable" id="disable">
                                                            <option value="">程序准入</option>
                                                            <option value="0">准入</option>
                                                            <option value="1">禁止</option>
                                                        </select>
                                                    </div>
                                                </div>
                                                <div class="layui-inline" style="margin-left: 10px;">
                                                    <div class="layui-input-inline">
                                                        <input type="text" name="keyword" id=""
                                                            class="layui-input keyword" autocomplete="off"
                                                            placeholder="请输入员工名称" />
                                                    </div>
                                                </div>
                                                <div class="layui-inline">
                                                    <button class="layui-btn layuiadmin-btn-useradmin searchBtn"
                                                        lay-submit lay-filter="search">
                                                        <i
                                                            class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
                                                    </button>
                                                </div>
                                            </div>

                                        </div>
                                        <table id="LAY-employee-list" lay-filter="LAY-employee-list"
                                            style="margin-top:15px;"></table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-form" id="jiaojie" style="margin: 10px 20px;display: none;">
        <div class="layui-form-item">
            <select name="" id="jjselect">
                <option value="">请选择接收部门</option>
            </select>
        </div>
    </div>
    <div class="layerbox"></div>
    <div id="first" class="operate">
        <ul>
            <li data-event="leader">设置负责人</li>
            <li data-event="edit">修改名称</li>
        </ul>
    </div>
    <div id="structOp" class="operate">
        <ul>
            <li data-event="leader">设置负责人</li>
            <li data-event='transfer'>转移层级</li>
            <li data-event="edit">修改名称</li>
            <li data-event="delete">删除节点</li>
        </ul>
    </div>
    <div class="leader-select" data-id="0">
        <div class="selected">
            <ul>
            </ul>
            <i class="layui-icon layui-icon-triangle-d show"></i>
        </div>
        <div class="select xl">
            <ul>
            </ul>
        </div>
    </div>
    {/block}
    {block name="js"}
    <script type="text/html" id="headTpl">
  {{# if(d.user){ }}
    {{# if(d.user.headimgurl){ }}
    <span><img src="{{d.user.headimgurl}}" alt="" width="30" height="30" style="border-radius: 50%"/></span>
    {{# } }}
    {{# if(!d.user.headimgurl){ }}
    <span><img src="https://o.nczyzs.com/xcx/default.png" alt="" width="30" height="30" style="border-radius: 50%"/></span>
    {{# } }}
  {{# } }}
</script>
    <script type="text/html" id="strucTpl">
  {{# if(d.verified === 1){ }}
      {{# if(d.is_manager){ }}
      
      <p class="strucinfo" data-leader="{{d.is_manager}}"><span>{{d.org.info}}</span><span class="leader" lay-event="removeleader"><img src="__STATIC__/img/managericon.png" style="width:80%" alt="" /></span></p>
      {{# }else{ }}
      <p class="strucinfo" data-leader="{{d.is_manager}}"><span>{{d.org.info}}</span><span class="setleader employee" lay-event="setleader"><i class="layui-icon layui-icon-friends"></i></span></p>
      {{# } }}
  {{# }else{ }}
      {{# if(d.is_manager){ }}
      <p class="strucinfo" data-leader="{{d.is_manager}}"><span>{{d.org.info}}</span>
          <span class="leader" lay-event="removeleader"><img src="__STATIC__/img/managericon.png" style="width:80%" alt="" /></span>
      </p>
      {{# }else{ }}
      <p class="strucinfo" data-leader="{{d.is_manager}}"><span>{{d.org.info}}</span></p>
      {{# } }}
  {{# } }}
</script>
    <script type="text/html" id="grantTpl">
  {{# if(d.grant){ }}
  <span>{{d.grant.name}}</span>
  {{# }else{ }}
  <span>未绑定</span>
  {{# } }}
</script>
    <script type="text/html" id="operateTpl">
  {{# if(d.state === '在职'){ }}
  <a class="layui-btn layui-btn-info layui-btn-xs" lay-event="details">详情</a>
       <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="hr">操作</a>
  {{# }else{ }}
     {{# if(d.state === '驳回'){ }}
      <span>已驳回</span>
     {{# }else{ }}
            <a class="layui-btn layui-btn-xs" lay-event="verify_pass">通过</a>
            <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="verify_reject">驳回</a>
     {{# } }}
  {{# } }}
</script>
<script type="text/html" id="disTpl">
{{# if(d.disable === 0){ }}
    <input type="checkbox" value="{{d.id}}" lay-skin="switch" lay-text="ON|OFF" lay-filter="open" checked>
{{# }else{ }}
    <input type="checkbox" value="{{d.id}}" lay-skin="switch" lay-text="ON|OFF" lay-filter="open">
{{# } }}
</script>
<script type="text/html" id="disTpl-PC">
    {{# if(d.empcrm_disable === 0){ }}
    <input type="checkbox" value="{{d.id}}" lay-skin="switch" lay-text="ON|OFF" lay-filter="empcrm-open" checked>
    {{# }else{ }}
    <input type="checkbox" value="{{d.id}}" lay-skin="switch" lay-text="ON|OFF" lay-filter="empcrm-open">
    {{# } }}
</script>
<script type="text/html" id="disTpl-She">
    {{# if(d.community_disable === 0){ }}
    <input type="checkbox" value="{{d.id}}" lay-skin="switch" lay-text="ON|OFF" lay-filter="she-open" checked>
    {{# }else{ }}
    <input type="checkbox" value="{{d.id}}" lay-skin="switch" lay-text="ON|OFF" lay-filter="she-open">
    {{# } }}
</script>
<script type="text/html" id="disTpl-clue">
    {{# if(d.clue_disable === 0){ }}
    <input type="checkbox" value="{{d.id}}" lay-skin="switch" lay-text="ON|OFF" lay-filter="clue-open" checked>
    {{# }else{ }}
    <input type="checkbox" value="{{d.id}}" lay-skin="switch" lay-text="ON|OFF" lay-filter="clue-open">
    {{# } }}
</script>
    <script>
        layui.config({
            base: '__LAYUI__/',
        }).extend({
            index: 'lib/index' //主入口模块
        }).use(['index', 'jquery', 'table', 'tree', 'layer'], function () {
            var table = layui.table,
                tree = layui.tree,
                layer = layui.layer,
                $ = layui.jquery,
                element = layui.element,
                form = layui.form;
            var field = {};
            form.on('submit(search)', function (data) {
                var disable = $('#disable').val();
                var keyword = $('.keyword').val();
                field['disable'] = disable;
                field['keyword'] = keyword;
                //执行重载
                table.reload('LAY-employee-list', {
                    where: field
                    , page: { curr: 1 }
                });
            });
            var orgstrucUrl = '{:url("employee/list")}';
            
            var colss = [
                    { type: 'numbers', width: 80, title: '序号', fixed: 'left', align: 'center' },
                    { title: '头像', templet: '#headTpl', width: 60, fixed: 'left', align: 'center' },
                    { field: 'name', title: '姓名', fixed: 'left', width: 100, align: 'center' },
                    { field: 'org_id', title: '部门', templet: '#strucTpl', fixed: 'left', width: 180, align: 'center' },
                    { field: 'disable', title: '小程序准入', templet: '#disTpl', width: 110,align: 'center' },
                    { field: 'empcrm_disable', title: 'PC-CRM准入', templet: '#disTpl-PC', width: 110,align: 'center' },
                    { field: 'community_disable', title: '社群CRM准入', width: 110,templet: '#disTpl-She', align: 'center' },
                    { field: 'last_login_time', width: 170,title: '最后登录时间' },
                    { field: 'org_id', title: '操作', templet: '#operateTpl', fixed: 'right', width: 180, align: 'center'}
                ];
            
            {if $root == 2319 || $root == 994}
            var colss = [
                    { type: 'numbers', width: 80, title: '序号', fixed: 'left', align: 'center' },
                    { title: '头像', templet: '#headTpl', width: 60, fixed: 'left', align: 'center' },
                    { field: 'name', title: '姓名', fixed: 'left', width: 100, align: 'center' },
                    { field: 'org_id', title: '部门', templet: '#strucTpl', fixed: 'left', width: 180, align: 'center' },
                    { field: 'disable', title: '小程序准入', templet: '#disTpl',width: 110, align: 'center' },
                    { field: 'empcrm_disable', title: 'PC-CRM准入', width: 110,templet: '#disTpl-PC', align: 'center' },
                    { field: 'community_disable', title: '社群CRM准入',width: 110, templet: '#disTpl-She', align: 'center' },
                    { field: 'clue_disable',title: '线索',templet: '#disTpl-clue',width: 110,align: 'center'},
                    { field: 'last_login_time', width: 170,title: '最后登录时间' },
                    { field: 'org_id', title: '操作', templet: '#operateTpl', fixed: 'right', width: 180, align: 'center'}
                ];
            {/if}

            table.render({
                elem: '#LAY-employee-list',
                url: orgstrucUrl,
                cols: [colss],
                page: true,
                limit: 10,
                limits: [10, 20, 30, 40, 50, 60, 70, 80, 90, 100],
                height: 'full-200',
                text: '对不起，加载出现异常！'
            });

            //事件
            var active = {
                invite: function () {
                    var id = $('#root-list').find('.selected').data('id');
                    layer.open({
                        type: 2,
                        title: ['邀请人员', 'color:#333333;background-color:#D8E6F1;'],
                        content: '{:url("employee/invite")}?id=' + id,
                        resize: false,
                        area: ['80%', '80%']
                    });
                },
                verifyapplier: function () {
                    table.reload('LAY-employee-list', {
                        where: {
                            verified: 0
                        }
                        , page: { curr: 1 }
                    });
                    $('#verifyapplier').hide();
                    $('#employeelist').show();
                    $('#employeelist_all').show();
                },
                employeelist: function () {
                    table.reload('LAY-employee-list', {
                        where: {
                            verified: 1
                        }
                        , page: { curr: 1 }
                    });
                    $('#verifyapplier').show();
                    $('#employeelist').hide();
                    $('#employeelist_all').hide();
                }
            }
            $('.layui-btn.layuiadmin-btn-admin').on('click', function () {
                var type = $(this).data('type');
                active[type] ? active[type].call(this) : '';
            });
            //////
            table.on('tool(LAY-employee-list)', function (obj) {
                var data = obj.data;
                if (obj.event === 'details') {
                    layer.open({
                        type: 2,
                        title: ['人员详情', 'color:#333333;background-color:#D8E6F1;'],
                        content: '{:url("employee/details")}?employeeid=' + data.id,
                        resize: false,
                        area: ['80%', '80%']
                    });
                }
                if (obj.event === 'grant') {
                    layer.open({
                        type: 2,
                        title: ['关联权限组', 'color:#333333;background-color:#D8E6F1;'],
                        content: '{:url("employee/grant")}?employeeid=' + data.id,
                        resize: false,
                        area: ['80%', '80%']
                    });
                }
                if (obj.event === 'hr') {
                    layer.open({
                        type: 2,
                        title: ['人员异动', 'color:#333333;background-color:#D8E6F1;'],
                        content: '{:url("employee/hr")}?employeeid=' + data.id,
                        resize: false,
                        area: ['80%', '80%']
                    });
                }
                if (obj.event === 'delete') {
                    layer.confirm('确定删除此员工？', { title: ['信息', 'color:#333333;background-color:#D8E6F1;'] }, function (index) {
                        $.ajax({
                            url: '{:url("employee/delete")}',
                            data: {
                                empid: data.id
                            },
                            type: 'post',
                            success: function (res) {
                                if (res.code === 0) {
                                    layer.msg(res.msg, { anim: 0 });
                                } else {
                                    layer.msg(res.msg, { anim: 6 });
                                }
                            }
                        });
                        obj.del();
                        layer.close(index);
                    });
                }
                if (obj.event === 'setleader' || obj.event === 'removeleader') {
                    let isLeader = 'checked';
                    isEmployee = 'checked';
                    if (data.is_manager == 1) {
                        isEmployee = '';
                    } else {
                        isLeader = ''
                    }
                    layer.open({
                        title: ['职位设置', 'color:#333333;background-color:#D8E6F1;'],
                        content: `<div class="layer-set-leader" style="display:flex;align-items:center;">员工设置：<input type="radio" name="empid" id="gl" value="1" ${isLeader}/><label for="gl" style="margin-left:5px;">管理员</label> <input type="radio" name="empid" value="0" id="yg" style="margin:0px 5px;" ${isEmployee}/><label for="yg">普通员工</label></div>`,
                        yes: function (index, layero) {
                            let is_manager = $(layero).find('input[type="radio"]:checked').val();
                            let url = '{:url("employee/setleader")}';
                            if (is_manager == 0) url = '{:url("employee/removeleader")}';
                            if (data.is_manager == is_manager) {
                                layer.close(index); return;
                            }
                            $.ajax({
                                url: url,
                                data: {
                                    empid: data.id,
                                    is_manager: is_manager
                                },
                                type: 'post',
                                success: function (res) {
                                    if (res.code === 0) {
                                        layer.msg(res.msg, { anim: 0 });
                                        table.reload('LAY-employee-list');
                                    } else {
                                        layer.msg(res.msg, { anim: 6 });
                                    }
                                }
                            });
                        }
                    });
                }
                if (obj.event === 'verify_pass') {
                    layer.confirm('确定通过此人员？', { title: ['信息', 'color:#333333;background-color:#D8E6F1;'] }, function (index) {
                        $.ajax({
                            url: '{:url("employee/verifypass")}',
                            data: {
                                empid: data.id
                            },
                            type: 'post',
                            success: function (res) {
                                if (res.code === 0) {
                                    layer.msg(res.msg, { anim: 0 });
                                    table.reload('LAY-employee-list');
                                } else {
                                    layer.msg(res.msg, { anim: 6 });
                                }
                            }
                        });
                        layer.close(index);
                    });
                }
                if (obj.event === 'verify_reject') {
                    layer.confirm('确定驳回此人员？', { title: ['信息', 'color:#333333;background-color:#D8E6F1;'] }, function (index) {
                        $.ajax({
                            url: '{:url("employee/verifyreject")}',
                            data: {
                                empid: data.id
                            },
                            type: 'post',
                            success: function (res) {
                                if (res.code === 0) {
                                    layer.msg(res.msg, { anim: 0 });
                                    table.reload('LAY-employee-list');
                                } else {
                                    layer.msg(res.msg, { anim: 6 });
                                }
                            }
                        });
                        layer.close(index);
                    });
                }
            });
            var jiaojie = function (from, to, callback) {
                return $.ajax({
                    type: 'post',
                    url: '{:url("org/receive")}',
                    data: { from: from, to: to },
                    success: function (res) {
                        callback(res)
                    }
                })
            }

            $('.list').off("click").on('click', '.group', function () {
                var that = $(this);
                var li = that.closest('li');
                if (that.hasClass('layui-icon-triangle-d')) {
                    that.addClass('layui-icon-triangle-r');
                    that.removeClass('layui-icon-triangle-d');
                    li.find('ul').hide();
                } else {
                    that.addClass('layui-icon-triangle-d');
                    that.removeClass('layui-icon-triangle-r');
                    li.find('ul').show();
                }
            });



            $('.list').off("mouseout").on("mouseout", "li", function (event) {
                $(this).eq(0).find('.layui-icon').css({ 'color': '#666' })
                $(this).eq(0).find('span').css({ 'color': '#666' })

            })

            $('.list').off("mouseover").on("mouseover", "li", function (event) {
                $(this).eq(0).find('.layui-icon').eq(0).css({ 'color': '#249efb' })
                $(this).eq(0).find('span').eq(0).css({ 'color': '#249efb' })
                event.stopPropagation();
            })

            var operate = {
                struct: function () {
                    var that = this;
                    that.send([], '{:url("org/struct")}', function (res) {
                        if (res.code == 0) {
                            $('.list').html(that.setStruct(res.data, '', 1));
                        } else {
                            $('.list').html('<span>' + res.msg + '</span>');
                        }
                    });
                },
                delete: function (id) {
                    var that = this;
                    $('.list').find('li').each(function () {
                        if ($(this).data('id') !== id) return;
                        orgObjSpan = $(this).find('span')[0];
                    });
                    this.send({ id: id }, '{:url("org/removenode")}', function (res) {
                        if (res.code == 0) {
                            that.struct();
                        } else if (res.code == 2) {
                            var html = '<option value="" >请选择接收部门</option>';
                            var allUlLentth = $('.list ul').length;
                            $('.list li').each(function () {
                                var lid = $(this).data('id');
                                if (lid == id) return;
                                var thisUlLength = $(this).find('ul').length;
                                var qz = '';
                                for (var i = allUlLentth - thisUlLength; i > 1; i--) qz += '-';
                                html += '<option value="' + lid + '" >' + qz + $(this).find('span').html() + '</option>';
                            });
                            $('#jjselect').html(html);
                            form.render('select');
                            layer.open({
                                title: [res.msg, 'color:#333333;background-color:#D8E6F1;'],
                                type: 1,
                                content: $('#jiaojie'),
                                btn: ['确定'],
                                yes: function (index) {
                                    var jieshou = $('#jjselect').val();
                                    if (jieshou == '') {
                                        layer.msg('请选择接收部门', { anim: 6 });
                                        return false;
                                    }
                                    layer.close(index);
                                    jiaojie(id, jieshou, function (res) {
                                        if (res.code == 0) {
                                            that.struct();
                                        }
                                    });
                                }
                            });
                        } else {
                            layer.msg(res.msg, { anim: 6 });
                        }
                    });
                },
                add: function (data, jdom) {
                    var that = this;
                    this.send(data, '{:url("org/addnode")}', function (res) {
                        if (res.code == 0) {
                            that.struct();
                        } else {
                            layer.msg(res.msg, { anim: 6 });
                        }
                    });
                },
                edit: function (id) {
                    var that = this;
                    var orgObjSpan;
                    $('.list').find('li').each(function () {
                        if ($(this).data('id') !== id) return;
                        orgObjSpan = $(this).find('span')[0];
                    });
                    var orgName = $(orgObjSpan).html();
                    layer.prompt({ title: ['部门<span style="color:red">' + orgName + '</span>修改', 'color:#333333;background-color:#D8E6F1;'], value: orgName }, function (value, index) {
                        that.send({ id: id, name: value }, '{:url("org/addnode")}', function (res) {
                            if (res.code == 0) {
                                $(orgObjSpan).html(value);
                                table.reload('LAY-employee-list');
                            } else {
                                layer.msg(res.msg, { anim: 6 });
                            }
                            layer.close(index);
                        });
                    });

                },
                leader: function (id) {
                    $('.leader-select').data('id', id);
                    var that = this;
                    that.send({ id: id }, '{:url("employee/orgEmployee")}', function (res) {
                        if (res.code == 0) {
                            var selected = $('.leader-select .selected ul');
                            selected.html('');
                            var select = $('.leader-select .select ul');
                            select.html('');
                            $('.leader-select .select').hide();
                            res.data.forEach(function (elem) {
                                if (elem.is_manager == 1) {
                                    selected.append('<li data-id="' + elem.id + '">' + elem.name + '<i class="layui-icon layui-icon-close"></i></li>');
                                }
                                select.append('<li data-id="' + elem.id + '">' + elem.name + '</li>');
                            });

                            layer.open({
                                type: 1,
                                title: ['设置负责人', 'color:#333333;background-color:#D8E6F1;'],
                                content: $('.leader-select'),
                                resize: false,
                                btn: ['确认', '取消'],
                                yes: function (index) {
                                    var id = $('.leader-select').data('id');
                                    var leader = [];
                                    $('.leader-select .selected li').each(function () {
                                        leader.push($(this).data('id'));
                                    });
                                    that.send({ id: id, leader: leader }, '{:url("org/leaders")}', function (res) {
                                        if (res.code == 0) {
                                            layer.msg(res.msg, { anim: 0 });
                                        } else {
                                            layer.msg(res.msg, { anim: 6 });
                                        }
                                    });
                                    layer.close(index);
                                }
                            });
                        } else {
                            layer.msg('员工信息获取失败', { anim: 6 });
                        }
                    });
                },
                transfer: function (id) {
                    var that = this;
                    var html = '<option value="" >请选择上级层级</option>';
                    var allUlLentth = $('.list ul').length;
                    var transferOrg;
                    var child = [];
                    $('.list li').each(function () {
                        var lid = $(this).data('id');
                        var level = $(this).data('level');
                        if (child.indexOf(lid) >= 0) return;
                        if (lid == id) {
                            transferOrg = $(this);
                            $(this).find('li').each(function () {
                                child.push($(this).data('id'));
                            });
                            return;
                        }
                        var qz = '';
                        for (var i = level; i > 0; i--) qz += '-';
                        html += '<option value="' + lid + '" >' + qz + $(this).find('span').html() + '</option>';
                    });
                    $('#jjselect').html(html);
                    form.render('select');
                    layer.open({
                        title: [transferOrg.find('span').html() + '部门转移层级', 'color:#333333;background-color:#D8E6F1;'],
                        type: 1,
                        content: $('#jiaojie'),
                        resize: false,
                        btn: ['确定'],
                        yes: function (index) {
                            var jieshou = $('#jjselect').val();
                            if (jieshou == '') {
                                layer.msg('请选择上级层级', { anim: 6 });
                                return false;
                            }
                            layer.close(index);
                            that.send({ id: id, pid: jieshou }, '{:url("org/transfer")}', function (res) {
                                if (res.code == 0) {
                                    that.struct();
                                    table.reload('LAY-employee-list');
                                } else {
                                    layer.msg(res.msg, { anim: 6 });
                                }
                            });
                        }
                    });
                },
                send: function (data, url, callback) {
                    if (data.length == 0) {
                        return $.ajax({
                            type: 'get',
                            url: url,
                            success: function (res) {
                                callback(res)
                            }
                        })
                    }

                    return $.ajax({
                        type: 'post',
                        url: url,
                        data: data,
                        success: function (res) {
                            callback(res)
                        }
                    })
                },
                setStruct: function (data, org_type = 0,num) {
                    var that = this;
                    var html = '<ul>';
                    data.forEach(function (elem, index) {
                        let numstr=85;
                        if(num==1){
                            if (elem.all_count > 1000) {
                                numstr =100
                            }else{
                                numstr=92;
                            }
                        }else{
                            if(elem.children.length==0&& org_type == 0){
                                if (elem.all_count > 1000) {
                                    numstr = 105;
                                } else if (elem.all_count > 100) {
                                    numstr = 95;
                                } else {
                                    numstr = 95;
                                }
                            }else{
                                if (elem.all_count > 1000){
                                    numstr = 124;
                                }else if (elem.all_count > 100) {
                                    numstr = 115;
                                } else {
                                    numstr = 115;
                                }
                            }
                        }
                        html += `<li data-id="${elem.id}" data-level="${elem.level}" data-type="${org_type}" data-istype="${elem.org_type}"><div>`;
                        if (elem.children.length !== 0)
                            html += '<i class="group layui-icon layui-icon-triangle-r layui-icon-triangle-d"></i>';
                        else if (org_type !== 0)
                            html += '<i class="layui-icon layui-icon-user"></i>';
                        html += '<span class="title " style="max-width: calc( 100% - '+ numstr +'px ) ;">' + elem.title + '</span>';
                        html += '<span>(' + elem.all_count + ')</span>';
                        // if (org_type == 0) {
                        if (elem.org_type == 1) {
                            html += '<span class="org-type">销</span>';
                        } else if (elem.org_type == 2) {
                            html += '<span class="org-type org-blue">设</span>';
                        }
                        // }

                        html += '<i class="op layui-icon layui-icon-add-1"></i>';
                        html += '<i class="op layui-icon layui-icon-more"></i></div>';
                        if (elem.children.length > 0) {
                            html += that.setStruct(elem.children, elem.org_type, num * 1 + 1);
                        }
                        html += '</li>';
                    });
                    html += '</ul>';
                    return html
                }
            }




            // 结构初始化
            operate.struct();
            // 菜单操作
            $('.tree').on('click', '.op', function (event) {
                var that = $(this);
                var li = that.closest('li');
                var id = li.data('id');
                var title = that.siblings('.title').html();
                if (that.hasClass('layui-icon-more')) {
                    if ($('.list li').length == li.find('li').length + 1) {
                        var opdiv = $('#first');
                    } else {
                        var opdiv = $('#structOp');
                    }
                    opdiv.data('id', id);
                    opdiv.css('top', event.clientY);
                    opdiv.css('left', event.clientX - 90);
                    opdiv.show();
                    $('.layerbox').show();
                } else {
                    let mOrgType = li.data('istype');
                    let selectHtml = '';
                    var root = '{$root}';
                    if (mOrgType != 2)
                        selectHtml = `<div style="display:flex;align-items:center;margin-bottom: 10px;">选择部门：<input name="org_type" value="1" type="radio" checked style="margin-right:5px;" id="xs"/><label for="xs" style="margin-right:15px;">销售部</label><input name="org_type" value="2" type="radio" id="sjs"/><label for="sjs" style="padding-left:5px;">设计师部</label></div>`
                    layer.open({
                        title: ['添加<span style="color:red;">' + title + '</span>的子部门', 'color:#333333;background-color:#D8E6F1;'],
                        content: `${selectHtml}<div class="">部门名称：<input type="text"/></div>`,
                        resize: false,
                        yes: function (index, layero) {
                            let org_type = $(layero).find('input[type="radio"]:checked').val();
                            let name = $(layero).find('input[type="text"]').val();
                            operate.add({ org_type, name, pid: id }, li);
                            layer.close(index);
                        }
                    });
                }
            });
            $('.layerbox').on('click', function () {
                var opdiv = $('.operate');
                opdiv.hide();
                $('.layerbox').hide();
                opdiv.data('id', 0);
            })

            $('.operate li').off('click').on('click', function () {
                var id = $(this).closest('div').data('id');
                var event = $(this).data('event');
                operate[event] ? operate[event](id) : '';
                var opdiv = $('.operate');
                opdiv.hide();
                $('.layerbox').hide();
                opdiv.data('id', 0);
            });

            $('.list').on('click', 'span', function () {
                $('.list li').removeClass('addspancolor');
                var id = $(this).closest('li').data('id');
                $(this).closest('li').eq(0).addClass('addspancolor');
                table.reload('LAY-employee-list', {
                    where: {
                        orgid: id
                    }
                    , page: { curr: 1 }
                });
            });

            $('.leader-select .selected .show').click(function () {
                var select = $('.leader-select .select');
                if (select.is(':hidden')) {
                    select.show();
                } else {
                    select.hide();
                }
            });

            $('.leader-select .select').on('click', 'li', function () {
                var selected = $('.leader-select .selected ul');
                var id = $(this).data('id');
                var name = $(this).text();
                var had = false;
                $('.leader-select .selected li').each(function () {
                    if ($(this).data('id') !== id) return;
                    had = true;
                });
                if (!had)
                    selected.append('<li data-id="' + id + '">' + name + '<i class="layui-icon layui-icon-close"></i></li>');
            })

            $('.leader-select .selected').on('click', 'li i', function () {
                $(this).closest('li').remove();
            })

            //一键审核
            $("#employeelist_all").click(function () {
                // 单击之后提交按钮不可选,防止重复提交
                var DISABLED = 'layui-btn-disabled';
                var target = '#employeelist_all';
                $(target).addClass(DISABLED);
                $(target).attr('disabled', 'disabled');

                $.ajax({
                    url: '{:url("employee/verifypass_all")}',
                    type: 'post',
                    success: function (res) {

                        if (res.code === 0) {
                            layer.msg(res.msg, { anim: 0 });
                            table.reload('LAY-employee-list');
                            // $(target).removeClass(DISABLED);
                            // $(target).removeAttr('disabled');
                        } else {
                            layer.msg(res.msg, { anim: 6 });
                        }

                    },
                    error: function (res) {
                        $(target).removeClass(DISABLED);
                        $(target).removeAttr('disabled');
                    }
                });
            });

            $(".rander").click(function () {
                $.ajax({
                    url: '{:url("employee/verifypass_count")}',
                    type: 'post',
                    success: function (res) {
                        var DISABLED = 'layui-btn-disabled';
                        var target = '#employeelist_all';
                        if (res > 0) {
                            $(target).removeClass(DISABLED);
                            $(target).removeAttr('disabled');

                        } else {

                            $(target).addClass(DISABLED);
                            $(target).attr('disabled', 'disabled');
                        }

                    },
                    error: function (res) {

                    }
                });
            });
            form.on('switch(open)', function (data) {
                var id = data.value;
                $.ajax({
                    type: "post",
                    url: '{:url("employee/disable")}',
                    data: {
                        id: id,
                        disable: data.elem.checked,
                        type: 1
                    },
                    success: function (res) {
                        layer.msg(res.msg, { time: 2000 });
                    }
                });
            });
            form.on('switch(empcrm-open)', function (data) {
                var id = data.value;
                $.ajax({
                    type: "post",
                    url: '{:url("employee/disable")}',
                    data: {
                        id: id,
                        disable: data.elem.checked,
                        type: 2
                    },
                    success: function (res) {
                        layer.msg(res.msg, { time: 2000 });
                    }
                });
            });
            form.on('switch(she-open)', function (data) {
                var id = data.value;
                $.ajax({
                    type: "post",
                    url: '{:url("employee/disable")}',
                    data: {
                        id: id,
                        disable: data.elem.checked,
                        type: 3
                    },
                    success: function (res) {
                        layer.msg(res.msg, { time: 2000 });
                    }
                });
            });
            form.on('switch(clue-open)', function (data) {
                var id = data.value;
                $.ajax({
                    type: "post",
                    url: '{:url("employee/disable")}',
                    data: {
                        id: id,
                        disable: data.elem.checked,
                        type: 4
                    },
                    success: function (res) {
                        layer.msg(res.msg, { time: 2000 });
                    }
                });
            });
        });
    </script>
</body>
{/block}