<template>
|
<el-dialog
|
:visible.sync="dialogVisible"
|
:modal-append-to-body="false"
|
:close-on-click-modal="false"
|
width="600px"
|
:before-close="handleClose"
|
>
|
<div style="margin: 0 25px">
|
<!-- <div style="display: flex;flex-direction: column">-->
|
<!-- <div style="display: flex;align-items: center;justify-content: space-between">-->
|
<!-- <span style="font-size: 20px;font-weight: 550">课程大纲</span>-->
|
<!-- <span style="color: #1890ff;cursor: pointer;" @click="clickOpen">收起/展开</span>-->
|
<!-- </div>-->
|
<!-- <div :class="{'open':isClose}" style="overflow: hidden">-->
|
<!-- <div v-for="(item,index) in courseList" :key="index" style="font-size: 16px;margin: 20px 35px">-->
|
<!-- <span>{{item.chapterName}}</span>-->
|
<!-- <div v-if="item.children">-->
|
<!-- <div v-for="(child,index) in item.children" :key="index" style="font-size: 16px;margin: 20px 8px">-->
|
<!-- <span>{{child.chapterName}}</span>-->
|
<!-- </div>-->
|
<!-- </div>-->
|
|
<!-- </div>-->
|
<!-- </div>-->
|
|
<!-- </div>-->
|
<div style="display: flex;flex-direction: column">
|
<span style="font-size: 20px;font-weight: 550">课程章节资源</span>
|
<el-table
|
border
|
:data="courseTable"
|
:span-method="objectSpanMethod"
|
style="width: 100%;margin-top: 20px">
|
<!-- <el-table-column-->
|
<!-- prop="chapterParentCode"-->
|
<!-- label="章节UUID">-->
|
<!-- </el-table-column>-->
|
<el-table-column
|
prop="chapterParentName"
|
label="章节" align="center">
|
</el-table-column>
|
<el-table-column
|
prop="chapterName"
|
label="小节名称" align="center">
|
</el-table-column>
|
<el-table-column
|
label="资源类别"
|
prop="resourceType" align="center">
|
</el-table-column>
|
<el-table-column
|
label="小节学时"
|
prop="lessonNum" align="center">
|
</el-table-column>
|
<el-table-column label="预览" align="center" class-name="small-padding fixed-width">
|
<template #default="scope">
|
<el-button
|
size="mini"
|
type="text"
|
style="color: #1890ff"
|
@click="openUrl(scope.row.url)"
|
>预览课程</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
|
</div>
|
|
</div>
|
</el-dialog>
|
</template>
|
|
<script >
|
export default {
|
name: 'addUser',
|
components: {
|
},
|
data() {
|
return {
|
isClose:false,
|
dialogVisible: false,
|
dialogStatus: '',
|
dataForm: {},
|
courseTable: [],
|
courseList: []
|
}
|
},
|
created() {
|
},
|
methods: {
|
openDialog (data,type) {
|
this.dialogVisible = true;
|
|
if(type === 'course'){
|
this.courseList = data.outline
|
this.courseTable = this.recursion(data.outline,type)
|
}else {
|
console.log('courseT2222222222able',data.chapterList)
|
this.courseList = data.chapterList
|
this.courseTable = this.recursion(data.chapterList,type)
|
}
|
|
console.log('courseT2222222222able',this.courseTable)
|
},
|
recursion (data,type) {
|
let tmp = []
|
if(data && data.length > 0){
|
for (let i = 0; i < data.length; i++) {
|
let item = data[i]
|
// children为空
|
if (item.children && item.children.length==0) {
|
// 有children
|
} else {
|
if(type === 'course'){
|
item.children.forEach(child => {
|
tmp.push({
|
chapterParentCode: item.uuid,
|
chapterParentName: item.chapterName,
|
chapterCode: child.uuid,
|
chapterName: child.chapterName,
|
resourceType: child.haveResource == 0 ? '视频' : '音频' ,
|
lessonNum: child.lessonNum,
|
url: child.url,
|
children: this.recursion(child.children)
|
})
|
})
|
}else {
|
item.children.forEach(child => {
|
tmp.push({
|
chapterParentCode: item.chapterUuid,
|
chapterParentName: item.chapterName,
|
chapterCode: child.chapterUuid,
|
chapterName: child.chapterName,
|
resourceType: child.haveResource == 0 ? '视频' : '音频' ,
|
lessonNum: child.lessonNum,
|
url: child.url,
|
children: this.recursion(child.children)
|
})
|
})
|
}
|
|
}
|
}
|
}
|
return tmp;
|
},
|
openUrl(url) {
|
window.open(url,'_blank')
|
},
|
clickOpen() {
|
this.isClose = !this.isClose
|
},
|
handleClose() {
|
this.dialogVisible = false;
|
this.$emit("getList");
|
},
|
onSubmit() {
|
this.$emit("getList");
|
this.dialogVisible = false;
|
},
|
objectSpanMethod({ row, column, rowIndex, columnIndex }) {
|
if(columnIndex === 0) {
|
const currentValue = row[column.property];
|
// 获取上一行相同列的值
|
const preRow = this.courseTable[rowIndex - 1];
|
const preValue = preRow ? preRow[column.property] : null;
|
// 如果当前值和上一行的值相同，则将当前单元格隐藏
|
if (currentValue === preValue) {
|
return { rowspan: 0, colspan: 0 };
|
} else {
|
// 否则计算当前单元格应该跨越多少行
|
let rowspan = 1;
|
for (let i = rowIndex + 1; i < this.courseTable.length; i++) {
|
const nextRow = this.courseTable[i];
|
const nextValue = nextRow[column.property];
|
if (nextValue === currentValue) {
|
rowspan++;
|
} else {
|
break;
|
}
|
}
|
return { rowspan, colspan: 1 };
|
}
|
// if(rowIndex%2 === 0){
|
// return {
|
// rowspan: 2,
|
// colspan: 1
|
// }
|
// }else {
|
// return {
|
// rowspan: 0,
|
// colspan: 0
|
// }
|
// }
|
}
|
}
|
}
|
}
|
|
|
</script>
|
<style scoped>
|
.open{
|
height: 15px;
|
}
|
</style>
|
