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

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

@@ -5,9 +5,10 @@ import type { MallSpuApi } from '#/api/mall/product/spu';
 
 import { computed, ref } from 'vue';
 
-import { useVbenModal } from '@vben/common-ui';
 import { fenToYuan } from '@vben/utils';
 
+import { Modal } from 'ant-design-vue';
+
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
 import { getSpu } from '#/api/mall/product/spu';
 
@@ -19,6 +20,7 @@ const emit = defineEmits<{
   change: [sku: MallSpuApi.Sku];
 }>();
 
+const visible = ref(false);
 const spuId = ref<number>();
 
 /** 表格列配置 */
@@ -94,30 +96,42 @@ function handleRadioChange() {
   const selectedRow = gridApi.grid.getRadioRecord() as MallSpuApi.Sku;
   if (selectedRow) {
     emit('change', selectedRow);
-    modalApi.close();
+    closeModal();
   }
 }
 
-const [Modal, modalApi] = useVbenModal({
+/** 打开弹窗 */
-  destroyOnClose: true,
+async function openModal(data?: SpuData) {
-  onOpenChange: async (isOpen: boolean) => {
-    if (!isOpen) {
-      gridApi.grid.clearRadioRow();
-      spuId.value = undefined;
-      return;
-    }
-    const data = modalApi.getData<SpuData>();
   if (!data?.spuId) {
     return;
   }
+  visible.value = true;
   spuId.value = data.spuId;
   await gridApi.query();
-  },
+}
+
+/** 关闭弹窗 */
+function closeModal() {
+  visible.value = false;
+  gridApi.grid.clearRadioRow();
+  spuId.value = undefined;
+}
+
+/** 对外暴露的方法 */
+defineExpose({
+  open: openModal,
 });
 </script>
 
 <template>
-  <Modal class="w-[700px]" title="选择规格">
+  <Modal
+    v-model:open="visible"
+    title="选择规格"
+    width="700px"
+    :destroy-on-close="true"
+    :footer="null"
+    @cancel="closeModal"
+  >
     <Grid />
   </Modal>
 </template>

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

@@ -7,9 +7,10 @@ import type { MallSpuApi } from '#/api/mall/product/spu';
 
 import { computed, onMounted, ref } from 'vue';
 
-import { useVbenModal } from '@vben/common-ui';
 import { handleTree } from '@vben/utils';
 
+import { Modal } from 'ant-design-vue';
+
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
 import { getCategoryList } from '#/api/mall/product/category';
 import { getSpuPage } from '#/api/mall/product/spu';
@@ -30,12 +31,16 @@ const emit = defineEmits<{
 const categoryList = ref<MallCategoryApi.Category[]>([]); // 分类列表
 const categoryTreeList = ref<any[]>([]); // 分类树
 
+/** 弹窗显示状态 */
+const visible = ref(false);
+const initData = ref<MallSpuApi.Spu | MallSpuApi.Spu[]>();
+
 /** 单选：处理选中变化 */
 function handleRadioChange() {
   const selectedRow = gridApi.grid.getRadioRecord() as MallSpuApi.Spu;
   if (selectedRow) {
     emit('change', selectedRow);
-    modalApi.close();
+    closeModal();
   }
 }
 
@@ -159,25 +164,13 @@ const [Grid, gridApi] = useVbenVxeGrid({
   },
 });
 
-const [Modal, modalApi] = useVbenModal({
+/** 打开弹窗 */
-  destroyOnClose: true,
+async function openModal(data?: MallSpuApi.Spu | MallSpuApi.Spu[]) {
-  showConfirmButton: props.multiple, // 特殊：radio 单选情况下，走 handleRadioChange 处理。
+  initData.value = data;
-  onConfirm: () => {
+  visible.value = true;
-    const selectedRows = gridApi.grid.getCheckboxRecords() as MallSpuApi.Spu[];
-    emit('change', selectedRows);
-    modalApi.close();
-  },
-  async onOpenChange(isOpen: boolean) {
-    if (!isOpen) {
-      await gridApi.grid.clearCheckboxRow();
-      await gridApi.grid.clearRadioRow();
-      return;
-    }
-
   // 1. 先查询数据
   await gridApi.query();
   // 2. 设置已选中行
-    const data = modalApi.getData<MallSpuApi.Spu | MallSpuApi.Spu[]>();
   if (props.multiple && Array.isArray(data) && data.length > 0) {
     setTimeout(() => {
       const tableData = gridApi.grid.getTableData().fullData;
@@ -201,14 +194,26 @@ const [Modal, modalApi] = useVbenModal({
       }
     }, 300);
   }
-  },
+}
-});
+
+/** 关闭弹窗 */
+async function closeModal() {
+  visible.value = false;
+  await gridApi.grid.clearCheckboxRow();
+  await gridApi.grid.clearRadioRow();
+  initData.value = undefined;
+}
+
+/** 确认选择（多选模式） */
+function handleConfirm() {
+  const selectedRows = gridApi.grid.getCheckboxRecords() as MallSpuApi.Spu[];
+  emit('change', selectedRows);
+  closeModal();
+}
 
 /** 对外暴露的方法 */
 defineExpose({
-  open: (data?: MallSpuApi.Spu | MallSpuApi.Spu[]) => {
+  open: openModal,
-    modalApi.setData(data).open();
-  },
 });
 
 /** 初始化分类数据 */
@@ -219,7 +224,15 @@ onMounted(async () => {
 </script>
 
 <template>
-  <Modal title="选择商品" class="w-[950px]">
+  <Modal
+    v-model:open="visible"
+    title="选择商品"
+    width="950px"
+    :destroy-on-close="true"
+    :footer="props.multiple ? undefined : null"
+    @ok="handleConfirm"
+    @cancel="closeModal"
+  >
     <Grid />
   </Modal>
 </template>