修改添加题目功能
This commit is contained in:
云泽网
@@ -0,0 +1,482 @@
|
||||
{include file="public/header" /}
|
||||
<div class="config-container">
|
||||
|
||||
<form class="layui-form" action="" method="post">
|
||||
<div class="form-container">
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">题目类型</label>
|
||||
<div class="layui-input-block">
|
||||
<select name="type" lay-verify="required" lay-filter="questionType">
|
||||
<option value="">请选择题目类型</option>
|
||||
<option value="1">单选题</option>
|
||||
<option value="2">多选题</option>
|
||||
<option value="3">判断题</option>
|
||||
<option value="4">填空题</option>
|
||||
<option value="5">简答题</option>
|
||||
<option value="6">编程题</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">题目年份</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" name="year" placeholder="请输入题目年份" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 题目内容 -->
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">题目内容</label>
|
||||
<div class="layui-input-block">
|
||||
<div id="toolbar-container"></div>
|
||||
<div id="editor-container" style="border:1px solid #ccc; min-height:200px;"></div>
|
||||
<input type="hidden" name="content" id="content-hidden">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 单选题表单 -->
|
||||
<div id="single_choice" class="question-type-form" style="display:none">
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">选项A</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" name="options[A]" lay-verify="required" placeholder="请输入选项A内容" class="layui-input" disabled>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">选项B</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" name="options[B]" lay-verify="required" placeholder="请输入选项B内容" class="layui-input" disabled>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">选项C</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" name="options[C]" placeholder="请输入选项C内容" class="layui-input" disabled>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">选项D</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" name="options[D]" placeholder="请输入选项D内容" class="layui-input" disabled>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">正确答案</label>
|
||||
<div class="layui-input-block">
|
||||
<select name="correct_answer" lay-verify="required" disabled>
|
||||
<option value="A">A</option>
|
||||
<option value="B">B</option>
|
||||
<option value="C">C</option>
|
||||
<option value="D">D</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 多选题表单 -->
|
||||
<div id="multiple_choice" class="question-type-form" style="display:none">
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">选项A</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" name="options[A]" lay-verify="required" placeholder="请输入选项A内容" class="layui-input" disabled>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">选项B</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" name="options[B]" lay-verify="required" placeholder="请输入选项B内容" class="layui-input" disabled>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">选项C</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" name="options[C]" placeholder="请输入选项C内容" class="layui-input" disabled>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">选项D</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" name="options[D]" placeholder="请输入选项D内容" class="layui-input" disabled>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">正确答案</label>
|
||||
<div class="layui-input-block">
|
||||
<select name="correct_answer" lay-verify="required" multiple disabled>
|
||||
<option value="A">A</option>
|
||||
<option value="B">B</option>
|
||||
<option value="C">C</option>
|
||||
<option value="D">D</option>
|
||||
</select>
|
||||
<div class="layui-form-mid layui-word-aux">按住Ctrl键可多选</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 判断题表单 -->
|
||||
<div id="true_false" class="question-type-form" style="display:none">
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">正确答案</label>
|
||||
<div class="layui-input-block">
|
||||
<select name="correct_answer" lay-verify="required" disabled>
|
||||
<option value="1">正确</option>
|
||||
<option value="0">错误</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 填空题表单 -->
|
||||
<div id="fill_blank" class="question-type-form" style="display:none">
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">正确答案</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" name="correct_answer" lay-verify="required" placeholder="请输入正确答案，多个答案用逗号分隔" class="layui-input" disabled>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 简答题表单 -->
|
||||
<div id="short_answer" class="question-type-form" style="display:none">
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">参考答案</label>
|
||||
<div class="layui-input-block">
|
||||
<textarea name="correct_answer" lay-verify="required" placeholder="请输入参考答案" class="layui-textarea" disabled></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 编程题表单 -->
|
||||
<div id="programming" class="question-type-form" style="display:none">
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">编程语言</label>
|
||||
<div class="layui-input-block">
|
||||
<select name="language" lay-verify="required" disabled>
|
||||
<option value="php">PHP</option>
|
||||
<option value="java">Java</option>
|
||||
<option value="python">Python</option>
|
||||
<option value="javascript">JavaScript</option>
|
||||
<option value="c">C</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">参考答案</label>
|
||||
<div class="layui-input-block">
|
||||
<textarea name="correct_answer" lay-verify="required" placeholder="请输入参考答案代码" class="layui-textarea" style="height:300px;" disabled></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">测试用例</label>
|
||||
<div class="layui-input-block">
|
||||
<textarea name="test_case" placeholder="请输入测试用例，多个测试用例用换行分隔" class="layui-textarea" disabled></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item" style="margin-top: 80px;">
|
||||
<div class="layui-input-block">
|
||||
<button class="layui-btn" lay-submit lay-filter="formSubmit">立即提交</button>
|
||||
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<script src="/static/js/wangeditor.js"></script>
|
||||
<script>
|
||||
layui.use(['form', 'layer', 'upload', 'element'], function () {
|
||||
var form = layui.form;
|
||||
var layer = layui.layer;
|
||||
var $ = layui.$;
|
||||
var upload = layui.upload;
|
||||
var element = layui.element;
|
||||
|
||||
// 格式化文件大小
|
||||
function formatFileSize(bytes) {
|
||||
if (bytes === 0) return '0 B';
|
||||
const k = 1024;
|
||||
const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
|
||||
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
||||
return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
|
||||
}
|
||||
|
||||
|
||||
// 图标上传
|
||||
var iconUpload = upload.render({
|
||||
elem: '#upload-btn',
|
||||
url: '{:url("index/upload_img")}',
|
||||
before: function (obj) {
|
||||
obj.preview(function (index, file, result) {
|
||||
$('#upload-img').attr('src', result);
|
||||
});
|
||||
element.progress('icon-progress', '0%');
|
||||
layer.msg('图标上传中', { icon: 16, time: 0 });
|
||||
},
|
||||
done: function (res) {
|
||||
if (res.code > 0) {
|
||||
return layer.msg('图标上传失败');
|
||||
}
|
||||
$('#icon').val(res.data);
|
||||
$('#upload-text').html('');
|
||||
layer.msg('图标上传成功', { icon: 1 });
|
||||
},
|
||||
error: function () {
|
||||
var demoText = $('#upload-text');
|
||||
demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
|
||||
demoText.find('.demo-reload').on('click', function () {
|
||||
iconUpload.upload();
|
||||
});
|
||||
},
|
||||
progress: function (n, elem, e) {
|
||||
element.progress('icon-progress', n + '%');
|
||||
if (n == 100) {
|
||||
layer.msg('图标上传完毕', { icon: 1 });
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// 文件上传
|
||||
var fileUpload = upload.render({
|
||||
elem: '#ID-upload-demo-drag',
|
||||
url: '{:url("index/upload_file")}',
|
||||
accept: 'file',
|
||||
exts: 'doc|docx|xls|xlsx|ppt|pptx|pdf|txt|zip|rar|7z',
|
||||
before: function (obj) {
|
||||
obj.preview(function (index, file, result) {
|
||||
$('#ID-upload-demo-preview').show();
|
||||
$('.file-name').text(file.name);
|
||||
$('.file-size').text(formatFileSize(file.size));
|
||||
});
|
||||
element.progress('file-progress', '0%');
|
||||
layer.msg('文件上传中', { icon: 16, time: 0 });
|
||||
},
|
||||
done: function (res) {
|
||||
if (res.code > 0) {
|
||||
return layer.msg('文件上传失败');
|
||||
}
|
||||
$('#file').val(res.data.src);
|
||||
$('input[name="fileurl"]').val(res.data.src);
|
||||
layer.msg('文件上传成功', { icon: 1 });
|
||||
},
|
||||
error: function () {
|
||||
layer.msg('文件上传失败', { icon: 2 });
|
||||
},
|
||||
progress: function (n, elem, e) {
|
||||
element.progress('file-progress', n + '%');
|
||||
if (n == 100) {
|
||||
layer.msg('文件上传完毕', { icon: 1 });
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// 多图片上传
|
||||
var uploadInst = upload.render({
|
||||
elem: '#imageUpload',
|
||||
url: '{:url("index/upload_img")}',
|
||||
multiple: true,
|
||||
accept: 'images',
|
||||
before: function (obj) {
|
||||
obj.preview(function (index, file, result) {
|
||||
$('#imagePreview').append('<div class="layui-upload-img-item" style="display: inline-block; margin-right: 10px;"><img src="' + result + '" alt="' + file.name + '" style="width: 100px; height: 100px; object-fit: cover;"><p>' + file.name + '</p><button type="button" class="layui-btn layui-btn-xs layui-btn-danger delete-image" style="position: absolute; top: 0; right: 0;">删除</button></div>');
|
||||
});
|
||||
element.progress('image-progress', '0%');
|
||||
layer.msg('图片上传中', { icon: 16, time: 0 });
|
||||
},
|
||||
done: function (res) {
|
||||
if (res.code > 0) {
|
||||
return layer.msg('图片上传失败');
|
||||
}
|
||||
var images = $('#images').val();
|
||||
images = images ? images + ',' + res.data : res.data;
|
||||
$('#images').val(images);
|
||||
layer.msg('图片上传成功', { icon: 1 });
|
||||
},
|
||||
error: function () {
|
||||
var demoText = $('#imagePreview');
|
||||
demoText.append('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
|
||||
demoText.find('.demo-reload').on('click', function () {
|
||||
uploadInst.upload();
|
||||
});
|
||||
},
|
||||
progress: function (n, elem, e) {
|
||||
element.progress('image-progress', n + '%');
|
||||
if (n == 100) {
|
||||
layer.msg('图片上传完毕', { icon: 1 });
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// 只保留题目类型切换逻辑
|
||||
// 初始化所有题型表单为隐藏并禁用
|
||||
$('.question-type-form').hide().find('input,select,textarea').prop('disabled', true);
|
||||
|
||||
// 监听题目类型选择变化
|
||||
form.on('select(questionType)', function (data) {
|
||||
var type = data.value;
|
||||
// 隐藏所有题目类型表单并禁用其输入
|
||||
$('.question-type-form').hide().find('input,select,textarea').prop('disabled', true).val('');
|
||||
// 根据选择的类型显示对应的表单并启用其输入
|
||||
var showId = '';
|
||||
switch(type) {
|
||||
case '1': showId = '#single_choice'; break;
|
||||
case '2': showId = '#multiple_choice'; break;
|
||||
case '3': showId = '#true_false'; break;
|
||||
case '4': showId = '#fill_blank'; break;
|
||||
case '5': showId = '#short_answer'; break;
|
||||
case '6': showId = '#programming'; break;
|
||||
}
|
||||
if(showId) {
|
||||
$(showId).show().find('input,select,textarea').prop('disabled', false);
|
||||
}
|
||||
form.render(); // 重新渲染表单
|
||||
});
|
||||
|
||||
// 默认选中单选题并触发事件
|
||||
$('select[name="type"]').val('1');
|
||||
form.render('select');
|
||||
// 触发layui select事件
|
||||
form.on('select(questionType)', function (data) {
|
||||
var type = data.value;
|
||||
// 隐藏所有题目类型表单并禁用其输入
|
||||
$('.question-type-form').hide().find('input,select,textarea').prop('disabled', true).val('');
|
||||
// 根据选择的类型显示对应的表单并启用其输入
|
||||
var showId = '';
|
||||
switch(type) {
|
||||
case '1': showId = '#single_choice'; break;
|
||||
case '2': showId = '#multiple_choice'; break;
|
||||
case '3': showId = '#true_false'; break;
|
||||
case '4': showId = '#fill_blank'; break;
|
||||
case '5': showId = '#short_answer'; break;
|
||||
case '6': showId = '#programming'; break;
|
||||
}
|
||||
if(showId) {
|
||||
$(showId).show().find('input,select,textarea').prop('disabled', false);
|
||||
}
|
||||
form.render(); // 重新渲染表单
|
||||
});
|
||||
// 主动触发一次select事件，确保单选题表单显示
|
||||
form.render('select');
|
||||
$('select[name="type"]').next().find('dl dd[lay-value="1"]').click();
|
||||
|
||||
// 配置 wangeditor 编辑器
|
||||
const { createEditor, createToolbar } = window.wangEditor;
|
||||
const editorConfig = {
|
||||
MENU_CONF: {},
|
||||
placeholder: '请输入内容...',
|
||||
onChange(editor) {
|
||||
const html = editor.getHtml();
|
||||
},
|
||||
};
|
||||
editorConfig.MENU_CONF['uploadImage'] = {
|
||||
server: '{:url("index/upload_img")}',
|
||||
fieldName: 'file',
|
||||
maxFileSize: 50 * 1024 * 1024,
|
||||
maxNumberOfFiles: 10,
|
||||
allowedFileTypes: ['image/*'],
|
||||
meta: { token: 'xxx' },
|
||||
metaWithUrl: true,
|
||||
headers: { Accept: 'text/x-json' },
|
||||
timeout: 30 * 1000,
|
||||
onBeforeUpload(file) {
|
||||
console.log('准备上传图片', file);
|
||||
return file;
|
||||
},
|
||||
onProgress(progress) {
|
||||
console.log('上传进度', progress);
|
||||
},
|
||||
onSuccess(file, res) {
|
||||
console.log('上传成功', file, res);
|
||||
},
|
||||
onFailed(file, res) {
|
||||
layer.msg('上传失败：' + res.msg, { icon: 2 });
|
||||
console.log('上传失败', file, res);
|
||||
},
|
||||
onError(file, err, res) {
|
||||
layer.msg('上传出错：' + err.message, { icon: 2 });
|
||||
console.error('上传出错', file, err, res);
|
||||
},
|
||||
customInsert(res, insertFn) {
|
||||
if (res.code === 0 && res.url) {
|
||||
let imageUrl = res.url;
|
||||
if (!imageUrl.startsWith('http')) {
|
||||
imageUrl = 'https://' + imageUrl;
|
||||
}
|
||||
imageUrl = imageUrl.replace(/^https?:\/\/[^\/]+\/admin\/resources\//, 'https://www.yunzer.cn/');
|
||||
insertFn(imageUrl);
|
||||
} else {
|
||||
layer.msg('图片上传失败：' + (res.msg || '未知错误'), { icon: 2 });
|
||||
}
|
||||
}
|
||||
};
|
||||
const editor = createEditor({
|
||||
selector: '#editor-container',
|
||||
html: '<p><br></p>',
|
||||
config: editorConfig,
|
||||
mode: 'default',
|
||||
});
|
||||
const toolbar = createToolbar({
|
||||
editor,
|
||||
selector: '#toolbar-container',
|
||||
config: {},
|
||||
mode: 'default',
|
||||
});
|
||||
|
||||
// 表单提交
|
||||
form.on('submit(formSubmit)', function (data) {
|
||||
var content = editor.getHtml();
|
||||
if (!content || content === '<p><br></p>') {
|
||||
layer.msg('请输入文章内容', { icon: 2 });
|
||||
return false;
|
||||
}
|
||||
$('#content-hidden').val(content); // 同步内容到隐藏input
|
||||
var loadIndex = layer.load(2);
|
||||
data.field.content = content;
|
||||
$.ajax({
|
||||
url: '{:url("resources/add")}',
|
||||
type: 'POST',
|
||||
data: data.field,
|
||||
success: function (res) {
|
||||
layer.close(loadIndex);
|
||||
if (res.code == 0) {
|
||||
layer.msg(res.msg, { icon: 1 });
|
||||
setTimeout(function () {
|
||||
window.location.href = '{:url("resources/lists")}';
|
||||
}, 1000);
|
||||
} else {
|
||||
layer.msg(res.msg, { icon: 2 });
|
||||
}
|
||||
}
|
||||
});
|
||||
return false;
|
||||
});
|
||||
|
||||
//返回题目列表
|
||||
function goBack() {
|
||||
window.location.href = '{:url("resources/lists")}';
|
||||
}
|
||||
}); // <-- 这里闭合layui.use的function
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.form-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.layui-form-label {
|
||||
width: auto !important;
|
||||
}
|
||||
|
||||
.container-left {
|
||||
width: 35%;
|
||||
}
|
||||
|
||||
.container-right {
|
||||
width: 65%;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user