feat：【ele】【mall】bargain 代码迁移

apps/web-ele/src/views/mall/promotion/bargain/activity/modules/form.vue

@@ -1,19 +1,21 @@
 <script lang="ts" setup>
 import type { MallBargainActivityApi } from '#/api/mall/promotion/bargain/bargainActivity';
 
-import { computed, ref } from 'vue';
+import { computed, nextTick, ref } from 'vue';
 
 import { useVbenModal } from '@vben/common-ui';
 
 import { ElMessage } from 'element-plus';
 
 import { useVbenForm } from '#/adapter/form';
+import { getSpu } from '#/api/mall/product/spu';
 import {
   createBargainActivity,
   getBargainActivity,
   updateBargainActivity,
 } from '#/api/mall/promotion/bargain/bargainActivity';
 import { $t } from '#/locales';
+import { SpuSkuSelect } from '#/views/mall/product/spu/components';
 
 import { useFormSchema } from '../data';
 
@@ -28,14 +30,49 @@ 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();
+
+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 || '';
+
+  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,
+      };
+    }
+  }
+}
+
 const [Form, formApi] = useVbenForm({
   commonConfig: {
     componentProps: {
       class: 'w-full',
     },
-    formItemClass: 'col-span-2',
-    labelWidth: 120,
+    labelWidth: 130,
   },
+  wrapperClass: 'grid-cols-2',
   layout: 'horizontal',
   schema: useFormSchema(),
   showDefaultActions: false,
@@ -47,15 +84,36 @@ const [Modal, modalApi] = useVbenModal({
     if (!valid) {
       return;
     }
+
+    if (!spuId.value) {
+      ElMessage.error('请选择砍价商品');
+      return;
+    }
+    if (!skuId.value) {
+      ElMessage.error('请选择商品 SKU');
+      return;
+    }
+
     modalApi.lock();
-    // 提交表单
-    const data =
-      (await formApi.getValues()) as MallBargainActivityApi.BargainActivity;
     try {
+      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)
+          : undefined,
+        randomMaxPrice: values.randomMaxPrice
+          ? Math.round(values.randomMaxPrice * 100)
+          : undefined,
+      } as MallBargainActivityApi.BargainActivity;
+
       await (formData.value?.id
         ? updateBargainActivity(data)
         : createBargainActivity(data));
-      // 关闭并提示
       await modalApi.close();
       emit('success');
       ElMessage.success($t('ui.actionMessage.operationSuccess'));
@@ -66,18 +124,54 @@ const [Modal, modalApi] = useVbenModal({
   async onOpenChange(isOpen: boolean) {
     if (!isOpen) {
       formData.value = undefined;
+      spuId.value = undefined;
+      skuId.value = undefined;
+      spuName.value = '';
+      skuInfo.value = undefined;
       return;
     }
-    // 加载数据
+
     const data = modalApi.getData<MallBargainActivityApi.BargainActivity>();
     if (!data || !data.id) {
       return;
     }
+
     modalApi.lock();
     try {
       formData.value = await getBargainActivity(data.id);
-      // 设置到 values
-      await formApi.setValues(formData.value);
+      await nextTick();
+      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
+          : undefined,
+        randomMaxPrice: formData.value.randomMaxPrice
+          ? formData.value.randomMaxPrice / 100
+          : undefined,
+      });
+
+      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();
     }
@@ -86,7 +180,55 @@ const [Modal, modalApi] = useVbenModal({
 </script>
 
 <template>
-  <Modal class="w-2/5" :title="getTitle">
-    <Form class="mx-4" />
+  <Modal class="w-3/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>
+          <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>
+        <div v-if="skuInfo" 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>
+              </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"
+  />
 </template>