试题管理web 保存

apps/examination/examquestion/models.py

@@ -50,17 +50,19 @@ class ExamQuestionOption(models.Model):
     main = models.ForeignKey(ExamQuestion, verbose_name=u"试题", on_delete=models.PROTECT)
     content = models.TextField(verbose_name=u"内容")
     right = models.BooleanField(verbose_name=u'正确答案', default=False)
+    delete = models.BooleanField(verbose_name=u'删除', default=False, editable=False)
 
     class Meta:
         db_table = "exam_question_option"
         ordering = ['id']
-        verbose_name = u"试题选项"
+        verbose_name = u"选择题选项" # 单选、多选
         default_permissions = ()
 
 class ExamQuestionFill(models.Model):
     main = models.ForeignKey(ExamQuestion, verbose_name=u"试题", on_delete=models.PROTECT)
     content = models.TextField(verbose_name=u"内容")
     order = models.IntegerField(verbose_name=u'排序')
+    delete = models.BooleanField(verbose_name=u'删除', default=False, editable=False)
 
     class Meta:
         db_table = "exam_question_fill"

uis/admin/examquestion/edit.html

@@ -28,7 +28,7 @@
                     <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" >
+                            <select name="chapter" id="id_chapter" lay-verify="required">
                                 <option value="">请选择章节</option>
                             </select>
                         </div>
@@ -38,7 +38,7 @@
                     <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">
+                            <select name="type" lay-verify="required" lay-filter="typeChange" id="id_type">
                                 <option value="">请选择题型</option>
                                 <option value="1">单选题</option>
                                 <option value="2">多选题</option>
@@ -72,6 +72,22 @@
                         <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">
@@ -95,10 +111,10 @@
         base: '../../../layuiadmin/' //静态资源所在路径
     }).extend({
         index: 'lib/index',
-    }).use(['index', 'form', 'utils', 'upload', 'layedit'], function () {
+    }).use(['index', 'form', 'utils', 'table', 'layedit'], function () {
         var $ = layui.$
             , admin = layui.admin
-            , upload = layui.upload
+            , table = layui.table
             , layedit = layui.layedit
             , form = layui.form;
 
@@ -155,49 +171,14 @@
                 , '|', 'fullScreen'
             ],
         });
-
-        // function compareStr(oldStr, newStr){
-        //     //如果字符串相同的话就不在比较
-        //     if(oldStr === newStr) return [];
-        //     //   比较旧的字符串中的src是否还包含在新的字符串中，如果没有表示需要删掉该file
-        //     let srcReg = /src=[\'\"]?([^\'\"]*)[\'\"]?/i // 匹配字符串中的src
-        //     let imgReg = /<img.*?(?:>|\/>)/gi //匹配img标签
-        //     let videoReg = /<video.*?(?:>|\/>)/gi //匹配video标签
-        //     let arrImg = oldStr.match(imgReg);
-        //     let arrVideo = oldStr.match(videoReg);
-        //     let tagArr = [...arrImg, ...arrVideo];
-        //     let srcArr = [];
-        //     //获取旧字符串中的所有src，push进srcArr数组。
-        //     if(tagArr && tagArr.length > 0){
-        //         tagArr.forEach(item=>{
-        //             let src = item.match(srcReg);
-        //             srcArr.push(src[1])
-        //         })
-        //     }
-        //     //遍历srcArr数组，并与新字符串对比，获取需要删除的src（新字符串中不包含旧的路径需要删除）
-        //     let delArr = [];
-        //     if(srcArr && srcArr.length > 0){
-        //         srcArr.forEach(item=>{
-        //             if(newStr.indexOf(item) === -1){
-        //                 delArr.push(item)
-        //             }
-        //         })
-        //     }
-        //     return delArr
-        // }
-
         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) {
-            //layer.msg(JSON.stringify(data.field));
-            //富文本中的内容
             data.field.title = layedit.getContent(editIndex);
-            // let newContent = data.field.content;
-            // let delArr = compareStr(oldContent, newContent);
-
+            var rows = table.cache[layTableId];
             admin.req({
                 url: url
                 , data: data.field
@@ -226,6 +207,172 @@
         parent.layui.submitChild = function () {
             $("#id_save").click();
         };
+        /////////////////////table
+        var tbWidth = $("#tableRes").width();
+        var cols = [
+            {field: 'is_answer', title: '正确答案', type: 'radio', width: '7%',},
+            {field: 'answer', title: '选项', width: '7%',},
+            {field: 'content', title: '答案', edit: 'text', width: '50%',},
+            {
+                field: 'id', title: '', templet: function (d) {
+                    if (d.id) {
+                        return ''
+                    } else {
+                        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 = aswers[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 aswers = ['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;
+            layui.$('#id_panduan').addClass('layui-hide')
+            layui.$('#id_table').removeClass('layui-hide')
+            var oldData = [], _cols = cols
+            if (data.value === "1") {
+                //单选题
+                for (var i = 0; i < 4; i++) {
+                    oldData.push(
+                        {
+                            id: '',
+                            is_answer: '',
+                            answer: aswers[i],
+                            content: '',
+                        }
+                    )
+                }
+                _cols[0] = {field: 'is_answer', title: '正确答案', type: 'radio', width: '7%',}
+            }
+            else if (data.value === "2") {
+                //多选题
+                for (var i = 0; i < 5; i++) {
+                    oldData.push(
+                        {
+                            id: '',
+                            is_answer: '',
+                            answer: aswers[i],
+                            content: '',
+                        }
+                    )
+                }
+                _cols[0] = {field: 'is_answer', title: '正确答案', type: 'checkbox', width: '7%',}
+            }
+            else if (data.value === "3") {
+                //填空题
+                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 (data.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: '',
+                        is_answer: '',
+                        answer: aswers[oldData_len],
+                        content: '',
+                    }
+                )
+            }
+            else if (id_type === "3") {
+                //填空题
+                oldData.push(
+                    {
+                        id: '',
+                        answer: '空白' + (oldData_len + 1),
+                        content: '',
+                    }
+                )
+            }
+            tableIns.reload({
+                data: oldData,
+            });
+        });
+
     });
 </script>
 </body>

uis/admin/examquestion/index.html

@@ -122,9 +122,9 @@
                 {title: '编号', type: 'numbers'}
                 , {field: 'subject_text', title: '科目', width: 150}
                 , {field: 'chapter_text', title: '章节', width: 150}
-                , {field: 'type_text', title: '难度', width: 100}
+                , {field: 'type_text', title: '题型', width: 100}
                 , {field: 'title', title: '内容', width: 400}
-                , {field: 'difficulty_text', title: '题型', width: 100}
+                , {field: 'difficulty_text', title: '难度', width: 100}
                 , {field: 'create_user_text', title: '录入人', width: 150}
                 , {field: 'create_time', title: '录入时间', width: 200}
                 , {title: '操作', width: 180, align: 'center', fixed: 'right', toolbar: '#exam_question-operate-bar'}
@@ -204,7 +204,7 @@
             layer.open({
                 type: 2,
                 title: '添加试题',
-                area: ['80%', '80%'],
+                area: ['80%', '90%'],
                 btn: ['保存', '取消'],
                 yes: function (index, dom) {
                     layui.onSubmitChild = function (res) {