| | |
| | | :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 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>--> |
| | | |
| | | </div> |
| | | <!-- </div>--> |
| | | <div style="display: flex;flex-direction: column"> |
| | | <span style="font-size: 20px;font-weight: 550">课程章节资源</span> |
| | | <el-table |
| | | border |
| | | :data="courseTable" |
| | | style="width: 80%;margin: 20px 35px"> |
| | | :span-method="objectSpanMethod" |
| | | style="width: 100%;margin-top: 20px"> |
| | | <!-- <el-table-column--> |
| | | <!-- prop="chapterParentCode"--> |
| | | <!-- label="章节UUID">--> |
| | | <!-- </el-table-column>--> |
| | | <el-table-column |
| | | prop="chapterCode" |
| | | label="章节UUID"> |
| | | prop="chapterParentName" |
| | | label="章节" align="center"> |
| | | </el-table-column> |
| | | <el-table-column |
| | | prop="chapterName" |
| | | label="章节名称"> |
| | | label="小节名称" align="center"> |
| | | </el-table-column> |
| | | <el-table-column |
| | | label="资源类别" |
| | | prop="resourceType"> |
| | | prop="resourceType" align="center"> |
| | | </el-table-column> |
| | | <el-table-column |
| | | label="章节学时" |
| | | prop="lessonNum"> |
| | | label="小节学时" |
| | | prop="lessonNum" align="center"> |
| | | </el-table-column> |
| | | <el-table-column label="预览" align="center" class-name="small-padding fixed-width"> |
| | | <template #default="scope"> |
| | |
| | | methods: { |
| | | openDialog (data,type) { |
| | | this.dialogVisible = true; |
| | | |
| | | if(type === 'course'){ |
| | | this.courseList = data.outline |
| | | this.courseTable = this.recursion(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) |
| | | this.courseTable = this.recursion(data.chapterList,type) |
| | | } |
| | | |
| | | console.log('courseTable',this.courseTable) |
| | | console.log('courseT2222222222able',this.courseTable) |
| | | }, |
| | | recursion (data) { |
| | | recursion (data,type) { |
| | | let tmp = [] |
| | | if(data && data.length > 0){ |
| | | for (let i = 0; i < data.length; i++) { |
| | |
| | | if (item.children && item.children.length==0) { |
| | | // 有children |
| | | } else { |
| | | item.children.forEach(child => { |
| | | tmp.push({ |
| | | chapterCode: child.chapterCode, |
| | | chapterName: child.chapterName, |
| | | resourceType: child.haveResource == 0 ? '视频' : '音频' , |
| | | lessonNum: child.lessonNum, |
| | | url: child.url, |
| | | children: this.recursion(child.children) |
| | | 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) |
| | | }) |
| | | }) |
| | | } |
| | | |
| | | } |
| | | } |
| | | } |
| | |
| | | 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{ |