huoran
/
FE_exam
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

选题

Browse Source
master
yujialong 3 months ago
parent f858f467b2
commit 2a049f380e
4 changed files with 372 additions and 166 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 1
      src/assets/images/empty.svg
  2. 419
      src/pages/testPaper/detail/auto.vue
  3. 113
      src/pages/testPaper/detail/manual.vue
  4. 5
      src/styles/common.scss

1
src/assets/images/empty.svg
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 6.7 KiB

419
src/pages/testPaper/detail/auto.vue
Unescape View File

@ -58,23 +58,79 @@
<!-- 题库 --> <!-- 题库 -->
<div class="item"> <div class="item">
<p class="total m-b-10">题库</p> <p class="total m-b-10">题库</p>
<el-input class="m-b-10" placeholder="请输入题库分类/题库名称" prefix-icon="el-icon-search" v-model="quesBankKeyword" <ul class="filter">
clearable /> <li class="m-b-10">
<el-tree :key="key" node-key="id" default-expand-all highlight-current ref="quesBank" :data="quesBanks" <label>题库分类</label>
:props="{ label: 'name' }" @node-click="getKnowledge" @check-change="quesBankCheck"></el-tree> <el-cascader style="width: 240px;" placeholder="请选择题库分类" v-model="quesBankTypeVal"
:options="quesBankTypes" :props="{ value: 'id', label: 'name', checkStrictly: true }" clearable
@change="getQuesBank"></el-cascader>
</li>
<li>
<el-input placeholder="请输入题库名称" prefix-icon="el-icon-search" v-model="quesBankKeyword" clearable />
</li>
</ul>
<template v-if="quesBanks.length">
<div class="line">
<span class="serial first">序号</span>
<span>题库名称</span>
</div>
<div class="lines">
<div v-for="(item, i) in quesBanks" :key="i"
:class="['line able-check', { active: curQuesBank.id === item.id }]" @click="questionBankClick(item)">
<span class="serial first">{{ i + 1 }}</span>
<p class="stem" :title="item.questionBankName">{{ item.questionBankName }}</p>
</div>
</div>
<div class="pagination">
<el-pagination background @current-change="currentChangeQuesBank" :current-page="pageQuesBank"
layout="total, prev, pager, next" :total="totalQuesBank"></el-pagination>
</div>
</template>
<div v-else class="empty">
<img class="icon" src="@/assets/images/empty.svg" alt="">
<p>暂无数据</p>
</div>
</div> </div>
<!-- 知识点 --> <!-- 知识点 -->
<div class="item"> <div class="item">
<p class="total m-b-10">知识点框架</p> <ul class="filter">
<el-input class="m-b-10" placeholder="请输入知识点分类/知识点名称" prefix-icon="el-icon-search" <li class="m-b-10">
v-model="knowledgeKeyword" clearable /> <label>知识点框架</label>
<el-tree :data="knowledges" default-expand-all ref="knowledge" node-key="id" highlight-current <el-cascader style="width: 240px;" placeholder="请选择知识点分类" v-model="knowledgeTypeVal"
:expand-on-click-node="false" show-checkbox @check-change="knowledgeCheck" :props="{ label: 'name' }"> :options="knowledgeTypes" :props="{ value: 'id', label: 'name', checkStrictly: true }" clearable
<span class="custom-tree-node" slot-scope="{ node, data }"> @change="getKnowledge"></el-cascader>
<img v-if="data.type" class="m-r-5" src="@/assets/images/knowledge.svg" alt=""> </li>
<span class="org-name">{{ data.name }}</span> <li>
</span> <el-input placeholder="请输入知识点名称" prefix-icon="el-icon-search" v-model="knowledgeKeyword" clearable />
</el-tree> </li>
</ul>
<template v-if="knowledges.length">
<div class="line">
<el-checkbox v-model="knowledgeCheck" @change="knowledgeAllCheckChange"></el-checkbox>
<span class="serial">序号</span>
<span>知识点名称</span>
</div>
<div v-for="(item, i) in knowledges" :key="i" class="line">
<el-checkbox v-model="item.check" :disabled="item.disabled"
@change="val => knowledgeChange(val, item)"></el-checkbox>
<span class="serial">{{ i + 1 }}</span>
<p class="stem" :title="item.name">{{ item.name }}</p>
</div>
<div class="pagination">
<el-pagination background @current-change="currentChangeKn" :current-page="pageKn"
layout="total, prev, pager, next" :total="totalKn"></el-pagination>
</div>
</template>
<div v-else class="empty">
<img class="icon" src="@/assets/images/empty.svg" alt="">
<p>暂无数据</p>
</div>
</div> </div>
<!-- 已选知识点 --> <!-- 已选知识点 -->
<div class="item"> <div class="item">
@ -86,16 +142,14 @@
</p> </p>
</div> </div>
<div v-for="(item, i) in checked" :key="i" class="line j-between"> <div v-for="(item, i) in checked" :key="i" class="j-between m-b-10">
<div class="flex a-center"> <div class="flex a-center">
题库：{{ item.quesBank.name }} 题库：{{ item.quesBank.questionBankName }}
<i class="el-icon-delete action-icon m-l-10" @click="delQuesBank(i)"></i> <i class="el-icon-delete action-icon m-l-10" @click="delQuesBank(i)"></i>
</div> </div>
<div class="knowledges"> <div class="knowledges">
<el-tag v-for="(tag, j) in item.knowledges" :key="tag.name" class="m-r-10" closable <el-tag v-for="(tag, j) in item.knowledges" :key="tag.name" class="m-r-8 m-b-8" closable
@close="delKnowledge(i, j, item)"> @close="delKnowledge(i, j, item, tag)">{{ tag.name }}</el-tag>
{{ tag.name }}
</el-tag>
</div> </div>
</div> </div>
</div> </div>
@ -133,21 +187,34 @@ export default {
questionTypes: QuesConst.questionTypes, questionTypes: QuesConst.questionTypes,
quesVisible: false, quesVisible: false,
difficult: '', difficult: '',
searchTimer: null,
curQuesBank: {},
quesBankTypeVal: [],
quesBankTypes: [],
quesBankKeyword: '', quesBankKeyword: '',
knowledgeKeyword: '',
searchTimer: null, quesAllCheck: false,
key: 1,
quesBanks: [], quesBanks: [],
pageQuesBank: 1,
pageSizeQuesBank: 10,
totalQuesBank: 0,
knowledgeKeyword: '',
knowledgeTypeVal: [],
knowledgeTypes: [],
knowledgeCheck: false,
knowledges: [], knowledges: [],
checked: [], pageKn: 1,
pageSizeKn: 10,
totalKn: 0,
checked: [],
list: [], list: [],
years: ['暂无年份', '2024', '2023', '2022', '2021', '2020', '2019', '2018', '2017', '2016', '更早'], years: ['暂无年份', '2024', '2023', '2022', '2021', '2020', '2019', '2018', '2017', '2016', '更早'],
yearAll: true, yearAll: true,
yearCheck: [], yearCheck: [],
submiting: false, submiting: false,
diaTop: 0,
}; };
}, },
computed: { computed: {
@ -174,73 +241,124 @@ export default {
} }
}, },
mounted () { mounted () {
console.log(5555, window.innerHeight)
const height = (window.innerHeight - 600) / 2
this.diaTop = (height > 0 ? height : 0) + 'px'
}, },
methods: { methods: {
// 初始化 // 初始化
init () { init () {
this.yearCheck = this.years this.yearCheck = this.years
this.handleQuesList() this.handleQuesList()
this.getQuesBankType()
this.getQuesBank() this.getQuesBank()
this.difficult = this.$parent.form.difficult this.difficult = this.$parent.form.difficult
this.difficult && this.difficultChange(this.difficult) this.difficult && this.difficultChange(this.difficult)
}, },
// 获取题库分类
async getQuesBankType () {
try {
const { data } = await this.$post(this.api.getAllQuestionBankCategories, {
createSource: 1,
status: 1,
})
this.handleList(data)
this.quesBankTypes = data
} catch (e) { }
},
// 获取题库 // 获取题库
async getQuesBank () { async getQuesBank () {
try { try {
const { list } = await this.$post(this.api.questionBankStructureLevel, { const type = this.quesBankTypeVal
keyword: this.quesBankKeyword, const res = await this.$post(this.api.questionBankList, {
createSource: 1,
status: 1, status: 1,
pageNum: this.pageQuesBank,
pageSize: this.pageSizeQuesBank,
questionCategoryId: type.length ? type[type.length - 1] : '',
name: this.quesBankKeyword
})
this.quesBanks = res.message.records
this.totalQuesBank = res.message.total
} catch (e) { }
},
// 切换页码
currentChangeQuesBank (val) {
this.pageQuesBank = val
this.getQuesBank()
},
// 题目多选回调
questionBankClick (item) {
this.curQuesBank = item
this.knowledgeCheck = false
this.getKnowledgeType()
this.getKnowledge()
},
// 处理树形
handleList (list) {
list.map(e => {
if (e.children && e.children.length) {
this.handleList(e.children)
} else {
delete e.children
}
})
},
// 获取知识点分类
async getKnowledgeType () {
try {
const { data } = await this.$post(this.api.classificationTreeStructure, {
createSource: 1,
questionBankId: this.curQuesBank.id,
}) })
this.quesBanks = list this.handleList(data)
this.knowledgeTypes = data
} catch (e) { } } catch (e) { }
}, },
// 获取知识点 // 获取知识点
async getKnowledge () { async getKnowledge () {
try { try {
const id = this.$refs.quesBank.getCurrentKey() const type = this.knowledgeTypeVal
if (id) { const res = await this.$post(this.api.knowledgeHierarchyList, {
const { data } = await this.$post(this.api.TreeStructure, { pageNum: this.pageKn,
createSource: 1, pageSize: this.pageSizeKn,
questionBankId: id, questionBankId: this.curQuesBank.id,
keyword: this.knowledgeKeyword, knowledgePointCategoryId: type.length ? type[type.length - 1] : '',
}) name: this.knowledgeKeyword,
this.knowledges = data })
} this.knowledges = res.message.records
this.totalKn = res.message.total
} catch (e) { } } catch (e) { }
}, },
// 题库勾选回调 // 切换页码
quesBankCheck (data, checked) { currentChangeKn (val) {
// debugger this.pageKn = val
if (checked) { this.getKnowledge()
// this.$refs.quesBank.setCurrentKey(data.id) },
this.getKnowledge() // 知识点全选回调
} knowledgeAllCheckChange (val) {
this.$refs.knowledge.setCheckedNodes(checked ? this.knowledges : []) this.knowledges.map(e => {
e.check = val
this.knowledgeChange(val, e)
})
}, },
// 知识点勾选回调 // 知识点勾选回调
knowledgeCheck (data, checked) { knowledgeChange (checked, data) {
// 选中的是知识点才需要显示在最右边 const checkQues = this.curQuesBank
if (data.type) { const index = this.checked.findIndex(e => e.quesBank.id === checkQues.id)
const checkQues = this.$refs.quesBank.getCurrentNode() // 已选中的题库数组里有该题库，则往该题库的知识点数组里
const ques = this.checked.find(e => e.quesBank.id === checkQues.id) if (index !== -1) {
// 已选中的题库数组里有该题库，则往该题库的知识点数组里 const ques = this.checked[index]
if (ques) { const i = ques.knowledges.findIndex(e => e.id === data.id)
const i = ques.knowledges.findIndex(e => e.id === data.id) if (checked && i === -1) {
if (checked && i === -1) { ques.knowledges.push(data)
ques.knowledges.push(data) } else if (!checked && i >= 0) {
} else if (!checked && i >= 0) { ques.knowledges.splice(i, 1)
ques.knowledges.splice(i, 1)
}
} else {
this.checked.push({
quesBank: checkQues,
knowledges: [data]
})
} }
ques.knowledges.length || this.checked.splice(index, 1)
} else {
this.checked.push({
quesBank: checkQues,
knowledges: [data]
})
} }
}, },
// 处理大纲列表 // 处理大纲列表
@ -257,25 +375,36 @@ export default {
type: 'warning', type: 'warning',
closeOnClickModal: false, closeOnClickModal: false,
}) })
this.knowledges.map(e => e.check = false)
this.checked = [] this.checked = []
// this.$nextTick(() => { this.knowledgeCheck = false
// this.$refs.knowledge.setCheckedKeys([])
// })
} catch (e) { } } catch (e) { }
}, },
// 删除题库 // 删除题库
delQuesBank (i) { async delQuesBank (i) {
const k = this.$refs.knowledge try {
this.checked[i].knowledges.map(e => { await this.$confirm(`确认要移除吗？`, '提示', {
k.setChecked(e.id, false, true) confirmButtonText: '确定',
}) cancelButtonText: '取消',
// this.checked.splice(i, 1) type: 'warning',
closeOnClickModal: false,
})
const k = this.knowledges
this.checked[i].knowledges.map(e => {
const cur = k.findIndex(n => n.id === e.id)
if (cur !== -1) k[cur].check = false
})
this.checked.splice(i, 1)
this.knowledgeCheck = false
} catch (e) { }
}, },
// 删除知识点 // 删除知识点
delKnowledge (i, j, item) { delKnowledge (i, j, item, k) {
this.$refs.knowledge.setChecked(item.knowledges[j].id, false) const cur = this.knowledges.findIndex(e => e.id === k.id)
if (cur !== -1) this.knowledges[cur].check = false
item.knowledges.splice(j, 1) item.knowledges.splice(j, 1)
item.knowledges.length || this.checked.splice(i, 1) // 知识点清空了则把该题库删除 item.knowledges.length || this.checked.splice(i, 1) // 知识点清空了则把该题库删除
this.knowledgeCheck = false
}, },
// 获取模板列表 // 获取模板列表
async getList () { async getList () {
@ -428,48 +557,114 @@ export default {
.el-drawer__header { .el-drawer__header {
margin-bottom: 20px; margin-bottom: 20px;
} }
}
.overflow { .overflow {
height: calc(100vh - 147px); height: calc(100vh - 147px);
padding: 0 20px; padding: 0 20px;
overflow: auto; overflow: auto;
} }
.wrap {
display: flex;
margin-top: 20px;
border: 1px solid #eee;
.item { .wrap {
width: 30%; display: flex;
max-height: calc(100vh - 190px); margin-top: 20px;
padding: 15px; border: 1px solid #eee;
border-right: 1px solid #eee;
overflow: auto; .filter {
margin-bottom: 15px;
li {
display: flex;
align-items: center;
}
&:last-child { label {
width: 40%; margin-right: 10px;
border-right: 0; font-size: 14px;
color: #333;
white-space: nowrap;
}
} }
}
.total { .item {
font-size: 16px; width: 30%;
color: #333; height: calc(100vh - 190px);
} padding: 15px;
border-right: 1px solid #eee;
overflow: auto;
.clear { &:last-child {
display: inline-flex; width: 40%;
align-items: center; border-right: 0;
font-size: 14px; }
color: #8b8b8b; }
cursor: pointer;
}
.knowledges { .total {
padding-left: 44px; font-size: 16px;
margin-top: 10px; color: #333;
}
.clear {
display: inline-flex;
align-items: center;
font-size: 14px;
color: #8b8b8b;
cursor: pointer;
}
.knowledges {
padding-left: 44px;
margin-top: 10px;
}
.line {
display: flex;
padding: 5px 0;
color: #333;
&.able-check {
cursor: pointer;
&:hover {
background-color: #f5f5f5;
}
&.active {
background-color: #e5e5e5;
}
}
}
.serial {
width: 32px;
margin: 0 12px;
text-align: center;
white-space: nowrap;
&.first {
margin-left: 0;
}
}
.stem {
max-width: calc(100% - 71px);
@include ellipsis;
}
.checked-stem {
max-width: 165px;
@include ellipsis;
}
.check-left {
display: inline-flex;
align-items: center;
}
.action-icon {
font-size: 14px;
}
} }
} }
</style> </style>

113
src/pages/testPaper/detail/manual.vue
Unescape View File

@ -1,7 +1,7 @@
<template> <template>
<div> <div>
<el-dialog :title="diaTitle" :visible.sync="selectQuesVisible" width="1200px" :close-on-click-modal="false" <el-drawer :title="diaTitle" :visible.sync="selectQuesVisible" size="1200px" :close-on-click-modal="false"
@closed="closeDia"> custom-class="ques-dia" @closed="closeDia">
<div class="wrap"> <div class="wrap">
<!-- 题库 --> <!-- 题库 -->
<div class="item"> <div class="item">
@ -77,19 +77,18 @@
</div> </div>
</div> </div>
</div> </div>
<div class="flex j-between"> <div class="flex j-between p-l-10 p-r-10">
<p>未找到试题，<a class="link" @click="toAddQues">去新增</a></p> <p>未找到试题，<a class="link" @click="toAddQues">去新增</a></p>
<p>已选题数/目标题数：{{ checkedLen }}/{{ $parent.curType.questionNum }}&emsp;&emsp; <p>已选题数/目标题数：{{ checkedLen }}/{{ $parent.curType.questionNum }}&emsp;&emsp;
<!-- <a class="link" @click="toEditQues">修改目标</a> --> <!-- <a class="link" @click="toEditQues">修改目标</a> -->
</p> </p>
</div> </div>
<div class="btns">
<span slot="footer" class="dialog-footer">
<el-button @click="selectQuesVisible = false">取消</el-button> <el-button @click="selectQuesVisible = false">取消</el-button>
<el-button type="primary" :loading="submiting" @click="submit">确定</el-button> <el-button type="primary" :loading="submiting" @click="submit">确定</el-button>
</span> </div>
</el-dialog> </el-drawer>
</div> </div>
</template> </template>
<script> <script>
@ -368,66 +367,72 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.wrap { /deep/.ques-dia {
display: flex; .el-drawer__header {
margin-bottom: 10px; margin-bottom: 20px;
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 { .wrap {
font-size: 16px; display: flex;
color: #333; margin-bottom: 10px;
} border: 1px solid #eee;
.ques { .item {
margin-top: 10px; width: 25%;
max-height: calc(100vh - 190px);
padding: 15px;
border-right: 1px solid #eee;
overflow: auto;
.line { &:last-child {
display: flex; border-right: 0;
margin: 8px 0; }
} }
.serial { .total {
width: 32px; font-size: 16px;
margin: 0 12px; color: #333;
text-align: center;
white-space: nowrap;
} }
.stem { .ques {
max-width: calc(100% - 71px); margin-top: 10px;
@include ellipsis;
}
.checked-stem { .line {
max-width: 165px; display: flex;
@include ellipsis; margin: 8px 0;
} }
.check-left { .serial {
display: inline-flex; width: 32px;
align-items: center; margin: 0 12px;
} text-align: center;
white-space: nowrap;
}
.stem {
max-width: calc(100% - 71px);
@include ellipsis;
}
.checked-stem {
max-width: 165px;
@include ellipsis;
}
.action-icon { .check-left {
font-size: 14px; display: inline-flex;
align-items: center;
}
.action-icon {
font-size: 14px;
}
} }
} }
}
.link { .link {
color: $main-color; color: $main-color;
cursor: pointer; cursor: pointer;
}
} }
</style> </style>

5
src/styles/common.scss
Unescape View File

@ -432,4 +432,9 @@
white-space: normal; white-space: normal;
vertical-align: top; vertical-align: top;
} }
}
.empty {
font-size: 14px;
text-align: center;
color: #a3a3a3;
} }
Write Preview
Loading…
Cancel
Save