Merge branch 'develoop' of http://182.92.169.222:3000/dlsx/Teaching_integration_platform_admin_template into develoop

package.json

@@ -30,6 +30,7 @@
     "echarts-liquidfill": "^3.1.0",
     "form-data": "^4.0.0",
     "jquery": "^3.7.1",
+    "nanoid": "^5.0.7",
     "nprogress": "^0.2.0",
     "pinia": "^2.1.7",
     "three": "^0.163.0",

src/api/courseChaptersApi.ts

@@ -65,4 +65,42 @@ export function getOrogramObjectiveApi() {
     setTimeout(() => resolve(data), 500 * Math.random())
   })
 }
-
+// 获取课程列表
+export const getCourseList = (params:any) => {
+  return request({
+    url: '/course_objectives/list/' + params.id,
+    params
+  })
+}
+// 添加分目标
+export const addCourse = (data:any) => {
+  return request({
+    url:'/objective_contents/addcontent',
+    method:"POST",
+    data
+  })
+}
+// 编辑目标
+export const editCourse = (data: any) => {
+  return request({
+    url: '/objective_contents/update',
+    method: "PUT",
+    data
+  })
+}
+//删除课程目标
+export const deleteCourse = (params: any) => {
+  return request({
+    url: '/objective_contents/' + params.id,
+    method: "DELETE",
+  })
+}
+// /objective_contents/
+// 获取详情
+export const getCourseInfo = (params: any) => {
+  return request({
+    url: '/objective_contents/' + params.id,
+    method: "get",
+    params
+  })
+}

src/api/user/record.js

@@ -1,10 +0,0 @@
-import request from '@/utils/request'
-//获取浏览记录列表
-export const getRecordListService = (params) =>
-  request.get('http://39.106.16.162:8080/learningrecords/getall', { params })
-//删除浏览记录
-export function DelRecordService(ids) {
-  return request.delete(
-    `http://39.106.16.162:8080/learningrecords/delete?ids=${ids}`,
-  )
-}

src/api/user/resource.js

@@ -1,9 +0,0 @@
-import request from '@/utils/request'
-//获取ppt资源列表
-export const getpptResourceListService = (params) =>
-  request.get('http://localhost:8080/courses/getall', { params })
-export function DelpptResourceListService(ids) {
-  return request.delete(
-    `http://localhost:8080/learningrecords/delete?ids=${ids}`,
-  )
-}

src/utils/request.ts

@@ -11,7 +11,7 @@ const request = axios.create({
 request.interceptors.request.use((config) => {
   const userStore = useUserStore()
   // 设置请求头设置token
-  config.headers.token = userStore.token
+  config.headers.Authorization = `Bearer ${userStore.token}`
   return config
 })
 //响应拦截器

src/views/MyCourseStudy/learningProcess.vue

@@ -1,10 +1,10 @@
 <script setup>
 // import router from '@/router'
 import { ref } from 'vue'
-//getRecordListService,
+
-import { DelRecordService } from '@/api/user/record.js'
 import { ElMessageBox, ElMessage } from 'element-plus'
 import { useRouter } from 'vue-router'
+//导入接口
 import { LearningRecordsControllerService } from '../../../generated/services/LearningRecordsControllerService'
 const total = ref(0)
 const recordList = ref([])
@@ -19,12 +19,14 @@ const params = ref({
 
 //获取浏览记录列表
 const getrecordList = async () => {
-  console.log(1111111)
+  //console.log(1111111)
   loading.value = true
 
   // const res = await getRecordListService(params.value)
   const res = await LearningRecordsControllerService.getAllUsingGet3(
-    params.value,
+    params.value.userId,
+    params.value.pagenum,
+    params.value.pagesize,
   )
   recordList.value = res.data.records
   console.log(res)
@@ -55,7 +57,11 @@ const onDeleteRecord = async (ids) => {
     confirmButtonText: '确认',
     cancelButtonText: '取消',
   })
-  await DelRecordService(ids)
+  //await DelRecordService(ids)
+  console.log('hello')
+
+  await LearningRecordsControllerService.deleteRecordsUsingDelete3(ids)
+
   // console.log(ids)
   ElMessage({ type: 'success', message: '删除成功' })
   getrecordList()
@@ -97,7 +103,9 @@ const deleteSelected = async () => {
   })
 
   // 调用已封装好的删除接口进行删除操作
-  await DelRecordService(selectedIds.value)
+  await LearningRecordsControllerService.deleteRecordsUsingDelete3(
+    selectedIds.value,
+  )
     .then(() => {
       recordList.value = recordList.value.filter(
         (item) => !selectedIds.value.includes(item.id),

src/views/course/CourseObjectives.vue

@@ -1,121 +1,475 @@
-<script lang="ts" setup>
+<script setup>
-import {} from 'vue'
+import { ref, onMounted } from 'vue'
-// import allclass from '@/assets/images/allclass.png'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { id } from 'element-plus/es/locales.mjs'
+import * as echarts from 'echarts'
+import { useRoute } from 'vue-router'
+import { getCourseList, addCourse, editCourse, deleteCourse, getCourseInfo } from '@/api/courseChaptersApi'
+const route = useRoute()
+// 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({ id: activeIndex.value, content: formData.value.description })
+  } else {
+    await addCourse({ objectiveId: activeIndex.value, content: formData.value.description })
+  }
+
+  getList()
+  dialogVisible.value = false
+  formData.value.description = ''
+  activeIndex.value = ''
+  // // 判断当前点击的是新增还是修改
+  // if (flog.value) {
+  //   console.log('编辑', formData.value.target)
+  //   // 找到新增的一项
+  //   const index = booksList.value.findIndex(
+  //     (item) => formData.value.id == item.id,
+  //   )
+  //   console.log(index, 'index')
+  //   console.log(booksList.value[index])
+  //   booksList.value[index].id = formData.value.id
+  //   booksList.value[index].targetId = formData.value.target
+  //   booksList.value[index].introduce = formData.value.description
+  //   close()
+  // } else {
+  //   courseList.value[activeIndex.value].booklist.push({
+  //     id: booksList.value.length + 1,
+  //     targetId: formData.value.target,
+  //     introduce: formData.value.description,
+  //   })
+  //   close()
+  //   flog.value = false
+
+}
+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 flog = ref(false)
+const editBook = async (obj) => {
+  const res = await getCourseInfo({ id: obj.id })
+
+  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()
+  // console.log(id);
+  // activeIndex.value = id
+  // courseList.booksList.value = booksList.value.filter((item) => item.id !== id)
+}
+
+// const disableChange = (id) => {
+//   const index = booksList.value.findIndex((item,index) => item.id === id)
+//   console.log(index);
+//   if(index){
+//     targetList.value[index].disabled = false
+//   }
+// }
+// 定义一个方法来更新 targetList 中的 disabled 属性
+
+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 () => {
+  courseId.value = route.query.id
+  console.log(courseId.value);
+  getList()
+  console.log(data.value);
+  let chartDom = document.getElementById('main')
+  let myChart = echarts.init(chartDom)
+  let option
+  option = {
+    title: {
+      text: '分目标',
+    },
+    legend: {
+      data: ['Allocated Budget', 'Actual Spending'],
+    },
+    radar: {
+      // shape: 'circle',
+      indicator: [
+        { name: 'Sales', max: 6500 },
+        { name: 'Administration', max: 16000 },
+        { name: 'Information Technology', max: 30000 },
+        { name: 'Customer Support', max: 38000 },
+        { name: 'Development', max: 52000 },
+        { name: 'Marketing', max: 25000 },
+      ],
+    },
+    series: [
+      {
+        name: 'Budget vs spending',
+        type: 'radar',
+        data: [
+          {
+            value: [4200, 3000, 20000, 35000, 50000, 18000],
+            name: 'Allocated Budget',
+          },
+          {
+            value: [5000, 14000, 28000, 26000, 42000, 21000],
+            name: 'Actual Spending',
+          },
+        ],
+      },
+    ],
+  }
+
+  option && myChart.setOption(option)
+})
 </script>
 
 <template>
-  <el-row :gutter="20">
+  <div class="container">
-    <el-col :span="8">
+    <div class="leftContent">
-      <div class="grid-content main">
+      <div class="topContent">
-        <div class="title"><p>|&nbsp;&nbsp;课程总目标</p></div>
+        <div class="title">| 课程总目标</div>
-        <div class="ac_content">
+        <div class="content1">
-          <div class="ma_content">
+          <textarea class="textarea" @change="textChange" v-model="text">文本内容</textarea>
-            通过本课程的学习，使学生进一步了解计算机的工作原理，更好地理解和应用计算机，掌
-            握用计算机处理问题的方法和技能:培养学生分析问题、解决问题的能力以及编制程序实现算
-            法的能力。
         </div>
       </div>
+      <div class="footContent">
+        <div class="title">| 分目标雷达图</div>
+        <div class="content3">
+          <div id="main"></div>
         </div>
-
-      <div class="grid-content picture">
-        <div class="title"><p>|&nbsp;&nbsp;课程总目标</p></div>
-        <div class="ac_pic"></div>
       </div>
-    </el-col>
-    <el-col :span="16">
-      <div class="grid-content object">
-        <div class="title"><p>|&nbsp;&nbsp;课程分目标</p></div>
-        <div class="slice"></div>
     </div>
-    </el-col>
+    <div class="rightContent">
-  </el-row>
+      <div class="title" style="
+          width: 100%;
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          padding: 0 20px;
+          height: 60px;">
+        <div class="left2">| 课程分目标</div>
+        <div class="right2">
+          <!-- <el-button type="primary" @click="addBook">新增</el-button> -->
+        </div>
+      </div>
+      <div class="content2">
+        <el-scrollbar height="600px">
+          <ul class="objectLi">
+            <li v-for="(item, index) in data.courseObjectivesTrees" :key="item.id">
+              <div class="courseObject">
+                <!-- {{ filterTarger(item.targetId) }} -->
+                <div class="courseObject1">{{ item.name }}</div>
+                <div class="courseObject2">
+                  <!-- <el-button class="edit" type="text" @click="editBook(item)">
+                    编辑
+                  </el-button> -->
+                  <el-button type="primary" @click="addBook(item.id)">新增</el-button>
+                </div>
+              </div>
+              <div class="smallContent">
+                <el-scrollbar height="250px">
+                  <ul class="small">
+                    <li v-for="(obj, i) in item.contents" :key="obj.id">
+                      <div class="partObject">
+                        <div class="partObject1">
+                          <!-- {{ item.content }} -->
+                          <!-- {{ item.introduce }} -->
+                          课程目标{{ i + 1 }}
+                          <!-- {{ filterTarger(obj.targetId) }} -->
+                        </div>
+                        <div class="partObject2">
+                          <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">
+                        {{ obj.content }}
+                      </div>
+                    </li>
+                  </ul>
+                </el-scrollbar>
+              </div>
+            </li>
+          </ul>
+        </el-scrollbar>
+      </div>
+    </div>
+  </div>
+  <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="target">
+        <el-select v-model="formData.target" placeholder="Select" size="large" style="width: 240px">
+          <el-option v-for="item in targetList" :key="item.id" :label="item.label" :value="item.id"
+            :disabled="item.disabled" />
+        </el-select>
+      </el-form-item> -->
+      <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>
+</template>
+<!-- <script setup>
+import {ref} 'vue'
+const li
+</script> -->
 
-<style scoped>
+<style lang="scss" scoped>
-.el-row {
+#main {
-  margin-bottom: 20px;
+  padding: 15px;
+  width: 100%;
+  height: 100%;
 }
-.el-col {
+
-  border-radius: 4px;
+.container {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  width: 100%;
+
+  padding: 0 10px 0 10px;
+  justify-content: space-around;
 }
-.bg-purple {
+
-  background: #d3dce6;
+.leftContent {
+  width: 450px;
+  height: 730px;
+  margin: 10px;
+
+  .topContent {
+    border-radius: 20px 20px 0 0px;
+    height: 280px;
+    background-color: #74deff;
+    margin-button: 5px;
+    background-image: linear-gradient(to right, #4984ff, #74deff);
   }
-.bg-purple-light {
+
-  background: #e5e9f2;
+  .footContent {
+    border-radius: 20px;
+    margin-top: 20px;
+    height: 430px;
+    background-color: #ffa674;
+    background-image: linear-gradient(to right, #f9e397, #ffa674);
   }
-.grid-content {
-  border-radius: 4px;
-  display: flex;
-  flex-direction: column;
 }
-.ac_content {
+
-  background: linear-gradient(180deg, #c7e3ff 0%, #ffffff 100%);
+.rightContent {
-  border-radius: 29px 29px 29px 29px;
+  margin: 10px;
-  display: flex;
+  width: 950px;
-  align-items: center;
+  height: 730px;
-  justify-content: center;
+  background-image: linear-gradient(to right, #4984ff, #74deff);
-  height: 206px;
+  border-radius: 20px;
+}
+
+.title {
+  padding-left: 30px;
+  font-size: 24px;
+  font-weight: 600;
+  color: #fff;
+  height: 40px;
+  line-height: 40px;
+  padding-top: 10px;
+}
+
+.content1 {
+  border-radius: 20px 20px 0 0px;
+  margin-top: 20px;
+  width: 100%;
+  height: 220px;
+  background-color: #fff;
+  background-image: linear-gradient(#c7e3ff, #ffffff);
+
+  .textarea {
+    width: 100%;
+    border: none;
+    background: transparent;
+    padding: 20px;
+    height: 215px;
   }
-.ma_content {
+
-  height: 160px;
+  p {
-  font-family: Inter, Inter;
+    padding: 30px;
-  font-weight: 400;
     font-size: 16px;
-  color: #333333;
-  line-height: 20px;
-  text-align: left;
-  font-style: normal;
-  text-transform: none;
-  margin-left: 33px;
-  margin-right: 33px;
-}
-.ac_pic {
-  height: 488px;
-  background: linear-gradient(180deg, #ffe9c7 0%, #ffffff 100%);
-  border-radius: 29px 29px 29px 29px;
-}
-img {
-  order: -1;
-}
-.object {
-  height: 857px;
-  background: linear-gradient(180deg, #4984ff 0%, #74deff 100%);
-  border-radius: 29px 29px 29px 29px;
-}
-.slice {
-  height: 791px;
-  background: linear-gradient(180deg, #c7e3ff 0%, #ffffff 100%);
-  border-radius: 29px 29px 29px 29px;
-}
-.picture {
-  height: 553px;
-  margin-top: 28px;
-  border-radius: 29px 29px 29px 29px;
-  background-image: linear-gradient(to right, #f9e397, #ffa674);
   }
-.main {
+}
-  height: 272px;
+
-  border-radius: 29px 29px 29px 29px;
+.content2 {
-  background-image: linear-gradient(to right, #4984ff, #74deff);
+  border-radius: 20px;
+  padding: 10px;
+  width: 100%;
+  height: 670px;
+  background-color: #fff;
+  background-image: linear-gradient(#c7e3ff, #ffffff);
+
+  .objectLi>li {
+    width: 845px;
+    height: 250px;
+    // margin: 40px;
+    // background-color: #ffffff;
+    border-radius: 5px;
+    margin: 20px;
+
+    .courseObject {
+      height: 45px;
+      line-height: 40px;
       display: flex;
-  justify-content: end;
+      align-items: center;
+      justify-content: space-between;
+      padding: 0 20px;
+      border-bottom: 1px solid #e7e7e7;
+
+      .courseObject1 {
+        height: 30px;
+        line-height: 30px;
+        font-size: 14px;
+        background-color: #6093ff;
+        padding: 0px 16px;
+        color: #fff;
       }
-.title {
+
-  flex: 1;
+      .courseObject2 {
+        font-size: 14px;
+        color: #0052d9;
+      }
+    }
+  }
+
+  // overflow-y: auto
+  .smallContent {
+    //  border-radius: 20px;
+    padding: 10px;
+    width: 100%;
+    height: 200px;
+    background-color: #fff;
+    background-image: linear-gradient(#c7e3ff, #ffffff);
+  }
+
+  .small>li {
+    // display: inline-flex;
+    width: 650px;
+    height: 150px;
+    // margin: 40px;
+    background-color: #ffffff;
+    border-radius: 5px;
+    margin: 20px;
+
+    .partObject {
+      height: 45px;
+      line-height: 40px;
       display: flex;
       align-items: center;
+      justify-content: space-between;
+      padding: 0 20px;
+      border-bottom: 1px solid #e7e7e7;
+
+      .partObject1 {
+        height: 30px;
+        line-height: 30px;
+        font-size: 14px;
+        background-color: #6093ff;
+        padding: 0px 16px;
+        color: #fff;
       }
-p {
+
-  height: 29px;
+      .partObject2 {
-  font-family: Inter, Inter;
+        font-size: 14px;
-  font-weight: bold;
+        color: #0052d9;
-  margin-left: 34px;
+      }
-  font-size: 24px;
+    }
-  color: #ffffff;
+
-  line-height: 28px;
+    .partObjectIntroduce {
-  text-align: left;
+      height: 149px;
-  font-style: normal;
+      font-size: 16px;
-  text-transform: none;
+      padding: 15px;
+    }
+  }
+}
+
+.content3 {
+  border-radius: 20px;
+  margin-top: 20px;
+  width: 100%;
+  height: 370px;
+  background-color: #fff;
+  background-image: linear-gradient(#ffe9c7, #ffffff);
 }
 </style>

src/views/course/CourseObjectives111.vue

@@ -0,0 +1,476 @@
+<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 {useRoute } from 'vue-router'
+import { getCourseList } from '@/api/courseChaptersApi'
+const route = useRoute()
+// id ： 分目标id
+// targetId ： 选中的分类
+const booksList = ref([
+  { id: 1, targetId: 1, introduce: '内容111111' },
+  // { id: 3, introduce: '内容333333' },
+  // { id: 4, introduce: '内容333333' },
+])
+
+const courseList = ref([
+  { id: 1, specific: '思政目标', booklist: [{ id: 1, targetId: 1, introduce: '内容111111' }] },
+  { id: 2, specific: '知识目标', booklist: [{ id: 1, targetId: 1, introduce: '内容222222' }] },
+  { id: 3, specific: '能力目标', booklist: [{ id: 1, targetId: 1, introduce: '内容333333' }] },
+  { id: 4, specific: '素质目标', booklist: [{ id: 1, targetId: 1, introduce: '内容444444' }] },
+])
+const targetList = ref([
+  {
+    label: '课程目标一',
+    id: 1,
+    disabled: false,
+  },
+  {
+    label: '课程目标二',
+    disabled: false,
+    id: 2,
+  },
+  {
+    label: '课程目标三',
+    id: 3,
+    disabled: false,
+  },
+])
+const formData = ref({
+  id: null,
+  target: '',
+  description: '',
+})
+const activeIndex = ref(0)
+const addBook = (index) => {
+  activeIndex.value = index
+  dialogVisible.value = true
+  updateDisabledStatus()
+}
+const text = ref('我是后台获取的值')
+const textChange = (val) => {
+  console.log(text.value)
+}
+// 弹窗
+const dialogVisible = ref(false)
+// 关闭弹窗
+const handleClose = () => {
+  dialogVisible.value = false
+}
+// 弹窗提交事件
+const submit = () => {
+  // 判断当前点击的是新增还是修改
+  if (flog.value) {
+    console.log('编辑', formData.value.target)
+    // 找到新增的一项
+    const index = booksList.value.findIndex(
+      (item) => formData.value.id == item.id,
+    )
+    console.log(index, 'index')
+    console.log(booksList.value[index])
+    booksList.value[index].id = formData.value.id
+    booksList.value[index].targetId = formData.value.target
+    booksList.value[index].introduce = formData.value.description
+    close()
+  } else {
+    courseList.value[activeIndex.value].booklist.push({
+      id: booksList.value.length + 1,
+      targetId: formData.value.target,
+      introduce: formData.value.description,
+    })
+    close()
+    flog.value = false
+  }
+}
+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 flog = ref(false)
+const editBook = (obj) => {
+  updateDisabledStatus()
+  flog.value = true
+  console.log(obj)
+  formData.value.id = obj.id
+  formData.value.target = obj.targetId
+  formData.value.description = obj.introduce
+  dialogVisible.value = true
+}
+const del = (id) => {
+  // console.log(id);
+  courseList.booksList.value = booksList.value.filter((item) => item.id !== id)
+}
+
+// const disableChange = (id) => {
+//   const index = booksList.value.findIndex((item,index) => item.id === id)
+//   console.log(index);
+//   if(index){
+//     targetList.value[index].disabled = false
+//   }
+// }
+// 定义一个方法来更新 targetList 中的 disabled 属性
+const updateDisabledStatus = () => {
+  // 遍历 targetList
+  targetList.value.forEach((targetItem) => {
+    // 检查 booksList 中是否有相同的 id
+    const hasIdInBooks = booksList.value.some(
+      (bookItem) => bookItem.id === targetItem.id,
+    )
+    // 如果存在，则设置 disabled 为 true
+    if (hasIdInBooks) {
+      targetItem.disabled = true
+    }
+  })
+}
+const list=ref([])
+const content88=ref()
+const courseId = ref(0)
+onMounted(async() => {
+  courseId.value = route.query.id
+  console.log(courseId.value);
+  const res = await getCourseList({ id: courseId.value })
+  console.log(res);
+  list.value=res.data
+  console.log(list.value);
+  content88.value = list.value[0].contents[0].content
+  console.log(list.value[0].contents[0].content);
+  console.log(content88.value);
+  
+
+  let chartDom = document.getElementById('main')
+  let myChart = echarts.init(chartDom)
+  let option
+  option = {
+    title: {
+      text: '分目标',
+    },
+    legend: {
+      data: ['Allocated Budget', 'Actual Spending'],
+    },
+    radar: {
+      // shape: 'circle',
+      indicator: [
+        { name: 'Sales', max: 6500 },
+        { name: 'Administration', max: 16000 },
+        { name: 'Information Technology', max: 30000 },
+        { name: 'Customer Support', max: 38000 },
+        { name: 'Development', max: 52000 },
+        { name: 'Marketing', max: 25000 },
+      ],
+    },
+    series: [
+      {
+        name: 'Budget vs spending',
+        type: 'radar',
+        data: [
+          {
+            value: [4200, 3000, 20000, 35000, 50000, 18000],
+            name: 'Allocated Budget',
+          },
+          {
+            value: [5000, 14000, 28000, 26000, 42000, 21000],
+            name: 'Actual Spending',
+          },
+        ],
+      },
+    ],
+  }
+
+  option && myChart.setOption(option)
+})
+</script>
+<!-- v-model="text" -->
+<template>
+  <div class="container">
+    <div class="leftContent">
+      <div class="topContent">
+        <div class="title">| 课程总目标</div>
+        <div class="content1">
+          <textarea class="textarea" @change="textChange">{{ content88 }}</textarea>
+        </div>
+      </div>
+      <div class="footContent">
+        <div class="title">| 分目标雷达图</div>
+        <div class="content3">
+          <div id="main"></div>
+        </div>
+      </div>
+    </div>
+    <div class="rightContent">
+      <div class="title" style="
+          width: 100%;
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          padding: 0 20px;
+          height: 60px;">
+        <div class="left2">| 课程分目标</div>
+        <div class="right2">
+          <!-- <el-button type="primary" @click="addBook">新增</el-button> -->
+        </div>
+      </div>
+      <div class="content2">
+        <el-scrollbar height="600px">
+          <ul class="objectLi">
+            <li v-for="(item, index) in courseList" :key="item.id">
+              <div class="courseObject">
+                <!-- {{ filterTarger(item.targetId) }} -->
+                <div class="courseObject1">{{ item.specific }}</div>
+                <div class="courseObject2">
+                  <!-- <el-button class="edit" type="text" @click="editBook(item)">
+                    编辑
+                  </el-button> -->
+                  <el-button type="primary" @click="addBook(index)">新增</el-button>
+                </div>
+              </div>
+              <div class="smallContent">
+                <el-scrollbar height="250px">
+                  <ul class="small">
+                    <li v-for="(obj, i) in item.booklist" :key="obj.id">
+                      <div class="partObject">
+                        <div class="partObject1">
+                          <!-- {{ item.introduce }} -->
+                          课程目标{{ i+1 }}
+                          <!-- {{ filterTarger(obj.targetId) }} -->
+                        </div>
+                        <div class="partObject2">
+                          <el-button class="edit" type="text" @click="editBook(obj)">
+                            编辑
+                          </el-button>
+                          <el-button class="destroy" type="text" @click="del(obj.id)">
+                            删除
+                          </el-button>
+                        </div>
+                      </div>
+                      <div class="partObjectIntroduce">
+                        {{ obj.introduce }}
+                      </div>
+                    </li>
+                  </ul>
+                </el-scrollbar>
+              </div>
+            </li>
+          </ul>
+        </el-scrollbar>
+      </div>
+    </div>
+  </div>
+  <el-dialog v-if="dialogVisible" v-model="dialogVisible" title="新增目标" width="500" :before-close="handleClose">
+    <el-form :model="formData" label-width="auto" style="max-width: 600px">
+      <!-- <el-form-item label="目标" prop="target">
+        <el-select v-model="formData.target" placeholder="Select" size="large" style="width: 240px">
+          <el-option v-for="item in targetList" :key="item.id" :label="item.label" :value="item.id"
+            :disabled="item.disabled" />
+        </el-select>
+      </el-form-item> -->
+      <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>
+</template>
+<!-- <script setup>
+import {ref} 'vue'
+const li
+</script> -->
+
+<style lang="scss" scoped>
+#main {
+  padding: 15px;
+  width: 100%;
+  height: 100%;
+}
+
+.container {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  width: 100%;
+
+  padding: 0 10px 0 10px;
+  justify-content: space-around;
+}
+
+.leftContent {
+  width: 450px;
+  height: 730px;
+  margin: 10px;
+
+  .topContent {
+    border-radius: 20px 20px 0 0px;
+    height: 280px;
+    background-color: #74deff;
+    margin-button: 5px;
+    background-image: linear-gradient(to right, #4984ff, #74deff);
+  }
+
+  .footContent {
+    border-radius: 20px;
+    margin-top: 20px;
+    height: 430px;
+    background-color: #ffa674;
+    background-image: linear-gradient(to right, #f9e397, #ffa674);
+  }
+}
+
+.rightContent {
+  margin: 10px;
+  width: 950px;
+  height: 730px;
+  background-image: linear-gradient(to right, #4984ff, #74deff);
+  border-radius: 20px;
+}
+
+.title {
+  padding-left: 30px;
+  font-size: 24px;
+  font-weight: 600;
+  color: #fff;
+  height: 40px;
+  line-height: 40px;
+  padding-top: 10px;
+}
+
+.content1 {
+  border-radius: 20px 20px 0 0px;
+  margin-top: 20px;
+  width: 100%;
+  height: 220px;
+  background-color: #fff;
+  background-image: linear-gradient(#c7e3ff, #ffffff);
+
+  .textarea {
+    width: 100%;
+    border: none;
+    background: transparent;
+    padding: 20px;
+    height: 215px;
+  }
+
+  p {
+    padding: 30px;
+    font-size: 16px;
+  }
+}
+
+.content2 {
+  border-radius: 20px;
+  padding: 10px;
+  width: 100%;
+  height: 670px;
+  background-color: #fff;
+  background-image: linear-gradient(#c7e3ff, #ffffff);
+
+  .objectLi > li {
+    width: 845px;
+    height: 250px;
+    // margin: 40px;
+    // background-color: #ffffff;
+    border-radius: 5px;
+    margin: 20px;
+    .courseObject {
+      height: 45px;
+      line-height: 40px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 0 20px;
+      border-bottom: 1px solid #e7e7e7;
+
+      .courseObject1 {
+        height: 30px;
+        line-height: 30px;
+        font-size: 14px;
+        background-color: #6093ff;
+        padding: 0px 16px;
+        color: #fff;
+      }
+
+      .courseObject2 {
+        font-size: 14px;
+        color: #0052d9;
+      }
+    }
+  }
+  // overflow-y: auto
+  .smallContent {
+    //  border-radius: 20px;
+    padding: 10px;
+    width: 100%;
+    height: 200px;
+    background-color: #fff;
+    background-image: linear-gradient(#c7e3ff, #ffffff);
+  }
+  .small > li {
+    // display: inline-flex;
+    width: 750px;
+    height: 150px;
+    // margin: 40px;
+    background-color: #ffffff;
+    border-radius: 5px;
+    margin: 20px;
+
+    .partObject {
+      height: 45px;
+      line-height: 40px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 0 20px;
+      border-bottom: 1px solid #e7e7e7;
+
+      .partObject1 {
+        height: 30px;
+        line-height: 30px;
+        font-size: 14px;
+        background-color: #6093ff;
+        padding: 0px 16px;
+        color: #fff;
+      }
+
+      .partObject2 {
+        font-size: 14px;
+        color: #0052d9;
+      }
+    }
+
+    .partObjectIntroduce {
+      height: 149px;
+      font-size: 16px;
+      padding: 15px;
+    }
+  }
+}
+
+.content3 {
+  border-radius: 20px;
+  margin-top: 20px;
+  width: 100%;
+  height: 370px;
+  background-color: #fff;
+  background-image: linear-gradient(#ffe9c7, #ffffff);
+}
+</style>

src/views/course/basicCourseInformation.vue

@@ -2,20 +2,18 @@
 import { ref, onMounted } from 'vue'
 // import axios from 'axios'
 import courseEdit from './components/courseEdit.vue'
-import { Plus, Search } from '@element-plus/icons-vue'
+import { Plus } from '@element-plus/icons-vue'
 import {
   getCourseListApi,
   deleteCourseApi,
-  getCourseObjectApi,
   getTeacherListApi,
 } from '../../api/user/crouse'
 import { ElMessageBox, ElMessage } from 'element-plus'
 // import router from '@/router'
-import { useRouter, useRoute } from 'vue-router'
+import { useRouter } from 'vue-router'
 const router = useRouter()
 // const route = useRoute()
 // console.log(route)
-
 // import { client } from '@/utils/alioss.js'
 // 课程列表
 const courseList = ref([])
@@ -163,12 +161,15 @@ const CloseCouresNameChangeEvent = () => {
       <div class="btn">
         <!-- <el-button type="primary" round size="large">全部课程</el-button>
       <el-button type="primary" round plain size="large">我的文件夹</el-button> -->
-
         <el-form inline>
           <el-form-item label="课程教师：" class="short-form-item">
             <el-select v-model="params.teacher">
-              <el-option v-for="teachers in teacherList" :key="teachers.username" :value="teachers.username"
+              <el-option
-                :label="teachers.name"></el-option>
+                v-for="teachers in teacherList"
+                :key="teachers.username"
+                :value="teachers.username"
+                :label="teachers.name"
+              ></el-option>
             </el-select>
           </el-form-item>
           <el-form-item label="课程类别：" class="short-form-item">
@@ -190,22 +191,19 @@ const CloseCouresNameChangeEvent = () => {
               <el-option label="考察" value="2"></el-option>
             </el-select>
           </el-form-item>
-
           <el-form-item>
             <el-button type="primary" @click="onSearch">搜索</el-button>
             <el-button type="primary" plain @click="onReset">重置</el-button>
           </el-form-item>
         </el-form>
-
         <div class="course">
           <ul class="course_list">
-            <li @click="onAddCourse()">
+            <li @click="onAddCourse()" class="add_course">
               <div class="plus">
                 <el-icon class="avatar-uploader-icon">
                   <Plus />
                 </el-icon>
               </div>
-
               <h2 class="course_name">{{ course_name }}</h2>
               <!-- <p class="teacher_name">讲师：{{ courseList.teacher }}</p>
               <p class="credit">
@@ -220,7 +218,6 @@ const CloseCouresNameChangeEvent = () => {
               <h2 class="course_name" @click="onEditCourse(item)">
                 {{ item.name }}
               </h2>
-
               <p class="teacher_name">讲师：{{ item.teacher }}</p>
               <p class="credit">
                 <span>{{ item.classhours }}</span>
@@ -231,22 +228,36 @@ const CloseCouresNameChangeEvent = () => {
               <el-icon class="del" @click="onDeleteCourse(item.id)">
                 <Delete />
               </el-icon>
-
+              <el-button
-              <el-button class="object" round plain @click="onGetCourseObject(item.id)">
+                class="object"
+                round
+                plain
+                @click="onGetCourseObject(item.id)"
+              >
                 查看课程目标
               </el-button>
             </li>
           </ul>
         </div>
-        <el-pagination v-model:current-page="params.pageNo" v-model:page-size="params.pageSize"
+        <el-pagination
-          :page-sizes="[2, 5, 7, 10]" :background="true" layout="jumper,total, sizes, prev, pager, next " :total="total"
+          v-model:current-page="params.pageNo"
-          @size-change="handleSizeChange" @current-change="handleCurrentChange"
+          v-model:page-size="params.pageSize"
-          style="margin-top: 10px; justify-content: center" />
+          :page-sizes="[2, 5, 7, 10]"
+          :background="true"
+          layout="jumper,total, sizes, prev, pager, next "
+          :total="total"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+          style="margin-top: 10px; justify-content: center"
+        />
       </div>
-      <course-edit ref="drawer" @success="onSuccess" @couresNameChange="couresNameChangeEvent"
+      <course-edit
-        @CloseCouresNameChange="CloseCouresNameChangeEvent" @creditChange="creditChangeEvent"
+        ref="drawer"
-        @classhoursChange="classhoursChangeEvent" @ClosecreditChange="ClosecreditChangeEvent"
+        @success="onSuccess"
-        @CloseclasshoursChange="CloseclasshoursChangeEvent" :flog="flog"></course-edit>
+        @couresNameChange="couresNameChangeEvent"
+        @CloseCouresNameChange="CloseCouresNameChangeEvent"
+        :flog="flog"
+      ></course-edit>
     </div>
   </div>
 </template>
@@ -274,7 +285,6 @@ const CloseCouresNameChangeEvent = () => {
 //   // margin: 20px;
 //   // padding-left: 50px;
 // }
-
 .search {
   width: 50%;
   display: flex;
@@ -293,7 +303,6 @@ const CloseCouresNameChangeEvent = () => {
 }
 
 .course {
-
   // display: flex;
   // flex: 0 0 25%;
   // justify-content: space-between;
@@ -331,6 +340,9 @@ const CloseCouresNameChangeEvent = () => {
       margin-left: 30px;
       margin-top: 10px;
       font-weight: bold;
+      &:hover {
+        cursor: pointer;
+      }
     }
 
     img {
@@ -353,19 +365,6 @@ const CloseCouresNameChangeEvent = () => {
         color: #0052ff;
       }
     }
-
-    h2 {
-      font-family: Inter-Bold;
-      color: #333;
-      font-size: 24px;
-      margin-left: 30px;
-      margin-top: 10px;
-      font-weight: bold;
-
-      &:hover {
-        cursor: pointer;
-      }
-    }
   }
 
   .del {
@@ -386,17 +385,34 @@ const CloseCouresNameChangeEvent = () => {
 .plus {
   width: 100%;
   height: 178px;
+  &:hover {
+    cursor: pointer;
+  }
 
   // background-position: center center;
   .el-icon.avatar-uploader-icon {
-    font-size: 28px;
+    font-size: 50px;
     color: #8c939d;
     width: 100%;
     height: 178px;
+    margin-top: 20px;
     text-align: center;
   }
 }
-
+.add_course {
+  border: 2px dashed rgb(143, 139, 139);
+  h2 {
+    font-size: 40px;
+    text-align: center;
+    font-family: Inter-Bold;
+    color: #535050;
+    font-weight: bold;
+    margin-top: 20px;
+    &:hover {
+      cursor: pointer;
+    }
+  }
+}
 .short-form-item {
   width: 250px;
   margin-right: 65px;

src/views/courseResources/componse/resourceAdd.vue

@@ -1,5 +1,141 @@
-<script setup></script>
+<script setup>
+import { ref } from 'vue'
+const props = defineProps(['dafulIndex'])
+
+//默认抽屉隐藏
+const visibleDramwer = ref(false)
+//默认数据
+const defaultForm = {
+  description: '',
+  id: '',
+  img: '',
+  name: '',
+  type: '',
+  path: '',
+}
+//准备数据
+const formModel = ref({
+  ...defaultForm,
+})
+//图片上传逻辑
+const imgUrl = ref('')
+const onSelectFile = (uploadFile) => {
+  imgUrl.value = URL.createObjectURL(uploadFile.raw)
+}
+//定义一个selectedOption属性，用于存储当前选中的值
+// const selectedOption = ref('')
+//上传文件
+// import tool from '@/utils/oss.js'
+// const FileList = ref([])
+// const upload = async (option) => {
+//   const res = await tool.oss.upload(option.file)
+//   console.log(22, res)
+//   console.log(res.name)
+//   const url = 'https://wenyu132.oss-cn-beijing.aliyuncs.com/' + res.name
+//   console.log(url)
+// }
+//组件对外暴露一个open 方法 根据传来的参数区分添加还是编辑
+const open = (row) => {
+  visibleDramwer.value = true
+  if (row.id) {
+    //需要基于row.id 发送请求，获取编辑的详情数据，进行回显
+    console.log('编辑回显')
+  } else {
+    //重置表单数据
+    formModel.value = {
+      ...defaultForm,
+    }
+  }
+}
+
+defineExpose({
+  open,
+})
+
+const selectVal = ref(props.dafulIndex)
+const selectOp = ref([
+  { label: 'ppt', value: '1' },
+  { label: '图片', value: '2' },
+  { label: '视频', value: '3' },
+  { label: 'PDF', value: '4' },
+  { label: '文件', value: '5' },
+  { label: '音频', value: '6' },
+])
+function handleSel() {}
+</script>
 <template>
-  <div></div>
+  <el-drawer
+    v-model="visibleDramwer"
+    :title="formModel.id ? '编辑资源' : '添加资源'"
+    direction="rtl"
+    size="50%"
+  >
+    <!-- 添加资源表单 -->
+    <el-form :model="formModel" ref="formRef" label-width="100px">
+      <el-form-item label="资源名称" prop="name">
+        <el-input
+          v-model="formModel.name"
+          placeholder="请输入资源名称"
+        ></el-input>
+      </el-form-item>
+      <el-form-item label="资源类型">
+        <div class="flex flex-wrap gap-4 items-center">
+          <el-select
+            @change="handleSel"
+            v-model="selectVal"
+            placeholder="Select"
+            size="large"
+            style="width: 240px"
+          >
+            <el-option
+              v-for="item in selectOp"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </div>
+      </el-form-item>
+      <el-form-item label="资源简介" prop="description">
+        资源简介
+        <!-- <el-input
+          v-model="formModel.description"
+          placeholder="请输入资源简介"
+        ></el-input> -->
+      </el-form-item>
+      <el-form-item label="上传资源" prop="img">
+        <!-- 此处需要关闭element-plus的自动上传，不需要配置action等参数 
+        只需要前端的本地预览图片，无需在提交前上传图标
+      -->
+        <el-upload
+          class="avatar-uploader"
+          :show-file-list="false"
+          :auto-upload="false"
+          :onchange="onSelectFile"
+        >
+          <img v-if="imgUrl" :src="imgUrl" class="avatar" />
+          <el-icon v-else class="avatar-uploader-icon">
+            <Plus />
+          </el-icon>
+        </el-upload>
+        <!-- <el-upload
+          v-model:file-list="FileList"
+          :http-request="upload"
+          class="upload-demo"
+          multiple
+        >
+          <el-button type="primary">点击上传</el-button>
+          <template #tip>
+            <div class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div>
+          </template>
+</el-upload> -->
+      </el-form-item>
+
+      <el-form-item class="bottom-box">
+        <el-button type="info" @click="onRemoval">取消</el-button>
+        <el-button type="primary">确定</el-button>
+      </el-form-item>
+    </el-form>
+  </el-drawer>
 </template>
 <style scoped></style>

src/views/courseResources/index.vue

@@ -7,14 +7,14 @@ import pdf from '@/assets/icons/pdf (1).png'
 import test from '@/assets/icons/文件.png'
 import audio from '@/assets/icons/音频1.png'
 
+import { ElMessageBox, ElMessage } from 'element-plus'
 import { ref } from 'vue'
-//默认抽屉隐藏
-const visibleDramwer = ref(false)
-//定义一个selectedOption属性，用于存储当前选中的值
-const selectedOption = ref('')
 
-import { getpptResourceListService } from '@/api/user/resource.js'
+import { LearningRecordsControllerService } from '../../../generated/services/LearningRecordsControllerService'
-import { DelpptResourceListService } from '@/api/user/resource.js'
+import { CourseResourceControllerService } from '../../../generated/services/CourseResourceControllerService'
+
+import resourceAdd from './componse/resourceAdd.vue'
+
 const total = ref(0)
 const pptresourceList = ref([])
 const loading = ref(false)
@@ -27,7 +27,11 @@ const params = ref({
 //获取资源列表
 const getpptresourceList = async () => {
   loading.value = true
-  const res = await getpptResourceListService(params.value)
+  const res = await CourseResourceControllerService.getAllUsingGet1(
+    params.value.pagenum,
+    params.value.pagesize,
+    params.value.type,
+  )
   pptresourceList.value = res.data.records
   console.log(res)
   //获取资源列表
@@ -59,81 +63,49 @@ const onCurrentChange = (page) => {
 
 //删除资源 -通过ID进行删除
 const onDeleteResource = async (ids) => {
+  console.log(111111111111111)
   await ElMessageBox.confirm('你确认删除该条浏览信息吗？', '温馨提示', {
     type: 'warning',
     confirmButtonText: '确认',
     cancelButtonText: '取消',
   })
-  await DelpptResourceListService(ids)
+  console.log(ids)
-  // console.log(ids)
+  await CourseResourceControllerService.deleteRecordsUsingDelete1(ids)
   ElMessage({ type: 'success', message: '删除成功' })
   getpptresourceList()
 }
-//上传文件
+
-import tool from '@/utils/oss.js'
+const param = ref({
-const FileList = ref([])
+  coursesId: '',
-const upload = async (option) => {
+  userId: '1',
-  const res = await tool.oss.upload(option.file)
+  open: '1',
-  console.log(22, res)
+  download: '0',
-  console.log(res.name)
+  content: '',
-  const url = 'https://wenyu132.oss-cn-beijing.aliyuncs.com/' + res.name
+  address: '/portal',
-  console.log(url)
+  type: '4',
+})
+//点击生成浏览记录
+const generateRecords = async (rescource) => {
+  param.value.content = rescource.img
+  param.value.coursesId = rescource.id.toString()
+  await LearningRecordsControllerService.saveRecordsUsingPost1(param.value)
+  // console.log(param)
+}
+
+const resourceAddRef = ref()
+//添加资源
+const onAddResource = () => {
+  resourceAddRef.value.open({})
+}
+//编辑资源
+const onEditResource = (row) => {
+  resourceAddRef.value.open(row)
 }
 </script>
 <template>
   <div>
     <div class="top">
-      <el-button @click="visibleDramwer = true">添加资源</el-button>
+      <el-button @click="onAddResource">添加资源</el-button>
-      <el-drawer v-model="visibleDramwer">
-        <!-- 添加资源表单 -->
-        <el-form>
-          <el-form-item label="资源名称">
-            <el-input placeholder="请输入资源名称"></el-input>
-          </el-form-item>
-          <el-form-item label="资源类型">
-            <el-select v-model="selectedOption" placeholder="资源类型">
-              <el-option
-                class="vertical-option"
-                label="选项1"
-                value="1"
-              ></el-option>
-              <el-option
-                class="vertical-option"
-                label="选项2"
-                value="2"
-              ></el-option>
-              <el-option
-                class="vertical-option"
-                label="选项3"
-                value="3"
-              ></el-option>
-            </el-select>
-          </el-form-item>
-          <el-form-item label="资源简介">
-            <el-input placeholder="请输入资源简介"></el-input>
-          </el-form-item>
-          <el-form-item label="上传资源">
-            <el-upload
-              v-model:file-list="FileList"
-              :http-request="upload"
-              class="upload-demo"
-              multiple
-            >
-              <el-button type="primary">点击上传</el-button>
-              <template #tip>
-                <div class="el-upload__tip">
-                  只能上传jpg/png文件,且不超过500kb
-                </div>
-              </template>
-            </el-upload>
-          </el-form-item>
-
-          <el-form-item class="bottom-box">
-            <el-button type="info" @click="onRemoval">取消</el-button>
-            <el-button type="primary">确定</el-button>
-          </el-form-item>
-        </el-form>
-      </el-drawer>
     </div>
     <div class="body">
       <div class="nav">
@@ -155,7 +127,7 @@ const upload = async (option) => {
             </div>
           </el-col>
 
-          <el-col :span="4" @click="showComponent('3')">
+          <el-col :span="4" @click="changeType('3')">
             <div class="nav-info">
               <div class="nav-info-pic">
                 <img style="height: 50px" :src="video" />
@@ -165,13 +137,13 @@ const upload = async (option) => {
           </el-col>
           <el-col :span="4">
             <div class="nav-info">
-              <div class="nav-info-pic" @click="showComponent('4')">
+              <div class="nav-info-pic" @click="changeType('4')">
                 <img style="height: 50px" :src="pdf" />
               </div>
               <div class="nav-info-name">PDF</div>
             </div>
           </el-col>
-          <el-col :span="4" @click="showComponent('5')">
+          <el-col :span="4" @click="changeType('5')">
             <div class="nav-info">
               <div class="nav-info-pic">
                 <img style="height: 50px" :src="test" />
@@ -179,7 +151,7 @@ const upload = async (option) => {
               <div class="nav-info-name">文件</div>
             </div>
           </el-col>
-          <el-col :span="4" @click="showComponent('6')">
+          <el-col :span="4" @click="changeType('6')">
             <div class="nav-info">
               <div class="nav-info-pic">
                 <img style="height: 50px" :src="audio" />
@@ -201,14 +173,14 @@ const upload = async (option) => {
             >
               <div>
                 <div class="icon">
-                  <el-icon @click="onDeleteResource(ids)">
+                  <el-icon @click="onDeleteResource(resource.id)">
                     <Delete />
                   </el-icon>
-                  <el-icon>
+                  <el-icon @click="onEditResource">
                     <Edit />
                   </el-icon>
                 </div>
-                <div class="vedio">
+                <div class="vedio" @click="generateRecords(resource)">
                   <img style="height: 200px" :src="resource.img" />
                 </div>
                 <div class="resource-info">
@@ -235,6 +207,11 @@ const upload = async (option) => {
             style="margin-top: 20px; justify-content: flex-end"
           />
         </div>
+        <!-- 添加编辑的抽屉 -->
+        <resource-add
+          :dafulIndex="params.type"
+          ref="resourceAddRef"
+        ></resource-add>
       </div>
     </div>
   </div>

vite.config.ts.timestamp-1718268044772-4deaaf3aeef01.mjs

@@ -0,0 +1,40 @@
+// vite.config.ts
+import vue from "file:///D:/aaa/teaching/Teaching_integration_platform_admin_template/node_modules/.pnpm/@vitejs+plugin-vue@5.0.4_vite@5.1.4_vue@3.4.19/node_modules/@vitejs/plugin-vue/dist/index.mjs";
+import path from "path";
+import { viteMockServe } from "file:///D:/aaa/teaching/Teaching_integration_platform_admin_template/node_modules/.pnpm/vite-plugin-mock@3.0.1_esbuild@0.19.12_mockjs@1.1.0_vite@5.1.4/node_modules/vite-plugin-mock/dist/index.mjs";
+import { createSvgIconsPlugin } from "file:///D:/aaa/teaching/Teaching_integration_platform_admin_template/node_modules/.pnpm/vite-plugin-svg-icons@2.0.1_vite@5.1.4/node_modules/vite-plugin-svg-icons/dist/index.mjs";
+var vite_config_default = ({ command }) => {
+  return {
+    plugins: [
+      vue(),
+      viteMockServe({
+        enable: command === "serve"
+      }),
+      createSvgIconsPlugin({
+        // Specify the icon folder to be cached
+        iconDirs: [path.resolve(process.cwd(), "src/assets/icons")],
+        // Specify symbolId format
+        symbolId: "icon-[dir]-[name]"
+      })
+    ],
+    resolve: {
+      alias: {
+        "@": path.resolve("./src")
+        // 相对路径别名配置，使用 @ 代替 src
+      }
+    },
+    // 配置scss
+    css: {
+      preprocessorOptions: {
+        scss: {
+          javascriptEnabled: true,
+          additionalData: '@import "./src/styles/variable.scss";'
+        }
+      }
+    }
+  };
+};
+export {
+  vite_config_default as default
+};
+//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsidml0ZS5jb25maWcudHMiXSwKICAic291cmNlc0NvbnRlbnQiOiBbImNvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9kaXJuYW1lID0gXCJEOlxcXFxhYWFcXFxcdGVhY2hpbmdcXFxcVGVhY2hpbmdfaW50ZWdyYXRpb25fcGxhdGZvcm1fYWRtaW5fdGVtcGxhdGVcIjtjb25zdCBfX3ZpdGVfaW5qZWN0ZWRfb3JpZ2luYWxfZmlsZW5hbWUgPSBcIkQ6XFxcXGFhYVxcXFx0ZWFjaGluZ1xcXFxUZWFjaGluZ19pbnRlZ3JhdGlvbl9wbGF0Zm9ybV9hZG1pbl90ZW1wbGF0ZVxcXFx2aXRlLmNvbmZpZy50c1wiO2NvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9pbXBvcnRfbWV0YV91cmwgPSBcImZpbGU6Ly8vRDovYWFhL3RlYWNoaW5nL1RlYWNoaW5nX2ludGVncmF0aW9uX3BsYXRmb3JtX2FkbWluX3RlbXBsYXRlL3ZpdGUuY29uZmlnLnRzXCI7aW1wb3J0IHsgZGVmaW5lQ29uZmlnIH0gZnJvbSAndml0ZSdcclxuaW1wb3J0IHZ1ZSBmcm9tICdAdml0ZWpzL3BsdWdpbi12dWUnXHJcbmltcG9ydCBwYXRoIGZyb20gJ3BhdGgnXHJcbi8vIFx1NUJGQ1x1NTE2NW1vY2tcdTYzRDJcdTRFRjZcclxuaW1wb3J0IHsgdml0ZU1vY2tTZXJ2ZSB9IGZyb20gJ3ZpdGUtcGx1Z2luLW1vY2snXHJcbi8vIFx1NUJGQ1x1NTE2NXN2Z1x1OTE0RFx1N0Y2RVx1NjNEMlx1NEVGNlxyXG5pbXBvcnQgeyBjcmVhdGVTdmdJY29uc1BsdWdpbiB9IGZyb20gJ3ZpdGUtcGx1Z2luLXN2Zy1pY29ucydcclxuLy8gaHR0cHM6Ly92aXRlanMuZGV2L2NvbmZpZy9cclxuZXhwb3J0IGRlZmF1bHQgKHsgY29tbWFuZCB9OiBhbnkpID0+IHtcclxuICByZXR1cm4ge1xyXG4gICAgcGx1Z2luczogW1xyXG4gICAgICB2dWUoKSxcclxuICAgICAgdml0ZU1vY2tTZXJ2ZSh7XHJcbiAgICAgICAgZW5hYmxlOiBjb21tYW5kID09PSAnc2VydmUnLFxyXG4gICAgICB9KSxcclxuICAgICAgY3JlYXRlU3ZnSWNvbnNQbHVnaW4oe1xyXG4gICAgICAgIC8vIFNwZWNpZnkgdGhlIGljb24gZm9sZGVyIHRvIGJlIGNhY2hlZFxyXG4gICAgICAgIGljb25EaXJzOiBbcGF0aC5yZXNvbHZlKHByb2Nlc3MuY3dkKCksICdzcmMvYXNzZXRzL2ljb25zJyldLFxyXG4gICAgICAgIC8vIFNwZWNpZnkgc3ltYm9sSWQgZm9ybWF0XHJcbiAgICAgICAgc3ltYm9sSWQ6ICdpY29uLVtkaXJdLVtuYW1lXScsXHJcbiAgICAgIH0pLFxyXG4gICAgXSxcclxuICAgIHJlc29sdmU6IHtcclxuICAgICAgYWxpYXM6IHtcclxuICAgICAgICAnQCc6IHBhdGgucmVzb2x2ZSgnLi9zcmMnKSwgLy8gXHU3NkY4XHU1QkY5XHU4REVGXHU1Rjg0XHU1MjJCXHU1NDBEXHU5MTREXHU3RjZFXHVGRjBDXHU0RjdGXHU3NTI4IEAgXHU0RUUzXHU2NkZGIHNyY1xyXG4gICAgICB9LFxyXG4gICAgfSxcclxuICAgIC8vIFx1OTE0RFx1N0Y2RXNjc3NcclxuICAgIGNzczoge1xyXG4gICAgICBwcmVwcm9jZXNzb3JPcHRpb25zOiB7XHJcbiAgICAgICAgc2Nzczoge1xyXG4gICAgICAgICAgamF2YXNjcmlwdEVuYWJsZWQ6IHRydWUsXHJcbiAgICAgICAgICBhZGRpdGlvbmFsRGF0YTogJ0BpbXBvcnQgXCIuL3NyYy9zdHlsZXMvdmFyaWFibGUuc2Nzc1wiOycsXHJcbiAgICAgICAgfSxcclxuICAgICAgfSxcclxuICAgIH0sXHJcbiAgfVxyXG59XHJcbiJdLAogICJtYXBwaW5ncyI6ICI7QUFDQSxPQUFPLFNBQVM7QUFDaEIsT0FBTyxVQUFVO0FBRWpCLFNBQVMscUJBQXFCO0FBRTlCLFNBQVMsNEJBQTRCO0FBRXJDLElBQU8sc0JBQVEsQ0FBQyxFQUFFLFFBQVEsTUFBVztBQUNuQyxTQUFPO0FBQUEsSUFDTCxTQUFTO0FBQUEsTUFDUCxJQUFJO0FBQUEsTUFDSixjQUFjO0FBQUEsUUFDWixRQUFRLFlBQVk7QUFBQSxNQUN0QixDQUFDO0FBQUEsTUFDRCxxQkFBcUI7QUFBQTtBQUFBLFFBRW5CLFVBQVUsQ0FBQyxLQUFLLFFBQVEsUUFBUSxJQUFJLEdBQUcsa0JBQWtCLENBQUM7QUFBQTtBQUFBLFFBRTFELFVBQVU7QUFBQSxNQUNaLENBQUM7QUFBQSxJQUNIO0FBQUEsSUFDQSxTQUFTO0FBQUEsTUFDUCxPQUFPO0FBQUEsUUFDTCxLQUFLLEtBQUssUUFBUSxPQUFPO0FBQUE7QUFBQSxNQUMzQjtBQUFBLElBQ0Y7QUFBQTtBQUFBLElBRUEsS0FBSztBQUFBLE1BQ0gscUJBQXFCO0FBQUEsUUFDbkIsTUFBTTtBQUFBLFVBQ0osbUJBQW1CO0FBQUEsVUFDbkIsZ0JBQWdCO0FBQUEsUUFDbEI7QUFBQSxNQUNGO0FBQUEsSUFDRjtBQUFBLEVBQ0Y7QUFDRjsiLAogICJuYW1lcyI6IFtdCn0K