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

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',
+        name: 'CellDict',
-        props: {
+        props: { type: DICT_TYPE.COMMON_STATUS },
-          dictType: 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' },
     },

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>

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>

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

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>

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>