course_resource/src/components/main/courseSelect.vue

<template>
  <h2 class="contentTitle">课程列表</h2>
  <div class="course_select">
    <span class="grandTitle">年级：</span>
    <el-button :class="selectGrand == '三年级' ? 'el_button_active' : ''" @click="clickGrand('三年级')">三年级</el-button>
    <el-button :class="selectGrand == '四年级' ? 'el_button_active' : ''" @click="clickGrand('四年级')">四年级</el-button>
    <el-button :class="selectGrand == '五年级' ? 'el_button_active' : ''" @click="clickGrand('五年级')">五年级</el-button>
    <el-button :class="selectGrand == '六年级' ? 'el_button_active' : ''" @click="clickGrand('六年级')">六年级</el-button>
    <el-button :class="selectGrand == '七年级' ? 'el_button_active' : ''" @click="clickGrand('七年级')">七年级</el-button>
    <el-button :class="selectGrand == '八年级' ? 'el_button_active' : ''" @click="clickGrand('八年级')">八年级</el-button>
  </div>
  <div class="course_select">
    <span class="grandTitle">{{ value }}</span>
    <div v-if="currentData && currentData.shang.length > 0">
      <el-row :gutter="20">
        <el-col :span="6" v-for="item in currentData.shang" :key="item.title">
          <div class="grid-content ep-bg-purple">
            <img :src="getImageUrl(item.url)" alt="">
            <div class="course_content">
              <p>{{ item.title }}<span>上册</span></p>
              <div class="class_button" v-if="isupdateCourse">
                <el-button
                  style="width: 30%;background: rgba(240, 242, 245, 1);color: rgba(0, 0, 0, 0.6);">还原</el-button>
                <el-button style="width: 30%;background: #fff" @click="updateCourse(item.id)">修改</el-button>
                <el-button class="el_button_active" @click="openCourseDetail(item.id)">查看</el-button>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <div v-if="currentData && currentData.xia.length > 0">
      <el-row :gutter="20">
        <el-col :span="6" v-for="item in currentData.xia" :key="item.title">
          <div class="grid-content ep-bg-purple">
            <img :src="getImageUrl(item.url)" alt="">
            <div class="course_content">
              <div class="div_title">
                <span>下册</span>
                {{ item.title }}
                <!-- <el-popover placement="bottom" :width="200" trigger="click" show-after="1000">
                  <template #reference>
                    <img :src="DownloadImg" alt="" @click="getDate(item.id)">
                  </template>
                  <div>
                    <div>
                      <span>资源列表（{{ item.data.length }}）</span>
                      <el-checkbox v-model="checked1" label="全选" size="large" @click="checkedAll(item.id)" />
                    </div>
                    <div v-if="item.data.length>0">
                      <div v-for="dataitem in item.data" :key="dataitem.id">
                        {{ dataitem }}
                        <img :src="PDFImg" alt="">
                        <span>资料下载</span>
                        <img :src="DownloadImg" alt="">
                      </div>
                    </div>
                    <div v-else>
                      暂无数据
                    </div>
                  </div>
                </el-popover> -->
              </div>
            </div>
            <div class="class_button" v-if="isupdateCourse">
              <el-button style="width: 30%;background: rgba(240, 242, 245, 1);color: rgba(0, 0, 0, 0.6);"
                @click="ReductionCourse(item.id)">还原</el-button>
              <el-button style="width: 30%;background: #fff" @click="updateCourse(item.id)">修改</el-button>
              <el-button style="width: 30%;" class="el_button_active" @click="openCourseDetail(item.id)">查看</el-button>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
  <el-dialog v-model="dialogVisible" :before-close="handleClose" width=500>
    <template #header>
      <div class="dialog-header img_text_middle">
        <img :src="WarningImg" alt="">
        <span class="warning_text">操作警告</span>
      </div>
    </template>
    <span>启用还原功能将重置当前修改，并将课程内容恢复至标准版本。请确认是否继续执行相关操作。</span>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="updateReduction()">
          确认修改
        </el-button>
        <el-button @click="dialogVisible = false">取消</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup>
import { ref, onMounted, watchEffect } from 'vue';
import { userCurrentRole, userInfoStore } from '../../stores/counter'
import DownloadImg from '@/assets/img/download.png'
import PDFImg from '@/assets/img/PDF.png'
import WarningImg from '@/assets/icon/icon.png'
import san1 from '../../assets/img/三下1.png'
import san2 from '@/assets/img/三下2.png'
import san3 from '@/assets/img/三下3.png'
import san4 from '@/assets/img/三下4.png'
import si1 from '@/assets/img/四下1.png'
import si2 from '@/assets/img/四下2.png'
import si3 from '@/assets/img/四下3.png'
import si4 from '@/assets/img/四下4.png'
import wu1 from '@/assets/img/五下1.png'
import wu2 from '@/assets/img/五下2.png'
import wu3 from '@/assets/img/五下3.png'
import wu4 from '@/assets/img/五下4.png'
import liu1 from '@/assets/img/六下1.png'
import liu2 from '@/assets/img/六下2.png'
import liu3 from '@/assets/img/六下3.png'
import liu4 from '@/assets/img/六下4.png'
import qi1 from '@/assets/img/七下1.png'
import qi2 from '@/assets/img/七下2.png'
import qi3 from '@/assets/img/七下3.png'
import qi4 from '@/assets/img/七下4.png'
import ba1 from '@/assets/img/八下1.png'
import ba2 from '@/assets/img/八下2.png'
import ba3 from '@/assets/img/八下3.png'
import ba4 from '@/assets/img/八下4.png'
import { TRUE } from 'sass';

const user = userInfoStore()
const CurrentRole = userCurrentRole()
const selectGrand = ref('三年级')
const isupdateCourse = ref(false)
const currentData = ref({
  shang: [
  ],
  xia: [
    {
      id: "8d4c47d5-ed72-11ee-b534-005056b86db5",
      title: "智能安防",
      url: "../../assets/img/三下1.png"
    }, {
      id: "8680f2e5-ed72-11ee-b534-005056b86db5",
      title: "人脸检测与识别",
      url: "../../assets/img/三下1.png"
    }, {
      id: "90fed959-ed72-11ee-b534-005056b86db5",
      title: "电子警察",
      url: "../../assets/img/三下1.png"
    }, {
      id: "d84245f0-ec02-11ee-b534-005056b86db5",
      title: "音频播报",
      url: "../../assets/img/三下1.png"
    },
  ]
})
const dialogVisible = ref(false)
const updateReductionId = ref("")
const checked1 = ref(false)
const visible = ref(false)

const courseData = {
  "三年级": {
    shang: [
    ],
    xia: [
      {
        id: "8d4c47d5-ed72-11ee-b534-005056b86db5",
        title: "初识人工智能",
        url: san1
      }, {
        id: "8680f2e5-ed72-11ee-b534-005056b86db5",
        title: "机器的眼睛",
        url: san2
      }, {
        id: "90fed959-ed72-11ee-b534-005056b86db5",
        title: "机器的耳朵",
        url: san3
      }, {
        id: "d84245f0-ec02-11ee-b534-005056b86db5",
        title: "音频播报",
        url: san4
      },
    ]
  },
  "四年级": {
    shang: [
    ],
    xia: [
      {
        id: "2a4a7d77-ed73-11ee-b534-005056b86db5",
        title: "人工智能进阶",
        url: si1
      }, {
        id: "29120fad-ed73-11ee-b534-005056b86db5",
        title: "情绪识别",
        url: si2
      }, {
        id: "283d7d77-ed73-11ee-b534-005056b86db5",
        title: "情绪小怪兽",
        url: si3
      }, {
        id: "274ad423-ed73-11ee-b534-005056b86db5",
        title: "灯光交互",
        url: si4
      },
    ]
  },
  "五年级": {
    shang: [
    ],
    xia: [
      {
        id: "dbff4503-ed72-11ee-b534-005056b86db5",
        title: "游戏与生活概率",
        url: wu1
      }, {
        id: "db1ece3b-ed72-11ee-b534-005056b86db5",
        title: "手势识别",
        url: wu2
      }, {
        id: "d98c8624-ed72-11ee-b534-005056b86db5",
        title: "猜拳机器人",
        url: wu3
      }, {
        id: "d7f54a65-ed72-11ee-b534-005056b86db5",
        title: "猜拳大战",
        url: wu4
      },
    ]
  },
  "六年级": {
    shang: [
    ],
    xia: [
      {
        id: "a56bb310-ed73-11ee-b534-005056b86db5",
        title: "人脸检测知多少",
        url: liu1
      }, {
        id: "a4aaba64-ed73-11ee-b534-005056b86db5",
        title: "人脸检测全流程",
        url: liu2
      }, {
        id: "a06a3cda-ed73-11ee-b534-005056b86db5",
        title: "人脸检测功能实现",
        url: liu3
      }, {
        id: "9ed59589-ed73-11ee-b534-005056b86db5",
        title: "人脸追踪向日葵功能实现",
        url: liu4
      },
    ]
  },
  "七年级": {
    shang: [
    ],
    xia: [
      {
        id: "8698d3c0-ed73-11ee-b534-005056b86db5",
        title: "机器学习",
        url: qi1
      }, {
        id: "84c7c1a1-ed73-11ee-b534-005056b86db5",
        title: "萌宠生活（一）",
        url: qi2
      }, {
        id: "88b0ce2a-ed73-11ee-b534-005056b86db5",
        title: "萌宠生活（二）",
        url: qi3
      }, {
        id: "8741cd4a-ed73-11ee-b534-005056b86db5",
        title: "萌宠生活（三）",
        url: qi4
      },
    ]
  },
  "八年级": {
    shang: [
    ],
    xia: [
      {
        id: "c29cf14a-ed72-11ee-b534-005056b86db5",
        title: "探秘人工智能",
        url: ba1
      }, {
        id: "c1bc1265-ed72-11ee-b534-005056b86db5",
        title: "无所不在的人工智能",
        url: ba2
      }, {
        id: "c0d7053f-ed72-11ee-b534-005056b86db5",
        title: "机器翻译鸟（上）",
        url: ba3
      }, {
        id: "bd49ea05-ed72-11ee-b534-005056b86db5",
        title: "机器翻译鸟（下）",
        url: ba4
      },
    ]
  }
}
onMounted(() => {
  // for (let i = 0; i < courseData["三年级"].xia.length; i++) {
  //   let o = courseData["三年级"].xia[i]
  //   courseData["三年级"].xia[i].data = getDate(o.id)
  // }
  getDate("bd49ea05-ed72-11ee-b534-005056b86db5")
  currentData.value = courseData["三年级"]
})
const clickGrand = val => {
  selectGrand.value = val
  currentData.value = courseData[val]

}
const getImageUrl = (url) => {
  return new URL(url, import.meta.url).href
}

const openCourseDetail = (id) => {
  console.log(user.user)
  // 会返回复制得课程
  top.U.A.Request("https://pbl.cocorobo.cn/api/pbl/getcopyCourseSz", [id], function (res) {
    console.log(res)
    if (res.value[0].length > 0) {
      // let isSave = res.value[0].filter(x => {
      //   return x.courseId == id
      // })
      //这个是打开指定的课程接口
      top.U.MD.D.I.openInApplication("studyDetail", res.value[0][0].courseId, 2, user.user.type);
    } else {
      updateCourseId(id, "studyDetail")
    }
  }, [], { "type": "POST", "withCredentials": true });

}
const updateCourse = id => {
  // 会返回courseId和state 两个参数  然后打开
  top.U.A.Request("https://pbl.cocorobo.cn/api/pbl/getcopyCourseSz", [id], function (res) {
    console.log(res)
    if (res.value[0].length > 0) {
      // let isSave = res.value[0].filter(x => {
      //   return x.courseId == id
      // })
      top.U.MD.D.I.openInApplication('openCourseNewUpdate', res.value[0][0].courseId); //这个是打开指定的课程接口
    } else {
      updateCourseId(id, "openCourseNewUpdate")
    }
  }, [], { "type": "POST", "withCredentials": true });
}

const updateCourseId = (id, type) => {
  top.U.A.Request("https://pbl.cocorobo.cn/api/pbl/copyCourseSz", [id, user.user.userid], function (res) {
    console.log(res)
    if (res.value[0][0].courseId != "") {
      if (type == "openCourseNewUpdate") {
        top.U.MD.D.I.openInApplication("openCourseNewUpdate", res.value[0][0].courseId)
      } else {
        top.U.MD.D.I.openInApplication("studyDetail", res.value[0][0].courseId, 3, user.user.type);
      }
    }
  }, [], { "type": "POST", "withCredentials": true });
}

const ReductionCourse = id => {
  // updateReductionId.value = id
  top.U.A.Request("https://pbl.cocorobo.cn/api/pbl/getcopyCourseSz", [id], function (res) {
    console.log(res)
    if (res.value[0].length > 0) {
      // let isSave = res.value[0].filter(x => {
      //   return x.courseId == id
      // })
      dialogVisible.value = true
      updateReductionId.value = res.value[0][0].courseId
    } else {
      ElMessage({
        message: '该课程就是最初课程，不能还原',
        type: 'warning',
      })
    }
  }, [], { "type": "POST", "withCredentials": true });
}

const updateReduction = () => {
  top.U.A.Request("https://pbl.cocorobo.cn/api/pbl/revertCourseSz", [updateReductionId.value], function (res) {
    console.log(res, "还原")
    dialogVisible.value = false
  }, [], { "type": "POST", "withCredentials": true });
}

const getDate = id => {
  console.log(id)
  top.U.A.Request("https://pbl.cocorobo.cn/api/pbl/selectCourseDetailSz", [id], function (res) {
    console.log(res)
  }, [], { "type": "POST", "withCredentials": true });

}

const checkedAll = (id) => {
  console.log(id, checked1.value)
  // checked1.value = true
}

// 获取课程下载资料
// top.U.A.Request("https://pbl.cocorobo.cn/api/pbl/selectCourseDetailSz", ['课程id'], function (res) {}, [], { "type": "POST", "withCredentials": true });

watchEffect(() => {
  if (JSON.stringify(user.user) != "{}") {
    if (CurrentRole.currentRole == "edupersonnel" || CurrentRole.currentRole == "areaAdministrator" || CurrentRole.currentRole == "userAdministrator" || CurrentRole.currentRole == "securityAuditor" || CurrentRole.currentRole == "schoolAdministrator" || CurrentRole.currentRole == "schoolSecurityAuditor" || CurrentRole.currentRole == "teacher" || user.user.type != 2) {
      isupdateCourse.value = true
    }
  }
})
</script>
<style lang="scss" scoped>
.course_select {
  margin-top: 10px;

  .grid-content {
    border-radius: 4px;
    min-height: 36px;
    background: #fff;
    padding: 12px;

    // height: 300px;
    img {
      width: 100%;
      border-radius: 5px;
    }

    .course_content {
      .div_title {
        margin-top: 10px;

        span {
          // display: inline-block;
          padding: 2px 8px;
          background: rgba(224, 234, 251, 1);
          border-radius: 5px;
          font-size: 12px;
          color: rgba(54, 129, 252, 1);
        }

        img {
          width: 28px;
          cursor: pointer;
          float: right;
        }
      }
    }
  }

  .Screening {
    font-size: 20px;
    font-weight: 400;
    line-height: 28px;
    letter-spacing: 0em;
    text-align: center;
    color: rgba(0, 0, 0, 0.9);
  }

  .grandTitle {
    font-size: 20px;
    font-weight: 400;
    line-height: 28px;
    letter-spacing: 0em;
    text-align: center;

  }

  .el-button {
    // background:  rgba(54, 129, 252, 1);
    color: rgba(54, 129, 252, 1);
  }

  .el_button_active {
    background: rgba(54, 129, 252, 1);
    color: #fff;
  }

  .class_button {
    margin-top: 15px;
    display: flex;
    justify-content: space-between;
  }
}

.el-row {
  margin-top: 20px;
  margin-bottom: 20px;
}

.el-row:last-child {
  margin-bottom: 0;
}

.el-col {
  border-radius: 4px;
}

.warning_text {
  font-weight: bold;
  font-size: 16px;
  color: rgba(0, 0, 0, 0.9);
  margin-left: 8px;
}
</style>