feat[preview]: 单选题跳转异常

- 重新修改逻辑，和 web 端字段匹配
- 单选题答案解析和生成逻辑更改，答案类型变动

src/views/Survey/views/Preview/components/questions/PreviewChoice.vue

@@ -1,19 +1,14 @@
 <template>
-  <choice
-    v-model:answer="choiceValue"
-    :element="question"
-    :index="answerIndex"
-    :is-preview="true"
-    :errorMessage="question.error"
-  />
+  <choice v-model:answer="choiceValue" :element="question" :index="answerIndex" :is-preview="true"
+    :errorMessage="question.error" />
 </template>
 <script setup lang="ts">
 import { watch, ref, computed } from 'vue';
 import Choice from '@/views/Design/components/Questions/Choice.vue';
 
 type answerType = {
-  options: any[];
-  value: number;
+  options?: any[];
+  value: { [key: number]: number };
 };
 // // 预览新增 v-model
 const answer = defineModel<answerType>('answer', { default: undefined });
@@ -22,24 +17,45 @@ const answerIndex = computed(() => question.value.title);
 const question = defineModel<question>('question', { default: { config: { is_required: false } } });
 const list = defineModel<questionsList[]>('list', { default: [[]] });
 
-const choiceValue = ref<string>((answer.value?.value - 1).toString() ?? '0');
+const choiceValue = ref<string>('0');
 
 // 初始化数据，因为 preview 的数据源和 element 的数据源不相同， 所以需要配置一遍数据
 initData();
-function initData() {
+function initData () {
   question.value.options = list.value;
 }
+
 // // 预览新增 emit ['changeAnswer', 'previous', 'next']
 const emit = defineEmits(['update:element', 'changeAnswer', 'previous', 'next', 'update:element']);
 
+if (answer.value) {
+  parseAnswer();
+}
+/**
+ * 如果再次加载组件， 组件内已经有 answer. 那么开始解析答案
+ */
+function parseAnswer () {
+  for (const key in answer.value.value) {
+    choiceValue.value = (key);
+  }
+}
+
+/**
+ * 自动生成答案，伴随 answer 的变化
+ */
 watch(
   () => choiceValue.value,
   () => {
+    console.log(`choiceValue`, choiceValue.value);
     const res = {
-      options: list.value.flatMap((group) => group.options || []),
-      value: Number(choiceValue.value) + 1
+      // options: list.value.flatMap((group) => group.options || []),
+      value: {
+        [choiceValue.value]: 1
+      }
+      // value: choiceValue.value
     };
     answer.value = res;
+    console.log(`answer`, res);
     emit('changeAnswer', res);
   }
 );

src/views/Survey/views/Preview/js/logical.js

@@ -20,6 +20,7 @@ function optionHandle(questionIndex) {
       classOptAndrelateList.push(...l.options);
     }
   });
+  // 选项列表
   const optList = optAndrelateList.map((opt, oIndex) => {
     opt.option_index = oIndex + 1;
     return opt;
@@ -93,14 +94,43 @@ function quesHandle(answer, logChild) {
         );
       } else {
         const { optAndrelateList } = optionHandle(logChild.question_index);
+        // 旧的错误代码，处理 answer 有问题. pc 端夹带私货
+        // const postion = optAndrelateList.find((opt) => opt.option_key === key).option_index;
         // 拿到答题时选中的选项位置
-        const postion = optAndrelateList.find((opt) => opt.option_key === key).option_index;
+        const postion = optAndrelateList.find((opt) => {
+          /**
+           * todo: 旧的答案配置
+           * key : value。 value: 答案的索引 + 1.
+           * 答案格式 {
+           *   answer: {
+           *     value: 1,
+           *   }
+           * }
+           */
+          // return opt.option_key === answer[key];
+          /**
+           * todo: 新的答案配置
+           * key : 答案的索引 + 1.  value: 1
+           * 答案格式 {
+           *   answer: {
+           *     '1': 1
+           *   }
+           * }
+           */
+          //   遍历答案的key值
+          for (const _key in answer[key]) {
+            // _key 选中的答案
+            if (Number(_key) === Number(opt.option_key)) {
+              return true;
+            }
+          }
+        }).option_index;
         // 拿到配置的逻辑里选项的位置
         const logPostion = optAndrelateList.find(
           (opt) => opt.option_key === logChild.option_index
         ).option_index;
         // eslint-disable-next-line no-eval
-        status = eval(`${postion}${operatorHandle(logChild.operator)}${logPostion}`);
+        status = eval(`'${postion}'${operatorHandle(logChild.operator)}'${logPostion}'`);
       }
     });
     return status;