提交

zhouwx

2024-06-21 368096e3b5e0b7ee16fc549db38b22bb866c9ed7

提交

 src/api/onlineEducation/courseClass.js

对比新文件
@@ -0,0 +1,42 @@
import request from "@/utils/request";

export function getClassification(params) {
    return request({
        url: '/system/category/list',
        method: 'get',
        params: params
    })
}

export function addClassification(data) {
    return request({
        url: '/system/category',
        method: 'post',
        data: data
    })
}

export function editClassification(params) {
    return request({
        url: `/system/category`,
        method: 'put',
        data: params
    })
}



export function checkClassName(data) {
    return request({
        url: 'system/category/checkNameUnique',
        method: 'post',
        data: data
    })
}

export function delClassification(data) {
    return request({
        url: `/system/category/` + data,
        method: 'delete'
    })
}

 src/layout/components/AppMain.vue

@@ -21,7 +21,7 @@
<style lang="scss" scoped>
.app-main {
  /* 50= navbar  50  */
  min-height: calc(100vh - 50px);
  min-height: calc(100vh - 60px);
  width: 100%;
  position: relative;
  overflow: hidden;

 src/router/index.js

@@ -67,6 +67,18 @@
  //   ]
  // },
  {
    path: '/newPage',
    component: Layout,
    redirect: '/newPage',
    children: [
      {
        path: '/newPage',
        component: () => import('@/views/onlineEducation/systemManage/banner/components/newPage.vue'),
        name: 'NewPage',
      }
    ]
  },
  {
    path: '/course',
    component: Layout,
    redirect: '/course',

 src/views/onlineEducation/systemManage/banner/components/bannerDialog.vue

@@ -27,9 +27,9 @@
            <el-radio :label="1">内部打开</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="排序:" prop="sort" >
          <el-input-number v-model="state.form.sort" />
        </el-form-item>
<!--        <el-form-item label="排序:" prop="sort" >-->
<!--          <el-input-number v-model="state.form.sort" />-->
<!--        </el-form-item>-->
        <el-form-item label="状态" prop="status" >
          <el-switch
              v-model="state.form.status"
@@ -72,7 +72,7 @@
    imgUrl: '',
    webUrl: '',
    carouselTarget: 0,
    sort: 0,
    // sort: 0,
    status: true,
  },
  formRules:{
@@ -213,7 +213,7 @@
    imgUrl: '',
    webUrl: '',
    carouselTarget: 0,
    sort: 0,
    // sort: 0,
    status: true,
  }
  state.imgList = []

 src/views/onlineEducation/systemManage/banner/components/newPage.vue

对比新文件
@@ -0,0 +1,20 @@
<template>
  <div class="notice">
    <iframe name="bottom" :src="state.url" style="width: 100%; height: 850px;margin-top: 6px;border: lightgrey 1px solid"></iframe>
  </div>
</template>
<script setup>
import {onMounted, reactive, ref, toRefs} from 'vue'
const route = useRoute();
const state = reactive({
  url:''
})

onMounted(()=>{
  state.url = route.query.url;
})
</script>

<style scoped lang="scss">

</style>

 src/views/onlineEducation/systemManage/banner/index.vue

@@ -29,13 +29,17 @@
          </div>
        </template>
      </el-table-column>
      <el-table-column label="地址" prop="webUrl" align="center" />
      <el-table-column label="地址" prop="webUrl" align="center" >
        <template #default="scope">
          <span style="color:#1890ff; cursor: pointer" @click="openUrl(scope.row)">{{scope.row.webUrl}}</span>
        </template>
      </el-table-column>
      <el-table-column label="跳转方式" prop="carouselTarget" align="center"  >
        <template #default="scope">
         <span>{{scope.row.carouselTarget == 0 ? '新窗口打开' : '内部打开' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="排序" prop="sort" align="center"/>
<!--      <el-table-column label="排序" prop="sort" align="center"/>-->
      <el-table-column label="状态" prop="status" align="center" width="150"/>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" >
        <template #default="scope">
@@ -62,6 +66,7 @@
import {delCompany, getCompany} from "@/api/onlineEducation/company";
import bannerDialog from  './components/bannerDialog.vue'
import {delBanner, getBanner} from "@/api/onlineEducation/banner";
import router from "@/router";
const { proxy } = getCurrentInstance();
const loading = ref(false);
const dialogRef = ref();
@@ -131,4 +136,17 @@
      })
}

const openUrl = (val) => {
  let fixedUrl = '';
  if(val.webUrl.indexOf("http") != -1){
    fixedUrl = val.webUrl
  }else{
    fixedUrl = "http://" +val.webUrl;
  }
  if(val.carouselTarget == 0){
    window.open(fixedUrl, '_blank')
  }else {
    router.push({ path: "/newPage", query: { url: fixedUrl } });
  }
}
</script>

 src/views/onlineEducation/systemManage/company/index.vue

@@ -23,7 +23,7 @@
          <el-button link type="primary">查看详情</el-button>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" >
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="200" >
        <template #default="scope">
          <el-button link type="primary" @click="openDialog('distribute',scope.row)">分配课时</el-button>
          <el-button link type="primary" @click="openDialog('edit',scope.row)">编辑</el-button>

 src/views/onlineEducation/systemManage/courseClassification/components/courseClassDialog.vue

对比新文件
@@ -0,0 +1,175 @@
<template>
  <div class="notice">
    <el-dialog
        v-model="dialogVisible"
        :title="title"
        width="500px"
        :before-close="handleClose"
    >
      <el-form :model="state.form" size="default" ref="busRef" :rules="state.formRules" label-width="150px" >
        <el-form-item label="名称:" prop="name">
          <el-input v-model.trim="state.form.name"></el-input>
        </el-form-item>
        <el-form-item label="排序:" prop="sort" >
          <el-input-number v-model="state.form.sort" />
        </el-form-item>
        <el-form-item label="状态" prop="status" >
          <el-switch
              v-model="state.form.status"
              class="ml-2"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
            <el-button @click="handleClose" size="default">取 消</el-button>
            <el-button type="primary"  @click="onSubmit" size="default" v-preReClick>确认</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import {reactive, ref, toRefs} from 'vue'
import Editor from "@/components/Editor/index.vue";
import {ElMessage} from "element-plus";
import {addNotice} from "@/api/backManage/notice";
import {addDict, editDict, getDictDetail} from "@/api/backManage/evaluate";
import {addCompany, checkName, distributeCompany, editCompany} from "@/api/onlineEducation/company";
import {verifyPhone} from "@/utils/validate";
import {addClassification, checkClassName, editClassification} from "@/api/onlineEducation/courseClass";

const dialogVisible = ref(false);
const title = ref("");
const busRef = ref();
const length = ref()
const emit = defineEmits(["getList"]);
const startUsername = ref('');

const validateName = (rule, value, callback)=>{
  if(value === ''){
    callback(new Error('请输入课程分类名称'))
  }else if(title.value === '编辑' && value === startUsername.value){
    callback()
  }else{
    let param = {}
    if(title.value === '新增') {
      param = {
        name:value
      }
    }else if(title.value === '编辑'){
      param = {
        name:value,
        id: state.form.id
      }
    }
    checkClassName(param).then((res)=>{
      if(res.data == false){
        callback(new Error('课程分类名称已被占用，请更换其他名称'))
      }else{
        callback()
      }
    })
  }
}
const state = reactive({
  form: {
    id: '',
    name: '',
    sort: 0,
    parentId: null,
    status: true
  },
  formRules:{
    name: [{ required: true, trigger: "blur", validator: validateName }],
  },
})


const openDialog = async (type, value) => {
  length.value = value.listLength
  title.value = type === 'addFirst' || type === 'add' ? '新增' : type ==='edit' ? '编辑' : '' ;
  if(type === 'edit') {
    state.form = value;
    state.form.status = value.status == 0;
    state.form.sort = value.sort;
    startUsername.value = value.username;
  }else if(type === 'add' && value ){
    state.form.parentId = value.id
  }
  dialogVisible.value = true;
}

const onSubmit = async () => {
  const valid = await busRef.value.validate();
  if(valid){
    if(title.value === '新增'){
      const {id, ...data} = JSON.parse(JSON.stringify(state.form))
      data.status = data.status ? 0 : 1
      const res = await addClassification(data)
      if(res.code === 200){
        ElMessage({
          type: 'success',
          message: '新增成功'
        });
      }else{
        ElMessage.warning(res.message)
      }
      emit("getList")
      busRef.value.clearValidate();
      reset();
      dialogVisible.value = false;
    }else if(title.value === '编辑'){
      const {...data} = JSON.parse(JSON.stringify(state.form))
      data.status = data.status ? 0 : 1
      const res = await editClassification(data)
      if(res.code === 200){
        ElMessage({
          type: 'success',
          message: '编辑成功'
        });
      }else{
        ElMessage.warning(res.message)
      }
      emit("getList")
      busRef.value.clearValidate();
      reset();
      dialogVisible.value = false;
    }
  }
}

const handleClose = () => {
  busRef.value.clearValidate();
  reset();
  dialogVisible.value = false;
  emit("getList")

}
const reset = () => {
  state.form = {
    id: '',
    name: '',
    sort: 0,
    parentId: null,
    status: true
  }
}
defineExpose({
  openDialog
});

</script>

<style scoped lang="scss">
.notice{
  :deep(.el-form .el-form-item__label) {
    font-size: 15px;
  }
  .file {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
}
</style>

 src/views/onlineEducation/systemManage/courseClassification/index.vue

@@ -1,12 +1,111 @@
<template>
<div>课程分类</div>
  <div class="app-container">
    <div style="margin-bottom: 10px">
      <el-form>
        <el-form-item label="分类名称">
          <el-input style="width: 20%" v-model="data.queryParams.name "></el-input>
          <el-button type="primary" style="margin-left: 30px" @click="getList">查询</el-button>
          <el-button plain @click="reset">重置</el-button>
          <el-button type="success" plain @click="openDialog('addFirst',{})">添加</el-button>
        </el-form-item>

      </el-form>
    </div>
    <!-- 表格数据 -->
    <el-table v-loading="loading" :data="dataList" :border="true" row-key="id">
      <el-table-column label="序号" type="index" align="center" width="80" />
      <el-table-column label="名称" >
        <template #default="scope">
          <span>{{scope.row.name}}</span>
        </template>
      </el-table-column>
      <el-table-column label="排序" prop="sort" align="center" width="80" />
      <el-table-column label="状态" prop="status" align="center"  width="80">
        <template #default="scope">
          <span>{{scope.row.status ==0 ? '正常' : '停用'}}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="250" >
        <template #default="scope">
          <el-button type="success" plain @click="openDialog('add',scope.row)">添加</el-button>
          <el-button type="primary" plain @click="openDialog('edit',scope.row)">编辑</el-button>
          <el-button type="danger" plain @click="handleDelete(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <class-dialog ref="areaRef" @getList="getList"></class-dialog>
  </div>
</template>

<script setup>
import {getCurrentInstance, onMounted, reactive, ref, toRefs} from "vue";
import {ElMessage, ElMessageBox} from "element-plus";
import classDialog from "./components/courseClassDialog.vue"
import {delArea, getArea} from "@/api/backManage/area";
import {getDictList} from "@/api/backManage/evaluate";
import {delMonitor} from "@/api/sysUsers";
import {delClassification, getClassification} from "@/api/onlineEducation/courseClass";
const { proxy } = getCurrentInstance();
const loading = ref(false);
const areaRef = ref();
const cityList = ref([])
const data = reactive({
  queryParams: {
    name: '',
    pageNum: 1,
    pageSize: 10,
  },
  total: 0,
  dataList: [
  ]
});

const { queryParams, total, dataList } = toRefs(data);

//页面加载
onMounted(() => {
  getList();
});
const getList = async () => {
  loading.value = true;
  const res = await getClassification(data.queryParams);
  if(res.code === 200){
    dataList.value = res.data
  }else{
    ElMessage.warning(res.message)
  }
  loading.value = false;
}

const openDialog = (type, value) => {
  areaRef.value.openDialog(type, value);
}

/** 重置新增的表单以及其他数据  */
function reset() {
 data.queryParams.name = '';
 data.queryParams.pageNum = 1;
 getList();
}
const handleDelete = (val) => {
  ElMessageBox.confirm(
      '确定删除此条数据？',
      '提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
      .then( async() => {
        const res = await delClassification(val)
        if(res.code == 200){
          ElMessage.success('数据删除成功')
          await getList()
        }else{
          ElMessage.warning(res.message)
        }
      })
}


</script>



<style scoped lang="scss">

</style>