This commit is contained in:
yuping
2022-12-12 16:26:57 +08:00
parent cd68647ace
commit f865244041
3 changed files with 144 additions and 123 deletions

View File

@@ -44,3 +44,5 @@ export const VOTE_DETAIL2 = voteId => `/vote/queryVoteAndVoteStemDetailByVoteId?
export const COMMENT_ADD = '/comment post'
export const COMMENT_PRAISE = '/comment/praise post'
export const COMMENT_COLLECTION = '/comment/collection post'
export const ASSESSMENT_QUERY = assessmentId => `/assessment/queryAssessmentDetailById?assessmentId=${assessmentId} post`

View File

@@ -2,7 +2,7 @@
<div class="surveydetail">
<!-- 面包屑导航 -->
<div
style="display: flex; align-items: center; justify-content: space-between"
style="display: flex; align-items: center; justify-content: space-between"
>
<div class="crumb">
<div>混合制项目</div>
@@ -14,16 +14,16 @@
<div class="prevnext">
<div class="prev">
<img
style="width: 23px; height: 23px"
src="../../assets/image/prev.png"
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"
style="width: 23px; height: 23px"
src="../../assets/image/next.png"
/>
</div>
</div>
@@ -36,20 +36,20 @@
<div class="bascinfo">
<div>
<div
class="question"
v-for="(value, index) in question"
:key="index"
:style="{ 'margin-top': index === 0 ? '57px' : '41px' }"
class="question"
v-for="(value, index) in data.scoringQuestionVoList"
:key="index"
:style="{ 'margin-top': index === 0 ? '57px' : '41px' }"
>
<div class="text">{{ value.text }}</div>
<div class="text">{{ value.assessmentScTitle }}</div>
<div class="answer">
<div class="answerL">完全没用</div>
<div class="answerC">
<div
class="answerCitem"
v-for="(item, key) in select"
:key="key"
:style="{
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
@@ -60,46 +60,55 @@
? '#fff'
: 'rgba(86, 163, 249, 1)',
}"
@click="score(value, item)"
@click="()=>{value.selectAnswer=item}"
>
<div>{{ item }}</div>
<div>{{ item+1 }}</div>
</div>
</div>
<div class="answerR">非常有帮助/启发</div>
</div>
</div>
<div class="question" style="margin-top: 41px">
<div class="text">4.类似相应的课程您认为适合哪些人观看</div>
<div class="question" style="margin-top: 41px" v-for="(item,i) in data.singleStemVoList" :key="i">
<div class="text">{{ item.singleStemName }}</div>
<div
v-for="(value, index) in viewpeople"
:key="index"
style="display: flex; align-items: center"
:style="{ 'margin-top': index === 0 ? '29px' : '22px' }"
@click="selectPeople(value)"
v-for="(value, index) in item.assessmentSingleChoiceVoList"
:key="index"
style="display: flex; align-items: center"
:style="{ 'margin-top': index === 0 ? '29px' : '22px' ,cursor:'pointer'}"
@click="()=>{
item.assessmentSingleChoiceVoList.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.text }}</div>
<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">
<div class="text">5.您的其他意见</div>
<div class="question" style="margin-top: 41px" v-for="(item,i) in data.multipleStemVoList" :key="i">
<div class="text">{{ item.multipleStemName }}</div>
<div
v-for="(value, index) in item.multipleChoiceVoList"
:key="index"
style="display: flex; align-items: center"
:style="{ 'margin-top': index === 0 ? '29px' : '22px' ,cursor:'pointer'}"
@click="()=>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.essayQuestionVoList">
<div class="text">{{ item.assessmentQaTitle }}</div>
<div style="width: 713px; margin-top: 31px; position: relative">
<el-input
v-model="textarea1"
:autosize="{ minRows: 5, maxRows: 5 }"
resize="none"
maxlength="200"
type="textarea"
@input="textareaInput"
v-model="item.content"
:autosize="{ minRows: 5, maxRows: 5 }"
resize="none"
maxlength="200"
type="textarea"
/>
<div class="words">{{ textarealength }}/200</div>
<div class="words">{{ item.content?.length || 0 }}/200</div>
</div>
</div>
<div style="display: flex; justify-content: center">
@@ -108,93 +117,90 @@
</div>
</div>
<!-- 基本信息 -->
<!-- todo 测评页面 没有接口-->
<!-- todo 测评页面 没有接口-->
</div>
</template>
<script>
import { reactive, toRefs } from "vue";
<script setup>
import {reactive, toRefs} from "vue";
import checkbox from '@/assets/image/checkbox.png'
import checkbox2 from '@/assets/image/checkbox2.png'
export default {
name: "SurveyDetail",
setup() {
const state = reactive({
question: [
{
id: 1,
text: "1.您觉得课程对您是否有用?",
selectAnswer: 0,
},
{
id: 2,
text: "2.您是否会推荐课程给其他同事?",
selectAnswer: 0,
},
{
id: 3,
text: "3.后续该讲师有其他课程是否会参与?",
selectAnswer: 0,
},
],
select: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
viewpeople: [
{
id: 1,
text: "基础员工",
select: false,
},
{
id: 2,
text: "中层管理",
select: false,
},
{
id: 3,
text: "专业人员",
select: false,
},
{
id: 4,
text: "高级管理",
select: false,
},
],
textarea1: "",
textarealength: 0,
});
const score = (value, item) => {
let arr = state.question;
arr.map((i) => {
if (i.id === value.id) {
i.selectAnswer = item;
}
});
state.question = arr;
};
const selectPeople = (value) => {
let arr = state.viewpeople;
arr.map((i) => {
if (i.id === value.id) {
i.select = !i.select;
}
});
state.viewpeople = arr;
};
const textareaInput = (e) => {
// console.log("eee", e);
state.textarea1 = e;
state.textarealength = e.length;
};
return {
...toRefs(state),
score,
selectPeople,
textareaInput,
checkbox,
checkbox2
};
},
import {useRoute} from "vue-router/dist/vue-router";
import {usePage, useRequest} from "@/api/request";
import {ASSESSMENT_QUERY, COMMENT_LIST, DISCUSS_DETAIL} from "@/api/api";
const {query: {id, discussSubmitId}} = useRoute()
const {data} = useRequest(ASSESSMENT_QUERY(112), {})
const state = reactive({
question: [
{
id: 1,
text: "1.您觉得课程对您是否有用?",
selectAnswer: 0,
},
{
id: 2,
text: "2.您是否会推荐课程给其他同事?",
selectAnswer: 0,
},
{
id: 3,
text: "3.后续该讲师有其他课程是否会参与?",
selectAnswer: 0,
},
],
select: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
viewpeople: [
{
id: 1,
text: "基础员工",
select: false,
},
{
id: 2,
text: "中层管理",
select: false,
},
{
id: 3,
text: "专业人员",
select: false,
},
{
id: 4,
text: "高级管理",
select: false,
},
],
textarea1: "",
textarealength: 0,
});
const score = (value, item) => {
let arr = state.question;
arr.map((i) => {
if (i.id === value.id) {
i.selectAnswer = item;
}
});
state.question = arr;
};
const selectPeople = (value) => {
let arr = state.viewpeople;
arr.map((i) => {
if (i.id === value.id) {
i.select = !i.select;
}
});
state.viewpeople = arr;
};
const textareaInput = (e) => {
// console.log("eee", e);
state.textarea1 = e;
state.textarealength = e.length;
};
</script>
<style lang="scss">
.surveydetail {
@@ -204,18 +210,21 @@ export default {
font-size: 14px;
line-height: 24px;
}
.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;
@@ -224,6 +233,7 @@ export default {
margin-top: 17px;
margin-left: -11px;
}
.bascinfo {
width: 100%;
min-height: 1032px;
@@ -239,6 +249,7 @@ export default {
font-weight: 500;
color: #333330;
}
.question .answer {
margin-top: 30px;
display: flex;
@@ -247,6 +258,7 @@ export default {
font-weight: 500;
color: #56a3f9;
}
.question .answer .answerC {
width: 540px;
height: 73px;
@@ -272,12 +284,14 @@ export default {
cursor: pointer;
}
}
.question .people {
font-size: 14px;
font-weight: 500;
color: #333330;
margin-left: 15px;
}
.question .words {
position: absolute;
right: 15px;
@@ -286,10 +300,12 @@ export default {
font-weight: 500;
color: #333330;
}
.question .el-textarea__inner {
border-radius: 8px;
background-color: rgba(245, 246, 247, 1);
}
.submit {
width: 126px;
height: 46px;

View File

@@ -80,6 +80,9 @@ export default defineConfig(({command}) =>
},'/examination': {
target: 'http://localhost:30001',
changeOrigin: true,
},'/assessment': {
target: 'http://localhost:30001',
changeOrigin: true,
},
}
}