商品中心的新增和编辑功能开发对接完成

.env.development

@@ -5,5 +5,5 @@ VITE_APP_TITLE = 运营云后台管理系统
 VITE_APP_ENV = 'development'
 
 # 开发环境
-VITE_APP_BASE_API = 'http://192.168.18.151:8080'
+VITE_APP_BASE_API = 'http://192.168.18.99:8080'
 VITE_APP_PLATFORM = 'http://localhost:9000/platform'

src/api/common.js

@@ -0,0 +1,10 @@
+import request from '@/utils/request'
+
+//云南省所有区域信息
+export function getRegion(code) {
+  let codeVal = code ? code : '530000';
+  return request('/apis/system/area/region?areaCode=' + codeVal, {
+    method: 'GET',
+  });
+}
+

src/api/goods/info.js

@@ -2,7 +2,6 @@ import request from '@/utils/request'
 
 // 获取商品管理列表
 export function getGoodManageInfo(query) {
-  console.log(query)
   return request({
     url: '/goods/goodInfoManage/getGoodManage',
     method: 'get',
@@ -12,7 +11,6 @@ export function getGoodManageInfo(query) {
 
 // 获取商品分类列表
 export function getGoodType(query) {
-  console.log(query)
   return request({
     url: '/goods/goodInfoManage/goodType',
     method: 'get',
@@ -20,44 +18,52 @@ export function getGoodType(query) {
   })
 }
 
-
+// 新商品发布
-
+export function goodAdd(data) {
-
-
-
-
-
-
-// 查询岗位详细
-export function getPost(postId) {
   return request({
-    url: '/system/post/' + postId,
+    url: '/goods/goodInfoManage/goodSave',
-    method: 'get'
+    method: 'post',
+    data: data
   })
 }
-
+// 编辑商品发布
-// 新增岗位
+export function goodEdit(data) {
-export function addPost(data) {
   return request({
-    url: '/system/post',
+    url: '/goods/goodInfoManage/goodEdit',
+    method: 'put',
+    data: data
+  })
+}
+// 商品删除
+export function goodDelete(data) {
+  return request({
+    url: '/goods/business/category/remove',
     method: 'post',
     data: data
   })
 }
 
-// 修改岗位
+// 商品上下架
-export function updatePost(data) {
+export function goodUpAndDown(data) {
   return request({
-    url: '/system/post',
+    url: '/goods/goodInfoManage/goodEdit',
-    method: 'put',
+    method: 'post',
     data: data
   })
 }
 
-// 删除岗位
+// 获取商品信息（id）
-export function delPost(postId) {
+export function getGoodInfo(id) {
   return request({
-    url: '/system/post/' + postId,
+    url: '/goods/goodInfoManage/getGoodInfo/' + id,
-    method: 'delete'
+    method: 'get'
   })
 }
+
+// 获取商品优惠信息配置项
+export function getActiveInfos() {
+  return request({
+    url: '/goods/goodInfoManage/getActiveInfos',
+    method: 'get'
+  })
+}

src/assets/styles/custom.scss

@@ -266,6 +266,15 @@
   .attr-input {
     width: 120px;
   }
+  .attr-clomn {
+    width: 160px;
+  }
+  .attr-clomn200 {
+    width: 160px;
+  }
+  .attr-clomn220 {
+    width: 220px;
+  }
   .attr-box {
     padding: 16px 16px 6px 16px;
     border-radius: 6px;
@@ -273,3 +282,10 @@
   }
 }
 // 新增商品页面-结束
+
+.flex-left-top {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: flex-start;
+}

src/components/myUploadImage.vue

@@ -62,7 +62,7 @@ const props = defineProps({
     // 上传接口地址
     action: {
         type: String,
-        default: "/uploadApis/file/upload"
+        default: "/uploadApis/upload"
     },
     // 上传携带的参数
     data: {

src/components/myUploadVideo.vue

@@ -1,37 +1,24 @@
 <template>
   <div class="upload-file">
-    
+
-    <div class="upload-tip">建议比例1:1，不超过60s，视频200MB以内</div>
+    <div class="upload-tip">建议比例1:1，不超过60s，视频{{ fileSize }}MB以内</div>
-    <el-upload
+    <el-upload multiple :action="uploadFileUrl" :before-upload="handleBeforeUpload" :file-list="fileList" :data="data"
-      multiple
+      :limit="limit" :on-error="handleUploadError" :on-exceed="handleExceed" :on-success="handleUploadSuccess"
-      :action="uploadFileUrl"
+      :show-file-list="false" :headers="headers" class="upload-file-uploader" list-type="picture-card" ref="fileUpload"
-      :before-upload="handleBeforeUpload"
+      v-if="!disabled" :class="{ hide: fileList.length >= limit }">
-      :file-list="fileList"
-      :data="data"
-      :limit="limit"
-      :on-error="handleUploadError"
-      :on-exceed="handleExceed"
-      :on-success="handleUploadSuccess"
-      :show-file-list="false"
-      :headers="headers"
-      class="upload-file-uploader"
-      list-type="picture-card"
-      ref="fileUpload"
-      v-if="!disabled"
-    >
       <!-- 上传按钮 -->
       <el-icon size="30px" color="red">
-                <Plus />
+        <Plus />
-            </el-icon>
+      </el-icon>
-            <div class="el-upload__text">上传视频</div>
+      <div class="el-upload__text">上传视频</div>
     </el-upload>
     <!-- 上传提示 -->
     <!-- <div class="el-upload__tip" v-if="showTip && !disabled">
       请上传
       <template v-if="fileSize"> 大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b> </template>
-      <template v-if="fileType"> 格式为 <b style="color: #f56c6c">{{ fileType.join("/") }}</b> </template>
+<template v-if="fileType"> 格式为 <b style="color: #f56c6c">{{ fileType.join("/") }}</b> </template>
-      的文件
+的文件
-    </div> -->
+</div> -->
     <!-- 文件列表 -->
     <transition-group ref="uploadFileList" class="upload-file-list el-upload-list el-upload-list--text" name="el-fade-in-linear" tag="ul">
       <li :key="file.uid" class="el-upload-list__item ele-upload-list__item-content" v-for="(file, index) in fileList">
@@ -55,7 +42,7 @@ const props = defineProps({
   // 上传接口地址
   action: {
     type: String,
-    default: "/uploadApis/file/upload"
+    default: "/uploadApis/upload"
   },
   // 上传携带的参数
   data: {
@@ -64,12 +51,12 @@ const props = defineProps({
   // 数量限制
   limit: {
     type: Number,
-    default: 5
+    default: 1
   },
   // 大小限制(MB)
   fileSize: {
     type: Number,
-    default: 5
+    default: 100
   },
   // 文件类型
   fileType: {
@@ -122,7 +109,7 @@ watch(() => props.modelValue, val => {
     fileList.value = []
     return []
   }
-},{ deep: true, immediate: true })
+}, { deep: true, immediate: true })
 
 // 上传前校检格式和大小
 function handleBeforeUpload(file) {
@@ -169,9 +156,9 @@ function handleUploadError(err) {
 function handleUploadSuccess(res, file) {
   if (res.code === 200) {
     uploadList.value.push({ name: res.data.name, url: res.data.url })
-        uploadList.value.forEach(item => {
+    uploadList.value.forEach(item => {
-            item.url = "http://gov-cloud.oss-cn-chengdu.aliyuncs.com/" + item.url;
+      item.url = "http://gov-cloud.oss-cn-chengdu.aliyuncs.com/" + item.url;
-        })
+    })
     uploadedSuccessfully()
   } else {
     number.value--
@@ -239,13 +226,20 @@ onMounted(() => {
 })
 </script>
 <style scoped lang="scss">
+// .el-upload--picture-card 控制加号部分
+:deep(.hide .el-upload--picture-card) {
+    display: none;
+}
+
 .file-upload-darg {
   opacity: 0.5;
   background: #c8ebfb;
 }
+
 .upload-file-uploader {
   margin-bottom: 5px;
 }
+
 .upload-file-list .el-upload-list__item {
   border: 1px solid #e4e7ed;
   line-height: 2;
@@ -253,34 +247,38 @@ onMounted(() => {
   position: relative;
   transition: none !important;
 }
+
 .upload-file-list .ele-upload-list__item-content {
   display: flex;
   justify-content: space-between;
   align-items: center;
   color: inherit;
 }
+
 .ele-upload-list__item-content-action .el-link {
   margin-right: 10px;
 }
+
 // 上传提示文字
 .upload-tip {
-    color: #999;
+  color: #999;
-    font-size: 12px;
+  font-size: 12px;
-    margin-bottom: 10px;
+  margin-bottom: 10px;
 }
+
 .el-upload__text {
-    font-size: 12px;
+  font-size: 12px;
-    line-height: 30px;
+  line-height: 30px;
-    color: #666;
+  color: #666;
 }
 
 :deep(.el-upload--picture-card) {
-    width: 120px;
+  width: 120px;
-    height: 120px;
+  height: 120px;
-    line-height: 100px;
+  line-height: 100px;
-    display: flex;
+  display: flex;
-    justify-content: center;
+  justify-content: center;
-    flex-direction: column;
+  flex-direction: column;
-    align-items: center;
+  align-items: center;
 }
 </style>

src/components/tableComponent.vue

@@ -204,19 +204,10 @@ const computedCurrentPage = computed({
   set: (val) => emit('update:currentPage', val)
 });
 
-// 监听外部传入的pageSize变化
-// watch(
-//   () => props.pageSize,
-//   (newVal) => {
-//     internalPageSize.value = newVal;
-//   }
-// );
-
 // 分页大小改变
 const pageSizeChange = (val) => {
-  console.log(`每页 ${val} 条`);
+  // console.log(`每页 ${val} 条`);
-  internalPageSize.value = val;
+  // console.log(props.currentPage);
-  console.log(props.currentPage, internalPageSize.value);
   emit("update:pageSize", val);
   emit("page-change", {
     page: props.currentPage,
@@ -226,10 +217,10 @@ const pageSizeChange = (val) => {
 
 // 当前页改变
 const handleCurrentChange = (val) => {
-  console.log(`当前页改变 ${val} 页`);
+  // console.log(`当前页改变 ${val} 页`);
   emit("page-change", {
     page: val,
-    pageSize: internalPageSize.value,
+    pageSize: props.pageSize,
   });
 };
 

src/router/index.js

@@ -82,10 +82,16 @@ export const constantRoutes = [
     redirect: 'noredirect',
     children: [
       {
-        path: 'addGoods/:activeTab?',
+        path: 'goodsManage/addGoods/:activeTab?',
-        component: () => import('@/views/goods/addGoods'),
+        component: () => import('@/views/goods/goodsManage/addGoods'),
         name: 'addGoods',
         meta: { title: '新增商品', icon: '' }
+      },
+      {
+        path: 'goodsManage/editGoods/:activeTab?',
+        component: () => import('@/views/goods/goodsManage/editGoods'),
+        name: 'editGoods',
+        meta: { title: '编辑商品', icon: '' }
       }
     ]
   },
@@ -159,7 +165,7 @@ export const constantRoutes = [
     children: [
       {
         path: 'goods/goodsManage',
-        component: () => import('@/views/goods/goodsManage'),
+        component: () => import('@/views/goods/goodsManage/index'),
         name: 'goodsManage',
         hidden: false,
         meta: {
@@ -171,7 +177,7 @@ export const constantRoutes = [
       },
       {
         path: 'goods/goodsCategory',
-        component: () => import('@/views/goods/goodsCategory'),
+        component: () => import('@/views/goods/goodsCategory/index'),
         name: 'goodsCategory',
         hidden: false,
         meta: {

src/views/goods/goodsManage/addGoods.vue

@@ -4,7 +4,8 @@
       <el-form ref="formRef" :model="formInline" :rules="rules" class="demo-form-inline" :label-width="'auto'">
         <!-- 商品名称 -->
         <el-form-item label="商品名称" prop="goodName">
-          <el-input v-model="formInline.goodName" clearable show-word-limit maxlength="30" style="width: 800px" />
+          <el-input v-model="formInline.goodName" clearable show-word-limit maxlength="30" placeholder="请输入商品名称"
+            style="width: 800px" />
         </el-form-item>
 
         <!-- 商品分类 -->
@@ -54,19 +55,19 @@
         <div v-if="formInline.specStyle == 1">
           <!-- 销售价格 -->
           <el-form-item label="销售价格" prop="salePrice" required>
-            <el-input-number v-model="formInline.salePrice" :min="0" :precision="2" :controls="false" />
+            <el-input-number v-model="formInline.salePrice" :min="1" :precision="2" :controls="false"></el-input-number>
-            <span class="unit">元</span>
+            <span style="padding: 0 10px;">元</span>
           </el-form-item>
 
           <!-- 库存数量 -->
           <el-form-item label="库存数量" prop="stock" required>
-            <el-input-number v-model="formInline.stock" :min="0" :controls="false" />
+            <el-input-number v-model="formInline.stock" :min="1" :controls="false" />
           </el-form-item>
 
           <!-- 净含量 -->
           <el-form-item label="净含量" prop="netContent" required>
-            <el-input-number v-model="formInline.netContent" :min="0" :controls="false" />
+            <el-input-number v-model="formInline.netContent" :min="1" :controls="false" />
-            <el-select v-model="formInline.netContentUnit" style="width: 80px; margin-left: 10px">
+            <el-select v-model="formInline.unit" style="width: 80px; margin-left: 10px">
               <el-option label="kg" value="kg" />
               <el-option label="g" value="g" />
               <el-option label="ml" value="ml" />
@@ -75,9 +76,46 @@
         </div>
         <!-- 多规格 -->
         <div v-else>
-多规格
+          <el-form-item label="商品规格" prop="netWeight" required>
+            <div v-for="(item, index) in formInline.netWeight" :key="index" class="attr-item">
+              <el-input v-model="item.goodSpecs" :value="item.goodSpecs" class="attr-clomn" placeholder="请输入规格名称" />
+              <el-icon size="20px" v-if="index !== 0" @click="deleteSpecs(index)" style="cursor: pointer;">
+                <Delete />
+              </el-icon>
+            </div>
+            <el-button icon="plus" type="primary" plain style="margin: 0" @click="addSpecs">添加属性</el-button>
+          </el-form-item>
+          <!-- 价格库存 -->
+          <el-form-item label="价格库存" prop="netWeight" required>
+            <div class="attr-box">
+              <div class="attr-row">
+                <div class="attr-clomn color-gray">商品规格</div>
+                <div class="attr-clomn200 color-gray">销售价格</div>
+                <div class="attr-clomn color-gray">库存数量</div>
+                <div class="attr-clomn220 color-gray">净含量</div>
+              </div>
+              <div v-for="(item, index) in formInline.netWeight" :key="index" class="attr-row">
+                <div class="attr-clomn">{{ item.goodSpecs }}</div>
+                <div class="attr-clomn200 flex-left-top">
+                  <el-input-number v-model="item.goodPrice" :min="1" :precision="2" :controls="false"></el-input-number>
+                  <span style="padding: 0 10px;">元</span>
+                </div>
+                <div class="attr-clomn">
+                  <el-input-number v-model="item.goodStock" :min="1" :controls="false" />
+                </div>
+                <div class="attr-clomn220 flex-left-top">
+                  <el-input-number v-model="item.netContent" :min="1" :controls="false" />
+                  <el-select v-model="item.unit" style="width: 80px; margin-left: 10px">
+                    <el-option label="kg" value="kg" />
+                    <el-option label="g" value="g" />
+                    <el-option label="ml" value="ml" />
+                  </el-select>
+                </div>
+              </div>
+            </div>
+          </el-form-item>
         </div>
-        
+
 
         <!-- 商品属性 -->
         <el-form-item label="商品属性" prop="attribute" required>
@@ -117,9 +155,9 @@
           </div>
         </el-form-item>
         <!-- 保障服务 -->
-        <el-form-item label="保障服务" prop="safeguard" required style="margin-bottom: 2px;">
+        <el-form-item label="保障服务" prop="safeguard" required style="margin-bottom: 10px;">
           <el-checkbox v-model="isSafeguardSelected" size="large" style="margin-top: -3px;">
-            <div style="color: #333;" v-for="(item, index) in formInline.safeguard.options" :key="index">{{ item.text }}
+            <div style="color: #333;" v-for="(item) in formInline.safeguard.options" :key="item.id">服务承诺：{{ item.text }}
             </div>
           </el-checkbox>
         </el-form-item>
@@ -127,14 +165,16 @@
         <el-form-item label="优惠折扣" style="margin-bottom: 10px;">
           <div style="width: 100%;">
             <el-checkbox v-model="isDiscountSettings" size="large" style="margin-top: -3px;">
-              <div style="color: #333;" v-for="(item, index) in formInline.discountSettings.options" :key="index">{{
+              <div style="color: #333;" v-for="(item) in formInline.discountSettings.options" :key="item.id">
-                item.text }}</div>
+                优惠设置：{{
+                  item.text }}</div>
             </el-checkbox>
           </div>
           <div style="width: 100%;">
             <el-checkbox v-model="isDiscountRebate" size="large" style="margin-top: -3px;">
-              <div style="color: #333;" v-for="(item, index) in formInline.discountSettings.options" :key="index">{{
+              <div style="color: #333;" v-for="(item) in formInline.discountSettings.options" :key="item.id">
-                item.text }}</div>
+                折扣设置：{{
+                  item.text }}</div>
             </el-checkbox>
           </div>
         </el-form-item>
@@ -152,21 +192,23 @@
         </el-form-item>
 
       </el-form>
-      <el-button type="primary" @click="onSave" style="margin: 10px 0 0 80px;width: 150px;">确认新增</el-button>
+      <el-button type="primary" @click="onSubmit" style="margin: 10px 0 0 80px;width: 150px;">确认新增</el-button>
     </div>
   </div>
 </template>
-<script setup>
+<script setup name="addGoods">
 import { ca } from "element-plus/es/locales.mjs";
 import { ref, reactive, nextTick, onMounted } from "vue";
 import myUploadImage from "@/components/myUploadImage.vue";
 import myUploadVideo from "@/components/myUploadVideo.vue";
-import { getGoodType } from "@/api/goods/info";
+import { getGoodType, goodAdd, getActiveInfos } from "@/api/goods/info";
+import { getRegion } from "@/api/common";
+import { ElMessage } from "element-plus";
 
 const formRef = ref(null)
 const formInline = reactive({
-  goodName: "高质量水稻",
+  goodName: "",
-  categoryId: "", //一级,
+  categoryId: "", //给后端的最后一级,
   categoryId1: "", //一级,
   categoryId2: "", //二级
   categoryId3: "", //三级
@@ -175,58 +217,53 @@ const formInline = reactive({
   brandId: "", //品牌
   traceCode: "", //溯源码
 
-  specStyle: "1",//规格样式
+  specStyle: "1",//规格样式 1单规格 2多规格
-  salePrice: 0,//销售价格-单规格
+  salePrice: 1,//销售价格-单规格
-  stock: 6500,//库存数量-单规格
+  stock: 1,//库存数量-单规格
-  netContent: 0,//净含量-单规格
+  netContent: 1,//净含量-单规格
-  netContentUnit: "kg",//净含量单位
+  unit: "kg",//净含量单位-单规格
-  netWeight: [
+  netWeight: [ //多规格集合
     {
-      "goodSpecs": "含氮20%",
+      goodSpecs: "",
-      "goodPrice": 135,
+      goodPrice: 1,
-      "goodStock": 10000,
+      goodStock: 1,
-      "netContent": "50",
+      netContent: 1,
-      "unit": "kg"
+      unit: "kg"
     }
-  ], //规格，格式建议数组
+  ], //规格
   attribute: [
     {
-      name: '品牌', //属性
+      name: '', //属性
-      value: '童涵春堂', //内容
+      value: '', //内容
-    },
-    {
-      name: '型号', //属性
-      value: '种子种苗', //内容
     },
   ],
   selectedAddress: [], //选中的省市区编码数组
-  areaAddress: '云南省,昆明市,五华区', //区域地址
+  areaAddress: '', //区域地址
   detailAddress: "", //详细地址
-  sendAddress: "云南省昆明市", //提交的组合地址
+  sendAddress: "",
-  isCheckbox: true,
   safeguard: {
     isSelected: 1, //0未选中 1选中
     options: [
-      { text: '该商品，支持【七天无理由退货】服务' },
+      // { id: 10, text: '该商品，支持【七天无理由退货】服务' },
     ]
   }, //保障服务
   discountSettings: {
     isSelected: 0, //0未选中 1选中
     options: [
-      { text: '支持【满100减10元】优惠活动' },
+      // { id: 11, text: '支持【满100减10元】优惠活动' },
-      { text: '支持【满200减20元】优惠活动' },
+      // { id: 13, text: '支持【满200减20元】优惠活动' },
     ]
   }, //优惠设置
   discountRebate: {
     isSelected: 0, //0未选中 1选中
     options: [
-      { text: '支持【满两件-打8折】优惠活动' },
+      // { id: 12, text: '支持【满两件-打8折】优惠活动' },
-      { text: '支持【单件-打905折】优惠活动' },
+      // { id: 14, text: '支持【单件-打905折】优惠活动' },
     ]
   }, //优惠折扣
   detailUrl: "",
-  brandId: "44552",
+  brandId: "",
-  traceCode: "45788",
+  traceCode: "",
   videoUrl: "",
 });
 const rules = reactive({
@@ -309,6 +346,25 @@ const rules = reactive({
       trigger: ['blur', 'change']
     },
   ] : [],
+  netWeight: formInline.specStyle === '2' ? [
+    {
+      validator: (rule, value, callback) => {
+        // 检查是否至少有一个属性
+        if (!value || value.length === 0) {
+          return callback(new Error('至少需要添加一个属性'))
+        }
+
+        // 检查每个属性名称是否已填写
+        const emptyNames = value.filter(item => !item.goodSpecs?.trim())
+        if (emptyNames.length > 0) {
+          return callback(new Error('请填写所有商品规格'))
+        }
+
+        callback()
+      },
+      trigger: 'blur'
+    }
+  ] : [],
   attribute: [
     {
       validator: (rule, value, callback) => {
@@ -344,7 +400,33 @@ const rules = reactive({
   detailAddress: [
     { required: true, message: '请输入详细地址', trigger: 'blur' }
   ],
-})
+  safeguard: [
+    { 
+      validator: (rule, value, callback) => {
+        console.log(value);
+        if (value.isSelected !== 1) { // 如果值不是 1（未选中）
+          callback(new Error('必须选择保障服务')); // 报错
+        } else {
+          callback(); // 校验通过
+        }
+      },
+      trigger: 'change', // 触发时机
+    },
+  ],
+});
+
+const addSpecs = () => {
+  formInline.netWeight.push({
+    goodSpecs: "",
+    goodPrice: 1.00,
+    goodStock: 1,
+    netContent: 1,
+    unit: "kg"
+  })
+}
+const deleteSpecs = (index) => {
+  formInline.netWeight.splice(index, 1)
+}
 
 const addAttr = () => {
   formInline.attribute.push({
@@ -504,36 +586,77 @@ const changeCategory3 = (id) => {
   formInline.categoryId = id;
 };
 
-const onSave = async () => {
+const onSubmit = async () => {
   console.log(formInline);
-  // formRef.validate(valid => {
-  //   if (!valid) return
-  //   console.log('验证通过!', formRef.value)
-  // })
   try {
     await formRef.value.validate()
     console.log('验证通过!', formRef.value)
     // 整理提交的参数
+    let params = { ...formInline };
+    if (formInline.specStyle == '1') {
+      params.netWeight = [
+        {
+          goodSpecs: "",
+          goodPrice: formInline.salePrice,
+          goodStock: formInline.stock,
+          netContent: formInline.netContent,
+          unit: formInline.unit
+        }
+      ];
+    } else {
+      params.netWeight = formInline.netWeight
+    }
+    params.areaAddress = params.selectedAddress.join(',');
+
+    params.safeguardSelected  = formInline.safeguard.isSelected; //保障服务
+    params.discountSettingsSelected  = formInline.discountSettings.isSelected; //优惠设置
+    params.discountRebateSelected  = formInline.discountRebate.isSelected; //优惠折扣
 
     // 调用接口提交
-
+     onGoodSave(params)
   } catch (error) {
     console.log('验证失败', error)
   }
 };
 
-const getGoodTypeList2 = async () => {
+const onGoodSave = async (params) => {
-  const res = await getGoodType({
+  let response = await goodAdd(params);
-    pageNum: 1,
+  if (response.code === 200) {
-    pageSize: 100,
+    ElMessage.success("新增成功！");
-  });
+    formRef.value.resetFields();
+  } else  {
+    ElMessage.error(response.message);
+  }
+}
+
+const getArea = async () => {
+  const res = await getRegion();
+  console.log(res);
   if (res.code === 200) {
-    goodTypeList.value = res.data.list;
+    addressOptions.value = res.data.list;
+  } else  {
+    ElMessage.error(res.message);
+  }
+};
+const activeInfoList = ref([]);
+// 获取商品优惠信息配置项
+const getActiveInfo = async () => {
+  const res = await getActiveInfos();
+  console.log(res);
+  if (res.code === 200) {
+    activeInfoList.value = res.data;
+    formInline.safeguard.options = [...activeInfoList.value.safeguard.options];
+    formInline.discountSettings.options = [...activeInfoList.value.discountSettings.options];
+    formInline.discountRebate.options = [...activeInfoList.value.discountRebate.options];
+  } else  {
+    ElMessage.error(res.message);
   }
 };
 
 onMounted(() => {
+  getActiveInfo();
   getGoodTypeList();
+  getArea();
 });
 </script>
 <style lang="scss" scoped></style>

src/views/goods/goodsManage/editGoods.vue

@@ -0,0 +1,699 @@
+<template>
+  <div class="app-container customer-control">
+    <div class="customer-box">
+      <el-form ref="formRef" :model="formInline" :rules="rules" class="demo-form-inline" :label-width="'auto'">
+        <!-- 商品名称 -->
+        <el-form-item label="商品名称" prop="goodName">
+          <el-input v-model="formInline.goodName" clearable show-word-limit maxlength="30" placeholder="请输入商品名称"
+            style="width: 800px" />
+        </el-form-item>
+
+        <!-- 商品分类 -->
+        <el-form-item label="商品分类" required>
+          <div style="display: flex; gap: 16px;">
+            <el-form-item prop="categoryId1">
+              <el-select v-model="formInline.categoryId1" placeholder="请选择" class="my-el-select"
+                @change="changeCategory1($event)">
+                <el-option v-for="item in categoryList1" :key="item.id" :value="item.id" :label="item.name" />
+              </el-select>
+            </el-form-item>
+            <el-form-item prop="categoryId2">
+              <el-select v-model="formInline.categoryId2" placeholder="请选择" class="my-el-select"
+                @change="changeCategory2($event)">
+                <el-option v-for="item in categoryList2" :key="item.id" :value="item.id" :label="item.name" />
+              </el-select>
+            </el-form-item>
+            <el-form-item prop="categoryId3">
+              <el-select v-model="formInline.categoryId3" placeholder="请选择" class="my-el-select"
+                @change="changeCategory3($event)">
+                <el-option v-for="item in categoryList3" :key="item.id" :value="item.id" :label="item.name" />
+              </el-select>
+            </el-form-item>
+          </div>
+        </el-form-item>
+        <!-- 公共品牌 -->
+        <el-form-item label="公共品牌" prop="brandId" v-show="formInline.goodCategorySelectType == 1">
+          <el-input v-model="formInline.brandId" clearable placeholder="请输入公共品牌" style="width: 800px" />
+        </el-form-item>
+        <!-- 溯源编码 -->
+        <el-form-item label="溯源编码" prop="traceCode" v-show="formInline.goodCategorySelectType == 1">
+          <el-input v-model="formInline.traceCode" clearable placeholder="请输入溯源编码" style="width: 800px" />
+        </el-form-item>
+        <!-- 商品图片 -->
+        <el-form-item label="商品图片" prop="goodUrl" required>
+          <div>
+            <myUploadImage v-model="formInline.goodUrl"></myUploadImage>
+          </div>
+        </el-form-item>
+        <!-- 规格样式 -->
+        <el-form-item label="规格样式" prop="specStyle" required>
+          <el-radio-group v-model="formInline.specStyle" style="margin-top: -3px;">
+            <el-radio value="1" size="large">单规格</el-radio>
+            <el-radio value="2" size="large">多规格</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <div v-if="formInline.specStyle == 1">
+          <!-- 销售价格 -->
+          <el-form-item label="销售价格" prop="salePrice" required>
+            <el-input-number v-model="formInline.salePrice" :min="1" :precision="2" :controls="false"></el-input-number>
+            <span style="padding: 0 10px;">元</span>
+          </el-form-item>
+
+          <!-- 库存数量 -->
+          <el-form-item label="库存数量" prop="stock" required>
+            <el-input-number v-model="formInline.stock" :min="1" :controls="false" />
+          </el-form-item>
+
+          <!-- 净含量 -->
+          <el-form-item label="净含量" prop="netContent" required>
+            <el-input-number v-model="formInline.netContent" :min="1" :controls="false" />
+            <el-select v-model="formInline.unit" style="width: 80px; margin-left: 10px">
+              <el-option label="kg" value="kg" />
+              <el-option label="g" value="g" />
+              <el-option label="ml" value="ml" />
+            </el-select>
+          </el-form-item>
+        </div>
+        <!-- 多规格 -->
+        <div v-else>
+          <el-form-item label="商品规格" prop="netWeight" required>
+            <div v-for="(item, index) in formInline.netWeight" :key="index" class="attr-item">
+              <el-input v-model="item.goodSpecs" :value="item.goodSpecs" class="attr-clomn" placeholder="请输入规格名称" />
+              <el-icon size="20px" v-if="index !== 0" @click="deleteSpecs(index)" style="cursor: pointer;">
+                <Delete />
+              </el-icon>
+            </div>
+            <el-button icon="plus" type="primary" plain style="margin: 0" @click="addSpecs">添加属性</el-button>
+          </el-form-item>
+          <!-- 价格库存 -->
+          <el-form-item label="价格库存" prop="netWeight" required>
+            <div class="attr-box">
+              <div class="attr-row">
+                <div class="attr-clomn color-gray">商品规格</div>
+                <div class="attr-clomn200 color-gray">销售价格</div>
+                <div class="attr-clomn color-gray">库存数量</div>
+                <div class="attr-clomn220 color-gray">净含量</div>
+              </div>
+              <div v-for="(item, index) in formInline.netWeight" :key="index" class="attr-row">
+                <div class="attr-clomn">{{ item.goodSpecs }}</div>
+                <div class="attr-clomn200 flex-left-top">
+                  <el-input-number v-model="item.goodPrice" :min="1" :precision="2" :controls="false"></el-input-number>
+                  <span style="padding: 0 10px;">元</span>
+                </div>
+                <div class="attr-clomn">
+                  <el-input-number v-model="item.goodStock" :min="1" :controls="false" />
+                </div>
+                <div class="attr-clomn220 flex-left-top">
+                  <el-input-number v-model="item.netContent" :min="1" :controls="false" />
+                  <el-select v-model="item.unit" style="width: 80px; margin-left: 10px">
+                    <el-option label="kg" value="kg" />
+                    <el-option label="g" value="g" />
+                    <el-option label="ml" value="ml" />
+                  </el-select>
+                </div>
+              </div>
+            </div>
+          </el-form-item>
+        </div>
+
+
+        <!-- 商品属性 -->
+        <el-form-item label="商品属性" prop="attribute" required>
+          <div v-for="(item, index) in formInline.attribute" :key="index" class="attr-item">
+            <el-input v-model="item.name" :value="item.name" class="attr-input" placeholder="请输入属性名称" />
+            <el-icon size="20px" v-if="index !== 0" @click="deleteAttr(index)" style="cursor: pointer;">
+              <Delete />
+            </el-icon>
+          </div>
+          <el-button icon="plus" type="primary" plain style="margin: 0" @click="addAttr">添加属性</el-button>
+        </el-form-item>
+        <!-- 属性内容 -->
+        <el-form-item label="属性内容" prop="attribute" required>
+          <div class="attr-box">
+            <div class="attr-row">
+              <div class="attr-input color-gray">属性名称</div>
+              <div class="attr-input color-gray">属性内容</div>
+            </div>
+            <div v-for="(item, index) in formInline.attribute" :key="index" class="attr-row">
+              <div class="attr-input">{{ item.name }}</div>
+              <el-input v-model="item.value" class="attr-input" />
+            </div>
+          </div>
+        </el-form-item>
+        <!-- 发货地址 -->
+        <el-form-item label="发货地址" required>
+          <div style="display: flex; gap: 16px;">
+            <el-form-item prop="selectedAddress">
+              <!-- 省市区级联选择器 -->
+              <el-cascader v-model="formInline.selectedAddress" :options="addressOptions" :props="cascaderProps"
+                placeholder="请选择省市区" clearable />
+            </el-form-item>
+            <el-form-item prop="detailAddress">
+              <!-- 详细地址输入框 -->
+              <el-input v-model="formInline.detailAddress" placeholder="详细地址（如街道、门牌号等）" style="width: 220px;" />
+            </el-form-item>
+          </div>
+        </el-form-item>
+        <!-- 保障服务 -->
+        <el-form-item label="保障服务" prop="safeguard" required style="margin-bottom: 10px;">
+          <el-checkbox v-model="isSafeguardSelected" size="large" style="margin-top: -3px;">
+            <div style="color: #333;" v-for="(item, index) in formInline.safeguard.options" :key="index">服务承诺：{{
+              item.text }}
+            </div>
+          </el-checkbox>
+        </el-form-item>
+        <!-- 优惠折扣 -->
+        <el-form-item label="优惠折扣" style="margin-bottom: 10px;">
+          <div style="width: 100%;">
+            <el-checkbox v-model="isDiscountSettings" size="large" style="margin-top: -3px;">
+              <div style="color: #333;" v-for="(item, index) in formInline.discountSettings.options" :key="index">
+                优惠设置：{{
+                  item.text }}</div>
+            </el-checkbox>
+          </div>
+          <div style="width: 100%;">
+            <el-checkbox v-model="isDiscountRebate" size="large" style="margin-top: -3px;">
+              <div style="color: #333;" v-for="(item, index) in formInline.discountSettings.options" :key="index">
+                折扣设置：{{
+                  item.text }}</div>
+            </el-checkbox>
+          </div>
+        </el-form-item>
+        <!-- 商品详情 -->
+        <el-form-item label="商品详情" prop="detailUrl">
+          <div>
+            <myUploadImage v-model="formInline.detailUrl" :isShowSubscript="false"></myUploadImage>
+          </div>
+        </el-form-item>
+        <!-- 商品视频 -->
+        <el-form-item label="商品视频" prop="videoUrl">
+          <div>
+            <myUploadVideo v-model="formInline.videoUrl"></myUploadVideo>
+          </div>
+        </el-form-item>
+
+      </el-form>
+      <el-button type="primary" @click="onSubmit" style="margin: 10px 0 0 80px;width: 150px;">确认编辑</el-button>
+    </div>
+  </div>
+</template>
+<script setup name="editGoods">
+import { ca } from "element-plus/es/locales.mjs";
+import { ref, reactive, nextTick, onMounted, watch } from "vue";
+import myUploadImage from "@/components/myUploadImage.vue";
+import myUploadVideo from "@/components/myUploadVideo.vue";
+import { getGoodType, goodEdit, getGoodInfo, getActiveInfos } from "@/api/goods/info";
+import { getRegion } from "@/api/common";
+import { ElMessage } from "element-plus";
+const route = useRoute()
+const router = useRouter()
+
+const formRef = ref(null)
+const formData = ref({});
+const formInline = reactive({
+  goodName: "",
+  categoryId: "", //给后端的最后一级,
+  categoryId1: "", //一级,
+  categoryId2: "", //二级
+  categoryId3: "", //三级
+  goodUrl: "", //逗号分割的多个图片地址字符串
+  goodCategorySelectType: 2, // 商品分类一级选项
+  brandId: "", //品牌
+  traceCode: "", //溯源码
+
+  specStyle: "1",//规格样式 1单规格 2多规格
+  salePrice: 1,//销售价格-单规格
+  stock: 1,//库存数量-单规格
+  netContent: 1,//净含量-单规格
+  unit: "kg",//净含量单位-单规格
+  netWeight: [ //多规格集合
+    {
+      goodSpecs: "",
+      goodPrice: 1,
+      goodStock: 1,
+      netContent: 1,
+      unit: "kg"
+    }
+  ], //规格
+  attribute: [
+    {
+      name: '', //属性
+      value: '', //内容
+    },
+  ],
+  selectedAddress: [], //选中的省市区编码数组
+  areaAddress: '', //区域地址
+  detailAddress: "", //详细地址
+  sendAddress: "",
+  safeguard: {
+    isSelected: 1, //0未选中 1选中
+    options: [
+      // { id: 10, text: '该商品，支持【七天无理由退货】服务' },
+    ]
+  }, //保障服务
+  discountSettings: {
+    isSelected: 0, //0未选中 1选中
+    options: [
+      // { id: 11, text: '支持【满100减10元】优惠活动' },
+      // { id: 13, text: '支持【满200减20元】优惠活动' },
+    ]
+  }, //优惠设置
+  discountRebate: {
+    isSelected: 0, //0未选中 1选中
+    options: [
+      // { id: 12, text: '支持【满两件-打8折】优惠活动' },
+      // { id: 14, text: '支持【单件-打905折】优惠活动' },
+    ]
+  }, //优惠折扣
+  detailUrl: "",
+  brandId: "",
+  traceCode: "",
+  videoUrl: "",
+});
+const rules = reactive({
+  goodName: [
+    {
+      required: true,
+      message: '请输入商品名称',
+      trigger: 'blur'
+    },
+  ],
+  categoryId1: [
+    {
+      required: true,
+      message: '请选择',
+      trigger: 'change',
+    },
+  ],
+  categoryId2: [
+    {
+      required: true,
+      message: '请选择',
+      trigger: 'change',
+    },
+  ],
+  categoryId3: [
+    {
+      required: true,
+      message: '请选择',
+      trigger: 'change',
+    },
+  ],
+  goodUrl: [
+    {
+      validator: (rule, value, callback) => {
+        if (value === "" || value.trim() === "") {
+          callback(new Error('请至少上传一张商品图片'))
+        } else {
+          callback()
+        }
+      },
+      trigger: 'change'
+    }
+  ],
+  specStyle: [
+    { required: true, message: '请选择规格样式', trigger: 'change' }
+  ],
+  salePrice: formInline.specStyle === '1' ? [
+    {
+      validator: (rule, value, callback) => {
+        if (!value || Number(value) <= 0) {
+          callback(new Error('请输入销售价格'))
+        } else {
+          callback()
+        }
+      },
+      trigger: ['blur', 'change']
+    },
+  ] : [],
+  stock: formInline.specStyle === '1' ? [
+    {
+      validator: (rule, value, callback) => {
+        if (!value || Number(value) <= 0) {
+          callback(new Error('请输入库存数量'))
+        } else {
+          callback()
+        }
+      },
+      trigger: ['blur', 'change']
+    },
+  ] : [],
+  netContent: formInline.specStyle === '1' ? [
+    {
+      validator: (rule, value, callback) => {
+        if (!value || Number(value) <= 0) {
+          callback(new Error('请输入净含量'))
+        } else {
+          callback()
+        }
+      },
+      trigger: ['blur', 'change']
+    },
+  ] : [],
+  netWeight: formInline.specStyle === '2' ? [
+    {
+      validator: (rule, value, callback) => {
+        // 检查是否至少有一个属性
+        if (!value || value.length === 0) {
+          return callback(new Error('至少需要添加一个属性'))
+        }
+
+        // 检查每个属性名称是否已填写
+        const emptyNames = value.filter(item => !item.goodSpecs?.trim())
+        if (emptyNames.length > 0) {
+          return callback(new Error('请填写所有商品规格'))
+        }
+
+        callback()
+      },
+      trigger: 'blur'
+    }
+  ] : [],
+  attribute: [
+    {
+      validator: (rule, value, callback) => {
+        // 检查是否至少有一个属性
+        if (!value || value.length === 0) {
+          return callback(new Error('至少需要添加一个属性'))
+        }
+
+        // 检查每个属性名称是否已填写
+        const emptyNames = value.filter(item => !item.name?.trim())
+        if (emptyNames.length > 0) {
+          return callback(new Error('请填写所有属性名称和内容'))
+        }
+
+        callback()
+      },
+      trigger: 'blur'
+    }
+  ],
+  selectedAddress: [
+    {
+      required: true,
+      validator: (rule, value, callback) => {
+        if (!value || value.length !== 3) {
+          callback(new Error('请选择完整的省市区'));
+        } else {
+          callback();
+        }
+      },
+      trigger: 'blur'
+    }
+  ],
+  detailAddress: [
+    { required: true, message: '请输入详细地址', trigger: 'blur' }
+  ],
+})
+const addSpecs = () => {
+  formInline.netWeight.push({
+    goodSpecs: "",
+    goodPrice: 1.00,
+    goodStock: 1,
+    netContent: 1,
+    unit: "kg"
+  })
+}
+const deleteSpecs = (index) => {
+  formInline.netWeight.splice(index, 1)
+}
+
+const addAttr = () => {
+  formInline.attribute.push({
+    name: '',
+    value: '',
+  })
+}
+const deleteAttr = (index) => {
+  formInline.attribute.splice(index, 1)
+}
+
+// 选中的省市区编码数组（如：['云南省', '昆明市', '呈贡区']）
+const selectedAddress = ref([]);
+const detailAddress = ref('');
+// 级联选择器配置
+const cascaderProps = ref({
+  value: 'name',  // 选项值字段名
+  label: 'name',  // 选项标签字段名
+  children: 'children' // 子选项字段名
+});
+// 省市区数据（示例）
+const addressOptions = ref([
+  {
+    name: '云南省',
+    children: [
+      {
+        name: '昆明市',
+        children: [
+          { name: '五华区' },
+          { name: '盘龙区' },
+          { name: '呈贡区' }
+        ]
+      },
+      {
+        name: '曲靖市',
+        children: [
+          { name: '麒麟区' },
+          { name: '沾益区' }
+        ]
+      }
+    ]
+  },
+  {
+    name: '广东省',
+    children: [
+      {
+        name: '广州市',
+        children: [
+          { name: '天河区' },
+          { name: '越秀区' }
+        ]
+      }
+    ]
+  }
+  // 其他省份数据...
+]);
+
+// 保障服务
+const isSafeguardSelected = computed({
+  get: () => formInline.safeguard.isSelected === 1,
+  set: (val) => {
+    formInline.safeguard.isSelected = val ? 1 : 0
+  }
+})
+// 优惠设置
+const isDiscountSettings = computed({
+  get: () => formInline.discountSettings.isSelected === 1,
+  set: (val) => {
+    formInline.discountSettings.isSelected = val ? 1 : 0
+  }
+})
+// 优惠折扣
+const isDiscountRebate = computed({
+  get: () => formInline.discountRebate.isSelected === 1,
+  set: (val) => {
+    formInline.discountRebate.isSelected = val ? 1 : 0
+  }
+})
+
+// 文件上传前的校验
+// const beforeUpload = (file) => {
+//   const isImage = ['image/jpeg', 'image/png', 'image/gif'].includes(file.type)
+//   const isLt2M = file.size / 1024 / 1024 < 2
+
+//   if (!isImage) {
+//     ElMessage.error('只能上传JPG/PNG/GIF格式的图片!')
+//     return false
+//   }
+//   if (!isLt2M) {
+//     ElMessage.error('图片大小不能超过2MB!')
+//     return false
+//   }
+//   return true
+// }
+// 文件变化时触发验证
+// const handleChange = () => {
+//   console.log('文件变化时触发验证')
+//   nextTick(() => {
+//     console.log(formInline.images)
+//     formRef.value.validateField('images')
+//   })
+// }
+// 移除文件时触发验证
+// const handleRemove = (file) => {
+//   console.log('移除文件时触发验证')
+//   console.log(file)
+//   console.log(formInline.images)
+//   formInline.images = formInline.images.filter(item => item.uid !== file.uid)
+//   formRef.value.validateField('images')
+// }
+// 超出限制提示
+// const handleExceed = () => {
+//   ElMessage.warning('最多只能上传5张图片!')
+// }
+
+const categoryList1 = ref([]);
+const categoryList2 = ref([]);
+const categoryList3 = ref([]);
+
+const getGoodTypeList = async () => {
+  try {
+    let response = await getGoodType();
+    console.log(response);
+    if (response.code == 200) {
+      categoryList1.value = response.data;
+    }
+  } catch (error) {
+    console.log(error);
+  }
+};
+const changeCategory1 = (id) => {
+  console.log(id);
+  formInline.categoryId1 = id;
+  formInline.categoryId2 = "";
+  categoryList2.value = categoryList1.value.filter((item) => item.id == id)[0].children;
+  formInline.categoryId3 = "";
+  formInline.categoryId = "";
+  categoryList3.value = [];
+  if (id == 70) {
+    // 选择产出品70
+    formInline.goodCategorySelectType = 1;
+  } else {
+    // 选择投入品88
+    formInline.goodCategorySelectType = 2;
+  }
+};
+const changeCategory2 = (id) => {
+  console.log(id);
+  formInline.categoryId2 = id;
+  categoryList3.value = categoryList2.value.filter((item) => item.id == id)[0].children;
+  formInline.categoryId3 = "";
+  formInline.categoryId = "";
+};
+const changeCategory3 = (id) => {
+  console.log(id);
+  formInline.categoryId3 = id;
+  formInline.categoryId = id;
+};
+
+const onSubmit = async () => {
+  console.log(formInline);
+  try {
+    await formRef.value.validate()
+    console.log('验证通过!', formRef.value)
+    // 整理提交的参数
+    let params = { ...formInline };
+    if (formInline.specStyle == '1') {
+      params.netWeight = [
+        {
+          goodSpecs: "",
+          goodPrice: formInline.salePrice,
+          goodStock: formInline.stock,
+          netContent: formInline.netContent,
+          unit: formInline.unit
+        }
+      ];
+    } else {
+      params.netWeight = formInline.netWeight
+    }
+    params.areaAddress = params.selectedAddress.join(',');
+
+    params.safeguardSelected = formInline.safeguard.isSelected; //保障服务
+    params.discountSettingsSelected = formInline.discountSettings.isSelected; //优惠设置
+    params.discountRebateSelected = formInline.discountRebate.isSelected; //优惠折扣
+
+    // 调用接口提交
+    onGoodSave(params)
+  } catch (error) {
+    console.log('验证失败', error)
+  }
+};
+
+const onGoodSave = async (params) => {
+  let response = await goodEdit(params);
+  if (response.code === 200) {
+    ElMessage.success("编辑成功！");
+    formRef.value.resetFields();
+  } else {
+    ElMessage.error(response.message);
+  }
+}
+const getArea = async () => {
+  const res = await getRegion();
+  if (res.code === 200) {
+    addressOptions.value = res.data.list;
+  }
+};
+const activeInfoList = ref([]);
+// 获取商品优惠信息配置项
+const getActiveInfo = async () => {
+  const res = await getActiveInfos();
+  if (res.code === 200) {
+    activeInfoList.value = res.data;
+  } else {
+    ElMessage.error(res.message);
+  }
+};
+const getGoodsInfo = async (goodId) => {
+  const res = await getGoodInfo(goodId);
+  if (res.code == 200) {
+    Object.assign(formData.value, res.data);
+    Object.assign(formInline, res.data);
+
+
+    if (res.data.netWeight.length > 1) {
+      formInline.specStyle = '2';
+    } else {
+      formInline.specStyle = '1';
+      console.log(res.data.netWeight[0]);
+      formInline.salePrice = formData.value.netWeight[0]?.goodPrice ?? 1;
+      formInline.stock = formData.value.netWeight[0]?.goodStock ?? 1;
+      formInline.netContent = formData.value.netWeight[0]?.netContent ?? 1;
+      formInline.unit = formData.value.netWeight[0]?.unit ?? "kg";
+    }
+
+    formInline.categoryId1 = formData.value?.categoryId1 ?? "88"
+    formInline.categoryId2 = formData.value?.categoryId2 ?? "";
+    formInline.categoryId3 = formData.value?.categoryId3 ?? "";
+
+    formInline.selectedAddress = formData.value?.areaAddress?.split(",") ?? [];
+
+    formInline.goodUrl = formData.value?.goodUrl?.split(",").slice(0, 5).join(',') ?? "";
+    formInline.detailUrl = formData.value?.detailUrl?.split(",").slice(0, 5).join(',') ?? "";
+    formInline.videoUrl = formData.value?.videoUrl?.split(",").slice(0, 1).join(',') ?? "";
+
+    formInline.safeguard = { isSelected: formData.value?.safeguard?.isSelected ?? 1, options:[...activeInfoList.value.safeguard.options] }
+    formInline.discountSettings = { isSelected: formData.value?.discountSettings?.isSelected ?? 0, options:[...activeInfoList.value.discountSettings.options] }
+    formInline.discountRebate = { isSelected: formData.value?.discountRebate?.isSelected ?? 0, options:[...activeInfoList.value.discountRebate.options] }
+    if (formInline.categoryId1) {
+      categoryList2.value = categoryList1.value.filter((item) => item.id == formInline.categoryId1)[0].children;
+      if (formInline.categoryId2) {
+        let item = categoryList2.value.filter(item => item.id === formInline.categoryId2);
+        categoryList3.value = item[0].children;
+      }
+    }
+
+    // console.log(formInline);
+  } else {
+    ElMessage.error(res.msg);
+  }
+};
+
+watch(() => route.query, (newVal) => {
+  console.log("watch商品id:", newVal.goodId);
+  if (newVal.goodId) {
+    getGoodsInfo(newVal.goodId);
+  }
+})
+onMounted(async () => {
+  const { edit, goodId } = route.query;
+  console.log("onMounted商品id:", goodId);
+  getActiveInfo();
+  await getGoodTypeList();
+  getArea();
+  if (goodId) {
+    getGoodsInfo(goodId);
+  }
+});
+</script>
+<style lang="scss" scoped></style>

src/views/goods/goodsManage/index.vue

@@ -38,7 +38,7 @@
         <div class="table-toolbar">
           <el-button icon="delete" @click="batchDelete" :disabled="btnStatus"
             style="margin-right: 10px">批量删除</el-button>
-          <router-link to="/goods/addGoods">
+          <router-link to="/goods/goodsManage/addGoods">
             <el-button type="primary" icon="plus" @click="onSubmit">新增商品</el-button>
           </router-link>
         </div>
@@ -105,8 +105,11 @@
 import { ref, reactive, computed, onMounted, onBeforeUnmount } from "vue";
 import tableComponent from "@/components/tableComponent.vue";
 import Mock from "mockjs";
-import { getGoodManageInfo, getGoodType } from "@/api/goods/info";
+import { getGoodManageInfo, getGoodType, goodDelete } from "@/api/goods/info";
-import { ca } from "element-plus/es/locales.mjs";
+import { id } from "element-plus/es/locales.mjs";
+import { ElMessage } from 'element-plus'
+const route = useRoute()
+const router = useRouter()
 
 const formInline = reactive({
   goodName: "",
@@ -152,7 +155,7 @@ const tabChange = (Event) => {
   } else if (Event.index == "1") {
     // 请求已上架
     formInline.type = "2";
-  } else if (Event.index == "2"){
+  } else if (Event.index == "2") {
     // 请求已下架
     formInline.type = "3";
   }
@@ -211,6 +214,7 @@ const generateMockData = () => {
   return Mock.mock({
     "list|10": [
       {
+        "id|+1": 10000,
         "goodId|+1": 10000,
         "sort|+1": 1,
         goodUrl: " @image", //商品图片
@@ -220,7 +224,7 @@ const generateMockData = () => {
         salesVolume: "@integer(1000, 20000)", //销量
         pageView: Mock.mock("@id").toString().slice(0, 6), //浏览量
         stock: "@integer(5000, 90000)", //库存
-        isListed: '@pick(["上架", "下架"])', //状态
+        isListed: '@pick([0, 1, 2, 3, 4])', //状态
         ordersNums: "@integer(10, 200)",
       },
     ],
@@ -229,8 +233,11 @@ const generateMockData = () => {
 // 加载数据
 const loadData = async () => {
   tableLoading.value = true;
+  // 测试
   // tableData.value = generateMockData();
   // tableTotal.value = tableData.value.length;
+  // console.log(tableData.value);
+  
   try {
     let response = await getGoodManageInfo(formInline);
     console.log(response);
@@ -277,6 +284,11 @@ const toDownload = () => {
 const handleEdit = (row) => {
   nowClickRow.value = row;
   console.log("要编辑的行:", row);
+  // 跳转路由并携带参数，行数据，和query的值edit
+  router.push({
+    path: "/goods/goodsManage/editGoods",
+    query: { goodId: row.goodId }
+  })
 };
 // 删除操作
 const handleDelete = (row) => {
@@ -284,8 +296,16 @@ const handleDelete = (row) => {
   console.log("要删除的行:", row);
 };
 // 批量删除
-const batchDelete = () => {
+const batchDelete = async() => {
-  console.log("要删除的行:", selectedIds.value);
+  console.log("要删除的行:", selectedIds.value.join(","));
+   ElMessage.success("删除成功");
+  // let res = await goodDelete({id: selectedIds.value});
+  // if (res.code == 200) {
+  //   ElMessage.success("删除成功");
+  //   loadData();
+  // } else {
+  //   ElMessage.error("删除失败");
+  // }
 };
 
 const titleRef = ref(null);