feat：【antd】【ele】member 的 balance-list.vue、experience-record-list.vue、point-list.vue、sign-list.vue 增强 data.ts 的复用

2025-11-02 15:20:26 +08:00
parent d7cb4bdab5
commit f683f01efa
8 changed files with 293 additions and 363 deletions
--- a/apps/web-antd/src/views/member/user/detail/modules/balance-list.vue
+++ b/apps/web-antd/src/views/member/user/detail/modules/balance-list.vue
@@ -4,6 +4,7 @@ import type { WalletTransactionApi } from '#/api/pay/wallet/transaction';

 import { useVbenVxeGrid } from '#/adapter/vxe-table';
 import { getTransactionPage } from '#/api/pay/wallet/transaction';
+import { useTransactionGridColumns } from '#/views/pay/wallet/balance/data';

 const props = defineProps<{
  walletId: number | undefined;
@@ -11,36 +12,7 @@ const props = defineProps<{

 const [Grid] = useVbenVxeGrid({
  gridOptions: {
-    columns: [
-      {
-        field: 'id',
-        title: '编号',
-        minWidth: 100,
-      },
-      {
-        field: 'title',
-        title: '关联业务标题',
-        minWidth: 200,
-      },
-      {
-        field: 'price',
-        title: '交易金额',
-        minWidth: 120,
-        formatter: 'formatFenToYuanAmount',
-      },
-      {
-        field: 'balance',
-        title: '钱包余额',
-        minWidth: 120,
-        formatter: 'formatFenToYuanAmount',
-      },
-      {
-        field: 'createTime',
-        title: '交易时间',
-        minWidth: 180,
-        formatter: 'formatDateTime',
-      },
-    ],
+    columns: useTransactionGridColumns(),
    keepSource: true,
    proxyConfig: {
      ajax: {
--- a/apps/web-antd/src/views/member/user/detail/modules/experience-record-list.vue
+++ b/apps/web-antd/src/views/member/user/detail/modules/experience-record-list.vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
-import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeGridProps, VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { MemberExperienceRecordApi } from '#/api/member/experience-record';

 import { h } from 'vue';
@@ -17,103 +18,109 @@ const props = defineProps<{
  userId: number;
 }>();

+/** 表单搜索 schema */
+function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'bizType',
+      label: '业务类型',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.MEMBER_EXPERIENCE_BIZ_TYPE, 'number'),
+        placeholder: '请选择业务类型',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'title',
+      label: '标题',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入标题',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'createDate',
+      label: '获得时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        allowClear: true,
+      },
+    },
+  ];
+}
+
+/** 表格列配置 */
+function useGridColumns(): VxeGridProps['columns'] {
+  return [
+    {
+      field: 'id',
+      title: '编号',
+      minWidth: 100,
+    },
+    {
+      field: 'createTime',
+      title: '获得时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      field: 'experience',
+      title: '经验',
+      minWidth: 100,
+      slots: {
+        default: ({ row }) => {
+          return h(
+            Tag,
+            {
+              class: 'mr-1',
+              color: row.experience > 0 ? 'blue' : 'red',
+            },
+            () => (row.experience > 0 ? `+${row.experience}` : row.experience),
+          );
+        },
+      },
+    },
+    {
+      field: 'totalExperience',
+      title: '总经验',
+      minWidth: 100,
+    },
+    {
+      field: 'title',
+      title: '标题',
+      minWidth: 200,
+    },
+    {
+      field: 'description',
+      title: '描述',
+      minWidth: 250,
+    },
+    {
+      field: 'bizId',
+      title: '业务编号',
+      minWidth: 120,
+    },
+    {
+      field: 'bizType',
+      title: '业务类型',
+      minWidth: 120,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.MEMBER_EXPERIENCE_BIZ_TYPE },
+      },
+    },
+  ];
+}
+
 const [Grid] = useVbenVxeGrid({
  formOptions: {
-    schema: [
-      {
-        fieldName: 'bizType',
-        label: '业务类型',
-        component: 'Select',
-        componentProps: {
-          options: getDictOptions(
-            DICT_TYPE.MEMBER_EXPERIENCE_BIZ_TYPE,
-            'number',
-          ),
-          placeholder: '请选择业务类型',
-          allowClear: true,
-        },
-      },
-      {
-        fieldName: 'title',
-        label: '标题',
-        component: 'Input',
-        componentProps: {
-          placeholder: '请输入标题',
-          allowClear: true,
-        },
-      },
-      {
-        fieldName: 'createDate',
-        label: '获得时间',
-        component: 'RangePicker',
-        componentProps: {
-          ...getRangePickerDefaultProps(),
-          allowClear: true,
-        },
-      },
-    ],
+    schema: useGridFormSchema(),
  },
  gridOptions: {
-    columns: [
-      {
-        field: 'id',
-        title: '编号',
-        minWidth: 100,
-      },
-      {
-        field: 'createTime',
-        title: '获得时间',
-        minWidth: 180,
-        formatter: 'formatDateTime',
-      },
-      {
-        field: 'experience',
-        title: '经验',
-        minWidth: 100,
-        slots: {
-          default: ({ row }) => {
-            return h(
-              Tag,
-              {
-                class: 'mr-1',
-                color: row.experience > 0 ? 'blue' : 'red',
-              },
-              () =>
-                row.experience > 0 ? `+${row.experience}` : row.experience,
-            );
-          },
-        },
-      },
-      {
-        field: 'totalExperience',
-        title: '总经验',
-        minWidth: 100,
-      },
-      {
-        field: 'title',
-        title: '标题',
-        minWidth: 200,
-      },
-      {
-        field: 'description',
-        title: '描述',
-        minWidth: 250,
-      },
-      {
-        field: 'bizId',
-        title: '业务编号',
-        minWidth: 120,
-      },
-      {
-        field: 'bizType',
-        title: '业务类型',
-        minWidth: 120,
-        cellRender: {
-          name: 'CellDict',
-          props: { type: DICT_TYPE.MEMBER_EXPERIENCE_BIZ_TYPE },
-        },
-      },
-    ],
+    columns: useGridColumns(),
    keepSource: true,
    proxyConfig: {
      ajax: {
@@ -136,7 +143,6 @@ const [Grid] = useVbenVxeGrid({
      search: true,
    },
  } as VxeTableGridOptions<MemberExperienceRecordApi.ExperienceRecord>,
-  separator: false,
 });
 </script>

--- a/apps/web-antd/src/views/member/user/detail/modules/point-list.vue
+++ b/apps/web-antd/src/views/member/user/detail/modules/point-list.vue
@@ -2,54 +2,43 @@
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { MemberPointRecordApi } from '#/api/member/point/record';

-import { DICT_TYPE } from '@vben/constants';
-import { getDictOptions } from '@vben/hooks';
-
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
 import { getRecordPage } from '#/api/member/point/record';
-import { getRangePickerDefaultProps } from '#/utils';
-import { useGridColumns } from '#/views/member/point/record/data';
+import {
+  useGridColumns as usePointGridColumns,
+  useGridFormSchema as usePointGridFormSchema,
+} from '#/views/member/point/record/data';

 const props = defineProps<{
  userId: number;
 }>();

+/** 列表的搜索表单（过滤掉用户相关字段） */
+function useGridFormSchema() {
+  const excludeFields = new Set(['nickname']);
+  return usePointGridFormSchema().filter(
+    (item) => !excludeFields.has(item.fieldName),
+  );
+}
+
+/** 列表的字段（过滤掉用户相关字段） */
+function useGridColumns() {
+  const excludeFields = new Set(['nickname']);
+  return usePointGridColumns()?.filter(
+    (item) => item.field && !excludeFields.has(item.field),
+  );
+}
+
 const [Grid] = useVbenVxeGrid({
  formOptions: {
-    schema: [
-      {
-        fieldName: 'bizType',
-        label: '业务类型',
-        component: 'Select',
-        componentProps: {
-          options: getDictOptions(DICT_TYPE.MEMBER_POINT_BIZ_TYPE, 'number'),
-          placeholder: '请选择业务类型',
-          allowClear: true,
-        },
-      },
-      {
-        fieldName: 'title',
-        label: '积分标题',
-        component: 'Input',
-        componentProps: {
-          placeholder: '请输入积分标题',
-          allowClear: true,
-        },
-      },
-      {
-        fieldName: 'createDate',
-        label: '获得时间',
-        component: 'RangePicker',
-        componentProps: {
-          ...getRangePickerDefaultProps(),
-          allowClear: true,
-        },
-      },
-    ],
+    schema: useGridFormSchema(),
  },
  gridOptions: {
    columns: useGridColumns(),
    keepSource: true,
+    pagerConfig: {
+      pageSize: 10,
+    },
    proxyConfig: {
      ajax: {
        query: async ({ page }, formValues) => {
@@ -71,7 +60,6 @@ const [Grid] = useVbenVxeGrid({
      search: true,
    },
  } as VxeTableGridOptions<MemberPointRecordApi.Record>,
-  separator: false,
 });
 </script>

--- a/apps/web-antd/src/views/member/user/detail/modules/sign-list.vue
+++ b/apps/web-antd/src/views/member/user/detail/modules/sign-list.vue
@@ -4,35 +4,34 @@ import type { MemberSignInRecordApi } from '#/api/member/signin/record';

 import { useVbenVxeGrid } from '#/adapter/vxe-table';
 import { getSignInRecordPage } from '#/api/member/signin/record';
-import { getRangePickerDefaultProps } from '#/utils';
-import { useGridColumns } from '#/views/member/signin/record/data';
+import {
+  useGridColumns as useSignInGridColumns,
+  useGridFormSchema as useSignInGridFormSchema,
+} from '#/views/member/signin/record/data';

 const props = defineProps<{
  userId: number;
 }>();

+/** 列表的搜索表单（过滤掉用户相关字段） */
+function useGridFormSchema() {
+  const excludeFields = new Set(['nickname']);
+  return useSignInGridFormSchema().filter(
+    (item) => !excludeFields.has(item.fieldName),
+  );
+}
+
+/** 列表的字段（过滤掉用户相关字段） */
+function useGridColumns() {
+  const excludeFields = new Set(['nickname']);
+  return useSignInGridColumns()?.filter(
+    (item) => item.field && !excludeFields.has(item.field),
+  );
+}
+
 const [Grid] = useVbenVxeGrid({
  formOptions: {
-    schema: [
-      {
-        fieldName: 'day',
-        label: '签到天数',
-        component: 'Input',
-        componentProps: {
-          placeholder: '请输入签到天数',
-          allowClear: true,
-        },
-      },
-      {
-        fieldName: 'createTime',
-        label: '签到时间',
-        component: 'RangePicker',
-        componentProps: {
-          ...getRangePickerDefaultProps(),
-          allowClear: true,
-        },
-      },
-    ],
+    schema: useGridFormSchema(),
  },
  gridOptions: {
    columns: useGridColumns(),
@@ -58,7 +57,6 @@ const [Grid] = useVbenVxeGrid({
      search: true,
    },
  } as VxeTableGridOptions<MemberSignInRecordApi.SignInRecord>,
-  separator: false,
 });
 </script>

--- a/apps/web-ele/src/views/member/user/detail/modules/balance-list.vue
+++ b/apps/web-ele/src/views/member/user/detail/modules/balance-list.vue
@@ -4,6 +4,7 @@ import type { WalletTransactionApi } from '#/api/pay/wallet/transaction';

 import { useVbenVxeGrid } from '#/adapter/vxe-table';
 import { getTransactionPage } from '#/api/pay/wallet/transaction';
+import { useTransactionGridColumns } from '#/views/pay/wallet/balance/data';

 const props = defineProps<{
  walletId: number | undefined;
@@ -11,36 +12,7 @@ const props = defineProps<{

 const [Grid] = useVbenVxeGrid({
  gridOptions: {
-    columns: [
-      {
-        field: 'id',
-        title: '编号',
-        minWidth: 100,
-      },
-      {
-        field: 'title',
-        title: '关联业务标题',
-        minWidth: 200,
-      },
-      {
-        field: 'price',
-        title: '交易金额',
-        minWidth: 120,
-        formatter: 'formatFenToYuanAmount',
-      },
-      {
-        field: 'balance',
-        title: '钱包余额',
-        minWidth: 120,
-        formatter: 'formatFenToYuanAmount',
-      },
-      {
-        field: 'createTime',
-        title: '交易时间',
-        minWidth: 180,
-        formatter: 'formatDateTime',
-      },
-    ],
+    columns: useTransactionGridColumns(),
    keepSource: true,
    proxyConfig: {
      ajax: {
--- a/apps/web-ele/src/views/member/user/detail/modules/experience-record-list.vue
+++ b/apps/web-ele/src/views/member/user/detail/modules/experience-record-list.vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
-import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeGridProps, VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { MemberExperienceRecordApi } from '#/api/member/experience-record';

 import { h } from 'vue';
@@ -17,102 +18,108 @@ const props = defineProps<{
  userId: number;
 }>();

+/** 表单搜索 schema */
+function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'bizType',
+      label: '业务类型',
+      component: 'Select',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.MEMBER_EXPERIENCE_BIZ_TYPE, 'number'),
+        placeholder: '请选择业务类型',
+        clearable: true,
+      },
+    },
+    {
+      fieldName: 'title',
+      label: '标题',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入标题',
+        clearable: true,
+      },
+    },
+    {
+      fieldName: 'createDate',
+      label: '获得时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        clearable: true,
+      },
+    },
+  ];
+}
+
+/** 表格列配置 */
+function useGridColumns(): VxeGridProps['columns'] {
+  return [
+    {
+      field: 'id',
+      title: '编号',
+      minWidth: 100,
+    },
+    {
+      field: 'createTime',
+      title: '获得时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      field: 'experience',
+      title: '经验',
+      minWidth: 100,
+      slots: {
+        default: ({ row }) => {
+          return h(
+            ElTag,
+            {
+              type: row.experience > 0 ? 'primary' : 'danger',
+            },
+            () => (row.experience > 0 ? `+${row.experience}` : row.experience),
+          );
+        },
+      },
+    },
+    {
+      field: 'totalExperience',
+      title: '总经验',
+      minWidth: 100,
+    },
+    {
+      field: 'title',
+      title: '标题',
+      minWidth: 200,
+    },
+    {
+      field: 'description',
+      title: '描述',
+      minWidth: 250,
+    },
+    {
+      field: 'bizId',
+      title: '业务编号',
+      minWidth: 120,
+    },
+    {
+      field: 'bizType',
+      title: '业务类型',
+      minWidth: 120,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.MEMBER_EXPERIENCE_BIZ_TYPE },
+      },
+    },
+  ];
+}
+
 const [Grid] = useVbenVxeGrid({
  formOptions: {
-    schema: [
-      {
-        fieldName: 'bizType',
-        label: '业务类型',
-        component: 'Select',
-        componentProps: {
-          options: getDictOptions(
-            DICT_TYPE.MEMBER_EXPERIENCE_BIZ_TYPE,
-            'number',
-          ),
-          placeholder: '请选择业务类型',
-          clearable: true,
-        },
-      },
-      {
-        fieldName: 'title',
-        label: '标题',
-        component: 'Input',
-        componentProps: {
-          placeholder: '请输入标题',
-          clearable: true,
-        },
-      },
-      {
-        fieldName: 'createDate',
-        label: '获得时间',
-        component: 'RangePicker',
-        componentProps: {
-          ...getRangePickerDefaultProps(),
-          clearable: true,
-        },
-      },
-    ],
+    schema: useGridFormSchema(),
  },
  gridOptions: {
-    columns: [
-      {
-        field: 'id',
-        title: '编号',
-        minWidth: 100,
-      },
-      {
-        field: 'createTime',
-        title: '获得时间',
-        minWidth: 180,
-        formatter: 'formatDateTime',
-      },
-      {
-        field: 'experience',
-        title: '经验',
-        minWidth: 100,
-        slots: {
-          default: ({ row }) => {
-            return h(
-              ElTag,
-              {
-                type: row.point > 0 ? 'primary' : 'danger',
-              },
-              () =>
-                row.experience > 0 ? `+${row.experience}` : row.experience,
-            );
-          },
-        },
-      },
-      {
-        field: 'totalExperience',
-        title: '总经验',
-        minWidth: 100,
-      },
-      {
-        field: 'title',
-        title: '标题',
-        minWidth: 200,
-      },
-      {
-        field: 'description',
-        title: '描述',
-        minWidth: 250,
-      },
-      {
-        field: 'bizId',
-        title: '业务编号',
-        minWidth: 120,
-      },
-      {
-        field: 'bizType',
-        title: '业务类型',
-        minWidth: 120,
-        cellRender: {
-          name: 'CellDict',
-          props: { type: DICT_TYPE.MEMBER_EXPERIENCE_BIZ_TYPE },
-        },
-      },
-    ],
+    columns: useGridColumns(),
    keepSource: true,
    proxyConfig: {
      ajax: {
@@ -135,7 +142,6 @@ const [Grid] = useVbenVxeGrid({
      search: true,
    },
  } as VxeTableGridOptions<MemberExperienceRecordApi.ExperienceRecord>,
-  separator: false,
 });
 </script>

--- a/apps/web-ele/src/views/member/user/detail/modules/point-list.vue
+++ b/apps/web-ele/src/views/member/user/detail/modules/point-list.vue
@@ -4,44 +4,34 @@ import type { MemberPointRecordApi } from '#/api/member/point/record';

 import { useVbenVxeGrid } from '#/adapter/vxe-table';
 import { getRecordPage } from '#/api/member/point/record';
-import { DICT_TYPE } from '@vben/constants';
-import { getDictOptions } from '@vben/hooks';
-
-import { getRangePickerDefaultProps } from '#/utils';
-import { useGridColumns } from '#/views/member/point/record/data';
+import {
+  useGridColumns as usePointGridColumns,
+  useGridFormSchema as usePointGridFormSchema,
+} from '#/views/member/point/record/data';

 const props = defineProps<{
  userId: number;
 }>();

+/** 列表的搜索表单（过滤掉用户相关字段） */
+function useGridFormSchema() {
+  const excludeFields = new Set(['nickname']);
+  return usePointGridFormSchema().filter(
+    (item) => !excludeFields.has(item.fieldName),
+  );
+}
+
+/** 列表的字段（过滤掉用户相关字段） */
+function useGridColumns() {
+  const excludeFields = new Set(['nickname']);
+  return usePointGridColumns()?.filter(
+    (item) => item.field && !excludeFields.has(item.field),
+  );
+}
+
 const [Grid] = useVbenVxeGrid({
  formOptions: {
-    schema: [
-      {
-        fieldName: 'bizType',
-        label: '业务类型',
-        component: 'Select',
-        componentProps: {
-          clearable: true,
-          placeholder: '请选择业务类型',
-          options: getDictOptions(DICT_TYPE.MEMBER_POINT_BIZ_TYPE, 'number'),
-        },
-      },
-      {
-        fieldName: 'title',
-        label: '积分标题',
-        component: 'Input',
-      },
-      {
-        fieldName: 'createDate',
-        label: '获得时间',
-        component: 'RangePicker',
-        componentProps: {
-          ...getRangePickerDefaultProps(),
-          clearable: true,
-        },
-      },
-    ],
+    schema: useGridFormSchema(),
  },
  gridOptions: {
    columns: useGridColumns(),
@@ -63,13 +53,13 @@ const [Grid] = useVbenVxeGrid({
    },
    rowConfig: {
      keyField: 'id',
+      isHover: true,
    },
    toolbarConfig: {
      refresh: true,
      search: true,
    },
  } as VxeTableGridOptions<MemberPointRecordApi.Record>,
-  separator: false,
 });
 </script>

--- a/apps/web-ele/src/views/member/user/detail/modules/sign-list.vue
+++ b/apps/web-ele/src/views/member/user/detail/modules/sign-list.vue
@@ -4,35 +4,34 @@ import type { MemberSignInRecordApi } from '#/api/member/signin/record';

 import { useVbenVxeGrid } from '#/adapter/vxe-table';
 import { getSignInRecordPage } from '#/api/member/signin/record';
-import { getRangePickerDefaultProps } from '#/utils';
-import { useGridColumns } from '#/views/member/signin/record/data';
+import {
+  useGridColumns as useSignInGridColumns,
+  useGridFormSchema as useSignInGridFormSchema,
+} from '#/views/member/signin/record/data';

 const props = defineProps<{
  userId: number;
 }>();

+/** 列表的搜索表单（过滤掉用户相关字段） */
+function useGridFormSchema() {
+  const excludeFields = new Set(['nickname']);
+  return useSignInGridFormSchema().filter(
+    (item) => !excludeFields.has(item.fieldName),
+  );
+}
+
+/** 列表的字段（过滤掉用户相关字段） */
+function useGridColumns() {
+  const excludeFields = new Set(['nickname']);
+  return useSignInGridColumns()?.filter(
+    (item) => item.field && !excludeFields.has(item.field),
+  );
+}
+
 const [Grid] = useVbenVxeGrid({
  formOptions: {
-    schema: [
-      {
-        fieldName: 'day',
-        label: '签到天数',
-        component: 'Input',
-        componentProps: {
-          placeholder: '请输入签到天数',
-          clearable: true,
-        },
-      },
-      {
-        fieldName: 'createTime',
-        label: '签到时间',
-        component: 'RangePicker',
-        componentProps: {
-          ...getRangePickerDefaultProps(),
-          clearable: true,
-        },
-      },
-    ],
+    schema: useGridFormSchema(),
  },
  gridOptions: {
    columns: useGridColumns(),
@@ -58,7 +57,6 @@ const [Grid] = useVbenVxeGrid({
      search: true,
    },
  } as VxeTableGridOptions<MemberSignInRecordApi.SignInRecord>,
-  separator: false,
 });
 </script>