Link_Homework_Vue/work/src/views/DoHomeworkView.vue

<template>
  <div class="container">
    <div class="main">
      <div class="content">
        <div class="title">
          {{ questionList[0].name }}
        </div>
        <template v-for="(question, questionIndex) in questionList" :key="questionIndex">
          <!-- 单选 -->
          <template v-if="question.type == 1">
            <div class="question">
              {{ questionIndex + 1 }}. {{ question.description }}（单选）
            </div>
            <div v-for="(answer, index) in question.content" :key="index" class="answer">
              <div class="selected">
                <input :id="`select-${questionIndex}-${index}`" :name="`radio-group-${questionIndex}`" type="radio"
                       v-model="selectedAnswers[questionIndex]"
                       :value="answer.text"
                >
                <label :for="`select-${questionIndex}-${index}`">{{ answer.text }}</label>
              </div>
            </div>
          </template>

          <!-- 多选 -->
          <template v-if="question.type == 2">
            <div class="question">
              {{ questionIndex + 1 }}. {{ question.description }}（多选）
            </div>
            <div v-for="(answer, index) in question.content" :key="index" class="answer">
              <div class="selected">
                <input :id="`checkbox-${questionIndex}-${index}`" name="checkbox" type="checkbox"
                       v-model="selectedAnswers[questionIndex]"
                       :value="answer.text"
                >
                <label :for="`checkbox-${questionIndex}-${index}`">{{ answer.text }}</label>
              </div>
            </div>
          </template>

          <!-- 简答题 -->
          <template v-if="question.type == 3">
            <div class="Short-answers">
              <div class="question">
                {{ questionIndex + 1 }}. {{ question.description }}
              </div>
              <el-input
                  v-model="editorTitles[questionIndex]"
                  style="width: 100%; padding: 3.5%"
                  size="large"
                  placeholder="请输入标题(5-100字符)"
                  maxlength="100"
                  minlength="5"
                  show-word-limit
              />
              <div class="editor">
                <div style="border: 1px solid #ccc">
                  <Toolbar
                      style="border-bottom: 1px solid #ccc"
                      :editor="editorRefs[questionIndex]"
                      :defaultConfig="toolbarConfig"
                      :mode="mode"
                  />
                  <Editor
                      style="height: 500px; overflow-y: hidden;"
                      v-model="editorContents[questionIndex]"
                      :defaultConfig="editorConfig"
                      :mode="mode"
                      @onCreated="editor => handleCreated(editor, questionIndex)"

                  />
                </div>
              </div>
            </div>
          </template>
        </template>

        <!-- 提交按钮 -->
        <div class="submit">
          <img src="https://d31zlh4on95l9h.cloudfront.net/images/5iujb101000d2foxm6thylaa50qz6lgl.png" @click="submit">
        </div>
        <!-- 提交次数 -->
        <div class="submit-times">
          <span>您已提交{{sub}}次，每个作业可以提交3次</span>
        </div>
      </div>
    </div>
  </div>


</template>

<script setup>
import { onMounted, ref, shallowRef } from 'vue';
import homeworkApi from "@/api/HomeworkApi.js";
import { ElMessage } from "element-plus";
import '@wangeditor/editor/dist/css/style.css' // 引入 css
import { onBeforeUnmount } from 'vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import {useRoute, useRouter} from "vue-router";

const router = useRouter();
const route = useRoute();
let groupId = route.params.id;
let sub = route.params.sub;
// 编辑器实例，必须用 shallowRef
const editorRefs = ref([]);

// 内容 HTML
const editorContents = ref([]);
const editorTitles = ref([]);

// 模拟 ajax 异步获取内容
onMounted(() => {
  setTimeout(() => {
    editorContents.value = editorContents.value.map(() => '');
  }, 1500)
})

const toolbarConfig = {
  excludeKeys: [
    'justify',
    'table',
    'codeBlock',
    'divider',
    'undo',
    'redo',
    'insertImage',  // 去掉插入图片
    'insertLink',   // 去掉插入链接
    'insertTable',  // 去掉插入表格
    'video',
    'group-more-style',
    'group-image',
    'group-video',
    'fullScreen',
    'todo'
  ],
  insertKeys: {
    index: 0,
    keys: ['bold', 'italic']
  }
}


const editorConfig = {
  placeholder: '请输入内容...',
  toolbarKeys: toolbarConfig.toolbarKeys
  }

// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
  editorRefs.value.forEach(editor => {
    if (editor == null) return;
    editor.destroy();
  });
})

const handleCreated = (editor, questionIndex) => {
  editorRefs.value[questionIndex] = editor; // 记录 editor 实例
  editor.config.toolbarConfig = toolbarConfig; // 确保配置正确应用
}

const questionList = ref([]);

function getQuestionList() {
  console.log("ljghasjkhdjksahjkhsajkhjkasd",groupId);
  homeworkApi.getHomeworkQuestion(groupId).then(resp => {
    if (resp.code == 200) {
      questionList.value = resp.data;
      for (let i = 0; i < questionList.value.length; i++) {
        questionList.value[i].content = JSON.parse(questionList.value[i].content);
        // 初始化 editorTitles 和 editorContents
        editorTitles.value.push('');
        editorContents.value.push('');
        // 初始化 selectedAnswers 为数组
        selectedAnswers.value.push([]);
      }
    } else {
      ElMessage.error("未知错误，请联系管理员");
    }
  });
}
getQuestionList();

// 提交作业
const homework = ref([]);

const selectedAnswers = ref([]);
questionList.value.forEach(() => {
  selectedAnswers.value.push([]);
});

// 上一个页面传递的参数 groupId
function submit() {
  homework.value = [];
  for (let i = 0; i < questionList.value.length; i++) {
    if (questionList.value[i].type == 1 || questionList.value[i].type == 2) {
      homework.value.push({
        "id": questionList.value[i].id,
        "answer": selectedAnswers.value[i],
        "type": questionList.value[i].type
      });
    } else if (questionList.value[i].type == 3) {
      const editor = editorRefs.value[i];
      const plainText = editor ? editor.getText() : '';
      homework.value.push({
        "id": questionList.value[i].id,
        "answer": [editorTitles.value[i], plainText],
        "type": questionList.value[i].type
      });
    }
  }
  let groupId = route.params.id;
  let sub = route.params.sub;
  if (sub <=2){
    homeworkApi.submitHomework(homework.value, groupId).then(resp => {
      if (resp.code == 200) {
        ElMessage.success("提交成功");
        homework.value = [];
        router.push("/show");
      } else {
        ElMessage.error("未知错误，请联系管理员");
      }
    });
  }else {
    ElMessage.error("提交失败您，已提交3次，每个作业可以提交3次");
  }
}
</script>

<style scoped>
.container {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  width: 34.375rem;
  height: 114.399375rem;
}

.main {
  background-image: url("https://lfjf.rzfwq.com/jtzy/Product/pcjingwang/images/20230823/qiangdianbanHomeWorkBg.png");
  background-size: contain;
  background-position: center 0;
  background-repeat: no-repeat;
  margin: 0;
  width: 100%;
  height: 1830px;
  text-align: center;
  position: relative;
}

.content {
  position: absolute;
  width: 93%;
  height: 80%;
  overflow-y: scroll;
  /* 居中显示 */
  left: 50%;
  transform: translate(-50%, 0);
  top: 12.5%;
  text-align: left;
}

/* 滚动条样式 */
.content::-webkit-scrollbar {
  width: 3px;
}

.content::-webkit-scrollbar-track {
  background: #f1f1f1; /* 滚动条轨道的背景色 */
}

.content::-webkit-scrollbar-thumb {
  background: #d9d9d9; /* 滚动条滑块的颜色 */
  border-radius: 6px; /* 滑块的圆角 */
}

.title {
  font-size: 1.65rem;
  font-weight: 600;
  /* 居中显示 */
  text-align: center;
  /*字体颜色*/
  color: #3f27b1;
}

.question {
  padding-top: 10%;
  padding-left: 4%;
  font-size: 1.35rem;
  font-weight: 500;
}

.answer {
  padding-top: 2.5%;
  padding-left: 7%;
  font-size: 1.35rem;
}

.selected {
  display: block;
  padding: 1% 0 1.2% 0;
}


.selected input[name="checkbox"] {
  margin-right: 1%;
  width: 1.2rem;
  height: 1rem;
  /* 透明度 */
  opacity: 0.8;
  cursor: pointer; /* 鼠标悬停时变成手的形状 */
}
.selected input[type="radio"]{
  margin-right: 1%;
  width: 1.2rem;
  height: 1rem;
  /* 透明度 */
  opacity: 0.8;
  cursor: pointer; /* 鼠标悬停时变成手的形状 */
}

/* 单选按钮选中时的样式 */
.selected input[type="radio"]:checked {
  accent-color: blue; /* 设置选中时的颜色为蓝色 */
}

/* 多选按钮选中时的样式 */
.selected input[type="checkbox"]:checked {
  accent-color: blue; /* 设置选中时的颜色为蓝色 */
}

.selected label {
  cursor: pointer;
}

.editor {
  padding-top: 2.5%;
  padding-left: 3.5%;
  padding-right: 3.5%;
  height: 30rem;
}

.Short-answers {
  height: 48rem;
}

.submit {
  display: block;
  text-align: center;
}

.submit img {
  padding-top: 2.5%;
  padding-left: 3.5%;
  padding-right: 3.5%;
  cursor: pointer;
  width: 67%;
}

.submit-times {
  font-size: 0.8rem;
  color: #858585;
  text-align: center;
}
</style>