frontend/src/views/quiz/components/QuestionTable.vue

<template>
  <div class="question-table">
    <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="question-card-container" v-else>
      <template v-for="item in questionList">
        <question-card
          v-if="item !== null"
          :key="item.id"
          :editable="ownQuestionIds.indexOf(item.id) !== -1"
          :type="item.type"
          :stem="item.stem"
          :question-id="item.id"
          :selectable="selectable"
          :selected="judgeIsSelected(item)"
          @toggle-select="handleToggleSelectQuestion(item)"
        />
      </template>
    </div>
  </div>
</template>

<script>
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'

export default {
  name: 'QuestionTable',
  components: { SearchBar, QuestionCard, Pagination },
  props: {
    selectable: {
      type: Boolean,
      default: false
    },
    selectedQuestions: {
      type: Array,
      default: () => []
    },
    showOwn: {
      type: Boolean,
      default: false
    }
  },
  model: {
    prop: 'selectedQuestions',
    event: 'select'
  },
  filters: {
    markdownToHTML: markdownToHTML
  },
  watch: {
    showOwn () {
      this.fetchQuestionList()
    }
  },
  data () {
    return {
      inputStem: '',
      questionList: [],
      ownQuestionList: [],
      // 该属性与上面属性不同之处在于所有id是一次全拿的
      // List为分页获取，因此不能用于判断这个问题是否能够编辑
      ownQuestionIds: [],
      page: {},

      // 模糊搜索时使用
      debounceFetchQuestions: debounce(() => this.fetchQuestionList())
    }
  },
  mounted () {
    this.fetchQuestionList()
    this.fetchOwnQuestionIds()
  },
  methods: {
    fetchQuestionList ({
      stem = this.inputStem,
      page = 1,
      size = 10
    } = {}) {
      this.showOwn
        ? getCreatedQuestions({ key: stem, size, page })
          .then(({ data: questions, page }) => {
            this.questionList = questions
            this.page = page
          })
        : getQuestionList({ key: stem, size, page })
          .then(({ data: questions, page }) => {
            this.questionList = questions
            this.page = page
          })
    },
    fetchOwnQuestionIds () {
      getCreatedQuestionIds()
        .then(res => (this.ownQuestionIds = res))
        .catch(err => this.$setErrorMessage(err.response.data.msg))
    },
    judgeIsSelected (question) {
      return Boolean(this.selectedQuestions
        .find(item => item.id === question.id))
    },
    handleToggleSelectQuestion (question) {
      if (this.judgeIsSelected(question)) {
        this.$emit('select', this.selectedQuestions.filter(item => item.id !== question.id))
      } else {
        this.$emit('select', [...this.selectedQuestions, question])
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.question-card-container {
  column-width: 300px;
  column-gap: 24px;
}

.question-card {
  margin-bottom: 24px;
  break-inside: avoid;
  border-radius: 6px;
  border: 1px solid #cadaea;
  /*box-shadow: 0 2px 6px rgba(0, 0, 0, .1);*/
}
</style>