pc-admin/src/components/Question/index.vue

<template>
  <div class="body">
    <el-card class="box-card" shadow="never" body-style="padding:0">
      <div slot="header" class="clearfix">
        <h3 style="float:left">题库列表</h3>
        <el-button
          type="primary"
          style="float: right"
          icon="el-icon-plus"
          @click="handleAdd"
        >添加题目</el-button>
      </div>
      <ul style="list-style-type: none;margin:24px 0 0 -40px">
        <li v-for="item,index in tableData" :key="index" class="questionli" @click="handleEdit(item)">
          <span style="width:45px">第{{ index+1 }}题</span>
          <span style="width:45px">{{ item.optType === '1'?'单选题':item.optType==='2'?'多选题':'判断题' }}</span>
          <span style="flex:1">{{ item.title }}</span>
          <el-popconfirm
            style="width:30px"
            icon="el-icon-info"
            icon-color="red"
            title="确定删除这个问题吗？"
            @onConfirm="handleDelete(item)"
          >
            <el-button slot="reference" type="text" style="color:red">删除</el-button>
          </el-popconfirm>
        </li>
      </ul>
      <el-pagination
        v-show="questionTotal!==0"
        style="float:right; margin:24px 0"
        :total="questionTotal"
        :current-page="currentPage"
        :page-size="pageSize"
        layout="total, prev, pager, next, sizes"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>
  </div>
</template>
<script>
import { getQuestionList, deleteQuestion } from '@/api/question'

export default {
  props: {
    gameId: String
  },
  data() {
    return {
      tableData: [],
      pageSize: 20,
      currentPage: 1,
      questionTotal: 0// 条目总数
    }
  },
  watch: {
    gameId: {
      handler(val) {
        if (this.gameId) {
          this.onSearch()
        }
      },
      immediate: true // 页面加载时就启动
    }
  },
  methods: {
    handleSizeChange(val) {
      this.pageSize = val
      this.changePagination()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.changePagination()
    },
    changePagination() {
      getQuestionList({ gameId: this.gameId, pageSize: this.pageSize, pageNum: this.currentPage }).then(
        (res) => {
          this.tableData = res.data.records
        }
      )
    },
    // 添加问题
    handleAdd() {
      this.$emit('handleAddQuestion', true)
    },
    handleEdit(row) {
      // 向外传送数据row.questionId
      this.$emit('handleEditQuestion', row.questionId)
    },
    handleDelete(row) {
      deleteQuestion(row.questionId).then(() => {
        this.$message('删除问题成功')
        this.onSearch()
        // 关闭编辑问题页面防止编辑页面还没关闭就删除当前问题了
        this.$emit('handleCloseQuestion', true)
      })
    },
    onSearch() {
      getQuestionList({ gameId: this.gameId, endDate: this.endDate, pageSize: this.pageSize }).then(
        (res) => {
          this.tableData = res.data.records
          this.questionTotal = res.data.total
          this.pageSize = res.data.size
        }
      )
    }
  }
}
</script>
<style scoped lang="scss">
.questionli {
  width: 100%;
  overflow: hidden;
  display: flex;
  line-height:40px;
  background-color: white;
  padding:0 8px;
  border: 1px solid #f0f2f5;
}
.questionli:nth-of-type(even) {
  background: #f0f2f5;
}
.questionli:hover {
  background-color: rgb(230, 247, 255);
}
</style>