From b9466282fc52ba23083991a575b9145eaed3c364 Mon Sep 17 00:00:00 2001
From: puhui999 <puhui999@163.com>
Date: Sat, 20 Dec 2025 10:10:19 +0800
Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9A=E3=80=90ele=E3=80=91=E3=80=90mall?=
 =?UTF-8?q?=E3=80=91bargain=20=E4=BB=A3=E7=A0=81=E5=AF=B9=E9=BD=90=20antd?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../mall/promotion/bargain/activity/data.ts   |  74 +---
 .../bargain/activity/modules/form.vue         | 397 +++++++++++-------
 .../mall/promotion/bargain/record/data.ts     |   9 +-
 3 files changed, 255 insertions(+), 225 deletions(-)

diff --git a/apps/web-ele/src/views/mall/promotion/bargain/activity/data.ts b/apps/web-ele/src/views/mall/promotion/bargain/activity/data.ts
index 86e0af7da..06762a868 100644
--- a/apps/web-ele/src/views/mall/promotion/bargain/activity/data.ts
+++ b/apps/web-ele/src/views/mall/promotion/bargain/activity/data.ts
@@ -24,7 +24,7 @@ export function useFormSchema(): VbenFormSchema[] {
         placeholder: '请输入活动名称',
       },
       rules: 'required',
-      // TODO @puhui999：这里和 antd 里的不太一样，可以看看。
+      formItemClass: 'col-span-2',
     },
     {
       fieldName: 'startTime',
@@ -33,8 +33,8 @@ export function useFormSchema(): VbenFormSchema[] {
       componentProps: {
         format: 'YYYY-MM-DD HH:mm:ss',
         valueFormat: 'YYYY-MM-DD HH:mm:ss',
+        type: 'datetime',
         placeholder: '请选择开始时间',
-        class: '!w-full',
       },
       rules: 'required',
     },
@@ -45,48 +45,8 @@ export function useFormSchema(): VbenFormSchema[] {
       componentProps: {
         format: 'YYYY-MM-DD HH:mm:ss',
         valueFormat: 'YYYY-MM-DD HH:mm:ss',
+        type: 'datetime',
         placeholder: '请选择结束时间',
-        class: '!w-full',
-      },
-      rules: 'required',
-    },
-    {
-      fieldName: 'bargainFirstPrice',
-      label: '砍价起始价格(元)',
-      component: 'InputNumber',
-      componentProps: {
-        min: 0,
-        precision: 2,
-        step: 0.01,
-        placeholder: '请输入砍价起始价格',
-        controlsPosition: 'right',
-        class: '!w-full',
-      },
-      rules: 'required',
-    },
-    {
-      fieldName: 'bargainMinPrice',
-      label: '砍价底价(元)',
-      component: 'InputNumber',
-      componentProps: {
-        min: 0,
-        precision: 2,
-        step: 0.01,
-        placeholder: '请输入砍价底价',
-        controlsPosition: 'right',
-        class: '!w-full',
-      },
-      rules: 'required',
-    },
-    {
-      fieldName: 'stock',
-      label: '活动库存',
-      component: 'InputNumber',
-      componentProps: {
-        min: 1,
-        placeholder: '请输入活动库存',
-        controlsPosition: 'right',
-        class: '!w-full',
       },
       rules: 'required',
     },
@@ -96,9 +56,8 @@ export function useFormSchema(): VbenFormSchema[] {
       component: 'InputNumber',
       componentProps: {
         min: 1,
-        placeholder: '请输入助力人数',
+        placeholder: '达到该人数才能砍到低价',
         controlsPosition: 'right',
-        class: '!w-full',
       },
       rules: 'required',
     },
@@ -108,9 +67,8 @@ export function useFormSchema(): VbenFormSchema[] {
       component: 'InputNumber',
       componentProps: {
         min: 1,
-        placeholder: '请输入砍价次数',
+        placeholder: '最大帮砍次数',
         controlsPosition: 'right',
-        class: '!w-full',
       },
       rules: 'required',
     },
@@ -120,9 +78,8 @@ export function useFormSchema(): VbenFormSchema[] {
       component: 'InputNumber',
       componentProps: {
         min: 1,
-        placeholder: '请输入购买限制',
+        placeholder: '最大购买次数',
         controlsPosition: 'right',
-        class: '!w-full',
       },
       rules: 'required',
     },
@@ -134,9 +91,8 @@ export function useFormSchema(): VbenFormSchema[] {
         min: 0,
         precision: 2,
         step: 0.01,
-        placeholder: '请输入最小砍价金额',
+        placeholder: '用户每次砍价的最小金额',
         controlsPosition: 'right',
-        class: '!w-full',
       },
     },
     {
@@ -147,11 +103,17 @@ export function useFormSchema(): VbenFormSchema[] {
         min: 0,
         precision: 2,
         step: 0.01,
-        placeholder: '请输入最大砍价金额',
+        placeholder: '用户每次砍价的最大金额',
         controlsPosition: 'right',
-        class: '!w-full',
       },
     },
+    {
+      fieldName: 'spuId',
+      label: '砍价商品',
+      component: 'Input',
+      rules: 'required',
+      formItemClass: 'col-span-2',
+    },
   ];
 }
 
@@ -223,15 +185,13 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
       field: 'bargainFirstPrice',
       title: '起始价格',
       minWidth: 100,
-      // TODO @puhui999：这里和 antd 不太一样，得看看
-      formatter: 'formatFenToYuanAmount',
+      formatter: 'formatAmount2',
     },
     {
       field: 'bargainMinPrice',
       title: '砍价底价',
       minWidth: 100,
-      // TODO @puhui999：这里和 antd 不太一样，得看看
-      formatter: 'formatFenToYuanAmount',
+      formatter: 'formatAmount2',
     },
     {
       field: 'recordUserCount',
diff --git a/apps/web-ele/src/views/mall/promotion/bargain/activity/modules/form.vue b/apps/web-ele/src/views/mall/promotion/bargain/activity/modules/form.vue
index bd4d82975..56a6e0061 100644
--- a/apps/web-ele/src/views/mall/promotion/bargain/activity/modules/form.vue
+++ b/apps/web-ele/src/views/mall/promotion/bargain/activity/modules/form.vue
@@ -1,13 +1,20 @@
 <script lang="ts" setup>
+import type { MallSpuApi } from '#/api/mall/product/spu';
 import type { MallBargainActivityApi } from '#/api/mall/promotion/bargain/bargainActivity';
+import type {
+  RuleConfig,
+  SpuProperty,
+} from '#/views/mall/product/spu/components';
 
-import { computed, nextTick, ref } from 'vue';
+import { computed, ref } from 'vue';
 
 import { useVbenModal } from '@vben/common-ui';
+import { cloneDeep, convertToInteger, formatToFraction } from '@vben/utils';
 
-import { ElMessage } from 'element-plus';
+import { ElButton, ElInputNumber, ElMessage } from 'element-plus';
 
 import { useVbenForm } from '#/adapter/form';
+import { VxeColumn } from '#/adapter/vxe-table';
 import { getSpu } from '#/api/mall/product/spu';
 import {
   createBargainActivity,
@@ -15,7 +22,11 @@ import {
   updateBargainActivity,
 } from '#/api/mall/promotion/bargain/bargainActivity';
 import { $t } from '#/locales';
-import { SpuSkuSelect } from '#/views/mall/product/spu/components';
+import {
+  getPropertyList,
+  SpuAndSkuList,
+  SpuSkuSelect,
+} from '#/views/mall/product/spu/components';
 
 import { useFormSchema } from '../data';
 
@@ -30,47 +41,6 @@ const getTitle = computed(() => {
     : $t('ui.actionTitle.create', ['砍价活动']);
 });
 
-// ================= 商品选择相关 =================
-const spuId = ref<number>();
-const skuId = ref<number>();
-const spuName = ref<string>('');
-const skuInfo = ref<{
-  picUrl: string;
-  price: number;
-  skuName: string;
-}>();
-
-const spuSkuSelectRef = ref(); // 商品选择弹窗 Ref
-
-/** 打开商品选择弹窗 */
-const handleSelectProduct = () => {
-  spuSkuSelectRef.value?.open();
-};
-
-/** 选择商品后的回调 */
-async function handleSpuSelected(selectedSpuId: number, skuIds?: number[]) {
-  const spu = await getSpu(selectedSpuId);
-  if (!spu) return;
-
-  spuId.value = spu.id;
-  spuName.value = spu.name || '';
-
-  // 砍价活动只选择一个 SKU
-  if (skuIds && skuIds.length > 0) {
-    const selectedSku = spu.skus?.find((sku) => sku.id === skuIds[0]);
-    if (selectedSku) {
-      skuId.value = selectedSku.id;
-      skuInfo.value = {
-        skuName: selectedSku.name || '',
-        picUrl: selectedSku.picUrl || spu.picUrl || '',
-        price: Number(selectedSku.price) || 0,
-      };
-    }
-  }
-}
-
-// ================= end =================
-
 const [Form, formApi] = useVbenForm({
   commonConfig: {
     componentProps: {
@@ -78,46 +48,151 @@ const [Form, formApi] = useVbenForm({
     },
     labelWidth: 130,
   },
-  wrapperClass: 'grid-cols-2',
   layout: 'horizontal',
   schema: useFormSchema(),
   showDefaultActions: false,
 });
 
+// ================= 商品选择相关 =================
+
+const spuSkuSelectRef = ref(); // 商品和属性选择 Ref
+const spuAndSkuListRef = ref(); // SPU 和 SKU 列表组件 Ref
+
+const ruleConfig: RuleConfig[] = [
+  {
+    name: 'productConfig.bargainFirstPrice',
+    rule: (arg) => arg > 0,
+    message: '商品砍价起始价格必须大于 0 ！！！',
+  },
+  {
+    name: 'productConfig.bargainMinPrice',
+    rule: (arg) => arg >= 0,
+    message: '商品砍价底价不能小于 0 ！！！',
+  },
+  {
+    name: 'productConfig.stock',
+    rule: (arg) => arg >= 1,
+    message: '商品活动库存必须大于等于 1 ！！！',
+  },
+];
+
+const spuList = ref<MallSpuApi.Spu[]>([]); // 选择的 SPU 列表
+const spuPropertyList = ref<SpuProperty<MallSpuApi.Spu>[]>([]); // SPU 属性列表
+
+/** 打开商品选择器 */
+function openSpuSelect() {
+  spuSkuSelectRef.value?.open();
+}
+
+/** 选择商品后的回调 */
+async function handleSpuSelected(spuId: number, skuIds?: number[]) {
+  await formApi.setFieldValue('spuId', spuId);
+  await getSpuDetails(spuId, skuIds);
+}
+
+/** 获取 SPU 详情 */
+async function getSpuDetails(
+  spuId: number,
+  skuIds?: number[],
+  products?: MallBargainActivityApi.BargainProduct[],
+) {
+  const res = await getSpu(spuId);
+  if (!res) {
+    return;
+  }
+
+  spuList.value = [];
+
+  // 筛选指定的 SKU（砍价活动只选择一个 SKU）
+  const selectSkus =
+    skuIds === undefined
+      ? res.skus
+      : res.skus?.filter((sku) => skuIds.includes(sku.id!));
+
+  // 为每个 SKU 配置砍价活动相关的配置
+  selectSkus?.forEach((sku) => {
+    let config: MallBargainActivityApi.BargainProduct = {
+      spuId: res.id!,
+      skuId: sku.id!,
+      bargainFirstPrice: 1,
+      bargainMinPrice: 1,
+      stock: 1,
+    };
+    // 如果是编辑模式，回填已有配置
+    if (products !== undefined) {
+      const product = products.find((item) => item.skuId === sku.id);
+      if (product) {
+        // 分转元
+        product.bargainFirstPrice = formatToFraction(
+          product.bargainFirstPrice,
+        ) as unknown as number;
+        product.bargainMinPrice = formatToFraction(
+          product.bargainMinPrice,
+        ) as unknown as number;
+      }
+      config = product || config;
+    }
+    // 动态添加 productConfig 属性到 SKU
+    (
+      sku as MallSpuApi.Sku & {
+        productConfig: MallBargainActivityApi.BargainProduct;
+      }
+    ).productConfig = config;
+  });
+  res.skus = selectSkus;
+
+  const spuProperties: SpuProperty<MallSpuApi.Spu>[] = [
+    {
+      spuId: res.id!,
+      spuDetail: res,
+      propertyList: getPropertyList(res),
+    },
+  ];
+
+  // 直接赋值，因为砍价活动只选择一个 SPU
+  spuList.value = [res];
+  spuPropertyList.value = spuProperties;
+}
+
+// ================= end =================
+
 const [Modal, modalApi] = useVbenModal({
   async onConfirm() {
     const { valid } = await formApi.validate();
     if (!valid) {
       return;
     }
-
-    // 验证商品和 SKU 选择
-    if (!spuId.value) {
-      ElMessage.error('请选择砍价商品');
-      return;
-    }
-    if (!skuId.value) {
-      ElMessage.error('请选择商品 SKU');
-      return;
-    }
-
-    // 提交表单
     modalApi.lock();
     try {
+      // 获取砍价商品配置（深拷贝避免直接修改原对象）
+      const products: MallBargainActivityApi.BargainProduct[] = cloneDeep(
+        spuAndSkuListRef.value?.getSkuConfigs('productConfig') || [],
+      );
+      if (products.length === 0) {
+        ElMessage.error('请选择砍价商品');
+        return;
+      }
+      // 价格需要转为分
+      products.forEach((item) => {
+        item.bargainFirstPrice = convertToInteger(item.bargainFirstPrice);
+        item.bargainMinPrice = convertToInteger(item.bargainMinPrice);
+      });
+
+      // 提交表单
       const values = await formApi.getValues();
       const data = {
         ...values,
-        spuId: spuId.value,
-        skuId: skuId.value,
-        bargainFirstPrice: Math.round((values.bargainFirstPrice || 0) * 100),
-        bargainMinPrice: Math.round((values.bargainMinPrice || 0) * 100),
+        // 用户每次砍价金额元转分
         randomMinPrice: values.randomMinPrice
-          ? Math.round(values.randomMinPrice * 100)
+          ? convertToInteger(values.randomMinPrice)
           : undefined,
         randomMaxPrice: values.randomMaxPrice
-          ? Math.round(values.randomMaxPrice * 100)
+          ? convertToInteger(values.randomMaxPrice)
           : undefined,
+        // 合并砍价商品配置（砍价活动只有一个商品）
+        ...products[0],
       } as MallBargainActivityApi.BargainActivity;
+
       await (formData.value?.id
         ? updateBargainActivity(data)
         : createBargainActivity(data));
@@ -132,54 +207,44 @@ const [Modal, modalApi] = useVbenModal({
   async onOpenChange(isOpen: boolean) {
     if (!isOpen) {
       formData.value = undefined;
-      spuId.value = undefined;
-      skuId.value = undefined;
-      spuName.value = '';
-      skuInfo.value = undefined;
+      spuList.value = [];
+      spuPropertyList.value = [];
       return;
     }
-    // 加载表单数据
+
+    // 加载数据
     const data = modalApi.getData<MallBargainActivityApi.BargainActivity>();
     if (!data || !data.id) {
       return;
     }
+    // 加载数据
     modalApi.lock();
     try {
       formData.value = await getBargainActivity(data.id);
-      await nextTick();
+      // 对齐活动商品处理结构
+      await getSpuDetails(
+        formData.value.spuId,
+        [formData.value.skuId],
+        [
+          {
+            spuId: formData.value.spuId,
+            skuId: formData.value.skuId,
+            bargainFirstPrice: formData.value.bargainFirstPrice, // 砍价起始价格，单位分
+            bargainMinPrice: formData.value.bargainMinPrice, // 砍价底价
+            stock: formData.value.stock, // 活动库存
+          },
+        ],
+      );
       // 设置表单值时，价格字段从分转换为元
       await formApi.setValues({
         ...formData.value,
-        bargainFirstPrice: (formData.value.bargainFirstPrice || 0) / 100,
-        bargainMinPrice: (formData.value.bargainMinPrice || 0) / 100,
         randomMinPrice: formData.value.randomMinPrice
-          ? formData.value.randomMinPrice / 100
+          ? formatToFraction(formData.value.randomMinPrice)
           : undefined,
         randomMaxPrice: formData.value.randomMaxPrice
-          ? formData.value.randomMaxPrice / 100
+          ? formatToFraction(formData.value.randomMaxPrice)
           : undefined,
       });
-      // 加载商品和 SKU 信息
-      if (formData.value.spuId) {
-        const spu = await getSpu(formData.value.spuId);
-        if (spu) {
-          spuId.value = spu.id;
-          spuName.value = spu.name || '';
-          if (formData.value.skuId) {
-            const selectedSku = spu.skus?.find(
-              (sku) => sku.id === formData.value?.skuId,
-            );
-            if (selectedSku) {
-              skuId.value = selectedSku.id;
-              skuInfo.value = {
-                skuName: selectedSku.name || '',
-                picUrl: selectedSku.picUrl || spu.picUrl || '',
-                price: Number(selectedSku.price) || 0,
-              };
-            }
-          }
-        }
-      }
     } finally {
       modalApi.unlock();
     }
@@ -188,74 +253,82 @@ const [Modal, modalApi] = useVbenModal({
 </script>
 
 <template>
-  <Modal class="w-3/5" :title="getTitle">
-    <div class="mx-4">
-      <Form />
+  <div>
+    <Modal :title="getTitle" class="w-[70%]">
+      <Form class="mx-4">
+        <!-- 商品选择 -->
+        <template #spuId>
+          <div class="w-full">
+            <ElButton
+              v-if="!formData?.id"
+              type="primary"
+              @click="openSpuSelect"
+            >
+              选择商品
+            </ElButton>
 
-      <!-- 商品选择区域 -->
-      <div class="mt-4">
-        <div class="mb-2 flex items-center">
-          <span class="text-sm font-medium">砍价活动商品:</span>
-          <el-button class="ml-2" type="primary" @click="handleSelectProduct">
-            选择商品
-          </el-button>
-          <span v-if="spuName" class="ml-4 text-sm text-gray-600">
-            已选择: {{ spuName }}
-          </span>
-        </div>
+            <!-- SPU 和 SKU 列表展示 -->
+            <SpuAndSkuList
+              ref="spuAndSkuListRef"
+              :rule-config="ruleConfig"
+              :spu-list="spuList"
+              :spu-property-list-p="spuPropertyList"
+              class="mt-4"
+            >
+              <!-- 扩展列：砍价活动特有配置 -->
+              <template #default>
+                <VxeColumn
+                  align="center"
+                  min-width="168"
+                  title="砍价起始价格(元)"
+                >
+                  <template #default="{ row: sku }">
+                    <ElInputNumber
+                      v-model="sku.productConfig.bargainFirstPrice"
+                      :min="0"
+                      :precision="2"
+                      :step="0.1"
+                      class="w-full"
+                      controls-position="right"
+                    />
+                  </template>
+                </VxeColumn>
+                <VxeColumn align="center" min-width="168" title="砍价底价(元)">
+                  <template #default="{ row: sku }">
+                    <ElInputNumber
+                      v-model="sku.productConfig.bargainMinPrice"
+                      :min="0"
+                      :precision="2"
+                      :step="0.1"
+                      class="w-full"
+                      controls-position="right"
+                    />
+                  </template>
+                </VxeColumn>
+                <VxeColumn align="center" min-width="168" title="活动库存">
+                  <template #default="{ row: sku }">
+                    <ElInputNumber
+                      v-model="sku.productConfig.stock"
+                      :max="sku.stock"
+                      :min="0"
+                      class="w-full"
+                      controls-position="right"
+                    />
+                  </template>
+                </VxeColumn>
+              </template>
+            </SpuAndSkuList>
+          </div>
+        </template>
+      </Form>
+    </Modal>
 
-        <!-- SKU 信息展示 -->
-        <div v-if="skuInfo" class="mt-4">
-          <table class="w-full border-collapse border border-gray-300">
-            <!-- TODO @puhui999：和 element-plus 有点差别哈；ps：是不是用 grid 组件呀？或者 vxe 组件
-             图片
-颜色
-版本
-商品条码
-销售价(元)
-市场价(元)
-成本价(元)
-库存
-砍价起始价格(元)
-砍价底价(元)
-活动库存
-             -->
-            <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>
-              </tr>
-            </thead>
-            <tbody>
-              <tr>
-                <td class="border border-gray-300 px-4 py-2 text-center">
-                  <img
-                    v-if="skuInfo.picUrl"
-                    :src="skuInfo.picUrl"
-                    alt="商品图片"
-                    class="h-16 w-16 object-cover"
-                  />
-                </td>
-                <td class="border border-gray-300 px-4 py-2">
-                  {{ skuInfo.skuName }}
-                </td>
-                <td class="border border-gray-300 px-4 py-2 text-center">
-                  ¥{{ (skuInfo.price / 100).toFixed(2) }}
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-      </div>
-    </div>
-  </Modal>
-
-  <!-- 商品选择器弹窗（单选模式） -->
-  <SpuSkuSelect
-    ref="spuSkuSelectRef"
-    :is-select-sku="true"
-    :radio="true"
-    @select="handleSpuSelected"
-  />
+    <!-- 商品选择器弹窗（单选模式） -->
+    <SpuSkuSelect
+      ref="spuSkuSelectRef"
+      :is-select-sku="true"
+      :radio="true"
+      @select="handleSpuSelected"
+    />
+  </div>
 </template>
diff --git a/apps/web-ele/src/views/mall/promotion/bargain/record/data.ts b/apps/web-ele/src/views/mall/promotion/bargain/record/data.ts
index a584e1146..47480820e 100644
--- a/apps/web-ele/src/views/mall/promotion/bargain/record/data.ts
+++ b/apps/web-ele/src/views/mall/promotion/bargain/record/data.ts
@@ -75,15 +75,13 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
       field: 'activity.bargainMinPrice',
       title: '最低价',
       minWidth: 100,
-      // TODO @puhui999：这里和 antd 不同
-      formatter: 'formatFenToYuanAmount',
+      formatter: 'formatAmount2',
     },
     {
       field: 'bargainPrice',
       title: '当前价',
       minWidth: 100,
-      // TODO @puhui999：这里和 antd 不同
-      formatter: 'formatFenToYuanAmount',
+      formatter: 'formatAmount2',
     },
     {
       field: 'activity.helpMaxCount',
@@ -154,8 +152,7 @@ export function useHelpGridColumns(): VxeTableGridOptions['columns'] {
       field: 'reducePrice',
       title: '砍价金额',
       minWidth: 100,
-      // TODO @puhui999：这里和 antd 不同
-      formatter: 'formatFenToYuanAmount',
+      formatter: 'formatAmount2',
     },
     {
       field: 'createTime',