From e226e09e8a1a4919a1f0911bb671d502c28bd868 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Wed, 8 Oct 2025 18:10:42 +0800
Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9A=E3=80=90mall=20=E5=95=86=E5=9F=8E?=
 =?UTF-8?q?=E3=80=91=E5=95=86=E5=93=81=E5=B1=9E=E6=80=A7=E7=9A=84=E8=BF=81?=
 =?UTF-8?q?=E7=A7=BB=EF=BC=88ele=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/views/infra/fileConfig/data.ts        |  6 +-
 .../src/views/mall/product/brand/data.ts      |  6 +-
 .../src/views/mall/product/category/data.ts   |  2 +-
 .../src/views/mall/product/property/data.ts   | 75 +++++++++++++------
 .../src/views/mall/product/property/index.vue |  2 +-
 .../property/modules/property-grid.vue        | 30 +++-----
 .../product/property/modules/value-form.vue   | 32 ++++----
 .../product/property/modules/value-grid.vue   | 26 ++++---
 .../src/views/mall/product/spu/index.vue      |  4 +-
 apps/web-ele/src/views/member/group/data.ts   |  6 +-
 apps/web-ele/src/views/member/level/data.ts   |  2 +-
 .../user/detail/modules/user-coupon-list.vue  |  4 +-
 apps/web-ele/src/views/pay/demo/order/data.ts |  2 +-
 13 files changed, 110 insertions(+), 87 deletions(-)

diff --git a/apps/web-ele/src/views/infra/fileConfig/data.ts b/apps/web-ele/src/views/infra/fileConfig/data.ts
index ec13e4337..63be6a9aa 100644
--- a/apps/web-ele/src/views/infra/fileConfig/data.ts
+++ b/apps/web-ele/src/views/infra/fileConfig/data.ts
@@ -257,7 +257,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       component: 'Input',
       componentProps: {
         placeholder: '请输入配置名',
-        allowClear: true,
+        clearable: true,
       },
     },
     {
@@ -267,7 +267,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       componentProps: {
         options: getDictOptions(DICT_TYPE.INFRA_FILE_STORAGE, 'number'),
         placeholder: '请选择存储器',
-        allowClear: true,
+        clearable: true,
       },
     },
     {
@@ -276,7 +276,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       component: 'RangePicker',
       componentProps: {
         ...getRangePickerDefaultProps(),
-        allowClear: true,
+        clearable: true,
       },
     },
   ];
diff --git a/apps/web-ele/src/views/mall/product/brand/data.ts b/apps/web-ele/src/views/mall/product/brand/data.ts
index d0cd7d5e5..ff8002718 100644
--- a/apps/web-ele/src/views/mall/product/brand/data.ts
+++ b/apps/web-ele/src/views/mall/product/brand/data.ts
@@ -79,7 +79,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       component: 'Input',
       componentProps: {
         placeholder: '请输入品牌名称',
-        allowClear: true,
+        clearable: true,
       },
     },
     {
@@ -89,7 +89,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       componentProps: {
         options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
         placeholder: '请选择品牌状态',
-        allowClear: true,
+        clearable: true,
       },
     },
     {
@@ -98,7 +98,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       component: 'RangePicker',
       componentProps: {
         ...getRangePickerDefaultProps(),
-        allowClear: true,
+        clearable: true,
       },
     },
   ];
diff --git a/apps/web-ele/src/views/mall/product/category/data.ts b/apps/web-ele/src/views/mall/product/category/data.ts
index 9410af365..8dd27d688 100644
--- a/apps/web-ele/src/views/mall/product/category/data.ts
+++ b/apps/web-ele/src/views/mall/product/category/data.ts
@@ -95,7 +95,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       component: 'Input',
       componentProps: {
         placeholder: '请输入分类名称',
-        allowClear: true,
+        clearable: true,
       },
     },
   ];
diff --git a/apps/web-ele/src/views/mall/product/property/data.ts b/apps/web-ele/src/views/mall/product/property/data.ts
index 733c8fdcb..1fd2f2e87 100644
--- a/apps/web-ele/src/views/mall/product/property/data.ts
+++ b/apps/web-ele/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: '请输入属性名称',
+        clearable: true,
+      },
+    },
+    {
+      fieldName: 'createTime',
+      label: '创建时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
         clearable: 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,
+        clearable: false,
+      },
+    },
     {
       fieldName: 'name',
-      label: '名称',
+      label: '属性值名称',
       component: 'Input',
       componentProps: {
+        placeholder: '请输入属性值名称',
         clearable: 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' },
     },
diff --git a/apps/web-ele/src/views/mall/product/property/index.vue b/apps/web-ele/src/views/mall/product/property/index.vue
index 97036c490..302b0a320 100644
--- a/apps/web-ele/src/views/mall/product/property/index.vue
+++ b/apps/web-ele/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;
diff --git a/apps/web-ele/src/views/mall/product/property/modules/property-grid.vue b/apps/web-ele/src/views/mall/product/property/modules/property-grid.vue
index 196843e53..f38757215 100644
--- a/apps/web-ele/src/views/mall/product/property/modules/property-grid.vue
+++ b/apps/web-ele/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();
 }
 
@@ -44,21 +41,14 @@ async function handleDelete(row: MallPropertyApi.Property) {
     text: $t('ui.actionMessage.deleting', [row.name]),
   });
   try {
-    await deleteProperty(row.id as number);
+    await deleteProperty(row.id!);
     ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
-    onRefresh();
+    handleRefresh();
   } finally {
     loadingInstance.close();
   }
 }
 
-/** 表格事件 */
-const gridEvents: VxeGridListeners<MallPropertyApi.Property> = {
-  cellClick: ({ row }) => {
-    emit('select', row.id);
-  },
-};
-
 const [Grid, gridApi] = useVbenVxeGrid({
   formOptions: {
     schema: usePropertyGridFormSchema(),
@@ -81,20 +71,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
diff --git a/apps/web-ele/src/views/mall/product/property/modules/value-form.vue b/apps/web-ele/src/views/mall/product/property/modules/value-form.vue
index 1be3dcf86..c54e6b307 100644
--- a/apps/web-ele/src/views/mall/product/property/modules/value-form.vue
+++ b/apps/web-ele/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();
     }
   },
 });
diff --git a/apps/web-ele/src/views/mall/product/property/modules/value-grid.vue b/apps/web-ele/src/views/mall/product/property/modules/value-grid.vue
index 8ac978fa8..f47358f3a 100644
--- a/apps/web-ele/src/views/mall/product/property/modules/value-grid.vue
+++ b/apps/web-ele/src/views/mall/product/property/modules/value-grid.vue
@@ -31,29 +31,29 @@ 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 loadingInstance = ElLoading.service({
     text: $t('ui.actionMessage.deleting', [row.name]),
   });
   try {
-    await deletePropertyValue(row.id as number);
+    await deletePropertyValue(row.id!);
     ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
-    onRefresh();
+    handleRefresh();
   } finally {
     loadingInstance.close();
   }
@@ -81,6 +81,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
     },
     rowConfig: {
       keyField: 'id',
+      isHover: true,
     },
     toolbarConfig: {
       refresh: true,
@@ -89,20 +90,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>
diff --git a/apps/web-ele/src/views/mall/product/spu/index.vue b/apps/web-ele/src/views/mall/product/spu/index.vue
index 95abca42e..24577ff40 100644
--- a/apps/web-ele/src/views/mall/product/spu/index.vue
+++ b/apps/web-ele/src/views/mall/product/spu/index.vue
@@ -98,7 +98,7 @@ function handleEdit(row: MallSpuApi.Spu) {
 
 /** 删除商品 */
 async function handleDelete(row: MallSpuApi.Spu) {
-  const hideLoading = ElLoading.service({
+  const loadingInstance = ElLoading.service({
     text: $t('ui.actionMessage.deleting', [row.name]),
   });
   try {
@@ -106,7 +106,7 @@ async function handleDelete(row: MallSpuApi.Spu) {
     ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
     await onRefresh();
   } finally {
-    hideLoading.close();
+    loadingInstance.close();
   }
 }
 
diff --git a/apps/web-ele/src/views/member/group/data.ts b/apps/web-ele/src/views/member/group/data.ts
index 7f8c1afcd..d9a80b079 100644
--- a/apps/web-ele/src/views/member/group/data.ts
+++ b/apps/web-ele/src/views/member/group/data.ts
@@ -54,7 +54,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       component: 'Input',
       componentProps: {
         placeholder: '请输入分组名称',
-        allowClear: true,
+        clearable: true,
       },
     },
     {
@@ -64,7 +64,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       componentProps: {
         options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
         placeholder: '请选择状态',
-        allowClear: true,
+        clearable: true,
       },
     },
     {
@@ -73,7 +73,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       component: 'RangePicker',
       componentProps: {
         placeholder: ['开始日期', '结束日期'],
-        allowClear: true,
+        clearable: true,
       },
     },
   ];
diff --git a/apps/web-ele/src/views/member/level/data.ts b/apps/web-ele/src/views/member/level/data.ts
index 0d72df115..918051429 100644
--- a/apps/web-ele/src/views/member/level/data.ts
+++ b/apps/web-ele/src/views/member/level/data.ts
@@ -119,7 +119,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       component: 'RangePicker',
       componentProps: {
         ...getRangePickerDefaultProps(),
-        allowClear: true,
+        clearable: true,
       },
     },
   ];
diff --git a/apps/web-ele/src/views/member/user/detail/modules/user-coupon-list.vue b/apps/web-ele/src/views/member/user/detail/modules/user-coupon-list.vue
index a83c1e410..8d644e7f4 100644
--- a/apps/web-ele/src/views/member/user/detail/modules/user-coupon-list.vue
+++ b/apps/web-ele/src/views/member/user/detail/modules/user-coupon-list.vue
@@ -25,7 +25,7 @@ const activeStatus = ref<number | string>('all');
 
 /** 删除按钮操作 */
 const handleDelete = async (row: MallCouponApi.Coupon) => {
-  const hideLoading = ElLoading.service({
+  const loadingInstance = ElLoading.service({
     text: '回收将会收回会员领取的待使用的优惠券，已使用的将无法回收，确定要回收所选优惠券吗？',
   });
   try {
@@ -34,7 +34,7 @@ const handleDelete = async (row: MallCouponApi.Coupon) => {
     // 重新加载列表
     gridApi.query();
   } finally {
-    hideLoading.close();
+    loadingInstance.close();
   }
 };
 
diff --git a/apps/web-ele/src/views/pay/demo/order/data.ts b/apps/web-ele/src/views/pay/demo/order/data.ts
index 9f4b30aa7..849a4a9d4 100644
--- a/apps/web-ele/src/views/pay/demo/order/data.ts
+++ b/apps/web-ele/src/views/pay/demo/order/data.ts
@@ -28,7 +28,7 @@ export function useFormSchema(): VbenFormSchema[] {
           { label: '蔚来汽车 --- 200000.00元', value: 5 },
         ],
         placeholder: '请选择下单商品',
-        allowClear: true,
+        clearable: true,
       },
       rules: 'required',
     },