From c330e6000d8eeb1e4109c54fd9eb8f05149857fa Mon Sep 17 00:00:00 2001
From: chaorenluo <1243357953@qq.com>
Date: Tue, 6 Aug 2024 17:30:12 +0800
Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9A=E6=96=B0=E5=A2=9E=E5=88=86?=
 =?UTF-8?q?=E9=A1=B5=E5=8A=9F=E8=83=BD=20(#382)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat:新增分页功能

* 修复type-check检查

* fix: server  type-check

* fix:修改服务端测试用例

* fix:修复分页bug
---
 .../__test/dataStatistic.controller.spec.ts   |  10 +-
 .../__test/dataStatistic.service.spec.ts      |   8 +-
 .../template/surveyTemplate/templateBase.json |   1 +
 .../__test/surveyResponse.controller.spec.ts  |  15 +-
 .../__test/surveyResponse.service.spec.ts     |   4 +-
 web/components.d.ts                           |   4 +
 web/src/management/config/dnd.ts              |   1 +
 web/src/management/config/questionConfig.js   |   1 +
 .../pages/edit/components/MaterialGroup.vue   |  12 +-
 .../pages/edit/components/PagingWrapper.vue   | 101 +++++++
 .../pages/edit/components/QuestionWrapper.vue |   6 +-
 .../edit/modules/contentModule/buildData.js   |   1 +
 .../modules/pagingModule/PaginationPanel.vue  | 282 ++++++++++++++++++
 .../modules/questionModule/PreviewPanel.vue   |  19 +-
 .../components/QuestionCatalog.vue            |  89 ++++--
 .../questionModule/components/TypeList.vue    |  28 +-
 .../edit/modules/skinModule/PreviewPanel.vue  |  39 +--
 web/src/management/stores/edit.ts             | 256 +++++++++++++++-
 .../communals/widgets/SubmitButton/index.jsx  |   5 +-
 web/src/render/pages/IndexPage.vue            |   9 +-
 web/src/render/pages/RenderPage.vue           |  27 +-
 web/src/render/stores/question.js             |  41 ++-
 web/src/render/stores/survey.js               |   8 +-
 23 files changed, 832 insertions(+), 135 deletions(-)
 create mode 100644 web/src/management/pages/edit/components/PagingWrapper.vue
 create mode 100644 web/src/management/pages/edit/modules/pagingModule/PaginationPanel.vue

diff --git a/server/src/modules/survey/__test/dataStatistic.controller.spec.ts b/server/src/modules/survey/__test/dataStatistic.controller.spec.ts
index a2ca640f..5b9b5d82 100644
--- a/server/src/modules/survey/__test/dataStatistic.controller.spec.ts
+++ b/server/src/modules/survey/__test/dataStatistic.controller.spec.ts
@@ -106,12 +106,13 @@ describe('DataStatisticController', () => {
             field: 'xxx',
             title: 'xxx',
             type: 'xxx',
+            diffTime: 'xxx',
             othersCode: 'xxx',
           },
         ],
         listBody: [
-          { difTime: '0.5', createDate: '2024-02-11' },
-          { difTime: '0.5', createDate: '2024-02-11' },
+          { diffTime: '0.5', createDate: '2024-02-11' },
+          { diffTime: '0.5', createDate: '2024-02-11' },
         ],
       };
 
@@ -151,12 +152,13 @@ describe('DataStatisticController', () => {
             field: 'xxx',
             title: 'xxx',
             type: 'xxx',
+            diffTime: 'xxx',
             othersCode: 'xxx',
           },
         ],
         listBody: [
-          { difTime: '0.5', createDate: '2024-02-11', data123: '15200000000' },
-          { difTime: '0.5', createDate: '2024-02-11', data123: '13800000000' },
+          { diffTime: '0.5', createDate: '2024-02-11', data123: '15200000000' },
+          { diffTime: '0.5', createDate: '2024-02-11', data123: '13800000000' },
         ],
       };
 
diff --git a/server/src/modules/survey/__test/dataStatistic.service.spec.ts b/server/src/modules/survey/__test/dataStatistic.service.spec.ts
index 1130364f..bf7b69bd 100644
--- a/server/src/modules/survey/__test/dataStatistic.service.spec.ts
+++ b/server/src/modules/survey/__test/dataStatistic.service.spec.ts
@@ -70,7 +70,7 @@ describe('DataStatisticService', () => {
             data413: 3,
             data863: '109239',
           },
-          difTime: 21278,
+          diffTime: 21278,
           clientTime: 1710340862733.0,
           secretKeys: [],
           optionTextAndId: {
@@ -197,7 +197,7 @@ describe('DataStatisticService', () => {
             data413_3: expect.any(String),
             data413: expect.any(Number),
             data863: expect.any(String),
-            difTime: expect.any(String),
+            diffTime: expect.any(String),
             createDate: expect.any(String),
           }),
         ]),
@@ -220,7 +220,7 @@ describe('DataStatisticService', () => {
               'U2FsdGVkX19bRmf3uEmXAJ/6zXd1Znr3cZsD5v4Nocr2v5XG1taXluz8cohFkDyH',
             data770: 'U2FsdGVkX18ldQMhJjFXO8aerjftZLpFnRQ4/FVcCLI=',
           },
-          difTime: 806707,
+          diffTime: 806707,
           clientTime: 1710400229573.0,
           secretKeys: ['data458', 'data450', 'data405', 'data770'],
           optionTextAndId: {
@@ -303,7 +303,7 @@ describe('DataStatisticService', () => {
             data458: expect.any(String),
             data515: expect.any(String),
             data770: expect.any(String),
-            difTime: expect.any(String),
+            diffTime: expect.any(String),
           }),
         ]),
       );
diff --git a/server/src/modules/survey/template/surveyTemplate/templateBase.json b/server/src/modules/survey/template/surveyTemplate/templateBase.json
index 754c3110..24d588bf 100644
--- a/server/src/modules/survey/template/surveyTemplate/templateBase.json
+++ b/server/src/modules/survey/template/surveyTemplate/templateBase.json
@@ -49,6 +49,7 @@
       "opacity": 100
     }
   },
+  "pagingConf":[],
   "logicConf": {
     "showLogicConf": []
   }
diff --git a/server/src/modules/surveyResponse/__test/surveyResponse.controller.spec.ts b/server/src/modules/surveyResponse/__test/surveyResponse.controller.spec.ts
index 7ba95267..b7b1a6eb 100644
--- a/server/src/modules/surveyResponse/__test/surveyResponse.controller.spec.ts
+++ b/server/src/modules/surveyResponse/__test/surveyResponse.controller.spec.ts
@@ -32,11 +32,11 @@ const mockDecryptErrorBody = {
     'SkyfsbS6MDvFrrxFJQDMxsvm53G3PTURktfZikJP2fKilC8wPW5ZdfX29Fixor5ldHBBNyILsDtxhbNahEbNCDw8n1wS8IIckFuQcaJtn6MLOD+h+Iuywka3ig4ecTN87RpdcfEQe7f38rSSx0zoFU8j37eojjSF7eETBSrz5m9WaNesQo4hhC6p7wmAo1jggkdbG8PVrFqrZPbkHN5jOBrzQEqdqYu9A5wHMM7nUteqlPpkiogEDYmBIccqmPdtO54y7LoPslXgXj6jNja8oVNaYlnp7UsisT+i5cuQ7lbDukEhrfpAIFRsT2IUwVlLjWHtFQm4/4I5HyvVBirTng==',
     'IMn0E7R6cYCQPI497mz3x99CPA4cImAFEfIv8Q98Gm5bFcgKJX6KFYS7PF/VtIuI1leKwwNYexQy7+2HnF40by/huVugoPYnPd4pTpUdG6f1kh8EpzIir2+8P98Dcz2+NZ/khP2RIAM8nOr+KSC99TNGhuKaKQCItyLFDkr80s3zv+INieGc8wULIrGoWDJGN2KdU/jSq+hkV0QXypd81N5IyAoNhZLkZeM/FU6grGFPnGRtcDDc5W8YWVHO87VymlxPCTRawXRTDcvGIUqb3GuZfxvA7AULqbspmN9kzt3rktuZLNb2TFQDsJfqUuCmi+b28qP/G4OrT9/VAHhYKw==',
   ],
-  difTime: 806707,
+  diffTime: 806707,
   clientTime: 1710400229573,
   encryptType: 'rsa',
   sessionId: '65f2664c92862d6a9067ad18',
-  sign: '8c9ca8804c9d94de6055d68a1f3c423fe50c95b4bd69f809ee2da8fcd82fd960.1710400229589',
+  sign: '95d6ff5dd3d9ddc205cbab88defe40ebe889952961f1d60e760fa411e2cb39fe.1710400229589',
 };
 
 const mockSubmitData = {
@@ -45,11 +45,11 @@ const mockSubmitData = {
     'SkyfsbS6MDvFrrxFJQDMxsvm53G3PTURktfZikJP2fKilC8wPW5ZdfX29Fixor5ldHBBNyILsDtxhbNahEbNCDw8n1wS8IIckFuQcaJtn6MLOD+h+Iuywka3ig4ecTN87RpdcfEQe7f38rSSx0zoFU8j37eojjSF7eETBSrz5m9WaNesQo4hhC6p7wmAo1jggkdbG8PVrFqrZPbkHN5jOBrzQEqdqYu9A5wHMM7nUteqlPpkiogEDYmBIccqmPdtO54y7LoPslXgXj6jNja8oVNaYlnp7UsisT+i5cuQ7lbDukEhrfpAIFRsT2IUwVlLjWHtFQm4/4I5HyvVBirTng==',
     'IMn0E7R6cYCQPI497mz3x99CPA4cImAFEfIv8Q98Gm5bFcgKJX6KFYS7PF/VtIuI1leKwwNYexQy7+2HnF40by/huVugoPYnPd4pTpUdG6f1kh8EpzIir2+8P98Dcz2+NZ/khP2RIAM8nOr+KSC99TNGhuKaKQCItyLFDkr80s3zv+INieGc8wULIrGoWDJGN2KdU/jSq+hkV0QXypd81N5IyAoNhZLkZeM/FU6grGFPnGRtcDDc5W8YWVHO87VymlxPCTRawXRTDcvGIUqb3GuZfxvA7AULqbspmN9kzt3rktuZLNb2TFQDsJfqUuCmi+b28qP/G4OrT9/VAHhYKw==',
   ],
-  difTime: 806707,
+  diffTime: 806707,
   clientTime: 1710400229573,
   encryptType: 'rsa',
   sessionId: '65f29fc192862d6a9067ad28',
-  sign: '8c9ca8804c9d94de6055d68a1f3c423fe50c95b4bd69f809ee2da8fcd82fd960.1710400229589',
+  sign: '95d6ff5dd3d9ddc205cbab88defe40ebe889952961f1d60e760fa411e2cb39fe.1710400229589',
 };
 
 const mockClientEncryptInfo = {
@@ -185,7 +185,7 @@ describe('SurveyResponseController', () => {
             status: RECORD_STATUS.NEW,
             date: 1711025113146,
           },
-          difTime: 30518,
+          diffTime: 30518,
           data: {
             data458: '15000000000',
             data515: '115019',
@@ -220,7 +220,6 @@ describe('SurveyResponseController', () => {
       jest
         .spyOn(clientEncryptService, 'deleteEncryptInfo')
         .mockResolvedValueOnce(undefined);
-
       const result = await controller.createResponse(reqBody, {});
 
       expect(result).toEqual({ code: 200, msg: '提交成功' });
@@ -240,7 +239,7 @@ describe('SurveyResponseController', () => {
           data770: '123456@qq.com',
         },
         clientTime: reqBody.clientTime,
-        difTime: reqBody.difTime,
+        diffTime: reqBody.diffTime,
         surveyId: mockResponseSchema.pageId,
         optionTextAndId: {
           data515: [
@@ -327,7 +326,7 @@ describe('SurveyResponseController', () => {
       const reqBody = {
         ...mockSubmitData,
         password: '123457',
-        sign: '4ff02062141d92d80629eae4797ba68056f29a9709cdf59bf206776fc0971c1a.1710400229589',
+        sign: '145595d85079af3b1fb30784177c348555f442837c051d90f57a01ce1ff53c32.1710400229589',
       };
 
       jest
diff --git a/server/src/modules/surveyResponse/__test/surveyResponse.service.spec.ts b/server/src/modules/surveyResponse/__test/surveyResponse.service.spec.ts
index 91d9cb37..f91df266 100644
--- a/server/src/modules/surveyResponse/__test/surveyResponse.service.spec.ts
+++ b/server/src/modules/surveyResponse/__test/surveyResponse.service.spec.ts
@@ -33,7 +33,7 @@ describe('SurveyResponseService', () => {
     const surveyData = {
       data: {},
       clientTime: new Date(),
-      difTime: 0,
+      diffTime: 0,
       surveyId: 'testId',
       surveyPath: 'testPath',
       optionTextAndId: {},
@@ -59,7 +59,7 @@ describe('SurveyResponseService', () => {
       surveyPath: surveyData.surveyPath,
       data: surveyData.data,
       clientTime: surveyData.clientTime,
-      difTime: surveyData.difTime,
+      diffTime: surveyData.diffTime,
       pageId: surveyData.surveyId,
       secretKeys: [],
       optionTextAndId: surveyData.optionTextAndId,
diff --git a/web/components.d.ts b/web/components.d.ts
index 02b54173..a7d55fc9 100644
--- a/web/components.d.ts
+++ b/web/components.d.ts
@@ -17,6 +17,7 @@ declare module 'vue' {
     ElDialog: typeof import('element-plus/es')['ElDialog']
     ElForm: typeof import('element-plus/es')['ElForm']
     ElFormItem: typeof import('element-plus/es')['ElFormItem']
+    ElIcon: typeof import('element-plus/es')['ElIcon']
     ElInput: typeof import('element-plus/es')['ElInput']
     ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
     ElMenu: typeof import('element-plus/es')['ElMenu']
@@ -42,6 +43,8 @@ declare module 'vue' {
     ElTimePicker: typeof import('element-plus/es')['ElTimePicker']
     ElTooltip: typeof import('element-plus/es')['ElTooltip']
     ElTree: typeof import('element-plus/es')['ElTree']
+    IEpArrowLeft: typeof import('~icons/ep/arrow-left')['default']
+    IEpArrowRight: typeof import('~icons/ep/arrow-right')['default']
     IEpBottom: typeof import('~icons/ep/bottom')['default']
     IEpCheck: typeof import('~icons/ep/check')['default']
     IEpCirclePlus: typeof import('~icons/ep/circle-plus')['default']
@@ -54,6 +57,7 @@ declare module 'vue' {
     IEpMinus: typeof import('~icons/ep/minus')['default']
     IEpMonitor: typeof import('~icons/ep/monitor')['default']
     IEpMore: typeof import('~icons/ep/more')['default']
+    IEpMoreFilled: typeof import('~icons/ep/more-filled')['default']
     IEpPlus: typeof import('~icons/ep/plus')['default']
     IEpQuestionFilled: typeof import('~icons/ep/question-filled')['default']
     IEpRank: typeof import('~icons/ep/rank')['default']
diff --git a/web/src/management/config/dnd.ts b/web/src/management/config/dnd.ts
index e704e2ed..1a74ec1f 100644
--- a/web/src/management/config/dnd.ts
+++ b/web/src/management/config/dnd.ts
@@ -1 +1,2 @@
 export const DND_GROUP = 'question'
+export const QUESTION_CATALOG = 'questionCatalog'
diff --git a/web/src/management/config/questionConfig.js b/web/src/management/config/questionConfig.js
index b6964730..16604a35 100644
--- a/web/src/management/config/questionConfig.js
+++ b/web/src/management/config/questionConfig.js
@@ -53,6 +53,7 @@ export const defaultQuestionConfig = {
   star: 5,
   optionOrigin: '',
   originType: 'selected',
+  innerType:'',
   matrixOptionsRely: '',
   numberRange: {
     min: {
diff --git a/web/src/management/pages/edit/components/MaterialGroup.vue b/web/src/management/pages/edit/components/MaterialGroup.vue
index f1decd92..ebdb9329 100644
--- a/web/src/management/pages/edit/components/MaterialGroup.vue
+++ b/web/src/management/pages/edit/components/MaterialGroup.vue
@@ -14,8 +14,9 @@
         :ref="`questionWrapper-${element.field}`"
         :moduleConfig="element"
         :qIndex="element.qIndex"
+        :isFirst="index==0"
         :indexNumber="element.indexNumber"
-        :isSelected="currentEditOne === index"
+        :isSelected="currentEditOne === element.qIndex"
         :isLast="index + 1 === questionDataList.length"
         @select="handleSelect"
         @changeSeq="handleChangeSeq"
@@ -24,7 +25,7 @@
           :type="element.type"
           :moduleConfig="element"
           :indexNumber="element.indexNumber"
-          :isSelected="currentEditOne === index"
+          :isSelected="currentEditOne === element.qIndex"
           :readonly="true"
           @change="handleChange"
         ></QuestionContainerB>
@@ -39,7 +40,6 @@ import { useEditStore } from '@/management/stores/edit'
 import QuestionContainerB from '@/materials/questions/QuestionContainerB'
 import QuestionWrapper from '@/management/pages/edit/components/QuestionWrapper.vue'
 import draggable from 'vuedraggable'
-import { filterQuestionPreviewData } from '@/management/utils/index'
 import { DND_GROUP } from '@/management/config/dnd'
 
 export default defineComponent({
@@ -60,15 +60,15 @@ export default defineComponent({
       }
     }
   },
-  emits: ['change', 'select', 'changeSeq'],
+  emits: ['change', 'select', 'changeSeq','change'],
   setup(props, { emit }) {
     const editStore = useEditStore()
     const renderData = computed({
       get() {
-        return filterQuestionPreviewData(props.questionDataList)
+        return props.questionDataList; //filterQuestionPreviewData(props.questionDataList)
       },
       set(value) {
-        editStore.setQuestionDataList(value)
+        editStore.moveQuestionDataList(value)
       }
     })
     const handleSelect = (index) => {
diff --git a/web/src/management/pages/edit/components/PagingWrapper.vue b/web/src/management/pages/edit/components/PagingWrapper.vue
new file mode 100644
index 00000000..b4a35a45
--- /dev/null
+++ b/web/src/management/pages/edit/components/PagingWrapper.vue
@@ -0,0 +1,101 @@
+<template>
+  <div class="pagination-wrap">
+    <PaginationPanel v-model="schema.pagingEditOne" :readonly="props.readonly" :totalPage="pagingCount" @changePage="updatePageEditOne" :intervalCount="10">
+      <template #tooltip="{index}">
+        <div>
+          <div v-if="index != 1" class="controls-wrap-item" @click="movePaging(index, 'up')">前移一页</div>
+          <div v-if="index != pagingCount" class="mt8 controls-wrap-item" @click="movePaging(index, 'down')">后移一页</div>
+          <div class="mt8 controls-wrap-item" @click="copyPaging(index)">复制</div>
+          <div class="mt8 controls-wrap-item" @click="deletePaging(index)">删除</div>
+        </div>
+      </template>
+    </PaginationPanel>
+    <i-ep-plus v-if="!props.readonly" style="font-size: 12px;" @click="addPagingControls" class="plus-add"  />
+  </div>
+</template>
+<script setup>
+import PaginationPanel from '../modules/pagingModule/PaginationPanel.vue'
+import { useEditStore } from '@/management/stores/edit'
+import { storeToRefs } from 'pinia'
+import { QUESTION_TYPE } from '@/common/typeEnum.ts'
+
+const props = defineProps({
+  readonly: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const editStore = useEditStore();
+const { pagingCount, schema, newQuestionIndex } = storeToRefs(editStore)
+
+const { updatePagingEditOne, addPaging, createNewQuestion, addQuestion, setCurrentEditOne, deletePaging, swapArrayRanges, copyPaging } = editStore;
+
+
+
+const updatePageEditOne = (index) => {
+  setCurrentEditOne(null)
+  updatePagingEditOne(index);
+}
+
+const movePaging = (position, type) => {
+  setCurrentEditOne(null)
+  const pagingIndex = type === 'up' ? position - 1 : position + 1;
+  updatePagingEditOne(pagingIndex)
+  if (type === 'up') {
+    swapArrayRanges(position, position - 1)
+  }
+  if (type === 'down') {
+    swapArrayRanges(position + 1, position)
+  }
+}
+
+
+const addPagingControls = () => {
+  const newQuestion = createNewQuestion({ type: QUESTION_TYPE.TEXT })
+  updatePagingEditOne(pagingCount.value + 1)
+  setCurrentEditOne(null)
+  addQuestion({ question: newQuestion, index: newQuestionIndex.value })
+  setCurrentEditOne(newQuestionIndex.value)
+  addPaging()
+}
+
+
+</script>
+
+<style lang="scss" scoped>
+.mt8 {
+  margin-top: 8px
+}
+
+.controls-wrap {
+  &-item {
+    color: #4A4C5B;
+    font-size: 12px;
+    font-weight: 400;
+    cursor: pointer;
+
+    &:hover {
+      color: $primary-color;
+    }
+  }
+}
+
+.pagination-wrap {
+  display: flex;
+  align-items: center;
+  background: #FFFFFF;
+  box-shadow: 0px 2px 10px -2px rgba(82, 82, 102, 0.2);
+  border-radius: 4px;
+  margin-bottom: 12px;
+
+  .plus-add {
+    cursor: pointer;
+    margin-left: 12px;
+
+    &:hover {
+      color: $primary-color;
+    }
+  }
+}
+</style>
diff --git a/web/src/management/pages/edit/components/QuestionWrapper.vue b/web/src/management/pages/edit/components/QuestionWrapper.vue
index dea0b0ff..6b03f5ad 100644
--- a/web/src/management/pages/edit/components/QuestionWrapper.vue
+++ b/web/src/management/pages/edit/components/QuestionWrapper.vue
@@ -51,6 +51,10 @@ const props = defineProps({
     type: Boolean,
     default: false
   },
+  isFirst: {
+    type: Boolean,
+    default: false
+  },
   isLast: {
     type: Boolean,
     default: false
@@ -81,7 +85,7 @@ const showHover = computed(() => {
   return isHover.value || props.isSelected
 })
 const showUp = computed(() => {
-  return props.qIndex !== 0
+  return !props.isFirst
 })
 const showDown = computed(() => {
   return !props.isLast
diff --git a/web/src/management/pages/edit/modules/contentModule/buildData.js b/web/src/management/pages/edit/modules/contentModule/buildData.js
index e9cd602f..c9229cc2 100644
--- a/web/src/management/pages/edit/modules/contentModule/buildData.js
+++ b/web/src/management/pages/edit/modules/contentModule/buildData.js
@@ -10,6 +10,7 @@ export default function (schema) {
     'skinConf',
     'submitConf',
     'questionDataList',
+    "pagingConf",
     'logicConf'
   ])
   configData.dataConf = {
diff --git a/web/src/management/pages/edit/modules/pagingModule/PaginationPanel.vue b/web/src/management/pages/edit/modules/pagingModule/PaginationPanel.vue
new file mode 100644
index 00000000..0cfbd201
--- /dev/null
+++ b/web/src/management/pages/edit/modules/pagingModule/PaginationPanel.vue
@@ -0,0 +1,282 @@
+<template>
+  <div v-if="props.totalPage > 0" class="com-pagination">
+    <span :class="['com-pagination-item', prev_class]" @click="changePage(prev_page)">
+      <i-ep-ArrowLeft />
+    </span>
+    <template v-if="!is_more_filled">
+      <div v-for="i in firstPagination" :key="i" :class="['com-pagination-item', `page-${i}`, (now_page == i ? 'current' : '')]"
+        @click="changePage(i)">
+        <span>{{ i }}</span>
+        <div v-if="!props.readonly" :class="['moreControls']" @click.stop="showTooltipVisible(i)">
+          <i-ep-MoreFilled />
+        </div>
+      </div>
+    </template>
+    <template v-else>
+      <div v-for="i in more_filled_arr.startArr" @click="changePage(i)" :key="i"
+        :class="['com-pagination-item', ` page-${i}`, (now_page == i ? 'current' : '')]">
+        <span>{{ i }}</span>
+        <div v-if="!props.readonly" :class="['moreControls']" @click.stop="showTooltipVisible(i)">
+          <i-ep-MoreFilled />
+        </div>
+      </div>
+      <el-tooltip class="controls-wrap" effect="light" placement="bottom" :visible="moreVisible">
+        <span class="com-pagination-item" @click.stop="moreVisible = true">
+          <i-ep-MoreFilled />
+        </span>
+        <template #content>
+          <div class="bubble-wrap">
+            <div class="bubble-item" v-for="i in more_filled_arr.bubbleArr" :key="i" @click="changePage(i)">
+              <span>{{ i }}</span>
+            </div>
+          </div>
+        </template>
+      </el-tooltip>
+      <div v-for="i in more_filled_arr.endArr" :key="i"
+        :class="['com-pagination-item', `page-${i}`, (now_page == i ? 'current' : '')]" @click="changePage(i)">
+        <span>{{ i }}</span>
+        <div v-if="!props.readonly" :class="['moreControls']" @click.stop="showTooltipVisible(i)">
+          <i-ep-MoreFilled />
+        </div>
+      </div>
+    </template>
+    <span :class="['com-pagination-item', next_class]" @click="changePage(next_page)">
+      <i-ep-ArrowRight />
+    </span>
+    <el-tooltip v-if="slot.tooltip && props.readonly==false" :visible="tooltipVisible" :popper-options="{
+      modifiers: [
+        {
+          name: 'computeStyles',
+          options: {
+            adaptive: false,
+            enabled: false,
+          },
+        },
+      ],
+    }" :virtual-ref="triggerBtn" virtual-triggering effect="light" popper-class="singleton-tooltip">
+      <template #content>
+        <slot name="tooltip" :index="tooltipIndex"></slot>
+      </template>
+    </el-tooltip>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { clone } from "lodash-es";
+import { withDefaults, reactive, computed, watch, ref, onMounted, onUnmounted, nextTick, useSlots } from "vue";
+
+interface Props {
+  modelValue: number // 页码
+  totalPage?: number
+  intervalCount?: number,
+  readonly?: boolean
+}
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: 1,
+  totalPage: 1,
+  intervalCount: 8,
+  readonly:false
+});
+const emit = defineEmits(['change-page', 'update:modelValue']);
+
+const state = reactive({
+  now: props.modelValue,
+  jump: ''
+});
+
+const slot = useSlots();
+
+const moreVisible = ref(false)
+const tooltipVisible = ref(false)
+const triggerBtn = ref<EventTarget | null>(null);
+const tooltipIndex = ref(0)
+
+const now_page = computed(() => {
+  return state.now * 1;
+});
+const prev_class = computed(() => {
+  return now_page.value == 1 ? 'disabled' : '';
+});
+const next_class = computed(() => {
+  return now_page.value == props.totalPage ? 'disabled' : '';
+});
+const prev_page = computed(() => {
+  return now_page.value > 1 ? now_page.value - 1 : 1;
+});
+
+const next_page = computed(() => {
+  return now_page.value < props.totalPage ? now_page.value + 1 : props.totalPage;
+});
+
+const is_more_filled = computed(() => {
+  const intervalNum = props.totalPage - now_page.value + 1;
+  if (intervalNum >= props.intervalCount+1) {
+    return true;
+  }
+  return false;
+})
+
+
+const totalArr = computed(() => {
+  const arr = [];
+  for (let i = 0; i < props.totalPage; i++) {
+    arr.push(i + 1);
+  }
+  return arr;
+})
+
+const more_filled_arr = computed(() => {
+  let startArr = [];
+  let bubbleArr = [];
+  let endArr = [];
+  const arr = clone(totalArr.value);
+  const intervalNum = Math.round(props.intervalCount/2)
+  startArr = arr.slice(now_page.value - 1, intervalNum+now_page.value - 1);
+  endArr = arr.slice(intervalNum*-1)
+  bubbleArr = arr.slice(startArr[startArr.length-1], endArr[0]-1);
+  return {
+    startArr,
+    bubbleArr,
+    endArr
+  }
+})
+
+const firstPagination = computed(() => {
+  const arr = clone(totalArr.value);
+  return arr.splice(props.intervalCount * -1);
+})
+
+const changePage = (page: number) => {
+  state.now = page;
+  emit('update:modelValue', state.now);
+  emit('change-page', state.now);
+};
+
+const showTooltipVisible = (index:number) => {
+  if (slot.tooltip) {
+    nextTick(() => {
+      tooltipIndex.value = index;
+      triggerBtn.value = document.getElementsByClassName(`page-${index}`)[0] || null;
+      tooltipVisible.value = true;
+    })
+  }
+}
+
+const hideMoreVisible = () => {
+  moreVisible.value = false;
+}
+
+const hideTooltipVisible = () => {
+  tooltipVisible.value = false;
+}
+
+onMounted(() => {
+  document.addEventListener('click', hideMoreVisible)
+  if (slot.tooltip) {
+    document.addEventListener('click', hideTooltipVisible)
+  }
+});
+
+onUnmounted(() => {
+  document.removeEventListener('click', hideMoreVisible)
+  if (slot.tooltip) {
+    document.removeEventListener('click', hideTooltipVisible)
+  }
+});
+
+
+watch(() => props.modelValue, () => {
+  state.now = props.modelValue;
+});
+
+</script>
+<style lang="scss" scoped>
+.bubble-wrap {
+  .bubble-item {
+    max-width: 100px;
+    min-width: 10px;
+    text-align: center;
+    cursor: pointer;
+    padding: 4px 8px;
+    border-radius: 6px;
+
+    &:hover {
+      background-color: #cccc;
+    }
+  }
+}
+
+.com-pagination {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 0;
+  user-select: none;
+  .moreControls{
+    color:#6E707C;
+    display: none;
+
+    position: absolute;
+    left:22px;
+    svg{
+      transform: rotate(90deg);
+      font-size: 10px;
+    }
+  }
+  &-item {
+    display: inline-block;
+    position: relative;
+    // padding: 0 4px;
+    min-width: 32px;
+    height: 32px;
+    color: #303133;
+    border-radius: 2px;
+    cursor: pointer;
+    text-align: center;
+    font-size: 14px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    &:hover {
+      color: $primary-color;
+      .moreControls{
+        display: block;
+      }
+    }
+
+    &.active {
+      color: $primary-color;
+      .moreControls{
+        display: block;
+      }
+    }
+
+    svg {
+      display: block;
+      font-size: 12px;
+      font-weight: bold;
+      width: inherit;
+      cursor: pointer;
+
+      &:hover {
+        color: $primary-color;
+      }
+    }
+  }
+
+  .disabled,
+  .disabled:hover {
+    svg{
+      cursor: not-allowed;
+      color:#303133 !important;
+    }
+  }
+
+  .current,
+  .current:hover {
+    color: $primary-color;
+  }
+
+}
+</style>
\ No newline at end of file
diff --git a/web/src/management/pages/edit/modules/questionModule/PreviewPanel.vue b/web/src/management/pages/edit/modules/questionModule/PreviewPanel.vue
index a8ca36a2..94acb146 100644
--- a/web/src/management/pages/edit/modules/questionModule/PreviewPanel.vue
+++ b/web/src/management/pages/edit/modules/questionModule/PreviewPanel.vue
@@ -1,8 +1,12 @@
 <template>
   <div class="main-operation" @click="onMainClick" ref="mainOperation">
+    <div class="pagination-wrapper">
+      <PagingWrapper :readonly="false"/>
+    </div>
     <div class="operation-wrapper" ref="operationWrapper">
       <div class="box content" ref="box">
         <MainTitle
+          v-if="pagingEditOne==1"
           :bannerConf="bannerConf"
           :readonly="false"
           :is-selected="currentEditOne === 'mainTitle'"
@@ -11,7 +15,7 @@
         />
         <MaterialGroup
           :current-edit-one="parseInt(currentEditOne)"
-          :questionDataList="questionDataList"
+          :questionDataList="pagingQuestionData"
           @select="setCurrentEditOne"
           @change="handleChange"
           @changeSeq="onQuestionOperation"
@@ -21,6 +25,7 @@
           :submit-conf="submitConf"
           :readonly="false"
           :skin-conf="skinConf"
+          :is-finally-page="isFinallyPage"
           :is-selected="currentEditOne === 'submit'"
           @select="setCurrentEditOne('submit')"
         />
@@ -32,6 +37,7 @@
 <script setup>
 import { ref, watch, toRefs } from 'vue'
 import communalLoader from '@materials/communals/communalLoader.js'
+import PagingWrapper from '@/management/pages/edit/components/PagingWrapper.vue'
 import MaterialGroup from '@/management/pages/edit/components/MaterialGroup.vue'
 import { storeToRefs } from 'pinia'
 import { useEditStore } from '@/management/stores/edit'
@@ -40,13 +46,15 @@ const MainTitle = communalLoader.loadComponent('MainTitle')
 const SubmitButton = communalLoader.loadComponent('SubmitButton')
 
 const editStore = useEditStore()
-const { questionDataList, currentEditOne, currentEditKey } = storeToRefs(editStore)
+const { currentEditOne, currentEditKey,pagingQuestionData,isFinallyPage,pagingEditOne } = storeToRefs(editStore)
 const { schema, changeSchema, moveQuestion, copyQuestion, deleteQuestion, setCurrentEditOne } =
   editStore
 const mainOperation = ref(null)
 const materialGroup = ref(null)
 
 const { bannerConf, submitConf, skinConf } = toRefs(schema)
+
+
 // const autoScrollData = computed(() => {
 //   return {
 //     currentEditOne: currentEditOne.value,
@@ -138,6 +146,13 @@ watch(
   align-items: center;
   background-color: #f6f7f9;
 }
+.pagination-wrapper{
+    width: 90%;
+    padding-right: 30px;
+    margin-right: -30px;
+    position: relative;
+    top: 50px;
+  }
 
 .toolbar {
   width: 100%;
diff --git a/web/src/management/pages/edit/modules/questionModule/components/QuestionCatalog.vue b/web/src/management/pages/edit/modules/questionModule/components/QuestionCatalog.vue
index 3d4ac3dc..318e7c8f 100644
--- a/web/src/management/pages/edit/modules/questionModule/components/QuestionCatalog.vue
+++ b/web/src/management/pages/edit/modules/questionModule/components/QuestionCatalog.vue
@@ -1,68 +1,95 @@
 <template>
   <div class="question-catalog-wrapper">
-    <draggable
-      :list="renderData"
-      @end="handleDragEnd"
-      itemKey="field"
-      handle=".draggHandle"
-      host-class="catalog-item-ghost"
-    >
-      <template #item="{ element, index }">
-        <CatalogItem
-          :title="element.title"
-          :indexNumber="element.indexNumber"
-          :showIndex="element.showIndex"
-          @select="setCurrentEditOne(index)"
-        />
-      </template>
-    </draggable>
+    <el-collapse>
+      <el-collapse-item v-for="(v, i) in renderData" :key="v" :title="`第${i + 1}页`" :name="i + 1">
+        <draggable v-model="renderData[i]"  itemKey="field" :group="QUESTION_CATALOG" handle=".draggHandle"
+          host-class="catalog-item-ghost">
+          <template #item="{ element }">
+            <CatalogItem :title="element.title" :indexNumber="element.indexNumber" :showIndex="element.showIndex"
+              @select="setPagingOneEdit(element.qIndex, i + 1)" />
+          </template>
+        </draggable>
+      </el-collapse-item>
+    </el-collapse>
+
   </div>
 </template>
 <script setup lang="ts">
-import { computed } from 'vue'
+import {  watch, ref } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useEditStore } from '@/management/stores/edit'
 import draggable from 'vuedraggable'
 
 import CatalogItem from './CatalogItem.vue'
-import { filterQuestionPreviewData } from '@/management/utils/index'
+import { QUESTION_CATALOG } from '@/management/config/dnd'
 
 const editStore = useEditStore()
-const { questionDataList, currentEditOne } = storeToRefs(editStore)
-const { moveQuestion, setCurrentEditOne } = editStore
-const renderData = computed(() => {
-  return filterQuestionPreviewData(questionDataList.value) || []
+const { questionDataList, pagingConf } = storeToRefs(editStore)
+const { setCurrentEditOne, getPagingQuestionData, updatePagingEditOne,setPaging,compareQuestionSeq } = editStore
+
+const renderData: any = ref([])
+
+const setPagingOneEdit = (qIndex: number, pagingIndex: number) => {
+  updatePagingEditOne(pagingIndex)
+  setCurrentEditOne(qIndex)
+}
+
+
+watch(() => [pagingConf.value,questionDataList.value], () => {
+  renderData.value = [];
+  for (let index = 0; index < pagingConf.value.length; index++) {
+    renderData.value.push(getPagingQuestionData(index + 1))
+  }
+},{
+  deep: true,
+  immediate: true
 })
 
-const handleDragEnd = ({ newIndex, oldIndex }: any) => {
-  if (currentEditOne.value === oldIndex) {
-    setCurrentEditOne(newIndex)
-  }
-
-  moveQuestion({
-    index: oldIndex,
-    range: newIndex - oldIndex
+watch(() => renderData.value, (newVal) => {
+  if (newVal.length == 0) return;
+  let pagingData: Array<number> = [];
+  let questionList: Array<any> = [];
+  newVal.map((v:any) => {
+    pagingData.push(v.length)
+    questionList.push(...v)
   })
-}
+  setPaging(pagingData)
+  compareQuestionSeq(questionList)
+
+}, {
+  deep: true
+})
+
+
 </script>
 <style lang="scss" scoped>
 .question-catalog-wrapper {
   padding-bottom: 400px; // 考试题有个上拉框会盖住，改成和题型一致的
+
   .catelog-first-page {
     font-size: 12px;
     color: #999999;
     padding-bottom: 8px;
   }
+
   .catalog-item-ghost {
     &.question-catalog-item {
       .catalog-item {
         color: $normal-color-light;
+
         .draggHandle {
           color: $normal-color-light;
         }
       }
     }
   }
+
+  :deep(.el-collapse-item__header) {
+    font-size: 14px;
+    color: #6E707C;
+    font-weight: 500;
+  }
+
   .catalog-item-dragging {
     opacity: 1;
     background: #ffffff;
diff --git a/web/src/management/pages/edit/modules/questionModule/components/TypeList.vue b/web/src/management/pages/edit/modules/questionModule/components/TypeList.vue
index 81d038f6..4af8025a 100644
--- a/web/src/management/pages/edit/modules/questionModule/components/TypeList.vue
+++ b/web/src/management/pages/edit/modules/questionModule/components/TypeList.vue
@@ -10,7 +10,7 @@
         class="questiontype-list"
         :list="item.questionList"
         :group="{ name: DND_GROUP, pull: 'clone', put: false }"
-        :clone="getNewQuestion"
+        :clone="createNewQuestion"
         item-key="path"
       >
         <template #item="{ element }">
@@ -44,44 +44,26 @@ import draggable from 'vuedraggable'
 import { DND_GROUP } from '@/management/config/dnd'
 
 import questionMenuConfig, { questionTypeList } from '@/management/config/questionMenuConfig'
-import { getQuestionByType } from '@/management/utils/index'
 import { storeToRefs } from 'pinia'
 import { useEditStore } from '@/management/stores/edit'
-import { isNumber as _isNumber } from 'lodash-es'
-import { computed, ref } from 'vue'
-import { QUESTION_TYPE } from '@/common/typeEnum.ts'
+import {  ref } from 'vue'
 
 const editStore = useEditStore()
-const { questionDataList, currentEditOne } = storeToRefs(editStore)
-const { addQuestion, setCurrentEditOne } = editStore
+const { newQuestionIndex } = storeToRefs(editStore)
+const { addQuestion, setCurrentEditOne,createNewQuestion } = editStore
 
 const activeNames = ref([0, 1])
 const previewImg = ref('')
 const isShowPreviewImage = ref(false)
 const previewTop = ref(0)
-const newQuestionIndex = computed(() => {
-  const index = _isNumber(currentEditOne.value)
-    ? currentEditOne.value + 1
-    : questionDataList.value.length
-  return index
-})
 
 questionLoader.init({
   typeList: questionTypeList.map((item) => item.type)
 })
 
-const getNewQuestion = ({ type }) => {
-  const fields = questionDataList.value.map((item) => item.field)
-  const newQuestion = getQuestionByType(type, fields)
-  newQuestion.title = newQuestion.title = `标题${newQuestionIndex.value + 1}`
-  if (type === QUESTION_TYPE.VOTE) {
-    newQuestion.innerType = QUESTION_TYPE.RADIO
-  }
-  return newQuestion
-}
 
 const onQuestionType = ({ type }) => {
-  const newQuestion = getNewQuestion({ type })
+  const newQuestion = createNewQuestion({ type })
   addQuestion({ question: newQuestion, index: newQuestionIndex.value })
   setCurrentEditOne(newQuestionIndex.value)
 }
diff --git a/web/src/management/pages/edit/modules/skinModule/PreviewPanel.vue b/web/src/management/pages/edit/modules/skinModule/PreviewPanel.vue
index 84a4e7cd..e6c9fc12 100644
--- a/web/src/management/pages/edit/modules/skinModule/PreviewPanel.vue
+++ b/web/src/management/pages/edit/modules/skinModule/PreviewPanel.vue
@@ -1,23 +1,18 @@
 <template>
   <div class="main-operation">
+    <div class="pagination-wrapper">
+      <PagingWrapper :readonly="true" />
+    </div>
     <div class="operation-wrapper">
       <div class="box" ref="box">
         <div class="mask"></div>
-        <HeaderContent :bannerConf="bannerConf" :readonly="false" />
+        <HeaderContent v-if="pagingEditOne==1" :bannerConf="bannerConf" :readonly="false" />
         <div class="content">
-          <MainTitle :isSelected="false" :bannerConf="bannerConf" :readonly="false" />
-          <MaterialGroup :questionDataList="questionDataList" ref="MaterialGroup" />
-          <SubmitButton
-            :submit-conf="submitConf"
-            :skin-conf="skinConf"
-            :readonly="false"
-            :is-selected="currentEditOne === 'submit'"
-          />
-          <LogoIcon
-            :logo-conf="bottomConf"
-            :readonly="false"
-            :is-selected="currentEditOne === 'logo'"
-          />
+          <MainTitle v-if="pagingEditOne==1"  :isSelected="false" :bannerConf="bannerConf" :readonly="false" />
+          <MaterialGroup :questionDataList="pagingQuestionData" ref="MaterialGroup" />
+          <SubmitButton :submit-conf="submitConf" :skin-conf="skinConf" :readonly="false"
+            :is-selected="currentEditOne === 'submit'" :is-finally-page="isFinallyPage" />
+          <LogoIcon :logo-conf="bottomConf" :readonly="false" :is-selected="currentEditOne === 'logo'" />
         </div>
       </div>
     </div>
@@ -26,6 +21,7 @@
 <script>
 import { defineComponent, toRefs } from 'vue'
 import MaterialGroup from '@/management/pages/edit/components/MaterialGroup.vue'
+import PagingWrapper from '@/management/pages/edit/components/PagingWrapper.vue'
 import { storeToRefs } from 'pinia'
 import { useEditStore } from '@/management/stores/edit'
 import communalLoader from '@materials/communals/communalLoader.js'
@@ -38,6 +34,7 @@ const LogoIcon = () => communalLoader.loadComponent('LogoIcon')
 export default defineComponent({
   components: {
     MaterialGroup,
+    PagingWrapper,
     HeaderContent: HeaderContent(),
     MainTitle: MainTitle(),
     SubmitButton: SubmitButton(),
@@ -45,7 +42,7 @@ export default defineComponent({
   },
   setup() {
     const editStore = useEditStore()
-    const { questionDataList, currentEditOne, currentEditKey } = storeToRefs(editStore)
+    const { pagingQuestionData, currentEditOne, currentEditKey,isFinallyPage,pagingEditOne } = storeToRefs(editStore)
     const { schema } = editStore
     const { bannerConf, submitConf, skinConf, bottomConf } = toRefs(schema)
 
@@ -54,9 +51,11 @@ export default defineComponent({
       submitConf,
       bottomConf,
       skinConf,
-      questionDataList,
+      pagingQuestionData,
       currentEditOne,
-      currentEditKey
+      currentEditKey,
+      isFinallyPage,
+      pagingEditOne
     }
   },
   watch: {
@@ -92,6 +91,12 @@ export default defineComponent({
   background-color: #f6f7f9;
 }
 
+.pagination-wrapper {
+  position: relative;
+  top: 50px;
+  width: 90%;
+}
+
 .toolbar {
   width: 100%;
   height: 38px;
diff --git a/web/src/management/stores/edit.ts b/web/src/management/stores/edit.ts
index 38a766df..32d1deca 100644
--- a/web/src/management/stores/edit.ts
+++ b/web/src/management/stores/edit.ts
@@ -1,6 +1,9 @@
 import { type Ref, ref, reactive, toRef, computed } from 'vue'
 import { defineStore } from 'pinia'
-import { merge as _merge, cloneDeep as _cloneDeep, set as _set } from 'lodash-es'
+import { merge as _merge, cloneDeep as _cloneDeep, set as _set,isNumber as _isNumber } from 'lodash-es'
+import { QUESTION_TYPE } from '@/common/typeEnum'
+import { getQuestionByType } from '@/management/utils/index'
+import { filterQuestionPreviewData } from '@/management/utils/index'
 
 import { getSurveyById } from '@/management/api/survey'
 import { getNewField } from '@/management/utils'
@@ -71,8 +74,10 @@ function useInitializeSchema(surveyId: Ref<string>) {
       link: ''
     },
     questionDataList: [],
+    pagingEditOne: 1,
+    pagingConf:[], // 分页逻辑
     logicConf: {
-      showLogicConf: []
+      showLogicConf: [],
     }
   })
 
@@ -84,7 +89,9 @@ function useInitializeSchema(surveyId: Ref<string>) {
     schema.baseConf = _merge({}, schema.baseConf, codeData.baseConf)
     schema.submitConf = _merge({}, schema.submitConf, codeData.submitConf)
     schema.questionDataList = codeData.questionDataList || []
-    schema.logicConf = codeData.logicConf
+    schema.logicConf = codeData.logicConf;
+    schema.pagingEditOne = 1;
+    schema.pagingConf = codeData.pagingConf;
   }
 
   async function getSchemaFromRemote() {
@@ -92,15 +99,19 @@ function useInitializeSchema(surveyId: Ref<string>) {
     if (res.code === 200) {
       const metaData = res.data.surveyMetaRes
       document.title = metaData.title
+      const data = res.data.surveyConfRes.code
       const {
-        bannerConf,
-        bottomConf,
-        skinConf,
-        baseConf,
-        submitConf,
-        dataConf,
-        logicConf = {}
-      } = res.data.surveyConfRes.code
+          bannerConf,
+          bottomConf,
+          skinConf,
+          baseConf,
+          submitConf,
+          dataConf,
+          logicConf = {}
+        } = data
+      if (!data.pagingConf || data.pagingConf.length === 0) { 
+        data.pagingConf =  [dataConf.dataList.length]
+      }
       initSchema({
         metaData,
         codeData: {
@@ -110,6 +121,7 @@ function useInitializeSchema(surveyId: Ref<string>) {
           baseConf,
           submitConf,
           questionDataList: dataConf.dataList,
+          pagingConf: data.pagingConf,
           logicConf
         }
       })
@@ -125,7 +137,7 @@ function useInitializeSchema(surveyId: Ref<string>) {
   }
 }
 
-function useQuestionDataListOperations(questionDataList: Ref<any[]>, updateTime: () => void) {
+function useQuestionDataListOperations(questionDataList: Ref<any[]>, updateTime: () => void,pagingOperations:(type:string)=>void) {
   function copyQuestion({ index }: { index: number }) {
     const newQuestion = _cloneDeep(questionDataList.value[index])
     newQuestion.field = getNewField(questionDataList.value.map((item) => item.field))
@@ -134,10 +146,12 @@ function useQuestionDataListOperations(questionDataList: Ref<any[]>, updateTime:
 
   function addQuestion({ question, index }: { question: any; index: number }) {
     questionDataList.value.splice(index, 0, question)
+    pagingOperations('add')
     updateTime()
   }
 
   function deleteQuestion({ index }: { index: number }) {
+    pagingOperations('remove')
     questionDataList.value.splice(index, 1)
     updateTime()
   }
@@ -266,6 +280,138 @@ function useCurrentEdit({
     changeCurrentEditStatus
   }
 }
+function usePagingEdit({
+  schema,
+  questionDataList
+}: {
+    schema: any,
+    questionDataList: Ref<any[]>
+},updateTime: () => void) { 
+  const pagingConf = computed(() => schema.pagingConf)
+  const pagingEditOne = computed(() => schema.pagingEditOne)
+  const isFinallyPage = computed(() => { 
+    return pagingEditOne.value === pagingConf.value.length;
+  })
+  const pagingCount = computed(() => pagingConf.value.length || 0)
+
+  const pagingQuestionData = computed(() => {
+    return getPagingQuestionData(pagingEditOne.value)
+  })
+
+  const getPagingQuestionData = (index:number) => {
+    const { startIndex, endIndex } = getSorter(index)
+    return filterQuestionPreviewData(questionDataList.value).slice(startIndex,endIndex)
+  }
+
+  const getSorter = (index?:number) => {
+    let startIndex = 0;
+    const newPagingEditOne = index || pagingEditOne.value;
+    const endIndex = pagingConf.value[newPagingEditOne - 1];
+
+    for (let index = 0; index < pagingConf.value.length; index++) {
+      const item = pagingConf.value[index];
+      if ((newPagingEditOne - 1) == index) {
+        break;
+      }
+      startIndex+=item
+    }
+    return {
+      startIndex,
+      endIndex:startIndex + endIndex
+    }
+  }
+
+  const addPaging = () => { 
+    schema.pagingConf.push(1)
+  }
+
+  const updatePagingEditOne = (index: number) => {
+    schema.pagingEditOne = index;
+  }
+
+  const deletePaging = (index: number) => { 
+    if (pagingConf.value.length <= 1) return
+    const { startIndex, endIndex } = getSorter(index)
+    const newQuestion = _cloneDeep(questionDataList.value)
+    newQuestion.splice(startIndex, endIndex-startIndex)
+    updatePagingEditOne(1);
+    schema.pagingConf.splice(index-1, 1)
+    questionDataList.value = newQuestion
+    updateTime();
+  }
+
+  const swapArrayRanges = (index:number,range:number) => {
+    const { startIndex:start1,endIndex:end1 } = getSorter(index)
+    const { startIndex:start2,endIndex:end2 } = getSorter(range)
+    const newQuestion = _cloneDeep(questionDataList.value)
+    const range1 = newQuestion.slice(start1, end1);
+    const range2 = newQuestion.slice(start2, end2 );
+    newQuestion.splice(start1, range1.length, ...range2);
+    newQuestion.splice(start2, range2.length, ...range1);
+    questionDataList.value = newQuestion
+    const rangeCount = schema.pagingConf[range-1]
+    schema.pagingConf[range-1] = schema.pagingConf[index-1]
+    schema.pagingConf[index - 1] = rangeCount;
+    updateTime();
+  }
+
+  const copyPaging = (index: number) => {
+    
+    const newQuestionList = _cloneDeep(getPagingQuestionData(index))
+    newQuestionList.forEach((item) => { 
+      item.field = getNewField(questionDataList.value.map((item) => item.field))
+    })
+    schema.pagingConf.splice(index, 0, newQuestionList.length)
+    const { endIndex } = getSorter(index)
+    questionDataList.value.splice(endIndex, 0, ...newQuestionList)
+    updateTime();
+  }
+
+  const pagingOperations = (type:string) => {
+    const count = pagingConf.value[pagingEditOne.value - 1];
+    if (type == 'add') {
+      if (count!=undefined) {
+        schema.pagingConf[pagingEditOne.value - 1] = count + 1; ;
+      }
+      return
+    }
+    if (type == 'remove') {
+      if (count) { 
+        schema.pagingConf[pagingEditOne.value - 1] = count - 1;
+      }
+    }
+  }
+
+  const setPaging = (data: Array<number>) => {
+    for (let index = 0; index < pagingConf.value.length; index++) {
+      const newIndex = data[index];
+      const oldIndex = pagingConf.value[index];
+      if (newIndex != oldIndex) {
+        schema.pagingConf[index] = newIndex;
+      }
+    }
+  }
+
+
+  return {
+    pagingEditOne,
+    pagingConf,
+    isFinallyPage,
+    pagingCount,
+    pagingQuestionData,
+    getSorter,
+    updatePagingEditOne,
+    deletePaging,
+    addPaging,
+    copyPaging,
+    getPagingQuestionData,
+    pagingOperations,
+    swapArrayRanges,
+    setPaging
+  }
+
+}
+
 
 type IBannerItem = {
   name: string
@@ -325,11 +471,72 @@ export const useEditStore = defineStore('edit', () => {
     schemaUpdateTime.value = Date.now()
   }
 
-  const { copyQuestion, addQuestion, deleteQuestion, moveQuestion } = useQuestionDataListOperations(
-    questionDataList,
-    updateTime
+  const { pagingEditOne, pagingConf, isFinallyPage, pagingCount, pagingQuestionData, getSorter,
+    updatePagingEditOne, deletePaging,pagingOperations,addPaging,getPagingQuestionData,copyPaging,swapArrayRanges,setPaging }= usePagingEdit({ schema, questionDataList },updateTime)
+
+  const { copyQuestion, addQuestion, deleteQuestion, moveQuestion} = useQuestionDataListOperations(
+      questionDataList,
+      updateTime,
+      pagingOperations
   )
 
+
+  function moveQuestionDataList(data: any) {
+    const { startIndex, endIndex } = getSorter()
+    const newData = [...questionDataList.value.slice(0, startIndex), ...data, ...questionDataList.value.slice(endIndex)];
+    const countTotal:number = (schema.pagingConf as Array<number>).reduce((v:number, i:number) => v + i)
+    if (countTotal != newData.length) {
+      schema.pagingConf[pagingEditOne.value - 1] = schema.pagingConf[pagingEditOne.value - 1] + 1 as never;
+    }
+    setQuestionDataList(newData)
+  }
+
+  const compareQuestionSeq = (val:Array<any>) => {
+    const newSeq: Array<string> = [];
+    const oldSeq: Array<string> = [];
+    let status = false;
+    val.map(v => {
+      newSeq.push(v.field)
+    });
+    (questionDataList.value as Array<any>).map(v => {
+      oldSeq.push(v.field)
+    })
+    for (let index = 0; index < newSeq.length; index++) {
+      if (newSeq[index] !== oldSeq[index]) {
+        status = true;
+        break;
+      }
+    }
+    if (status) {
+      setQuestionDataList(val);
+    }
+  }
+
+  const newQuestionIndex = computed(() => {
+    if (_isNumber(currentEditOne.value)) {
+      return  currentEditOne.value + 1
+    } else {
+      const pagingConf = schema.pagingConf
+      const questCount = pagingConf[schema.pagingEditOne - 1];
+      const { startIndex,endIndex } = getSorter();
+      if (!questCount) {
+        return startIndex
+      }
+      return endIndex
+    }
+  })
+  
+  const createNewQuestion = ({type}:{type:QUESTION_TYPE}) => {
+    const fields = questionDataList.value.map((item:any) => item.field)
+    const newQuestion = getQuestionByType(type, fields)
+    newQuestion.title = newQuestion.title = `标题${newQuestionIndex.value + 1}`
+    if (type === QUESTION_TYPE.VOTE) {
+      newQuestion.innerType = QUESTION_TYPE.RADIO
+    }
+    return newQuestion
+  }
+
+
   function changeSchema({ key, value }: { key: string; value: any }) {
     _set(schema, key, value)
     updateTime()
@@ -354,12 +561,27 @@ export const useEditStore = defineStore('edit', () => {
     currentEditKey,
     currentEditStatus,
     currentEditMeta,
+    newQuestionIndex,
     setCurrentEditOne,
     changeCurrentEditStatus,
+    pagingEditOne,
+    pagingConf,
+    isFinallyPage,
+    pagingCount,
+    pagingQuestionData,
+    getSorter,
+    updatePagingEditOne,
+    deletePaging,
+    addPaging,
+    getPagingQuestionData,
+    copyPaging,
+    swapArrayRanges,
+    setPaging,
     schemaUpdateTime,
     schema,
     questionDataList,
     setQuestionDataList,
+    moveQuestionDataList,
     init,
     initSchema,
     getSchemaFromRemote,
@@ -367,7 +589,9 @@ export const useEditStore = defineStore('edit', () => {
     addQuestion,
     deleteQuestion,
     moveQuestion,
+    createNewQuestion,
     changeSchema,
-    changeThemePreset
+    changeThemePreset,
+    compareQuestionSeq
   }
 })
diff --git a/web/src/materials/communals/widgets/SubmitButton/index.jsx b/web/src/materials/communals/widgets/SubmitButton/index.jsx
index 42c034a2..6e19b3f9 100644
--- a/web/src/materials/communals/widgets/SubmitButton/index.jsx
+++ b/web/src/materials/communals/widgets/SubmitButton/index.jsx
@@ -10,6 +10,7 @@ export default defineComponent({
       type: Object,
       default: () => ({})
     },
+    isFinallyPage: Boolean,
     readonly: Boolean,
     validate: Function,
     renderData: Array
@@ -41,11 +42,11 @@ export default defineComponent({
     }
   },
   render() {
-    const { submitConf } = this.props
+    const { submitConf,isFinallyPage } = this.props
     return (
       <div class={['submit-warp', 'preview-submit_wrapper']} onClick={this.handleClick}>
         <button class="submit-btn" type="primary" onClick={this.submit}>
-          {submitConf.submitTitle}
+          {isFinallyPage ?  submitConf.submitTitle : '下一页'}
         </button>
       </div>
     )
diff --git a/web/src/render/pages/IndexPage.vue b/web/src/render/pages/IndexPage.vue
index a692975e..51c5bb67 100644
--- a/web/src/render/pages/IndexPage.vue
+++ b/web/src/render/pages/IndexPage.vue
@@ -16,7 +16,7 @@ const surveyStore = useSurveyStore()
 const loadData = (res: any, surveyPath: string) => {
   if (res.code === 200) {
     const data = res.data
-    const { bannerConf, baseConf, bottomConf, dataConf, skinConf, submitConf, logicConf } =
+    const { bannerConf, baseConf, bottomConf, dataConf, skinConf, submitConf, logicConf,pagingConf } =
       data.code
     const questionData = {
       bannerConf,
@@ -24,7 +24,12 @@ const loadData = (res: any, surveyPath: string) => {
       bottomConf,
       dataConf,
       skinConf,
-      submitConf
+      submitConf,
+      pagingConf
+    }
+
+    if(!pagingConf || pagingConf?.length == 0){
+      questionData.pagingConf = [dataConf.dataList.length]
     }
 
     document.title = data.title
diff --git a/web/src/render/pages/RenderPage.vue b/web/src/render/pages/RenderPage.vue
index f6c411b4..14f445fb 100644
--- a/web/src/render/pages/RenderPage.vue
+++ b/web/src/render/pages/RenderPage.vue
@@ -2,14 +2,15 @@
   <div class="index">
     <ProgressBar />
     <div class="wrapper" ref="boxRef">
-      <HeaderContent :bannerConf="bannerConf" :readonly="true" />
+      <HeaderContent v-if="pagingIndex==1" :bannerConf="bannerConf" :readonly="true" />
       <div class="content">
-        <MainTitle :bannerConf="bannerConf" :readonly="true"></MainTitle>
+        <MainTitle v-if="pagingIndex==1"  :bannerConf="bannerConf" :readonly="true"></MainTitle>
         <MainRenderer ref="mainRef"></MainRenderer>
         <SubmitButton
           :validate="validate"
           :submitConf="submitConf"
           :readonly="true"
+          :isFinallyPage="isFinallyPage"
           :renderData="renderData"
           @submit="handleSubmit"
         ></SubmitButton>
@@ -61,14 +62,11 @@ const router = useRouter();
 const surveyStore = useSurveyStore();
 const questionStore = useQuestionStore();
 
-const renderData = computed(() => questionStore.renderData);
-const {
-  bannerConf,
-  submitConf,
-  bottomConf: logoConf,
-  whiteData,
-} = storeToRefs(surveyStore);
-const surveyPath = computed(() => surveyStore.surveyPath || "");
+const renderData = computed(() => questionStore.renderData)
+const isFinallyPage = computed(() => questionStore.isFinallyPage)
+const pagingIndex = computed(() => questionStore.pagingIndex)
+const { bannerConf, submitConf, bottomConf: logoConf, whiteData } = storeToRefs(surveyStore)
+const surveyPath = computed(() => surveyStore.surveyPath || '')
 
 const validate = (cbk: (v: boolean) => void) => {
   const index = 0;
@@ -126,9 +124,12 @@ const submitSurver = async () => {
 };
 
 const handleSubmit = () => {
-  const confirmAgain = (surveyStore.submitConf as any).confirmAgain;
-  const { again_text, is_again } = confirmAgain;
-
+  const confirmAgain = (surveyStore.submitConf as any).confirmAgain
+  const { again_text, is_again } = confirmAgain
+  if (!isFinallyPage.value) {
+    questionStore.addPagingIndex();
+    return
+  }
   if (is_again) {
     confirm({
       title: again_text,
diff --git a/web/src/render/stores/question.js b/web/src/render/stores/question.js
index 8cd603fb..f1f790b6 100644
--- a/web/src/render/stores/question.js
+++ b/web/src/render/stores/question.js
@@ -10,9 +10,10 @@ export const useQuestionStore = defineStore('question', () => {
   const voteMap = ref({})
   const questionData = ref(null)
   const questionSeq = ref([]) // 题目的顺序，因为可能会有分页的情况，所以是一个二维数组[[qid1, qid2], [qid3,qid4]]
+  const pagingIndex = ref(1) // 当前分页的索引
 
   // 题目列表
-  const renderData = computed(() => {
+  const questionList = computed(() => {
     let index = 1
     return (
       questionSeq.value &&
@@ -38,6 +39,41 @@ export const useQuestionStore = defineStore('question', () => {
     )
   })
 
+  const renderData = computed(() => {
+    const { startIndex, endIndex } = getSorter()
+    const data = questionList.value[0];
+    if(!data || !Array.isArray(data) ||data.length === 0) return []
+    return [data.slice(startIndex,endIndex)]
+  })
+
+  const isFinallyPage = computed(() => { 
+    const surveyStore = useSurveyStore()
+    return pagingIndex.value === surveyStore.pagingConf.length;
+  })
+
+  const addPagingIndex = () => { 
+    pagingIndex.value++
+  }
+
+  const getSorter = () => {
+    let startIndex = 0;
+    const surveyStore = useSurveyStore()
+    const newPagingEditOne =  pagingIndex.value;
+    const endIndex = surveyStore.pagingConf[newPagingEditOne - 1];
+
+    for (let index = 0; index < surveyStore.pagingConf.length; index++) {
+      const item = surveyStore.pagingConf[index];
+      if ((newPagingEditOne - 1) == index) {
+        break;
+      }
+      startIndex+=item
+    }
+    return {
+      startIndex,
+      endIndex:startIndex + endIndex
+    }
+  }
+
   const setQuestionData = (data) => {
     questionData.value = data
   }
@@ -146,6 +182,9 @@ export const useQuestionStore = defineStore('question', () => {
     questionData,
     questionSeq,
     renderData,
+    isFinallyPage,
+    pagingIndex,
+    addPagingIndex,
     setQuestionData,
     changeSelectMoreData,
     setQuestionSeq,
diff --git a/web/src/render/stores/survey.js b/web/src/render/stores/survey.js
index 23c49c31..ff79eaf9 100644
--- a/web/src/render/stores/survey.js
+++ b/web/src/render/stores/survey.js
@@ -38,6 +38,7 @@ export const useSurveyStore = defineStore('survey', () => {
   const submitConf = ref({})
   const formValues = ref({})
   const whiteData = ref({})
+  const pagingConf = ref([])
 
   const router = useRouter()
   const questionStore = useQuestionStore()
@@ -127,10 +128,10 @@ export const useSurveyStore = defineStore('survey', () => {
         'dataConf',
         'skinConf',
         'submitConf',
-        'whiteData'
+        'whiteData',
+        "pagingConf"
       ])
     )
-
     questionStore.questionData = questionData
     questionStore.questionSeq = questionSeq
 
@@ -144,7 +145,7 @@ export const useSurveyStore = defineStore('survey', () => {
     submitConf.value = option.submitConf
     formValues.value = _formValues
     whiteData.value = option.whiteData
-
+    pagingConf.value = option.pagingConf
     // 获取已投票数据
     questionStore.initVoteData()
   }
@@ -171,6 +172,7 @@ export const useSurveyStore = defineStore('survey', () => {
     submitConf,
     formValues,
     whiteData,
+    pagingConf,
 
     initSurvey,
     changeData,