课文校对分词和校对拼音需在同一个页面，需要通过拼音了解哪些分词有误

src/views/book/courseware/create/components/question/article/Article.vue

@@ -101,7 +101,13 @@
         width="80%"
         class="practiceBox"
       >
-        <CheckArticle :data="data" @saveWord="saveWord" @savePinyin="savePinyin" @saveStyle="saveStyle" />
+        <CheckArticle
+          ref="CheckArticle"
+          :data="data"
+          @saveWord="saveWord"
+          @savePinyin="savePinyin"
+          @saveStyle="saveStyle"
+        />
       </el-dialog>
       <el-dialog title="校对字幕时间" :visible.sync="compareShow" width="50%" :before-close="handleClose" top="0">
         <CompareTime
@@ -588,6 +594,7 @@ export default {
               this.data.detail.push(obj);
             }
           });
+          this.$refs.CheckArticle.refreshData();
         }
       });
       this.$message.success('保存成功，请校对拼音');

src/views/book/courseware/create/components/question/article/CheckArticle.vue

@@ -4,8 +4,8 @@
       <div class="main-top">
         <b>校对</b>
         <div class="btn-box">
-          <el-button @click="showWordFlag = true">校对分词</el-button>
-          <el-button @click="showPinyinFlag = true">校对拼音</el-button>
+          <el-button @click="showWordFlag = true">校对分词和拼音</el-button>
+          <!-- <el-button @click="showPinyinFlag = true">校对拼音</el-button> -->
           <el-button @click="showStyleFlag = true">校对样式</el-button>
         </div>
       </div>
@@ -47,7 +47,7 @@
       width="80%"
       class="practiceBox"
     >
-      <CheckWord :data="data" @saveWord="saveWord" />
+      <CheckWord ref="CheckWord" :data="data" @saveWord="saveWord" @savePinyin="savePinyin" />
     </el-dialog>
     <el-dialog
       v-if="showPinyinFlag"
@@ -237,6 +237,9 @@ export default {
     saveWord(saveArr) {
       this.$emit('saveWord', saveArr);
     },
+    refreshData() {
+      this.$refs.CheckWord.refreshData();
+    },
     savePinyin(paraIndex, sentenceIndex, wordIndex, pinyin) {
       this.$emit('savePinyin', paraIndex, sentenceIndex, wordIndex, pinyin);
     },

src/views/book/courseware/create/components/question/article/CheckWord.vue

@@ -15,16 +15,102 @@
                 active-text="显示词性"
                 inactive-text="">
             </el-switch> -->
-          <el-button type="primary" @click="saveWord">保存</el-button>
+          <el-button type="primary" @click="saveWord">保存分词</el-button>
+        </div>
+      </div>
+      <el-input v-model="noPosContent" class="no-pos-content" type="textarea" :autosize="{ minRows: 15 }" />
+
+      <div class="main-top" style="margin-top: 48px">
+        <div style="display: flex">
+          <b>校对拼音</b>
+        </div>
+        <!-- <div class="btn-box">
+          <el-button type="primary" @click="savePinyin">保存</el-button>
+        </div> -->
+      </div>
+      <div class="article" v-loading="loading">
+        <el-form>
+          <el-form-item label="标注方式">
+            <el-radio-group v-model="data.pinyin_type" @change="getArticleData">
+              <el-radio label="pinyin">拼音</el-radio>
+              <el-radio label="tone">声调</el-radio>
+            </el-radio-group>
+          </el-form-item>
+        </el-form>
+        <div v-for="(item, index) in indexArr" :key="index + 'paragraph'" class="paragraph">
+          <div v-for="(items, indexs) in item" :key="indexs + 'words'" class="sentence-box">
+            <div
+              class="sentence"
+              :style="{
+                marginRight: items.marginRight ? '8px' : '',
+                color: activeIndex === index + '_' + items.sentenceIndex + '_' + items.wordIndex ? '#F2555A' : '',
+              }"
+              @click="selectItem(items, index)"
+            >
+              <span class="pinyin">{{ items.pinyin }}</span>
+              <span
+                class="words"
+                :class="[/^[0-9]*$/.test(items.text)] ? (/^[\u4e00-\u9fa5]/.test(items.text) ? 'hanzi' : 'en') : ''"
+              >
+                {{ items.text }}
+              </span>
+            </div>
+          </div>
         </div>
       </div>
-      <el-input v-model="noPosContent" class="no-pos-content" type="textarea" :autosize="{ minRows: 27 }" />
     </div>
+    <el-dialog
+      v-if="dialogFlag"
+      :visible.sync="dialogFlag"
+      :show-close="false"
+      :close-on-click-modal="false"
+      :modal-append-to-body="false"
+      :modal="false"
+      width="250px"
+      class="login-dialog"
+    >
+      <div class="check-box">
+        <div class="content">
+          <div class="words-box">
+            <span class="pinyin">
+              {{ itemActive.pinyin }}
+            </span>
+            <span class="words">
+              {{ itemActive.text }}
+            </span>
+          </div>
+        </div>
+        <!-- <el-input v-model="checkPinyinInput" type="text" class="checkPinyinInput" /> -->
+        <el-select
+          v-model="checkPinyinInput"
+          placeholder="请选择"
+          filterable
+          allow-create
+          default-first-option
+          class="checkPinyinInput"
+        >
+          <el-option v-for="item in pinyinList" :key="item.pinyin" :value="item.pinyin.replace(/,/g, '')">
+            <span style="float: left">{{ item.pinyin.replace(/,/g, '') }}</span>
+            <span style="float: right; font-size: 13px; color: #8492a6">{{
+              item.storage_type === 1 ? '机构库' : item.storage_type === 2 ? '全域库' : '个人库'
+            }}</span>
+          </el-option>
+        </el-select>
+        <p class="tips">
+          一到四声分别用数字1-4表示。拼音间用空格隔开，儿化音用_代替空格，如“骨朵儿”输入“gu1 duo3_er”。
+        </p>
+        <div class="btn-box">
+          <el-button type="info" size="small" @click="cancleDialog">取消</el-button>
+          <el-button type="primary" size="small" @click="surePinyin">保存</el-button>
+        </div>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
 <script>
 // import { publicMethods, reparse } from '@/api/api';
+import { toolGetWordPinyinCorrectionList } from '@/api/pinyinCorrection';
 
 export default {
   components: {},
@@ -32,6 +118,32 @@ export default {
   data() {
     return {
       noPosContent: '',
+      loading: false,
+      id: '',
+      ArticelData: null,
+      indexArr: [], // 索引数组
+      activeIndex: null,
+      itemActive: null,
+      dialogFlag: false,
+      checkPinyinInput: '',
+      oldInput: '',
+      tableData: [
+        ['ā', 'á', 'ǎ', 'à', 'a'],
+        ['ō', 'ó', 'ǒ', 'ò', 'o'],
+        ['ē', 'é', 'ě', 'è', 'e'],
+        ['ī', 'í', 'ǐ', 'ì', 'i'],
+        ['ū', 'ú', 'ǔ', 'ù', 'u'],
+        ['ǖ', 'ǘ', 'ǚ', 'ǜ', 'ü'],
+        ['Ā', 'Á', 'Â', 'À', 'A'],
+        ['Ō', 'Ó', 'Ô', 'Ò', 'O'],
+        ['Ē', 'É', 'Ê', 'È', 'E'],
+        ['Ī', 'Í', 'Î', 'Ì', 'I'],
+        ['Ū', 'Ú', 'Û', 'Ù', 'U'],
+        ['n', 'ń', 'ň', 'ǹ', 'n'],
+        ['m̄', 'ḿ', 'm', 'm̀', 'm'],
+      ],
+      toneList: [' ', 'ˉ', 'ˊ', 'ˇ', 'ˋ'],
+      pinyinList: [], // 拼音校正列表
     };
   },
   // 生命周期 - 创建完成（可以访问当前this实例）
@@ -66,6 +178,54 @@ export default {
         }
       });
       this.noPosContent = str;
+
+      this.loading = true;
+      let newdata = [];
+      this.data.detail.forEach((item) => {
+        if (item.wordsList && item.wordsList.length !== 0) {
+          newdata.push(item);
+        }
+      });
+      // this.ArticelData = JSON.parse(JSON.stringify(newdata));
+      let saveArr = [];
+      let arr = [];
+      let saveIndex = 0;
+      // 添加索引
+      newdata.forEach((item, index) => {
+        arr.push([]);
+        if (item.type === 'notice') return;
+
+        item.wordsList.forEach((items, indexs) => {
+          items.forEach((itemss, indexss) => {
+            let pinyin =
+              this.data.pinyin_type === 'pinyin'
+                ? this.data.property.is_first_sentence_first_hz_pinyin_first_char_upper_case === 'true' && indexss === 0
+                  ? itemss.pinyin_up
+                  : itemss.pinyin
+                : itemss.pinyin_tone;
+            let obj = {
+              text: itemss.chs,
+              pinyin,
+              paraIndex: item.paraIndex,
+              sentenceIndex: indexs,
+              wordIndex: indexss,
+              marginRight: true,
+              saveIndex,
+            };
+            arr[index].push(obj);
+            let saveObj = {
+              word: itemss.chs,
+              pinyin,
+              // pinyin_lt: itemss.pinyin_lt?itemss.pinyin_lt:''
+            };
+            saveArr.push(saveObj);
+            saveIndex++;
+          });
+        });
+      });
+      this.indexArr = arr;
+      this.ArticelData = saveArr;
+      this.loading = false;
     },
     saveWord() {
       let saveArr = [];
@@ -93,6 +253,168 @@ export default {
         }
       });
       this.$emit('saveWord', saveArr);
+      this.loading = true;
+    },
+    refreshData() {
+      this.getArticleData();
+    },
+    selectItem(item, index) {
+      this.activeIndex = `${index}_${item.sentenceIndex}_${item.wordIndex}`;
+      this.itemActive = item;
+      this.pinyinList = [];
+      toolGetWordPinyinCorrectionList({
+        word: item.text,
+      })
+        .then((res) => {
+          if (res.status === 1) {
+            this.pinyinList = res.pinyin_correction_list;
+          }
+          this.dialogFlag = true;
+        })
+        .catch(() => {
+          this.dialogFlag = true;
+        });
+
+      this.checkPinyinInput = '';
+    },
+    cancleDialog() {
+      this.activeIndex = null;
+      this.itemActive = null;
+      this.checkPinyinInput = '';
+      this.oldInput = '';
+      this.dialogFlag = false;
+    },
+    surePinyin() {
+      this.oldInput = JSON.parse(JSON.stringify(this.checkPinyinInput.trim()));
+      this.handleReplaceTone(this.checkPinyinInput.trim());
+    },
+    handleReplaceTone(e) {
+      let _this = this;
+      _this.$nextTick(() => {
+        let value = e;
+        _this.resArr = [];
+        if (value) {
+          let valueArr = [];
+          value.replace(/\s+/g, ' ');
+          valueArr = value.split(' ');
+          //   let reg = /\s+/g;
+          //   valueArr = value.split(reg);
+
+          valueArr.forEach((item, index) => {
+            if (this.data.pinyin_type === 'tone') {
+              this.resArr.push([
+                {
+                  con: this.toneList[Number(item)],
+                },
+              ]);
+            } else {
+              this.handleValue(item);
+            }
+          });
+          let str = '';
+          setTimeout(() => {
+            _this.resArr.forEach((item) => {
+              str += ' ';
+              item.forEach((sItem) => {
+                if (sItem.number && sItem.con) {
+                  let number = Number(sItem.number);
+                  let con = sItem.con;
+                  let word = _this.addTone(number, con);
+                  str += word;
+                } else if (sItem.number) {
+                  str += sItem.number;
+                } else if (sItem.con) {
+                  str += ` ${sItem.con} `;
+                }
+              });
+            });
+            this.checkPinyinInput = str.trim();
+            this.ArticelData[this.itemActive.saveIndex].pinyin = this.checkPinyinInput
+              .replace(/\s+/g, ' ')
+              .split(/\s+/)
+              .join(',');
+            this.itemActive.pinyin = this.checkPinyinInput.replace(/\s+/g, '');
+            this.savePinyin();
+          }, 10);
+        }
+      });
+    },
+    handleValue(valItem) {
+      let reg = /\d/;
+      let reg2 = /[A-Za-z]+\d/g;
+      let numList = [];
+      let valArr = valItem.split('');
+      if (reg2.test(valItem)) {
+        for (let i = 0; i < valArr.length; i++) {
+          let item = valItem[i];
+          if (reg.test(item)) {
+            let numIndex = numList.length == 0 ? 0 : numList[numList.length - 1].index;
+            let con = valItem.substring(numIndex, i);
+            con = con.replace(/\d/g, '');
+            let obj = {
+              index: i,
+              number: item,
+              con,
+              isTran: true,
+            };
+            numList.push(obj);
+          }
+        }
+      } else {
+        numList = [];
+      }
+      if (numList.length == 0) {
+        this.resArr.push([{ con: valItem }]);
+      } else {
+        this.resArr.push(numList);
+      }
+    },
+    addTone(number, con) {
+      let _this = this;
+      let zmList = ['a', 'o', 'e', 'i', 'u', 'v', 'A', 'O', 'E', 'I', 'U', 'n', 'm'];
+      if (number) {
+        for (let i = 0; i < zmList.length; i++) {
+          let zm = zmList[i];
+          if (con.indexOf(zm) > -1) {
+            let zm2 = _this.tableData[i][number - 1];
+            if (con.indexOf('iu') > -1) {
+              zm2 = _this.tableData[4][number - 1];
+              con = con.replace('u', zm2);
+            } else if (con.indexOf('ui') > -1) {
+              zm2 = _this.tableData[3][number - 1];
+              con = con.replace('i', zm2);
+            } else if (
+              con.indexOf('yv') > -1 ||
+              con.indexOf('jv') > -1 ||
+              con.indexOf('qv') > -1 ||
+              con.indexOf('xv') > -1
+            ) {
+              zm2 = _this.tableData[4][number - 1];
+              con = con.replace('v', zm2);
+            } else {
+              con = con.replace(zm, zm2);
+            }
+
+            break;
+          }
+        }
+      }
+      return con;
+    },
+    savePinyin() {
+      this.$emit(
+        'savePinyin',
+        this.itemActive.paraIndex,
+        this.itemActive.sentenceIndex,
+        this.itemActive.wordIndex,
+        this.itemActive.pinyin,
+      );
+      this.$message.success('保存成功');
+      this.activeIndex = null;
+      // this.itemActive = null;
+      this.checkPinyinInput = '';
+      this.oldInput = '';
+      this.dialogFlag = false;
     },
   },
 };
@@ -284,6 +606,50 @@ export default {
     }
   }
 }
+
+.article {
+  padding: 8px;
+  background: #fcfcfc;
+  border: 1px solid rgba(0, 0, 0, 8%);
+  border-radius: 2px;
+}
+
+.paragraph {
+  display: flex;
+  flex-flow: wrap;
+  width: 100%;
+  margin-bottom: 24px;
+  text-align: center;
+
+  .sentence-box {
+    display: flex;
+    flex-flow: wrap;
+    float: left;
+
+    .sentence {
+      margin-top: 8px;
+      color: #000;
+      text-align: center;
+      cursor: pointer;
+
+      .words {
+        display: block;
+        font-size: 20px;
+        font-weight: 400;
+        line-height: 28px;
+      }
+
+      .pinyin {
+        display: block;
+        height: 14px;
+        font-family: 'League';
+        font-size: 14px;
+        font-weight: 400;
+        line-height: 1;
+      }
+    }
+  }
+}
 </style>
 <style lang="scss">
 .check-article {

src/views/book/courseware/create/components/question/dialogue_article/Article.vue

@@ -369,7 +369,13 @@
         width="80%"
         class="practiceBox"
       >
-        <CheckArticle :data="data" @saveWord="saveWord" @savePinyin="savePinyin" @saveStyle="saveStyle" />
+        <CheckArticle
+          ref="CheckArticle"
+          :data="data"
+          @saveWord="saveWord"
+          @savePinyin="savePinyin"
+          @saveStyle="saveStyle"
+        />
       </el-dialog>
 
       <el-dialog title="校对字幕时间" :visible.sync="compareShow" width="50%" :before-close="handleClose" top="0">
@@ -1041,6 +1047,7 @@ export default {
               this.data.detail.push(obj);
             }
           });
+          this.$refs.CheckArticle.refreshData();
         }
       });
       this.$message.success('保存成功，请校对拼音');