We_Relese/OnlineApp/Relese/Views/Play/Create.cshtml

@using IwbZero.ToolCommon.StringModel
@using WeOnlineApp.Configuration
@using WeOnlineApp.Helpers
@using WeOnlineApp.TrainingCamp.Dto

@{
    Layout = "~/Views/Shared/Layout/_Layout.Play.cshtml";
    ViewBag.Title = "创建演练";
    CampDto camp = ViewBag.Camp;
}
   
<link href="~/Content/Css/input.min.css" rel="stylesheet" />
<style>

    #form {
        width: 100%;
        padding: 20px 10px;
    }
    form label.error {
        top: 8px;
        left: auto;
    }
    .float-label {
        color: var(--mainColor);
        font-weight: 600;
    }
    .controls input[type="text"], .controls textarea, .controls select {
        border: 1px solid var(--mainColor);
        background-color: var(--mainBgColor);
    }
    .role-box {
        width: 100%;
        border: 1px solid var(--mainColor);
        padding: 15px 10px 0;
        background-color: var(--mainBgColor);
        position: relative;
        margin-bottom: 20px;
    }

        .role-box .role-label {
            width: auto;
            position: absolute;
            top: -16px;
            left: 7px;
            color: var(--mainColor);
            background-color: var(--mainBgColor);
            font-size: 16px;
            display: inline-block;
            padding: 4px 10px;
            font-weight: 400;
            transition: color .3s,top .3s,background-color .8s;
        }
    .iwb-checkbox.iwb-green {
        color: var(--mainColor);
    }

</style>
@{
   
}
<div class="row box-content">
    <div class="col-sm-6">
            <div class="box" style="height:calc(100vh - 20px)">
                <div class="box-header">
                    <span>创建演练</span>
                    <div class="back-btn">
                        <button type="button" class="btn  btn-outline-success btn-sm mr-3" style="width: 80px;" onclick="Study()">预演学习</button>
                        <button type="button" class="btn  btn-outline-light btn-sm" style="width: 80px;" onclick="Back()">返回课程</button>
                    </div>
                </div>
                <div class="box-body">
                    <form id="form">
                        <div class="row">
                            <div class="controls">
                                <input type="text" id="name" class="float-label required" name="name" autocomplete="off">
                                <label for="name"><i class="fa fa-edit"></i>&nbsp;&nbsp;演练名称</label>
                            </div>
                            <div class="controls">
                                <i class="fa fa-sort"></i>
                                <select id="playModel" class="float-label required" autocomplete="off">
                                    <option value="" selected=""></option>
                                    <option value="@(CampPlayModelDefinition.Team)">团队合作演练</option>
                                    <option value="@(CampPlayModelDefinition.Single)">单人演练</option>
                                </select>
                                <label for="playModel"><i class="fa fa-user"></i>&nbsp;&nbsp;演练模式</label>
                            </div>
                            <div class="controls">
                                <i class="fa fa-sort"></i>
                                <select id="isPublic" class="float-label required" autocomplete="off">
                                    <option value="" selected=""></option>
                                    <option value="false">私有</option>
                                    <option value="true">公开</option>
                                </select>
                                <label for="isPublic"><i class="fa fa-lock"></i>&nbsp;&nbsp;是否公开</label>
                            </div>

                        </div>
                        <div class="row">
                            <div class="role-box">
                                <label class="role-label" for="isPublic"><i class="fa fa-users"></i>&nbsp;&nbsp;演练角色</label>
                                <div class="row">
                                    @if (camp.AssessRoleNames.IsNotEmpty())
                                    {
                                        //PlayRoleNames
                                        var arr = camp.AssessRoleNames.Split(',');
                                        foreach (var roleName in arr)
                                        {
                                            <div class="col-sm-4"><label class="iwb-checkbox iwb-green"><input type="checkbox" data-role-no="@(roleName)" checked="checked" class="assess-role" name="assess-role" value="@(roleName)"><span></span>@(roleName)</label></div>
                                        }
                                    }
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <button type="button" class="btn btn-info btn-block" onclick="Create()" style="border-radius: 0;padding:10px">创建演练</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    <div class="col-sm-6">
        @Html.Partial("~/Views/Play/_CampDetail.cshtml", camp)
    </div>
</div>
@using (Html.BeginScripts())
{
    
<script>
        $(function() {
            InputFloatLabel(".float-label");
            $('#name').val('@(camp.Name)-@(AbpSession.RealName)-@(DateTime.Now.ToString("yyyyMMdd"))').focus();
            $('#playModel').val('@(CampPlayModelDefinition.Single)').focus();
            $('#isPublic').val('false').focus();
        });
        function Study() {
            window.location.href = "@Url.Action("Study","Play")/@(camp.Id)";
        }
        function Create() {
            var flag = $.formValidate($('#form'),
                {
                    errorPlacement: function (error, element) {
                        if (element.parent().find('label.error').length === 0) {
                            element.before(error);
                        }
                        element.focus();
                    }
                });
            if (flag) {
                var roles = [];
                $('#form .assess-role').each(function() {
                    if ($(this).is(":checked")) {
                        roles.push($(this).data("role-no"));
                    }
                });
                if (roles.length <= 0) {
                    abp.message.warn("请至少选择一个角色！");
                    return;
                }
                var data = {
                    campNo:'@(camp.Id)',
                    name:$('#form #name').val(),
                    playModel: $('#form #playModel').val(),
                    isPublic: $('#form #isPublic').val(),
                    playRoleNames: roles.join(",")
                };
                $.iwbAjax4({
                    url: abp.appUrl + "/CampPlay/CreatePlay",
                    data:data,
                    success: function(res) {
                        if (res) {
                            window.open("/play/run/" + res);
                        }
                    },
                    error: function (error) {
                        if (error.details) {
                            return abp.message.error(error.details, error.message);
                        } else {
                            return abp.message.error(error.message || abp.ajax.defaultError.message);
                        }
                    }
                });
            }

        }
</script>

}