Merge branch 'lhd'

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

@@ -22,51 +22,57 @@
               </div>
             </div>
             <div v-else class="content-item">
-              <span
-                v-if="
-                  data.property.role_img_type === 'upload' &&
-                  data.property.role_list.find((items) => items.id === item.roleIndex).img_list[0]
-                "
-                class="avatar"
-              >
-                <img
-                  :src="data.property.role_list.find((items) => items.id === item.roleIndex).img_list[0].file_url"
-                  class="adult-book-input-roleImg"
-                />
-              </span>
-              <span
-                v-else-if="
-                  data.property.role_img_type === 'simple' &&
-                  data.property.role_list.find((items) => items.id === item.roleIndex).simpleHead
-                "
-                class="avatar"
-                ><img
-                  :src="
-                    require(
-                      '@/assets/simple' +
-                        data.property.role_list.find((items) => items.id === item.roleIndex).simpleHead +
-                        '.png',
-                    )
-                  "
-                  class="adult-book-input-roleImg"
-                />
-
-                {{ data.property.role_list.find((items) => items.id === item.roleIndex).simpleHead }}
-              </span>
-              <span
-                v-else
-                class="avatar"
-                :style="{
-                  backgroundColor: data.property.role_list.find((items) => items.id === item.roleIndex).color,
-                }"
-              >
-                {{
-                  data.property.role_list.find((items) => items.id === item.roleIndex).fullName
-                    ? data.property.role_list.find((items) => items.id === item.roleIndex).fullName
-                    : data.property.role_list.find((items) => items.id === item.roleIndex).name
-                }}
-              </span>
+              <el-popover placement="bottom" trigger="hover" popper-class="role-popper">
+                <div v-for="(ritem, rindex) in data.property.role_list" :key="rindex" @click="changeRole(item, ritem)">
+                  {{ ritem.fullName || ritem.name }}
+                </div>
+                <div class="avatar-box" slot="reference">
+                  <span
+                    v-if="
+                      data.property.role_img_type === 'upload' &&
+                      data.property.role_list.find((items) => items.id === item.roleIndex).img_list[0]
+                    "
+                    class="avatar"
+                  >
+                    <img
+                      :src="data.property.role_list.find((items) => items.id === item.roleIndex).img_list[0].file_url"
+                      class="adult-book-input-roleImg"
+                    />
+                  </span>
+                  <span
+                    v-else-if="
+                      data.property.role_img_type === 'simple' &&
+                      data.property.role_list.find((items) => items.id === item.roleIndex).simpleHead
+                    "
+                    class="avatar"
+                    ><img
+                      :src="
+                        require(
+                          '@/assets/simple' +
+                            data.property.role_list.find((items) => items.id === item.roleIndex).simpleHead +
+                            '.png',
+                        )
+                      "
+                      class="adult-book-input-roleImg"
+                    />
 
+                    {{ data.property.role_list.find((items) => items.id === item.roleIndex).simpleHead }}
+                  </span>
+                  <span
+                    v-else
+                    class="avatar"
+                    :style="{
+                      backgroundColor: data.property.role_list.find((items) => items.id === item.roleIndex).color,
+                    }"
+                  >
+                    {{
+                      data.property.role_list.find((items) => items.id === item.roleIndex).fullName
+                        ? data.property.role_list.find((items) => items.id === item.roleIndex).fullName
+                        : data.property.role_list.find((items) => items.id === item.roleIndex).name
+                    }}
+                  </span>
+                </div>
+              </el-popover>
               <div v-if="item.type === 'text'" class="text">{{ item.para }}</div>
 
               <div v-else-if="item.type === 'image'" class="image">
@@ -411,6 +417,10 @@ export default {
   },
   created() {},
   methods: {
+    // 切换角色
+    changeRole(item, ritem) {
+      item.roleIndex = ritem.id;
+    },
     // 图片上传前处理
     handleBeforeImage(file) {
       if (this.curRole.length <= 0) {
@@ -463,6 +473,7 @@ export default {
       if (!this.textInput.trim()) {
         return;
       }
+      // console.log(this.textInput.split('\n'));
 
       this.data.detail.push({
         roleIndex: this.curRole,
@@ -1045,7 +1056,11 @@ export default {
       let text = '';
       this.data.detail.forEach((item) => {
         if (item.type === 'text') {
-          text += item.sentences.join('');
+          if (item.sentences.length > 0) {
+            text += item.sentences.join('');
+          } else {
+            text += item.para;
+          }
         }
       });
       TextToAudioFile({
@@ -1175,6 +1190,10 @@ export default {
   column-gap: 8px;
 }
 
+.avatar-box {
+  cursor: pointer;
+}
+
 .avatar {
   display: flex;
   align-items: center;
@@ -1334,3 +1353,11 @@ export default {
   }
 }
 </style>
+<style lang="scss">
+.role-popper {
+  div {
+    line-height: 1.5;
+    cursor: pointer;
+  }
+}
+</style>