feat：【ele】【mall】spu 选择组件优化

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

@@ -1,16 +1,16 @@
 <!-- SKU 选择弹窗组件 -->
 <script lang="ts" setup>
-import type { VxeGridProps } from '#/adapter/vxe-table';
 import type { MallSpuApi } from '#/api/mall/product/spu';
 
-import { computed, ref } from 'vue';
+import { ref } from 'vue';
 
-import { useVbenModal } from '@vben/common-ui';
-import { fenToYuan } from '@vben/utils';
+import { ElDialog } from 'element-plus';
 
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
 import { getSpu } from '#/api/mall/product/spu';
 
+import { useSkuGridColumns } from './spu-select-data';
+
 interface SpuData {
   spuId: number;
 }
@@ -19,78 +19,28 @@ const emit = defineEmits<{
   change: [sku: MallSpuApi.Sku];
 }>();
 
+const visible = ref(false);
 const spuId = ref<number>();
 
-/** 表格列配置 */
-const gridColumns = computed<VxeGridProps['columns']>(() => [
-  {
-    type: 'radio',
-    width: 55,
-  },
-  {
-    field: 'picUrl',
-    title: '图片',
-    width: 100,
-    align: 'center',
-    cellRender: {
-      name: 'CellImage',
-    },
-  },
-  {
-    field: 'properties',
-    title: '规格',
-    minWidth: 120,
-    align: 'center',
-    formatter: ({ cellValue }) => {
-      return (
-        cellValue?.map((p: MallSpuApi.Property) => p.valueName)?.join(' ') ||
-        '-'
-      );
-    },
-  },
-  {
-    field: 'price',
-    title: '销售价(元)',
-    width: 120,
-    align: 'center',
-    formatter: ({ cellValue }) => {
-      return fenToYuan(cellValue);
-    },
-  },
-]);
-
 /** 处理选中 */
 function handleRadioChange() {
   const selectedRow = gridApi.grid.getRadioRecord() as MallSpuApi.Sku;
   if (selectedRow) {
     emit('change', selectedRow);
-    modalApi.close();
+    closeModal();
   }
 }
 
-// TODO @芋艿：要不要直接非 pager？
 const [Grid, gridApi] = useVbenVxeGrid({
   gridOptions: {
-    columns: gridColumns.value,
+    columns: useSkuGridColumns(),
     height: 400,
     border: true,
-    showOverflow: true,
     radioConfig: {
       reserve: true,
     },
-    proxyConfig: {
-      ajax: {
-        query: async () => {
-          if (!spuId.value) {
-            return { list: [], total: 0 };
-          }
-          const spu = await getSpu(spuId.value);
-          return {
-            list: spu.skus || [],
-            total: spu.skus?.length || 0,
-          };
-        },
-      },
+    pagerConfig: {
+      enabled: false,
     },
   },
   gridEvents: {
@@ -98,26 +48,43 @@ const [Grid, gridApi] = useVbenVxeGrid({
   },
 });
 
-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();
-  },
+/** 关闭弹窗 */
+function closeModal() {
+  visible.value = false;
+  gridApi.grid.clearRadioRow();
+  spuId.value = undefined;
+}
+
+/** 打开弹窗 */
+async function openModal(data?: SpuData) {
+  if (!data?.spuId) {
+    return;
+  }
+  spuId.value = data.spuId;
+  visible.value = true;
+  if (!spuId.value) {
+    gridApi.grid?.reloadData([]);
+    return;
+  }
+  const spu = await getSpu(spuId.value);
+  gridApi.grid?.reloadData(spu.skus || []);
+}
+
+/** 对外暴露的方法 */
+defineExpose({
+  open: openModal,
 });
 </script>
 
 <template>
-  <Modal class="w-[700px]" title="选择规格">
+  <ElDialog
+    v-model="visible"
+    title="选择规格"
+    width="700px"
+    :destroy-on-close="true"
+    :append-to-body="true"
+    @close="closeModal"
+  >
     <Grid />
-  </Modal>
+  </ElDialog>
 </template>

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

@@ -5,11 +5,12 @@ import type { VxeGridProps } from '#/adapter/vxe-table';
 import type { MallCategoryApi } from '#/api/mall/product/category';
 import type { MallSpuApi } from '#/api/mall/product/spu';
 
-import { computed, onMounted, ref } from 'vue';
+import { computed, nextTick, onMounted, ref } from 'vue';
 
-import { useVbenModal } from '@vben/common-ui';
 import { handleTree } from '@vben/utils';
 
+import { ElDialog } from 'element-plus';
+
 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();
   }
 }
 
@@ -153,56 +158,65 @@ 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;
+  await nextTick();
+  // 1. 查询数据
+  await gridApi.query();
+  // 2. 设置已选中行
+  const tableData = gridApi.grid.getTableData().fullData;
+  if (
+    props.multiple &&
+    Array.isArray(initData.value) &&
+    initData.value.length > 0
+  ) {
+    setTimeout(() => {
+      (initData.value as unknown as MallSpuApi.Spu[])!.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 &&
+    initData.value &&
+    !Array.isArray(initData.value)
+  ) {
+    setTimeout(() => {
+      const row = tableData.find(
+        (item: MallSpuApi.Spu) =>
+          item.id === (initData.value as MallSpuApi.Spu).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,
 });
 
 /** 初始化分类数据 */
@@ -213,7 +227,18 @@ onMounted(async () => {
 </script>
 
 <template>
-  <Modal title="选择商品" class="w-[950px]">
+  <ElDialog
+    v-model="visible"
+    title="选择商品"
+    width="950px"
+    :destroy-on-close="true"
+    :append-to-body="true"
+    @close="closeModal"
+  >
     <Grid />
-  </Modal>
+    <template v-if="props.multiple" #footer>
+      <el-button @click="closeModal">取消</el-button>
+      <el-button type="primary" @click="handleConfirm">确定</el-button>
+    </template>
+  </ElDialog>
 </template>