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

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