feat: 商品编辑功能

src/api/product/index.ts

@@ -49,7 +49,13 @@ const AuthAPI = {
       data,
     });
   },
-
+  // 商品详情
+  getDetail(id: number) {
+    return request<any, Responseres>({
+      url: `${baseURL}/${id}`,
+      method: "get",
+    });
+  },
 };
 
 

src/components/Upload/MultiImageUpload.vue

@@ -198,6 +198,9 @@ const handlePreviewImage = (imageUrl: string) => {
 const handlePreviewClose = () => {
   previewVisible.value = false;
 };
+watch(modelValue, (newValue) => {
+  fileList.value = newValue.map((url) => ({ url }) as UploadUserFile);
+});
 
 onMounted(() => {
   fileList.value = modelValue.value.map((url) => ({ url }) as UploadUserFile);

src/views/product/index.vue

@@ -105,16 +105,7 @@ async function handleAddClick() {
 }
 // 编辑
 async function handleEditClick(row: IObject) {
-  console.log('handleEditClick')
+  router.push({ name: 'addgoods', query: { goods_id: row.id } });
-  // editModalRef.value?.handleDisabled(false);
-  // 加载部门下拉数据源
-  // editModalConfig.formItems[2]!.attrs!.data = await UserAPI.getPage({ name: "" });
-  // editModalConfig.formItems[2]!.attrs!.data = await DeptAPI.getOptions();
-  // 根据id获取数据进行填充
-  // const data = await UserAPI.getunitinfo(row.id);
-  // editModalRef.value?.setFormData(data);
-  // editModalRef.value?.setModalVisible();
-
 }
 const myDialogRef = ref(null)
 // 其他工具栏

src/views/product/indexconfig/addgoods.vue

@@ -56,24 +56,12 @@
           <!-- <el-radio label="coupon">团购券</el-radio> -->
         </el-radio-group>
       </el-form-item>
-      <!-- <el-form-item label="规格类型">
-        <el-radio-group v-model="ruleForm.specId">
-          <el-radio label="normal">单规格</el-radio>
-          <el-radio label="sku">多规格</el-radio>
-        </el-radio-group>
-      </el-form-item> -->
-      <!-- <el-form-item label="套餐类型">
-        <el-radio-group v-model="ruleForm.groupType">
-          <el-radio label="0">固定套餐</el-radio>
-          <el-radio label="1">可选套餐</el-radio>
-        </el-radio-group>
-      </el-form-item> -->
       <el-form-item label="套餐商品" v-if="ruleForm.type == 'package'">
         <div style="display: block;width: 100%;">
           <div class="head-container">
             <el-radio-group v-model="ruleForm.groupType" @change="typeChange">
-              <el-radio-button label="0">固定套餐</el-radio-button>
+              <el-radio-button :label="0">固定套餐</el-radio-button>
-              <el-radio-button label="1">可选套餐</el-radio-button>
+              <el-radio-button :label="1">可选套餐</el-radio-button>
             </el-radio-group>
           </div>
           <div v-if="ruleForm.groupType == '0'">
@@ -146,12 +134,11 @@
             :key="item.id"></el-option>
         </el-select>
       </el-form-item>
-
+      <el-form-item :label="ele.name" v-if="datas.selectSpeclist.length" v-for="ele in datas.selectSpeclist"
-      <el-form-item :label="item.name" v-if="datas.selectSpeclist.length" v-for="item in datas.selectSpeclist"
+        :key="ele.name">
-        :key="item.name">
+        <el-checkbox-group v-model="ele.selectSpecResult" @change="selectSpecResultChange">
-        <el-checkbox-group v-model="item.selectSpecResult" @change="selectSpecResultChange">
+          <el-checkbox :value="element.name" :label="element.name" v-for="(element, index) in ele.children"
-          <el-checkbox :value="item.name" v-for="(ele, index) in item.children" :key="index">{{ ele.name
+            :key="index"></el-checkbox>
-          }}</el-checkbox>
         </el-checkbox-group>
       </el-form-item>
       <!-- 规格属性 -->
@@ -159,10 +146,8 @@
       <SpecificationAttribute v-if="ruleForm.type != 'sku'" :info="ruleForm" :list="list"
         ref="specificationAttributeRef">
       </SpecificationAttribute>
-
       <SpecificationAttribute v-if="ruleForm.type == 'sku' && list.length" :specTableHeaders="datas.specTableHeaders"
         :info="ruleForm" :list="list" ref="specificationAttributeRef"></SpecificationAttribute>
-
       <el-form-item label="重量">
         <el-col :span="12">
           <div style="display: block;">
@@ -203,16 +188,16 @@
         </el-col>
       </el-form-item>
       <el-form-item label="上架">
-        <el-switch v-model="ruleForm.isSale" active-value="1" inactive-value="0" />
+        <el-switch v-model="ruleForm.isSale" :active-value="1" :inactive-value="0" />
       </el-form-item>
       <el-form-item label="库存开关">
         <div style="display: block;">
-          <el-switch v-model="ruleForm.isStock" active-value="1" inactive-value="0" />
+          <el-switch v-model="ruleForm.isStock" :active-value="1" :inactive-value="0" />
           <div style="color: #999;">注：关闭则不计算出入库数据</div>
         </div>
       </el-form-item>
       <el-form-item label="设为推荐" prop="delivery">
-        <el-switch v-model="ruleForm.isHot" active-value="1" inactive-value="0" />
+        <el-switch v-model="ruleForm.isHot" :active-value="1" :inactive-value="0" />
       </el-form-item>
       <el-form-item label="库存数量">
         <el-input-number v-model="ruleForm.stockNumber" :min="0" />
@@ -337,7 +322,7 @@ interface RuleForm {
   images: string[],
   type: string,
   specId: any,
-  groupType: string,
+  groupType: any,
   skuList: string[],
   weight: any,
   isAllowTempModifyPrice: any,
@@ -437,7 +422,40 @@ const rules = reactive<FormRules<RuleForm>>({
 })
 onMounted(() => {
   getList()
+  if (router.currentRoute.value.query.goods_id) {
+    tbProductGetDetail(router.currentRoute.value.query.goods_id);
+  }
 })
+watch(() => router.currentRoute.value.query.goods_id, (val) => {
+  tbProductGetDetail(val);
+})
+async function tbProductGetDetail(id: any) {
+  // 获取商品详情
+  const res = await UserAPI3.getDetail(id);
+  changeTypeEnum(res.type)
+  for (const key in res) {
+    if (key !== 'images' && key !== 'days') {
+      (ruleForm as any)[key] = res[key];
+    }
+  }
+  ruleForm.images = res.images.map((item: any, index: number) => item);
+  ruleForm.days = res.days.split(',');
+  ruleForm.useTime = [res.startTime, res.endTime];
+  ruleForm.proGroupVo = res.groupSnap
+  if (res.type === "sku") {
+    await tbProductSpecGet()
+    selectSpecHandle(ruleForm.specId)
+    datas.selectSpeclist.forEach((item: any) => {
+      item.children.forEach((ele: any) => {
+        item.selectSpecResult.push(ele.name)
+      })
+    })
+    selectSpecResultChange()
+
+  } else {
+    list.value = ruleForm.skuList
+  }
+}
 // 选择套餐商品sku
 function selectSkuHandle(item: any, index: number) {
   // 把所有的设置为false
@@ -490,7 +508,6 @@ function addgoods(index: number = -1) {
 }
 // 分组选择商品
 function selectShopRes(res: Array<any>) {
-  console.log(res, '选择商品')
   let newres = res.map(item => {
     item.proId = item.id
     item.proName = item.name
@@ -510,7 +527,6 @@ function selectShopRes(res: Array<any>) {
     ruleForm.proGroupVo = [{ ...obj }]
   } else {
     if (datas.addGroupIndex != -1) {
-      console.log(newres, 'newres')
       ruleForm.proGroupVo[datas.addGroupIndex].count = newres.length
       ruleForm.proGroupVo[datas.addGroupIndex].goods = newres
     } else {
@@ -535,10 +551,9 @@ function selectSpecResultChange() {
   createSkuHeader();
   createSkuBody();
 }
-// 生成多规格表头
+
 function createSkuHeader() {
   const headers = [];
-
   for (let item of datas.selectSpeclist) {
     if (item.selectSpecResult.length) {
       headers.push({
@@ -549,6 +564,7 @@ function createSkuHeader() {
   }
   datas.specTableHeaders = headers;
 }
+
 // 可选套餐弹窗
 function addtaocan() {
   datas.addGroupIndex = -1;
@@ -608,8 +624,20 @@ function createSkuBody() {
       });
     }
   }
-  console.log(newarr, '提交')
+  if (ruleForm.skuList.length) {
-  list.value = newarr;
+    newarr.forEach((val: any, index: number) => {
+      val['originPrice'] = ruleForm.skuList[index]['originPrice']
+      val['costPrice'] = ruleForm.skuList[index]['costPrice']
+      val['salePrice'] = ruleForm.skuList[index]['salePrice']
+      val['memberPrice'] = ruleForm.skuList[index]['memberPrice']
+      val['suitNum'] = ruleForm.skuList[index]['suitNum']
+    });
+    list.value = newarr
+  } else {
+
+
+    list.value = newarr;
+  }
 }
 // 切换类型
 function changeTypeEnum(item: string) {
@@ -624,20 +652,19 @@ function changeTypeEnum(item: string) {
   }
 }
 // 笛卡尔积算法
-function cartesian(arr: any[]) {
+function cartesian(arr) {
   if (arr.length < 2) return arr[0] || [];
-  return [].reduce.call(arr, (col: any, set: any, index) => {
+  return [].reduce.call(arr, (col, set) => {
-    let res = <any>[];
+    let res = [];
-    col.forEach((c: any) => {
+    col.forEach((c) => {
-      set.forEach((s: any) => {
+      set.forEach((s) => {
-        let arr: any = Array.isArray(c) ? c : [c]
+        let t = [].concat(Array.isArray(c) ? c : [c]);
-        let t: any[] = [].concat(arr);
         t.push(s);
         res.push(t);
       });
     });
     return res;
-  }, []);
+  });
 }
 // 套餐类型切换
 function typeChange() {
@@ -666,18 +693,17 @@ function selectSpecHandle(e: any) {
     selectSpec[item].selectSpecResult = [];
   }
   datas.selectSpeclist = selectSpec;
-  // this.form.skuList = [ ];
 }
 const specificationAttributeRef = ref(null)
 const submitForm = async (formEl: FormInstance | undefined) => {
-
   if (!formEl) return
   await formEl.validate(async (valid, fields) => {
     if (valid) {
+      ruleForm.days = ruleForm.days.join(',')
       // 第一张图片作为封面图
       ruleForm.coverImg = ruleForm.images[0]
       // 规格id修改
-      ruleForm.specId = specIdFunction(ruleForm.type)
+      // ruleForm.specId = specIdFunction(ruleForm.type)
       // 修改时间
       ruleForm.startTime = ruleForm.useTime[0]
       ruleForm.endTime = ruleForm.useTime[1]
@@ -691,24 +717,31 @@ const submitForm = async (formEl: FormInstance | undefined) => {
         })
         ruleForm.selectSpecInfo = obj
       } else if (ruleForm.type == 'package') {
-        console.log(ruleForm, '套餐')
+        // console.log(ruleForm, '套餐')
       }
-      let res = await UserAPI3.addunit(ruleForm)
+      if (ruleForm.id) {
-      if (res.code == 200) {
+        let res = await UserAPI3.update(ruleForm)
-        ElMessage.success("添加成功");
+        if (res.code == 200) {
+          ElMessage.success("修改成功");
+        }
+      } else {
+        let res = await UserAPI3.addunit(ruleForm)
+        if (res.code == 200) {
+          ElMessage.success("添加成功");
+        }
+      }
+      setTimeout(() => {
+        closeSelectedTag({
+          "name": "addgoods",
+          "title": "新增商品",
+          "path": "/product/addgoods",
+          "fullPath": "/product/addgoods",
+          "affix": false,
+          "keepAlive": true,
+          "query": {}
+        })
         router.push({ name: 'productIndex' });
-        setTimeout(() => {
+      }, 500);
-          closeSelectedTag({
-            "name": "addgoods",
-            "title": "新增商品",
-            "path": "/product/addgoods",
-            "fullPath": "/product/addgoods",
-            "affix": false,
-            "keepAlive": true,
-            "query": {}
-          })
-        }, 500);
-      }
     } else {
       ElMessage.error("请填写完整信息");
       console.log('error submit!', fields)