fix: 封装 SpuSelect SpuAndSkuList 为商品活动商品选择商品编辑通用组件

Author: puhui999

src/api/mall/product/spu.ts

@@ -47,17 +47,13 @@ export interface Spu {
   recommendBest?: boolean // 是否精品
   recommendNew?: boolean // 是否新品
   recommendGood?: boolean // 是否优品
-}
-
-// TODO @puhui999: SpuRespVO 合并到 SPU 里？前端少点 VO 类哈；
-export interface SpuRespVO extends Spu {
-  price: number
-  salesCount: number
-  marketPrice: number
-  costPrice: number
-  stock: number
-  createTime: Date
-  status: number
+  price?: number // 商品价格
+  salesCount?: number // 商品销量
+  marketPrice?: number // 市场价
+  costPrice?: number // 成本价
+  stock?: number // 商品库存
+  createTime?: Date // 商品创建时间
+  status?: number // 商品状态
 }
 
 // 获得 Spu 列表

src/api/mall/promotion/seckill/seckillActivity.ts

@@ -1,5 +1,5 @@
 import request from '@/config/axios'
-import { Sku, SpuRespVO } from '@/api/mall/product/spu'
+import { Sku, Spu } from '@/api/mall/product/spu'
 
 export interface SeckillActivityVO {
   id: number
@@ -21,18 +21,20 @@ export interface SeckillActivityVO {
   products: SeckillProductVO[]
 }
 
+// 秒杀活动所需属性
 export interface SeckillProductVO {
   spuId: number
   skuId: number
   seckillPrice: number
   stock: number
 }
 
+// 扩展 Sku 配置
 type SkuExtension = Sku & {
   productConfig: SeckillProductVO
 }
 
-export interface SpuExtension extends SpuRespVO {
+export interface SpuExtension extends Spu {
   skus: SkuExtension[] // 重写类型
 }
 

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

@@ -274,10 +274,7 @@ watch(
 const emit = defineEmits(['update:activeName'])
 const validate = async () => {
   // 校验 sku
-  if (!skuListRef.value.validateSku()) {
-    message.warning('商品相关价格不能低于 0.01 元！！')
-    throw new Error('商品相关价格不能低于 0.01 元！！')
-  }
+  skuListRef.value.validateSku()
   // 校验表单
   if (!productSpuBasicInfoRef) return
   return await unref(productSpuBasicInfoRef).validate((valid) => {

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

@@ -259,16 +259,18 @@ import { UploadImg } from '@/components/UploadFile'
 import type { Property, Sku, Spu } from '@/api/mall/product/spu'
 import { createImageViewer } from '@/components/ImageViewer'
 import { RuleConfig } from '@/views/mall/product/spu/components/index'
+import { Properties } from './index'
 
 defineOptions({ name: 'SkuList' })
+const message = useMessage() // 消息弹窗
 
 const props = defineProps({
   propFormData: {
     type: Object as PropType<Spu>,
     default: () => {}
   },
   propertyList: {
-    type: Array,
+    type: Array as PropType<Properties[]>,
     default: () => []
   },
   ruleConfig: {
@@ -323,26 +325,47 @@ const tableHeaders = ref<{ prop: string; label: string }[]>([]) // 多属性表
 /**
  * 保存时，每个商品规格的表单要校验下。例如说，销售金额最低是 0.01 这种。
  */
-const validateSku = (): boolean => {
+const validateSku = () => {
   const checks = ['price', 'marketPrice', 'costPrice']
+  let warningInfo = '请检查商品各行相关属性配置，'
   let validate = true // 默认通过
-  for (const sku of formData.value!.skus) {
+  for (const sku of formData.value!.skus!) {
     // 作为活动组件的校验
     if (props.isActivityComponent) {
       for (const rule of props.ruleConfig) {
-        if (sku[rule.name] < rule.geValue) {
+        const arg = getValue(sku, rule.name)
+        if (!rule.rule(arg)) {
           validate = false // 只要有一个不通过则直接不通过
+          warningInfo += rule.message
           break
         }
       }
     } else {
       if (checks.some((check) => sku[check] < 0.01)) {
         validate = false // 只要有一个不通过则直接不通过
+        warningInfo = '商品相关价格不能低于 0.01 元！！'
         break
       }
     }
+    // 只要有一个不通过则结束后续的校验
+    if (!validate) {
+      message.warning(warningInfo)
+      throw new Error(warningInfo)
+    }
+  }
+}
+const getValue = (obj, arg) => {
+  const keys = arg.split('.')
+  let value = obj
+  for (const key of keys) {
+    if (value && typeof value === 'object' && key in value) {
+      value = value[key]
+    } else {
+      value = undefined
+      break
+    }
   }
-  return validate
+  return value
 }
 
 const emit = defineEmits<{
@@ -417,13 +440,13 @@ const generateTableData = (propertyList: any[]) => {
  * 生成 skus 前置校验
  */
 const validateData = (propertyList: any[]) => {
-  const skuPropertyIds = []
+  const skuPropertyIds: number[] = []
   formData.value!.skus!.forEach((sku) =>
     sku.properties
       ?.map((property) => property.propertyId)
-      .forEach((propertyId) => {
-        if (skuPropertyIds.indexOf(propertyId) === -1) {
-          skuPropertyIds.push(propertyId)
+      ?.forEach((propertyId) => {
+        if (skuPropertyIds.indexOf(propertyId!) === -1) {
+          skuPropertyIds.push(propertyId!)
         }
       })
   )
@@ -457,7 +480,7 @@ const build = (propertyValuesList: Property[][]) => {
 /** 监听属性列表，生成相关参数和表头 */
 watch(
   () => props.propertyList,
-  (propertyList) => {
+  (propertyList: Properties[]) => {
     // 如果不是多规格则结束
     if (!formData.value!.specType) {
       return
@@ -497,7 +520,7 @@ watch(
       return
     }
     // 添加新属性没有属性值也不做处理
-    if (propertyList.some((item) => item.values.length === 0)) {
+    if (propertyList.some((item) => item.values!.length === 0)) {
       return
     }
     // 生成 table 数据，即 sku 列表

src/views/mall/product/spu/components/index.ts

@@ -14,8 +14,19 @@ interface Properties {
 }
 
 interface RuleConfig {
-  name: string // 需要校验的字段
-  geValue: number // TODO 暂定大于一个数字
+  // 需要校验的字段
+  // 例：name: 'name' 则表示校验 sku.name 的值
+  // 例：name: 'productConfig.stock' 则表示校验 sku.productConfig.name 的值,此处 productConfig 表示我在 Sku 上扩展的属性
+  name: string
+  // 校验规格为一个毁掉函数，其中 arg 为需要校验的字段的值。
+  // 例：需要校验价格必须大于0.01
+  // {
+  //  name:'price',
+  //  rule:(arg) => arg > 0.01
+  // }
+  rule: (arg: any) => boolean
+  // 校验不通过时的消息提示
+  message: string
 }
 
 /**

src/views/mall/promotion/seckill/activity/components/SpuAndSkuList.vue renamed to src/views/mall/promotion/components/SpuAndSkuList.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-table :data="spuData">
+  <el-table :data="spuData" :default-expand-all="true">
     <el-table-column type="expand" width="30">
       <template #default="{ row }">
         <SkuList
@@ -46,90 +46,39 @@
     <el-table-column align="center" label="库存" min-width="90" prop="stock" />
   </el-table>
 </template>
-<script lang="ts" setup>
+<script generic="T extends Spu" lang="ts" setup>
 // TODO 后续计划重新封装作为活动商品配置通用组件；可以等其他活动做到的时候，在统一处理 SPU 选择组件哈
 import { formatToFraction } from '@/utils'
 import { createImageViewer } from '@/components/ImageViewer'
-import * as ProductSpuApi from '@/api/mall/product/spu'
-import { SpuRespVO } from '@/api/mall/product/spu'
-import {
-  getPropertyList,
-  Properties,
-  RuleConfig,
-  SkuList
-} from '@/views/mall/product/spu/components'
-import { SeckillProductVO, SpuExtension } from '@/api/mall/promotion/seckill/seckillActivity'
+import { Spu } from '@/api/mall/product/spu'
+import { RuleConfig, SkuList } from '@/views/mall/product/spu/components'
+import { SeckillProductVO } from '@/api/mall/promotion/seckill/seckillActivity'
+import { SpuProperty } from '@/views/mall/promotion/components/index'
 
 defineOptions({ name: 'PromotionSpuAndSkuList' })
 
-const message = useMessage() // 消息弹窗
+// TODO @puhui999：是不是改成传递一个 spu 就好啦？ 因为活动商品可以多选所以展示编辑的时候需要展示多个
+const props = defineProps<{
+  spuList: T[]
+  ruleConfig: RuleConfig[]
+  spuPropertyListP: SpuProperty<T>[]
+}>()
 
-// TODO @puhui999：是不是改成传递一个 spu 就好啦？
-const props = defineProps({
-  spuList: {
-    type: Array,
-    default: () => []
-  }
-})
-const spuData = ref<SpuRespVO[]>([]) // spu 详情数据列表
+const spuData = ref<Spu[]>([]) // spu 详情数据列表
 const skuListRef = ref() // 商品属性列表Ref
-interface spuProperty {
-  spuId: number
-  spuDetail: SpuExtension
-  propertyList: Properties[]
-} // TODO @puhui999：类名首字母大写哈
 
-const spuPropertyList = ref<spuProperty[]>([]) // spuId 对应的 sku 的属性列表
-/**
- * 获取 SPU 详情
- * @param spuIds
- */
-const getSpuDetails = async (spuIds: number[]) => {
-  const spuProperties: spuProperty[] = []
-  // TODO puhui999: 考虑后端添加通过 spuIds 批量获取
-  for (const spuId of spuIds) {
-    // 获取 SPU 详情
-    const res = (await ProductSpuApi.getSpu(spuId)) as SpuExtension
-    if (!res) {
-      continue
-    }
-    // 初始化每个 sku 秒杀配置
-    res.skus?.forEach((sku) => {
-      const config: SeckillProductVO = {
-        spuId,
-        skuId: sku.id!,
-        stock: 0,
-        seckillPrice: 0
-      }
-      sku.productConfig = config
-    })
-    spuProperties.push({ spuId, spuDetail: res, propertyList: getPropertyList(res) })
-  }
-  spuPropertyList.value = spuProperties
-}
-const ruleConfig: RuleConfig[] = [
-  {
-    name: 'stock',
-    geValue: 10
-  },
-  {
-    name: 'seckillPrice',
-    geValue: 0.01
-  }
-]
+const spuPropertyList = ref<SpuProperty<T>[]>([]) // spuId 对应的 sku 的属性列表
+
 /**
  * 获取所有 sku 秒杀配置
+ * @param extendedAttribute 在 sku 上扩展的属性，例：秒杀活动 sku 扩展属性 productConfig 请参考 seckillActivity.ts
  */
-const getSkuConfigs = (): SeckillProductVO[] => {
-  if (!skuListRef.value.validateSku()) {
-    // TODO 作为通用组件是需要进一步完善
-    message.warning('请检查商品相关属性配置！！')
-    throw new Error('请检查商品相关属性配置！！')
-  }
+const getSkuConfigs: <V>(extendedAttribute: string) => V[] = (extendedAttribute: string) => {
+  skuListRef.value.validateSku()
   const seckillProducts: SeckillProductVO[] = []
   spuPropertyList.value.forEach((item) => {
     item.spuDetail.skus.forEach((sku) => {
-      seckillProducts.push(sku.productConfig)
+      seckillProducts.push(sku[extendedAttribute])
     })
   })
   return seckillProducts
@@ -152,8 +101,21 @@ watch(
   () => props.spuList,
   (data) => {
     if (!data) return
-    spuData.value = data as SpuRespVO[]
-    getSpuDetails(spuData.value.map((spu) => spu.id!))
+    spuData.value = data as Spu[]
+  },
+  {
+    deep: true,
+    immediate: true
+  }
+)
+/**
+ * 将传进来的值赋值给 skuList
+ */
+watch(
+  () => props.spuPropertyListP,
+  (data) => {
+    if (!data) return
+    spuPropertyList.value = data as SpuProperty<T>[]
   },
   {
     deep: true,