liutao
/
ks


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442
							<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>添加运维宝典</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="../../layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../../layuiadmin/style/admin.css" media="all">
</head>
<body>

<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body">
            <form class="layui-form" action="" lay-filter="component-form-element">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label"><font color='red' size="4">*</font>科目：</label>
                        <div class="layui-input-inline">
                            <select name="subject" id="id_subject" lay-verify="required" lay-filter="subjectChange">
                                <option value="">请选择科目</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label"><font color='red' size="4">*</font>章节：</label>
                        <div class="layui-input-inline">
                            <select name="chapter" id="id_chapter" lay-verify="required">
                                <option value="">请选择章节</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label"><font color='red' size="4">*</font>题型：</label>
                        <div class="layui-input-inline">
                            <select name="type" lay-verify="required" lay-filter="typeChange" id="id_type">
                                <option value="">请选择题型</option>
                                <option value="1">单选题</option>
                                <option value="2">多选题</option>
                                <option value="3">填空题</option>
                                <option value="4">判断题</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label"><font color='red' size="4">*</font>难度：</label>
                        <div class="layui-input-inline">
                            <select name="difficulty" lay-verify="required">
                                <option value="">请选择难度</option>
                                <option value="1">简单</option>
                                <option value="2">中等</option>
                                <option value="3">困难</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label"><font color='red' size="4">*</font>分数：</label>
                        <div class="layui-input-inline">
                            <input type="text" name="scores" lay-verify="number"
                                   class="layui-input">
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label"><font color='red' size="4">*</font>内容：</label>
                    <div class="layui-input-block">
                        <textarea class="layui-textarea" placeholder="请输内容" id="content_demo"></textarea>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label"><font color='red' size="4">*</font>选项：</label>
                    <div class="layui-input-block" id="id_table">
                        <div class="layui-btn layui-btn-sm layui-btn-normal" id="add_answer">
                            <i class="layui-icon layui-icon-add "></i> 添加答案
                        </div>
                        <div style="height: 5px"></div>
                        <div id="tableRes" class="table-overlay" style="align-items: center">
                            <table id="dataTable" lay-filter="dataTable"></table>
                        </div>
                    </div>
                    <div class="layui-input-block layui-hide" id="id_panduan">
                        <input type="radio" name="judgment" value="1" title="正确" lay-verify="required">
                        <input type="radio" name="judgment" value="0" title="错误" lay-verify="required">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">解析：</label>
                    <div class="layui-input-block">
                        <textarea class="layui-textarea" placeholder="请输内容" name="analysis"></textarea>
                    </div>
                </div>

                <button class="layui-btn" id="id_save" lay-submit lay-filter="component-form-element"
                        style="display: none">保存
                </button>
                <button class="layui-btn" type="button" id="upload_image" style="display: none"></button>
            </form>
        </div>
    </div>
</div>


<script src="../../layuiadmin/layui/layui.js"></script>
<script>
    layui.config({
        base: '../../../layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index',
    }).use(['index', 'form', 'utils', 'table', 'layedit'], function () {
        var $ = layui.$
            , admin = layui.admin
            , table = layui.table
            , layedit = layui.layedit
            , form = layui.form;

        var id = layui.view.getParameterByName('id');
        var chapters = [], chapter_id = ''
        admin.req({
            url: '/admin/subject/dict/',
            done: function (res) {
                chapters = res.data.chapter;
                var subject = res.data.subject;
                var subject_node = $('#id_subject');
                for (var i in subject) {
                    var pid = subject[i].id;
                    var subject_value = subject[i].name;
                    subject_node.append("<option value='" + pid + "'>" + subject_value + "</option>");
                }
                form.render();
                loadData()
            }
        });
        var loadData = function () {
            if (id) {
                var editdata = JSON.parse(JSON.stringify(parent.layui.table.editdata)); // 框架有Bug所以这么转换
                form.val("component-form-element", editdata);
                layedit.setContent(editIndex, editdata.title, false);
                chapter_id = editdata.chapter;
                subjectChange(editdata.subject)
                typeChange(editdata.type.toString(), editdata.items)
            }
        };
        var subjectChange = function (value) {
            var chapter_option = '';
            for (var i = 0; i < chapters.length; i++) {
                if (chapters[i].subject_id == parseInt(value)) {
                    if (chapters[i].id == chapter_id)
                        chapter_option += "<option value=" + chapters[i].id + " selected>" + chapters[i].name + "</option>";
                    else
                        chapter_option += "<option value=" + chapters[i].id + ">" + chapters[i].name + "</option>";
                }
            }
            $("#id_chapter").append(chapter_option);
            form.render();
        };
        form.on('select(subjectChange)', function (data) {
            $("#id_chapter").html('');
            if (!data.value) return;
            subjectChange(data.value)
        });

        var editIndex = layedit.build('content_demo', {
            height: 180,
            tool: [
                'code', 'strong', 'italic', 'underline', 'del', 'addhr', '|', 'fontFomatt', 'colorpicker', 'face'
                , '|', 'left', 'center', 'right', '|', 'link', 'unlink', 'anchors'
                , '|', 'fullScreen'
            ],
        });
        form.render(null, 'component-form-element');

        var url = id ? '/admin/examquestion/' + id + "/" : '/admin/examquestion/',
            method = id ? 'put' : 'post'

        form.on('submit(component-form-element)', function (data) {
            data.field.title = layedit.getContent(editIndex);
            var id_type = data.field.type
            var oldData = table.cache[layTableId], rows = [], item = {}, error_msg = '', checked = 0

            for (var i = 0; i < oldData.length; i++) {
                //单选题、多选、填空
                if (!oldData[i].content) {
                    error_msg = '选项' + oldData[i].answer + '请填写答案'
                    break
                }
                if (oldData[i].LAY_CHECKED) {
                    checked += 1
                }
                item = {
                    id: oldData[i].id,
                    content: oldData[i].content,
                    right: oldData[i].LAY_CHECKED ? 1 : 0,
                    order: oldData[i].LAY_TABLE_INDEX,
                }
                rows.push(item)

            }
            if (error_msg) {
                layer.msg(error_msg, {icon: 2});
                return false
            }
            if (!checked && id_type < 3) {
                layer.msg('请选择一个正确答案！', {icon: 2});
                return false
            }
            data.field.rows = JSON.stringify(rows)
            admin.req({
                url: url
                , data: data.field
                , type: method
                , done: function (res) {
                    if (res.code != 0) {
                        layer.msg(res.msg);
                    } else {
                        layer.open({
                            type: 1
                            , content: '<div style="padding: 20px 100px;">保存成功</div>'
                            , btn: '关闭'
                            , btnAlign: 'c' //按钮居中
                            , shade: 0 //不显示遮罩
                            , yes: function () {
                                parent.layer.closeAll('iframe');
                                parent.layui.table.reload('exam_question_datagrid', {});
                            }
                        });
                    }
                }
            });
            return false;
        });

        parent.layui.submitChild = function () {
            $("#id_save").click();
        };
        /////////////////////table
        var tbWidth = $("#tableRes").width();
        var cols = [
            {title: '正确答案', type: 'radio', width: '7%',},
            {field: 'answer', title: '选项', width: '7%',},
            {field: 'content', title: '答案', edit: 'text', width: '50%',},
            {
                field: 'id', title: '操作', width: '20%', templet: function (d) {
                    return '<a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del" lay-id="' + d.id + '"><i class="layui-icon layui-icon-delete"></i>删除</a>';
                }
            }
        ]
        var layTableId = "layTable";
        var tableIns = table.render({
            elem: '#dataTable',
            id: layTableId,
            data: [],
            width: tbWidth,
            page: false,
            limit: 100,
            loading: true,
            even: true, //不开启隔行背景
            cols: [cols],
            done: function (data, date, total) {
            }
        });

        var active = {
            removeItem: function (index) {
                var oldData = table.cache[layTableId];
                oldData.splice(index, 1);    //删除一项
                var id_type = $('#id_type').val()
                for (var i = 0; i < oldData.length; i++) {
                    if (id_type === "1" || id_type === "2") {
                        //单选题、多选
                        oldData[i].answer = answers[i]
                    }
                    else if (id_type === "3") {
                        //填空题
                        oldData[i].answer = '空白' + (parseInt(i) + 1)
                    }
                }
                tableIns.reload({
                    data: oldData,
                });
            },
        }
        //激活事件
        var activeByType = function (type, arg) {
            if (arguments.length === 2) {
                active[type] ? active[type].call(this, arg) : '';
            } else {
                active[type] ? active[type].call(this) : '';
            }
        }
        table.on('tool(dataTable)', function (obj) {
            var data = obj.data, event = obj.event, tr = obj.tr; //获得当前行 tr 的DOM对象;
            var data_index = tr.attr("data-index");
            switch (event) {
                case "del":
                    //obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                    activeByType('removeItem', data_index);
                    layer.msg('删除成功', {icon: 6});
                    break;
            }
        });
        var answers = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R',
            'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z']
        form.on('select(typeChange)', function (data) {
            // 更换题型，重新加载table
            if (!data.value) return;
            typeChange(data.value)
        })
        var typeChange = function (value, items = []) {
            layui.$('#id_panduan').addClass('layui-hide')
            layui.$('#id_table').removeClass('layui-hide')
            var oldData = [], _cols = cols
            if (value === "1") {
                //单选题
                if (items.length > 0) {
                    for (var i = 0; i < items.length; i++) {
                        oldData.push(
                            {
                                id: items[i].id,
                                LAY_CHECKED: items[i].right,
                                answer: answers[i],
                                content: items[i].content,
                            }
                        )
                    }
                } else {
                    for (var i = 0; i < 4; i++) {
                        oldData.push(
                            {
                                id: '',
                                answer: answers[i],
                                content: '',
                            }
                        )
                    }
                }
                _cols[0] = {title: '正确答案', type: 'radio', width: '7%',}
            }
            else if (value === "2") {
                //多选题
                if (items.length > 0) {
                    for (var i = 0; i < items.length; i++) {
                        oldData.push(
                            {
                                id: items[i].id,
                                LAY_CHECKED: items[i].right,
                                answer: answers[i],
                                content: items[i].content,
                            }
                        )
                    }
                } else {
                    for (var i = 0; i < 5; i++) {
                        oldData.push(
                            {
                                id: '',
                                answer: answers[i],
                                content: '',
                            }
                        )
                    }
                }
                _cols[0] = {title: '正确答案', type: 'checkbox', width: '7%',}
            }
            else if (value === "3") {
                //填空题
                if (items.length > 0) {
                    for (var i = 0; i < items.length; i++) {
                        oldData.push(
                            {
                                id: items[i].id,
                                answer: '空白' + items[i].order,
                                content: items[i].content,
                            }
                        )
                    }
                } else {
                    for (var i = 0; i < 3; i++) {
                        oldData.push(
                            {
                                id: '',
                                answer: '空白' + (i + 1),
                                content: '',
                            }
                        )
                    }
                }
                _cols = _cols.slice(1, 4)
                    _cols[0] = {field: 'answer', title: '选项', width: '7%',}
            }
            else if (value === "4") {
                //判断题
                layui.$('#id_panduan').removeClass('layui-hide')
                layui.$('#id_table').addClass('layui-hide')
            }
            tableIns.reload({
                data: oldData,
                cols: [_cols],
            });
        }
        $('#add_answer').on('click', function () {
            var id_type = $('#id_type').val()
            if (!id_type) {
                layer.msg("请先选择题型！", {icon: 2})
                return false
            }

            var oldData = table.cache[layTableId];
            var oldData_len = oldData.length
            if (id_type === "1" || id_type === "2") {
                //单选题
                oldData.push(
                    {
                        id: '',
                        answer: answers[oldData_len],
                        content: '',
                    }
                )
            }
            else if (id_type === "3") {
                //填空题
                oldData.push(
                    {
                        id: '',
                        answer: '空白' + (oldData_len + 1),
                        content: '',
                    }
                )
            }
            tableIns.reload({
                data: oldData,
            });
        });

    });
</script>
</body>
</html>