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