feat: 商品编辑功能

2025-02-24 18:03:17 +08:00 · 2025-02-24 18:03:17 +08:00 · 6da80d9b23
parent 907b763fca
commit 6da80d9b23
4 changed files with 103 additions and 70 deletions
--- a/src/api/product/index.ts
+++ b/src/api/product/index.ts
@ -49,7 +49,13 @@ const AuthAPI = {
      data,
    });
  },
-
+  // 商品详情
+  getDetail(id: number) {
+    return request<any, Responseres>({
+      url: `${baseURL}/${id}`,
+      method: "get",
+    });
+  },
 };


--- a/src/components/Upload/MultiImageUpload.vue
+++ b/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);
--- a/src/views/product/index.vue
+++ b/src/views/product/index.vue
@ -105,16 +105,7 @@ async function handleAddClick() {
 }
 // 编辑
 async function handleEditClick(row: IObject) {
-  console.log('handleEditClick')
-  // 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();
-
+  router.push({ name: 'addgoods', query: { goods_id: row.id } });
 }
 const myDialogRef = ref(null)
 // 其他工具栏
--- a/src/views/product/indexconfig/addgoods.vue
+++ b/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="1">可选套餐</el-radio-button>
+              <el-radio-button :label="0">固定套餐</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="item.name" v-if="datas.selectSpeclist.length" v-for="item in datas.selectSpeclist"
-        :key="item.name">
-        <el-checkbox-group v-model="item.selectSpecResult" @change="selectSpecResultChange">
-          <el-checkbox :value="item.name" v-for="(ele, index) in item.children" :key="index">{{ ele.name
-          }}</el-checkbox>
+      <el-form-item :label="ele.name" v-if="datas.selectSpeclist.length" v-for="ele in datas.selectSpeclist"
+        :key="ele.name">
+        <el-checkbox-group v-model="ele.selectSpecResult" @change="selectSpecResultChange">
+          <el-checkbox :value="element.name" :label="element.name" v-for="(element, index) in ele.children"
+            :key="index"></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,9 +624,21 @@ function createSkuBody() {
      });
    }
  }
-  console.log(newarr, '提交')
+  if (ruleForm.skuList.length) {
+    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) {
  // single-单规格商品 sku-多规格商品 package-套餐商品 weight-称重商品 coupon-团购券
@ -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) => {
-    let res = <any>[];
-    col.forEach((c: any) => {
-      set.forEach((s: any) => {
-        let arr: any = Array.isArray(c) ? c : [c]
-        let t: any[] = [].concat(arr);
+  return [].reduce.call(arr, (col, set) => {
+    let res = [];
+    col.forEach((c) => {
+      set.forEach((s) => {
+        let t = [].concat(Array.isArray(c) ? c : [c]);
        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,12 +717,19 @@ const submitForm = async (formEl: FormInstance | undefined) => {
        })
        ruleForm.selectSpecInfo = obj
      } else if (ruleForm.type == 'package') {
-        console.log(ruleForm, '套餐')
+        // console.log(ruleForm, '套餐')
      }
+      if (ruleForm.id) {
+        let res = await UserAPI3.update(ruleForm)
+        if (res.code == 200) {
+          ElMessage.success("修改成功");
+        }
+      } else {
        let res = await UserAPI3.addunit(ruleForm)
        if (res.code == 200) {
          ElMessage.success("添加成功");
-        router.push({ name: 'productIndex' });
+        }
+      }
      setTimeout(() => {
        closeSelectedTag({
          "name": "addgoods",
@ -707,8 +740,8 @@ const submitForm = async (formEl: FormInstance | undefined) => {
          "keepAlive": true,
          "query": {}
        })
+        router.push({ name: 'productIndex' });
      }, 500);
-      }
    } else {
      ElMessage.error("请填写完整信息");
      console.log('error submit!', fields)