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

2025-01-02 20:27:34 +08:00 · 2025-01-02 20:27:34 +08:00 · b38083540f
commit b38083540f
parent 71efe041a9
6 changed files with 64 additions and 27 deletions
--- 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) {
--- 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<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()
 }
--- a/src/views/Commodity/AddProduct.vue
+++ b/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 />
--- 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 @@
            <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()
--- a/src/views/Orders/OrderList.vue
+++ b/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({
--- a/src/views/User/UserManagement.vue
+++ b/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
      //筛选条数