feat: 重构预览 组件

- 重构 preview 组件
- 增加过滤 gap 内容

.vscode/settings.json

@@ -32,7 +32,7 @@
     "editor.formatOnSave": true
   },
   "[vue]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode",
+    "editor.defaultFormatter": "Vue.volar",
     "editor.formatOnSave": true
   },
   "css.validate": false, //用来校验CSS文件中的语法错误和潜在的问题

src/views/Design/Index.vue

@@ -1,32 +1,22 @@
 <template>
   <div class="design-create">
     <draggable
-      v-model:data="questionInfo.questions"
-      item-key="id"
-      handle=".moverQues"
-      chosenClass="chosen"
-      animation="300"
-      :scroll="true"
+      v-model:data="questionInfo.questions" item-key="id" handle=".moverQues" chosenClass="chosen"
+      animation="300" :scroll="true"
     >
       <template #item="{ element, index }">
         <choose-question
-          :element="element"
-          :questions="questionInfo.questions"
-          :index="index"
-          :chooseQuestionId="chooseQuestionId"
-          @get-choose-question-id="getChooseQuestionId"
+          :element="element" :questions="questionInfo.questions" :index="index"
+          :chooseQuestionId="chooseQuestionId" @get-choose-question-id="getChooseQuestionId"
         >
           <!-- 选择题 -->
           <Choice
-            v-if="element.question_type === 1 || element.question_type === 2"
-            :element="element"
+            v-if="element.question_type === 1 || element.question_type === 2" :element="element"
             :active="chooseQuestionId === element.id"
           ></Choice>
           <!-- 填空题 -->
           <Completion
-            v-if="element.question_type === 4"
-            :element="element"
-            :active="chooseQuestionId === element.id"
+            v-if="element.question_type === 4" :element="element" :active="chooseQuestionId === element.id"
             sn="lXEBBpE2"
           ></Completion>
 
@@ -36,54 +26,39 @@
               element.question_type === 8 ||
                 element.question_type === 9 ||
                 element.question_type === 10
-            "
-            :element="element"
-            :active="chooseQuestionId === element.id"
+            " :element="element" :active="chooseQuestionId === element.id"
           />
 
           <!-- 签名题 -->
           <sign-question
-            v-if="[9, 10, 22].includes(element.question_type)"
-            :element="element"
+            v-if="[9, 10, 22].includes(element.question_type)" :element="element"
             :active="chooseQuestionId === element.id"
           />
 
           <!-- 文件上传题 -->
           <file-upload
-            v-if="element.question_type === 18"
-            :element="element"
+            v-if="element.question_type === 18" :element="element"
             :active="chooseQuestionId === element.id"
           ></file-upload>
 
           <!-- 打分题 -->
           <Rate
-            v-if="element.question_type === 5"
-            :element="element"
-            :active="chooseQuestionId === element.id"
+            v-if="element.question_type === 5" :element="element" :active="chooseQuestionId === element.id"
             sn="lXEBBpE2"
           />
 
           <!--图文-->
           <TextWithImages
-            v-if="element.question_type === 6"
-            :element="element"
+            v-if="element.question_type === 6" :element="element"
             :active="chooseQuestionId === element.id"
           />
           <!--图文-->
-          <NPS
-            v-if="element.question_type === 106"
-            :element="element"
-            :active="chooseQuestionId === element.id"
-          />
+          <NPS v-if="element.question_type === 106" :element="element" :active="chooseQuestionId === element.id" />
           <!--组件底部左侧操作-->
           <template #action="{ element: el }">
             <div class="flex slot-actions">
               <template v-for="(item, optionIndex) in actionOptions">
-                <div
-                  v-if="item.question_type.includes(el.question_type)"
-                  :key="optionIndex"
-                  class="flex"
-                >
+                <div v-if="item.question_type.includes(el.question_type)" :key="optionIndex" class="flex">
                   <template v-for="(act, actIndex) in item.actions" :key="actIndex">
                     <div class="flex align-center action-item" @click="actionEvent(act, el)">
                       <van-icon :name="act.icon"></van-icon>
@@ -98,13 +73,12 @@
 
         <!--        {{ element.question_type }}-->
         <!--        {{questionInfo.survey.pages.length}}-->
-        <paging
-          v-if="!element.question_type && questionInfo.survey.pages.length > 1"
-          :info="element"
-          :index="index"
-          :active="pageIsActive(activeIndex, questionInfo.questions, element.page)"
-          @click.stop=""
-        />
+        <div v-if="!filterGap">
+          <paging
+            v-if="!element.question_type && questionInfo.survey.pages.length > 1" :info="element" :index="index"
+            :active="pageIsActive(activeIndex, questionInfo.questions, element.page)" @click.stop=""
+          />
+        </div>
       </template>
     </draggable>
   </div>
@@ -172,6 +146,16 @@ function util() {
     copyStoreContent
   };
 }
+
+// 获取所有的 question 列表内容
+const { filterGap } = defineProps({
+  filterGap: {
+    type: Boolean,
+    required: false,
+    default: false
+  }
+});
+
 const { pageIsActive } = util();
 // 获取 Store 实例
 const counterStore = useCounterStore();
@@ -264,6 +248,8 @@ const actionFun = {
 };
 
 onMounted(() => {
+  // console.log(questionInfo.value);
+
   questionInfo.value = store.questionsInfo.value;
 });
 </script>
@@ -278,7 +264,7 @@ onMounted(() => {
   color: #333;
 
   .slot-actions {
-    & .action-item + .action-item {
+    & .action-item+.action-item {
       margin-left: 10px;
     }
   }

src/views/Design/Preview.vue

@@ -1,48 +1,16 @@
-<template>
-  <div class="container preview-container">
-    <div v-for="(element, index) in questionsInfo.questions" :key="index" class="element-container">
-      <Choice v-if="element.question_type === 1" :element="element" :active="false"></Choice>
-      <!-- 填空题 -->
-      <Completion
-        v-if="element.question_type === 4"
-        :element="element"
-        :active="chooseQuestionId === element.id"
-        sn="lXEBBpE2"
-      ></Completion>
+<script setup lang="ts">
+import PreviewIndex from './Index.vue';
 
-      <martrix-question
-        v-if="element.question_type === 9"
-        :element="element"
-        :active="chooseQuestionId === element.id"
-      />
-
-      <!-- 打分题 -->
-      <Rate
-        v-if="element.question_type === 5"
-        :element="element"
-        :active="chooseQuestionId === element.id"
-        sn="lXEBBpE2"
-      />
-    </div>
-  </div>
-</template>
-<script setup>
-import Choice from '@/views/Design/components/Questions/Choice.vue';
-// store paine
-import { storeToRefs } from 'pinia';
-import { useCounterStore } from '@/stores/counter';
-import MartrixQuestion from '@/views/Design/components/Questions/MartrixQuestion.vue';
-import Rate from '@/views/Design/components/Questions/Rate.vue';
-import Completion from '@/views/Design/components/Questions/Completion.vue';
-const store = useCounterStore();
-const { questionsInfo } = storeToRefs(store);
 </script>
-<style scoped lang="scss">
-.preview-container {
-  background: #f5f5f5;
 
-  & .element-container {
-    padding: 8px;
-  }
-}
-</style>
+<template>
+  <van-nav-bar title="预览" left-arrow>
+    <template #right>
+      <van-icon name="search" />
+    </template>
+  </van-nav-bar>
+
+  <preview-index :filterGap="true"></preview-index>
+</template>
+
+<style lang="scss" scoped></style>

src/views/Survey/views/Create/Index.vue

@@ -145,28 +145,28 @@ const quesList = ref([
 const questionEvent = (item) => {
   let questionJson = {};
   switch (item.question_type) {
-    // 单选
-    case '1':
-    case '2':
-      questionJson = JSON.parse(
-        JSON.stringify({
-          ...item.json,
-          id: uuidv4(),
-          question_index: questionInfo.value.survey.last_question_index + 1,
-          options: item.json.options.map((item) => {
-            return item.map((it) => {
-              return {
-                ...it,
-                // 主键生成
-                id: uuidv4()
-              };
-            });
-          })
+  // 单选
+  case '1':
+  case '2':
+    questionJson = JSON.parse(
+      JSON.stringify({
+        ...item.json,
+        id: uuidv4(),
+        question_index: questionInfo.value.survey.last_question_index + 1,
+        options: item.json.options.map((item) => {
+          return item.map((it) => {
+            return {
+              ...it,
+              // 主键生成
+              id: uuidv4()
+            };
+          });
         })
-      );
+      })
+    );
 
-      questionInfo.value.questions.splice(activeQuestionIndex.value + 1, 0);
-      break;
+    questionInfo.value.questions.splice(activeQuestionIndex.value + 1, 0);
+    break;
   }
 
   // 给store 装数据 判断是 push  还是  splice