Merge branch 'lhd'

package.json

@@ -35,6 +35,7 @@
     "simple-mind-map": "^0.14.0-fix.1",
     "three": "^0.178.0",
     "tinymce": "^5.10.9",
+    "v-fit-columns": "^0.2.0",
     "vue": "^2.6.14",
     "vue-esign": "^1.1.4",
     "vue-router": "^3.6.5",

src/views/book/courseware/create/components/question/new_word/NewWordSetting.vue

@@ -10,11 +10,9 @@
         </el-radio-group>
       </el-form-item>
 
-      <el-form-item label="预览展开">
-        <el-radio-group v-model="property.is_word_show">
-          <el-radio v-for="{ value, label } in wordShowList" :key="value" :label="value">
-            {{ label }}
-          </el-radio>
+      <el-form-item label="自动换行">
+        <el-radio-group v-model="property.auto_wrap">
+          <el-radio v-for="{ value, label } in switchOption" :key="value" :label="value">{{ label }}</el-radio>
         </el-radio-group>
       </el-form-item>
       <el-form-item label="读音">
@@ -43,6 +41,7 @@ import {
   pinyinPositionList,
   wordShowList,
   inforList,
+  switchOption,
 } from '@/views/book/courseware/data/newWord';
 
 export default {
@@ -55,6 +54,7 @@ export default {
       pinyinPositionList,
       wordShowList,
       inforList,
+      switchOption,
     };
   },
   methods: {},

src/views/book/courseware/data/newWord.js

@@ -67,7 +67,7 @@ export function getNewWordProperty() {
     sn_display_mode: displayList[0].value,
     audio_generation_method: audioGenerationMethodList[0].value,
     pinyin_position: pinyinPositionList[0].value,
-    is_word_show: wordShowList[1].value,
+    auto_wrap: switchOption[1].value, // 自动换行
     is_has_infor: inforList[0].value,
   };
 }

src/views/book/courseware/data/notes.js

@@ -29,7 +29,7 @@ export function getNotesProperty() {
     sn_type: serialNumberTypeList[0].value,
     sn_position: serialNumberPositionList[3].value,
     sn_display_mode: displayList[0].value,
-    is_word_show: wordShowList[1].value,
+    is_word_show: wordShowList[0].value,
   };
 }
 

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

@@ -32,7 +32,13 @@
                   @handleListenRead="handleListenRead"
                 />
               </div>
-              <ul class="NPC-word-table" cellspacing="0" border="0" cellpadding="0">
+              <ul
+                class="NPC-word-table"
+                cellspacing="0"
+                border="0"
+                cellpadding="0"
+                v-if="isEnable(data.property.auto_wrap)"
+              >
                 <li v-for="(item, index) in data.option_list" :key="'curQue.option' + index" class="NPC-word-tr">
                   <div
                     v-for="(sItem, sIndex) in item"
@@ -66,17 +72,22 @@
                       </template>
                       <div v-else style="width: 16px; height: 16px; margin-left: 8px"></div>
                     </div>
-                    <template v-if="sItem.pinyin_site && (sItem.pinyin_site == 'top' || sItem.pinyin_site == 'bottom')">
+                    <template
+                      v-if="
+                        data.property.pinyin_position &&
+                        (data.property.pinyin_position == 'top' || data.property.pinyin_position == 'bottom')
+                      "
+                    >
                       <div class="NPC-word-tab-box">
                         <span
-                          v-if="sItem.pinyin_site == 'top'"
+                          v-if="data.property.pinyin_position == 'top'"
                           class="NPC-word-tab-common NPC-word-tab-pinyin"
                           v-html="sItem.pinyin"
                         >
                         </span>
                         <span class="NPC-word-tab-common NPC-word-tab-word" v-html="sItem.new_word"> </span>
                         <span
-                          v-if="sItem.pinyin_site == 'bottom'"
+                          v-if="data.property.pinyin_position == 'bottom'"
                           class="NPC-word-tab-common NPC-word-tab-pinyin"
                           v-html="sItem.pinyin"
                         >
@@ -91,14 +102,14 @@
                     </template>
                     <template v-else>
                       <span
-                        v-if="!sItem.pinyin_site || sItem.pinyin_site == 'first'"
+                        v-if="!data.property.pinyin_position || data.property.pinyin_position == 'front'"
                         class="NPC-word-tab-common NPC-word-tab-pinyin"
                         v-html="sItem.pinyin"
                       >
                       </span>
                       <span class="NPC-word-tab-common NPC-word-tab-word" v-html="sItem.new_word"> </span>
                       <span
-                        v-if="sItem.pinyin_site == 'last'"
+                        v-if="data.property.pinyin_position == 'back'"
                         class="NPC-word-tab-common NPC-word-tab-pinyin"
                         v-html="sItem.pinyin"
                       >
@@ -138,6 +149,122 @@
                   </div>
                 </li>
               </ul>
+              <el-table v-else :data="data.new_word_list" style="width: 100%" class="newWord-table NPC-word-table">
+                <el-table-column fixed prop="" width="16px">
+                  <template slot-scope="scope">
+                    <template v-if="scope.row.bg || scope.row.ed">
+                      <a
+                        :class="[
+                          'play-btn',
+                          curTime >= scope.row.bg && curTime < scope.row.ed && stopAudioS ? 'active' : '',
+                        ]"
+                        @click="handleChangeTime(scope.row.bg, scope.row.ed)"
+                      ></a>
+                    </template>
+                    <template v-else-if="scope.row.mp3_list">
+                      <span
+                        :class="['play-btn', playClass && mp3_index === scope.row.sIndex ? 'active' : '']"
+                        @click="palyAudio(scope.row.mp3_list_url, scope.row.sIndex)"
+                      ></span>
+                      <audio :id="'word' + indexStr + scope.row.sIndex" :src="scope.row.mp3_list_url"></audio>
+                    </template>
+                  </template>
+                </el-table-column>
+                <el-table-column fixed prop="">
+                  <template slot-scope="scope">
+                    <b class="tabNum" :style="{ backgroundColor: bookInfo.theme_color }">{{ scope.row.number }}</b>
+                  </template>
+                </el-table-column>
+
+                <el-table-column
+                  fixed
+                  prop=""
+                  v-if="!data.property.pinyin_position || data.property.pinyin_position == 'front'"
+                >
+                  <template slot-scope="scope">
+                    <span class="NPC-word-tab-common NPC-word-tab-pinyin" v-html="scope.row.pinyin"> </span>
+                  </template>
+                </el-table-column>
+                <el-table-column fixed prop="new_word">
+                  <template slot-scope="scope">
+                    <template
+                      v-if="
+                        data.property.pinyin_position &&
+                        (data.property.pinyin_position == 'top' || data.property.pinyin_position == 'bottom')
+                      "
+                    >
+                      <div class="NPC-word-tab-box">
+                        <span
+                          v-if="data.property.pinyin_position == 'top'"
+                          class="NPC-word-tab-common NPC-word-tab-pinyin"
+                          v-html="scope.row.pinyin"
+                        >
+                        </span>
+                        <span class="NPC-word-tab-common NPC-word-tab-word" v-html="scope.row.new_word"> </span>
+                        <span
+                          v-if="data.property.pinyin_position == 'bottom'"
+                          class="NPC-word-tab-common NPC-word-tab-pinyin"
+                          v-html="scope.row.pinyin"
+                        >
+                        </span>
+                      </div>
+                    </template>
+                    <template v-else>
+                      <span class="NPC-word-tab-common NPC-word-tab-word" v-html="scope.row.new_word"> </span>
+                    </template>
+                  </template>
+                </el-table-column>
+                <el-table-column fixed prop="" v-if="data.property.pinyin_position == 'back'">
+                  <template slot-scope="scope">
+                    <span class="NPC-word-tab-common NPC-word-tab-pinyin" v-html="scope.row.pinyin"> </span>
+                  </template>
+                </el-table-column>
+                <el-table-column prop="cixing">
+                  <template slot-scope="scope">
+                    <span
+                      class="NPC-word-tab-common NPC-word-tab-cixing"
+                      :class="[/[\u4E00-\u9FA5\uF900-\uFA2D]/.test(scope.row.cixing) ? 'hasCn' : '']"
+                      v-html="scope.row.cixing"
+                    ></span>
+                  </template>
+                </el-table-column>
+                <el-table-column prop="def_str">
+                  <template slot-scope="scope">
+                    <span class="NPC-word-tab-common NPC-word-tab-def" v-html="scope.row.def_str"></span>
+                  </template>
+                </el-table-column>
+                <el-table-column prop="collocation">
+                  <template slot-scope="scope">
+                    <div class="collocation"><span>搭配：</span><b v-html="scope.row.collocation"></b></div>
+                  </template>
+                </el-table-column>
+                <el-table-column prop="collocation">
+                  <template slot-scope="scope">
+                    <div class="collocation"><span>例句：</span><b v-html="scope.row.liju_list"></b></div>
+                  </template>
+                </el-table-column>
+                <el-table-column prop="def_str" fixed="right">
+                  <template slot-scope="scope">
+                    <SoundRecord
+                      :tm-index="scope.$index"
+                      :tms-index="0"
+                      :task-model="isJudgingRightWrong ? 'ANSWER' : ''"
+                      :answer-record-list="[]"
+                      type="mini"
+                      class="luyin-box-wordphrase"
+                      :style="{ marginLeft: '8px' }"
+                      @handleWav="handleWav"
+                    />
+                  </template>
+                </el-table-column>
+                <el-table-column prop="def_str" fixed="right">
+                  <template slot-scope="scope">
+                    <span v-if="isEnable(data.property.is_has_infor)">
+                      <img src="@/assets/detail-icon.png" class="detail-icon" @click="showDetail(scope.row)" />
+                    </span>
+                  </template>
+                </el-table-column>
+              </el-table>
             </div>
           </template>
           <template v-else>
@@ -327,6 +454,9 @@ import { GetFileURLMap } from '@/api/app';
 import WordPhraseDetail from './components/WordPhraseDetail.vue';
 import AudioPlay from './components/AudioPlay.vue';
 import Strockplay from './components/Strockplay.vue';
+import Vue from 'vue';
+import Plugin from 'v-fit-columns';
+Vue.use(Plugin);
 
 export default {
   name: 'NewWordPreview',
@@ -343,7 +473,7 @@ export default {
   data() {
     return {
       data: getNewWordData(),
-      wordShow: false,
+      wordShow: true,
       dataWord: null,
       detailShow: false,
       detailIndex: 0,
@@ -370,7 +500,7 @@ export default {
         if (val) {
           if (this.is_change) return;
           if (val.new_word_list[0].new_word) {
-            this.wordShow = isEnable(this.data.property.is_word_show);
+            // this.wordShow = isEnable(this.data.property.is_word_show);
             this.initData();
           }
         }
@@ -633,197 +763,197 @@ export default {
           }
         }
 
-        .tabNum-box {
-          position: relative;
-
-          .star-label {
-            position: absolute;
-            top: 1px;
-            right: -6px;
-            width: 6px;
-            height: 6px;
-          }
+        .NPC-word-tab-common {
+          box-sizing: border-box;
+          width: 125px;
+          padding-left: 8px;
         }
+      }
+    }
+  }
 
-        .play-btn {
-          display: block;
-          width: 16px;
-          height: 16px;
-          margin-top: 4px;
-          background: url('@/assets/fill/voice-pause-red.png') no-repeat left top;
-          background-size: 100% 100%;
+  .NPC-word-list {
+    padding: 20px 24px;
+    border: 1px solid rgba(0, 0, 0, 10%);
+    border-top: none;
+    border-radius: 0 0 8px 8px;
+  }
 
-          &.active {
-            background: url('@/assets/fill/voice-play-red.png') no-repeat left top;
-            background-size: 100% 100%;
-          }
-        }
+  .detail-icon {
+    display: block;
+    width: 24px;
+    height: 24px;
+    cursor: pointer;
+    opacity: 0.5;
+  }
 
-        .tabNum {
-          display: block;
-          width: 16px;
-          height: 16px;
-          margin-top: 4px;
-          margin-left: 8px;
-          font-family: 'robot', 'alabo';
-          font-size: 12px;
-          line-height: 16px;
-          color: #fff;
-          text-align: center;
-          background: #de4444;
-          border-radius: 50%;
-        }
+  .tabNum-box {
+    position: relative;
 
-        .NPC-word-tab-box {
-          width: 240px;
+    .star-label {
+      position: absolute;
+      top: 1px;
+      right: -6px;
+      width: 6px;
+      height: 6px;
+    }
+  }
 
-          span {
-            display: block;
-            width: 100%;
-            margin: 2px 0;
-            color: #000;
-          }
-        }
+  .play-btn {
+    display: block;
+    width: 16px;
+    height: 16px;
+    margin-top: 4px;
+    background: url('@/assets/fill/voice-pause-red.png') no-repeat left top;
+    background-size: 100% 100%;
+
+    &.active {
+      background: url('@/assets/fill/voice-play-red.png') no-repeat left top;
+      background-size: 100% 100%;
+    }
+  }
 
-        .NPC-word-tab-common {
-          box-sizing: border-box;
-          width: 125px;
-          padding-left: 8px;
-        }
+  .tabNum {
+    display: block;
+    width: 16px;
+    height: 16px;
+    margin-top: 4px;
+    margin-left: 8px;
+    font-family: 'robot', 'alabo';
+    font-size: 12px;
+    line-height: 16px;
+    color: #fff;
+    text-align: center;
+    background: #de4444;
+    border-radius: 50%;
+  }
 
-        .NPC-word-tab-pinyin {
-          font-family: 'League';
+  .NPC-word-tab-box {
+    width: 240px;
 
-          // white-space: nowrap;
-          font-size: 12px;
-          word-break: break-word;
+    span {
+      display: block;
+      width: 100%;
+      margin: 2px 0;
+      color: #000;
+    }
+  }
 
-          &.NPC-word-tab-pinyin-red {
-            color: #e35454;
-          }
+  .NPC-word-tab-pinyin {
+    font-family: 'League';
 
-          &.NPC-word-tab-pinyin-green {
-            color: #24b99e;
-          }
+    // white-space: nowrap;
+    font-size: 12px;
+    word-break: break-word;
 
-          &.NPC-word-tab-pinyin-brown {
-            color: #bd8865;
-          }
-        }
+    &.NPC-word-tab-pinyin-red {
+      color: #e35454;
+    }
 
-        .NPC-word-tab-word {
-          font-family: '楷体';
-          font-size: 16px;
-          white-space: nowrap;
+    &.NPC-word-tab-pinyin-green {
+      color: #24b99e;
+    }
 
-          &.NPC-word-tab-word-red {
-            color: #e35454;
-          }
+    &.NPC-word-tab-pinyin-brown {
+      color: #bd8865;
+    }
+  }
 
-          &.NPC-word-tab-word-green {
-            color: #24b99e;
-          }
+  .NPC-word-tab-word {
+    font-family: '楷体';
+    font-size: 16px;
+    white-space: nowrap;
 
-          &.NPC-word-tab-word-brown {
-            color: #bd8865;
-          }
+    &.NPC-word-tab-word-red {
+      color: #e35454;
+    }
 
-          &-break {
-            word-break: break-word;
-            white-space: normal;
-          }
-        }
+    &.NPC-word-tab-word-green {
+      color: #24b99e;
+    }
 
-        .NPC-word-tab-cixing {
-          box-sizing: border-box;
+    &.NPC-word-tab-word-brown {
+      color: #bd8865;
+    }
 
-          // width: 48px;
-          width: 60px;
-          font-family: 'robot', 'alabo';
-          text-align: left;
-          word-break: break-word;
+    &-break {
+      word-break: break-word;
+      white-space: normal;
+    }
+  }
 
-          // font-style: italic;  // 要求改为正体
-          &.NPC-word-tab-cixing-red {
-            color: #e35454;
-          }
+  .NPC-word-tab-cixing {
+    box-sizing: border-box;
 
-          &.NPC-word-tab-cixing-green {
-            color: #24b99e;
-          }
+    // width: 48px;
+    width: 60px;
+    font-family: 'robot', 'alabo';
+    text-align: left;
+    word-break: break-word;
 
-          &.NPC-word-tab-cixing-brown {
-            color: #bd8865;
-          }
+    // font-style: italic;  // 要求改为正体
+    &.NPC-word-tab-cixing-red {
+      color: #e35454;
+    }
 
-          &.hasCn {
-            font-size: 13px;
-          }
-        }
+    &.NPC-word-tab-cixing-green {
+      color: #24b99e;
+    }
 
-        .NPC-word-tab-def {
-          box-sizing: border-box;
-          flex: 1;
-          font-family: 'robot', 'alabo';
-          word-break: break-word;
-          white-space: pre-wrap;
+    &.NPC-word-tab-cixing-brown {
+      color: #bd8865;
+    }
 
-          &.NPC-word-tab-def-red {
-            color: #e35454;
-          }
+    &.hasCn {
+      font-size: 13px;
+    }
+  }
 
-          &.NPC-word-tab-def-green {
-            color: #24b99e;
-          }
+  .NPC-word-tab-def {
+    box-sizing: border-box;
+    flex: 1;
+    font-family: 'robot', 'alabo';
+    word-break: break-word;
+    white-space: pre-wrap;
 
-          &.NPC-word-tab-def-brown {
-            color: #bd8865;
-          }
-        }
+    &.NPC-word-tab-def-red {
+      color: #e35454;
+    }
 
-        .collocation {
-          display: flex;
-          width: 100%;
-          padding-top: 8px;
+    &.NPC-word-tab-def-green {
+      color: #24b99e;
+    }
 
-          > span {
-            flex-shrink: 0;
-            font-size: 16px;
-            font-weight: 400;
-            line-height: 24px;
-            color: #000;
-          }
+    &.NPC-word-tab-def-brown {
+      color: #bd8865;
+    }
+  }
 
-          > div b {
-            display: block;
-          }
+  .collocation {
+    display: flex;
+    width: 100%;
+    padding-top: 8px;
 
-          > b,
-          > div b {
-            flex: 1;
-            font-family: 'robot', '楷体', 'alabo';
-            font-size: 16px;
-            font-weight: 400;
-            line-height: 24px;
-            color: rgba(0, 0, 0, 65%);
-          }
-        }
-      }
+    > span {
+      flex-shrink: 0;
+      font-size: 16px;
+      font-weight: 400;
+      line-height: 24px;
+      color: #000;
     }
 
-    .NPC-word-list {
-      padding: 20px 24px;
-      border: 1px solid rgba(0, 0, 0, 10%);
-      border-top: none;
-      border-radius: 0 0 8px 8px;
+    > div b {
+      display: block;
     }
 
-    .detail-icon {
-      display: block;
-      width: 24px;
-      height: 24px;
-      cursor: pointer;
-      opacity: 0.5;
+    > b,
+    > div b {
+      flex: 1;
+      font-family: 'robot', '楷体', 'alabo';
+      font-size: 16px;
+      font-weight: 400;
+      line-height: 24px;
+      color: rgba(0, 0, 0, 65%);
     }
   }
 
@@ -1250,6 +1380,17 @@ export default {
     border-left: none;
   }
 }
+
+.newWord-table {
+  .cell {
+    width: max-content;
+    white-space: nowrap;
+  }
+
+  :deep thead {
+    display: none;
+  }
+}
 </style>
 <style lang="scss">
 .NPC-zhedie {