dshclm
10 months ago
parent
c953778be0
commit
648c6a8510
@ -1,50 +1,342 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
|
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
|
||||||
<head>
|
<head>
|
||||||
<th:block th:include="include :: header('修改题11库')" />
|
<th:block th:include="include :: header('新增题库')" />
|
||||||
<th:block th:include="include :: summernote-css" />
|
<th:block th:include="include :: element-css" />
|
||||||
|
<th:block th:include="include :: select2-css" />
|
||||||
</head>
|
</head>
|
||||||
|
<style>
|
||||||
|
.text {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item {
|
||||||
|
padding: 18px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box-card {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
<body class="white-bg">
|
<body class="white-bg">
|
||||||
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
|
<div class="wrapper wrapper-content animated fadeInRight ibox-content" id="app">
|
||||||
<form class="form-horizontal m" id="form-repo-edit" th:object="${repo}">
|
<div class="app-container">
|
||||||
<input id="id" name="id" th:field="*{id}" type="hidden">
|
<el-form ref="postForm" :model="postForm" :rules="rules" label-position="left" label-width="150px">
|
||||||
<div class="form-group">
|
<el-card>
|
||||||
<label class="col-sm-2 control-label is-required">题库标题：</label>
|
<el-form-item label="题目类型 " prop="quType">
|
||||||
<div class="col-sm-10">
|
<el-select v-model="postForm.quType" :disabled="quTypeDisabled" class="filter-item" @change="handleTypeChange">
|
||||||
<input id="title" name="title" th:field="*{title}" class="form-control" type="text" required>
|
<el-option
|
||||||
</div>
|
v-for="item in quTypes"
|
||||||
</div>
|
:key="item.value"
|
||||||
<div class="row">
|
:label="item.label"
|
||||||
<div class="col-sm-12">
|
:value="item.value"
|
||||||
<div class="form-group">
|
/>
|
||||||
<label class="col-xs-2 control-label">题库备注：</label>
|
</el-select>
|
||||||
<div class="col-xs-10">
|
</el-form-item>
|
||||||
<textarea name="remark" maxlength="500" class="form-control" rows="3">[[*{remark}]]</textarea>
|
<el-form-item label="难度等级 " prop="levels">
|
||||||
</div>
|
<el-select v-model="postForm.levels" class="filter-item">
|
||||||
</div>
|
<el-option
|
||||||
|
v-for="item in levels"
|
||||||
|
:key="item.value"
|
||||||
|
:label="item.label"
|
||||||
|
:value="item.value"
|
||||||
|
/>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="归属题库" prop="repoIds">
|
||||||
|
<el-select v-model="postForm.repoIds" multiple placeholder="请选择">
|
||||||
|
<el-option th:each="item : ${repo}" th:text="${item.title}" th:label="${item.title}" th:value="${item.id}"></el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="题目内容" prop="content">
|
||||||
|
<el-input v-model="postForm.content" type="textarea" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-card>
|
||||||
|
<div v-if="postForm.quType!==4" class="filter-container" style="margin-top: 25px">
|
||||||
|
<el-button class="filter-item" type="primary" icon="el-icon-plus" size="small" plain @click="handleAdd">
|
||||||
|
添加
|
||||||
|
</el-button>
|
||||||
|
<el-table
|
||||||
|
:data="postForm.answerList"
|
||||||
|
:border="true"
|
||||||
|
style="width: 100%;margin-top: 25px"
|
||||||
|
>
|
||||||
|
<el-table-column
|
||||||
|
label="是否答案"
|
||||||
|
width="120"
|
||||||
|
align="center"
|
||||||
|
>
|
||||||
|
<template v-slot="scope">
|
||||||
|
<el-checkbox v-model="scope.row.isRight">答案</el-checkbox>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
label="答案内容"
|
||||||
|
>
|
||||||
|
<template v-slot="scope">
|
||||||
|
<el-input v-model="scope.row.content" type="textarea" />
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
|
||||||
|
<el-table-column
|
||||||
|
label="答案解析"
|
||||||
|
>
|
||||||
|
<template v-slot="scope">
|
||||||
|
<el-input v-model="scope.row.analysis" type="textarea" />
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
|
||||||
|
<el-table-column
|
||||||
|
label="操作"
|
||||||
|
align="center"
|
||||||
|
width="100px"
|
||||||
|
>
|
||||||
|
<template v-slot="scope">
|
||||||
|
<el-button type="danger" icon="el-icon-delete" circle @click="removeItem(scope.$index)" />
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
|
||||||
|
</el-table>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
<div style="margin-top: 20px">
|
||||||
|
<el-button type="primary" icon="el-icon-check" @click="submitForm">保存</el-button>
|
||||||
|
<el-button type="info" icon="el-icon-back" onclick="closeItem()">返回</el-button>
|
||||||
</div>
|
</div>
|
||||||
|
</el-form>
|
||||||
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-sm-offset-5 col-sm-10">
|
|
||||||
<button type="button" class="btn btn-sm btn-primary" onclick="submitHandler()"><i class="fa fa-check"></i>保 存</button>
|
|
||||||
<button type="button" class="btn btn-sm btn-danger" onclick="closeItem()"><i class="fa fa-reply-all"></i>关 闭 </button>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<!-- <div class="row">-->
|
||||||
|
<!-- <div class="col-sm-offset-5 col-sm-10">-->
|
||||||
|
<!-- <button type="button" class="btn btn-sm btn-primary" onclick="submitHandler()"><i class="fa fa-check"></i>保 存</button> -->
|
||||||
|
<!-- <button type="button" class="btn btn-sm btn-danger" onclick="closeItem()"><i class="fa fa-reply-all"></i>关 闭 </button>-->
|
||||||
|
<!-- </div>-->
|
||||||
|
<!-- </div>-->
|
||||||
<th:block th:include="include :: footer" />
|
<th:block th:include="include :: footer" />
|
||||||
<th:block th:include="include :: summernote-js" />
|
<th:block th:include="include :: element-js" />
|
||||||
|
<th:block th:include="include :: select2-js" />
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var prefix = ctx + "system/repo";
|
var prefix = ctx + "system/repo";
|
||||||
$("#form-repo-edit").validate({
|
$("#form-repo-add").validate({
|
||||||
focusCleanup: true
|
focusCleanup: true
|
||||||
});
|
});
|
||||||
function submitHandler() {
|
function submitHandler() {
|
||||||
if ($.validate.form()) {
|
console.log($('#form-repo-add').serialize())
|
||||||
$.operate.saveTab(prefix + "/edit", $('#form-repo-edit').serialize());
|
// if ($.validate.form()) {
|
||||||
|
// $.operate.saveTab(prefix + "/add", $('#form-repo-add').serialize());
|
||||||
|
// }
|
||||||
|
}
|
||||||
|
$(function() {
|
||||||
|
$('#repoIds').select2({
|
||||||
|
placeholder: "归属题库",
|
||||||
|
allowClear: true
|
||||||
|
});
|
||||||
|
})
|
||||||
|
var app = new Vue({
|
||||||
|
el: '#app',
|
||||||
|
data: {
|
||||||
|
quTypeDisabled: true,
|
||||||
|
itemImage: true,
|
||||||
|
levels: [
|
||||||
|
{ value: 1, label: '普通' },
|
||||||
|
{ value: 2, label: '较难' }
|
||||||
|
],
|
||||||
|
|
||||||
|
quTypes: [{
|
||||||
|
value: 1,
|
||||||
|
label: '单选题'
|
||||||
|
}, {
|
||||||
|
value: 2,
|
||||||
|
label: '多选题'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 3,
|
||||||
|
label: '判断题'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
sysQuTypeOptions:[],//题库类型
|
||||||
|
postForm: {
|
||||||
|
repoIds: [],
|
||||||
|
tagList: [],
|
||||||
|
answerList: []
|
||||||
|
},
|
||||||
|
rules: {
|
||||||
|
content: [
|
||||||
|
{ required: true, message: '题目内容不能为空！' }
|
||||||
|
],
|
||||||
|
|
||||||
|
quType: [
|
||||||
|
{ required: true, message: '题目类型不能为空！' }
|
||||||
|
],
|
||||||
|
|
||||||
|
levels: [
|
||||||
|
{ required: true, message: '必须选择难度等级！' }
|
||||||
|
],
|
||||||
|
|
||||||
|
repoIds: [
|
||||||
|
{ required: true, message: '至少要选择一个题库！' }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
},
|
||||||
|
mounted(){
|
||||||
|
this.getQuType()
|
||||||
|
this.getLevelsList()
|
||||||
|
this.getRepoIdsList()
|
||||||
|
this.getDetail()
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
//获取详情
|
||||||
|
getDetail(){
|
||||||
|
console.log( [[${detailDTO.id}]])
|
||||||
|
axios.get(ctx + 'system/qu/detail', {params: {quId: [[${detailDTO.id}]]}})
|
||||||
|
.then(function (response) {
|
||||||
|
console.log(response);
|
||||||
|
})
|
||||||
|
.catch(function (error) {
|
||||||
|
console.log(error);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
//题库类型
|
||||||
|
getQuType(){
|
||||||
|
let dictData = {
|
||||||
|
dictType:'sys_qu_type'
|
||||||
|
}
|
||||||
|
$.ajax({
|
||||||
|
url: ctx + 'system/dict/data/dataList',
|
||||||
|
type: "POST",
|
||||||
|
data: dictData,
|
||||||
|
success: (res) => {
|
||||||
|
this.$nextTick(()=>{
|
||||||
|
this.sysQuTypeOptions = res.data
|
||||||
|
})
|
||||||
|
|
||||||
|
},
|
||||||
|
error: function() {
|
||||||
|
// 请求失败时显示错误消息
|
||||||
}
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
//难度等级
|
||||||
|
getLevelsList(){
|
||||||
|
let dictData = {
|
||||||
|
dictType:'sys_level'
|
||||||
|
}
|
||||||
|
$.ajax({
|
||||||
|
url: ctx + 'system/dict/data/dataList',
|
||||||
|
type: "POST",
|
||||||
|
data: dictData,
|
||||||
|
success: (res) => {
|
||||||
|
this.levelsList = res.data
|
||||||
|
},
|
||||||
|
error: function() {
|
||||||
|
// 请求失败时显示错误消息
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
//归属题库
|
||||||
|
getRepoIdsList(){
|
||||||
|
let dictData = {
|
||||||
|
dictType:'sys_level'
|
||||||
|
}
|
||||||
|
$.ajax({
|
||||||
|
url: ctx + 'system/dict/data/dataList',
|
||||||
|
type: "POST",
|
||||||
|
data: dictData,
|
||||||
|
success: (res) => {
|
||||||
|
this.repoIdsList = res.data
|
||||||
|
},
|
||||||
|
error: function() {
|
||||||
|
// 请求失败时显示错误消息
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
handleTypeChange(v) {
|
||||||
|
this.postForm.answerList = []
|
||||||
|
if (v === 3) {
|
||||||
|
this.postForm.answerList.push({ isRight: true, content: '正确', analysis: '' })
|
||||||
|
this.postForm.answerList.push({ isRight: false, content: '错误', analysis: '' })
|
||||||
|
}
|
||||||
|
|
||||||
|
if (v === 1 || v === 2) {
|
||||||
|
this.postForm.answerList.push({ isRight: false, content: '', analysis: '' })
|
||||||
|
this.postForm.answerList.push({ isRight: false, content: '', analysis: '' })
|
||||||
|
this.postForm.answerList.push({ isRight: false, content: '', analysis: '' })
|
||||||
|
this.postForm.answerList.push({ isRight: false, content: '', analysis: '' })
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
// 添加子项
|
||||||
|
handleAdd() {
|
||||||
|
this.postForm.answerList.push({ isRight: false, content: '', analysis: '' })
|
||||||
|
},
|
||||||
|
|
||||||
|
removeItem(index) {
|
||||||
|
this.postForm.answerList.splice(index, 1)
|
||||||
|
},
|
||||||
|
submitForm() {
|
||||||
|
let rightCount = 0
|
||||||
|
this.postForm.answerList.forEach(function(item) {
|
||||||
|
if (item.isRight) {
|
||||||
|
rightCount += 1
|
||||||
}
|
}
|
||||||
|
})
|
||||||
|
if (this.postForm.quType === 1) {
|
||||||
|
if (rightCount !== 1) {
|
||||||
|
this.$message({
|
||||||
|
message: '单选题答案只能有一个',
|
||||||
|
type: 'warning'
|
||||||
|
})
|
||||||
|
|
||||||
|
return
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (this.postForm.quType === 2) {
|
||||||
|
if (rightCount < 2) {
|
||||||
|
this.$message({
|
||||||
|
message: '多选题至少要有两个正确答案！',
|
||||||
|
type: 'warning'
|
||||||
|
})
|
||||||
|
|
||||||
|
return
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (this.postForm.quType === 3) {
|
||||||
|
if (rightCount !== 1) {
|
||||||
|
this.$message({
|
||||||
|
message: '判断题只能有一个正确项！',
|
||||||
|
type: 'warning'
|
||||||
|
})
|
||||||
|
|
||||||
|
return
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.$refs.postForm.validate((valid) => {
|
||||||
|
if (!valid) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
axios.post(ctx + 'system/qu/add', this.postForm)
|
||||||
|
.then(function (response) {
|
||||||
|
console.log(response);
|
||||||
|
})
|
||||||
|
.catch(function (error) {
|
||||||
|
console.log(error);
|
||||||
|
});
|
||||||
|
// saveData(this.postForm).then(response => {
|
||||||
|
// this.postForm = response.data
|
||||||
|
// this.$notify({
|
||||||
|
// title: '成功',
|
||||||
|
// message: '试题保存成功！',
|
||||||
|
// type: 'success',
|
||||||
|
// duration: 2000
|
||||||
|
// })
|
||||||
|
//
|
||||||
|
// this.$router.push({ name: 'ListQu' })
|
||||||
|
// })
|
||||||
|
})
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
Loading…
Reference in new issue