parent
9356e4debe
commit
9ea6496254
8 changed files with 1413 additions and 125 deletions
|
After Width: | Height: | Size: 6.7 KiB |
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,303 @@ |
||||
<template> |
||||
<el-drawer title="添加系统资源" :visible.sync="sourceVisible" size="1200px" :close-on-click-modal="false" |
||||
custom-class="source-dia" @closed="closeDia"> |
||||
<div class="overflow"> |
||||
<div class="left"> |
||||
<el-input style="width: 300px" placeholder="请输入资源名称" prefix-icon="el-icon-search" v-model="keyword" |
||||
clearable></el-input> |
||||
<div class="tabs mgb20"> |
||||
<a class="item" v-for="(item, i) in tabs" :key="i" :class="{ active: i == active }" @click="tabChange(i)">{{ |
||||
item |
||||
}}</a> |
||||
</div> |
||||
|
||||
<div class="course"> |
||||
<div class="item"> |
||||
<div class="line"> |
||||
<i class="el-icon-caret-right arrow"></i> |
||||
<el-checkbox class="check" v-model="checked"></el-checkbox> |
||||
<img class="cover" src="" alt=""> |
||||
<span class="course-name"></span> |
||||
</div> |
||||
<div class="chapters"> |
||||
<div class="line"> |
||||
<i class="el-icon-caret-right arrow"></i> |
||||
<el-checkbox class="check" v-model="checked"></el-checkbox> |
||||
<span class="chapter-name"></span> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div class="right"> |
||||
<template v-if="checked.length"> |
||||
<div class="flex-between"> |
||||
<p class="total">已选资源（共{{ checked.length }}个）</p> |
||||
<el-button type="text" @click="batchDelChecked">批量移除</el-button> |
||||
</div> |
||||
|
||||
<el-input placeholder="请输入资源名称" prefix-icon="el-icon-search" v-model="keyword" clearable></el-input> |
||||
|
||||
<div :class="['lines']"> |
||||
<template v-for="(item, i) in checked"> |
||||
<div v-if="item.stemText.includes(checkedKeyword) || item.knowledgePointName.includes(checkedKeyword)" |
||||
:key="i" class="line"> |
||||
<div class="check-left"> |
||||
<el-checkbox v-model="item.check"></el-checkbox> |
||||
<span class="serial">{{ i + 1 }}</span> |
||||
<el-tooltip effect="dark" :content="item.stemText" placement="top-start"> |
||||
<p class="checked-name ellipsis">{{ item.stemText }}</p> |
||||
</el-tooltip> |
||||
</div> |
||||
<i class="el-icon-delete action-icon" @click="delChecked(item)"></i> |
||||
</div> |
||||
</template> |
||||
</div> |
||||
</template> |
||||
<div v-else class="empty"> |
||||
<img class="icon" src="@/assets/img/empty.svg" alt=""> |
||||
<p>暂无数据</p> |
||||
</div> |
||||
|
||||
</div> |
||||
</div> |
||||
|
||||
<div class="btns"> |
||||
<el-button @click="sourceVisible = false">取消</el-button> |
||||
<el-button type="primary" :loading="submiting" @click="submit">确定</el-button> |
||||
</div> |
||||
</el-drawer> |
||||
</template> |
||||
<script> |
||||
import Setting from '@/setting' |
||||
import Util from '@/libs/util' |
||||
export default { |
||||
props: ['visible'], |
||||
data () { |
||||
return { |
||||
sourceVisible: false, |
||||
active: 'tab1', |
||||
tabs: { |
||||
tab1: '教学课程', |
||||
tab2: '精品课程', |
||||
tab3: '文件素材', |
||||
}, |
||||
keyword: '', |
||||
searchTimer: null, |
||||
|
||||
course: [], |
||||
page: 1, |
||||
pageSize: 10, |
||||
total: 0, |
||||
|
||||
checked: [], |
||||
submiting: false, |
||||
loaded: 0, |
||||
}; |
||||
}, |
||||
watch: { |
||||
'keyword': function (val) { |
||||
clearTimeout(this.searchTimer) |
||||
this.searchTimer = setTimeout(this.initQuesBank, 500) |
||||
}, |
||||
visible () { |
||||
this.sourceVisible = this.visible |
||||
this.visible && this.init() |
||||
} |
||||
}, |
||||
mounted () { |
||||
|
||||
}, |
||||
methods: { |
||||
// 初始化 |
||||
init () { |
||||
this.getCourse() |
||||
}, |
||||
// 课程列表 |
||||
async getCourse () { |
||||
const sid = this.$store.state.dataPer.find(e => e.permissionName === '课程管理') |
||||
const { page } = await this.$post(this.api.curriculumList, { |
||||
pageNum: this.page, |
||||
pageSize: this.pageSize, |
||||
supplierId: sid ? sid.supplierId : '' |
||||
}) |
||||
this.course = page.records |
||||
this.total = page.total |
||||
}, |
||||
initData () { |
||||
this.page = 1; |
||||
this.getData(); |
||||
}, |
||||
tabChange (index) { |
||||
this.active = index |
||||
}, |
||||
|
||||
// 批量移除 |
||||
async batchDelChecked (val) { |
||||
try { |
||||
const checked = this.checked.filter(e => e.check) |
||||
if (checked.length) { |
||||
checked.map(e => { |
||||
const cur = this.ques.find(n => n.questionVersionId === e.questionVersionId) |
||||
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 { |
||||
const cur = this.ques.find(e => e.questionVersionId === item.questionVersionId) |
||||
if (cur) cur.check = false |
||||
this.checked.splice(this.checked.findIndex(e => e.questionVersionId === item.questionVersionId), 1) |
||||
} catch (e) { } |
||||
}, |
||||
// 提交 |
||||
async submit () { |
||||
|
||||
try { |
||||
const res = await this.$post(this.api.selectQuestionsByTypeAndDifficulty, list) |
||||
|
||||
let invalid = 0 |
||||
let hasQues = 0 |
||||
list.map((e, i) => { |
||||
if (+e.count !== res.list[i].questions.length) invalid = 1 |
||||
if (e.examQuestions.length) hasQues = 1 |
||||
e.score = 0 |
||||
}) |
||||
|
||||
this.sourceVisible = false |
||||
this.$parent.calcDifficult() |
||||
this.submiting = false |
||||
} catch (e) { |
||||
this.submiting = false |
||||
} |
||||
}, |
||||
// 弹框关闭回调 |
||||
closeDia () { |
||||
this.$emit('update:visible', false) |
||||
} |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
/deep/.source-dia { |
||||
.el-drawer__header { |
||||
padding-bottom: 20px; |
||||
margin-bottom: 0; |
||||
border-bottom: 1px solid #eee; |
||||
} |
||||
|
||||
.overflow { |
||||
display: flex; |
||||
} |
||||
|
||||
.btns { |
||||
position: absolute; |
||||
bottom: 0; |
||||
left: 0; |
||||
width: 100%; |
||||
padding: 14px 0; |
||||
text-align: center; |
||||
background-color: #fff; |
||||
box-shadow: 4px -2px 6px 0px rgba(198, 198, 198, 0.3500); |
||||
} |
||||
|
||||
|
||||
.empty { |
||||
display: flex; |
||||
flex-direction: column; |
||||
justify-content: center; |
||||
align-items: center; |
||||
height: 100%; |
||||
font-size: 14px; |
||||
text-align: center; |
||||
color: #a3a3a3; |
||||
} |
||||
|
||||
.left { |
||||
width: 700px; |
||||
height: calc(100vh - 125px); |
||||
padding: 0 20px; |
||||
overflow: auto; |
||||
padding: 15px; |
||||
margin-right: 20px; |
||||
border-right: 1px solid #eee; |
||||
box-sizing: border-box; |
||||
|
||||
.course { |
||||
.item { |
||||
padding: 10px; |
||||
margin-bottom: 10px; |
||||
background-color: #f9f9f9; |
||||
} |
||||
} |
||||
|
||||
|
||||
|
||||
.line { |
||||
display: flex; |
||||
align-items: center; |
||||
} |
||||
|
||||
.arrow { |
||||
font-size: 16px; |
||||
color: #333; |
||||
cursor: pointer; |
||||
} |
||||
|
||||
.check { |
||||
margin: 0 10px; |
||||
} |
||||
|
||||
.cover { |
||||
width: 100px; |
||||
max-height: 80px; |
||||
} |
||||
|
||||
.course-name { |
||||
font-size: 16px; |
||||
color: #333; |
||||
} |
||||
|
||||
.chapter-name { |
||||
font-size: 14px; |
||||
color: #ccc; |
||||
} |
||||
} |
||||
|
||||
.right { |
||||
flex: 1; |
||||
|
||||
.line { |
||||
display: flex; |
||||
padding: 5px 0; |
||||
color: #333; |
||||
} |
||||
|
||||
.serial { |
||||
width: 32px; |
||||
margin: 0 12px; |
||||
text-align: center; |
||||
white-space: nowrap; |
||||
} |
||||
|
||||
.checked-name { |
||||
width: calc(100% - 210px); |
||||
margin-right: 20px; |
||||
} |
||||
|
||||
.action-icon { |
||||
font-size: 14px; |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue