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,
-  onOpenChange: async (isOpen: boolean) => {
-    if (!isOpen) {
-      gridApi.grid.clearRadioRow();
-      spuId.value = undefined;
-      return;
-    }
-    const data = modalApi.getData<SpuData>();
-    if (!data?.spuId) {
-      return;
-    }
-    spuId.value = data.spuId;
-    await gridApi.query();
-  },
+/** 打开弹窗 */
+async function openModal(data?: 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,56 +164,56 @@ const [Grid, gridApi] = useVbenVxeGrid({
   },
 });
 
-const [Modal, modalApi] = useVbenModal({
-  destroyOnClose: true,
-  showConfirmButton: props.multiple, // 特殊：radio 单选情况下，走 handleRadioChange 处理。
-  onConfirm: () => {
-    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;
-        data.forEach((spu) => {
-          const row = tableData.find(
-            (item: MallSpuApi.Spu) => item.id === spu.id,
-          );
-          if (row) {
-            gridApi.grid.setCheckboxRow(row, true);
-          }
-        });
-      }, 300);
-    } else if (!props.multiple && data && !Array.isArray(data)) {
-      setTimeout(() => {
-        const tableData = gridApi.grid.getTableData().fullData;
+/** 打开弹窗 */
+async function openModal(data?: MallSpuApi.Spu | MallSpuApi.Spu[]) {
+  initData.value = data;
+  visible.value = true;
+  // 1. 先查询数据
+  await gridApi.query();
+  // 2. 设置已选中行
+  if (props.multiple && Array.isArray(data) && data.length > 0) {
+    setTimeout(() => {
+      const tableData = gridApi.grid.getTableData().fullData;
+      data.forEach((spu) => {
         const row = tableData.find(
-          (item: MallSpuApi.Spu) => item.id === data.id,
+          (item: MallSpuApi.Spu) => item.id === spu.id,
         );
         if (row) {
-          gridApi.grid.setRadioRow(row);
+          gridApi.grid.setCheckboxRow(row, true);
         }
-      }, 300);
-    }
-  },
-});
+      });
+    }, 300);
+  } else if (!props.multiple && data && !Array.isArray(data)) {
+    setTimeout(() => {
+      const tableData = gridApi.grid.getTableData().fullData;
+      const row = tableData.find(
+        (item: MallSpuApi.Spu) => item.id === data.id,
+      );
+      if (row) {
+        gridApi.grid.setRadioRow(row);
+      }
+    }, 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[]) => {
-    modalApi.setData(data).open();
-  },
+  open: openModal,
 });
 
 /** 初始化分类数据 */
@@ -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>