mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/fe-student.git
synced 2025-12-15 13:56:49 +08:00
380 lines
10 KiB
Vue
380 lines
10 KiB
Vue
<template>
|
|
<div class="surveydetail" style="padding: 30px">
|
|
<!-- 面包屑导航 -->
|
|
<div
|
|
style="display: flex; align-items: center; justify-content: space-between"
|
|
>
|
|
<div class="crumb">
|
|
<div>{{ pName }}</div>
|
|
<div style="margin-left: 6px; margin-right: 6px">/</div>
|
|
<div>{{ sName }}</div>
|
|
<div style="margin-left: 6px; margin-right: 6px">/</div>
|
|
<div style="font-weight: 700; font-size: 16px">评估详情</div>
|
|
<div style="font-weight: 700; font-size: 16px">评估详情</div>
|
|
</div>
|
|
<!--
|
|
<div class="prevnext">
|
|
<div class="prev">
|
|
<img
|
|
style="width: 23px; height: 23px"
|
|
src="../../assets/image/prev.png"
|
|
/>
|
|
<div style="margin-left: 7px">上一个</div>
|
|
</div>
|
|
<div class="prev" style="margin-left: 31px">
|
|
<div style="margin-right: 7px">下一个</div>
|
|
<img
|
|
style="width: 23px; height: 23px"
|
|
src="../../assets/image/next.png"
|
|
/>
|
|
</div>-->
|
|
<div class="return">
|
|
<div style="display: flex" @click="returnclick">
|
|
<img
|
|
class="img2"
|
|
style="margin-right: 22px"
|
|
src="../../assets/image/return.png"
|
|
/>
|
|
<div class="text" style="color: #fff">返回</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 面包屑导航 -->
|
|
<!-- 标题 -->
|
|
<div class="title">【评估】管理者进阶腾飞班 - 培训阶段性调研</div>
|
|
<!-- 标题 -->
|
|
<!-- 基本信息 -->
|
|
<div class="bascinfo">
|
|
<div>
|
|
<div
|
|
class="question"
|
|
v-for="(value, index) in data.assessmentScoringQuestionDtoList"
|
|
:key="index"
|
|
:style="{ 'margin-top': index === 0 ? '57px' : '41px' }"
|
|
>
|
|
<div class="text">{{ value.assessmentScTitle }}</div>
|
|
<div class="answer">
|
|
<div class="answerL">完全没用</div>
|
|
<div class="answerC">
|
|
<div
|
|
class="answerCitem"
|
|
v-for="(item, key) in Array.from(
|
|
{ length: value.assessmentMaxScore },
|
|
(k, i) => i
|
|
)"
|
|
:key="key"
|
|
:style="{
|
|
'margin-left': key === 0 ? '15px' : '10px',
|
|
background:
|
|
value.selectAnswer === item
|
|
? 'rgba(86, 163, 249, 1)'
|
|
: 'rgba(86, 163, 249, 0)',
|
|
color:
|
|
value.selectAnswer === item
|
|
? '#fff'
|
|
: 'rgba(86, 163, 249, 1)',
|
|
}"
|
|
@click="
|
|
() => {
|
|
if (data.isSubmit) {
|
|
return;
|
|
}
|
|
value.selectAnswer = item;
|
|
}
|
|
"
|
|
>
|
|
<div>{{ item + 1 }}</div>
|
|
</div>
|
|
</div>
|
|
<div class="answerR">非常有帮助/启发</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="question"
|
|
style="margin-top: 41px"
|
|
v-if="
|
|
data.assessmentSingleChoiceDtoList &&
|
|
data.assessmentSingleChoiceDtoList.length
|
|
"
|
|
>
|
|
<div class="text">
|
|
{{ data.assessmentSingleChoiceDtoList[0]?.singleStemName }}
|
|
</div>
|
|
<div
|
|
v-for="(value, index) in data.assessmentSingleChoiceDtoList"
|
|
:key="index"
|
|
style="display: flex; align-items: center"
|
|
:style="{
|
|
'margin-top': index === 0 ? '29px' : '22px',
|
|
cursor: 'pointer',
|
|
}"
|
|
@click="
|
|
() => {
|
|
if (data.isSubmit) {
|
|
return;
|
|
}
|
|
data.assessmentSingleChoiceDtoList.forEach((e) => {
|
|
e.select = false;
|
|
});
|
|
value.select = true;
|
|
}
|
|
"
|
|
>
|
|
<img
|
|
style="width: 19px; height: 18px; cursor: pointer"
|
|
:src="value.select ? checkbox : checkbox2"
|
|
/>
|
|
<div class="people">{{ value.singleOptionName }}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
class="question"
|
|
style="margin-top: 41px"
|
|
v-if="
|
|
data.assessmentMultipleChoiceDtoList &&
|
|
data.assessmentMultipleChoiceDtoList.length
|
|
"
|
|
>
|
|
<div class="text">
|
|
{{ data.assessmentMultipleChoiceDtoList[0]?.multipleStemName }}
|
|
</div>
|
|
<div
|
|
v-for="(value, index) in data.assessmentMultipleChoiceDtoList"
|
|
:key="index"
|
|
style="display: flex; align-items: center"
|
|
:style="{
|
|
'margin-top': index === 0 ? '29px' : '22px',
|
|
cursor: 'pointer',
|
|
}"
|
|
@click="
|
|
() => {
|
|
if (data.isSubmit) {
|
|
return;
|
|
}
|
|
value.select = !value.select;
|
|
}
|
|
"
|
|
>
|
|
<img
|
|
style="width: 19px; height: 18px; cursor: pointer"
|
|
:src="value.select ? checkbox : checkbox2"
|
|
/>
|
|
<div class="people">{{ value.multipleOptionName }}</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="question"
|
|
style="margin-top: 41px"
|
|
v-for="(item, i) in data.assessmentEssayQuestionDtoList"
|
|
:key="i"
|
|
>
|
|
<div class="text">{{ item.assessmentQaTitle }}</div>
|
|
<div style="width: 713px; margin-top: 31px; position: relative">
|
|
<el-input
|
|
v-model="item.content"
|
|
:autosize="{ minRows: 5, maxRows: 5 }"
|
|
resize="none"
|
|
maxlength="200"
|
|
type="textarea"
|
|
:readonly="!!data.isSubmit"
|
|
/>
|
|
<div class="words">{{ item.content?.length || 0 }}/200</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
style="display: flex; justify-content: center"
|
|
v-if="
|
|
data.assessmentEssayQuestionDtoList?.length ||
|
|
data.assessmentMultipleChoiceDtoList?.length ||
|
|
data.assessmentSingleChoiceDtoList?.length ||
|
|
data.assessmentScoringQuestionDtoList?.length
|
|
"
|
|
>
|
|
<div
|
|
class="submit"
|
|
@click="submit"
|
|
:style="{ background: data.isSubmit ? '#999' : '#2478ff' }"
|
|
>
|
|
提交
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 基本信息 -->
|
|
<!-- todo 测评页面 没有接口-->
|
|
</div>
|
|
</template>
|
|
<script setup>
|
|
import checkbox from "@/assets/image/checkbox.png";
|
|
import checkbox2 from "@/assets/image/checkbox2.png";
|
|
import {useRoute} from "vue-router/dist/vue-router";
|
|
import { useRouter } from "vue-router";
|
|
import {request, usePage, useRequest} from "@/api/request";
|
|
import {
|
|
ASSESSMENT_QUERY,
|
|
ASSESSMENT_SUBMIT,
|
|
} from "@/api/api";
|
|
import {ElMessage} from "element-plus";
|
|
const router = useRouter();
|
|
const returnclick = () => {
|
|
router.back();
|
|
};
|
|
const {
|
|
query: { courseId, id: taskId, type, pName, sName },
|
|
} = useRoute();
|
|
const router = useRouter();
|
|
const returnclick = () => {
|
|
router.back();
|
|
};
|
|
const { data } = useRequest(ASSESSMENT_QUERY(courseId), { id: courseId });
|
|
console.log("data", data);
|
|
function submit() {
|
|
if (data.value.isSubmit) {
|
|
return;
|
|
}
|
|
data.value.isSubmit = !data.value.isSubmit;
|
|
request(ASSESSMENT_SUBMIT, {
|
|
assessmentId: courseId,
|
|
taskId,
|
|
type,
|
|
result: JSON.stringify(data.value),
|
|
});
|
|
ElMessage.info("提交成功");
|
|
router.back();
|
|
}
|
|
</script>
|
|
<style lang="scss">
|
|
.surveydetail {
|
|
.crumb {
|
|
color: #fff;
|
|
display: flex;
|
|
font-size: 14px;
|
|
line-height: 24px;
|
|
}
|
|
.return {
|
|
position: absolute;
|
|
right: 10%;
|
|
.text {
|
|
text-align: center;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
}
|
|
}
|
|
.prevnext {
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
color: #ffffff;
|
|
|
|
.prev {
|
|
display: flex;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
.title {
|
|
font-size: 20px;
|
|
font-weight: 800;
|
|
color: #ffffff;
|
|
line-height: 24px;
|
|
margin-top: 17px;
|
|
margin-left: -11px;
|
|
}
|
|
|
|
.bascinfo {
|
|
width: 100%;
|
|
min-height: 1032px;
|
|
margin-top: 24px;
|
|
background: #ffffff;
|
|
border-radius: 8px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
|
|
.question .text {
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
color: #333330;
|
|
}
|
|
|
|
.question .answer {
|
|
margin-top: 30px;
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
color: #56a3f9;
|
|
}
|
|
|
|
.question .answer .answerC {
|
|
width: 540px;
|
|
height: 73px;
|
|
border: 1px solid #d7e5fd;
|
|
border-radius: 8px;
|
|
display: flex;
|
|
align-items: center;
|
|
margin-left: 11px;
|
|
margin-right: 11px;
|
|
// justify-content: center;
|
|
.answerCitem {
|
|
width: 40px;
|
|
height: 40px;
|
|
border: 1px solid #56a3f9;
|
|
border-radius: 8px;
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
color: #ffffff;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-left: 10px;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
.question .people {
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
color: #333330;
|
|
margin-left: 15px;
|
|
}
|
|
|
|
.question .words {
|
|
position: absolute;
|
|
right: 15px;
|
|
bottom: 5px;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
color: #333330;
|
|
}
|
|
|
|
.question .el-textarea__inner {
|
|
border-radius: 8px;
|
|
background-color: rgba(245, 246, 247, 1);
|
|
}
|
|
|
|
.submit {
|
|
width: 126px;
|
|
height: 46px;
|
|
background: #2478ff;
|
|
box-shadow: 0px 1px 8px 0px rgba(56, 125, 247, 0.7);
|
|
border-radius: 4px;
|
|
font-size: 16px;
|
|
font-weight: 800;
|
|
color: #ffffff;
|
|
line-height: 24px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
margin-top: 39px;
|
|
margin-bottom: 30px;
|
|
}
|
|
}
|
|
}
|
|
</style>
|