yangg 9 сар өмнө
parent
commit
8636bd60f7

Файлын зөрүү хэтэрхий том тул дарагдсан байна
+ 0 - 0
dist/index.html


+ 0 - 0
dist/static/css/chunk-55322408.ce959b8e.css → dist/static/css/chunk-1e29e156.ce959b8e.css


+ 0 - 0
dist/static/css/chunk-b33cf6cc.68741a84.css → dist/static/css/chunk-2dc9c3d8.68741a84.css


+ 0 - 0
dist/static/css/chunk-3d9675b3.e30e9787.css → dist/static/css/chunk-4110be28.e30e9787.css


Файлын зөрүү хэтэрхий том тул дарагдсан байна
+ 0 - 0
dist/static/js/app.39f6db57.js


Файлын зөрүү хэтэрхий том тул дарагдсан байна
+ 0 - 0
dist/static/js/chunk-1e29e156.0417b509.js


Файлын зөрүү хэтэрхий том тул дарагдсан байна
+ 0 - 0
dist/static/js/chunk-2dc9c3d8.995e1d81.js


Файлын зөрүү хэтэрхий том тул дарагдсан байна
+ 0 - 0
dist/static/js/chunk-3d9675b3.be56236c.js


Файлын зөрүү хэтэрхий том тул дарагдсан байна
+ 0 - 0
dist/static/js/chunk-4110be28.ce4c19e7.js


Файлын зөрүү хэтэрхий том тул дарагдсан байна
+ 0 - 0
dist/static/js/chunk-55322408.a7c2edda.js


Файлын зөрүү хэтэрхий том тул дарагдсан байна
+ 0 - 0
dist/static/js/chunk-b33cf6cc.c42b7557.js


+ 0 - 0
dist/static/js/chunk-b6791022.fa633f89.js → dist/static/js/chunk-b6791022.b9c2b6b2.js


+ 9 - 0
src/api/sourceData.js

@@ -110,3 +110,12 @@ export function findData(data) {
     data
   })
 }
+
+/* 上传图片 /upload/image */
+export function uploadImage(data) {
+  return request({
+    url: '/upload/image',
+    method: 'post',
+    data
+  })
+}

+ 120 - 2
src/views/document/com/components/TextArea/index.vue

@@ -16,7 +16,12 @@
     </template>
 
     <template v-else>
-      <div class="rich-editor" v-html="content"></div>
+      <div
+        class="rich-editor"
+        ref="richEditor"
+        v-html="content"
+        @click="handleImageClick"
+      ></div>
     </template>
     <div v-if="loading" class="overlay">
       <el-progress
@@ -29,7 +34,8 @@
 
 <script>
 // import CKEditor from "ckeditor4-vue";
-import { findData } from "@/api/sourceData";
+import { findData, uploadImage } from "@/api/sourceData";
+import axios from "axios"; // 确保导入 axios
 import { data } from "jquery";
 export default {
   name: "app",
@@ -844,6 +850,118 @@ export default {
       this.$emit("onUpdate", this.currentIndex, e);
     },
 
+    /* 点击替换图片 */
+    handleImageClick(event) {
+      if (event.target.tagName === "IMG") {
+        this.replaceImage(event.target);
+      }
+    },
+    selectImage() {
+      return new Promise((resolve) => {
+        const input = document.createElement("input");
+        input.type = "file";
+        input.accept = "image/*";
+        input.onchange = (e) => resolve(e.target.files[0]);
+        input.click();
+      });
+    },
+
+    async uploadImage(formData) {
+      try {
+        const response = await axios.post(
+          "http://58.246.234.210:8084/upload/image",
+          formData,
+          {
+            headers: {
+              "Content-Type": "multipart/form-data",
+            },
+          }
+        );
+        console.log("Upload response:", response);
+        if (response.status === 200 && response.data && response.data.url) {
+          return response.data.url;
+        } else {
+          throw new Error("Invalid upload response");
+        }
+      } catch (error) {
+        console.error("Error uploading image:", error);
+        throw error;
+      }
+    },
+    /* updateContentWithNewImage(imgElement) {
+      // 更新 content 中的图片 URL
+      const tempDiv = document.createElement('div');
+      tempDiv.innerHTML = this.content;
+      const images = tempDiv.getElementsByTagName('img');
+      for (let img of images) {
+        if (img.src === imgElement.src) {
+          img.src = imgElement.src;
+          break;
+        }
+      }
+      this.content = tempDiv.innerHTML;
+      this.$emit('onUpdate', this.currentIndex, this.content);
+    }, */
+
+    async replaceImage(imgElement) {
+      try {
+        const file = await this.selectImage();
+        if (file) {
+          const formData = new FormData();
+          formData.append("upload", file);
+          const uploadedUrl = await this.uploadImage(formData);
+
+          // Update the image element in the DOM
+          imgElement.src = uploadedUrl;
+
+          // Update the content and notify parent component
+          this.$nextTick(() => {
+            this.updateContentWithNewImage(uploadedUrl);
+          });
+        }
+      } catch (error) {
+        console.error("Error replacing image:", error);
+      }
+    },
+
+    updateContentWithNewImage(newImageUrl) {
+      // Get the latest DOM content
+      const latestContent = this.$refs.richEditor.innerHTML;
+
+      // Update this.content with the latest DOM content
+      this.content = latestContent;
+
+      console.log("Updated content:", this.content);
+
+      // Update the com object
+      this.com.content = this.content;
+
+      // Emit an event to update the parent component
+      this.$emit("updateComContent", this.currentIndex, this.com);
+    },
+
+    /*  updateComsData(newImageUrl) {
+      // 找到当前组件在 coms 数组中的索引
+      const comIndex = this.coms.findIndex((com) => com.name === this.com.name);
+      if (comIndex !== -1) {
+        // 创建 coms 的深拷贝
+        const updatedComs = JSON.parse(JSON.stringify(this.coms));
+
+        // 更新特定组件的 content
+        updatedComs[comIndex].content = this.content;
+
+        // 如果有特定的图片属性,也更新它
+        const imgAttr = updatedComs[comIndex].attrs.find(
+          (attr) => attr.type === "image"
+        );
+        if (imgAttr) {
+          imgAttr.content = newImageUrl;
+        }
+
+        // 更新 coms
+        this.$emit("update:coms", updatedComs);
+      }
+    }, */
     /* onFocus(e) {
       // var range = e.editor.getSelection().getRanges()[0];
       // range.collapse( true );

+ 10 - 0
src/views/document/com/editor.vue

@@ -166,6 +166,7 @@
                 @onUpdateAttr="onUpdateAttr"
                 @onUpdata="onUpdata"
                 @onUpdateProdAttr="onUpdateProdAttr"
+                @updateComContent="handleComContentUpdate"
                 :isEdit="it.isEdit"
               />
             </div>
@@ -315,6 +316,13 @@ export default {
     this.templateId = this.$route.query.templateId;
   },
   methods: {
+    handleComContentUpdate(index, updatedCom) {
+      // 更新本地的 coms 数组
+      this.$set(this.coms, index, updatedCom);
+      
+      // 触发父组件的更新
+      this.$emit("onRebuild", this.coms);
+    },
     showCategoryName(item) {
       return (
         this.type == "module" &&
@@ -556,6 +564,8 @@ export default {
     onUpdate(index, content) {
       let _this = this;
       this.coms[index].content = content;
+      // 触发父组件的更新
+      this.$emit("onRebuild", this.coms);
     },
     //激活当前层
     onSetActive(e) {

+ 1 - 0
src/views/document/create.vue

@@ -844,6 +844,7 @@ export default {
       );
     },
     updateAttrs(newComs, oldComs) {
+      console.log(newComs);
       newComs.forEach((newCom, comIndex) => {
         const oldCom = oldComs[comIndex];
         if (oldCom) {

Энэ ялгаанд хэт олон файл өөрчлөгдсөн тул зарим файлыг харуулаагүй болно