fix：【antd】【mall】优化修复 sku-table-select 选择器

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

@@ -1,17 +1,16 @@
 <!-- SKU 选择弹窗组件 -->
 <script lang="ts" setup>
-import type { VxeGridProps } from '#/adapter/vxe-table';
 import type { MallSpuApi } from '#/api/mall/product/spu';
 
 import { ref } from 'vue';
 
-import { fenToYuan } from '@vben/utils';
-
 import { Modal } from 'ant-design-vue';
 
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
 import { getSpu } from '#/api/mall/product/spu';
 
+import { useSkuGridColumns } from './spu-select-data';
+
 interface SpuData {
   spuId: number;
 }
@@ -23,52 +22,14 @@ const emit = defineEmits<{
 const visible = ref(false);
 const spuId = ref<number>();
 
-/** 表格列配置 */
-const gridColumns: 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);
-    },
-  },
-];
-
 const [Grid, gridApi] = useVbenVxeGrid({
   gridOptions: {
-    columns: gridColumns,
+    columns: useSkuGridColumns(),
     height: 400,
     border: true,
-    showOverflow: true,
     radioConfig: {
       reserve: true,
+      highlight: true,
     },
     rowConfig: {
       keyField: 'id',
@@ -77,22 +38,6 @@ const [Grid, gridApi] = useVbenVxeGrid({
     pagerConfig: {
       enabled: false,
     },
-    proxyConfig: {
-      // TODO @puhui999：看看注释的部分，后续要不要删除
-      // autoLoad: false, // 禁用自动加载，手动触发查询
-      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,
-          };
-        },
-      },
-    },
   },
   gridEvents: {
     radioChange: () => {
@@ -111,7 +56,6 @@ const [Grid, gridApi] = useVbenVxeGrid({
 /** 关闭弹窗 */
 function closeModal() {
   visible.value = false;
-  gridApi.grid.clearRadioRow();
   spuId.value = undefined;
 }
 
@@ -122,12 +66,14 @@ async function openModal(data?: SpuData) {
   }
   spuId.value = data.spuId;
   visible.value = true;
-  // TODO @puhui999：看看注释的部分，后续要不要删除
+  // 注意：useVbenVxeGrid 关闭分页(pagerConfig.enabled=false)后，proxyConfig.ajax.query 的结果不会传递到 vxe-table
-  // // 等待弹窗和 Grid 组件完全渲染后再查询数据
+  // 需要手动调用 reloadData 设置表格数据
-  // await nextTick();
+  if (!spuId.value) {
-  // if (gridApi.grid) {
+    gridApi.grid?.reloadData([]);
-  //   await gridApi.query();
+    return;
-  // }
+  }
+  const spu = await getSpu(spuId.value);
+  gridApi.grid?.reloadData(spu.skus || []);
 }
 
 /** 对外暴露的方法 */

apps/web-antd/src/views/mall/product/spu/components/spu-select-data.ts

@@ -1,11 +1,14 @@
 import type { Ref } from 'vue';
 
 import type { VbenFormSchema } from '#/adapter/form';
-import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { VxeGridProps, VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MallSpuApi } from '#/api/mall/product/spu';
 import type { MallCategoryApi } from '#/api/mall/product/category';
 
 import { computed } from 'vue';
 
+import { fenToYuan } from '@vben/utils';
+
 import { getRangePickerDefaultProps } from '#/utils';
 
 /** 列表的搜索表单 */
@@ -118,3 +121,49 @@ export function useGridColumns(
     },
   ] as VxeTableGridOptions['columns'];
 }
+
+/** SKU 列表的字段 */
+export function useSkuGridColumns(): VxeGridProps['columns'] {
+  return [
+    {
+      type: 'radio',
+      width: 55,
+    },
+    {
+      field: 'id',
+      title: '商品编号',
+      minWidth: 100,
+      align: 'center',
+    },
+    {
+      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);
+      },
+    },
+  ];
+}

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

@@ -190,13 +190,10 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
       isHover: true,
     },
-    // TODO @puhui999：貌似直接 { trigger: 'row', reserve: true } 就可以了？不会影响 radio 的哈。（可以测试下。）
+    expandConfig: {
-    expandConfig: props.isSelectSku
-      ? {
       trigger: 'row',
       reserve: true,
-        }
+    },
-      : undefined,
     proxyConfig: {
       ajax: {
         async query({ page }: any, formValues: any) {