题目题库

zhouwx

2024-07-09 e8e49938910bd0d627f1d8cf6dd0eaed01050871

题目题库

 src/api/onlineEducation/question.js

对比新文件
@@ -0,0 +1,43 @@
import request from '@/utils/request'

export function getQuestion(param) {
    return request({
        url: '/question/list',
        method: 'get',
        params: param
    })
}

export function addQuestion(data) {
    return request({
        url: '/question',
        method: 'post',
        data: data
    })
}

export function getQuestionById(params) {
    return request({
        url: '/question/' +params ,
        method: 'get',
        params: params
    })
}


export function editQuestion(params) {
    return request({
        url: `/question`,
        method: 'put',
        data: params
    })
}


export function delQuestion(userId) {
    return request({
        url: '/question/' + userId,
        method: 'delete'
    })
}


 src/api/onlineEducation/questionBank.js

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

export function getQuestionBank(param) {
    return request({
        url: '/question-bank/list',
        method: 'get',
        params: param
    })
}

export function addQuestionBank(data) {
    return request({
        url: '/question-bank',
        method: 'post',
        data: data
    })
}


export function editQuestionBank(params) {
    return request({
        url: `/question-bank`,
        method: 'put',
        data: params
    })
}


export function delQuestionBank(userId) {
    return request({
        url: '/question-bank/' + userId,
        method: 'delete'
    })
}

export function checkQuestionBankName(data) {
    return request({
        url: '/question-bank/checkNameUnique',
        method: 'post',
        data: data
    })
}

 src/layout/components/Sidebar/menu.js

@@ -100,7 +100,7 @@
    ],
    companyMenu: [
        {
            path: '/onlineEducation',
            path: '/courseManage',
            redirect: '/onlineEducation/courseManage',
            meta: { title: '课程管理',icon: 'form'},
            children: [
@@ -117,10 +117,27 @@
            ]
        },
        {
            path: '/question',
            name: 'Question',
            meta: { title: '题库管理',icon: 'build',affix: true }
            path: '/questionBankManagement',
            redirect: '/onlineEducation/questionBankManagement',
            meta: { title: '题目题库管理',icon: 'build'},
            children: [
                {
                    path: 'questionBank',
                    name: 'questionBank',
                    meta: { title: '题库列表',icon: 'list'}
                } ,
                {
                    path: 'question',
                    name: 'question',
                    meta: { title: '题目列表',icon: 'education'}
                } ,
            ]
        },
        // {
        //     path: '/question',
        //     name: 'Question',
        //     meta: { title: '题库管理',icon: 'build',affix: true }
        // },
        {
            path: '/class',
            name: 'Class',

 src/views/onlineEducation/courseManage/index.vue

@@ -66,7 +66,7 @@
              <el-button link type="primary" @click="toChapters(scope.row)">章节</el-button>
              <el-button link type="danger" @click="handleDelete(scope.row)">删除</el-button>
            </div>
            <div v-else>--</div>
            <div v-else><el-button link type="primary" @click="toChapters(scope.row)">章节</el-button></div>
          </div>
          <div v-else-if="scope.row.state == 1" >
              <el-button link type="primary" @click="openDialog('edit',scope.row)">编辑</el-button>

 src/views/onlineEducation/questionBankManagement/components/questionBankDialog.vue

对比新文件
@@ -0,0 +1,241 @@
<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="companyName" v-if="!state.isAdmin">
          <el-input v-model.trim="state.form.companyName" disabled></el-input>
        </el-form-item>
        <el-form-item label="题库名称:" prop="name">
          <el-input v-model.trim="state.form.name" placeholder="请输入题库名称"></el-input>
        </el-form-item>
        <el-form-item label="课程分类:" prop="categoryId" >
          <el-cascader
              style="width: 100%"
              ref="classifyRef"
              v-model="state.form.categoryId"
              :options="state.classifyList"
              :props="state.props"
              clearable
              :show-all-levels="false"
              @change="handleChange"
          />
        </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 {ElMessage} from "element-plus";

import {
  getClassification
} from "@/api/onlineEducation/courseClass";
import {addCourse, checkCourseName, editCourse, getCourseById} from "@/api/onlineEducation/courseManage";
import {getToken} from "@/utils/auth";
import {delPic, getBannerById} from "@/api/onlineEducation/banner";
import Cookies from "js-cookie";
import {addQuestionBank, checkQuestionBankName, editQuestionBank} from "@/api/onlineEducation/questionBank";

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

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
      }
    }
    checkQuestionBankName(param).then((res)=>{
      if(res.data == false){
        callback(new Error('题库名称已被占用，请更换其他名称'))
      }else{
        callback()
      }
    })
  }
}
const state = reactive({
  form: {
    id: '',
    name: '',
    categoryId: null,
    companyName: '',
    companyId: null
  },
  formRules: {
    name: [{required: true, trigger: "blur", validator: validateName}],
    categoryId: [{required: true, message: '请选择课程分类', trigger: 'blur'}],
  },
  classifyList: [],
  isAdmin: false,
  props: {
    checkStrictly: true,
  }
})

const openDialog = async (type, value) => {
  await getClassifyList();
  const userInfo = JSON.parse(Cookies.get('userInfo'))
  console.log("userInfo",userInfo)
  if(userInfo.userType === 0){
    state.isAdmin = true;
    state.form.companyName = ''
    state.form.companyId = null
  }else {
    state.isAdmin = false;
    state.form.companyName = userInfo.companyName
    state.form.companyId = userInfo.companyId
  }
  title.value = type === 'addFirst' || type === 'add' ? '新增' : type ==='edit' ? '编辑' : '' ;
  if(type === 'edit') {
    state.form.id = value.id
    state.form.name = value.name
    state.form.categoryId = value.categoryId
    startUsername.value = value.name;
  }else if(type === 'add' && value ){
    state.form.parentId = value.id
  }
  dialogVisible.value = true;
}
const  getClassifyList = async () => {
  const res = await getClassification();
  if(res.code === 200){
    state.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;
}

const handleChange = ()=> {
  console.log("label====",classifyRef.value.getCheckedNodes()[0].value)
  state.form.categoryId = classifyRef.value.getCheckedNodes()[0].value
  // 我这里只是打印了一下label的值哦，需要赋值的话自己去赋值哦
}

const onSubmit = async () => {
  if(state.isAdmin){
    ElMessage({
      type: 'warning',
      message: '管理员暂无权限'
    });
    return;
  }
  const valid = await busRef.value.validate();
  if(valid){
    if(title.value === '新增'){
      const {id, ...data} = JSON.parse(JSON.stringify(state.form))
      const res = await addQuestionBank(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))
      const res = await editQuestionBank(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: '',
    categoryId: null,
    companyName: '',
    companyId: null
  }
}
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/questionBankManagement/index.vue

@@ -1,12 +1,117 @@
<template>
<div>题库管理</div>
  <div class="app-container">
    <div style="margin-bottom: 10px">
      <el-button
          type="primary"
          plain
          icon="Plus"
          @click="openDialog('add',{})"
      >新增</el-button>
    </div>
    <!-- 表格数据 -->
    <el-table v-loading="loading" :data="dataList" :border="true">
      <el-table-column label="序号" type="index" align="center" width="80" />
      <el-table-column label="题库名称" prop="name" align="center"  />
      <el-table-column label="分类名称" prop="categoryName" align="center"  />
      <el-table-column label="单选题数量" prop="singleCount" align="center"  />
      <el-table-column label="多选题数量" prop="multiCount" align="center"  />
      <el-table-column label="判断题数量" prop="judgeCount" align="center"  />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width"  width="180">
        <template #default="scope">
          <el-button link type="primary" @click="openDialog('edit',scope.row)">编辑</el-button>
          <el-button link type="danger" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
        v-show="total > 0"
        :total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
    />

    <question-bank-dialog ref="dialogRef" @getList=getList></question-bank-dialog>
  </div>
</template>

<script setup>
import {getCurrentInstance, onMounted, onUnmounted, reactive, ref, toRefs} from "vue";
import {ElMessage, ElMessageBox} from "element-plus";
import questionBankDialog from './components/questionBankDialog.vue'
import Cookies from "js-cookie";
import {delQuestionBank, getQuestionBank} from "@/api/onlineEducation/questionBank";


const { proxy } = getCurrentInstance();
const loading = ref(false);
const dialogRef = ref();
const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 10,
  },
  total: 0,
  dataList: [],
  isAdmin: false

});

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

onMounted(async ()=>{
  const userInfo = JSON.parse(Cookies.get('userInfo'))
  console.log("userInfo",userInfo)
  if(userInfo.userType === 0){
    data.isAdmin = true;
  }else {
    data.isAdmin = false;
  }
  await getList()
})
onUnmounted(()=>{

})

const getList = async () => {
  loading.value = true
  const res = await getQuestionBank(data.queryParams)
  if(res.code == 200){
    data.dataList = res.data.list
    data.total = res.data.total
  }else{
    ElMessage.warning(res.message)
  }
  loading.value = false
}

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

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

</script>



<style scoped lang="scss">

</style>

 src/views/onlineEducation/questionBankManagement/questionManage/components/questionDialog.vue

对比新文件
@@ -0,0 +1,377 @@
<template>
  <div class="notice">
    <el-dialog
        v-model="dialogVisible"
        :title="title"
        width="50%"
        :before-close="handleClose"
    >
      <el-form :model="state.form" size="default" ref="busRef" :rules="state.formRules" label-width="150px" >
        <el-form-item label="题目类型:" prop="questionType">
          <el-select v-model="state.form.questionType" placeholder="请选择题型" style="width: 100%">
            <el-option
                v-for="item in state.questionTypeList"
                :key="item.id"
                :label="item.name"
                style="width: 100%"
                :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="归属题库:" prop="bankName">
          <el-select
              v-model="state.form.bankName"
              style="width: 100%"
              v-loadMoreNew:[reselect]="handleScroll"
              :popper-class="reselect.name"
              @change="selectValue"
              class="item-width"
              placeholder="请选择题库"
          >
            <el-option
                v-for="item in state.bankList"
                :key="item.id"
                :label="item.name"
                :value="item.name"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="题目内容:" prop="title">
          <el-input v-model.trim="state.form.title" type="textarea" placeholder="请输入题目内容"></el-input>
        </el-form-item>
        <el-form-item label="选项:" prop="content">
          <div v-if="state.form.questionType === 1" style="width: 100%">
            <div v-for="(item,index) in 4" :key="index" >
              <div style="display: flex;">
                <span>{{item ===1 ? 'A':item ===2 ? 'B' : item ===3 ? 'C' : 'D'}}</span>
                <el-input type="textarea" v-model="state.singleQuestion.items[index].content" placeholder="请输入选项内容" style="width: 100%;margin-left: 20px;margin-bottom: 10px"></el-input>
              </div>
            </div>
            <div style="display: flex">
              <span style="width: 50px">解析：</span>
              <el-input type="textarea" v-model="state.singleQuestion.analyze" placeholder="请输入题目解析" style="width: 100%;margin-bottom: 10px"></el-input>
            </div>
          </div>
          <div v-else-if="state.form.questionType === 2" style="width: 100%">
            <div v-for="(item,index) in 4" :key="index" >
              <div style="display: flex;">
                <span>{{item ===1 ? 'A':item ===2 ? 'B' : item ===3 ? 'C' : 'D'}}</span>
                <el-input type="textarea" v-model="state.multiQuestion.items[index].content" placeholder="请输入选项内容" style="width: 100%;margin-left: 20px;margin-bottom: 10px"></el-input>
              </div>
            </div>
            <div style="display: flex">
              <span style="width: 50px">解析：</span>
              <el-input type="textarea" v-model="state.multiQuestion.analyze" placeholder="请输入题目解析" style="width: 100%;margin-bottom: 10px"></el-input>
            </div>
          </div>
          <div v-else style="width: 100%">
            <div v-for="(item,index) in 2" :key="index" >
              <div style="display: flex;">
                <span>{{item ===1 ? 'A': 'B'}}</span>
                <el-input v-model="state.judgeQuestion.items[index].content"  style="width: 100%;margin-left: 20px;margin-bottom: 10px" disabled></el-input>
              </div>
            </div>
            <div style="display: flex">
              <span style="width: 50px">解析：</span>
              <el-input type="textarea" v-model="state.judgeQuestion.analyze" placeholder="请输入题目解析" style="width: 100%;margin-bottom: 10px"></el-input>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="正确答案:" prop="answer">
          <el-radio-group v-model="state.form.answer" v-if="state.form.questionType === 1">
            <el-radio :label="'A'">A</el-radio>
            <el-radio :label="'B'">B</el-radio>
            <el-radio :label="'C'">C</el-radio>
            <el-radio :label="'D'">D</el-radio>
          </el-radio-group>
          <el-checkbox-group v-model="state.checkList" v-if="state.form.questionType === 2" @change="changeCheckBox">
            <el-checkbox label="A"></el-checkbox>
            <el-checkbox label="B"></el-checkbox>
            <el-checkbox label="C"></el-checkbox>
            <el-checkbox label="D"></el-checkbox>
          </el-checkbox-group>
          <el-radio-group v-model="state.form.answer" v-if="state.form.questionType === 3">
            <el-radio :label="'A'">A</el-radio>
            <el-radio :label="'B'">B</el-radio>
          </el-radio-group>
        </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 {ElMessage} from "element-plus";

import {
  getClassification
} from "@/api/onlineEducation/courseClass";
import {addCourse, checkCourseName, editCourse, getCourseById} from "@/api/onlineEducation/courseManage";
import {getToken} from "@/utils/auth";
import {delPic, getBannerById} from "@/api/onlineEducation/banner";
import Cookies from "js-cookie";
import {
  addQuestionBank,
  checkQuestionBankName,
  editQuestionBank,
  getQuestionBank
} from "@/api/onlineEducation/questionBank";
import {addQuestion, editQuestion, getQuestionById} from "@/api/onlineEducation/question";

const dialogVisible = ref(false);
const title = ref("");
const busRef = ref();
const length = ref()
const emit = defineEmits(["getList"]);
const startUsername = ref('');
const classifyRef = ref(null)
const state = reactive({
  form: {
    id: '',
    title: '',
    questionType: 1,
    bankName: '',
    bankId: null,
    answer: ''
  },
  formRules: {

    questionType: [{required: true, trigger: "blur", message: '请选择题目类型'}],
    bankName: [{required: true, trigger: "blur", message: '请选择归属题库'}],
    title: [{required: true, trigger: "blur", message: '请输入题目内容'}],
    // answer: [{required: true, trigger: "blur", message: '请选择正确答案'}],
  },
  classifyList: [],
  isAdmin: false,
  props: {
    checkStrictly: true,
  },
  questionTypeList: [
    {
      id: 1,
      name: '单选题'
    },
    {
      id: 2,
      name: '多选题'
    },
    {
      id: 3,
      name: '判断题'
    }
  ],
  singleQuestion: {
    analyze: '',
    items: [
      {
        prefix:"A",
        content: ''
      },
      {
        prefix:"B",
        content: ''
      },
      {
        prefix:"C",
        content: ''
      },
      {
        prefix:"D",
        content: ''
      },
    ]
  },
  judgeQuestion: {
    analyze: '',
    items: [
      {
        prefix:"A",
        content: '是'
      },
      {
        prefix:"B",
        content: '否'
      },
    ]
  },
  multiQuestion: {
    analyze: '',
    items: [
      {
        prefix:"A",
        content: ''
      },
      {
        prefix:"B",
        content: ''
      },
      {
        prefix:"C",
        content: ''
      },
      {
        prefix:"D",
        content: ''
      },
    ]
  },
  checkList: [],
  bankList: [],
  bankPageNum: 1, // 当前页码
  bankPageSize: 10, // 每页显示的数量
  hasMoreItems: null, // 是否还有更多选项

})
const reselect = reactive({
  name: 'bank1'
})
const selectValue = (val) => {
  state.bankList.forEach(item => {
    if(item.name === val){
      state.form.bankId = item.id
    }
  })
}

const openDialog = async (type, value) => {
  await loadMoreBankData();
  const userInfo = JSON.parse(Cookies.get('userInfo'))
  console.log("userInfo",userInfo)
  if(userInfo.userType === 0){
    state.isAdmin = true;
    state.form.companyName = ''
    state.form.companyId = null
  }else {
    state.isAdmin = false;
    state.form.companyName = userInfo.companyName
    state.form.companyId = userInfo.companyId
  }
  title.value = type === 'addFirst' || type === 'add' ? '新增' : type ==='edit' ? '编辑' : '' ;
  if(type === 'edit') {
    const res = await getQuestionById(value.id)
    if(res.code === 200){
      state.form = res.data
      if(res.data.questionType === 1){
        state.singleQuestion = JSON.parse(res.data.content)
      }else if(res.data.questionType === 3) {
        state.judgeQuestion = JSON.parse(res.data.content)
      }else {
        state.multiQuestion = JSON.parse(res.data.content)
        state.checkList = res.data.answer.split(',')
      }
    }else{
      ElMessage.warning(res.message)
    }
  }
  dialogVisible.value = true;
}

const handleScroll = () => {
  if(state.bankPageNum >= state.hasMoreItems) return
  state.bankPageNum++;
  loadMoreBankData()

}
const loadMoreBankData = async () => {
  const queryParams = {
    pageNum: state.bankPageNum,
    pageSize: state.bankPageSize,
  }
  const res = await getQuestionBank(queryParams)
  if (res.code == 200) {
    state.hasMoreItems = res.data.totalPage
    const data = res.data
    state.bankList = state.bankList.concat(data.list)
  }else{
    ElMessage.warning(res.message)
  }
}


const onSubmit = async () => {
  const valid = await busRef.value.validate();
  if(valid){
    if(title.value === '新增'){
      const {id,bankName, ...data} = JSON.parse(JSON.stringify(state.form))
      data.answer = data.questionType === 1 || data.questionType === 3 ? data.answer : state.checkList.join(',')
      data.content = data.questionType === 1 ? JSON.stringify(state.singleQuestion) : data.questionType === 2 ? JSON.stringify(state.multiQuestion) : JSON.stringify(state.judgeQuestion)
      console.log('state.form',data)
      const res = await addQuestion(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 {bankName,...data} = JSON.parse(JSON.stringify(state.form))
      data.answer = data.questionType === 1 || data.questionType === 3 ? data.answer : state.checkList.join(',')
      data.content = data.questionType === 1 ? JSON.stringify(state.singleQuestion) : data.questionType === 2 ? JSON.stringify(state.multiQuestion) : JSON.stringify(state.judgeQuestion)
      const res = await editQuestion(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: '',
    title: '',
    questionType: 1,
    bankName: '',
    bankId: null,
    answer: ''
  }
  state.bankPageNum = 1;
  state.bankPageSize = 10;
  state.bankList = []
  state.checkList = []
}
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/questionBankManagement/questionManage/index.vue

@@ -1,12 +1,227 @@
<template>
  <div>题目管理</div>
  <div class="app-container">
    <div style="margin-bottom: 10px">
      <el-form :model="data.queryParams" ref="queryRef" :inline="true" >
        <el-form-item label="题型：">
          <el-select v-model="data.queryParams.questionType" placeholder="请选择题型" clearable>
            <el-option
                v-for="item in data.questionTypeList"
                :key="item.id"
                :label="item.name"
                :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="题目内容：" >
          <el-input

              v-model="data.queryParams.title"
              placeholder="请输入题目内容"
              clearable
              style="width: 200px"
          />
        </el-form-item>
        <el-form-item label="题库：" >
          <el-select
              clearable
              v-model="data.queryParams.bankId"
              style="width: 200px"
              v-loadMoreNew:[reselect]="handleScroll"
              :popper-class="reselect.name"
              class="item-width"
              placeholder="请选择题库"
          >
            <el-option
                v-for="item in data.bankList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary"  @click="handleQuery">查询</el-button>
          <el-button  @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
      <el-button
          type="primary"
          plain
          icon="Plus"
          @click="openDialog('add',{})"
      >新增</el-button>
    </div>
    <!-- 表格数据 -->
    <el-table v-loading="loading" :data="data.dataList" :border="true">
      <el-table-column label="序号" type="index" align="center" width="80" />
      <el-table-column label="所属题库" prop="bankName" align="center"  />
      <el-table-column label="题目类型" prop="questionType" align="center"  >
        <template #default="scope">
          <span>{{scope.row.questionType === 1 ? '单选题' : scope.row.questionType === 2 ? '多选题' : '判断题'}}</span>
        </template>
      </el-table-column>
      <el-table-column label="题目内容" prop="title" align="center"  />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width"  width="180">
        <template #default="scope">
          <el-button link type="primary" @click="openDialog('edit',scope.row)">编辑</el-button>
          <el-button link type="danger" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
        v-show="data.total > 0"
        :total="data.total"
        v-model:page="data.queryParams.pageNum"
        v-model:limit="data.queryParams.pageSize"
        @pagination="getList"
    />

    <question-dialog ref="dialogRef" @getList=getList></question-dialog>
  </div>
</template>

<script setup>
import {getCurrentInstance, onMounted, onUnmounted, reactive, ref, toRefs} from "vue";
import {ElMessage, ElMessageBox} from "element-plus";
import questionDialog from './components/questionDialog.vue'
import Cookies from "js-cookie";
import {delQuestion, getQuestion} from "@/api/onlineEducation/question";
import {getQuestionBank} from "@/api/onlineEducation/questionBank";


const { proxy } = getCurrentInstance();
const loading = ref(false);
const dialogRef = ref();
const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    questionType: null,
    title: '',
    bankId: null
  },
  total: 0,
  dataList: [],
  isAdmin: false,
  questionTypeList: [
    {
      id: 1,
      name: '单选题'
    },
    {
      id: 2,
      name: '多选题'
    },
    {
      id: 3,
      name: '判断题'
    }
  ],
  bankList: [],
  bankPageNum: 1, // 当前页码
  bankPageSize: 10, // 每页显示的数量
  hasMoreItems: null, // 是否还有更多选项


})
const reselect = reactive({
  name: 'bank'
})

onMounted(async ()=>{
  const userInfo = JSON.parse(Cookies.get('userInfo'))
  console.log("userInfo",userInfo)
  if(userInfo.userType === 0){
    data.isAdmin = true;
  }else {
    data.isAdmin = false;
  }
  await getList()
  await loadMoreBankData()
})

onUnmounted(()=>{

})

const getList = async () => {
  console.log(' list');
  loading.value = true
  const res = await getQuestion(data.queryParams)
  if(res.code == 200){
    data.dataList = res.data.list
    data.total = res.data.total
  }else{
    ElMessage.warning(res.message)
  }
  loading.value = false
}

const handleScroll = () => {

  if(data.bankPageNum >= data.hasMoreItems) return
  data.bankPageNum++;
  loadMoreBankData()

}
const loadMoreBankData = async () => {
  console.log(' Bank');
  const queryParams = {
    pageNum: data.bankPageNum,
    pageSize: data.bankPageSize,
  }
  const res = await getQuestionBank(queryParams)
  if (res.code == 200) {
    data.hasMoreItems = res.data.totalPage
    const state = res.data
    data.bankList = data.bankList.concat(state.list)
  }else{
    ElMessage.warning(res.message)
  }
}

const handleQuery = () => {
  data.queryParams.pageNum = 1;
  getList();
}
const resetQuery = () => {
  data.queryParams =  {
    pageNum: 1,
    pageSize: 10,
    questionType: null,
    title: '',
    bankId: null
  }
  getList();
}

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

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

</script>



<style scoped lang="scss">

</style>