feat：【mall 商城】秒杀活动表单优化（antd）

2025-10-31 10:44:22 +08:00
parent 38df83e281
commit 83d3188477
3 changed files with 258 additions and 47 deletions
--- a/apps/web-antd/src/views/mall/promotion/seckill/activity/data.ts
+++ b/apps/web-antd/src/views/mall/promotion/seckill/activity/data.ts
@@ -4,6 +4,9 @@ import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import { DICT_TYPE } from '@vben/constants';
 import { getDictOptions } from '@vben/hooks';

+import { z } from '#/adapter/form';
+import { getSimpleSeckillConfigList } from '#/api/mall/promotion/seckill/seckillConfig';
+
 /** 列表的搜索表单 */
 export function useGridFormSchema(): VbenFormSchema[] {
  return [
@@ -29,6 +32,115 @@ export function useGridFormSchema(): VbenFormSchema[] {
  ];
 }

+/** 新增/编辑的表单 */
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    // 隐藏的 ID 字段
+    {
+      component: 'Input',
+      fieldName: 'id',
+      dependencies: {
+        triggerFields: [''],
+        show: () => false,
+      },
+    },
+    {
+      fieldName: 'name',
+      label: '秒杀活动名称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入活动名称',
+      },
+      rules: 'required',
+      formItemClass: 'col-span-2',
+    },
+    {
+      fieldName: 'startTime',
+      label: '活动开始时间',
+      component: 'DatePicker',
+      componentProps: {
+        placeholder: '请选择活动开始时间',
+        showTime: false,
+        format: 'YYYY-MM-DD',
+        valueFormat: 'x',
+        class: 'w-full',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'endTime',
+      label: '活动结束时间',
+      component: 'DatePicker',
+      componentProps: {
+        placeholder: '请选择活动结束时间',
+        showTime: false,
+        format: 'YYYY-MM-DD',
+        valueFormat: 'x',
+        class: 'w-full',
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'configIds',
+      label: '秒杀时段',
+      component: 'ApiSelect',
+      componentProps: {
+        placeholder: '请选择秒杀时段',
+        mode: 'multiple',
+        api: getSimpleSeckillConfigList,
+        labelField: 'name',
+        valueField: 'id',
+        class: 'w-full',
+      },
+      rules: 'required',
+      formItemClass: 'col-span-2',
+    },
+    {
+      fieldName: 'totalLimitCount',
+      label: '总限购数量',
+      component: 'InputNumber',
+      componentProps: {
+        placeholder: '请输入总限购数量',
+        min: 0,
+        class: 'w-full',
+      },
+      rules: z.number().min(0).default(0),
+    },
+    {
+      fieldName: 'singleLimitCount',
+      label: '单次限购数量',
+      component: 'InputNumber',
+      componentProps: {
+        placeholder: '请输入单次限购数量',
+        min: 0,
+        class: 'w-full',
+      },
+      rules: z.number().min(0).default(0),
+    },
+    {
+      fieldName: 'sort',
+      label: '排序',
+      component: 'InputNumber',
+      componentProps: {
+        placeholder: '请输入排序',
+        min: 0,
+        class: 'w-full',
+      },
+      rules: z.number().min(0).default(0),
+    },
+    {
+      fieldName: 'remark',
+      label: '备注',
+      component: 'Textarea',
+      componentProps: {
+        placeholder: '请输入备注',
+        rows: 4,
+      },
+      formItemClass: 'col-span-2',
+    },
+  ];
+}
+
 /** 列表的字段 */
 export function useGridColumns(): VxeTableGridOptions['columns'] {
  return [
--- a/apps/web-antd/src/views/mall/promotion/seckill/activity/index.vue
+++ b/apps/web-antd/src/views/mall/promotion/seckill/activity/index.vue
@@ -5,7 +5,6 @@ import type { MallSeckillActivityApi } from '#/api/mall/promotion/seckill/seckil
 import { onMounted } from 'vue';

 import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
-import { $t } from '@vben/locales';

 import { message, Tag } from 'ant-design-vue';

@@ -16,6 +15,7 @@ import {
  getSeckillActivityPage,
 } from '#/api/mall/promotion/seckill/seckillActivity';
 import { getSimpleSeckillConfigList } from '#/api/mall/promotion/seckill/seckillConfig';
+import { $t } from '#/locales';

 import { useGridColumns, useGridFormSchema } from './data';
 import { formatConfigNames, formatTimeRange, setConfigList } from './formatter';
--- a/apps/web-antd/src/views/mall/promotion/seckill/activity/modules/form.vue
+++ b/apps/web-antd/src/views/mall/promotion/seckill/activity/modules/form.vue
@@ -1,11 +1,11 @@
 <script lang="ts" setup>
 import type { MallSeckillActivityApi } from '#/api/mall/promotion/seckill/seckillActivity';

-import { computed, ref } from 'vue';
+import { computed, nextTick, ref } from 'vue';

 import { useVbenModal } from '@vben/common-ui';

-import { message } from 'ant-design-vue';
+import { Button, message } from 'ant-design-vue';

 import { useVbenForm } from '#/adapter/form';
 import {
@@ -15,59 +15,53 @@ import {
 } from '#/api/mall/promotion/seckill/seckillActivity';
 import { $t } from '#/locales';

+import { useFormSchema } from '../data';
+
 const emit = defineEmits(['success']);
 const formData = ref<MallSeckillActivityApi.SeckillActivity>();
+
 const getTitle = computed(() => {
  return formData.value?.id
    ? $t('ui.actionTitle.edit', ['秒杀活动'])
    : $t('ui.actionTitle.create', ['秒杀活动']);
 });

-// 简化的表单配置，实际项目中应该有完整的字段配置
-const formSchema = [
-  {
-    fieldName: 'id',
-    component: 'Input',
-    dependencies: {
-      triggerFields: [''],
-      show: () => false,
-    },
-  },
-  {
-    fieldName: 'name',
-    label: '活动名称',
-    component: 'Input',
-    componentProps: {
-      placeholder: '请输入活动名称',
-    },
-    rules: 'required',
-  },
-  {
-    fieldName: 'status',
-    label: '活动状态',
-    component: 'Select',
-    componentProps: {
-      placeholder: '请选择活动状态',
-      options: [
-        { label: '开启', value: 0 },
-        { label: '关闭', value: 1 },
-      ],
-    },
-    rules: 'required',
-  },
-];
+// ================= 商品选择相关 =================
+const spuId = ref<number>();
+const spuName = ref<string>('');
+const skuTableData = ref<any[]>([]);
+
+// 选择商品（占位函数，实际需要对接商品选择组件）
+const handleSelectProduct = () => {
+  message.info('商品选择功能需要对接商品选择组件');
+  // TODO: 打开商品选择弹窗
+  // 实际使用时需要：
+  // 1. 打开商品选择弹窗
+  // 2. 选择商品后调用以下逻辑设置数据：
+  //    spuId.value = selectedSpu.id;
+  //    spuName.value = selectedSpu.name;
+  //    skuTableData.value = selectedSkus.map(sku => ({
+  //      skuId: sku.id,
+  //      skuName: sku.name || '',
+  //      picUrl: sku.picUrl || selectedSpu.picUrl || '',
+  //      price: sku.price || 0,
+  //      stock: 0,
+  //      seckillPrice: 0,
+  //    }));
+};
+
+// ================= end =================

 const [Form, formApi] = useVbenForm({
  commonConfig: {
    componentProps: {
      class: 'w-full',
    },
-    formItemClass: 'col-span-2',
-    labelWidth: 80,
  },
  layout: 'horizontal',
-  schema: formSchema,
+  schema: useFormSchema(),
  showDefaultActions: false,
+  wrapperClass: 'grid-cols-2',
 });

 const [Modal, modalApi] = useVbenModal({
@@ -76,15 +70,46 @@ const [Modal, modalApi] = useVbenModal({
    if (!valid) {
      return;
    }
+
+    // 验证商品和 SKU 配置
+    if (!spuId.value) {
+      message.error('请选择秒杀商品');
+      return;
+    }
+
+    if (skuTableData.value.length === 0) {
+      message.error('请至少配置一个 SKU');
+      return;
+    }
+
+    // 验证 SKU 配置
+    const hasInvalidSku = skuTableData.value.some(
+      (sku) => sku.stock < 1 || sku.seckillPrice < 0.01,
+    );
+    if (hasInvalidSku) {
+      message.error('请正确配置 SKU 的秒杀库存（≥1）和秒杀价格（≥0.01）');
+      return;
+    }
+
    modalApi.lock();
-    // 提交表单
-    const data =
-      (await formApi.getValues()) as MallSeckillActivityApi.SeckillActivity;
    try {
+      const values = await formApi.getValues();
+
+      // 构建提交数据
+      const data: any = {
+        ...values,
+        spuId: spuId.value,
+        products: skuTableData.value.map((sku) => ({
+          skuId: sku.skuId,
+          stock: sku.stock,
+          seckillPrice: Math.round(sku.seckillPrice * 100), // 转换为分
+        })),
+      };
+
      await (formData.value?.id
        ? updateSeckillActivity(data)
        : createSeckillActivity(data));
-      // 关闭并提示
+
      await modalApi.close();
      emit('success');
      message.success($t('ui.actionMessage.operationSuccess'));
@@ -95,18 +120,27 @@ const [Modal, modalApi] = useVbenModal({
  async onOpenChange(isOpen: boolean) {
    if (!isOpen) {
      formData.value = undefined;
+      spuId.value = undefined;
+      spuName.value = '';
+      skuTableData.value = [];
      return;
    }
-    // 加载数据
+
    const data = modalApi.getData<MallSeckillActivityApi.SeckillActivity>();
    if (!data || !data.id) {
      return;
    }
+
    modalApi.lock();
    try {
      formData.value = await getSeckillActivity(data.id);
-      // 设置到 values
+      await nextTick();
      await formApi.setValues(formData.value);
+
+      // TODO: 加载商品和 SKU 信息
+      // 需要调用商品 API 获取 SPU 详情
+      // spuId.value = formData.value.spuId;
+      // await loadProductDetails(formData.value.spuId, formData.value.products);
    } finally {
      modalApi.unlock();
    }
@@ -115,7 +149,72 @@ const [Modal, modalApi] = useVbenModal({
 </script>

 <template>
-  <Modal class="w-2/5" :title="getTitle">
-    <Form class="mx-4" />
+  <Modal class="w-4/5" :title="getTitle">
+    <div class="mx-4">
+      <Form />
+
+      <!-- 商品选择区域 -->
+      <div class="mt-4">
+        <div class="mb-2 flex items-center">
+          <span class="text-sm font-medium">秒杀活动商品:</span>
+          <Button class="ml-2" type="primary" @click="handleSelectProduct">
+            选择商品
+          </Button>
+          <span v-if="spuName" class="ml-4 text-sm text-gray-600">
+            已选择: {{ spuName }}
+          </span>
+        </div>
+
+        <!-- SKU 配置表格 -->
+        <div v-if="skuTableData.length > 0" class="mt-4">
+          <table class="w-full border-collapse border border-gray-300">
+            <thead>
+              <tr class="bg-gray-100">
+                <th class="border border-gray-300 px-4 py-2">商品图片</th>
+                <th class="border border-gray-300 px-4 py-2">SKU 名称</th>
+                <th class="border border-gray-300 px-4 py-2">原价(元)</th>
+                <th class="border border-gray-300 px-4 py-2">秒杀库存</th>
+                <th class="border border-gray-300 px-4 py-2">秒杀价格(元)</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="(sku, index) in skuTableData" :key="index">
+                <td class="border border-gray-300 px-4 py-2 text-center">
+                  <img
+                    v-if="sku.picUrl"
+                    :src="sku.picUrl"
+                    alt="商品图片"
+                    class="h-16 w-16 object-cover"
+                  />
+                </td>
+                <td class="border border-gray-300 px-4 py-2">
+                  {{ sku.skuName }}
+                </td>
+                <td class="border border-gray-300 px-4 py-2 text-center">
+                  ¥{{ (sku.price / 100).toFixed(2) }}
+                </td>
+                <td class="border border-gray-300 px-4 py-2">
+                  <input
+                    v-model.number="sku.stock"
+                    type="number"
+                    min="0"
+                    class="w-full rounded border border-gray-300 px-2 py-1"
+                  />
+                </td>
+                <td class="border border-gray-300 px-4 py-2">
+                  <input
+                    v-model.number="sku.seckillPrice"
+                    type="number"
+                    min="0"
+                    step="0.01"
+                    class="w-full rounded border border-gray-300 px-2 py-1"
+                  />
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
  </Modal>
 </template>