ソースを参照

句子拆分组件 增加上传图片

natasha 2 年 前
コミット
2292c1724e

+ 30 - 0
src/components/Adult/common/SentenceSegTemp.vue

@@ -82,6 +82,16 @@
       </div>
       <template>
         <SentenceSegwordChs :curQue="dItem" :segModel="segModel" name="元素" :type="type" />
+        <div class="adult-book-input-item" style="margin-top: 10px">
+          <span class="adult-book-lable">图片:</span>
+          <Upload
+            :changeFillId="timuchangeImage"
+            :datafileList="dItem.img_list ? dItem.img_list : []"
+            :filleNumber="1"
+            :uploadType="'image'"
+            :index="dIndex"
+          />
+        </div>
       </template>
       <template>
         <div class="adult-book-input-item adult-book-input-item-center">
@@ -184,10 +194,12 @@
 <script>
 import SentenceSegwordChs from "./SentenceSegwordChs";
 import FnConfig from "./FnConfig.vue";
+import Upload from "./Upload.vue";
 export default {
   components: {
     SentenceSegwordChs,
     FnConfig,
+    Upload
   },
   props: ["detail", "segModel", "type"],
   data() {
@@ -365,6 +377,24 @@ export default {
       this.configVisible = false;
       this.$set(this.detail, "fn_check_list", this.items.fn_check_list);
     },
+    timuchangeImage(fileList, duration, index) {
+      const articleImgList = JSON.parse(JSON.stringify(fileList));
+      const articleImgRes = [];
+      articleImgList.forEach((item) => {
+        if (item.response) {
+          const obj = {
+            name: item.name,
+            url: item.response.file_info_list[0].file_url,
+            id: "[FID##" + item.response.file_info_list[0].file_id + "##FID]",
+          };
+          articleImgRes.push(obj);
+        }
+      });
+
+      this.detail.detail[index].img_list = JSON.parse(
+        JSON.stringify(articleImgRes)
+      );
+    },
   },
   //生命周期 - 创建完成(可以访问当前this实例)
   created() {},

+ 44 - 0
src/components/Adult/preview/SentenceModule.vue

@@ -206,6 +206,19 @@
                         :hengLeg="sdItem.hengLeg"
                         :maxFontsize="sdItem.maxFontsize"
                       />
+                      <template
+                        v-if="
+                          sddItem.img_list &&
+                          sddItem.img_list.length > 0 &&
+                          sddItem.img_list[0].id
+                        "
+                      >
+                        <img
+                          :src="sddItem.img_list[0].id"
+                          class="sddItem_img_list"
+                          :style="[imgStyle(sddItem)]"
+                        />
+                      </template>
                       <!-- <div class="en" v-if="sdItem.en">{{ sdItem.en }}</div> -->
                       <!-- <div
                         class="promax-box-div"
@@ -583,6 +596,19 @@
                         :hengLeg="sdItem.hengLeg"
                         :maxFontsize="sdItem.maxFontsize"
                       />
+                      <template
+                        v-if="
+                          sddItem.img_list &&
+                          sddItem.img_list.length > 0 &&
+                          sddItem.img_list[0].id
+                        "
+                      >
+                        <img
+                          :src="sddItem.img_list[0].id"
+                          class="sddItem_img_list"
+                          :style="[imgStyle(sddItem)]"
+                        />
+                      </template>
                       <!-- <div class="en" v-if="sdItem.en">{{ sdItem.en }}</div> -->
                       <!-- <div
                         class="promax-box-div"
@@ -902,6 +928,20 @@ export default {
       }
       return className;
     },
+    imgStyle() {
+      return function (config) {  
+        let _this = this;
+        let styleConfig = null;
+        if(config.config&&config.config.fontSize){
+            let sizeVal = config.config.fontSize.replace("px", "");
+            styleConfig = {
+                height: Number(sizeVal)*1.5 + "px",
+                width: Number(sizeVal)*1.5 + "px",
+            };
+        }
+        return styleConfig;
+      }
+    },
   },
   watch: {},
   //方法集合
@@ -1571,6 +1611,7 @@ export default {
         padding: 4px 0;
       }
       .sent-que {
+        font-size: 0;
         &-flex {
           flex: 1;
           display: flex;
@@ -1580,6 +1621,9 @@ export default {
         .sentence-part {
           flex: 1;
         }
+        .sddItem_img_list {
+          height: 32px;
+        }
       }
       .answer-part {
         flex: 1;

+ 54 - 0
src/components/Adult/preview/SentenceMulModule.vue

@@ -174,6 +174,19 @@
                         :maxFontsize="sdItem.maxFontsize"
                         :textIndent="sdItem.textindent"
                       />
+                      <template
+                        v-if="
+                          sddItem.img_list &&
+                          sddItem.img_list.length > 0 &&
+                          sddItem.img_list[0].id
+                        "
+                      >
+                        <img
+                          :src="sddItem.img_list[0].id"
+                          class="sddItem_img_list"
+                          :style="[imgStyle(sddItem)]"
+                        />
+                      </template>
                       <!-- <div class="en" v-if="sdItem.en">{{ sdItem.en }}</div> -->
                       <div
                         class="promax-box-div"
@@ -533,6 +546,19 @@
                             :maxFontsize="sdItem.maxFontsize"
                             :textIndent="sdItem.textindent"
                         />
+                        <template
+                            v-if="
+                            sddItem.img_list &&
+                            sddItem.img_list.length > 0 &&
+                            sddItem.img_list[0].id
+                            "
+                        >
+                            <img
+                            :src="sddItem.img_list[0].id"
+                            class="sddItem_img_list"
+                            :style="[imgStyle(sddItem)]"
+                            />
+                        </template>
                         <div
                             class="promax-box-div"
                             v-if="
@@ -622,6 +648,19 @@
                             :maxFontsize="sdItem.maxFontsize"
                             :textIndent="sdItem.textindent"
                         />
+                        <template
+                        v-if="
+                          sddItem.img_list &&
+                          sddItem.img_list.length > 0 &&
+                          sddItem.img_list[0].id
+                        "
+                      >
+                        <img
+                          :src="sddItem.img_list[0].id"
+                          class="sddItem_img_list"
+                          :style="[imgStyle(sddItem)]"
+                        />
+                      </template>
                         <div
                             class="promax-box-div"
                             v-if="
@@ -936,6 +975,20 @@ export default {
       }
       return className;
     },
+    imgStyle() {
+      return function (config) {  
+        let _this = this;
+        let styleConfig = null;
+        if(config.config&&config.config.fontSize){
+            let sizeVal = config.config.fontSize.replace("px", "");
+            styleConfig = {
+                height: Number(sizeVal)*1.5 + "px",
+                width: Number(sizeVal)*1.5 + "px",
+            };
+        }
+        return styleConfig;
+      }
+    }
   },
   watch: {},
   //方法集合
@@ -1483,6 +1536,7 @@ export default {
         padding: 4px 0;
       }
       .sent-que {
+        font-size: 0;
         &-flex {
           flex: 1;
           display: flex;