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 { |
body { |
||||
font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Segoe UI, Arial, Roboto, 'PingFang SC', miui, 'Hiragino Sans GB', 'Microsoft Yahei', sans-serif; |
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