feat：【antd】【mall】满减送组件优化

apps/web-antd/src/views/mall/promotion/rewardActivity/data.ts

@@ -166,26 +166,87 @@ export function useFormSchema(): VbenFormSchema[] {
       },
       rules: z.number().default(PromotionProductScopeEnum.ALL.scope),
     },
-    // TODO @puhui999：选择完删除后，自动就退出了 modal；
     {
       fieldName: 'productSpuIds',
       label: '选择商品',
       component: 'Input',
       dependencies: {
-        triggerFields: ['productScope'],
+        triggerFields: ['productScope', 'productScopeValues'],
         show: (values) => {
           return values.productScope === PromotionProductScopeEnum.SPU.scope;
         },
+        trigger(values, form) {
+          // 当加载已有数据时，根据 productScopeValues 设置 productSpuIds
+          if (
+            values.productScope === PromotionProductScopeEnum.SPU.scope &&
+            values.productScopeValues
+          ) {
+            form.setFieldValue('productSpuIds', values.productScopeValues);
+          }
+        },
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'productCategoryIds',
+      label: '选择分类',
+      component: 'Input',
+      dependencies: {
+        triggerFields: ['productScope', 'productScopeValues'],
+        show: (values) => {
+          return (
+            values.productScope === PromotionProductScopeEnum.CATEGORY.scope
+          );
+        },
+        trigger(values, form) {
+          // 当加载已有数据时，根据 productScopeValues 设置 productCategoryIds
+          if (
+            values.productScope === PromotionProductScopeEnum.CATEGORY.scope &&
+            values.productScopeValues
+          ) {
+            const categoryIds = values.productScopeValues;
+            // 单选时使用数组不能反显，取第一个元素
+            form.setFieldValue(
+              'productCategoryIds',
+              Array.isArray(categoryIds) && categoryIds.length > 0
+                ? categoryIds[0]
+                : categoryIds,
+            );
+          }
+        },
       },
       rules: 'required',
     },
-    // TODO @puhui999：这里还有个分类；
     {
       fieldName: 'rules',
       label: '优惠设置',
       component: 'Input',
       formItemClass: 'items-start',
-      // TODO @puhui999：这里可能要加个 rules: 'required',
+      rules: 'required',
+    },
+    // 隐藏字段：用于自动同步 productScopeValues
+    {
+      fieldName: 'productScopeValues',
+      component: 'Input',
+      dependencies: {
+        triggerFields: ['productScope', 'productSpuIds', 'productCategoryIds'],
+        show: () => false,
+        trigger(values, form) {
+          switch (values.productScope) {
+            case PromotionProductScopeEnum.CATEGORY.scope: {
+              const categoryIds = Array.isArray(values.productCategoryIds)
+                ? values.productCategoryIds
+                : [values.productCategoryIds];
+              form.setFieldValue('productScopeValues', categoryIds);
+              break;
+            }
+            case PromotionProductScopeEnum.SPU.scope: {
+              form.setFieldValue('productScopeValues', values.productSpuIds);
+              break;
+            }
+          }
+        },
+      },
     },
   ];
 }

apps/web-antd/src/views/mall/promotion/rewardActivity/modules/form.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { MallRewardActivityApi } from '#/api/mall/promotion/reward/rewardActivity';
 
-import { computed, nextTick, ref } from 'vue';
+import { computed, ref } from 'vue';
 
 import { useVbenModal } from '@vben/common-ui';
 import {
@@ -19,6 +19,7 @@ import {
   updateRewardActivity,
 } from '#/api/mall/promotion/reward/rewardActivity';
 import { $t } from '#/locales';
+import { ProductCategorySelect } from '#/views/mall/product/category/components';
 import { SpuShowcase } from '#/views/mall/product/spu/components';
 
 import { useFormSchema } from '../data';
@@ -26,10 +27,8 @@ import RewardRule from './reward-rule.vue';
 
 const emit = defineEmits(['success']);
 
-const formData = ref<MallRewardActivityApi.RewardActivity>({
+const formData = ref<Partial<MallRewardActivityApi.RewardActivity>>({
-  // TODO @puhui999：这里的 conditionType、productScope 是不是可以删除呀。因为 data.ts 已经搞了 defaultValue；
   conditionType: PromotionConditionTypeEnum.PRICE.type,
-  productScope: PromotionProductScopeEnum.ALL.scope,
   rules: [],
 });
 
@@ -53,7 +52,6 @@ const [Form, formApi] = useVbenForm({
   showDefaultActions: false,
 });
 
-// TODO @芋艿：这里需要在简化下；
 const [Modal, modalApi] = useVbenModal({
   async onConfirm() {
     const { valid } = await formApi.validate();
@@ -63,8 +61,10 @@ const [Modal, modalApi] = useVbenModal({
     modalApi.lock();
     // 提交表单
     try {
-      const data = await formApi.getValues();
+      const values = await formApi.getValues();
       rewardRuleRef.value?.setRuleCoupon();
+      // 合并表单值和 formData（含 id、productSpuIds、productCategoryIds 等）
+      const data = { ...formData.value, ...values };
       if (data.startAndEndTime && Array.isArray(data.startAndEndTime)) {
         data.startTime = data.startAndEndTime[0];
         data.endTime = data.startAndEndTime[1];
@@ -76,9 +76,24 @@ const [Modal, modalApi] = useVbenModal({
           item.limit = convertToInteger(item.limit || 0);
         }
       });
-      setProductScopeValues(data);
+      // 设置 productScopeValues
+      switch (data.productScope) {
+        case PromotionProductScopeEnum.CATEGORY.scope: {
+          const categoryIds = data.productCategoryIds;
+          data.productScopeValues = Array.isArray(categoryIds)
+            ? categoryIds
+            : categoryIds
+              ? [categoryIds]
+              : [];
+          break;
+        }
+        case PromotionProductScopeEnum.SPU.scope: {
+          data.productScopeValues = data.productSpuIds;
+          break;
+        }
+      }
 
-      await (formData.value?.id
+      await (data.id
         ? updateRewardActivity(data as MallRewardActivityApi.RewardActivity)
         : createRewardActivity(data as MallRewardActivityApi.RewardActivity));
       // 关闭并提示
@@ -91,11 +106,7 @@ const [Modal, modalApi] = useVbenModal({
   },
   async onOpenChange(isOpen: boolean) {
     if (!isOpen) {
-      formData.value = {
+      formData.value = {};
-        conditionType: PromotionConditionTypeEnum.PRICE.type,
-        productScope: PromotionProductScopeEnum.ALL.scope,
-        rules: [],
-      };
       return;
     }
     // 加载数据
@@ -116,56 +127,11 @@ const [Modal, modalApi] = useVbenModal({
       formData.value = result;
       // 设置到 values
       await formApi.setValues(result);
-
-      await getProductScope();
     } finally {
       modalApi.unlock();
     }
   },
 });
-
-async function getProductScope() {
-  switch (formData.value.productScope) {
-    case PromotionProductScopeEnum.CATEGORY.scope: {
-      await nextTick();
-      let productCategoryIds = formData.value.productScopeValues as any;
-      if (
-        Array.isArray(productCategoryIds) &&
-        productCategoryIds.length === 1
-      ) {
-        productCategoryIds = productCategoryIds[0];
-      }
-      formData.value.productCategoryIds = productCategoryIds;
-      break;
-    }
-    case PromotionProductScopeEnum.SPU.scope: {
-      formData.value.productSpuIds = formData.value.productScopeValues;
-      break;
-    }
-    default: {
-      break;
-    }
-  }
-}
-
-// TODO @puhui999：/Users/yunai/Java/yudao-ui-admin-vben-v5/apps/web-antd/src/views/mall/promotion/coupon/template/data.ts 可以类似 /Users/yunai/Java/yudao-ui-admin-vben-v5/apps/web-antd/src/views/mall/promotion/coupon/template/data.ts 的 productScopeValues（微信交流）
-function setProductScopeValues(data: any) {
-  switch (formData.value.productScope) {
-    case PromotionProductScopeEnum.CATEGORY.scope: {
-      data.productScopeValues = Array.isArray(formData.value.productCategoryIds)
-        ? formData.value.productCategoryIds
-        : [formData.value.productCategoryIds];
-      break;
-    }
-    case PromotionProductScopeEnum.SPU.scope: {
-      data.productScopeValues = formData.value.productSpuIds;
-      break;
-    }
-    default: {
-      break;
-    }
-  }
-}
 </script>
 
 <template>
@@ -180,6 +146,11 @@ function setProductScopeValues(data: any) {
       <template #productSpuIds>
         <SpuShowcase v-model="formData.productSpuIds" />
       </template>
+
+      <!-- 自定义插槽：分类选择 -->
+      <template #productCategoryIds>
+        <ProductCategorySelect v-model="formData.productCategoryIds" multiple />
+      </template>
     </Form>
   </Modal>
 </template>

apps/web-antd/src/views/mall/promotion/rewardActivity/modules/reward-rule-coupon-select.vue

@@ -96,7 +96,7 @@ onMounted(async () => {
 
 <template>
   <div class="w-full">
-    <Button type="link" class="ml-2" @click="selectCoupon">添加优惠劵</Button>
+    <Button type="link" class="pl-0" @click="selectCoupon">添加优惠券</Button>
 
     <div
       v-for="(item, index) in list"

apps/web-antd/src/views/mall/promotion/rewardActivity/modules/reward-rule.vue

@@ -23,7 +23,7 @@ import RewardRuleCouponSelect from './reward-rule-coupon-select.vue';
 defineOptions({ name: 'RewardRule' });
 
 const props = defineProps<{
-  modelValue: MallRewardActivityApi.RewardActivity;
+  modelValue: Partial<MallRewardActivityApi.RewardActivity>;
 }>();
 
 const emits = defineEmits<{
@@ -55,7 +55,7 @@ function handleAdd() {
 
 /** 处理删除 */
 function handleDelete(ruleIndex: number) {
-  formData.value.rules.splice(ruleIndex, 1);
+  formData.value.rules?.splice(ruleIndex, 1);
 }
 
 function setRuleCoupon() {
@@ -99,7 +99,6 @@ defineExpose({ setRuleCoupon });
                 :min="0"
                 :precision="2"
                 :step="0.1"
-                :controls="false"
                 class="!w-40"
                 placeholder="请输入金额"
               />
@@ -116,54 +115,48 @@ defineExpose({ setRuleCoupon });
           </FormItem>
 
           <!-- 优惠内容 -->
-          <!-- TODO @puhui999：这里样式，让 AI 调整下；1）类似优惠劵折行啦；2）整体要左移点； -->
+          <FormItem
-          <FormItem label="优惠内容" :label-col="{ span: 4 }">
+            label="优惠内容"
-            <div class="flex flex-col gap-4">
+            :label-col="{ span: 4 }"
-              <!-- 订单金额优惠 -->
+            :wrapper-col="{ span: 20 }"
+          >
             <div class="flex flex-col gap-2">
-                <div class="font-medium">订单金额优惠</div>
+              <span>订单金额优惠</span>
-                <div class="ml-4 flex items-center gap-2">
+              <div class="flex items-center gap-2">
                 <span>减</span>
                 <InputNumber
                   v-model:value="rule.discountPrice"
                   :min="0"
                   :precision="2"
                   :step="0.1"
-                    :controls="false"
+                  class="!w-32"
-                    class="!w-40"
                   placeholder="请输入金额"
                 />
                 <span>元</span>
               </div>
-              </div>
-
-              <!-- 包邮 -->
               <div class="flex items-center gap-2">
-                <span class="font-medium">包邮：</span>
+                <span>包邮:</span>
                 <Switch
                   v-model:checked="rule.freeDelivery"
                   checked-children="是"
                   un-checked-children="否"
                 />
               </div>
-
+              <div>
-              <!-- 送积分 -->
+                <div>送积分:</div>
-              <div class="flex items-center gap-2">
+                <div class="mt-2 flex items-center gap-2">
-                <span class="font-medium">送积分：</span>
                   <span>送</span>
                   <InputNumber
                     v-model:value="rule.point"
                     :min="0"
-                  :controls="false"
+                    class="!w-32"
-                  class="!w-40"
                     placeholder="请输入积分"
                   />
                   <span>积分</span>
                 </div>
-
+              </div>
-              <!-- 送优惠券 -->
+              <div class="flex items-center gap-2">
-              <div class="flex items-start gap-2">
+                <span class="w-20">送优惠券:</span>
-                <span class="font-medium">送优惠券：</span>
                 <RewardRuleCouponSelect
                   ref="rewardRuleCouponSelectRef"
                   :model-value="rule"