feat：【mall 商城】spu sku 选择器优化（antd）

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

@@ -8,7 +8,7 @@ import { computed, ref } from 'vue';
 import { useVbenModal } from '@vben/common-ui';
 import { fenToYuan } from '@vben/utils';
 
-import { Input, message } from 'ant-design-vue';
+import { message } from 'ant-design-vue';
 
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
 import { getSpu } from '#/api/mall/product/spu';
@@ -21,18 +21,13 @@ const emit = defineEmits<{
   change: [sku: MallSpuApi.Sku];
 }>();
 
-const selectedSkuId = ref<number>();
 const spuId = ref<number>();
 
-/** 配置列 */
+/** 表格列配置 */
-// TODO @puhui999：貌似列太宽了？
 const gridColumns = computed<VxeGridProps['columns']>(() => [
   {
-    field: 'id',
+    type: 'radio',
-    title: '#',
+    width: 55,
-    width: 60,
-    align: 'center',
-    slots: { default: 'radio-column' },
   },
   {
     field: 'picUrl',
@@ -72,6 +67,9 @@ const [Grid, gridApi] = useVbenVxeGrid({
     height: 400,
     border: true,
     showOverflow: true,
+    radioConfig: {
+      reserve: true,
+    },
     proxyConfig: {
       ajax: {
         query: async () => {
@@ -93,46 +91,42 @@ const [Grid, gridApi] = useVbenVxeGrid({
       },
     },
   },
+  gridEvents: {
+    radioChange: handleRadioChange,
+  },
 });
 
 /** 处理选中 */
-function handleSelected(row: MallSpuApi.Sku) {
+function handleRadioChange() {
-  emit('change', row);
+  const selectedRow = gridApi.grid.getRadioRecord() as MallSpuApi.Sku;
-  modalApi.close();
+  if (selectedRow) {
-  selectedSkuId.value = undefined;
+    emit('change', selectedRow);
+    modalApi.close();
+  }
 }
 
 const [Modal, modalApi] = useVbenModal({
   destroyOnClose: true,
   onOpenChange: async (isOpen: boolean) => {
     if (!isOpen) {
-      selectedSkuId.value = undefined;
+      gridApi.grid.clearRadioRow();
       spuId.value = undefined;
       return;
     }
+
     const data = modalApi.getData<SpuData>();
-    // TODO @puhui999：这里要不 if return，让括号的层级简单点。
+    if (!data?.spuId) {
-    if (data?.spuId) {
+      return;
-      spuId.value = data.spuId;
-      // 触发数据查询
-      await gridApi.query();
     }
+
+    spuId.value = data.spuId;
+    await gridApi.query();
   },
 });
 </script>
 
 <template>
   <Modal class="w-[700px]" title="选择规格">
-    <Grid>
+    <Grid />
-      <template #radio-column="{ row }">
-        <Input
-          v-model="selectedSkuId"
-          :value="row.id"
-          class="cursor-pointer"
-          type="radio"
-          @change="handleSelected(row)"
-        />
-      </template>
-    </Grid>
   </Modal>
 </template>

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

@@ -0,0 +1,225 @@
+<!-- SPU 商品选择弹窗组件 -->
+<script lang="ts" setup>
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeGridProps } from '#/adapter/vxe-table';
+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 { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getCategoryList } from '#/api/mall/product/category';
+import { getSpuPage } from '#/api/mall/product/spu';
+import { getRangePickerDefaultProps } from '#/utils';
+
+interface SpuTableSelectProps {
+  multiple?: boolean;
+}
+
+const props = withDefaults(defineProps<SpuTableSelectProps>(), {
+  multiple: false,
+});
+
+const emit = defineEmits<{
+  change: [spu: MallSpuApi.Spu | MallSpuApi.Spu[]];
+}>();
+
+const categoryList = ref<any[]>([]);
+const categoryTreeList = ref<any[]>([]);
+
+/** 搜索表单 Schema */
+const formSchema = computed<VbenFormSchema[]>(() => [
+  {
+    fieldName: 'name',
+    label: '商品名称',
+    component: 'Input',
+    componentProps: {
+      placeholder: '请输入商品名称',
+      allowClear: true,
+    },
+  },
+  {
+    fieldName: 'categoryId',
+    label: '商品分类',
+    component: 'TreeSelect',
+    componentProps: {
+      treeData: categoryTreeList.value,
+      fieldNames: {
+        label: 'name',
+        value: 'id',
+      },
+      treeCheckStrictly: true,
+      placeholder: '请选择商品分类',
+      allowClear: true,
+      showSearch: true,
+      treeNodeFilterProp: 'name',
+    },
+  },
+  {
+    fieldName: 'createTime',
+    label: '创建时间',
+    component: 'RangePicker',
+    componentProps: {
+      ...getRangePickerDefaultProps(),
+      allowClear: true,
+    },
+  },
+]);
+
+/** 表格列配置 */
+const gridColumns = computed<VxeGridProps['columns']>(() => {
+  const columns: VxeGridProps['columns'] = [];
+
+  if (props.multiple) {
+    columns.push({ type: 'checkbox', width: 55 });
+  } else {
+    columns.push({ type: 'radio', width: 55 });
+  }
+
+  columns.push(
+    {
+      field: 'id',
+      title: '商品编号',
+      minWidth: 100,
+      align: 'center',
+    },
+    {
+      field: 'picUrl',
+      title: '商品图',
+      width: 100,
+      align: 'center',
+      cellRender: {
+        name: 'CellImage',
+      },
+    },
+    {
+      field: 'name',
+      title: '商品名称',
+      minWidth: 200,
+    },
+    {
+      field: 'categoryId',
+      title: '商品分类',
+      minWidth: 120,
+      formatter: ({ cellValue }) => {
+        const category = categoryList.value?.find((c) => c.id === cellValue);
+        return category?.name || '-';
+      },
+    },
+  );
+
+  return columns;
+});
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: formSchema.value,
+    layout: 'horizontal',
+    collapsed: false,
+  },
+  gridOptions: {
+    columns: gridColumns.value,
+    height: 500,
+    border: true,
+    showOverflow: true,
+    checkboxConfig: props.multiple
+      ? {
+          reserve: true,
+        }
+      : undefined,
+    radioConfig: !props.multiple
+      ? {
+          reserve: true,
+        }
+      : undefined,
+    proxyConfig: {
+      ajax: {
+        async query({ page }: any, formValues: any) {
+          const data = await getSpuPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            tabType: 0,
+            name: formValues.name || undefined,
+            categoryId: formValues.categoryId || undefined,
+            createTime: formValues.createTime || undefined,
+          });
+
+          return {
+            items: data.list || [],
+            total: data.total || 0,
+          };
+        },
+      },
+    },
+  },
+  gridEvents: props.multiple
+    ? {
+        checkboxChange: handleCheckboxChange,
+        checkboxAll: handleCheckboxChange,
+      }
+    : {
+        radioChange: handleRadioChange,
+      },
+});
+
+/** 多选：处理选中变化 */
+function handleCheckboxChange() {
+  // vxe-table 自动管理选中状态，无需手动处理
+}
+
+/** 单选：处理选中变化 */
+function handleRadioChange() {
+  const selectedRow = gridApi.grid.getRadioRecord() as MallSpuApi.Spu;
+  if (selectedRow) {
+    emit('change', selectedRow);
+    modalApi.close();
+  }
+}
+
+const [Modal, modalApi] = useVbenModal({
+  destroyOnClose: true,
+  onConfirm: props.multiple
+    ? () => {
+        const selectedRows = gridApi.grid.getCheckboxRecords() as MallSpuApi.Spu[];
+        emit('change', selectedRows);
+        modalApi.close();
+      }
+    : undefined,
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      gridApi.grid.clearCheckboxRow();
+      gridApi.grid.clearRadioRow();
+      return;
+    }
+
+    const data = modalApi.getData<MallSpuApi.Spu | MallSpuApi.Spu[]>();
+
+    if (props.multiple && Array.isArray(data)) {
+      // 等待数据加载完成后再设置选中状态
+      setTimeout(() => {
+        data.forEach((spu) => {
+          gridApi.grid.setCheckboxRow(spu, true);
+        });
+      }, 100);
+    } else if (!props.multiple && data && !Array.isArray(data)) {
+      setTimeout(() => {
+        gridApi.grid.setRadioRow(data);
+      }, 100);
+    }
+  },
+});
+
+/** 初始化分类数据 */
+onMounted(async () => {
+  categoryList.value = await getCategoryList({});
+  categoryTreeList.value = handleTree(categoryList.value, 'id', 'parentId');
+});
+</script>
+
+<template>
+  <Modal :class="props.multiple ? 'w-[900px]' : 'w-[800px]'" title="选择商品">
+    <Grid />
+  </Modal>
+</template>

apps/web-antd/src/views/mall/product/spu/form/modules/spu-table-select.vue

@@ -1,346 +0,0 @@
-<!-- SPU 商品选择弹窗组件 -->
-<script lang="ts" setup>
-// TODO @puhui999：这个是不是可以放到 components 里？，和商品发布，关系不大
-import type { CheckboxChangeEvent } from 'ant-design-vue/es/checkbox/interface';
-
-import type { VbenFormSchema } from '#/adapter/form';
-import type { VxeGridProps } from '#/adapter/vxe-table';
-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 { Checkbox, Radio } from 'ant-design-vue';
-
-import { useVbenVxeGrid } from '#/adapter/vxe-table';
-import { getCategoryList } from '#/api/mall/product/category';
-import { getSpuPage } from '#/api/mall/product/spu';
-import { getRangePickerDefaultProps } from '#/utils';
-
-interface SpuTableSelectProps {
-  multiple?: boolean; // 是否多选模式
-}
-
-const props = withDefaults(defineProps<SpuTableSelectProps>(), {
-  multiple: false,
-});
-
-const emit = defineEmits<{
-  change: [spu: MallSpuApi.Spu | MallSpuApi.Spu[]];
-}>();
-
-const selectedSpuId = ref<number>(); // 单选：选中的 SPU ID
-const checkedStatus = ref<Record<number, boolean>>({}); // 多选：选中状态 map
-const checkedSpus = ref<MallSpuApi.Spu[]>([]); // 多选：选中的 SPU 列表
-const isCheckAll = ref(false); // 多选：全选状态
-const isIndeterminate = ref(false); // 多选：半选状态
-
-const categoryList = ref<any[]>([]); // 分类列表（扁平）
-const categoryTreeList = ref<any[]>([]); // 分类树
-
-const formSchema = computed<VbenFormSchema[]>(() => {
-  return [
-    {
-      fieldName: 'name',
-      label: '商品名称',
-      component: 'Input',
-      componentProps: {
-        placeholder: '请输入商品名称',
-        allowClear: true,
-      },
-    },
-    {
-      fieldName: 'categoryId',
-      label: '商品分类',
-      component: 'TreeSelect',
-      componentProps: {
-        treeData: categoryTreeList.value,
-        fieldNames: {
-          label: 'name',
-          value: 'id',
-        },
-        treeCheckStrictly: true,
-        placeholder: '请选择商品分类',
-        allowClear: true,
-        showSearch: true,
-        treeNodeFilterProp: 'name',
-      },
-    },
-    {
-      fieldName: 'createTime',
-      label: '创建时间',
-      component: 'RangePicker',
-      componentProps: {
-        ...getRangePickerDefaultProps(),
-        allowClear: true,
-      },
-    },
-  ];
-});
-
-const gridColumns = computed<VxeGridProps['columns']>(() => {
-  const columns: VxeGridProps['columns'] = [];
-
-  // 多选模式：添加多选列
-  if (props.multiple) {
-    columns.push({
-      field: 'checkbox',
-      title: '',
-      width: 55,
-      align: 'center',
-      slots: { default: 'checkbox-column', header: 'checkbox-header' },
-    });
-  } else {
-    // 单选模式：添加单选列
-    columns.push({
-      field: 'radio',
-      title: '#',
-      width: 55,
-      align: 'center',
-      slots: { default: 'radio-column' },
-    });
-  }
-
-  // 其它列
-  columns.push(
-    {
-      field: 'id',
-      title: '商品编号',
-      minWidth: 100,
-      align: 'center',
-    },
-    {
-      field: 'picUrl',
-      title: '商品图',
-      width: 100,
-      align: 'center',
-      cellRender: {
-        name: 'CellImage',
-      },
-    },
-    {
-      field: 'name',
-      title: '商品名称',
-      minWidth: 200,
-    },
-    {
-      field: 'categoryId',
-      title: '商品分类',
-      minWidth: 120,
-      formatter: ({ cellValue }) => {
-        const category = categoryList.value?.find((c) => c.id === cellValue);
-        return category?.name || '-';
-      },
-    },
-  );
-
-  return columns;
-});
-
-const [Grid, gridApi] = useVbenVxeGrid({
-  formOptions: {
-    schema: formSchema.value,
-    layout: 'horizontal',
-    collapsed: false,
-  },
-  gridOptions: {
-    columns: gridColumns.value,
-    height: 500,
-    border: true,
-    showOverflow: true,
-    proxyConfig: {
-      ajax: {
-        async query({ page }: any, formValues: any) {
-          // TODO @puhui999：这里是不是不 try catch？
-          try {
-            const params = {
-              pageNo: page.currentPage,
-              pageSize: page.pageSize,
-              tabType: 0, // 默认获取上架的商品
-              name: formValues.name || undefined,
-              categoryId: formValues.categoryId || undefined,
-              createTime: formValues.createTime || undefined,
-            };
-
-            // TODO @puhui999：一次性的，是不是不声明 params，直接放到 getSpuPage 里？
-            const data = await getSpuPage(params);
-
-            // 初始化多选状态
-            if (props.multiple && data.list) {
-              data.list.forEach((spu) => {
-                if (checkedStatus.value[spu.id!] === undefined) {
-                  checkedStatus.value[spu.id!] = false;
-                }
-              });
-              calculateIsCheckAll();
-            }
-
-            return {
-              items: data.list || [],
-              total: data.total || 0,
-            };
-          } catch (error) {
-            console.error('加载商品数据失败:', error);
-            return { items: [], total: 0 };
-          }
-        },
-      },
-    },
-  },
-});
-
-// TODO @puhui999：如下的选中方法，可以因为 Grid 做简化么？
-/** 单选：处理选中 */
-function handleSingleSelected(row: MallSpuApi.Spu) {
-  selectedSpuId.value = row.id;
-  emit('change', row);
-  modalApi.close();
-}
-
-/** 多选：全选/全不选 */
-function handleCheckAll(e: CheckboxChangeEvent) {
-  const checked = e.target.checked;
-  isCheckAll.value = checked;
-  isIndeterminate.value = false;
-
-  const currentList = gridApi.grid.getData();
-  currentList.forEach((spu: MallSpuApi.Spu) => {
-    handleCheckOne(checked, spu, false);
-  });
-  calculateIsCheckAll();
-}
-
-/** 多选：选中单个 */
-function handleCheckOne(
-  checked: boolean,
-  spu: MallSpuApi.Spu,
-  needCalc = true,
-) {
-  if (checked) {
-    // 避免重复添加
-    const exists = checkedSpus.value.some((item) => item.id === spu.id);
-    if (!exists) {
-      checkedSpus.value.push(spu);
-    }
-    checkedStatus.value[spu.id!] = true;
-  } else {
-    const index = checkedSpus.value.findIndex((item) => item.id === spu.id);
-    if (index !== -1) {
-      checkedSpus.value.splice(index, 1);
-    }
-    checkedStatus.value[spu.id!] = false;
-    isCheckAll.value = false;
-  }
-
-  if (needCalc) {
-    calculateIsCheckAll();
-  }
-}
-
-/** 多选：计算全选状态 */
-function calculateIsCheckAll() {
-  const currentList = gridApi.grid.getData();
-  if (currentList.length === 0) {
-    isCheckAll.value = false;
-    isIndeterminate.value = false;
-    return;
-  }
-
-  const checkedCount = currentList.filter(
-    (spu: MallSpuApi.Spu) => checkedStatus.value[spu.id!],
-  ).length;
-
-  isCheckAll.value = checkedCount === currentList.length;
-  isIndeterminate.value = checkedCount > 0 && checkedCount < currentList.length;
-}
-
-const [Modal, modalApi] = useVbenModal({
-  destroyOnClose: true,
-  // 多选模式时显示确认按钮
-  onConfirm: props.multiple
-    ? () => {
-        emit('change', [...checkedSpus.value]);
-        modalApi.close();
-      }
-    : undefined,
-  async onOpenChange(isOpen: boolean) {
-    if (!isOpen) {
-      // TODO @puhui999：是不是直接清理，不要判断 selectedSpuId.value
-      if (!props.multiple) {
-        selectedSpuId.value = undefined;
-      }
-      return;
-    }
-
-    // 打开时处理初始数据
-    const data = modalApi.getData<MallSpuApi.Spu | MallSpuApi.Spu[]>();
-
-    // 重置多选状态
-    if (props.multiple) {
-      checkedSpus.value = [];
-      checkedStatus.value = {};
-      isCheckAll.value = false;
-      isIndeterminate.value = false;
-      // 恢复已选中的数据
-      if (Array.isArray(data) && data.length > 0) {
-        checkedSpus.value = [...data];
-        checkedStatus.value = Object.fromEntries(
-          data.map((spu) => [spu.id!, true]),
-        );
-      }
-    } else {
-      // 单选模式：恢复已选中的 ID
-      if (data && !Array.isArray(data)) {
-        selectedSpuId.value = data.id;
-      }
-    }
-
-    // 触发查询
-    // TODO @puhui999：貌似不用这里再查询一次，100% 会查询的，记忆中是；
-    await gridApi.query();
-  },
-});
-
-/** 初始化分类数据 */
-onMounted(async () => {
-  categoryList.value = await getCategoryList({});
-  categoryTreeList.value = handleTree(categoryList.value, 'id', 'parentId');
-});
-</script>
-
-<template>
-  <Modal :class="props.multiple ? 'w-[900px]' : 'w-[800px]'" title="选择商品">
-    <Grid>
-      <!-- 单选列 -->
-      <template v-if="!props.multiple" #radio-column="{ row }">
-        <Radio
-          :checked="selectedSpuId === row.id"
-          :value="row.id"
-          class="cursor-pointer"
-          @click="handleSingleSelected(row)"
-        />
-      </template>
-
-      <!-- 多选表头 -->
-      <template v-if="props.multiple" #checkbox-header>
-        <Checkbox
-          v-model:checked="isCheckAll"
-          :indeterminate="isIndeterminate"
-          class="cursor-pointer"
-          @change="handleCheckAll"
-        />
-      </template>
-
-      <!-- 多选列 -->
-      <template v-if="props.multiple" #checkbox-column="{ row }">
-        <Checkbox
-          v-model:checked="checkedStatus[row.id]"
-          class="cursor-pointer"
-          @change="(e) => handleCheckOne(e.target.checked, row)"
-        />
-      </template>
-    </Grid>
-  </Modal>
-</template>