fix：【antd】【mall】业务弹窗选择组件的 Modal 改成使用 antd 自己的。原因是 vben modal 嵌套关闭一个会全都关闭。

apps/web-antd/src/views/mall/product/spu/components/spu-select.vue

@@ -7,10 +7,9 @@ import type { MallSpuApi } from '#/api/mall/product/spu';
 
 import { computed, nextTick, onMounted, ref } from 'vue';
 
-import { useVbenModal } from '@vben/common-ui';
 import { handleTree } from '@vben/utils';
 
-import { message } from 'ant-design-vue';
+import { message, Modal } from 'ant-design-vue';
 
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
 import { getCategoryList } from '#/api/mall/product/category';
@@ -28,7 +27,7 @@ const props = withDefaults(defineProps<SpuSelectProps>(), {
 });
 
 const emit = defineEmits<{
-  (e: 'confirm', spuId: number, skuIds?: number[]): void;
+  (e: 'select', spuId: number, skuIds?: number[]): void;
 }>();
 
 interface SpuSelectProps {
@@ -97,11 +96,6 @@ function selectSpu(row: MallSpuApi.Spu) {
   if (selectedSkuIds.value.length > 0) {
     selectedSkuIds.value = [];
   }
-
-  // 自动展开选中的 SPU
-  if (props.isSelectSku) {
-    expandChange(row, [row]);
-  }
 }
 
 /** 处理行展开变化 */
@@ -222,8 +216,13 @@ const [Grid, gridApi] = useVbenVxeGrid({
     },
   },
   gridEvents: {
-    radioChange: ({ row }: { row: MallSpuApi.Spu }) => {
+    radioChange: ({ row, $grid }: { $grid: any; row: MallSpuApi.Spu }) => {
       selectSpu(row);
+      if (props.isSelectSku) {
+        $grid.clearRowExpand();
+        $grid.setRowExpand(row, true);
+        expandChange(row, [row]);
+      }
     },
     toggleRowExpand: ({
       row,
@@ -241,10 +240,31 @@ const [Grid, gridApi] = useVbenVxeGrid({
   },
 });
 
-/** 初始化弹窗 */
+/** 弹窗显示状态 */
-const [Modal, modalApi] = useVbenModal({
+const visible = ref(false);
-  destroyOnClose: true,
+
-  onConfirm: () => {
+/** 打开弹窗 */
+async function openModal() {
+  visible.value = true;
+  // 等待 Grid 组件完全初始化后再查询数据
+  await nextTick();
+  if (gridApi.grid) {
+    await gridApi.query();
+  }
+}
+
+/** 关闭弹窗 */
+function closeModal() {
+  visible.value = false;
+  selectedSpuId.value = 0;
+  selectedSkuIds.value = [];
+  spuData.value = undefined;
+  propertyList.value = [];
+  isExpand.value = false;
+}
+
+/** 确认选择 */
+function handleConfirm() {
   if (selectedSpuId.value === 0) {
     message.warning('没有选择任何商品');
     return;
@@ -255,36 +275,16 @@ const [Modal, modalApi] = useVbenModal({
   }
   // 返回各自 id 列表
   props.isSelectSku
-      ? emit('confirm', selectedSpuId.value, selectedSkuIds.value)
+    ? emit('select', selectedSpuId.value, selectedSkuIds.value)
-      : emit('confirm', selectedSpuId.value);
+    : emit('select', selectedSpuId.value);
 
   // 重置选中状态
-    selectedSpuId.value = 0;
+  closeModal();
-    selectedSkuIds.value = [];
-    modalApi.close();
-  },
-  async onOpenChange(isOpen: boolean) {
-    if (!isOpen) {
-      selectedSpuId.value = 0;
-      selectedSkuIds.value = [];
-      spuData.value = undefined;
-      propertyList.value = [];
-      isExpand.value = false;
-      return;
 }
-    // 等待 Grid 组件完全初始化后再查询数据
-    await nextTick();
-    if (gridApi.grid) {
-      await gridApi.query();
-    }
-  },
-});
 
 /** 对外暴露的方法 */
 defineExpose({
-  open: () => {
+  open: openModal,
-    modalApi.open();
-  },
 });
 
 /** 初始化分类数据 */
@@ -299,7 +299,14 @@ onMounted(async () => {
 </script>
 
 <template>
-  <Modal title="商品选择" class="w-[70%]">
+  <Modal
+    v-model:open="visible"
+    title="商品选择"
+    width="70%"
+    :destroy-on-close="true"
+    @ok="handleConfirm"
+    @cancel="closeModal"
+  >
     <Grid>
       <!-- 展开列内容（SKU 列表） -->
       <template v-if="isSelectSku" #expand_content="{ row }">

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

@@ -220,6 +220,7 @@ const [Modal, modalApi] = useVbenModal({
 </script>
 
 <template>
+  <div>
     <Modal :title="getTitle" class="w-[70%]">
       <Form class="mx-4">
         <!-- 商品选择 -->
@@ -283,12 +284,13 @@ const [Modal, modalApi] = useVbenModal({
           </div>
         </template>
       </Form>
+    </Modal>
 
     <!-- 商品选择器弹窗 -->
     <SpuSkuSelect
       ref="spuSkuSelectRef"
       :is-select-sku="true"
-      @confirm="handleSpuSelected"
+      @select="handleSpuSelected"
     />
-  </Modal>
+  </div>
 </template>