答题卡工具优化

card/assets/styles/card-design.scss

@@ -7,6 +7,7 @@
   .page-box {
     // box-shadow: $--shadow-light;
     // box-shadow: 0 0 1px #333;
+    margin-bottom: 10px;
     &::before {
       content: "";
       position: absolute;
@@ -377,8 +378,14 @@
 }
 
 .design-main {
-  padding: 70px 20px 50px 260px;
-  min-height: 100%;
+  padding: 70px 20px 20px 260px;
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  overflow: auto;
+  background-color: $--color-background;
 }
 
 .design-control {

card/components/CardDesign.vue

@@ -74,7 +74,7 @@
         </div> -->
     </div>
 
-    <div class="design-main">
+    <div id="design-main" class="design-main">
       <!-- menus -->
       <div class="design-control">
         <div class="control-left tab-btns">
@@ -112,18 +112,20 @@
       <div class="design-body">
         <!-- 注意：后台要替换内容，改类名时，要注意 -->
         <div
+          v-for="(page, pageNo) in pages"
+          :key="pageNo"
+          :id="`edit-page-box-${pageNo}`"
           :class="[
             'page-box',
             `page-box-${cardConfig.pageSize}`,
-            `page-box-${curPageNo % 2}`,
+            `page-box-${pageNo % 2}`,
             { 'page-box-less': pages.length <= 2 },
           ]"
-          v-if="curPage.locators"
         >
           <!-- locator -->
           <div class="page-locator page-locator-top">
             <div
-              v-for="elem in curPage.locators.top"
+              v-for="elem in page.locators.top"
               :key="elem.id"
               :id="elem.id"
               class="page-locator-item"
@@ -131,7 +133,7 @@
           </div>
           <div class="page-locator page-locator-bottom">
             <div
-              v-for="elem in curPage.locators.bottom"
+              v-for="elem in page.locators.bottom"
               :key="elem.id"
               :id="elem.id"
               class="page-locator-item"
@@ -140,18 +142,18 @@
           <!-- inner edit area -->
           <div class="page-main-inner">
             <div
-              :class="['page-main', `page-main-${curPage.columns.length}`]"
-              :style="{ margin: `0 -${curPage.columnGap / 2}px` }"
+              :class="['page-main', `page-main-${page.columns.length}`]"
+              :style="{ margin: `0 -${page.columnGap / 2}px` }"
             >
               <div
                 class="page-column"
-                v-for="(column, columnNo) in curPage.columns"
+                v-for="(column, columnNo) in page.columns"
                 :key="columnNo"
-                :style="{ padding: `0 ${curPage.columnGap / 2}px` }"
+                :style="{ padding: `0 ${page.columnGap / 2}px` }"
               >
                 <div
                   class="page-column-main"
-                  :id="[`column-${curPageNo}-${columnNo}`]"
+                  :id="[`column-${pageNo}-${columnNo}`]"
                 >
                   <div class="page-column-body" v-if="column.elements.length">
                     <topic-element-edit
@@ -179,12 +181,12 @@
             <page-number
               type="rect"
               :total="pages.length"
-              :current="curPageNo + 1"
+              :current="pageNo + 1"
             ></page-number>
             <page-number
               type="text"
               :total="pages.length"
-              :current="curPageNo + 1"
+              :current="pageNo + 1"
             ></page-number>
           </div>
         </div>
@@ -363,6 +365,10 @@ export default {
         this.initPageData();
       }
       this.addWatch();
+
+      this.$nextTick(() => {
+        this.registSrollEvent();
+      });
     },
     initPageData() {
       this.modifyCardHead({
@@ -406,11 +412,38 @@ export default {
         });
       });
     },
+    // 页面切换
     swithPage(pindex) {
       if (this.curPageNo === pindex) return;
+      let pageTops = this.pages.map((page, pageNo) => {
+        return document.getElementById(`edit-page-box-${pageNo}`).offsetTop;
+      });
+      pageTops = pageTops.map((item) => item - pageTops[0]);
+      document.getElementById("design-main").scrollTop = pageTops[pindex];
       this.setCurPage(pindex);
       this.setCurElement({});
     },
+    registSrollEvent() {
+      document.getElementById("design-main").addEventListener("scroll", (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        let pageTops = this.pages.map((page, pageNo) => {
+          return document.getElementById(`edit-page-box-${pageNo}`).offsetTop;
+        });
+        const pageRangeHeight =
+          document.getElementById(`edit-page-box-0`).offsetHeight * 0.2;
+        pageTops = pageTops.map((item) => item - pageTops[0] - pageRangeHeight);
+        const scrollTop = e.target.scrollTop;
+        // console.log(pageTops, scrollTop);
+        const targePageTop = pageTops.find((item) => scrollTop < item);
+        const pageNo = targePageTop
+          ? pageTops.indexOf(targePageTop) - 1
+          : pageTops.length - 1;
+
+        if (this.curPageNo === pageNo) return;
+        this.setCurPage(pageNo);
+      });
+    },
     // paper-params
     modifyParams() {
       this.$refs.PaperParams.open();

card/components/ElementPropEdit.vue

@@ -78,6 +78,7 @@ export default {
       "modifyElement",
       "modifyElementChild",
       "rebuildPages",
+      "scrollToElementPage",
     ]),
     cancel() {
       this.setOpenElementEditDialog(false);
@@ -144,6 +145,9 @@ export default {
       this.cancel();
       this.$nextTick(() => {
         this.rebuildPages();
+        this.$nextTick(() => {
+          this.scrollToElementPage(element);
+        });
       });
     },
   },

card/components/PagePropEdit.vue

@@ -118,10 +118,7 @@ export default {
     };
   },
   computed: {
-    ...mapState("card", ["curPageNo", "pages", "cardConfig", "topicNoSeries"]),
-    curPage() {
-      return this.pages[this.curPageNo];
-    },
+    ...mapState("card", ["cardConfig", "topicNoSeries"]),
     // aOrBDisabled() {
     //   return this.cardConfig.hasOwnProperty("aOrBSystem");
     // }

card/store/card.js

@@ -265,6 +265,29 @@ const actions = {
     commit("setTopicSeries", topicSeries);
     commit("setTopicNoSeries", topicNoSeries);
   },
+  scrollToElementPage({ state, commit }, element) {
+    let elementPapeNo = null;
+    state.pages.forEach((page, pageNo) => {
+      if (elementPapeNo !== null) return;
+      page.columns.forEach((column) => {
+        if (elementPapeNo !== null) return;
+        column.elements.forEach((elem) => {
+          if (elem.id === element.id || elem.parent?.id === element.id) {
+            elementPapeNo = pageNo;
+          }
+        });
+      });
+    });
+    console.log(elementPapeNo);
+    if (elementPapeNo === null || elementPapeNo === state.curPageNo) return;
+
+    let pageTops = state.pages.map((page, pageNo) => {
+      return document.getElementById(`edit-page-box-${pageNo}`).offsetTop;
+    });
+    pageTops = pageTops.map((item) => item - pageTops[0]);
+    document.getElementById("design-main").scrollTop = pageTops[elementPapeNo];
+    commit("setCurPageNo", elementPapeNo);
+  },
   // 新增试题 --------------->
   addElement({ state, commit, dispatch }, element) {
     let pos = null;

src/assets/styles/pages.scss

@@ -837,6 +837,12 @@
     .el-dialog__body {
       border: none;
       padding: 0;
+      position: absolute;
+      top: 0;
+      left: 0;
+      bottom: 0;
+      right: 0;
+      overflow: hidden;
     }
   }
 }