<template>
<div class="topicManage">
<el-form
:model="queryParams"
ref="queryForm"
:inline="true"
v-show="showSearch"
label-width="68px"
>
<el-form-item label="章节" prop="sectionid">
<el-select
v-model="queryParams.sectionid"
placeholder="请选择章节"
size="small"
@keyup.enter.native="handleQuery"
>
<el-option
v-for="dict in zjSelect"
:key="dict.id"
:label="dict.zynr"
:value="dict.id"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="题目类型" prop="topicType">
<el-select
v-model="queryParams.topicType"
placeholder="请选择题目类型"
size="small"
>
<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-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-button
type="warning"
icon="el-icon-circle-check"
size="mini"
@click="handleSaveSelect"
>保存</el-button
>
</el-form-item>
</el-form>
<el-table
v-loading="loading"
ref="tmTable"
:data="syllabustopicstoreList"
@select="handleSelect"
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="45" align="center" />
<el-table-column
label="题目内容"
prop="topicContent"
:show-overflow-tooltip="true"
>
<template slot-scope="scope">
<div class="tmDiv" @click="seeMore(scope.$index, scope.row)">
<div class="tmList">
<dict-tag
:options="dict.type.biz_assess_mode"
:value="scope.row.storeType"
class="dictTag"
/>
<dict-tag
:options="dict.type.biz_topic_type"
:value="scope.row.topicType"
class="dictTag"
/>
<span class="lineLimit" v-html="scope.row.topicContent"></span>
<span class="tmMoreBtn" v-show="!scope.row.showMore"
>详情<i class="el-icon-arrow-down"></i
></span>
<span class="tmMoreBtn" v-show="scope.row.showMore"
>收起<i class="el-icon-arrow-up"></i
></span>
</div>
<div class="tmMore" v-show="scope.row.showMore">
<div
class="tmdesc"
v-show="scope.row.topicType == 1 || scope.row.topicType == 2"
v-html="scope.row.options"
></div>
<div class="tmDa">
<span class="bold">参考答案：</span>
<span class="lineLimit" v-html="scope.row.answer"></span>
</div>
</div>
<div class="kcTarget">
<span class="sp1">课程目标：</span>
<span class="blue">{{
kcmbqzinfoFormatter(scope.row.kcmbqzinfo)
}}</span>
</div>
</div>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total > 0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
</div>
</template>
<script>
import { listSyllabustopicstore } from "@/api/biz/syllabustopicstore";
import { listZjBySyllabusid } from "@/api/biz/syllabusxsfp";
import { listBySyllabusid } from "@/api/biz/syllabuscoursetarget";
import {
batchAdd,
listByKhnrid,
delSyllabuskhnrdetail,
} from "@/api/biz/syllabuskhnrdetail";
export default {
name: "Syllabustopicstore",
dicts: ["biz_topic_type", "biz_assess_mode"],
props: {
syllabusid: {
type: String,
default: "",
},
row: {
type: Object,
default: {},
},
},
data() {
return {
showMore: false,
// 章节
zjSelect: [],
// 课程目标
kcmbSelect: [],
selectedOptions: [],
targets: {},
// 题库类型
tagTypes: { 1: "", 2: "success", 3: "warning" },
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 已经保存的题目
dbids: [],
// 原始保存的题目对象
dbdetails: [],
// 当前回选
srcids: [],
// 非单个禁用
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: this.row.assessmodeType,
topicContent: null,
},
topicOptions: [{ option: "A", content: "", isRight: false }],
};
},
created() {
this.getZjList();
this.getKcmbList();
this.getDbids();
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(", ");
},
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;
}
});
},
getDbids() {
listByKhnrid({ syllabuskhnrid: this.row.id }).then((response) => {
if (response.code == 200) {
this.dbdetails = response.data;
this.dbids = this.dbdetails.map((o) => o.syllabustopicstoreid);
}
});
},
/** 查询列表 */
getList() {
this.loading = true;
listSyllabustopicstore(this.queryParams).then((response) => {
this.syllabustopicstoreList = response.rows;
this.$nextTick(() => {
this.srcids = [];
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(",");
}
if (this.dbids.includes(topic.id)) {
this.srcids.push(topic.id);
this.$refs.tmTable.toggleRowSelection(topic);
}
});
});
this.total = response.total;
this.loading = false;
});
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.resetForm("queryForm");
this.handleQuery();
},
handleSelect(selection, row) {
const result = selection.filter((item) => item.id === row.id);
if (result.length == 0 && this.srcids.includes(row.id)) {
const topic = this.dbdetails.find(
(o) => o.syllabustopicstoreid == row.id
);
if (!!topic) {
this.$modal
.confirm("取消选择将删除,是否继续？")
.then(function () {
return delSyllabuskhnrdetail(topic.id);
})
.then(() => {
this.getDbids();
this.getList();
this.$modal.msgSuccess("删除成功");
})
.catch((e) => {
if(e == 'cancel'){
this.$refs.tmTable.toggleRowSelection(row);
}
});
}
}
},
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map((item) => item.id);
this.single = selection.length !== 1;
this.multiple = !selection.length;
},
/** 保存选中的题目 */
handleSaveSelect() {
if (this.ids.length > 0) {
let details = [];
let iids = [];
if (this.srcids.length > 0) {
iids = this.ids.filter((o) => !this.srcids.includes(o));
} else {
iids = this.ids;
}
iids.forEach((id) => {
details.push({
syllabuskhnrid: this.row.id,
syllabustopicstoreid: id,
score: 0,
bno: 0,
});
});
if (iids.length > 0) {
batchAdd(details).then((response) => {
if (response.code == 200) {
this.getDbids();
this.getList();
this.$modal.msgSuccess("保存成功");
}
});
}
}
},
},
};
</script>
<style lang="scss" >
@import "../../../assets/scss/front";
.topicManage {
.tabPane {
margin-top: 8px;
}
.tmDiv {
white-space: pre-wrap;
cursor: pointer;
}
.tmList {
margin-bottom: 15px;
.lineLimit {
display: inline;
p,
h3 {
display: inline !important;
}
}
.tmMoreBtn {
color: $blue;
margin-left: 10px;
}
.dictTag {
display: inline;
margin-right: 5px;
.el-tag--medium {
height: 20px !important;
padding: 0 5px !important;
line-height: 19px !important;
}
}
}
.kcTarget {
.sp1 {
font-weight: bold;
}
.blue {
color: $blue2;
}
}
.tmMore {
.tmdesc {
padding-bottom: 15px;
}
.tmDa {
// background-color: #f5f7fa;
padding: 3px 0;
margin-bottom: 5px;
}
.bold {
font-weight: bold;
}
}
}
</style>
未经允许不得转载：
红吉他 »
HTML5 »
使用el-table弹窗选择和取消选择