添加课程模块和章节；

src/view/course/components/chapter.vue

@@ -0,0 +1,315 @@
+<script>
+export default {
+  name: 'chapterCom',
+  methods: {
+
+  }
+}
+</script>
+<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 } 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 exercisesCom from '../components/mediaPool.vue'
+const props = defineProps(['course_id','chapter_info'])
+const emit = defineEmits(['reload'])
+import UploadCommon from '@/components/upload/common.vue'
+// 变量
+const dialogChapterVisible = ref(false)
+// const dialogChapterTitle = ref('')
+const chapterForm = ref({pid:0})
+const chapterRules = ref({
+  name: [{ required: true, message: '请输入章节名称', trigger: 'blur' }]
+})
+const chapter_data = ref([])
+const dialogChapterChildVisible = ref(false)
+const chapterChildForm = ref({})
+const chapterChildRules = ref({
+  name: [{ required: true, message: '请输入章节名称', trigger: 'blur' }]
+})
+const dialogChapterTitle = ref('')
+const dialogChapterChildTitle = ref('')
+// const path = ref(import.meta.env.VITE_BASE_API)
+const imageCommon = ref('')
+// const current_chapter = ref({}) // 当前操作的大章节
+// const current_chapter_child = ref({}) // 当前操作的子章节
+// const chapter_index = ref(0)
+// 生命周期
+onMounted(() => {
+  chapter_data.value = props.chapter_info
+})
+watch(props,(old, newProps) => {
+  chapter_data.value = props.chapter_info
+})
+// 方法
+function addChapterFunc() { // 添加大章节
+  chapterForm.value = {pid:0}
+  dialogChapterVisible.value = true
+  dialogChapterTitle.value = '添加大章节'
+}
+async function deleteChapterFunc(item) { //删除大章节
+  delFunc(item.id)
+}
+function delFunc(id) {
+  ElMessageBox.confirm('此操作将永久删除该数据, 是否继续?', '提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning'
+  })
+  .then(async() => {
+    const res = await api.delChapter({
+      ids:[id]
+    })
+    if (res.code === 0) {
+      ElMessage({
+        type: 'success',
+        message: '删除成功!'
+      })
+      emit('reload')
+    }
+  },() => {
+  })
+}
+function editChapterFunc(item) { //编辑大章节
+  chapterForm.value = item
+  dialogChapterVisible.value = true
+  dialogChapterTitle.value = '编辑大章节'
+}
+function closeChapterDialog() {
+  dialogChapterVisible.value = false
+}
+function closeChapterChildDialog() {
+  dialogChapterChildVisible.value = false
+}
+async function enterChapterDialog() { // 提交大章节
+  // console.log(chapterForm.value)
+  // return
+  chapterForm.value.sort = parseInt(chapterForm.value.sort)
+  const params = {
+    ...chapterForm.value
+  }
+  let func_name = ''
+  if(chapterForm.value.id) { // 编辑
+    func_name = 'editChapter'
+  }
+  else{ // 新增
+    func_name = 'addChapter'
+    params.course_id = props.course_id
+  }
+  const res = await api[func_name](params)
+  if(res.code === 0) {
+    ElMessage({
+      type: 'success',
+      message: '操作成功!'
+    })
+    closeChapterDialog()
+    emit('reload')
+  }
+}
+function addChapterchildFunc(item) { // 打开新增子章节窗口
+  dialogChapterChildTitle.value = '新增子章节'
+  // current_chapter.value = item
+  chapterChildForm.value = {pid:item.id}
+  dialogChapterChildVisible.value = true
+}
+function editChapterChildFunc(item,main_index) { // 打开编辑子章节窗口
+  dialogChapterChildTitle.value = '编辑子章节'
+  // current_chapter.value = chapter_data.value[main_index]
+  chapterChildForm.value = item
+  dialogChapterChildVisible.value = true
+}
+function deleteChapterChildFunc(item) { // 删除子章节
+  delFunc(item.id)
+}
+async function enterChapterChildDialog() { // 提交小章节
+  chapterChildForm.value.sort = parseInt(chapterChildForm.value.sort)
+  const params = {
+    ...chapterChildForm.value
+  }
+  let func_name = ''
+  // console.log(params)
+  // return
+  if(chapterChildForm.value.id){ // 编辑
+    func_name = 'editChapter'
+  }
+  else{ // 新增
+    func_name = 'addChapter'
+    params.course_id = props.course_id
+  }
+  const res = await api[func_name](params)
+  if(res.code === 0) {
+    ElMessage({
+      type: 'success',
+      message: '操作成功!'
+    })
+    closeChapterChildDialog()
+    emit('reload')
+  }
+}
+function getFilePath(file) { // 获取上传文件之后的地址
+
+}
+function chooseChapterChildExercises() { // 打开选择习题窗口
+
+}
+function openExercisesWinFunc() { // 打开媒体库
+
+}
+</script>
+<template>
+  <div>
+    <div class="btn-box" style="text-align: right;margin: 10px 0 20px;">
+      <el-button type="primary" icon="plus" @click="addChapterFunc">添加章节</el-button>
+    </div>
+    <div class="list-box">
+      <div class="lb-card" v-for="(item,i) in chapter_data">
+        <!--大章节标题-->
+        <div class="lb-title-part">
+          <div class="lbt-title">{{item.name}}</div>
+          <div class="lbt-btn-box">
+            <el-button
+              icon="edit"
+              size="small"
+              type="primary"
+              link
+              @click="editChapterFunc(item)"
+            />
+            <el-button
+              icon="plus"
+              size="small"
+              type="primary"
+              link
+              @click="addChapterchildFunc(item)"
+            />
+            <el-button
+              icon="delete"
+              size="small"
+              type="primary"
+              link
+              @click="deleteChapterFunc(item)"
+            />
+          </div>
+        </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-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">
+              <template #default="scope">
+                {{scope.row.is_show === 1? '是':'否'}}
+              </template>
+            </el-table-column>
+            <el-table-column align="left" label="操作" min-width="60">
+              <template #default="scope">
+                <el-button
+                  icon="edit"
+                  size="small"
+                  type="primary"
+                  link
+                  @click="editChapterChildFunc(scope.row)"
+                >编辑</el-button>
+                <el-button
+                  icon="delete"
+                  size="small"
+                  type="primary"
+                  link
+                  @click="deleteChapterChildFunc(scope.row)"
+                >删除</el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+
+        </div>
+      </div>
+    </div>
+    <!-- 添加/编辑 大章节窗口-->
+    <el-dialog v-model="dialogChapterVisible" :before-close="closeChapterDialog" :title="dialogChapterTitle">
+      <el-form ref="apiForm" :model="chapterForm" :rules="chapterRules" label-width="80px">
+        <el-form-item label="章节名称" prop="name">
+          <el-input v-model="chapterForm.name" autocomplete="off" />
+        </el-form-item>
+        <el-form-item label="章节排序" prop="sort">
+          <el-input v-model="chapterForm.sort" placeholder="输入整数，排序越小越靠前展示" autocomplete="off" />
+        </el-form-item>
+        <el-form-item label="是否免费" prop="is_free">
+          <el-switch v-model="chapterForm.is_free" active-text="是" inactive-text="否" :active-value="1" :inactive-value="-1"  />
+        </el-form-item>
+        <el-form-item label="是否展示" prop="is_show">
+          <el-switch v-model="chapterForm.is_show" active-text="是" inactive-text="否" :active-value="1" :inactive-value="-1"  />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button size="small" @click="closeChapterDialog">取 消</el-button>
+          <el-button size="small" type="primary" @click="enterChapterDialog">确 定</el-button>
+        </div>
+      </template>
+    </el-dialog>
+    <!-- 添加小章节窗口-->
+    <el-dialog v-model="dialogChapterChildVisible" :before-close="closeChapterChildDialog" :title="dialogChapterChildTitle">
+      <el-form ref="apiForm" :model="chapterChildForm" :rules="chapterChildRules" label-width="80px">
+        <el-form-item label="章节名称" prop="name">
+          <el-input v-model="chapterChildForm.name" autocomplete="off" />
+        </el-form-item>
+        <el-form-item label="上传课件">
+          <!--          <upload-common-->
+          <!--            v-model:imageCommon="imageCommon"-->
+          <!--            class="upload-btn"-->
+          <!--            @on-success="getFilePath"-->
+          <!--          />-->
+          <exercises-com @on-success="getFilePath" />
+          <!--          <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-form-item>
+        <el-form-item label="章节排序" prop="sort">
+          <el-input v-model="chapterChildForm.sort" placeholder="输入整数，排序越小越靠前展示" autocomplete="off" />
+        </el-form-item>
+        <el-form-item label="是否免费" prop="is_free">
+          <el-switch v-model="chapterChildForm.is_free" active-text="是" inactive-text="否" :active-value="1" :inactive-value="-1"  />
+        </el-form-item>
+        <el-form-item label="是否展示" prop="is_show">
+          <el-switch v-model="chapterChildForm.is_show" active-text="是" inactive-text="否" :active-value="1" :inactive-value="-1"  />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button size="small" @click="closeChapterChildDialog">取 消</el-button>
+          <el-button size="small" type="primary" @click="enterChapterChildDialog">确 定</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+<style scoped>
+  .lbt-title{
+    margin-right: 20px;
+    font-size: 18px;
+  }
+  .lb-title-part{
+    display: flex;
+    align-items: center;
+  }
+</style>

src/view/course/components/mediaPool.vue

@@ -0,0 +1,141 @@
+<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(['course_id','chapter_info'])
+const emit = defineEmits(['on-success'])
+import { clients, getNowDate } from '@/utils'
+import { getToken } from '@/utils/auth'
+// 变量
+const headers = ref({ Authorization: 'Bearer ' + getToken() })
+const drawer = ref(false)
+const queryParams =ref({
+  pageIndex:1,
+  pageSize:10,
+  name:''
+})
+// 生命周期
+const subjectList = inject('subjectList')
+const current_subject = inject('current_subject')
+onMounted(() => {
+  // console.log(headers.value)
+})
+
+// 方法
+function openExercisesWinFunc() {
+  drawer.value = true
+}
+function onSubmit() {
+
+}
+function onReset() {
+  queryParams.value = {
+    pageIndex:1,
+    pageSize:10,
+    name:''
+  }
+}
+async function httpUpload(file) { // 上传oss
+  console.log(file)
+      // this.$set(this.chapterTable.sel, 'percentage', 0)
+      // this.$set(this.chapterTable.sel, 'loading', true)
+      const client = clients()
+      // 判断扩展名
+      const tmpcnt = file.file.name.lastIndexOf('.')
+      const exname = file.file.name.substring(tmpcnt + 1)
+      const imgUrl = 'http://gwjxb.oss-cn-chengdu.aliyuncs.com'
+      const fileName = `static/uploadfile/${getNowDate()}/${file.file.uid}.${exname}`
+      await client.multipartUpload(fileName, file.file, {
+        progress: (p, cpt, res) => {
+          // 获取分片上传进度、断点和返回值。
+          // this.$set(
+          //   this.chapterTable.sel,
+          //   'percentage',
+          //   (Math.floor(p * 100) / 100) * 100
+          // )
+          // if (p === 1) {
+          //   this.$set(this.chapterTable.sel, 'loading', false)
+          // }
+        },
+        parallel: 5, // 并发上传的分片数量
+        partSize: 1024 * 1024 * 20,
+        // headers,
+        // 指定meta参数，自定义Object的元信息。通过head接口可以获取到Object的meta数据。
+        meta: {
+          year: 2020,
+          people: 'test'
+        },
+        mime: file.type // 上传文件类型
+      })
+      // 填写Object完整路径，例如exampledir/exampleobject.txt。Object完整路径中不能包含Bucket名称。
+      const head = await client.head(fileName)
+      if (head.status === 200) {
+        // 上传成功之后添加媒体库
+        // this.addDepotFun(`${imgUrl}/${fileName}`, file.file.name)
+        // 数据赋值
+        // this.$set(this.chapterTable.sel, 'url', `${imgUrl}/${fileName}`)
+        // this.$set(this.chapterTable.sel, 'url_name', file.file.name)
+      }
+    }
+</script>
+<template>
+  <div>
+    <el-button size="small" type="primary" @click="openExercisesWinFunc">点击上传</el-button>
+    <el-drawer v-model="drawer" title="媒体库" size="50%">
+      <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.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.id"
+                />
+              </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-item>
+              <el-upload
+                class="upload-demo"
+                action
+                :http-request="httpUpload"
+                :show-file-list="false"
+              >
+                <el-button
+                  size="small"
+                  type="text"
+                >普通上传</el-button>
+              </el-upload>
+            </el-form-item>
+          </el-form>
+        </div>
+        <!--      数据列表-->
+        <div class="list-box"></div>
+      </div>
+    </el-drawer>
+  </div>
+</template>
+<style scoped>
+  .drawer-section{
+    padding: 10px;
+  }
+</style>