From 36a0aa9774298b533fa2611a284592cfd79c84d1 Mon Sep 17 00:00:00 2001
From: lijiaqi <1205620597@qq.com>
Date: Wed, 24 Jul 2024 16:33:19 +0800
Subject: [PATCH] 111

---
 src/views/course/basicCourseInformation.vue |   1 +
 src/views/course/courseChapters.vue         |  13 -
 src/views/course/courseDetails.vue          | 324 +++++++++++++++++---
 3 files changed, 287 insertions(+), 51 deletions(-)

diff --git a/src/views/course/basicCourseInformation.vue b/src/views/course/basicCourseInformation.vue
index c2a2a08..3606b0a 100644
--- a/src/views/course/basicCourseInformation.vue
+++ b/src/views/course/basicCourseInformation.vue
@@ -133,6 +133,7 @@ const onGetCourseObject = async (id: any) => {
   // const res = await getCourseObjectApi(id)
   router.push({
     path: '/curriculumCenter/courseDetails',
+    // path: '/curriculumCenter/CourseObjectives',
     query: {
       id: id,
     },
diff --git a/src/views/course/courseChapters.vue b/src/views/course/courseChapters.vue
index 2beb408..f329982 100644
--- a/src/views/course/courseChapters.vue
+++ b/src/views/course/courseChapters.vue
@@ -107,7 +107,6 @@ function foldAddSubmit(data: any, updLoading: Function) {
         .finally(() => updLoading(false))
 }
 //删除章节
-<<<<<<< HEAD
 const foldDelLoading = ref(false)
 function flodDel(id: string) {
     foldDelLoading.value = true
@@ -118,14 +117,6 @@ function flodDel(id: string) {
                 type: 'success',
             })
             getFold()
-=======
-function flodDel(id: string,setLoading:Function) {
-    setLoading(true)
-    deleteSectionApi(id).then(() => {
-        ElMessage({
-            message: `删除成功`,
-            type: 'success'
->>>>>>> efc569df5dcaa0a473e7d75d75a5abe7e5d030d5
         })
         .catch(() => {
             ElMessage({
@@ -133,11 +124,7 @@ function flodDel(id: string,setLoading:Function) {
                 type: 'error',
             })
         })
-<<<<<<< HEAD
         .finally(() => (foldDelLoading.value = false))
-=======
-    }).finally(() =>setLoading(false))
->>>>>>> efc569df5dcaa0a473e7d75d75a5abe7e5d030d5
 }
 // 更新章节
 const showHide1 = ref(false)
diff --git a/src/views/course/courseDetails.vue b/src/views/course/courseDetails.vue
index da2ff98..3ba35bf 100644
--- a/src/views/course/courseDetails.vue
+++ b/src/views/course/courseDetails.vue
@@ -1,7 +1,140 @@
 <script setup>
+import { ref, onMounted } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { id } from 'element-plus/es/locales.mjs'
 import * as echarts from 'echarts'
-import { onMounted } from 'vue'
-onMounted(() => {
+
+// import { useRoute } from 'vue-router'
+
+import {
+  getCourseList,
+  addCourse,
+  editCourse,
+  deleteCourse,
+  getCourseInfo,
+} from '@/api/courseChaptersApi'
+import { useRoute, useRouter } from 'vue-router'
+const route = useRoute()
+const router = useRouter()
+// id ： 分目标id
+// targetId ： 选中的分类
+
+const targetList = ref([
+  {
+    label: '课程目标一',
+    id: 1,
+    disabled: false,
+  },
+  {
+    label: '课程目标二',
+    disabled: false,
+    id: 2,
+  },
+  {
+    label: '课程目标三',
+    id: 3,
+    disabled: false,
+  },
+])
+const formData = ref({
+  description: '',
+})
+const activeIndex = ref(0)
+const addBook = (id) => {
+  activeIndex.value = id
+  dialogVisible.value = true
+  flog.value = false
+  // updateDisabledStatus()
+}
+const text = ref('我是后台获取的值')
+const textChange = (val) => {
+  console.log(text.value)
+}
+// 弹窗
+const dialogVisible = ref(false)
+// 关闭弹窗
+const handleClose = () => {
+  dialogVisible.value = false
+}
+// 弹窗提交事件
+const submit = async () => {
+  if (flog.value) {
+    await editCourse({
+      ...editdata.value,
+      content: formData.value.description,
+    })
+  } else {
+    await addCourse({
+      objectiveId: activeIndex.value,
+      content: formData.value.description,
+    })
+  }
+  getList()
+  dialogVisible.value = false
+  formData.value.description = ''
+  activeIndex.value = ''
+}
+const close = () => {
+  formData.value = {
+    id: null,
+    target: '',
+    description: '',
+  }
+  dialogVisible.value = false
+}
+// 筛选目标
+const filterTarger = (target) => {
+  const res = targetList.value.find((item) => {
+    if (item.id === target) {
+      console.log(item)
+      return item
+    }
+  })
+  return res.label
+}
+
+const editdata = ref({ id: '', objectiveId: '' })
+// 编辑事件
+const flog = ref(false)
+const editBook = async (obj) => {
+  const res = await getCourseInfo({ id: obj.id })
+  editdata.value.id = res.data.id
+  editdata.value.objectiveId = res.data.objectiveId
+  flog.value = true
+  console.log(obj)
+  activeIndex.value = res.data.id
+  // formData.value.id = obj.id
+  // formData.value.target = obj.targetId
+  formData.value.description = res.data.content
+  dialogVisible.value = true
+}
+const del = async (obj) => {
+  await ElMessageBox.confirm('你确认要删除该课程目标吗', '温馨提示', {
+    type: 'warning',
+    confirmButtonText: '确认',
+    cancelButtonText: '取消',
+  })
+  await deleteCourse({ id: obj.id })
+  ElMessage.success('删除成功')
+  getList()
+}
+
+const getList = async () => {
+  const res = await getCourseList({ id: courseId.value })
+  data.value = res.data[0]
+  text.value = res.data[0].name
+}
+const data = ref({})
+const courseId = ref(0)
+onMounted(async () => {
+  if (!Object.keys(route.query).length) {
+    return router.push('/curriculumCenter/courseDetails')
+  }
+  courseId.value = route.query.id
+  console.log(courseId.value)
+  getList()
+  console.log(data.value)
+
   const chartDom = document.getElementById('main')
 
   const myChart = echarts.init(chartDom)
@@ -46,7 +179,7 @@ onMounted(() => {
 <template>
   <div class="top">
     <div class="object">
-      <h3>课程目标</h3>
+      <!-- <h3>课程目标</h3> -->
       <div class="radar">
         <div class="title">| 课程目标雷达图</div>
 
@@ -56,29 +189,40 @@ onMounted(() => {
       <div class="objectives">
         <div class="title">| 课程目标</div>
         <div class="objectivebottom">
-          <el-scrollbar height="370px">
+          <el-scrollbar height="270px">
             <ul class="objectLi">
-              <li>
+              <li v-for="(item, index) in data.courseObjectivesTrees" :key="item.id">
                 <div class="courseObject">
-                  <div class="courseObject1"></div>
+                  <div class="courseObject1">{{ item.name }}</div>
                   <div class="courseObject2">
-                    <el-button type="primary">新增</el-button>
+                    <el-button type="primary" @click="addBook(item.id)">
+                      新增
+                    </el-button>
                   </div>
                 </div>
                 <div class="smallContent">
-                  <el-scrollbar height="250px">
+                  <el-scrollbar height="200px">
                     <ul class="small">
-                      <li>
+                      <li v-for="(obj, i) in item.contents" :key="obj.id">
                         <div class="partObject">
-                          <div class="partObject1">课程目标</div>
+                          <div class="partObject1">
+                            <!-- {{ item.content }} -->
+                            <!-- {{ item.introduce }} -->
+                            课程目标{{ i + 1 }}
+                            <!-- {{ filterTarger(obj.targetId) }} -->
+                          </div>
                           <div class="partObject2">
-                            <el-button class="edit" type="text">编辑</el-button>
-                            <el-button class="destroy" type="text">
+                            <el-button class="edit" type="text" @click="editBook(obj)">
+                              编辑
+                            </el-button>
+                            <el-button class="destroy" type="text" @click="del(obj)">
                               删除
                             </el-button>
                           </div>
                         </div>
-                        <div class="partObjectIntroduce"></div>
+                        <div class="partObjectIntroduce">
+                          {{ obj.content }}
+                        </div>
                       </li>
                     </ul>
                   </el-scrollbar>
@@ -86,14 +230,46 @@ onMounted(() => {
               </li>
             </ul>
           </el-scrollbar>
+          <el-dialog v-if="dialogVisible" v-model="dialogVisible" :title="flog ? '编辑' : '新增'" width="500"
+            :before-close="handleClose">
+            <el-form :model="formData" label-width="auto" style="max-width: 600px">
+              <el-form-item label="内容" prop="description">
+                <el-input v-model="formData.description" placeholder="请输入内容"></el-input>
+              </el-form-item>
+            </el-form>
+            <template #footer>
+              <div class="dialog-footer">
+                <el-button @click="close">取消</el-button>
+                <el-button type="primary" @click="submit">确定</el-button>
+              </div>
+            </template>
+          </el-dialog>
         </div>
       </div>
     </div>
     <div class="point">
-      <div class="map"></div>
-      <div class="knowledge"></div>
+      <div class="map">知识图谱</div>
+      <div class="knowledge">
+        <div class="percent">
+          <span>知识点掌握百分比</span>
+        </div>
+
+        <div class="core_knowledge">
+          <SvgIcon class="svg-element" name="博士帽" width="40" height="40" />
+          <span class="text">核心知识点</span>
+          <span class="number" style="color: #ffa400">69</span>
+          个
+        </div>
+        <div class="error_knowledge">
+          <SvgIcon class="svg-element" name="知识点" width="40" height="40" />
+          <span class="text">易错知识点</span>
+          <span class="number" style="color: #5570fe">69</span>
+          个
+        </div>
+      </div>
     </div>
   </div>
+
   <div class="bottom">
     <div class="chapters"></div>
     <div class="chaptersDetails">
@@ -106,26 +282,22 @@ onMounted(() => {
 .top {
   display: flex;
   justify-content: space-between;
+  // margin-top: 20px;
 
   .object {
-    // display: flex;
-    // justify-content: space-between;
-    width: 65%;
+    display: flex;
+    justify-content: space-between;
+    width: 69%;
     height: 400px;
-    border: 1px solid black;
+    // border: 1px solid black;
 
     // background-color: pink;
-    h3 {
-      text-align: center;
-      font-size: 36px;
-    }
 
     .radar {
-      float: left;
+      // float: left;
       border-radius: 20px;
-      width: 300px;
-      margin-left: 20px;
-      margin-top: 20px;
+      width: 390px;
+      margin-right: 20px;
       height: 230px;
       background-color: #ffa674;
       background-image: linear-gradient(to right, #f9e397, #ffa674);
@@ -146,20 +318,15 @@ onMounted(() => {
       margin-top: 10px;
       // margin-right: 20px;
       width: 100%;
-      height: 270px;
+      height: 350px;
       background-color: #fff;
       background-image: linear-gradient(#ffe9c7, #ffffff);
-      // width: 200px;
-      // height: 200px;
-      // padding: 20px;
-      // background-color: #fff;
-      // background-image: linear-gradient(#ffe9c7, #ffffff);
     }
 
     .objectives {
-      margin-top: 20px;
+      // margin-top: 20px;
       margin-right: 20px;
-      float: right;
+      // float: right;
       border-radius: 20px;
       width: 650px;
       height: 230px;
@@ -171,7 +338,7 @@ onMounted(() => {
       border-radius: 20px;
       margin-top: 10px;
       width: 100%;
-      height: 270px;
+      height: 350px;
       background-image: linear-gradient(#c7e3ff, #ffffff);
 
       .objectLi>li {
@@ -258,12 +425,93 @@ onMounted(() => {
       }
     }
   }
+
+  h3 {
+    text-align: center;
+    font-size: 36px;
+  }
 }
 
 .point {
-  width: 34%;
+  width: 30%;
   height: 400px;
-  background-color: blue;
+  // background-color: blue;
+
+  .map {
+    width: 100%;
+    height: 260px;
+    background-color: pink;
+  }
+
+  .knowledge {
+    display: flex;
+    justify-content: space-between;
+    // border: 1px solid black;
+    width: 100%;
+    height: 129px;
+    margin: 10px 0;
+    overflow: hidden;
+
+    .percent {
+      margin-right: 13px;
+      width: 150px;
+      height: 129px;
+      background: #ffffff;
+      border-radius: 12px 12px 12px 12px;
+      box-shadow: 0px 3px 13px 0px rgba(225, 232, 246, 0.76);
+
+      span {
+        display: block;
+        font-family: Inter, Inter;
+        font-weight: bold;
+        font-size: 14px;
+        color: #333333;
+        margin-top: 10px;
+        text-align: center;
+      }
+    }
+
+    .core_knowledge {
+      width: 100px;
+      height: 129px;
+      text-align: center;
+      background: #ffffff;
+      box-shadow: 0px 3px 13px 0px rgba(225, 232, 246, 0.76);
+      border-radius: 12px 12px 12px 12px;
+    }
+
+    .svg-element {
+      margin-top: 10px;
+    }
+
+    .error_knowledge {
+      width: 100px;
+      height: 129px;
+      text-align: center;
+      background: #ffffff;
+      box-shadow: 0px 3px 13px 0px rgba(225, 232, 246, 0.76);
+      border-radius: 12px 12px 12px 12px;
+    }
+
+    .text {
+      display: block;
+      font-family: Inter, Inter;
+      font-weight: bold;
+      font-size: 14px;
+      color: #333333;
+      margin-top: 15px;
+      margin-bottom: 5px;
+      text-align: center;
+    }
+
+    .number {
+      text-align: center;
+      font-family: Inter, Inter;
+      font-weight: bold;
+      font-size: 24px;
+      margin-left: 20px;
+    }
+  }
 }
 
 .bottom {