fix：完善秒杀活动管理①

src/views/mall/promotion/seckill/activity/SeckillActivityForm.vue

@@ -9,36 +9,8 @@
     >
       <!-- 先选择 -->
       <template #spuId>
-        <el-button @click="spuAndSkuSelectForm.open('秒杀商品选择')">选择商品</el-button>
-        <el-table :data="spuList">
-          <el-table-column key="id" align="center" label="商品编号" prop="id" />
-          <el-table-column label="商品图" min-width="80">
-            <template #default="{ row }">
-              <el-image :src="row.picUrl" class="w-30px h-30px" @click="imagePreview(row.picUrl)" />
-            </template>
-          </el-table-column>
-          <el-table-column
-            :show-overflow-tooltip="true"
-            label="商品名称"
-            min-width="300"
-            prop="name"
-          />
-          <el-table-column align="center" label="商品售价" min-width="90" prop="price">
-            <template #default="{ row }">
-              {{ formatToFraction(row.price) }}
-            </template>
-          </el-table-column>
-          <el-table-column align="center" label="销量" min-width="90" prop="salesCount" />
-          <el-table-column align="center" label="库存" min-width="90" prop="stock" />
-          <el-table-column align="center" label="排序" min-width="70" prop="sort" />
-          <el-table-column
-            :formatter="dateFormatter"
-            align="center"
-            label="创建时间"
-            prop="createTime"
-            width="180"
-          />
-        </el-table>
+        <el-button @click="spuAndSkuSelectForm.open('秒杀商品选择')">添加商品</el-button>
+        <SpuAndSkuList ref="spuAndSkuListRef" :spu-list="spuList" />
       </template>
     </Form>
     <template #footer>
@@ -49,14 +21,11 @@
   <SpuAndSkuSelectForm ref="spuAndSkuSelectForm" @confirm="selectSpu" />
 </template>
 <script lang="ts" name="PromotionSeckillActivityForm" setup>
-import { SpuAndSkuSelectForm } from './components'
+import { SpuAndSkuList, SpuAndSkuSelectForm } from './components'
 import { allSchemas, rules } from './seckillActivity.data'
 import { Spu } from '@/api/mall/product/spu'
 
 import * as SeckillActivityApi from '@/api/mall/promotion/seckill/seckillActivity'
-import { dateFormatter } from '@/utils/formatTime'
-import { formatToFraction } from '@/utils'
-import { createImageViewer } from '@/components/ImageViewer'
 
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
@@ -67,12 +36,13 @@ const formLoading = ref(false) // 表单的加载中：1）修改时的数据加
 const formType = ref('') // 表单的类型：create - 新增；update - 修改
 const formRef = ref() // 表单 Ref
 const spuAndSkuSelectForm = ref() // 商品和属性选择 Ref
+const spuAndSkuListRef = ref() // sku 秒杀配置组件Ref
 /** 打开弹窗 */
 const open = async (type: string, id?: number) => {
   dialogVisible.value = true
   dialogTitle.value = t('action.' + type)
   formType.value = type
-  // 修改时，设置数据
+  // 修改时，设置数据 TODO 没测试估计有问题
   if (id) {
     formLoading.value = true
     try {
@@ -90,13 +60,7 @@ const selectSpu = (val: Spu) => {
   formRef.value.setValues({ spuId: val.id })
   spuList.value = [val]
 }
-/** 商品图预览 */
-const imagePreview = (imgUrl: string) => {
-  createImageViewer({
-    zIndex: 99999999,
-    urlList: [imgUrl]
-  })
-}
+
 /** 提交表单 */
 const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
 const submitForm = async () => {
@@ -108,6 +72,8 @@ const submitForm = async () => {
   formLoading.value = true
   try {
     const data = formRef.value.formModel as SeckillActivityApi.SeckillActivityVO
+    data.spuIds = spuList.value.map((spu) => spu.id!)
+    data.products = spuAndSkuListRef.value.getSkuConfigs()
     if (formType.value === 'create') {
       await SeckillActivityApi.createSeckillActivity(data)
       message.success(t('common.createSuccess'))

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

@@ -0,0 +1,157 @@
+<template>
+  <el-table :data="spuData">
+    <el-table-column type="expand" width="30">
+      <template #default="{ row }">
+        <SkuList
+          ref="skuListRef"
+          :is-activity-component="true"
+          :prop-form-data="spuPropertyList.find((item) => item.spuId === row.id)?.spuDetail"
+          :property-list="spuPropertyList.find((item) => item.spuId === row.id)?.propertyList"
+          :rule-config="ruleConfig"
+        >
+          <template #extension>
+            <el-table-column align="center" label="秒杀库存" min-width="168">
+              <template #default="{ row: sku }">
+                <el-input-number v-model="sku.productConfig.stock" :min="0" class="w-100%" />
+              </template>
+            </el-table-column>
+            <el-table-column align="center" label="秒杀价格(元)" min-width="168">
+              <template #default="{ row: sku }">
+                <el-input-number
+                  v-model="sku.productConfig.seckillPrice"
+                  :min="0"
+                  :precision="2"
+                  :step="0.1"
+                  class="w-100%"
+                />
+              </template>
+            </el-table-column>
+          </template>
+        </SkuList>
+      </template>
+    </el-table-column>
+    <el-table-column key="id" align="center" label="商品编号" prop="id" />
+    <el-table-column label="商品图" min-width="80">
+      <template #default="{ row }">
+        <el-image :src="row.picUrl" class="w-30px h-30px" @click="imagePreview(row.picUrl)" />
+      </template>
+    </el-table-column>
+    <el-table-column :show-overflow-tooltip="true" label="商品名称" min-width="300" prop="name" />
+    <el-table-column align="center" label="商品售价" min-width="90" prop="price">
+      <template #default="{ row }">
+        {{ formatToFraction(row.price) }}
+      </template>
+    </el-table-column>
+    <el-table-column align="center" label="销量" min-width="90" prop="salesCount" />
+    <el-table-column align="center" label="库存" min-width="90" prop="stock" />
+  </el-table>
+</template>
+<script lang="ts" name="SpuAndSkuList" setup>
+// TODO 后续计划重新封装作为活动商品配置通用组件
+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'
+
+const props = defineProps({
+  spuList: {
+    type: Array,
+    default: () => []
+  }
+})
+const spuData = ref<SpuRespVO[]>([]) // spu 详情数据列表
+const skuListRef = ref() // 商品属性列表Ref
+interface spuProperty {
+  spuId: number
+  spuDetail: SpuExtension
+  propertyList: Properties[]
+}
+
+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 message = useMessage() // 消息弹窗
+/**
+ * 获取所有 sku 秒杀配置
+ */
+const getSkuConfigs = (): SeckillProductVO[] => {
+  if (!skuListRef.value.validateSku()) {
+    // TODO 作为通用组件是需要进一步完善
+    message.warning('请检查商品相关属性配置！！')
+    throw new Error('请检查商品相关属性配置！！')
+  }
+  const seckillProducts: SeckillProductVO[] = []
+  spuPropertyList.value.forEach((item) => {
+    item.spuDetail.skus.forEach((sku) => {
+      seckillProducts.push(sku.productConfig)
+    })
+  })
+  return seckillProducts
+}
+// 暴露出给表单提交时使用
+defineExpose({ getSkuConfigs })
+/** 商品图预览 */
+const imagePreview = (imgUrl: string) => {
+  createImageViewer({
+    zIndex: 99999999,
+    urlList: [imgUrl]
+  })
+}
+/**
+ * 将传进来的值赋值给 skuList
+ */
+watch(
+  () => props.spuList,
+  (data) => {
+    if (!data) return
+    spuData.value = data as SpuRespVO[]
+    getSpuDetails(spuData.value.map((spu) => spu.id!))
+  },
+  {
+    deep: true,
+    immediate: true
+  }
+)
+</script>

src/views/mall/promotion/seckill/activity/components/SpuAndSkuSelectForm.vue

@@ -51,7 +51,7 @@
         :data="list"
         :expand-row-keys="expandRowKeys"
         row-key="id"
-        @expandChange="getPropertyList"
+        @expand-change="expandChange"
         @selection-change="selectSpu"
       >
         <el-table-column v-if="isSelectSku" type="expand" width="30">
@@ -111,7 +111,7 @@
 </template>
 
 <script lang="ts" name="SeckillActivitySpuAndSkuSelect" setup>
-import { SkuList } from '@/views/mall/product/spu/components'
+import { getPropertyList, Properties, SkuList } from '@/views/mall/product/spu/components'
 import { ElTable } from 'element-plus'
 import { dateFormatter } from '@/utils/formatTime'
 import { createImageViewer } from '@/components/ImageViewer'
@@ -142,13 +142,13 @@ const queryParams = ref({
   categoryId: null,
   createTime: []
 }) // 查询参数
-const propertyList = ref([]) // 商品属性列表
+const propertyList = ref<Properties[]>([]) // 商品属性列表
 const spuListRef = ref<InstanceType<typeof ElTable>>()
 const spuData = ref<ProductSpuApi.Spu | {}>() // 商品详情
 const isExpand = ref(false) // 控制 SKU 列表显示
 const expandRowKeys = ref<number[]>() // 控制展开行需要设置 row-key 属性才能使用，该属性为展开行的 keys 数组。
 // 计算商品属性
-const getPropertyList = async (row: ProductSpuApi.Spu, expandedRows: ProductSpuApi.Spu[]) => {
+const expandChange = async (row: ProductSpuApi.Spu, expandedRows: ProductSpuApi.Spu[]) => {
   spuData.value = {}
   propertyList.value = []
   isExpand.value = false
@@ -158,26 +158,8 @@ const getPropertyList = async (row: ProductSpuApi.Spu, expandedRows: ProductSpuA
     return
   }
   // 获取 SPU 详情
-  const res = (await ProductSpuApi.getSpu(row.id as number)) as ProductSpuApi.Spu
-  // 只有是多规格才处理
-  if (res.specType) {
-    //  直接拿返回的 skus 属性逆向生成出 propertyList
-    const properties = []
-    res.skus?.forEach((sku) => {
-      sku.properties?.forEach(({ propertyId, propertyName, valueId, valueName }) => {
-        // 添加属性
-        if (!properties?.some((item) => item.id === propertyId)) {
-          properties.push({ id: propertyId, name: propertyName, values: [] })
-        }
-        // 添加属性值
-        const index = properties?.findIndex((item) => item.id === propertyId)
-        if (!properties[index].values?.some((value) => value.id === valueId)) {
-          properties[index].values?.push({ id: valueId, name: valueName })
-        }
-      })
-    })
-    propertyList.value = properties
-  }
+  const res = (await ProductSpuApi.getSpu(row.id as number)) as ProductSpuApi.SpuRespVO
+  propertyList.value = getPropertyList(res)
   spuData.value = res
   isExpand.value = true
   expandRowKeys.value = [row.id!]
@@ -219,7 +201,7 @@ const confirm = () => {
     message.warning('没有选择任何商品属性')
     return
   }
-
+  // TODO 返回选择 sku 没测试过，后续测试完善
   props.isSelectSku
     ? emits('confirm', selectedSpu.value!, selectedSku.value!)
     : emits('confirm', selectedSpu.value!)

src/views/mall/promotion/seckill/activity/components/index.ts

@@ -1,3 +1,4 @@
 import SpuAndSkuSelectForm from './SpuAndSkuSelectForm.vue'
+import SpuAndSkuList from './SpuAndSkuList.vue'
 
-export { SpuAndSkuSelectForm }
+export { SpuAndSkuSelectForm, SpuAndSkuList }