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

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: [
+    columns: useTransactionGridColumns(),
-      {
-        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',
-      },
-    ],
     keepSource: true,
     proxyConfig: {
       ajax: {

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,18 +18,15 @@ const props = defineProps<{
   userId: number;
 }>();
 
-const [Grid] = useVbenVxeGrid({
+/** 表单搜索 schema */
-  formOptions: {
+function useGridFormSchema(): VbenFormSchema[] {
-    schema: [
+  return [
     {
       fieldName: 'bizType',
       label: '业务类型',
       component: 'Select',
       componentProps: {
-          options: getDictOptions(
+        options: getDictOptions(DICT_TYPE.MEMBER_EXPERIENCE_BIZ_TYPE, 'number'),
-            DICT_TYPE.MEMBER_EXPERIENCE_BIZ_TYPE,
-            'number',
-          ),
         placeholder: '请选择业务类型',
         allowClear: true,
       },
@@ -51,10 +49,12 @@ const [Grid] = useVbenVxeGrid({
         allowClear: true,
       },
     },
-    ],
+  ];
-  },
+}
-  gridOptions: {
+
-    columns: [
+/** 表格列配置 */
+function useGridColumns(): VxeGridProps['columns'] {
+  return [
     {
       field: 'id',
       title: '编号',
@@ -78,8 +78,7 @@ const [Grid] = useVbenVxeGrid({
               class: 'mr-1',
               color: row.experience > 0 ? 'blue' : 'red',
             },
-              () =>
+            () => (row.experience > 0 ? `+${row.experience}` : row.experience),
-                row.experience > 0 ? `+${row.experience}` : row.experience,
           );
         },
       },
@@ -113,7 +112,15 @@ const [Grid] = useVbenVxeGrid({
         props: { type: DICT_TYPE.MEMBER_EXPERIENCE_BIZ_TYPE },
       },
     },
-    ],
+  ];
+}
+
+const [Grid] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
     keepSource: true,
     proxyConfig: {
       ajax: {
@@ -136,7 +143,6 @@ const [Grid] = useVbenVxeGrid({
       search: true,
     },
   } as VxeTableGridOptions<MemberExperienceRecordApi.ExperienceRecord>,
-  separator: false,
 });
 </script>
 

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 {
-import { useGridColumns } from '#/views/member/point/record/data';
+  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: [
+    schema: useGridFormSchema(),
-      {
-        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,
-        },
-      },
-    ],
   },
   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>
 

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 {
-import { useGridColumns } from '#/views/member/signin/record/data';
+  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: [
+    schema: useGridFormSchema(),
-      {
-        fieldName: 'day',
-        label: '签到天数',
-        component: 'Input',
-        componentProps: {
-          placeholder: '请输入签到天数',
-          allowClear: true,
-        },
-      },
-      {
-        fieldName: 'createTime',
-        label: '签到时间',
-        component: 'RangePicker',
-        componentProps: {
-          ...getRangePickerDefaultProps(),
-          allowClear: true,
-        },
-      },
-    ],
   },
   gridOptions: {
     columns: useGridColumns(),
@@ -58,7 +57,6 @@ const [Grid] = useVbenVxeGrid({
       search: true,
     },
   } as VxeTableGridOptions<MemberSignInRecordApi.SignInRecord>,
-  separator: false,
 });
 </script>
 

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: [
+    columns: useTransactionGridColumns(),
-      {
-        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',
-      },
-    ],
     keepSource: true,
     proxyConfig: {
       ajax: {

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,18 +18,15 @@ const props = defineProps<{
   userId: number;
 }>();
 
-const [Grid] = useVbenVxeGrid({
+/** 表单搜索 schema */
-  formOptions: {
+function useGridFormSchema(): VbenFormSchema[] {
-    schema: [
+  return [
     {
       fieldName: 'bizType',
       label: '业务类型',
       component: 'Select',
       componentProps: {
-          options: getDictOptions(
+        options: getDictOptions(DICT_TYPE.MEMBER_EXPERIENCE_BIZ_TYPE, 'number'),
-            DICT_TYPE.MEMBER_EXPERIENCE_BIZ_TYPE,
-            'number',
-          ),
         placeholder: '请选择业务类型',
         clearable: true,
       },
@@ -51,10 +49,12 @@ const [Grid] = useVbenVxeGrid({
         clearable: true,
       },
     },
-    ],
+  ];
-  },
+}
-  gridOptions: {
+
-    columns: [
+/** 表格列配置 */
+function useGridColumns(): VxeGridProps['columns'] {
+  return [
     {
       field: 'id',
       title: '编号',
@@ -75,10 +75,9 @@ const [Grid] = useVbenVxeGrid({
           return h(
             ElTag,
             {
-                type: row.point > 0 ? 'primary' : 'danger',
+              type: row.experience > 0 ? 'primary' : 'danger',
             },
-              () =>
+            () => (row.experience > 0 ? `+${row.experience}` : row.experience),
-                row.experience > 0 ? `+${row.experience}` : row.experience,
           );
         },
       },
@@ -112,7 +111,15 @@ const [Grid] = useVbenVxeGrid({
         props: { type: DICT_TYPE.MEMBER_EXPERIENCE_BIZ_TYPE },
       },
     },
-    ],
+  ];
+}
+
+const [Grid] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
     keepSource: true,
     proxyConfig: {
       ajax: {
@@ -135,7 +142,6 @@ const [Grid] = useVbenVxeGrid({
       search: true,
     },
   } as VxeTableGridOptions<MemberExperienceRecordApi.ExperienceRecord>,
-  separator: false,
 });
 </script>
 

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 {
-import { getDictOptions } from '@vben/hooks';
+  useGridColumns as usePointGridColumns,
-
+  useGridFormSchema as usePointGridFormSchema,
-import { getRangePickerDefaultProps } from '#/utils';
+} from '#/views/member/point/record/data';
-import { useGridColumns } 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: [
+    schema: useGridFormSchema(),
-      {
-        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,
-        },
-      },
-    ],
   },
   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>
 

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 {
-import { useGridColumns } from '#/views/member/signin/record/data';
+  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: [
+    schema: useGridFormSchema(),
-      {
-        fieldName: 'day',
-        label: '签到天数',
-        component: 'Input',
-        componentProps: {
-          placeholder: '请输入签到天数',
-          clearable: true,
-        },
-      },
-      {
-        fieldName: 'createTime',
-        label: '签到时间',
-        component: 'RangePicker',
-        componentProps: {
-          ...getRangePickerDefaultProps(),
-          clearable: true,
-        },
-      },
-    ],
   },
   gridOptions: {
     columns: useGridColumns(),
@@ -58,7 +57,6 @@ const [Grid] = useVbenVxeGrid({
       search: true,
     },
   } as VxeTableGridOptions<MemberSignInRecordApi.SignInRecord>,
-  separator: false,
 });
 </script>