完成预览的上一页下一页效果

src/components/Adult/Preview.vue

@@ -78,10 +78,10 @@
                 <template
                   v-if="
                     itemss.type == 'inputItem_chs' ||
-                      itemss.type == 'sentence_input_chs' ||
-                      itemss.type == 'sentence_judge_chs' ||
-                      itemss.type == 'sentence_record_chs' ||
-                      itemss.type == 'sentence_input_record_chs'
+                    itemss.type == 'sentence_input_chs' ||
+                    itemss.type == 'sentence_judge_chs' ||
+                    itemss.type == 'sentence_record_chs' ||
+                    itemss.type == 'sentence_input_record_chs'
                   "
                 >
                   <SentenceInput :cur-que="itemss.data" />
@@ -107,7 +107,9 @@
                 <template v-if="itemss.type == 'newWord_preview_chs'">
                   <NewWordShow :cur-que="itemss.data" />
                 </template>
-                <template v-if="itemss.type == 'listen_record_single_syllable_chs'">
+                <template
+                  v-if="itemss.type == 'listen_record_single_syllable_chs'"
+                >
                   <SelectYinjie :cur-que="itemss.data" />
                 </template>
                 <template v-if="itemss.type == 'sentence_listen_read_chs'">
@@ -142,16 +144,16 @@ import InputHasRecord from "./preview/InputHasRecord.vue"; // 输入加录音
 import TextInputRecord from "./preview/TextInputRecord.vue"; // 文本+输入+录音
 import SentenceInput from "./preview/SentenceInput.vue"; // 输入选项
 import NumberSelectHasRecord from "./preview/NumberSelectHasRecord.vue"; // 数字组合
-import SelectTone from './preview/SelectTone.vue'; // 选择声调
-import Soduko from './preview/Soduko.vue'; // 数独
-import Single from './preview/Single.vue'; // 单选
-import TextProblem from './preview/TextProblem.vue'; // 课文上方的问题
-import NewWordShow from './preview/NewWordShow.vue'; // 生字展示
-import SelectYinjie from './preview/SelectYinjie.vue'; // 选择音节
-import SentenceListenRead from './preview/SentenceListenRead.vue'; // 听并朗读
-import SentenceSort from './preview/SentenceSort.vue'; // 句子拖拽排序
-import Checkbox from './preview/CheckBoxModule.vue'; // 问卷调查-多选题
-import VoiceMatrix from './preview/VoiceMatrix.vue'; // 语音矩阵
+import SelectTone from "./preview/SelectTone.vue"; // 选择声调
+import Soduko from "./preview/Soduko.vue"; // 数独
+import Single from "./preview/Single.vue"; // 单选
+import TextProblem from "./preview/TextProblem.vue"; // 课文上方的问题
+import NewWordShow from "./preview/NewWordShow.vue"; // 生字展示
+import SelectYinjie from "./preview/SelectYinjie.vue"; // 选择音节
+import SentenceListenRead from "./preview/SentenceListenRead.vue"; // 听并朗读
+import SentenceSort from "./preview/SentenceSort.vue"; // 句子拖拽排序
+import Checkbox from "./preview/CheckBoxModule.vue"; // 问卷调查-多选题
+import VoiceMatrix from "./preview/VoiceMatrix.vue"; // 语音矩阵
 
 export default {
   name: "Preview",
@@ -178,7 +180,7 @@ export default {
     SentenceListenRead,
     SentenceSort,
     Checkbox,
-    VoiceMatrix
+    VoiceMatrix,
   },
   props: [
     "context",
@@ -186,6 +188,7 @@ export default {
     "currentTreeID",
     "FatherTreeData",
     "changeId",
+    "changeCurrentTreeID",
   ],
   data() {
     return {
@@ -245,9 +248,9 @@ export default {
           _this.queList = list;
           _this.cur = list[_this.queIndex];
           _this.queTotal = list.length;
-          _this.cur.cur_fn_data.forEach(item => {
-            item.table_list.forEach(items => {
-              items.forEach(itemss => {
+          _this.cur.cur_fn_data.forEach((item) => {
+            item.table_list.forEach((items) => {
+              items.forEach((itemss) => {
                 if (itemss.data && itemss.data.type == "NewWord_chs") {
                   _this.NNPENewWordList = _this.NNPENewWordList.concat(
                     itemss.data.option
@@ -268,38 +271,83 @@ export default {
       const _this = this;
       if (_this.queIndex == 0) {
         let data = {};
+        let flg = false;
+        let xiangdeng = false;
         _this.FatherTreeData.forEach((item, itemIndex) => {
           if (item.children) {
             item.children.forEach((it, childrenIndex) => {
-              if (itemIndex < 1 && childrenIndex < 1) {
-                this.$message({
-                  message: "已经是第一题",
-                  type: "success",
-                });
-              } else if (it.id == _this.currentTreeID) {
-                data.fatherName = item.children[childrenIndex - 1].fatherName;
-                data.id = item.children[childrenIndex - 1].id;
-                data.name = item.children[childrenIndex - 1].name;
+              if (it.id == _this.currentTreeID) {
+                if (itemIndex == 0 && childrenIndex == 0) {
+                  this.$message({
+                    message: "已经是最后一题",
+                    type: "success",
+                  });
+                  flg = true;
+                } else if (childrenIndex == 0) {
+                  // 当前子节点的第一个
+                  if (_this.FatherTreeData[itemIndex - 1].children) {
+                    data.fatherName =
+                      _this.FatherTreeData[
+                        itemIndex - 1
+                      ].children[0].fatherName;
+                    data.id =
+                      _this.FatherTreeData[itemIndex - 1].children[0].id;
+                    data.name =
+                      _this.FatherTreeData[itemIndex - 1].children[0].name;
+                  } else {
+                    data.fatherName =
+                      _this.FatherTreeData[itemIndex - 1].fatherName;
+                    data.id = _this.FatherTreeData[itemIndex - 1].id;
+                    data.name = _this.FatherTreeData[itemIndex - 1].name;
+                  }
+                } else {
+                  data.fatherName = item.children[childrenIndex - 1].fatherName;
+                  data.id = item.children[childrenIndex - 1].id;
+                  data.name = item.children[childrenIndex - 1].name;
+                }
+                xiangdeng = true;
               }
             });
           } else {
-            if (itemIndex < 1) {
-              this.$message({
-                message: "已经是第一题",
-                type: "success",
-              });
-            } else if (item.id == _this.currentTreeID) {
-              {
-                data.fatherName =
-                  _this.FatherTreeData[itemIndex - 1].fatherName;
-                data.id = _this.FatherTreeData[itemIndex - 1].id;
-                data.name = _this.FatherTreeData[itemIndex - 1].name;
+            if (!xiangdeng) {
+              if (item.id == _this.currentTreeID) {
+                if (itemIndex == 0) {
+                  this.$message({
+                    message: "已经是第一题",
+                    type: "success",
+                  });
+                  flg = true;
+                } else {
+                  if (_this.FatherTreeData[itemIndex - 1].children) {
+                    data.fatherName =
+                      _this.FatherTreeData[itemIndex - 1].children[
+                        _this.FatherTreeData[itemIndex - 1].children.length - 1
+                      ].fatherName;
+                    data.id =
+                      _this.FatherTreeData[itemIndex - 1].children[
+                        _this.FatherTreeData[itemIndex - 1].children.length - 1
+                      ].id;
+                    data.name =
+                      _this.FatherTreeData[itemIndex - 1].children[
+                        _this.FatherTreeData[itemIndex - 1].children.length - 1
+                      ].name;
+                  } else {
+                    data.fatherName =
+                      _this.FatherTreeData[itemIndex - 1].fatherName;
+                    data.id = _this.FatherTreeData[itemIndex - 1].id;
+                    data.name = _this.FatherTreeData[itemIndex - 1].name;
+                  }
+                }
               }
             }
           }
         });
+        if (flg) {
+          return;
+        }
         _this.queIndex = 0;
-        _this.changeId(data.id, data.name, data.fatherName);
+        this.changeCurrentTreeID(data.id);
+        _this.changeId(data.id, data.name, data.fatherName, "Preview");
       } else {
         _this.queIndex -= 1;
         _this.watchIndex = _this.queIndex + new Date().getTime();
@@ -310,10 +358,13 @@ export default {
     handleNNPEnext() {
       const _this = this;
       if (_this.queIndex == _this.queTotal - 1) {
-          let data = {};
-          _this.FatherTreeData.forEach((item, itemIndex) => {
-            if (item.children) {
-              item.children.forEach((it, childrenIndex) => {
+        let data = {};
+        let flg = false;
+        let xiangdeng = false;
+        _this.FatherTreeData.forEach((item, itemIndex) => {
+          if (item.children) {
+            item.children.forEach((it, childrenIndex) => {
+              if (it.id == _this.currentTreeID) {
                 if (
                   itemIndex == _this.FatherTreeData.length - 1 &&
                   childrenIndex == item.children.length - 1
@@ -322,30 +373,68 @@ export default {
                     message: "已经是最后一题",
                     type: "success",
                   });
-                } else if (it.id == _this.currentTreeID) {
+                  flg = true;
+                } else if (childrenIndex == item.children.length - 1) {
+                  // 当前子节点的最后一个
+                  if (_this.FatherTreeData[itemIndex + 1].children) {
+                    data.fatherName =
+                      _this.FatherTreeData[
+                        itemIndex + 1
+                      ].children[0].fatherName;
+                    data.id =
+                      _this.FatherTreeData[itemIndex + 1].children[0].id;
+                    data.name =
+                      _this.FatherTreeData[itemIndex + 1].children[0].name;
+                  } else {
+                    data.fatherName =
+                      _this.FatherTreeData[itemIndex + 1].fatherName;
+                    data.id = _this.FatherTreeData[itemIndex + 1].id;
+                    data.name = _this.FatherTreeData[itemIndex + 1].name;
+                  }
+                } else {
                   data.fatherName = item.children[childrenIndex + 1].fatherName;
                   data.id = item.children[childrenIndex + 1].id;
                   data.name = item.children[childrenIndex + 1].name;
                 }
-              });
-            } else {
-              if (itemIndex == _this.FatherTreeData.length - 1) {
-                this.$message({
-                  message: "已经是最后一题",
-                  type: "success",
-                });
-              } else if (item.id == _this.currentTreeID) {
-                {
-                  data.fatherName =
-                    _this.FatherTreeData[itemIndex + 1].fatherName;
-                  data.id = _this.FatherTreeData[itemIndex + 1].id;
-                  data.name = _this.FatherTreeData[itemIndex + 1].name;
+                xiangdeng = true;
+              }
+            });
+          } else {
+            if (!xiangdeng) {
+              if (item.id == _this.currentTreeID) {
+                if (itemIndex == _this.FatherTreeData.length - 1) {
+                  this.$message({
+                    message: "已经是最后一题",
+                    type: "success",
+                  });
+                  flg = true;
+                } else {
+                  if (_this.FatherTreeData[itemIndex + 1].children) {
+                    data.fatherName =
+                      _this.FatherTreeData[
+                        itemIndex + 1
+                      ].children[0].fatherName;
+                    data.name =
+                      _this.FatherTreeData[itemIndex + 1].children[0].name;
+                    data.id =
+                      _this.FatherTreeData[itemIndex + 1].children[0].id;
+                  } else {
+                    data.fatherName =
+                      _this.FatherTreeData[itemIndex + 1].fatherName;
+                    data.id = _this.FatherTreeData[itemIndex + 1].id;
+                    data.name = _this.FatherTreeData[itemIndex + 1].name;
+                  }
                 }
               }
             }
-          });
-          _this.queIndex = 0;
-          _this.changeId(data.id, data.name, data.fatherName);
+          }
+        });
+        if (flg) {
+          return;
+        }
+        this.changeCurrentTreeID(data.id);
+        _this.changeId(data.id, data.name, data.fatherName, "Preview");
+        xiangdeng = false;
       } else {
         _this.queIndex += 1;
         _this.watchIndex = _this.queIndex + new Date().getTime();

src/components/Adult/preview/Ligature.vue

@@ -197,7 +197,11 @@ export default {
   //计算属性 类似于data概念
   computed: {},
   //监控data中数据变化
-  watch: {},
+  watch: {
+    curQue(val, oldval) {
+      this.$forceUpdate();
+    },
+  },
   //方法集合
   methods: {
     //   清除所有连线
@@ -361,7 +365,19 @@ export default {
   //生命周期-更新之前
   beforUpdate() {},
   //生命周期-更新之后
-  updated() {},
+  updated() {
+    for (let i = 0; i < this.curQue.con.length; i++) {
+      let nodeleft = document.getElementsByClassName(`left${i}`)[0];
+      let noderight = document.getElementsByClassName(`right${i}`)[0];
+      if (nodeleft && noderight) {
+        if (nodeleft.offsetHeight > noderight.offsetHeight) {
+          noderight.style.height = nodeleft.offsetHeight + "px";
+        } else {
+          nodeleft.style.height = noderight.offsetHeight + "px";
+        }
+      }
+    }
+  },
   //生命周期-销毁之前
   beforeDestory() {},
   //生命周期-销毁完成

src/views/adultInput3.vue

@@ -497,7 +497,7 @@
           :currentTreeID="currentTreeID"
           :FatherTreeData="FatherTreeData"
           :change-id="changeId"
-
+          :changeCurrentTreeID="changeCurrentTreeID"
         />
       </div>
       <span slot="footer" class="dialog-footer">
@@ -672,8 +672,11 @@ export default {
   },
   //方法集合
   methods: {
-    changeTreeData(val){
-      this.FatherTreeData = JSON.parse(JSON.stringify(val))
+    changeCurrentTreeID(val) {
+      this.currentTreeID = val;
+    },
+    changeTreeData(val) {
+      this.FatherTreeData = JSON.parse(JSON.stringify(val));
     },
     // 随意插入模板获取位置
     changeSite(x, y) {
@@ -754,7 +757,7 @@ export default {
       item[field] = item[field] ? item[field].trim() : "";
     },
     // 当前目录id  name    父级name/当前 name
-    changeId(id, name, fatherName) {
+    changeId(id, name, fatherName,type) {
       this.TopicIndex = null;
       this.RowIndex = null;
       this.LineIndex = null;
@@ -771,6 +774,9 @@ export default {
             this.question_list = JSON.parse(res.content);
             this.cur_page_que_index =
               this.question_list[this.tabIndex].cur_fn_data.length - 1;
+            if (type == "Preview") {
+              this.onPreview();
+            }
           } else {
             this.question_list = [
               {
@@ -950,7 +956,7 @@ export default {
       let _this = this;
       let question_data = null;
       if (_this.question_list) {
-        debugger;
+        // debugger;
         const question2 = JSON.parse(JSON.stringify(_this.question_list));
         question_data = await _this.getFileUrl_preview(question2);
         _this.previewVisible = true;