From 3af52f6a984c5fe6671640dbfb1c40540416ea7d Mon Sep 17 00:00:00 2001
From: yangfeng <wanwan926_4@163.com>
Date: 星期三, 08 十一月 2023 16:40:51 +0800
Subject: [PATCH] 新建产品增加上传图片功能,增加vue-cropper插件

---
 src/views/productManage/product/AddProductDialog.vue |   70 +++++++++++------------------------
 1 files changed, 22 insertions(+), 48 deletions(-)

diff --git a/src/views/productManage/product/AddProductDialog.vue b/src/views/productManage/product/AddProductDialog.vue
index 5c63af6..28db941 100644
--- a/src/views/productManage/product/AddProductDialog.vue
+++ b/src/views/productManage/product/AddProductDialog.vue
@@ -122,6 +122,14 @@
                       :disabled="!showFooter"
                     ></el-input>
                   </el-form-item>
+                  <el-form-item label="鍥剧墖涓婁紶锛�" prop="imageUrl">
+                    <IconCropper
+                      :isView="isView"
+                      :image-url="editConfig.infomation.imageSrc"
+                      @getImageData="getImageData"
+                      style="width: 85%"
+                    />
+                  </el-form-item>
                 </div>
                 <div class="right">
                   <el-form-item label="閿�鍞环鏍�" prop="salePrice">
@@ -462,11 +470,10 @@
 </template>
 
 <script>
-// import CommonFormTableView from "@/components/makepager/CommonFormTableView"
+import IconCropper from "./IconCropper"
 import { getProductCategoryList } from "@/api/product/productCategory"
 import { getProductList, addProduct, updateProduct } from "@/api/product/product"
 
-let inputElement = null
 export default {
   name: "AddProductDialog",
   props: {
@@ -482,7 +489,7 @@
       }
     }
   },
-  components: {},
+  components: { IconCropper },
   computed: {
     modalTitle() {
       if (this.editConfig.title === "缂栬緫" && this.editConfig.autoEdit) {
@@ -542,10 +549,19 @@
       ],
       statisticsMap: {
         inLibrary: 0 // 鍦ㄥ簱
-      }
+      },
+      isView: false
     }
   },
   created() {
+    if (this.editConfig.title === "缂栬緫" && !this.editConfig.autoEdit) {
+      this.isView = true
+    }
+    // if (this.editConfig.title === "鏂板缓") {
+    //   this.editConfig.infomation.imageSrc = ""
+    // } else {
+    //   this.editConfig.infomation.imageSrc = "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
+    // }
     this.getProductCategoryList()
     this.getProductList()
     this.setTableForm()
@@ -712,50 +728,8 @@
       this.tableData.splice(scope.$index, 1)
     },
     // 涓婁紶鍥剧墖
-    toGetImg() {
-      if (this.showFooter) {
-        if (inputElement === null) {
-          // 鐢熸垚鏂囦欢涓婁紶鐨勬帶浠�
-          inputElement = document.createElement("input")
-          inputElement.setAttribute("type", "file")
-          inputElement.style.display = "none"
-          if (window.addEventListener) {
-            inputElement.addEventListener("change", this.uploadFile, false)
-          } else {
-            inputElement.attachEvent("onchange", this.uploadFile)
-          }
-          document.body.appendChild(inputElement)
-        }
-        inputElement.click()
-      }
-    },
-    uploadFile(el) {
-      if (el && el.target && el.target.files && el.target.files.length > 0) {
-        console.log(el)
-        const files = el.target.files[0]
-        const isLt2M = files.size / 1024 / 1024 < 2
-        const size = files.size / 1024 / 1024
-        console.log(size)
-        // 鍒ゆ柇涓婁紶鏂囦欢鐨勫ぇ灏�
-        if (!isLt2M) {
-          this.$message.error("涓婁紶澶村儚鍥剧墖澶у皬涓嶈兘瓒呰繃 2MB!")
-        } else if (files.type.indexOf("image") === -1) {
-          //濡傛灉涓嶆槸鍥剧墖鏍煎紡
-          this.$message.error("璇烽�夋嫨鍥剧墖鏂囦欢")
-        } else {
-          const that = this
-          const reader = new FileReader() // 鍒涘缓璇诲彇鏂囦欢瀵硅薄
-          reader.readAsDataURL(el.target.files[0]) // 鍙戣捣寮傛璇锋眰锛岃鍙栨枃浠�
-          reader.onload = function () {
-            // 璇诲彇瀹屾垚鍚庯紝灏嗙粨鏋滆祴鍊肩粰img鐨剆rc
-            that.imageSrc = this.result
-            console.log(this.result)
-            // 鏁版嵁浼犲埌鍚庡彴
-            //const formData = new FormData()
-            //formData.append('file', files); // 鍙互浼犲埌鍚庡彴鐨勬暟鎹�
-          }
-        }
-      }
+    getImageData(data) {
+      console.log(data, "鍥剧墖鏁版嵁")
     },
     // 杩涘嚭鐐瑰嚮
     inOutBoundClick() {

--
Gitblit v1.8.0