<template>
<div>
<!-- <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
<el-form-item label="教学大纲ID" prop="syllabusid">
<el-input
v-model="queryParams.syllabusid"
placeholder="请输入教学大纲ID"
clearable
size="small"
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="教学内容章节ID" prop="sectionid">
<el-input
v-model="queryParams.sectionid"
placeholder="请输入教学内容章节ID"
clearable
size="small"
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form> -->
<el-row :gutter="10">
<el-col :span="1.5">
<el-button
type="primary"
plain
icon="el-icon-plus"
size="mini"
@click="handleAdd"
>新增</el-button
>
</el-col>
<el-col :span="1.5">
<el-button
type="success"
plain
icon="el-icon-edit"
size="mini"
:disabled="single"
@click="handleUpdate"
>修改</el-button
>
</el-col>
<el-col :span="1.5">
<el-button
type="danger"
plain
icon="el-icon-delete"
size="mini"
:disabled="multiple"
@click="handleDelete"
>删除</el-button
>
</el-col>
<right-toolbar
:showSearch.sync="showSearch"
@queryTable="getList"
></right-toolbar>
</el-row>
<el-table
v-loading="loading"
border
:data="syllabustopicstoreList"
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="40" />
<!-- <el-table-column label="主键" prop="id" /> -->
<!-- <el-table-column label="教学大纲" prop="syllabusid" /> -->
<!-- <el-table-column label="教学内容章节" prop="sectionid" /> -->
<!-- <el-table-column
label="课程目标"
prop="kcmbqzinfo"
:formatter="kcmbqzinfoFormatter"
/> -->
<!-- <el-table-column label="题目类型" prop="topicType">
<template slot-scope="scope">
<dict-tag
:options="dict.type.biz_topic_type"
:value="scope.row.topicType"
/>
</template>
</el-table-column> -->
<!-- <el-table-column
label="题库类型"
prop="storeType"
:formatter="storeTypeFormatter"
/> -->
<el-table-column
label="题目内容"
prop="topicContent"
:show-overflow-tooltip="true"
>
<template slot-scope="scope">
<div>
<div>
<div>
<div>
<el-tag size="mini" effect="dark" :type="tagTypes[scope.row.storeType]">{{
storeTypes[scope.row.storeType]
}}</el-tag>
</div>
<div>
<dict-tag
:options="dict.type.biz_topic_type"
:value="scope.row.topicType"
/>
</div>
</div>
<div class="">
<span v-html="scope.row.topicContent"></span>
</div>
</div>
<div v-show="scope.row.showMore">
<div v-show="scope.row.topicType==1 || scope.row.topicType==2" v-html="scope.row.options">
</div>
<div>
<span>参考答案：</span>
<span v-html="scope.row.answer"></span>
</div>
</div>
<div>
<span>课程目标：</span>
<span>
{{ kcmbqzinfoFormatter(scope.row.kcmbqzinfo) }}</span
>
</div>
</div>
</template>
</el-table-column>
<!-- <el-table-column label="教学内容" prop="points" /> -->
<!-- <el-table-column label="答案" prop="answer" /> -->
<el-table-column
label="操作"
class-name="small-padding fixed-width"
width="130px"
>
<template slot-scope="scope">
<div>
<el-button
size="mini"
type="text"
@click="seeMore(scope.$index,scope.row)"
icon="el-icon-tickets"
>查看详情</el-button
>
</div>
<el-button
size="mini"
type="text"
icon="el-icon-edit"
@click="handleUpdate(scope.row)"
>修改</el-button
>
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
>删除</el-button
>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total > 0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
<!-- 添加或修改教学大纲题库对话框 -->
<el-dialog
:title="title"
:visible.sync="open"
width="65%"
append-to-body
:close-on-click-modal="false"
>
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-row>
<el-col :span="8">
<el-form-item label="章节" prop="sectionid">
<el-select v-model="form.sectionid" placeholder="请选择章节">
<el-option
v-for="dict in zjSelect"
:key="dict.id"
:label="dict.zynr"
:value="dict.id"
></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="题库分类" prop="storeType">
<el-select v-model="form.storeType" placeholder="请选择题库分类">
<el-option label="考试" value="1"></el-option>
<el-option label="作业" value="2"></el-option>
<el-option label="实验" value="3"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="题目类型" prop="topicType">
<el-select v-model="form.topicType" placeholder="请选择题目类型">
<el-option
v-for="dict in dict.type.biz_topic_type"
:key="dict.value"
:label="dict.label"
:value="dict.value"
></el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-form-item label="课程目标" prop="kcmbqzinfo">
<el-checkbox-group v-model="selectedOptions">
<div>
<el-checkbox
v-for="item in kcmbSelect"
:key="item.id"
:label="item.id"
@change="(value) => handleChangeTarget(value, item.id)"
style="padding-right: 25px"
>
<span>{{ item.title }}</span>
<span
v-if="selectedOptions.includes(item.id)"
style="display: inline-block; padding-left: 10px"
>
权重(%)
</span>
<el-input-number
size="mini"
style="width: 60px; margin-left: 8px"
:min="0"
:controls="false"
v-if="selectedOptions.includes(item.id)"
v-model="targets[item.id]"
@change="
(currentValue, oldValue) =>
onInputNumChange(currentValue, oldValue, item.id)
"
/>
</el-checkbox>
</div>
</el-checkbox-group>
</el-form-item>
<el-form-item label="题目内容">
<editor v-model="form.topicContent" :min-height="192" />
</el-form-item>
<template v-if="form.topicType == '1' || form.topicType == '2'">
<el-form-item label="选项内容">
<el-row>
<el-col :span="16">选项</el-col>
<el-col :span="2">答案</el-col>
<el-col :span="6">操作</el-col>
</el-row>
<el-row
:gutter="10"
v-for="(opt, index) in topicOptions"
:key="index"
>
<el-col :span="16">
<el-form-item prop="topicType">
<div>
<div class="col col03">
<span> 选项{{ opt.option }}： </span>
</div>
<div class="col col01">
<el-input
type="textarea"
autosize
v-model="opt.content"
/>
</div>
<div class="col col02">
<el-button
v-if="index > 0"
type="text"
icon="el-icon-delete"
size="large"
@click="delOption(index)"
></el-button>
</div>
</div>
</el-form-item>
</el-col>
<el-col :span="2">
<!-- <el-select v-model="opt.isRight" placeholder="请选择">
<el-option key="1" label="是" value="0"></el-option>
<el-option key="2" label="否" value="1"></el-option>
</el-select> -->
<div>
<el-checkbox
v-model="opt.isRight"
@change="checkChange(index)"
></el-checkbox>
</div>
</el-col>
<el-col :span="6">
<el-button
type="success"
plain
icon="el-icon-top"
size="mini"
:disabled="index == 0"
@click="upOption(index)"
></el-button>
<el-button
type="success"
plain
icon="el-icon-bottom"
size="mini"
:disabled="index == topicOptions.length - 1"
@click="downOption(index)"
></el-button>
</el-col>
</el-row>
<div>
<el-button
type="primary"
plain
icon="el-icon-plus"
size="mini"
@click="addNewOption"
>添加选项</el-button
>
</div>
</el-form-item>
</template>
<!-- <el-form-item label="教学内容" prop="points">
<el-input v-model="form.points" placeholder="请输入教学内容" />
</el-form-item> -->
<el-form-item label="答案" v-else>
<editor v-model="form.answer" :min-height="192" />
</el-form-item>
</el-form>
<div slot="footer">
<el-button type="primary" @click="submitForm">确 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import {
listSyllabustopicstore,
getSyllabustopicstore,
delSyllabustopicstore,
addSyllabustopicstore,
updateSyllabustopicstore,
} from "@/api/biz/syllabustopicstore";
import { getLetter } from "@/utils/index";
import { listZjBySyllabusid } from "@/api/biz/syllabusxsfp";
import { listBySyllabusid } from "@/api/biz/syllabuscoursetarget";
export default {
name: "Syllabustopicstore",
dicts: ["biz_topic_type"],
props: {
syllabusid: {
type: String,
default: "",
},
},
data() {
return {
showMore: false,
// 章节
zjSelect: [],
// 课程目标
kcmbSelect: [],
selectedOptions: [],
targets: {},
// 题库类型
storeTypes: { 1: "考试", 2: "作业", 3: "实验" },
tagTypes:{1:"",2:"success",3:"warning"},
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
// 教学大纲题库表格数据
syllabustopicstoreList: [],
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
syllabusid: this.syllabusid,
sectionid: null,
kcmbqzinfo: null,
topicType: null,
storeType: null,
topicContent: null,
},
// 表单参数
form: {},
topicOptions: [{ option: "A", content: "", isRight: false }],
// 表单校验
rules: {
topicType: [
{ required: true, message: "题目类型不能为空", trigger: "change" },
],
storeType: [
{ required: true, message: "题库类型不能为空", trigger: "change" },
],
topicContent: [
{ required: true, message: "题目内容不能为空", trigger: "blur" },
],
createBy: [
{ required: true, message: "创建者不能为空", trigger: "blur" },
],
createTime: [
{ required: true, message: "创建时间不能为空", trigger: "blur" },
],
},
};
},
created() {
this.getZjList();
this.getKcmbList();
this.getList();
},
methods: {
seeMore(index,row) {
row.showMore = !row.showMore;
this.$set(this.syllabustopicstoreList,index,row);
},
kcmbqzinfoFormatter(row) {
const qzs = [];
if (!!row) {
const mbqz = JSON.parse(row);
mbqz.forEach((qz) => {
qzs.push(qz.kcmbtitle + "(" + qz.qz + "%)");
});
}
return qzs.join(", ");
},
storeTypeFormatter(row, column) {
return this.storeTypes[row.storeType];
},
onInputNumChange(currentValue, oldValue, targetId) {
this.targets[targetId] = currentValue;
},
handleChangeTarget(value, targetId) {
if (value) {
this.targets[targetId] = 0;
} else {
delete this.targets[targetId];
}
},
getZjList() {
listZjBySyllabusid({ syllabusid: this.syllabusid }).then((res) => {
if (200 == res.code) {
this.zjSelect = res.data;
}
});
},
getKcmbList() {
listBySyllabusid({ syllabusid: this.syllabusid }).then((res) => {
if (200 == res.code) {
this.kcmbSelect = res.data;
}
});
},
/** 查询教学大纲题库列表 */
getList() {
this.loading = true;
listSyllabustopicstore(this.queryParams).then((response) => {
this.syllabustopicstoreList = response.rows;
this.syllabustopicstoreList.forEach(topic=>{
const optionArr = [];
const rightArr = [];
const options = !!topic.topicOptions?JSON.parse(topic.topicOptions):[];
topic.showMore = false;
options.map(o=>{
if(!!o.isRight){
rightArr.push(o.option);
}
optionArr.push(`<span style="display: inline-block; padding-left: 10px">${o.option}.${o.content}</span>`);
});
topic.options = optionArr.join("");
if(topic.topicType==1||topic.topicType==2){
topic.answer = rightArr.join(",");
}
});
this.total = response.total;
this.loading = false;
});
},
// 取消按钮
cancel() {
this.open = false;
this.reset();
},
// 表单重置
reset() {
this.form = {
id: null,
syllabusid: this.syllabusid,
sectionid: null,
kcmbqzinfo: [],
topicType: null,
storeType: null,
topicContent: null,
topicOptions: [],
points: null,
answer: null,
createBy: null,
createTime: null,
updateBy: null,
updateTime: null,
};
this.topicOptions = [{ option: "A", content: "", isRight: false }];
// 课程目标清空
this.selectedOptions = [];
this.targets = {};
this.resetForm("form");
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.resetForm("queryForm");
this.handleQuery();
},
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map((item) => item.id);
this.single = selection.length !== 1;
this.multiple = !selection.length;
},
/**动态新增选择题选项 */
addNewOption() {
let length = this.topicOptions.length;
if (length < 26) {
this.topicOptions.push({
option: getLetter(length),
content: "",
isRight: false,
});
} else {
this.$modal.msgWarning("已达到添加上限！");
}
},
/**删除选项 */
delOption(index) {
this.$modal
.confirm(`是否确认删除选项${this.topicOptions[index].option}？`)
.then(() => {
this.topicOptions.splice(index, 1);
this.topicOptions.forEach((opt, idx) => {
opt.option = getLetter(idx);
});
this.$modal.msgSuccess("删除成功");
})
.catch(() => {});
},
/**上移选项 */
upOption(index) {
let tmp = this.topicOptions.splice(index, 1);
this.topicOptions.splice(index - 1, 0, tmp[0]);
this.topicOptions.forEach((opt, idx) => {
opt.option = getLetter(idx);
});
},
/**下移选项 */
downOption(index) {
let tmp = this.topicOptions.splice(index, 1);
this.topicOptions.splice(index + 1, 0, tmp[0]);
this.topicOptions.forEach((opt, idx) => {
opt.option = getLetter(idx);
});
},
checkChange(index) {
let ischk = this.topicOptions[index].isRight;
let arys = this.topicOptions.filter((item) => {
return item.isRight == true;
});
if (this.form.topicType == "1") {
//单选
if (ischk) {
if (arys.length > 1) {
this.topicOptions.forEach((item, idx) => {
if (idx != index) {
item.isRight = false;
}
});
}
} else {
if (arys.length == 0) {
this.topicOptions[index].isRight = true;
this.$modal.msgWarning("单选题必须要有一个正确答案");
}
}
} else if (this.form.topicType == "2") {
//多选
if (!ischk) {
if (arys.length == 0) {
this.topicOptions[index].isRight = true;
this.$modal.msgWarning("多选题必须要有一个正确答案");
}
}
}
},
/** 新增按钮操作 */
handleAdd() {
this.reset();
this.open = true;
this.title = "添加教学大纲题库";
},
/** 修改按钮操作 */
handleUpdate(row) {
this.reset();
const id = row.id || this.ids;
getSyllabustopicstore(id).then((response) => {
this.form = response.data;
if (!!response.data.topicOptions) {
this.topicOptions = JSON.parse(response.data.topicOptions);
}
if (!!response.data.kcmbqzinfo) {
const qzinfo = JSON.parse(response.data.kcmbqzinfo);
qzinfo.forEach((o) => {
this.selectedOptions.push(Number(o.kcmbid));
this.targets[o.kcmbid] = o.qz;
});
}
this.open = true;
this.title = "修改教学大纲题库";
});
},
/** 提交按钮 */
submitForm() {
// console.log(JSON.stringify(this.targets));
this.$refs["form"].validate((valid) => {
if (valid) {
const kcmbqz = [];
for (let k in this.targets) {
const mb = this.kcmbSelect.find((o) => o.id == k);
kcmbqz.push({
kcmbid: Number(k),
kcmbtitle: mb.title,
qz: this.targets[k],
});
}
this.form.kcmbqzinfo = JSON.stringify(kcmbqz);
this.form.topicOptions = JSON.stringify(this.topicOptions);
if (this.form.id != null) {
updateSyllabustopicstore(this.form).then((response) => {
this.$modal.msgSuccess("修改成功");
this.open = false;
this.getList();
});
} else {
addSyllabustopicstore(this.form).then((response) => {
this.$modal.msgSuccess("新增成功");
this.open = false;
this.getList();
});
}
}
});
},
/** 删除按钮操作 */
handleDelete(row) {
const ids = row.id || this.ids;
this.$modal
.confirm('是否确认删除教学大纲题库编号为"' + ids + '"的数据项？')
.then(function () {
return delSyllabustopicstore(ids);
})
.then(() => {
this.getList();
this.$modal.msgSuccess("删除成功");
})
.catch(() => {});
},
},
};
</script>
<style scoped>
@import "../../../assets/scss/front";
.bizCard {
background-color: #fff;
box-shadow: 0 2px 8px rgba(204, 204, 204, 0.397);
border-radius: 3px;
padding: 15px;
margin-bottom: 20px;
::v-deep .el-form-item {
margin-bottom: 0;
}
}
.demo-drawer__footer {
position: fixed;
bottom: 0px;
width: 100%;
height: 50px;
z-index: 9999;
}
.custom-tree-node {
flex: 1;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 14px;
padding-right: 8px;
position: relative;
.inputNum {
position: absolute;
right: 0;
top: -6px;
}
}
.tabTitle {
background-color: #f7f7f7;
color: #888;
.textCenter {
text-align: center;
}
}
.tabContent {
margin: 5px 0;
.textCenter {
text-align: center;
}
.inputBox {
display: flex;
justify-content: space-between;
padding: 0 5px;
.col01 {
width: calc(100% - 100px);
.label {
font-weight: bold;
}
}
.col02 {
width: 30px;
text-align: right;
}
.col03 {
width: 70px;
}
}
.radioGroup {
text-align: center;
}
}
// 样式重写
.inputBox ::v-deep .el-input__inner {
border: none !important;
padding: 0;
}
.inputBox ::v-deep .el-button--text {
padding: 0;
}
.inputBox ::v-deep .el-icon-delete {
color: #f56c6c;
font-size: 18px;
}
.radioGroup ::v-deep .el-radio__inner {
width: 18px;
height: 18px;
}
.radioGroup ::v-deep .el-radio__inner::after {
width: 8px;
height: 8px;
}
.bold {
font-weight: bold;
}
.customTree {
padding-top: 5px;
padding-bottom: 15px;
::v-deep .el-tree {
background-color: #fdfdfd;
padding: 10px;
box-shadow: 0 2px 8px rgba(204, 204, 204, 0.25);
}
::v-deep .el-tree-node__content {
margin-top: 2px;
margin-bottom: 2px;
height: 30px;
.custom-tree-node {
border-bottom: 1px dotted rgb(212, 212, 212);
padding-bottom: 2px;
}
}
}
.drawerBox {
.infj {
margin-bottom: 30px;
padding: 12px 20px;
background-color: #f9f9f9;
box-shadow: 0 2px 8px #e2e2e2b2;
color: $blue;
font-size: 14px;
margin-left: 20px;
margin-right: 30px;
}
.dgInfo {
padding-left: 40px;
padding-right: 40px;
}
}
</style>
CREATE TABLE `biz_topicstore` (
`id` bigint NOT NULL AUTO_INCREMENT COMMENT '主键',
`syllabusid` bigint DEFAULT NULL COMMENT '大纲ID',
`sectionid` bigint DEFAULT NULL COMMENT '章节ID',
`kcmbqzinfo` json DEFAULT NULL COMMENT '对应课程目标json信息[{"kcmbid":1,"qz":0.3},{"kcmbid":2,"qz":0.4},{"kcmbid":3,"qz":0.2}]',
`topic_type` varchar(100) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NOT NULL COMMENT '题目类型(单选、多选等)',
`store_type` varchar(100) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NOT NULL COMMENT '题库类型：1-考试 2-作业 3-实验',
`topic_content` longtext CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NOT NULL COMMENT '题目内容',
`topic_options` longtext CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci COMMENT '单选、多选时对应的选项\r\n{\r\n''option'':''A'',\r\n''content'':''选项内容'',\r\n''isRight'':true\r\n}',
`points` json DEFAULT NULL COMMENT '教学内容',
`answer` longtext CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci COMMENT '答案',
`create_by` varchar(64) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NOT NULL DEFAULT '' COMMENT '创建者',
`create_time` datetime NOT NULL COMMENT '创建时间',
`update_by` varchar(64) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci DEFAULT '' COMMENT '更新者',
`update_time` datetime DEFAULT NULL COMMENT '更新时间',
PRIMARY KEY (`id`) USING BTREE
) ENGINE=InnoDB AUTO_INCREMENT=258 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci ROW_FORMAT=DYNAMIC COMMENT='题库';
未经允许不得转载：
红吉他 »
HTML5 »
基于vue的题库管理