fix: mall SeckillActivity

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

@@ -1,5 +1,5 @@
 <template>
-  <el-table :data="spuData" :default-expand-all="true">
+  <el-table :data="spuData" :expand-row-keys="expandRowKeys" row-key="id">
     <el-table-column type="expand" width="30">
       <template #default="{ row }">
         <SkuList
@@ -48,9 +48,8 @@ const props = defineProps<{
 
 const spuData = ref<Spu[]>([]) // spu 详情数据列表
 const skuListRef = ref() // 商品属性列表Ref
-
 const spuPropertyList = ref<SpuProperty<T>[]>([]) // spuId 对应的 sku 的属性列表
-
+const expandRowKeys = ref<number[]>() // 控制展开行需要设置 row-key 属性才能使用，该属性为展开行的 keys 数组。
 /**
  * 获取所有 sku 活动配置
  * @param extendedAttribute 在 sku 上扩展的属性，例：秒杀活动 sku 扩展属性 productConfig 请参考 seckillActivity.ts
@@ -98,6 +97,10 @@ watch(
   (data) => {
     if (!data) return
     spuPropertyList.value = data as SpuProperty<T>[]
+    // 解决如果之前选择的是单规格 spu 的话后面选择多规格 sku 多规格属性信息不展示的问题。解决方法：让 SkuList 组件重新渲染（行折叠会干掉包含的组件展开时会重新加载）
+    setTimeout(() => {
+      expandRowKeys.value = data.map((item) => item.spuId)
+    }, 200)
   },
   {
     deep: true,

src/views/mall/promotion/components/SpuSelect.vue

@@ -57,6 +57,7 @@
           <template #default>
             <SkuList
               v-if="isExpand"
+              ref="skuListRef"
               :isComponent="true"
               :isDetail="true"
               :prop-form-data="spuData"
@@ -145,6 +146,7 @@ const queryParams = ref({
 }) // 查询参数
 const propertyList = ref<Properties[]>([]) // 商品属性列表
 const spuListRef = ref<InstanceType<typeof ElTable>>()
+const skuListRef = ref() // 商品属性选择 Ref
 const spuData = ref<ProductSpuApi.Spu>() // 商品详情
 const isExpand = ref(false) // 控制 SKU 列表显示
 const expandRowKeys = ref<number[]>() // 控制展开行需要设置 row-key 属性才能使用，该属性为展开行的 keys 数组。
@@ -154,6 +156,8 @@ const selectedSpuId = ref<number>(0) // 选中的商品 spuId
 const selectedSkuIds = ref<number[]>([]) // 选中的商品 skuIds
 const selectSku = (val: ProductSpuApi.Sku[]) => {
   if (selectedSpuId.value === 0) {
+    message.warning('请先选择商品再选择相应的规格！！！')
+    skuListRef.value.clearSelection()
     return
   }
   selectedSkuIds.value = val.map((sku) => sku.id!)
@@ -233,6 +237,8 @@ const confirm = () => {
     : emits('confirm', selectedSpuId.value)
   // 关闭弹窗
   dialogVisible.value = false
+  selectedSpuId.value = 0
+  selectedSkuIds.value = []
 }
 
 /** 打开弹窗 */