修改题库管理页面、创建测验页面，支持按更改日期排序、支持按知识点筛选题目

src/server/question.js

@@ -4,12 +4,8 @@ import generateSearchParams from '@/server/utils/generate-search-params'
 import kinds from '@/enums/question-kind'
 
 // 教师获取题目列表
-export function getQuestionList ({ key = '', page = 1, size = 10, sort = '' }) {
-  const params = new URLSearchParams()
-  params.append('stem', key)
-  params.append('page', page.toString())
-  params.append('size', size.toString())
-  params.append('sort', sort.toString())
+export function getQuestionList ({ key = '', page = 1, size = 10, sort = '', knowledgeId = '' }) {
+  const params = generateSearchParams({ key, page, sort, size, knowledgeId })
   return axios
     .get(useQuestionServer(), {
       params
@@ -71,8 +67,8 @@ export function deleteQuestion ({ questionId }) {
 }
 
 // 获取创建的题目
-export function getCreatedQuestions ({ key = '', page = 1, size = 10, sort = '' }) {
-  const params = generateSearchParams({ key, page, sort, size })
+export function getCreatedQuestions ({ key = '', page = 1, size = 10, sort = '', knowledgeId = '' }) {
+  const params = generateSearchParams({ key, page, sort, size, knowledgeId })
   return axios
     .get(useQuestionServer('/created'), { params })
     .then(res => res.data)

src/server/utils/generate-search-params.js

@@ -1,8 +1,9 @@
-export default function generateSearchParams ({ key = '', page = 1, size = 10, sort = '' }) {
+export default function generateSearchParams ({ key = '', page = 1, size = 10, sort = '', knowledgeId = '' }) {
   const params = new URLSearchParams()
-  params.append('key', key)
+  params.append('stem', key)
   params.append('page', page.toString())
   params.append('size', size.toString())
+  params.append('knowledgeId', knowledgeId.toString())
   if (typeof sort !== typeof '') {
     sort.forEach(_ => {
       params.append('sort', _)

src/views/quiz/Questions.vue

@@ -10,9 +10,12 @@
       <c-button text icon="filter_list" :theme="showOwn ? 'blue' : 'orange'" @click="showOwn = !showOwn">
         {{ showOwn ? '显示全部' : '只显示我创建的' }}
       </c-button>
+      <c-button text icon="filter_list" :theme="showOld ? 'blue' : 'normal'" @click="showOld = !showOld">
+        {{ showOld ? '按修改日期降序排列' : '按修改日期升序排列' }}
+      </c-button>
     </back-title>
     <div>
-      <question-table :show-own="showOwn"/>
+      <question-table :show-own="showOwn" :show-old="showOld"/>
     </div>
   </div>
 </template>
@@ -26,7 +29,8 @@ export default {
   components: { CButton, QuestionTable, BackTitle },
   data () {
     return {
-      showOwn: false
+      showOwn: false,
+      showOld: false
     }
   }
 }

src/views/quiz/components/QuestionTable.vue

@@ -1,9 +1,18 @@
 <template>
   <div class="question-table">
+    <div class="vertical-center mb-16" v-if="knowledgeTree">
+      <treeselect
+        v-model="selectedKnowledgeIdList"
+        :multiple="true"
+        :options="knowledgeTree ? knowledgeTree : null"
+        placeholder="选择相关知识点"
+      />
+    </div>
+    <div v-else class="mt-24">知识点加载中...</div>
     <search-bar class="mb-16" v-model="inputStem" placeholder="题干搜索" @input="debounceFetchQuestions"/>
     <pagination class="mt-16 mb-32" :page="page.number" :size="page.size" :total-elements="page.totalElements"
                 v-show="questionList && questionList.length > 0" @change="fetchQuestionList"></pagination>
-    <div class="no-content-warning" v-if="questionList === null || questionList.length === 0">请输入关键字搜索</div>
+    <div class="no-content-warning" v-if="questionList === null || questionList.length === 0">请输`入关键字搜索</div>
     <div class="question-card-container" v-else>
       <template v-for="item in questionList">
         <question-card
@@ -23,16 +32,20 @@
 </template>
 
 <script>
+import Treeselect from '@riophae/vue-treeselect'
+import '@riophae/vue-treeselect/dist/vue-treeselect.css'
 import debounce from '@/utils/debounce'
 import { getCreatedQuestionIds, getCreatedQuestions, getQuestionList } from '@/server/question'
 import Pagination from '@/components/Pagination'
 import { markdownToHTML } from '@/utils/markdown'
 import QuestionCard from '@/views/quiz/components/QuestionCard'
 import SearchBar from '@/components/Basic/SearchBar'
+import { getKnowledgeNodes } from '@/server/knowledge'
+import { constructTree } from '@/utils/construct-tree'
 
 export default {
   name: 'QuestionTable',
-  components: { SearchBar, QuestionCard, Pagination },
+  components: { Treeselect, SearchBar, QuestionCard, Pagination },
   props: {
     selectable: {
       type: Boolean,
@@ -45,6 +58,10 @@ export default {
     showOwn: {
       type: Boolean,
       default: false
+    },
+    showOld: {
+      type: Boolean,
+      default: false
     }
   },
   model: {
@@ -57,10 +74,18 @@ export default {
   watch: {
     showOwn () {
       this.fetchQuestionList()
+    },
+    showOld () {
+      this.fetchQuestionList()
+    },
+    selectedKnowledgeIdList () {
+      this.fetchQuestionList()
     }
   },
   data () {
     return {
+      knowledgeTree: null,
+      selectedKnowledgeIdList: [],
       inputStem: '',
       questionList: [],
       ownQuestionList: [],
@@ -73,6 +98,13 @@ export default {
       debounceFetchQuestions: debounce(() => this.fetchQuestionList())
     }
   },
+  created () {
+    getKnowledgeNodes()
+      .then(res => {
+        this.knowledgeTree = constructTree(res)
+      })
+      .catch(err => this.$setErrorMessage(err.response.data.msg))
+  },
   mounted () {
     this.fetchQuestionList()
     this.fetchOwnQuestionIds()
@@ -81,15 +113,18 @@ export default {
     fetchQuestionList ({
       stem = this.inputStem,
       page = 1,
-      size = 10
+      size = 10,
+      sortCondition1 = this.showOld ? 'id,asc' : 'id,desc',
+      sortCondition2 = this.showOld ? 'lastModifiedTime,asc' : 'lastModifiedTime,desc',
+      knowledgeId = this.selectedKnowledgeIdList
     } = {}) {
       this.showOwn
-        ? getCreatedQuestions({ key: stem, size, page })
+        ? getCreatedQuestions({ key: stem, size, page, sort: sortCondition1, knowledgeId })
           .then(({ data: questions, page }) => {
             this.questionList = questions
             this.page = page
           })
-        : getQuestionList({ key: stem, size, page })
+        : getQuestionList({ key: stem, size, page, sort: sortCondition2, knowledgeId })
           .then(({ data: questions, page }) => {
             this.questionList = questions
             this.page = page

src/views/quiz/components/QuizEditor.vue

@@ -59,8 +59,11 @@
           <c-button text icon="filter_list" :theme="showOwn ? 'blue' : 'orange'" @click="showOwn = !showOwn">
             {{ showOwn ? '显示全部' : '只显示我创建的' }}
           </c-button>
+          <c-button text icon="filter_list" :theme="showOld ? 'blue' : 'normal'" @click="showOld = !showOld">
+            {{ showOld ? '按修改日期降序排列' : '按修改日期升序排列' }}
+          </c-button>
         </div>
-        <question-table v-model="selectedQuestions" selectable :show-own="showOwn"/>
+        <question-table v-model="selectedQuestions" selectable :show-own="showOwn" :show-old="showOld"/>
       </div>
     </div>
   </keep-alive>
@@ -97,7 +100,10 @@ export default {
       selectedQuestions: [],
       // 默认折叠题目，只显示题干
       isFold: true,
+      // 默认展示所有用户创建的题目
       showOwn: false,
+      // 默认展示最新修改的题目
+      showOld: false,
 
       QuestionKindNaming,
       QuizStateNaming,