feat: 添加分页组件和配置

- 新增 PageConfig 组件用于分页设置
- 新增 Paging 组件用于显示分页信息
- 添加自定义样式和布局

src/views/Design/Index.vue

@@ -10,11 +10,22 @@
     >
       <template #item="{ element, index }">
         <choose-question
-          :element="element" :index="index" :chooseQuestionId="chooseQuestionId"
+          :element="element"
+          :index="index"
+          :chooseQuestionId="chooseQuestionId"
           @get-choose-question-id="getChooseQuestionId"
         >
           <base-select v-if="element.question_type === 1" :element="element"></base-select>
         </choose-question>
+        <!--        {{ 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=""
+        />
       </template>
     </draggable>
   </div>
@@ -37,9 +48,58 @@ const BaseSelect = defineAsyncComponent(() => {
 const ChooseQuestion = defineAsyncComponent(() => {
   return import('./components/ChooseQuestion.vue');
 });
-const questionInfo = ref({ questions: [] });
-const chooseQuestionId = ref('');
+const Paging = defineAsyncComponent(() => {
+  return import('./components/Questions/paging/Paging.vue');
+});
 
+const chooseQuestionId = ref('');
+const questionInfo = ref(storeToRefs(counterStore).questionsInfo);
+/**
+ * 工具函数
+ */
+function util() {
+  /** 通过id找到数组中对应的下标 */
+  const getIndexById = (arr, id) => arr.findIndex((i) => i.id === id);
+  /** 通过分页找到数组中对应的下标 */
+  const getIndexByPage = (arr, page) => arr.findIndex((i) => i.page === page);
+  const quesIsActive = (activeIndex, questionList, eleId) => {
+    return activeIndex === getIndexById(questionList, eleId);
+  };
+  const pageIsActive = (activeIndex, questionList, elePage) => {
+    return activeIndex === getIndexByPage(questionList, elePage);
+  };
+  const quesIsDisabled = (questionIndex, disabledQuestionIndex) => {
+    return (disabledQuestionIndex || []).includes(questionIndex);
+  };
+  const pagingDisabled = (index, question, disabledQuestionIndex) => {
+    if (disabledQuestionIndex.includes(question?.[index - 1]?.questionIndex)) {
+      return true;
+    }
+    for (let i = 1; i < question.length - 1; i++) {
+      if (question?.[index + i]?.page) {
+        continue;
+      }
+      if (disabledQuestionIndex.includes(question?.[index + i]?.questionIndex)) {
+        return true;
+      }
+    }
+    return false;
+  };
+  /** 工具函数，复制store中的数据，避免直接更改store */
+  const copyStoreContent = (store) => {
+    return JSON.parse(JSON.stringify(store.state.common));
+  };
+  return {
+    getIndexById,
+    getIndexByPage,
+    quesIsActive,
+    pageIsActive,
+    quesIsDisabled,
+    pagingDisabled,
+    copyStoreContent
+  };
+}
+const { pageIsActive } = util();
 // 获取选中的题目的ID
 const getChooseQuestionId = (questionItem) => {
   chooseQuestionId.value = questionItem.id;
@@ -47,8 +107,5 @@ const getChooseQuestionId = (questionItem) => {
 onMounted(() => {
   questionInfo.value = store.questionsInfo.value;
 });
-
 </script>
-<style scoped lang="scss">
-
-</style>
+<style scoped lang="scss"></style>