welfare-admin/src/views/course/question/QuestionList.vue

<template>
  <page-header-wrapper>
    <a-card :bordered="false">
      <div class="questionLeft">
        <div class="div-button">
          <a-button type="primary" class="close-button" style="font-size: 15px" @click="questionColse"> 关闭 </a-button>
          <a-button type="primary" class="create-button" style="font-size: 15px" @click="questionSave"> 新增 </a-button>
        </div>
        <h1 class="questionNumber">题序</h1>
        <!--  题目序号 -->
        <div v-for="(item, index) in quesitonList" :key="item" class="questionLeftItem" @click="quesionId(item)">{{ index+1 }}</div>
      </div>

      <div class="questionDetail">
        <br />
        <b><h1 class="questionContent">课程题目库预览</h1></b>
        <a-divider :style="{ backgroundColor: '#000' }" />
        <div class="question">
          <h1 class="questionName">
            （{{ questionDetail.questionType }}）{{questionDetail.questionName}}
            <span class="edit" @click="edit(i)">编辑</span>
          </h1>
          <div class="answer">A. {{ questionDetail.answerA }}</div>
          <div class="answer">B. {{ questionDetail.answerB }}</div>
          <div class="answer">C. {{ questionDetail.answerC }}</div>
          <div class="answer">D. {{ questionDetail.answerD }}</div>
          <div class="info_parent">
            <div class="info">解析</div>
            <div class="info_main">
              {{questionDetail.asnwerParse}}
            </div>
          </div>
          <a-divider :style="{ backgroundColor: '#000' }" />
        </div>
      </div>
    </a-card>
  </page-header-wrapper>
</template>

<script>
import { getQuestionListByCourseId } from '@/api/course/course'
import { getQuestionDeatil } from '@/api/course/question/question'
import get from 'lodash.get'

export default {
  data() {
    return {
      queryParam: { id: this.$route.query.id },
      quesitonList: [],
      questionDetail: {},
    }
  },

  created: function () {
    let parameter = {}
    // 查询所有题目id列表
    getQuestionListByCourseId(Object.assign(parameter, this.queryParam)).then((res) => {
      this.quesitonList = res.data

      if (!res.data.length) return
      this.quesionId(this.quesitonList[0])
    })

  },

  methods: {
    //题目ID
    quesionId: function (i) {
      getQuestionDeatil({ id: i }).then((res) => {
        this.questionDetail = res.data
      })
    },

    //关闭按钮
    questionColse() {
      this.$router.push({
        path: '/course/CourseList',
        query: {
          // courseName: this.$$router.query.courseName,
          // PageNum: this.$$router.query.PageNum,
          // courseUserOrgId : this.$$router.query.courseUserOrgId,
        },
      })
    },
    questionSave() {
      alert('還在對接中~~~')
    },
    edit: function (i) {
      alert('题目ID:' + i)
    },
  },
}
</script>

<style scoped>
.questionLeft {
  width: 300px;
  height: auto;
  float: left;
  background-color: #f0f2f5;
}
.questionLeftItem {
  width: 50px;
  height: 50px;
  line-height: 50px;
  float: left;
  text-align: center;
  border: 1px solid #000;
  margin: 5px 5px;
  cursor: pointer;
  background-color: wheat;
}
.questionDetail {
  width: calc(100% - 300px - 20px);
  height: auto;
  float: left;
  margin-left: 20px;
  background-color: #f0f2f5;
}
.div-button {
  margin-bottom: 10px;
  font-size: 16px;
}
.create-button {
  float: right;
  width: 135px;
  height: 35px;
}
.close-button {
  width: 135px;
  height: 35px;
  float: left;
}
.questionNumber {
  width: 300px;
  height: 40px;
  text-align: center;
  font-size: 23px;
  font: bold;
  background-color: gainsboro;
  margin-top: 45px;
}
.questionContent {
  margin-left: 10px;
  font-size: 16px;
  font-weight: bold;
}
.question {
  margin-left: 10px;
}
.questionName {
  font-weight: bold;
}
.edit {
  float: right;
  margin-right: 30px;
  color: #1890ff;
  cursor: pointer;
}
.answer {
  padding-top: 5px;
  padding-bottom: 5px;
  font-size: 13px;
}
.info_parent {
  margin-top: 10px;
  height: auto;
}
.info {
  width: 50px;
  height: 20px;
  line-height: 15px;
  text-align: center;
  font-size: 13px;
  border: 1px solid #000;
  background-color: white;
}
.info_main {
  width: calc(100% - 50px - 20px);
  margin-left: 20px;
  font-size: 13px;
  margin-left: 70px;
  margin-top: -20px;
}
</style>