activity-question.vue 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104
  1. <template>
  2. <!-- 活动题 -->
  3. <view class="activity-area" v-model="questionData">
  4. <view class="question_title">
  5. <text class="question_number">
  6. {{ questionNumberEndIsBracket(questionData.property.question_number) }}
  7. </text>
  8. <text class="question_stem" v-html="sanitizeHTML(questionData.stem)"
  9. :ref="'richText-1-1'+questionData.question_id"
  10. @longpress="previewByRichTextImg(-1,-1,questionData.question_id)"></text>
  11. </view>
  12. <view class="description" v-html="sanitizeHTML(questionData.description)"
  13. v-if="isEnable(questionData.property.is_enable_description)&&questionData.description.length > 0"
  14. :ref="'richText-2-2'+questionData.question_id" @longpress="previewByRichTextImg(-2,-2,questionData.question_id)">
  15. </view>
  16. <!-- 上传文件 -->
  17. <UploadFiles upload-title="" :disabled="answer_control[questionData.question_id].isReadOnly"
  18. :fileIdList="uploadedIdList" @upload="handleUpload" @deleteFile="handleDelete">
  19. </UploadFiles>
  20. </view>
  21. </template>
  22. <script>
  23. import {
  24. questionData,
  25. sanitizeHTML,
  26. isEnable,
  27. answer_control,
  28. } from '@/pages/answer_question/common/data/common.js';
  29. import UploadFiles from '@/components/upload-files/upload-files.vue';
  30. import AnswerControlMixin from '@/pages/answer_question/common/data/AnswerControlMixin.js';
  31. export default {
  32. name: "activity-question",
  33. mixins: [AnswerControlMixin],
  34. components: {
  35. UploadFiles
  36. },
  37. props: {
  38. questionData: questionData
  39. },
  40. data() {
  41. return {
  42. sanitizeHTML,
  43. isEnable,
  44. answer_control,
  45. uploadedIdList: [],
  46. question_id: '',
  47. };
  48. },
  49. watch: {
  50. 'questionData.question_id': {
  51. handler(val) {
  52. this.questionData.user_answer[val].answer_list = [{
  53. accessory_file_id_list: [], // 上传文件列表
  54. }]
  55. this.question_id = this.questionData.question_id;
  56. this.setUserAnswer();
  57. this.commonComputedAnswerControl(val);
  58. },
  59. immediate: true,
  60. deep: true
  61. }
  62. },
  63. methods: {
  64. // 文件上传成功
  65. handleUpload(fileId) {
  66. this.questionData.user_answer[this.question_id].answer_list[0].accessory_file_id_list.push(fileId);
  67. this.setQuestionEdit();
  68. },
  69. // 删除文件
  70. handleDelete(fileId) {
  71. if (this.answer_control[this.questionData.question_id].isReadOnly) return;
  72. var i = this.questionData.user_answer[this.question_id].answer_list[0].accessory_file_id_list
  73. .indexOf(fileId);
  74. if (i > -1)
  75. this.questionData.user_answer[this.question_id].answer_list[0].accessory_file_id_list.splice(i,
  76. 1);
  77. this.setQuestionEdit();
  78. },
  79. setQuestionEdit() {
  80. this.questionData.user_answer[this.question_id].isEdit = true;
  81. this.$forceUpdate();
  82. },
  83. //获取用户答案
  84. setUserAnswer: function() {
  85. var that = this;
  86. var callback = function() {
  87. that.questionData.user_answer[that.question_id].answer_list[0].accessory_file_id_list.forEach(
  88. p => {
  89. that.uploadedIdList.push(p);
  90. })
  91. that.$forceUpdate();
  92. }
  93. this.$emit("getUserAnswer", this.question_id, callback);
  94. },
  95. }
  96. }
  97. </script>
  98. <style lang="scss" scoped>
  99. .activity-area {}
  100. </style>