fix:解决商品上一版遗留的各种小bug关键部分已添加fix注释。完成的TODO也已添加fix标记

Author: puhui999

src/api/mall/product/brand.ts

@@ -54,3 +54,8 @@ export const getBrand = (id: number) => {
 export const getBrandParam = (params: PageParam) => {
   return request.get({ url: '/product/brand/page', params })
 }
+
+// 获得商品品牌精简信息列表
+export const getSimpleBrandList = () => {
+  return request.get({ url: '/product/brand/list-all-simple' })
+}

src/api/mall/product/spu.ts

@@ -34,6 +34,7 @@ export interface SpuType {
   sliderPicUrls?: string[] // 商品轮播图
   introduction?: string // 商品简介
   deliveryTemplateId?: number | null // 运费模版
+  brandId?: number | null // 商品品牌编号
   specType?: boolean // 商品规格
   subCommissionType?: boolean // 分销类型
   skus: SkuType[] // sku数组

src/utils/index.ts

@@ -173,3 +173,24 @@ export const copyValueToTarget = (target, source) => {
   // 更新目标对象值
   Object.assign(target, newObj)
 }
+
+/**
+ * 将一个整数转换为分数保留两位小数
+ * @param num
+ */
+export const formatToFraction = (num: number | string | undefined): number => {
+  if (typeof num === 'undefined') return 0
+  const parsedNumber = typeof num === 'string' ? parseFloat(num) : num
+  return parseFloat((parsedNumber / 100).toFixed(2))
+}
+
+/**
+ * 将一个分数转换为整数
+ * @param num
+ */
+export const convertToInteger = (num: number | string | undefined): number => {
+  if (typeof num === 'undefined') return 0
+  const parsedNumber = typeof num === 'string' ? parseFloat(num) : num
+  // TODO 分转元后还有小数则四舍五入
+  return Math.round(parsedNumber * 100)
+}

src/views/mall/product/spu/addForm.vue

@@ -38,6 +38,7 @@ import { BasicInfoForm, DescriptionForm, OtherSettingsForm } from './components'
 // 业务api
 import * as ProductSpuApi from '@/api/mall/product/spu'
 import * as PropertyApi from '@/api/mall/product/property'
+import { convertToInteger, formatToFraction } from '@/utils'
 
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
@@ -60,6 +61,7 @@ const formData = ref<ProductSpuApi.SpuType>({
   sliderPicUrls: [], // 商品轮播图
   introduction: '', // 商品简介
   deliveryTemplateId: 1, // 运费模版
+  brandId: null, // 商品品牌
   specType: false, // 商品规格
   subCommissionType: false, // 分销类型
   skus: [
@@ -94,14 +96,34 @@ const getDetail = async () => {
     formLoading.value = true
     try {
       const res = (await ProductSpuApi.getSpu(id)) as ProductSpuApi.SpuType
+      res.skus.forEach((item) => {
+        // 回显价格分转元
+        item.price = formatToFraction(item.price)
+        item.marketPrice = formatToFraction(item.marketPrice)
+        item.costPrice = formatToFraction(item.costPrice)
+        item.subCommissionFirstPrice = formatToFraction(item.subCommissionFirstPrice)
+        item.subCommissionSecondPrice = formatToFraction(item.subCommissionSecondPrice)
+      })
       formData.value = res
-      // 直接取第一个值就能得到所有属性的id
-      // TODO @puhui999：可以直接拿 propertyName 拼接处规格 id + 属性，可以看下商品 uniapp 详情的做法
-      const propertyIds = res.skus[0]?.properties.map((item) => item.propertyId)
-      const PropertyS = await PropertyApi.getPropertyListAndValue({ propertyIds })
-      await nextTick()
-      // 回显商品属性
-      basicInfoRef.value.addAttribute(PropertyS)
+      // 只有是多规格才处理
+      if (res.specType) {
+        // TODO @puhui999：可以直接拿 propertyName 拼接处规格 id + 属性，可以看下商品 uniapp 详情的做法
+        // fix: 考虑到 sku 数量和通过属性算出来的sku不一致的情况
+        const propertyIds = []
+        res.skus.forEach((sku) =>
+          sku.properties
+            ?.map((property) => property.propertyId)
+            .forEach((propertyId) => {
+              if (propertyIds.indexOf(propertyId) === -1) {
+                propertyIds.push(propertyId)
+              }
+            })
+        )
+        const properties = await PropertyApi.getPropertyListAndValue({ propertyIds })
+        await nextTick()
+        // 回显商品属性
+        basicInfoRef.value.addAttribute(properties)
+      }
     } finally {
       formLoading.value = false
     }
@@ -119,10 +141,26 @@ const submitForm = async () => {
     await unref(descriptionRef)?.validate()
     await unref(otherSettingsRef)?.validate()
     const deepCopyFormData = cloneDeep(unref(formData.value)) // 深拷贝一份 fix:这样最终 server 端不满足，不需要恢复，
-    // 处理掉一些无关数据
+    // TODO 兜底处理 sku 空数据详见 SkuList TODO
+    formData.value.skus.forEach((sku) => {
+      // 因为是空数据这里判断一下商品条码是否为空就行
+      if (sku.barCode === '') {
+        const index = deepCopyFormData.skus.findIndex(
+          (item) => JSON.stringify(item.properties) === JSON.stringify(sku.properties)
+        )
+        // 删除这条 sku
+        deepCopyFormData.skus.splice(index, 1)
+      }
+    })
     deepCopyFormData.skus.forEach((item) => {
       // 给sku name赋值
       item.name = deepCopyFormData.name
+      // sku相关价格元转分
+      item.price = convertToInteger(item.price)
+      item.marketPrice = convertToInteger(item.marketPrice)
+      item.costPrice = convertToInteger(item.costPrice)
+      item.subCommissionFirstPrice = convertToInteger(item.subCommissionFirstPrice)
+      item.subCommissionSecondPrice = convertToInteger(item.subCommissionSecondPrice)
     })
     // 处理轮播图列表
     const newSliderPicUrls = []
@@ -148,34 +186,6 @@ const submitForm = async () => {
   }
 }
 
-/**
- * 重置表单
- * fix:先注释保留，如果后期没有使用到则移除
- */
-// const resetForm = async () => {
-//   formData.value = {
-//     name: '', // 商品名称
-//     categoryId: 0, // 商品分类
-//     keyword: '', // 关键字
-//     unit: '', // 单位
-//     picUrl: '', // 商品封面图
-//     sliderPicUrls: [], // 商品轮播图
-//     introduction: '', // 商品简介
-//     deliveryTemplateId: 0, // 运费模版
-//     selectRule: '',
-//     specType: false, // 商品规格
-//     subCommissionType: false, // 分销类型
-//     description: '', // 商品详情
-//     sort: 1, // 商品排序
-//     giveIntegral: 1, // 赠送积分
-//     virtualSalesCount: 1, // 虚拟销量
-//     recommendHot: false, // 是否热卖
-//     recommendBenefit: false, // 是否优惠
-//     recommendBest: false, // 是否精品
-//     recommendNew: false, // 是否新品
-//     recommendGood: false // 是否优品
-//   }
-// }
 /** 关闭按钮 */
 const close = () => {
   delView(unref(currentRoute))

src/views/mall/product/spu/components/BasicInfoForm.vue

@@ -59,13 +59,23 @@
       </el-col>
       <el-col :span="12">
         <el-form-item label="运费模板" prop="deliveryTemplateId">
-          <el-select v-model="formData.deliveryTemplateId" class="w-1/1" placeholder="请选择">
+          <el-select v-model="formData.deliveryTemplateId" placeholder="请选择">
             <el-option v-for="item in []" :key="item.id" :label="item.name" :value="item.id" />
           </el-select>
+          <el-button class="ml-20px">运费模板</el-button>
         </el-form-item>
       </el-col>
       <el-col :span="12">
-        <el-button class="ml-20px">运费模板</el-button>
+        <el-form-item label="品牌" prop="brandId">
+          <el-select v-model="formData.brandId" placeholder="请选择">
+            <el-option
+              v-for="item in brandList"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            />
+          </el-select>
+        </el-form-item>
       </el-col>
       <el-col :span="12">
         <el-form-item label="商品规格" props="specType">
@@ -108,14 +118,15 @@
 </template>
 <script lang="ts" name="ProductSpuBasicInfoForm" setup>
 import { PropType } from 'vue'
+import { copyValueToTarget } from '@/utils'
+import { propTypes } from '@/utils/propTypes'
 import { defaultProps, handleTree } from '@/utils/tree'
 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
 import type { SpuType } from '@/api/mall/product/spu'
 import { UploadImg, UploadImgs } from '@/components/UploadFile'
 import { ProductAttributes, ProductAttributesAddForm, SkuList } from './index'
 import * as ProductCategoryApi from '@/api/mall/product/category'
-import { propTypes } from '@/utils/propTypes'
-import { copyValueToTarget } from '@/utils'
+import { getSimpleBrandList } from '@/api/mall/product/brand'
 
 const message = useMessage() // 消息弹窗
 
@@ -135,15 +146,20 @@ const propertyList = ref([]) // 商品属性列表
 const addAttribute = (property: any) => {
   Array.isArray(property) ? (propertyList.value = property) : propertyList.value.push(property)
 }
+/** 调用 SkuList generateTableData 方法*/
+// const generateSkus(propertyList){
+//   skuList.value.generateTableData()
+// }
 const formData = reactive<SpuType>({
   name: '', // 商品名称
-  categoryId: undefined, // 商品分类
+  categoryId: null, // 商品分类
   keyword: '', // 关键字
   unit: '', // 单位
   picUrl: '', // 商品封面图
   sliderPicUrls: [], // 商品轮播图
   introduction: '', // 商品简介
   deliveryTemplateId: 1, // 运费模版
+  brandId: null, // 商品品牌
   specType: false, // 商品规格
   subCommissionType: false, // 分销类型
   skus: []
@@ -157,6 +173,7 @@ const rules = reactive({
   picUrl: [required],
   sliderPicUrls: [required],
   // deliveryTemplateId: [required],
+  brandId: [required],
   specType: [required],
   subCommissionType: [required]
 })
@@ -232,10 +249,13 @@ const onChangeSpec = () => {
   ]
 }
 
-const categoryList = ref() // 分类树
+const categoryList = ref([]) // 分类树
+const brandList = ref([]) // 精简商品品牌列表
 onMounted(async () => {
   // 获得分类树
   const data = await ProductCategoryApi.getCategoryList({})
   categoryList.value = handleTree(data, 'id', 'parentId')
+  // 获取商品品牌列表
+  brandList.value = await getSimpleBrandList()
 })
 </script>