完善课程模块；添加轮播图模块

2023-02-02 15:26:20 +08:00
parent 34bc6f1af0
commit 5b2fdcb833
7 changed files with 450 additions and 33 deletions
--- a/src/api/lbt.js
+++ b/src/api/lbt.js
@@ -0,0 +1,33 @@
+import service from '@/utils/request'
+const api = {
+  // 轮播图api
+  getLbtManageList : data => {
+    return service({
+      url: '/sys-index-lbt',
+      method: 'get',
+      params:data
+    })
+  },
+  addLbtManage : data => {
+    return service({
+      url: '/sys-index-lbt',
+      method: 'post',
+      data
+    })
+  },
+  editLbtManage : data => {
+    return service({
+      url: '/sys-index-lbt/'+data.ID,
+      method: 'put',
+      data
+    })
+  },
+  delLbt: data => {
+    return service({
+      url: '/sys-index-lbt',
+      method: 'delete',
+      data
+    })
+  },
+}
+export default api
--- a/src/view/course/addCourse/index.vue
+++ b/src/view/course/addCourse/index.vue
@@ -146,16 +146,16 @@ function handleAvatarSuccess(res) {
  form.value.cover = res.data.file.url
 }
 function beforeAvatarUpload(file) {
-      const isLt05M = file.size / 1024 / 1024 < 5
-      const isJPG = file.type.indexOf('image/') === -1
-      if (isJPG) {
-        ElMessage.error('文件格式错误，请上传图片类型,如：JPG，PNG后缀的文件')
-      }
-      if (!isLt05M) {
-        ElMessage.error('上传头像图片大小不能超过 2M!')
-      }
-      return !isJPG && isLt05M
-    }
+  const isLt05M = file.size / 1024 / 1024 < 20
+  const isJPG = file.type.indexOf('image/') === -1
+  if (isJPG) {
+    ElMessage.error('文件格式错误，请上传图片类型,如：JPG，PNG后缀的文件')
+  }
+  if (!isLt05M) {
+    ElMessage.error('上传头像图片大小不能超过 2M!')
+  }
+  return !isJPG && isLt05M
+}
 function onSubmit() {
  router.push({name:'courseManage'})
 }
--- a/src/view/course/components/chapter.vue
+++ b/src/view/course/components/chapter.vue
@@ -156,7 +156,9 @@ async function enterChapterChildDialog() { // 提交小章节
  }
 }
 function getFilePath(file) { // 获取上传文件之后的地址
-
+  console.log(file)
+  chapterChildForm.value.url = file.url
+  chapterChildForm.value.url_name = file.url_name
 }
 function chooseChapterChildExercises() { // 打开选择习题窗口

@@ -278,7 +280,7 @@ function openExercisesWinFunc() { // 打开媒体库
          <!--            class="upload-btn"-->
          <!--            @on-success="getFilePath"-->
          <!--          />-->
-          <exercises-com @on-success="getFilePath" />
+          <exercises-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="习题管理">
--- a/src/view/course/components/mediaPool.vue
+++ b/src/view/course/components/mediaPool.vue
@@ -12,7 +12,7 @@ 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 props = defineProps(['url_name'])
 const emit = defineEmits(['on-success'])
 import { clients, getNowDate } from '@/utils'
 import { getToken } from '@/utils/auth'
@@ -22,7 +22,8 @@ const drawer = ref(false)
 const queryParams =ref({
  pageIndex:1,
  pageSize:10,
-  name:''
+  name:'',
+  subject:''
 })
 // 生命周期
 const subjectList = inject('subjectList')
@@ -83,6 +84,12 @@ async function httpUpload(file) { // 上传oss
        // 上传成功之后添加媒体库
        // this.addDepotFun(`${imgUrl}/${fileName}`, file.file.name)
        // 数据赋值
+        const params = {
+          url:`${imgUrl}/${fileName}`,
+          url_name:file.file.name
+        }
+        // console.log(params)
+        emit('on-success',params)
        // this.$set(this.chapterTable.sel, 'url', `${imgUrl}/${fileName}`)
        // this.$set(this.chapterTable.sel, 'url_name', file.file.name)
      }
@@ -91,6 +98,7 @@ async function httpUpload(file) { // 上传oss
 <template>
  <div>
    <el-button size="small" type="primary" @click="openExercisesWinFunc">点击上传</el-button>
+    <div v-if="url_name">{{url_name}}</div>
    <el-drawer v-model="drawer" title="媒体库" size="50%">
      <div class="drawer-section">
        <!--      搜索框-->
@@ -115,6 +123,7 @@ async function httpUpload(file) { // 上传oss
            </el-form-item>
            <el-form-item>
              <el-upload
+                :headers="headers"
                class="upload-demo"
                action
                :http-request="httpUpload"
@@ -129,7 +138,9 @@ async function httpUpload(file) { // 上传oss
          </el-form>
        </div>
        <!--      数据列表-->
-        <div class="list-box"></div>
+        <div class="list-box">
+
+        </div>
      </div>
    </el-drawer>
  </div>
--- a/src/view/course/index.vue
+++ b/src/view/course/index.vue
@@ -124,11 +124,13 @@ function deleteCourseFunc(row) {
  },() => {
  })
 }
-function handleCurrentChange() {
-
+function handleCurrentChange(val) {
+  queryParams.value.pageIndex = val
+  getCourseList()
 }
-function handleSizeChange() {
-
+function handleSizeChange(val) {
+  queryParams.value.pageSize = val
+  getCourseList()
 }
 function closeDialog(){
  dialogFormVisible.value = false
@@ -190,7 +192,11 @@ function viewCourseFunc(row) { // 查看课程
        <el-table-column align="left" label="名称" min-width="150" prop="name" />
        <el-table-column align="left" label="科目" min-width="150" prop="subject" />
        <el-table-column align="left" label="价格" min-width="150" prop="price" />
-        <el-table-column align="left" label="状态" min-width="150" prop="status" />
+        <el-table-column align="left" label="状态" min-width="150" prop="status">
+          <template #default="scope">
+            {{scope.row.status == 1?'上架':scope.row.status == 2?'待审核':scope.row.status == 3?'通过':scope.row.status == 4?'未通过':'下架'}}
+          </template>
+        </el-table-column>
        <el-table-column align="left" label="是否精品" min-width="150" prop="is_boutique" />
        <el-table-column align="left" fixed="right" label="操作" width="200">
          <template #default="scope">
--- a/src/view/course/viewCourse/index.vue
+++ b/src/view/course/viewCourse/index.vue
@@ -21,6 +21,11 @@ async function getCourse() { // 获取课程信息
    courseData.value = res.data
  }
 }
+function downloadChapterChildFunc(item) { // 点击下载
+  console.log(item)
+
+  window.open(row.url)
+}
 </script>
 <template>
  <div>
@@ -28,24 +33,24 @@ async function getCourse() { // 获取课程信息
    <div class="gva-search-box">
      <div class="baseinfoBox">
        <div class="base-card course-name">
-          <div class="bc-left">课程名称：</div>
-          <div class="bc-right">{{courseData.step1.name}}</div>
+          <div class="bc-left" style="font-size: 18px">课程名称：</div>
+          <div class="bc-right" style="font-size: 18px">{{courseData.name}}</div>
        </div>
        <div class="base-card">
          <div class="bc-left">课程名称：</div>
-          <div class="bc-right">{{courseData.step1.name}}</div>
+          <div class="bc-right">{{courseData.name}}</div>
        </div>
        <div class="base-card">
          <div class="bc-left">课程科目：</div>
-          <div class="bc-right">{{courseData.step1.subject}}</div>
+          <div class="bc-right">{{courseData.subject}}</div>
        </div>
        <div class="base-card">
          <div class="bc-left">课程状态：</div>
-          <div class="bc-right">{{courseData.step1.status === 1?'上架':'下架'}}</div>
+          <div class="bc-right">{{courseData.status === 1?'上架':'下架'}}</div>
        </div>
        <div class="base-card">
          <div class="bc-left">课程价格：</div>
-          <div class="bc-right">{{courseData.step1.price}}</div>
+          <div class="bc-right">{{courseData.price}}</div>
        </div>
        <div class="base-card">
          <div class="bc-left">教师姓名：</div>
@@ -53,27 +58,86 @@ async function getCourse() { // 获取课程信息
        </div>
        <div class="base-card">
          <div class="bc-left">创建时间：</div>
-          <div class="bc-right"></div>
+          <div class="bc-right">{{courseData.CreatedAt}}</div>
        </div>
        <div class="base-card">
          <div class="bc-left">课程简介：</div>
-          <div class="bc-right">{{courseData.step1.introduction}}</div>
+          <div class="bc-right">{{courseData.introduction}}</div>
        </div>
      </div>
    </div>
    <!--    章节信息-->
    <div class="gva-table-box">
-
+      <div class="list-box">
+        <div class="lb-card" v-for="(item,i) in courseData.course_ware_json">
+          <!--大章节标题-->
+          <div class="lb-title-part">
+            <div class="lbt-title">{{item.name}}</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">
+                <template #default="scope">
+                  {{scope.row.url_name === ''?'未上传课件':scope.row.url_name}}
+                </template>
+              </el-table-column>
+              <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 v-if="scope.row.url"
+                    icon="edit"
+                    size="small"
+                    type="primary"
+                    link
+                    @click="downloadChapterChildFunc(scope.row)"
+                  >下载</el-button>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
    </div>
  </div>
 </template>
 <style scoped>
+.lbt-title{
+  margin-right: 20px;
+  font-size: 18px;
+  margin-bottom: 10px;
+}
+.base-card{
+  display: flex;
+  float: left;
+  white-space: nowrap;
+  width: 33%;
+  padding: 10px 0px;
+  color: gray;
+}
 .course-name{
  font-weight: 900;
-  font-size: 18px;
+  font-size: 18px !important;
  width: 100%;
+  color:black
+}
+.baseinfoBox{
+  overflow: hidden;
 }
-  .baseinfoBox{
-    overflow: hidden;
-  }
 </style>
--- a/src/view/lbtManage/index.vue
+++ b/src/view/lbtManage/index.vue
@@ -0,0 +1,301 @@
+<script setup>
+// 引入依赖
+import api from '@/api/lbt'
+// import { toSQLLine } from '@/utils/stringFun'
+import WarningBar from '@/components/warningBar/warningBar.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 dialogFormVisible = ref(false)
+import { useUserStore } from '@/pinia/modules/user'
+const userStore = useUserStore()
+// 变量
+const path = ref(import.meta.env.VITE_BASE_API)
+const queryParams = ref({
+  page:1,
+  pageSize:10
+})
+const deleteVisible = ref(false)
+const lbt_ids = ref([])
+const dialogTitle = ref('')
+const form = ref({status:'1'})
+const lbtType_options = ref([
+  {
+    label:'首页',
+    value:'1'
+  }
+])
+const rules = ref({
+  lbtName: [{ required: true, message: '请输入名称', trigger: 'blur' }],
+  lbtUrl: [{ required: true, message: '请选择素材', trigger: 'blur' }],
+  lbtSkipUrl:[{ required: true, message: '请填写跳转链接', trigger: 'blur' }],
+  lbtType:[{ required: true, message: '请选择展示位置', trigger: 'blur' }]
+})
+const ruleFormRef = ref(null)
+const tableData = ref([])
+const total = ref(0)
+// 生命周期
+onMounted(() => {
+  getLbtList()
+})
+// 方法
+async function getLbtList() {
+  const res = await api.getLbtManageList(queryParams.value)
+  if(res.code === 0) {
+    tableData.value = res.data.records
+    total.value = res.data.total
+  }
+}
+function openDialog(type) {
+  dialogFormVisible.value = true
+  switch (type) {
+    case 'add':
+      dialogTitle.value = '新增轮播图'
+      break;
+    case 'edit':
+      dialogTitle.value = '编辑轮播图'
+      break;
+  }
+}
+async function onDelete() {
+  const ids = lbt_ids.value.map(item => item.ID)
+  const res = await api.delLbt({ 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
+    getLbtList()
+  }
+}
+function closeDialog() {
+  dialogFormVisible.value = false
+  form.value = {status:'1'}
+}
+function handleAvatarSuccess(res) {
+  console.log(res)
+  form.value.lbtUrl = res.data.file.url
+}
+function beforeAvatarUpload(file) {
+  const isLt05M = file.size / 1024 / 1024 < 20
+  const isJPG = file.type.indexOf('image/') === -1
+  if (isJPG) {
+    ElMessage.error('文件格式错误，请上传图片类型,如：JPG，PNG后缀的文件')
+  }
+  if (!isLt05M) {
+    ElMessage.error('上传头像图片大小不能超过 2M!')
+  }
+  return !isJPG && isLt05M
+}
+function enterDialog() {
+  console.log(form.value)
+  submitForm(ruleFormRef.value)
+}
+const submitForm = async (formEl) => {
+  if (!formEl) return
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      console.log('submit!')
+      saveForm()
+    } else {
+      // console.log('error submit!', fields)
+    }
+  })
+}
+async function saveForm() {
+  let func_name = ''
+  if(form.value.ID){ // 编辑
+    func_name = 'editLbtManage'
+  }
+  else{
+    func_name = 'addLbtManage'
+  }
+  const res = await api[func_name](form.value)
+  if(res.code === 0)
+  {
+      ElMessage({
+        type: 'success',
+        message: '操作成功!'
+      })
+    getLbtList()
+    closeDialog()
+  }
+}
+const handleSelectionChange = (val) => {
+  lbt_ids.value = val
+}
+function editLbtFunc(item) {
+  form.value = item
+  openDialog('edit')
+}
+function delLbtFunc(item) {
+  ElMessageBox.confirm('此操作将永久删除该数据, 是否继续?', '提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning'
+  })
+  .then(async() => {
+    console.log(1)
+    const res = await api.delLbt({
+          ids:[item.ID]
+    })
+    if (res.code === 0) {
+      ElMessage({
+        type: 'success',
+        message: '删除成功!'
+      })
+      // if (tableData.value.length === 1 && page.value > 1) {
+      //   page.value--
+      // }
+      getLbtList()
+    }
+  },() => {
+  })
+}
+function handleCurrentChange(val) {
+  queryParams.value.page = val
+  getLbtList()
+}
+function handleSizeChange(val) {
+  queryParams.value.pageSize = val
+  getLbtList()
+}
+</script>
+<template>
+  <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="!lbt_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="名称" min-width="150" prop="lbtName" />
+        <el-table-column align="left" label="缩略图" min-width="150" prop="lbtUrl">
+          <template #default="scope">
+            <img class="lbt-thumb" :src="scope.row.lbtUrl" alt="">
+          </template>
+        </el-table-column>
+        <el-table-column align="left" label="是否启用" min-width="150" prop="status" >
+          <template #default="scope">
+            {{scope.row.status === 1?'启用':'禁用'}}
+          </template>
+        </el-table-column>
+        <el-table-column align="left" label="说明" min-width="150" prop="lbtIntroduction" />
+        <el-table-column align="left" label="更新时间" min-width="150" prop="UpdatedAt" />
+        <el-table-column align="left" label="操作" min-width="150" prop="status">
+          <template #default="scope">
+            <el-button
+              icon="edit"
+              size="small"
+              type="primary"
+              link
+              @click="editLbtFunc(scope.row)"
+            >修改</el-button>
+            <el-button
+              icon="delete"
+              size="small"
+              type="danger"
+              link
+              @click="delLbtFunc(scope.row)"
+            >删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <div class="gva-pagination">
+        <el-pagination
+          :current-page="queryParams.page"
+          :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="ruleFormRef" :model="form" :rules="rules" label-width="80px">
+        <el-form-item label="名称" prop="lbtName">
+          <el-input v-model="form.lbtName" placeholder="请输入名称" autocomplete="off" />
+        </el-form-item>
+        <el-form-item label="素材" prop="lbtUrl">
+          <el-upload
+            class="avatar-uploader"
+            :action="`${path}/fileUploadAndDownload/upload`"
+            :headers="{ 'x-token': userStore.token }"
+            :show-file-list="false"
+            :on-success="handleAvatarSuccess"
+            :before-upload="beforeAvatarUpload"
+          >
+            <img v-if="form.lbtUrl" :src="form.lbtUrl" class="avatar" />
+            <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
+          </el-upload>
+        </el-form-item>
+        <el-form-item label="说明" prop="lbtIntroduction">
+          <el-input type="number" v-model="form.lbtIntroduction" placeholder="说明" autocomplete="off" />
+        </el-form-item>
+        <el-form-item label="链接状态" prop="method">
+          <el-switch v-model="form.lbtSkipUrlType" active-value="1" inactive-value="2" active-text="外链" inactive-text="内链" />
+        </el-form-item>
+        <el-form-item label="链接地址" prop="lbtSkipUrl">
+          <el-input v-model="form.lbtSkipUrl" placeholder="链接地址" autocomplete="off" />
+        </el-form-item>
+        <el-form-item label="启用状态" prop="status">
+          <el-switch v-model="form.status" active-value="1" inactive-value="2" active-text="启用" inactive-text="禁用" />
+        </el-form-item>
+        <el-form-item label="展示位置" prop="lbtType">
+          <el-select v-model="form.lbtType" class="m-2" placeholder="请选择">
+            <el-option
+              v-for="item in lbtType_options"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item style="display: none">
+          <el-button type="primary" @click="submitForm(ruleFormRef)">
+            Create
+          </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>
+  .gva-btn-list{
+    justify-content: end;
+  }
+  .lbt-thumb{
+    width: 150px;
+    height: 50px;
+  }
+</style>