语音矩阵多语言

src/views/book/courseware/create/components/question/matching/Matching.vue

@@ -153,6 +153,8 @@ export default {
     },
     handleMultilingualTranslation(translations) {
       this.$set(this.data.option_list[this.curSelectRow][this.curSelectColumn], 'multilingual', translations);
+      this.curSelectColumn = -1;
+      this.curSelectRow = -1;
     },
   },
 };

src/views/book/courseware/create/components/question/voice_matrix/VoiceMatrix.vue

@@ -11,7 +11,7 @@
 
         <div class="option-list">
           <div v-for="(item, i) in data.option_list" :key="i" class="voice-matrix">
-            <div v-for="li in item" :key="li.mark" class="matrix-item">
+            <div v-for="(li, j) in item" :key="li.mark" class="matrix-item">
               <!-- eslint-disable max-len -->
               <RichText
                 ref="richText"
@@ -19,6 +19,9 @@
                 :inline="true"
                 toolbar="fontselect fontsizeselect forecolor backcolor | underline | bold italic strikethrough alignleft aligncenter alignright"
               />
+              <span class="multilingual" @click="openMultilingual(i, j)">
+                <SvgIcon icon-class="multilingual" class-name="multilingual" width="12" height="12" />
+              </span>
             </div>
           </div>
         </div>
@@ -69,6 +72,14 @@
         :option-list="data.option_list"
         @saveSubtitles="saveSubtitles"
       />
+
+      <MultilingualFill
+        v-if="curSelectRow !== -1 && curSelectColumn !== -1"
+        :visible.sync="multilingualVisible"
+        :text="data.option_list[curSelectRow][curSelectColumn].content"
+        :translations="data.option_list[curSelectRow][curSelectColumn].multilingual"
+        @SubmitTranslation="handleMultilingualTranslation"
+      />
     </template>
   </ModuleBase>
 </template>
@@ -92,6 +103,8 @@ export default {
     return {
       data: getVoiceMatrixData(),
       visible: false,
+      curSelectRow: -1,
+      curSelectColumn: -1,
     };
   },
   watch: {
@@ -223,6 +236,16 @@ export default {
     saveSubtitles(dataList) {
       this.data.option_list = dataList;
     },
+    openMultilingual(i, j) {
+      this.curSelectRow = i;
+      this.curSelectColumn = j;
+      this.multilingualVisible = true;
+    },
+    handleMultilingualTranslation(translations) {
+      this.$set(this.data.option_list[this.curSelectRow][this.curSelectColumn], 'multilingual', translations);
+      this.curSelectColumn = -1;
+      this.curSelectRow = -1;
+    },
   },
 };
 </script>
@@ -255,6 +278,7 @@ export default {
       }
 
       .matrix-item {
+        position: relative;
         flex: 1;
         min-width: 75px;
         padding: 8px;
@@ -267,6 +291,13 @@ export default {
         :deep p {
           margin: 0;
         }
+
+        .multilingual {
+          position: absolute;
+          top: 3px;
+          right: 3px;
+          cursor: pointer;
+        }
       }
     }
   }

src/views/book/courseware/preview/components/input/InputPreview.vue

@@ -22,7 +22,7 @@
         @change="onInputChange"
       />
       <div v-show="showLang" class="lang">
-        {{ data.multilingual.find((item) => item.code === getLang())?.translation }}
+        {{ data.multilingual.find((item) => item.type === getLang())?.translation }}
       </div>
     </div>
   </div>

src/views/book/courseware/preview/components/rich_text/RichTextPreview.vue

@@ -14,7 +14,7 @@
       </div>
 
       <div v-show="showLang" class="lang">
-        {{ data.multilingual.find((item) => item.code === getLang())?.translation }}
+        {{ data.multilingual.find((item) => item.type === getLang())?.translation }}
       </div>
     </div>
 

src/views/book/courseware/preview/components/voice_matrix/VoiceMatrixPreview.vue

@@ -138,6 +138,10 @@
                     :style="{ textAlign: data.property.align }"
                     v-html="sanitizeHTML(column.content)"
                   ></span>
+
+                  <div v-if="showLang" class="lang">
+                    {{ column.multilingual.find((item) => item.type === getLang())?.translation }}
+                  </div>
                 </div>
               </div>
             </template>
@@ -729,6 +733,10 @@ $border-color: #e6e6e6;
               padding: 4px 12px;
               line-height: 24px;
             }
+
+            .lang {
+              padding: 0 12px 4px;
+            }
           }
 
           %column-red,