合并解决冲突

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/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

@@ -15,7 +15,6 @@ import { useRouter, useRoute } from 'vue-router'
 const router = useRouter()
 // const route = useRoute()
 // console.log(route)
-
 // import { client } from '@/utils/alioss.js'
 // 课程列表
 const courseList = ref([])
@@ -163,7 +162,6 @@ 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">
@@ -190,13 +188,11 @@ 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()">
@@ -205,7 +201,6 @@ const CloseCouresNameChangeEvent = () => {
                   <Plus />
                 </el-icon>
               </div>
-
               <h2 class="course_name">{{ course_name }}</h2>
               <!-- <p class="teacher_name">讲师：{{ courseList.teacher }}</p>
               <p class="credit">
@@ -220,7 +215,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,7 +225,6 @@ const CloseCouresNameChangeEvent = () => {
               <el-icon class="del" @click="onDeleteCourse(item.id)">
                 <Delete />
               </el-icon>
-
               <el-button class="object" round plain @click="onGetCourseObject(item.id)">
                 查看课程目标
               </el-button>
@@ -274,7 +267,6 @@ const CloseCouresNameChangeEvent = () => {
 //   // margin: 20px;
 //   // padding-left: 50px;
 // }
-
 .search {
   width: 50%;
   display: flex;

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