feat: 预览功能答题完成

- 预览组件功能完善
- 增加对应逻辑文件：
- 补全遗失字段
- 纠正 eslint 错误

components.d.ts

@@ -17,19 +17,14 @@ declare module 'vue' {
     VanCellGroup: typeof import('vant/es')['CellGroup']
     VanCheckbox: typeof import('vant/es')['Checkbox']
     VanCheckboxGroup: typeof import('vant/es')['CheckboxGroup']
-    VanCol: typeof import('vant/es')['Col']
     VanDivider: typeof import('vant/es')['Divider']
-    VanFeild: typeof import('vant/es')['Feild']
     VanField: typeof import('vant/es')['Field']
-    VanGrid: typeof import('vant/es')['Grid']
-    VanGridItem: typeof import('vant/es')['GridItem']
     VanIcon: typeof import('vant/es')['Icon']
     VanNavBar: typeof import('vant/es')['NavBar']
     VanPicker: typeof import('vant/es')['Picker']
     VanPopup: typeof import('vant/es')['Popup']
     VanRadio: typeof import('vant/es')['Radio']
     VanRadioGroup: typeof import('vant/es')['RadioGroup']
-    VanRow: typeof import('vant/es')['Row']
     VanSearch: typeof import('vant/es')['Search']
     VanStepper: typeof import('vant/es')['Stepper']
     VanSwitch: typeof import('vant/es')['Switch']

src/components/YLPicker.vue

@@ -170,8 +170,8 @@ const getMaxDateLimit = computed(() => {
     props.format
   );
   const tempStr = '0000-12-31 23:59:59';
-  const result =
+  const result
-    props.maxDate.length !== 0 && thisMax.length > props.maxDate.length
+    = props.maxDate.length !== 0 && thisMax.length > props.maxDate.length
       ? thisMax.slice(0, props.maxDate.length) + tempStr.slice(props.maxDate.length)
       : thisMax;
   return result.slice(0, props.format.length);
@@ -194,8 +194,8 @@ function onChange({ selectedValues, columnIndex }) {
     renderMinuteColumns,
     renderSecondColumns
   ];
-  updateColumns[columnIndex] &&
+  updateColumns[columnIndex]
-    updateColumns[columnIndex](changeValue, getMinDateLimit.value, getMaxDateLimit.value, false);
+    && updateColumns[columnIndex](changeValue, getMinDateLimit.value, getMaxDateLimit.value, false);
 }
 
 // 渲染全部列

src/layouts/index.vue

@@ -9,7 +9,12 @@
     <RouterView />
     <!-- tabbar -->
     <van-tabbar v-model="active">
-      <van-tabbar-item v-for="tab in table" :key="tab.title" :name="tab.title" @click="tabPath(tab.path)">
+      <van-tabbar-item
+        v-for="tab in table"
+        :key="tab.title"
+        :name="tab.title"
+        @click="tabPath(tab.path)"
+      >
         <!-- <van-tabbar-item v-for="tab in table" :key="tab.title" :name="tab.title" :to="tab.path"> -->
         <span>{{ tab.title }}</span>
         <!-- <template #icon="props"> -->
@@ -25,9 +30,9 @@
 <script setup>
 import { RouterView, useRouter } from 'vue-router';
 import { ref } from 'vue';
-import utils from '@/assets/js/common';
+// import utils from '@/assets/js/common';
-import { getUserInfo } from '@/api/common/index.js';
+// import { getUserInfo } from '@/api/common/index.js';
-import { showFailToast } from 'vant';
+// import { showFailToast } from 'vant';
 const router = useRouter();
 
 const active = ref();
@@ -55,8 +60,8 @@ const table = [
 ];
 function tabPath(path) {
   router.push({
-          path
+    path
-        });
+  });
   // if (utils.getParameter('digitalYiliToken')) {
   //   const appToken = utils.getParameter('digitalYiliToken');
   //   getUserInfo(appToken).then((res) => {

src/layouts/utils.js

@@ -1,7 +1,7 @@
 // import { getQuesByPages } from '@/views/planetDesign/Design/js/util';
 // import { A_COMMON_SET_ACTIVEQUESTION } from '@store/constance/constance.common'
-import { createVNode } from 'vue';
+// import { createVNode } from 'vue';
-import { showConfirmDialog, showDialog } from 'vant';
+import { showConfirmDialog } from 'vant';
 import { getQuestionList, getCheckSurvey } from '@/api/publish';
 // import store from '@/store';
 // import Scroll from '@views/planetDesign/Design/js/scroll'
@@ -36,7 +36,9 @@ function showModal(options) {
     .then(() => {
       confirm();
     })
-    .catch(() => {});
+    .catch(() => {
+      /**/
+    });
 }
 
 /**
@@ -137,7 +139,7 @@ const canPlanetPublish3D = function(data) {
               qSteams.push(`(${s.title})`);
             }
           } catch (error) {
-            console.warn(error);
+            // console.warn(error);
           }
         }
       });
@@ -165,11 +167,11 @@ const canPlanetPublish3D = function(data) {
           try {
             if (s.config.is_three_dimensions && s.config.is_binding_goods) {
               const wares = [];
-              const scene_information = s.config.scene_information;
+              const _sceneInformation = s.config.scene_information;
               const sceneInformation
-                = typeof scene_information === 'string'
+                = typeof _sceneInformation === 'string'
-                  ? JSON.parse(scene_information)
+                  ? JSON.parse(_sceneInformation)
-                  : scene_information;
+                  : _sceneInformation;
               sceneInformation.shelves.forEach((shelf) => {
                 shelf.wares.forEach((ware) => {
                   if (!ware.option_index) return;
@@ -179,7 +181,9 @@ const canPlanetPublish3D = function(data) {
 
               const options = s.options.flat();
               s.associate.forEach((ass) => {
-                const question = data.questions.find((q) => q.question_index == ass.question_index);
+                const question = data.questions.find(
+                  (q) => q.question_index === ass.question_index
+                );
                 if (!question) return;
                 options.push(...question.options.flat());
               });
@@ -193,7 +197,7 @@ const canPlanetPublish3D = function(data) {
               }
             }
           } catch (error) {
-            console.warn(error);
+            // console.warn(error);
           }
         }
       });
@@ -225,7 +229,7 @@ const canPlanetPublishImage = function(data) {
     let title = '';
     data.questions
       && data.questions.forEach((s) => {
-        if (s.question_type == 13) {
+        if (s.question_type === 13) {
           try {
             if (s.options.length <= 0 || s.options.some((y) => y.length <= 0)) {
               canFB = false;
@@ -297,7 +301,7 @@ function canPublishRandom(data, publishType) {
   const errors = [];
   const randomList = data?.survey?.group_pages || [];
 
-  randomList.forEach((random, randomIndex) => {
+  randomList.forEach((random /* randomIndex */) => {
     const list = random.list || [];
 
     // 每一个随机，至少要有两个随机题组
@@ -343,36 +347,36 @@ function canPublishRandom(data, publishType) {
  * @param data
  * @param publishType
  */
-function isLoopingLogicValid(data, publishType) {
+// function isLoopingLogicValid(data, publishType) {
-  const publishStr = ['', '预览', '投放'][publishType] || '投放';
+//   const publishStr = ['', '预览', '投放'][publishType] || '投放';
-
+//
-  if (
+//   if (
-    (data?.cycle_pages || []).every((i) => {
+//     (data?.cycle_pages || []).every((i) => {
-      return (
+//       return (
-        i.question_index
+//         i.question_index
-        && i.relation_type !== undefined
+//         && i.relation_type !== undefined
-        && i.relation_type !== null
+//         && i.relation_type !== null
-        && i.first_page
+//         && i.first_page
-        && i.last_page
+//         && i.last_page
-      );
+//       );
-    })
+//     })
-  ) {
+//   ) {
-    return loopingAvailable({
+//     return loopingAvailable({
-      cycles: data.cycle_pages || [],
+//       cycles: data.cycle_pages || [],
-      questions: getQuesByPages(data.questions || [], data.survey.pages),
+//       questions: getQuesByPages(data.questions || [], data.survey.pages),
-      logics: data.logics || [],
+//       logics: data.logics || [],
-      isPerPage: data.survey?.is_one_page_one_question
+//       isPerPage: data.survey?.is_one_page_one_question
-    });
+//     });
-  }
+//   }
-
+//
-  showDialog({
+//   showDialog({
-    class: 'custom-modal custom-modal-title-notice show-icon',
+//     class: 'custom-modal custom-modal-title-notice show-icon',
-    title: '修改循环',
+//     title: '修改循环',
-    content: `循环题组不完全，请前往循环列表修改后${publishStr}`
+//     content: `循环题组不完全，请前往循环列表修改后${publishStr}`
-  });
+//   });
-
+//
-  return false;
+//   return false;
-}
+// }
 
 export const canPlanetPublish = async function(sn, publishType) {
   const parsedPublishType = !publishType ? 2 : publishType;

src/stores/Questions/useQuestionStore.ts

@@ -24,6 +24,8 @@ export const useQuestionStore = defineStore('questionStore', () => {
     );
   });
 
+  // 答题之后的字段，应该是判断获取对应的字体
+  const translatedText = computed(() => questionsData.value.language || {});
   // 是否显示分页器
   const showPage = computed(() => {
     return ![102, 104, 105, 201].includes(questions.value[0]?.question_type);
@@ -39,6 +41,7 @@ export const useQuestionStore = defineStore('questionStore', () => {
     styleInfo,
     page,
     pages,
+    translatedText,
     l,
     themeColor,
     loading,
@@ -46,6 +49,5 @@ export const useQuestionStore = defineStore('questionStore', () => {
     localPageTimer,
     questions,
     showPage
-
   };
 });

src/utils/request.js

@@ -44,10 +44,10 @@ service.interceptors.request.use(
 service.interceptors.response.use(
   (response) => {
     if (
-      response.status === 200 ||
+      response.status === 200
-      response.status === 201 ||
+      || response.status === 201
-      response.status === 202 ||
+      || response.status === 202
-      response.status === 204
+      || response.status === 204
     ) {
       if (response.config.method === 'put') {
         // message.success('保存中...');

src/views/Design/components/ActionCompoents/QuestionAction.vue

@@ -253,8 +253,8 @@ const getSkipTypeText = (skipType) => {
   const ls = [];
   logics.map((item) => {
     if (
-      item.skip_type === skipType &&
+      item.skip_type === skipType
-      item.question_index === activeQuestion.value.question_index
+      && item.question_index === activeQuestion.value.question_index
     ) {
       ls.push(item);
     }
@@ -270,13 +270,13 @@ const getSkipTypeText = (skipType) => {
 
 const questionSetting = (type) => {
   switch (type) {
-    case 'before':
+  case 'before':
-      questionBeforeShow.value = true;
+    questionBeforeShow.value = true;
 
-      break;
+    break;
-    case 'after':
+  case 'after':
-      questionBeforeShow.value = true;
+    questionBeforeShow.value = true;
-      break;
+    break;
   }
   skipType.value = type === 'before' ? 1 : 0;
 };

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

@@ -126,7 +126,7 @@
 </template>
 <script setup>
 import { computed, defineEmits } from 'vue';
-import { saveQuestion } from '@/api/design/index.js';
+// import { saveQuestion } from '@/api/design/index.js';
 const props = defineProps({
   modelValue: {
     type: Object,

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

@@ -21,14 +21,14 @@ const { element } = toRefs(props);
  */
 const tableInputTypeMapping = (/** regx?: any */) => {
   switch (element.value.question_type) {
-    case 8:
+  case 8:
-      return 'text';
+    return 'text';
-    case 9:
+  case 9:
-      return 'radio';
+    return 'radio';
-    case 10:
+  case 10:
-      return 'checkbox';
+    return 'checkbox';
-    default:
+  default:
-      return 'radio';
+    return 'radio';
   }
 };
 

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

@@ -23,14 +23,14 @@ const matrixAnswer = ref({
  */
 const tableInputTypeMapping = (/** regx?: any */) => {
   switch (element.question_type) {
-    case 8:
+  case 8:
-      return 'text';
+    return 'text';
-    case 9:
+  case 9:
-      return 'radio';
+    return 'radio';
-    case 10:
+  case 10:
-      return 'checkbox';
+    return 'checkbox';
-    default:
+  default:
-      return 'radio';
+    return 'radio';
   }
 };
 
@@ -67,55 +67,55 @@ function handleColNameChange(rowOption: string, colOption: string, e: any) {
 
   // 不同的 question_type 的 matrix 问卷处理不同的结果
   switch (element.question_type) {
-    case 8: {
+  case 8: {
-      // 获取输入框元素
+    // 获取输入框元素
-      const inputElement = e.target as HTMLInputElement;
+    const inputElement = e.target as HTMLInputElement;
-      // 如果没有获取到输入框元素，则直接返回
+    // 如果没有获取到输入框元素，则直接返回
-      if (!inputElement) return;
+    if (!inputElement) return;
-      // 将输入框的值保存到 rowRecord 对应位置
+    // 将输入框的值保存到 rowRecord 对应位置
-      rowRecord[col] = e!.target!.value;
+    rowRecord[col] = e!.target!.value;
-      // 清空 matrixAnswer 的 answer 属性
+    // 清空 matrixAnswer 的 answer 属性
-      matrixAnswer.value.answer = {};
+    matrixAnswer.value.answer = {};
-      // 遍历所有行选项
+    // 遍历所有行选项
-      element.options[0].forEach((_, rowIndex) => {
+    element.options[0].forEach((_, rowIndex) => {
-        // 获取当前行记录
+      // 获取当前行记录
-        const colOptions = rowRecord[rowIndex];
+      const colOptions = rowRecord[rowIndex];
-        // 如果当前行有记录，则更新 matrixAnswer 的 answer 属性
+      // 如果当前行有记录，则更新 matrixAnswer 的 answer 属性
-        if (colOptions) {
+      if (colOptions) {
-          matrixAnswer.value.answer[`R${rowIndex + 1}_C${col + 1}`] = colOptions;
+        matrixAnswer.value.answer[`R${rowIndex + 1}_C${col + 1}`] = colOptions;
-        }
+      }
-      });
+    });
-      break;
+    break;
-    }
+  }
-    case 9:
+  case 9:
-      // 将选择的行索引加1后保存到 rowRecord 对应位置
+    // 将选择的行索引加1后保存到 rowRecord 对应位置
-      rowRecord[col] = row + 1;
+    rowRecord[col] = row + 1;
-      // 清空 matrixAnswer 的 answer 属性
+    // 清空 matrixAnswer 的 answer 属性
-      matrixAnswer.value.answer = {};
+    matrixAnswer.value.answer = {};
-      // 遍历 rowRecord，更新 matrixAnswer 的 answer 属性
+    // 遍历 rowRecord，更新 matrixAnswer 的 answer 属性
-      rowRecord.forEach((row, index) => {
+    rowRecord.forEach((row, index) => {
-        matrixAnswer.value.answer[`${index + 1}_${row}`] = 1;
+      matrixAnswer.value.answer[`${index + 1}_${row}`] = 1;
-      });
+    });
-      break;
+    break;
-    case 10:
+  case 10:
-      // 将选择的行索引加1后添加到 rowRecord 对应位置的数组中
+    // 将选择的行索引加1后添加到 rowRecord 对应位置的数组中
-      rowRecord[col] = (rowRecord[col] || []).concat(row + 1);
+    rowRecord[col] = (rowRecord[col] || []).concat(row + 1);
-      // 清空 matrixAnswer 的 answer 属性
+    // 清空 matrixAnswer 的 answer 属性
-      matrixAnswer.value.answer = {};
+    matrixAnswer.value.answer = {};
-      // 遍历所有行选项
+    // 遍历所有行选项
-      element.options[0].forEach((rowOption, rowIndex) => {
+    element.options[0].forEach((rowOption, rowIndex) => {
-        // 获取当前行记录
+      // 获取当前行记录
-        const colOptions = rowRecord[rowIndex];
+      const colOptions = rowRecord[rowIndex];
-        // 如果当前行有记录，则更新 matrixAnswer 的 answer 属性
+      // 如果当前行有记录，则更新 matrixAnswer 的 answer 属性
-        if (colOptions) {
+      if (colOptions) {
-          colOptions.forEach((col: any) => {
+        colOptions.forEach((col: any) => {
-            matrixAnswer.value.answer[`R${rowIndex + 1}_C${col}`] = true;
+          matrixAnswer.value.answer[`R${rowIndex + 1}_C${col}`] = true;
-          });
+        });
-        }
+      }
-      });
+    });
-      break;
+    break;
-    default:
+  default:
-      break;
+    break;
   }
 }
 </script>

src/views/Design/components/Questions/types/martrix.d.ts

@@ -180,30 +180,7 @@ type LogicConfig = {
  * @property {string} planet_id - 行星 ID（通常为空字符串）
  * @property {any | null} permissions - 权限信息（通常为 null）
  */
-type MatrixSurveyQuestion = {
+type MatrixSurveyQuestion = question;
-  id: string;
-  title: string;
-  stem: string;
-  other?: string;
-  question_index?: number;
-  question_type?: number;
-  config?: Config;
-  created_at?: string;
-  created_user_id?: number;
-  updated_user_id?: number | null;
-  survey_id?: number;
-  logic_config?: LogicConfig;
-  options: [Option[], Option[]];
-  associate?: any[];
-  logics_has?: string | null;
-  last_option_index?: number;
-  question_code?: string;
-  question_value?: string;
-  question_tag?: string;
-  planet_id?: string;
-  permissions?: any | null;
-};
-
 /**
  * 矩阵调查类型
  * @property {MatrixSurveyQuestion} question - 矩阵调查问题

src/views/Design/components/Questions/types/question.d.ts

@@ -0,0 +1,62 @@
+interface OptionConfigType {
+  type?: number;
+  price?: number;
+  title?: string;
+  gradient?: string;
+  image_url?: string[];
+  child_area?: null;
+  option_type?: number;
+  instructions?: string[];
+  binding_goods_id?: string;
+  limit_right_content?: string;
+}
+
+interface OptionType {
+  option?: string; // 包含 HTML 标签的字符串，例如 "<p>选项1</p>"
+  is_other?: number;
+  is_fixed?: number;
+  is_remove_other?: number;
+  level?: number;
+  option_key?: string;
+  option_index?: string;
+  option_code?: string;
+  option_config?: OptionConfigType;
+  parent_option_index?: number;
+  children?: null;
+}
+
+type questionsList = {
+  type: number;
+  cite_type: number;
+  relation_type: number;
+  relation_out_scope: number[];
+  relation_last_scope: number;
+  relation_first_scope: number;
+  relation_question_index: number;
+  options?: OptionType[];
+};
+
+type question = {
+  id?: string;
+  title?: string;
+  stem?: string;
+  other?: string;
+  list: questionsList[][];
+  question_index?: number;
+  question_type?: number;
+  config?: Config;
+  created_at?: string;
+  created_user_id?: number;
+  updated_user_id?: number | null;
+  survey_id?: number;
+  logic_config?: LogicConfig;
+  options: questionsList[];
+  associate?: any[];
+  logics_has?: string | null;
+  last_option_index?: number;
+  question_code?: string;
+  question_value?: string;
+  question_tag?: string;
+  planet_id?: string;
+  permissions?: any | null;
+};

src/views/Home/Index.vue

@@ -3,9 +3,9 @@ import LastSurvey from './components/LastSurvey/Index.vue';
 import Market from './components/Market/Index.vue';
 import CreateSurvey from './components/CreateSurvey/Index.vue';
 import { onMounted, ref } from 'vue';
-import utils from '@/assets/js/common';
+// import utils from '@/assets/js/common';
-import { getUserInfo } from '@/api/common/index.js';
+// import { getUserInfo } from '@/api/common/index.js';
-import { showFailToast } from 'vant';
+// import { showFailToast } from 'vant';
 const contentShow = ref(false);
 onMounted(async() => {
   contentShow.value = true;

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

@@ -1,8 +1,9 @@
 <template>
   <div ref="scrollbar" class="container">
-    <van-nav-bar :title="getDomString(questionsData?.survey?.title)" left-arrow />
+    <van-nav-bar title="预览" left-arrow />
+    <!--    <van-nav-bar :title="getDomString(questionsData?.survey?.title)" left-arrow />-->
 
-    <!-- 进度条 -->
+    <!--     进度条 -->
     <div v-if="styleInfo.is_progress" class="progress-bar">
       <progress-bar :percent="(page / (pages.length + 1)) * 100" :color="styleInfo.button_color" />
     </div>
@@ -11,7 +12,13 @@
     <!--    <img v-if="styleInfo.head_img_status && styleInfo.head_img_url" width="100%" class="head-img"-->
     <!--         :src="styleInfo.head_img_url" />-->
     <!-- LOGO -->
-    <van-cell-group> </van-cell-group>
+    <van-cell-group v-if="page !== 0 && page !== pages.length + 1">
+      <van-cell-group>
+        <van-field :label="getDomString(questionsData?.survey?.title)" label-align="top">
+          <template #input>{{ getDomString(questionsData?.survey?.introduction) }}</template>
+        </van-field>
+      </van-cell-group>
+    </van-cell-group>
     <div
       v-if="styleInfo.logo_status && styleInfo.logo_url"
       class="example-logo"
@@ -83,23 +90,36 @@
         isMobile
         :isAnswer="isAnswer"
       >
+        <!--        <q-radio-->
+        <!--          v-if="question.question_type === 1"-->
+        <!--          :list="question.list"-->
+        <!--          :config="question.config"-->
+        <!--          v-model:answer="question.answer"-->
+        <!--          v-model:answerIndex="question.answerIndex"-->
+        <!--          :hideOptions="question.hideOptions"-->
+        <!--          :stem="question.stem"-->
+        <!--          @previous="previous"-->
+        <!--          @next="next"-->
+        <!--          :answerSn="questionsData.answer.sn"-->
+        <!--          :answerSurveySn="questionsData.answer.survey_sn"-->
+        <!--          :question="question"-->
+        <!--        />-->
         <!-- 单选题 -->
-        <!--              <q-radio-->
+        <preview-choice
-        <!--                v-if="question.question_type === 1"-->
+          v-if="question.question_type === 1"
-        <!--                :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"
-        <!--                isMobile-->
+          :answerSn="questionsData.answer.sn"
-        <!--                :stem="question.stem"-->
+          :answerSurveySn="questionsData.answer.survey_sn"
-        <!--                @previous="previous"-->
+          :question="question"
-        <!--                @next="next"-->
+          @previous="previous"
-        <!--                :answerSn="questionsData.answer.sn"-->
+          @next="next"
-        <!--                :answerSurveySn="questionsData.answer.survey_sn"-->
+          @change-answer="onRelation($event, question)"
-        <!--                :question="question"-->
+        />
-        <!--              />-->
         <!--        &lt;!&ndash; 多选题 &ndash;&gt;-->
         <!--        <q-checkbox-->
         <!--          v-else-if="question.question_type === 2"-->
@@ -126,19 +146,19 @@
         <!--          v-model:answer="question.answer"-->
         <!--          isMobile-->
         <!--        />-->
-        <!--        &lt;!&ndash; 填空题 &ndash;&gt;-->
+        <!-- 填空题 -->
-        <!--        <q-input-->
+        <preview-completion
-        <!--          v-else-if="question.question_type === 4"-->
+          v-else-if="question.question_type === 4"
-        <!--          :config="question.config"-->
+          :config="question.config"
-        <!--          v-model:answer="question.answer"-->
+          :answer="question.answer"
-        <!--          :stem="question.stem"-->
+          :stem="question.stem"
-        <!--          isMobile-->
+          :answerSn="questionsData.answer.sn"
-        <!--          @previous="previous"-->
+          :answerSurveySn="questionsData.answer.survey_sn"
-        <!--          @next="next"-->
+          :question="question"
-        <!--          :answerSn="questionsData.answer.sn"-->
+          @previous="previous"
-        <!--          :answerSurveySn="questionsData.answer.survey_sn"-->
+          @next="next"
-        <!--          :question="question"-->
+          @change-answer="onRelation($event, question)"
-        <!--        />-->
+        />
         <!--        &lt;!&ndash; 打分题 &ndash;&gt;-->
         <!--        <q-rate-->
         <!--          v-else-if="question.question_type === 5"-->
@@ -170,43 +190,42 @@
         <!--          v-model:answer="question.answer"-->
         <!--          isMobile-->
         <!--        />-->
-        <!--        &lt;!&ndash; 矩阵填空题 &ndash;&gt;-->
+        <!-- 矩阵填空题 -->
-        <!--        <matrix-input-->
+        <preview-matrix-text
-        <!--          v-else-if="question.question_type === 8"-->
+          v-else-if="question.question_type === 8"
-        <!--          :list="question.list"-->
+          v-model:answer="question.answer"
-        <!--          :config="question.config"-->
+          :list="question.list"
-        <!--          v-model:answer="question.answer"-->
+          :config="question.config"
-        <!--          isMobile-->
+          :stem="question.stem"
-        <!--          :stem="question.stem"-->
+          :question="question"
-        <!--          @previous="previous"-->
+          @previous="previous"
-        <!--          @next="next"-->
+          @next="next"
-        <!--          :question="question"-->
+          @change-answer="onRelation($event, question)"
-        <!--        />-->
+        />
-        <!--        &lt;!&ndash; 矩阵单选题 &ndash;&gt;-->
+        <!-- 矩阵单选题 -->
-        <!--        <matrix-radio-->
+        <preview-matrix-radio
-        <!--          v-else-if="question.question_type === 9"-->
+          v-else-if="question.question_type === 9"
-        <!--          :list="question.list"-->
+          v-model:answer="question.answer"
-        <!--          :config="question.config"-->
+          :list="question.list"
-        <!--          v-model:answer="question.answer"-->
+          :config="question.config"
-        <!--          @changeAnswer="onRelation($event, question)"-->
+          :stem="question.stem"
-        <!--          isMobile-->
+          :answerSn="questionsData.answer.sn"
-        <!--          :stem="question.stem"-->
+          :answerSurveySn="questionsData.answer.survey_sn"
-        <!--          @previous="previous"-->
+          :question="question"
-        <!--          @next="next"-->
+          @change-answer="onRelation($event, question)"
-        <!--          :answerSn="questionsData.answer.sn"-->
+          @previous="previous"
-        <!--          :answerSurveySn="questionsData.answer.survey_sn"-->
+          @next="next"
-        <!--          :question="question"-->
+        />
-        <!--        />-->
+        <!-- 矩阵多选题 -->
-        <!--        &lt;!&ndash; 矩阵多选题 &ndash;&gt;-->
+        <preview-matrix-checkbox
-        <!--        <matrix-check-->
+          v-else-if="question.question_type === 10"
-        <!--          v-else-if="question.question_type === 10"-->
+          v-model:answer="question.answer"
-        <!--          :list="question.list"-->
+          :list="question.list"
-        <!--          :config="question.config"-->
+          :config="question.config"
-        <!--          :question="question"-->
+          :question="question"
-        <!--          v-model:answer="question.answer"-->
+          isMobile
-        <!--          @changeAnswer="onRelation($event, question)"-->
+          @change-answer="onRelation($event, question)"
-        <!--          isMobile-->
+        />
-        <!--        />-->
         <!--        &lt;!&ndash; 矩阵打分题 &ndash;&gt;-->
         <!--        <matrix-rate-->
         <!--          v-else-if="question.question_type === 11"-->
@@ -273,14 +292,15 @@
         <!--          @changeAnswer="onRelation($event, question)"-->
         <!--          isMobile-->
         <!--        />-->
-        <!--        &lt;!&ndash; 文件上传题 &ndash;&gt;-->
+        <!-- 文件上传题 -->
-        <!--        <q-upload-->
+        <preview-file-upload
-        <!--          v-else-if="question.question_type === 18"-->
+          v-else-if="question.question_type === 18"
-        <!--          :config="question.config"-->
+          v-model:answer="question.answer"
-        <!--          :question="question"-->
+          :config="question.config"
-        <!--          v-model:answer="question.answer"-->
+          :question="question"
-        <!--          isMobile-->
+          isMobile
-        <!--        />-->
+          @change-answer="onRelation($event, question)"
+        />
         <!--        &lt;!&ndash; 地理位置题 &ndash;&gt;-->
         <!--        <q-map-->
         <!--          v-else-if="question.question_type === 19"-->
@@ -439,25 +459,25 @@
         <!--          :question="question"-->
         <!--        />-->
         <!--        &lt;!&ndash; 高级题型-NPS &ndash;&gt;-->
-        <!--        <QNPS-->
+        <preview-n-p-s
-        <!--          v-else-if="question.question_type === 106"-->
+          v-else-if="question.question_type === 106"
-        <!--          :title="question.title"-->
+          v-model:answer="question.answer"
-        <!--          :stem="question.stem"-->
+          :isPreview="true"
-        <!--          :list="question.list"-->
+          :title="question.title"
-        <!--          :config="question.config"-->
+          :stem="question.stem"
-        <!--          :isAnswer="isAnswer"-->
+          :list="question.list"
-        <!--          :questionIndex="question.question_index"-->
+          :config="question.config"
-        <!--          :label="question.title"-->
+          :isAnswer="isAnswer"
-        <!--          v-model:answer="question.answer"-->
+          :questionIndex="question.question_index"
-        <!--          :loading="loading"-->
+          :label="question.title"
-        <!--          :isTemplate="isTemplate"-->
+          :loading="loading"
-        <!--          :showTitle="styleInfo.is_question_number"-->
+          :isTemplate="isTemplate"
-        <!--          :question="question"-->
+          :showTitle="styleInfo.is_question_number"
-        <!--          isMobile-->
+          :question="question"
-        <!--          @previous="previous"-->
+          @previous="previous"
-        <!--          @next="next"-->
+          @next="next"
-        <!--          @changeAnswer="onRelation($event, question)"-->
+          @change-answer="onRelation($event, question)"
-        <!--        />-->
+        />
       </question>
       <!-- 分页 -->
       <div v-show="showPage" class="footer-page">
@@ -509,17 +529,26 @@ import { storeToRefs } from 'pinia';
 import { useQuestionStore } from '@/stores/Questions/useQuestionStore';
 import ProgressBar from './components/ProcessBar/Index.vue';
 import { AnswerApi } from './js/api';
-import { useRoute } from 'vue-router';
+import { useRoute, useRouter } from 'vue-router';
 import { getLanguage } from '@/views/Survey/views/Preview/js/language';
+import PreviewChoice from './components/questions/PreviewChoice.vue';
+// import QRadio from '@/views/Survey/views/Preview/components/questions/QRadio.vue';
+import PreviewCompletion from '@/views/Survey/views/Preview/components/questions/PreviewCompletion.vue';
+import PreviewFileUpload from '@/views/Survey/views/Preview/components/questions/PreviewFileUpload.vue';
+import PreviewMatrixRadio from '@/views/Survey/views/Preview/components/questions/PreviewMatrixRadio.vue';
+import PreviewMatrixCheckbox from '@/views/Survey/views/Preview/components/questions/PreviewMatrixCheckbox.vue';
+import PreviewMatrixText from '@/views/Survey/views/Preview/components/questions/PreviewMatrixText.vue';
+import PreviewNPS from '@/views/Survey/views/Preview/components/questions/PreviewNPS.vue';
+import msg from './js/message';
+import answerMock from '@/views/Survey/views/Preview/js/mock.js';
 
-// export default defineComponent({
+// const isPreview = ref(true);
-//   components: { LangTranslate },
-//   ...questions
-// });
-
 // scrollbar
 const scrollbar = useTemplateRef('scrollbar');
 const questionStore = useQuestionStore();
+// route
+const route = useRoute();
+const router = useRouter();
 const {
   questionsData,
   styleInfo,
@@ -530,9 +559,11 @@ const {
   loading,
   prevLoading,
   localPageTimer,
-  questions
+  questions,
+  translatedText
 } = storeToRefs(questionStore);
 
+// console.log(`questionsData`, questionsData.value);
 const props = defineProps({
   isTemplate: {
     type: Boolean,
@@ -540,7 +571,7 @@ const props = defineProps({
   },
   isAnswer: {
     type: Boolean,
-    default: true
+    default: false
   }
 });
 
@@ -549,7 +580,6 @@ getQuestions();
 
 // 更新数据
 async function getQuestions() {
-  const route = useRoute();
   let { data } = await AnswerApi.getQuetions({
     id: route.query.sn,
     data: {
@@ -559,14 +589,14 @@ async function getQuestions() {
     }
   });
   data = data.data;
-  console.log(`response data: `, data);
+  // console.log(`response data: `, data);
   // 多语言
   data.languageType = [
     data?.survey?.style?.is_en_tips ? 'en' : '',
     data?.survey?.style?.is_cn_tips ? 'zh' : ''
   ].filter((i) => !!i);
   l.value = getLanguage(data.languageType);
-  console.log(`l value:`, l.value);
+  // console.log(`l value:`, l.value);
   data.language = l.value;
   questionsData.value = data;
 }
@@ -608,22 +638,34 @@ async function next(callbackBeforePage) {
   }
   answer((jumpPage) => {
     if (jumpPage?.question_page) {
+      // console.log(`jumpPage?.question_page`, jumpPage?.question_page);
       page.value = jumpPage.question_page;
     } else {
       page.value += 1;
     }
     scrollbar.value.scrollTop = 0;
-    jumpImmediately(); // 如果有结束跳转，则判断是否需要立即跳转
+    // 如果有结束跳转，则判断是否需要立即跳转
+    jumpImmediately();
   }, callbackBeforePage);
 }
 
 // 开始答题
+// 答题
 async function answer(callback, callbackBeforePage) {
-  if ((questions.value.length || !questionsData.value.questions.length) && !props.isTemplate) {
+  // console.log(`start input answer`);
+  // console.log(
+  //   `(questions.value.length || !questionsData.value.questions.length)`,
+  //   questions.value.length || !questionsData.value.questions.length
+  // );
+  // console.log(`--------------------------------------`);
+  // console.log(props.isTemplate);
+  if (questions.value.length || (!questionsData.value.questions.length && props.isTemplate)) {
+    // console.log(`表单验证(当前页)`);
     // 表单验证(当前页)
     const errors = questions.value.filter((question) => {
       const { config, answer, question_type: questionType } = question;
       let isError = false;
+      // console.log(`config.is_required && !answer`, config.is_required && !answer);
       if (config.is_required && !answer) {
         isError = true;
         if (questionType === 10) {
@@ -791,7 +833,7 @@ async function answer(callback, callbackBeforePage) {
           }
           isError = true;
         }
-        console.log('===', minSelect, Object.keys(answer), answer, perLineSelectedCount);
+        // console.log('===', minSelect, Object.keys(answer), answer, perLineSelectedCount);
       } else if (answer && questionType === 12) {
         question.error = '';
       } else if (answer && questionType === 14 && Object.keys(answer).length < config.min_select) {
@@ -847,7 +889,8 @@ async function answer(callback, callbackBeforePage) {
               ) || !newValue.length;
           question.error = isError ? translatedText.value.PleaseEnterChineseWords : '';
           break;
-        case 5: // 邮箱
+          // 邮箱
+        case 5:
           isError
               = !/^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(
               value
@@ -975,93 +1018,94 @@ async function answer(callback, callbackBeforePage) {
           });
         });
       }
-      // // 质量控制(选择题)
+      // 质量控制(选择题)
-      // const allPages = pages.value.flatMap((currentPages) => currentPages);
+      const allPages = pages.value.flatMap((currentPages) => currentPages);
-      // const allQuestions = allPages.map((questionIndex) => {
+      const allQuestions = allPages.map((questionIndex) => {
-      //   return questionsData.value.questions.find(
+        return questionsData.value.questions.find(
-      //     (question) => question.question_index === questionIndex
+          (question) => question.question_index === questionIndex
-      //   );
+        );
-      // });
+      });
-      // const repeat = questionsData.value.survey.repeat_list?.find((repeat) =>
+      const repeat = questionsData.value.survey.repeat_list?.find((repeat) =>
-      //   repeat.question_indexes.find(({ first_index: firstIndex, last_index: lastIndex }) => {
+        repeat.question_indexes.find(({ first_index: firstIndex /*, last_index: lastIndex */ }) => {
-      //     const firstIndex = allPages.findIndex((questionIndex) => questionIndex === firstIndex);
+          const _firstIndex = allPages.findIndex((questionIndex) => questionIndex === firstIndex);
-      //     const lastIndex = allPages.findIndex((questionIndex) => questionIndex === lastIndex);
+          const _lastIndex = allPages.findIndex((questionIndex) => questionIndex === _lastIndex);
-      //     const currentQuestions = allQuestions
+          const currentQuestions = allQuestions
-      //       .slice(firstIndex, lastIndex + 1)
+            .slice(_firstIndex, _lastIndex + 1)
-      //       .filter((currentQuestions) => currentQuestions.question_type === repeat.question_type);
+            .filter((currentQuestions) => currentQuestions.question_type === repeat.question_type);
-      //     const answerIndexes = currentQuestions.map((question) => question.answerIndex);
+          const answerIndexes = currentQuestions.map((question) => question.answerIndex);
-      //     return hasNConsecutiveNumbers(
+          return hasNConsecutiveNumbers(
-      //       answerIndexes,
+            answerIndexes,
-      //       repeat.allow_repeat_num + 1,
+            repeat.allow_repeat_num + 1,
-      //       (warnStart, warnEnd) => {
+            (warnStart, warnEnd) => {
-      //         currentQuestions.forEach((question, index) => {
+              currentQuestions.forEach((question, index) => {
-      //           if (index >= warnStart && index < warnEnd) {
+                if (index >= warnStart && index < warnEnd) {
-      //             if (repeat.repeat_type) {
+                  if (repeat.repeat_type) {
-      //               question.warning
+                    question.warning
-      //                 = translatedText.value.TheAnswerIsRepeatedMoreThanOneTimesPleaseRevise(
+                      = translatedText.value.TheAnswerIsRepeatedMoreThanOneTimesPleaseRevise(
-      //                   repeat.allow_repeat_num,
+                        repeat.allow_repeat_num,
-      //                   repeat.repeat_type
+                        repeat.repeat_type
-      //                 );
+                      );
-      //             } else {
+                  } else {
-      //               question.error
+                    question.error
-      //                 = translatedText.value.TheAnswerIsRepeatedMoreThanOneTimesPleaseRevise(
+                      = translatedText.value.TheAnswerIsRepeatedMoreThanOneTimesPleaseRevise(
-      //                   repeat.allow_repeat_num,
+                        repeat.allow_repeat_num,
-      //                   repeat.repeat_type
+                        repeat.repeat_type
-      //                 );
+                      );
-      //             }
+                  }
-      //           } else {
+                } else {
-      //             question.warning = '';
+                  question.warning = '';
-      //             question.error = '';
+                  question.error = '';
-      //           }
+                }
-      //         });
+              });
-      //       },
+            },
-      //       () => {
+            () => {
-      //         currentQuestions.forEach((question) => {
+              currentQuestions.forEach((question) => {
-      //           question.warning = '';
+                question.warning = '';
-      //         });
+              });
-      //       }
+            }
-      //     );
+          );
-      //   })
+        })
-      // );
+      );
-      // if (repeat) {
+      if (repeat) {
-      //   await new Promise((resolve) => {
+        await new Promise((resolve) => {
-      //     Modal[repeat.repeat_type ? 'confirm' : 'info']({
+          Modal[repeat.repeat_type ? 'confirm' : 'info']({
-      //       class: 'custom-modal custom-modal-title-notice',
+            class: 'custom-modal custom-modal-title-notice',
-      //       title: translatedText.value.PleaseAnswerCarefully,
+            title: translatedText.value.PleaseAnswerCarefully,
-      //       content: repeat.alert_text,
+            content: repeat.alert_text,
-      //       cancelText: translatedText.value.ContinueAnswer,
+            cancelText: translatedText.value.ContinueAnswer,
-      //       okText: translatedText.value.ReviseAnswer,
+            okText: translatedText.value.ReviseAnswer,
-      //       onCancel: () => {
+            onCancel: () => {
-      //         questions.value.forEach((question) => (question.answerIndex = ''));
+              questions.value.forEach((question) => (question.answerIndex = ''));
-      //         resolve();
+              resolve();
-      //       }
+            }
-      //     });
+          });
-      //   });
+        });
-      // }
+      }
-      // // 判断是作答还是预览
+      // 判断是作答还是预览
-      // if (!props.isAnswer) {
+      // console.log(`判断是作答还是预览`, !props.isAnswer);
-      //   loading.value = true;
+      if (!props.isAnswer) {
-      //   try {
+        loading.value = true;
-      //     // 模拟接口
+        try {
-      //     const data = answerMock(questionsData.value, page.value);
+          // 模拟接口
-      //     console.log('模拟作答数据', data);
+          const data = answerMock(questionsData.value, page.value);
-      //     // 更新答案
+          console.log('模拟作答数据', data);
-      //     updateAnswer(data.answer_info_autofill);
+          // 更新答案
-      //     // 更新分页数组
+          updateAnswer(data.answer_info_autofill);
-      //     questionsData.value.answer.pages = data.pages;
+          // 更新分页数组
-      //     // 选项隐藏
+          questionsData.value.answer.pages = data.pages;
-      //     hideOptions(data.hide_options);
+          // 选项隐藏
-      //     // 更新action
+          hideOptions(data.hide_options);
-      //     questionsData.value.action = data.action;
+          // 更新action
-      //     if ([20004, 20011, 20016].includes(data.action.code)) {
+          questionsData.value.action = data.action;
-      //       return (page.value = pages.value.length + 1);
+          if ([20004, 20011, 20016].includes(data.action.code)) {
-      //     }
+            return (page.value = pages.value.length + 1);
-      //     callback(data.jump_to);
+          }
-      //   } catch (error) {
+          callback(data.jump_to);
-      //     console.log(error);
+        } catch (error) {
-      //   }
+          console.log(error);
-      //   return (loading.value = false);
+        }
-      // }
+        return (loading.value = false);
+      }
       // 表单验证通过，开始答题
       const cycle = [];
       const questionsAnswer = [];
@@ -1090,11 +1134,11 @@ async function answer(callback, callbackBeforePage) {
       try {
         if (callbackBeforePage) await callbackBeforePage();
         const { data } = await AnswerApi.answer({
-          id: proxy.$route.query.sn,
+          id: route.query.sn,
           data: {
             cycle,
             answer: JSON.stringify(questionsAnswer),
-            is_test: proxy.$route.query.is_test
+            is_test: route.query.is_test
           }
         });
         // 更新答案
@@ -1117,13 +1161,13 @@ async function answer(callback, callbackBeforePage) {
         if (data.action.lottery) {
           const endAnswerTime = new Date().getTime();
           const answerTime = endAnswerTime - startAnswerTime;
-          proxy.$router.push({
+          router.push({
             path: '/luck',
             query: {
-              user_id: proxy.$route.query.sn,
+              user_id: route.query.sn,
               id: questionsData.value.answer.sn,
               time_num: parseInt(answerTime / 1000),
-              is_test: proxy.$route.query.is_test || 0
+              is_test: route.query.is_test || 0
             }
           });
         }
@@ -1136,12 +1180,12 @@ async function answer(callback, callbackBeforePage) {
         if (props.isAnswer && questionsData.value.survey.is_breakpoint) {
           if (data.action.code === 20010) {
             const questionsCache = JSON.parse(localStorage.getItem('questionsCache')) || {};
-            questionsCache[proxy.$route.query.sn] = questionsData.value.questions;
+            questionsCache[route.query.sn] = questionsData.value.questions;
             localStorage.setItem('questionsCache', JSON.stringify(questionsCache));
           } else {
             const questionsCache = JSON.parse(localStorage.getItem('questionsCache'));
-            if (questionsCache?.[proxy.$route.query.sn]) {
+            if (questionsCache?.[route.query.sn]) {
-              delete questionsCache[proxy.$route.query.sn];
+              delete questionsCache[route.query.sn];
               localStorage.setItem('questionsCache', JSON.stringify(questionsCache));
             }
           }
@@ -1169,9 +1213,46 @@ async function answer(callback, callbackBeforePage) {
   }
 }
 
+// 选项隐藏
+function hideOptions(hide) {
+  const questionIndex = hide?.question_index;
+  if (questionIndex) {
+    const qustion = questionsData.value.questions.find(
+      (qustion) => qustion.question_index === questionIndex
+    );
+    qustion.hideOptions = hide.option_key || [];
+  }
+}
+
+// 更新答案
+function updateAnswer(auto) {
+  if (auto) {
+    auto.forEach((autoItem) => {
+      const question = questionsData.value.questions.find(
+        (question) => question.question_index === autoItem.question_index
+      );
+      question.answer = JSON.parse(autoItem.answer);
+
+      // 隐藏的题目，自动填写时，并被后续题目关联选项，会出现关联选项未正确展示的情况，此暂时解决方法
+      const evt1 = {};
+
+      if ([1].includes(question.question_type)) {
+        evt1.value
+          = Object.keys(question.answer)
+            .map((key) => (question.answer[key] ? key : undefined))
+            .filter((i) => !!i)?.[0] || undefined;
+        evt1.options = question.list.flatMap((i) => i.options);
+        onRelation(evt1, question);
+      }
+    });
+  }
+}
+
 // 如果有结束跳转，则判断是否需要立即跳转
 function jumpImmediately() {
+  // 2000
   const code = questionsData.value.action?.code;
+  // 检测是否是最后一页
   if (page.value !== pages.value.length + 1 && ![20004, 20011, 20016].includes(code)) {
     return;
   }
@@ -1199,10 +1280,10 @@ function jumpImmediately() {
     url = url.replaceAll('#sn#', questionsData.value.answer.sn);
     url = url.replaceAll('#user#', questionsData.value.answer.respondent);
     url = url.replaceAll('#survey_sn#', questionsData.value.answer.survey_sn);
-    if (proxy.$route.query.source === 'YILI_APP_WANGYI') {
+    if (route.query.source === 'YILI_APP_WANGYI') {
-      Object.keys(proxy.$route.query).forEach((key) => {
+      Object.keys(route.query).forEach((key) => {
         if (!['sn', 'source', 'is_template', 'channelUCode'].includes(key)) {
-          url += `${url.indexOf('?') === -1 ? '?' : '&'}${key}=${proxy.$route.query[key]}`;
+          url += `${url.indexOf('?') === -1 ? '?' : '&'}${key}=${route.query[key]}`;
         }
       });
     }
@@ -1222,120 +1303,120 @@ function jumpImmediately() {
 }
 
 // // 关联引用
-// function onRelation(
+function onRelation(
-//   { options, value, list },
+  { options, value, list },
-//   { question_type: questionType, question_index, related, answer }
+  { question_type: questionType, question_index: questionIndex, related, answer }
-// ) {
+) {
-//   // 关联
+  // 关联
-//   related.forEach((relationItem) => {
+  related.forEach((relationItem) => {
-//     let relationOptions = [];
+    let relationOptions = [];
-//     if (questionType === 9 || questionType === 10) {
+    if (questionType === 9 || questionType === 10) {
-//       // 矩阵选择
+      // 矩阵选择
-//       list.forEach((item) => {
+      list.forEach((item) => {
-//         if (item.type === relationItem.cite_type) {
+        if (item.type === relationItem.cite_type) {
-//           relationOptions = [...relationOptions, ...item.options];
+          relationOptions = [...relationOptions, ...item.options];
-//         }
+        }
-//         if (relationItem.relation_type === 1) {
+        if (relationItem.relation_type === 1) {
-//           relationOptions = relationOptions.filter((option) =>
+          relationOptions = relationOptions.filter((option) =>
-//             questionType === 9 ? option.value : option.value?.length
+            questionType === 9 ? option.value : option.value?.length
-//           );
+          );
-//         } else if (relationItem.relation_type === 2) {
+        } else if (relationItem.relation_type === 2) {
-//           relationOptions = relationOptions.filter((option) =>
+          relationOptions = relationOptions.filter((option) =>
-//             questionType === 9 ? !option.value : !option.value?.length
+            questionType === 9 ? !option.value : !option.value?.length
-//           );
+          );
-//         }
+        }
-//       });
+      });
-//     } else if (questionType === 11) {
+    } else if (questionType === 11) {
-//       // 矩阵打分
+      // 矩阵打分
-//       list.forEach((item) => {
+      list.forEach((item) => {
-//         if (item.type === relationItem.cite_type) {
+        if (item.type === relationItem.cite_type) {
-//           relationOptions = [...relationOptions, ...item.options];
+          relationOptions = [...relationOptions, ...item.options];
-//         }
+        }
-//       });
+      });
-//     } else if (questionType === 25 || questionType === 26) {
+    } else if (questionType === 25 || questionType === 26) {
-//       // 热区题
+      // 热区题
-//       relationOptions = options.filter((option) => {
+      relationOptions = options.filter((option) => {
-//         if (relationItem.relation_type === 1) {
+        if (relationItem.relation_type === 1) {
-//           return option.status === 1;
+          return option.status === 1;
-//         } else if (relationItem.relation_type === 2) {
+        } else if (relationItem.relation_type === 2) {
-//           return option.status === 2;
+          return option.status === 2;
-//         } else if (relationItem.relation_type === 3) {
+        } else if (relationItem.relation_type === 3) {
-//           return !option.status;
+          return !option.status;
-//         }
+        }
-//         return true;
+        return true;
-//       });
+      });
-//     } else if (questionType === 105) {
+    } else if (questionType === 105) {
-//       // MXD
+      // MXD
-//       options.forEach((currentOptions) => {
+      options.forEach((currentOptions) => {
-//         currentOptions.forEach((option) => {
+        currentOptions.forEach((option) => {
-//           const index = relationOptions.findIndex(
+          const index = relationOptions.findIndex(
-//             (relationOption) => relationOption.option_key === option.option_key
+            (relationOption) => relationOption.option_key === option.option_key
-//           );
+          );
-//           if (index === -1) {
+          if (index === -1) {
-//             // 全部项
+            // 全部项
-//             if (relationItem.relation_type === 0) {
+            if (relationItem.relation_type === 0) {
-//               return relationOptions.push(option);
+              return relationOptions.push(option);
-//             }
+            }
-//             // 高相关
+            // 高相关
-//             if (relationItem.relation_type === 3) {
+            if (relationItem.relation_type === 3) {
-//               return option.value === 'b' && relationOptions.push(option);
+              return option.value === 'b' && relationOptions.push(option);
-//             }
+            }
-//             // 不相关
+            // 不相关
-//             if (relationItem.relation_type === 4) {
+            if (relationItem.relation_type === 4) {
-//               return option.value === 'w' && relationOptions.push(option);
+              return option.value === 'w' && relationOptions.push(option);
-//             }
+            }
-//           }
+          }
-//         });
+        });
-//       });
+      });
-//     } else if (relationItem.relation_type === 0) {
+    } else if (relationItem.relation_type === 0) {
-//       // 全部选项
+      // 全部选项
-//       relationOptions = options;
+      relationOptions = options;
-//     } else {
+    } else {
-//       // 过滤选中/未选中选项
+      // 过滤选中/未选中选项
-//       relationOptions = options.filter((option) => {
+      relationOptions = options.filter((option) => {
-//         if (questionType === 1) {
+        if (questionType === 1) {
-//           // 单选
+          // 单选
-//           if (relationItem.relation_type === 1) return value === option.option_key;
+          if (relationItem.relation_type === 1) return value === option.option_key;
-//           return value !== option.option_key;
+          return value !== option.option_key;
-//         } else if (questionType === 2) {
+        } else if (questionType === 2) {
-//           // 多选
+          // 多选
-//           if (relationItem.relation_type === 1) return value.includes(option.option_key);
+          if (relationItem.relation_type === 1) return value.includes(option.option_key);
-//           return !value.includes(option.option_key);
+          return !value.includes(option.option_key);
-//         }
+        }
-//         return true;
+        return true;
-//       });
+      });
-//     }
+    }
-//     // 找到关联题
+    // 找到关联题
-//     const question = questionsData.value.questions.find(
+    const question = questionsData.value.questions.find(
-//       (question) => question.question_index === relationItem.relation_question_index
+      (question) => question.question_index === relationItem.relation_question_index
-//     );
+    );
-//     // 深拷贝关联选项
+    // 深拷贝关联选项
-//     const copyRelationOptions = JSON.parse(JSON.stringify(relationOptions));
+    const copyRelationOptions = JSON.parse(JSON.stringify(relationOptions));
-//     // 更新关联选项key
+    // 更新关联选项key
-//     copyRelationOptions.forEach((option) => {
+    copyRelationOptions.forEach((option) => {
-//       if (option.option_key[0] !== 'Q') {
+      if (option.option_key[0] !== 'Q') {
-//         let letter = 'A';
+        let letter = 'A';
-//         // 矩阵题行、列
+        // 矩阵题行、列
-//         if (questionType >= 9 && questionType <= 11) {
+        if (questionType >= 9 && questionType <= 11) {
-//           letter = relationItem.cite_type === 1 ? 'R' : 'C';
+          letter = relationItem.cite_type === 1 ? 'R' : 'C';
-//         }
+        }
-//         option.option_key = `Q${question_index}${letter}${option.option_key}`;
+        option.option_key = `Q${questionIndex}${letter}${option.option_key}`;
-//       }
+      }
-//       // 其他项特殊处理
+      // 其他项特殊处理
-//       if (option.is_other && option.value) {
+      if (option.is_other && option.value) {
-//         option.is_other = 0;
+        option.is_other = 0;
-//         option.option = option.value;
+        option.option = option.value;
-//       }
+      }
-//       delete option.value;
+      delete option.value;
-//       delete option.status;
+      delete option.status;
-//     });
+    });
-//     // 更新关联题列表
+    // 更新关联题列表
-//     const relatedList = question.list.find(
+    const relatedList = question.list.find(
-//       (relatedListItem) => relatedListItem.relation_question_index === question_index
+      (relatedListItem) => relatedListItem.relation_question_index === questionIndex
-//     );
+    );
-//     relatedList.options = answer ? copyRelationOptions : [];
+    relatedList.options = answer ? copyRelationOptions : [];
-//   });
+  });
-// }
+}
 </script>
 <style lang="scss" scoped>
 .main {

src/views/Survey/views/Preview/components/AnswerViewer.vue

@@ -172,7 +172,7 @@ export default defineComponent({
       this.scene = JSON.parse(res.data?.scene_information);
     }
 
-    console.log('scene', this.scene);
+    // console.log('scene', this.scene);
 
     this.shopData = buildShopDataDemo(this.scene);
     this.$refs.SceneSurveyViewer.init();
@@ -186,7 +186,7 @@ export default defineComponent({
   },
   methods: {
     next() {
-      console.log(this.pager.activate);
+      // console.log(this.pager.activate);
       if (!this.pager.activate) {
         return;
       }
@@ -316,7 +316,7 @@ export default defineComponent({
           shelve_planet_id: data[0].shelfId,
           action_info: data
         }
-      }).catch((e) => console.error(e));
+      }).catch(/* (e) => console.error(e) */);
     }
   }
 });

src/views/Survey/views/Preview/components/AnswerViewerPrefetch.vue

@@ -73,7 +73,7 @@ export default {
           this.surveyId = target.config.scene;
           this.$refs.SceneSurveyViewer.init();
         } catch (e) {
-          console.warn(e);
+          // console.warn(e);
         }
       },
       deep: true,
@@ -106,7 +106,7 @@ export default {
           shelves: this.shopData.shelves
         };
       } catch (e) {
-        console.warn(e);
+        // console.warn(e);
       }
     }
   }

src/views/Survey/views/Preview/components/LangTranslate.vue

@@ -30,7 +30,7 @@ const text = computed(() => {
     return [];
   }
 
-  console.log(data);
+  // console.log(data.value);
   const style = data.value.survey?.style || {};
   const styleTypes = data.value.languageType
     ? data.value.languageType

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

@@ -1,27 +1,26 @@
 <template>
   <div class="pagination-mob">
     <!-- mob端 -->
-    <a-spin
+    <div v-show="showPrevious && page > min && page < pages">
-      v-show="showPrevious && page > min && page < pages"
-      :spinning="prevLoading"
-      wrapperClassName="spin prev-spin"
-    >
       <div
         class="pfe-button btn previous my-btn"
         :style="`color: ${buttonTextColor};background-color: ${buttonColor}`"
         @click="previous"
       >
         <i class="iconfont">&#xe67f;</i>
+        <span>preview button</span>
         <span>{{ prevButtonText }}</span>
       </div>
-    </a-spin>
+    </div>
-    <a-spin v-show="page < pages" :spinning="loading" wrapperClassName="spin">
+    <div v-show="page < pages">
       <div
         class="pfe-button btn next my-btn"
         :class="nextDisabled ? 'disabled' : ''"
         :style="`color: ${buttonTextColor};background-color: ${buttonColor}`"
         @click="next"
       >
+        <span>start button</span>
+
         <span>{{
           showStart && page === 0
             ? startText
@@ -31,7 +30,7 @@
         }}</span>
         <i v-show="page + 1 !== pages" class="iconfont">&#xe670;</i>
       </div>
-    </a-spin>
+    </div>
   </div>
 </template>
 
@@ -126,6 +125,7 @@ export default defineComponent({
       () => questionsData.value?.survey?.style?.next_button_text || '下一页'
     );
 
+    // console.log(`prevButtonText name:`, prevButtonText.value, nextButtonText.value);
     // 上一页
     function previous() {
       if (props.page > props.min) {

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

@@ -0,0 +1,374 @@
+<template>
+  <van-field
+    v-model="stem"
+    :label="element.stem"
+    :required="element.config.is_required === 1"
+    label-align="top"
+    class="base-select"
+  >
+    <template #label>
+      <contenteditable v-model="element.stem" :active="active" @blur="emitValue"></contenteditable>
+    </template>
+    <template #input>
+      <template v-for="listItem in list" :key="listItem.options">
+        <template v-for="(option, optionIndex) in listItem.options" :key="option.option">
+          <!--     单选题     -->
+          <van-radio-group v-if="question?.question_type === 1" v-model="choiceValue">
+            <van-radio :name="optionIndex">{{ getDomText(option.option!) }}</van-radio>
+          </van-radio-group>
+          <!--   多选题       -->
+          <van-checkbox-group
+            v-else-if="question!.question_type! === 2"
+            v-model="choiceValue"
+            shape="square"
+          >
+            <van-checkbox :name="optionIndex">{{ getDomText(option.option!) }}</van-checkbox>
+          </van-checkbox-group>
+        </template>
+      </template>
+    </template>
+  </van-field>
+</template>
+<script setup lang="ts">
+import { defineAsyncComponent, ref, watch } from 'vue';
+import { getDomText } from '@/utils/utils';
+
+// // 预览新增 v-model
+const answer = defineModel('answer');
+// const answerIndex = defineModel('answerIndex');
+const stem = defineModel('stem');
+const question = defineModel<question>('question', {});
+const list = defineModel<questionsList[]>('list');
+
+// // 预览新增 emit ['changeAnswer', 'previous', 'next']
+const emit = defineEmits(['update:element', 'changeAnswer', 'previous', 'next', 'update:element']);
+
+// 用戶選擇的答案
+const choiceValue = ref(answer.value?.value - 1 ?? undefined);
+const Contenteditable = defineAsyncComponent(() => import('@/components/contenteditable.vue'));
+
+// console.log(`choice question.value:`, question.value);
+watch(choiceValue, () => {
+  answer.value = {
+    options: list.value.flatMap((group) => group.options || []),
+    value: choiceValue.value + 1
+  };
+  // console.log(answer.value);
+
+  // 需要在 question 里面附加 answer 信息
+  // question.value[`answer`] =
+  emit('changeAnswer', {
+    options: list.value.flatMap((group) => group.options || []),
+    value: choiceValue.value + 1
+  });
+});
+// console.log(`question:`, question.value);
+// console.log(`list: `, list.value);
+// const props = defineProps({
+//   // 预览新增 props
+//   config: {
+//     type: Object,
+//     default: () => {
+//       return {};
+//     }
+//   },
+//   hideOptions: {
+//     type: Object,
+//     default: () => {
+//       return {};
+//     }
+//   },
+//   answerSn: {
+//     type: String,
+//     default: ''
+//   },
+//   answerSurveySn: {
+//     type: String,
+//     default: ''
+//   },
+//   // 原先 props
+//   element: {
+//     type: Object,
+//     default: () => {
+//       return {
+//         config: {
+//           is_required: undefined
+//         }
+//       };
+//     }
+//   },
+//   active: {
+//     type: Boolean,
+//     default: false
+//   },
+//   index: {
+//     type: Number,
+//     default: 0
+//   }
+// });
+
+// initData();
+//
+// function initData() {
+//   // 当预览时， 某些数据可能不存在
+//   // 若 element有些数据不存在， 默认去 props 里面 取值
+//   !props.element.stem && (props.element.stem = stem.value);
+//
+//   !props.element.options && (props.element.stem = stem.value);
+// }
+
+// console.log(`props.element`, props.element);
+// console.log(`props.question: `, question.value);
+// const { element } = toRefs(props);
+
+const emitValue = () => {
+  // emit('update:element', element.value);
+};
+
+// const value = ref(''); // 值
+// const options = ref([]); // 选项
+// const optionGroups = ref([]); // 分组
+//
+// console.log(`radio input question: `, props.question);
+//
+// // 初始化
+// function init() {
+//   props.list.forEach((list) => {
+//     options.value = [...options.value, ...list.options];
+//   });
+//   if (props.answer) {
+//     value.value = Object.keys(props.answer)[0];
+//     options.value.forEach((option) => {
+//       if (option.is_other && option.option_key === value.value) {
+//         option.value = props.answer[value.value];
+//       }
+//     });
+//   }
+// }
+//
+// init();
+//
+// // 选项分组
+// function setOptionGroups() {
+//   optionGroups.value = [];
+//   const copyOptions = JSON.parse(JSON.stringify(options.value));
+//   props.config.option_groups?.option_group.forEach((optionGroup) => {
+//     const group = {
+//       title: optionGroup.title,
+//       options: []
+//     };
+//     optionGroup.groups.forEach((groups) => {
+//       const index = copyOptions.findIndex((option) => option.option_key === groups.option_key);
+//       if (index === -1) return;
+//       group.options.push(copyOptions.splice(index, 1)[0]);
+//     });
+//     group.options = sortOptions(
+//       group.options,
+//       props.question.config.select_random && props.question.config.option_group_random_inside
+//     );
+//     optionGroups.value.push(group);
+//   });
+//   optionGroups.value = sortOptions(
+//     optionGroups.value,
+//     props.question.config.select_random && props.question.config.option_group_random_outside
+//   );
+//   // 若是 group 是undefined ，默认给一个空对象
+//   const group = optionGroups.value.find((group) => !group.title) ?? {};
+//   // console.log(group);
+//   group.options = sortOptions(copyOptions, props.question.config.select_random);
+// }
+//
+// // 排序(固定项和其他项不参与随机)
+// function sortOptions(oldOptions, isRandom) {
+//   const sorts = [];
+//   const fixed = [];
+//   const others = [];
+//   const removeOther = [];
+//   oldOptions.forEach((option) => {
+//     if (option.is_remove_other) {
+//       removeOther.push(option);
+//     } else if (option.is_other) {
+//       others.push(option);
+//     } else if (option.is_fixed) {
+//       fixed.push(option);
+//     } else {
+//       sorts.push(option);
+//     }
+//   });
+//   return [...randomOptions(sorts, isRandom), ...fixed, ...others, ...removeOther];
+// }
+//
+// // 选择回调
+// function changeValue(e) {
+//   // 更新答案
+//   const option = options.value.find((option) => option.option_key === e.target.value);
+//   context.emit('update:answer', {
+//     [e.target.value]: option.value || (option.is_other ? '' : '1')
+//   });
+//   // 清空未选中项输入框值
+//   options.value.forEach((option) => {
+//     if (option.is_other && option.option_key !== e.target.value) {
+//       option.value = '';
+//     }
+//   });
+// }
+//
+// function onChangeValue(key) {
+//   value.value = key;
+//   changeValue({ target: { value: key } });
+// }
+//
+// // 输入回调
+// function changeInput(e, key) {
+//   const option = options.value.find((option) => option.option_key === key);
+//   option.value = e.target.value;
+//   value.value = key;
+//   // 更新答案
+//   context.emit('update:answer', { [key]: e.target.value });
+// }
+//
+// // 监听答案
+// watch(
+//   () => props.answer,
+//   () => {
+//     context.emit('changeAnswer', {
+//       options: optionGroups.value.flatMap((group) => group.options || []),
+//       value: value.value
+//     });
+//     // 质量控制
+//     const timer = setTimeout(() => {
+//       if (value.value) {
+//         const index = optionGroups.value
+//           .flatMap((group) => group.options.map((option) => option))
+//           .findIndex((option) => option.option_key === value.value);
+//         context.emit('update:answerIndex', `${index}`);
+//       } else if (props.answerIndex) {
+//         context.emit('update:answerIndex', '');
+//       }
+//       clearTimeout(timer);
+//     });
+//   },
+//   {
+//     deep: true,
+//     immediate: true
+//   }
+// );
+//
+// // 监听list，更新关联选项
+// watch(
+//   () => props.list,
+//   () => {
+//     // 更新关联题选项
+//     let newOptions = [];
+//     props.list.forEach((list) => {
+//       newOptions = [...newOptions, ...list.options];
+//     });
+//     // 其他项
+//     newOptions.forEach((option) => {
+//       if (option.is_other && option.option_key === value.value) {
+//         const timer = setTimeout(() => {
+//           option.value = props.answer[value.value];
+//           clearTimeout(timer);
+//         });
+//       }
+//     });
+//
+//     if (
+//       !compareArrayByField(options.value, newOptions, 'option_key') ||
+//       !compareArrayByField(options.value, newOptions, 'option')
+//     ) {
+//       options.value = newOptions;
+//     }
+//
+//     // 清空值和答案
+//     if (
+//       value.value &&
+//       options.value.findIndex((option) => option.option_key === value.value) === -1
+//     ) {
+//       // 清空值
+//       value.value = '';
+//       // 清空答案
+//       context.emit('update:answer', null);
+//     }
+//   },
+//   {
+//     deep: true
+//   }
+// );
+//
+// // 监听list，更新关联选项
+// watch(
+//   () => options.value,
+//   (val, oldVal) => {
+//     if (
+//       compareArrayByField(val, oldVal || [], 'option_key') &&
+//       compareArrayByField(val, oldVal || [], 'option')
+//     ) {
+//       return;
+//     }
+//     setOptionGroups();
+//   },
+//   {
+//     deep: true,
+//     immediate: true
+//   }
+// );
+//
+// const onHoldToCart = (target) => {
+//   value.value = target.option_key;
+//
+//   changeValue({
+//     target: {
+//       value: target.option_key
+//     }
+//   });
+// };
+//
+// const cartWaresLength = computed(() => {
+//   if (!props.answer) return 0;
+//   return Object.keys(props.answer).length;
+// });
+//
+// console.log(`car wares length:`, cartWaresLength.value);
+//
+// // 显示分组标题
+// function showGroupTitle(groupOptions) {
+//   const option = groupOptions.find((option) => !props.hideOptions.includes(option.option_key));
+//   return !!option;
+// }
+</script>
+<style scoped lang="scss">
+.choice-html {
+  width: 100%;
+}
+
+.base-select {
+  & .van-checkbox-group,
+  .van-radio-group {
+    width: 100%;
+
+    & .van-checkbox,
+    .van-radio {
+      width: 100%;
+
+      & ::v-deep .van-checkbox__label {
+        width: 100%;
+      }
+
+      & ::v-deep .van-radio__label {
+        width: 100%;
+      }
+    }
+  }
+
+  & .other-input {
+    width: 100px;
+    height: 20px;
+    margin-left: 20px;
+    padding: 3px 5px;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    outline: none;
+  }
+}
+</style>

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

@@ -0,0 +1,98 @@
+<template>
+  <van-field v-model="inputValue" v-focus placeholder="请输入内容"> </van-field>
+</template>
+<script setup lang="ts">
+import { defineEmits, ref, watch } from 'vue';
+import { vFocus } from '@/utils/directives/useVFocus';
+// 预览新增 v-model
+// const config = defineModel('config');
+const answer = defineModel<{ value: string | number }>('answer');
+// const answerIndex = defineModel('answerIndex');
+// const stem = defineModel('stem');
+const question = defineModel<question>('question', {});
+// const list = defineModel<questionsList[]>('list');
+// const answerSn = defineModel<string>('answerSn');
+// const answerSurveySn = defineModel<answerSurveySn>('answerSurveySn');
+// const modelValue = defineModel('modelValue');
+
+// // 预览新增 emit ['changeAnswer', 'previous', 'next']
+const emit = defineEmits(['previous', 'next', 'update:modelValue', 'saveOption', 'changeAnswer']);
+// console.log(answer);
+const inputValue = ref(answer.value?.value ?? '');
+// console.log(`question:`, question.value);
+// console.log(`list: `, list.value);
+
+// console.log(question.value);
+// 进行提交答案
+watch(inputValue, () => {
+  const res = {
+    value: inputValue.value
+  };
+
+  question.value.answer = res;
+  emit('changeAnswer', res);
+});
+
+// function handleKeyDown() {
+//   emit('changeAnswer', {
+//     options: list.value,
+//     value: inputValue.value + 1
+//   });
+// }
+
+// const props = defineProps({
+//   modelValue: {
+//     type: Object,
+//     required: false,
+//     default: () => {
+//       return {};
+//     }
+//   }
+// });
+
+// const selectTextTypeModel = ref(false);
+// const textTypeList = [
+//   {
+//     text: '不限',
+//     value: 0
+//   },
+//   {
+//     text: '整数',
+//     value: 1
+//   },
+//   {
+//     text: '小数',
+//     value: 2
+//   },
+//   {
+//     text: '字母',
+//     value: 3
+//   },
+//   {
+//     text: '中文',
+//     value: 4
+//   },
+//   {
+//     text: 'email',
+//     value: 5
+//   },
+//   {
+//     text: '手机号',
+//     value: 6
+//   },
+//   {
+//     text: '身份证号',
+//     value: 7
+//   }
+// ];
+
+// const selectText = (textType) => {
+//   return textTypeList.filter((item) => item.value === textType)[0]?.text;
+// };
+// const confirm = ({ selectedValues }) => {
+//   actionQuestion.value.config.text_type = Number(selectedValues[0]);
+//   selectTextTypeModel.value = false;
+//   emit('saveOption');
+// };
+</script>
+<style scoped lang="scss"></style>

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

@@ -0,0 +1,82 @@
+<script setup lang="ts">
+import { showSuccessToast, showFailToast } from 'vant';
+
+// const { element } = defineProps({
+//   element: {
+//     require: false
+//   }
+// });
+
+// const config = defineModel('question', { required: false });
+// console.log(config.value);
+/**
+ * 文件大小限制
+ * @property {number} max - 最大文件大小
+ * @property {number} min - 最小文件大小
+ */
+const fileLimit = {
+  // 默认4MB
+  max: 1024 * 1024 * 40,
+  min: 0
+};
+
+/**
+ * 上传文件
+ * @description 上传文件
+ */
+function handleFileUpload() {
+  const fileInput = document.createElement('input');
+  fileInput.type = 'file';
+  // fileInput.accept = '.jpg,.jpeg,.png,.gif';
+  // fileInput.multiple = true;
+  fileInput.click();
+
+  fileInput.addEventListener('change', handleFileChange);
+
+  function handleFileChange(event: Event) {
+    const files = (event.target as HTMLInputElement).files;
+    if (files) {
+      for (let i = 0; i < files.length; i++) {
+        const file = files[i];
+        // console.log(file.size);
+
+        if (file.size > fileLimit.max) {
+          showFailToast(`文件太大，超过${fileLimit.max / 1024 / 1024}MB`);
+          return;
+        } else if (file.size < fileLimit.min) {
+          showFailToast(`文件太小，小于${fileLimit.min / 1024 / 1024}MB`);
+          return;
+        }
+      }
+
+      //   这里保留上传的区域
+
+      // 成功
+      showSuccessToast('成功文案');
+    }
+  }
+}
+</script>
+
+<template>
+  <van-field>
+    <template #input>
+      <div>
+        <div class="file-upload-label" @click="handleFileUpload">
+          <van-icon name="photo"></van-icon>
+          <span>上传文件</span>
+        </div>
+      </div>
+    </template>
+  </van-field>
+</template>
+
+<style lang="scss" scoped>
+.file-upload-label {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  width: 100%;
+  height: 50px;
+}
+</style>

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

@@ -0,0 +1,144 @@
+<template>
+  <table class="matrix-table">
+    <thead>
+      <tr>
+        <th></th>
+        <td v-for="col in columns" :key="col.option">
+          <!-- 编辑状态，单次点击出输入框，失焦后关闭 -->
+          <input
+            v-if="col.editor"
+            v-model="col.option"
+            v-focus
+            type="text"
+            @focusout="col.editor = false"
+            @click="handleRowNameChange(col.option!)"
+          />
+          <span v-else @click="handleRowNameChange(col.option!)" v-html="col.option" />
+        </td>
+      </tr>
+    </thead>
+    <tbody>
+      <tr v-for="(row, rowIndex) in rows" :key="rowIndex">
+        <th v-html="row.option" />
+        <td v-for="(col, colIndex) in columns" :key="colIndex">
+          <input
+            type="checkbox"
+            :value="`${rowIndex + 1}_${colIndex + 1}`"
+            :checked="isOptionChecked(rowIndex, colIndex)"
+            @change="handleColValueChange(row.option, col.option)"
+          />
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</template>
+
+<script setup lang="ts">
+import { vFocus } from '@/utils/directives/useVFocus';
+
+const rows = defineModel<OptionType[]>('rows', { required: false, default: [] });
+const columns = defineModel<OptionType[]>('columns', { required: false, default: [] });
+// const questionType = defineModel<number>('questionType', { required: false });
+// const matrixAnswer = defineModel<{ [key: string]: any }>('matrixAnswer', { required: false });
+const rowRecord = defineModel<number[]>('rowRecord', { required: false });
+
+// preview props
+// const stem = defineModel('stem');
+const list = defineModel<questionsList[]>('list', { required: false });
+// const config = defineModel<OptionConfigType>('config', { required: false });
+// const question = defineModel('question');
+// const answer = defineModel('answer');
+// const answerIndex = defineModel('answerIndex');
+// const answerSn = defineModel('answerSn');
+// const answerSurveySn = defineModel('answerSurveySn');
+
+initData();
+
+// 数据初始化
+function initData() {
+  if (!list.value) return;
+  console.log(list.value);
+  if (list.value[0].options.length >= 1) rows.value = list.value[0].options;
+  if (list.value[1].options.length >= 1) columns.value = list.value[1].options;
+
+  // 矩阵多选数组形式 [[1,2],[3]], 长度和 行数有关， 选中的位置跟里面的位置有关
+  rowRecord.value = new Array(rows.value.length).fill(new Array(columns.value.length).fill(0));
+}
+
+// console.log(`stem:`, stem.value);
+// console.log(`list:`, list.value);
+// console.log(`config:`, config.value);
+// console.log(`question:`, question.value);
+// console.log(`answer:`, answer.value);
+// console.log(`answerIndex:`, answerIndex.value);
+// console.log(`answerSn:`, answerSn.value);
+// console.log(`answerSurveySn:`, answerSurveySn.value);
+
+// rows.value && console.log(`matrix rows:`, rows.value);
+// columns.value && console.log(`matrix columns:`, columns.value);
+// columns.value && console.log(`matrix questionType:`, questionType.value);
+// columns.value && console.log(`matrix matrixAnswer:`, matrixAnswer.value);
+// columns.value && console.log(`matrix rowRecord:`, rowRecord.value);
+
+/* const emits = */
+defineEmits(['update:matrixAnswer', 'update:rowRecord']);
+
+const isOptionChecked = (/* rowIndex: number, colIndex: number */): boolean => {
+  // const key = `R${rowIndex + 1}_C${colIndex + 1}`;
+  // console.log(key);
+  // return !!matrixAnswer.value[key];
+};
+
+const handleRowNameChange = (/* value: string */) => {
+  // console.log(`row change: ${value}`);
+  // 你可以在这里添加其他逻辑
+};
+
+const handleColValueChange = (rowOption: string, colOption: string) => {
+  // const target = e.target as HTMLInputElement;
+  // 寻找行列的索引
+  const col = columns.value.findIndex((option) => option.option === colOption);
+  const row = rows.value.findIndex((option) => option.option === rowOption);
+
+  // 此处的矩阵是由二维数组组成，两者是通过 索引和 索引对应的数值来表示
+  // rowRecord 是负责记录的数组
+  // 记录之后清空结果对象，遍历数组获取相应的结果内容给 matrixAnswer
+  // rowRecord.value[row] = col;
+  // matrixAnswer.value = {};
+  // rowRecord.value.forEach((row, col) => {
+  //   matrixAnswer.value[`${col + 1}_${row + 1}`] = 1;
+  // });
+
+  // 获取row行对应的数组
+  const rowArray = rowRecord.value[row];
+  // console.log(...rowRecord.value);
+  // console.log(`rowArray`, rowArray);
+  // 检查第 col 个元素
+  const value = rowArray[col];
+  if (value) {
+    // 若元素存在，则变动元素数值
+    rowArray[col] = 0;
+  } else {
+    // 不存在记录为1
+    rowArray[col] = 1;
+  }
+
+  // console.log(...rowRecord.value);
+  // emits('update:matrixAnswer', matrixAnswer.value);
+  // emits('update:rowRecord', rowRecord.value);
+};
+</script>
+
+<style scoped lang="scss">
+.matrix-table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.matrix-table th,
+.matrix-table td {
+  padding: 8px;
+  border: 1px solid #ddd;
+  text-align: center;
+}
+</style>

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

@@ -0,0 +1,129 @@
+<template>
+  <table class="matrix-table">
+    <thead>
+      <tr>
+        <th></th>
+        <!--   1 是行标签     -->
+        <td v-for="col in columns" :key="col.option">
+          <!-- 编辑状态，单次点击出输入框，失焦后关闭 -->
+          <input
+            v-if="col.editor"
+            v-model="col.option"
+            v-focus
+            type="text"
+            @focusout="col.editor = false"
+            @click="handleRowNameChange(col.option!)"
+          />
+          <span v-else @click="handleRowNameChange(col.option!)" v-html="col.option"></span>
+        </td>
+      </tr>
+    </thead>
+    <tbody>
+      <!--   0 是列标签     -->
+      <tr v-for="(row, rowIndex) in rows" :key="rowIndex">
+        <th v-html="row.option"></th>
+        <td v-for="(col, colIndex) in columns" :key="colIndex">
+          <input
+            type="radio"
+            :name="`R${rowIndex + 1}`"
+            :value="`${rowIndex + 1}_${colIndex + 1}`"
+            :checked="isOptionChecked(rowIndex, colIndex)"
+            @change="handleColValueChange(row.option, col.option, $event)"
+          />
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</template>
+
+<script setup lang="ts">
+import { vFocus } from '@/utils/directives/useVFocus';
+
+const rows = defineModel<OptionType[]>('rows', { required: false, default: [] });
+const columns = defineModel<OptionType[]>('columns', { required: false, default: [] });
+// const questionType = defineModel<number>('questionType', { required: false });
+const matrixAnswer = defineModel<{ [key: string]: any }>('matrixAnswer', { required: false });
+const rowRecord = defineModel<number[]>('rowRecord', { required: false });
+
+// preview props
+// const stem = defineModel('stem');
+const list = defineModel<questionsList[]>('list', { required: false });
+// const config = defineModel<OptionConfigType>('config', { required: false });
+// const question = defineModel('question');
+// const answer = defineModel('answer');
+// const answerIndex = defineModel('answerIndex');
+// const answerSn = defineModel('answerSn');
+// const answerSurveySn = defineModel('answerSurveySn');
+
+initData();
+// 数据初始化
+function initData() {
+  if (!list.value) return;
+  // console.log(list.value);
+  rows.value = list.value[0].options;
+  columns.value = list.value[1].options;
+
+  rowRecord.value = new Array(rows.value.length);
+}
+
+// console.log(`stem:`, stem.value);
+// console.log(`list:`, list.value);
+// console.log(`config:`, config.value);
+// console.log(`question:`, question.value);
+// console.log(`answer:`, answer.value);
+// console.log(`answerIndex:`, answerIndex.value);
+// console.log(`answerSn:`, answerSn.value);
+// console.log(`answerSurveySn:`, answerSurveySn.value);
+//
+// rows.value && console.log(`matrix rows:`, rows.value);
+// columns.value && console.log(`matrix columns:`, columns.value);
+// columns.value && console.log(`matrix questionType:`, questionType.value);
+// columns.value && console.log(`matrix matrixAnswer:`, matrixAnswer.value);
+// columns.value && console.log(`matrix rowRecord:`, rowRecord.value);
+
+/* const emits = */
+defineEmits(['update:matrixAnswer', 'update:rowRecord']);
+
+const isOptionChecked = (/* rowIndex: number, colIndex: number */): boolean => {
+  // const key = `R${rowIndex + 1}_C${colIndex + 1}`;
+  // console.log(key);
+  // return !!matrixAnswer.value[key];
+};
+
+const handleRowNameChange = (/* value: string */) => {
+  // console.log(`row change: ${value}`);
+  // 你可以在这里添加其他逻辑
+};
+
+const handleColValueChange = (rowOption: string, colOption: string) => {
+  // const target = e.target as HTMLInputElement;
+  // 寻找行列的索引
+  const col = columns.value.findIndex((option) => option.option === colOption);
+  const row = rows.value.findIndex((option) => option.option === rowOption);
+
+  // 此处的矩阵是由一维数组组成，两者是通过 索引和 索引对应的数值来表示
+  // rowRecord 是负责记录的数组
+  // 记录之后清空结果对象，遍历数组获取相应的结果内容给 matrixAnswer
+  rowRecord.value[row] = col;
+  matrixAnswer.value = {};
+  rowRecord.value.forEach((row, col) => {
+    matrixAnswer.value[`${col + 1}_${row + 1}`] = 1;
+  });
+  // emits('update:matrixAnswer', matrixAnswer.value);
+  // emits('update:rowRecord', rowRecord.value);
+};
+</script>
+
+<style scoped lang="scss">
+.matrix-table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.matrix-table th,
+.matrix-table td {
+  padding: 8px;
+  border: 1px solid #ddd;
+  text-align: center;
+}
+</style>

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

@@ -0,0 +1,121 @@
+<template>
+  <table class="matrix-table">
+    <thead>
+      <tr>
+        <th></th>
+        <td v-for="col in columns" :key="col.option">
+          <!-- 编辑状态，单次点击出输入框，失焦后关闭 -->
+          <input
+            v-if="col.editor"
+            v-model="col.option"
+            v-focus
+            type="text"
+            @focusout="col.editor = false"
+            @click="handleRowNameChange(col.option!)"
+          />
+          <span v-else @click="handleRowNameChange(col.option!)" v-html="col.option"></span>
+        </td>
+      </tr>
+    </thead>
+    <tbody>
+      <tr v-for="(row, rowIndex) in rows" :key="rowIndex">
+        <th v-html="row.option"></th>
+        <td v-for="(col, colIndex) in columns" :key="colIndex">
+          <input type="text" @change="handleColValueChange(rowIndex, colIndex, $event)" />
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</template>
+
+<script setup lang="ts">
+import { vFocus } from '@/utils/directives/useVFocus';
+
+const rows = defineModel<OptionType[]>('rows', { required: false, default: [] });
+const columns = defineModel<OptionType[]>('columns', { required: false, default: [] });
+// const questionType = defineModel<number>('questionType', { required: false });
+const matrixAnswer = defineModel<{ [key: string]: any }>('matrixAnswer', { required: false });
+const rowRecord = defineModel<number[]>('rowRecord', { required: false });
+
+// preview props
+// const stem = defineModel('stem');
+const list = defineModel<questionsList[]>('list', { required: false });
+// const config = defineModel<OptionConfigType>('config', { required: false });
+// const question = defineModel('question');
+// const answer = defineModel('answer');
+// const answerIndex = defineModel('answerIndex');
+// const answerSn = defineModel('answerSn');
+// const answerSurveySn = defineModel('answerSurveySn');
+
+initData();
+// 数据初始化
+function initData() {
+  if (!list.value) return;
+  // console.log(list.value);
+  rows.value = list.value[0].options;
+  columns.value = list.value[1].options;
+
+  rowRecord.value = new Array(rows.value.length);
+}
+
+// console.log(`stem:`, stem.value);
+// console.log(`list:`, list.value);
+// console.log(`config:`, config.value);
+// console.log(`question:`, question.value);
+// console.log(`answer:`, answer.value);
+// console.log(`answerIndex:`, answerIndex.value);
+// console.log(`answerSn:`, answerSn.value);
+// console.log(`answerSurveySn:`, answerSurveySn.value);
+//
+// rows.value && console.log(`matrix rows:`, rows.value);
+// columns.value && console.log(`matrix columns:`, columns.value);
+// columns.value && console.log(`matrix questionType:`, questionType.value);
+// columns.value && console.log(`matrix matrixAnswer:`, matrixAnswer.value);
+// columns.value && console.log(`matrix rowRecord:`, rowRecord.value);
+
+/* const emits = */
+defineEmits(['update:matrixAnswer', 'update:rowRecord']);
+
+// const isOptionChecked = (/*rowIndex: number, colIndex: number*/): boolean => {
+// const key = `R${rowIndex + 1}_C${colIndex + 1}`;
+// console.log(key);
+// return !!matrixAnswer.value[key];
+// };
+
+const handleRowNameChange = (/* value: string */) => {
+  // console.log(`row change: ${value}`);
+  // 你可以在这里添加其他逻辑
+};
+
+const handleColValueChange = (row: number, col: number) => {
+  // const target = e.target as HTMLInputElement;
+  // 寻找行列的索引
+  // const col = columns.value.findIndex((option) => option.option === colOption);
+  // const row = rows.value.findIndex((option) => option.option === rowOption);
+  // console.log(row, col);
+  // 此处的矩阵是由一维数组组成，两者是通过 索引和 索引对应的数值来表示
+  // rowRecord 是负责记录的数组
+  // 记录之后清空结果对象，遍历数组获取相应的结果内容给 matrixAnswer
+  rowRecord.value[row] = col;
+  matrixAnswer.value = {};
+  rowRecord.value.forEach((row, col) => {
+    matrixAnswer.value[`${col + 1}_${row + 1}`] = 1;
+  });
+  // emits('update:matrixAnswer', matrixAnswer.value);
+  // emits('update:rowRecord', rowRecord.value);
+};
+</script>
+
+<style scoped lang="scss">
+.matrix-table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.matrix-table th,
+.matrix-table td {
+  padding: 8px;
+  border: 1px solid #ddd;
+  text-align: center;
+}
+</style>

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

@@ -0,0 +1,72 @@
+<template>
+  <div class="content">
+    <van-field
+      v-model="stem"
+      :label="stem"
+      :required="question.config.is_required === 1"
+      label-align="top"
+    >
+      <template #left-icon>
+        {{ index + 1 }}
+      </template>
+      <template #label>
+        <contenteditable v-model="stem" :active="active" @blur="saveStem"></contenteditable>
+      </template>
+      <template #input>
+        <div v-for="(optionItem, optionItemIndex) in list" :key="optionItemIndex">
+          <div
+            v-for="(item, optionIndex) in optionItem.options"
+            :key="optionIndex"
+            @click="chooseOption(item)"
+          >
+            <RateCharacter v-model="answerValue" :config="config"></RateCharacter>
+            <div class="tips">
+              <p>{{ config.prompt_left }}</p>
+              <p>{{ config.prompt_center }}</p>
+              <p>{{ config.prompt_right }}</p>
+            </div>
+          </div>
+        </div>
+      </template>
+    </van-field>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import RateCharacter from '@/views/Design/components/Questions/RateCharacter.vue';
+
+const answerValue = ref(false);
+// const isPreview = defineModel('isPreview', { required: false });
+const stem = defineModel('stem', { required: false });
+const element = defineModel('element', { required: false });
+const question = defineModel('question', { required: false });
+const list = defineModel('list', { required: false });
+const config = defineModel('config', { required: false });
+const index = defineModel('index', { required: false });
+const active = defineModel('active', { required: false });
+// const sn = defineModel('sn', { required: false });
+// const questionType = defineModel('questionType', { required: false });
+
+const chooseId = ref('');
+const emit = defineEmits(['update:element']);
+const saveStem = () => {
+  emit('update:element', element.value);
+};
+
+const chooseOption = (item) => {
+  chooseId.value = item.id;
+};
+</script>
+
+<style scoped lang="scss">
+.content {
+  background-color: #fff;
+}
+
+.tips {
+  display: flex;
+  justify-content: space-between;
+  color: #bfbfbf;
+}
+</style>

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

@@ -0,0 +1,92 @@
+<template>
+  <div class="content">
+    <van-field
+      v-model="element.stem"
+      :label="element.stem"
+      :required="element.config.is_required === 1"
+      label-align="top"
+    >
+      <template #left-icon>
+        {{ index + 1 }}
+      </template>
+      <template #label>
+        <contenteditable
+          v-model="element.stem"
+          :active="active"
+          @blur="emitValue"
+        ></contenteditable>
+      </template>
+      <template #input>
+        <div v-for="(optionItem, optionItemIndex) in element.options" :key="optionItemIndex">
+          <div
+            v-for="(item, optionIndex) in optionItem"
+            :key="optionIndex"
+            @click="chooseOption(item)"
+          >
+            <contenteditable v-model="item.option" :active="active"></contenteditable>
+            <RateCharacter :config="element.config"></RateCharacter>
+            <div class="tips">
+              <p>{{ element.config.prompt_left }}</p>
+              <p>{{ element.config.prompt_center }}</p>
+              <p>{{ element.config.prompt_right }}</p>
+            </div>
+          </div>
+        </div>
+      </template>
+    </van-field>
+  </div>
+</template>
+
+<script setup>
+import { ref, toRefs, watch } from 'vue';
+import RateCharacter from './RateCharacter.vue';
+
+const props = defineProps({
+  element: {
+    type: Object,
+    required: true
+  },
+  active: {
+    type: Boolean,
+    default: false
+  },
+  index: {
+    type: Number,
+    default: 0
+  },
+  sn: { type: String, default: '' },
+  questionType: { type: [String, Number], default: 4 }
+});
+
+const emit = defineEmits(['update:element']);
+
+const chooseId = ref('');
+const { element } = toRefs(props);
+
+const emitValue = (newVal) => {
+  emit('update:element', newVal || element.value);
+};
+watch(
+  element.value,
+  (newVal) => {
+    emitValue(newVal);
+  },
+  { deep: true }
+);
+
+const chooseOption = (item) => {
+  chooseId.value = item.id;
+};
+</script>
+
+<style scoped lang="scss">
+.content {
+  background-color: #fff;
+}
+
+.tips {
+  display: flex;
+  justify-content: space-between;
+  color: #bfbfbf;
+}
+</style>

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

@@ -1,6 +1,8 @@
 <template>
   <a-radio-group
-    v-if="customRadio" v-model:value="value" :disabled="disabled"
+    v-if="customRadio"
+    v-model:value="value"
+    :disabled="disabled"
     @change="changeValue"
   >
     <div class="radio-group">
@@ -117,7 +119,7 @@ export default defineComponent({
     const options = ref([]); // 选项
     const optionGroups = ref([]); // 分组
 
-    console.log(`radio input question: `, props.question);
+    // console.log(`radio input question: `, props.question);
 
     // 初始化
     function init() {
@@ -317,7 +319,7 @@ export default defineComponent({
       return Object.keys(props.answer).length;
     });
 
-    console.log(`car wares length:`, cartWaresLength.value);
+    // console.log(`car wares length:`, cartWaresLength.value);
 
     // 显示分组标题
     function showGroupTitle(groupOptions) {

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

@@ -105,17 +105,10 @@ export default defineComponent({
 
     // 16进制转rgba
     function toRgba(color, opacity) {
-      return (
+      return `rgba(${parseInt(color.substring(1, 3), 16)},${parseInt(
-        `rgba(${
+        color.substring(3, 5),
-          parseInt(color.substring(1, 3), 16)
+        16
-        },${
+      )},${parseInt(color.substring(5, 7), 16)},${opacity})`;
-          parseInt(color.substring(3, 5), 16)
-        },${
-          parseInt(color.substring(5, 7), 16)
-        },${
-          opacity
-        })`
-      );
     }
 
     const replaceStr = (str, firIndex, lastIndex, char) => {
@@ -139,17 +132,18 @@ export default defineComponent({
         const value = matchValue.replace('[%cite(', '').replace(')%]', '');
         let replacement = ''; // 替换文本
         // 查找引用问题
-        const question = props.questions.find((question) => {
+        const question
-          // 矩阵题
+          = props.questions.find((question) => {
-          if (question.question_type >= 8 && question.question_type <= 11) {
+            // 矩阵题
-            return question.title === value.split('_R')[0].split('_C')[0];
+            if (question.question_type >= 8 && question.question_type <= 11) {
-          }
+              return question.title === value.split('_R')[0].split('_C')[0];
-          // 排序题
+            }
-          if (question.question_type === 16) {
+            // 排序题
-            return question.title === value.split('_A')[0];
+            if (question.question_type === 16) {
-          }
+              return question.title === value.split('_A')[0];
-          return question.title === value;
+            }
-        })
+            return question.title === value;
+          })
           || props.questions.find((question) => {
             // 矩阵题
             if (question.question_type >= 8 && question.question_type <= 11) {
@@ -176,7 +170,10 @@ export default defineComponent({
               } else {
                 replacement = answer[option.option_key];
               }
-            } else if (question.question_type === 2 && Object.keys(answer).length >= question.config.min_select) {
+            } else if (
+              question.question_type === 2
+              && Object.keys(answer).length >= question.config.min_select
+            ) {
               // 查找引用选项(多选)
               options.forEach((option) => {
                 if (answer[option.option_key] === '1') {
@@ -242,7 +239,7 @@ export default defineComponent({
         // .replaceAll("<label><p ", "<label><span ")
         // .replaceAll("<label><p>", "<label><span>")
         // .replaceAll("</p></label>", "</span></label>");
-        console.log('title', title);
+        // console.log('title', title);
       });
       return title;
     });

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

@@ -0,0 +1,534 @@
+let answerQues = [];
+/**
+ * 关联选项处理
+ * @returns
+ */
+function optionHandle(questionIndex) {
+  const optAndrelateList = [];
+  const rowOptAndrelateList = [];
+  const colOptAndrelateList = [];
+  const classOptAndrelateList = [];
+  const curQuesInfo = answerQues.find((ques) => ques.question_index === questionIndex);
+  curQuesInfo.list.forEach((l) => {
+    if (l.type === 0) {
+      optAndrelateList.push(...l.options);
+    } else if (l.type === 1) {
+      rowOptAndrelateList.push(...l.options);
+    } else if (l.type === 2) {
+      colOptAndrelateList.push(...l.options);
+    } else if (l.type === 3) {
+      classOptAndrelateList.push(...l.options);
+    }
+  });
+  const optList = optAndrelateList.map((opt, oIndex) => {
+    opt.option_index = oIndex + 1;
+    return opt;
+  });
+  const rowOptList = rowOptAndrelateList.map((opt, oIndex) => {
+    opt.option_index = oIndex + 1;
+    return opt;
+  });
+  const coloptList = colOptAndrelateList.map((opt, oIndex) => {
+    opt.option_index = oIndex + 1;
+    return opt;
+  });
+  const classoptList = classOptAndrelateList.map((opt, oIndex) => {
+    opt.option_index = oIndex + 1;
+    return opt;
+  });
+  return {
+    optAndrelateList: optList,
+    rowOptAndrelateList: rowOptList,
+    colOptAndrelateList: coloptList,
+    classOptAndrelateList: classoptList
+  };
+}
+/**
+ * 运算符转换处理
+ * @param {*} operator
+ * @returns
+ */
+function operatorHandle(operator) {
+  let operatorStr = '';
+  if (operator === '=' || operator === '是') {
+    operatorStr = '===';
+  } else if (operator === '≠' || operator === '不是') {
+    operatorStr = '!==';
+  } else if (operator === '≥') {
+    operatorStr = '>=';
+  } else if (operator === '≤') {
+    operatorStr = '<=';
+  } else if (operator === '包含') {
+    operatorStr = 'includes';
+  } else if (operator === '不包含') {
+    operatorStr = '!includes';
+  } else {
+    operatorStr = operator;
+  }
+  return operatorStr;
+}
+/**
+ * 处理每种题型的不同逻辑
+ * @param {*} answer 每个题里面的答题信息answer字段
+ * @param {*} logChild 逻辑信息
+ * @returns
+ */
+function quesHandle(answer, logChild) {
+  // 单选
+  const choiceHandle = (config) => {
+    // 如果配置的逻辑中option_index为0,则代表没有配置选中项，此时不做校验
+    if (logChild.option_index === 0) {
+      return true;
+    }
+    let status = false;
+    Object.keys(answer).forEach((key) => {
+      // 选项分组
+      if (logChild.is_option_group) {
+        const optionGroup = config.option_groups.option_group.find((optionGroup) =>
+          optionGroup.groups.find((group) => group.option_key === key)
+        );
+        // eslint-disable-next-line no-eval
+        status = eval(
+          `${optionGroup?.group_index}${operatorHandle(logChild.operator)}${logChild.option_index}`
+        );
+      } else {
+        const { optAndrelateList } = optionHandle(logChild.question_index);
+        // 拿到答题时选中的选项位置
+        const postion = optAndrelateList.find((opt) => opt.option_key === key).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}`);
+      }
+    });
+    return status;
+  };
+  // 多选
+  const choiceCheckBoxHandle = (config) => {
+    // 如果配置的逻辑中option_index为0,则代表没有配置选中项，此时不做校验
+    if (logChild.option_index === 0 || logChild.is_select === '') {
+      return true;
+    }
+    let status = false;
+    // 选项分组
+    if (logChild.is_option_group) {
+      const optionGroup = config.option_groups.option_group.find(
+        (optionGroup) => optionGroup.group_index === logChild.option_index * 1
+      );
+      const group = optionGroup.groups.find((group) =>
+        Object.keys(answer).includes(group.option_key)
+      );
+      status = group ? logChild.is_select : !logChild.is_select;
+    } else {
+      if (logChild.is_select) {
+        // 如果配置的是选中, 则判断answer答案里面是否包含配置的选项
+        status = Object.keys(answer).includes(logChild.option_index);
+      } else {
+        // 如果配置的是未选中, 则判断answer答案里面是否不包含配置的选项
+        status = !Object.keys(answer).includes(logChild.option_index);
+      }
+    }
+    return status;
+  };
+  // 填空题
+  const inputHandle = () => {
+    // 如果配置的逻辑中value为空,则代表没有配置输入值，此时不做校验
+    if (!logChild.value || !logChild.operator) {
+      return true;
+    }
+    let status = false;
+    if (['包含', '不包含'].includes(logChild.operator)) {
+      // eval执行转换成字符串的语句(value.includes('222'))
+      // eslint-disable-next-line no-eval
+      status = eval(`'${answer.value}'.${operatorHandle(logChild.operator)}('${logChild.value}')`);
+    } else {
+      // eslint-disable-next-line no-eval
+      status = eval(`${answer.value}${operatorHandle(logChild.operator)}${logChild.value}`);
+    }
+    return status;
+  };
+  // 知情同意书题
+  const agreementHandle = () => {
+    // 如果配置的逻辑中value为空,则代表没有配置输入值，此时不做校验
+    if (!logChild.value || !logChild.operator) {
+      return true;
+    }
+    let status = false;
+    if (['=', '等于', '是'].includes(logChild.operator)) {
+      // eslint-disable-next-line no-eval
+      status = eval(`'${answer.value}'${operatorHandle(logChild.operator)}('${logChild.value}')`);
+    } else {
+      // eslint-disable-next-line no-eval
+      status = eval(`${answer.value}${operatorHandle(logChild.operator)}${logChild.value}`);
+    }
+    // console.log('===', status);
+    return status;
+  };
+  // 打分题
+  const rateHandle = () => {
+    // 如果配置的逻辑中参数为空,则代表没有配置逻辑匹配值，此时不做校验
+    if (logChild.option_index === 0 || !logChild.operator || !logChild.value) {
+      return true;
+    }
+    // eslint-disable-next-line no-eval
+    return eval(
+      `${answer[logChild.option_index]}${operatorHandle(logChild.operator)}${logChild.value}`
+    );
+  };
+  // 矩阵单选题
+  const matrixRadioHandle = (config) => {
+    // 如果配置的逻辑中参数为空,则代表没有配置逻辑匹配值，此时不做校验
+    if (logChild.cell_index === 0 || logChild.row_index === 0 || !logChild.operator) {
+      return true;
+    }
+    let status = false;
+    // 选项分组
+    if (logChild.is_option_group) {
+      const selectAnswer = Object.keys(answer).find(
+        (key) => key.split('_')[0] === logChild.row_index
+      );
+      const optionGroup = config.cell_option_groups.option_group.find((optionGroup) =>
+        optionGroup.groups.find((group) => group.option_key === selectAnswer.split('_')[1])
+      );
+      // eslint-disable-next-line no-eval
+      status = eval(
+        `${optionGroup?.group_index}${operatorHandle(logChild.operator)}${logChild.cell_index}`
+      );
+    } else {
+      const { colOptAndrelateList } = optionHandle(logChild.question_index);
+      // 先找到配置的逻辑中，列选项的位置
+      const cellLogPostion = colOptAndrelateList.find(
+        (opt) => opt.option_key === logChild.cell_index
+      ).option_index;
+      // 然后在找到答案里面行和配置的逻辑行一样的key
+      const selectAnswer = Object.keys(answer).find(
+        (key) => key.split('_')[0] === logChild.row_index
+      );
+      // 再找到逻辑里面配置的行在答案里面选中的位置
+      const cellPostion = colOptAndrelateList.find(
+        (opt) => opt.option_key === selectAnswer.split('_')[1]
+      ).option_index;
+      // 两者进行对比
+      // eslint-disable-next-line no-eval
+      status = eval(`${cellPostion}${operatorHandle(logChild.operator)}${cellLogPostion}`);
+    }
+    return status;
+  };
+  // 矩阵多选题
+  const matrixCheckboxHandle = (config) => {
+    // 如果配置的逻辑中参数为空,则代表没有配置逻辑匹配值，此时不做校验
+    if (logChild.cell_index === 0 || logChild.row_index === 0 || logChild.is_select === '') {
+      return true;
+    }
+    let status = false;
+    // 选项分组
+    if (logChild.is_option_group) {
+      const selectAnswer = Object.keys(answer)
+        .filter((key) => key.split('_')[0] === logChild.row_index)
+        .map((key) => key.split('_')[1]);
+      const optionGroup = config.cell_option_groups.option_group.find((optionGroup) =>
+        optionGroup.groups.find((group) => selectAnswer.includes(group.option_key))
+      );
+      status = logChild.is_select
+        ? optionGroup.group_index === logChild.cell_index * 1
+        : optionGroup.group_index !== logChild.cell_index * 1;
+    } else {
+      const optionKey = `${logChild.row_index}_${logChild.cell_index}`;
+      if (logChild.is_select) {
+        // 如果配置的是选中, 则判断answer答案里面是否包含配置的选项
+        status = Object.keys(answer).includes(optionKey);
+      } else {
+        // 如果配置的是未选中, 则判断answer答案里面是否不包含配置的选项
+        status = !Object.keys(answer).includes(optionKey);
+      }
+    }
+    return status;
+  };
+  // 矩阵打分题
+  const matrixRateHandle = () => {
+    // 如果配置的逻辑中参数为空,则代表没有配置逻辑匹配值，此时不做校验
+    if (
+      logChild.cell_index === 0
+      || logChild.row_index === 0
+      || !logChild.operator
+      || !logChild.value
+    ) {
+      return true;
+    }
+    const optionKey = `${logChild.row_index}_${logChild.cell_index}`;
+    // eslint-disable-next-line no-eval
+    return eval(`${answer[optionKey]}${operatorHandle(logChild.operator)}${logChild.value}`);
+  };
+  // 矩阵填空题
+  const matrixInputHandle = () => {
+    // 如果配置的逻辑中参数为空,则代表没有配置逻辑匹配值，此时不做校验
+    if (
+      logChild.cell_index === 0
+      || logChild.row_index === 0
+      || !logChild.operator
+      || !logChild.value
+    ) {
+      return true;
+    }
+    let status = false;
+    const optionKey = `${logChild.row_index}_${logChild.cell_index}`;
+    if (['包含', '不包含'].includes(logChild.operator)) {
+      // eval执行转换成字符串的语句(value.includes('222'))
+      // eslint-disable-next-line no-eval
+      status = eval(
+        `'${answer[optionKey]}'.${operatorHandle(logChild.operator)}('${logChild.value}')`
+      );
+    } else {
+      // eslint-disable-next-line no-eval
+      status = eval(`${answer[optionKey]}${operatorHandle(logChild.operator)}${logChild.value}`);
+    }
+    return status;
+  };
+  // 图片单选
+  const imgRadioHandle = () => {
+    // 如果配置的逻辑中参数为空,则代表没有配置逻辑匹配值，此时不做校验
+    if (logChild.option_index === 0 || !logChild.operator) {
+      return true;
+    }
+    let status = false;
+    Object.keys(answer).forEach((key) => {
+      // eslint-disable-next-line no-eval
+      status = eval(`${key}${operatorHandle(logChild.operator)}${logChild.option_index}`);
+    });
+    return status;
+  };
+  // 图片多选
+  const imgCheckBoxHandle = () => {
+    // 如果配置的逻辑中参数为空,则代表没有配置逻辑匹配值，此时不做校验
+    if (logChild.option_index === 0 || logChild.is_select === '') {
+      return true;
+    }
+    let status = false;
+    if (logChild.is_select) {
+      // 如果配置的是选中, 则判断answer答案里面是否包含配置的选项
+      status = Object.keys(answer).includes(logChild.option_index);
+    } else {
+      // 如果配置的是未选中, 则判断answer答案里面是否不包含配置的选项
+      status = !Object.keys(answer).includes(logChild.option_index);
+    }
+    return status;
+  };
+  // 分类题
+  const classifyHandle = () => {
+    // 如果配置的逻辑中参数为空,则代表没有配置逻辑匹配值，此时不做校验
+    if (logChild.row_index === 0 || logChild.cell_index === 0 || !logChild.operator) {
+      return true;
+    }
+    // eslint-disable-next-line no-eval
+    return eval(
+      `${answer[logChild.row_index]}${operatorHandle(logChild.operator)}${logChild.cell_index}`
+    );
+  };
+  // 排序题
+  const sortHandle = () => {
+    // 如果配置的逻辑中参数为空,则代表没有配置逻辑匹配值，此时不做校验
+    if (logChild.option_index === 0 || !logChild.operator || logChild.location === '') {
+      return true;
+    }
+    // eslint-disable-next-line no-eval
+    const status = eval(
+      `${answer[logChild.option_index]}${operatorHandle(logChild.operator)}${logChild.location}`
+    );
+    return status;
+  };
+  // 恒定总和题
+  const constantSumHandle = () => {
+    // 如果配置的逻辑中参数为空,则代表没有配置逻辑匹配值，此时不做校验
+    if (logChild.option_index === 0 || !logChild.operator || !logChild.value) {
+      return true;
+    }
+    // eslint-disable-next-line no-eval
+    return eval(
+      `${answer[logChild.option_index]}${operatorHandle(logChild.operator)}${logChild.value}`
+    );
+  };
+  // 日期时间题
+  const dateTimeHandle = () => {
+    // 如果配置的逻辑中参数为空,则代表没有配置逻辑匹配值，此时不做校验
+    if (!logChild.date || !logChild.operator || !logChild.time) {
+      return true;
+    }
+    let status = false;
+    if (answer.date && answer.time) {
+      // 如果同时配置了日期和时间
+      status = answer.date === logChild.date && answer.time === logChild.time;
+    } else if (answer.date) {
+      // 如果只配置了日期
+      status = answer.date === logChild.date;
+    } else if (answer.time) {
+      // 如果只配置了时间
+      status = answer.time === logChild.time;
+    }
+    return status;
+  };
+  // psm
+  const psmHandle = (config) => {
+    // 如果配置的逻辑中参数为空,则代表没有配置逻辑匹配值，此时不做校验
+    if (!logChild.value) {
+      return true;
+    }
+    const answerIndex = answer[5];
+    const status = String(config.price_gradient[answerIndex - 1]) === logChild.value;
+    return status;
+  };
+  // 级联题
+  const cascaderHandle = () => {
+    // 如果配置的逻辑中参数为空,则代表没有配置逻辑匹配值，此时不做校验
+    if (logChild.option_index === 0 && !logChild.option_index) {
+      return true;
+    }
+    let status = false;
+    if (logChild.is_select) {
+      // 如果配置的是选中, 则判断answer答案里面是否包含配置的选项
+      status = Object.keys(answer).includes(logChild.option_index);
+    } else {
+      // 如果配置的是未选中, 则判断answer答案里面是否不包含配置的选项
+      status = !Object.keys(answer).includes(logChild.option_index);
+    }
+    return status;
+  };
+  return {
+    choiceHandle,
+    choiceCheckBoxHandle,
+    inputHandle,
+    agreementHandle,
+    rateHandle,
+    matrixRadioHandle,
+    matrixCheckboxHandle,
+    matrixRateHandle,
+    matrixInputHandle,
+    imgRadioHandle,
+    imgCheckBoxHandle,
+    classifyHandle,
+    sortHandle,
+    constantSumHandle,
+    dateTimeHandle,
+    psmHandle,
+    cascaderHandle
+  };
+}
+function getConditionStatus(logChild) {
+  const resultStatus = [];
+  // 拿到当前题的答案
+  const answer = answerQues.find((ques) => ques.question_index === logChild.question_index)?.answer;
+  // 拿到当前题的config信息
+  const config = answerQues.find((ques) => ques.question_index === logChild.question_index)?.config;
+  // 如果逻辑是不为空则为作答
+  if (logChild.is_answer) {
+    // 每个题型有不同的判断逻辑
+    const quesHandles = quesHandle(answer, logChild);
+    let quesStatus = false;
+    if (answer) {
+      try {
+        switch (logChild.question_type) {
+        case 1:
+          quesStatus = quesHandles.choiceHandle(config);
+          break;
+        case 2:
+          quesStatus = quesHandles.choiceCheckBoxHandle(config);
+          break;
+        case 3:
+          quesStatus = quesHandles.cascaderHandle();
+          break;
+        case 4:
+          quesStatus = quesHandles.inputHandle();
+          break;
+        case 5:
+          quesStatus = quesHandles.rateHandle();
+          break;
+        case 7:
+          quesStatus = quesHandles.dateTimeHandle();
+          break;
+        case 8:
+          quesStatus = quesHandles.matrixInputHandle();
+          break;
+        case 9:
+          quesStatus = quesHandles.matrixRadioHandle(config);
+          break;
+        case 10:
+          quesStatus = quesHandles.matrixCheckboxHandle(config);
+          break;
+        case 11:
+          quesStatus = quesHandles.matrixRateHandle();
+          break;
+        case 13:
+          quesStatus = quesHandles.imgRadioHandle();
+          break;
+        case 14:
+          quesStatus = quesHandles.imgCheckBoxHandle();
+          break;
+        case 15:
+          quesStatus = quesHandles.classifyHandle();
+          break;
+        case 16:
+          quesStatus = quesHandles.sortHandle();
+          break;
+        case 17:
+          quesStatus = quesHandles.constantSumHandle();
+          break;
+        case 23:
+          quesStatus = quesHandles.agreementHandle();
+          break;
+        case 101:
+          quesStatus = quesHandles.psmHandle(config);
+          break;
+        default:
+          break;
+        }
+      } catch (error) {
+        // console.log(error);
+        quesStatus = false;
+      }
+    }
+    resultStatus.push(...[!!answer, quesStatus]);
+  } else {
+    // 如果为空则为不作答，判断当前题是否包含answer字段，如果有则已经作答，返回false。
+    resultStatus.push(!answer);
+  }
+  // eslint-disable-next-line no-eval
+  return eval(resultStatus.join('&&'));
+}
+function getlogicStatus(questionData) {
+  answerQues = JSON.parse(JSON.stringify(questionData.questions));
+  const logics = JSON.parse(JSON.stringify(questionData.logics));
+  logics.forEach((logs) => {
+    // 跳转逻辑
+    const logic = logics.find(
+      (logic) =>
+        logic.question_index === logs.question_index && logic.skip_type === 0 && logic.logicStatus
+    );
+    if (logic) return;
+    // 如果选择的是always，则直接返回true；
+    if (logs.logic.length === 1 && logs.logic[0].logic === 'always') {
+      logs.logicStatus = true;
+    } else {
+      // 处理每条逻辑(if或者and或者or)的结果
+      // 将上一步获取到的每条逻辑状态整合起来，统一判断
+      let statusStr = '';
+      logs.logic.forEach((logChild /* condIndex */) => {
+        const conditionStatus = getConditionStatus(logChild);
+        // if (condIndex !== logs.logic.length - 1) {
+        //   statusStr = statusStr + conditionStatus + (logChild.logic === "or" ? "||" : "&&");
+        // } else {
+        //   statusStr = statusStr + conditionStatus;
+        // }
+        statusStr
+          = statusStr
+          + (logChild.logic === 'and' ? '&&' : logChild.logic === 'or' ? '||' : '')
+          + conditionStatus;
+      });
+      // eslint-disable-next-line no-eval
+      logs.logicStatus = eval(statusStr);
+    }
+  });
+  // console.log('logics', logics);
+  return logics;
+}
+export default getlogicStatus;

src/views/Survey/views/Preview/js/questions.js

@@ -41,7 +41,7 @@ export default defineComponent({
     watch(
       styleInfo,
       (style) => {
-        console.log(`style value: `, style);
+        // console.log(`style value: `, style);
         if (questionsData.value?.survey?.style && !style.is_home && !page.value) {
           page.value = 1;
         }
@@ -76,7 +76,7 @@ export default defineComponent({
         localPageTimer.value = {};
         clearInterval(localPageInterval);
         const lastQuestionIndex = questions.value.slice(-1)[0]?.question_index;
-        console.log(questionsData.value);
+        // console.log(questionsData.value);
         const localPage = questionsData.value?.survey?.local_pages.find(
           (localPage) =>
             localPage.question_index === lastQuestionIndex && localPage.timer_config.is_short_time
@@ -298,7 +298,7 @@ export default defineComponent({
               }
               isError = true;
             }
-            console.log('===', minSelect, Object.keys(answer), answer, perLineSelectedCount);
+            // console.log('===', minSelect, Object.keys(answer), answer, perLineSelectedCount);
           } else if (answer && questionType === 12) {
             question.error = '';
           } else if (
@@ -498,7 +498,7 @@ export default defineComponent({
             try {
               // 模拟接口
               const data = answerMock(questionsData.value, page.value);
-              console.log('模拟作答数据', data);
+              // console.log('模拟作答数据', data);
               // 更新答案
               updateAnswer(data.answer_info_autofill);
               // 更新分页数组
@@ -512,7 +512,7 @@ export default defineComponent({
               }
               callback(data.jump_to);
             } catch (error) {
-              console.log(error);
+              // console.log(error);
             }
             return (loading.value = false);
           }
@@ -601,11 +601,11 @@ export default defineComponent({
               }
             }
           } catch (error) {
-            console.log(error);
+            // console.log(error);
           }
           loading.value = false;
         } else {
-          console.log(errors);
+          // console.log(errors);
           const { error, title, question_index: questionIndex } = errors[0];
           const lines = (error || '')
             .split('\n')
@@ -615,7 +615,7 @@ export default defineComponent({
 
           // 锚点
           const anchor = document.querySelector(`#questionIndex${questionIndex}`);
-          console.log(anchor, scrollbar.value);
+          // console.log(anchor, scrollbar.value);
           scrollbar.value.scrollTo(0, anchor.offsetTop - (props.isMobile ? 20 : 40));
         }
       } else {
@@ -844,7 +844,7 @@ export default defineComponent({
     watch(
       () => route.query,
       () => {
-        console.log('route.query.sn', route.query);
+        // console.log('route.query.sn', route.query);
         location.reload();
       },
       {

src/views/Survey/views/Publish/Index.vue

@@ -44,11 +44,11 @@
 <script setup lang="ts">
 import { useRoute } from 'vue-router';
 import { onMounted, reactive, ref, watch } from 'vue';
-import { showFailToast, showSuccessToast, showConfirmDialog } from 'vant';
+import { showFailToast, showSuccessToast } from 'vant';
 import utils from '@/assets/js/common';
 import appBridge from '@/assets/js/appBridge';
-import { getSurveyInfo, getQrcode, publishSurvey } from '@/api/publish';
+import { getQrcode } from '@/api/publish';
-import { canPlanetPublish } from '@/layouts/utils.js';
+// import { canPlanetPublish } from '@/layouts/utils.js';
 import configUrl from '../../../../config';
 
 const route = useRoute();
@@ -56,7 +56,7 @@ const surveyTitle = route.meta.title as string;
 appBridge.setTitle(surveyTitle);
 const sn = route.query.sn;
 const status = ref<number>(0); // `0`: 编辑中 `1`: 投放中 `2`: 已结束
-const publish_type = ref(0);
+// const publishType = ref(0);
 const operateList = reactive([
   {
     title: '复制链接',
@@ -87,33 +87,34 @@ interface PublishInfo {
 
 const publishInfo = ref<PublishInfo>({} as PublishInfo);
 type OperateItem = (typeof operateList)[0];
-function handlePublish() {
+// function handlePublish() {
-  publishSurvey({
+//   publishSurvey({
-    sn,
+//     sn,
-    publish_type: publish_type.value
+//     publish_type: publishType.value
-  })
+//   })
-    .then(() => {
+//     .then(() => {
-      // store.commit('common/M_COMMON_SET_SURVEY_STATUS', 1);
+//       // store.commit('common/M_COMMON_SET_SURVEY_STATUS', 1);
-      fetchInfo();
+//       fetchInfo();
-    })
+//     })
-    .catch(() => {
+//     .catch(() => {
-      // emitter.emit('app-loading', false);
+//       // emitter.emit('app-loading', false);
-    });
+//     });
-}
+// }
 
-async function openPublishModal() {
+// async function openPublishModal() {
-  const res = await canPlanetPublish(route.query.sn);
+// const res = await canPlanetPublish(route.query.sn);
-  // if (res) {
+// if (res) {
-  //   handlePublish();
+//   handlePublish();
-  // } else {
+// } else {
-  //   emitter.emit('app-loading', false);
+//   emitter.emit('app-loading', false);
-  // }
+// }
-}
+// }
 
 function getCode() {
   console.log(56, configUrl.proxyUrl);
-  publishInfo.value.img_url = 'https://test-cxp-pubcos.yili.com/uat-yls//survey-api/publish/202503130938138261340.png';
+  publishInfo.value.img_url
-  publishInfo.value.url = `${configUrl.proxyUrl}publish?sn=${sn && sn != undefined ? sn : ''}`;
+    = 'https://test-cxp-pubcos.yili.com/uat-yls//survey-api/publish/202503130938138261340.png';
+  publishInfo.value.url = `${configUrl.proxyUrl}publish?sn=${sn && sn !== undefined ? sn : ''}`;
   publishInfo.value.download_url = {
     title: '问卷下载',
     url: 'https://test-cxp-pubcos.yili.com/uat-yls//survey-api/publish/202503130938138261340.png'
@@ -122,20 +123,22 @@ function getCode() {
     .then((res) => {
       if (res.data) {
         publishInfo.value = res.data.data || {};
-        console.log(res.data);
+        // console.log(res.data);
       }
     })
     .catch((error) => {
       showFailToast(error.data?.message || error.message || '服务器错误');
     });
 }
-function fetchInfo() {
+// function fetchInfo() {
-  getSurveyInfo(sn)
+//   getSurveyInfo(sn)
-    .then((res) => {
+//     .then((res) => {
-      status.value = Number(res.data.data.status);
+//       status.value = Number(res.data.data.status);
-    })
+//     })
-    .finally(() => { });
+//     .finally(() => {
-}
+//       /**/
+//     });
+// }
 watch(status, (val) => {
   if (val === 1) {
     getCode();
@@ -180,7 +183,9 @@ function shareLink() {
     webpageUrl: publishInfo.value.url,
     scene: 0 // 朋友圈1  微信好友0
   };
-  appBridge.shareToWeChat(params, () => { });
+  appBridge.shareToWeChat(params, () => {
+    /**/
+  });
 }
 
 // 下载二维码