|
@@ -0,0 +1,435 @@
|
|
|
+<!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 main_id = layui.view.getParameterByName('main_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 (main_id) {
|
|
|
+ admin.req({
|
|
|
+ url: '/admin/examquestion/' + main_id + '/',
|
|
|
+ done: function (res) {
|
|
|
+ if (res.code) {
|
|
|
+ layer.msg(res.msg);
|
|
|
+ }
|
|
|
+ form.val("component-form-element", res.data);
|
|
|
+ layedit.setContent(editIndex, res.data.title, false);
|
|
|
+ chapter_id = res.data.chapter;
|
|
|
+ subjectChange(res.data.subject);
|
|
|
+ typeChange(res.data.type.toString(), res.data.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');
|
|
|
+
|
|
|
+ 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
|
|
|
+
|
|
|
+ data.field.feedback = id;
|
|
|
+
|
|
|
+ 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: '/admin/examquestion/' + main_id + "/"
|
|
|
+ , data: data.field
|
|
|
+ , type: 'put'
|
|
|
+ , done: function (res) {
|
|
|
+ parent.layui.onSubmitChild(res.data);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ 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>
|