hz/ylst-h5
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(Design): 重构矩阵组件并优化逻辑处理

Browse Source 
- 在 BeforeMartrixCheckbox、BeforeMartrixComplation 和 BeforeMartrixRadio 组件中添加 changeHandle 函数
- 该函数在行和列选项变化时更新 logic 对象中的相关属性
- 优化 QuestionBefore 组件中的 beforeQuesOptions 生成逻辑
- 使用 watch 监听 skipType变化，动态更新 beforeQuesOptions
- 修复 addLogicItem 函数中 question_index 的初始值
This commit is contained in:
陈昱达
2025-03-22 18:34:41 +08:00
parent f7aad926a4
commit 71a51a5296
4 changed files with 134 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src/views/Design/components/ActionCompoents/components/QuestionItemAction/BeforComponent/BeforeMartrixCheckbox.vue
View File

@@ -1,7 +1,12 @@
<template>
<div class="flex mt10 align-center space-between">
<!-- 行标签 -->
<yl-select v-model="logic.row_index" :options="getOptions('row')" class="group"></yl-select>
<yl-select
v-model="logic.row_index"
:options="getOptions('row')"
class="group"
@change="changeHanlde('row', getOptions('row'), $event)"
></yl-select>
<!-- 选项 or 分组 -->
<yl-select
@@ -10,7 +15,12 @@
class="ml10 group"
></yl-select>
<!-- <yl-select v-model="logic.operator" :options="symbolOptions" class="ml10 symbol"></yl-select>-->
<yl-select v-model="logic.cell_index" :options="getOptions('col')" class="ml10"></yl-select>
<yl-select
v-model="logic.cell_index"
:options="getOptions('col')"
class="ml10"
@change="changeHanlde('col', getOptions('row'), $event)"
></yl-select>
<yl-select v-model="logic.is_select" class="ml10" :options="chooseOptions"></yl-select>
<div class="action-setting flex ml10">
@@ -27,6 +37,20 @@ const logic = defineModel('logic', {
const beforeQuesOptions = defineModel('beforeQuesOptions', {
type: Array
});
const changeHanlde = (type, options, value) => {
let optionInfo = options.find((item) => {
return item.option_index === value;
});
if (type === 'row') {
logic.value.row_index = optionInfo?.option_index || 0;
logic.value.relation_question_row_index = optionInfo?.parent_question_index || 0;
logic.value.row_type = optionInfo?.type || 0;
} else if (type === 'col') {
logic.value.cell_index = optionInfo?.option_index || 0;
logic.value.relation_question_cell_index = optionInfo?.parent_question_index || 0;
logic.value.cell_type = optionInfo?.type || 0;
}
};
const getOptions = (type) => {
let options = [];

29
src/views/Design/components/ActionCompoents/components/QuestionItemAction/BeforComponent/BeforeMartrixComplation.vue
View File

@@ -1,8 +1,18 @@
<template>
<div class="flex mt10 align-center space-between">
<!-- 行标签 -->
<yl-select v-model="logic.row_index" :options="getOptions('row')" class="group"></yl-select>
<yl-select v-model="logic.cell_index" :options="getOptions('col')" class="ml10"></yl-select>
<yl-select
v-model="logic.row_index"
:options="getOptions('row')"
class="group"
@change="changeHanlde('row', getOptions('row'), $event)"
></yl-select>
<yl-select
v-model="logic.cell_index"
:options="getOptions('col')"
class="ml10"
@change="changeHanlde('col', getOptions('row'), $event)"
></yl-select>
<!--是否被选中-->
<yl-select v-model="logic.operator" :options="completionOptions" class="ml10"></yl-select>
@@ -49,5 +59,20 @@ const getOptions = (type) => {
});
return options;
};
const changeHanlde = (type, options, value) => {
let optionInfo = options.find((item) => {
return item.option_index === value;
});
if (type === 'row') {
logic.value.row_index = optionInfo?.option_index || 0;
logic.value.relation_question_row_index = optionInfo?.parent_question_index || 0;
logic.value.row_type = optionInfo?.type || 0;
} else if (type === 'col') {
logic.value.cell_index = optionInfo?.option_index || 0;
logic.value.relation_question_cell_index = optionInfo?.parent_question_index || 0;
logic.value.cell_type = optionInfo?.type || 0;
}
};
</script>
<style scoped lang="scss"></style>

30
src/views/Design/components/ActionCompoents/components/QuestionItemAction/BeforComponent/BeforeMartrixRadio.vue
View File

@@ -1,7 +1,12 @@
<template>
<div class="flex mt10 align-center space-between">
<!-- 行标签 -->
<yl-select v-model="logic.row_index" :options="getOptions('row')" class="group"></yl-select>
<yl-select
v-model="logic.row_index"
:options="getOptions('row')"
class="group"
@change="changeHanlde('row', getOptions('row'), $event)"
></yl-select>
<!-- 选项 or 分组 -->
<yl-select
@@ -10,7 +15,12 @@
class="ml10 group"
></yl-select>
<yl-select v-model="logic.operator" :options="symbolOptions" class="ml10 symbol"></yl-select>
<yl-select v-model="logic.cell_index" :options="getOptions('col')" class="ml10"></yl-select>
<yl-select
v-model="logic.cell_index"
:options="getOptions('col')"
class="ml10"
@change="changeHanlde('col', getOptions('col'), $event)"
></yl-select>
<div class="action-setting flex ml10">
<slot name="button"></slot>
@@ -19,6 +29,7 @@
</template>
<script setup>
import { groupOptions, symbolOptions } from '@/utils/questionSteeingList.js';
import { ref } from 'vue';
import YlSelect from '@/components/YLSelect.vue';
const logic = defineModel('logic', {
type: Object,
@@ -33,6 +44,21 @@ const beforeQuesOptions = defineModel('beforeQuesOptions', {
}
});
const changeHanlde = (type, options, value) => {
let optionInfo = options.find((item) => {
return item.option_index === value;
});
if (type === 'row') {
logic.value.row_index = optionInfo?.option_index || 0;
logic.value.relation_question_row_index = optionInfo?.parent_question_index || 0;
logic.value.row_type = optionInfo?.type || 0;
} else if (type === 'col') {
logic.value.cell_index = optionInfo?.option_index || 0;
logic.value.relation_question_cell_index = optionInfo?.parent_question_index || 0;
logic.value.cell_type = optionInfo?.type || 0;
}
};
const getOptions = (type) => {
// console.log(beforeQuesOptions);
let options = [];

55
src/views/Design/components/ActionCompoents/components/QuestionItemAction/QuestionBefore.vue
View File

@@ -182,18 +182,13 @@ import BeforeRate from './BeforComponent/BeforeRate.vue';
import BeforeMartrixRadio from './BeforComponent/BeforeMartrixRadio.vue';
import BeforeMartrixCheckbox from './BeforComponent/BeforeMartrixCheckbox.vue';
import BeforeMartrixComplation from './BeforComponent/BeforeMartrixComplation.vue';
import { ref } from 'vue';
import { ref, watch } from 'vue';
const props = defineProps({
activeQuestion: {
type: Object,
default: () => {
return {};
}
},
skipType: {
type: [Number, String],
default: ''
}
});
@@ -205,7 +200,10 @@ const questionsInfo = defineModel('questionsInfo', {
});
const logics = ref(questionsInfo.value.logics);
const questions = questionsInfo.value.questions;
const skipType = defineModel('skipType', {
type: [Number, String],
default: ''
});
// 变量为beforeList questions里面 获取activeQuestion 之前所有的题目
const questionIndex = questions.findIndex((item) => {
@@ -213,26 +211,28 @@ const questionIndex = questions.findIndex((item) => {
});
const changeEmpty = (log) => {
console.log(log);
if (log.is_answer === 0) {
log.option_index = 0;
}
};
// 当前题目与之前的列表
let beforeQuesOptions = [];
if (props.skipType === 0) {
beforeQuesOptions = questions.slice(0, questionIndex + 1).map((item) => {
let beforeQuesOptions = ref([]);
watch(
() => skipType.value,
() => {
if (skipType.value === 0) {
beforeQuesOptions.value = questions.slice(0, questionIndex + 1).map((item) => {
return {
...item,
label: item.title + ' ' + item.stem,
value: item.question_index
};
});
} else {
} else {
// 当前题目之前的列表
if (questionIndex > 0) {
beforeQuesOptions = questions.slice(0, questionIndex).map((item) => {
beforeQuesOptions.value = questions.slice(0, questionIndex).map((item) => {
return {
...item,
label: item.title + ' ' + item.stem,
@@ -240,7 +240,30 @@ if (props.skipType === 0) {
};
});
}
}
}
}
);
// if (props.skipType === 0) {
// beforeQuesOptions = questions.slice(0, questionIndex + 1).map((item) => {
// return {
// ...item,
// label: item.title + ' ' + item.stem,
// value: item.question_index
// };
// });
// } else {
// // 当前题目之前的列表
// if (questionIndex > 0) {
// beforeQuesOptions = questions.slice(0, questionIndex).map((item) => {
// return {
// ...item,
// label: item.title + ' ' + item.stem,
// value: item.question_index
// };
// });
// }
// }
// 跳转题目
const skipOption = [
@@ -303,7 +326,7 @@ const remoteLogic = (index) => {
const addLogicItem = (logIndex, item) => {
item.splice(logIndex + 1, 0, {
logic: 'and',
question_index: '',
question_index: null,
question_type: 0,
is_answer: 1,
operator: '',
@@ -343,7 +366,7 @@ const addLogic = () => {
};
// 获取题目类型
const getQuestionType = (value, log) => {
const question = beforeQuesOptions.filter((item) => item.question_index === value)[0];
const question = beforeQuesOptions.value.filter((item) => item.question_index === value)[0];
log.question_type = question.question_type;
};