修改

马宇豪

2025-03-07 db905ecd14f63dba9337b4f4715584ef2d7e8c7e

 src/views/onlineEducation/courseSupervision/components/courseDialog.vue

@@ -3,42 +3,61 @@
    :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.name}}</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 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="catalogCode"
            label="章节UUID">
            prop="chapterParentName"
            label="章节" align="center">
          </el-table-column>
          <el-table-column
            prop="catalogName"
            label="章节名称">
            prop="chapterName"
            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">
@@ -46,18 +65,24 @@
                size="mini"
                type="text"
                style="color: #1890ff"
                @click="openUrl(scope.row.url)"
              >预览课程</el-button>
            </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: {
@@ -68,101 +93,175 @@
      dialogVisible: false,
      dialogStatus: '',
      dataForm: {},
      courseTable: [
        {
          catalogCode: '1',
          catalogName: '测试',
          resourceType: '视频',
          lessonNum: '2h'
        },
        {
          catalogCode: '1',
          catalogName: '测试3',
          resourceType: '音频',
          lessonNum: '45min'
        }
      ],
      courseList: [
        {
          name: '1.1  ……'
        },
        {
          name: '1.2  ……'
        },
        {
          name: '1.3  ……'
        }

      ]
      courseTable: [],
      courseList: [],
      showBtn:false
    }
  },
  created() {
  },
  methods: {
    openDialog (type, data) {
      this.resetDataForm();
    openDialog (data,type,courseType) {
      this.dialogVisible = true;
      this.dialogStatus = type;
      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,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),
                  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
                })
              })
            }

          }
        }
      }
      return tmp;
    },
    openUrl(url) {
      window.open(url,'_blank')
    },
    clickOpen() {
      this.isClose = !this.isClose
    },
    handleClose() {
      this.showBtn = false
      this.dialogVisible = false;
      this.$emit("getList");
    },
    onSubmit() {
      this.$refs["dataForm"].validate( async valid => {
        if (valid) {
          if(this.dialogStatus == 'add'){
            // this.dataForm.isCm = 1;
            // console.log("this.dataForm",this.dataForm)
            // const res = await addExam(this.dataForm);
            // if(res.code == 200) {
              this.$emit("getList");
              this.dialogVisible = false;
            //   this.$message({
            //     type:'success',
            //     message: '新增成功'
            //   })
            // }else{
            //   this.$message({
            //     type:'warning',
            //     message: res.msg
            //   })
            // }
          }else {
            // this.dataForm.isCm = 1;
            // console.log("this.dataForm",this.dataForm)
            // const res = await updateExam(this.dataForm);
            // if(res.code == 200) {
              this.$emit("getList");
              this.dialogVisible = false;
            //   this.$message({
            //     type:'success',
            //     message: '编辑成功'
            //   })
            // }else{
            //   this.$message({
            //     type:'warning',
            //     message: res.msg
            //   })
            // }
          }
        }
      })

        this.$emit("getList");
        this.dialogVisible = false;
    },
    resetDataForm() {
      this.dataForm = {
    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>