|
|
|
|
@ -3,53 +3,86 @@ |
|
|
|
|
custom-class="source-dia" @closed="closeDia"> |
|
|
|
|
<div class="overflow" v-loading="loading"> |
|
|
|
|
<div class="left"> |
|
|
|
|
<el-input style="width: 300px" placeholder="请输入资源名称" prefix-icon="el-icon-search" v-model="keyword" |
|
|
|
|
clearable></el-input> |
|
|
|
|
<div class="tabs mgb20"> |
|
|
|
|
<div class="tabs m-b-20"> |
|
|
|
|
<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 v-for="(course, i) in course" :key="i" class="item"> |
|
|
|
|
<div class="line"> |
|
|
|
|
<i :class="`el-icon-caret-right arrow ${course.shrink ? 'active' : ''}`" |
|
|
|
|
@click="course.shrink = !course.shrink"></i> |
|
|
|
|
<el-checkbox class="check" v-model="course.check" @change="checkCourse(course)"></el-checkbox> |
|
|
|
|
<img v-if="course.coverUrl" class="cover" :src="course.coverUrl" alt=""> |
|
|
|
|
<span class="course-name">{{ course.curriculumName }}</span> |
|
|
|
|
</div> |
|
|
|
|
<div v-if="course.shrink" class="chapters"> |
|
|
|
|
<!-- 章节 --> |
|
|
|
|
<div v-for="(chapter, j) in course.chapters" :key="j" class=""> |
|
|
|
|
<div class="line"> |
|
|
|
|
<i :class="`el-icon-caret-right arrow ${chapter.shrink ? 'active' : ''}`" |
|
|
|
|
@click="chapter.shrink = !chapter.shrink"></i> |
|
|
|
|
<el-checkbox class="check" v-model="chapter.check" @change="checkChapter(chapter, course)">{{ |
|
|
|
|
chapter.name |
|
|
|
|
}}</el-checkbox> |
|
|
|
|
</div> |
|
|
|
|
<template v-if="active !== 'tab3'"> |
|
|
|
|
<el-input class="m-b-10" style="width: 300px" placeholder="请输入资源名称" prefix-icon="el-icon-search" |
|
|
|
|
v-model="keyword" clearable></el-input> |
|
|
|
|
|
|
|
|
|
<div class="course"> |
|
|
|
|
<div v-for="(course, i) in course" :key="i" class="item"> |
|
|
|
|
<div class="line"> |
|
|
|
|
<i :class="`el-icon-caret-right arrow ${course.shrink ? 'active' : ''}`" |
|
|
|
|
@click="course.shrink = !course.shrink"></i> |
|
|
|
|
<el-checkbox class="check" v-model="course.check" @change="checkCourse(course)"></el-checkbox> |
|
|
|
|
<img v-if="course.coverUrl" class="cover" :src="course.coverUrl" alt=""> |
|
|
|
|
<span class="course-name">{{ course.curriculumName }}</span> |
|
|
|
|
</div> |
|
|
|
|
<div v-if="course.shrink" class="chapters"> |
|
|
|
|
<!-- 章节 --> |
|
|
|
|
<div v-for="(chapter, j) in course.chapters" :key="j" class=""> |
|
|
|
|
<div class="line"> |
|
|
|
|
<i :class="`el-icon-caret-right arrow ${chapter.shrink ? 'active' : ''}`" |
|
|
|
|
@click="chapter.shrink = !chapter.shrink"></i> |
|
|
|
|
<el-checkbox class="check" v-model="chapter.check" @change="checkChapter(chapter, course)">{{ |
|
|
|
|
chapter.name |
|
|
|
|
}}</el-checkbox> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<!-- 小节 --> |
|
|
|
|
<div v-if="chapter.shrink" class="sections"> |
|
|
|
|
<div v-for="(section, k) in chapter.subsections" :key="k" class="line"> |
|
|
|
|
<el-checkbox class="check" v-model="section.check" @change="checkSection(section, chapter)"> |
|
|
|
|
<img v-if="section.fileType === 'pptx'" src="@/assets/img/exts/ppt.png" alt=""> |
|
|
|
|
<img v-else-if="section.fileType === 'mp4'" src="@/assets/img/exts/video.png" alt=""> |
|
|
|
|
<img v-else-if="section.fileType === 'doc' || section.fileType === 'docx'" |
|
|
|
|
src="@/assets/img/exts/word.png" alt=""> |
|
|
|
|
<img v-else-if="section.fileType === 'xlsx' || section.fileType === 'xls'" |
|
|
|
|
src="@/assets/img/exts/excel.png" alt=""> |
|
|
|
|
<img v-else-if="section.fileType === 'txt'" src="@/assets/img/exts/txt.png" alt=""> |
|
|
|
|
<img v-else-if="section.fileType === 'pdf'" src="@/assets/img/exts/pdf.png" alt=""> |
|
|
|
|
<img v-else src="@/assets/img/exts/pic.png" alt=""> |
|
|
|
|
{{ section.name }}</el-checkbox> |
|
|
|
|
<!-- 小节 --> |
|
|
|
|
<div v-if="chapter.shrink" class="sections"> |
|
|
|
|
<div v-for="(section, k) in chapter.subsections" :key="k" class="line"> |
|
|
|
|
<el-checkbox class="check" v-model="section.check" @change="checkSection(section, chapter)"> |
|
|
|
|
<img v-if="section.fileType === 'pptx'" src="@/assets/img/exts/ppt.png" alt=""> |
|
|
|
|
<img v-else-if="section.fileType === 'mp4'" src="@/assets/img/exts/video.png" alt=""> |
|
|
|
|
<img v-else-if="section.fileType === 'doc' || section.fileType === 'docx'" |
|
|
|
|
src="@/assets/img/exts/word.png" alt=""> |
|
|
|
|
<img v-else-if="section.fileType === 'xlsx' || section.fileType === 'xls'" |
|
|
|
|
src="@/assets/img/exts/excel.png" alt=""> |
|
|
|
|
<img v-else-if="section.fileType === 'txt'" src="@/assets/img/exts/txt.png" alt=""> |
|
|
|
|
<img v-else-if="section.fileType === 'pdf'" src="@/assets/img/exts/pdf.png" alt=""> |
|
|
|
|
<img v-else src="@/assets/img/exts/pic.png" alt=""> |
|
|
|
|
{{ section.name }}</el-checkbox> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
<!-- 文件素材 --> |
|
|
|
|
<div v-else class="materials"> |
|
|
|
|
<div class="types"> |
|
|
|
|
<div class="flex-center m-b-10"> |
|
|
|
|
<p class="addhr_tag"></p> |
|
|
|
|
<span>资源类型</span> |
|
|
|
|
</div> |
|
|
|
|
<ul class="lines"> |
|
|
|
|
<li v-for="(item, i) in sourceType" :key="i" class="line"> |
|
|
|
|
<el-checkbox v-model="item.check" :label="item.name" @change="getCourse"></el-checkbox> |
|
|
|
|
</li> |
|
|
|
|
</ul> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
<div class="sources"> |
|
|
|
|
<div class="flex-center m-b-10"> |
|
|
|
|
<p class="addhr_tag"></p> |
|
|
|
|
<span>资源列表</span> |
|
|
|
|
</div> |
|
|
|
|
<el-input class="m-b-10" placeholder="请输入资源名称" prefix-icon="el-icon-search" v-model="keyword" |
|
|
|
|
clearable></el-input> |
|
|
|
|
<ul class="lines"> |
|
|
|
|
<el-checkbox v-if="sources.length" v-model="checkAll" label="全选" @change="checkAllChange"></el-checkbox> |
|
|
|
|
<li v-for="(item, i) in sources" :key="i" class="line"> |
|
|
|
|
<el-checkbox v-model="item.check" :label="item.resourceName" @change="sourceChange(item)"></el-checkbox> |
|
|
|
|
</li> |
|
|
|
|
</ul> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="right"> |
|
|
|
|
@ -67,7 +100,7 @@ |
|
|
|
|
|
|
|
|
|
<div class="lines"> |
|
|
|
|
<template v-for="(item, i) in checked"> |
|
|
|
|
<div v-if="item.name.includes(checkedKeyword)" :key="i" class="line"> |
|
|
|
|
<div v-if="!item.name || item.name.includes(checkedKeyword)" :key="i" class="line"> |
|
|
|
|
<div class="check-left"> |
|
|
|
|
<el-checkbox v-model="item.check"></el-checkbox> |
|
|
|
|
<span class="serial">{{ i + 1 }}</span> |
|
|
|
|
@ -84,6 +117,7 @@ |
|
|
|
|
<img class="icon" src="@/assets/img/empty.svg" alt=""> |
|
|
|
|
<p>暂无数据</p> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
@ -97,6 +131,7 @@ |
|
|
|
|
import Setting from '@/setting' |
|
|
|
|
import Util from '@/libs/util' |
|
|
|
|
import _ from 'lodash' |
|
|
|
|
import SourceConst from '@/const/source' |
|
|
|
|
export default { |
|
|
|
|
props: ['visible'], |
|
|
|
|
data () { |
|
|
|
|
@ -108,6 +143,9 @@ export default { |
|
|
|
|
tab2: '精品课程', |
|
|
|
|
tab3: '文件素材', |
|
|
|
|
}, |
|
|
|
|
sourceType: SourceConst.types, |
|
|
|
|
sources: [], |
|
|
|
|
checkAll: false, |
|
|
|
|
keyword: '', |
|
|
|
|
searchTimer: null, |
|
|
|
|
checkedKeyword: '', |
|
|
|
|
@ -138,38 +176,59 @@ export default { |
|
|
|
|
init () { |
|
|
|
|
this.getCourse() |
|
|
|
|
this.checked = [] |
|
|
|
|
this.sourceType.forEach(e => { |
|
|
|
|
e.check = false |
|
|
|
|
}) |
|
|
|
|
}, |
|
|
|
|
// 课程列表 |
|
|
|
|
async getCourse () { |
|
|
|
|
try { |
|
|
|
|
this.loading = true |
|
|
|
|
const { list } = await this.$post(`${this.api[this.active === 'tab1' ? 'curriculumTree' : 'boutiqueCurriculumTree']}?name=${this.keyword}`) |
|
|
|
|
if (list.length) { |
|
|
|
|
const all = [] |
|
|
|
|
this.checkAll = false |
|
|
|
|
if (this.active === 'tab3') { |
|
|
|
|
const { page } = await this.$post(this.api.resourceLibrary, { |
|
|
|
|
pageNum: 1, |
|
|
|
|
pageSize: 10000, |
|
|
|
|
platformId: Setting.platformId, |
|
|
|
|
type: 2, |
|
|
|
|
keyword: this.keyword, |
|
|
|
|
displayFileType: this.sourceType.filter(e => e.check).map(e => e.name), |
|
|
|
|
}) |
|
|
|
|
const list = page.records |
|
|
|
|
list.forEach(e => { |
|
|
|
|
e.shrink = false |
|
|
|
|
e.name = e.resourceName |
|
|
|
|
e.check = false |
|
|
|
|
e.chapters.forEach(n => { |
|
|
|
|
n.shrink = false |
|
|
|
|
n.check = false |
|
|
|
|
all.push(...n.subsections) |
|
|
|
|
n.subsections.forEach(m => { |
|
|
|
|
m.check = false |
|
|
|
|
}) |
|
|
|
|
this.sources = list |
|
|
|
|
} else { |
|
|
|
|
const { list } = await this.$post(`${this.api[this.active === 'tab1' ? 'curriculumTree' : 'boutiqueCurriculumTree']}?name=${this.keyword}`) |
|
|
|
|
if (list.length) { |
|
|
|
|
const all = [] |
|
|
|
|
list.forEach(e => { |
|
|
|
|
e.shrink = false |
|
|
|
|
e.check = false |
|
|
|
|
e.chapters.forEach(n => { |
|
|
|
|
n.shrink = false |
|
|
|
|
n.check = false |
|
|
|
|
all.push(...n.subsections) |
|
|
|
|
n.subsections.forEach(m => { |
|
|
|
|
m.check = false |
|
|
|
|
}) |
|
|
|
|
}) |
|
|
|
|
}) |
|
|
|
|
}) |
|
|
|
|
list[0].shrink = true |
|
|
|
|
list[0].chapters[0].shrink = true |
|
|
|
|
this.allSections = all |
|
|
|
|
list[0].shrink = true |
|
|
|
|
list[0].chapters[0].shrink = true |
|
|
|
|
this.allSections = all |
|
|
|
|
} |
|
|
|
|
this.course = list |
|
|
|
|
} |
|
|
|
|
this.course = list |
|
|
|
|
} finally { |
|
|
|
|
this.loading = false |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
initData () { |
|
|
|
|
this.page = 1 |
|
|
|
|
this.getData() |
|
|
|
|
this.page = 1; |
|
|
|
|
this.getData(); |
|
|
|
|
}, |
|
|
|
|
tabChange (index) { |
|
|
|
|
this.active = index |
|
|
|
|
@ -231,6 +290,28 @@ export default { |
|
|
|
|
} |
|
|
|
|
chapter.check = chapter.subsections.every(e => e.check) |
|
|
|
|
}, |
|
|
|
|
// 资源全选回调 |
|
|
|
|
checkAllChange (val) { |
|
|
|
|
this.sources.map(e => { |
|
|
|
|
e.check = val |
|
|
|
|
this.sourceChange(e) |
|
|
|
|
}) |
|
|
|
|
}, |
|
|
|
|
// 资源列表选择回调 |
|
|
|
|
sourceChange (row) { |
|
|
|
|
const { check } = row |
|
|
|
|
const { checked } = this |
|
|
|
|
const cur = checked.findIndex(m => m.id === row.id) |
|
|
|
|
if (check) { |
|
|
|
|
if (cur === -1) { |
|
|
|
|
const section = _.cloneDeep(row) |
|
|
|
|
section.check = false |
|
|
|
|
this.checked.push(section) |
|
|
|
|
} |
|
|
|
|
} else { |
|
|
|
|
cur !== -1 && this.checked.splice(cur, 1) |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
// 批量移除 |
|
|
|
|
async batchDelChecked (val) { |
|
|
|
|
@ -270,7 +351,7 @@ export default { |
|
|
|
|
chapterId, |
|
|
|
|
cid: id, |
|
|
|
|
resourceId: e.id, |
|
|
|
|
type: e.cid ? 0 : 1, |
|
|
|
|
type: e.cid ? 0 : e.resourceName ? 2 : 1, |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
@ -345,8 +426,7 @@ export default { |
|
|
|
|
|
|
|
|
|
.left { |
|
|
|
|
width: 700px; |
|
|
|
|
padding: 0 20px; |
|
|
|
|
padding: 15px; |
|
|
|
|
padding: 0 15px; |
|
|
|
|
border-right: 1px solid #eee; |
|
|
|
|
box-sizing: border-box; |
|
|
|
|
|
|
|
|
|
@ -379,6 +459,10 @@ export default { |
|
|
|
|
|
|
|
|
|
.check { |
|
|
|
|
margin: 0 10px; |
|
|
|
|
|
|
|
|
|
img { |
|
|
|
|
vertical-align: middle; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.cover { |
|
|
|
|
@ -416,6 +500,12 @@ export default { |
|
|
|
|
flex: 1; |
|
|
|
|
padding: 15px; |
|
|
|
|
|
|
|
|
|
.total { |
|
|
|
|
font-size: 15px; |
|
|
|
|
color: #333; |
|
|
|
|
font-weight: 600; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.lines { |
|
|
|
|
height: calc(100vh - 228px); |
|
|
|
|
padding-right: 10px; |
|
|
|
|
@ -451,5 +541,32 @@ export default { |
|
|
|
|
cursor: pointer; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.materials { |
|
|
|
|
display: flex; |
|
|
|
|
gap: 20px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.types { |
|
|
|
|
width: 250px; |
|
|
|
|
height: calc(100vh - 223px); |
|
|
|
|
padding: 15px; |
|
|
|
|
background-color: #f9f9f9; |
|
|
|
|
box-sizing: border-box; |
|
|
|
|
overflow: auto; |
|
|
|
|
|
|
|
|
|
.line { |
|
|
|
|
margin-bottom: 10px; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.sources { |
|
|
|
|
flex: 1; |
|
|
|
|
padding: 10px; |
|
|
|
|
|
|
|
|
|
.line { |
|
|
|
|
margin-top: 8px; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
</style> |
