From 4648f2023ba7010c4c2f45cb9fd2f6afb237bd2f Mon Sep 17 00:00:00 2001 From: YunaiV Date: Wed, 8 Oct 2025 10:53:22 +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=88=86=E7=B1=BB=E7=9A=84=E8=BF=81?= =?UTF-8?q?=E7=A7=BB?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../views/mall/product/brand/modules/form.vue | 4 +- .../src/views/mall/product/category/data.ts | 23 +++++++--- .../src/views/mall/product/category/index.vue | 43 ++++++++----------- .../mall/product/category/modules/form.vue | 8 ++-- .../mall/product/comment/modules/form.vue | 4 +- .../views/mall/product/brand/modules/form.vue | 4 +- .../src/views/mall/product/category/data.ts | 26 +++++++---- .../src/views/mall/product/category/index.vue | 39 ++++++++--------- .../mall/product/category/modules/form.vue | 8 ++-- 9 files changed, 85 insertions(+), 74 deletions(-) diff --git a/apps/web-antd/src/views/mall/product/brand/modules/form.vue b/apps/web-antd/src/views/mall/product/brand/modules/form.vue index 7556b1f4d..25fd13c97 100644 --- a/apps/web-antd/src/views/mall/product/brand/modules/form.vue +++ b/apps/web-antd/src/views/mall/product/brand/modules/form.vue @@ -18,8 +18,8 @@ const emit = defineEmits(['success']); const formData = ref(); 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({ diff --git a/apps/web-antd/src/views/mall/product/category/data.ts b/apps/web-antd/src/views/mall/product/category/data.ts index 7d41a44cf..6e1e1de3b 100644 --- a/apps/web-antd/src/views/mall/product/category/data.ts +++ b/apps/web-antd/src/views/mall/product/category/data.ts @@ -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[ { field: 'name', title: '分类名称', + minWidth: 200, align: 'left', fixed: 'left', treeNode: true, @@ -108,6 +113,7 @@ export function useGridColumns(): VxeTableGridOptions[ { field: 'picUrl', title: '移动端分类图', + minWidth: 120, cellRender: { name: 'CellImage', }, @@ -115,10 +121,12 @@ export function useGridColumns(): VxeTableGridOptions[ { 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[ { field: 'createTime', title: '创建时间', + minWidth: 180, formatter: 'formatDateTime', }, { title: '操作', - width: 300, + width: 240, fixed: 'right', slots: { default: 'actions' }, }, diff --git a/apps/web-antd/src/views/mall/product/category/index.vue b/apps/web-antd/src/views/mall/product/category/index.vue index 6e375dc18..7733ceb0e 100644 --- a/apps/web-antd/src/views/mall/product/category/index.vue +++ b/apps/web-antd/src/views/mall/product/category/index.vue @@ -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({ /> - - + + - diff --git a/apps/web-antd/src/views/mall/product/comment/modules/form.vue b/apps/web-antd/src/views/mall/product/comment/modules/form.vue index 327ee15d4..2cea88706 100644 --- a/apps/web-antd/src/views/mall/product/comment/modules/form.vue +++ b/apps/web-antd/src/views/mall/product/comment/modules/form.vue @@ -18,8 +18,8 @@ const emit = defineEmits(['success']); const formData = ref(); 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({ diff --git a/apps/web-ele/src/views/mall/product/brand/modules/form.vue b/apps/web-ele/src/views/mall/product/brand/modules/form.vue index 1d51edfdf..4166564e7 100644 --- a/apps/web-ele/src/views/mall/product/brand/modules/form.vue +++ b/apps/web-ele/src/views/mall/product/brand/modules/form.vue @@ -18,8 +18,8 @@ const emit = defineEmits(['success']); const formData = ref(); 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({ 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 e88b558fc..9410af365 100644 --- a/apps/web-ele/src/views/mall/product/category/data.ts +++ b/apps/web-ele/src/views/mall/product/category/data.ts @@ -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[ { field: 'name', title: '分类名称', + minWidth: 200, align: 'left', fixed: 'left', treeNode: true, @@ -109,6 +115,7 @@ export function useGridColumns(): VxeTableGridOptions[ { field: 'picUrl', title: '移动端分类图', + minWidth: 120, cellRender: { name: 'CellImage', }, @@ -116,10 +123,12 @@ export function useGridColumns(): VxeTableGridOptions[ { 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[ { field: 'createTime', title: '创建时间', + minWidth: 180, formatter: 'formatDateTime', }, { title: '操作', - width: 300, + width: 240, fixed: 'right', slots: { default: 'actions' }, }, diff --git a/apps/web-ele/src/views/mall/product/category/index.vue b/apps/web-ele/src/views/mall/product/category/index.vue index 61ca06918..9b785ed44 100644 --- a/apps/web-ele/src/views/mall/product/category/index.vue +++ b/apps/web-ele/src/views/mall/product/category/index.vue @@ -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({ /> - - + + -