添加课程分类；修改接口地址

.env.development

@@ -2,7 +2,7 @@ ENV = 'development'
 VITE_CLI_PORT = 8088
 VITE_SERVER_PORT = 8888
 VITE_BASE_API = /api
-VITE_BASE_PATH = http://192.168.1.165
+VITE_BASE_PATH = http://192.168.1.208
 VITE_EDITOR = vscode
 // VITE_EDITOR = webstorm 如果使用webstorm开发且要使用dom定位到代码行功能 请先自定添加 webstorm到环境变量 再将VITE_EDITOR值修改为webstorm
 // 如果使用docker-compose开发模式，设置为下面的地址或本机主机IP

src/api/course.js

@@ -0,0 +1,41 @@
+import service from '@/utils/request'
+const api = {
+  // 课程api
+  getCourseList : data => {
+    return service({
+      url: '/sys-course',
+      method: 'get',
+      params:data
+    })
+  },
+  // 课程分类api
+  getSubjectList : data => {
+    return service({
+      url: '/sys-course-category',
+      method: 'get',
+      params:data
+    })
+  },
+  addSubject : data => {
+    return service({
+      url: '/sys-course-category',
+      method: 'post',
+      data
+    })
+  },
+  editSubject : data => {
+    return service({
+      url: '/sys-course-category/'+data.id,
+      method: 'put',
+      data
+    })
+  },
+  delSubject : data => {
+    return service({
+      url: '/sys-course-category',
+      method: 'delete',
+      data
+    })
+  },
+}
+export default api

src/utils/custom.js

@@ -0,0 +1,16 @@
+const custom = {
+  getStdSubject: (data) => { // 获取标准类型格式
+    let arr= []
+    for(let item of data) {
+      // item.label = item.name
+      if(item.children){
+        arr.push(...custom.getStdSubject(item.children))
+      }
+      else{
+        arr.push(item)
+      }
+    }
+    return arr
+  }
+}
+export default custom

src/view/course/courseCategory/index.vue

@@ -0,0 +1,282 @@
+<script setup>
+// 引入依赖
+import api from '@/api/course'
+import custom from '@/utils/custom'
+import { toSQLLine } from '@/utils/stringFun'
+import WarningBar from '@/components/warningBar/warningBar.vue'
+import {ref,onMounted } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+// 变量
+const queryParams = ref({
+  pageIndex:1,
+  pageSize:10,
+  keyword:''
+})
+// const dataList = ref([])
+const subjectList = ref([])
+const deleteVisible = ref(false)
+const dialogFormVisible = ref(false)
+const tableData =ref([])
+const dialogTitle = ref('')
+const type = ref('')
+const form = ref({
+    name: '',
+    parent_id: 0,
+    level: 1,
+    sort: 0,
+    is_elite:-1
+  })
+
+const rules = ref({
+  name: [{ required: true, message: '请输入名称', trigger: 'blur' }]
+})
+const categoryForm = ref({})
+const tree_val = ref(null)
+// 生命周期
+// getSubject()
+onMounted(() => {
+  getSubjectList()
+})
+// 方法
+async function getSubjectList() {
+  const res = await api.getSubjectList(queryParams.value)
+  subjectList.value = res.data.records
+  if(res.code == 0) {
+    subjectList.value = res.data.records
+    subjectList.value = addTreeFormatSubject(subjectList.value)
+    console.log(subjectList.value)
+  }
+}
+function addTreeFormatSubject(data) {
+  data.map( item => {
+      item.label = item.name
+      item.value = item.id
+      if(item.level == 3) {
+        item.disabled = true
+      }
+      if(item.children) {
+        addTreeFormatSubject(item.children)
+      }
+  })
+  return data
+}
+function onSubmit() {
+  getSubjectList()
+}
+// 排序
+const sortChange = ({ prop, order }) => {
+  if (prop) {
+    if (prop === 'ID') {
+      prop = 'id'
+    }
+    queryParams.value.orderKey = toSQLLine(prop)
+    queryParams.value.desc = order === 'descending'
+  }
+  getSubjectList()
+}
+// 批量操作
+const handleSelectionChange = (val) => {
+  apis.value = val
+}
+function editApiFunc(row) {
+  // console.log(row)
+  for(let prop in form.value) {
+    if(row[prop]){
+      form.value[prop] = row[prop]
+    }
+  }
+  form.value.id = row.id
+  // console.log(form.value)
+  // return
+  openDialog('edit')
+}
+function deleteFunc(row) {
+  ElMessageBox.confirm('此操作将永久删除该数据, 是否继续?', '提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning'
+  })
+  .then(async() => {
+    const res = await api.delSubject({
+          ids:[row.id]
+    })
+    if (res.code === 0) {
+      ElMessage({
+        type: 'success',
+        message: '删除成功!'
+      })
+      // if (tableData.value.length === 1 && page.value > 1) {
+      //   page.value--
+      // }
+      getSubjectList()
+    }
+  },() => {
+  })
+}
+function openDialog(key) {
+  switch (key) {
+    case 'add':
+      dialogTitle.value = '新增类型'
+      break
+    case 'edit':
+      dialogTitle.value = '编辑类型'
+      break
+    default:
+      break
+  }
+  type.value = key
+  dialogFormVisible.value = true
+}
+const closeDialog = () => {
+  initForm()
+  dialogFormVisible.value = false
+}
+const initForm = () => {
+  categoryForm.value.resetFields()
+  form.value = {
+    name: '',
+    parent_id: 0,
+    level: 1,
+    sort: 0,
+    is_elite:-1
+  }
+}
+function tree_select_func(e) {
+  form.value.level = findLevel(subjectList.value,e)
+}
+function findLevel(data,val){
+  let l_id = 0
+  for(let i =0;i<data.length;i++) {
+    if(data[i].id === val) {
+        l_id = data[i].level
+        break;
+    }
+    else{
+        if(data[i].children && l_id == 0) {
+          l_id = findLevel(data[i].children,val)
+        }
+    }
+  }
+  return l_id
+}
+async function enterDialog() { // 确认创建或修改
+  // console.log(form.value)
+  // console.log(type.value)
+  let func_name = ''
+  if(type.value === 'add') {
+    func_name = 'addSubject'
+  }
+  else{
+    func_name = 'editSubject'
+  }
+  form.value.sort = parseInt(form.value.sort)
+  // return
+  const res = await api[func_name](form.value)
+  if(res.code === 0 ){
+    ElMessage({
+      type: 'success',
+      message: '操作成功!'
+    })
+    getSubjectList()
+    closeDialog()
+  }
+}
+const onReset = () => {
+  queryParams.value = {
+    pageIndex:1,
+    pageSize:10,
+    keyword:''
+  }
+}
+</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.keyword" placeholder="类型名称" />
+        </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>
+      </div>
+      <el-table
+        :data="subjectList"
+        style="width: 100%; margin-bottom: 20px"
+        row-key="id"
+        border
+        default-expand-all
+      >
+        <el-table-column prop="name" label="类型名称" />
+        <el-table-column prop="level" label="等级" />
+        <el-table-column prop="parent_id" label="父级id" />
+        <el-table-column label="首页推荐" >
+          <template #default="scope">
+            {{scope.row.is_elite == 1?'是':'否'}}
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" >
+          <template #default="scope">
+            <el-button
+              icon="edit"
+              size="small"
+              type="primary"
+              link
+              @click="editApiFunc(scope.row)"
+            >编辑</el-button>
+            <el-button
+              icon="delete"
+              size="small"
+              type="danger"
+              link
+              @click="deleteFunc(scope.row)"
+            >删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <!--新增、编辑-->
+    <el-dialog v-model="dialogFormVisible" :before-close="closeDialog" :title="dialogTitle">
+      <!-- <warning-bar title="新增API，需要在角色管理内配置权限才可使用" />-->
+      <el-form ref="categoryForm" :model="form" :rules="rules" label-width="80px">
+        <el-form-item label="父级类型" prop="path">
+          <el-tree-select @change="tree_select_func" check-strictly v-model="form.parent_id" :data="subjectList" :render-after-expand="false" />
+        </el-form-item>
+        <el-form-item label="名称" prop="path">
+          <el-input v-model="form.name" placeholder="请输入类型名称" autocomplete="off" />
+        </el-form-item>
+        <el-form-item label="排序" prop="path">
+          <el-input type="number" v-model="form.sort" placeholder="排序越小，展示越靠前" autocomplete="off" />
+        </el-form-item>
+        <el-form-item label="首页推荐" prop="method">
+          <el-switch v-model="form.is_elite" :active-value="1" :inactive-value="-1" />
+        </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>

src/view/course/index.vue

@@ -0,0 +1,171 @@
+<script setup>
+// 引入依赖
+import api from '@/api/course'
+// import { toSQLLine } from '@/utils/stringFun'
+import WarningBar from '@/components/warningBar/warningBar.vue'
+import {ref,onMounted } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+// 变量
+const queryParams = ref({
+  pageIndex:1,
+  pageSize:10,
+  name:'',
+  status:'',
+  subject:''
+})
+const subjectParams = ref({
+    pageIndex:1,
+    pageSize:100,
+})
+const dataList = ref([])
+const subjectList = ref([])
+// 生命周期
+getCourseList()
+// getSubject()
+// 方法
+async function getCourseList() {
+  const res = await api.getCourseList(queryParams.value)
+  if(res.code === 200) {
+    dataList.value = res.data.list
+  }
+}
+function onSubmit() {
+  getCourseList()
+}
+async function getSubject(){
+  const res = await api.getSubject()
+  if(res.code == 200) {
+    subjectList.value = res.data.list
+  }
+}
+</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.method" clearable placeholder="请选择">
+            <el-option
+              v-for="item in subjectList"
+              :key="item.value"
+              :label="`${item.label}(${item.value})`"
+              :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('addApi')">新增</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" :disabled="!apis.length" style="margin-left: 10px;" @click="deleteVisible = true">删除</el-button>
+          </template>
+        </el-popover>
+      </div>
+      <el-table :data="tableData" @sort-change="sortChange" @selection-change="handleSelectionChange">
+        <el-table-column
+          type="selection"
+          width="55"
+        />
+        <el-table-column align="left" label="id" min-width="60" prop="ID" sortable="custom" />
+        <el-table-column align="left" label="API路径" min-width="150" prop="path" sortable="custom" />
+        <el-table-column align="left" label="API分组" min-width="150" prop="apiGroup" sortable="custom" />
+        <el-table-column align="left" label="API简介" min-width="150" prop="description" sortable="custom" />
+        <el-table-column align="left" label="请求" min-width="150" prop="method" sortable="custom">
+          <template #default="scope">
+            <div>
+              {{ scope.row.method }} / {{ methodFilter(scope.row.method) }}
+            </div>
+          </template>
+        </el-table-column>
+
+        <el-table-column align="left" fixed="right" label="操作" width="200">
+          <template #default="scope">
+            <el-button
+              icon="edit"
+              size="small"
+              type="primary"
+              link
+              @click="editApiFunc(scope.row)"
+            >编辑</el-button>
+            <el-button
+              icon="delete"
+              size="small"
+              type="primary"
+              link
+              @click="deleteApiFunc(scope.row)"
+            >删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <div class="gva-pagination">
+        <el-pagination
+          :current-page="page"
+          :page-size="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">
+      <warning-bar title="新增API，需要在角色管理内配置权限才可使用" />
+      <el-form ref="apiForm" :model="form" :rules="rules" label-width="80px">
+        <el-form-item label="路径" prop="path">
+          <el-input v-model="form.path" autocomplete="off" />
+        </el-form-item>
+        <el-form-item label="请求" prop="method">
+          <el-select v-model="form.method" placeholder="请选择" style="width:100%">
+            <el-option
+              v-for="item in methodOptions"
+              :key="item.value"
+              :label="`${item.label}(${item.value})`"
+              :value="item.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="api分组" prop="apiGroup">
+          <el-input v-model="form.apiGroup" autocomplete="off" />
+        </el-form-item>
+        <el-form-item label="api简介" prop="description">
+          <el-input v-model="form.description" autocomplete="off" />
+        </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>