ting
5 months ago
10 changed files with 421 additions and 3672 deletions
-
3620work/package-lock.json
-
10work/package.json
-
12work/src/api/HomeworkApi.js
-
8work/src/api/index.js
-
5work/src/assets/main.css
-
4work/src/main.js
-
11work/src/router/index.js
-
345work/src/views/DoHomeworkView.vue
-
53work/src/views/WorksShowView.vue
-
25work/vite.config.js
3620
work/package-lock.json
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
@ -0,0 +1,12 @@ |
|||
import service from "."; |
|||
const homeworkApi = { |
|||
//获取作业
|
|||
getHomeworkQuestion(id) { |
|||
return service.post('api/homework_client/gethomeworkquestion', {id: id}); |
|||
}, |
|||
//提交作业
|
|||
submitHomework(homework,groupId) { |
|||
return service.post('api/homework_client/commithomework', {homework,groupId}); |
|||
} |
|||
} |
|||
export default homeworkApi; |
|||
@ -1,4 +1,9 @@ |
|||
<<<<<<< HEAD |
|||
|
|||
body { |
|||
font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Segoe UI, Arial, Roboto, 'PingFang SC', miui, 'Hiragino Sans GB', 'Microsoft Yahei', sans-serif; |
|||
======= |
|||
*{ |
|||
margin: 0; |
|||
>>>>>>> 6bb4fa11ad521daab009a817457da00ebd73d42d |
|||
} |
|||
@ -0,0 +1,345 @@ |
|||
<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" 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>您已提交0次，每个作业可以提交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' |
|||
|
|||
// 编辑器实例，必须用 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(id) { |
|||
homeworkApi.getHomeworkQuestion(id).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(1377); |
|||
|
|||
// 提交作业 |
|||
const homework = ref([]); |
|||
|
|||
const selectedAnswers = ref([]); |
|||
questionList.value.forEach(() => { |
|||
selectedAnswers.value.push([]); |
|||
}); |
|||
|
|||
// 上一个页面传递的参数 groupId |
|||
const groupId = 1379; |
|||
function submit(groupId) { |
|||
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 |
|||
}); |
|||
} |
|||
} |
|||
homeworkApi.submitHomework(homework.value, 1379).then(resp => { |
|||
if (resp.code == 200) { |
|||
ElMessage.success("提交成功"); |
|||
} else { |
|||
ElMessage.error("未知错误，请联系管理员"); |
|||
} |
|||
}); |
|||
} |
|||
</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="radio"], |
|||
.selected input[name="checkbox"] { |
|||
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> |
|||
@ -1,25 +0,0 @@ |
|||
import { fileURLToPath, URL } from 'node:url' |
|||
|
|||
import { defineConfig } from 'vite' |
|||
import vue from '@vitejs/plugin-vue' |
|||
|
|||
// https://vite.dev/config/
|
|||
export default defineConfig({ |
|||
plugins: [ |
|||
vue(), |
|||
], |
|||
resolve: { |
|||
alias: { |
|||
'@': fileURLToPath(new URL('./src', import.meta.url)) |
|||
}, |
|||
}, |
|||
server: { |
|||
proxy: { |
|||
'/api': { |
|||
//后端服务器地址
|
|||
target: 'http://192.168.8.191:8080', |
|||
changeOrigin: true, |
|||
} |
|||
} |
|||
} |
|||
}) |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue