添加商品和商品中心已完成

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://localhost:9092/api'
-    baseURL: 'http://123.249.108.160:8888/api' //测试服务器
+    // baseURL: 'http://123.249.108.160:8888/api' //测试服务器
 });
 // 添加请求拦截器
 axios.interceptors.request.use(function (config) {

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 productImgMap = new Map() //商品图片集合
-export const productImgArr: any = ref([])
+export const productImgArr: any = ref([])  //商品图片数组
+export const ImgArr: any = ref<UploadUserFile[]>([]) //给商品中心页面编辑商品使用
 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()
 }

src/views/Commodity/AddProduct.vue

@@ -7,7 +7,7 @@
           <el-form-item label="添加商品图片">
             <!-- 下面的event的作用,传入当前事件对象 -->
             <el-upload ref="uploadProductImg" action="#" list-type="picture-card" :auto-upload="false" multiple="true"
-              :on-remove="handleRemove" @change="(event: any) => handleChange(event, 0)" :on-exceed="Exceed_ProductImg"
+              :on-remove="handleRemove" @change="(event: any) => handleChange(event, 2)" :on-exceed="Exceed_ProductImg"
               limit="7">
               <el-icon>
                 <Plus />

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 @@
             <el-option v-for="item in typeList" :key="item.value" :label="item.label" :value="item.value1"  />
           </el-select>
         </el-form-item>
-        <el-form-item label="商品数量">
+        <!-- <el-form-item label="商品数量">
           <el-input v-model="editForm.inventory" style="width: 50px;"></el-input>
+        </el-form-item> -->
+        <el-form-item label="库存" prop="inventory">
+          <el-input-number v-model="editForm.inventory" min="0" :precision="0" :step="1"/>
         </el-form-item>
-        <el-form-item label="商品状态">
-          <el-select v-model="editForm.isShelves" style="width: 50px;">
-            <el-option label="上架" value="上架" />
-            <el-option label="下架" value="下架" />
-          </el-select>
-        </el-form-item>
-
       </div>
       <div style="display: flex;">
         <el-form-item label="是否为限定类产品" prop="festivalOrder">
@@ -181,10 +177,10 @@
 </template>
 
 <script setup lang="ts">
-import { ElMessage , type UploadProps , genFileId ,type UploadRawFile ,type UploadUserFile  } from 'element-plus';
+import { ElMessage , type UploadProps , genFileId ,type UploadRawFile } from 'element-plus';
 import { ref, onMounted, inject } from 'vue';
 import myAxios from "@/api/myAxios";
-import { handleChange, handleRemove, Exceed_ProductImg} from '@/utils/entityProduct/picUpload';
+import { handleChange, removePic, handleRemove,Exceed_ProductImg, ImgArr ,editForm} from '@/utils/entityProduct/picUpload';
 // import { handleChange, handleRemove, form, Exceed_ProductImg } from '@/utils/entityProduct/picUpload';
 const total = ref(0); //总页数
 const idList = ref([]);
@@ -201,7 +197,7 @@ const productName = ref('');
 const DialogVisible = ref(false);
 const state = ref('');  //根据商品上架状态select栏
 const tableData : any= ref([]);  //实体类商品表格
-const editForm : any = ref({});  //编辑后的实体类商品表格
+// const editForm : any = ref({});  //编辑后的实体类商品表格
 const reload : any = inject("reload")  //页面重新刷新 
 const uploadProductImg : any = ref()  //图片上传的ref绑定
 const uploadProductDetail : any = ref()  //图片上传的ref绑定
@@ -211,7 +207,7 @@ const typeList: any = ref([
     label: ''
   }
 ])
-const ImgArr: any = ref<UploadUserFile[]>([])  //图片数组
+// const ImgArr: any = ref<UploadUserFile[]>([])  //图片数组
 onMounted(() => { //页面加载时获取商品列表和分类页表
   getProductList()
   getTypeList()

src/views/Orders/OrderList.vue

@@ -130,9 +130,8 @@
   <el-dialog title="发货" v-model="shipments" width="60%">
     <el-form label-width="100px" size="default"  >
       <el-form-item label="快递单号" style="width: 300px;">
-        <el-input v-model="shipment.trackingNumber" autocomplete="off"></el-input>
+        <el-input v-model="shipment.trackingNumber"></el-input>
       </el-form-item>
-
     </el-form>
     <template #footer>
       <div class="dialog-footer">
@@ -154,7 +153,7 @@ const title = ref('')
 const disabled = ref(true)
 const editForm: any = ref({});//编辑表单
 const shipment:any = ref({
-  trackingNumber:''
+  trackingNumber: null
 })//物流单号
 const DialogVisible = ref(false); //详情展示
 const shipments = ref(false)
@@ -217,7 +216,7 @@ const deliverGoods = async () => {  //发货方法
   if (currentId.value) {
     const res = await myAxios.post('/order/update', {
       id: currentId.value,
-      trackingNumber: shipment.trackingNumber
+      trackingNumber: shipment.value.trackingNumber
     })
     if (res.data.code === 1) {
       ElMessage({

src/views/User/UserManagement.vue

@@ -29,7 +29,9 @@
       <el-table-column type="selection" width="55"></el-table-column>
       <el-table-column prop="id" label="序号" width="50"></el-table-column>
       <el-table-column prop="userName" label="用户昵称" ></el-table-column>
-      <el-table-column prop="userAvatar" label="头像"></el-table-column>
+      <el-table-column prop="userAvatar" label="头像">
+        <template #default="scope"><img :src="scope.row.userAvatar" alt="" style="height: 50px;"></template>
+      </el-table-column>
       <el-table-column prop="userRole" label="身份"></el-table-column>
       <el-table-column prop="phone" label="手机号"></el-table-column>
       <el-table-column label="操作">
@@ -99,6 +101,7 @@ const getUserList = async () => {
   //为什么要用展开表达式({...})，因为是POST请求，如果直接对象.value,传的是Object类型
   const res = await myAxios.post('/user/list/page/vo',{...searchParams.value})
     if(res.data.code === 1) {
+      console.log(res.data.data)
       //给前端表格赋值   字段名一定要对应
       tableData.value = res.data.data.records
       //筛选条数