From c1fa433348dded12f5c6474c5c00227840472503 Mon Sep 17 00:00:00 2001
From: puhui999 <puhui999@163.com>
Date: Tue, 25 Nov 2025 19:02:56 +0800
Subject: [PATCH] =?UTF-8?q?fix=EF=BC=9A=E3=80=90antd=E3=80=91=E3=80=90mall?=
 =?UTF-8?q?=E3=80=91=E4=B8=9A=E5=8A=A1=E5=BC=B9=E7=AA=97=E9=80=89=E6=8B=A9?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E7=9A=84=20Modal=20=E6=94=B9=E6=88=90?=
 =?UTF-8?q?=E4=BD=BF=E7=94=A8=20antd=20=E8=87=AA=E5=B7=B1=E7=9A=84?=
 =?UTF-8?q?=E3=80=82=E5=8E=9F=E5=9B=A0=E6=98=AF=20vben=20modal=20=E5=B5=8C?=
 =?UTF-8?q?=E5=A5=97=E5=85=B3=E9=97=AD=E4=B8=80=E4=B8=AA=E4=BC=9A=E5=85=A8?=
 =?UTF-8?q?=E9=83=BD=E5=85=B3=E9=97=AD=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../product/spu/components/spu-select.vue     | 107 +++++++-------
 .../promotion/point/activity/modules/form.vue | 130 +++++++++---------
 2 files changed, 123 insertions(+), 114 deletions(-)

diff --git a/apps/web-antd/src/views/mall/product/spu/components/spu-select.vue b/apps/web-antd/src/views/mall/product/spu/components/spu-select.vue
index 153d11ca7..bddc5f840 100644
--- a/apps/web-antd/src/views/mall/product/spu/components/spu-select.vue
+++ b/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,50 +240,51 @@ const [Grid, gridApi] = useVbenVxeGrid({
   },
 });
 
-/** 初始化弹窗 */
-const [Modal, modalApi] = useVbenModal({
-  destroyOnClose: true,
-  onConfirm: () => {
-    if (selectedSpuId.value === 0) {
-      message.warning('没有选择任何商品');
-      return;
-    }
-    if (props.isSelectSku && selectedSkuIds.value.length === 0) {
-      message.warning('没有选择任何商品属性');
-      return;
-    }
-    // 返回各自 id 列表
-    props.isSelectSku
-      ? emit('confirm', selectedSpuId.value, selectedSkuIds.value)
-      : emit('confirm', selectedSpuId.value);
+/** 弹窗显示状态 */
+const visible = ref(false);
 
-    // 重置选中状态
-    selectedSpuId.value = 0;
-    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();
-    }
-  },
-});
+/** 打开弹窗 */
+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;
+  }
+  if (props.isSelectSku && selectedSkuIds.value.length === 0) {
+    message.warning('没有选择任何商品属性');
+    return;
+  }
+  // 返回各自 id 列表
+  props.isSelectSku
+    ? emit('select', selectedSpuId.value, selectedSkuIds.value)
+    : emit('select', selectedSpuId.value);
+
+  // 重置选中状态
+  closeModal();
+}
 
 /** 对外暴露的方法 */
 defineExpose({
-  open: () => {
-    modalApi.open();
-  },
+  open: openModal,
 });
 
 /** 初始化分类数据 */
@@ -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 }">
diff --git a/apps/web-antd/src/views/mall/promotion/point/activity/modules/form.vue b/apps/web-antd/src/views/mall/promotion/point/activity/modules/form.vue
index 9804d7d3f..1fdb090dc 100644
--- a/apps/web-antd/src/views/mall/promotion/point/activity/modules/form.vue
+++ b/apps/web-antd/src/views/mall/promotion/point/activity/modules/form.vue
@@ -220,75 +220,77 @@ const [Modal, modalApi] = useVbenModal({
 </script>
 
 <template>
-  <Modal :title="getTitle" class="w-[70%]">
-    <Form class="mx-4">
-      <!-- 商品选择 -->
-      <template #spuId>
-        <div class="w-full">
-          <Button v-if="!formData?.id" type="primary" @click="openSpuSelect">
-            选择商品
-          </Button>
+  <div>
+    <Modal :title="getTitle" class="w-[70%]">
+      <Form class="mx-4">
+        <!-- 商品选择 -->
+        <template #spuId>
+          <div class="w-full">
+            <Button v-if="!formData?.id" type="primary" @click="openSpuSelect">
+              选择商品
+            </Button>
 
-          <!-- SPU 和 SKU 列表展示 -->
-          <SpuAndSkuList
-            ref="spuAndSkuListRef"
-            :rule-config="ruleConfig"
-            :spu-list="spuList"
-            :spu-property-list-p="spuPropertyList"
-            class="mt-4"
-          >
-            <!-- 扩展列：积分商城特有配置 -->
-            <template #default>
-              <VxeColumn align="center" min-width="168" title="可兑换库存">
-                <template #default="{ row: sku }">
-                  <InputNumber
-                    v-model:value="sku.productConfig.stock"
-                    :max="sku.stock"
-                    :min="0"
-                    class="w-full"
-                  />
-                </template>
-              </VxeColumn>
-              <VxeColumn align="center" min-width="168" title="可兑换次数">
-                <template #default="{ row: sku }">
-                  <InputNumber
-                    v-model:value="sku.productConfig.count"
-                    :min="0"
-                    class="w-full"
-                  />
-                </template>
-              </VxeColumn>
-              <VxeColumn align="center" min-width="168" title="所需积分">
-                <template #default="{ row: sku }">
-                  <InputNumber
-                    v-model:value="sku.productConfig.point"
-                    :min="0"
-                    class="w-full"
-                  />
-                </template>
-              </VxeColumn>
-              <VxeColumn align="center" min-width="168" title="所需金额(元)">
-                <template #default="{ row: sku }">
-                  <InputNumber
-                    v-model:value="sku.productConfig.price"
-                    :min="0"
-                    :precision="2"
-                    :step="0.1"
-                    class="w-full"
-                  />
-                </template>
-              </VxeColumn>
-            </template>
-          </SpuAndSkuList>
-        </div>
-      </template>
-    </Form>
+            <!-- SPU 和 SKU 列表展示 -->
+            <SpuAndSkuList
+              ref="spuAndSkuListRef"
+              :rule-config="ruleConfig"
+              :spu-list="spuList"
+              :spu-property-list-p="spuPropertyList"
+              class="mt-4"
+            >
+              <!-- 扩展列：积分商城特有配置 -->
+              <template #default>
+                <VxeColumn align="center" min-width="168" title="可兑换库存">
+                  <template #default="{ row: sku }">
+                    <InputNumber
+                      v-model:value="sku.productConfig.stock"
+                      :max="sku.stock"
+                      :min="0"
+                      class="w-full"
+                    />
+                  </template>
+                </VxeColumn>
+                <VxeColumn align="center" min-width="168" title="可兑换次数">
+                  <template #default="{ row: sku }">
+                    <InputNumber
+                      v-model:value="sku.productConfig.count"
+                      :min="0"
+                      class="w-full"
+                    />
+                  </template>
+                </VxeColumn>
+                <VxeColumn align="center" min-width="168" title="所需积分">
+                  <template #default="{ row: sku }">
+                    <InputNumber
+                      v-model:value="sku.productConfig.point"
+                      :min="0"
+                      class="w-full"
+                    />
+                  </template>
+                </VxeColumn>
+                <VxeColumn align="center" min-width="168" title="所需金额(元)">
+                  <template #default="{ row: sku }">
+                    <InputNumber
+                      v-model:value="sku.productConfig.price"
+                      :min="0"
+                      :precision="2"
+                      :step="0.1"
+                      class="w-full"
+                    />
+                  </template>
+                </VxeColumn>
+              </template>
+            </SpuAndSkuList>
+          </div>
+        </template>
+      </Form>
+    </Modal>
 
     <!-- 商品选择器弹窗 -->
     <SpuSkuSelect
       ref="spuSkuSelectRef"
       :is-select-sku="true"
-      @confirm="handleSpuSelected"
+      @select="handleSpuSelected"
     />
-  </Modal>
+  </div>
 </template>