diff --git a/apps/web-antd/src/views/mall/promotion/coupon/components/select.vue b/apps/web-antd/src/views/mall/promotion/coupon/components/select.vue index 073206aff..36d7ea9e3 100644 --- a/apps/web-antd/src/views/mall/promotion/coupon/components/select.vue +++ b/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, }); -const [Modal, modalApi] = useVbenModal({ - async onConfirm() { - // 从 gridApi 获取选中的记录 - const selectedRecords = (gridApi.grid?.getCheckboxRecords() || - []) as MallCouponTemplateApi.CouponTemplate[]; - await modalApi.close(); - emit('success', selectedRecords); - }, +/** 打开弹窗 */ +async function open() { + visible.value = true; + // 重置查询条件并重新加载数据,与老组件行为一致 + await gridApi.query(); +} + +/** 关闭弹窗 */ +function closeModal() { + visible.value = false; +} + +/** 确认选择 */ +function handleConfirm() { + // 从 gridApi 获取选中的记录 + const selectedRecords = (gridApi.grid?.getCheckboxRecords() || + []) as MallCouponTemplateApi.CouponTemplate[]; + emit('change', selectedRecords); + closeModal(); +} + +/** 对外暴露的方法 */ +defineExpose({ + open, }); diff --git a/apps/web-antd/src/views/mall/promotion/rewardActivity/modules/form.vue b/apps/web-antd/src/views/mall/promotion/rewardActivity/modules/form.vue index 44180a558..7f160273b 100644 --- a/apps/web-antd/src/views/mall/promotion/rewardActivity/modules/form.vue +++ b/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>(); - 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({
diff --git a/apps/web-antd/src/views/mall/promotion/rewardActivity/modules/reward-rule-coupon-select.vue b/apps/web-antd/src/views/mall/promotion/rewardActivity/modules/reward-rule-coupon-select.vue index 5cc7e5b28..7674f5b1a 100644 --- a/apps/web-antd/src/views/mall/promotion/rewardActivity/modules/reward-rule-coupon-select.vue +++ b/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([]); // 选择的优惠劵列表 -// TODO @puhui999:1)命名上,可以弱化 coupon;例如说 selectRef;原因是,本身就是 coupon-select.vue;2)相关的处理的方法,最好都带 handle,如果是处理事件;例如说 deleteCoupon 改成 handleDelete; /** 选择优惠券 */ -const couponSelectRef = ref>(); -function selectCoupon() { - couponSelectRef.value?.open(); +const selectRef = ref>(); +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 () => { diff --git a/apps/web-antd/src/views/mall/promotion/rewardActivity/modules/reward-rule.vue b/apps/web-antd/src/views/mall/promotion/rewardActivity/modules/reward-rule.vue index eac658b12..1aadac101 100644 --- a/apps/web-antd/src/views/mall/promotion/rewardActivity/modules/reward-rule.vue +++ b/apps/web-antd/src/views/mall/promotion/rewardActivity/modules/reward-rule.vue @@ -1,7 +1,7 @@