You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
375 lines
11 KiB
375 lines
11 KiB
<template> |
|
<div> |
|
<el-dialog title="批量添加单选题" :visible.sync="quesVisible" width="1200px" :close-on-click-modal="false" |
|
@closed="closeDia"> |
|
<div class="wrap"> |
|
<!-- 题库 --> |
|
<div class="item"> |
|
<el-input class="m-b-10" placeholder="请输入题库分类/题库名称" prefix-icon="el-icon-search" v-model="quesBankKeyword" |
|
clearable /> |
|
<el-tree :key="key" node-key="id" default-expand-all ref="quesBank" :data="quesBanks" |
|
:props="{ label: 'name' }" show-checkbox @node-click="getKnowledge" @check-change="quesBankCheck"></el-tree> |
|
</div> |
|
<!-- 知识点 --> |
|
<div class="item"> |
|
<el-input class="m-b-10" placeholder="请输入知识点分类/知识点名称" prefix-icon="el-icon-search" v-model="knowledgeKeyword" |
|
clearable /> |
|
<el-tree :data="knowledges" default-expand-all ref="knowledge" node-key="id" highlight-current |
|
:expand-on-click-node="false" show-checkbox @node-click="getQues" @check-change="knowledgeCheck" |
|
:props="{ label: 'name' }"> |
|
<span class="custom-tree-node" slot-scope="{ node, data }"> |
|
<img v-if="data.type" class="m-r-5" src="@/assets/images/knowledge.svg" alt=""> |
|
<span class="org-name">{{ data.name }}</span> |
|
</span> |
|
</el-tree> |
|
</div> |
|
<!-- 题目 --> |
|
<div class="item"> |
|
<p class="total">单选题（共{{ ques.length }}道题）</p> |
|
<div class="ques"> |
|
<div class="line"> |
|
<el-checkbox v-model="quesAllCheck" @change="quesAllCheckChange"></el-checkbox> |
|
<span class="serial">序号</span> |
|
<span>题干</span> |
|
</div> |
|
|
|
<div v-for="(item, i) in ques" :key="i" class="line"> |
|
<el-checkbox v-model="item.check" :disabled="item.disabled" |
|
@change="val => quesChange(val, item)"></el-checkbox> |
|
<span class="serial">{{ i + 1 }}</span> |
|
<span>{{ item.stem }}</span> |
|
</div> |
|
</div> |
|
</div> |
|
<!-- 已选试题 --> |
|
<div class="item"> |
|
<div class="flex j-between a-center"> |
|
<p class="total">已选试题（共{{ checkedLen }}道题）</p> |
|
<el-button type="text" @click="batchDelChecked">批量移除</el-button> |
|
</div> |
|
<div class="ques"> |
|
<div class="line"> |
|
<el-checkbox v-model="checkedAllCheck" @change="checkedAllCheckChange"></el-checkbox> |
|
<span class="serial">序号</span> |
|
<span>题干</span> |
|
</div> |
|
|
|
<div v-for="(item, i) in checked" :key="i" class="line j-between"> |
|
<div class="check-left"> |
|
<el-checkbox v-model="item.check"></el-checkbox> |
|
<span class="serial">{{ i + 1 }}</span> |
|
<span>{{ item.stem }}</span> |
|
</div> |
|
<i class="el-icon-delete action-icon" @click="delChecked(item)"></i> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="flex j-between"> |
|
<p>未找到试题，<a class="link" @click="toAddQues">去新增</a></p> |
|
<p>已选题数/目标题数：0/10  <a class="link" @click="toEditQues">修改目标</a></p> |
|
</div> |
|
|
|
|
|
<span slot="footer" class="dialog-footer"> |
|
<el-button @click="quesVisible = false">取消</el-button> |
|
<el-button type="primary" :loading="submiting" @click="submit">确定</el-button> |
|
</span> |
|
</el-dialog> |
|
</div> |
|
</template> |
|
<script> |
|
import Setting from '@/setting' |
|
import Util from '@/libs/util' |
|
import _ from 'lodash' |
|
import QuesConst from '@/const/ques' |
|
export default { |
|
props: ['visible', 'questionType'], |
|
data () { |
|
return { |
|
quesVisible: false, |
|
quesBankKeyword: '', |
|
knowledgeKeyword: '', |
|
searchTimer: null, |
|
key: 1, |
|
quesBanks: [], |
|
knowledges: [], |
|
quesAllCheck: false, |
|
ques: [], |
|
checkedAllCheck: false, |
|
checked: [], |
|
curCheckQues: [], |
|
submiting: false, |
|
|
|
}; |
|
}, |
|
computed: { |
|
// 外面已经添加的试题+当前弹框已经勾选的试题 |
|
checkedLen () { |
|
return this.curCheckQues.length + this.checked.length |
|
} |
|
}, |
|
watch: { |
|
'quesBankKeyword': function (val) { |
|
clearTimeout(this.searchTimer) |
|
this.searchTimer = setTimeout(this.getQuesBank, 500) |
|
}, |
|
'knowledgeKeyword': function (val) { |
|
clearTimeout(this.searchTimer) |
|
this.searchTimer = setTimeout(this.getKnowledge, 500) |
|
}, |
|
visible () { |
|
this.quesVisible = this.visible |
|
this.visible && this.init() |
|
} |
|
}, |
|
mounted () { |
|
|
|
}, |
|
methods: { |
|
init () { |
|
// 清空所有状态和数据 |
|
this.key++ |
|
this.knowledges = [] |
|
this.ques = [] |
|
this.checked = [] |
|
this.quesAllCheck = false |
|
this.checkedAllCheck = false |
|
this.quesBankKeyword = '' |
|
this.knowledgeKeyword = '' |
|
|
|
const parent = this.$parent.curType |
|
this.curCheckQues = parent.examQuestions |
|
|
|
this.getQuesBank() |
|
}, |
|
// 获取题库 |
|
async getQuesBank () { |
|
try { |
|
const { data } = await this.$post(this.api.getAllQuestionBankCategories, { |
|
keyword: this.quesBankKeyword, |
|
createSource: 1, |
|
}) |
|
this.quesBanks = data |
|
} catch (e) { } |
|
}, |
|
// 获取知识点 |
|
async getKnowledge () { |
|
try { |
|
const id = this.$refs.quesBank.getCurrentKey() |
|
if (id) { |
|
const { data } = await this.$post(this.api.TreeStructure, { |
|
createSource: 1, |
|
questionBankId: id, |
|
keyword: this.knowledgeKeyword, |
|
}) |
|
this.knowledges = data |
|
} |
|
} catch (e) { } |
|
}, |
|
// 获取试题 |
|
async getQues () { |
|
let k = this.$refs.knowledge.getCurrentNode() // 选中的知识点 |
|
// 选中了知识点才能查询试题 |
|
if (k && k.type) { |
|
let { questionType } = this |
|
if (questionType) questionType = QuesConst.questionTypes.find(e => e.name === questionType).id |
|
const { message } = await this.$post(this.api.listQuestion, { |
|
pageNum: 1, |
|
pageSize: 1000, |
|
status: 1, |
|
// questionBankId: this.$refs.quesBank.getCurrentKey(), |
|
// knowledgePointIds: [k.id], |
|
questionTypes: questionType ? [questionType] : [], |
|
questionBankId: 26, |
|
knowledgePointIds: [18], |
|
}) |
|
const data = message.records |
|
const checked = this.curCheckQues |
|
data.map(e => { |
|
const el = document.createElement('div') |
|
el.innerHTML = e.stem |
|
e.stem = el.innerText |
|
e.check = !!this.checked.find(n => n.questionId === e.questionId) |
|
e.disabled = !!checked.find(n => n.questionVersionId === e.questionId) |
|
}) |
|
this.ques = data |
|
console.log("🚀 ~ getQues ~ data:", data, checked) |
|
} |
|
}, |
|
// 题库勾选回调 |
|
quesBankCheck (data, checked) { |
|
// debugger |
|
if (checked) { |
|
// this.$refs.quesBank.setCurrentKey(data.id) |
|
this.getKnowledge() |
|
} |
|
this.$refs.knowledge.setCheckedNodes(checked ? this.knowledges : []) |
|
}, |
|
// 知识点点击回调 |
|
knowledgeClick (data) { |
|
|
|
}, |
|
// 知识点勾选回调 |
|
knowledgeCheck () { |
|
|
|
}, |
|
// 题目全选回调 |
|
quesAllCheckChange (val) { |
|
this.ques.map(e => { |
|
e.check = val |
|
this.quesChange(val, e) |
|
}) |
|
}, |
|
// 题目多选回调 |
|
quesChange (val, item) { |
|
const cur = this.checked.findIndex(e => e.questionId === item.questionId) |
|
// 选中 |
|
if (val) { |
|
if (cur === -1) { |
|
const e = _.cloneDeep(item) |
|
e.check = false |
|
this.checked.push(e) |
|
} |
|
} else { |
|
// 取消选中 |
|
cur >= 0 && this.checked.splice(cur, 1) |
|
} |
|
}, |
|
// 已选试题全选回调 |
|
checkedAllCheckChange (val) { |
|
this.checked.map(e => e.check = val) |
|
}, |
|
// 批量移除已选试题 |
|
async batchDelChecked (val) { |
|
try { |
|
const checked = this.checked.filter(e => e.check) |
|
if (checked.length) { |
|
await this.$confirm(`确认要删除吗？`, '提示', { |
|
confirmButtonText: '确定', |
|
cancelButtonText: '取消', |
|
type: 'warning', |
|
closeOnClickModal: false, |
|
}) |
|
checked.map(e => { |
|
const cur = this.ques.find(n => n.questionId === e.questionId) |
|
if (cur) { |
|
cur.check = false |
|
} |
|
}) |
|
this.quesAllCheck = false |
|
this.checkedAllCheck = false |
|
this.checked = this.checked.filter(e => !e.check) |
|
} else { |
|
Util.warningMsg('请选择数据') |
|
} |
|
} catch (e) { } |
|
}, |
|
// 已选试题单个删除 |
|
async delChecked (item) { |
|
try { |
|
// await this.$confirm(`确认要删除吗？`, '提示', { |
|
// confirmButtonText: '确定', |
|
// cancelButtonText: '取消', |
|
// type: 'warning', |
|
// closeOnClickModal: false, |
|
// }) |
|
const cur = this.ques.find(e => e.questionId === item.questionId) |
|
if (cur) cur.check = false |
|
this.checked.splice(this.checked.findIndex(e => e.questionId === item.questionId), 1) |
|
} catch (e) { } |
|
}, |
|
// 新增试题 |
|
toAddQues () { |
|
|
|
}, |
|
// 修改目标 |
|
toEditQues () { |
|
|
|
}, |
|
// 提交 |
|
async submit () { |
|
if (this.submiting) return false |
|
const checked = _.cloneDeep(this.checked) |
|
if (!checked.length) return Util.warningMsg('请选择试题') |
|
|
|
const { curType, curQuesIndex } = this.$parent |
|
if (this.checkedLen > +curType.questionNum) return Util.warningMsg(`目标题数为${curType.questionNum}，已选题数不得大于目标题数`) |
|
|
|
try { |
|
checked.map((e, i) => { |
|
this.$set(e, 'check', false) |
|
this.$set(e, 'sort', i + 1) |
|
this.$set(e, 'score', '') |
|
this.$set(e, 'questionVersionId', e.questionId) |
|
}) |
|
// debugger |
|
typeof curQuesIndex === 'number' ? curType.examQuestions.splice(curQuesIndex + 1, 0, ...checked) : curType.examQuestions.push(...checked) |
|
this.quesVisible = false |
|
this.submiting = false |
|
} catch (e) { |
|
this.submiting = false |
|
} |
|
}, |
|
// 弹框关闭回调 |
|
closeDia () { |
|
this.$emit('update:visible', false) |
|
} |
|
} |
|
}; |
|
</script> |
|
|
|
<style lang="scss" scoped> |
|
.wrap { |
|
display: flex; |
|
margin-bottom: 10px; |
|
border: 1px solid #eee; |
|
|
|
.item { |
|
width: 25%; |
|
max-height: calc(100vh - 190px); |
|
padding: 15px; |
|
border-right: 1px solid #eee; |
|
overflow: auto; |
|
|
|
&:last-child { |
|
border-right: 0; |
|
} |
|
} |
|
|
|
.total { |
|
font-size: 16px; |
|
color: #333; |
|
} |
|
|
|
.ques { |
|
margin-top: 10px; |
|
|
|
.line { |
|
display: flex; |
|
align-items: center; |
|
margin: 5px 0; |
|
} |
|
|
|
.serial { |
|
width: 32px; |
|
margin: 0 12px; |
|
text-align: center; |
|
} |
|
|
|
.check-left { |
|
display: inline-flex; |
|
align-items: center; |
|
} |
|
|
|
.action-icon { |
|
font-size: 14px; |
|
} |
|
} |
|
} |
|
|
|
.link { |
|
color: $main-color; |
|
cursor: pointer; |
|
} |
|
</style> |