feat：【antd】【mall】满减送的建议

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

@@ -120,6 +120,16 @@ export function useFormSchema(): VbenFormSchema[] {
         allowClear: true,
       },
     },
+    {
+      fieldName: 'remark',
+      label: '备注',
+      component: 'Textarea',
+      componentProps: {
+        placeholder: '请输入备注',
+        rows: 4,
+        allowClear: true,
+      },
+    },
     {
       fieldName: 'startAndEndTime',
       label: '活动时间',
@@ -128,8 +138,10 @@ export function useFormSchema(): VbenFormSchema[] {
       componentProps: {
         showTime: true,
         format: 'YYYY-MM-DD HH:mm:ss',
-        placeholder: [$t('common.startTimeText'), $t('common.endTimeText')],
-        allowClear: true,
+        placeholder: [
+          $t('utils.rangePicker.beginTime'),
+          $t('utils.rangePicker.endTime'),
+        ],
       },
     },
     {
@@ -154,22 +166,7 @@ export function useFormSchema(): VbenFormSchema[] {
       },
       rules: z.number().default(PromotionProductScopeEnum.ALL.scope),
     },
-    {
-      fieldName: 'remark',
-      label: '备注',
-      component: 'Textarea',
-      componentProps: {
-        placeholder: '请输入备注',
-        rows: 4,
-        allowClear: true,
-      },
-    },
-    {
-      fieldName: 'rules',
-      label: '优惠设置',
-      component: 'Input',
-      formItemClass: 'items-start',
-    },
+    // TODO @puhui999：选择完删除后，自动就退出了 modal；
     {
       fieldName: 'productSpuIds',
       label: '选择商品',
@@ -180,6 +177,15 @@ export function useFormSchema(): VbenFormSchema[] {
           return values.productScope === PromotionProductScopeEnum.SPU.scope;
         },
       },
+      rules: 'required',
+    },
+    // TODO @puhui999：这里还有个分类；
+    {
+      fieldName: 'rules',
+      label: '优惠设置',
+      component: 'Input',
+      formItemClass: 'items-start',
+      // TODO @puhui999：这里可能要加个 rules: 'required',
     },
   ];
 }

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

@@ -27,6 +27,7 @@ import RewardRule from './reward-rule.vue';
 const emit = defineEmits(['success']);
 
 const formData = ref<MallRewardActivityApi.RewardActivity>({
+  // TODO @puhui999：这里的 conditionType、productScope 是不是可以删除呀。因为 data.ts 已经搞了 defaultValue；
   conditionType: PromotionConditionTypeEnum.PRICE.type,
   productScope: PromotionProductScopeEnum.ALL.scope,
   rules: [],
@@ -38,6 +39,8 @@ const getTitle = computed(() => {
     : $t('ui.actionTitle.create', ['满减送']);
 });
 
+const rewardRuleRef = ref<InstanceType<typeof RewardRule>>();
+
 const [Form, formApi] = useVbenForm({
   commonConfig: {
     componentProps: {
@@ -50,8 +53,6 @@ const [Form, formApi] = useVbenForm({
   showDefaultActions: false,
 });
 
-const rewardRuleRef = ref<InstanceType<typeof RewardRule>>();
-
 // TODO @芋艿：这里需要在简化下；
 const [Modal, modalApi] = useVbenModal({
   async onConfirm() {
@@ -60,30 +61,27 @@ const [Modal, modalApi] = useVbenModal({
       return;
     }
     modalApi.lock();
+    // 提交表单
     try {
       const data = await formApi.getValues();
-
       rewardRuleRef.value?.setRuleCoupon();
-
       if (data.startAndEndTime && Array.isArray(data.startAndEndTime)) {
         data.startTime = data.startAndEndTime[0];
         data.endTime = data.startAndEndTime[1];
         delete data.startAndEndTime;
       }
-
       data.rules?.forEach((item: any) => {
         item.discountPrice = convertToInteger(item.discountPrice || 0);
         if (data.conditionType === PromotionConditionTypeEnum.PRICE.type) {
           item.limit = convertToInteger(item.limit || 0);
         }
       });
-
       setProductScopeValues(data);
 
       await (formData.value?.id
         ? updateRewardActivity(data as MallRewardActivityApi.RewardActivity)
         : createRewardActivity(data as MallRewardActivityApi.RewardActivity));
-
+      // 关闭并提示
       await modalApi.close();
       emit('success');
       message.success($t('ui.actionMessage.operationSuccess'));
@@ -100,26 +98,23 @@ const [Modal, modalApi] = useVbenModal({
       };
       return;
     }
-
+    // 加载数据
     const data = modalApi.getData<MallRewardActivityApi.RewardActivity>();
     if (!data || !data.id) {
       return;
     }
-
     modalApi.lock();
     try {
       const result = await getReward(data.id);
-
       result.startAndEndTime = [result.startTime, result.endTime] as any[];
-
       result.rules?.forEach((item: any) => {
         item.discountPrice = formatToFraction(item.discountPrice || 0);
         if (result.conditionType === PromotionConditionTypeEnum.PRICE.type) {
           item.limit = formatToFraction(item.limit || 0);
         }
       });
-
       formData.value = result;
+      // 设置到 values
       await formApi.setValues(result);
 
       await getProductScope();
@@ -153,6 +148,7 @@ async function getProductScope() {
   }
 }
 
+// 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: {

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

@@ -4,7 +4,7 @@ import type { MallRewardActivityApi } from '#/api/mall/promotion/reward/rewardAc
 
 import { nextTick, onMounted, ref } from 'vue';
 
-import { DICT_TYPE } from '@vben/constants';
+import { CouponTemplateTakeTypeEnum, DICT_TYPE } from '@vben/constants';
 
 import { useVModel } from '@vueuse/core';
 import { Button, Input } from 'ant-design-vue';
@@ -30,12 +30,9 @@ interface GiveCoupon extends MallCouponTemplateApi.CouponTemplate {
 }
 
 const rewardRule = useVModel(props, 'modelValue', emits);
-const list = ref<GiveCoupon[]>([]);
-
-const CouponTemplateTakeTypeEnum = {
-  ADMIN: { type: 2 },
-};
+const list = ref<GiveCoupon[]>([]); // 选择的优惠劵列表
 
+// TODO @puhui999：1）命名上，可以弱化 coupon；例如说 selectRef；原因是，本身就是 coupon-select.vue；2）相关的处理的方法，最好都带 handle，如果是处理事件；例如说 deleteCoupon 改成 handleDelete；
 /** 选择优惠券 */
 const couponSelectRef = ref<InstanceType<typeof CouponSelect>>();
 function selectCoupon() {
@@ -78,6 +75,7 @@ async function initGiveCouponList() {
 }
 
 /** 设置赠送的优惠券 */
+// TODO @puhui999：这个有办法不提供，就是不用 form.vue 去调用，更加透明~
 function setGiveCouponList() {
   if (!rewardRule.value) {
     return;

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

@@ -40,7 +40,8 @@ const isPriceCondition = computed(() => {
   );
 });
 
-function addRule() {
+/** 处理新增 */
+function handleAdd() {
   if (!formData.value.rules) {
     formData.value.rules = [];
   }
@@ -52,7 +53,8 @@ function addRule() {
   });
 }
 
-function deleteRule(ruleIndex: number) {
+/** 处理删除 */
+function handleDelete(ruleIndex: number) {
   formData.value.rules.splice(ruleIndex, 1);
 }
 
@@ -80,7 +82,7 @@ defineExpose({ setRuleCoupon });
             type="link"
             danger
             class="ml-2"
-            @click="deleteRule(index)"
+            @click="handleDelete(index)"
           >
             删除
           </Button>
@@ -114,6 +116,7 @@ defineExpose({ setRuleCoupon });
           </FormItem>
 
           <!-- 优惠内容 -->
+          <!-- TODO @puhui999：这里样式，让 AI 调整下；1）类似优惠劵折行啦；2）整体要左移点； -->
           <FormItem label="优惠内容" :label-col="{ span: 4 }">
             <div class="flex flex-col gap-4">
               <!-- 订单金额优惠 -->
@@ -174,7 +177,7 @@ defineExpose({ setRuleCoupon });
 
     <!-- 添加规则按钮 -->
     <Col :span="24" class="mt-2">
-      <Button type="primary" @click="addRule">+ 添加优惠规则</Button>
+      <Button type="primary" @click="handleAdd">+ 添加优惠规则</Button>
     </Col>
 
     <!-- 提示信息 -->