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

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; // 优惠券编号
-    id: number;
+    name: string; // 优惠券名称
-    /** 优惠券名称 */
+    status: number; // 优惠券状态
-    name: string;
+    type: number; // 优惠券类型
-    /** 优惠券状态 */
+    price: number; // 优惠券金额
-    status: number;
+    usePrice: number; // 使用门槛
-    /** 优惠券类型 */
+    productScope: number; // 商品范围
-    type: number;
+    productSpuIds: number[]; // 商品编号数组
-    /** 优惠券金额 */
+    validityType: number; // 有效期类型
-    price: number;
+    validStartTime: Date; // 固定日期-生效开始时间
-    /** 使用门槛 */
+    validEndTime: Date; // 固定日期-生效结束时间
-    usePrice: number;
+    fixedStartTerm: number; // 领取日期-开始天数
-    /** 商品范围 */
+    fixedEndTerm: number; // 领取日期-结束天数
-    productScope: number;
+    takeLimitCount: number; // 每人限领个数
-    /** 商品编号数组 */
+    usePriceEnabled: boolean; // 是否设置满多少金额可用
-    productSpuIds: number[];
+    productCategoryIds: number[]; // 商品分类编号数组
-    /** 有效期类型 */
-    validityType: number;
-    /** 固定日期-生效开始时间 */
-    validStartTime: Date;
-    /** 固定日期-生效结束时间 */
-    validEndTime: Date;
-    /** 领取日期-开始天数 */
-    fixedStartTerm: number;
-    /** 领取日期-结束天数 */
-    fixedEndTerm: number;
-    /** 每人限领个数 */
-    takeLimitCount: number;
-    /** 是否设置满多少金额可用 */
-    usePriceEnabled: boolean;
-    /** 商品分类编号数组 */
-    productCategoryIds: number[];
   }
 
   /** 发送优惠券 */
   export interface CouponSendReqVO {
-    /** 优惠券编号 */
+    templateId: number; // 优惠券编号
-    templateId: number;
+    userIds: number[]; // 用户编号数组
-    /** 用户编号数组 */
-    userIds: number[];
   }
 }
 

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' },
     },

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;

apps/web-antd/src/views/mall/product/property/modules/property-grid.vue

@@ -1,8 +1,5 @@
 <script lang="ts" setup>
-import type {
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
-  VxeGridListeners,
-  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);
+    await deleteProperty(row.id!);
-    message.success({
+    message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
-      content: $t('ui.actionMessage.deleteSuccess', [row.name]),
+    handleRefresh();
-    });
-    onRefresh();
   } 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

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<
+    const data = modalApi.getData<MallPropertyApi.PropertyValue>();
-      MallPropertyApi.PropertyValue | { propertyId?: string }
+    if (!data || !data.id) {
-    >();
+      // 设置 propertyId
-
+      await formApi.setValues(data);
-    // 如果有ID，表示是编辑
+      return;
-    if (data && 'id' in data && data.id) {
+    }
-      modalApi.lock();
+    modalApi.lock();
-      try {
+    try {
-        formData.value = await getPropertyValue(data.id);
+      formData.value = await getPropertyValue(data.id);
-        // 设置到 values
+      // 设置到 values
-        await formApi.setValues(formData.value);
+      await formApi.setValues(formData.value);
-      } finally {
+    } finally {
-        modalApi.unlock();
+      modalApi.unlock();
-      }
-    } else if (data && 'propertyId' in data && data.propertyId) {
-      // 新增时，如果传入了propertyId，则需要设置
-      await formApi.setValues({
-        propertyId: data.propertyId,
-      });
     }
   },
 });

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);
+    await deletePropertyValue(row.id!);
-    message.success({
+    message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
-      content: $t('ui.actionMessage.deleteSuccess', [row.name]),
+    handleRefresh();
-    });
-    onRefresh();
   } 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,
-  () => {
+  (newPropertyId) => {
-    if (props.propertyId) {
+    if (newPropertyId) {
-      onRefresh();
+      // 设置搜索表单中的 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>