From a1d7e81859f554f3a53680cc35f0f49bf1f77098 Mon Sep 17 00:00:00 2001
From: wwf <1971391498@qq.com>
Date: 星期四, 14 五月 2026 14:37:02 +0800
Subject: [PATCH] 导入项目
---
src/views/mall/promotion/components/SpuAndSkuList.vue | 138 ++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 138 insertions(+), 0 deletions(-)
diff --git a/src/views/mall/promotion/components/SpuAndSkuList.vue b/src/views/mall/promotion/components/SpuAndSkuList.vue
new file mode 100644
index 0000000..1a0598c
--- /dev/null
+++ b/src/views/mall/promotion/components/SpuAndSkuList.vue
@@ -0,0 +1,138 @@
+<template>
+ <el-table :data="spuData" :expand-row-keys="expandRowKeys" row-key="id">
+ <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>
+ <slot></slot>
+ </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="h-30px w-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
+ v-if="spuData.length > 1 && deletable"
+ align="center"
+ label="鎿嶄綔"
+ min-width="90"
+ >
+ <template #default="scope">
+ <el-button link type="primary" @click="deleteSpu(scope.row.id)"> 鍒犻櫎</el-button>
+ </template>
+ </el-table-column>
+ </el-table>
+</template>
+<script generic="T extends Spu" lang="ts" setup>
+import { formatToFraction } from '@/utils'
+import { createImageViewer } from '@/components/ImageViewer'
+import { Spu } from '@/api/mall/product/spu'
+import { RuleConfig, SkuList } from '@/views/mall/product/spu/components'
+import { SpuProperty } from '@/views/mall/promotion/components/index'
+
+defineOptions({ name: 'PromotionSpuAndSkuList' })
+
+const message = useMessage() // 娑堟伅寮圭獥
+
+const props = defineProps<{
+ spuList: T[]
+ ruleConfig: RuleConfig[]
+ spuPropertyListP: SpuProperty<T>[]
+ deletable?: boolean // SPU 鏄惁鍙垹闄わ紱
+}>()
+
+const spuData = ref<Spu[]>([]) // spu 璇︽儏鏁版嵁鍒楄〃
+const skuListRef = ref() // 鍟嗗搧灞炴�у垪琛≧ef
+const spuPropertyList = ref<SpuProperty<T>[]>([]) // spuId 瀵瑰簲鐨� sku 鐨勫睘鎬у垪琛�
+const expandRowKeys = ref<string[]>([]) // 鎺у埗灞曞紑琛岄渶瑕佽缃� row-key 灞炴�ф墠鑳戒娇鐢紝璇ュ睘鎬т负灞曞紑琛岀殑 keys 鏁扮粍銆�
+
+/**
+ * 鑾峰彇鎵�鏈� sku 娲诲姩閰嶇疆
+ *
+ * @param extendedAttribute 鍦� sku 涓婃墿灞曠殑灞炴�э紝渚嬶細绉掓潃娲诲姩 sku 鎵╁睍灞炴�� productConfig 璇峰弬鑰� seckillActivity.ts
+ */
+const getSkuConfigs = (extendedAttribute: string) => {
+ skuListRef.value.validateSku()
+ const seckillProducts: any[] = []
+ spuPropertyList.value.forEach((item) => {
+ item.spuDetail.skus?.forEach((sku: any) => {
+ seckillProducts.push(sku[extendedAttribute] as any)
+ })
+ })
+ return seckillProducts
+}
+// 鏆撮湶鍑虹粰琛ㄥ崟鎻愪氦鏃朵娇鐢�
+defineExpose({ getSkuConfigs })
+
+/** 鍟嗗搧鍥鹃瑙� */
+const imagePreview = (imgUrl: string) => {
+ createImageViewer({
+ zIndex: 99999999,
+ urlList: [imgUrl]
+ })
+}
+
+// 鍒犻櫎鏃剁殑瑙﹀彂浜嬩欢
+const emits = defineEmits<{
+ (e: 'delete', spuId: number): void
+}>()
+
+/** 澶氶�夋椂鍙互鍒犻櫎 SPU **/
+const deleteSpu = async (spuId: number) => {
+ await message.confirm('鏄惁鍒犻櫎鍟嗗搧缂栧彿涓�' + spuId + '鐨勬暟鎹紵')
+ const index = spuData.value.findIndex((item) => item.id == spuId)
+ spuData.value.splice(index, 1)
+ emits('delete', spuId)
+}
+
+/**
+ * 灏嗕紶杩涙潵鐨勫�艰祴鍊肩粰 skuList
+ */
+watch(
+ () => props.spuList,
+ (data) => {
+ if (!data) return
+ spuData.value = data as Spu[]
+ },
+ {
+ deep: true,
+ immediate: true
+ }
+)
+/**
+ * 灏嗕紶杩涙潵鐨勫�艰祴鍊肩粰 skuList
+ */
+watch(
+ () => props.spuPropertyListP,
+ (data) => {
+ if (!data) return
+ spuPropertyList.value = data as SpuProperty<T>[] as any
+ // 瑙ｅ喅濡傛灉涔嬪墠閫夋嫨鐨勬槸鍗曡鏍� spu 鐨勮瘽鍚庨潰閫夋嫨澶氳鏍� sku 澶氳鏍煎睘鎬т俊鎭笉灞曠ず鐨勯棶棰樸�傝В鍐虫柟娉曪細璁� SkuList 缁勪欢閲嶆柊娓叉煋锛堣鎶樺彔浼氬共鎺夊寘鍚殑缁勪欢灞曞紑鏃朵細閲嶆柊鍔犺浇锛�
+ setTimeout(() => {
+ expandRowKeys.value = data.map((item) => item.spuId + '')
+ }, 200)
+ },
+ {
+ deep: true,
+ immediate: true
+ }
+)
+</script>
--
Gitblit v1.8.0