From a75720ec0646f4fe5bdf21126bd5c3cf719170e9 Mon Sep 17 00:00:00 2001
From: puhui999 <puhui999@163.com>
Date: Sat, 17 Jun 2023 21:20:28 +0800
Subject: [PATCH 1/6] =?UTF-8?q?feat:=20=E7=A7=92=E6=9D=80=E6=97=B6?=
 =?UTF-8?q?=E6=AE=B5=E7=AE=A1=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../mall/promotion/seckill/seckillConfig.ts   |  41 +++++++
 src/utils/formatTime.ts                       |   4 +-
 .../seckill/config/SeckillConfigForm.vue      |  70 ++++++++++++
 .../mall/promotion/seckill/config/index.vue   | 101 ++++++++++++++++++
 .../seckill/config/seckillConfig.data.ts      |  93 ++++++++++++++++
 5 files changed, 307 insertions(+), 2 deletions(-)
 create mode 100644 src/api/mall/promotion/seckill/seckillConfig.ts
 create mode 100644 src/views/mall/promotion/seckill/config/SeckillConfigForm.vue
 create mode 100644 src/views/mall/promotion/seckill/config/index.vue
 create mode 100644 src/views/mall/promotion/seckill/config/seckillConfig.data.ts

diff --git a/src/api/mall/promotion/seckill/seckillConfig.ts b/src/api/mall/promotion/seckill/seckillConfig.ts
new file mode 100644
index 00000000..d941ed4d
--- /dev/null
+++ b/src/api/mall/promotion/seckill/seckillConfig.ts
@@ -0,0 +1,41 @@
+import request from '@/config/axios'
+
+export interface SeckillConfigVO {
+  id: number
+  name: string
+  startTime: Date
+  endTime: Date
+  seckillActivityCount: number
+  picUrl: string
+  status: number
+}
+
+// 查询秒杀时段配置列表
+export const getSeckillConfigPage = async (params) => {
+  return await request.get({ url: '/promotion/seckill-config/page', params })
+}
+
+// 查询秒杀时段配置详情
+export const getSeckillConfig = async (id: number) => {
+  return await request.get({ url: '/promotion/seckill-config/get?id=' + id })
+}
+
+// 新增秒杀时段配置
+export const createSeckillConfig = async (data: SeckillConfigVO) => {
+  return await request.post({ url: '/promotion/seckill-config/create', data })
+}
+
+// 修改秒杀时段配置
+export const updateSeckillConfig = async (data: SeckillConfigVO) => {
+  return await request.put({ url: '/promotion/seckill-config/update', data })
+}
+
+// 删除秒杀时段配置
+export const deleteSeckillConfig = async (id: number) => {
+  return await request.delete({ url: '/promotion/seckill-config/delete?id=' + id })
+}
+
+// 导出秒杀时段配置 Excel
+export const exportSeckillConfigApi = async (params) => {
+  return await request.download({ url: '/promotion/seckill-config/export-excel', params })
+}
diff --git a/src/utils/formatTime.ts b/src/utils/formatTime.ts
index 0d68e362..b27cabdf 100644
--- a/src/utils/formatTime.ts
+++ b/src/utils/formatTime.ts
@@ -155,7 +155,7 @@ export const dateFormatter = (row, column, cellValue) => {
  * @returns 带时间00:00:00的日期
  */
 export function beginOfDay(param: Date) {
-  return new Date(param.getFullYear(), param.getMonth(), param.getDate(), 0, 0, 0, 0)
+  return new Date(param.getFullYear(), param.getMonth(), param.getDate(), 0, 0, 0)
 }
 
 /**
@@ -164,7 +164,7 @@ export function beginOfDay(param: Date) {
  * @returns 带时间23:59:59的日期
  */
 export function endOfDay(param: Date) {
-  return new Date(param.getFullYear(), param.getMonth(), param.getDate(), 23, 59, 59, 999)
+  return new Date(param.getFullYear(), param.getMonth(), param.getDate(), 23, 59, 59)
 }
 
 /**
diff --git a/src/views/mall/promotion/seckill/config/SeckillConfigForm.vue b/src/views/mall/promotion/seckill/config/SeckillConfigForm.vue
new file mode 100644
index 00000000..a4675f71
--- /dev/null
+++ b/src/views/mall/promotion/seckill/config/SeckillConfigForm.vue
@@ -0,0 +1,70 @@
+<template>
+  <Dialog v-model="dialogVisible" :title="dialogTitle">
+    <Form ref="formRef" v-loading="formLoading" :rules="rules" :schema="allSchemas.formSchema" />
+    <template #footer>
+      <el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
+      <el-button @click="dialogVisible = false">取 消</el-button>
+    </template>
+  </Dialog>
+</template>
+<script lang="ts" name="SeckillConfigForm" setup>
+import { cloneDeep } from 'lodash-es'
+import * as SeckillConfigApi from '@/api/mall/promotion/seckill/seckillConfig'
+import { allSchemas, format, rules } from './seckillConfig.data'
+
+const { t } = useI18n() // 国际化
+const message = useMessage() // 消息弹窗
+
+const dialogVisible = ref(false) // 弹窗的是否展示
+const dialogTitle = ref('') // 弹窗的标题
+const formLoading = ref(false) // 表单的加载中:1)修改时的数据加载;2)提交的按钮禁用
+const formType = ref('') // 表单的类型:create - 新增;update - 修改
+const formRef = ref() // 表单 Ref
+
+/** 打开弹窗 */
+const open = async (type: string, id?: number) => {
+  dialogVisible.value = true
+  dialogTitle.value = t('action.' + type)
+  formType.value = type
+  // 修改时,设置数据
+  if (id) {
+    formLoading.value = true
+    try {
+      const data = await SeckillConfigApi.getSeckillConfig(id)
+      const info = cloneDeep(data)
+      data.startTime = format(info.startTime)
+      data.endTime = format(info.endTime)
+      formRef.value.setValues(data)
+    } finally {
+      formLoading.value = false
+    }
+  }
+}
+defineExpose({ open }) // 提供 open 方法,用于打开弹窗
+
+/** 提交表单 */
+const emit = defineEmits(['success']) // 定义 success 事件,用于操作成功后的回调
+const submitForm = async () => {
+  // 校验表单
+  if (!formRef) return
+  const valid = await formRef.value.getElFormRef().validate()
+  if (!valid) return
+  // 提交请求
+  formLoading.value = true
+  try {
+    const data = formRef.value.formModel as SeckillConfigApi.SeckillConfigVO
+    if (formType.value === 'create') {
+      await SeckillConfigApi.createSeckillConfig(data)
+      message.success(t('common.createSuccess'))
+    } else {
+      await SeckillConfigApi.updateSeckillConfig(data)
+      message.success(t('common.updateSuccess'))
+    }
+    dialogVisible.value = false
+    // 发送操作成功的事件
+    emit('success')
+  } finally {
+    formLoading.value = false
+  }
+}
+</script>
diff --git a/src/views/mall/promotion/seckill/config/index.vue b/src/views/mall/promotion/seckill/config/index.vue
new file mode 100644
index 00000000..8c7dee8d
--- /dev/null
+++ b/src/views/mall/promotion/seckill/config/index.vue
@@ -0,0 +1,101 @@
+<template>
+  <!-- 搜索工作栏 -->
+  <ContentWrap>
+    <Search :schema="allSchemas.searchSchema" @reset="setSearchParams" @search="setSearchParams">
+      <!-- 新增等操作按钮 -->
+      <template #actionMore>
+        <el-button
+          v-hasPermi="['promotion:seckill-config:create']"
+          plain
+          type="primary"
+          @click="openForm('create')"
+        >
+          <Icon class="mr-5px" icon="ep:plus" />
+          新增
+        </el-button>
+      </template>
+    </Search>
+  </ContentWrap>
+
+  <!-- 列表 -->
+  <ContentWrap>
+    <Table
+      v-model:currentPage="tableObject.currentPage"
+      v-model:pageSize="tableObject.pageSize"
+      :columns="allSchemas.tableColumns"
+      :data="tableObject.tableList"
+      :loading="tableObject.loading"
+      :pagination="{
+        total: tableObject.total
+      }"
+    >
+      <template #startTime="{ row }">
+        {{ format(row.startTime) }}
+      </template>
+      <template #endTime="{ row }">
+        {{ format(row.endTime) }}
+      </template>
+      <template #picUrl="{ row }">
+        <el-image :src="row.picUrl" class="w-30px h-30px" @click="imagePreview(row.picUrl)" />
+      </template>
+      <template #action="{ row }">
+        <el-button
+          v-hasPermi="['promotion:seckill-config:update']"
+          link
+          type="primary"
+          @click="openForm('update', row.id)"
+        >
+          编辑
+        </el-button>
+        <el-button
+          v-hasPermi="['promotion:seckill-config:delete']"
+          link
+          type="danger"
+          @click="handleDelete(row.id)"
+        >
+          删除
+        </el-button>
+      </template>
+    </Table>
+  </ContentWrap>
+
+  <!-- 表单弹窗:添加/修改 -->
+  <SeckillConfigForm ref="formRef" @success="getList" />
+</template>
+<script lang="ts" name="SeckillConfig" setup>
+import { allSchemas, format } from './seckillConfig.data'
+import * as SeckillConfigApi from '@/api/mall/promotion/seckill/seckillConfig'
+import SeckillConfigForm from './SeckillConfigForm.vue'
+import { createImageViewer } from '@/components/ImageViewer'
+
+// tableObject:表格的属性对象,可获得分页大小、条数等属性
+// tableMethods:表格的操作对象,可进行获得分页、删除记录等操作
+// 详细可见:https://doc.iocoder.cn/vue3/crud-schema/
+const { tableObject, tableMethods } = useTable({
+  getListApi: SeckillConfigApi.getSeckillConfigPage, // 分页接口
+  delListApi: SeckillConfigApi.deleteSeckillConfig // 删除接口
+})
+// 获得表格的各种操作
+const { getList, setSearchParams } = tableMethods
+/** 商品图预览 */
+const imagePreview = (imgUrl: string) => {
+  createImageViewer({
+    urlList: [imgUrl]
+  })
+}
+/** 添加/修改操作 */
+const formRef = ref()
+const openForm = (type: string, id?: number) => {
+  formRef.value.open(type, id)
+}
+
+/** 删除按钮操作 */
+const handleDelete = (id: number) => {
+  tableMethods.delList(id, false)
+}
+
+/** 初始化 **/
+onMounted(() => {
+  getList()
+})
+</script>
diff --git a/src/views/mall/promotion/seckill/config/seckillConfig.data.ts b/src/views/mall/promotion/seckill/config/seckillConfig.data.ts
new file mode 100644
index 00000000..65c35611
--- /dev/null
+++ b/src/views/mall/promotion/seckill/config/seckillConfig.data.ts
@@ -0,0 +1,93 @@
+import type { CrudSchema } from '@/hooks/web/useCrudSchemas'
+import { dateFormatter } from '@/utils/formatTime'
+
+// 表单校验
+export const rules = reactive({
+  name: [required],
+  startTime: [required],
+  endTime: [required],
+  seckillActivityCount: [required],
+  picUrl: [required],
+  status: [required]
+})
+
+// CrudSchema https://doc.iocoder.cn/vue3/crud-schema/
+const crudSchemas = reactive<CrudSchema[]>([
+  {
+    label: '秒杀时段名称',
+    field: 'name',
+    isSearch: true
+  },
+  {
+    label: '开始时间点',
+    field: 'startTime',
+    isSearch: false,
+    search: {
+      component: 'TimePicker'
+    },
+    form: {
+      component: 'TimePicker',
+      componentProps: {
+        valueFormat: 'HH:mm:ss'
+      }
+    }
+  },
+  {
+    label: '结束时间点',
+    field: 'endTime',
+    isSearch: false,
+    search: {
+      component: 'TimePicker'
+    },
+    form: {
+      component: 'TimePicker',
+      componentProps: {
+        valueFormat: 'HH:mm:ss'
+      }
+    }
+  },
+  {
+    label: '秒杀主图',
+    field: 'picUrl',
+    isSearch: false,
+    form: {
+      component: 'UploadImg'
+    }
+  },
+  {
+    label: '状态',
+    field: 'status',
+    dictType: DICT_TYPE.COMMON_STATUS,
+    dictClass: 'number',
+    isSearch: true,
+    form: {
+      component: 'Radio'
+    }
+  },
+  {
+    label: '创建时间',
+    field: 'createTime',
+    isForm: false,
+    isSearch: false,
+    formatter: dateFormatter
+  },
+  {
+    label: '操作',
+    field: 'action',
+    isForm: false
+  }
+])
+export const { allSchemas } = useCrudSchemas(crudSchemas)
+
+/**
+ *  添加这个函数呢是因为数据库表使用 time 类型存的时分秒信息,对应实体类字段使用的 LocalTime,然后返回给前端的就数据是
+ *  '00:05:00' 会变成 [0,5],所以才使用此方法转一道。我想着或许直接后台返回字符串格式的
+ * @param data
+ */
+export const format = (data: number[]): string => {
+  if (typeof data === 'undefined') {
+    return ''
+  }
+  const paddedData = data.length >= 3 ? data.slice(0, 3) : [...data, 0, 0].slice(0, 3)
+  return paddedData.map((num) => num.toString().padStart(2, '0')).join(':')
+}

From f7b195b226308e4f016817a1bba5ca1a52921906 Mon Sep 17 00:00:00 2001
From: puhui999 <puhui999@163.com>
Date: Mon, 19 Jun 2023 10:20:43 +0800
Subject: [PATCH 2/6] =?UTF-8?q?feat:=20=E5=AE=8C=E4=BA=8B=E7=A7=92?=
 =?UTF-8?q?=E6=9D=80=E6=97=B6=E6=AE=B5=E7=AE=A1=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../mall/promotion/seckill/seckillConfig.ts   | 14 ++++++--
 .../seckill/config/SeckillConfigForm.vue      |  6 +---
 .../mall/promotion/seckill/config/index.vue   | 35 ++++++++++++++-----
 .../seckill/config/seckillConfig.data.ts      | 14 --------
 4 files changed, 39 insertions(+), 30 deletions(-)

diff --git a/src/api/mall/promotion/seckill/seckillConfig.ts b/src/api/mall/promotion/seckill/seckillConfig.ts
index d941ed4d..fb72936b 100644
--- a/src/api/mall/promotion/seckill/seckillConfig.ts
+++ b/src/api/mall/promotion/seckill/seckillConfig.ts
@@ -3,9 +3,8 @@ import request from '@/config/axios'
 export interface SeckillConfigVO {
   id: number
   name: string
-  startTime: Date
-  endTime: Date
-  seckillActivityCount: number
+  startTime: string
+  endTime: string
   picUrl: string
   status: number
 }
@@ -30,6 +29,15 @@ export const updateSeckillConfig = async (data: SeckillConfigVO) => {
   return await request.put({ url: '/promotion/seckill-config/update', data })
 }
 
+// 修改时段配置状态
+export const updateSeckillConfigStatus = (id: number, status: number) => {
+  const data = {
+    id,
+    status
+  }
+  return request.put({ url: '/promotion/seckill-config/update-status', data: data })
+}
+
 // 删除秒杀时段配置
 export const deleteSeckillConfig = async (id: number) => {
   return await request.delete({ url: '/promotion/seckill-config/delete?id=' + id })
diff --git a/src/views/mall/promotion/seckill/config/SeckillConfigForm.vue b/src/views/mall/promotion/seckill/config/SeckillConfigForm.vue
index a4675f71..e25f8fce 100644
--- a/src/views/mall/promotion/seckill/config/SeckillConfigForm.vue
+++ b/src/views/mall/promotion/seckill/config/SeckillConfigForm.vue
@@ -8,9 +8,8 @@
   </Dialog>
 </template>
 <script lang="ts" name="SeckillConfigForm" setup>
-import { cloneDeep } from 'lodash-es'
 import * as SeckillConfigApi from '@/api/mall/promotion/seckill/seckillConfig'
-import { allSchemas, format, rules } from './seckillConfig.data'
+import { allSchemas, rules } from './seckillConfig.data'
 
 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
@@ -31,9 +30,6 @@ const open = async (type: string, id?: number) => {
     formLoading.value = true
     try {
       const data = await SeckillConfigApi.getSeckillConfig(id)
-      const info = cloneDeep(data)
-      data.startTime = format(info.startTime)
-      data.endTime = format(info.endTime)
       formRef.value.setValues(data)
     } finally {
       formLoading.value = false
diff --git a/src/views/mall/promotion/seckill/config/index.vue b/src/views/mall/promotion/seckill/config/index.vue
index 8c7dee8d..ac851a63 100644
--- a/src/views/mall/promotion/seckill/config/index.vue
+++ b/src/views/mall/promotion/seckill/config/index.vue
@@ -29,15 +29,17 @@
         total: tableObject.total
       }"
     >
-      <template #startTime="{ row }">
-        {{ format(row.startTime) }}
-      </template>
-      <template #endTime="{ row }">
-        {{ format(row.endTime) }}
-      </template>
       <template #picUrl="{ row }">
         <el-image :src="row.picUrl" class="w-30px h-30px" @click="imagePreview(row.picUrl)" />
       </template>
+      <template #status="{ row }">
+        <el-switch
+          v-model="row.status"
+          :active-value="0"
+          :inactive-value="1"
+          @change="handleStatusChange(row)"
+        />
+      </template>
       <template #action="{ row }">
         <el-button
           v-hasPermi="['promotion:seckill-config:update']"
@@ -63,11 +65,13 @@
   <SeckillConfigForm ref="formRef" @success="getList" />
 </template>
 <script lang="ts" name="SeckillConfig" setup>
-import { allSchemas, format } from './seckillConfig.data'
+import { allSchemas } from './seckillConfig.data'
 import * as SeckillConfigApi from '@/api/mall/promotion/seckill/seckillConfig'
 import SeckillConfigForm from './SeckillConfigForm.vue'
 import { createImageViewer } from '@/components/ImageViewer'
+import { CommonStatusEnum } from '@/utils/constants'
 
+const message = useMessage() // 消息弹窗
 // tableObject:表格的属性对象,可获得分页大小、条数等属性
 // tableMethods:表格的操作对象,可进行获得分页、删除记录等操作
 // 详细可见:https://doc.iocoder.cn/vue3/crud-schema/
@@ -93,7 +97,22 @@ const openForm = (type: string, id?: number) => {
 const handleDelete = (id: number) => {
   tableMethods.delList(id, false)
 }
-
+/** 修改用户状态 */
+const handleStatusChange = async (row: SeckillConfigApi.SeckillConfigVO) => {
+  try {
+    // 修改状态的二次确认
+    const text = row.status === CommonStatusEnum.ENABLE ? '启用' : '停用'
+    await message.confirm('确认要"' + text + '""' + row.name + '?')
+    // 发起修改状态
+    await SeckillConfigApi.updateSeckillConfigStatus(row.id, row.status)
+    // 刷新列表
+    await getList()
+  } catch {
+    // 取消后,进行恢复按钮
+    row.status =
+      row.status === CommonStatusEnum.ENABLE ? CommonStatusEnum.DISABLE : CommonStatusEnum.ENABLE
+  }
+}
 /** 初始化 **/
 onMounted(() => {
   getList()
diff --git a/src/views/mall/promotion/seckill/config/seckillConfig.data.ts b/src/views/mall/promotion/seckill/config/seckillConfig.data.ts
index 65c35611..49bf36af 100644
--- a/src/views/mall/promotion/seckill/config/seckillConfig.data.ts
+++ b/src/views/mall/promotion/seckill/config/seckillConfig.data.ts
@@ -6,7 +6,6 @@ export const rules = reactive({
   name: [required],
   startTime: [required],
   endTime: [required],
-  seckillActivityCount: [required],
   picUrl: [required],
   status: [required]
 })
@@ -78,16 +77,3 @@ const crudSchemas = reactive<CrudSchema[]>([
   }
 ])
 export const { allSchemas } = useCrudSchemas(crudSchemas)
-
-/**
- *  添加这个函数呢是因为数据库表使用 time 类型存的时分秒信息,对应实体类字段使用的 LocalTime,然后返回给前端的就数据是
- *  '00:05:00' 会变成 [0,5],所以才使用此方法转一道。我想着或许直接后台返回字符串格式的
- * @param data
- */
-export const format = (data: number[]): string => {
-  if (typeof data === 'undefined') {
-    return ''
-  }
-  const paddedData = data.length >= 3 ? data.slice(0, 3) : [...data, 0, 0].slice(0, 3)
-  return paddedData.map((num) => num.toString().padStart(2, '0')).join(':')
-}

From 5064845d4e7ad807b5dfeabee4ffb8de0eb123ff Mon Sep 17 00:00:00 2001
From: puhui999 <puhui999@163.com>
Date: Wed, 21 Jun 2023 15:26:43 +0800
Subject: [PATCH 3/6] =?UTF-8?q?fix:=20=E4=BD=BF=20Dialog=20=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E6=94=AF=E6=8C=81=20Dialog=20=E5=86=85=E9=83=A8?=
 =?UTF-8?q?=E5=B5=8C=E5=A5=97=E5=8F=A6=E4=B8=80=E4=B8=AA=20Dialog=EF=BC=8C?=
 =?UTF-8?q?=E9=9C=80=E8=A6=81=E4=BD=BF=E7=94=A8=20append-to-body=20?=
 =?UTF-8?q?=E5=B1=9E=E6=80=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Dialog/src/Dialog.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Dialog/src/Dialog.vue b/src/components/Dialog/src/Dialog.vue
index 449174d9..28deba46 100644
--- a/src/components/Dialog/src/Dialog.vue
+++ b/src/components/Dialog/src/Dialog.vue
@@ -14,7 +14,7 @@ const props = defineProps({
 })
 
 const getBindValue = computed(() => {
-  const delArr: string[] = ['fullscreen', 'title', 'maxHeight']
+  const delArr: string[] = ['fullscreen', 'title', 'maxHeight', 'appendToBody']
   const attrs = useAttrs()
   const obj = { ...attrs, ...props }
   for (const key in obj) {

From f3622d423a29d3c4a1f831ed89864c85d94074d1 Mon Sep 17 00:00:00 2001
From: puhui999 <puhui999@163.com>
Date: Wed, 21 Jun 2023 15:27:35 +0800
Subject: [PATCH 4/6] =?UTF-8?q?fix:=20=E4=BD=BF=20Table=20=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E6=94=AF=E6=8C=81=E5=88=97=E5=AE=BD=E5=92=8C=E5=9B=BA?=
 =?UTF-8?q?=E5=AE=9A=E5=88=97=E9=85=8D=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/hooks/web/useCrudSchemas.ts | 7 +++++--
 src/types/table.d.ts            | 2 ++
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/hooks/web/useCrudSchemas.ts b/src/hooks/web/useCrudSchemas.ts
index a29f75ab..984e57c5 100644
--- a/src/hooks/web/useCrudSchemas.ts
+++ b/src/hooks/web/useCrudSchemas.ts
@@ -1,7 +1,7 @@
 import { reactive } from 'vue'
 import { AxiosPromise } from 'axios'
 import { findIndex } from '@/utils'
-import { eachTree, treeMap, filter } from '@/utils/tree'
+import { eachTree, filter, treeMap } from '@/utils/tree'
 import { getBoolDictOptions, getDictOptions, getIntDictOptions } from '@/utils/dict'
 
 import { FormSchema } from '@/types/form'
@@ -36,8 +36,11 @@ type CrudSearchParams = {
 type CrudTableParams = {
   // 是否显示表头
   show?: boolean
+  // 列宽配置
+  width?: number | string
+  // 列是否固定在左侧或者右侧
+  fixed?: 'left' | 'right'
 } & Omit<FormSchema, 'field'>
-
 type CrudFormParams = {
   // 是否显示表单项
   show?: boolean
diff --git a/src/types/table.d.ts b/src/types/table.d.ts
index 3294234b..9cb4205b 100644
--- a/src/types/table.d.ts
+++ b/src/types/table.d.ts
@@ -1,6 +1,8 @@
 export type TableColumn = {
   field: string
   label?: string
+  width?: number | string
+  fixed?: 'left' | 'right'
   children?: TableColumn[]
 } & Recordable
 

From 3d47d6744e0dd78d4df350c5eb6421dba889f8af Mon Sep 17 00:00:00 2001
From: puhui999 <puhui999@163.com>
Date: Thu, 22 Jun 2023 17:31:36 +0800
Subject: [PATCH 5/6] =?UTF-8?q?feat=EF=BC=9A=E6=B7=BB=E5=8A=A0=E7=A7=92?=
 =?UTF-8?q?=E6=9D=80=E6=B4=BB=E5=8A=A8=E7=AE=A1=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../mall/promotion/seckill/seckillActivity.ts |  50 +++
 .../mall/promotion/seckill/seckillConfig.ts   |   5 +
 .../mall/product/spu/components/SkuList.vue   |  16 +-
 src/views/mall/product/spu/index.vue          |  10 +-
 .../seckill/activity/SeckillActivityForm.vue  | 136 ++++++++
 .../components/SpuAndSkuSelectForm.vue        | 290 ++++++++++++++++++
 .../seckill/activity/components/index.ts      |   3 +
 .../mall/promotion/seckill/activity/index.vue |  86 ++++++
 .../seckill/activity/seckillActivity.data.ts  | 261 ++++++++++++++++
 9 files changed, 848 insertions(+), 9 deletions(-)
 create mode 100644 src/api/mall/promotion/seckill/seckillActivity.ts
 create mode 100644 src/views/mall/promotion/seckill/activity/SeckillActivityForm.vue
 create mode 100644 src/views/mall/promotion/seckill/activity/components/SpuAndSkuSelectForm.vue
 create mode 100644 src/views/mall/promotion/seckill/activity/components/index.ts
 create mode 100644 src/views/mall/promotion/seckill/activity/index.vue
 create mode 100644 src/views/mall/promotion/seckill/activity/seckillActivity.data.ts

diff --git a/src/api/mall/promotion/seckill/seckillActivity.ts b/src/api/mall/promotion/seckill/seckillActivity.ts
new file mode 100644
index 00000000..2c59319c
--- /dev/null
+++ b/src/api/mall/promotion/seckill/seckillActivity.ts
@@ -0,0 +1,50 @@
+import request from '@/config/axios'
+
+export interface SeckillActivityVO {
+  id: number
+  spuId: number
+  name: string
+  status: number
+  remark: string
+  startTime: Date
+  endTime: Date
+  sort: number
+  configIds: string
+  orderCount: number
+  userCount: number
+  totalPrice: number
+  totalLimitCount: number
+  singleLimitCount: number
+  stock: number
+  totalStock: number
+}
+
+// 查询秒杀活动列表
+export const getSeckillActivityPage = async (params) => {
+  return await request.get({ url: '/promotion/seckill-activity/page', params })
+}
+
+// 查询秒杀活动详情
+export const getSeckillActivity = async (id: number) => {
+  return await request.get({ url: '/promotion/seckill-activity/get?id=' + id })
+}
+
+// 新增秒杀活动
+export const createSeckillActivity = async (data: SeckillActivityVO) => {
+  return await request.post({ url: '/promotion/seckill-activity/create', data })
+}
+
+// 修改秒杀活动
+export const updateSeckillActivity = async (data: SeckillActivityVO) => {
+  return await request.put({ url: '/promotion/seckill-activity/update', data })
+}
+
+// 删除秒杀活动
+export const deleteSeckillActivity = async (id: number) => {
+  return await request.delete({ url: '/promotion/seckill-activity/delete?id=' + id })
+}
+
+// 导出秒杀活动 Excel
+export const exportSeckillActivityApi = async (params) => {
+  return await request.download({ url: '/promotion/seckill-activity/export-excel', params })
+}
diff --git a/src/api/mall/promotion/seckill/seckillConfig.ts b/src/api/mall/promotion/seckill/seckillConfig.ts
index fb72936b..aff72821 100644
--- a/src/api/mall/promotion/seckill/seckillConfig.ts
+++ b/src/api/mall/promotion/seckill/seckillConfig.ts
@@ -19,6 +19,11 @@ export const getSeckillConfig = async (id: number) => {
   return await request.get({ url: '/promotion/seckill-config/get?id=' + id })
 }
 
+// 获得所有开启状态的秒杀时段精简列表
+export const getListAllSimple = async () => {
+  return await request.get({ url: '/promotion/seckill-config/list-all-simple' })
+}
+
 // 新增秒杀时段配置
 export const createSeckillConfig = async (data: SeckillConfigVO) => {
   return await request.post({ url: '/promotion/seckill-config/create', data })
diff --git a/src/views/mall/product/spu/components/SkuList.vue b/src/views/mall/product/spu/components/SkuList.vue
index 4114bd09..6aa26a2b 100644
--- a/src/views/mall/product/spu/components/SkuList.vue
+++ b/src/views/mall/product/spu/components/SkuList.vue
@@ -118,7 +118,9 @@
     max-height="500"
     size="small"
     style="width: 99%"
+    @selection-change="handleSelectionChange"
   >
+    <el-table-column v-if="isComponent" type="selection" width="45" />
     <el-table-column align="center" label="图片" min-width="80">
       <template #default="{ row }">
         <el-image :src="row.picUrl" class="w-60px h-60px" @click="imagePreview(row.picUrl)" />
@@ -207,7 +209,8 @@ const props = defineProps({
     default: () => []
   },
   isBatch: propTypes.bool.def(false), // 是否作为批量操作组件
-  isDetail: propTypes.bool.def(false) // 是否作为 sku 详情组件
+  isDetail: propTypes.bool.def(false), // 是否作为 sku 详情组件
+  isComponent: propTypes.bool.def(false) // 是否作为 sku 选择组件
 })
 const formData: Ref<Spu | undefined> = ref<Spu>() // 表单数据
 const skuList = ref<Sku[]>([
@@ -263,6 +266,17 @@ const validateSku = (): boolean => {
   return validate
 }
 
+const emit = defineEmits<{
+  (e: 'selectionChange', value: Sku[]): void
+}>()
+/**
+ * 选择时触发
+ * @param Sku 传递过来的选中的 sku 是一个数组
+ */
+const handleSelectionChange = (val: Sku[]) => {
+  emit('selectionChange', val)
+}
+
 /**
  * 将传进来的值赋值给 skuList
  */
diff --git a/src/views/mall/product/spu/index.vue b/src/views/mall/product/spu/index.vue
index 76cb1166..8ffaab23 100644
--- a/src/views/mall/product/spu/index.vue
+++ b/src/views/mall/product/spu/index.vue
@@ -17,7 +17,6 @@
           @keyup.enter="handleQuery"
         />
       </el-form-item>
-      <!--  TODO 分类只能选择二级分类目前还没做,还是先以联调通顺为主 fixL: 已完善 -->
       <el-form-item label="商品分类" prop="categoryId">
         <el-tree-select
           v-model="queryParams.categoryId"
@@ -79,12 +78,6 @@
       />
     </el-tabs>
     <el-table v-loading="loading" :data="list">
-      <!-- TODO puhui:这几个属性哈,一行三个 fix
-      商品分类:服装鞋包/箱包
-商品市场价格:100.00
-成本价:0.00
-收藏:5
-虚拟销量:999  -->
       <el-table-column type="expand" width="30">
         <template #default="{ row }">
           <el-form class="demo-table-expand" label-position="left">
@@ -290,7 +283,8 @@ const queryParams = ref({
   pageSize: 10,
   tabType: 0,
   name: '',
-  categoryId: null
+  categoryId: null,
+  createTime: []
 }) // 查询参数
 const queryFormRef = ref() // 搜索的表单Ref
 
diff --git a/src/views/mall/promotion/seckill/activity/SeckillActivityForm.vue b/src/views/mall/promotion/seckill/activity/SeckillActivityForm.vue
new file mode 100644
index 00000000..c47c475f
--- /dev/null
+++ b/src/views/mall/promotion/seckill/activity/SeckillActivityForm.vue
@@ -0,0 +1,136 @@
+<template>
+  <Dialog v-model="dialogVisible" :title="dialogTitle" width="65%">
+    <Form
+      ref="formRef"
+      v-loading="formLoading"
+      :isCol="true"
+      :rules="rules"
+      :schema="allSchemas.formSchema"
+    >
+      <!-- 先选择 -->
+      <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>
+      </template>
+    </Form>
+    <template #footer>
+      <el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
+      <el-button @click="dialogVisible = false">取 消</el-button>
+    </template>
+  </Dialog>
+  <SpuAndSkuSelectForm ref="spuAndSkuSelectForm" @confirm="selectSpu" />
+</template>
+<script lang="ts" name="PromotionSeckillActivityForm" setup>
+import { 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() // 消息弹窗
+
+const dialogVisible = ref(false) // 弹窗的是否展示
+const dialogTitle = ref('') // 弹窗的标题
+const formLoading = ref(false) // 表单的加载中:1)修改时的数据加载;2)提交的按钮禁用
+const formType = ref('') // 表单的类型:create - 新增;update - 修改
+const formRef = ref() // 表单 Ref
+const spuAndSkuSelectForm = ref() // 商品和属性选择 Ref
+/** 打开弹窗 */
+const open = async (type: string, id?: number) => {
+  dialogVisible.value = true
+  dialogTitle.value = t('action.' + type)
+  formType.value = type
+  // 修改时,设置数据
+  if (id) {
+    formLoading.value = true
+    try {
+      const data = await SeckillActivityApi.getSeckillActivity(id)
+      formRef.value.setValues(data)
+    } finally {
+      formLoading.value = false
+    }
+  }
+}
+defineExpose({ open }) // 提供 open 方法,用于打开弹窗
+
+const spuList = ref<Spu[]>([]) // 选择的 spu
+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 () => {
+  // 校验表单
+  if (!formRef) return
+  const valid = await formRef.value.getElFormRef().validate()
+  if (!valid) return
+  // 提交请求
+  formLoading.value = true
+  try {
+    const data = formRef.value.formModel as SeckillActivityApi.SeckillActivityVO
+    if (formType.value === 'create') {
+      await SeckillActivityApi.createSeckillActivity(data)
+      message.success(t('common.createSuccess'))
+    } else {
+      await SeckillActivityApi.updateSeckillActivity(data)
+      message.success(t('common.updateSuccess'))
+    }
+    dialogVisible.value = false
+    // 发送操作成功的事件
+    emit('success')
+  } finally {
+    formLoading.value = false
+  }
+}
+</script>
+<style lang="scss" scoped>
+.demo-table-expand {
+  padding-left: 42px;
+
+  :deep(.el-form-item__label) {
+    width: 82px;
+    font-weight: bold;
+    color: #99a9bf;
+  }
+}
+</style>
diff --git a/src/views/mall/promotion/seckill/activity/components/SpuAndSkuSelectForm.vue b/src/views/mall/promotion/seckill/activity/components/SpuAndSkuSelectForm.vue
new file mode 100644
index 00000000..cf538fc2
--- /dev/null
+++ b/src/views/mall/promotion/seckill/activity/components/SpuAndSkuSelectForm.vue
@@ -0,0 +1,290 @@
+<template>
+  <Dialog v-model="dialogVisible" :appendToBody="true" :title="dialogTitle" width="70%">
+    <ContentWrap>
+      <el-row :gutter="20" class="mb-10px">
+        <el-col :span="6">
+          <el-input
+            v-model="queryParams.name"
+            class="!w-240px"
+            clearable
+            placeholder="请输入商品名称"
+            @keyup.enter="handleQuery"
+          />
+        </el-col>
+        <el-col :span="6">
+          <el-tree-select
+            v-model="queryParams.categoryId"
+            :data="categoryList"
+            :props="defaultProps"
+            check-strictly
+            class="w-1/1"
+            node-key="id"
+            placeholder="请选择商品分类"
+            @change="nodeClick"
+          />
+        </el-col>
+        <el-col :span="6">
+          <el-date-picker
+            v-model="queryParams.createTime"
+            :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
+            class="!w-240px"
+            end-placeholder="结束日期"
+            start-placeholder="开始日期"
+            type="daterange"
+            value-format="YYYY-MM-DD HH:mm:ss"
+          />
+        </el-col>
+        <el-col :span="6">
+          <el-button @click="handleQuery">
+            <Icon class="mr-5px" icon="ep:search" />
+            搜索
+          </el-button>
+          <el-button @click="resetQuery">
+            <Icon class="mr-5px" icon="ep:refresh" />
+            重置
+          </el-button>
+        </el-col>
+      </el-row>
+      <el-table
+        ref="spuListRef"
+        v-loading="loading"
+        :data="list"
+        :expand-row-keys="expandRowKeys"
+        row-key="id"
+        @expandChange="getPropertyList"
+        @selection-change="selectSpu"
+      >
+        <el-table-column v-if="isSelectSku" type="expand" width="30">
+          <template #default>
+            <SkuList
+              v-if="isExpand"
+              :isComponent="true"
+              :isDetail="true"
+              :prop-form-data="spuData"
+              :property-list="propertyList"
+              @selection-change="selectSku"
+            />
+          </template>
+        </el-table-column>
+        <el-table-column type="selection" width="55" />
+        <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>
+      <!-- 分页 -->
+      <Pagination
+        v-model:limit="queryParams.pageSize"
+        v-model:page="queryParams.pageNo"
+        :total="total"
+        @pagination="getList"
+      />
+    </ContentWrap>
+    <template #footer>
+      <el-button type="primary" @click="confirm">确 定</el-button>
+      <el-button @click="dialogVisible = false">取 消</el-button>
+    </template>
+  </Dialog>
+</template>
+
+<script lang="ts" name="SeckillActivitySpuAndSkuSelect" setup>
+import { SkuList } from '@/views/mall/product/spu/components'
+import { ElTable } from 'element-plus'
+import { dateFormatter } from '@/utils/formatTime'
+import { createImageViewer } from '@/components/ImageViewer'
+import { formatToFraction } from '@/utils'
+import { checkSelectedNode, defaultProps, handleTree } from '@/utils/tree'
+
+import * as ProductCategoryApi from '@/api/mall/product/category'
+import * as ProductSpuApi from '@/api/mall/product/spu'
+import { propTypes } from '@/utils/propTypes'
+
+const props = defineProps({
+  // 默认不需要(不需要的情况下只返回 spu,需要的情况下返回 选中的 spu 和 sku 列表)
+  // 其它活动需要选择商品和商品属性导入此组件即可,需添加组件属性 :isSelectSku='true'
+  isSelectSku: propTypes.bool.def(false) // 是否需要选择 sku 属性
+})
+
+const message = useMessage() // 消息弹窗
+const total = ref(0) // 列表的总页数
+const list = ref<any[]>([]) // 列表的数据
+const loading = ref(false) // 列表的加载中
+const dialogVisible = ref(false) // 弹窗的是否展示
+const dialogTitle = ref('') // 弹窗的标题
+const queryParams = ref({
+  pageNo: 1,
+  pageSize: 10,
+  tabType: 0, // 默认获取上架的商品
+  name: '',
+  categoryId: null,
+  createTime: []
+}) // 查询参数
+const propertyList = ref([]) // 商品属性列表
+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[]) => {
+  spuData.value = {}
+  propertyList.value = []
+  isExpand.value = false
+  // 如果展开个数为 0
+  if (expandedRows.length === 0) {
+    expandRowKeys.value = []
+    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
+  }
+  spuData.value = res
+  isExpand.value = true
+  expandRowKeys.value = [row.id!]
+}
+
+//============ 商品选择相关 ============
+const selectedSpu = ref<ProductSpuApi.Spu>() // 选中的商品 spu 只能选择一个
+const selectedSku = ref<ProductSpuApi.Sku[]>() // 选中的商品 sku
+const selectSku = (val: ProductSpuApi.Sku[]) => {
+  selectedSku.value = val
+}
+const selectSpu = (val: ProductSpuApi.Spu[]) => {
+  // 只选择一个
+  selectedSpu.value = val[0]
+  // 如果大于1个
+  if (val.length > 1) {
+    // 清空选择
+    spuListRef.value.clearSelection()
+    // 变更为最后一次选择的
+    spuListRef.value.toggleRowSelection(val.pop(), true)
+  }
+}
+// 确认选择时的触发事件
+const emits = defineEmits<{
+  (e: 'confirm', value: ProductSpuApi.Spu, value1?: ProductSpuApi.Sku[]): void
+}>()
+/**
+ * 确认选择返回选中的 spu 和 sku (如果需要选择sku的话)
+ */
+const confirm = () => {
+  if (typeof selectedSpu.value === 'undefined') {
+    message.warning('没有选择任何商品')
+    return
+  }
+  if (
+    (props.isSelectSku && typeof selectedSku.value === 'undefined') ||
+    selectedSku.value?.length === 0
+  ) {
+    message.warning('没有选择任何商品属性')
+    return
+  }
+
+  props.isSelectSku
+    ? emits('confirm', selectedSpu.value!, selectedSku.value!)
+    : emits('confirm', selectedSpu.value!)
+  // 关闭弹窗
+  dialogVisible.value = false
+}
+/** 打开弹窗 TODO 没做国际化 */
+const open = (title: string) => {
+  dialogTitle.value = title
+  dialogVisible.value = true
+}
+defineExpose({ open }) // 提供 open 方法,用于打开弹窗
+
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    const data = await ProductSpuApi.getSpuPage(queryParams.value)
+    list.value = data.list
+    total.value = data.total
+  } finally {
+    loading.value = false
+  }
+}
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  getList()
+}
+
+/** 重置按钮操作 */
+const resetQuery = () => {
+  queryParams.value = {
+    pageNo: 1,
+    pageSize: 10,
+    tabType: 0, // 默认获取上架的商品
+    name: '',
+    categoryId: null,
+    createTime: []
+  }
+  getList()
+}
+/** 商品图预览 */
+const imagePreview = (imgUrl: string) => {
+  createImageViewer({
+    zIndex: 99999999,
+    urlList: [imgUrl]
+  })
+}
+
+const categoryList = ref() // 分类树
+
+/**
+ * 校验所选是否为二级及以下节点
+ */
+const nodeClick = () => {
+  if (!checkSelectedNode(categoryList.value, queryParams.value.categoryId)) {
+    queryParams.value.categoryId = null
+    message.warning('必须选择二级及以下节点!!')
+  }
+}
+/** 初始化 **/
+onMounted(async () => {
+  await getList()
+  // 获得分类树
+  const data = await ProductCategoryApi.getCategoryList({})
+  categoryList.value = handleTree(data, 'id', 'parentId')
+})
+</script>
diff --git a/src/views/mall/promotion/seckill/activity/components/index.ts b/src/views/mall/promotion/seckill/activity/components/index.ts
new file mode 100644
index 00000000..69dd429a
--- /dev/null
+++ b/src/views/mall/promotion/seckill/activity/components/index.ts
@@ -0,0 +1,3 @@
+import SpuAndSkuSelectForm from './SpuAndSkuSelectForm.vue'
+
+export { SpuAndSkuSelectForm }
diff --git a/src/views/mall/promotion/seckill/activity/index.vue b/src/views/mall/promotion/seckill/activity/index.vue
new file mode 100644
index 00000000..de9f71db
--- /dev/null
+++ b/src/views/mall/promotion/seckill/activity/index.vue
@@ -0,0 +1,86 @@
+<template>
+  <!-- 搜索工作栏 -->
+  <ContentWrap>
+    <Search :schema="allSchemas.searchSchema" @reset="setSearchParams" @search="setSearchParams">
+      <!-- 新增等操作按钮 -->
+      <template #actionMore>
+        <el-button
+          v-hasPermi="['promotion:seckill-activity:create']"
+          plain
+          type="primary"
+          @click="openForm('create')"
+        >
+          <Icon class="mr-5px" icon="ep:plus" />
+          新增
+        </el-button>
+      </template>
+    </Search>
+  </ContentWrap>
+
+  <!-- 列表 -->
+  <ContentWrap>
+    <Table
+      v-model:currentPage="tableObject.currentPage"
+      v-model:pageSize="tableObject.pageSize"
+      :columns="allSchemas.tableColumns"
+      :data="tableObject.tableList"
+      :loading="tableObject.loading"
+      :pagination="{
+        total: tableObject.total
+      }"
+    >
+      <template #action="{ row }">
+        <el-button
+          v-hasPermi="['promotion:seckill-activity:update']"
+          link
+          type="primary"
+          @click="openForm('update', row.id)"
+        >
+          编辑
+        </el-button>
+        <el-button
+          v-hasPermi="['promotion:seckill-activity:delete']"
+          link
+          type="danger"
+          @click="handleDelete(row.id)"
+        >
+          删除
+        </el-button>
+      </template>
+    </Table>
+  </ContentWrap>
+
+  <!-- 表单弹窗:添加/修改 -->
+  <SeckillActivityForm ref="formRef" @success="getList" />
+</template>
+<script lang="ts" name="PromotionSeckillActivity" setup>
+import { allSchemas } from './seckillActivity.data'
+import * as SeckillActivityApi from '@/api/mall/promotion/seckill/seckillActivity'
+import SeckillActivityForm from './SeckillActivityForm.vue'
+
+// tableObject:表格的属性对象,可获得分页大小、条数等属性
+// tableMethods:表格的操作对象,可进行获得分页、删除记录等操作
+// 详细可见:https://doc.iocoder.cn/vue3/crud-schema/
+const { tableObject, tableMethods } = useTable({
+  getListApi: SeckillActivityApi.getSeckillActivityPage, // 分页接口
+  delListApi: SeckillActivityApi.deleteSeckillActivity // 删除接口
+})
+// 获得表格的各种操作
+const { getList, setSearchParams } = tableMethods
+
+/** 添加/修改操作 */
+const formRef = ref()
+const openForm = (type: string, id?: number) => {
+  formRef.value.open(type, id)
+}
+
+/** 删除按钮操作 */
+const handleDelete = (id: number) => {
+  tableMethods.delList(id, false)
+}
+
+/** 初始化 **/
+onMounted(() => {
+  getList()
+})
+</script>
diff --git a/src/views/mall/promotion/seckill/activity/seckillActivity.data.ts b/src/views/mall/promotion/seckill/activity/seckillActivity.data.ts
new file mode 100644
index 00000000..70524b91
--- /dev/null
+++ b/src/views/mall/promotion/seckill/activity/seckillActivity.data.ts
@@ -0,0 +1,261 @@
+import type { CrudSchema } from '@/hooks/web/useCrudSchemas'
+import { dateFormatter } from '@/utils/formatTime'
+import { getListAllSimple } from '@/api/mall/promotion/seckill/seckillConfig'
+
+// 表单校验
+export const rules = reactive({
+  spuId: [required],
+  name: [required],
+  startTime: [required],
+  endTime: [required],
+  sort: [required],
+  configIds: [required],
+  totalLimitCount: [required],
+  singleLimitCount: [required],
+  totalStock: [required]
+})
+
+// CrudSchema https://doc.iocoder.cn/vue3/crud-schema/
+const crudSchemas = reactive<CrudSchema[]>([
+  {
+    label: '秒杀活动名称',
+    field: 'name',
+    isSearch: true,
+    form: {
+      colProps: {
+        span: 24
+      }
+    },
+    table: {
+      width: 120
+    }
+  },
+  {
+    label: '活动开始时间',
+    field: 'startTime',
+    formatter: dateFormatter,
+    isSearch: true,
+    search: {
+      component: 'DatePicker',
+      componentProps: {
+        valueFormat: 'YYYY-MM-DD HH:mm:ss',
+        type: 'daterange',
+        defaultTime: [new Date('1 00:00:00'), new Date('1 23:59:59')]
+      }
+    },
+    form: {
+      component: 'DatePicker',
+      componentProps: {
+        type: 'date',
+        valueFormat: 'x'
+      }
+    },
+    table: {
+      width: 300
+    }
+  },
+  {
+    label: '活动结束时间',
+    field: 'endTime',
+    formatter: dateFormatter,
+    isSearch: true,
+    search: {
+      component: 'DatePicker',
+      componentProps: {
+        valueFormat: 'YYYY-MM-DD HH:mm:ss',
+        type: 'daterange',
+        defaultTime: [new Date('1 00:00:00'), new Date('1 23:59:59')]
+      }
+    },
+    form: {
+      component: 'DatePicker',
+      componentProps: {
+        type: 'date',
+        valueFormat: 'x'
+      }
+    },
+    table: {
+      width: 300
+    }
+  },
+  {
+    label: '秒杀时段',
+    field: 'configIds',
+    form: {
+      component: 'Select',
+      componentProps: {
+        multiple: true,
+        optionsAlias: {
+          labelField: 'name',
+          valueField: 'id'
+        }
+      },
+      api: getListAllSimple
+    },
+    table: {
+      width: 300
+    }
+  },
+  {
+    label: '新增订单数',
+    field: 'orderCount',
+    isForm: false,
+    form: {
+      component: 'InputNumber',
+      value: 0
+    },
+    table: {
+      width: 300
+    }
+  },
+  {
+    label: '付款人数',
+    field: 'userCount',
+    isForm: false,
+    form: {
+      component: 'InputNumber',
+      value: 0
+    },
+    table: {
+      width: 300
+    }
+  },
+  {
+    label: '订单实付金额',
+    field: 'totalPrice',
+    isForm: false,
+    form: {
+      component: 'InputNumber',
+      value: 0
+    },
+    table: {
+      width: 300
+    }
+  },
+  {
+    label: '总限购数量',
+    field: 'totalLimitCount',
+    form: {
+      component: 'InputNumber',
+      value: 0
+    },
+    table: {
+      width: 300
+    }
+  },
+  {
+    label: '单次限够数量',
+    field: 'singleLimitCount',
+    form: {
+      component: 'InputNumber',
+      value: 0
+    },
+    table: {
+      width: 300
+    }
+  },
+  {
+    label: '秒杀库存',
+    field: 'stock',
+    isForm: false,
+    form: {
+      component: 'InputNumber',
+      value: 0
+    },
+    table: {
+      width: 300
+    }
+  },
+  {
+    label: '秒杀总库存',
+    field: 'totalStock',
+    form: {
+      component: 'InputNumber',
+      value: 0
+    },
+    table: {
+      width: 300
+    }
+  },
+  {
+    label: '秒杀活动商品',
+    field: 'spuId',
+    form: {
+      colProps: {
+        span: 24
+      }
+    },
+    table: {
+      width: 200
+    }
+  },
+  {
+    label: '创建时间',
+    field: 'createTime',
+    formatter: dateFormatter,
+    search: {
+      component: 'DatePicker',
+      componentProps: {
+        valueFormat: 'YYYY-MM-DD HH:mm:ss',
+        type: 'daterange',
+        defaultTime: [new Date('1 00:00:00'), new Date('1 23:59:59')]
+      }
+    },
+    isForm: false,
+    table: {
+      width: 300
+    }
+  },
+  {
+    label: '排序',
+    field: 'sort',
+    form: {
+      component: 'InputNumber',
+      value: 0
+    },
+    table: {
+      width: 300
+    }
+  },
+  {
+    label: '状态',
+    field: 'status',
+    dictType: DICT_TYPE.COMMON_STATUS,
+    dictClass: 'number',
+    isForm: false,
+    isSearch: true,
+    form: {
+      component: 'Radio'
+    },
+    table: {
+      width: 80
+    }
+  },
+  {
+    label: '备注',
+    field: 'remark',
+    form: {
+      component: 'Input',
+      componentProps: {
+        type: 'textarea',
+        rows: 4
+      },
+      colProps: {
+        span: 24
+      }
+    },
+    table: {
+      width: 300
+    }
+  },
+  {
+    label: '操作',
+    field: 'action',
+    isForm: false,
+    table: {
+      width: 120,
+      fixed: 'right'
+    }
+  }
+])
+export const { allSchemas } = useCrudSchemas(crudSchemas)

From b1e7f149638243885ae97f6c31f5df24d9b6ffa2 Mon Sep 17 00:00:00 2001
From: puhui999 <puhui999@163.com>
Date: Sat, 24 Jun 2023 01:48:07 +0800
Subject: [PATCH 6/6] =?UTF-8?q?fix=EF=BC=9A=E5=AE=8C=E5=96=84=E7=A7=92?=
 =?UTF-8?q?=E6=9D=80=E6=B4=BB=E5=8A=A8=E7=AE=A1=E7=90=86=E2=91=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/mall/product/spu.ts                   |  10 ++
 .../mall/promotion/seckill/seckillActivity.ts |  19 ++-
 .../mall/product/spu/components/SkuList.vue   |  87 +++++++++-
 .../mall/product/spu/components/index.ts      |  44 ++++-
 .../seckill/activity/SeckillActivityForm.vue  |  50 +-----
 .../activity/components/SpuAndSkuList.vue     | 157 ++++++++++++++++++
 .../components/SpuAndSkuSelectForm.vue        |  32 +---
 .../seckill/activity/components/index.ts      |   3 +-
 8 files changed, 327 insertions(+), 75 deletions(-)
 create mode 100644 src/views/mall/promotion/seckill/activity/components/SpuAndSkuList.vue

diff --git a/src/api/mall/product/spu.ts b/src/api/mall/product/spu.ts
index b6bec97e..5ddaa92e 100644
--- a/src/api/mall/product/spu.ts
+++ b/src/api/mall/product/spu.ts
@@ -49,6 +49,16 @@ export interface Spu {
   recommendGood?: boolean // 是否优品
 }
 
+export interface SpuRespVO extends Spu {
+  price: number
+  salesCount: number
+  marketPrice: number
+  costPrice: number
+  stock: number
+  createTime: Date
+  status: number
+}
+
 // 获得 Spu 列表
 export const getSpuPage = (params: PageParam) => {
   return request.get({ url: '/product/spu/page', params })
diff --git a/src/api/mall/promotion/seckill/seckillActivity.ts b/src/api/mall/promotion/seckill/seckillActivity.ts
index 2c59319c..fc2d1871 100644
--- a/src/api/mall/promotion/seckill/seckillActivity.ts
+++ b/src/api/mall/promotion/seckill/seckillActivity.ts
@@ -1,8 +1,9 @@
 import request from '@/config/axios'
+import { Sku, SpuRespVO } from '@/api/mall/product/spu'
 
 export interface SeckillActivityVO {
   id: number
-  spuId: number
+  spuIds: number[]
   name: string
   status: number
   remark: string
@@ -17,6 +18,22 @@ export interface SeckillActivityVO {
   singleLimitCount: number
   stock: number
   totalStock: number
+  products: SeckillProductVO[]
+}
+
+export interface SeckillProductVO {
+  spuId: number
+  skuId: number
+  seckillPrice: number
+  stock: number
+}
+
+type SkuExtension = Sku & {
+  productConfig: SeckillProductVO
+}
+
+export interface SpuExtension extends SpuRespVO {
+  skus: SkuExtension[] // 重写类型
 }
 
 // 查询秒杀活动列表
diff --git a/src/views/mall/product/spu/components/SkuList.vue b/src/views/mall/product/spu/components/SkuList.vue
index 6aa26a2b..04718f3d 100644
--- a/src/views/mall/product/spu/components/SkuList.vue
+++ b/src/views/mall/product/spu/components/SkuList.vue
@@ -1,7 +1,7 @@
 <template>
   <!-- 情况一:添加/修改 -->
   <el-table
-    v-if="!isDetail"
+    v-if="!isDetail && !isActivityComponent"
     :data="isBatch ? skuList : formData!.skus"
     border
     class="tabNumWidth"
@@ -190,6 +190,66 @@
       </el-table-column>
     </template>
   </el-table>
+
+  <!-- 情况三:作为活动组件 -->
+  <el-table
+    v-if="isActivityComponent"
+    :data="formData!.skus"
+    border
+    max-height="500"
+    size="small"
+    style="width: 99%"
+  >
+    <el-table-column v-if="isComponent" type="selection" width="45" />
+    <el-table-column align="center" label="图片" min-width="80">
+      <template #default="{ row }">
+        <el-image :src="row.picUrl" class="w-60px h-60px" @click="imagePreview(row.picUrl)" />
+      </template>
+    </el-table-column>
+    <template v-if="formData!.specType">
+      <!--  根据商品属性动态添加 -->
+      <el-table-column
+        v-for="(item, index) in tableHeaders"
+        :key="index"
+        :label="item.label"
+        align="center"
+        min-width="80"
+      >
+        <template #default="{ row }">
+          <span style="font-weight: bold; color: #40aaff">
+            {{ row.properties[index]?.valueName }}
+          </span>
+        </template>
+      </el-table-column>
+    </template>
+    <el-table-column align="center" label="商品条码" min-width="100">
+      <template #default="{ row }">
+        {{ row.barCode }}
+      </template>
+    </el-table-column>
+    <el-table-column align="center" label="销售价(元)" min-width="80">
+      <template #default="{ row }">
+        {{ row.price }}
+      </template>
+    </el-table-column>
+    <el-table-column align="center" label="市场价(元)" min-width="80">
+      <template #default="{ row }">
+        {{ row.marketPrice }}
+      </template>
+    </el-table-column>
+    <el-table-column align="center" label="成本价(元)" min-width="80">
+      <template #default="{ row }">
+        {{ row.costPrice }}
+      </template>
+    </el-table-column>
+    <el-table-column align="center" label="库存" min-width="80">
+      <template #default="{ row }">
+        {{ row.stock }}
+      </template>
+    </el-table-column>
+    <!--  方便扩展每个活动配置的属性不一样  -->
+    <slot name="extension"></slot>
+  </el-table>
 </template>
 <script lang="ts" name="SkuList" setup>
 import { PropType, Ref } from 'vue'
@@ -198,6 +258,7 @@ import { propTypes } from '@/utils/propTypes'
 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'
 
 const props = defineProps({
   propFormData: {
@@ -208,9 +269,14 @@ const props = defineProps({
     type: Array,
     default: () => []
   },
+  ruleConfig: {
+    type: Array as PropType<RuleConfig[]>,
+    default: () => []
+  },
   isBatch: propTypes.bool.def(false), // 是否作为批量操作组件
   isDetail: propTypes.bool.def(false), // 是否作为 sku 详情组件
-  isComponent: propTypes.bool.def(false) // 是否作为 sku 选择组件
+  isComponent: propTypes.bool.def(false), // 是否作为 sku 选择组件
+  isActivityComponent: propTypes.bool.def(false) // 是否作为 sku 活动配置组件
 })
 const formData: Ref<Spu | undefined> = ref<Spu>() // 表单数据
 const skuList = ref<Sku[]>([
@@ -231,6 +297,7 @@ const skuList = ref<Sku[]>([
 /** 商品图预览 */
 const imagePreview = (imgUrl: string) => {
   createImageViewer({
+    zIndex: 9999999,
     urlList: [imgUrl]
   })
 }
@@ -258,9 +325,19 @@ const validateSku = (): boolean => {
   const checks = ['price', 'marketPrice', 'costPrice']
   let validate = true // 默认通过
   for (const sku of formData.value!.skus) {
-    if (checks.some((check) => sku[check] < 0.01)) {
-      validate = false // 只要有一个不通过则直接不通过
-      break
+    // 作为活动组件的校验
+    if (props.isActivityComponent) {
+      for (const rule of props.ruleConfig) {
+        if (sku[rule.name] < rule.geValue) {
+          validate = false // 只要有一个不通过则直接不通过
+          break
+        }
+      }
+    } else {
+      if (checks.some((check) => sku[check] < 0.01)) {
+        validate = false // 只要有一个不通过则直接不通过
+        break
+      }
     }
   }
   return validate
diff --git a/src/views/mall/product/spu/components/index.ts b/src/views/mall/product/spu/components/index.ts
index 549a9815..8c269e56 100644
--- a/src/views/mall/product/spu/components/index.ts
+++ b/src/views/mall/product/spu/components/index.ts
@@ -5,11 +5,53 @@ import ProductAttributes from './ProductAttributes.vue'
 import ProductPropertyAddForm from './ProductPropertyAddForm.vue'
 import SkuList from './SkuList.vue'
 
+import { Spu } from '@/api/mall/product/spu'
+
+interface Properties {
+  id: number
+  name: string
+  values?: Properties[]
+}
+
+interface RuleConfig {
+  name: string // 需要校验的字段
+  geValue: number // TODO 暂定大于一个数字
+}
+
+/**
+ *  商品通用函数
+ * @param spu
+ */
+const getPropertyList = (spu: Spu): Properties[] => {
+  //  直接拿返回的 skus 属性逆向生成出 propertyList
+  const properties: Properties[] = []
+  // 只有是多规格才处理
+  if (spu.specType) {
+    spu.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! })
+        }
+      })
+    })
+  }
+  return properties
+}
+
 export {
   BasicInfoForm,
   DescriptionForm,
   OtherSettingsForm,
   ProductAttributes,
   ProductPropertyAddForm,
-  SkuList
+  SkuList,
+  getPropertyList,
+  Properties,
+  RuleConfig
 }
diff --git a/src/views/mall/promotion/seckill/activity/SeckillActivityForm.vue b/src/views/mall/promotion/seckill/activity/SeckillActivityForm.vue
index c47c475f..37cc836d 100644
--- a/src/views/mall/promotion/seckill/activity/SeckillActivityForm.vue
+++ b/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'))
diff --git a/src/views/mall/promotion/seckill/activity/components/SpuAndSkuList.vue b/src/views/mall/promotion/seckill/activity/components/SpuAndSkuList.vue
new file mode 100644
index 00000000..fc7ed15a
--- /dev/null
+++ b/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>
diff --git a/src/views/mall/promotion/seckill/activity/components/SpuAndSkuSelectForm.vue b/src/views/mall/promotion/seckill/activity/components/SpuAndSkuSelectForm.vue
index cf538fc2..c3de9a2b 100644
--- a/src/views/mall/promotion/seckill/activity/components/SpuAndSkuSelectForm.vue
+++ b/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!)
diff --git a/src/views/mall/promotion/seckill/activity/components/index.ts b/src/views/mall/promotion/seckill/activity/components/index.ts
index 69dd429a..ef92a41a 100644
--- a/src/views/mall/promotion/seckill/activity/components/index.ts
+++ b/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 }