Merge branch 'master' of http://60.205.254.193:3000/GCLS/eep_page

src/components/PinyinText.vue

@@ -9,7 +9,7 @@
       >
         <div v-for="(item, k) in sentence" :key="k" class="pinyin-text">
           <span
-            :class="{ active: visible && word_index == k }"
+            :class="{ active: visible && word_index == k && paragraph_index === i && sentence_index === j }"
             :title="isPreview ? '' : '点击校对'"
             :style="{
               ...item.activeTextStyle,

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

@@ -199,7 +199,23 @@ export default {
         if (isEnable(val) && text) {
           this.data.paragraph_list_parameter.text = text;
           this.data.paragraph_list_parameter.is_first_sentence_first_hz_pinyin_first_char_upper_case =
-            val.is_first_sentence_first_hz_pinyin_first_char_upper_case;
+            this.data.property.is_first_sentence_first_hz_pinyin_first_char_upper_case;
+          this.crateParsedTextInfoPinyin(text);
+        }
+      },
+      deep: true,
+    },
+    'data.property.is_first_sentence_first_hz_pinyin_first_char_upper_case': {
+      handler(val) {
+        let text = '';
+        this.data.option_list.forEach((item) => {
+          item.forEach((items) => {
+            text += `${items.content.replace(/<[^>]+>/g, '')}\n`;
+          });
+        });
+        if (text) {
+          this.data.paragraph_list_parameter.text = text;
+          this.data.paragraph_list_parameter.is_first_sentence_first_hz_pinyin_first_char_upper_case = val;
           this.crateParsedTextInfoPinyin(text);
         }
       },
@@ -216,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)$/))
@@ -232,7 +249,9 @@ export default {
                       value: '',
                       type: 'input',
                       mark: getRandomNumber(),
+                      inputIndex,
                     });
+                    inputIndex++;
                   }
                 });
                 // // 去除所有的 font-size 样式
@@ -295,7 +314,49 @@ export default {
         this.data.property.is_first_sentence_first_hz_pinyin_first_char_upper_case;
       CrateParsedTextInfo_Pinyin(this.data.paragraph_list_parameter).then((res) => {
         if (res.parsed_text) {
-          this.data.paragraph_list = res.parsed_text.paragraph_list;
+          const mergedData = res.parsed_text.paragraph_list.map((outerArr, i) =>
+            outerArr.map((innerArr, j) =>
+              innerArr.map((newItem, k) => {
+                // 从 originalData 中找到对应的项
+                const originalItem = this.data.paragraph_list[i]?.[j]?.[k];
+
+                // 如果 originalItem 有 activeTextStyle，就合并到 newItem
+                if (originalItem?.activeTextStyle) {
+                  return {
+                    ...newItem,
+                    activeTextStyle: originalItem.activeTextStyle,
+                  };
+                }
+                // 否则直接返回 newItem
+                return newItem;
+              }),
+            ),
+          );
+          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++;
+                  } else {
+                    items.model_pinyin.push(itemP);
+                  }
+                });
+                pinyin_index++;
+              }
+            });
+          });
         }
       });
     },

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

@@ -49,20 +49,54 @@
                 }"
               >
                 <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"
+                      :class="[index === 0 ? 'pinyin-text-left' : '']"
+                    >
+                      <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-if="data.property.pinyin_position === 'bottom'" class="pinyin">&nbsp;</span>
+                        <!-- <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 +120,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 +186,7 @@ export default {
           this.$set(this.multilingualTextList, item.type, chunkedArr);
         });
       }
+      console.log(this.data);
     },
     computedAnswerText(mark) {
       if (!this.isShowRightAnswer) return '';
@@ -190,7 +226,9 @@ $border-color: #e6e6e6;
 
     .cell-wrap {
       display: flex;
+      flex-flow: wrap;
       grid-area: fill;
+      align-items: end;
 
       p {
         margin: 0;
@@ -252,6 +290,28 @@ $border-color: #e6e6e6;
     .multilingual {
       word-break: break-word;
     }
+
+    .pinyin-text {
+      display: flex;
+      flex-direction: column;
+      padding: 0 1px;
+      font-size: 16px;
+
+      span {
+        text-align: center;
+      }
+
+      .pinyin {
+        font-family: 'League';
+        font-size: 12px;
+      }
+
+      &-left {
+        span {
+          text-align: left;
+        }
+      }
+    }
   }
 }
 </style>