master
yujialong 3 months ago
parent f858f467b2
commit 2a049f380e
  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

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 6.7 KiB

@ -58,23 +58,79 @@
<!-- 题库 -->
<div class="item">
<p class="total m-b-10">题库</p>
<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 highlight-current ref="quesBank" :data="quesBanks"
:props="{ label: 'name' }" @node-click="getKnowledge" @check-change="quesBankCheck"></el-tree>
<ul class="filter">
<li class="m-b-10">
<label>题库分类</label>
<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 class="item">
<p class="total m-b-10">知识点框架</p>
<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 @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>
<ul class="filter">
<li class="m-b-10">
<label>知识点框架</label>
<el-cascader style="width: 240px;" placeholder="请选择知识点分类" v-model="knowledgeTypeVal"
:options="knowledgeTypes" :props="{ value: 'id', label: 'name', checkStrictly: true }" clearable
@change="getKnowledge"></el-cascader>
</li>
<li>
<el-input placeholder="请输入知识点名称" prefix-icon="el-icon-search" v-model="knowledgeKeyword" clearable />
</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 class="item">
@ -86,16 +142,14 @@
</p>
</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">
题库{{ item.quesBank.name }}
题库{{ item.quesBank.questionBankName }}
<i class="el-icon-delete action-icon m-l-10" @click="delQuesBank(i)"></i>
</div>
<div class="knowledges">
<el-tag v-for="(tag, j) in item.knowledges" :key="tag.name" class="m-r-10" closable
@close="delKnowledge(i, j, item)">
{{ tag.name }}
</el-tag>
<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, tag)">{{ tag.name }}</el-tag>
</div>
</div>
</div>
@ -133,21 +187,34 @@ export default {
questionTypes: QuesConst.questionTypes,
quesVisible: false,
difficult: '',
searchTimer: null,
curQuesBank: {},
quesBankTypeVal: [],
quesBankTypes: [],
quesBankKeyword: '',
knowledgeKeyword: '',
searchTimer: null,
key: 1,
quesAllCheck: false,
quesBanks: [],
pageQuesBank: 1,
pageSizeQuesBank: 10,
totalQuesBank: 0,
knowledgeKeyword: '',
knowledgeTypeVal: [],
knowledgeTypes: [],
knowledgeCheck: false,
knowledges: [],
checked: [],
pageKn: 1,
pageSizeKn: 10,
totalKn: 0,
checked: [],
list: [],
years: ['暂无年份', '2024', '2023', '2022', '2021', '2020', '2019', '2018', '2017', '2016', '更早'],
yearAll: true,
yearCheck: [],
submiting: false,
diaTop: 0,
};
},
computed: {
@ -174,73 +241,124 @@ export default {
}
},
mounted () {
console.log(5555, window.innerHeight)
const height = (window.innerHeight - 600) / 2
this.diaTop = (height > 0 ? height : 0) + 'px'
},
methods: {
//
init () {
this.yearCheck = this.years
this.handleQuesList()
this.getQuesBankType()
this.getQuesBank()
this.difficult = this.$parent.form.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 () {
try {
const { list } = await this.$post(this.api.questionBankStructureLevel, {
keyword: this.quesBankKeyword,
createSource: 1,
const type = this.quesBankTypeVal
const res = await this.$post(this.api.questionBankList, {
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) { }
},
//
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
}
const type = this.knowledgeTypeVal
const res = await this.$post(this.api.knowledgeHierarchyList, {
pageNum: this.pageKn,
pageSize: this.pageSizeKn,
questionBankId: this.curQuesBank.id,
knowledgePointCategoryId: type.length ? type[type.length - 1] : '',
name: this.knowledgeKeyword,
})
this.knowledges = res.message.records
this.totalKn = res.message.total
} catch (e) { }
},
//
quesBankCheck (data, checked) {
// debugger
if (checked) {
// this.$refs.quesBank.setCurrentKey(data.id)
this.getKnowledge()
}
this.$refs.knowledge.setCheckedNodes(checked ? this.knowledges : [])
//
currentChangeKn (val) {
this.pageKn = val
this.getKnowledge()
},
//
knowledgeAllCheckChange (val) {
this.knowledges.map(e => {
e.check = val
this.knowledgeChange(val, e)
})
},
//
knowledgeCheck (data, checked) {
//
if (data.type) {
const checkQues = this.$refs.quesBank.getCurrentNode()
const ques = this.checked.find(e => e.quesBank.id === checkQues.id)
//
if (ques) {
const i = ques.knowledges.findIndex(e => e.id === data.id)
if (checked && i === -1) {
ques.knowledges.push(data)
} else if (!checked && i >= 0) {
ques.knowledges.splice(i, 1)
}
} else {
this.checked.push({
quesBank: checkQues,
knowledges: [data]
})
knowledgeChange (checked, data) {
const checkQues = this.curQuesBank
const index = this.checked.findIndex(e => e.quesBank.id === checkQues.id)
//
if (index !== -1) {
const ques = this.checked[index]
const i = ques.knowledges.findIndex(e => e.id === data.id)
if (checked && i === -1) {
ques.knowledges.push(data)
} else if (!checked && i >= 0) {
ques.knowledges.splice(i, 1)
}
ques.knowledges.length || this.checked.splice(index, 1)
} else {
this.checked.push({
quesBank: checkQues,
knowledges: [data]
})
}
},
//
@ -257,25 +375,36 @@ export default {
type: 'warning',
closeOnClickModal: false,
})
this.knowledges.map(e => e.check = false)
this.checked = []
// this.$nextTick(() => {
// this.$refs.knowledge.setCheckedKeys([])
// })
this.knowledgeCheck = false
} catch (e) { }
},
//
delQuesBank (i) {
const k = this.$refs.knowledge
this.checked[i].knowledges.map(e => {
k.setChecked(e.id, false, true)
})
// this.checked.splice(i, 1)
async delQuesBank (i) {
try {
await this.$confirm(`确认要移除吗?`, '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
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) {
this.$refs.knowledge.setChecked(item.knowledges[j].id, false)
delKnowledge (i, j, item, k) {
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.length || this.checked.splice(i, 1) //
this.knowledgeCheck = false
},
//
async getList () {
@ -428,48 +557,114 @@ export default {
.el-drawer__header {
margin-bottom: 20px;
}
}
.overflow {
height: calc(100vh - 147px);
padding: 0 20px;
overflow: auto;
}
.overflow {
height: calc(100vh - 147px);
padding: 0 20px;
overflow: auto;
}
.wrap {
display: flex;
margin-top: 20px;
border: 1px solid #eee;
.item {
width: 30%;
max-height: calc(100vh - 190px);
padding: 15px;
border-right: 1px solid #eee;
overflow: auto;
.wrap {
display: flex;
margin-top: 20px;
border: 1px solid #eee;
.filter {
margin-bottom: 15px;
li {
display: flex;
align-items: center;
}
&:last-child {
width: 40%;
border-right: 0;
label {
margin-right: 10px;
font-size: 14px;
color: #333;
white-space: nowrap;
}
}
}
.total {
font-size: 16px;
color: #333;
}
.item {
width: 30%;
height: calc(100vh - 190px);
padding: 15px;
border-right: 1px solid #eee;
overflow: auto;
.clear {
display: inline-flex;
align-items: center;
font-size: 14px;
color: #8b8b8b;
cursor: pointer;
}
&:last-child {
width: 40%;
border-right: 0;
}
}
.knowledges {
padding-left: 44px;
margin-top: 10px;
.total {
font-size: 16px;
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>

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

@ -433,3 +433,8 @@
vertical-align: top;
}
}
.empty {
font-size: 14px;
text-align: center;
color: #a3a3a3;
}
Loading…
Cancel
Save