From b38083540fe213d9e638d179838e51bb636164be Mon Sep 17 00:00:00 2001 From: yuanteng <1876787513@qq.com> Date: Thu, 2 Jan 2025 20:27:34 +0800 Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E5=95=86=E5=93=81=E5=92=8C?= =?UTF-8?q?=E5=95=86=E5=93=81=E4=B8=AD=E5=BF=83=E5=B7=B2=E5=AE=8C=E6=88=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/myAxios.ts | 4 +- src/utils/entityProduct/picUpload.ts | 51 ++++++++++++++++++++--- src/views/Commodity/AddProduct.vue | 2 +- src/views/Commodity/MerchandiseCenter.vue | 22 ++++------ src/views/Orders/OrderList.vue | 7 ++-- src/views/User/UserManagement.vue | 5 ++- 6 files changed, 64 insertions(+), 27 deletions(-) diff --git a/src/api/myAxios.ts b/src/api/myAxios.ts index a9d70c4..62ab694 100644 --- a/src/api/myAxios.ts +++ b/src/api/myAxios.ts @@ -4,8 +4,8 @@ import router from '../router' const myAxios = axios.create({ withCredentials:true, - // baseURL: 'http://localhost:9092/api' - baseURL: 'http://123.249.108.160:8888/api' //测试服务器 + baseURL: 'http://localhost:9092/api' + // baseURL: 'http://123.249.108.160:8888/api' //测试服务器 }); // 添加请求拦截器 axios.interceptors.request.use(function (config) { diff --git a/src/utils/entityProduct/picUpload.ts b/src/utils/entityProduct/picUpload.ts index c25cb61..7ce94fc 100644 --- a/src/utils/entityProduct/picUpload.ts +++ b/src/utils/entityProduct/picUpload.ts @@ -1,10 +1,11 @@ import { ref } from 'vue'; import myAxios from '@/api/myAxios'; -import { type UploadFile, type UploadProps, genFileId, type UploadRawFile, type FormInstance, type FormRules } from 'element-plus'; +import { type UploadFile, type UploadProps,type UploadUserFile} from 'element-plus'; import { WarnInfo } from '../messageInfo'; -export const productImgMap = new Map() //商品图片数组 -export const productImgArr: any = ref([]) +export const productImgMap = new Map() //商品图片集合 +export const productImgArr: any = ref([]) //商品图片数组 +export const ImgArr: any = ref([]) //给商品中心页面编辑商品使用 export const fileSimple = ref() //单个文件 export const form : any = ref({ //添加实体类商品的表单 name: '', //商品名称 @@ -18,9 +19,9 @@ export const form : any = ref({ //添加实体类商品的表单 detailImg: '', //图文详情url inventory: '' //库存 }) - +export const editForm: any = ref({}) //编辑后的实体类商品表格 //图片上传请求 此请求只要选择了图片，就会默认上传 -export const handleChange = async (file: any, flag: number) => { //12.18改 +export const handleChange = async (file: any, flag: number ) => { fileSimple.value = file let formData = new FormData() //这一步很重要 创建一个FormData对象 formData.append("file", fileSimple.value.raw) //fileSimple.value.raw 才是文件主体 将其以文件的格式插入formData @@ -37,11 +38,18 @@ export const handleChange = async (file: any, flag: number) => { //12.18改 } }) if (res.data.code === 1) { - if (flag === 0) { + if ( flag === 2 ) { productImgArr.value.splice(0, productImgArr.value.length) //一并删除数组中存放的图片Url地址 productImgMap.set(fileSimple.value.uid, res.data.data) productImgMap.forEach(loopMap) //将图片url插入到数组中 form.value.goodImg = formatString() + } else if(flag === 0 && ImgArr != null) { + dealImgArr(ImgArr.value) //先处理 + productImgMap.set(fileSimple.value.uid, res.data.data) + productImgMap.forEach(loopMap) //将图片url插入到数组中 + pushImgArr(productImgArr.value) + editForm.value.goodImg = formatString() + productImgMap.clear() //清除所有的键，防止bug } else { form.value.detailImg = res.data.data } @@ -58,6 +66,27 @@ const loopMap = (value: any, key: any, map: any) => { //循环商品图片Map productImgArr.value.push(value) } +const pushImgArr = (arr: any) =>{ + ImgArr.value.splice(0, ImgArr.value.length) //先清空,防止之前的 + arr.forEach((item:any)=>{ + ImgArr.value.push({ + url: item + }) + }) + console.log('处理完之后的图片数组--->',ImgArr.value); +} + +const dealImgArr = (obj: any) =>{ //处理商品图片数组对象 + productImgArr.value.splice(0, productImgArr.value.length) //防止数组越界 + console.log('商品图片对象--->',obj); + obj.forEach((item: any)=>{ + if(item.status === 'success') { + productImgArr.value.push(item.url) //赋值给商品图片数组 + } + }) + ImgArr.value.splice(0,ImgArr.value.length) +} +//针对添加商品的删除图片 export const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => { //uploadFile表示当前删除的图片，uploadFiles是还剩余的图片信息 productImgMap.delete(uploadFile.uid) productImgArr.value.splice(0, productImgArr.value.length) //一并删除数组中存放的图片Url地址 @@ -67,4 +96,14 @@ export const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) = export const Exceed_ProductImg: UploadProps['onExceed'] = (files) => { //覆盖商品照片 'onExceed'当文件个数超过限制时，做出的判断 WarnInfo('最多只能上传七张图片!') +} +//针对的是商品中心编辑按钮的删除 +export const removePic : UploadProps['onRemove'] = (uploadFile, uploadFiles) => { //uploadFile表示当前删除的图片，uploadFiles是还剩余的图片信息 + ImgArr.value = ImgArr.value.filter((item:any)=>{ + return uploadFile.url !== item.url + }) + console.log(ImgArr.value); + dealImgArr(ImgArr.value) + pushImgArr(productImgArr.value) + editForm.value.goodImg = formatString() } \ No newline at end of file diff --git a/src/views/Commodity/AddProduct.vue b/src/views/Commodity/AddProduct.vue index c20dff5..a6b1c51 100644 --- a/src/views/Commodity/AddProduct.vue +++ b/src/views/Commodity/AddProduct.vue @@ -7,7 +7,7 @@ diff --git a/src/views/Commodity/MerchandiseCenter.vue b/src/views/Commodity/MerchandiseCenter.vue index bc665cc..973a6e1 100644 --- a/src/views/Commodity/MerchandiseCenter.vue +++ b/src/views/Commodity/MerchandiseCenter.vue @@ -104,7 +104,7 @@ list-type="picture-card" :auto-upload="false" multiple="true" - :on-remove="handleRemove" + :on-remove="removePic" @change="(event: any) => handleChange(event, 0)" :on-exceed="Exceed_ProductImg" limit="7" > @@ -126,16 +126,12 @@ - + + + - - - - - - -
@@ -181,10 +177,10 @@