smart-flow/yudao-ui-admin-vben
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
YunaiV
2025-10-08 18:10:42 +08:00
parent 276d91190c
commit e226e09e8a
13 changed files with 110 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
apps/web-ele/src/views/infra/fileConfig/data.ts
View File

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

6
apps/web-ele/src/views/mall/product/brand/data.ts
View File

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

2
apps/web-ele/src/views/mall/product/category/data.ts
View File

@@ -95,7 +95,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
component: 'Input',
componentProps: {
placeholder: '请输入分类名称',
allowClear: true,
clearable: true,
},
},
];

75
apps/web-ele/src/views/mall/product/property/data.ts
View File

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

2
apps/web-ele/src/views/mall/product/property/index.vue
View File

@@ -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;

30
apps/web-ele/src/views/mall/product/property/modules/property-grid.vue
View File

@@ -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

32
apps/web-ele/src/views/mall/product/property/modules/value-form.vue
View File

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

26
apps/web-ele/src/views/mall/product/property/modules/value-grid.vue
View File

@@ -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>

4
apps/web-ele/src/views/mall/product/spu/index.vue
View File

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

6
apps/web-ele/src/views/member/group/data.ts
View File

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

2
apps/web-ele/src/views/member/level/data.ts
View File

@@ -119,7 +119,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
component: 'RangePicker',
componentProps: {
...getRangePickerDefaultProps(),
allowClear: true,
clearable: true,
},
},
];

4
apps/web-ele/src/views/member/user/detail/modules/user-coupon-list.vue
View File

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

2
apps/web-ele/src/views/pay/demo/order/data.ts
View File

@@ -28,7 +28,7 @@ export function useFormSchema(): VbenFormSchema[] {
{ label: '蔚来汽车 --- 200000.00元', value: 5 },
],
placeholder: '请选择下单商品',
allowClear: true,
clearable: true,
},
rules: 'required',
},