From 9b521cff90e762b0eb8c695ae905965b3876ff44 Mon Sep 17 00:00:00 2001 From: puhui999 Date: Tue, 25 Nov 2025 21:29:35 +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 --- .../spu/components/sku-table-select.vue | 50 ++++++--- .../spu/components/spu-table-select.vue | 105 ++++++++++-------- 2 files changed, 91 insertions(+), 64 deletions(-) diff --git a/apps/web-antd/src/views/mall/product/spu/components/sku-table-select.vue b/apps/web-antd/src/views/mall/product/spu/components/sku-table-select.vue index 2679a9d4f..dad223735 100644 --- a/apps/web-antd/src/views/mall/product/spu/components/sku-table-select.vue +++ b/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(); /** 表格列配置 */ @@ -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(); - 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, }); diff --git a/apps/web-antd/src/views/mall/product/spu/components/spu-table-select.vue b/apps/web-antd/src/views/mall/product/spu/components/spu-table-select.vue index 6647ae649..513a35b75 100644 --- a/apps/web-antd/src/views/mall/product/spu/components/spu-table-select.vue +++ b/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([]); // 分类列表 const categoryTreeList = ref([]); // 分类树 +/** 弹窗显示状态 */ +const visible = ref(false); +const initData = ref(); + /** 单选：处理选中变化 */ 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(); - 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 () => {