data

src/components/Adult/common/data.js

@@ -18,22 +18,22 @@ let fnData = [{
   name: "注释",
 
 }, {
-  type: "sentence",
+  type: "sentence_chs",
   name: "句子模板",
   list: [{
-    type: "sentence_input",
+    type: "sentence_input_chs",
     name: "句子填空",
   },
   {
-    type: "sentence_judge",
+    type: "sentence_judge_chs",
     name: "句子判断",
   },
   {
-    type: "sentence_record",
+    type: "sentence_record_chs",
     name: "句子录音",
   },
   {
-    type: "sentence_input_record",
+    type: "sentence_input_record_chs",
     name: "句子填空+录音",
   }
   ],

src/components/Adult/inputModules/DialogueArticleChs/components/RoleChs.vue

@@ -1,14 +1,15 @@
 <!--  -->
 <template>
   <div class="NPC-da-role">
-    <div class="NPC-da-role-flex">
-      <span class="NPC-da-role-text">角色:</span>
+    <div class="adult-book-input-item NPC-da-role-flex">
+      <span class="adult-book-lable">角色:</span>
       <el-input
-        style="width: 100px"
+        style="width: 110px"
         class="NPC-role-input"
         placeholder="请输入角色"
-        v-model="curRole.roleName"
-        @blur="onBlur(curRole, 'roleName')"
+        v-model="curRole.role"
+        @change="changeRole"
+        @blur="onBlur(curRole, 'role')"
       ></el-input>
       <span style="margin-right: 10px">或</span>
       <Upload
@@ -19,31 +20,37 @@
         :uploadType="'image'"
       />
     </div>
-    <div class="NPC-da-role-flex">
-      <span class="NPC-da-role-text">姓名:</span>
+    <div class="adult-book-input-item">
+      <span class="adult-book-lable">姓名:</span>
       <el-input
         class="NPC-role-input"
         placeholder="请输入内容"
-        v-model="curRole.fullName"
-        @blur="onBlur(curRole, 'fullName')"
+        v-model="curRole.detail.fullName"
+        @blur="onBlur(curRole.detail, 'fullName')"
       ></el-input>
-      <el-button type="danger" @click="segWord(curRole.fullName)"
+      <el-button type="danger" @click="segWord(curRole.detail.fullName)"
         >分词</el-button
       >
     </div>
-    <div class="NPC-da-role-flex">
-      <span class="NPC-da-role-text">分词结果:</span>
+    <div class="adult-book-input-item">
+      <span class="adult-book-lable">分词结果:</span>
       <el-input
         class="NPC-role-input"
         placeholder="请输入分词结果"
-        v-model="curRole.seg_words"
+        v-model="curRole.detail.seg_words"
         @change="handleChange"
-        @blur="onBlur(curRole, 'seg_words')"
+        @blur="onBlur(curRole.detail, 'seg_words')"
       ></el-input>
       <el-button type="danger" @click="_createPinyin">生成拼音</el-button>
     </div>
-    <div v-if="curRole && curRole.wordsList && curRole.wordsList.length > 0">
-      <Pinyin :wordsList="curRole.wordsList" />
+    <div
+      v-if="
+        curRole &&
+        curRole.detail.wordsList &&
+        curRole.detail.wordsList.length > 0
+      "
+    >
+      <Pinyin :wordsList="curRole.detail.wordsList" />
     </div>
   </div>
 </template>
@@ -77,10 +84,15 @@ export default {
     onBlur(item, field) {
       item[field] = item[field] ? item[field].trim() : "";
     },
+    changeRole(val) {
+      if (val && this.curRole.img_list.length > 0) {
+        this.curRole.img_list.splice(0, 1);
+      }
+    },
     handleChange(val) {
-      this.curRole.seg_words = val.replace(/\s+/g, " ");
-      let arr = this.curRole.seg_words.split(/\s+/);
-      this.$set(this.curRole, "segList", arr);
+      this.curRole.detail.seg_words = val.replace(/\s+/g, " ");
+      let arr = this.curRole.detail.seg_words.split(/\s+/);
+      this.$set(this.curRole.detail, "segList", arr);
     },
     //生成分词
     segWord(sentence) {
@@ -101,21 +113,21 @@ export default {
       BatchSegContent(data).then((res) => {
         this.loading = false;
         let list = res.data.result.list;
-        this.$set(this.curRole, "segList", list);
+        this.$set(this.curRole.detail, "segList", list);
         let seg_words = list.join(" ");
-        this.$set(this.curRole, "seg_words", seg_words);
+        this.$set(this.curRole.detail, "seg_words", seg_words);
       });
     },
     //生成拼音
     _createPinyin() {
-      let res_str = this.curRole.seg_words.replace(/\s+/g, "");
-      let org_sent = this.curRole.fullName;
+      let res_str = this.curRole.detail.seg_words.replace(/\s+/g, "");
+      let org_sent = this.curRole.detail.fullName;
       if (res_str.trim() != org_sent.trim()) {
         this.$message.warning("跟原句不一致，请检查是否误删除或新增其他内容");
         return;
       }
       let textListList = [];
-      let segArr = JSON.parse(JSON.stringify(this.curRole.segList));
+      let segArr = JSON.parse(JSON.stringify(this.curRole.detail.segList));
       segArr.forEach((item) => {
         let str = Base64.encode(item);
         textListList.push(str);
@@ -125,7 +137,7 @@ export default {
       };
       createPinyin(data).then((res) => {
         let wordsList = res.data.result[0];
-        this.$set(this.curRole, "wordsList", wordsList);
+        this.$set(this.curRole.detail, "wordsList", wordsList);
       });
     },
     changeImage(fileList) {
@@ -142,7 +154,8 @@ export default {
         }
       });
       //this.articleImgList = articleImgRes;
-      this.curQueItem.img_list = JSON.parse(JSON.stringify(articleImgRes));
+      this.curRole.img_list = JSON.parse(JSON.stringify(articleImgRes));
+      this.curRole.role = "";
     },
   },
   //生命周期 - 创建完成（可以访问当前this实例）
@@ -170,10 +183,6 @@ export default {
     display: flex;
     justify-content: flex-start;
     align-items: center;
-    margin-bottom: 16px;
-    .NPC-da-role-text {
-      margin-right: 10px;
-    }
   }
 }
 </style>

src/components/Adult/inputModules/DialogueArticleChs/index.vue

@@ -50,10 +50,29 @@
         :uploadType="'mp3'"
       />
     </div>
-    <div class="NPC-Book-article">
-      <ul>
-        <li></li>
+    <div class="NPC-Book-role">
+      <ul class="adult-book-input-role" v-if="curQue.roleList.length > 0">
+        <li
+          v-for="(rItem, rIndex) in curQue.roleList"
+          :key="'roleList' + rIndex"
+        >
+          <span v-if="rItem.role" class="adult-book-input-roleText">{{
+            rItem.role
+          }}</span>
+          <img
+            v-else
+            :src="rItem.img_list[0] && rItem.img_list[0].url"
+            class="adult-book-input-roleImg"
+          />
+          <div class="adult-book-input-fullName">
+            <span class="pinyin">{{
+              rItem.detail.wordsList | handlePinyin
+            }}</span>
+            <span class="chs">{{ rItem.detail.wordsList | handleChs }}</span>
+          </div>
+        </li>
       </ul>
+      <el-button type="primary" @click="addRole">添加角色</el-button>
     </div>
     <div class="NPC-Book-article">
       <ArticleChs
@@ -101,11 +120,14 @@
         <el-button type="primary" @click="saveTimeList">保 存</el-button>
       </span>
     </el-dialog>
-    <el-dialog title="添加角色" :visible.sync="cTVisible" width="30%">
-      <RoleChs ref="createtimelist" :curQue="curQue" />
+    <el-dialog title="添加角色" :visible.sync="roleVisible" width="60%">
+      <RoleChs
+        ref="createRolelist"
+        :curRole="curQue.roleList[curQue.roleList.length - 1]"
+      />
       <span slot="footer" class="dialog-footer">
-        <el-button @click="cTVisible = false">取 消</el-button>
-        <el-button type="primary" @click="saveTimeList">保 存</el-button>
+        <el-button @click="roleVisible = false">取 消</el-button>
+        <el-button type="primary" @click="saveRoleList">保 存</el-button>
       </span>
     </el-dialog>
   </div>
@@ -136,6 +158,30 @@ export default {
     RoleChs,
   },
   props: ["curQue", "changeCurQue", "tmIndex"],
+  filters: {
+    handlePinyin(wordsList) {
+      let str = "";
+      wordsList.forEach((item, index) => {
+        if (index < wordsList.length - 1) {
+          str += item.pinyin + " ";
+        } else {
+          str += item.pinyin;
+        }
+      });
+      return str;
+    },
+    handleChs(wordsList) {
+      let str = "";
+      wordsList.forEach((item, index) => {
+        if (index < wordsList.length - 1) {
+          str += item.chs + " ";
+        } else {
+          str += item.chs;
+        }
+      });
+      return str;
+    },
+  },
   data() {
     return {
       imageNumber: 1000,
@@ -149,14 +195,17 @@ export default {
       isByWord: false,
       paraIndex: 0, //段落索引
       cTVisible: false,
+      roleVisible: false,
       loading: false,
       segList: null,
+
       data_structure: {
         type: "dialogue_article_chs",
         name: "课文",
         model: 1,
         pyPosition: "top", //top 拼音在上面；bottom 拼音在下面
         article: "",
+        roleList: [],
         detail: [],
         wordTime: [
           {
@@ -2979,12 +3028,8 @@ export default {
         const obj = {
           name: file.name,
           url: file.response.file_info_list[0].file_url,
-<<<<<<< HEAD
-          id: "[FID##" + file.response.file_info_list[0].file_id + "#FID]",
-=======
           id: "[FID##" + item.response.file_info_list[0].file_id + "##FID]",
 
->>>>>>> 6e72e8d0f6995078b984890e566c87a283c19789
           imgNumber: 0,
         };
         this.curQue.img_list.push(obj);
@@ -2998,6 +3043,26 @@ export default {
       this.curQue.img_list.splice(index, 1);
       this.fileCon.img_list.splice(index, 1);
     },
+    //添加角色
+    addRole() {
+      this.roleVisible = true;
+      let roleCon = {
+        role: "",
+        img_list: [],
+        detail: {
+          fullName: "",
+          seg_words: "",
+          wordsList: [],
+        },
+      };
+      this.curQue.roleList.push(JSON.parse(JSON.stringify(roleCon)));
+    },
+    //保存角色
+    saveRoleList() {
+      this.roleVisible = false;
+      this.$message.success("保存成功！");
+      console.log(this.curQue);
+    },
     changeIsPara() {
       this.isPara = true;
     },
@@ -3100,14 +3165,16 @@ export default {
     console.log("文章保存");
     console.log(this.curQue);
     if (this.curQue) {
-      if (this.curQue.detail[0].para) {
-        this.isPara = true;
-      }
-      if (this.curQue.detail[0].sentences.length > 0) {
-        this.isClause = true;
-      }
-      if (this.curQue.detail[0].seg_words.length > 0) {
-        this.isByWord = true;
+      if (this.curQue.detail && this.curQue.detail.length > 0) {
+        if (this.curQue.detail[0].para) {
+          this.isPara = true;
+        }
+        if (this.curQue.detail[0].sentences.length > 0) {
+          this.isClause = true;
+        }
+        if (this.curQue.detail[0].seg_words.length > 0) {
+          this.isByWord = true;
+        }
       }
       if (!this.curQue.img_list) {
         this.curQue.img_list = [];
@@ -3136,6 +3203,46 @@ p {
   margin: 0;
   padding: 0;
 }
+.adult-book-input-role {
+  clear: both;
+  overflow: hidden;
+  > li {
+    float: left;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    .adult-book-input {
+      &-roleText {
+        width: 40px;
+        height: 40px;
+        background: #a7a7a7;
+        border-radius: 100%;
+        text-align: center;
+        line-height: 40px;
+      }
+      &-roleImg {
+        width: 40px;
+        height: 40px;
+      }
+      &-fullName {
+        margin-left: 8px;
+        .pinyin {
+          font-family: "GB-PINYINOK-B";
+          font-size: 14px;
+          line-height: 22px;
+          color: rgba(0, 0, 0, 0.85);
+          margin-right: 8px;
+        }
+        .chs {
+          font-family: "FZJCGFKTK";
+          font-size: 16px;
+          line-height: 24;
+          color: #000000;
+        }
+      }
+    }
+  }
+}
 .uploadArt_list {
   border: 1px #ccc solid;
   border-bottom: 0;

src/components/Adult/inputModules/Sentence.vue

@@ -108,17 +108,17 @@ export default {
         ],
         fn_list: [
           {
-            type: "sentence_record",
+            type: "sentence_record_chs",
             name: "录音",
             isFn: false,
           },
           {
-            type: "sentence_input",
+            type: "sentence_input_chs",
             name: "输入",
             isFn: false,
           },
           {
-            type: "sentence_judge",
+            type: "sentence_judge_chs",
             name: "判断",
             isFn: false,
           },

src/views/adultInput.vue

@@ -172,9 +172,9 @@
                       v-if="
                         topicIitem.type == 'recordHZ_inputPY_chs' ||
                         topicIitem.type == 'inputItem_chs' ||
-                        topicIitem.type == 'sentence_input' ||
-                        topicIitem.type == 'sentence_judge' ||
-                        topicIitem.type == 'sentence_record'
+                        topicIitem.type == 'sentence_input_chs' ||
+                        topicIitem.type == 'sentence_judge_chs' ||
+                        topicIitem.type == 'sentence_record_chs'
                       "
                     >
                       <template v-if="topicIitem.is_edit">