表格拼音

src/views/book/courseware/create/components/question/table/Table.vue

@@ -232,6 +232,7 @@ export default {
           items.model_essay = [];
           // this.data.answer_list[index][indexs].answer_list = [];
           if (items.content) {
+            let inputIndex = 0;
             items.content
               .split(/<(p|div)[^>]*>(.*?)<\/(p|div)>/g)
               .filter((s) => s && !s.match(/^(p|div)$/))
@@ -248,7 +249,9 @@ export default {
                       value: '',
                       type: 'input',
                       mark: getRandomNumber(),
+                      inputIndex: inputIndex,
                     });
+                    inputIndex++;
                   }
                 });
                 // // 去除所有的 font-size 样式
@@ -330,6 +333,30 @@ export default {
             ),
           );
           this.data.paragraph_list = mergedData;
+          let pinyin_index = 0;
+          this.data.option_list.forEach((item, index) => {
+            item.forEach((items, indexs) => {
+              items.model_pinyin = [];
+              let inputIndex = 0;
+              if (items.content && mergedData[pinyin_index] && mergedData[pinyin_index][0]) {
+                mergedData[pinyin_index][0].forEach((itemP) => {
+                  let isUnderline = /^_{3,}$/.test(itemP.text);
+                  if (isUnderline) {
+                    items.model_pinyin.push({
+                      value: '',
+                      type: 'input',
+                      mark: getRandomNumber(),
+                      inputIndex: inputIndex,
+                    });
+                    inputIndex++;
+                  } else {
+                    items.model_pinyin.push(itemP);
+                  }
+                });
+                pinyin_index++;
+              }
+            });
+          });
         }
       });
     },

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

@@ -49,20 +49,48 @@
                 }"
               >
                 <div :style="[tdStyle]" class="cell-wrap">
-                  <p v-for="(item, index) in col.model_essay" :key="index">
-                    <span v-if="item.type === 'text'" :key="index" v-html="sanitizeHTML(item.value)"></span>
-                    <template v-if="item.type === 'input'">
-                      <el-input
-                        :key="index"
-                        v-model="item.value"
-                        :disabled="disabled"
-                        :style="[{ width: Math.max(80, item.value.length * 21.3) + 'px' }]"
-                      />
-                      <!-- <span v-show="computedAnswerText(li.mark).length > 0" :key="`answer-${indexs}`" class="right-answer">
+                  <template v-if="isEnable(data.property.view_pinyin)">
+                    <p v-for="(item, index) in col.model_pinyin" :key="index" class="pinyin-text">
+                      <template v-if="item.type === 'input'">
+                        <el-input
+                          :key="index"
+                          v-model="item.value"
+                          :disabled="disabled"
+                          :style="[{ width: Math.max(80, item.value.length * 21.3) + 'px' }]"
+                        />
+                        <!-- <span v-show="computedAnswerText(li.mark).length > 0" :key="`answer-${indexs}`" class="right-answer">
                 {{ computedAnswerText(li.mark) }}
               </span> -->
-                    </template>
-                  </p>
+                      </template>
+                      <template v-else>
+                        <span v-if="data.property.pinyin_position === 'top'" class="pinyin">
+                          {{ item.pinyin.replace(/\s+/g, '') }}
+                        </span>
+                        <span :style="{ ...item.activeTextStyle }">
+                          {{ item.text }}
+                        </span>
+                        <span v-if="data.property.pinyin_position === 'bottom'" class="pinyin">{{
+                          item.pinyin.replace(/\s+/g, '')
+                        }}</span>
+                      </template>
+                    </p>
+                  </template>
+                  <template v-else>
+                    <p v-for="(item, index) in col.model_essay" :key="index">
+                      <span v-if="item.type === 'text'" :key="index" v-html="sanitizeHTML(item.value)"></span>
+                      <template v-if="item.type === 'input'">
+                        <el-input
+                          :key="index"
+                          v-model="item.value"
+                          :disabled="disabled"
+                          :style="[{ width: Math.max(80, item.value.length * 21.3) + 'px' }]"
+                        />
+                        <!-- <span v-show="computedAnswerText(li.mark).length > 0" :key="`answer-${indexs}`" class="right-answer">
+                {{ computedAnswerText(li.mark) }}
+              </span> -->
+                      </template>
+                    </p>
+                  </template>
                 </div>
                 <span class="multilingual" v-if="showLang">
                   {{
@@ -86,6 +114,7 @@
 import { getTableData } from '@/views/book/courseware/data/table';
 
 import PreviewMixin from '../common/PreviewMixin';
+import { isEnable } from '../../../data/common';
 
 export default {
   name: 'TablePreview',
@@ -151,6 +180,7 @@ export default {
           this.$set(this.multilingualTextList, item.type, chunkedArr);
         });
       }
+      console.log(this.data);
     },
     computedAnswerText(mark) {
       if (!this.isShowRightAnswer) return '';
@@ -190,7 +220,9 @@ $border-color: #e6e6e6;
 
     .cell-wrap {
       display: flex;
+      flex-flow: wrap;
       grid-area: fill;
+      align-items: end;
 
       p {
         margin: 0;
@@ -252,6 +284,17 @@ $border-color: #e6e6e6;
     .multilingual {
       word-break: break-word;
     }
+
+    .pinyin-text {
+      display: flex;
+      flex-direction: column;
+      font-size: 24px;
+
+      .pinyin {
+        font-family: 'League';
+        font-size: 12px;
+      }
+    }
   }
 }
 </style>