dshclm
9 months ago
parent
c953778be0
commit
648c6a8510
@ -1,50 +1,342 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
|
||||
<head>
|
||||
<th:block th:include="include :: header('修改题11库')" />
|
||||
<th:block th:include="include :: summernote-css" />
|
||||
<th:block th:include="include :: header('新增题库')" />
|
||||
<th:block th:include="include :: element-css" />
|
||||
<th:block th:include="include :: select2-css" />
|
||||
</head>
|
||||
<style>
|
||||
.text {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.item {
|
||||
padding: 18px 0;
|
||||
}
|
||||
|
||||
.box-card {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
<body class="white-bg">
|
||||
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
|
||||
<form class="form-horizontal m" id="form-repo-edit" th:object="${repo}">
|
||||
<input id="id" name="id" th:field="*{id}" type="hidden">
|
||||
<div class="form-group">
|
||||
<label class="col-sm-2 control-label is-required">题库标题：</label>
|
||||
<div class="col-sm-10">
|
||||
<input id="title" name="title" th:field="*{title}" class="form-control" type="text" required>
|
||||
</div>
|
||||
<div class="wrapper wrapper-content animated fadeInRight ibox-content" id="app">
|
||||
<div class="app-container">
|
||||
<el-form ref="postForm" :model="postForm" :rules="rules" label-position="left" label-width="150px">
|
||||
<el-card>
|
||||
<el-form-item label="题目类型 " prop="quType">
|
||||
<el-select v-model="postForm.quType" :disabled="quTypeDisabled" class="filter-item" @change="handleTypeChange">
|
||||
<el-option
|
||||
v-for="item in quTypes"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="难度等级 " prop="levels">
|
||||
<el-select v-model="postForm.levels" class="filter-item">
|
||||
<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 class="row">
|
||||
<div class="col-sm-12">
|
||||
<div class="form-group">
|
||||
<label class="col-xs-2 control-label">题库备注：</label>
|
||||
<div class="col-xs-10">
|
||||
<textarea name="remark" maxlength="500" class="form-control" rows="3">[[*{remark}]]</textarea>
|
||||
</div>
|
||||
</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>
|
||||
</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>
|
||||
<th:block th:include="include :: footer" />
|
||||
<th:block th:include="include :: summernote-js" />
|
||||
<script type="text/javascript">
|
||||
var prefix = ctx + "system/repo";
|
||||
$("#form-repo-edit").validate({
|
||||
focusCleanup: true
|
||||
});
|
||||
function submitHandler() {
|
||||
if ($.validate.form()) {
|
||||
$.operate.saveTab(prefix + "/edit", $('#form-repo-edit').serialize());
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</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 :: element-js" />
|
||||
<th:block th:include="include :: select2-js" />
|
||||
<script type="text/javascript">
|
||||
var prefix = ctx + "system/repo";
|
||||
$("#form-repo-add").validate({
|
||||
focusCleanup: true
|
||||
});
|
||||
function submitHandler() {
|
||||
console.log($('#form-repo-add').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>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Loading…
Reference in new issue