From d13383b4d88ae2e48901cec82ca30e9a2fce28f2 Mon Sep 17 00:00:00 2001
From: xy <2115269706@qq.com>
Date: Thu, 13 Jun 2024 17:48:52 +0800
Subject: [PATCH] 123

---
 src/views/course/CourseObjectives.vue | 489 +++++++++++++++++++++++++-
 1 file changed, 484 insertions(+), 5 deletions(-)

diff --git a/src/views/course/CourseObjectives.vue b/src/views/course/CourseObjectives.vue
index 87b0412..1110776 100644
--- a/src/views/course/CourseObjectives.vue
+++ b/src/views/course/CourseObjectives.vue
@@ -1,9 +1,488 @@
+<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'
+// 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: '思政目标' },
+  { id: 2, specific: '知识目标' },
+  { id: 3, specific: '能力目标' },
+  { id: 4, specific: '素质目标' },
+])
+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 addBook = () => {
+  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 {
+    booksList.value.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 = (item) => {
+  updateDisabledStatus()
+  flog.value = true
+  console.log(item)
+  formData.value.id = item.id
+  formData.value.target = item.targetId
+  formData.value.description = item.introduce
+  dialogVisible.value = true
+}
+const del = (id) => {
+  // console.log(id);
+  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
+    }
+  })
+}
+onMounted(() => {
+  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>
-  <div>课程目标</div>
+  <div class="container">
+    <div class="leftContent">
+      <div class="topContent">
+        <div class="title">| 课程总目标</div>
+        <div class="content1">
+          <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>
+    </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">新增</el-button>
+                </div>
+              </div>
+              <div class="smallContent">
+                <el-scrollbar height="250px">
+                  <ul class="small">
+                    <li v-for="(item, index) in booksList" :key="item.id">
+                      <div class="partObject">
+                        <div class="partObject1">
+                          {{ filterTarger(item.targetId) }}
+                        </div>
+                        <div class="partObject2">
+                          <el-button
+                            class="edit"
+                            type="text"
+                            @click="editBook(item)"
+                          >
+                            编辑
+                          </el-button>
+                          <el-button
+                            class="destroy"
+                            type="text"
+                            @click="del(item.id)"
+                          >
+                            删除
+                          </el-button>
+                        </div>
+                      </div>
+                      <div class="partObjectIntroduce">
+                        {{ item.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> -->
 
-<script lang="ts" setup>
-import {} from 'vue'
-</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: 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;
+      }
+
+      .partObject2 {
+        font-size: 14px;
+        color: #0052d9;
+      }
+    }
+
+    .partObjectIntroduce {
+      height: 149px;
+      font-size: 16px;
+      padding: 15px;
+    }
+  }
+}
 
-<style lang="scss" scoped></style>
+.content3 {
+  border-radius: 20px;
+  margin-top: 20px;
+  width: 100%;
+  height: 370px;
+  background-color: #fff;
+  background-image: linear-gradient(#ffe9c7, #ffffff);
+}
+</style>