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

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>>();
-function selectCoupon() {
-  couponSelectRef.value?.open();
+const selectRef = ref<InstanceType<typeof CouponSelect>>();
+function handleSelect() {
+  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() {
   });
 }
 
-/** 设置赠送的优惠券 */
-// TODO @puhui999：这个有办法不提供，就是不用 form.vue 去调用，更加透明~
-function setGiveCouponList() {
-  if (!rewardRule.value) {
-    return;
-  }
-  rewardRule.value.giveCouponTemplateCounts = {};
-  list.value.forEach((rule) => {
-    rewardRule.value.giveCouponTemplateCounts![rule.id] = rule.giveCount!;
-  });
-}
-
-defineExpose({ setGiveCouponList });
+/** 监听 list 变化，自动同步到 rewardRule */
+watch(
+  list,
+  (val) => {
+    if (!rewardRule.value) {
+      return;
+    }
+    // 核心：清空 giveCouponTemplateCounts，解决删除不生效的问题
+    rewardRule.value.giveCouponTemplateCounts = {};
+    // 设置优惠券和其数量的对应
+    val.forEach((item) => {
+      rewardRule.value.giveCouponTemplateCounts![item.id] = item.giveCount!;
+    });
+  },
+  { 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>