feat(design): 添加题目预览功能并优化题目组件

- 新增 Preview 组件用于题目预览
- 重构 Index 组件,移除冗余代码
-优化 QuestionBefore 组件,添加题目标题
- 重构 ChooseQuestion组件,支持自定义操作
- 新增题目类型判断和对应操作功能

src/components/YLSelect.vue

@@ -12,7 +12,7 @@
       :value="item.value"
       :disabled="item.disabled"
     >
-      <span style="float: left" v-html="item.label"></span>
+      <span style="float: left" v-html="format(item.label)"></span>
     </el-option>
     <template #label="{ label }">
       <!--      {{ option }}-->

src/router/index.ts

@@ -1,6 +1,7 @@
 import { createRouter, createWebHistory } from 'vue-router';
 import layout from '@/layouts/index.vue';
 import Design from '@/views/Design/Index.vue';
+import Preview from '@/views/Design/Preview.vue';
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
   routes: [
@@ -43,10 +44,13 @@ const router = createRouter({
       path: '/design',
       name: 'design',
       meta: {},
-      // route level code-splitting
-      // this generates a separate chunk (About.[hash].js) for this route
-      // which is lazy-loaded when the route is visited.
       component: Design
+    },
+    {
+      path: '/preview',
+      name: 'preview',
+      meta: {},
+      component: Preview
     }
   ]
 });

src/views/Design/Index.vue

@@ -43,7 +43,25 @@
             :active="chooseQuestionId === element.id"
             sn="lXEBBpE2"
           />
-          <!-- @update="updateHandle" -->
+          <!--组件底部左侧操作-->
+          <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"
+                >
+                  <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>
+                      <span class="ml10">{{ act.label }}</span>
+                    </div>
+                  </template>
+                </div>
+              </template>
+            </div>
+          </template>
         </choose-question>
 
         <!--        {{ element.question_type }}-->
@@ -60,6 +78,7 @@
   </div>
 </template>
 <script setup>
+import { v4 as uuidv4 } from 'uuid';
 import { ref, onMounted } from 'vue';
 import { useCounterStore } from '@/stores/counter';
 import { storeToRefs } from 'pinia';
@@ -129,15 +148,67 @@ const questionInfo = ref(store.questionsInfo.value);
 const getChooseQuestionId = (questionItem) => {
   chooseQuestionId.value = questionItem.id;
 };
+// 组件对应的操作
+const actionOptions = [
+  {
+    question_type: [1, 5],
+    actions: [
+      {
+        label: '添加选项',
+        icon: 'add',
+        fun: 'radioAddOption'
+      }
+    ]
+  }
+];
+//  事件分发
+const actionEvent = (item, el) => {
+  actionFun[item.fun](el);
+};
+// 总事件注册
+const actionFun = {
+  //  单选事件  添加选项
+  radioAddOption: (element) => {
+    element.options.map((item) => {
+      item.push({
+        id: uuidv4(),
+        option: `选项${item.length + 1}`,
+        option_config: {
+          image_url: [],
+          title: '',
+          instructions: [],
+          option_type: 0,
+          limit_right_content: ''
+        },
+        option_index: element.last_option_index + 1,
+        parent_id: 0,
+        type: 0,
+        cascade: [],
+        config: []
+      });
+    });
+    element.last_option_index += 1;
+  }
+};
 
 onMounted(() => {
   questionInfo.value = store.questionsInfo.value;
 });
 </script>
 <style scoped lang="scss">
+.ml10 {
+  margin-left: 5px;
+}
+
 .design-create {
   min-height: calc(100vh);
   background-color: #e9eef3;
   color: #333;
+
+  .slot-actions {
+    & .action-item + .action-item {
+      margin-left: 10px;
+    }
+  }
 }
 </style>

src/views/Design/Preview.vue

@@ -0,0 +1,48 @@
+<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>
+
+      <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>

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

@@ -44,9 +44,6 @@
           <span> {{ getSkipTypeText(0) }} <van-icon name="arrow"></van-icon></span>
         </template>
       </van-cell>
-      <van-divider></van-divider>
-      <van-cell title="下移题目" :border="false" @click="questionMove('down')"></van-cell>
-      <van-cell title="上移题目" :border="false" @click="questionMove('up')"></van-cell>
     </van-cell-group>
   </van-action-sheet>
   <!--  移动 复制-->

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

@@ -173,7 +173,8 @@ skipOption.push(
     .map((item) => {
       return {
         value: item.question_index,
-        label: item.stem
+        // todo  吧title  Q1 Q2 放到 题目的前面
+        label: item.title + item.stem
       };
     })
 );

src/views/Design/components/ChooseQuestion.vue

@@ -8,11 +8,8 @@
       <slot></slot>
       <!--      题目操作-->
       <van-cell v-if="chooseQuestionId === element.id" class="choose-question-active-container">
-        <template v-if="element.question_type === 1 || element.question_type === 5" #icon>
+        <template #icon>
-          <div class="flex align-center" @click="radioAddOption">
+          <slot name="action" :element="element" :index="index"></slot>
-            <van-icon name="add" class="fs20"></van-icon>
-            <span class="ml10">添加选项</span>
-          </div>
         </template>
         <template #title>{{}}</template>
         <template #right-icon>
@@ -41,9 +38,6 @@
 <script setup>
 import QuestionAction from '@/views/Design/components/ActionCompoents/QuestionAction.vue';
 import { ref } from 'vue';
-import { v4 as uuidv4 } from 'uuid';
-// import { useRouter } from 'vue-router';
-// const router = useRouter();
 const props = defineProps({
   element: {
     type: Object,
@@ -66,31 +60,6 @@ const props = defineProps({
 });
 const element = ref(props.element);
 
-//  单选事件  添加选项
-const radioAddOption = () => {
-  element.value.options.map((item) => {
-    item.push({
-      id: uuidv4(),
-      option: `选项${item.length + 1}`,
-      option_config: {
-        image_url: [],
-        title: '',
-        instructions: [],
-        option_type: 0,
-        limit_right_content: ''
-      },
-      option_index: element.value.last_option_index + 1,
-      parent_id: 0,
-      type: 0,
-      cascade: [],
-      config: []
-    });
-  });
-  element.value.last_option_index += 1;
-};
-
-// emit 事件
-
 // 选中题目后出现的操作
 // const questionAction = ref([
 //   {