review：【antd】【ele】member 增加 brokerage-list.vue 列表

2025-11-02 14:55:21 +08:00
parent 889b97370a
commit d7cb4bdab5
5 changed files with 254 additions and 148 deletions
--- a/apps/web-antd/src/views/member/user/detail/index.vue
+++ b/apps/web-antd/src/views/member/user/detail/index.vue
@@ -20,6 +20,7 @@ import AddressList from './modules/address-list.vue';
 import AfterSaleList from './modules/after-sale-list.vue';
 import BalanceList from './modules/balance-list.vue';
 import BasicInfo from './modules/basic-info.vue';
+import BrokerageList from './modules/brokerage-list.vue';
 import CouponList from './modules/coupon-list.vue';
 import ExperienceRecordList from './modules/experience-record-list.vue';
 import FavoriteList from './modules/favorite-list.vue';
@@ -116,10 +117,7 @@ onMounted(async () => {
            <CouponList class="h-full" :user-id="userId" />
          </TabPane>
          <TabPane tab="推广用户" key="BrokerageList">
-            <!-- Todo: 商城模块 -->
-            <div class="h-full">
-              <h1>推广用户</h1>
-            </div>
+            <BrokerageList class="h-full" :user-id="userId" />
          </TabPane>
        </Tabs>
      </Card>
--- a/apps/web-antd/src/views/member/user/detail/modules/brokerage-list.vue
+++ b/apps/web-antd/src/views/member/user/detail/modules/brokerage-list.vue
@@ -0,0 +1,125 @@
+<script setup lang="ts">
+import type {
+  VxeGridPropTypes,
+  VxeTableGridOptions,
+} from '#/adapter/vxe-table';
+import type { MallBrokerageUserApi } from '#/api/mall/trade/brokerage/user';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getBrokerageUserPage } from '#/api/mall/trade/brokerage/user';
+import { getRangePickerDefaultProps } from '#/utils';
+
+defineOptions({ name: 'BrokerageList' });
+
+const props = defineProps<{
+  userId: number;
+}>();
+
+const formSchema = (): any[] => {
+  return [
+    {
+      fieldName: 'level',
+      label: '用户类型',
+      component: 'Select',
+      componentProps: {
+        options: [
+          {
+            label: '全部',
+            value: 0,
+          },
+          {
+            label: '一级',
+            value: 1,
+          },
+          {
+            label: '二级',
+            value: 2,
+          },
+        ],
+        placeholder: '请选择用户类型',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'bindUserTime',
+      label: '绑定时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        clearable: true,
+      },
+    },
+  ];
+};
+
+const columns = (): VxeGridPropTypes.Columns => {
+  return [
+    {
+      field: 'id',
+      title: '用户编号',
+    },
+    {
+      field: 'avatar',
+      title: '头像',
+      cellRender: {
+        name: 'CellImage',
+        props: {
+          height: 40,
+          width: 40,
+          shape: 'circle',
+        },
+      },
+    },
+    {
+      field: 'nickname',
+      title: '昵称',
+    },
+    {
+      field: 'level',
+      title: '等级',
+      formatter: (row: any) => {
+        return row.level === 1 ? '一级' : '二级';
+      },
+    },
+    {
+      field: 'bindUserTime',
+      title: '绑定时间',
+      formatter: 'formatDateTime',
+    },
+  ];
+};
+
+const [Grid] = useVbenVxeGrid({
+  formOptions: {
+    schema: formSchema(),
+  },
+  gridOptions: {
+    columns: columns(),
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getBrokerageUserPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            bindUserId: props.userId,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<MallBrokerageUserApi.BrokerageUser>,
+});
+</script>
+
+<template>
+  <Grid />
+</template>
--- a/apps/web-ele/src/views/member/user/detail/index.vue
+++ b/apps/web-ele/src/views/member/user/detail/index.vue
@@ -20,13 +20,13 @@ import AddressList from './modules/address-list.vue';
 import AfterSaleList from './modules/after-sale-list.vue';
 import BalanceList from './modules/balance-list.vue';
 import BasicInfo from './modules/basic-info.vue';
+import BrokerageList from './modules/brokerage-list.vue';
 import CouponList from './modules/coupon-list.vue';
 import ExperienceRecordList from './modules/experience-record-list.vue';
 import FavoriteList from './modules/favorite-list.vue';
 import OrderList from './modules/order-list.vue';
 import PointList from './modules/point-list.vue';
 import SignList from './modules/sign-list.vue';
-import UserBrokerageList from './modules/user-brokerage-list.vue';

 const route = useRoute();
 const { closeCurrentTab, refreshTab } = useTabs();
@@ -119,10 +119,7 @@ onMounted(async () => {
            <CouponList class="h-full" :user-id="userId" />
          </ElTabPane>
          <ElTabPane label="推广用户" name="BrokerageList">
-            <!-- Todo: 商城模块 -->
-            <div class="h-full">
-              <UserBrokerageList class="h-full" :user-id="userId" />
-            </div>
+            <BrokerageList class="h-full" :user-id="userId" />
          </ElTabPane>
        </ElTabs>
      </ElCard>
--- a/apps/web-ele/src/views/member/user/detail/modules/brokerage-list.vue
+++ b/apps/web-ele/src/views/member/user/detail/modules/brokerage-list.vue
@@ -0,0 +1,125 @@
+<script setup lang="ts">
+import type {
+  VxeGridPropTypes,
+  VxeTableGridOptions,
+} from '#/adapter/vxe-table';
+import type { MallBrokerageUserApi } from '#/api/mall/trade/brokerage/user';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getBrokerageUserPage } from '#/api/mall/trade/brokerage/user';
+import { getRangePickerDefaultProps } from '#/utils';
+
+defineOptions({ name: 'BrokerageList' });
+
+const props = defineProps<{
+  userId: number;
+}>();
+
+const formSchema = (): any[] => {
+  return [
+    {
+      fieldName: 'level',
+      label: '用户类型',
+      component: 'Select',
+      componentProps: {
+        options: [
+          {
+            label: '全部',
+            value: 0,
+          },
+          {
+            label: '一级',
+            value: 1,
+          },
+          {
+            label: '二级',
+            value: 2,
+          },
+        ],
+        placeholder: '请选择用户类型',
+        allowClear: true,
+      },
+    },
+    {
+      fieldName: 'bindUserTime',
+      label: '绑定时间',
+      component: 'RangePicker',
+      componentProps: {
+        ...getRangePickerDefaultProps(),
+        clearable: true,
+      },
+    },
+  ];
+};
+
+const columns = (): VxeGridPropTypes.Columns => {
+  return [
+    {
+      field: 'id',
+      title: '用户编号',
+    },
+    {
+      field: 'avatar',
+      title: '头像',
+      cellRender: {
+        name: 'CellImage',
+        props: {
+          height: 40,
+          width: 40,
+          shape: 'circle',
+        },
+      },
+    },
+    {
+      field: 'nickname',
+      title: '昵称',
+    },
+    {
+      field: 'level',
+      title: '等级',
+      formatter: (row: any) => {
+        return row.level === 1 ? '一级' : '二级';
+      },
+    },
+    {
+      field: 'bindUserTime',
+      title: '绑定时间',
+      formatter: 'formatDateTime',
+    },
+  ];
+};
+
+const [Grid] = useVbenVxeGrid({
+  formOptions: {
+    schema: formSchema(),
+  },
+  gridOptions: {
+    columns: columns(),
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await getBrokerageUserPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            bindUserId: props.userId,
+            ...formValues,
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<MallBrokerageUserApi.BrokerageUser>,
+});
+</script>
+
+<template>
+  <Grid />
+</template>
--- a/apps/web-ele/src/views/member/user/detail/modules/user-brokerage-list.vue
+++ b/apps/web-ele/src/views/member/user/detail/modules/user-brokerage-list.vue
@@ -1,139 +0,0 @@
-<script setup lang="ts">
-import type { VxeTableGridOptions } from '#/adapter/vxe-table';
-import type { MallBrokerageUserApi } from '#/api/mall/trade/brokerage/user';
-
-import { ref, watch } from 'vue';
-
-import { useVbenVxeGrid } from '#/adapter/vxe-table';
-import * as BrokerageUserApi from '#/api/mall/trade/brokerage/user';
-import { getRangePickerDefaultProps } from '#/utils';
-
-const props = defineProps<{
-  userId: number;
-}>();
-
-// 添加当前选中的状态
-const activeStatus = ref<number | string>('all');
-
-const [Grid, gridApi] = useVbenVxeGrid({
-  formOptions: {
-    schema: [
-      {
-        fieldName: 'level',
-        label: '用户类型',
-        component: 'RadioGroup',
-        componentProps: {
-          options: [
-            {
-              label: '全部',
-              value: 0,
-            },
-            {
-              label: '一级',
-              value: 1,
-            },
-            {
-              label: '二级',
-              value: 2,
-            },
-          ],
-          isButton: true,
-        },
-      },
-      {
-        fieldName: 'bindUserTime',
-        label: '绑定时间',
-        component: 'RangePicker',
-        componentProps: {
-          ...getRangePickerDefaultProps(),
-          clearable: true,
-        },
-      },
-    ],
-  },
-  gridOptions: {
-    columns: [
-      {
-        field: 'id',
-        title: '用户编号',
-      },
-      {
-        field: 'avatar',
-        title: '头像',
-        cellRender: {
-          name: 'CellImage',
-          props: {
-            height: 40,
-            width: 40,
-            shape: 'circle',
-          },
-        },
-      },
-      {
-        field: 'nickname',
-        title: '昵称',
-      },
-      {
-        field: 'level',
-        title: '等级',
-        formatter: (row: any) => {
-          return row.level === 1 ? '一级' : '二级';
-        },
-      },
-      {
-        field: 'bindUserTime',
-        title: '绑定时间',
-        formatter: 'formatDateTime',
-      },
-    ],
-    keepSource: true,
-    pagerConfig: {
-      pageSize: 10,
-    },
-    expandConfig: {
-      trigger: 'row',
-      expandAll: true,
-      padding: true,
-    },
-    proxyConfig: {
-      ajax: {
-        query: async ({ page }, formValues) => {
-          return await BrokerageUserApi.getBrokerageUserPage({
-            pageNo: page.currentPage,
-            pageSize: page.pageSize,
-            userId: props.userId,
-            ...formValues,
-          });
-        },
-      },
-    },
-    rowConfig: {
-      keyField: 'id',
-    },
-    toolbarConfig: {
-      refresh: true,
-      search: true,
-    },
-  } as VxeTableGridOptions<MallBrokerageUserApi.BrokerageUser>,
-  separator: false,
-});
-
-// 监听标签页变化，更新表单状态值并触发查询
-watch(activeStatus, (val) => {
-  // 使用formApi获取表单对象
-  if (gridApi.formApi) {
-    // 设置状态值
-    gridApi.formApi.setFieldValue(
-      'status',
-      val === 'all' ? undefined : Number(val),
-    );
-
-    // 触发查询
-    gridApi.query({ status: val === 'all' ? undefined : Number(val) });
-  }
-});
-</script>
-
-<template>
-  <Grid />
-</template>