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

apps/web-antd/src/views/mall/promotion/coupon/components/select.vue

@@ -2,7 +2,9 @@
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { MallCouponTemplateApi } from '#/api/mall/promotion/coupon/couponTemplate';
 
-import { useVbenModal } from '@vben/common-ui';
+import { ref } from 'vue';
+
+import { Modal } from 'ant-design-vue';
 
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
 import { getCouponTemplatePage } from '#/api/mall/promotion/coupon/couponTemplate';
@@ -15,7 +17,11 @@ const props = defineProps<{
   takeType?: number; // 领取方式
 }>();
 
-const emit = defineEmits(['success']);
+const emit = defineEmits<{
+  (e: 'change', v: MallCouponTemplateApi.CouponTemplate[]): void;
+}>();
+
+const visible = ref(false); // 弹窗显示状态
 
 const [Grid, gridApi] = useVbenVxeGrid({
   formOptions: {
@@ -48,19 +54,42 @@ const [Grid, gridApi] = useVbenVxeGrid({
   } as VxeTableGridOptions<MallCouponTemplateApi.CouponTemplate>,
 });
 
-const [Modal, modalApi] = useVbenModal({
+/** 打开弹窗 */
-  async onConfirm() {
+async function open() {
-    // 从 gridApi 获取选中的记录
+  visible.value = true;
-    const selectedRecords = (gridApi.grid?.getCheckboxRecords() ||
+  // 重置查询条件并重新加载数据，与老组件行为一致
-      []) as MallCouponTemplateApi.CouponTemplate[];
+  await gridApi.query();
-    await modalApi.close();
+}
-    emit('success', selectedRecords);
+
-  },
+/** 关闭弹窗 */
+function closeModal() {
+  visible.value = false;
+}
+
+/** 确认选择 */
+function handleConfirm() {
+  // 从 gridApi 获取选中的记录
+  const selectedRecords = (gridApi.grid?.getCheckboxRecords() ||
+    []) as MallCouponTemplateApi.CouponTemplate[];
+  emit('change', selectedRecords);
+  closeModal();
+}
+
+/** 对外暴露的方法 */
+defineExpose({
+  open,
 });
 </script>
 
 <template>
-  <Modal title="选择优惠券" class="w-2/3">
+  <Modal
+    v-model:open="visible"
+    title="选择优惠券"
+    width="65%"
+    :destroy-on-close="true"
+    @ok="handleConfirm"
+    @cancel="closeModal"
+  >
     <Grid />
   </Modal>
 </template>

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

@@ -38,8 +38,6 @@ const getTitle = computed(() => {
     : $t('ui.actionTitle.create', ['满减送']);
 });
 
-const rewardRuleRef = ref<InstanceType<typeof RewardRule>>();
-
 const [Form, formApi] = useVbenForm({
   commonConfig: {
     componentProps: {
@@ -62,7 +60,6 @@ const [Modal, modalApi] = useVbenModal({
     // 提交表单
     try {
       const values = await formApi.getValues();
-      rewardRuleRef.value?.setRuleCoupon();
       // 合并表单值和 formData（含 id、productSpuIds、productCategoryIds 等）
       const data = { ...formData.value, ...values };
       if (data.startAndEndTime && Array.isArray(data.startAndEndTime)) {
@@ -139,7 +136,7 @@ const [Modal, modalApi] = useVbenModal({
     <Form class="mx-6">
       <!-- 自定义插槽：优惠规则 -->
       <template #rules>
-        <RewardRule ref="rewardRuleRef" v-model="formData" />
+        <RewardRule v-model="formData" />
       </template>
 
       <!-- 自定义插槽：商品选择 -->

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

@@ -2,7 +2,7 @@
 import type { MallCouponTemplateApi } from '#/api/mall/promotion/coupon/couponTemplate';
 import type { MallRewardActivityApi } from '#/api/mall/promotion/reward/rewardActivity';
 
-import { nextTick, onMounted, ref } from 'vue';
+import { nextTick, onMounted, ref, watch } from 'vue';
 
 import { CouponTemplateTakeTypeEnum, DICT_TYPE } from '@vben/constants';
 
@@ -32,15 +32,14 @@ interface GiveCoupon extends MallCouponTemplateApi.CouponTemplate {
 const rewardRule = useVModel(props, 'modelValue', emits);
 const list = ref<GiveCoupon[]>([]); // 选择的优惠劵列表
 
-// TODO @puhui999：1）命名上，可以弱化 coupon；例如说 selectRef；原因是，本身就是 coupon-select.vue；2）相关的处理的方法，最好都带 handle，如果是处理事件；例如说 deleteCoupon 改成 handleDelete；
 /** 选择优惠券 */
-const couponSelectRef = ref<InstanceType<typeof CouponSelect>>();
+const selectRef = ref<InstanceType<typeof CouponSelect>>();
-function selectCoupon() {
+function handleSelect() {
-  couponSelectRef.value?.open();
+  selectRef.value?.open();
 }
 
 /** 选择优惠券后的回调 */
-function handleCouponChange(val: any[]) {
+function handleChange(val: any[]) {
   for (const item of val) {
     if (list.value.some((v) => v.id === item.id)) {
       continue;
@@ -50,13 +49,18 @@ function handleCouponChange(val: any[]) {
 }
 
 /** 删除优惠券 */
-function deleteCoupon(index: number) {
+function handleDelete(index: number) {
   list.value.splice(index, 1);
 }
 
 /** 初始化赠送的优惠券列表 */
 async function initGiveCouponList() {
-  if (!rewardRule.value || !rewardRule.value.giveCouponTemplateCounts) {
+  // 校验优惠券存在
+  if (
+    !rewardRule.value ||
+    !rewardRule.value.giveCouponTemplateCounts ||
+    Object.keys(rewardRule.value.giveCouponTemplateCounts).length === 0
+  ) {
     return;
   }
   const tempLateIds = Object.keys(
@@ -74,19 +78,22 @@ async function initGiveCouponList() {
   });
 }
 
-/** 设置赠送的优惠券 */
+/** 监听 list 变化，自动同步到 rewardRule */
-// TODO @puhui999：这个有办法不提供，就是不用 form.vue 去调用，更加透明~
+watch(
-function setGiveCouponList() {
+  list,
-  if (!rewardRule.value) {
+  (val) => {
-    return;
+    if (!rewardRule.value) {
-  }
+      return;
-  rewardRule.value.giveCouponTemplateCounts = {};
+    }
-  list.value.forEach((rule) => {
+    // 核心：清空 giveCouponTemplateCounts，解决删除不生效的问题
-    rewardRule.value.giveCouponTemplateCounts![rule.id] = rule.giveCount!;
+    rewardRule.value.giveCouponTemplateCounts = {};
-  });
+    // 设置优惠券和其数量的对应
-}
+    val.forEach((item) => {
-
+      rewardRule.value.giveCouponTemplateCounts![item.id] = item.giveCount!;
-defineExpose({ setGiveCouponList });
+    });
+  },
+  { deep: true },
+);
 
 onMounted(async () => {
   await nextTick();
@@ -96,7 +103,7 @@ onMounted(async () => {
 
 <template>
   <div class="w-full">
-    <Button type="link" class="pl-0" @click="selectCoupon">添加优惠券</Button>
+    <Button type="link" class="pl-0" @click="handleSelect">添加优惠券</Button>
 
     <div
       v-for="(item, index) in list"
@@ -130,15 +137,15 @@ onMounted(async () => {
           type="number"
         />
         <span>张</span>
-        <Button type="link" danger @click="deleteCoupon(index)">删除</Button>
+        <Button type="link" danger @click="handleDelete(index)">删除</Button>
       </div>
     </div>
 
     <!-- 优惠券选择 -->
     <CouponSelect
-      ref="couponSelectRef"
+      ref="selectRef"
       :take-type="CouponTemplateTakeTypeEnum.ADMIN.type"
-      @change="handleCouponChange"
+      @change="handleChange"
     />
   </div>
 </template>

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

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { MallRewardActivityApi } from '#/api/mall/promotion/reward/rewardActivity';
 
-import { computed, ref } from 'vue';
+import { computed } from 'vue';
 
 import { PromotionConditionTypeEnum } from '@vben/constants';
 
@@ -31,8 +31,6 @@ const emits = defineEmits<{
 }>();
 
 const formData = useVModel(props, 'modelValue', emits);
-const rewardRuleCouponSelectRef =
-  ref<InstanceType<typeof RewardRuleCouponSelect>[]>();
 
 const isPriceCondition = computed(() => {
   return (
@@ -57,17 +55,6 @@ function handleAdd() {
 function handleDelete(ruleIndex: number) {
   formData.value.rules?.splice(ruleIndex, 1);
 }
-
-function setRuleCoupon() {
-  if (!rewardRuleCouponSelectRef.value) {
-    return;
-  }
-  rewardRuleCouponSelectRef.value.forEach((item: any) =>
-    item.setGiveCouponList(),
-  );
-}
-
-defineExpose({ setRuleCoupon });
 </script>
 
 <template>
@@ -158,8 +145,8 @@ defineExpose({ setRuleCoupon });
               <div class="flex items-center gap-2">
                 <span class="w-20">送优惠券:</span>
                 <RewardRuleCouponSelect
-                  ref="rewardRuleCouponSelectRef"
                   :model-value="rule"
+                  @update:model-value="(val) => (formData.rules![index] = val)"
                 />
               </div>
             </div>