Selaa lähdekoodia

例句编辑功能

natasha 1 vuosi sitten
vanhempi
commit
f529a1a476
2 muutettua tiedostoa jossa 549 lisäystä ja 223 poistoa
  1. 1 0
      src/views/Textanalysis/index.vue
  2. 548 223
      src/views/corpus/seekPage.vue

+ 1 - 0
src/views/Textanalysis/index.vue

@@ -1543,6 +1543,7 @@ export default {
                 label: {
                   fontSize: 12,
                   position: 'inner',
+                  color: '#fff',
                 },
                 itemStyle: {
                   borderColor: '#f5f5f5',

+ 548 - 223
src/views/corpus/seekPage.vue

@@ -60,8 +60,47 @@
           ><span>{{ items.name }}</span></label
         >
       </div>
+      <template v-if="editLiju">
+        <el-row v-if="editLijuFlag">
+          <el-button
+            type="info"
+            class="edit-cancle"
+            @click="
+              editLijuFlag = false;
+              page = 1;
+              padingEvetn();
+            "
+            >取消</el-button
+          >
+          <el-button
+            type="primary"
+            class="edit-sure"
+            @click="
+              editLijuFlag = false;
+              page = 1;
+              padingEvetn();
+            "
+            >完成</el-button
+          ></el-row
+        >
+        <el-button
+          v-else
+          class="edit-liju"
+          @click="
+            editLijuFlag = true;
+            selectDelLijuIds = [];
+            page = 1;
+            padingEvetn();
+          "
+          >例句编辑模式</el-button
+        >
+      </template>
     </div>
-    <div class="txt_imgtable" v-if="showResult">
+    <div
+      class="txt_imgtable"
+      v-if="showResult"
+      :style="{ height: editLijuFlag ? '0' : '', overflow: editLijuFlag ? 'hidden' : '' }"
+    >
       <div class="left">
         <div class="top">
           <div>
@@ -413,6 +452,118 @@
         </div>
       </div>
     </div>
+    <div class="edit-liju-box" v-if="editLijuFlag === true && showResult">
+      <div class="top">
+        <div>
+          <span class="select-number">已选 {{ selectDelLijuIds.length }}</span>
+          <el-button type="danger" plain @click="handleDelLiju"><i class="el-icon-delete"></i>删除选中</el-button>
+        </div>
+        <el-button type="primary" plain @click="handleEditLiju()"><i class="el-icon-plus"></i>增加例句</el-button>
+      </div>
+      <div class="main">
+        <div class="list">
+          <div v-for="(item, i) in ShowList" :key="i + 'sentence'" class="one">
+            <div class="top">
+              <!--
+                      :class="['number-' + sizeIndex + '-' + pinyinShow]"
+                     -->
+              <el-checkbox v-model="selectDelLijuIds" :label="item.sentence_id"><br /></el-checkbox>
+              <div class="number">{{ item.number }}.</div>
+              <!--
+                      :class="['speaker-' + sizeIndex + '-' + pinyinShow]"
+                     -->
+              <!-- <img src="../../assets/teacherdev/speaker-one.png" alt="" /> -->
+              <div class="words">
+                <template v-if="item.sentence_fc_list_style && item.sentence_fc_list_style.length > 1">
+                  <span
+                    :style="{
+                      fontSize: conSize + 'px',
+                    }"
+                    v-for="(items, indexs) in item.sentence_fc_list_style"
+                    :key="indexs"
+                    v-html="items"
+                  ></span>
+                </template>
+                <template v-else>
+                  <span
+                    :style="{
+                      fontSize: conSize + 'px',
+                      padding: fenciShow ? '0 2px' : '',
+                    }"
+                    v-html="item.res"
+                  ></span>
+                </template>
+                <template v-if="shiyiShow && item.word_definition_list.length > 0">
+                  <span class="shiyi">
+                    (
+                    <span v-html="item.word_definition_list.join('; ')"> </span>
+                    )
+                  </span>
+                </template>
+              </div>
+              <!--
+                      :class="['shiyi-' + sizeIndex]"
+                     -->
+            </div>
+            <el-tooltip effect="dark" placement="bottom">
+              <div slot="content">
+                {{
+                  item.source_courseware_name_path_short
+                    ? item.source_courseware_name_path_short
+                    : item.source_courseware_name_path
+                }}
+              </div>
+              <div class="bottom">
+                {{
+                  item.source_courseware_name_path_short
+                    ? item.source_courseware_name_path_short
+                    : item.source_courseware_name_path
+                }}
+              </div>
+            </el-tooltip>
+            <i class="el-icon-edit-outline" @click="handleEditLiju(item)"></i>
+          </div>
+        </div>
+        <div class="page">
+          <el-pagination
+            background
+            @current-change="handleCurrentChange"
+            :current-page.sync="page"
+            :page-size="pageSize"
+            layout="prev, pager, next"
+            :total="allList.sentence_list.length"
+            :pager-count="5"
+          >
+          </el-pagination>
+          <span class="text"> 共 {{ allList.sentence_list.length }} 条 </span>
+        </div>
+      </div>
+    </div>
+    <el-dialog
+      title=""
+      :visible.sync="showEditLijuFlag"
+      width="365px"
+      :before-close="handleClose"
+      :modal="false"
+      v-if="actvieEditLijuItem"
+      class="seekpage-dialog"
+    >
+      <label>{{ actvieEditLijuItem.sentence_id ? '修改例句' : '增加例句' }}</label>
+      <el-input v-model="actvieEditLijuItem.sentence"></el-input>
+      <b class="tips">关键字不能删除,分词用空格区分。</b>
+      <label>关键字</label>
+      <p>{{ keyword }}</p>
+      <label>词性</label>
+      <el-input v-model="actvieEditLijuItem.cixing"></el-input>
+      <b class="tips">多个词性用逗号分割</b>
+      <label>释义</label>
+      <el-input type="textarea" v-model="actvieEditLijuItem.definition_list"></el-input>
+      <b class="tips">多条释义另起一行</b>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="handleClose">取 消</el-button>
+        <el-button type="primary" @click="save" :loading="loading">确 定</el-button>
+      </span>
+    </el-dialog>
   </div>
 </template>
 
@@ -421,7 +572,7 @@
 //例如:import 《组件名称》from ‘《组件路径》';
 import Header from '@/components/Header';
 import { getConfigInfor } from '@/utils/index';
-import { getStaticContent, BookgetContent } from '@/api/api';
+import { getStaticContent, BookgetContent, LearnWebSI } from '@/api/api';
 import { setToken } from '@/utils/auth';
 import * as echarts from 'echarts';
 
@@ -495,6 +646,11 @@ export default {
       shiyiList: [], //含有释义例句列表
       bookListObj: {}, //书籍id和名称对应关系
       bookSourceObj: {}, //书籍来源id对应关系
+      editLiju: false, // 是否有编辑例句权限
+      editLijuFlag: false, // 编辑例句模式
+      selectDelLijuIds: [], // 选中删除例句id数组
+      actvieEditLijuItem: null,
+      showEditLijuFlag: false,
     };
   },
   //计算属性 类似于data概念
@@ -885,9 +1041,8 @@ export default {
               this.rightList = res.stat_list_sentence_source_book;
             }
             this.getrightListdata();
-            if (this.patternIndex === 0) {
-              this.allList.sentence_list = this.handleExample(res.sentence_list);
-            } else {
+            this.allList.sentence_list = this.handleExample(res.sentence_list);
+            if (this.patternIndex === 1) {
               if (this.KWIC_sortIndex === 0) {
                 this.allList.sentence_list_sort_left = this.handleExample(res.sentence_list, 'left');
               } else if (this.KWIC_sortIndex === 1) {
@@ -1067,7 +1222,9 @@ export default {
           ? JSON.parse(JSON.stringify(this.shiyiList))
           : JSON.parse(JSON.stringify(this.CurrentList));
       let arrs = [];
-      if (this.selectLaiyuanBookIdList.length === 0) {
+      if (this.editLijuFlag) {
+        arrs = JSON.parse(JSON.stringify(this.allList.sentence_list));
+      } else if (this.selectLaiyuanBookIdList.length === 0) {
         arrs = arr;
       } else {
         arr.forEach((item) => {
@@ -1211,6 +1368,74 @@ export default {
       this.inityuan();
       //   }
     },
+    //编辑例句
+    handleEditLiju(item) {
+      this.actvieEditLijuItem = {
+        sentence_id: item ? item.sentence_id : '',
+        new_word: this.keyword ? this.keyword.trim() : '',
+        cixing: '',
+        definition_list: item ? item.word_definition_list.join('\n') : '',
+        sentence: item ? item.sentence_fc_list.join('  ') : '',
+      };
+      this.showEditLijuFlag = true;
+    },
+    handleClose() {
+      this.showEditLijuFlag = false;
+      this.actvieEditLijuItem = null;
+    },
+    // 保存
+    save() {
+      this.loading = true;
+      let word_list = [];
+      this.actvieEditLijuItem.sentence.split('  ').forEach((item) => {
+        let obj = {
+          word: item,
+        };
+        word_list.push(obj);
+      });
+      // 编辑
+      let Mname = 'book-courseware_manager-UpdateWordExampleSentence';
+      BookgetContent(Mname, {
+        sentence_id: this.actvieEditLijuItem.sentence_id,
+        new_word: {
+          new_word: this.actvieEditLijuItem.new_word,
+          cixing: this.actvieEditLijuItem.cixing,
+          definition_list: this.actvieEditLijuItem.definition_list.split('\n'),
+        },
+
+        word_list: word_list,
+      })
+        .then((res) => {
+          this.loading = false;
+          this.showEditLijuFlag = false;
+          this.actvieEditLijuItem = null;
+          this.$message.success('保存成功');
+          this.page = 1;
+          this.getdata(true);
+        })
+        .catch((res) => {
+          this.loading = false;
+        });
+    },
+    // 删除例句
+    handleDelLiju() {
+      if (this.selectDelLijuIds.length === 0) return;
+      this.loading = true;
+      let Mname = 'book-courseware_manager-DeleteWordExampleSentence';
+      BookgetContent(Mname, {
+        sentence_id: this.selectDelLijuIds[0],
+      })
+        .then((res) => {
+          this.loading = false;
+          this.selectDelLijuIds = [];
+          this.$message.success('删除成功');
+          this.page = 1;
+          this.getdata(true);
+        })
+        .catch((res) => {
+          this.loading = false;
+        });
+    },
   },
   //生命周期 - 创建完成(可以访问当前this实例)
   async created() {
@@ -1463,223 +1688,6 @@ export default {
           margin-left: 2px;
         }
       }
-      .main {
-        // height: 95%;
-        .list {
-          margin-top: 16px;
-
-          .one {
-            padding: 0 16px;
-            margin-bottom: 8px;
-            display: flex;
-            align-items: end;
-
-            .top {
-              display: flex;
-              //   align-items: center;
-
-              // flex-flow: wrap;
-              width: 100%;
-
-              .number {
-                flex-shrink: 0;
-                width: 22px;
-                margin-right: 8px;
-                font-size: 14px;
-                font-weight: 400;
-                line-height: 21px;
-                color: rgba(0, 0, 0, 30%);
-                text-align: right;
-
-                &-1-false {
-                  margin-top: 3px;
-                }
-
-                &-0-true {
-                  margin-top: 21px;
-                }
-
-                &-0-false {
-                  margin-top: 5px;
-                }
-
-                &-2-true {
-                  margin-top: 17px;
-                }
-
-                &-2-false {
-                  margin-top: 1px;
-                }
-              }
-
-              img {
-                width: 16px;
-                height: 16px;
-                margin-right: 8px;
-                cursor: pointer;
-
-                &.speaker-1-false {
-                  margin-top: 6px;
-                }
-
-                &.speaker-0-true {
-                  margin-top: 24px;
-                }
-
-                &.speaker-0-false {
-                  margin-top: 8px;
-                }
-
-                &.speaker-2-true {
-                  margin-top: 20px;
-                }
-
-                &.speaker-2-false {
-                  margin-top: 4px;
-                }
-              }
-
-              .words {
-                // display: flex;
-                // align-items: flex-end;
-                // flex-flow: wrap;
-                font-family: 'FZJCGFKTK';
-                word-break: break-all;
-
-                > div {
-                  .pinyin {
-                    margin-bottom: 2px;
-                    font-family: 'League';
-                    font-size: 12px;
-                    font-weight: 500;
-                    color: rgba(0, 0, 0, 50%);
-                    text-align: center;
-                  }
-
-                  .con {
-                    font-family: 'FZJCGFKTK';
-                    font-size: 20px;
-                    font-weight: 400;
-                    color: #000;
-                    text-align: center;
-                  }
-                }
-              }
-
-              .shiyi {
-                font-size: 12px;
-                font-weight: 400;
-                line-height: 24px;
-                color: #48a3e6;
-                font-family: 'robot', 'FZJCGFKTK';
-                &-0 {
-                  line-height: 32px;
-                }
-
-                &-1 {
-                  line-height: 28px;
-                }
-              }
-            }
-
-            .bottom {
-              font-size: 12px;
-              font-weight: 400;
-              line-height: 150%;
-              color: rgba(0, 0, 0, 30%);
-              text-align: right;
-              width: 117px;
-              overflow: hidden;
-              text-overflow: ellipsis;
-              white-space: nowrap;
-              flex-shrink: 0;
-            }
-          }
-
-          .kwic_one {
-            display: flex;
-            align-items: center;
-            padding: 0 16px;
-            justify-content: space-between;
-
-            > :nth-child(1) {
-              justify-content: flex-end;
-              width: 16px;
-              margin-right: 16px;
-            }
-
-            .laiyuan {
-              width: 117px;
-              overflow: hidden;
-              font-size: 14px;
-              font-weight: 400;
-              line-height: 22px;
-              color: rgba(0, 0, 0, 65%);
-              text-overflow: ellipsis;
-              white-space: nowrap;
-            }
-
-            .word {
-              display: flex;
-              justify-content: center;
-              // width: 361px;
-              height: 22px;
-              margin-left: 16px;
-              overflow: hidden;
-              font-family: 'FZJCGFKTK';
-              font-size: 14px;
-              font-weight: 400;
-              line-height: 22px;
-              color: #000;
-              white-space: nowrap;
-              opacity: 1;
-
-              > :nth-child(1) {
-                // direction: rtl;
-                // unicode-bidi: plaintext;
-                // text-align: right;
-                display: flex;
-                justify-content: flex-end;
-                width: 472px;
-                overflow: hidden;
-                white-space: nowrap;
-              }
-
-              > :nth-child(3) {
-                width: 472px;
-                overflow: hidden;
-                text-align: left;
-                white-space: nowrap;
-                direction: ltr;
-                unicode-bidi: plaintext;
-              }
-            }
-          }
-        }
-
-        .page {
-          position: absolute;
-          bottom: 0;
-          box-sizing: border-box;
-          display: flex;
-          justify-content: space-between;
-          align-items: center;
-          width: 100%;
-          height: 64px;
-          border-top: 1px solid rgba(0, 0, 0, 0.08);
-          padding: 16px;
-
-          .text {
-            display: flex;
-            align-items: center;
-            font-size: 14px;
-            font-weight: 400;
-            line-height: 22px;
-            color: rgba(0, 0, 0, 60%);
-            text-align: center;
-          }
-        }
-      }
     }
 
     .right {
@@ -1767,6 +1775,8 @@ export default {
   .cx-list {
     width: 1200px;
     margin: 24px auto 0 auto;
+    display: flex;
+    justify-content: space-between;
     .cx-list-box {
       display: flex;
       padding: 8px 16px;
@@ -1797,6 +1807,274 @@ export default {
         }
       }
     }
+    .el-button {
+      font-weight: 400;
+      height: 38px;
+    }
+    .edit-liju {
+      padding: 8px 16px;
+      border-radius: 4px;
+      border: 1px solid #669aff;
+      background: #fff;
+      color: #2164e4;
+      font-size: 14px;
+      line-height: 22px;
+    }
+  }
+
+  .main {
+    // height: 95%;
+    .list {
+      margin-top: 16px;
+
+      .one {
+        padding: 0 16px;
+        margin-bottom: 8px;
+        display: flex;
+        align-items: end;
+
+        .top {
+          display: flex;
+          //   align-items: center;
+
+          // flex-flow: wrap;
+          width: 100%;
+
+          .number {
+            flex-shrink: 0;
+            width: 22px;
+            margin-right: 8px;
+            font-size: 14px;
+            font-weight: 400;
+            line-height: 21px;
+            color: rgba(0, 0, 0, 30%);
+            text-align: right;
+
+            &-1-false {
+              margin-top: 3px;
+            }
+
+            &-0-true {
+              margin-top: 21px;
+            }
+
+            &-0-false {
+              margin-top: 5px;
+            }
+
+            &-2-true {
+              margin-top: 17px;
+            }
+
+            &-2-false {
+              margin-top: 1px;
+            }
+          }
+
+          img {
+            width: 16px;
+            height: 16px;
+            margin-right: 8px;
+            cursor: pointer;
+
+            &.speaker-1-false {
+              margin-top: 6px;
+            }
+
+            &.speaker-0-true {
+              margin-top: 24px;
+            }
+
+            &.speaker-0-false {
+              margin-top: 8px;
+            }
+
+            &.speaker-2-true {
+              margin-top: 20px;
+            }
+
+            &.speaker-2-false {
+              margin-top: 4px;
+            }
+          }
+
+          .words {
+            // display: flex;
+            // align-items: flex-end;
+            // flex-flow: wrap;
+            font-family: 'FZJCGFKTK';
+            word-break: break-all;
+
+            > div {
+              .pinyin {
+                margin-bottom: 2px;
+                font-family: 'League';
+                font-size: 12px;
+                font-weight: 500;
+                color: rgba(0, 0, 0, 50%);
+                text-align: center;
+              }
+
+              .con {
+                font-family: 'FZJCGFKTK';
+                font-size: 20px;
+                font-weight: 400;
+                color: #000;
+                text-align: center;
+              }
+            }
+          }
+
+          .shiyi {
+            font-size: 12px;
+            font-weight: 400;
+            line-height: 24px;
+            color: #48a3e6;
+            font-family: 'robot', 'FZJCGFKTK';
+            &-0 {
+              line-height: 32px;
+            }
+
+            &-1 {
+              line-height: 28px;
+            }
+          }
+        }
+
+        .bottom {
+          font-size: 12px;
+          font-weight: 400;
+          line-height: 150%;
+          color: rgba(0, 0, 0, 30%);
+          text-align: right;
+          width: 117px;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          flex-shrink: 0;
+        }
+      }
+
+      .kwic_one {
+        display: flex;
+        align-items: center;
+        padding: 0 16px;
+        justify-content: space-between;
+
+        > :nth-child(1) {
+          justify-content: flex-end;
+          width: 16px;
+          margin-right: 16px;
+        }
+
+        .laiyuan {
+          width: 117px;
+          overflow: hidden;
+          font-size: 14px;
+          font-weight: 400;
+          line-height: 22px;
+          color: rgba(0, 0, 0, 65%);
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+
+        .word {
+          display: flex;
+          justify-content: center;
+          // width: 361px;
+          height: 22px;
+          margin-left: 16px;
+          overflow: hidden;
+          font-family: 'FZJCGFKTK';
+          font-size: 14px;
+          font-weight: 400;
+          line-height: 22px;
+          color: #000;
+          white-space: nowrap;
+          opacity: 1;
+
+          > :nth-child(1) {
+            // direction: rtl;
+            // unicode-bidi: plaintext;
+            // text-align: right;
+            display: flex;
+            justify-content: flex-end;
+            width: 472px;
+            overflow: hidden;
+            white-space: nowrap;
+          }
+
+          > :nth-child(3) {
+            width: 472px;
+            overflow: hidden;
+            text-align: left;
+            white-space: nowrap;
+            direction: ltr;
+            unicode-bidi: plaintext;
+          }
+        }
+      }
+    }
+
+    .page {
+      position: absolute;
+      bottom: 0;
+      box-sizing: border-box;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      width: 100%;
+      height: 64px;
+      border-top: 1px solid rgba(0, 0, 0, 0.08);
+      padding: 16px;
+
+      .text {
+        display: flex;
+        align-items: center;
+        font-size: 14px;
+        font-weight: 400;
+        line-height: 22px;
+        color: rgba(0, 0, 0, 60%);
+        text-align: center;
+      }
+    }
+  }
+  .edit-liju-box {
+    width: 1200px;
+    margin: 0 auto;
+    border-radius: 0px 8px 8px 8px;
+    border: 1px solid rgba(0, 0, 0, 0.08);
+    background: #fff;
+    box-sizing: border-box;
+    > .top {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      border-bottom: 1px solid rgba(0, 0, 0, 0.08);
+      padding: 8px 16px;
+      .select-number {
+        color: #669aff;
+        font-size: 14px;
+        font-weight: 500;
+        line-height: 22px;
+        margin-right: 16px;
+      }
+      .el-button {
+        padding: 4px 12px;
+        font-size: 14px;
+        font-weight: 400;
+        line-height: 22px;
+        border-radius: 20px;
+      }
+    }
+
+    .page {
+      position: inherit;
+    }
+    .el-icon-edit-outline {
+      cursor: pointer;
+      margin-left: 4px;
+    }
   }
 }
 </style>
@@ -1857,4 +2135,51 @@ export default {
     max-width: 90px;
   }
 }
+.el-button--primary,
+.el-checkbox__input.is-checked .el-checkbox__inner,
+.el-checkbox__input.is-indeterminate .el-checkbox__inner {
+  background-color: #669aff;
+  border-color: #669aff;
+}
+.el-button--primary.is-plain {
+  color: #669aff;
+  border-color: #669aff;
+  &:hover {
+    background-color: #669aff;
+  }
+}
+.el-checkbox__inner {
+  border-color: #669aff;
+}
+.seekpage-dialog {
+  .el-dialog__header {
+    padding: 0;
+  }
+  label {
+    color: #000;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 22px;
+    margin-bottom: 8px;
+    display: block;
+  }
+  .el-input {
+    margin-bottom: 8px;
+  }
+  .tips {
+    color: rgba(0, 0, 0, 0.4);
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 22px;
+    margin-bottom: 8px;
+    display: block;
+  }
+  p {
+    color: #ff5757;
+    font-size: 24px;
+    font-weight: 400;
+    line-height: 32px;
+    margin-bottom: 8px;
+  }
+}
 </style>