Bladeren bron

课文拼音预览添加拼音校对功能

natasha 1 week geleden
bovenliggende
commit
c66b3284cf

+ 284 - 0
src/views/book/courseware/create/components/question/article/Article.vue

@@ -62,6 +62,7 @@
                 :style="{
                   textAlign: windex === 0 && wIndex === 0 ? 'left' : '',
                 }"
+                @click="selectItem(wItem)"
               >
                 <span class="pinyin">{{
                   windex === 0 &&
@@ -77,6 +78,52 @@
         </template>
       </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="article-checkpinyin-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>
+      <el-dialog
         v-if="showArticleFlag"
         :visible.sync="showArticleFlag"
         :show-close="true"
@@ -180,6 +227,7 @@ import {
 } from '@/api/article';
 const Base64 = require('js-base64').Base64;
 import cnchar from 'cnchar';
+import { toolGetWordPinyinCorrectionList } from '@/api/pinyinCorrection';
 
 export default {
   name: 'ArticlePage',
@@ -214,6 +262,27 @@ export default {
       autoLoading: false,
       visible: false,
       subtitleList: [],
+      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: [], // 拼音校正列表
     };
   },
   watch: {
@@ -806,6 +875,148 @@ export default {
         });
       }
     },
+    selectItem(item) {
+      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.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.itemActive.pinyin = this.checkPinyinInput.replace(/\s+/g, '');
+            this.$message.success('保存成功');
+            // this.itemActive = null;
+            this.checkPinyinInput = '';
+            this.oldInput = '';
+            this.dialogFlag = false;
+          }, 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;
+    },
   },
 };
 </script>
@@ -913,3 +1124,76 @@ export default {
   }
 }
 </style>
+<style lang="scss">
+.article-checkpinyin-dialog {
+  .el-dialog__header {
+    padding: 0;
+  }
+
+  .el-dialog__body {
+    padding: 0;
+  }
+
+  .el-input__inner {
+    text-align: center;
+    background: #f3f3f3;
+  }
+
+  .check-box {
+    padding: 24px;
+    background: #fff;
+    border-radius: 4px;
+    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 25%);
+
+    .content {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      .words-box {
+        color: #000;
+        text-align: center;
+
+        .words {
+          display: block;
+          font-size: 28px;
+          font-weight: 400;
+          line-height: 40px;
+        }
+
+        .pinyin {
+          display: block;
+          height: 20px;
+          font-family: 'League';
+          font-size: 20px;
+          font-weight: 400;
+          line-height: 1;
+        }
+      }
+    }
+
+    .checkPinyinInput {
+      margin: 16px 0 8px;
+    }
+
+    .tips {
+      margin: 0 0 24px;
+      font-size: 12px;
+      font-weight: 400;
+      line-height: 18px;
+      color: #a0a0a0;
+    }
+
+    .btn-box {
+      display: block;
+      text-align: right;
+
+      .el-button {
+        padding: 2px 12px;
+        font-size: 12px;
+        line-height: 20px;
+      }
+    }
+  }
+}
+</style>

+ 283 - 0
src/views/book/courseware/create/components/question/dialogue_article/Article.vue

@@ -83,6 +83,7 @@
                       :style="{
                         textAlign: windex === 0 && wIndex === 0 ? 'left' : '',
                       }"
+                      @click="selectItem(wItem)"
                     >
                       <span class="pinyin">{{
                         windex === 0 &&
@@ -199,6 +200,52 @@
         </div>
       </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="article-checkpinyin-dialog"
+      >
+        <div class="check-box">
+          <div class="contents">
+            <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>
+      <el-dialog
         title="气泡"
         :visible.sync="remarkVisible"
         width="50%"
@@ -380,6 +427,7 @@ import ResourcesOperate from '../../common/ResourcesOperate.vue';
 
 import { getArticleData } from '@/views/book/courseware/data/dialogueArticle';
 import { fileUpload, TextToAudioFile } from '@/api/app';
+import { toolGetWordPinyinCorrectionList } from '@/api/pinyinCorrection';
 import {
   segSentences,
   BatchSegContent,
@@ -427,6 +475,27 @@ export default {
       autoLoading: false,
       visible: false,
       subtitleList: [],
+      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: [], // 拼音校正列表
     };
   },
   watch: {
@@ -1166,6 +1235,148 @@ export default {
         });
       }
     },
+    selectItem(item) {
+      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.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.itemActive.pinyin = this.checkPinyinInput.replace(/\s+/g, '');
+            this.$message.success('保存成功');
+            // this.itemActive = null;
+            this.checkPinyinInput = '';
+            this.oldInput = '';
+            this.dialogFlag = false;
+          }, 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;
+    },
   },
 };
 </script>
@@ -1401,4 +1612,76 @@ export default {
     cursor: pointer;
   }
 }
+
+.article-checkpinyin-dialog {
+  .el-dialog__header {
+    padding: 0;
+  }
+
+  .el-dialog__body {
+    padding: 0;
+  }
+
+  .el-input__inner {
+    text-align: center;
+    background: #f3f3f3;
+  }
+
+  .check-box {
+    padding: 24px;
+    background: #fff;
+    border-radius: 4px;
+    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 25%);
+
+    .contents {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      .words-box {
+        color: #000;
+        text-align: center;
+
+        .words {
+          display: block;
+          font-size: 28px;
+          font-weight: 400;
+          line-height: 40px;
+        }
+
+        .pinyin {
+          display: block;
+          height: 20px;
+          font-family: 'League';
+          font-size: 20px;
+          font-weight: 400;
+          line-height: 1;
+        }
+      }
+    }
+
+    .checkPinyinInput {
+      margin: 16px 0 8px;
+    }
+
+    .tips {
+      margin: 0 0 24px;
+      font-size: 12px;
+      font-weight: 400;
+      line-height: 18px;
+      color: #a0a0a0;
+    }
+
+    .btn-box {
+      display: block;
+      text-align: right;
+
+      .el-button {
+        padding: 2px 12px;
+        font-size: 12px;
+        line-height: 20px;
+      }
+    }
+  }
+}
 </style>