feat: preview 组件适配

- 适配多选题组件

src/views/Design/components/Questions/Choice.vue

@@ -19,7 +19,7 @@
       </contenteditable>
     </template>
     <template #input>
-      <template v-for="(item, optionIndex) in element.options" :key="item.id">
+      <template v-for="item /*optionIndex*/ in element.options" :key="item.id">
         <van-radio-group v-if="element.question_type === 1" v-model="choiceValue">
           <option-action
             :data="isPreview ? item.options : item"
@@ -61,7 +61,7 @@
 
         <van-checkbox-group v-if="element.question_type === 2" v-model="value" shape="square">
           <option-action
-            v-model:data="element.options[optionIndex]"
+            :data="isPreview ? item.options : item"
             handle=".moverQues"
             :active="active"
             :question="element"
@@ -102,13 +102,12 @@
 </template>
 <script setup>
 import OptionAction from '@/views/Design/components/ActionCompoents/OptionAction.vue';
-import { defineAsyncComponent, ref } from 'vue';
+import { defineAsyncComponent } from 'vue';
 
 // 是否是预览
 const isPreview = defineModel('isPreview', { default: false, type: Boolean });
 const choiceValue = defineModel('answer', { default: '1', type: String });
-
+const value = defineModel('checkboxAnswer', { default: [1, 2], type: Array });
-// console.log(`choiceValue.value`, choiceValue.value);
 
 const Contenteditable = defineAsyncComponent(() => import('@/components/contenteditable.vue'));
 defineProps({
@@ -121,6 +120,11 @@ defineProps({
     default: 0
   }
 });
+
+/**
+ *  题目
+ * @type {ModelRef<Object, string, Object, Object>}
+ */
 const element = defineModel('element', {
   type: Object,
   default: () => {
@@ -129,7 +133,6 @@ const element = defineModel('element', {
     };
   }
 });
-const value = ref([]);
 const emit = defineEmits(['update:element']);
 const emitValue = () => {
   emit('update:element', element.value);

src/views/Survey/views/Preview/Index.vue

@@ -114,23 +114,22 @@
           @next="next"
           @change-answer="onRelation($event, question)"
         />
-        <!--        &lt;!&ndash; 多选题 &ndash;&gt;-->
+        <!-- 多选题 -->
-        <!--        <q-checkbox-->
+        <preview-checkbox
-        <!--          v-else-if="question.question_type === 2"-->
+          v-else-if="question.question_type === 2"
-        <!--          :list="question.list"-->
+          v-model:answer="question.answer"
-        <!--          :config="question.config"-->
+          v-model:answerIndex="question.answerIndex"
-        <!--          v-model:answer="question.answer"-->
+          :list="question.list"
-        <!--          v-model:answerIndex="question.answerIndex"-->
+          :config="question.config"
-        <!--          :hideOptions="question.hideOptions"-->
+          :hideOptions="question.hideOptions"
-        <!--          @changeAnswer="onRelation($event, question)"-->
+          :stem="question.stem"
-        <!--          :stem="question.stem"-->
+          :answerSn="questionsData.answer.sn"
-        <!--          @previous="previous"-->
+          :answerSurveySn="questionsData.answer.survey_sn"
-        <!--          @next="next"-->
+          :question="question"
-        <!--          isMobile-->
+          @change-answer="onRelation($event, question)"
-        <!--          :answerSn="questionsData.answer.sn"-->
+          @previous="previous"
-        <!--          :answerSurveySn="questionsData.answer.survey_sn"-->
+          @next="next"
-        <!--          :question="question"-->
+        />
-        <!--        />-->
         <!--        &lt;!&ndash; 级联题 &ndash;&gt;-->
         <!--        <q-cascader-->
         <!--          v-else-if="question.question_type === 3"-->
@@ -540,6 +539,7 @@ import layout from '@/layouts/index.vue';
 
 // hooks file
 import icon from '@/assets/img/create-right-back.png';
+import PreviewCheckbox from '@/views/Survey/views/Preview/components/questions/PreviewCheckbox.vue';
 // scrollbar
 const scrollbar = useTemplateRef('scrollbar');
 const questionStore = useQuestionStore();
@@ -559,7 +559,7 @@ const {
   translatedText
 } = storeToRefs(questionStore);
 
-// console.log(`questionsData`, questionsData.value);
+// console.log(`questionsData`, questions.value);
 const props = defineProps({
   isTemplate: {
     type: Boolean,
@@ -597,13 +597,6 @@ async function getQuestions() {
   questionsData.value = data;
 }
 
-// 获取 DOM 的内容
-// function getDomString (htmlString) {
-//   if (typeof htmlString !== 'string') return;
-//   const match = htmlString.match(/<.*>(.*?)<\/.*>/);
-//   if (match) return match[1];
-// }
-
 // 上一页
 async function previous() {
   if (prevLoading.value || loading.value) {

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

@@ -0,0 +1,64 @@
+<template>
+  <choice
+    v-model:checkboxAnswer="choiceValue"
+    :element="question"
+    :index="answerIndex"
+    :is-preview="true"
+  />
+</template>
+<script setup lang="ts">
+import { watch, ref } from 'vue';
+import Choice from '@/views/Design/components/Questions/Choice.vue';
+
+type answerType = {
+  [key: string]: string;
+};
+
+/**
+ * answer 格式
+ * {
+ *   1:"1"
+ *   2:"1"
+ * }
+ */
+// 预览新增 v-model
+const answer = defineModel<answerType>('answer', { default: undefined });
+const answerIndex = defineModel<number>('answerIndex');
+// const stem = defineModel<string>('stem', { default: '' });
+const question = defineModel<question>('question', { default: { config: { is_required: false } } });
+// const list = defineModel<questionsList[]>('list', { default: [[]] });
+
+initData();
+function initData() {
+  if (question.value.list.length) {
+    question.value.options = question.value.list;
+    question.value.questions = question.value.list;
+  }
+  if (question.value.list.length) question.value.questions = question.value.list;
+}
+
+const choiceValue = ref<string[]>(parseAnswer(answer.value));
+
+// // 预览新增 emit ['changeAnswer', 'previous', 'next']
+const emit = defineEmits(['update:element', 'changeAnswer', 'previous', 'next', 'update:element']);
+
+/**
+ * 解析答案
+ */
+function parseAnswer(answer: answerType) {
+  if (!answer) return [];
+  return Object.keys(answer);
+}
+watch(
+  () => choiceValue.value,
+  () => {
+    const res: answerType = {};
+    choiceValue.value.forEach((key) => {
+      res[key] = '1';
+    });
+    answer.value = res;
+    console.log(res);
+    emit('changeAnswer', res);
+  }
+);
+</script>