课程管理-课程题库 课程类别调整

src/views/course/courseQuestionBank/index.vue

@@ -30,15 +30,25 @@
         </el-select>
       </el-form-item>
 	  <el-form-item label="题目类别" prop="questionType">
-	    <el-select v-model="queryParams.questionType" ref="typeSelect" placeholder="请选择类别" clearable size="small">
+	    <el-select v-model="queryParams.questionType" ref="typeSelect" placeholder="请选择类别" @change="changeCateType" clearable size="small">
 	      <el-option
-          v-for="item in questionTypeOptions"
-          :key="item.cateId"
-          :label="item.cateName"
-          :value="item.cateId"
+          v-for="item in questionRootTypeOptions"
+          :key="item.dictValue"
+          :label="item.dictLabel"
+          :value="item.dictValue"
           />
 	    </el-select>
 	  </el-form-item>
+    <el-form-item label="题目子类别" prop="questionSubType" label-width="100px">
+      <el-select v-model="queryParams.questionSubType" ref="typeSelect" placeholder="请选择子类别" clearable size="small">
+        <el-option
+          v-for="item in questionSubTypeOptions"
+          :key="item.dictValue"
+          :label="item.dictLabel"
+          :value="item.dictValue"
+        />
+      </el-select>
+    </el-form-item>
 
 
 <!--      <el-form-item label="状态" prop="status">-->
@@ -124,9 +134,14 @@
       </el-table-column>
 	  <el-table-column label="题目类别" align="center" prop="questionType">
 	    <template slot-scope="scope">
-        <el-tag>{{ getCategoryName(scope.row.questionType) }}</el-tag>
+        <el-tag v-if="scope.row.questionType">{{ getCategoryName(scope.row.questionType) }}</el-tag>
 	    </template>
 	  </el-table-column>
+    <el-table-column label="题目子类别" align="center" prop="questionType">
+      <template slot-scope="scope">
+        <el-tag v-if="scope.row.questionSubType">{{ getCategoryName(scope.row.questionSubType) }}</el-tag>
+      </template>
+    </el-table-column>
       <el-table-column label="状态" align="center" prop="status">
         <template slot-scope="scope">
           <dict-tag :options="statusOptions" :value="scope.row.status"/>
@@ -182,14 +197,22 @@
           </el-select>
         </el-form-item>
 		<el-form-item label="题目类别 " prop="questionType">
-		  <el-select v-model="form.questionType" placeholder="请选择题目类别" >
+		  <el-select v-model="form.questionType" clearable placeholder="请选择题目类别" @change="changeCateType">
         <el-option
-          v-for="item in questionTypeOptions"
-          :key="item.cateId"
-          :label="item.cateName"
-          :value="item.cateId"
+          v-for="item in questionRootTypeOptions"
+          :key="item.dictValue"
+          :label="item.dictLabel"
+          :value="item.dictValue"
         />
 		  </el-select>
+      <el-select v-model="form.questionSubType" clearable placeholder="请选择题目子类别" >
+        <el-option
+          v-for="item in questionSubTypeOptions"
+          :key="item.dictValue"
+          :label="item.dictLabel"
+          :value="item.dictValue"
+        />
+      </el-select>
 		</el-form-item>
         <el-form-item label="状态">
           <el-radio-group v-model="form.status">
@@ -292,7 +315,11 @@
 <script>
 import { listCourseQuestionBank, getCourseQuestionBank, delCourseQuestionBank, addCourseQuestionBank, updateCourseQuestionBank, exportCourseQuestionBank, importTemplate } from "@/api/course/courseQuestionBank";
 import { getToken } from "@/utils/auth";
-import { listUserCourseCategory } from '@/api/course/userCourseCategory'
+import {
+  listUserCourseCategory,
+  getCatePidList,
+  getCateListByPid
+} from '@/api/course/userCourseCategory'
 
 export default {
   name: "CourseQuestionBank",
@@ -335,6 +362,8 @@ export default {
       // 题库表格数据
       courseQuestionBankList: [],
 	  questionTypeOptions: [],
+      questionRootTypeOptions: [],
+	    questionSubTypeOptions: [],
       // 弹出层标题
       title: "",
       // 是否显示弹出层
@@ -349,6 +378,7 @@ export default {
         status: null,
         question: null,
 		    questionType:null,
+        questionSubType: null,
         answer: null,
       },
       // 表单参数
@@ -399,6 +429,17 @@ export default {
       listUserCourseCategory().then(response => {
         this.questionTypeOptions = response.data
       });
+      getCatePidList().then(response => {
+        this.questionRootTypeOptions = response.data
+      });
+    },
+    changeCateType(val) {
+      if (!val) {
+        return
+      }
+      getCateListByPid(val).then(response => {
+        this.questionSubTypeOptions = response.data
+      })
     },
     getCategoryName(id) {
       return this.questionTypeOptions.find(item => item.cateId === id)?.cateName || '';
@@ -466,6 +507,7 @@ export default {
     cancel() {
       this.open = false;
       this.reset();
+      this.changeCateType(this.queryParams.questionType)
     },
     // 表单重置
     reset() {
@@ -501,6 +543,7 @@ export default {
     /** 新增按钮操作 */
     handleAdd() {
       this.reset();
+      this.questionSubTypeOptions = []
       this.open = true;
       this.title = "添加题库";
     },
@@ -510,7 +553,7 @@ export default {
       const id = row.id || this.ids
       getCourseQuestionBank(id).then(response => {
         this.form = response.data;
-
+        this.changeCateType(this.form.questionType)
 
         //初始化多选的选择结果，单选的选择的时候，就取消其他的了 selectedAnswers
         if (this.form.type===2) {