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

apps/web-antd/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,20 +22,26 @@ 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: '请输入排序',
+        placeholder: '请输入显示顺序',
       },
       rules: 'required',
     },
@@ -47,7 +54,7 @@ export function useFormSchema(): VbenFormSchema[] {
         buttonStyle: 'solid',
         optionType: 'button',
       },
-      rules: 'required',
+      rules: z.number().default(CommonStatusEnum.ENABLE),
     },
   ];
 }
@@ -61,6 +68,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       component: 'Input',
       componentProps: {
         placeholder: '请输入分类名称',
+        allowClear: true,
       },
     },
     {
@@ -69,6 +77,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
       component: 'Select',
       componentProps: {
         placeholder: '请选择状态',
+        allowClear: true,
         options: getDictOptions(DICT_TYPE.COMMON_STATUS, 'number'),
       },
     },
@@ -85,51 +94,51 @@ export function useGridFormSchema(): VbenFormSchema[] {
 }
 
 /** 表格列配置 */
-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' },
     },

apps/web-antd/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 { message } from 'ant-design-vue';
 
@@ -43,10 +43,8 @@ async function handleDelete(row: MallArticleCategoryApi.ArticleCategory) {
     duration: 0,
   });
   try {
-    await deleteArticleCategory(row.id as number);
-    message.success({
-      content: $t('ui.actionMessage.deleteSuccess', [row.name]),
-    });
+    await deleteArticleCategory(row.id!);
+    message.success($t('ui.actionMessage.deleteSuccess', [row.name]));
     handleRefresh();
   } finally {
     hideLoading();
@@ -74,6 +72,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
     },
     rowConfig: {
       keyField: 'id',
+      isHover: true,
     },
     toolbarConfig: {
       refresh: true,
@@ -85,6 +84,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-antd/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>