From d35533b1b42df7e1808a19a8ea72613e605cd6ef Mon Sep 17 00:00:00 2001
From: yangfeng <wanwan926_4@163.com>
Date: 星期四, 09 十一月 2023 16:49:35 +0800
Subject: [PATCH] 添加、编辑上传图片接口联调及编辑和查看和列表图片回显
---
src/views/productManage/product/index.vue | 14 +++++--
src/api/common/other.js | 11 +++++
src/views/productManage/product/IconCropper.vue | 14 +++++--
src/views/productManage/product/AddProductDialog.vue | 65 ++++++++++++++++++++++----------
4 files changed, 74 insertions(+), 30 deletions(-)
diff --git a/src/api/common/other.js b/src/api/common/other.js
index 733ab2b..9a97585 100644
--- a/src/api/common/other.js
+++ b/src/api/common/other.js
@@ -1,5 +1,5 @@
// import request from "@/common/untils/request.js"
-import request from "@/common/untils/request";
+import request from "@/common/untils/request"
// 鏌ヨ鍏徃鍒楄〃
export const getCompanyList = (data) => {
@@ -9,3 +9,12 @@
params: data
})
}
+
+// 涓婁紶闄勪欢
+export const uploadFiles = (data) => {
+ return request({
+ url: "/api-wms/v1/attachment/uploadFiles",
+ method: "post",
+ data
+ })
+}
diff --git a/src/views/productManage/product/AddProductDialog.vue b/src/views/productManage/product/AddProductDialog.vue
index 28db941..62f996c 100644
--- a/src/views/productManage/product/AddProductDialog.vue
+++ b/src/views/productManage/product/AddProductDialog.vue
@@ -140,7 +140,7 @@
:min="0"
:controls="false"
size="mini"
- style="width: 81%"
+ style="width: 85%"
:disabled="!showFooter"
></el-input-number>
</el-form-item>
@@ -162,7 +162,7 @@
:min="0"
:controls="false"
size="mini"
- style="width: 81%"
+ style="width: 85%"
:disabled="!showFooter"
></el-input-number>
</el-form-item>
@@ -473,6 +473,7 @@
import IconCropper from "./IconCropper"
import { getProductCategoryList } from "@/api/product/productCategory"
import { getProductList, addProduct, updateProduct } from "@/api/product/product"
+import { uploadFiles } from "@/api/common/other"
export default {
name: "AddProductDialog",
@@ -550,18 +551,14 @@
statisticsMap: {
inLibrary: 0 // 鍦ㄥ簱
},
- isView: false
+ isView: false,
+ fileFormdata: null // 涓婁紶鍥剧墖鍏ュ弬
}
},
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()
@@ -654,20 +651,45 @@
console.log(this.editConfig.infomation)
this.$refs[formName].validate((valid) => {
if (valid) {
- let requestUrl = this.editConfig.title === "鏂板缓" ? addProduct : updateProduct
- this.unsetFieldsToNumber()
- requestUrl({
- ...this.editConfig.infomation
- }).then((res) => {
- console.log(res)
- this.editConfig.visible = false
- if (res.code === 200) {
- this.$message.success("娣诲姞鎴愬姛")
- this.$parent.getData()
+ console.log(this.fileFormdata == null)
+ let attachmentIDs = []
+ if (this.fileFormdata == null) {
+ if (this.editConfig.infomation.attachmentList?.length > 0) {
+ this.editConfig.infomation.attachmentList.forEach((ele) => {
+ attachmentIDs.push(ele.id)
+ })
+ } else {
+ attachmentIDs = []
}
- }, console.error)
+ this.saveEditRequest(attachmentIDs)
+ } else {
+ uploadFiles(this.fileFormdata).then((res) => {
+ if (res.code == 200) {
+ res.data.forEach((ele) => {
+ attachmentIDs.push(ele.id)
+ })
+ }
+ this.saveEditRequest(attachmentIDs)
+ })
+ }
}
})
+ },
+ // 淇濆瓨/缂栬緫鎺ュ彛璇锋眰
+ saveEditRequest(attachmentIDs) {
+ let requestUrl = this.editConfig.title === "鏂板缓" ? addProduct : updateProduct
+ this.unsetFieldsToNumber()
+ requestUrl({
+ ...this.editConfig.infomation,
+ attachmentIDs
+ }).then((res) => {
+ console.log(res)
+ this.editConfig.visible = false
+ if (res.code === 200) {
+ this.$message.success("娣诲姞鎴愬姛")
+ this.$parent.getData()
+ }
+ }, console.error)
},
// 鍒犻櫎
delClick() {},
@@ -728,8 +750,9 @@
this.tableData.splice(scope.$index, 1)
},
// 涓婁紶鍥剧墖
- getImageData(data) {
- console.log(data, "鍥剧墖鏁版嵁")
+ getImageData(formdata) {
+ this.fileFormdata = formdata
+ // console.log(formdata, "鍥剧墖鏁版嵁")
},
// 杩涘嚭鐐瑰嚮
inOutBoundClick() {
diff --git a/src/views/productManage/product/IconCropper.vue b/src/views/productManage/product/IconCropper.vue
index 4a2cf7c..cc074b0 100644
--- a/src/views/productManage/product/IconCropper.vue
+++ b/src/views/productManage/product/IconCropper.vue
@@ -2,7 +2,7 @@
<div class="cropper-wrapper">
<div v-if="isView">
<el-image :src="imageUrl" class="view-image">
- <div slot="error" class="image-slot">
+ <div slot="error" class="image-slot no-cursor">
<i class="el-icon-picture-outline"></i>
</div>
</el-image>
@@ -123,7 +123,8 @@
infoTrue: true // true 涓哄睍绀虹湡瀹炶緭鍑哄浘鐗囧楂� false 灞曠ず鐪嬪埌鐨勬埅鍥炬瀹介珮
},
// 闃叉閲嶅鎻愪氦
- loading: false
+ loading: false,
+ fileName: ""
}
},
mounted() {
@@ -149,6 +150,7 @@
return false
}
console.log(file, fileList)
+ this.fileName = file.name
// 涓婁紶鎴愬姛鍚庡皢鍥剧墖鍦板潃璧嬪�肩粰瑁佸壀妗嗘樉绀哄浘鐗�
this.$nextTick(async () => {
// base64鏂瑰紡
@@ -205,8 +207,12 @@
this.dialogVisible = false
this.previewImg = URL.createObjectURL(blob)
this.isPreview = true
- console.log(blob)
- this.$emit("getImageData", blob)
+ // blob杞琭ile
+ let file = new File([blob], this.fileName, { type: blob.type })
+ // file杞琭ormData
+ let formData = new FormData()
+ formData.append("files", file)
+ this.$emit("getImageData", formData)
})
// 鑾峰彇鎴浘鐨� base64 鏁版嵁
// this.$refs.cropper.getCropData(data => {
diff --git a/src/views/productManage/product/index.vue b/src/views/productManage/product/index.vue
index c5855a4..cf639f7 100644
--- a/src/views/productManage/product/index.vue
+++ b/src/views/productManage/product/index.vue
@@ -33,8 +33,12 @@
<div v-if="isIconIndex === '1'" class="product-view">
<div class="product-box" v-for="item in tableList.tableInfomation" :key="item.id" @click="showDetail(item)">
<div class="left">
- <!-- <el-image style="width: 60px; height: 80px" :src="url"></el-image> -->
- <div class="img-view">
+ <el-image
+ v-if="item.attachmentList?.length > 0"
+ style="width: 60px; height: 80px"
+ :src="item.attachmentList[0].FileUrl"
+ ></el-image>
+ <div v-else class="img-view">
<i class="el-icon-picture-outline"></i>
</div>
</div>
@@ -269,14 +273,16 @@
console.log(row)
this.editConfig.autoEdit = false
this.editConfig.title = "缂栬緫"
- this.editConfig.infomation = { ...row }
+ let imageSrc = row.attachmentList?.length > 0 ? row.attachmentList[0].FileUrl : ""
+ this.editConfig.infomation = { ...row, imageSrc: imageSrc }
this.editConfig.visible = true
},
// 缂栬緫
editRow(row) {
this.editConfig.autoEdit = true
this.editConfig.title = "缂栬緫"
- this.editConfig.infomation = { ...row }
+ let imageSrc = row.attachmentList?.length > 0 ? row.attachmentList[0].FileUrl : ""
+ this.editConfig.infomation = { ...row, imageSrc: imageSrc }
this.editConfig.visible = true
},
// 鍒囨崲鍒楄〃灞曠幇褰㈠紡
--
Gitblit v1.8.0