表格多语言预览

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

@@ -74,6 +74,7 @@ export function getArticleProperty() {
     is_enable_pinyin: true,
     pinyin_position: positionList[0].value,
     is_enable_sentence_case: true,
+    multilingualPosition: multilingualList[1].value,
   };
 }
 
@@ -190,7 +191,6 @@ export function getArticleData() {
         { name: '课文组件' }
       ], // 思维导图数据
     },
-    multilingualPosition: multilingualList[1].value,
     multilingual: [], // 多语言
   };
 }

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

@@ -94,7 +94,9 @@ export function getArticleProperty() {
     pinyin_position: positionList[0].value,
     is_enable_sentence_case: true,
     role_img_type: 'word',
-    role_list: [getRole(0),getRole(1)]
+    role_list: [getRole(0), getRole(1)],
+    
+    multilingualPosition: multilingualList[1].value,
   };
 }
 
@@ -220,7 +222,6 @@ export function getArticleData() {
     },
     sentence_list_mp: [], //句子+分词数组
     pinyin_type: 'pinyin', // 拼音类型
-    multilingualPosition: multilingualList[1].value,
     multilingual: [], // 多语言
   };
 }

src/views/book/courseware/preview/components/table/TablePreview.vue

@@ -64,6 +64,15 @@
                     </template>
                   </p>
                 </div>
+                <span class="multilingual" v-if="showLang">
+                  {{
+                    multilingualTextList[getLang()] &&
+                    multilingualTextList[getLang()][i] &&
+                    multilingualTextList[getLang()][i][j]
+                      ? multilingualTextList[getLang()][i][j]
+                      : ''
+                  }}
+                </span>
               </td>
             </template>
           </tr>
@@ -86,6 +95,7 @@ export default {
     return {
       data: getTableData(),
       table_width: 0,
+      multilingualTextList: {}, // 多语言对应的切割后的翻译
     };
   },
   computed: {
@@ -107,7 +117,13 @@ export default {
       return obj;
     },
   },
-  watch: {},
+  watch: {
+    'data.col_width': {
+      handler(val) {
+        this.handleData();
+      },
+    },
+  },
   created() {
     this.handleData();
   },
@@ -119,6 +135,22 @@ export default {
       this.data.col_width.forEach((item) => {
         this.table_width += Number(item.value);
       });
+      if (this.showLang) {
+        this.data.multilingual.forEach((item) => {
+          let trans_arr = item.translation.split('\n');
+          let chunkSize = this.data.property.column_count;
+          let chunkedArr = trans_arr.reduce((acc, curr, index) => {
+            // 当索引是chunkSize的倍数时，开始一个新的子数组
+            if (index % chunkSize === 0) {
+              acc.push([curr]); // 开始新的子数组并添加当前元素
+            } else {
+              acc[acc.length - 1].push(curr); // 将当前元素添加到最后一个子数组中
+            }
+            return acc;
+          }, []);
+          this.$set(this.multilingualTextList, item.type, chunkedArr);
+        });
+      }
     },
     computedAnswerText(mark) {
       if (!this.isShowRightAnswer) return '';
@@ -216,6 +248,10 @@ $border-color: #e6e6e6;
         }
       }
     }
+
+    .multilingual {
+      word-break: break-word;
+    }
   }
 }
 </style>

src/views/book/courseware/preview/components/upload_preview/UploadPreviewPreview.vue

@@ -33,14 +33,16 @@
             <div class="file-name">
               <span>
                 <SvgIcon :icon-class="icon_list[active_index]" size="16" />
-                <span
-                  >{{ data.file_info[file.file_id].xuhao + data.file_info[file.file_id].file_name }}
-                  <!-- {{
-                    multilingualTextList[getLang()] && multilingualTextList[getLang()][i]
-                      ? ' ' + multilingualTextList[getLang()][i]
-                      : ''
-                  }} -->
-                </span>
+                <p>
+                  <span>{{ data.file_info[file.file_id].xuhao + data.file_info[file.file_id].file_name }} </span
+                  ><span
+                    >{{
+                      multilingualTextList[getLang()] && multilingualTextList[getLang()][i]
+                        ? ' ' + multilingualTextList[getLang()][i]
+                        : ''
+                    }}
+                  </span>
+                </p>
               </span>
               <SvgIcon v-show="file.file_id" icon-class="uploadPreview" size="16" @click="viewDialog(file)" />
               <img
@@ -124,13 +126,12 @@ export default {
           this.source_list[2].push(item);
         }
       });
-      // if (this.showLang) {
-      this.data.multilingual.forEach((item) => {
-        let trans_arr = item.translation.split('\n');
-        this.$set(this.multilingualTextList, item.code, trans_arr);
-      });
-      console.log(this.multilingualTextList);
-      // }
+      if (this.showLang) {
+        this.data.multilingual.forEach((item) => {
+          let trans_arr = item.translation.split('\n');
+          this.$set(this.multilingualTextList, item.type, trans_arr);
+        });
+      }
     },
     //   下载表格
     downLoad(file) {
@@ -234,6 +235,10 @@ export default {
         color: #1d2129;
         background-color: #f7f8fa;
 
+        p {
+          margin: 0;
+        }
+
         span {
           display: flex;
           column-gap: 14px;