482 lines
19 KiB
PHP
482 lines
19 KiB
PHP
{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> |