Commit e6054bd7 authored by 耿迪迪's avatar 耿迪迪
parents 93409e5b 8708b05c
import request from '@/utils/request'
// 查询题库题目列表
export function listSubject(query) {
return request({
url: '/system/subject/list',
method: 'get',
params: query
})
}
// 查询题库题目详细
export function getSubject(subjectId) {
return request({
url: '/system/subject/' + subjectId,
method: 'get'
})
}
// 新增题库题目
export function addSubject(data) {
return request({
url: '/system/subject',
method: 'post',
data: data
})
}
// 修改题库题目
export function updateSubject(data) {
return request({
url: '/system/subject',
method: 'put',
data: data
})
}
// 删除题库题目
export function delSubject(subjectId) {
return request({
url: '/system/subject/' + subjectId,
method: 'delete'
})
}
// 导出题库题目
export function exportSubject(query) {
return request({
url: '/system/subject/export',
method: 'get',
params: query
})
}
\ No newline at end of file
......@@ -356,3 +356,84 @@
}
}
// text-Paper lession.vue table样式
.left-middle-table {
.el-table th.el-table__cell.is-leaf,
.el-table td.el-table__cell {
border: none
}
.has-gutter .el-table th.el-table__cell.is-leaf,
.el-table td.el-table__cell {
border-bottom: 1px solid #E5E6EB;
}
.el-table th.el-table__cell.is-leaf,
.el-table td.el-table__cell {
box-sizing: border-box;
}
.el-table--medium .el-table__cell:nth-child(1) {
padding: 0;
}
.el-table .el-table__header-wrapper th,
.el-table .el-table__fixed-header-wrapper th {
background-color: #F7F7F7;
}
.el-table--fit {
// height: 100%;
}
.el-table th.el-table__cell>.cell {
padding-left: 14px;
}
.el-table::before {
height: 0px;
}
// 表头的input样式
.el-checkbox__input.is-indeterminate .el-checkbox__inner {
background-color: rgba(0, 0, 0, 0);
border-color: #C4C4C4;
}
.el-checkbox__input.is-indeterminate .el-checkbox__inner:before{
background-color:#62656C !important;
}
// 内容的
// 改变对钩颜色
.el-checkbox__inner:after {
border-color: #62656C !important;
}
.el-checkbox__inner {
border: 1px solid #C4C4C4;
}
.el-checkbox__input.is-checked .el-checkbox__inner {
background-color: rgba(0, 0, 0, 0);
border-color: #C4C4C4;
}
.el-checkbox__input.is-checked .el-checkbox__inner {
border-color: #C4C4C4;
}
.el-checkbox__input.is-focus .el-checkbox__inner {
border-color: #C4C4C4;
}
.el-checkbox__inner:hover {
border-color: #C4C4C4;
}
}
\ No newline at end of file
<!--
* @Author: 纪泽龙 jizelong@qq.com
* @Date: 2022-12-19 15:23:58
* @LastEditors: 纪泽龙 jizelong@qq.com
* @LastEditTime: 2022-12-21 16:56:26
* @FilePath: /danger-manage-web/src/views/educationPlanExam/textPaper/components/Lesson-table.vue
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
<div>
<el-table
v-loading="loading"
:data="nameList"
height="305"
@select="select"
@select-all="all"
ref="multipleTable"
>
<el-table-column type="selection"></el-table-column>
<el-table-column label="姓名" align="center" prop="staffName">
</el-table-column>
<el-table-column
label="所属部门"
align="center"
prop="deptName"
:formatter="formatter"
>
</el-table-column>
<el-table-column
label="岗位"
align="center"
prop="profession"
:formatter="formatter"
>
</el-table-column>
</el-table>
<!-- <div> -->
<el-pagination
:layout="'prev, pager, next'"
v-show="total > 0"
:total="total"
:current-page="queryParams.pageNum"
:page-sizes="[queryParams.pageSize]"
@current-change="currentChangeClick"
/>
<!-- </div> -->
</div>
</template>
<script>
import { listStaff } from "@/api/safetyManagement/staff";
export default {
name: "",
props: {
selectNameList: {
type: Array,
},
},
created() {
// this.listStaff();
},
data() {
return {
queryParams: {
pageNum: 1,
pageSize: 10,
deptId: null,
staffName: null,
},
total: 0,
nameList: [],
loading: false,
};
},
methods: {
listStaff() {
this.loading = true;
listStaff(this.queryParams).then((res) => {
this.total = res.total;
this.nameList = res.rows;
this.$nextTick((item) => {
this.selectNameList.forEach((item) => {
this.toggleSelection(item.staffId, true);
});
this.loading = false;
});
});
},
// toggleSelection(rows) {
// if (rows) {
// rows.forEach((row) => {
// this.$refs.multipleTable.toggleRowSelection(row);
// });
// } else {
// this.$refs.multipleTable.clearSelection();
// }
// },
select(all, row) {
this.$emit("selectOne", all, row);
},
all(all) {
console.log(all);
// true是全选,false是全清
let allSelect = false;
if (all.length == 0 || (all.length == 1 && [0] == undefined)) {
allSelect = false;
} else if (all.length > 1) {
allSelect = true;
}
this.$emit("selectAll", this.nameList, allSelect);
},
// 切换选项
toggleSelection(staffId, SeclctFlag = false) {
const item = this.nameList.find((item) => {
return item.staffId == staffId;
});
this.$refs.multipleTable.toggleRowSelection(item, SeclctFlag);
},
currentChangeClick(val) {
this.queryParams.pageNum = val;
this.listStaff();
},
formatter(row, column, cellValue, index) {
// console.log(row, column, cellValue, index);
if (!cellValue) return "-";
else return cellValue;
},
},
};
</script>
<style lang="scss" scoped>
</style>
<!--
* @Author: 纪泽龙 jizelong@qq.com
* @Date: 2022-12-19 17:39:55
* @LastEditors: 纪泽龙 jizelong@qq.com
* @LastEditTime: 2022-12-21 17:36:34
* @FilePath: /danger-manage-web/src/views/educationPlanExam/textPaper/components/ChangePapel.vue
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
<div class="changePeople-wrapper flex">
<div class="changePeople-left">
<div class="top-search flex">
<el-select
v-model="deptId"
filterable
placeholder="请选择"
size="mini"
style="width: 40%"
clearable
>
<el-option
v-for="item in searchList"
:key="item.deptId"
:label="item.deptName"
:value="item.deptId"
>
</el-option>
</el-select>
<el-input
v-model="staffName"
size="mini"
placeholder="请输入内容"
suffix-icon="el-icon-date"
style="width: 48%"
>
</el-input>
<div>
<el-button @click="searchTable" size="mini">搜索</el-button>
</div>
</div>
<div class="left-middle-table">
<ChangPapelTable
ref="table"
:selectNameList.sync="selectNameList"
@selectOne="selectOne"
@selectAll="selectAll"
/>
</div>
<!-- <div class="bottom-text">共有3n人</div> -->
</div>
<div class="middle flex">
<div>>>></div>
</div>
<div class="changePeople-right flex">
<div class="people-card flex zzz">
<div
class="item flex"
v-for="item in selectNameList"
:key="item.staffId"
>
<div>{{ item.staffName }}</div>
<div class="close" @click="deleteName(item.staffId)">x</div>
</div>
</div>
<div class="bottom-text">已选择n人</div>
</div>
</div>
</template>
<script>
import ChangPapelTable from "./ChangPapelTable";
import { listDept } from "@/api/system/dept";
export default {
name: "changepeopel",
components: {
ChangPapelTable,
},
props: {
// 传进组件的已经被选择的人名
jsonSelectNameList: {
type: String,
default: null,
},
},
data() {
return {
selectNameList: [],
searchList: [],
deptId: null,
staffName: null,
};
},
created() {
listDept().then((res) => {
console.log(res);
this.searchList = res.data;
});
},
mounted() {},
watch: {
selectNameList() {
let json;
if (this.selectNameList.length == 0) {
json = null;
}
if (Array.isArray(this.selectNameList)) {
json = this.selectNameList.map((item) => {
return {
staffId: item.staffId,
staffName: item.staffName,
};
});
} else {
json = this.selectNameList;
}
this.$emit("getPeopleList", JSON.stringify(json));
},
},
methods: {
changeNameList(jsonSelectNameList) {
if (jsonSelectNameList) {
this.selectNameList = JSON.parse(jsonSelectNameList);
} else {
this.selectNameList = [];
}
this.$refs.table.listStaff();
},
searchTable() {
this.$refs.table.queryParams = {
pageNum: 1,
pageSize: 10,
deptId: this.deptId,
staffName: this.staffName,
};
this.$refs.table.listStaff();
},
deleteName(staffId) {
const index = this.selectNameList.findIndex((item) => {
return item.staffId == staffId;
});
if (index >= 0) {
console.log(index);
this.selectNameList.splice(index, 1);
this.$refs.table.toggleSelection(staffId);
}
},
addName(row) {
const index = this.selectNameList.findIndex((item) => {
// console.log(item.id)
return item.staffId == row.staffId;
});
console.log(index);
if (index >= 0) {
this.selectNameList.splice(index, 1);
} else {
this.selectNameList.push(row);
}
},
selectAll(all, allSelect) {
// console.log(all);
console.log(allSelect);
if (allSelect) {
all.forEach((item) => {
const index = this.selectNameList.findIndex((iten) => {
return iten.staffId == item.staffId;
});
if (index < 0) {
this.selectNameList.push(item);
}
});
} else {
all.forEach((item) => {
this.deleteName(item.staffId);
});
}
},
selectOne(all, row) {
this.addName(row);
// console.log(all,row)
},
},
};
</script>
<style lang="scss" scoped>
.changePeople-wrapper {
width: 100%;
height: 400px;
// background-color: red;
margin-top: 10px;
justify-content: space-between;
& > div {
flex-direction: column;
}
.changePeople-left,
.changePeople-right {
width: 415px;
height: 100%;
border: 1px solid #e5e6eb;
}
.middle {
align-items: center;
justify-content: center;
div{
color:#1890FF;
font-weight: 2000;
}
}
.changePeople-left {
padding: 14px 20px 11px 16px;
flex-direction: column;
.top-search {
margin-bottom: 12px;
justify-content: space-between;
}
.left-middle-table {
flex: 1;
// background: red;
}
.bottom-text {
padding-top: 10px;
font-size: 12px;
height: 20px;
line-height: 20px;
text-align: right;
color: #1890ff;
}
}
.changePeople-right {
flex-direction: column;
padding-top: 14px;
height: 100%;
.people-card {
flex-wrap: wrap;
align-content: flex-start;
width: 100%;
flex: 1;
height: 0;
padding-left: 11px;
overflow-y: scroll;
&::-webkit-scrollbar {
display: none; /* Chrome Safari */
}
.item {
width: 70px;
height: 30px;
line-height: 30px;
padding-left: 10px;
padding-right: 5px;
margin-right: 10px;
color: #3d3d3d;
box-sizing: border-box;
margin-bottom: 10px;
box-sizing: border-box;
border: 1px solid #a3d3ff;
border-radius: 3px;
font-size: 12px;
position: relative;
justify-content: space-between;
}
.close {
cursor: pointer;
}
}
.bottom-text {
// padding-top: 10px;
padding-right: 10px;
font-size: 12px;
height: 20px;
line-height: 20px;
text-align: right;
color: #1890ff;
}
}
}
</style>
......@@ -2,7 +2,7 @@
* @Author: 纪泽龙 jizelong@qq.com
* @Date: 2022-06-16 14:52:17
* @LastEditors: 纪泽龙 jizelong@qq.com
* @LastEditTime: 2022-09-20 23:37:42
* @LastEditTime: 2022-12-15 14:39:18
* @FilePath: /danger-manage-web/src/main.js
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
......@@ -48,11 +48,14 @@ import VueVideoPlayer from 'vue-video-player'
// require videojs style
import 'video.js/dist/video-js.css'
// import 'vue-video-player/src/custom-theme.css'
Vue.use(VueVideoPlayer, /* {
options: global default options,
events: global videojs events
} */)
// require('video.js/dist/video-js.css')
// require('vue-video-player/src/custom-theme.css')
// Vue.use(VideoPlayer)
......
......@@ -175,7 +175,17 @@ export default {
methods: {
getQuestion() {
getQuestion({ courseId: this.courseId }).then((res) => {
// 如果是修改 就是原来的值,如果不是,就是总数+1
console.log(res)
if (this.topicId) {
res.rows.forEach((item, index) => {
if (item.topicId == this.topicId) {
this.questionNextNum = index+1;
}
});
} else {
this.questionNextNum = res.total + 1;
}
});
},
getLessonById(courseId) {
......@@ -249,7 +259,8 @@ export default {
this.save(3).then((res) => {
if (res) {
this.reset();
this.questionNextNum++;
// this.questionNextNum++;
this.getQuestion();
}
});
},
......
......@@ -2,7 +2,7 @@
* @Author: 纪泽龙 jizelong@qq.com
* @Date: 2022-09-22 10:38:49
* @LastEditors: 纪泽龙 jizelong@qq.com
* @LastEditTime: 2022-09-28 17:48:07
* @LastEditTime: 2022-12-17 10:24:41
* @FilePath: /danger-manage-web/src/views/lessonsProgram/components/addLesson.vue
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
......
......@@ -70,16 +70,31 @@
<el-table v-loading="loading" :data="lessonsList">
<el-table-column label="课程标题" align="center" prop="courseName" />
<el-table-column label="课程类别" align="center" prop="planName">
<!--<template v-slot="scope">-->
<!--<div>-->
<!--{{-->
<!--courseOptions.filter(-->
<!--(item) => item.planId == scope.row.courseType-->
<!--)[0].planName-->
<!--}}-->
<!--</div>-->
<!--</template>-->
<!-- <el-table-column label="课程类别" align="center" prop="planName">
<template v-slot="scope">
<div>
{{
courseOptions.filter(
(item) => item.planId == scope.row.courseType
)[0].planName
}}
</div>
</template>
</el-table-column> -->
<el-table-column label="课程类别" align="center" prop="courseType">
<template v-slot="scope">
<div>
{{
scope.row.courseType &&
courseOptions.filter(
(item) => item.planId == scope.row.courseType
)[0] &&
courseOptions.filter(
(item) => item.planId == scope.row.courseType
)[0].planName
}}
</div>
</template>
</el-table-column>
<el-table-column label="课程状态" align="center" prop="status">
<template v-slot="scope">
......@@ -88,7 +103,12 @@
</el-table-column>
<el-table-column label="附件" align="center" prop="enclosure">
<template v-slot="{ row: { enclosure } }">
<a v-if="enclosure.indexOf('.txt')>=0" @click="downloadText(enclosure)" class="down-load">下载附件</a>
<a
v-if="enclosure && enclosure.indexOf('.txt') >= 0"
@click="downloadText(enclosure)"
class="down-load"
>下载附件</a
>
<a v-else :href="enclosure" class="down-load">下载附件</a>
</template>
</el-table-column>
......
<template>
<div ref="myBody" class="add-question flex">
<div class="text flex">
<div class="left">
目前录入题目是第<span>{{ questionNextNum }}</span
>道题
</div>
<div class="right">{{ courseName }}</div>
</div>
<el-form class="form flex" ref="form" :model="form" label-width="auto">
<!-- <div class="top flex"> -->
<div>
<el-form-item
label="题目内容"
prop="topicTitle"
:rules="{
required: true,
message: '必须输入题目内容',
trigger: 'blur',
}"
>
<el-input
type="textarea"
placeholder="多行输入"
resize="none"
rows="4"
v-model="form.topicTitle"
>
</el-input>
</el-form-item>
</div>
<div class="bottom">
<!-- <el-form-item label="选项1" prop="title">
<el-input v-model="form.title" placeholder="请输入"></el-input>
</el-form-item> -->
<el-form-item
v-for="(question, index) in form.questions"
:label="'选项' + (index + 1)"
:key="question.key"
:prop="'questions.' + index + '.value'"
:rules="
index === 0
? {
required: true,
message: '第一项不能为空不能为空',
trigger: 'blur',
}
: {}
"
>
<div class="add-select flex">
<el-input
type="textarea"
placeholder="多行输入"
style="flex: 1; margin-right: 10px"
rows="2"
v-model="question.value"
></el-input>
<div class="flex algin-items">
<div
@click="rightAnswerClick(index)"
class="right"
:class="{ active: answerNum === index }"
>
设为正确答案
</div>
<el-button
size="mini"
type="danger"
v-if="index > 0"
@click.prevent="removeDomain(question)"
>删除</el-button
>
</div>
</div>
</el-form-item>
<el-form-item
class="noAttr"
:label="`选项${form.questions.length + 1}`"
prop=""
>
<div class="add-select flex">
<el-input
type="textarea"
placeholder="多行输入"
resize="none"
rows="2"
v-model="addValue"
style="flex: 1; margin-right: 10px"
>
</el-input>
<div class="flex algin-items">
<div
@click="rightAnswerClick(form.questions.length)"
class="right"
:class="{ active: answerNum === form.questions.length }"
>
设为正确答案
</div>
<el-button
size="mini"
type="primary"
@click.prevent="add(addValue)"
>新增</el-button
>
</div>
</div>
</el-form-item>
</div>
</el-form>
</div>
</template>
<script>
// import {
// addQuestion,
// checkQuestion,
// changeQuestion,
// getQuestion,
// getLessonById,
// } from "@/api/educationPlanExam/lessonsProgram.js";
import { addSubject ,getSubject,listSubject,updateSubject} from "@/api/educationPlanExam/subject";
export default {
name: "AnswerLesson",
props: {
// visible: {
// type: Boolean,
// default: false,
// },
bankId: {
type: Number,
},
subjectId: {
type: Number,
},
},
components: {},
data() {
return {
form: {
topicTitle: "",
questions: [{ value: "" }, { value: "" }, { value: "" }],
},
answerNum: null,
addValue: "",
// 录入的是第几道题
questionNextNum: 1,
courseName: "",
};
},
created() {
// 如果存在就是修改
if (this.subjectId) {
getSubject(this.subjectId).then((res) => {
console.log('?',res.data);
const data = res.data;
this.form = {
topicTitle: data.topicTitle,
questions: JSON.parse(data.topicOption),
};
this.answerNum = data.answer;
});
}
// 查询是第几道题
this.getQuestion();
// 获取课程标题
// this.getLessonById(this.bankId);
},
methods: {
getQuestion() {
listSubject({ bankId: this.bankId }).then((res) => {
console.log(res)
// 如果是修改 就是原来的值,如果不是,就是总数+1
if (this.subjectId) {
res.rows.forEach((item, index) => {
if (item.subjectId == this.subjectId) {
this.questionNextNum = index+1;
}
});
} else {
this.questionNextNum = res.total + 1;
}
});
},
// getLessonById(bankId) {
// getLessonById(bankId).then((res) => {
// console.log(res);
// this.courseName = res.data.courseName;
// });
// },
addQuestion(data) {
// 如果是修改,就用修改的方法,如果是新增,就用新增的方法
if (this.subjectId) {
return updateSubject({ subjectId: this.subjectId, ...data });
} else {
return addSubject({ bankId: this.bankId, ...data });
}
},
rightAnswerClick(index) {
this.answerNum = index;
console.log(index);
},
// 删除选项
removeDomain(question) {
const index = this.form.questions.indexOf(question);
// 如果是正确答案,就让正确答案清空
if (this.answerNum === index) {
this.answerNum = null;
}
if (index >= 0) {
this.form.questions.splice(index, 1);
}
},
// 新增选项
add(addValue) {
this.form.questions.push({ value: addValue });
console.log();
},
save(num = 2) {
return new Promise((resove) => {
if (!this.answerNum && this.answerNum !== 0) {
this.$message({
message: "警告,请设置一个正确答案",
type: "warning",
});
return resove(false);
}
this.$refs.form.validate((valid) => {
if (valid) {
const data = {};
data.topicTitle = this.form.topicTitle;
data.topicOption = JSON.stringify(this.form.questions);
data.answer = this.answerNum;
this.addQuestion(data).then((res) => {
if (res.code == 200) {
// 把修改的这个归位,变成正常添加
this.$emit("update:subjectId", null);
this.$message({
message: "添加题目成功",
type: "success",
});
this.$parent.$parent.componentsNumChange(num);
this.$parent.$parent.$parent.getList();
resove(true);
}
});
}
});
});
},
saveAndNext() {
this.save(3).then((res) => {
if (res) {
this.reset();
// this.questionNextNum++;
this.getQuestion();
}
});
},
reset() {
this.form = {
topicTitle: "",
questions: [{ value: "" }, { value: "" }, { value: "" }],
};
this.answerNum = null;
this.addValue = "";
},
},
};
</script>
<style lang="scss" scoped>
.add-question {
width: 100%;
height: 550px;
// overflow: hidden;
flex-direction: column;
padding-bottom: 7px;
margin-bottom: 20px;
border-bottom: 1px solid #bbbbbb;
.form {
flex: 1;
flex-direction: column;
height: 100%;
.bottom {
overflow-y: auto;
height: 330px;
box-sizing: border-box;
.algin-items {
align-items: center;
width: 200px;
}
.right {
display: inline-block;
width: 133px;
margin-right: 10px;
line-height: initial;
padding: 4px 0;
border: 1px solid #bbbbbb;
color: #101010;
font-size: 12px;
text-align: center;
border-radius: 4px;
box-sizing: border-box;
cursor: pointer;
&.active {
background-color: #0bab0c;
color: #ffffff;
}
&:hover {
background-color: rgba(11, 171, 12, 0.5);
color: #ffffff;
}
}
}
}
.text {
margin-top: 13px;
margin-bottom: 34px;
justify-content: space-between;
height: 28px;
.left {
line-height: 28px;
color: #101010;
font-size: 14px;
}
.right {
width: 411px;
line-height: 28px;
background: #1d84ff;
padding-right: 5px;
color: #fff;
text-align: right;
}
}
}
</style>
<!--
* @Author: 纪泽龙 jizelong@qq.com
* @Date: 2022-09-22 10:38:49
* @LastEditors: 纪泽龙 jizelong@qq.com
* @LastEditTime: 2022-12-17 14:28:56
* @FilePath: /danger-manage-web/src/views/lessonsProgram/components/addLesson.vue
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
<el-dialog
class="add-lession"
:title="title"
:visible.sync="visible"
width="1000px"
:close-on-click-modal="false"
:close-on-press-escape="false"
:before-close="dialogCancel"
@closed="closeFinished"
destroy-on-close
>
<div v-if="visible" ref="myBody" class="body">
<transition name="fade" mode="out-in">
<component
:is="currentComponent"
:bankId.sync="bankId"
:subjectId.sync="subjectId"
ref="current"
></component>
</transition>
<!-- <Lesson ref='lesson'/> -->
<!-- <AddQuestion />
<QuestionList/> -->
</div>
<div slot="footer" class="dialog-footer">
<el-button
type="primary"
v-if="this.componentsNum == 1 || this.componentsNum == 3"
@click="save"
>保存</el-button
>
<el-button type="primary" @click="saveAndNext">{{
saveNextText
}}</el-button>
<el-button
v-if="this.componentsNum == 2"
type="primary"
@click="dialogCancel"
>{{ "确认" }}</el-button
>
<el-button @click="dialogCancel">取消</el-button>
</div>
</el-dialog>
</template>
<script>
import Lesson from "./Lesson";
import AddQuestion from "./AddQuestion";
import QuestionList from "./QuestionList";
export default {
name: "AnswerLesson",
props: {
visible: {
type: Boolean,
default: false,
},
componentsNum: {
type: Number,
default: 1,
},
bankId: {
type: Number,
},
},
// components: {
// Lesson,
// AddQuestion,
// QuestionList,
// },
data() {
return {
title: "录入课程",
currentComponent: Lesson,
// 当前题目查看
subjectId: null,
};
},
watch: {
componentsNum: {
handler(num) {
if (num === 1) {
this.currentComponent = Lesson;
if (this.bankId) {
this.title = "修改课程";
} else {
this.title = "新增课程";
}
} else if (num === 2) {
this.currentComponent = QuestionList;
this.title = "题目列表";
} else {
this.currentComponent = AddQuestion;
if (this.subjectId) {
this.title = "修改题目";
} else {
this.title = "新增题目";
}
}
},
deep: true,
},
},
computed: {
saveNextText() {
let text;
if (this.componentsNum == 1) {
text = "保存并录入题目";
} else if (this.componentsNum == 2) {
text = "录入考题";
} else {
text = "保存并录入下一题";
}
return text;
},
},
methods: {
saveBody() {
this.startHeight = this.$refs.myBody.offsetHeight - 55 + "px";
},
closeFinished() {},
// 关闭之后
// 只保存
save() {
// this.answerClear();
this.$refs.current.save();
},
// 保存并录入
saveAndNext() {
this.$refs.current.saveAndNext();
},
// 隐藏与显示dialog
dialogCancel() {
this.$emit("update:visible", false);
},
// 把ID改变了
changeCourseId(bankId) {
this.$emit("update:bankId", bankId);
},
// 改变当前组件
componentsNumChange(num) {
this.$emit("update:componentsNum", num);
},
answerClear() {
this.answerArr = [];
this.changeCourseId(null);
},
},
};
</script>
<style lang="scss" scoped>
.body {
width: 100%;
height: 100%;
padding-right: 40px;
padding-left: 36px;
}
</style>
<template>
<div>
<el-upload
:action="uploadUrl"
:on-success="handleUploadSuccess"
:on-error="handleUploadError"
name="file"
:show-file-list="false"
:headers="headers"
style="display: none"
ref="upload"
v-if="this.uploadUrl"
>
</el-upload>
<div class="editor" ref="editor" :style="styles"></div>
</div>
</template>
<script>
import Quill from "quill";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
import { getToken } from "@/utils/auth";
export default {
name: "Editor",
props: {
/* 编辑器的内容 */
value: {
type: String,
default: "",
},
/* 高度 */
height: {
type: Number,
default: null,
},
/* 最小高度 */
minHeight: {
type: Number,
default: null,
},
/* 只读 */
readOnly: {
type: Boolean,
default: false,
},
/* 上传地址 */
uploadUrl: {
type: String,
default: "",
}
},
data() {
return {
headers: {
Authorization: "Bearer " + getToken()
},
Quill: null,
currentValue: "",
options: {
theme: "snow",
bounds: document.body,
debug: "warn",
modules: {
// 工具栏配置
toolbar: [
["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线
["blockquote", "code-block"], // 引用 代码块
[{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表
[{ indent: "-1" }, { indent: "+1" }], // 缩进
[{ size: ["small", false, "large", "huge"] }], // 字体大小
[{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
[{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
[{ align: [] }], // 对齐方式
["clean"], // 清除文本格式
["link", "image"] // 链接、图片、视频"video"
],
},
placeholder: "请输入内容",
readOnly: this.readOnly,
},
};
},
computed: {
styles() {
let style = {};
if (this.minHeight) {
style.minHeight = `${this.minHeight}px`;
}
if (this.height) {
style.height = `${this.height}px`;
}
return style;
},
},
watch: {
value: {
handler(val) {
if (val !== this.currentValue) {
this.currentValue = val === null ? "" : val;
if (this.Quill) {
this.Quill.pasteHTML(this.currentValue);
}
}
},
immediate: true,
},
},
mounted() {
this.init();
},
beforeDestroy() {
this.Quill = null;
},
methods: {
init() {
const editor = this.$refs.editor;
this.Quill = new Quill(editor, this.options);
// 如果设置了上传地址则自定义图片上传事件
if (this.uploadUrl) {
let toolbar = this.Quill.getModule("toolbar");
toolbar.addHandler("image", (value) => {
this.uploadType = "image";
if (value) {
this.$refs.upload.$children[0].$refs.input.click();
} else {
this.quill.format("image", false);
}
});
toolbar.addHandler("video", (value) => {
this.uploadType = "video";
if (value) {
this.$refs.upload.$children[0].$refs.input.click();
} else {
this.quill.format("video", false);
}
});
}
this.Quill.pasteHTML(this.currentValue);
this.Quill.on("text-change", (delta, oldDelta, source) => {
const html = this.$refs.editor.children[0].innerHTML;
const text = this.Quill.getText();
const quill = this.Quill;
this.currentValue = html;
this.$emit("input", html);
this.$emit("on-change", { html, text, quill });
});
this.Quill.on("text-change", (delta, oldDelta, source) => {
this.$emit("on-text-change", delta, oldDelta, source);
});
this.Quill.on("selection-change", (range, oldRange, source) => {
this.$emit("on-selection-change", range, oldRange, source);
});
this.Quill.on("editor-change", (eventName, ...args) => {
this.$emit("on-editor-change", eventName, ...args);
});
},
handleUploadSuccess(res, file) {
// 获取富文本组件实例
let quill = this.Quill;
// 如果上传成功
if (res.code == 200) {
// 获取光标所在位置
let length = quill.getSelection().index;
// 插入图片 res.url为服务器返回的图片地址
quill.insertEmbed(length, "image", res.url);
// 调整光标到最后
quill.setSelection(length + 1);
} else {
this.$message.error("图片插入失败");
}
},
handleUploadError() {
this.$message.error("图片插入失败");
},
},
};
</script>
<style>
.editor, .ql-toolbar {
white-space: pre-wrap !important;
line-height: normal !important;
}
.quill-img {
display: none;
}
.ql-snow .ql-tooltip[data-mode="link"]::before {
content: "请输入链接地址:";
}
.ql-snow .ql-tooltip.ql-editing a.ql-action::after {
border-right: 0px;
content: "保存";
padding-right: 0px;
}
.ql-snow .ql-tooltip[data-mode="video"]::before {
content: "请输入视频地址:";
}
.ql-snow .ql-picker.ql-size .ql-picker-label::before,
.ql-snow .ql-picker.ql-size .ql-picker-item::before {
content: "14px";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="small"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="small"]::before {
content: "10px";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="large"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="large"]::before {
content: "18px";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="huge"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="huge"]::before {
content: "32px";
}
.ql-snow .ql-picker.ql-header .ql-picker-label::before,
.ql-snow .ql-picker.ql-header .ql-picker-item::before {
content: "文本";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
content: "标题1";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
content: "标题2";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
content: "标题3";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
content: "标题4";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
content: "标题5";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
content: "标题6";
}
.ql-snow .ql-picker.ql-font .ql-picker-label::before,
.ql-snow .ql-picker.ql-font .ql-picker-item::before {
content: "标准字体";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="serif"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="serif"]::before {
content: "衬线字体";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="monospace"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="monospace"]::before {
content: "等宽字体";
}
</style>
<!--
* @Author: 纪泽龙 jizelong@qq.com
* @Date: 2022-09-22 10:59:44
* @LastEditors: 纪泽龙 jizelong@qq.com
* @LastEditTime: 2022-12-17 14:36:14
* @FilePath: /danger-manage-web/src/views/lessonsProgram/components/Lession.vue
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
<div class="form-wrapper">
<el-form
class="form"
ref="form"
:model="form"
label-width="auto"
:rules="rules"
>
<div class="top flex">
<el-form-item label="题库名称" prop="bankName">
<el-input style="width: 300px" v-model="form.bankName"></el-input>
</el-form-item>
<el-form-item
label="归属部门"
prop="deptId"
label-width="140px"
ref="treeItem"
>
<Treeselect
class="tree"
v-model="form.deptId"
:options="deptOptions"
:show-count="true"
placeholder="请选择归属部门"
@open="treeOpen"
@close="treeClose"
@select="select"
/>
</el-form-item>
</div>
<!-- </div> -->
<!-- <el-form-item label="课程内容" prop="courseConent">
<Editor v-model="form.courseConent" :min-height="192" />
<el-input
v-show="false"
disabled
v-model="form.courseConent"
></el-input>
</el-form-item> -->
<!-- <div class="flex">
<el-form-item label="视频上传" v-if="!readOnly" prop="video">
<FileUpload
listType="picture"
@resFun="getFileInfoVideo"
@remove="listRemoveVideo"
:fileArr="fileListVideo"
:fileSize="500"
:fileType="['mp4']"
/>
<el-input v-show="false" disabled v-model="form.video"></el-input>
</el-form-item>
<el-form-item label="附件上传" v-if="!readOnly" prop="enclosure">
<FileUpload
listType="picture"
@resFun="getFileInfoFile"
@remove="listRemoveFile"
:fileArr="fileListFile"
/>
<el-input v-show="false" disabled v-model="form.enclosure"></el-input>
</el-form-item>
</div> -->
</el-form>
</div>
</template>
<script>
import Editor from "./Editor";
import FileUpload from "@/components/FileUpload";
import uploadfile from "@/assets/uploadfile.png";
// import { mapGetters } from "vuex";
// import {
// addLessons,
// getLessonById,
// changeLesson,
// } from "@/api/educationPlanExam/lessonsProgram";
import {
listBank,
addBank,
updateBank,
getBank,
} from "@/api/educationPlanExam/questionBank";
// 所有部门
import { treeselect } from "@/api/system/dept";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default {
name: "",
props: {
bankId: {
type: Number,
},
},
components: {
Editor,
FileUpload,
Treeselect,
},
data() {
return {
form: {
bankName: "",
// courseType: "",
// courseConent: "",
// video: "",
// enclosure: "",
deptId: null,
},
// 归属部门列表
deptOptions: [],
fileListVideo: [],
fileListFile: [],
readOnly: false,
rules: {
bankName: [
{ required: true, trigger: "blur", message: "课程名称不能为空" },
],
deptId: [
{ required: true, trigger: "blur", message: "请选择所属部门" },
],
// courseType: [
// { required: true, trigger: "change", message: "课程类型不能为空" },
// ],
// courseConent: [
// { required: true, trigger: "blur", message: "课程内容不能为空" },
// ],
// video: [{ required: true, trigger: "blue", message: "视频不能为空" }],
// enclosure: [
// { required: true, trigger: "blur", message: "附件不能为空" },
// ],
},
};
},
computed: {
// 获取课程类型
// ...mapGetters(["courseOptions"]),
},
created() {
if (this.bankId) {
this.getLessonById();
}
// 归属部门列表
this.getTreeselect();
},
mounted() {},
methods: {
// 添加课程
addLessons(data) {
if (!this.bankId) {
console.log("添加");
return addBank(data);
} else {
console.log("修改");
return updateBank({ bankId: this.bankId, ...data });
}
},
/** 查询部门下拉树结构 */
getTreeselect() {
treeselect().then((response) => {
this.deptOptions = response.data;
console.log(this.deptOptions);
});
},
// 当树形组件打开
treeOpen() {
document.querySelector(".vue-treeselect__control").style.borderColor = "";
},
// 当属性组件关闭
treeClose(a, b) {
if (!a) {
// 手动添加报红功能,没值的时候报红
document.querySelector(".vue-treeselect__control").style.borderColor =
"red";
this.save();
} else {
document.querySelector(".vue-treeselect__control").style.borderColor =
"";
this.$refs.treeItem.clearValidate();
}
},
select() {},
// 复现
getLessonById() {
getBank(this.bankId).then((res) => {
console.log("res", res);
if (res.code == 200) {
this.form = {
bankName: res.data.bankName,
deptId: res.data.deptId,
};
// const data = res.data;
// const { bankName, courseType, courseConent, video, enclosure } =
// data;
// this.form = {
// bankName,
// courseType,
// courseConent,
// video,
// enclosure,
// };
// this.fileListVideo = [
// {
// name: bankName + "视频",
// url: uploadfile,
// },
// ];
// this.fileListFile = [
// {
// name: bankName + "附件",
// url: uploadfile,
// },
// ];
}
});
},
getFileInfoVideo(res) {
this.form.video = res.url;
// this.form.videoName = res.fileName;
this.fileListVideo = [
{
name: res.fileName,
url: uploadfile,
},
];
},
listRemoveVideo(e) {
this.fileListVideo = [];
this.form.video = "";
// this.form.videoName = null;
},
getFileInfoFile(res) {
this.form.enclosure = res.url;
// this.form.enclosureName = res.fileName;
this.fileListFile = [
{
name: res.fileName,
url: uploadfile,
},
];
},
listRemoveFile(e) {
this.fileListFild = [];
this.form.enclosure = "";
// this.form.fileName = null;
},
save(num = 2) {
// 因为富文本编辑器会残留<p><br></p>,所以要清
// if (this.form.courseConent === "<p><br></p>") {
// this.form.courseConent = "";
// }
this.$refs.form.validate((valid) => {
if (valid) {
this.addLessons({ ...this.form }).then((res) => {
// 如果添加会传回来,就用传回来的,如果是修改本身就有,就用本身的
// console.log('res',res)
const bankId = this.bankId || res;
// if (res.code == 200) {
// 这样调比较纯函数一点
if (num == 2) {
this.$message({
message: "保存题库成功",
type: "success",
});
} else if (num == 3) {
this.$message({
message: "保存题库成功,请开始录入题目",
type: "success",
});
}
this.$parent.$parent.componentsNumChange(num);
this.$parent.$parent.changeCourseId(bankId);
this.$parent.$parent.$parent.getList();
return true;
// }
});
} else {
if (!this.form.deptId) {
document.querySelector(
".vue-treeselect__control"
).style.borderColor = "red";
} else {
document.querySelector(
".vue-treeselect__control"
).style.borderColor = "";
this.$refs.treeItem.clearValidate();
}
}
});
},
// 保存并进入题目
saveAndNext() {
this.save(3);
},
},
};
</script>
<style lang="scss" scoped>
.form-wrapper {
padding-top: 22px;
width: 100%;
height: 100px;
// overflow: hidden;
// padding-bottom: 10px;
margin-bottom: 20px;
border-bottom: 1px solid #bbbbbb;
.top {
width: 100%;
justify-content: space-between;
}
}
</style>
<!--
* @Author: 纪泽龙 jizelong@qq.com
* @Date: 2022-09-22 17:56:05
* @LastEditors: 纪泽龙 jizelong@qq.com
* @LastEditTime: 2022-12-17 14:28:57
* @FilePath: /danger-manage-web/src/views/lessonsProgram/components/QuestionList.vue
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
<div ref="myBody" class="add-question flex">
<div class="text flex">
<div class="left">
目前有<span>{{ questionNum || 0 }}</span
>道题
<!-- <span class="warn">温馨提示:发布课程前需要进行考试设置</span> -->
</div>
<div class="right">{{ courseName }}</div>
</div>
<div class="table flex" v-loading="loading">
<div class="th flex">
<div class="left">序号</div>
<div class="middle">题目名称</div>
<div class="right">操作</div>
</div>
<div class="td-wrapper">
<div
v-for="(item, index) in questionList"
:key="item.subjectId"
class="td flex"
>
<div class="left">{{ index + 1 }}</div>
<div class="middle zzz">
{{ item.topicTitle }}
</div>
<div class="right">
<div>
<el-button
@click="edit(item.subjectId)"
icon="el-icon-edit"
type="text"
>修改</el-button
>
<el-button
@click="deleteLesson(item.subjectId)"
icon="el-icon-delete"
type="text"
>删除</el-button
>
</div>
</div>
</div>
</div>
</div>
<!-- <div class="rightNum flex">
<div class="left">录入考题</div>
<div class="middle flex">
<div class="left-text">答对题目大于</div>
<div>
<el-input
v-model="rightNum"
style="width: 60px"
size="mini"
></el-input>
</div>
<div>为合格</div>
</div>
<div class="right">
<el-button
@click="saveRightNum"
icon="el-icon-check"
size="mini"
type="success"
>保存</el-button
>
</div>
</div> -->
</div>
</template>
<script>
import {
getQuestion,
deleteQuestion,
changeLesson,
getLessonById,
} from "@/api/educationPlanExam/lessonsProgram";
import { listSubject, delSubject } from "@/api/educationPlanExam/subject";
import { getBank } from "@/api/educationPlanExam/questionBank";
export default {
name: "AnswerLesson",
props: {
bankId: {
type: Number,
},
},
components: {},
data() {
return {
// 当前课程的第几题,调一遍接口
questionNum: null,
// 答对几道题
rightNum: 0,
questionList: [],
loading: false,
courseName: "",
};
},
// watch: {
// visible(newValue) {
// if (newValue) {
// this.$nextTick(() => {
// this.saveBody();
// });
// }
// },
// },
created() {
console.log("this.bankId", this.bankId);
if (this.bankId) {
this.getQuestion({ bankId: this.bankId });
// 获取只题目正确几题算过关
this.getLessonById(this.bankId);
}
},
methods: {
save() {
console.log("QuestionList");
},
saveAndNext() {
this.$parent.$parent.componentsNumChange(3);
},
getQuestion(bankId) {
console.log(bankId);
return listSubject(bankId).then((res) => {
console.log("题库res", res);
this.questionList = res.rows.map((item) => {
return {
subjectId: item.subjectId,
topicTitle: item.topicTitle,
};
});
this.questionNum = res.total;
return true;
});
},
getLessonById(bankId) {
getBank(bankId).then((res) => {
// console.log(res);
// this.rightNum = res.data.qualifiedNum;
this.courseName = res.data.bankName;
});
},
edit(subjectId) {
this.$emit("update:subjectId", subjectId);
this.$parent.$parent.componentsNumChange(3);
},
deleteLesson(subjectId) {
this.$confirm("请确定删除该题", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(() => {
this.loading = true;
return delSubject(subjectId);
})
.then((res) => {
if (res.code == 200) {
this.$message({
message: "删除成功",
type: "success",
});
}
return this.getQuestion({ bankId: this.bankId });
})
.finally(() => {
this.loading = false;
// 课程列表重置一下
this.$parent.$parent.$parent.getList();
});
},
saveRightNum() {
if (this.rightNum > this.questionList.length) {
this.$message({
message: "答对题目数应小于等于考试题目总数",
type: "warning",
});
return;
}
changeLesson({
bankId: this.bankId,
qualifiedNum: this.rightNum,
}).then((res) => {
if (res.code == 200) {
this.$message({
message: "答题合格数修改成功",
type: "success",
});
}
});
},
},
};
</script>
<style lang="scss" scoped>
.add-question {
width: 100%;
height: 550px;
// overflow: hidden;
flex-direction: column;
padding-bottom: 7px;
margin-bottom: 20px;
border-bottom: 1px solid #bbbbbb00;
.text {
margin-top: 13px;
margin-bottom: 32px;
justify-content: space-between;
height: 28px;
.left {
line-height: 28px;
color: #101010;
font-size: 14px;
.warn {
display: inline-flex;
font-size: 12px;
color: red;
margin-left: 10px;
}
}
.right {
width: 411px;
line-height: 28px;
background: #1d84ff;
padding-right: 5px;
color: #fff;
text-align: right;
}
}
.table {
flex: 1;
height: 0;
flex-direction: column;
.th {
width: 100%;
height: 70px;
line-height: 70px;
background: #f5f5f5;
color: #606266;
> div {
height: 100%;
}
.left {
width: 15%;
text-align: center;
}
.middle {
width: 60%;
padding-left: 100px;
}
.right {
width: 25%;
text-align: center;
}
}
.td-wrapper {
flex: 1;
overflow-y: auto;
// 这样子元素才能有滚动条
.td {
height: 68px;
line-height: 68px;
box-sizing: border-box;
border-bottom: 1px solid #bbbbbb;
&:last-child {
border-bottom: none;
}
> div {
height: 100%;
}
.left {
width: 15%;
text-align: center;
}
.middle {
width: 60%;
padding-left: 10px;
}
.right {
width: 25%;
text-align: center;
}
}
}
}
.rightNum {
margin-top: 5px;
height: 55px;
box-sizing: border-box;
border: 1px solid #bbbbbb;
line-height: 55px;
> .left {
width: 140px;
background: #0bab0c;
font-size: 14px;
color: #fff;
text-align: center;
}
> .middle {
> div {
margin-right: 5px;
}
.left-text {
margin-left: 10px;
}
.middle {
margin-right: 20px;
}
}
.right {
margin-left: 20px;
}
// background: black;
}
}
</style>
<template>
<div ref="myBody" class="add-question flex">
<div class="text flex">
<div class="left">
目前录入题目是第<span>{{ questionNextNum }}</span
>道题
</div>
<div class="right">{{ courseName }}</div>
</div>
<el-form class="form flex" ref="form" :model="form" label-width="auto">
<!-- <div class="top flex"> -->
<div>
<el-form-item
label="题目内容"
prop="topicTitle"
:rules="{
required: true,
message: '必须输入题目内容',
trigger: 'blur',
}"
>
<el-input
type="textarea"
placeholder="多行输入"
resize="none"
rows="4"
v-model="form.topicTitle"
>
</el-input>
</el-form-item>
</div>
<div class="bottom">
<!-- <el-form-item label="选项1" prop="title">
<el-input v-model="form.title" placeholder="请输入"></el-input>
</el-form-item> -->
<el-form-item
v-for="(question, index) in form.questions"
:label="'选项' + (index + 1)"
:key="question.key"
:prop="'questions.' + index + '.value'"
:rules="
index === 0
? {
required: true,
message: '第一项不能为空不能为空',
trigger: 'blur',
}
: {}
"
>
<div class="add-select flex">
<el-input
type="textarea"
placeholder="多行输入"
style="flex: 1; margin-right: 10px"
rows="2"
v-model="question.value"
></el-input>
<div class="flex algin-items">
<div
@click="rightAnswerClick(index)"
class="right"
:class="{ active: answerNum === index }"
>
设为正确答案
</div>
<el-button
size="mini"
type="danger"
v-if="index > 0"
@click.prevent="removeDomain(question)"
>删除</el-button
>
</div>
</div>
</el-form-item>
<el-form-item
class="noAttr"
:label="`选项${form.questions.length + 1}`"
prop=""
>
<div class="add-select flex">
<el-input
type="textarea"
placeholder="多行输入"
resize="none"
rows="2"
v-model="addValue"
style="flex: 1; margin-right: 10px"
>
</el-input>
<div class="flex algin-items">
<div
@click="rightAnswerClick(form.questions.length)"
class="right"
:class="{ active: answerNum === form.questions.length }"
>
设为正确答案
</div>
<el-button
size="mini"
type="primary"
@click.prevent="add(addValue)"
>新增</el-button
>
</div>
</div>
</el-form-item>
</div>
</el-form>
</div>
</template>
<script>
// import {
// addQuestion,
// checkQuestion,
// changeQuestion,
// getQuestion,
// getLessonById,
// } from "@/api/educationPlanExam/lessonsProgram.js";
import { addSubject ,getSubject,listSubject,updateSubject} from "@/api/educationPlanExam/subject";
export default {
name: "AnswerLesson",
props: {
// visible: {
// type: Boolean,
// default: false,
// },
bankId: {
type: Number,
},
subjectId: {
type: Number,
},
},
components: {},
data() {
return {
form: {
topicTitle: "",
questions: [{ value: "" }, { value: "" }, { value: "" }],
},
answerNum: null,
addValue: "",
// 录入的是第几道题
questionNextNum: 1,
courseName: "",
};
},
created() {
// 如果存在就是修改
if (this.subjectId) {
getSubject(this.subjectId).then((res) => {
console.log('?',res.data);
const data = res.data;
this.form = {
topicTitle: data.topicTitle,
questions: JSON.parse(data.topicOption),
};
this.answerNum = data.answer;
});
}
// 查询是第几道题
this.getQuestion();
// 获取课程标题
// this.getLessonById(this.bankId);
},
methods: {
getQuestion() {
listSubject({ bankId: this.bankId }).then((res) => {
console.log(res)
// 如果是修改 就是原来的值,如果不是,就是总数+1
if (this.subjectId) {
res.rows.forEach((item, index) => {
if (item.subjectId == this.subjectId) {
this.questionNextNum = index+1;
}
});
} else {
this.questionNextNum = res.total + 1;
}
});
},
// getLessonById(bankId) {
// getLessonById(bankId).then((res) => {
// console.log(res);
// this.courseName = res.data.courseName;
// });
// },
addQuestion(data) {
// 如果是修改,就用修改的方法,如果是新增,就用新增的方法
if (this.subjectId) {
return updateSubject({ subjectId: this.subjectId, ...data });
} else {
return addSubject({ bankId: this.bankId, ...data });
}
},
rightAnswerClick(index) {
this.answerNum = index;
console.log(index);
},
// 删除选项
removeDomain(question) {
const index = this.form.questions.indexOf(question);
// 如果是正确答案,就让正确答案清空
if (this.answerNum === index) {
this.answerNum = null;
}
if (index >= 0) {
this.form.questions.splice(index, 1);
}
},
// 新增选项
add(addValue) {
this.form.questions.push({ value: addValue });
console.log();
},
save(num = 2) {
return new Promise((resove) => {
if (!this.answerNum && this.answerNum !== 0) {
this.$message({
message: "警告,请设置一个正确答案",
type: "warning",
});
return resove(false);
}
this.$refs.form.validate((valid) => {
if (valid) {
const data = {};
data.topicTitle = this.form.topicTitle;
data.topicOption = JSON.stringify(this.form.questions);
data.answer = this.answerNum;
this.addQuestion(data).then((res) => {
if (res.code == 200) {
// 把修改的这个归位,变成正常添加
this.$emit("update:subjectId", null);
this.$message({
message: "添加题目成功",
type: "success",
});
this.$parent.$parent.componentsNumChange(num);
this.$parent.$parent.$parent.getList();
resove(true);
}
});
}
});
});
},
saveAndNext() {
this.save(3).then((res) => {
if (res) {
this.reset();
// this.questionNextNum++;
this.getQuestion();
}
});
},
reset() {
this.form = {
topicTitle: "",
questions: [{ value: "" }, { value: "" }, { value: "" }],
};
this.answerNum = null;
this.addValue = "";
},
},
};
</script>
<style lang="scss" scoped>
.add-question {
width: 100%;
height: 550px;
// overflow: hidden;
flex-direction: column;
padding-bottom: 7px;
margin-bottom: 20px;
border-bottom: 1px solid #bbbbbb;
.form {
flex: 1;
flex-direction: column;
height: 100%;
.bottom {
overflow-y: auto;
height: 330px;
box-sizing: border-box;
.algin-items {
align-items: center;
width: 200px;
}
.right {
display: inline-block;
width: 133px;
margin-right: 10px;
line-height: initial;
padding: 4px 0;
border: 1px solid #bbbbbb;
color: #101010;
font-size: 12px;
text-align: center;
border-radius: 4px;
box-sizing: border-box;
cursor: pointer;
&.active {
background-color: #0bab0c;
color: #ffffff;
}
&:hover {
background-color: rgba(11, 171, 12, 0.5);
color: #ffffff;
}
}
}
}
.text {
margin-top: 13px;
margin-bottom: 34px;
justify-content: space-between;
height: 28px;
.left {
line-height: 28px;
color: #101010;
font-size: 14px;
}
.right {
width: 411px;
line-height: 28px;
background: #1d84ff;
padding-right: 5px;
color: #fff;
text-align: right;
}
}
}
</style>
<!--
* @Author: 纪泽龙 jizelong@qq.com
* @Date: 2022-09-22 10:38:49
* @LastEditors: 纪泽龙 jizelong@qq.com
* @LastEditTime: 2022-12-19 14:01:37
* @FilePath: /danger-manage-web/src/views/lessonsProgram/components/addLesson.vue
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
<el-dialog
class="add-lession"
:title="title"
:visible.sync="visible"
width="1020px"
:close-on-click-modal="false"
:close-on-press-escape="false"
:before-close="dialogCancel"
@closed="closeFinished"
destroy-on-close
>
<div v-if="visible" ref="myBody" class="body">
<transition name="fade" mode="out-in">
<component
:is="currentComponent"
:bankId.sync="bankId"
:subjectId.sync="subjectId"
ref="current"
></component>
</transition>
<!-- <Lesson ref='lesson'/> -->
<!-- <AddQuestion />
<QuestionList/> -->
</div>
<div slot="footer" class="dialog-footer">
<el-button
type="primary"
v-if="this.componentsNum == 1 || this.componentsNum == 3"
@click="save"
>保存</el-button
>
<el-button type="primary" @click="saveAndNext">{{
saveNextText
}}</el-button>
<el-button
v-if="this.componentsNum == 2"
type="primary"
@click="dialogCancel"
>{{ "确认" }}</el-button
>
<el-button @click="dialogCancel">取消</el-button>
</div>
</el-dialog>
</template>
<script>
import Lesson from "./Lesson";
import AddQuestion from "./AddQuestion";
import QuestionList from "./QuestionList";
export default {
name: "AnswerLesson",
props: {
visible: {
type: Boolean,
default: false,
},
componentsNum: {
type: Number,
default: 1,
},
bankId: {
type: Number,
},
},
// components: {
// Lesson,
// AddQuestion,
// QuestionList,
// },
data() {
return {
title: "录入课程",
currentComponent: Lesson,
// 当前题目查看
subjectId: null,
};
},
watch: {
componentsNum: {
handler(num) {
if (num === 1) {
this.currentComponent = Lesson;
if (this.bankId) {
this.title = "修改课程";
} else {
this.title = "新增课程";
}
} else if (num === 2) {
this.currentComponent = QuestionList;
this.title = "题目列表";
} else {
this.currentComponent = AddQuestion;
if (this.subjectId) {
this.title = "修改题目";
} else {
this.title = "新增题目";
}
}
},
deep: true,
},
},
computed: {
saveNextText() {
let text;
if (this.componentsNum == 1) {
text = "保存并录入题目";
} else if (this.componentsNum == 2) {
text = "录入考题";
} else {
text = "保存并录入下一题";
}
return text;
},
},
methods: {
saveBody() {
this.startHeight = this.$refs.myBody.offsetHeight - 55 + "px";
},
closeFinished() {},
// 关闭之后
// 只保存
save() {
// this.answerClear();
this.$refs.current.save();
},
// 保存并录入
saveAndNext() {
this.$refs.current.saveAndNext();
},
// 隐藏与显示dialog
dialogCancel() {
this.$emit("update:visible", false);
},
// 把ID改变了
changeCourseId(bankId) {
this.$emit("update:bankId", bankId);
},
// 改变当前组件
componentsNumChange(num) {
this.$emit("update:componentsNum", num);
},
answerClear() {
this.answerArr = [];
this.changeCourseId(null);
},
},
};
</script>
<style lang="scss" scoped>
.body {
width: 100%;
height: 100%;
padding-right: 40px;
padding-left: 36px;
}
</style>
<template>
<div>
<el-upload
:action="uploadUrl"
:on-success="handleUploadSuccess"
:on-error="handleUploadError"
name="file"
:show-file-list="false"
:headers="headers"
style="display: none"
ref="upload"
v-if="this.uploadUrl"
>
</el-upload>
<div class="editor" ref="editor" :style="styles"></div>
</div>
</template>
<script>
import Quill from "quill";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
import { getToken } from "@/utils/auth";
export default {
name: "Editor",
props: {
/* 编辑器的内容 */
value: {
type: String,
default: "",
},
/* 高度 */
height: {
type: Number,
default: null,
},
/* 最小高度 */
minHeight: {
type: Number,
default: null,
},
/* 只读 */
readOnly: {
type: Boolean,
default: false,
},
/* 上传地址 */
uploadUrl: {
type: String,
default: "",
}
},
data() {
return {
headers: {
Authorization: "Bearer " + getToken()
},
Quill: null,
currentValue: "",
options: {
theme: "snow",
bounds: document.body,
debug: "warn",
modules: {
// 工具栏配置
toolbar: [
["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线
["blockquote", "code-block"], // 引用 代码块
[{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表
[{ indent: "-1" }, { indent: "+1" }], // 缩进
[{ size: ["small", false, "large", "huge"] }], // 字体大小
[{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
[{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
[{ align: [] }], // 对齐方式
["clean"], // 清除文本格式
["link", "image"] // 链接、图片、视频"video"
],
},
placeholder: "请输入内容",
readOnly: this.readOnly,
},
};
},
computed: {
styles() {
let style = {};
if (this.minHeight) {
style.minHeight = `${this.minHeight}px`;
}
if (this.height) {
style.height = `${this.height}px`;
}
return style;
},
},
watch: {
value: {
handler(val) {
if (val !== this.currentValue) {
this.currentValue = val === null ? "" : val;
if (this.Quill) {
this.Quill.pasteHTML(this.currentValue);
}
}
},
immediate: true,
},
},
mounted() {
this.init();
},
beforeDestroy() {
this.Quill = null;
},
methods: {
init() {
const editor = this.$refs.editor;
this.Quill = new Quill(editor, this.options);
// 如果设置了上传地址则自定义图片上传事件
if (this.uploadUrl) {
let toolbar = this.Quill.getModule("toolbar");
toolbar.addHandler("image", (value) => {
this.uploadType = "image";
if (value) {
this.$refs.upload.$children[0].$refs.input.click();
} else {
this.quill.format("image", false);
}
});
toolbar.addHandler("video", (value) => {
this.uploadType = "video";
if (value) {
this.$refs.upload.$children[0].$refs.input.click();
} else {
this.quill.format("video", false);
}
});
}
this.Quill.pasteHTML(this.currentValue);
this.Quill.on("text-change", (delta, oldDelta, source) => {
const html = this.$refs.editor.children[0].innerHTML;
const text = this.Quill.getText();
const quill = this.Quill;
this.currentValue = html;
this.$emit("input", html);
this.$emit("on-change", { html, text, quill });
});
this.Quill.on("text-change", (delta, oldDelta, source) => {
this.$emit("on-text-change", delta, oldDelta, source);
});
this.Quill.on("selection-change", (range, oldRange, source) => {
this.$emit("on-selection-change", range, oldRange, source);
});
this.Quill.on("editor-change", (eventName, ...args) => {
this.$emit("on-editor-change", eventName, ...args);
});
},
handleUploadSuccess(res, file) {
// 获取富文本组件实例
let quill = this.Quill;
// 如果上传成功
if (res.code == 200) {
// 获取光标所在位置
let length = quill.getSelection().index;
// 插入图片 res.url为服务器返回的图片地址
quill.insertEmbed(length, "image", res.url);
// 调整光标到最后
quill.setSelection(length + 1);
} else {
this.$message.error("图片插入失败");
}
},
handleUploadError() {
this.$message.error("图片插入失败");
},
},
};
</script>
<style>
.editor, .ql-toolbar {
white-space: pre-wrap !important;
line-height: normal !important;
}
.quill-img {
display: none;
}
.ql-snow .ql-tooltip[data-mode="link"]::before {
content: "请输入链接地址:";
}
.ql-snow .ql-tooltip.ql-editing a.ql-action::after {
border-right: 0px;
content: "保存";
padding-right: 0px;
}
.ql-snow .ql-tooltip[data-mode="video"]::before {
content: "请输入视频地址:";
}
.ql-snow .ql-picker.ql-size .ql-picker-label::before,
.ql-snow .ql-picker.ql-size .ql-picker-item::before {
content: "14px";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="small"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="small"]::before {
content: "10px";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="large"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="large"]::before {
content: "18px";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="huge"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="huge"]::before {
content: "32px";
}
.ql-snow .ql-picker.ql-header .ql-picker-label::before,
.ql-snow .ql-picker.ql-header .ql-picker-item::before {
content: "文本";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
content: "标题1";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
content: "标题2";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
content: "标题3";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
content: "标题4";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
content: "标题5";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
content: "标题6";
}
.ql-snow .ql-picker.ql-font .ql-picker-label::before,
.ql-snow .ql-picker.ql-font .ql-picker-item::before {
content: "标准字体";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="serif"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="serif"]::before {
content: "衬线字体";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="monospace"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="monospace"]::before {
content: "等宽字体";
}
</style>
<!--
* @Author: 纪泽龙 jizelong@qq.com
* @Date: 2022-09-22 10:59:44
* @LastEditors: 纪泽龙 jizelong@qq.com
* @LastEditTime: 2022-12-21 17:30:33
* @FilePath: /danger-manage-web/src/views/lessonsProgram/components/Lession.vue
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
<div class="form-wrapper">
<el-form
class="form"
ref="form"
:model="form"
label-width="auto"
:rules="rules"
>
<div class="top flex">
<el-form-item label="题库名称" prop="bankName">
<el-input style="width: 500px" v-model="form.bankName"></el-input>
</el-form-item>
<el-form-item label="开始时间" prop="releaseTime">
<el-date-picker
v-model="form.startTime"
value-format="yyyy-MM-dd HH:mm:ss"
type="datetime"
placeholder="开始时间"
default-time="12:00:00"
>
</el-date-picker>
</el-form-item>
</div>
<el-form-item label="结束时间" prop="releaseTime">
<el-date-picker
v-model="form.endTime"
value-format="yyyy-MM-dd HH:mm:ss"
type="datetime"
placeholder="结束时间"
default-time="12:00:00"
>
</el-date-picker>
</el-form-item>
<el-form-item label="选择人员" prop="releaseTime">
<!-- table -->
<!-- jsonSelectNameList就是呗选中的人员的json -->
<!-- getPeopleList 是每次选中或者删除人员都会返回 一个所有人员列表的json串,[{staffId:staffId,staffName:staffName},{staffId:staffId,staffName:staffName}] -->
<!-- 要在jsonSelectNameList赋值完毕之后 调用一下 this.$refs.changePaple.changeNameList 135行 -->
<ChangePapel
ref="changePaple"
:jsonSelectNameList="jsonSelectNameList"
@getPeopleList="getPeopleList"
/>
</el-form-item>
</el-form>
</div>
</template>
<script>
import ChangePapel from "@/components/PeopleChange";
// import { mapGetters } from "vuex";
// import {
// addLessons,
// getLessonById,
// changeLesson,
// } from "@/api/educationPlanExam/lessonsProgram";
import {
listBank,
addBank,
updateBank,
getBank,
} from "@/api/educationPlanExam/questionBank";
// 所有部门
import { treeselect } from "@/api/system/dept";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default {
name: "",
props: {
bankId: {
type: Number,
},
// jsonSelectNameList: {
// type: String,
// default:
// '[{"staffId":880,"staffName":"孙卓亚"},{"staffId":871,"staffName":"张玉宾"},{"staffId":869,"staffName":"李二朝"},{"staffId":870,"staffName":"盖永峰"},{"staffId":868,"staffName":"刘丽艳"},{"staffId":867,"staffName":"霍文俊"},{"staffId":866,"staffName":"刘志坚"},{"staffId":865,"staffName":"郝文权"},{"staffId":864,"staffName":"齐雪军"},{"staffId":852,"staffName":"刘江平"},{"staffId":853,"staffName":"谷建海"},{"staffId":851,"staffName":"丁振国"},{"staffId":850,"staffName":"齐江波"},{"staffId":849,"staffName":"周立新"},{"staffId":848,"staffName":"史志波"},{"staffId":847,"staffName":"王增波"},{"staffId":846,"staffName":"杨彦龙"},{"staffId":845,"staffName":"杨华国"},{"staffId":844,"staffName":"王青华"}]',
// },
},
components: {
ChangePapel,
},
data() {
return {
form: {
bankName: "",
// courseType: "",
// courseConent: "",
// video: "",
// enclosure: "",
deptId: null,
abc: 0,
},
// 参考人员
jsonSelectNameList: null,
// 归属部门列表
deptOptions: [],
fileListVideo: [],
fileListFile: [],
readOnly: false,
// selectNameList: [],
rules: {
bankName: [
{ required: true, trigger: "blur", message: "课程名称不能为空" },
],
deptId: [
{ required: true, trigger: "blur", message: "请选择所属部门" },
],
},
};
},
computed: {
// 获取课程类型
// ...mapGetters(["courseOptions"]),
},
created() {
if (this.bankId) {
this.getLessonById();
}
// 归属部门列表
// this.getTreeselect();
},
mounted() {
// this.jsonSelectNameList
// '[{"staffId":880,"staffName":"孙卓亚"},{"staffId":871,"staffName":"张玉宾"},{"staffId":869,"staffName":"李二朝"},{"staffId":870,"staffName":"盖永峰"},{"staffId":868,"staffName":"刘丽艳"},{"staffId":867,"staffName":"霍文俊"},{"staffId":866,"staffName":"刘志坚"},{"staffId":865,"staffName":"郝文权"},{"staffId":864,"staffName":"齐雪军"},{"staffId":852,"staffName":"刘江平"},{"staffId":853,"staffName":"谷建海"},{"staffId":851,"staffName":"丁振国"},{"staffId":850,"staffName":"齐江波"},{"staffId":849,"staffName":"周立新"},{"staffId":848,"staffName":"史志波"},{"staffId":847,"staffName":"王增波"},{"staffId":846,"staffName":"杨彦龙"},{"staffId":845,"staffName":"杨华国"},{"staffId":844,"staffName":"王青华"}]';
this.$refs.changePaple.changeNameList(this.jsonSelectNameList);
},
methods: {
// 添加课程
addLessons(data) {
if (!this.bankId) {
console.log("添加");
return addBank(data);
} else {
console.log("修改");
return updateBank({ bankId: this.bankId, ...data });
}
},
// 复现
getLessonById() {
getBank(this.bankId).then((res) => {
console.log("res", res);
if (res.code == 200) {
this.form = {
bankName: res.data.bankName,
deptId: res.data.deptId,
};
// const data = res.data;
// const { bankName, courseType, courseConent, video, enclosure } =
// data;
// this.form = {
// bankName,
// courseType,
// courseConent,
// video,
// enclosure,
// };
// this.fileListVideo = [
// {
// name: bankName + "视频",
// url: uploadfile,
// },
// ];
// this.fileListFile = [
// {
// name: bankName + "附件",
// url: uploadfile,
// },
// ];
}
});
},
// 获取参考人员的list
getPeopleList(list) {
console.log("参考人员", list);
},
save(num = 2) {
// 因为富文本编辑器会残留<p><br></p>,所以要清
// if (this.form.courseConent === "<p><br></p>") {
// this.form.courseConent = "";
// }
this.$refs.form.validate((valid) => {
if (valid) {
this.addLessons({ ...this.form }).then((res) => {
// 如果添加会传回来,就用传回来的,如果是修改本身就有,就用本身的
// console.log('res',res)
const bankId = this.bankId || res;
// if (res.code == 200) {
// 这样调比较纯函数一点
if (num == 2) {
this.$message({
message: "保存题库成功",
type: "success",
});
} else if (num == 3) {
this.$message({
message: "保存题库成功,请开始录入题目",
type: "success",
});
}
this.$parent.$parent.componentsNumChange(num);
this.$parent.$parent.changeCourseId(bankId);
this.$parent.$parent.$parent.getList();
return true;
// }
});
} else {
if (!this.form.deptId) {
document.querySelector(
".vue-treeselect__control"
).style.borderColor = "red";
} else {
document.querySelector(
".vue-treeselect__control"
).style.borderColor = "";
this.$refs.treeItem.clearValidate();
}
}
});
},
// 保存并进入题目
saveAndNext() {
this.save(3);
},
},
};
</script>
<style lang="scss" scoped>
.form-wrapper {
padding-top: 22px;
width: 100%;
height: 550px;
// overflow: hidden;
// padding-bottom: 10px;
margin-bottom: 20px;
// border-bottom: 1px solid #bbbbbb;
.top {
width: 100%;
justify-content: space-between;
}
}
</style>
<!--
* @Author: 纪泽龙 jizelong@qq.com
* @Date: 2022-09-22 17:56:05
* @LastEditors: 纪泽龙 jizelong@qq.com
* @LastEditTime: 2022-12-17 14:28:57
* @FilePath: /danger-manage-web/src/views/lessonsProgram/components/QuestionList.vue
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
<div ref="myBody" class="add-question flex">
<div class="text flex">
<div class="left">
目前有<span>{{ questionNum || 0 }}</span
>道题
<!-- <span class="warn">温馨提示:发布课程前需要进行考试设置</span> -->
</div>
<div class="right">{{ courseName }}</div>
</div>
<div class="table flex" v-loading="loading">
<div class="th flex">
<div class="left">序号</div>
<div class="middle">题目名称</div>
<div class="right">操作</div>
</div>
<div class="td-wrapper">
<div
v-for="(item, index) in questionList"
:key="item.subjectId"
class="td flex"
>
<div class="left">{{ index + 1 }}</div>
<div class="middle zzz">
{{ item.topicTitle }}
</div>
<div class="right">
<div>
<el-button
@click="edit(item.subjectId)"
icon="el-icon-edit"
type="text"
>修改</el-button
>
<el-button
@click="deleteLesson(item.subjectId)"
icon="el-icon-delete"
type="text"
>删除</el-button
>
</div>
</div>
</div>
</div>
</div>
<!-- <div class="rightNum flex">
<div class="left">录入考题</div>
<div class="middle flex">
<div class="left-text">答对题目大于</div>
<div>
<el-input
v-model="rightNum"
style="width: 60px"
size="mini"
></el-input>
</div>
<div>为合格</div>
</div>
<div class="right">
<el-button
@click="saveRightNum"
icon="el-icon-check"
size="mini"
type="success"
>保存</el-button
>
</div>
</div> -->
</div>
</template>
<script>
import {
getQuestion,
deleteQuestion,
changeLesson,
getLessonById,
} from "@/api/educationPlanExam/lessonsProgram";
import { listSubject, delSubject } from "@/api/educationPlanExam/subject";
import { getBank } from "@/api/educationPlanExam/questionBank";
export default {
name: "AnswerLesson",
props: {
bankId: {
type: Number,
},
},
components: {},
data() {
return {
// 当前课程的第几题,调一遍接口
questionNum: null,
// 答对几道题
rightNum: 0,
questionList: [],
loading: false,
courseName: "",
};
},
// watch: {
// visible(newValue) {
// if (newValue) {
// this.$nextTick(() => {
// this.saveBody();
// });
// }
// },
// },
created() {
console.log("this.bankId", this.bankId);
if (this.bankId) {
this.getQuestion({ bankId: this.bankId });
// 获取只题目正确几题算过关
this.getLessonById(this.bankId);
}
},
methods: {
save() {
console.log("QuestionList");
},
saveAndNext() {
this.$parent.$parent.componentsNumChange(3);
},
getQuestion(bankId) {
console.log(bankId);
return listSubject(bankId).then((res) => {
console.log("题库res", res);
this.questionList = res.rows.map((item) => {
return {
subjectId: item.subjectId,
topicTitle: item.topicTitle,
};
});
this.questionNum = res.total;
return true;
});
},
getLessonById(bankId) {
getBank(bankId).then((res) => {
// console.log(res);
// this.rightNum = res.data.qualifiedNum;
this.courseName = res.data.bankName;
});
},
edit(subjectId) {
this.$emit("update:subjectId", subjectId);
this.$parent.$parent.componentsNumChange(3);
},
deleteLesson(subjectId) {
this.$confirm("请确定删除该题", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(() => {
this.loading = true;
return delSubject(subjectId);
})
.then((res) => {
if (res.code == 200) {
this.$message({
message: "删除成功",
type: "success",
});
}
return this.getQuestion({ bankId: this.bankId });
})
.finally(() => {
this.loading = false;
// 课程列表重置一下
this.$parent.$parent.$parent.getList();
});
},
saveRightNum() {
if (this.rightNum > this.questionList.length) {
this.$message({
message: "答对题目数应小于等于考试题目总数",
type: "warning",
});
return;
}
changeLesson({
bankId: this.bankId,
qualifiedNum: this.rightNum,
}).then((res) => {
if (res.code == 200) {
this.$message({
message: "答题合格数修改成功",
type: "success",
});
}
});
},
},
};
</script>
<style lang="scss" scoped>
.add-question {
width: 100%;
height: 550px;
// overflow: hidden;
flex-direction: column;
padding-bottom: 7px;
margin-bottom: 20px;
border-bottom: 1px solid #bbbbbb00;
.text {
margin-top: 13px;
margin-bottom: 32px;
justify-content: space-between;
height: 28px;
.left {
line-height: 28px;
color: #101010;
font-size: 14px;
.warn {
display: inline-flex;
font-size: 12px;
color: red;
margin-left: 10px;
}
}
.right {
width: 411px;
line-height: 28px;
background: #1d84ff;
padding-right: 5px;
color: #fff;
text-align: right;
}
}
.table {
flex: 1;
height: 0;
flex-direction: column;
.th {
width: 100%;
height: 70px;
line-height: 70px;
background: #f5f5f5;
color: #606266;
> div {
height: 100%;
}
.left {
width: 15%;
text-align: center;
}
.middle {
width: 60%;
padding-left: 100px;
}
.right {
width: 25%;
text-align: center;
}
}
.td-wrapper {
flex: 1;
overflow-y: auto;
// 这样子元素才能有滚动条
.td {
height: 68px;
line-height: 68px;
box-sizing: border-box;
border-bottom: 1px solid #bbbbbb;
&:last-child {
border-bottom: none;
}
> div {
height: 100%;
}
.left {
width: 15%;
text-align: center;
}
.middle {
width: 60%;
padding-left: 10px;
}
.right {
width: 25%;
text-align: center;
}
}
}
}
.rightNum {
margin-top: 5px;
height: 55px;
box-sizing: border-box;
border: 1px solid #bbbbbb;
line-height: 55px;
> .left {
width: 140px;
background: #0bab0c;
font-size: 14px;
color: #fff;
text-align: center;
}
> .middle {
> div {
margin-right: 5px;
}
.left-text {
margin-left: 10px;
}
.middle {
margin-right: 20px;
}
}
.right {
margin-left: 20px;
}
// background: black;
}
}
</style>
......@@ -35,7 +35,7 @@ module.exports = {
// detail: https://cli.vuejs.org/config/#devserver-proxy
[process.env.VUE_APP_BASE_API]: {
target: process.env.VUE_APP_TARGET,
//target: `http://192.168.31.87:8908/dangerManage`,
// target: `http://192.168.2.2:8908/dangerManage`,
changeOrigin: true,
pathRewrite: {
['^' + process.env.VUE_APP_BASE_API]: ''
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment