生词组件高度变化事件

src/api/article.js

@@ -32,10 +32,13 @@ export function fileToBase64Text(data) {
 
 // 检索课件单词的例句列表
 export function getCoursewareWordExampleSentenceList(data) {
-  return http.post(`${process.env.VUE_APP_EepServer}?MethodName=book_content_manager-GetCoursewareWordExampleSentenceList_Sort`, data);
+  return http.post(
+    `${process.env.VUE_APP_EepServer}?MethodName=book_content_manager-GetCoursewareWordExampleSentenceList_Sort`,
+    data,
+  );
 }
 
 // 得到文本分析地址
 export function getSysConfig() {
   return http.post(`${process.env.VUE_APP_EepServer}?MethodName=sys_config_manager-GetSysConfig`);
-}
+}

src/components/CommonPreview.vue

@@ -989,7 +989,7 @@ $total-width: $courseware-width + $courseware-left-margin + $courseware-right-ma
 
   .audit-content {
     display: flex;
-    min-width: 1400px;
+    min-width: 1810px;
     height: calc(100vh - 166px);
 
     .left-menu {

src/views/book/courseware/preview/CoursewarePreview.vue

@@ -28,6 +28,7 @@
                   height: grid.height,
                 }"
                 @contextmenu.native.prevent="handleContextMenu($event, grid.id)"
+                @handleHeightChange="handleHeightChange"
               />
 
               <div
@@ -394,6 +395,22 @@ export default {
         item.showAnswer(isJudgingRightWrong, isShowRightAnswer, null, disabled);
       });
     },
+    /**
+     * 处理组件高度变化事件
+     * @param {string} id 组件id
+     * @param {string} newHeight 组件的新高度
+     */
+    handleHeightChange(id, newHeight) {
+      this.data.row_list.forEach((row) => {
+        row.col_list.forEach((col) => {
+          col.grid_list.forEach((grid) => {
+            if (grid.id === id) {
+              grid.height = newHeight;
+            }
+          });
+        });
+      });
+    },
   },
 };
 </script>

src/views/book/courseware/preview/components/new_word/NewWordPreview.vue

@@ -1,9 +1,9 @@
 <!-- eslint-disable vue/no-v-html -->
 <template>
-  <div class="newWord-preview" :style="getAreaStyle()">
+  <div ref="previewContainer" class="newWord-preview" :style="getAreaStyle()">
     <SerialNumberPosition v-if="isEnable(data.property.sn_display_mode)" :property="data.property" />
 
-    <div v-if="data" class="main">
+    <main v-if="data" ref="newWordMain" class="main">
       <div class="NPC-zhedie" :style="{ width: width }">
         <!-- :style="{
             backgroundColor:
@@ -13,12 +13,12 @@
           <div class="NPC-top-left">
             <span
               class="NPC-topTitle-text"
-              v-html="data.title_con"
               :style="{
                 color:
                   data.unified_attrib && data.unified_attrib.topic_color ? data.unified_attrib.topic_color : '#de4444',
                 fontSize: data.unified_attrib && data.unified_attrib.font_size ? data.unified_attrib.font_size : '',
               }"
+              v-html="data.title_con"
             ></span>
             <span v-if="showLang" class="NPC-topTitle-text">
               {{ titleTrans[getLang()] }}
@@ -693,7 +693,7 @@
         </div>
         <audio ref="newwordAudio"></audio>
       </div>
-    </div>
+    </main>
     <el-dialog title="" :visible.sync="showCard" width="100%" class="wordCard-dialog" top="0">
       <i class="el-icon-arrow-left" :class="[showIndex === 0 ? 'disabled' : '']" @click="changeShowIndex('-')"></i>
       <writeTableZoom
@@ -720,7 +720,7 @@
 </template>
 
 <script>
-import { getNewWordData, isEnable } from '@/views/book/courseware/data/newWord';
+import { getNewWordData } from '@/views/book/courseware/data/newWord';
 
 import PreviewMixin from '../common/PreviewMixin';
 import SoundRecord from '../../common/SoundRecord.vue';
@@ -746,7 +746,12 @@ export default {
     writeTableZoom,
   },
   mixins: [PreviewMixin],
-  props: ['newData'],
+  props: {
+    newData: {
+      type: Object,
+      default: null,
+    },
+  },
   data() {
     return {
       data: this.newData ? this.newData : getNewWordData(),
@@ -775,6 +780,7 @@ export default {
       width: 0,
       showCard: false, // 卡片放大
       showIndex: 0, // 卡片放大索引
+      dataHeight: 0, // 组件列表中容器高度
     };
   },
   watch: {
@@ -788,7 +794,7 @@ export default {
               oldVal.new_word_list[0].new_word &&
               val.new_word_list[0].new_word !== oldVal.new_word_list[0].new_word) ||
             (val && val.new_word_list[0].new_word && !oldVal) ||
-            (val && val.hasOwnProperty('unified_attrib') && oldVal && !oldVal.hasOwnProperty('unified_attrib'))
+            (val && val.hasOwn('unified_attrib') && oldVal && !oldVal.hasOwn('unified_attrib'))
           ) {
             // this.wordShow = isEnable(this.data.property.is_word_show);
             this.initData();
@@ -798,10 +804,18 @@ export default {
       deep: true,
       immediate: true,
     },
+    is_list(newVal) {
+      this.$nextTick(() => {
+        const height = `${this.$refs.newWordMain.clientHeight}px`;
+        this.$emit('handleHeightChange', this.id, newVal ? this.dataHeight : height);
+      });
+    },
   },
   mounted() {
     let totalWidth = document.querySelector('.newWord-preview').offsetWidth;
     this.width = `${totalWidth - (this.data.property.sn_display_mode === 'true' ? 15 : 0)}px`;
+
+    this.dataHeight = this.$refs.previewContainer.style.height;
   },
   methods: {
     palyAudio(url, sIndex) {
@@ -821,21 +835,20 @@ export default {
         this.mp3_index = sIndex;
         node.play();
       }
-      this.handleListenPlay(sIndex);
+      this.handleListenPlay();
     },
-    handleListenPlay(sIndex) {
-      let _this = this;
+    handleListenPlay() {
       if (this.playWord) {
-        this.playWord.addEventListener('play', function () {
-          _this.playClass = 'nn';
+        this.playWord.addEventListener('play', () => {
+          this.playClass = 'nn';
         });
-        this.playWord.addEventListener('pause', function () {
-          _this.mp3_index = -1;
-          _this.playClass = '';
+        this.playWord.addEventListener('pause', () => {
+          this.mp3_index = -1;
+          this.playClass = '';
         });
-        this.playWord.addEventListener('ended', function () {
-          _this.mp3_index = -1;
-          _this.playClass = '';
+        this.playWord.addEventListener('ended', () => {
+          this.mp3_index = -1;
+          this.playClass = '';
         });
       }
     },
@@ -863,7 +876,7 @@ export default {
     },
     handlePlayVoice3(mp3) {
       let audio = document.getElementsByTagName('audio');
-      if (audio && audio.length > 0 && window.location.href.indexOf('GCLS-Learn') == -1) {
+      if (audio && audio.length > 0 && window.location.href.indexOf('GCLS-Learn') === -1) {
         audio.forEach((item) => {
           if (item.src !== mp3) {
             item.pause();
@@ -873,19 +886,19 @@ export default {
       if (!mp3) {
         return;
       }
-      if (!this.audio.paused) {
-        this.audio.pause();
-      } else {
+      if (this.audio.paused) {
         this.audio.pause();
         this.audio.load();
         this.audio.src = mp3;
         this.audio.loop = false;
         this.audio.play();
+      } else {
+        this.audio.pause();
       }
     },
     handlePlayVoice(mp3) {
       let audio = document.getElementsByTagName('audio');
-      if (audio && audio.length > 0 && window.location.href.indexOf('GCLS-Learn') == -1) {
+      if (audio && audio.length > 0 && window.location.href.indexOf('GCLS-Learn') === -1) {
         audio.forEach((item) => {
           if (item.src !== mp3) {
             item.pause();
@@ -952,13 +965,13 @@ export default {
         item.forEach((sItem, sIndex) => {
           sItem.mIndex = sIndex;
           sItem.sIndex = resIndex;
-          resIndex++;
+          resIndex += 1;
           sItem.def_str = sItem.definition_list;
           if (this.data.lrc_arr && this.data.lrc_arr[itemNumber]) {
             sItem.bg = this.data.lrc_arr[itemNumber].bg;
             sItem.ed = this.data.lrc_arr[itemNumber].ed;
           }
-          itemNumber++;
+          itemNumber += 1;
           Bookanswer[index].push({
             recordList: [],
           });
@@ -1007,9 +1020,7 @@ export default {
       this.ed = null;
     },
     handleWav(list, tmIndex, tmsIndex) {
-      tmIndex = tmIndex || 0;
-      tmsIndex = tmsIndex || 0;
-      this.$set(this.answer.answer_list[tmIndex][tmsIndex], 'recordList', list);
+      this.$set(this.answer.answer_list[tmIndex || 0][tmsIndex || 0], 'recordList', list);
     },
     // 翻面
     changeShowLeft(item) {
@@ -1019,10 +1030,10 @@ export default {
     changeShowIndex(type) {
       if (type === '+') {
         if (this.showIndex !== this.data.new_word_list.length - 1) {
-          this.showIndex++;
+          this.showIndex += 1;
         }
       } else if (this.showIndex !== 0) {
-        this.showIndex--;
+        this.showIndex -= 1;
       }
       this.$refs.writeTableZoom.changeRota();
     },
@@ -1311,26 +1322,6 @@ export default {
     }
   }
 
-  @keyframes firstrotate {
-    0% {
-      transform: rotateZ(0deg);
-    }
-
-    100% {
-      transform: rotateZ(180deg);
-    }
-  }
-
-  @keyframes huifuRotate {
-    0% {
-      transform: rotateZ(180deg);
-    }
-
-    100% {
-      transform: rotateZ(0deg);
-    }
-  }
-
   .luyin-box-wordphrase {
     height: 24px;
   }
@@ -1762,6 +1753,7 @@ export default {
   align-items: center;
 
   :deep .el-dialog {
+    background: transparent;
     box-shadow: none;
   }
 
@@ -1787,10 +1779,6 @@ export default {
     left: auto;
   }
 
-  :deep .el-dialog {
-    background: transparent;
-  }
-
   :deep .el-dialog__headerbtn {
     position: fixed;
     top: 20px;
@@ -1804,7 +1792,18 @@ export default {
   }
 }
 </style>
+
 <style lang="scss">
+@keyframes firstrotate {
+  0% {
+    transform: rotateZ(0deg);
+  }
+
+  100% {
+    transform: rotateZ(180deg);
+  }
+}
+
 .NPC-zhedie {
   .topTitle {
     display: flex;

src/views/personal_workbench/check_task/audit/index.vue

@@ -148,7 +148,7 @@ export default {
   .audit-content {
     display: flex;
     column-gap: 20px;
-    min-width: 1400px;
+    min-width: 1810px;
     height: calc(100vh - 175px);
 
     .remark-list {