| | |
| | | :visible.sync="dialogVisible" |
| | | :modal-append-to-body="false" |
| | | :close-on-click-modal="false" |
| | | width="600px" |
| | | width="50%" |
| | | :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> |
| | | <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 |
| | | prop="teacher" |
| | | label="讲师" align="center"> |
| | | <template #default="scope"> |
| | | <span>{{scope.row.teacher ? scope.row.teacher : '--'}}</span> |
| | | </template> |
| | | </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"> |
| | |
| | | </template> |
| | | </el-table-column> |
| | | </el-table> |
| | | |
| | | </div> |
| | | |
| | | </div> |
| | | <span slot="footer" class="dialog-footer" v-if="showBtn"> |
| | | <el-button type="primary" @click="examine('pass')">审核通过</el-button> |
| | | <el-button type="warning" @click="examine('reject')">审核驳回</el-button> |
| | | </span> |
| | | </el-dialog> |
| | | </template> |
| | | |
| | | <script > |
| | | import { checkCourse, listCourse } from '@/api/onlineEducation/course' |
| | | |
| | | export default { |
| | | name: 'addUser', |
| | | components: { |
| | |
| | | dialogStatus: '', |
| | | dataForm: {}, |
| | | courseTable: [], |
| | | courseList: [] |
| | | courseList: [], |
| | | showBtn:false |
| | | } |
| | | }, |
| | | created() { |
| | | }, |
| | | methods: { |
| | | openDialog (data) { |
| | | openDialog (data,type,courseType) { |
| | | this.dialogVisible = true; |
| | | this.courseList = data.outline |
| | | this.courseTable = this.recursion(data.outline) |
| | | console.log('courseTable',this.courseTable) |
| | | this.dataForm = data; |
| | | console.log('dataForm ',this.dataForm ) |
| | | if(type === 'course'){ |
| | | this.courseList = data.outline |
| | | this.courseTable = this.recursion(data.outline,type) |
| | | |
| | | if(courseType == 'check'){ |
| | | this.showBtn = true |
| | | console.log('this.showBtn ',this.showBtn ) |
| | | } |
| | | }else { |
| | | console.log('courseT2222222222able',data.chapterList) |
| | | this.courseList = data.chapterList |
| | | this.courseTable = this.recursion(data.chapterList,type) |
| | | } |
| | | |
| | | console.log('coursee',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), |
| | | teacher: child.teacher |
| | | }) |
| | | }) |
| | | }) |
| | | }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), |
| | | teacher: child.teacher |
| | | }) |
| | | }) |
| | | } |
| | | |
| | | } |
| | | } |
| | | } |
| | |
| | | this.isClose = !this.isClose |
| | | }, |
| | | handleClose() { |
| | | this.showBtn = false |
| | | this.dialogVisible = false; |
| | | this.$emit("getList"); |
| | | }, |
| | | onSubmit() { |
| | | |
| | | this.$emit("getList"); |
| | | this.dialogVisible = false; |
| | | |
| | | |
| | | this.$emit("getList"); |
| | | this.dialogVisible = false; |
| | | }, |
| | | |
| | | examine(type){ |
| | | let msg = ''; |
| | | const param = { |
| | | id: this.dataForm.id, |
| | | status: null |
| | | } |
| | | if(type === 'pass'){ |
| | | param.status = 2 |
| | | msg = '审核通过' |
| | | }else { |
| | | param.status = 3 |
| | | msg = '审核驳回' |
| | | } |
| | | this.$confirm(`确定${msg}该条数据?`, '提示', { |
| | | confirmButtonText: '确定', |
| | | cancelButtonText: '取消', |
| | | type: 'warning' |
| | | }).then(async () => { |
| | | checkCourse(param).then((res) => { |
| | | if (res.code == 200) { |
| | | this.$message({ |
| | | message: '成功', |
| | | type: 'success' |
| | | }) |
| | | this.handleClose() |
| | | }else { |
| | | this.$message({ |
| | | message: res.msg, |
| | | type: 'warning' |
| | | }) |
| | | } |
| | | }) |
| | | }) |
| | | }, |
| | | 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; |
| | | } |
| | | .dialog-footer{ |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: space-around; |
| | | } |
| | | </style> |