持续开发习题管理模块，新增ckeditor5富文本组件

src/view/course/addCourse/index.vue

@@ -1,5 +1,6 @@
 <script setup>
 // 引入依赖
+// import _ from 'lodash'
 import api from '@/api/course'
 import com_api from '@/api/common'
 import custom from '@/utils/custom'
@@ -16,7 +17,7 @@ import chapterCom from '../components/chapter.vue'
 const path = ref(import.meta.env.VITE_BASE_API)
 const course_id = ref(0)
 const active = ref(0)
-const form = ref({status:1})
+const form = ref({status:1,is_boutique:-1,is_audition:-1})
 const subjectParams = ref({
     pageIndex:1,
     pageSize:100,
@@ -30,6 +31,7 @@ const rules = ref({
 const ruleFormRef = ref(null)
 const chapter_info = ref([])
 const current_subject = ref('')
+const isChange = ref(false)
 // 生命周期
 onMounted(() => {
   course_id.value = route.params.course_id || 0
@@ -40,15 +42,14 @@ onMounted(() => {
 })
 provide('subjectList', subjectList)
 provide('current_subject', current_subject)
+// 方法
 async function getCourseInfo() { // 获取课程信息
   const res = await api.getCourse({id:course_id.value})
   if(res.code === 0) {
     chapter_info.value = res.data.course_ware_json
     form.value = res.data.course
-    console.log(form.value)
   }
 }
-// 方法
 function stepChangeFunc(type) {
   switch (type) {
     case 1: // 上一步
@@ -56,7 +57,13 @@ function stepChangeFunc(type) {
       break;
     case 2: // 下一步
         if(active.value == 0) { // 保存第一步的信息
-          submitForm(ruleFormRef.value)
+          console.log(isChange.value)
+          if(isChange.value){
+            submitForm(ruleFormRef.value)
+          }
+          else{
+            active.value += 1
+          }
         }
         else{
           active.value +=1
@@ -144,6 +151,7 @@ async function uploadAction(file){//图片上传 非oss
     }
 function handleAvatarSuccess(res) {
   form.value.cover = res.data.file.url
+  handlerChange()
 }
 function beforeAvatarUpload(file) {
   const isLt05M = file.size / 1024 / 1024 < 20
@@ -159,6 +167,10 @@ function beforeAvatarUpload(file) {
 function onSubmit() {
   router.push({name:'courseManage'})
 }
+function handlerChange(e) {
+  // console.log(e)
+  isChange.value = true
+}
 </script>
 <template>
   <div>
@@ -174,10 +186,10 @@ function onSubmit() {
       <!--      step1-->
       <el-form ref="ruleFormRef" v-if="active == 0" :model="form" :rules="rules" label-width="120px" style="width: 50%">
         <el-form-item label="课程名称" prop="name">
-          <el-input placeholder="请输入课程名称" v-model="form.name" />
+          <el-input placeholder="请输入课程名称" v-model="form.name" @change="handlerChange" />
         </el-form-item>
         <el-form-item label="课程分类" prop="subject">
-          <el-select v-model="form.subject" placeholder="请选择">
+          <el-select v-model="form.subject" placeholder="请选择" @change="handlerChange">
             <el-option
               v-for="item in subjectList"
               :key="item.id"
@@ -200,19 +212,19 @@ function onSubmit() {
           </el-upload>
         </el-form-item>
         <el-form-item label="价格" prop="price">
-          <el-input placeholder="请输入课程价格" type="number" v-model="form.price" />
+          <el-input @change="handlerChange" placeholder="请输入课程价格" type="number" v-model="form.price" />
         </el-form-item>
         <el-form-item label="课程简介">
-          <el-input v-model="form.intro" type="textarea" />
+          <el-input @change="handlerChange" v-model="form.intro" type="textarea" />
         </el-form-item>
         <el-form-item label="包含试听">
-          <el-switch v-model="form.is_audition" active-text="是" inactive-text="否" :active-value="1" :inactive-value="-1"  />
+          <el-switch @change="handlerChange" v-model="form.is_audition" active-text="是" inactive-text="否" :active-value="1" :inactive-value="-1"  />
         </el-form-item>
         <el-form-item label="设置精品">
-          <el-switch v-model="form.is_boutique" active-text="是" inactive-text="否" :active-value="1" :inactive-value="-1"  />
+          <el-switch @change="handlerChange" v-model="form.is_boutique" active-text="是" inactive-text="否" :active-value="1" :inactive-value="-1"  />
         </el-form-item>
         <el-form-item label="课程状态">
-          <el-switch v-model="form.status" active-text="上架" inactive-text="下架" :active-value="1" :inactive-value="-1"  />
+          <el-switch @change="handlerChange" v-model="form.status" active-text="上架" inactive-text="下架" :active-value="1" :inactive-value="-1"  />
         </el-form-item>
         <el-form-item style="display: none">
           <el-button type="primary" @click="submitForm(ruleFormRef)">

src/view/course/components/chapter.vue

@@ -19,7 +19,8 @@ const router = useRouter()
 const route = useRoute()
 import { useUserStore } from '@/pinia/modules/user'
 const userStore = useUserStore()
-import exercisesCom from '../components/mediaPool.vue'
+import mediaCom from '../components/mediaPool.vue'
+import exercisesCom from '../components/exercisesPool.vue'
 const props = defineProps(['course_id','chapter_info'])
 const emit = defineEmits(['reload'])
 import UploadCommon from '@/components/upload/common.vue'
@@ -34,7 +35,8 @@ const chapter_data = ref([])
 const dialogChapterChildVisible = ref(false)
 const chapterChildForm = ref({})
 const chapterChildRules = ref({
-  name: [{ required: true, message: '请输入章节名称', trigger: 'blur' }]
+  name: [{ required: true, message: '请输入章节名称', trigger: 'blur' }],
+  price: [{ required: true, message: '请输入章节价格', trigger: 'blur' }]
 })
 const dialogChapterTitle = ref('')
 const dialogChapterChildTitle = ref('')
@@ -118,7 +120,8 @@ async function enterChapterDialog() { // 提交大章节
 function addChapterchildFunc(item) { // 打开新增子章节窗口
   dialogChapterChildTitle.value = '新增子章节'
   // current_chapter.value = item
-  chapterChildForm.value = {pid:item.id}
+  console.log(item.course_chapter_id)
+  chapterChildForm.value = {pid:item.course_chapter_id}
   dialogChapterChildVisible.value = true
 }
 function editChapterChildFunc(item,main_index) { // 打开编辑子章节窗口
@@ -203,20 +206,22 @@ function openExercisesWinFunc() { // 打开媒体库
         </div>
         <!--表格数据-->
         <div class="lb-table-part" style="margin-bottom: 20px">
-          <el-table :data="item.children" >
-            <el-table-column align="left" label="id" width="60" prop="id" />
+          <el-table :data="item.course_sub" >
+            <el-table-column align="left" label="ID" width="60" prop="course_chapter_id" />
             <el-table-column align="left" label="子章节名称" min-width="60" prop="name" />
             <el-table-column align="left" label="课件名称" min-width="60" prop="url_name" />
+
             <el-table-column align="left" label="章节习题" min-width="60" prop="is_contain_exercise">
               <template #default="scope">
                 {{scope.row.is_contain_exercise === 0?'未添加习题':scope.row.is_contain_exercise}}
               </template>
             </el-table-column>
-            <el-table-column align="left" label="是否免费" min-width="60">
-              <template #default="scope">
-                {{scope.row.is_free === 1? '是':'否'}}
-              </template>
-            </el-table-column>
+            <el-table-column align="left" label="章节价格" min-width="60" prop="price" />
+            <!--            <el-table-column align="left" label="是否免费" min-width="60">-->
+            <!--              <template #default="scope">-->
+            <!--                {{scope.row.is_free === 1? '是':'否'}}-->
+            <!--              </template>-->
+            <!--            </el-table-column>-->
             <el-table-column align="left" label="是否展示" min-width="60">
               <template #default="scope">
                 {{scope.row.is_show === 1? '是':'否'}}
@@ -280,11 +285,15 @@ function openExercisesWinFunc() { // 打开媒体库
           <!--            class="upload-btn"-->
           <!--            @on-success="getFilePath"-->
           <!--          />-->
-          <exercises-com @on-success="getFilePath" :url_name="chapterChildForm.url_name" />
+          <media-com @on-success="getFilePath" :url_name="chapterChildForm.url_name" />
           <!--          <el-button size="small" type="primary" @click="openExercisesWinFunc">点击上传</el-button>-->
         </el-form-item>
         <el-form-item label="习题管理">
-          <el-button size="small" @click="chooseChapterChildExercises">添加习题</el-button>
+          <!--          <el-button size="small" @click="chooseChapterChildExercises">添加习题</el-button>-->
+          <exercises-com @on-success="getFilePath" :url_name="chapterChildForm.url_name" />
+        </el-form-item>
+        <el-form-item label="章节价格" prop="price">
+          <el-input type="number" v-model="chapterChildForm.price" placeholder="输入章节价格" autocomplete="off" />
         </el-form-item>
         <el-form-item label="章节排序" prop="sort">
           <el-input v-model="chapterChildForm.sort" placeholder="输入整数，排序越小越靠前展示" autocomplete="off" />

src/view/course/components/exercisesPool.vue

@@ -0,0 +1,103 @@
+<script setup>
+// 引入依赖
+// import api from '@/api/course'
+// import com_api from '@/api/common'
+// import custom from '@/utils/custom'
+// import WarningBar from '@/components/warningBar/warningBar.vue'
+import {ref,onMounted,watch,inject  } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { useRouter, useRoute } from 'vue-router'
+const router = useRouter()
+const route = useRoute()
+import { useUserStore } from '@/pinia/modules/user'
+const userStore = useUserStore()
+// import chapterCom from '../components/chapter.vue'
+const props = defineProps(['url_name'])
+const emit = defineEmits(['on-success'])
+import { clients, getNowDate } from '@/utils'
+import custom from '@/utils/custom'
+// import { getToken } from '@/utils/auth'
+// 变量
+// const headers = ref({ Authorization: 'Bearer ' + getToken() })
+const drawer = ref(false)
+const queryParams =ref({
+  pageIndex:1,
+  pageSize:10,
+  content:'',
+  subject:'',
+  subject_type:''
+})
+const typeList = custom.getExercisesTypeList()
+// 生命周期
+const subjectList = inject('subjectList')
+const current_subject = inject('current_subject')
+onMounted(() => {
+  // console.log(headers.value)
+})
+
+// 方法
+function chooseChapterChildExercises() {
+  drawer.value = true
+}
+function onSubmit() {
+
+}
+function onReset() {
+  queryParams.value = {
+    pageIndex:1,
+    pageSize:10,
+    name:''
+  }
+}
+</script>
+<template>
+  <div>
+    <el-button size="small" @click="chooseChapterChildExercises">添加习题</el-button>
+    <div v-if="url_name">{{url_name}}</div>
+    <el-drawer v-model="drawer" title="媒体库" size="60%">
+      <div class="drawer-section">
+        <!--      搜索框-->
+        <div class="search-box">
+          <el-form ref="searchForm" :inline="true" :model="queryParams">
+            <el-form-item label="题目">
+              <el-input v-model="queryParams.content" placeholder="请输入" />
+            </el-form-item>
+            <el-form-item label="课程分类">
+              <el-select v-model="queryParams.subject" clearable placeholder="请选择">
+                <el-option
+                  v-for="item in subjectList"
+                  :key="item.id"
+                  :label="item.name"
+                  :value="item.id"
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item label="题目类型">
+              <el-select v-model="queryParams.subject_type" clearable placeholder="请选择">
+                <el-option
+                  v-for="item in typeList"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item>
+              <el-button size="small" type="primary" icon="search" @click="onSubmit">查询</el-button>
+              <el-button size="small" icon="refresh" @click="onReset">重置</el-button>
+            </el-form-item>
+          </el-form>
+        </div>
+        <!--      数据列表-->
+        <div class="list-box">
+
+        </div>
+      </div>
+    </el-drawer>
+  </div>
+</template>
+<style scoped>
+  .drawer-section{
+    padding: 10px;
+  }
+</style>

src/view/course/courseCategory/index.vue

@@ -45,7 +45,7 @@ async function getSubjectList() {
     subjectList.value = res.data.records
     total.value = res.data.total
     subjectList.value = addTreeFormatSubject(subjectList.value)
-    console.log(subjectList.value)
+    // console.log(subjectList.value)
   }
 }
 function addTreeFormatSubject(data) {

src/view/exercisesManage/index.vue

@@ -0,0 +1,332 @@
+
+<script setup>
+// 引入依赖
+import api from '@/api/exercises'
+import capi from '@/api/course'
+import custom from '@/utils/custom'
+// import { toSQLLine } from '@/utils/stringFun'
+import WarningBar from '@/components/warningBar/warningBar.vue'
+import ckEditor from '@/components/richText/ckEditor5.vue'
+import {ref,onMounted } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { useRouter, useRoute } from 'vue-router'
+const router = useRouter()
+const route = useRoute()
+// 变量
+const typeList = custom.getExercisesTypeList()
+const queryParams = ref({
+  teacherId:0,
+  page:1,
+  pageSize:10,
+  name:'',
+  type:'',
+  subject:''
+})
+const subjectParams = ref({
+    pageIndex:1,
+    pageSize:100,
+})
+const tableData = ref([])
+const subjectList = ref([])
+const deleteVisible = ref(false)
+const course_ids = ref([])
+const total = ref(0)
+const dialogFormVisible = ref(false)
+const dialogTitle = ref('')
+const form =ref({})
+const rules = ref({
+  name: [{ required: true, message: '请输入课程名称', trigger: 'blur' }]
+})
+const course_id = ref(0)
+const content = ref(null)
+const options = ref(null)
+// 生命周期
+onMounted(() => {
+  getExercisesList()
+  getSubject()
+})
+// 方法
+async function getExercisesList() {
+  const res = await api.getExercisesList(queryParams.value)
+  if(res.code === 0) {
+    tableData.value = res.data.records
+  }
+}
+async function getSubject(){ // 获取课程分类
+  const res = await capi.getSubjectList(subjectParams.value)
+  if(res.code === 0) {
+    subjectList.value = custom.getStdSubject(res.data.records)
+    // console.log(subjectList.value)
+  }
+}
+function onSubmit() {
+  getExercisesList()
+}
+const onReset = () => {
+  queryParams.value = {
+    pageIndex:1,
+    pageSize:10,
+    name:'',
+    status:'',
+    subject:''
+  }
+}
+function openDialog(type) {
+  // let params = {}
+  switch (type){
+    case 'add':
+      dialogTitle.value = '新增习题'
+        form.value = {}
+      break;
+    case 'edit':
+      // params.course_id = course_id.value
+      dialogTitle.value = '编辑习题'
+      break;
+  }
+  dialogFormVisible.value = true
+  // router.push({name:'addCourse',params})
+}
+async function onDelete() {
+  console.log(course_ids.value)
+  const ids = course_ids.value.map(item => item.course_id)
+  const res = await api.delCourse({ ids })
+  if (res.code === 0) {
+    ElMessage({
+      type: 'success',
+      message: res.msg
+    })
+    // if (tableData.value.length === ids.length && page.value > 1) {
+    //   page.value--
+    // }
+    deleteVisible.value = false
+    getExercisesList()
+  }
+}
+const handleSelectionChange = (val) => {
+  // console.log(val)
+  course_ids.value = val
+}
+function editCourseFunc(row) {
+  course_id.value = row.course_id
+  form.value = row
+  // console.log(JSON.parse(row.question))
+  content.value = JSON.parse(row.question).title
+  options.value =   JSON.parse(row.question).option
+  openDialog('edit')
+  console.log(JSON.parse(row.question))
+}
+function deleteCourseFunc(row) {
+  ElMessageBox.confirm('此操作将永久删除该数据, 是否继续?', '提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning'
+  })
+  .then(async() => {
+    const res = await api.delCourse({
+          ids:[row.course_id]
+    })
+    if (res.code === 0) {
+      ElMessage({
+        type: 'success',
+        message: '删除成功!'
+      })
+      // if (tableData.value.length === 1 && page.value > 1) {
+      //   page.value--
+      // }
+      getExercisesList()
+    }
+  },() => {
+  })
+}
+function handleCurrentChange(val) {
+  queryParams.value.pageIndex = val
+  getExercisesList()
+}
+function handleSizeChange(val) {
+  queryParams.value.pageSize = val
+  getExercisesList()
+}
+function closeDialog(){
+  dialogFormVisible.value = false
+}
+function enterDialog() {
+  console.log(content.value)
+}
+function viewCourseFunc(row) { // 查看课程
+  router.push({name:'viewCourse',params:{course_id:row.course_id}})
+}
+function getExercisesName(row) {
+  // console.log(JSON.parse(row.question))
+  return JSON.parse(row.question).title
+}
+</script>
+<template>
+  <div>
+    <!--    搜索框-->
+    <div class="gva-search-box">
+      <el-form ref="searchForm" :inline="true" :model="queryParams">
+        <el-form-item label="题目名称">
+          <el-input v-model="queryParams.name" placeholder="根据题目名称进行查询" />
+        </el-form-item>
+        <el-form-item label="课程分类">
+          <el-select v-model="queryParams.subject" clearable placeholder="请选择">
+            <el-option
+              v-for="item in subjectList"
+              :key="item.id"
+              :label="item.name"
+              :value="item.name"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="题型">
+          <el-select v-model="queryParams.type" clearable placeholder="请选择">
+            <el-option
+              v-for="item in typeList"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-button size="small" type="primary" icon="search" @click="onSubmit">查询</el-button>
+          <el-button size="small" icon="refresh" @click="onReset">重置</el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+    <!--    表格数据-->
+    <div class="gva-table-box">
+      <!--      批量操作-->
+      <div class="gva-btn-list">
+        <el-button size="small" type="primary" icon="plus" @click="openDialog('add')">新增</el-button>
+        <el-popover v-model="deleteVisible" placement="top" width="160">
+          <p>确定要删除吗？</p>
+          <div style="text-align: right; margin-top: 8px;">
+            <el-button size="small" type="primary" link @click="deleteVisible = false">取消</el-button>
+            <el-button size="small" type="primary" @click="onDelete">确定</el-button>
+          </div>
+          <template #reference>
+            <el-button icon="delete" size="small" type="danger" :disabled="!course_ids.length" style="margin-left: 10px;" @click="deleteVisible = true">删除</el-button>
+          </template>
+        </el-popover>
+      </div>
+      <!--      数据列表-->
+      <el-table :data="tableData" @selection-change="handleSelectionChange">
+        <el-table-column
+          type="selection"
+          width="55"
+        />
+        <el-table-column align="left" label="ID" min-width="60" prop="question_id" sortable="custom" />
+        <el-table-column align="left" label="题型" min-width="150" prop="name" >
+          <template #default="scope">
+            {{custom.getExercisesTypeName(scope.row.type)}}
+          </template>
+        </el-table-column>
+        <el-table-column align="left" label="科目" min-width="150" prop="subject" />
+        <el-table-column align="left" label="题目" min-width="150" >
+          <template #default="scope">
+            <!--            {{getExercisesName(scope.row)}}-->
+            <div v-html="getExercisesName(scope.row)"></div>
+          </template>
+        </el-table-column>
+        <el-table-column align="left" label="创建者" min-width="150" prop="teacher_id" />
+        <el-table-column align="left" label="创建时间" min-width="150" prop="createdAt" />
+        <el-table-column align="left" fixed="right" label="操作" width="200">
+          <template #default="scope">
+            <!--            <el-button-->
+            <!--              icon="view"-->
+            <!--              size="small"-->
+            <!--              type="primary"-->
+            <!--              link-->
+            <!--              @click="viewCourseFunc(scope.row)"-->
+            <!--            >查看</el-button>-->
+            <el-button
+              icon="edit"
+              size="small"
+              type="primary"
+              link
+              @click="editCourseFunc(scope.row)"
+            >编辑</el-button>
+            <el-button
+              icon="delete"
+              size="small"
+              type="danger"
+              link
+              @click="deleteCourseFunc(scope.row)"
+            >删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <div class="gva-pagination">
+        <el-pagination
+          :current-page="queryParams.pageIndex"
+          :page-size="queryParams.pageSize"
+          :page-sizes="[10, 30, 50, 100]"
+          :total="total"
+          layout="total, sizes, prev, pager, next, jumper"
+          @current-change="handleCurrentChange"
+          @size-change="handleSizeChange"
+        />
+      </div>
+
+    </div>
+    <el-dialog v-model="dialogFormVisible" :before-close="closeDialog" :title="dialogTitle">
+      <el-form ref="apiForm" :model="form" :rules="rules" label-width="80px">
+        <el-form-item label="科目" prop="subject">
+          <el-select v-model="form.subject" clearable placeholder="请选择">
+            <el-option
+              v-for="item in subjectList"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="题型" prop="type">
+          <el-select v-model="form.type" clearable placeholder="请选择">
+            <el-option
+              v-for="item in typeList"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="题目内容" >
+          <ckEditor v-model="content" :content="content" />
+        </el-form-item>
+        <el-form-item label="分值" >
+          <el-input v-model="form.score" placeholder="请输入分值" />
+        </el-form-item>
+        <el-form-item label="答案" >
+          <!--          <el-input v-model="form.score" placeholder="请输入分值" />-->
+          <view class="options-box" v-if="options">
+            <view class="option-item">
+              <ckEditor v-model="content" :content="content" />
+              <el-icon><Minus /></el-icon>
+            </view>
+          </view>
+          <el-button>添加答案</el-button>
+        </el-form-item>
+
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button size="small" @click="closeDialog">取 消</el-button>
+          <el-button size="small" type="primary" @click="enterDialog">确 定</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+<style scoped lang="scss">
+  .button-box {
+    padding: 10px 20px;
+    .el-button {
+      float: right;
+    }
+  }
+  .warning {
+    color: #dc143c;
+  }
+</style>