feat：【antd】【member 会员】完成 index 和 form 的重构

2025-10-07 14:18:48 +08:00
parent b9593c7a4a
commit a60c29169b
2 changed files with 100 additions and 58 deletions
--- a/apps/web-antd/src/views/member/user/data.ts
+++ b/apps/web-antd/src/views/member/user/data.ts
@@ -16,21 +16,21 @@ import { getSimpleTagList } from '#/api/member/tag';
 import { getAreaTree } from '#/api/system/area';
 import { getRangePickerDefaultProps } from '#/utils';

-/** 修改的表单 */
+/** 新增/修改的表单 */
 export function useFormSchema(): VbenFormSchema[] {
  return [
    {
-      component: 'Input',
      fieldName: 'id',
+      component: 'Input',
      dependencies: {
        triggerFields: [''],
        show: () => false,
      },
    },
    {
-      component: 'Input',
      fieldName: 'mobile',
      label: '手机号',
+      component: 'Input',
      rules: 'required',
    },
    {
@@ -45,19 +45,25 @@ export function useFormSchema(): VbenFormSchema[] {
      rules: z.number().default(CommonStatusEnum.ENABLE).optional(),
    },
    {
-      component: 'Input',
      fieldName: 'nickname',
      label: '用户昵称',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入用户昵称',
+      },
    },
    {
-      component: 'ImageUpload',
      fieldName: 'avatar',
      label: '头像',
+      component: 'ImageUpload',
    },
    {
-      component: 'Input',
      fieldName: 'name',
      label: '真实名字',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入真实名字',
+      },
    },
    {
      fieldName: 'sex',
@@ -70,45 +76,53 @@ export function useFormSchema(): VbenFormSchema[] {
      },
    },
    {
-      component: 'DatePicker',
      fieldName: 'birthday',
      label: '出生日期',
+      component: 'DatePicker',
      componentProps: {
        format: 'YYYY-MM-DD',
+        valueFormat: 'x',
+        placeholder: '请选择出生日期',
      },
    },
    {
-      component: 'ApiTreeSelect',
      fieldName: 'areaId',
      label: '所在地',
+      component: 'ApiTreeSelect',
      componentProps: {
        api: () => getAreaTree(),
        fieldNames: { label: 'name', value: 'id', children: 'children' },
+        placeholder: '请选择所在地',
      },
    },
    {
-      component: 'ApiSelect',
      fieldName: 'tagIds',
      label: '用户标签',
+      component: 'ApiSelect',
      componentProps: {
        api: () => getSimpleTagList(),
        fieldNames: { label: 'name', value: 'id' },
        mode: 'multiple',
+        placeholder: '请选择用户标签',
      },
    },
    {
-      component: 'ApiSelect',
      fieldName: 'groupId',
      label: '用户分组',
+      component: 'ApiSelect',
      componentProps: {
        api: () => getSimpleGroupList(),
        fieldNames: { label: 'name', value: 'id' },
+        placeholder: '请选择用户分组',
      },
    },
    {
-      component: 'Textarea',
      fieldName: 'mark',
      label: '会员备注',
+      component: 'Textarea',
+      componentProps: {
+        placeholder: '请输入会员备注',
+      },
    },
  ];
 }
@@ -120,11 +134,19 @@ export function useGridFormSchema(): VbenFormSchema[] {
      fieldName: 'nickname',
      label: '用户昵称',
      component: 'Input',
+      componentProps: {
+        placeholder: '请输入用户昵称',
+        allowClear: true,
+      },
    },
    {
      fieldName: 'mobile',
      label: '手机号',
      component: 'Input',
+      componentProps: {
+        placeholder: '请输入手机号',
+        allowClear: true,
+      },
    },
    {
      fieldName: 'loginDate',
@@ -132,6 +154,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
      component: 'RangePicker',
      componentProps: {
        ...getRangePickerDefaultProps(),
+        allowClear: true,
      },
    },
    {
@@ -140,6 +163,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
      component: 'RangePicker',
      componentProps: {
        ...getRangePickerDefaultProps(),
+        allowClear: true,
      },
    },
    {
@@ -150,6 +174,8 @@ export function useGridFormSchema(): VbenFormSchema[] {
        api: () => getSimpleTagList(),
        fieldNames: { label: 'name', value: 'id' },
        mode: 'multiple',
+        placeholder: '请选择用户标签',
+        allowClear: true,
      },
    },
    {
@@ -159,6 +185,8 @@ export function useGridFormSchema(): VbenFormSchema[] {
      componentProps: {
        api: () => getSimpleLevelList(),
        fieldNames: { label: 'name', value: 'id' },
+        placeholder: '请选择用户等级',
+        allowClear: true,
      },
    },
    {
@@ -168,6 +196,8 @@ export function useGridFormSchema(): VbenFormSchema[] {
      componentProps: {
        api: () => getSimpleGroupList(),
        fieldNames: { label: 'name', value: 'id' },
+        placeholder: '请选择用户分组',
+        allowClear: true,
      },
    },
  ];
@@ -183,38 +213,40 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
    {
      field: 'id',
      title: '用户编号',
+      minWidth: 100,
    },
    {
      field: 'avatar',
      title: '头像',
-      slots: {
-        default: ({ row }) => {
-          return h('img', {
-            src: row.avatar,
-            style: { width: '40px' },
-          });
-        },
+      minWidth: 80,
+      cellRender: {
+        name: 'CellImage',
      },
    },
    {
      field: 'mobile',
      title: '手机号',
+      minWidth: 120,
    },
    {
      field: 'nickname',
      title: '昵称',
+      minWidth: 120,
    },
    {
      field: 'levelName',
      title: '等级',
+      minWidth: 100,
    },
    {
      field: 'groupName',
      title: '分组',
+      minWidth: 100,
    },
    {
      field: 'tagNames',
      title: '用户标签',
+      minWidth: 150,
      slots: {
        default: ({ row }) => {
          return row.tagNames?.map((tagName: string, index: number) => {
@@ -234,10 +266,12 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
    {
      field: 'point',
      title: '积分',
+      minWidth: 80,
    },
    {
      field: 'status',
      title: '状态',
+      minWidth: 80,
      cellRender: {
        name: 'CellDict',
        props: { type: DICT_TYPE.COMMON_STATUS },
@@ -246,11 +280,13 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
    {
      field: 'loginDate',
      title: '登录时间',
+      minWidth: 160,
      formatter: 'formatDateTime',
    },
    {
      field: 'createTime',
      title: '注册时间',
+      minWidth: 160,
      formatter: 'formatDateTime',
    },
    {
@@ -266,17 +302,17 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
 export function useLevelFormSchema(): VbenFormSchema[] {
  return [
    {
-      component: 'Input',
      fieldName: 'id',
      label: '用户编号',
+      component: 'Input',
      componentProps: {
        disabled: true,
      },
    },
    {
-      component: 'Input',
      fieldName: 'nickname',
      label: '用户昵称',
+      component: 'Input',
      componentProps: {
        disabled: true,
      },
@@ -288,12 +324,17 @@ export function useLevelFormSchema(): VbenFormSchema[] {
      componentProps: {
        api: () => getSimpleLevelList(),
        fieldNames: { label: 'name', value: 'id' },
+        placeholder: '请选择用户等级',
      },
+      rules: 'required',
    },
    {
-      component: 'Textarea',
      fieldName: 'reason',
      label: '修改原因',
+      component: 'Textarea',
+      componentProps: {
+        placeholder: '请输入修改原因',
+      },
      rules: 'required',
    },
  ];
@@ -303,33 +344,33 @@ export function useLevelFormSchema(): VbenFormSchema[] {
 export function useBalanceFormSchema(): VbenFormSchema[] {
  return [
    {
-      component: 'Input',
      fieldName: 'id',
      label: '用户编号',
+      component: 'Input',
      componentProps: {
        disabled: true,
      },
    },
    {
-      component: 'Input',
      fieldName: 'nickname',
      label: '用户昵称',
+      component: 'Input',
      componentProps: {
        disabled: true,
      },
    },
    {
-      component: 'Input',
      fieldName: 'balance',
      label: '变动前余额(元)',
+      component: 'Input',
      componentProps: {
        disabled: true,
      },
    },
    {
-      component: 'RadioGroup',
      fieldName: 'changeType',
      label: '变动类型',
+      component: 'RadioGroup',
      componentProps: {
        options: [
          { label: '增加', value: 1 },
@@ -341,21 +382,22 @@ export function useBalanceFormSchema(): VbenFormSchema[] {
      defaultValue: 1,
    },
    {
-      component: 'InputNumber',
      fieldName: 'changeBalance',
      label: '变动余额(元)',
+      component: 'InputNumber',
      rules: 'required',
      componentProps: {
        min: 0,
        precision: 2,
        step: 0.1,
+        placeholder: '请输入变动余额',
      },
      defaultValue: 0,
    },
    {
-      component: 'Input',
      fieldName: 'balanceResult',
      label: '变动后余额(元)',
+      component: 'Input',
      dependencies: {
        triggerFields: ['changeBalance', 'changeType'],
        disabled: true,
@@ -377,33 +419,33 @@ export function useBalanceFormSchema(): VbenFormSchema[] {
 export function usePointFormSchema(): VbenFormSchema[] {
  return [
    {
-      component: 'Input',
      fieldName: 'id',
      label: '用户编号',
+      component: 'Input',
      componentProps: {
        disabled: true,
      },
    },
    {
-      component: 'Input',
      fieldName: 'nickname',
      label: '用户昵称',
+      component: 'Input',
      componentProps: {
        disabled: true,
      },
    },
    {
-      component: 'Input',
      fieldName: 'point',
      label: '变动前积分',
+      component: 'Input',
      componentProps: {
        disabled: true,
      },
    },
    {
-      component: 'RadioGroup',
      fieldName: 'changeType',
      label: '变动类型',
+      component: 'RadioGroup',
      componentProps: {
        options: [
          { label: '增加', value: 1 },
@@ -415,20 +457,21 @@ export function usePointFormSchema(): VbenFormSchema[] {
      defaultValue: 1,
    },
    {
-      component: 'InputNumber',
      fieldName: 'changePoint',
      label: '变动积分',
+      component: 'InputNumber',
      rules: 'required',
      componentProps: {
        min: 0,
        precision: 0,
+        placeholder: '请输入变动积分',
      },
      defaultValue: 0,
    },
    {
-      component: 'Input',
      fieldName: 'pointResult',
      label: '变动后积分',
+      component: 'Input',
      dependencies: {
        triggerFields: ['changePoint', 'changeType'],
        disabled: true,