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

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,
       },
     },
   ];

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,
       },
     },
   ];

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,
       },
     },
   ];

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

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;

apps/web-ele/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();
 }
 
@@ -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

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<
+    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-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,
-  () => {
+  (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>

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();
   }
 }
 

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,
       },
     },
   ];

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,
       },
     },
   ];

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();
   }
 };
 

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