QuestionList.vue 6.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222
  1. <style src="@/components/doTest/doTest.scss" lang="scss" scoped></style>
  2. <style lang="scss" scoped>
  3. .index-area,.change-area{
  4. display: inline-block;
  5. vertical-align: top;
  6. height: 100%;
  7. }
  8. .index-area{
  9. width: 60px;
  10. border-right: solid 1px #e6e6e6;
  11. overflow: auto;
  12. /deep/.el-collapse-item__header{
  13. padding-left: 5px;
  14. }
  15. /deep/.el-collapse-item__content{
  16. padding-bottom: 0;
  17. }
  18. ul{
  19. margin-bottom: 0;
  20. cursor: pointer;
  21. li{
  22. text-align: center;
  23. padding: 5px 0;
  24. &:hover,&.choose{
  25. background: #e6e6e6;
  26. }
  27. }
  28. }
  29. }
  30. .change-area{
  31. width: calc(100% - 60px);
  32. &>div{
  33. display: inline-block;
  34. vertical-align: top;
  35. padding: 15px;
  36. textarea{
  37. width: 100%;
  38. min-height: 50px;
  39. margin: 10px;
  40. font-size: 16px;
  41. &:first-child{
  42. min-height: 200px;
  43. }
  44. }
  45. }
  46. .material-part{
  47. width: 400px;
  48. }
  49. .question-part{
  50. width: 100%;
  51. &.halfScreen{
  52. width: calc(100% - 400px);
  53. }
  54. }
  55. }
  56. /deep/.el-drawer__header{
  57. background: #fafafa;
  58. padding: 30px;
  59. margin-bottom: 0;
  60. }
  61. /deep/.el-drawer__body{
  62. height: calc(100% - 60px);
  63. }
  64. .dialog-style{
  65. div{
  66. text-align: center;
  67. margin: 5px;
  68. /deep/ .el-input{
  69. display: inline-block;
  70. width: 200px;
  71. }
  72. }
  73. }
  74. </style>
  75. <template>
  76. <div>
  77. <div class="index-area">
  78. <el-collapse v-model="currentSection" accordion>
  79. <el-collapse-item v-for="(item,index) in paper.sections" :key="index" :title="'M' + String(index + 1)" :name="index + 1">
  80. <ul>
  81. <li v-for="(ques,i) in paper.questions" :key="i" v-show="currentSection == ques.section || currentSection == ques.section * -1"
  82. :class="{'choose':currentQuestion == i}" @click="changePage(i)">{{i+1}}</li>
  83. </ul>
  84. </el-collapse-item>
  85. </el-collapse>
  86. </div>
  87. <div class="change-area">
  88. <div class="material-part" v-if="paper.sections[currentSection - 1].hasMaterial">
  89. </div>
  90. <div class="question-part" :class="{'halfScreen':paper.sections[currentSection - 1].hasMaterial}">
  91. <textarea v-model="paper.questions[currentQuestion].content"></textarea>
  92. <textarea v-for="answer in paper.questions[currentQuestion].options" :key="answer.id" v-model="answer.content"></textarea>
  93. <el-button @click="drawer = true" type="primary">查看</el-button>
  94. <el-button @click="updateQuestion" type="warning">保存</el-button>
  95. </div>
  96. </div>
  97. <el-drawer
  98. :visible.sync="drawer"
  99. :size="'900px'"
  100. :show-close="false"
  101. v-if="currentSection != ''">
  102. <div class="exam">
  103. <div class="material-part" v-if="paper.sections[currentSection - 1].hasMaterial">
  104. <div class="triangle-top"><span>材</span><span>料</span></div>
  105. <div>
  106. <div v-html="paper.sections[currentSection - 1].material" class="material-html"></div>
  107. </div>
  108. </div>
  109. <div class="scroll-part" :class="{'halfScreen':paper.sections[currentSection - 1].hasMaterial}">
  110. <div class="content-part">
  111. <div class="question-area">
  112. <div class="triangle-top"><span>#{{currentQuestion - indexRange[currentSection - 1].min + 1}}</span></div>
  113. <div class="question-html">
  114. <div v-html="paper.questions[currentQuestion].content" class="content-html"></div>
  115. </div>
  116. </div>
  117. <div>
  118. <div class="answer-area2" v-for="answer in paper.questions[currentQuestion].options" :key="answer.id">
  119. <div :class="{'correct':answer.choose}">
  120. <i :class="{'multiChooseType':paper.questions[currentQuestion].correctNum > 1}">
  121. <img src="@/images/doTest/tick-up.png" v-if="answer.choose">
  122. </i>
  123. <label>{{allOptionList[answer.oindex]}}</label>
  124. </div>
  125. <div v-html="answer.content" class="answer-html" ref="htmlContent">
  126. </div>
  127. </div>
  128. </div>
  129. </div>
  130. </div>
  131. <div class="page-part">
  132. <button @click="changePage(currentQuestion - 1)">
  133. <span id="preLeft"><img src="@/images/doTest/pre.png"></span>
  134. <label>上一题</label>
  135. </button>
  136. <button @click="changePage(currentQuestion + 1)">
  137. <label>下一题</label>
  138. <span id="nextRight"><img src="@/images/doTest/next.png"></span>
  139. </button>
  140. </div>
  141. </div>
  142. </el-drawer>
  143. <el-dialog
  144. title="提示"
  145. :visible.sync="visibleDelete"
  146. width="200px">
  147. <p class="center-text">确认删除?</p>
  148. <span slot="footer" class="dialog-footer">
  149. <el-button @click="visibleDelete = false">取 消</el-button>
  150. <el-button type="primary" >确 定</el-button>
  151. </span>
  152. </el-dialog>
  153. </div>
  154. </template>
  155. <script>
  156. import { getPaperById , updateQuestion } from "@/api/exam";
  157. import { OPTION_LIST } from '@/services/constant';
  158. export default {
  159. name: 'QuestionList',
  160. components: {
  161. },
  162. data () {
  163. return {
  164. paper: { //整张试卷数据
  165. questions: [{}],
  166. sections: [{}],
  167. },
  168. currentQuestion: 0,
  169. currentSection: 1,
  170. indexRange:[{min: 0,max: 1}],
  171. allOptionList: OPTION_LIST,
  172. drawer:false,
  173. visibleDelete:false,
  174. }
  175. },
  176. created() {
  177. const oScript = document.createElement('script');
  178. oScript.type = 'text/javascript';
  179. oScript.src = 'mathjax/MathJax.js?config=TeX-AMS-MML_HTMLorMML';
  180. document.body.appendChild(oScript);
  181. this.getQuestion(this.$route.params.pid);
  182. },
  183. methods: {
  184. getQuestion(pid){
  185. getPaperById(pid).then((result) => {
  186. Object.assign(this.paper,result);
  187. this.setIndexRange();
  188. this.changePage(0);
  189. })
  190. },
  191. setIndexRange() {
  192. this.indexRange = [];
  193. let list = this.paper.sectionNums.split(',').map(Number);
  194. list.forEach((item,index) => {
  195. if(index != 0) {list[index] = item + list[index - 1];}
  196. this.indexRange.push({
  197. min: index == 0?0:list[index - 1],
  198. max: list[index] - 1
  199. })
  200. })
  201. },
  202. changePage(page) {
  203. if(page >= 0 && page < this.paper.questions.length){
  204. this.currentQuestion = page;
  205. setTimeout(() => {
  206. MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
  207. },100);
  208. }
  209. },
  210. updateQuestion(){
  211. updateQuestion(this.paper.questions[this.currentQuestion]).then((result) => {
  212. alert(result.message);
  213. this.getQuestion(this.$route.params.pid);
  214. this.changePage(this.currentQuestion);
  215. })
  216. },
  217. },
  218. }
  219. </script>