zhouwx
2024-07-19 e3bfce922c47cf8706be6eada6f5edbd38f39316
src/views/onlineEducation/groupExams/index.vue
@@ -1,11 +1,41 @@
<template>
  <div class="app-container">
    <div style="margin-bottom: 10px;display: flex;align-items: center;justify-content: space-between">
    <div style="display: flex;justify-content: space-between">
      <el-form :inline="true" style="display: flex;align-items: center;flex-wrap: wrap;" >
        <el-form-item>
      <el-button
          type="primary"
          plain
          @click="openDialog('add',{})"
      >开始组卷考试</el-button>
        </el-form-item>
        <el-form-item label="考试名称:" >
          <el-input v-model="data.queryParams.name" placeholder="请输入考试名称"></el-input>
        </el-form-item>
        <el-form-item label="科目/类别:" >
          <el-cascader
              style="width: 100%"
              ref="classifyRef"
              v-model="data.queryParams.categoryId"
              :options="data.classifyList"
              :props="data.props"
              clearable
              :show-all-levels="false"
              @change="handleChange"
          />
        </el-form-item>
        <el-form-item >
          <el-button
              type="primary"
              @click="getList"
          >查询</el-button>
          <el-button
              type="primary"
              plain
              @click="reset"
          >重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 表格数据 -->
    <el-table v-loading="loading" :data="dataList" :border="true">
@@ -72,14 +102,18 @@
import {delQuestionBank, getQuestionBank} from "@/api/onlineEducation/questionBank";
import {delBatch, getBatch} from "@/api/onlineEducation/batch";
import {delExam, getExam} from "@/api/onlineEducation/exam";
import {getClassification} from "@/api/onlineEducation/courseClass";
const { proxy } = getCurrentInstance();
const loading = ref(false);
const dialogRef = ref();
const questionRef = ref();
const classifyRef = ref(null)
const data = reactive({
  queryParams: {
    name:'',
    categoryId: null,
    pageNum: 1,
    pageSize: 10,
  },
@@ -87,7 +121,11 @@
  dataList: [],
  isAdmin: false,
  companyName: '',
  remainPeriod: null
  remainPeriod: null,
  categoryList: [],
  props: {
    checkStrictly: true,
  },
});
@@ -102,6 +140,7 @@
    data.isAdmin = false;
    data.companyName = userInfo.companyName
  }
  await getClassifyList();
  await getList()
})
onUnmounted(()=>{
@@ -133,7 +172,13 @@
/** 重置新增的表单以及其他数据  */
function reset() {
  proxy.resetForm("roleRef");
  data.queryParams = {
    name:'',
    categoryId: null,
    pageNum: 1,
    pageSize: 10,
  }
  getList()
}
const handleDelete = (val) => {
  ElMessageBox.confirm(
@@ -161,4 +206,41 @@
const viewQuestion = (val) => {
  questionRef.value.openDialog(val)
}
const handleChange = ()=> {
  console.log("label====",classifyRef.value.getCheckedNodes()[0].value)
  data.queryParams.categoryId = classifyRef.value.getCheckedNodes()[0].value
  // 我这里只是打印了一下label的值哦,需要赋值的话自己去赋值哦
  if (classifyRef.value.popperVisible) {
    classifyRef.value.togglePopperVisible()
  }
}
const  getClassifyList = async () => {
  const res = await getClassification();
  if(res.code === 200){
    data.classifyList = recursion(res.data)
  }else{
    ElMessage.warning(res.message)
  }
}
const recursion = (data) => {
  let tmp = []
  for (let i = 0; i < data.length; i++) {
    let item = data[i]
    // children为空
    if (item.children&& item.children.length==0) {
      tmp.push({
        value: item.id,
        label: item.name
      })
      // 有children
    } else {
      tmp.push({
        value: item.id,
        label: item.name,
        children:recursion(item.children)
      })
    }
  }
  return tmp;
}
</script>