fix: 修复 spu 详情查看错误，同步 mall seckill 组件 name 配置方式

Author: puhui999

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

@@ -55,9 +55,9 @@ const { delView } = useTagsViewStore() // 视图操作
 const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
 const activeName = ref('basicInfo') // Tag 激活的窗口
 const isDetail = ref(false) // 是否查看详情
-const basicInfoRef = ref<ComponentRef<typeof BasicInfoForm>>() // 商品信息Ref
-const descriptionRef = ref<ComponentRef<typeof DescriptionForm>>() // 商品详情Ref
-const otherSettingsRef = ref<ComponentRef<typeof OtherSettingsForm>>() // 其他设置Ref
+const basicInfoRef = ref() // 商品信息Ref
+const descriptionRef = ref() // 商品详情Ref
+const otherSettingsRef = ref() // 其他设置Ref
 // spu 表单数据
 const formData = ref<ProductSpuApi.Spu>({
   name: '', // 商品名称
@@ -98,7 +98,7 @@ const formData = ref<ProductSpuApi.Spu>({
 
 /** 获得详情 */
 const getDetail = async () => {
-  if ('productSpuDetail' === name) {
+  if ('ProductSpuDetail' === name) {
     isDetail.value = true
   }
   const id = params.spuId as number

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

@@ -176,7 +176,7 @@ import { checkSelectedNode, defaultProps, handleTree, treeToString } from '@/uti
 import { createImageViewer } from '@/components/ImageViewer'
 import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
 import { UploadImg, UploadImgs } from '@/components/UploadFile'
-import { ProductAttributes, ProductPropertyAddForm, SkuList } from './index'
+import { getPropertyList, ProductAttributes, ProductPropertyAddForm, SkuList } from './index'
 import { basicInfoSchema } from './spu.data'
 import type { Spu } from '@/api/mall/product/spu'
 import * as ProductCategoryApi from '@/api/mall/product/category'
@@ -242,7 +242,7 @@ const rules = reactive({
   introduction: [required],
   picUrl: [required],
   sliderPicUrls: [required],
-  // deliveryTemplateId: [required],
+  deliveryTemplateId: [required],
   brandId: [required],
   specType: [required],
   subCommissionType: [required]
@@ -261,26 +261,7 @@ watch(
     formData.sliderPicUrls = data['sliderPicUrls']?.map((item) => ({
       url: item
     }))
-    // 只有是多规格才处理
-    if (!formData.specType) {
-      return
-    }
-    //  直接拿返回的 skus 属性逆向生成出 propertyList
-    const properties = []
-    formData.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
+    propertyList.value = getPropertyList(data)
   },
   {
     immediate: true

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

@@ -22,13 +22,15 @@
   <!-- TODO @puhui999：这个组件是不是 SpuSelect，不需要带 sku 或者 Form 呀 -->
   <SpuAndSkuSelectForm ref="spuAndSkuSelectForm" @confirm="selectSpu" />
 </template>
-<script lang="ts" name="PromotionSeckillActivityForm" setup>
+<script lang="ts" setup>
 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'
 
+defineOptions({ name: 'PromotionSeckillActivityForm' })
+
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
 

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

@@ -46,7 +46,7 @@
     <el-table-column align="center" label="库存" min-width="90" prop="stock" />
   </el-table>
 </template>
-<script lang="ts" name="SpuAndSkuList" setup>
+<script lang="ts" setup>
 // TODO 后续计划重新封装作为活动商品配置通用组件；可以等其他活动做到的时候，在统一处理 SPU 选择组件哈
 import { formatToFraction } from '@/utils'
 import { createImageViewer } from '@/components/ImageViewer'
@@ -59,6 +59,9 @@ import {
   SkuList
 } from '@/views/mall/product/spu/components'
 import { SeckillProductVO, SpuExtension } from '@/api/mall/promotion/seckill/seckillActivity'
+
+defineOptions({ name: 'PromotionSpuAndSkuList' })
+
 const message = useMessage() // 消息弹窗
 
 // TODO @puhui999：是不是改成传递一个 spu 就好啦？

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

@@ -110,7 +110,7 @@
   </Dialog>
 </template>
 
-<script lang="ts" name="SeckillActivitySpuAndSkuSelect" setup>
+<script lang="ts" setup>
 import { getPropertyList, Properties, SkuList } from '@/views/mall/product/spu/components'
 import { ElTable } from 'element-plus'
 import { dateFormatter } from '@/utils/formatTime'
@@ -122,6 +122,8 @@ import * as ProductCategoryApi from '@/api/mall/product/category'
 import * as ProductSpuApi from '@/api/mall/product/spu'
 import { propTypes } from '@/utils/propTypes'
 
+defineOptions({ name: 'PromotionSpuAndSkuSelect' })
+
 const props = defineProps({
   // 默认不需要（不需要的情况下只返回 spu，需要的情况下返回 选中的 spu 和 sku 列表）
   // 其它活动需要选择商品和商品属性导入此组件即可，需添加组件属性 :isSelectSku='true'

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

@@ -53,11 +53,13 @@
   <!-- 表单弹窗：添加/修改 -->
   <SeckillActivityForm ref="formRef" @success="getList" />
 </template>
-<script lang="ts" name="PromotionSeckillActivity" setup>
+<script lang="ts" setup>
 import { allSchemas } from './seckillActivity.data'
 import * as SeckillActivityApi from '@/api/mall/promotion/seckill/seckillActivity'
 import SeckillActivityForm from './SeckillActivityForm.vue'
 
+defineOptions({ name: 'PromotionSeckillActivity' })
+
 // tableObject：表格的属性对象，可获得分页大小、条数等属性
 // tableMethods：表格的操作对象，可进行获得分页、删除记录等操作
 // 详细可见：https://doc.iocoder.cn/vue3/crud-schema/