feat：【mall 商城】商品属性的迁移（antd）

2025-10-08 17:01:18 +08:00
parent 5cdf1af39f
commit 276d91190c
6 changed files with 114 additions and 113 deletions
--- a/apps/web-antd/src/api/mall/promotion/coupon/coupon.ts
+++ b/apps/web-antd/src/api/mall/promotion/coupon/coupon.ts
@@ -5,46 +5,28 @@ import { requestClient } from '#/api/request';
 export namespace MallCouponApi {
  /** 优惠券 */
  export interface Coupon {
-    /** 优惠券编号 */
-    id: number;
-    /** 优惠券名称 */
-    name: string;
-    /** 优惠券状态 */
-    status: number;
-    /** 优惠券类型 */
-    type: number;
-    /** 优惠券金额 */
-    price: number;
-    /** 使用门槛 */
-    usePrice: number;
-    /** 商品范围 */
-    productScope: number;
-    /** 商品编号数组 */
-    productSpuIds: number[];
-    /** 有效期类型 */
-    validityType: number;
-    /** 固定日期-生效开始时间 */
-    validStartTime: Date;
-    /** 固定日期-生效结束时间 */
-    validEndTime: Date;
-    /** 领取日期-开始天数 */
-    fixedStartTerm: number;
-    /** 领取日期-结束天数 */
-    fixedEndTerm: number;
-    /** 每人限领个数 */
-    takeLimitCount: number;
-    /** 是否设置满多少金额可用 */
-    usePriceEnabled: boolean;
-    /** 商品分类编号数组 */
-    productCategoryIds: number[];
+    id: number; // 优惠券编号
+    name: string; // 优惠券名称
+    status: number; // 优惠券状态
+    type: number; // 优惠券类型
+    price: number; // 优惠券金额
+    usePrice: number; // 使用门槛
+    productScope: number; // 商品范围
+    productSpuIds: number[]; // 商品编号数组
+    validityType: number; // 有效期类型
+    validStartTime: Date; // 固定日期-生效开始时间
+    validEndTime: Date; // 固定日期-生效结束时间
+    fixedStartTerm: number; // 领取日期-开始天数
+    fixedEndTerm: number; // 领取日期-结束天数
+    takeLimitCount: number; // 每人限领个数
+    usePriceEnabled: boolean; // 是否设置满多少金额可用
+    productCategoryIds: number[]; // 商品分类编号数组
  }

  /** 发送优惠券 */
  export interface CouponSendReqVO {
-    /** 优惠券编号 */
-    templateId: number;
-    /** 用户编号数组 */
-    userIds: number[];
+    templateId: number; // 优惠券编号
+    userIds: number[]; // 用户编号数组
  }
 }

--- a/apps/web-antd/src/views/mall/product/property/data.ts
+++ b/apps/web-antd/src/views/mall/product/property/data.ts
@@ -2,10 +2,11 @@ import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';

 import { getPropertySimpleList } from '#/api/mall/product/property';
+import { getRangePickerDefaultProps } from '#/utils';

 // ============================== 属性 ==============================

-/** 类型新增/修改的表单 */
+/** 属性新增/修改的表单 */
 export function usePropertyFormSchema(): VbenFormSchema[] {
  return [
    {
@@ -18,10 +19,10 @@ export function usePropertyFormSchema(): VbenFormSchema[] {
    },
    {
      fieldName: 'name',
-      label: '名称',
+      label: '属性名称',
      component: 'Input',
      componentProps: {
-        placeholder: '请输入名称',
+        placeholder: '请输入属性名称',
      },
      rules: 'required',
    },
@@ -36,53 +37,66 @@ export function usePropertyFormSchema(): VbenFormSchema[] {
  ];
 }

-/** 类型列表的搜索表单 */
+/** 属性列表的搜索表单 */
 export function usePropertyGridFormSchema(): VbenFormSchema[] {
  return [
    {
      fieldName: 'name',
-      label: '名称',
+      label: '属性名称',
      component: 'Input',
      componentProps: {
-        placeholder: '请输入名称',
+        placeholder: '请输入属性名称',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'createTime',
+      label: '创建时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
        allowClear: true,
      },
    },
  ];
 }

-/** 类型列表的字段 */
+/** 属性列表的字段 */
 export function usePropertyGridColumns(): VxeTableGridOptions['columns'] {
  return [
    {
      field: 'id',
-      title: '编号',
+      title: '属性编号',
+      minWidth: 100,
    },
    {
      field: 'name',
-      title: '名称',
+      title: '属性名称',
+      minWidth: 200,
    },
    {
      field: 'remark',
      title: '备注',
+      minWidth: 180,
    },
    {
      field: 'createTime',
      title: '创建时间',
+      minWidth: 180,
      formatter: 'formatDateTime',
    },
    {
      title: '操作',
-      width: 160,
+      minWidth: 120,
      fixed: 'right',
      slots: { default: 'actions' },
    },
  ];
 }

-// ============================== 值数据 ==============================
+// ============================== 属性值 ==============================

-/** 数据新增/修改的表单 */
+/** 属性值新增/修改的表单 */
 export function useValueFormSchema(): VbenFormSchema[] {
  return [
    {
@@ -95,11 +109,12 @@ export function useValueFormSchema(): VbenFormSchema[] {
    },
    {
      fieldName: 'propertyId',
-      label: '属性编号',
+      label: '属性',
      component: 'ApiSelect',
      componentProps: (values) => {
        return {
          api: getPropertySimpleList,
+          placeholder: '请选择属性',
          labelField: 'name',
          valueField: 'id',
          disabled: !!values.id,
@@ -112,10 +127,10 @@ export function useValueFormSchema(): VbenFormSchema[] {
    },
    {
      fieldName: 'name',
-      label: '名称',
+      label: '属性值名称',
      component: 'Input',
      componentProps: {
-        placeholder: '请输入名称',
+        placeholder: '请输入属性值名称',
      },
      rules: 'required',
    },
@@ -130,45 +145,61 @@ export function useValueFormSchema(): VbenFormSchema[] {
  ];
 }

-/** 字典数据列表搜索表单 */
+/** 属性值列表搜索表单 */
 export function useValueGridFormSchema(): VbenFormSchema[] {
  return [
+    {
+      fieldName: 'propertyId',
+      label: '属性项',
+      component: 'ApiSelect',
+      componentProps: {
+        api: getPropertySimpleList,
+        placeholder: '请选择属性项',
+        labelField: 'name',
+        valueField: 'id',
+        disabled: true,
+        allowClear: false,
+      },
+    },
    {
      fieldName: 'name',
-      label: '名称',
+      label: '属性值名称',
      component: 'Input',
      componentProps: {
+        placeholder: '请输入属性值名称',
        allowClear: true,
      },
    },
  ];
 }

-/**
- * 字典数据表格列
- */
+/** 属性值表格列 */
 export function useValueGridColumns(): VxeTableGridOptions['columns'] {
  return [
    {
      field: 'id',
-      title: '编号',
+      title: '属性值编号',
+      minWidth: 100,
    },
    {
      field: 'name',
      title: '属性值名称',
+      minWidth: 180,
    },
    {
      field: 'remark',
      title: '备注',
+      minWidth: 180,
    },
    {
      title: '创建时间',
      field: 'createTime',
+      minWidth: 180,
      formatter: 'formatDateTime',
    },
    {
      title: '操作',
-      width: 160,
+      minWidth: 120,
      fixed: 'right',
      slots: { default: 'actions' },
    },
--- a/apps/web-antd/src/views/mall/product/property/index.vue
+++ b/apps/web-antd/src/views/mall/product/property/index.vue
@@ -6,7 +6,7 @@ import { DocAlert, Page } from '@vben/common-ui';
 import PropertyGrid from './modules/property-grid.vue';
 import ValueGrid from './modules/value-grid.vue';

-const searchPropertyId = ref<number>(); // 搜索的属性ID
+const searchPropertyId = ref<number>(); // 搜索的属性 ID

 function handlePropertyIdSelect(propertyId: number) {
  searchPropertyId.value = propertyId;
--- a/apps/web-antd/src/views/mall/product/property/modules/property-grid.vue
+++ b/apps/web-antd/src/views/mall/product/property/modules/property-grid.vue
@@ -1,8 +1,5 @@
 <script lang="ts" setup>
-import type {
-  VxeGridListeners,
-  VxeTableGridOptions,
-} from '#/adapter/vxe-table';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { MallPropertyApi } from '#/api/mall/product/property';

 import { useVbenModal } from '@vben/common-ui';
@@ -24,7 +21,7 @@ const [PropertyFormModal, propertyFormModalApi] = useVbenModal({
 });

 /** 刷新表格 */
-function onRefresh() {
+function handleRefresh() {
  gridApi.query();
 }

@@ -34,7 +31,7 @@ function handleCreate() {
 }

 /** 编辑属性 */
-function handleEdit(row: any) {
+function handleEdit(row: MallPropertyApi.Property) {
  propertyFormModalApi.setData(row).open();
 }

@@ -45,23 +42,14 @@ async function handleDelete(row: MallPropertyApi.Property) {
    duration: 0,
  });
  try {
-    await deleteProperty(row.id as number);
-    message.success({
-      content: $t('ui.actionMessage.deleteSuccess', [row.name]),
-    });
-    onRefresh();
+    await deleteProperty(row.id!);
+    message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+    handleRefresh();
  } finally {
    hideLoading();
  }
 }

-/** 表格事件 */
-const gridEvents: VxeGridListeners<MallPropertyApi.Property> = {
-  cellClick: ({ row }) => {
-    emit('select', row.id);
-  },
-};
-
 const [Grid, gridApi] = useVbenVxeGrid({
  formOptions: {
    schema: usePropertyGridFormSchema(),
@@ -84,20 +72,24 @@ const [Grid, gridApi] = useVbenVxeGrid({
    rowConfig: {
      keyField: 'id',
      isCurrent: true,
+      isHover: true,
    },
    toolbarConfig: {
      refresh: true,
      search: true,
    },
  } as VxeTableGridOptions<MallPropertyApi.Property>,
-  gridEvents,
+  gridEvents: {
+    cellClick: ({ row }: { row: MallPropertyApi.Property }) => {
+      emit('select', row.id);
+    },
+  },
 });
 </script>

 <template>
  <div class="h-full">
-    <PropertyFormModal @success="onRefresh" />
-
+    <PropertyFormModal @success="handleRefresh" />
    <Grid table-title="属性列表">
      <template #toolbar-tools>
        <TableAction
--- a/apps/web-antd/src/views/mall/product/property/modules/value-form.vue
+++ b/apps/web-antd/src/views/mall/product/property/modules/value-form.vue
@@ -67,25 +67,19 @@ const [Modal, modalApi] = useVbenModal({
      return;
    }
    // 加载数据
-    const data = modalApi.getData<
-      MallPropertyApi.PropertyValue | { propertyId?: string }
-    >();
-
-    // 如果有ID，表示是编辑
-    if (data && 'id' in data && data.id) {
-      modalApi.lock();
-      try {
-        formData.value = await getPropertyValue(data.id);
-        // 设置到 values
-        await formApi.setValues(formData.value);
-      } finally {
-        modalApi.unlock();
-      }
-    } else if (data && 'propertyId' in data && data.propertyId) {
-      // 新增时，如果传入了propertyId，则需要设置
-      await formApi.setValues({
-        propertyId: data.propertyId,
-      });
+    const data = modalApi.getData<MallPropertyApi.PropertyValue>();
+    if (!data || !data.id) {
+      // 设置 propertyId
+      await formApi.setValues(data);
+      return;
+    }
+    modalApi.lock();
+    try {
+      formData.value = await getPropertyValue(data.id);
+      // 设置到 values
+      await formApi.setValues(formData.value);
+    } finally {
+      modalApi.unlock();
    }
  },
 });
--- a/apps/web-antd/src/views/mall/product/property/modules/value-grid.vue
+++ b/apps/web-antd/src/views/mall/product/property/modules/value-grid.vue
@@ -31,32 +31,30 @@ const [ValueFormModal, valueFormModalApi] = useVbenModal({
 });

 /** 刷新表格 */
-function onRefresh() {
+function handleRefresh() {
  gridApi.query();
 }

-/** 创建字典数据 */
+/** 创建属性值 */
 function handleCreate() {
  valueFormModalApi.setData({ propertyId: props.propertyId }).open();
 }

-/** 编辑字典数据 */
+/** 编辑属性值 */
 function handleEdit(row: MallPropertyApi.PropertyValue) {
  valueFormModalApi.setData(row).open();
 }

-/** 删除字典数据 */
+/** 删除属性值 */
 async function handleDelete(row: MallPropertyApi.PropertyValue) {
  const hideLoading = message.loading({
    content: $t('ui.actionMessage.deleting', [row.name]),
    duration: 0,
  });
  try {
-    await deletePropertyValue(row.id as number);
-    message.success({
-      content: $t('ui.actionMessage.deleteSuccess', [row.name]),
-    });
-    onRefresh();
+    await deletePropertyValue(row.id!);
+    message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
+    handleRefresh();
  } finally {
    hideLoading();
  }
@@ -84,6 +82,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
    },
    rowConfig: {
      keyField: 'id',
+      isHover: true,
    },
    toolbarConfig: {
      refresh: true,
@@ -92,20 +91,23 @@ const [Grid, gridApi] = useVbenVxeGrid({
  } as VxeTableGridOptions<MallPropertyApi.PropertyValue>,
 });

-/** 监听 dictType 变化，重新查询 */
+/** 监听 propertyId 变化，重新查询 */
 watch(
  () => props.propertyId,
-  () => {
-    if (props.propertyId) {
-      onRefresh();
+  (newPropertyId) => {
+    if (newPropertyId) {
+      // 设置搜索表单中的 propertyId
+      gridApi.formApi.setValues({ propertyId: newPropertyId });
+      handleRefresh();
    }
  },
+  { immediate: true },
 );
 </script>

 <template>
  <div class="flex h-full flex-col">
-    <ValueFormModal @success="onRefresh" />
+    <ValueFormModal @success="handleRefresh" />

    <Grid table-title="属性值列表">
      <template #toolbar-tools>