We_Relese/App/Relese/Views/Exercise/Headquarter.cshtml

@using WeApp.TrainingCampGroup.Dto
@{
    Layout = "~/Views/Shared/Layout/_Layout.Stu.cshtml";
    CampGroupDto group = ViewBag.Group;
    bool isLeader = ViewBag.IsLeader, hasBuilded = ViewBag.HasBuilded;
    string id = group.Id,
        groupName = group.Name,
        campNo = group.CampNo;
    ViewBag.Title = (isLeader ? "指挥长组建指挥部" : "学员屏指挥部") + "(" + groupName + ")";
    var name = hasBuilded ? groupName + "指挥部——" + (isLeader ? "指挥长" : "组员") : isLeader ? "指挥长组建指挥部" : "指挥部组建中...";
    var build = hasBuilded  ? "build" : "";
    var leader = isLeader ? "" : "stu";
}
@section css{
    <link href="~/Content/Css/Exercise/stu-leader.min.css?v=1.1" rel="stylesheet" />
}
<div class="body">
    <div class="title-box box @(build)">
        <div class="left-box">
            <div class="line"></div>
            <div class="title">@(name)</div>
        </div>
        <div class="right-box">
            @if (isLeader && !hasBuilded)
            {
                <div class="btn btn-submit btn-lg" onclick="CreateGroupRole()">提交</div>
            }
        </div>
    </div>
    @if(!hasBuilded){
        <div class="group-box box @(build) @(leader)">
            <div class="left-box">
                @*<div class="group-info check">
                    <div class="gou">
                        <div class="img"></div>
                    </div>
                    <div class="img-box">
                        <div class="img">
                            <div class="img" style="background-image: url('../../Content/Image/Stu/hz.png');"></div>
                        </div>
                    </div>
                    <span class="name">高层火灾</span>
                </div>*@
            </div>
            <div class="right-box">
                @if (isLeader)
                {
                    <div class="group-info check" style="margin-right: 0" data-id="self" onclick="GroupToggle(this)">
                        <div class="img-box">
                            <div class="img">
                                @*<div class="img" style="background-image: url('../../Content/Image/Stu/zhb/zdy.png');"></div>*@
                                <img src="../../Content/Image/Stu/zhb/self.png" />
                            </div>
                        </div>
                        <span class="name">自定义角色</span>
                    </div>
                }
            </div>
        </div>
    }
    <div class="role-box box @(build) @(leader)">
        <div class="content-box">
            @if (!hasBuilded && isLeader)
            {
                <div class="role-content self" id="c_self">
                    <div class="bottom">
                        <div class="role-info" id="add-role" onclick="$('#add-role').hide();$('#add-box').fadeIn(800).css('display', 'flex');$('#self-role-text').focus();">
                            <div class="name">点击添加角色</div>
                            <div class="add-icon">
                                <img src="~/Content/Image/Stu/zhb/add.png" style="width: 100%; height: 100%;"/>
                            </div>
                        </div>
                        <div class="role-info add-box" id="add-box">
                            <span class="close" onclick="$('#add-box').fadeOut(500);$('#add-role').fadeIn(800).css('display', 'flex');">&times;</span>
                            <input type="text" id="self-role-text" value=""/>
                            <button class="btn btn-submit" onclick="CreateSelfRole()">添加角色</button>
                        </div>
                    </div>
                </div>
            }
            else
            {
                <div class="role-content" style="display:none"></div>
            }
        </div>
       
    </div>
</div>

@section scripts
{
    <script>
        $(function() {
            @if (hasBuilded)
            {
                <text>
                    GetGroupRoles();
                </text>
            }
            else
            {
                <text>
                    GetCampRoleGroups();
                </text>
            }
            //OverlayScrollbar($('.role-content '));

            $('#self-role-text').keydown(function(e) {
                var theEvent = window.event || e;
                var code = theEvent.keyCode || theEvent.which || theEvent.charCode;
                if (code == 13) {
                    CreateSelfRole();
                }
            });
        });

        function GetGroupRoles() {
            $.iwbAjax4({
                url: abp.appUrl + "Query/GetGroupRoleInfos?no=@(id)",
                success: function(res) {
                    FormatterBuildGroupRole(res);
                    OverlayScrollbar($('.content-box'));

                }
            });
        }

        function GetCampRoleGroups() {
            $.iwbAjax4({
                url: abp.appUrl + "Query/GetCampRoleGroupInfos?no=@(campNo)",
                success: function(res) {
                    FormatterGroupRole(res);
                    OverlayScrollbar($('.bottom'));

                }
            });
        }

        function FormatterBuildGroupRole(data) {
            if (data && data.length > 0) {
                var str = '<div class="role-content">';
                data.forEach(function(r) {
                    str += roleInfo.format(r, "", "");
                });
                str += '</div>';
                $('.role-box .content-box').html(str);

            }
        }

        var selectStr = '已选择<span>(点击取消)</span>';
        var noSelectStr = '未选择<span>(点击选择)</span>';
        var roleInfo =
            '<div class="role-info {1}" data-name="{0}"><div class="name">{0}</div><div class="user-icon"></div>{2}</div>';

        function FormatterGroupRole(data) {
            var str1 = "", str2 = "";
            if (data && data.length > 0) {
                data.forEach(function(v) {
                    str1 += FormatterGroup(v);
                    str2 += FormatterRole(v);
                });
            }
            if (str1) {
                $('.role-box .role-content').before(str2);
                $('.group-box .left-box').html(str1);
                $('.group-box .left-box .group-info:first-child').trigger("click");
            }
        }

        function FormatterGroup(data) {
            var str = '';
            if (data) {
                str += '<div class="group-info" id="t_{0}" data-id="{0}" onclick="GroupToggle(this)">'.format(data.id);
                str += '<div class="gou"><div class="img"></div></div>';
                str +=
                    '<div class="img-box"><div class="img"><img data-id="{0}" src="../../Content/Image/Stu/zhb/{0}.png" /></div></div>'
                    .format(data.id);
                //str +=
                //    '<div class="img-box"><div class="img"><div class="img" style="background-image: url(\'../../Content/Image/Stu/zhb/{0}.png\');"></div></div></div>'
                //    .format(data.id);
                str += '<span class="name">{0}</span>'.format(data.roleGroupName);
                str += '</div>';
            }
            return str;
        }

        function FormatterRole(data) {
            var str = '';
            if (data) {
                str += '<div class="role-content" id="c_{0}">'.format(data.id);
                str += '<div class="top"  data-id="{1}" onclick="GroupCheckToggle(this)">{0}</div>'.format(noSelectStr,
                    data.id);
                str += '<div class="bottom">';
                if (data.roleNames) {
                    var arr = data.roleNames.split(',');
                    arr.forEach(function(v) {
                        str += roleInfo.format(v, "", "");
                    });
                }
                str += '</div>';
                str += '</div>';
            }
            return str;
        }

        function GroupToggle(that) {
            var $that = $(that);
            var id = $that.data('id');
            var imgPath = "../../Content/Image/Stu/zhb/{0}.png";
            var oldId = $('.group-box .group-info.active').find("img").data("id");
            $('.group-box .group-info.active').find("img").attr("src", imgPath.format(oldId));
            $('.role-box .role-content').removeClass('active');
            $('#c_' + id).addClass('active');
            $('.group-box .group-info').removeClass('active');
            $that.addClass('active').find("img").attr("src", imgPath.format('g-'+id));;
        }

        function GroupCheckToggle(that) {
            var $that = $(that);
            var id = $that.data('id');
            if ($('#t_' + id).hasClass('check')) {
                $('#t_' + id).removeClass('check');
                $('#c_' + id).removeClass('check').find('.top').html(noSelectStr);
                $('#c_' + id).find('.role-info').removeClass('check');
            } else {
                $('#t_' + id).addClass('check');
                $('#c_' + id).addClass('check').find('.top').html(selectStr);
                $('#c_' + id).find('.role-info').addClass('check');
            }

        }

        function CreateSelfRole() {
            var name = $('#self-role-text').val();
            if (name) {
                var str = roleInfo.format(name,
                    " check",
                    '<span class="close" onclick="$(this).parent().remove()">&times;</span>');
                $('#add-role').before(str);
                $('#self-role-text').val('');
            }
            $('#add-box').hide();
            $('#add-role').fadeIn(800).css('display', 'flex');
        }

        function CreateGroupRole() {
            var groupNo = "@(id)";
            abp.message.confirm("您确认提交吗？提交后不可再更改。",
                "创建指挥部",
                function() {
                    var roleGroupNos = [], selfRoleNames = [];
                    $(".group-info.check").each(function(i, v) {
                        var no = $(v).data("id");
                        if (no != 'self') {
                            roleGroupNos.push(no);
                        }
                    });
                    $("#c_self .check").each(function(i, v) {
                        selfRoleNames.push($(v).data("name"));
                    });
                    console.log(roleGroupNos, selfRoleNames);
                    if (roleGroupNos.length <= 0 && selfRoleNames.length <= 0) {
                        abp.message.warn("您还未选择角色。");
                        return;
                    }
                    $.iwbAjax1({
                        url: abp.appUrl + "/Eval/CreateGroupRole",
                        isAlert: false,
                        isValidate: false,
                        data: { GroupNo: groupNo, RoleGroupNos: roleGroupNos, SelfRoleNames: selfRoleNames },
                        success: function() {
                            //window.iwbHub.server.sendPageState(JSON.stringify({ groupNo: groupNo, cmd: "reload" }));
                            //window.iwbHub.server.sendPageState(JSON.stringify({ groupNo: groupNo, cmd: "reload-public" }));
                            //window.iwbHub.server.sendRefreshRole(groupNo);
                            window.location.reload();
                            abp.message.success("角色预案创建成功");
                        }
                    });

                });
        }
    </script>

    <script id="hub">
        abp.signalr.connect(['@(id)', '@(campNo)']);
        iwbHub.client.getReloadAll = function(msg) {
            console.log('getReloadAll: ', msg);
            if (msg) {
                try {
                    var data = JSON.parse(msg);
                    if (data) {
                        if (data.no == '@(id)' || data.no == '@(campNo)') {
                            window.location.reload();
                        }
                    }
                } catch (e) {
                    console.log('getReloadAll: ', e);
                }
            }
        };
        @if (isLeader)
        {
            <text>
                iwbHub.client.getReloadLeader = function(msg) {
                    console.log('getReloadLeader: ', msg);
                    if (msg) {
                        try {
                            var data = JSON.parse(msg);
                            if (data) {
                                if (data.no == '@(id)' || data.no == '@(campNo)') {
                                    window.location.reload();
                                }
                            }
                        } catch (e) {
                            console.log('getReloadLeader: ', e);
                        }
                    }
                };
            </text>
        }
        else
        {
            <text>
        iwbHub.client.getReloadStu = function(msg) {
            console.log('getReloadStu: ', msg);
            if (msg) {
                try {
                    var data = JSON.parse(msg);
                    if (data) {
                        if (data.no == '@(id)' || data.no == '@(campNo)') {
                            window.location.reload();
                        }
                    }
                } catch (e) {
                    console.log('getReloadStu: ', e);
                }
            }
        };
            </text>
        }
    </script>
}