tianyan/tra-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改通用答题组件

Browse Source
This commit is contained in:
田岩
2025-08-21 10:28:56 +08:00
parent b4b039cc1b
commit 3705d43508
4 changed files with 139 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/examination/radio-subject-item.vue
+4 -3
View File
@@ -31,8 +31,8 @@
required: false,
},
my_answer: {
type: String,
defauft:''
type: Array,
default: () => []
}
});
const select_status = computed(() => {
@@ -40,8 +40,9 @@
if (props.analysisVo.correctFlag === 'R') return 'success';
// 是错误答案但是被用户错误选中的为红
console.log('props.my_answer', props.my_answer);
const my_answer_array = props.my_answer.split(',');
const my_answer_array = props.my_answer;
if(my_answer_array.includes(props.analysisVo.itemId) && props.analysisVo.correctFlag === 'E') return 'error';
// 只有被我选中,不知是正确还是错误的为蓝
if(my_answer_array.includes(props.analysisVo.itemId)) return 'primary';
// 什么都不是者为灰色
src/components/examination/radio-subject.vue
+19 -17
View File
@@ -24,7 +24,7 @@
</view>
<view class="option_div">
<radioSubjectItem v-for="(analysisVo,index) in subject_data.itemVos" @click_option="click_option" :key="index"
:analysisVo="analysisVo" :my_answer="props.item.my_answer">
:analysisVo="analysisVo" :my_answer="props.item.my_answer" :mode="props.mode">
</radioSubjectItem>
</view>
<view class="option_div_button" v-if="subject_data.qnsTyp==='MU' && ['practice','study'].includes(props.mode) && !props.isPreview">
@@ -66,6 +66,7 @@
type: String,
required: true,
},
// 是否预览模式
isPreview:{
type: Boolean,
default: false
@@ -92,29 +93,30 @@
qnsContent: props.item.qnsContent,
qnsTyp: props.item.qnsTyp,
})
const item_answer = ref(props.item?.my_answer.split(','))
// 题类型
const subject_type_text = computed(() => SUBJECT_TYPE.find(res => subject_data.qnsTyp === res.value)?.label || '')
// 点击答题
const click_option = (analysisVo) => {
// // // 无论什么类型如果表里已经有了，再次点击就是弹出
// if (props.item.my_answer.includes(analysisVo.itemId)) {
// props.item.my_answer = props.item.my_answer.filter(id => id !== analysisVo.itemId);
// } else if (props.item.qnsTyp === 'SN') { // 单选
// // 单选插入，并且移除其他
// props.item.my_answer[0] = analysisVo.itemId
// muCheckbox()
// } else if (props.item.qnsTyp === 'MU') { // 多选题
// // 多选直接插入
// props.item.my_answer.push(analysisVo.itemId)
// } else if (props.item.qnsTyp === 'JD') { // 判断题
// // 判断插入，并且移除其他
// props.item.my_answer = [analysisVo.itemId]
// muCheckbox()
// }
// // 无论什么类型如果表里已经有了，再次点击就是弹出
if (props.item.my_answer.includes(analysisVo.itemId)) {
// props.item.my_answer = props.item.my_answer.filter(id => id !== analysisVo.itemId);
} else if (props.item.qnsTyp === 'SN') { // 单选
// 单选插入，并且移除其他
// props.item.my_answer[0] = analysisVo.itemId
muCheckbox()
} else if (props.item.qnsTyp === 'MU') { // 多选题
// 多选直接插入
// props.item.my_answer.push(analysisVo.itemId)
} else if (props.item.qnsTyp === 'JD') { // 判断题
// 判断插入，并且移除其他
// props.item.my_answer = [analysisVo.itemId]
muCheckbox()
}
}
const muCheckbox = () => {
emit('subject_click', 'answer', {
qnsTyp: props.item.qnsTyp,
src/components/examination/subject.vue
+109 -78
View File
@@ -2,17 +2,17 @@
<view class="item">
<view class="top">
<view class="type">
{{subject_type_text}}
</view>
<view class="score" v-if="mode !== 'study'">
5分
</view>
<view class="fl1" v-if="mode !== 'study'">
{{ subject_type_text }}
</view>
<view class="score" v-if="mode !== 'study'">5分</view>
<view class="fl1" v-if="mode !== 'study'"></view>
<view class="right" v-if="mode !== 'study'">
<view class="mark_and_feedback_div">
<image :src="markIcon(props.item.mark?'#0066FF':'#ABABAB')" class="img" @click="mark_click()"></image>
<image
:src="markIcon(props.item.mark ? '#0066FF' : '#ABABAB')"
class="img"
@click="mark_click()"
></image>
<image :src="feedbackIcon()" class="img" @click="feedback_click()"></image>
</view>
<!-- <view class="right_text">展开</view>
@@ -20,110 +20,142 @@
</view>
</view>
<view class="question_text">
{{subject_data.qnsContent}}
{{ subject_data.qnsContent }}
</view>
<view class="option_div">
<template v-if="qnsTyp === 'ES'">
<!-- <questionVue @changePlay="changePlay" :dataInfo="talkingInfo" :activeVoiceId="questionValue"></questionVue> -->
</template>
<template v-else>
<radioSubjectItem v-for="(analysisVo,index) in subject_data.itemVos" @click_option="click_option" :key="index"
:analysisVo="analysisVo" :my_answer="props.item.my_answer">
</radioSubjectItem>
<radioSubjectItem
v-for="(analysisVo, index) in subject_data.itemVos"
@click_option="click_option"
:key="index"
:analysisVo="analysisVo"
:my_answer="item_answer"
></radioSubjectItem>
</template>
</view>
<view class="option_div_button" v-if="subject_data.qnsTyp==='MU' && ['practice','study'].includes(props.mode)">
<uv-button type="primary" class="send_evaluate" :custom-style="customStyle" :throttleTime="300"
@click="muCheckbox" :hairline="false">确定</uv-button>
<view
class="option_div_button"
v-if="subject_data.qnsTyp === 'MU' && ['practice', 'study'].includes(props.mode) && !props.isPreview"
>
<uv-button
type="primary"
class="send_evaluate"
:custom-style="customStyle"
:throttleTime="300"
@click="muCheckbox('answer')"
:hairline="false"
>
确定
</uv-button>
</view>
</view>
</template>
<script setup>
import {
ref,
reactive,
onMounted,
nextTick,
computed,
toRaw
} from 'vue'
import radioSubjectItem from './radio-subject-item.vue'
import {
markIcon,
feedbackIcon
} from '@/common/imgSvg'
import {
SUBJECT_TYPE
} from '@/enum.js'
import { ref, reactive, onMounted, nextTick, computed, toRaw } from 'vue';
import radioSubjectItem from './radio-subject-item.vue';
import { markIcon, feedbackIcon } from '@/common/imgSvg';
import { SUBJECT_TYPE } from '@/enum.js';
const customStyle = {
borderRadius: '16rpx',
width: '292rpx',
backgroundColor: '#0066FF',
border: '1rpx solid rgb(12, 123, 245)',
}
const emit = defineEmits(['subject_click'])
border: '1rpx solid rgb(12, 123, 245)'
};
const emit = defineEmits(['subject_click']);
const props = defineProps({
modelValue: {
type: Array,
default: () => []
},
item: {
type: Object,
required: true,
required: true
},
mode: {
type: String,
required: true,
validator: (value) => {
// 考试: examination 练习: practice 错题本: mistake 学习: study
return ['examination', 'practice', 'mistake', 'study'].includes(value);
}
},
// 是否预览模式
isPreview: {
type: Boolean,
default: false
},
// 是否清除正确答案
clearResult: {
type: Boolean,
default: true
}
});
const modelValue = computed({
get: () => props.modelValue,
set: (val) => emit('update:modelValue', val)
});
const item_answer = ref(typeof props?.my_answer === 'string' ? props.my_answer.split(',') : []);
const feedback_click = () => {
emit('subject_click', 'feedback', props.item)
}
emit('subject_click', 'feedback', props.item);
};
const mark_click = () => {
emit('subject_click', 'mark', props.item)
}
emit('subject_click', 'mark', props.item);
};
// 单选 SN， 多选 MU，判断题 JD，简答 ES
const qnsTyp = computed(() => props.item.qnsTyp)
const qnsTyp = computed(() => props.item.qnsTyp);
const subject_data = reactive({
qnsId: '',
qnsContent: '',
qnsTyp: '',
itemVos: props.item.itemVos.map(res => ({
...res,
})),
})
Object.assign(subject_data, {
qnsId: props.item.qnsId,
qnsContent: props.item.qnsContent,
qnsTyp: props.item.qnsTyp,
})
itemVos: props.item.itemVos.map((res) => ({
...res,
correctFlag: props.clearResult ? '' : res.correctFlag
}))
});
// 题类型
const subject_type_text = computed(() => SUBJECT_TYPE.find(res => subject_data.qnsTyp === res.value)?.label || '')
const subject_type_text = computed(() => SUBJECT_TYPE.find((res) => subject_data.qnsTyp === res.value)?.label || '');
// 点击答题
const click_option = (analysisVo) => {
// // 无论什么类型如果表里已经有了，再次点击就是弹出
// if (props.item.my_answer.includes(analysisVo.itemId)) {
// props.item.my_answer = props.item.my_answer.filter(id => id !== analysisVo.itemId);
// } else if (props.item.qnsTyp === 'SN') { // 单选
// // 单选插入，并且移除其他
// props.item.my_answer[0] = analysisVo.itemId
// muCheckbox()
// } else if (props.item.qnsTyp === 'MU') { // 多选题
// // 多选直接插入
// props.item.my_answer.push(analysisVo.itemId)
// } else if (props.item.qnsTyp === 'JD') { // 判断题
// // 判断插入，并且移除其他
// props.item.my_answer = [analysisVo.itemId]
// muCheckbox()
// }
}
const muCheckbox = () => {
emit('subject_click', 'answer', {
if (props.isPreview) return;
// 无论什么类型如果表里已经有了，再次点击就是弹出
if (item_answer.value.includes(analysisVo.itemId)) {
item_answer.value = item_answer.value.filter((id) => id !== analysisVo.itemId);
if (!['study'].includes(props.mode)) {
muCheckbox('choose');
}
} else if (props.item.qnsTyp === 'SN') {
// 单选
// 单选插入，并且移除其他
item_answer.value[0] = analysisVo.itemId;
muCheckbox('choose');
} else if (props.item.qnsTyp === 'MU') {
// 多选题
// 多选直接插入
item_answer.value.push(analysisVo.itemId);
if (!['study'].includes(props.mode)) {
muCheckbox('choose');
}
} else if (props.item.qnsTyp === 'JD') {
// 判断题
// 判断插入，并且移除其他
item_answer.value = [analysisVo.itemId];
muCheckbox('choose');
}
modelValue.value = item_answer.value;
};
const muCheckbox = (type = 'answer') => {
emit('subject_click', type, {
qnsTyp: props.item.qnsTyp,
qnsId: props.item.qnsId,
answer: props.item.my_answer,
answerItems: subject_data.itemVos.filter(t=> props.item.my_answer.includes(t.itemId))
})
}
answer: item_answer.value,
answerItems: subject_data.itemVos.filter((t) => item_answer.value.includes(t.itemId))
});
};
</script>
<style scoped lang="scss">
@@ -165,12 +197,12 @@
.type {
width: 108rpx;
height: 46rpx;
background: #267EFF;
background: #267eff;
border-radius: 8rpx;
font-family: PingFangSC;
font-weight: 500;
font-size: 25rpx;
color: #FFFFFF;
color: #ffffff;
text-align: center;
line-height: 46rpx;
}
@@ -196,7 +228,6 @@
font-style: normal;
}
}
}
.question_text {
@@ -210,4 +241,4 @@
margin-top: 20rpx;
}
}
</style>
</style>