feat：【mall 商城】文章分类（100% ele）

2025-10-16 13:16:53 +08:00
parent b28a35cd79
commit d1089d7a50
6 changed files with 121 additions and 43 deletions
--- a/apps/web-ele/src/views/mall/promotion/article/category/data.ts
+++ b/apps/web-ele/src/views/mall/promotion/article/category/data.ts
@@ -1,9 +1,10 @@
 import type { VbenFormSchema } from '#/adapter/form';
-import type { VxeGridPropTypes } from '#/adapter/vxe-table';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';

-import { DICT_TYPE } from '@vben/constants';
+import { CommonStatusEnum, DICT_TYPE } from '@vben/constants';
 import { getDictOptions } from '@vben/hooks';

+import { z } from '#/adapter/form';
 import { getRangePickerDefaultProps } from '#/utils';

 /** 新增/修改的表单 */
@@ -21,21 +22,28 @@ export function useFormSchema(): VbenFormSchema[] {
      fieldName: 'name',
      label: '分类名称',
      component: 'Input',
+      componentProps: {
+        placeholder: '请输入分类名称',
+      },
      rules: 'required',
    },
    {
      fieldName: 'picUrl',
-      label: '图标地址',
+      label: '分类图片',
      component: 'ImageUpload',
+      componentProps: {
+        placeholder: '请上传分类图片',
+      },
    },
    {
      fieldName: 'sort',
-      label: '排序',
+      label: '显示顺序',
      component: 'InputNumber',
      componentProps: {
        min: 0,
+        placeholder: '请输入显示顺序',
        controlsPosition: 'right',
-        placeholder: '请输入排序',
+        class: '!w-full',
      },
      rules: 'required',
    },
@@ -48,7 +56,7 @@ export function useFormSchema(): VbenFormSchema[] {
        buttonStyle: 'solid',
        optionType: 'button',
      },
-      rules: 'required',
+      rules: z.number().default(CommonStatusEnum.ENABLE),
    },
  ];
 }
@@ -62,6 +70,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
      component: 'Input',
      componentProps: {
        placeholder: '请输入分类名称',
+        allowClear: true,
      },
    },
    {
@@ -70,6 +79,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
      component: 'Select',
      componentProps: {
        placeholder: '请选择状态',
+        allowClear: true,
        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
      },
    },
@@ -79,58 +89,58 @@ export function useGridFormSchema(): VbenFormSchema[] {
      component: 'RangePicker',
      componentProps: {
        ...getRangePickerDefaultProps(),
-        clearable: true,
+        allowClear: true,
      },
    },
  ];
 }

 /** 表格列配置 */
-export function useGridColumns(): VxeGridPropTypes.Columns {
+export function useGridColumns(): VxeTableGridOptions['columns'] {
  return [
    {
-      title: '编号',
      field: 'id',
-      width: 100,
+      title: '编号',
+      minWidth: 100,
    },
    {
-      title: '分类名称',
      field: 'name',
+      title: '分类名称',
      minWidth: 240,
+      align: 'left',
+      fixed: 'left',
    },
    {
-      title: '分类图片',
      field: 'picUrl',
-      width: 80,
+      title: '分类图片',
+      minWidth: 80,
      cellRender: {
        name: 'CellImage',
      },
    },
    {
-      title: '状态',
      field: 'status',
-      width: 150,
+      title: '状态',
+      minWidth: 150,
      cellRender: {
-        name: 'CellDictTag',
-        props: {
-          dictType: DICT_TYPE.COMMON_STATUS,
-        },
+        name: 'CellDict',
+        props: { type: DICT_TYPE.COMMON_STATUS },
      },
    },
    {
-      title: '排序',
      field: 'sort',
-      width: 150,
+      title: '显示顺序',
+      minWidth: 150,
    },
    {
-      title: '创建时间',
      field: 'createTime',
-      width: 180,
+      title: '创建时间',
+      minWidth: 180,
      formatter: 'formatDateTime',
    },
    {
      title: '操作',
-      width: 180,
+      minWidth: 220,
      fixed: 'right',
      slots: { default: 'actions' },
    },
--- a/apps/web-ele/src/views/mall/promotion/article/category/index.vue
+++ b/apps/web-ele/src/views/mall/promotion/article/category/index.vue
@@ -2,7 +2,7 @@
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { MallArticleCategoryApi } from '#/api/mall/promotion/articleCategory';

-import { Page, useVbenModal } from '@vben/common-ui';
+import { DocAlert, Page, useVbenModal } from '@vben/common-ui';

 import { ElLoading, ElMessage } from 'element-plus';

@@ -42,7 +42,7 @@ async function handleDelete(row: MallArticleCategoryApi.ArticleCategory) {
    text: $t('ui.actionMessage.deleting', [row.name]),
  });
  try {
-    await deleteArticleCategory(row.id as number);
+    await deleteArticleCategory(row.id!);
    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.name]));
    handleRefresh();
  } finally {
@@ -71,6 +71,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
    },
    rowConfig: {
      keyField: 'id',
+      isHover: true,
    },
    toolbarConfig: {
      refresh: true,
@@ -82,6 +83,13 @@ const [Grid, gridApi] = useVbenVxeGrid({

 <template>
  <Page auto-content-height>
+    <template #doc>
+      <DocAlert
+        title="【营销】内容管理"
+        url="https://doc.iocoder.cn/mall/promotion-content/"
+      />
+    </template>
+
    <FormModal @success="handleRefresh" />
    <Grid table-title="文章分类列表">
      <template #toolbar-tools>
--- a/apps/web-ele/src/views/mall/promotion/article/category/modules/form.vue
+++ b/apps/web-ele/src/views/mall/promotion/article/category/modules/form.vue
@@ -32,7 +32,7 @@ const [Form, formApi] = useVbenForm({
      class: 'w-full',
    },
    formItemClass: 'col-span-2',
-    labelWidth: 120,
+    labelWidth: 80,
  },
  layout: 'horizontal',
  schema: useFormSchema(),
@@ -84,7 +84,7 @@ const [Modal, modalApi] = useVbenModal({
 </script>

 <template>
-  <Modal class="w-2/5" :title="getTitle">
+  <Modal :title="getTitle" class="w-2/5">
    <Form class="mx-4" />
  </Modal>
 </template>
--- a/apps/web-ele/src/views/mall/promotion/article/data.ts
+++ b/apps/web-ele/src/views/mall/promotion/article/data.ts
@@ -1,5 +1,6 @@
 import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeGridPropTypes } from '#/adapter/vxe-table';
+import type { MallArticleCategoryApi } from '#/api/mall/promotion/articleCategory';

 import { CommonStatusEnum, DICT_TYPE } from '@vben/constants';
 import { getDictOptions } from '@vben/hooks';
@@ -8,12 +9,19 @@ import { z } from '#/adapter/form';
 import { getSimpleArticleCategoryList } from '#/api/mall/promotion/articleCategory';
 import { getRangePickerDefaultProps } from '#/utils';

+let categoryList: MallArticleCategoryApi.ArticleCategory[] = [];
+async function getCategoryData() {
+  categoryList = await getSimpleArticleCategoryList();
+}
+
+getCategoryData();
+
 /** 新增/修改的表单 */
 export function useFormSchema(): VbenFormSchema[] {
  return [
    {
-      component: 'Input',
      fieldName: 'id',
+      component: 'Input',
      dependencies: {
        triggerFields: [''],
        show: () => false,
@@ -23,6 +31,9 @@ export function useFormSchema(): VbenFormSchema[] {
      fieldName: 'title',
      label: '文章标题',
      component: 'Input',
+      componentProps: {
+        placeholder: '请输入文章标题',
+      },
      rules: 'required',
    },
    {
@@ -33,6 +44,7 @@ export function useFormSchema(): VbenFormSchema[] {
        api: getSimpleArticleCategoryList,
        labelField: 'name',
        valueField: 'id',
+        placeholder: '请选择文章分类',
      },
      rules: 'required',
    },
@@ -40,16 +52,26 @@ export function useFormSchema(): VbenFormSchema[] {
      fieldName: 'author',
      label: '文章作者',
      component: 'Input',
+      componentProps: {
+        placeholder: '请输入文章作者',
+      },
    },
    {
      fieldName: 'introduction',
      label: '文章简介',
      component: 'Input',
+      componentProps: {
+        placeholder: '请输入文章简介',
+      },
    },
    {
      fieldName: 'picUrl',
      label: '文章封面',
      component: 'ImageUpload',
+      formItemClass: 'col-span-2',
+      componentProps: {
+        placeholder: '请上传文章封面',
+      },
      rules: 'required',
    },
    {
@@ -61,6 +83,8 @@ export function useFormSchema(): VbenFormSchema[] {
        buttonStyle: 'solid',
        optionType: 'button',
      },
+      rules: 'required',
+      defaultValue: true,
    },
    {
      fieldName: 'recommendBanner',
@@ -71,12 +95,18 @@ export function useFormSchema(): VbenFormSchema[] {
        buttonStyle: 'solid',
        optionType: 'button',
      },
+      rules: 'required',
+      defaultValue: true,
    },
-    // TODO: @霖：商品关联
    {
+      // TODO: @puhui999：商品关联
      fieldName: 'spuId',
      label: '商品关联',
      component: 'Input',
+      formItemClass: 'col-span-2',
+      componentProps: {
+        placeholder: '请输入商品 SPU 编号',
+      },
    },
    {
      fieldName: 'sort',
@@ -84,10 +114,11 @@ export function useFormSchema(): VbenFormSchema[] {
      component: 'InputNumber',
      componentProps: {
        min: 0,
+        placeholder: '请输入排序',
        controlsPosition: 'right',
-        placeholder: '请输入品牌排序',
+        class: '!w-full',
      },
-      rules: z.number().min(0).default(1),
+      rules: 'required',
    },
    {
      fieldName: 'status',
@@ -101,9 +132,11 @@ export function useFormSchema(): VbenFormSchema[] {
      rules: z.number().default(CommonStatusEnum.ENABLE),
    },
    {
-      fieldName: 'description',
+      fieldName: 'content',
      label: '文章内容',
      component: 'RichTextarea',
+      rules: 'required',
+      formItemClass: 'col-span-2',
    },
  ];
 }
@@ -112,19 +145,25 @@ export function useFormSchema(): VbenFormSchema[] {
 export function useGridFormSchema(): VbenFormSchema[] {
  return [
    {
-      fieldName: 'name',
+      fieldName: 'categoryId',
      label: '文章分类',
      component: 'ApiSelect',
      componentProps: {
        api: getSimpleArticleCategoryList,
        labelField: 'name',
        valueField: 'id',
+        placeholder: '请选择文章分类',
+        allowClear: true,
      },
    },
    {
      fieldName: 'title',
      label: '文章标题',
      component: 'Input',
+      componentProps: {
+        placeholder: '请输入文章标题',
+        allowClear: true,
+      },
    },
    {
      fieldName: 'status',
@@ -132,6 +171,8 @@ export function useGridFormSchema(): VbenFormSchema[] {
      component: 'Select',
      componentProps: {
        options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
+        placeholder: '请选择状态',
+        allowClear: true,
      },
    },
    {
@@ -140,27 +181,29 @@ export function useGridFormSchema(): VbenFormSchema[] {
      component: 'RangePicker',
      componentProps: {
        ...getRangePickerDefaultProps(),
-        clearable: true,
+        allowClear: true,
      },
    },
  ];
 }

-/** 表格列配置 */
+/** 列表的字段 */
 export function useGridColumns(): VxeGridPropTypes.Columns {
  return [
    {
      field: 'id',
      title: '编号',
-      fixed: 'left',
+      minWidth: 100,
    },
    {
      field: 'title',
      title: '标题',
+      minWidth: 200,
    },
    {
      field: 'picUrl',
      title: '封面',
+      minWidth: 120,
      cellRender: {
        name: 'CellImage',
      },
@@ -168,26 +211,34 @@ export function useGridColumns(): VxeGridPropTypes.Columns {
    {
      field: 'categoryId',
      title: '分类',
+      minWidth: 100,
+      formatter: ({ cellValue }) =>
+        categoryList.find((item) => item.id === cellValue)?.name || '-',
    },
    {
      field: 'browseCount',
      title: '浏览量',
+      minWidth: 100,
    },
    {
      field: 'author',
      title: '作者',
+      minWidth: 120,
    },
    {
      field: 'introduction',
      title: '文章简介',
+      minWidth: 250,
    },
    {
      field: 'sort',
      title: '排序',
+      minWidth: 80,
    },
    {
      field: 'status',
      title: '状态',
+      minWidth: 100,
      cellRender: {
        name: 'CellDict',
        props: { type: DICT_TYPE.COMMON_STATUS },
@@ -196,6 +247,7 @@ export function useGridColumns(): VxeGridPropTypes.Columns {
    {
      field: 'createTime',
      title: '创建时间',
+      minWidth: 180,
      formatter: 'formatDateTime',
    },
    {
--- a/apps/web-ele/src/views/mall/promotion/article/index.vue
+++ b/apps/web-ele/src/views/mall/promotion/article/index.vue
@@ -2,7 +2,7 @@
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { MallArticleApi } from '#/api/mall/promotion/article';

-import { Page, useVbenModal } from '@vben/common-ui';
+import { DocAlert, Page, useVbenModal } from '@vben/common-ui';

 import { ElLoading, ElMessage } from 'element-plus';

@@ -23,17 +23,17 @@ function handleRefresh() {
  gridApi.query();
 }

-/** 创建品牌 */
+/** 创建文章 */
 function handleCreate() {
  formModalApi.setData(null).open();
 }

-/** 编辑品牌 */
+/** 编辑文章 */
 function handleEdit(row: MallArticleApi.Article) {
  formModalApi.setData(row).open();
 }

-/** 删除品牌 */
+/** 删除文章 */
 async function handleDelete(row: MallArticleApi.Article) {
  const loadingInstance = ElLoading.service({
    text: $t('ui.actionMessage.deleting', [row.title]),
@@ -68,6 +68,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
    },
    rowConfig: {
      keyField: 'id',
+      isHover: true,
    },
    toolbarConfig: {
      refresh: true,
@@ -79,6 +80,13 @@ const [Grid, gridApi] = useVbenVxeGrid({

 <template>
  <Page auto-content-height>
+    <template #doc>
+      <DocAlert
+        title="【营销】内容管理"
+        url="https://doc.iocoder.cn/mall/promotion-content/"
+      />
+    </template>
+
    <FormModal @success="handleRefresh" />
    <Grid table-title="文章列表">
      <template #toolbar-tools>
--- a/apps/web-ele/src/views/mall/promotion/article/modules/form.vue
+++ b/apps/web-ele/src/views/mall/promotion/article/modules/form.vue
@@ -31,9 +31,9 @@ const [Form, formApi] = useVbenForm({
    componentProps: {
      class: 'w-full',
    },
-    formItemClass: 'col-span-2',
    labelWidth: 120,
  },
+  wrapperClass: 'grid-cols-2',
  layout: 'horizontal',
  schema: useFormSchema(),
  showDefaultActions: false,
@@ -81,7 +81,7 @@ const [Modal, modalApi] = useVbenModal({
 </script>

 <template>
-  <Modal class="w-2/5" :title="getTitle">
+  <Modal :title="getTitle" class="w-2/5">
    <Form class="mx-4" />
  </Modal>
 </template>