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

{extend name="public/layout"/} {block name="title"}集团-每日学练{/block} {block name="body"}
<style type="text/css">
    html,
    body {
        display: block;
        min-width: 1100px;
    }

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

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



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

    .layui-tab-title .layui-this:after {
        border-bottom: none;
        border: none;
    }

    .layui-tab-title li {
        background-color: #F2F2F2;
        margin: 0px 5px;
    }
    .clearfix::after {
        clear: both;
        content: ' ';
        display: table;
    }
    .clearfix::before {
        content: ' ';
        display: table;
    }
    .width27{
        width: 27%;
    }
    .width19{
        width: 19%;
    }
    .left{
        float: left;
    }
    .center{
        text-align: center;
    }
    .everytopbox{
        padding-top: 16px;
        color: 384855;
    }
    .numbox{
        display: inline-block;
        font-size: 24px;
        font-weight: blod;
        line-height: 40px;
    }
    .relative{
        position: relative;
    }
    .numbox span{
        position: absolute;
        font-size: 14px;
        color: #249EFB;
        left: 110%;
        line-height: 40px;
        white-space: nowrap;
    }
    .toptextbox{
        font-size: 16px;
        padding-bottom: 16px;
    }
    .nowstate{
        display: inline-block;
        font-size: 18px;
        font-weight: bold;
        line-height: 40px;
        color: #249EFB;
    }
    .testit{
        font-size: 18px;
        font-weight: bold;
        width: auto;
        padding: 10px 10px 10px 0;
    }
    .layui-form-switch{
        height: 24px;
        line-height: 24px;
        margin-top: 6px;
        min-width:56px;
        padding:0 5px;
    }
    .layui-form-switch i{
        width: 18px;
        height:18px;
    }
    .layui-form-onswitch i{
        margin-left: -25px;
    }
    .layui-form-onswitch {
        border-color: #249efb;
        background-color: #249efb;
    }
    .layui-form-switch em{
        margin-left: 26px;
    }
    .layui-form-onswitch em{
        margin-left: 5px;
    }
    .studybox{
        margin-top: 24px;
        font-size: 14px;
        color: #384855;
        line-height: 32px;
    }
    .studytit{
        font-size: 16px;
        font-weight: bold;
        position: relative;
        line-height: 24px;
        margin-bottom: 10px;
    }
    .studytit::before{
        content: ' ';
        display: block;
        width: 4px;
        height: 16px;
        background: #249efb;
        position: absolute;
        left: -12px;
        top: 4px;
    }
    .daystudybox{
        padding: 6px 20px;
    }
    .border{
        border: 1px solid #d6d6d6;
    }
    .colorblue{
        /*color: #249efb;*/
       color: #999;
    }
    .mr12{margin-right: 12px;}
    .setbtnbox{
        display: block;
        width: 66px;
        border: 1px solid #249efb;
        height:26px;
        line-height: 26px;
        text-align: center;
        border-radius: 4px;
        color: #249efb;
        cursor: pointer;
        font-size: 12px;
        margin-left:10px;
    }
    .testnum{
        display: block;
        width: 48px;
        height: 28px;
        border: 1px solid #d2d2d2 !important;
        border-radius: 4px;
        padding: 0 4px;
        margin-right: 8px;
    }
    .textbox{
        margin-left: 20px;
        font-size: 12px;
        color: #b4b4b4;
    }
    .savebtn{
        display: block;
        width: 88px;
        height: 32px;
        background-color: #249efb;
        color: #fff;
        text-align: center;
        line-height: 32px;
        border: unset;
        cursor: pointer;
        margin-top: 40px;
        border-radius: 4px;
        overflow: hidden;
    }
    .layui-form-item .layui-input-inline{width:75px;}
    .checkbox-offs .layui-form-switch{margin:-5px 0 0 10px;}
    .layui-form-label{padding:0;text-align: left;line-height: 38px;}
</style>
<body>
    <!--<div class="layui-fluid">
        <div class="layui-card">
            <div class="layui-tab">
                <ul class="layui-tab-title">
                    <li class="layui-this">每日学练</li>
                </ul>
            </div>
        </div>
    </div>-->
    <div class="layui-fluid daystudybox">
        <div class="layui-card">
            <div class="layui-tab clearfix ">
                <div class="width27 left center everytopbox">
                    <div class="relative numbox">
                        {if !empty($data['question_cate_count']) && $data['status'] neq 0}
                            {$data['question_count']}<span>({$data['question_cate_count']}个场景)</span>
                        {else /}
                        0
                        {/if}
                    </div>
                    <div class="toptextbox">试题库数量</div>
                </div>
                <div class="width27 left center everytopbox">
                    <div class="relative numbox">
                        {if !empty($data['train_type_count']) && $data['status'] != 0}
                            {$data['train_count']}<span>({$data['train_type_count']}个场景)</span>
                        {else /}
                        0
                        {/if}
                    </div>
                    <div class="toptextbox">课件库数量</div>
                </div>
                <div class="width27 left center everytopbox">
                    <div class="relative numbox">
                        {if !empty($data['amount']) && $data['status'] != 0}
                        {$data['amount']}
                        {else /}
                        0
                        {/if}
                    </div>
                    <div class="toptextbox">每日学练题量</div>
                </div>

                <div class="width19 left center everytopbox">
                    <div class="nowstate">
                        {if $data['status'] == 1}
                            开启中
                        {elseif $data['status'] == 0 /}
                            未开启
                        {/if}
                    </div>
                    <div class="toptextbox">功能运行状态</div>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-fluid">
        <form class="layui-form daystudybox">
            <div>
                <div class="layui-form-item">
                    <label class="layui-form-label testit">每日学练</label>
                    <div class="layui-input-block" style="margin-left:86px;">
                        {if $data['status'] == 1}
                            <input type="checkbox" name="switch" lay-skin="switch" lay-filter="switchTest" lay-text="开启|关闭" checked>
                        {elseif $data['status'] == 0 /}
                            <input type="checkbox" name="switch" lay-skin="switch" lay-filter="switchTest" lay-text="开启|关闭">
                        {/if}
                    </div>
                </div>
            </div>
            {if $data['status'] == 1}
            <div class="clearfix studybox">
                <div class="studytit" style="margin:-5px 0 40px 0;"><span class="left">学练内容设置</span> <div  class="left setbtnbox">设置内容</div></div>
                <p style="clear:both;"></p>
                <div class="clearfix">
                    <!--<div class="left mr12">
                        <div class="left">添加学练内容：</div>
                        <div  class="left setbtnbox">设置内容</div>
                    </div>-->
                    <div class="left mr12">
                        已设置课件类型：
                        <span class="colorblue">
                            {if !empty($data['train_class_type'])}
                                {$data['train_class_type']}
                            {else /}
                                未设置
                            {/if}
                        </span>
                    </div>
                    <div class="left">
                        已设置试题类型：
                        <span class="colorblue">
                            {if condition="!empty($data['question_type'])"}
                                {$data['question_type']}
                            {else /}
                                未设置
                            {/if}
                        </span>
                    </div>
                </div>
            </div>
            <div class="studybox">
                <div class="studytit">随机参数设置</div>
                <div class="clearfix">
                    <div class="clearfix">
                        <div class="left">每日学练个数：</div>
                        <div class="left clearfix">
                            <input class="left testnum"  name="amount" id="amount" type="number" value="{:empty($data['amount'])?'0':$data['amount']}"  />
                            <span class="left">个</span>
                        </div>
                    </div>
                    <!--<div class="textbox">每日学练个数设置后，员工“添加学练”是设置的随机数不得大于或者或者小于已经设的总量</div>-->
                </div>
            </div>
            <div class="studybox">
                <div class="studytit checkbox-offs">限制学练时间  <input class="checkbox-offs" type="checkbox" name="timelimit" id="timelimit" lay-skin="switch" lay-text="开启|关闭" {if $data['timelimit']} checked {/if}></div>
                <div class="layui-form-item" style="margin-bottom: 5px;">
                    <label class="layui-form-label">设置时间段:</label>
                    <div class="layui-input-inline ">
                        <input type="text" class="layui-input layui-input-inline" name="starttime" id="starttime" placeholder="开始时间"
                            autocomplete="off" lay-verify="" value="{:empty($data['starttime'])?'':$data['starttime']}">
                        <span style="margin-right: 10px;line-height: 38px;">到</span>
                        <input type="text" class="layui-input layui-input-inline" name="endtime" id="endtime" placeholder="结束时间"
                            autocomplete="off"  lay-verify="" value="{:empty($data['endtime'])?'':$data['endtime']}">
                        <span style="margin-right: 20px;line-height: 38px;">点</span>
                    </div>
                </div>
                <div class="textbox">开启时间段后，在设置的时间段内员工可以进行学习，开启时间段外，则无法进入</div>
            </div>

            <button lay-submit="" lay-filter="grant-link-submit" class="savebtn" type="button">保存</button>
            {/if}
        </form>
    </div>
</body>
{/block} {block name="js"}
<script>
    layui.use(['form', 'table'], function () {
        var form = layui.form,
            table = layui.table,
            $ = layui.$;

        form.on('switch(switchTest)', function (data) {
            $.ajax({
                 url: "{:url('day_study/setting')}",
                 type: 'post',
                 data: {
                     status: this.checked?1:0
                 },
                 dataType: 'json',
                 success: function (res) {
                     if (res.code === 0) {
                        location.reload();
                     } else {
                         layer.msg(res.msg, {
                             anim: 6
                             , time: 2000
                         });
                     }
                 }
            });
        });
        
        form.on('submit(grant-link-submit)', function (data) {
            var timelimit = $("#timelimit").get(0).checked?1:0
            var start = parseInt($('#starttime').val());
            var end = parseInt($('#endtime').val());
            if (timelimit) {
                if (isNaN(start) || isNaN(end)) {
                    layer.msg("学习时间段不对", {
                        anim: 6
                        , time: 2000
                    });
                    return false;
                }
                if(start<1|| start>24){
                    layer.msg("开始时间不对", {
                        anim: 6
                        , time: 2000
                    });
                    return false;
                }
                if (end > 24 || end < 1) {
                    layer.msg("结束时间不对", {
                        anim: 6
                        , time: 2000
                    });
                    return false;
                }
                if(end<= start){
                    layer.msg("结束时间不能小于开始时间", {
                        anim: 6
                        , time: 2000
                    });
                    return false;
                }
            }
            $.ajax({
                url: "{:url('day_study/setting')}",
                type: 'post',
                data: {
                    amount:$('#amount').val(), 
                    starttime:$('#starttime').val(),
                    endtime:$('#endtime').val(),
                    timelimit: $("#timelimit").get(0).checked?1:0
                },
                dataType: 'json',
                success: function (res) {
                    if (res.code === 0) {
                        layer.msg('保存成功', {
                            anim: 5
                            , time: 2000
                        });
                        setTimeout(function () {
                            location.reload();
                        }, 2000)
                    } else {
                        layer.msg(res.msg, {
                            anim: 6
                            , time: 2000
                        });
                    }
                }
            });
        });


        $('.setbtnbox').click(function(){
            layer.open({
                type: 2,
                title: ['添加学练', 'color:#333333;background-color:#D8E6F1;'],
                content: '{:url("dayStudy/setting")}',
                resize: false,
                area: ['80%', '80%']
            });
        })
        
    })
</script>
{/block}