smart-flow/yudao-ui-admin-vben
2
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:53:22 +08:00
parent e84cd6147c
commit 4648f2023b
9 changed files with 85 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -18,8 +18,8 @@ const emit = defineEmits(['success']);
const formData = ref<MallBrandApi.Brand>();
const getTitle = computed(() => {
return formData.value?.id
? $t('ui.actionTitle.edit', ['品牌'])
: $t('ui.actionTitle.create', ['品牌']);
? $t('ui.actionTitle.edit', ['商品品牌'])
: $t('ui.actionTitle.create', ['商品品牌']);
});
const [Form, formApi] = useVbenForm({

23
apps/web-antd/src/views/mall/product/category/data.ts
View File

@@ -31,10 +31,7 @@ export function useFormSchema(): VbenFormSchema[] {
data.unshift({
id: 0,
name: '顶级分类',
picUrl: '',
sort: 0,
status: 0,
});
} as MallCategoryApi.Category);
return handleTree(data);
},
labelField: 'name',
@@ -58,6 +55,9 @@ export function useFormSchema(): VbenFormSchema[] {
fieldName: 'picUrl',
label: '移动端分类图',
component: 'ImageUpload',
componentProps: {
placeholder: '请上传移动端分类图',
},
rules: 'required',
},
{
@@ -68,7 +68,7 @@ export function useFormSchema(): VbenFormSchema[] {
min: 0,
placeholder: '请输入分类排序',
},
rules: z.number().min(0).default(1),
rules: 'required',
},
{
fieldName: 'status',
@@ -91,6 +91,10 @@ export function useGridFormSchema(): VbenFormSchema[] {
fieldName: 'name',
label: '分类名称',
component: 'Input',
componentProps: {
placeholder: '请输入分类名称',
allowClear: true,
},
},
];
}
@@ -101,6 +105,7 @@ export function useGridColumns(): VxeTableGridOptions<MallCategoryApi.Category>[
{
field: 'name',
title: '分类名称',
minWidth: 200,
align: 'left',
fixed: 'left',
treeNode: true,
@@ -108,6 +113,7 @@ export function useGridColumns(): VxeTableGridOptions<MallCategoryApi.Category>[
{
field: 'picUrl',
title: '移动端分类图',
minWidth: 120,
cellRender: {
name: 'CellImage',
},
@@ -115,10 +121,12 @@ export function useGridColumns(): VxeTableGridOptions<MallCategoryApi.Category>[
{
field: 'sort',
title: '分类排序',
minWidth: 100,
},
{
field: 'status',
title: '开启状态',
title: '分类状态',
minWidth: 100,
cellRender: {
name: 'CellDict',
props: { type: DICT_TYPE.COMMON_STATUS },
@@ -127,11 +135,12 @@ export function useGridColumns(): VxeTableGridOptions<MallCategoryApi.Category>[
{
field: 'createTime',
title: '创建时间',
minWidth: 180,
formatter: 'formatDateTime',
},
{
title: '操作',
width: 300,
width: 240,
fixed: 'right',
slots: { default: 'actions' },
},

43
apps/web-antd/src/views/mall/product/category/index.vue
View File

@@ -22,7 +22,7 @@ const [FormModal, formModalApi] = useVbenModal({
});
/** 刷新表格 */
function onRefresh() {
function handleRefresh() {
gridApi.query();
}
@@ -41,15 +41,6 @@ function handleEdit(row: MallCategoryApi.Category) {
formModalApi.setData(row).open();
}
/** 查看商品操作 */
const router = useRouter(); // 路由
function handleViewSpu(id: number) {
router.push({
name: 'ProductSpu',
query: { categoryId: id },
});
}
/** 删除分类 */
async function handleDelete(row: MallCategoryApi.Category) {
const hideLoading = message.loading({
@@ -57,11 +48,9 @@ async function handleDelete(row: MallCategoryApi.Category) {
duration: 0,
});
try {
await deleteCategory(row.id as number);
message.success({
content: $t('ui.actionMessage.deleteSuccess', [row.name]),
});
onRefresh();
await deleteCategory(row.id!);
message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
handleRefresh();
} finally {
hideLoading();
}
@@ -69,11 +58,20 @@ async function handleDelete(row: MallCategoryApi.Category) {
/** 切换树形展开/收缩状态 */
const isExpanded = ref(false);
function toggleExpand() {
function handleExpand() {
isExpanded.value = !isExpanded.value;
gridApi.grid.setAllTreeExpand(isExpanded.value);
}
/** 查看商品操作 */
const router = useRouter(); // 路由
function handleViewSpu(id: number) {
router.push({
path: '/mall/product/spu',
query: { categoryId: id },
});
}
const [Grid, gridApi] = useVbenVxeGrid({
formOptions: {
schema: useGridFormSchema(),
@@ -94,9 +92,11 @@ const [Grid, gridApi] = useVbenVxeGrid({
},
rowConfig: {
keyField: 'id',
isHover: true,
},
toolbarConfig: {
refresh: true,
search: true,
},
treeConfig: {
parentField: 'parentId',
@@ -117,8 +117,8 @@ const [Grid, gridApi] = useVbenVxeGrid({
/>
</template>
<FormModal @success="onRefresh" />
<Grid>
<FormModal @success="handleRefresh" />
<Grid table-title="商品分类列表">
<template #toolbar-tools>
<TableAction
:actions="[
@@ -132,16 +132,11 @@ const [Grid, gridApi] = useVbenVxeGrid({
{
label: isExpanded ? '收缩' : '展开',
type: 'primary',
onClick: toggleExpand,
onClick: handleExpand,
},
]"
/>
</template>
<template #name="{ row }">
<div class="flex w-full items-center gap-1">
<span class="flex-auto">{{ row.name }}</span>
</div>
</template>
<template #actions="{ row }">
<TableAction
:actions="[

8
apps/web-antd/src/views/mall/product/category/modules/form.vue
View File

@@ -21,8 +21,8 @@ const emit = defineEmits(['success']);
const formData = ref<MallCategoryApi.Category>();
const getTitle = computed(() => {
return formData.value?.id
? $t('ui.actionTitle.edit', ['产品分类'])
: $t('ui.actionTitle.create', ['产品分类']);
? $t('ui.actionTitle.edit', ['商品分类'])
: $t('ui.actionTitle.create', ['商品分类']);
});
const [Form, formApi] = useVbenForm({
@@ -31,7 +31,7 @@ const [Form, formApi] = useVbenForm({
class: 'w-full',
},
formItemClass: 'col-span-2',
labelWidth: 120,
labelWidth: 100,
},
layout: 'horizontal',
schema: useFormSchema(),
@@ -83,7 +83,7 @@ const [Modal, modalApi] = useVbenModal({
</script>
<template>
<Modal class="w-2/5" :title="getTitle">
<Modal :title="getTitle" class="w-1/4">
<Form class="mx-4" />
</Modal>
</template>

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

@@ -18,8 +18,8 @@ const emit = defineEmits(['success']);
const formData = ref<MallCommentApi.Comment>();
const getTitle = computed(() => {
return formData.value?.id
? $t('ui.actionTitle.edit', ['品牌'])
: $t('ui.actionTitle.create', ['品牌']);
? $t('ui.actionTitle.edit', ['商品品牌'])
: $t('ui.actionTitle.create', ['商品品牌']);
});
const [Form, formApi] = useVbenForm({

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

@@ -18,8 +18,8 @@ const emit = defineEmits(['success']);
const formData = ref<MallBrandApi.Brand>();
const getTitle = computed(() => {
return formData.value?.id
? $t('ui.actionTitle.edit', ['品牌'])
: $t('ui.actionTitle.create', ['品牌']);
? $t('ui.actionTitle.edit', ['商品品牌'])
: $t('ui.actionTitle.create', ['商品品牌']);
});
const [Form, formApi] = useVbenForm({

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

@@ -31,10 +31,7 @@ export function useFormSchema(): VbenFormSchema[] {
data.unshift({
id: 0,
name: '顶级分类',
picUrl: '',
sort: 0,
status: 0,
});
} as MallCategoryApi.Category);
return handleTree(data);
},
labelField: 'name',
@@ -58,6 +55,9 @@ export function useFormSchema(): VbenFormSchema[] {
fieldName: 'picUrl',
label: '移动端分类图',
component: 'ImageUpload',
componentProps: {
placeholder: '请上传移动端分类图',
},
rules: 'required',
},
{
@@ -66,10 +66,11 @@ export function useFormSchema(): VbenFormSchema[] {
component: 'InputNumber',
componentProps: {
min: 0,
controlsPosition: 'right',
placeholder: '请输入分类排序',
controlsPosition: 'right',
class: '!w-full',
},
rules: z.number().min(0).default(1),
rules: 'required',
},
{
fieldName: 'status',
@@ -92,6 +93,10 @@ export function useGridFormSchema(): VbenFormSchema[] {
fieldName: 'name',
label: '分类名称',
component: 'Input',
componentProps: {
placeholder: '请输入分类名称',
allowClear: true,
},
},
];
}
@@ -102,6 +107,7 @@ export function useGridColumns(): VxeTableGridOptions<MallCategoryApi.Category>[
{
field: 'name',
title: '分类名称',
minWidth: 200,
align: 'left',
fixed: 'left',
treeNode: true,
@@ -109,6 +115,7 @@ export function useGridColumns(): VxeTableGridOptions<MallCategoryApi.Category>[
{
field: 'picUrl',
title: '移动端分类图',
minWidth: 120,
cellRender: {
name: 'CellImage',
},
@@ -116,10 +123,12 @@ export function useGridColumns(): VxeTableGridOptions<MallCategoryApi.Category>[
{
field: 'sort',
title: '分类排序',
minWidth: 100,
},
{
field: 'status',
title: '开启状态',
title: '分类状态',
minWidth: 100,
cellRender: {
name: 'CellDict',
props: { type: DICT_TYPE.COMMON_STATUS },
@@ -128,11 +137,12 @@ export function useGridColumns(): VxeTableGridOptions<MallCategoryApi.Category>[
{
field: 'createTime',
title: '创建时间',
minWidth: 180,
formatter: 'formatDateTime',
},
{
title: '操作',
width: 300,
width: 240,
fixed: 'right',
slots: { default: 'actions' },
},

39
apps/web-ele/src/views/mall/product/category/index.vue
View File

@@ -22,7 +22,7 @@ const [FormModal, formModalApi] = useVbenModal({
});
/** 刷新表格 */
function onRefresh() {
function handleRefresh() {
gridApi.query();
}
@@ -41,24 +41,15 @@ function handleEdit(row: MallCategoryApi.Category) {
formModalApi.setData(row).open();
}
/** 查看商品操作 */
const router = useRouter(); // 路由
const handleViewSpu = (id: number) => {
router.push({
name: 'ProductSpu',
query: { categoryId: id },
});
};
/** 删除分类 */
async function handleDelete(row: MallCategoryApi.Category) {
const loadingInstance = ElLoading.service({
text: $t('ui.actionMessage.deleting', [row.name]),
});
try {
await deleteCategory(row.id as number);
await deleteCategory(row.id!);
ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
onRefresh();
handleRefresh();
} finally {
loadingInstance.close();
}
@@ -66,11 +57,20 @@ async function handleDelete(row: MallCategoryApi.Category) {
/** 切换树形展开/收缩状态 */
const isExpanded = ref(false);
function toggleExpand() {
function handleExpand() {
isExpanded.value = !isExpanded.value;
gridApi.grid.setAllTreeExpand(isExpanded.value);
}
/** 查看商品操作 */
const router = useRouter(); // 路由
function handleViewSpu(id: number) {
router.push({
path: '/mall/product/spu',
query: { categoryId: id },
});
}
const [Grid, gridApi] = useVbenVxeGrid({
formOptions: {
schema: useGridFormSchema(),
@@ -91,9 +91,11 @@ const [Grid, gridApi] = useVbenVxeGrid({
},
rowConfig: {
keyField: 'id',
isHover: true,
},
toolbarConfig: {
refresh: true,
search: true,
},
treeConfig: {
parentField: 'parentId',
@@ -114,8 +116,8 @@ const [Grid, gridApi] = useVbenVxeGrid({
/>
</template>
<FormModal @success="onRefresh" />
<Grid>
<FormModal @success="handleRefresh" />
<Grid table-title="商品分类列表">
<template #toolbar-tools>
<TableAction
:actions="[
@@ -129,16 +131,11 @@ const [Grid, gridApi] = useVbenVxeGrid({
{
label: isExpanded ? '收缩' : '展开',
type: 'primary',
onClick: toggleExpand,
onClick: handleExpand,
},
]"
/>
</template>
<template #name="{ row }">
<div class="flex w-full items-center gap-1">
<span class="flex-auto">{{ row.name }}</span>
</div>
</template>
<template #actions="{ row }">
<TableAction
:actions="[

8
apps/web-ele/src/views/mall/product/category/modules/form.vue
View File

@@ -21,8 +21,8 @@ const emit = defineEmits(['success']);
const formData = ref<MallCategoryApi.Category>();
const getTitle = computed(() => {
return formData.value?.id
? $t('ui.actionTitle.edit', ['产品分类'])
: $t('ui.actionTitle.create', ['产品分类']);
? $t('ui.actionTitle.edit', ['商品分类'])
: $t('ui.actionTitle.create', ['商品分类']);
});
const [Form, formApi] = useVbenForm({
@@ -31,7 +31,7 @@ const [Form, formApi] = useVbenForm({
class: 'w-full',
},
formItemClass: 'col-span-2',
labelWidth: 120,
labelWidth: 100,
},
layout: 'horizontal',
schema: useFormSchema(),
@@ -83,7 +83,7 @@ const [Modal, modalApi] = useVbenModal({
</script>
<template>
<Modal class="w-2/5" :title="getTitle">
<Modal :title="getTitle" class="w-1/4">
<Form class="mx-4" />
</Modal>
</template>