111

.eslintrc.cjs

@@ -7,8 +7,11 @@ module.exports = {
     node: true,
     jest: true,
   },
-    "globals": {
+  globals: {
-      "VANTA": "readonly" //VANTA 已经cdn引入 这里拒绝eslint报错 全局声明一下
+    VANTA: 'readonly', //VANTA 已经cdn引入 这里拒绝eslint报错 全局声明一下
+    ElMessage: 'readonly',
+    ElMessageBox: 'readonly',
+    ElLoading: 'readonly',
   },
   /* 指定如何解析语法 */
   parser: 'vue-eslint-parser',
@@ -47,7 +50,7 @@ module.exports = {
     // typeScript (https://typescript-eslint.io/rules)
     '@typescript-eslint/no-unused-vars': 'error', // 禁止定义未使用的变量
     '@typescript-eslint/prefer-ts-expect-error': 'off', // 禁止使用 @ts-ignore
-      "@typescript-eslint/ban-ts-ignore": "off",
+    '@typescript-eslint/ban-ts-ignore': 'off',
     '@typescript-eslint/no-explicit-any': 'off', // 禁止使用 any 类型
     '@typescript-eslint/no-non-null-assertion': 'off',
     '@typescript-eslint/no-namespace': 'off', // 禁止使用自定义 TypeScript 模块和命名空间。
@@ -60,4 +63,3 @@ module.exports = {
     'vue/attribute-hyphenation': 'off', // 对模板中的自定义组件强制执行属性命名样式
   },
 }
-  

pnpm-lock.yaml

@@ -1,5 +1,9 @@
 lockfileVersion: '6.0'
 
+settings:
+  autoInstallPeers: true
+  excludeLinksFromLockfile: false
+
 dependencies:
   '@element-plus/icons-vue':
     specifier: ^2.3.1

src/api/user/crouse.js

@@ -0,0 +1,10 @@
+import request from '@/utils/request'
+export const getCourseListApi = () => {
+  request.get('/coursesTeacher/page')
+}
+export const editCourse = () => {
+  request.put('/coursesTeacher')
+}
+export const addCourse = (data) => {
+  request.post('/courseTeacher/addCourse', data)
+}

src/router/routers.ts

@@ -258,7 +258,8 @@ export const constantRoute: any = [
       },
       {
         path: '/portal/LearningPathRecommendations',
-        component: () => import('@/views/portal/LearningPathRecommendations.vue'),
+        component: () =>
+          import('@/views/portal/LearningPathRecommendations.vue'),
         name: 'LearningPathRecommendations',
         meta: {
           title: '学习路径推荐',

src/views/course/basicCourseInformation.vue

@@ -1,14 +1,260 @@
-<template>
+<script lang="ts" setup>
-    <div>
+import { ref } from 'vue'
-        课程基本信息
+// import axios from 'axios'
-    </div>
+import courseEdit from './components/courseEdit.vue'
-</template>
+// import { addCourseApi } from '@/api/course'
+// const courseList = ref([])
+// const getCourseList = async () => {
+//   const res = await addCourseApi()
+//   courseList.value = res.data
+// }
+// onMounted(() => {
+//   getCourseList()
+// })
 
-<script lang='ts' setup>
+const courseList = ref([
-import {  } from 'vue'
+  {
+    id: 1,
+    category: '1',
+    nature: '1',
+    code: '1',
+    assessmenttype: '1',
+    assessmentway: '1',
+    teachermethod: '',
+    teacherway: '',
+    description: '',
+    name: '课程名称',
+    credit: '课程学分',
+    classhours: '课程学时',
+  },
+  {
+    id: 2,
+    category: '1',
+    nature: '1',
+    code: '1',
+    assessmenttype: '1',
+    assessmentway: '1',
+    teachermethod: '',
+    teacherway: '',
+    description: '',
+    name: '课程名称',
+    credit: '课程学分',
+    classhours: '课程学时',
+  },
+  {
+    id: 3,
+    category: '1',
+    nature: '1',
+    code: '1',
+    assessmenttype: '1',
+    assessmentway: '1',
+    teachermethod: '',
+    teacherway: '',
+    description: '',
+    name: '课程名称',
+    credit: '课程学分',
+    classhours: '课程学时',
+  },
+  {
+    id: 4,
+    category: '1',
+    nature: '1',
+    code: '1',
+    assessmenttype: '1',
+    assessmentway: '1',
+    teachermethod: '',
+    teacherway: '',
+    description: '',
+    name: '课程名称',
+    credit: '课程学分',
+    classhours: '课程学时',
+  },
+  {
+    id: 5,
+    category: '1',
+    nature: '1',
+    code: '1',
+    assessmenttype: '1',
+    assessmentway: '1',
+    teachermethod: '',
+    teacherway: '',
+    description: '',
+    name: '课程名称',
+    credit: '课程学分',
+    classhours: '课程学时',
+  },
+  {
+    id: 6,
+    category: '1',
+    nature: '1',
+    code: '1',
+    assessmenttype: '1',
+    assessmentway: '1',
+    teachermethod: '',
+    teacherway: '',
+    description: '',
+    name: '课程名称',
+    credit: '课程学分',
+    classhours: '课程学时',
+  },
+  {
+    id: 7,
+    category: '1',
+    nature: '1',
+    code: '1',
+    assessmenttype: '1',
+    assessmentway: '1',
+    teachermethod: '',
+    teacherway: '',
+    description: '',
+    name: '课程名称',
+    credit: '课程学分',
+    classhours: '课程学时',
+  },
+])
 
+const drawer = ref()
+const onAddCourse = () => {
+  drawer.value.open({})
+}
+const onEditCourse = (item) => {
+  drawer.value.open(item)
+}
+// const onSuccess = () => {
+//   getCourseList()
+// }
 </script>
+<template>
+  <div class="header">
+    <div class="btn">
+      <el-button type="primary" round size="large">全部课程</el-button>
+      <el-button type="primary" round plain size="large">我的文件夹</el-button>
+    </div>
+    <div class="search">
+      <input type="text" placeholder="搜索课程" />
+      <i class="el-icon-search"></i>
+    </div>
+  </div>
+  <div class="course">
+    <ul class="course_list">
+      <li @click="onAddCourse()">
+        <img src="" alt="" />
+        <h2 class="course_name">点击添加课程</h2>
+        <p class="teacher_name">讲师：王兴</p>
+        <p class="credit">
+          <span>32</span>
+          学时|
+          <span>2.0</span>
+          学分
+        </p>
+      </li>
+      <li v-for="item in courseList" :key="item.id" @click="onEditCourse(item)">
+        <img src="" alt="" />
+        <h2 class="course_name">{{ item.name }}</h2>
+        <p class="teacher_name">讲师：王兴</p>
+        <p class="credit">
+          <span>{{ item.classhours }}</span>
+          学时|
+          <span>{{ item.credit }}</span>
+          学分
+        </p>
+      </li>
+    </ul>
+  </div>
+  <course-edit ref="drawer" @success="onSuccess"></course-edit>
+</template>
 
-<style lang='scss' scoped>
+<style lang="scss" scoped>
+.header {
+  width: 100%;
+  // height: 100px;
+  display: flex;
+  flex-direction: row;
+}
+.btn {
+  // display: flex;
+  width: 50%;
+  height: 100%;
+  padding: 10px 45px;
+  // display: inline;
+  // height: 40px;
+  // margin: 20px;
+  // padding-left: 50px;
+}
+.search {
+  width: 50%;
+  // display: flex;
+  height: 100%;
+  padding: 10px 0 0 630px;
+  // flex-direction: row-reverse;
+  // padding: 0 40px 0;
+  input {
+    width: 240px;
+    height: 40px;
+    border: 1px solid #dcdcdc;
+    border-radius: 60px;
+    font-size: 14px;
+  }
+}
+.course {
+  // display: flex;
+  // flex: 0 0 25%;
+  // justify-content: space-between;
+  // flex-wrap: wrap;
+  .course_list {
+    display: flex;
+    // flex: 0 0 25%;
+    justify-content: space-between;
+    flex-wrap: wrap;
+  }
 
+  li {
+    margin: 40px;
+    width: 349px;
+    height: 297px;
+    background: white;
+    transition: all 0.5s;
+    border-radius: 6px;
+    // flex: 1; /* 子元素按比例伸缩 */
+    &:hover {
+      transform: translate3d(0, -3px, 0);
+      box-shadow: 0 3px 8px rgb(0 0 0 / 20%);
+      cursor: pointer;
+    }
+    .course_name {
+      font-family: Inter-Bold;
+      color: #333;
+      font-size: 24px;
+      margin-left: 30px;
+      margin-top: 10px;
+      font-weight: bold;
+    }
+    img {
+      background-color: #cccccc;
+      width: 349px;
+      height: 178px;
+    }
+    p {
+      margin-left: 30px;
+      margin-top: 10px;
+      color: #555555;
+      font-size: 14px;
+      padding-top: 12px;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      white-space: nowrap;
+      span {
+        color: #0052ff;
+      }
+    }
+    h2 {
+      font-family: Inter-Bold;
+      color: #333;
+      font-size: 24px;
+      margin-left: 30px;
+      margin-top: 10px;
+      font-weight: bold;
+    }
+  }
+}
 </style>

src/views/course/components/KnowledgeEdit.vue

@@ -0,0 +1,61 @@
+<script setup>
+import { ref, defineExpose } from 'vue'
+import { ElMessage } from 'element-plus'
+const dialogVisible = ref(false)
+
+const formModel = ref({
+  name: '',
+  desc: '',
+})
+const formRef = ref()
+const rules = {
+  name: [{ required: true, message: '请输入知识点名称', trigger: 'blur' }],
+  desc: [{ required: true, message: '请输入知识点简介', trigger: 'blur' }],
+}
+// 组件对外暴露一个open,基于open传过来的参数判断是添加还是编辑
+const open = (row) => {
+  // console.log(row)
+  formModel.value = { ...row }
+  dialogVisible.value = true
+}
+defineExpose({ open })
+// 校验，通过校验往下走
+const onSubmit = async () => {
+  // 进行预校验
+  await formRef.value.validate()
+  // 看formModel传的是否有id
+  const isEdit = formModel.value.id
+  if (isEdit) {
+    ElMessage.success('编辑成功')
+  } else {
+    ElMessage.success('添加成功')
+  }
+  dialogVisible.value = false
+}
+</script>
+<template>
+  <el-dialog
+    v-model="dialogVisible"
+    :title="formModel.id ? '编辑知识点' : '新增知识点'"
+    width="500"
+  >
+    <el-form :model="formModel" :rules="rules" ref="formRef">
+      <el-form-item label="知识点名称" prop="name">
+        <el-input v-model="formModel.name" placeholder="请输入知识点名称" />
+      </el-form-item>
+      <el-form-item label="知识点简介" prop="desc">
+        <el-input
+          v-model="formModel.desc"
+          type="textarea"
+          placeholder="请输入知识点简介"
+        />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="dialogVisible = false">取消</el-button>
+        <el-button type="primary" @click="onSubmit">确认</el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>

src/views/course/components/PageContainer.vue

@@ -0,0 +1,36 @@
+<script setup>
+import {} from 'vue'
+// 传递头部标题，通过父传子
+defineProps({
+  title: {
+    required: true,
+    type: String,
+  },
+})
+</script>
+<template>
+  <el-card class="page-container">
+    <template #header>
+      <div class="header">
+        <span>{{ title }}</span>
+        <div class="extra">
+          <!-- 具名插槽定制额外按钮 -->
+          <slot name="extra"></slot>
+        </div>
+      </div>
+    </template>
+    <!-- 插槽定制内容，使用slot占位 -->
+    <slot></slot>
+  </el-card>
+</template>
+<style lang="scss" scoped>
+.page-container {
+  min-height: 100%;
+  box-sizing: border-box;
+  .header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+}
+</style>

src/views/course/components/courseEdit.vue

@@ -0,0 +1,184 @@
+<script setup>
+import { ElMessage } from 'element-plus'
+import { requiredNumber } from 'element-plus/es/components/table-v2/src/common.mjs'
+import { ref } from 'vue'
+// import { addCourseApi } from '@/api/course'
+// import { editCourseApi } from '@/api/course'
+const formModel = ref({
+  id: '',
+  name: '',
+  category: '',
+  nature: '',
+  code: '',
+  credit: '',
+  classhours: '',
+  assessmenttype: '',
+  assessmentway: '',
+  teachermethod: '',
+  teacherway: '',
+  description: '',
+})
+const rules = {
+  name: [
+    {
+      required: true,
+      message: '请输入课程名称',
+      trigger: 'blur',
+    },
+  ],
+  category: [
+    {
+      required: true,
+      message: '请选择课程类别',
+      trigger: 'change',
+    },
+  ],
+  nature: [
+    {
+      required: true,
+      message: '请选择课程性质',
+      trigger: 'change',
+    },
+  ],
+  code: [
+    {
+      required: true,
+      message: '请输入课程编码',
+      trigger: 'blur',
+    },
+  ],
+  credit: [
+    {
+      required: true,
+      message: '请输入课程学分',
+      trigger: 'blur',
+    },
+    {
+      validator: requiredNumber,
+      message: '请输入数字',
+      trigger: 'blur',
+    },
+  ],
+  classhours: [
+    {
+      required: true,
+      message: '请输入课程学时',
+      trigger: 'blur',
+    },
+    {
+      validator: requiredNumber,
+      message: '请输入数字',
+      trigger: 'blur',
+    },
+  ],
+  assessmenttype: [
+    {
+      required: true,
+      message: '请选择考核类型',
+      trigger: 'change',
+    },
+  ],
+  assessmentway: [
+    {
+      required: true,
+      message: '请选择考核方式',
+      trigger: 'change',
+    },
+  ],
+}
+const formRef = ref()
+const visibleDrawer = ref(false)
+
+const open = async (item) => {
+  formModel.value = { ...item }
+  visibleDrawer.value = true
+}
+// 组件对外暴露一个open,基于open传过来的参数判断是添加还是编辑
+defineExpose({ open })
+// 新增数据子传父
+// const emit = defineEmits(['success'])
+const onSubmit = async () => {
+  await formRef.value.validate()
+  const isEdit = formModel.value.id
+  if (isEdit) {
+    // await editCourseApi(formModel.value)
+    ElMessage.success('编辑成功')
+  } else {
+    // await addCourseApi(formModel.value)
+    ElMessage.success('添加成功')
+  }
+  visibleDrawer.value = false
+  // emit('success')
+}
+</script>
+
+<template>
+  <el-drawer
+    v-model="visibleDrawer"
+    direction="rtl"
+    :title="formModel.id ? '编辑课程' : '添加课程'"
+  >
+    <el-form :model="formModel" :rules="rules" ref="formRef">
+      <el-form-item label="课程名称" prop="name">
+        <el-input style="width: 200px" v-model="formModel.name"></el-input>
+      </el-form-item>
+      <el-form-item label="课程类别" prop="category">
+        <el-radio-group v-model="formModel.category">
+          <el-radio value="major">专业教育</el-radio>
+          <el-radio value="common">通识教育</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="课程性质" prop="nature">
+        <el-radio-group v-model="formModel.nature">
+          <el-radio value="required">必修</el-radio>
+          <el-radio value="elective">选修</el-radio>
+          <el-radio value="optional">任修</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="课程编码" prop="code">
+        <el-input style="width: 200px" v-model="formModel.code"></el-input>
+      </el-form-item>
+      <el-form-item label="课程学分" prop="credit">
+        <el-input style="width: 200px" v-model="formModel.credit"></el-input>
+      </el-form-item>
+      <el-form-item label="课程学时" prop="classhours">
+        <el-input
+          style="width: 200px"
+          v-model="formModel.classhours"
+        ></el-input>
+      </el-form-item>
+      <el-form-item label="考核类型" prop="assessmenttype">
+        <el-radio-group v-model="formModel.assessmenttype">
+          <el-radio value="exam">考试</el-radio>
+          <el-radio value="assessment">考察</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="考核方式" prop="assessmentway">
+        <el-radio-group v-model="formModel.assessmentway">
+          <el-radio value="open">开卷</el-radio>
+          <el-radio value="close">闭卷</el-radio>
+          <el-radio value="other">其他</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="教学方法" prop="teachermethod">
+        <el-input type="textarea" v-model="formModel.teachermethod" />
+      </el-form-item>
+      <el-form-item label="教学方式" prop="teacherway">
+        <el-input type="textarea" v-model="formModel.teacherway" />
+      </el-form-item>
+      <el-form-item label="课程简介" prop="description">
+        <el-input type="textarea" v-model="formModel.description" />
+      </el-form-item>
+    </el-form>
+
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button @click="visibleDrawer = false" size="large">取消</el-button>
+        <el-button type="primary" size="large" @click="onSubmit()">
+          确认
+        </el-button>
+      </span>
+    </template>
+  </el-drawer>
+</template>
+<style scoped></style>

src/views/course/courseChapters.vue

@@ -1,14 +1,9 @@
 <template>
-    <div>
+  <div>课程章节</div>
-        课程章节
-    </div>
 </template>
 
-<script lang='ts' setup>
+<script lang="ts" setup>
 import {} from 'vue'
-
 </script>
 
-<style lang='scss' scoped>
+<style lang="scss" scoped></style>
-
-</style>

src/views/course/knowledgePoints.vue

@@ -1,14 +1,114 @@
-<template>
+<script setup>
-    <div>
+import { ref } from 'vue'
-        知识点
+import { Delete, Edit } from '@element-plus/icons-vue'
-    </div>
+import PageContainer from './components/PageContainer.vue'
-</template>
+import KnowledgeEdit from './components/KnowledgeEdit.vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+// const loading = ref(false)
+const knowledgeList = [
+  {
+    id: '1',
+    name: '数学',
+    desc: '数学简介',
+  },
+  {
+    id: '1',
+    name: '物理',
+    desc: '物理简介',
+  },
 
-<script lang='ts' setup>
+  {
-import { } from 'vue'
+    id: '1',
+    name: '语文',
+    desc: '语文简介',
+  },
+  {
+    id: '1',
+    name: '英语',
+    desc: '英语简介',
+  },
+]
+// 通过ref绑定弹窗
+const dialog = ref()
 
+const onEditKnowledge = (row) => {
+  dialog.value.open(row)
+}
+const onAddKnowledge = () => {
+  dialog.value.open({})
+}
+const onDelKnowledge = async () => {
+  // console.log('1')
+  await ElMessageBox.confirm('你确认删除该知识点信息吗？', '温馨提示', {
+    type: 'warning',
+    confirmButtonText: '确认',
+    cancelButtonText: '取消',
+  })
+  ElMessage({ type: 'success', message: '删除成功' })
+}
+const params = ref({
+  pagenum: 1,
+  pagesize: 2,
+})
 </script>
 
-<style lang='scss' scoped>
+<template>
+  <page-container title="知识点分类">
+    <!-- v-slot可以替换为# -->
+    <template #extra>
+      <el-button type="primary" @click="onAddKnowledge()">新增</el-button>
+      <el-button type="primary">导出Excel</el-button>
+    </template>
+    <el-table
+      :data="knowledgeList"
+      style="width: 100%; height: 100%"
+      :header-cell-style="{ textAlign: 'center' }"
+    >
+      <el-table-column align="center" type="index" label="编号" width="100" />
+      <el-table-column align="center" label="名称" prop="name" />
+      <el-table-column align="center" label="简介" prop="desc" />
 
+      <el-table-column align="center" label="操作">
+        <!-- 作用域插槽 -->
+        <!-- row：knowledgeList的每一项 &index：下标 -->
+        <template #default="{ row }">
+          <el-button
+            :icon="Edit"
+            circle
+            plain
+            type="primary"
+            @click="onEditKnowledge(row)"
+          ></el-button>
+          <el-button
+            :icon="Delete"
+            circle
+            plain
+            type="danger"
+            @click="onDelKnowledge(row)"
+          ></el-button>
+        </template>
+      </el-table-column>
+      <template #empty>
+        <el-empty description="暂无数据"></el-empty>
+      </template>
+    </el-table>
+    <el-pagination
+      v-model:current-page="params.pagenum"
+      v-model:page-size="params.pagesize"
+      :page-sizes="[2, 3, 5, 10]"
+      :small="small"
+      :background="true"
+      layout=" jumper,total, sizes, prev, pager, next"
+      :total="knowledgeList.length"
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+      style="margin-top: 20px; justify-content: flex-end"
+    />
+    <knowledge-edit ref="dialog"></knowledge-edit>
+  </page-container>
+</template>
+<style lang="scss" scoped>
+.el-table {
+  overflow: hidden;
+}
 </style>