对话模板备注添加图片

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

@@ -84,6 +84,53 @@
             show-word-limit
           ></el-input>
         </div>
+        <div class="adult-book-input-item" v-if="remark.img_list && remark.img_list.length == 0">
+            <UploadArt
+                :change-fill-id="changeImage"
+                :datafile-list="remark.img_list"
+                upload-type="image"
+                class="article_pdf"
+                :filleNumber="10000"
+            />
+        </div>
+        <ul
+            class="uploadArt_list"
+            v-if="remark.img_list && remark.img_list.length > 0"
+        >
+            <li
+            v-for="(artItem, artIndex) in remark.img_list"
+            :key="'articleImgList' + artIndex"
+            >
+            <img :src="artItem.url" style="width: 26px;margin-right:5px" />
+            <span class="art_name">{{ artItem.name }}</span>
+            <img
+                src="@/assets/adult/del-close.png"
+                class="del-close"
+                style="width: 14px"
+                @click="delImage(artIndex)"
+            />
+            </li>
+        </ul>
+        <div class="adult-book-input-item">
+          <span class="adult-book-lable">图片宽度：</span>
+          <el-input
+            class="adult-book-input"
+            placeholder="请输入宽度值"
+            v-model="remark.widthNumber"
+            @blur="onBlur(remark, 'widthNumber')"
+            maxlength="200"
+            style="width:150px"
+          ></el-input>
+          <span class="adult-book-lable">图片高度：</span>
+          <el-input
+            class="adult-book-input"
+            placeholder="请输入高度值"
+            v-model="remark.heightNumber"
+            @blur="onBlur(remark, 'heightNumber')"
+            maxlength="200"
+            style="width:150px"
+          ></el-input>
+        </div>
       </div>
       <span slot="footer" class="dialog-footer">
         <el-button @click="remarkVisible = false">取 消</el-button>
@@ -96,8 +143,11 @@
 <script>
 import "@/utils/pinyin_dict_withtone";
 import "@/utils/pinyinUtil";
+import UploadArt from "../../../common/UploadArt.vue";
 export default {
-  components: {},
+  components: {
+    UploadArt
+  },
   props: ["curQue", "sureSeg", "isClause", "changeIsClause"],
   data() {
     return {
@@ -225,7 +275,16 @@ export default {
         item.remark = {
           chs: "",
           en: "",
+          img_list: [],
+          widthNumber: null,
+          heightNumber: null,
         };
+      }else{
+        if(!item.remark.hasOwnProperty("img_list")){
+            this.$set(item.remark,"img_list",[])
+            this.$set(item.remark,"widthNumber",null)
+            this.$set(item.remark,"heightNumber",null)
+        }
       }
       this.remark = JSON.parse(JSON.stringify(item.remark));
       this.remarkVisible = true;
@@ -237,6 +296,23 @@ export default {
       );
       this.remarkVisible = false;
     },
+    changeImage(file) {
+      if (file.response) {
+        const obj = {
+          name: file.name,
+          url: file.response.file_info_list[0].file_url,
+          id: "[FID##" + file.response.file_info_list[0].file_id + "##FID]",
+          imgNumber: 0,
+        };
+        this.remark.img_list.push(obj);
+        this.$forceUpdate();
+      }else{
+        this.remark.img_list = []
+      }
+    },
+    delImage(index) {
+      this.remark.img_list.splice(index, 1);
+    },
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {},

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

@@ -165,7 +165,7 @@ export default {
       };
       BatchSegContent(data).then((res) => {
         this.loading = false;
-        let list = res.data.result.list;
+        let list = res.data.result.list[0];
         this.$set(this.curRole.detail, "segList", list);
         let seg_words = list.join(" ");
         this.$set(this.curRole.detail, "seg_words", seg_words);

src/components/Adult/inputModules/DialogueTem/components/ParagraphChs.vue

@@ -100,6 +100,54 @@
             @blur="onBlur(remark, 'en')"
           ></el-input>
         </div>
+        <div class="adult-book-input-item" v-if="remark.img_list && remark.img_list.length == 0">
+            <UploadArt
+                :change-fill-id="changeImage"
+                :datafile-list="remark.img_list"
+                upload-type="image"
+                class="article_pdf"
+                :filleNumber="10000"
+            />
+        </div>
+        <ul
+            class="uploadArt_list"
+            v-if="remark.img_list && remark.img_list.length > 0"
+        >
+            <li
+            v-for="(artItem, artIndex) in remark.img_list"
+            :key="'articleImgList' + artIndex"
+            style="display:flex;align-items:center;"
+            >
+            <img :src="artItem.url" style="width: 26px;margin-right:5px" />
+            <span class="art_name">{{ artItem.name }}</span>
+            <img
+                src="@/assets/adult/del-close.png"
+                class="del-close"
+                style="width: 16px"
+                @click="delImage(artIndex)"
+            />
+            </li>
+        </ul>
+        <div class="adult-book-input-item">
+          <span class="adult-book-lable">图片宽度：</span>
+          <el-input
+            class="adult-book-input"
+            placeholder="请输入宽度值"
+            v-model="remark.widthNumber"
+            @blur="onBlur(remark, 'widthNumber')"
+            maxlength="200"
+            style="width:150px"
+          ></el-input>
+          <span class="adult-book-lable">图片高度：</span>
+          <el-input
+            class="adult-book-input"
+            placeholder="请输入高度值"
+            v-model="remark.heightNumber"
+            @blur="onBlur(remark, 'heightNumber')"
+            maxlength="200"
+            style="width:150px"
+          ></el-input>
+        </div>
       </div>
       <span slot="footer" class="dialog-footer">
         <el-button @click="remarkVisible = false">取 消</el-button>
@@ -112,8 +160,9 @@
 <script>
 import "@/utils/pinyin_dict_withtone";
 import "@/utils/pinyinUtil";
+import UploadArt from "../../../common/UploadArt.vue";
 export default {
-  components: {},
+  components: {UploadArt},
   props: ["curQue", "sureSeg", "isClause", "changeIsClause"],
   data() {
     return {
@@ -257,7 +306,16 @@ export default {
         item.remark = {
           chs: "",
           en: "",
+          img_list: [],
+          widthNumber: null,
+          heightNumber: null,
         };
+      }else{
+        if(!item.remark.hasOwnProperty("img_list")){
+            this.$set(item.remark,"img_list",[])
+            this.$set(item.remark,"widthNumber",null)
+            this.$set(item.remark,"heightNumber",null)
+        }
       }
       this.remark = JSON.parse(JSON.stringify(item.remark));
       this.remarkVisible = true;
@@ -269,6 +327,23 @@ export default {
       );
       this.remarkVisible = false;
     },
+    changeImage(file) {
+      if (file.response) {
+        const obj = {
+          name: file.name,
+          url: file.response.file_info_list[0].file_url,
+          id: "[FID##" + file.response.file_info_list[0].file_id + "##FID]",
+          imgNumber: 0,
+        };
+        this.remark.img_list.push(obj);
+        this.$forceUpdate();
+      }else{
+        this.remark.img_list = []
+      }
+    },
+    delImage(index) {
+      this.remark.img_list.splice(index, 1);
+    },
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {},

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

@@ -149,7 +149,7 @@ export default {
       };
       BatchSegContent(data).then((res) => {
         this.loading = false;
-        let list = res.data.result.list;
+        let list = res.data.result.list[0];
         this.$set(this.curRole.detail, "segList", list);
         let seg_words = list.join(" ");
         this.$set(this.curRole.detail, "seg_words", seg_words);

src/components/Adult/preview/DialogueArticleViewChs/AnswerModel.vue

@@ -514,7 +514,7 @@
             class="remarkBox remark-top"
             v-if="
               item.remarkDetail &&
-              (item.remarkDetail.chs || item.remarkDetail.en)
+              (item.remarkDetail.chs || item.remarkDetail.en|| (item.remarkDetail.img_list && item.remarkDetail.img_list.length>0))
             "
           >
             <RemarkChs :remarkDetail="item.remarkDetail" />
@@ -668,7 +668,7 @@
             class="remarkBox remark-top"
             v-if="
               item.remarkDetail &&
-              (item.remarkDetail.chs || item.remarkDetail.en)
+              (item.remarkDetail.chs || item.remarkDetail.en|| (item.remarkDetail.img_list && item.remarkDetail.img_list.length>0))
             "
           >
             <RemarkChs :remarkDetail="item.remarkDetail" />
@@ -875,7 +875,7 @@ export default {
         let isRecord = 0;
         let roleDetail = this.getRole(dItem);
         let remarkDetail = dItem.remark;
-        if (remarkDetail && (remarkDetail.chs || remarkDetail.en)) {
+        if (remarkDetail && (remarkDetail.chs || remarkDetail.en|| (remarkDetail.img_list && remarkDetail.img_list.length>0))) {
           this.isHasRemark = true;
         }
         let paraArr = [];
@@ -983,7 +983,7 @@ export default {
         let paraObj = this.handlePara(para);
         let roleDetail = this.getRole(dItem);
         let remarkDetail = dItem.remark;
-        if (remarkDetail && (remarkDetail.chs || remarkDetail.en)) {
+        if (remarkDetail && (remarkDetail.chs || remarkDetail.en|| (remarkDetail.img_list && remarkDetail.img_list.length>0))) {
           this.isHasRemark = true;
         }
         let obj = {
@@ -1364,6 +1364,7 @@ export default {
     display: flex;
     align-items: center;
     justify-content: center;
+    position: relative;
     &.remark72 {
       padding-top: 72px;
     }

src/components/Adult/preview/DialogueArticleViewChs/NormalModelChs.vue

@@ -431,7 +431,7 @@
             ]"
             v-if="item.remarkDetail"
           >
-            <RemarkChs :remarkDetail="item.remarkDetail" />
+            <RemarkChs :remarkDetail="item.remarkDetail" :marginTop="item.roleDetail.detail.wordsList.length > 0 ? 44 : 8"/>
           </div>
         </div>
         <div class="NPC-article-empty NPC-article-empty-bottom">
@@ -624,7 +624,7 @@ export default {
         dhaspinyin = false;
         let roleDetail = this.getRole(dItem);
         let remarkDetail = dItem.remark;
-        if (remarkDetail && (remarkDetail.chs || remarkDetail.en)) {
+        if (remarkDetail && (remarkDetail.chs || remarkDetail.en || (remarkDetail.img_list && remarkDetail.img_list.length>0))) {
           this.isHasRemark = true;
         }
         let paraArr = [];
@@ -1113,6 +1113,7 @@ export default {
     display: flex;
     align-items: center;
     justify-content: center;
+    position: relative;
     &.remark72 {
       padding-top: 72px;
     }

src/components/Adult/preview/DialogueArticleViewChs/PhraseModelChs.vue

@@ -361,7 +361,7 @@
             </div>
           </div>
           <div class="remarkBox remark-top">
-            <RemarkChs :remarkDetail="item.remarkDetail" />
+            <RemarkChs :remarkDetail="item.remarkDetail" :marginTop="item.roleDetail.detail.wordsList.length > 0 ? 44 : 8" />
           </div>
         </div>
         <div class="NPC-article-empty NPC-article-empty-bottom">
@@ -591,7 +591,7 @@ export default {
         dhaspinyin = false;
         let roleDetail = this.getRole(dItem);
         let remarkDetail = dItem.remark;
-        if (remarkDetail && (remarkDetail.chs || remarkDetail.en)) {
+        if (remarkDetail && (remarkDetail.chs || remarkDetail.en|| (remarkDetail.img_list && remarkDetail.img_list.length>0))) {
           this.isHasRemark = true;
         }
         let paraArr = [];
@@ -1127,6 +1127,7 @@ export default {
     display: flex;
     align-items: center;
     justify-content: center;
+    position: relative;
     &.remark72 {
       padding-top: 72px;
     }

src/components/Adult/preview/DialogueArticleViewChs/RemarkChs.vue

@@ -2,10 +2,19 @@
 <template>
   <div
     class="remarkChs"
-    v-if="remarkDetail && (remarkDetail.chs || remarkDetail.en)"
+    v-if="remarkDetail && (remarkDetail.chs || remarkDetail.en || (remarkDetail.img_list && remarkDetail.img_list.length>0))"
+    :style="{top:marginTop?marginTop+'px':'0px'}"
   >
-    <div class="remark-chs">{{ remarkDetail.chs }}</div>
-    <div class="remark-en">{{ remarkDetail.en }}</div>
+    <div class="remark-chs" v-if="remarkDetail.chs">{{ remarkDetail.chs }}</div>
+    <div class="remark-en" v-if="remarkDetail.en">{{ remarkDetail.en }}</div>
+    <div v-if="remarkDetail.img_list && remarkDetail.img_list.length>0" class="remark-img">
+        <el-image
+            :style="{width: remarkDetail.widthNumber ? remarkDetail.widthNumber+'px':'', height: remarkDetail.heightNumber ? remarkDetail.heightNumber+'px':''}"
+            :src="remarkDetail.img_list[0].id"
+            fit="contain"
+            :preview-src-list="[remarkDetail.img_list[0].id]"
+        ></el-image>
+    </div>
   </div>
 </template>
 
@@ -13,7 +22,7 @@
 export default {
   name: "RemarkChs",
   components: {},
-  props: ["remarkDetail"],
+  props: ["remarkDetail","marginTop"],
   data() {
     return {};
   },
@@ -41,6 +50,8 @@ export default {
   box-sizing: border-box;
   box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
   border-radius: 8px;
+  position: absolute;
+  top: 0;
   > .remark-chs {
     display: flex;
     justify-content: center;
@@ -74,5 +85,12 @@ export default {
     border-radius: 0px 0px 8px 8px;
     word-break: break-word;
   }
+  > .remark-img{
+    width: 100%;
+    text-align: center;
+    .el-image{
+        max-width: 178px;
+    }
+  }
 }
 </style>