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

- 在 BeforeMartrixCheckbox、BeforeMartrixComplation 和 BeforeMartrixRadio 组件中添加 changeHandle 函数
- 该函数在行和列选项变化时更新 logic 对象中的相关属性
- 优化 QuestionBefore 组件中的 beforeQuesOptions 生成逻辑
- 使用 watch 监听 skipType变化，动态更新 beforeQuesOptions
- 修复 addLogicItem 函数中 question_index 的初始值

src/views/Design/components/ActionCompoents/components/QuestionItemAction/BeforComponent/BeforeMartrixCheckbox.vue

@@ -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 = [];

src/views/Design/components/ActionCompoents/components/QuestionItemAction/BeforComponent/BeforeMartrixComplation.vue

@@ -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
-    <yl-select v-model="logic.cell_index" :options="getOptions('col')" class="ml10"></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>

src/views/Design/components/ActionCompoents/components/QuestionItemAction/BeforComponent/BeforeMartrixRadio.vue

@@ -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 = [];

src/views/Design/components/ActionCompoents/components/QuestionItemAction/QuestionBefore.vue

@@ -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,34 +211,59 @@ const questionIndex = questions.findIndex((item) => {
 });
 
 const changeEmpty = (log) => {
-  console.log(log);
   if (log.is_answer === 0) {
     log.option_index = 0;
   }
 };
 
 // 当前题目与之前的列表
-let beforeQuesOptions = [];
+let beforeQuesOptions = ref([]);
-if (props.skipType === 0) {
+watch(
-  beforeQuesOptions = questions.slice(0, questionIndex + 1).map((item) => {
+  () => skipType.value,
-    return {
+  () => {
-      ...item,
+    if (skipType.value === 0) {
-      label: item.title + ' ' + item.stem,
+      beforeQuesOptions.value = questions.slice(0, questionIndex + 1).map((item) => {
-      value: item.question_index
+        return {
-    };
+          ...item,
-  });
+          label: item.title + ' ' + item.stem,
-} else {
+          value: item.question_index
-  // 当前题目之前的列表
+        };
-  if (questionIndex > 0) {
+      });
-    beforeQuesOptions = questions.slice(0, questionIndex).map((item) => {
+    } else {
-      return {
+      // 当前题目之前的列表
-        ...item,
+      if (questionIndex > 0) {
-        label: item.title + ' ' + item.stem,
+        beforeQuesOptions.value = questions.slice(0, questionIndex).map((item) => {
-        value: item.question_index
+          return {
-      };
+            ...item,
-    });
+            label: item.title + ' ' + item.stem,
+            value: item.question_index
+          };
+        });
+      }
+    }
   }
-}
+);
+
+// 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;
 };