|
@@ -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;
|
|
|
|
|
@@ -126,6 +142,7 @@
|
|
|
layedit.setContent(editIndex, editdata.title, false);
|
|
|
chapter_id = editdata.chapter;
|
|
|
subjectChange(editdata.subject)
|
|
|
+ typeChange(editdata.type.toString(), editdata.items)
|
|
|
}
|
|
|
};
|
|
|
var subjectChange = function (value) {
|
|
@@ -155,49 +172,43 @@
|
|
|
, '|', '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 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
|
|
@@ -226,6 +237,193 @@
|
|
|
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") {
|
|
|
+ //填空题
|
|
|
+ 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>
|