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

feat：【mall 商城】商品分类的迁移

Browse Source
This commit is contained in:
YunaiV
2025-10-08 10:22:27 +08:00
parent 1e9bfb419e
commit e84cd6147c
6 changed files with 69 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
apps/web-antd/src/views/mall/product/brand/data.ts
View File

@@ -1,5 +1,5 @@
import type { VbenFormSchema } from '#/adapter/form'; import type { VbenFormSchema } from '#/adapter/form';
import type { VxeGridPropTypes } from '#/adapter/vxe-table'; import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import { CommonStatusEnum, DICT_TYPE } from '@vben/constants'; import { CommonStatusEnum, DICT_TYPE } from '@vben/constants';
import { getDictOptions } from '@vben/hooks'; import { getDictOptions } from '@vben/hooks';
@@ -22,12 +22,18 @@ export function useFormSchema(): VbenFormSchema[] {
fieldName: 'name', fieldName: 'name',
label: '品牌名称', label: '品牌名称',
component: 'Input', component: 'Input',
componentProps: {
placeholder: '请输入品牌名称',
},
rules: 'required', rules: 'required',
}, },
{ {
fieldName: 'picUrl', fieldName: 'picUrl',
label: '品牌图片', label: '品牌图片',
component: 'ImageUpload', component: 'ImageUpload',
componentProps: {
placeholder: '请上传品牌图片',
},
rules: 'required', rules: 'required',
}, },
{ {
@@ -38,7 +44,7 @@ export function useFormSchema(): VbenFormSchema[] {
min: 0, min: 0,
placeholder: '请输入品牌排序', placeholder: '请输入品牌排序',
}, },
rules: z.number().min(0).default(1), rules: 'required',
}, },
{ {
fieldName: 'status', fieldName: 'status',
@@ -55,6 +61,9 @@ export function useFormSchema(): VbenFormSchema[] {
fieldName: 'description', fieldName: 'description',
label: '品牌描述', label: '品牌描述',
component: 'Textarea', component: 'Textarea',
componentProps: {
placeholder: '请输入品牌描述',
},
}, },
]; ];
} }
@@ -66,6 +75,10 @@ export function useGridFormSchema(): VbenFormSchema[] {
fieldName: 'name', fieldName: 'name',
label: '品牌名称', label: '品牌名称',
component: 'Input', component: 'Input',
componentProps: {
placeholder: '请输入品牌名称',
allowClear: true,
},
}, },
{ {
fieldName: 'status', fieldName: 'status',
@@ -73,6 +86,8 @@ export function useGridFormSchema(): VbenFormSchema[] {
component: 'Select', component: 'Select',
componentProps: { componentProps: {
options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'), options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
placeholder: '请选择品牌状态',
allowClear: true,
}, },
}, },
{ {
@@ -88,16 +103,17 @@ export function useGridFormSchema(): VbenFormSchema[] {
} }
/** 表格列配置 */ /** 表格列配置 */
export function useGridColumns(): VxeGridPropTypes.Columns { export function useGridColumns(): VxeTableGridOptions['columns'] {
return [ return [
{ {
field: 'name', field: 'name',
title: '分类名称', title: '品牌名称',
fixed: 'left', minWidth: 180,
}, },
{ {
field: 'picUrl', field: 'picUrl',
title: '品牌图片', title: '品牌图片',
minWidth: 120,
cellRender: { cellRender: {
name: 'CellImage', name: 'CellImage',
}, },
@@ -105,10 +121,12 @@ export function useGridColumns(): VxeGridPropTypes.Columns {
{ {
field: 'sort', field: 'sort',
title: '品牌排序', title: '品牌排序',
minWidth: 100,
}, },
{ {
field: 'status', field: 'status',
title: '开启状态', title: '品牌状态',
minWidth: 100,
cellRender: { cellRender: {
name: 'CellDict', name: 'CellDict',
props: { type: DICT_TYPE.COMMON_STATUS }, props: { type: DICT_TYPE.COMMON_STATUS },
@@ -117,6 +135,7 @@ export function useGridColumns(): VxeGridPropTypes.Columns {
{ {
field: 'createTime', field: 'createTime',
title: '创建时间', title: '创建时间',
minWidth: 180,
formatter: 'formatDateTime', formatter: 'formatDateTime',
}, },
{ {

13
apps/web-antd/src/views/mall/product/brand/index.vue
View File

@@ -19,7 +19,7 @@ const [FormModal, formModalApi] = useVbenModal({
}); });
/** 刷新表格 */ /** 刷新表格 */
function onRefresh() { function handleRefresh() {
gridApi.query(); gridApi.query();
} }
@@ -40,11 +40,9 @@ async function handleDelete(row: MallBrandApi.Brand) {
duration: 0, duration: 0,
}); });
try { try {
await deleteBrand(row.id as number); await deleteBrand(row.id!);
message.success({ message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
content: $t('ui.actionMessage.deleteSuccess', [row.name]), handleRefresh();
});
onRefresh();
} finally { } finally {
hideLoading(); hideLoading();
} }
@@ -71,6 +69,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
}, },
rowConfig: { rowConfig: {
keyField: 'id', keyField: 'id',
isHover: true,
}, },
toolbarConfig: { toolbarConfig: {
refresh: true, refresh: true,
@@ -82,7 +81,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
<template> <template>
<Page auto-content-height> <Page auto-content-height>
<FormModal @success="onRefresh" /> <FormModal @success="handleRefresh" />
<Grid table-title="品牌列表"> <Grid table-title="品牌列表">
<template #toolbar-tools> <template #toolbar-tools>
<TableAction <TableAction

4
apps/web-antd/src/views/mall/product/brand/modules/form.vue
View File

@@ -28,7 +28,7 @@ const [Form, formApi] = useVbenForm({
class: 'w-full', class: 'w-full',
}, },
formItemClass: 'col-span-2', formItemClass: 'col-span-2',
labelWidth: 120, labelWidth: 80,
}, },
layout: 'horizontal', layout: 'horizontal',
schema: useFormSchema(), schema: useFormSchema(),
@@ -77,7 +77,7 @@ const [Modal, modalApi] = useVbenModal({
</script> </script>
<template> <template>
<Modal class="w-2/5" :title="getTitle"> <Modal :title="getTitle" class="w-1/4">
<Form class="mx-4" /> <Form class="mx-4" />
</Modal> </Modal>
</template> </template>

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

@@ -1,5 +1,5 @@
import type { VbenFormSchema } from '#/adapter/form'; import type { VbenFormSchema } from '#/adapter/form';
import type { VxeGridPropTypes } from '#/adapter/vxe-table'; import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import { CommonStatusEnum, DICT_TYPE } from '@vben/constants'; import { CommonStatusEnum, DICT_TYPE } from '@vben/constants';
import { getDictOptions } from '@vben/hooks'; import { getDictOptions } from '@vben/hooks';
@@ -22,12 +22,18 @@ export function useFormSchema(): VbenFormSchema[] {
fieldName: 'name', fieldName: 'name',
label: '品牌名称', label: '品牌名称',
component: 'Input', component: 'Input',
componentProps: {
placeholder: '请输入品牌名称',
},
rules: 'required', rules: 'required',
}, },
{ {
fieldName: 'picUrl', fieldName: 'picUrl',
label: '品牌图片', label: '品牌图片',
component: 'ImageUpload', component: 'ImageUpload',
componentProps: {
placeholder: '请上传品牌图片',
},
rules: 'required', rules: 'required',
}, },
{ {
@@ -36,10 +42,11 @@ export function useFormSchema(): VbenFormSchema[] {
component: 'InputNumber', component: 'InputNumber',
componentProps: { componentProps: {
min: 0, min: 0,
controlsPosition: 'right',
placeholder: '请输入品牌排序', placeholder: '请输入品牌排序',
controlsPosition: 'right',
class: '!w-full',
}, },
rules: z.number().min(0).default(1), rules: 'required',
}, },
{ {
fieldName: 'status', fieldName: 'status',
@@ -56,6 +63,9 @@ export function useFormSchema(): VbenFormSchema[] {
fieldName: 'description', fieldName: 'description',
label: '品牌描述', label: '品牌描述',
component: 'Textarea', component: 'Textarea',
componentProps: {
placeholder: '请输入品牌描述',
},
}, },
]; ];
} }
@@ -67,6 +77,10 @@ export function useGridFormSchema(): VbenFormSchema[] {
fieldName: 'name', fieldName: 'name',
label: '品牌名称', label: '品牌名称',
component: 'Input', component: 'Input',
componentProps: {
placeholder: '请输入品牌名称',
allowClear: true,
},
}, },
{ {
fieldName: 'status', fieldName: 'status',
@@ -74,6 +88,8 @@ export function useGridFormSchema(): VbenFormSchema[] {
component: 'Select', component: 'Select',
componentProps: { componentProps: {
options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'), options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
placeholder: '请选择品牌状态',
allowClear: true,
}, },
}, },
{ {
@@ -82,37 +98,37 @@ export function useGridFormSchema(): VbenFormSchema[] {
component: 'RangePicker', component: 'RangePicker',
componentProps: { componentProps: {
...getRangePickerDefaultProps(), ...getRangePickerDefaultProps(),
clearable: true, allowClear: true,
}, },
}, },
]; ];
} }
/** 表格列配置 */ /** 表格列配置 */
export function useGridColumns(): VxeGridPropTypes.Columns { export function useGridColumns(): VxeTableGridOptions['columns'] {
return [ return [
{ {
field: 'name', field: 'name',
title: '分类名称', title: '品牌名称',
fixed: 'left', minWidth: 180,
}, },
{ {
field: 'picUrl', field: 'picUrl',
title: '品牌图片', title: '品牌图片',
minWidth: 120,
cellRender: { cellRender: {
name: 'CellImage', name: 'CellImage',
props: {
class: 'w-10 h-10',
},
}, },
}, },
{ {
field: 'sort', field: 'sort',
title: '品牌排序', title: '品牌排序',
minWidth: 100,
}, },
{ {
field: 'status', field: 'status',
title: '开启状态', title: '品牌状态',
minWidth: 100,
cellRender: { cellRender: {
name: 'CellDict', name: 'CellDict',
props: { type: DICT_TYPE.COMMON_STATUS }, props: { type: DICT_TYPE.COMMON_STATUS },
@@ -121,6 +137,7 @@ export function useGridColumns(): VxeGridPropTypes.Columns {
{ {
field: 'createTime', field: 'createTime',
title: '创建时间', title: '创建时间',
minWidth: 180,
formatter: 'formatDateTime', formatter: 'formatDateTime',
}, },
{ {

11
apps/web-ele/src/views/mall/product/brand/index.vue
View File

@@ -19,7 +19,7 @@ const [FormModal, formModalApi] = useVbenModal({
}); });
/** 刷新表格 */ /** 刷新表格 */
function onRefresh() { function handleRefresh() {
gridApi.query(); gridApi.query();
} }
@@ -39,9 +39,9 @@ async function handleDelete(row: MallBrandApi.Brand) {
text: $t('ui.actionMessage.deleting', [row.name]), text: $t('ui.actionMessage.deleting', [row.name]),
}); });
try { try {
await deleteBrand(row.id as number); await deleteBrand(row.id!);
ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name])); message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
onRefresh(); handleRefresh();
} finally { } finally {
loadingInstance.close(); loadingInstance.close();
} }
@@ -68,6 +68,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
}, },
rowConfig: { rowConfig: {
keyField: 'id', keyField: 'id',
isHover: true,
}, },
toolbarConfig: { toolbarConfig: {
refresh: true, refresh: true,
@@ -79,7 +80,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
<template> <template>
<Page auto-content-height> <Page auto-content-height>
<FormModal @success="onRefresh" /> <FormModal @success="handleRefresh" />
<Grid table-title="品牌列表"> <Grid table-title="品牌列表">
<template #toolbar-tools> <template #toolbar-tools>
<TableAction <TableAction

4
apps/web-ele/src/views/mall/product/brand/modules/form.vue
View File

@@ -28,7 +28,7 @@ const [Form, formApi] = useVbenForm({
class: 'w-full', class: 'w-full',
}, },
formItemClass: 'col-span-2', formItemClass: 'col-span-2',
labelWidth: 120, labelWidth: 80,
}, },
layout: 'horizontal', layout: 'horizontal',
schema: useFormSchema(), schema: useFormSchema(),
@@ -77,7 +77,7 @@ const [Modal, modalApi] = useVbenModal({
</script> </script>
<template> <template>
<Modal class="w-2/5" :title="getTitle"> <Modal :title="getTitle" class="w-1/4">
<Form class="mx-4" /> <Form class="mx-4" />
</Modal> </Modal>
</template> </template>