feat: 优化页面

apps/web-antd/src/views/mall/trade/brokerage/user/data.ts

@@ -54,7 +54,14 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
       field: 'avatar',
       title: '头像',
       width: 70,
-      slots: { default: 'avatar' },
+      cellRender: {
+        name: 'CellImage',
+        props: {
+          width: 24,
+          height: 24,
+          shape: 'circle',
+        },
+      },
     },
     {
       field: 'nickname',

apps/web-antd/src/views/mall/trade/brokerage/user/index.vue

@@ -6,7 +6,7 @@ import { useAccess } from '@vben/access';
 import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
 import { $t } from '@vben/locales';
 
-import { Avatar, message, Switch } from 'ant-design-vue';
+import { message, Switch } from 'ant-design-vue';
 
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import {
@@ -167,10 +167,6 @@ const [Grid, gridApi] = useVbenVxeGrid({
         />
       </template>
 
-      <template #avatar="{ row }">
-        <Avatar :src="row.avatar" />
-      </template>
-
       <template #brokerageEnabled="{ row }">
         <Switch
           v-model:checked="row.brokerageEnabled"

apps/web-antd/src/views/mall/trade/brokerage/user/modules/order-list-modal.vue

@@ -9,8 +9,6 @@ import { ref } from 'vue';
 import { useVbenModal } from '@vben/common-ui';
 import { fenToYuan } from '@vben/utils';
 
-import { Avatar, Tag } from 'ant-design-vue';
-
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
 import { getBrokerageRecordPage } from '#/api/mall/trade/brokerage/record';
 import { DICT_TYPE, getDictOptions, getRangePickerDefaultProps } from '#/utils';
@@ -102,7 +100,13 @@ function useColumns(): VxeTableGridOptions['columns'] {
       field: 'sourceUserAvatar',
       title: '头像',
       width: 70,
-      slots: { default: 'avatar' },
+      cellRender: {
+        name: 'CellImage',
+        props: {
+          width: 24,
+          height: 24,
+        },
+      },
     },
     {
       field: 'sourceUserNickname',
@@ -119,7 +123,10 @@ function useColumns(): VxeTableGridOptions['columns'] {
       field: 'status',
       title: '状态',
       minWidth: 85,
-      slots: { default: 'status' },
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.BROKERAGE_RECORD_STATUS },
+      },
     },
     {
       field: 'createTime',
@@ -173,21 +180,6 @@ const [Grid, gridApi] = useVbenVxeGrid({
 
 <template>
   <Modal title="推广订单列表" class="w-3/5">
-    <Grid table-title="推广订单列表">
-      <template #avatar="{ row }">
-        <Avatar :src="row.sourceUserAvatar" />
-      </template>
-
-      <template #status="{ row }">
-        <template
-          v-for="dict in getDictOptions(DICT_TYPE.BROKERAGE_RECORD_STATUS)"
-          :key="dict.value"
-        >
-          <Tag v-if="dict.value === row.status" :color="dict.colorType">
-            {{ dict.label }}
-          </Tag>
-        </template>
-      </template>
-    </Grid>
+    <Grid table-title="推广订单列表" />
   </Modal>
 </template>

apps/web-antd/src/views/mall/trade/brokerage/user/modules/user-list-modal.vue

@@ -7,7 +7,7 @@ import { ref } from 'vue';
 
 import { useVbenModal } from '@vben/common-ui';
 
-import { Avatar, Tag } from 'ant-design-vue';
+import { Tag } from 'ant-design-vue';
 
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
 import { getBrokerageUserPage } from '#/api/mall/trade/brokerage/user';
@@ -76,7 +76,14 @@ function useColumns(): VxeTableGridOptions['columns'] {
       field: 'avatar',
       title: '头像',
       width: 70,
-      slots: { default: 'avatar' },
+      cellRender: {
+        name: 'CellImage',
+        props: {
+          width: 24,
+          height: 24,
+          shape: 'circle',
+        },
+      },
     },
     {
       field: 'nickname',
@@ -144,10 +151,6 @@ const [Grid, gridApi] = useVbenVxeGrid({
 <template>
   <Modal title="推广人列表" class="w-3/5">
     <Grid table-title="推广人列表">
-      <template #avatar="{ row }">
-        <Avatar :src="row.avatar" />
-      </template>
-
       <template #brokerageEnabled="{ row }">
         <Tag v-if="row.brokerageEnabled" color="success">有</Tag>
         <Tag v-else>无</Tag>