zhaohurui
/
Jeff.RFID.UI


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341
							<html>
<head>
    <title>数据选择</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta charset="utf-8"/>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <link rel="stylesheet"
          href="/common-assets/plugins/font-awesome/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="/common-assets/plugins/outdated/bootstrap/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="/common-assets/css/outdated/style.css"/>

    <link rel="stylesheet"
          href="/common-assets/plugins/outdated/metisMenu/2.7/metisMenu.min.css"/>
    <link rel="stylesheet"
          href="/common-assets/plugins/outdated/bootstrap-toastr/2.0.1/toastr.min.css"/>
    <link rel="stylesheet" href="/common-assets/plugins/outdated/icheck/custom.css"/>

    <script src='/common-assets/js/jquery-2.1.1.js'></script>

    <script src="/common-assets/js/outdated/bootstrap.min.js"></script>
    <script src="/common-assets/js/outdated/jquery.form-3.51.0.min.js"></script>

    <script src="/common-assets/plugins/layer/3.0.3/layer.js"></script>

    <script src="/common-assets/plugins/outdated/pace/pace.min.js"></script>
    <script src="/common-assets/plugins/outdated/slimscroll/jquery.slimscroll.min.js"></script>
    <script src="/common-assets/plugins/outdated/bootstrap-toastr/2.0.1/toastr.min.js"></script>
    <script src="/common-assets/plugins/outdated/jquery-validation/jquery.validate-1.11.1.min.js"></script>
    <script src="/common-assets/plugins/outdated/jquery-validation/localization/messages_zh.js"></script>
    <script src="/common-assets/plugins/outdated/icheck/icheck.min.js"></script>
    <script src="/common-assets/plugins/outdated/metisMenu/2.7/metisMenu.js"></script>
    <script src="/common-assets/plugins/dotize/dotize.js"></script>
    <script src="/common-assets/js/promise-polyfill.min.js"></script>
    <!-- 开发阶段使用vue.js以获取编译信息 -->
    <script src="/common-assets/plugins/vue/2.5.17/vue.min.js"></script>
    <script src="/common-assets/plugins/axios/0.18.0/axios.min.js"></script>
    <!-- 引入组件库 -->
    <script src="/common-assets/plugins/element-ui/lib/index.js"></script>
    <link rel="stylesheet"
          href="/common-assets/plugins/jquery-ztree/3.5/css/metroStyle/metroStyle.css">
    <script
            src="/common-assets/plugins/jquery-ztree/3.5/js/jquery.ztree.all.min.js"></script>
    <script src="/common-assets/js/project.config.js"></script>
    <script src="/common-assets/js/outdated/common.js"></script>
    <script type="text/javascript">
        function getUrlParamString (name) {
            var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)')
            var r = window.location.search.substr(1).match(reg)
            if (r != null) return unescape(r[2])
            return null
        }

        var checkedIds = getUrlParamString('checkedIds')
        var roleId = getUrlParamString('roleId')
        var appId = getUrlParamString('appId') || '1'
        var arr_checkedIds = []
        var userTreeNodes = []
        var tree, setting = {
            view: {
                selectedMulti: false,
                dblClickExpand: false,
                fontCss: function (treeId, treeNode) {
                    return (!!treeNode.highlight) ? {
                        color: '#A60000',
                        'font-weight': 'bold',
                    } : {
                        color: '#333',
                        'font-weight': 'normal',
                    }
                },
            },
            check: {
                enable: true,
                chkStyle: 'checkbox',
                nocheck: false,
            },
            data: {
                simpleData: {
                    enable: true,
                    idKey: GetQueryString('idKey') || 'id',
                    pIdKey: GetQueryString('pIdKey') || 'pId',
                    rootPId: GetQueryString('checkedId') || '0',
                },
                key: {
                    name: GetQueryString('name') || 'name',
                },
            },
            callback: {
                beforeClick: function (id, node) {
                    tree.checkNode(node, !node.checked, true, true)
                    return false
                },
                beforeCheck: function (id, treeNode) {
                    if (treeNode.isParent && !treeNode.checked) { //如果之前没有勾选，即该操作为选中
                        //由于勾选一个父节点时，可能前台并没有子节点的数据，所以要先获取该节点的所有符合要求的子节点数据
                        $.ajax(WEB_ROOT + '/sys/role/getUserTreeListOfExpandAll?orgId=' + treeNode.id + '&roleId=' + roleId, {
                            type: 'GET',
                            async: false,
                            success: function (result) {
                                var zNodes = listToNodes(result, false)
                                userTreeNodes.addNodes(zNodes)
                                addNodesToTree(tree, zNodes)
                            },
                        })
                    }
                },
                onCheck: function (event, treeId, treeNode) {
                    //将所有叶节点的id（即user的id）放入arr_checkedIds中
                    var checkedNodes = tree.getCheckedNodes(true)
                    var checkedNodeIds = []
                    for (var i = 0; i < checkedNodes.length; i++) {
                        if (!checkedNodes[i].isParent) {
                            checkedNodeIds.push(checkedNodes[i].id)
                        }
                    }
                    arr_checkedIds = checkedNodeIds
                },
                onExpand: function (event, treeId, treeNode) {
                    var load = layer.load(3, {
                        shade: [0.1, '#fff'], //0.1透明度的白色背景
                    })
                    $.ajax(WEB_ROOT + '/sys/user/getUserTreeListOfExpand?orgId=' + treeNode.id + '&roleId=' + roleId, {
                        type: 'GET',
                        async: false,
                        success: function (result) {
                            var zNodes = listToNodes(result, false)
                            userTreeNodes.addNodes(zNodes)
                            addNodesToTree(tree, zNodes)
                            layer.close(load)
                        },
                    })
                },
            },
        }
        $(function () {
            if (checkedIds === '' || checkedIds) {
                arr_checkedIds = checkedIds.split(',')
            } else {
                $.ajax({
                    async: false,
                    type: 'GET',
                    dataType: 'json',
                    url: WEB_ROOT + '/sys/roleUser/getUserIdsByRoleId?roleId=' + roleId,
                    error: function (result) {
                        alert('请求失败')
                    },
                    success: function (result) {
                        arr_checkedIds = result
                    },
                })
            }
            //初始化树
            var url = WEB_ROOT + '/sys/role/getOrgTreeOfRoleUserAssign?roleId=' + roleId
            arr_checkedIds.remove('')
            $.ajax({
                async: false,
                type: 'GET',
                dataType: 'json',
                url: url,
                error: function () {
                    alert('请求失败')
                },
                success: function (result) {
                    var zNodes = listToNodes(result, true)
                    userTreeNodes = zNodes
                    tree = $.fn.zTree.init($('#tree'), setting, userTreeNodes)
                },
            })
            //设置滚动条
            $('.container-fluid').slimScroll({
                height: '100%',
                railOpacity: 0.9,
            })

            $('#searchBtn').click(function () {
                var keyWord = $('#searchName').val()
                if ($.isEmptyObject(keyWord)) {
                    return
                }
                $.ajax(WEB_ROOT + '/sys/role/searchUserList?roleId=' + roleId + '&keyWord=' + keyWord, {
                    type: 'GET',
                    async: false,
                    success: function (result) {
                        var zNodes = listToNodes(result, false)
                        userTreeNodes.addNodes(zNodes)
                        tree = $.fn.zTree.init($('#tree'), setting, userTreeNodes)
                        checkNodes(tree, arr_checkedIds)
                    },
                })

                var nodes = tree.getNodesByParamFuzzy('name', keyWord)
                showHighlight(nodes, tree)
            })

            //先从后台获取该角色已经分配的user，以及要显示的user
            //然后将结果中树中本来没有的节点加到树中，
            //没有直接渲染得到的数据是因为可能用户在前台已经勾选了几个user，那么此时应该显示勾选的就是原本的加上勾选的
            $('#showSelected').click(function () {
                $.ajax(WEB_ROOT + '/sys/role/showSelectedUserList', {
                    type: 'Post',
                    contentType: 'application/x-www-form-urlencoded',
                    data: { checkedIds: arr_checkedIds, roleId: roleId },
                    async: false,
                    traditional: true,
                    success: function (result) {
                        var zNodes = listToNodes(result, false)
                        userTreeNodes.addNodes(zNodes)
                        //重新渲染树
                        tree = $.fn.zTree.init($('#tree'), setting, userTreeNodes)
                        checkNodes(tree, arr_checkedIds)
                    },
                    error: function () {
                        alert('获取请求失败')
                    },
                })

                //显示勾选的节点
                var nodes = tree.getCheckedNodes(true)
                showHighlight(nodes, tree)
            })

            //设置回车搜索
            $('#searchName').keypress(function (e) {
                detectEnter(e)
            })

            //初始化时显示已勾选的item
            $('#showSelected').click()
        })

        function detectEnter (event) {
            var e = event || window.event
            var o = e.target || e.srcElement
            var keyCode = e.keyCode || e.which // 按键的keyCode
            if (keyCode == 13) {
                e.keyCode = 9
                e.returnValue = false
                $('#searchBtn').click()
            }
        }

        function showHighlight (nodes, tree) {
            if (nodes !== null && nodes.length > 0) {
                for (var i = 0; i < nodes.length; i++) {
                    var node = nodes[i]
                    node.highlight = true
                    /* tree.updateNode(node); //TODO 问题出在这，这一行代码执行大概需要8ms，循环1000次就需要8s */
                    tree.expandNode(node.getParentNode(), true)
                    if (node.isParent) {
                        tree.expandNode(node, true)
                    }
                }
                tree.refresh()
            }
        }

        function checkNodes (tree, arr_checkedIds) {
            for (var i = 0; i < arr_checkedIds.length; i++) {
                var node = tree.getNodeByParam('id', arr_checkedIds[i])
                if (node != null && (!node.children || node.children.length == 0)) {
                    tree.checkNode(node, true, true, false)
                }
            }
        }

        function listToNodes (list, isParent, mapper) {
            mapper = mapper || {}
            var idMapper = mapper.id || 'id'
            var pIdMapper = mapper.pId || 'pId'
            var nameMapper = mapper.name || 'name'
            return list.map(function (item) {
                var node
                node = {
                    id: item[idMapper],
                    pId: item[pIdMapper],
                    name: item[nameMapper],
                    isParent: isParent || item.isParent,
                }
                return node
            })
        }

        //给树增加节点
        function addNodesToTree (tree, zNodes) {
            for (var i = 0; i < zNodes.length; i++) {
                var parentNode = tree.getNodeByParam('id', zNodes[i].pId)
                var node = tree.getNodeByParam('id', zNodes[i].id)
                if (node == undefined || node == null) {
                    tree.addNodes(parentNode, [zNodes[i]])
                }
            }
        }

        //userTreeNodes增加节点
        Array.prototype.addNodes = function (nodes) {
            for (var i = 0; i < nodes.length; i++) {
                var flag = false
                for (var j = 0; j < this.length; j++) {
                    if (this[j].id == nodes[i].id) {
                        flag = true
                        break
                    }
                }
                if (!flag) {
                    this.push(nodes[i])
                }
            }
        }
    </script>
</head>
<body class="pace-done gray-bg">
<div class="container-fluid">
    <div class="row">
        <div class="col-xs-10">
            <div class="input-group">
                <input id="searchName" name="单位树" type="text"
                       class="form-control input-sm"/>
                <div class="input-group-btn">
                    <button type="button" id="searchBtn"
                            class="btn btn-primary input-sm">
                        <i class="fa fa-search"></i>
                    </button>
                </div>
            </div>

        </div>
        <div class="col-xs-2">
            <button type="button" id="showSelected" class="btn btn-primary input-sm pull-right col-md-2">
                <i class="fa fa-check-square-o"></i>
            </button>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-10">
            <div id="tree" class="ztree" style="padding: 10px 5px;"></div>
        </div>
    </div>
</div>
</body>
</html>