98 lines
2.8 KiB
Vue
98 lines
2.8 KiB
Vue
<template>
|
|
<MatrixQuestion :index="answerIndex" v-model:rowRecord="rowRecord" v-model:matrix-radio-answer="answer!" :rows="rows"
|
|
:cols="cols" :is-preview="true" :errorMessage="question.error" :element="question" />
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import MatrixQuestion from '@/views/Design/components/Questions/MatrixQuestion.vue';
|
|
import { computed, ref, watch } from 'vue';
|
|
// const questionType = defineModel<number>('questionType', { required: false });
|
|
|
|
// 矩阵多选的答案类型
|
|
type answerType = {
|
|
[key: string]: 1;
|
|
};
|
|
|
|
// preview props
|
|
// const stem = defineModel('stem');
|
|
// const list = defineModel<questionsList[]>('list', { required: false });
|
|
// const config = defineModel<OptionConfigType>('config', { required: false });
|
|
const question = defineModel<question>('question', { default: () => { } });
|
|
const answerIndex = computed(() => question.value.title);
|
|
const emit = defineEmits(['changeAnswer', 'previous', 'next']);
|
|
// 示例
|
|
// {
|
|
// "1_1": 1,
|
|
// "1_2": 1,
|
|
// "2_1": 1,
|
|
// "2_2": 1
|
|
// }
|
|
const answer = defineModel<answerType>('answer', {
|
|
// 临时赋值, 用于测试
|
|
// default: () => ({
|
|
// "1_1": 1,
|
|
// "1_2": 1,
|
|
// "2_1": 1,
|
|
// "2_2": 1
|
|
// })
|
|
});
|
|
// const answerIndex = defineModel('answerIndex');
|
|
// const answerSn = defineModel('answerSn');
|
|
// const answerSurveySn = defineModel('answerSurveySn');
|
|
|
|
// 记录行和列的索引
|
|
// 记录的格式如下，
|
|
// [
|
|
// [0, 1],
|
|
// [0, 1]
|
|
// ]
|
|
const rowRecord = ref<number[][]>([]);
|
|
|
|
// 假如 answer 有数值，需要解析 answer ，然后传递 record 给子组件
|
|
answer.value && parseAnswer(answer.value);
|
|
|
|
// console.log(`answer value`, answer.value);
|
|
/**
|
|
* 解析 answer
|
|
*/
|
|
function parseAnswer (answer: answer) {
|
|
// console.log(`come in parseAnswer`);
|
|
const rowRecordList: number[][] = [];
|
|
Object.entries(answer).forEach(([key]) => {
|
|
const [row, col] = key.split('_').map(Number);
|
|
if (!rowRecordList[row - 1]) rowRecordList[row - 1] = [];
|
|
rowRecordList[row - 1].push(col - 1);
|
|
});
|
|
rowRecord.value = rowRecordList;
|
|
|
|
return rowRecordList;
|
|
}
|
|
// 查看parseAnswer的返回值
|
|
// console.log(`parseAnswer value:`, parseAnswer(answer.value!))
|
|
|
|
/**
|
|
* 获取行和列的内容
|
|
* 行的内容在 question.list[0].options
|
|
* 列的内容在 question.list[1].options
|
|
*/
|
|
const rows = computed(() => question.value?.list[0]?.options ?? []);
|
|
const cols = computed(() => question.value?.list[1]?.options ?? []);
|
|
|
|
watch(
|
|
rowRecord,
|
|
() => {
|
|
// console.log(`record has changed`, rowRecord.value);
|
|
// 重新生成 answer
|
|
const newAnswer: answer = {};
|
|
rowRecord.value.forEach((rowOptions, rowIndex) => {
|
|
rowOptions.forEach((colIndex) => {
|
|
newAnswer[`${rowIndex + 1}_${colIndex + 1}`] = 1;
|
|
});
|
|
});
|
|
answer.value = newAnswer;
|
|
emit('changeAnswer', newAnswer);
|
|
},
|
|
{ deep: true }
|
|
);
|
|
</script>
|