feat：【mall 商城】分销用户的 list modal 迁移（ele 60%）

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

@@ -1,5 +1,6 @@
 import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MallBrokerageUserApi } from '#/api/mall/trade/brokerage/user';
 
 import { DICT_TYPE } from '@vben/constants';
 import { getDictOptions } from '@vben/hooks';
@@ -31,6 +32,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
           { label: '无', value: false },
         ],
       },
+      defaultValue: true,
     },
     {
       fieldName: 'createTime',
@@ -45,7 +47,12 @@ export function useGridFormSchema(): VbenFormSchema[] {
 }
 
 /** 列表的字段 */
-export function useGridColumns(): VxeTableGridOptions['columns'] {
+export function useGridColumns(
+  onBrokerageEnabledChange?: (
+    newEnabled: boolean,
+    row: MallBrokerageUserApi.BrokerageUser,
+  ) => PromiseLike<boolean | undefined>,
+): VxeTableGridOptions['columns'] {
   return [
     {
       field: 'id',
@@ -58,11 +65,6 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
       minWidth: 70,
       cellRender: {
         name: 'CellImage',
-        props: {
-          width: 24,
-          height: 24,
-          shape: 'circle',
-        },
       },
     },
     {
@@ -113,7 +115,17 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
       field: 'brokerageEnabled',
       title: '推广资格',
       minWidth: 80,
-      slots: { default: 'brokerageEnabled' },
+      align: 'center',
+      cellRender: {
+        attrs: { beforeChange: onBrokerageEnabledChange },
+        name: 'CellSwitch',
+        props: {
+          activeValue: true,
+          inactiveValue: false,
+          activeText: '有',
+          inactiveText: '无',
+        },
+      },
     },
     {
       field: 'brokerageTime',
@@ -147,16 +159,14 @@ export function useUserListFormSchema(): VbenFormSchema[] {
     {
       fieldName: 'level',
       label: '用户类型',
-      component: 'RadioGroup',
+      component: 'Select',
-      // TODO @霖：这里会折行
       componentProps: {
         options: [
           { label: '全部', value: undefined },
           { label: '一级推广人', value: '1' },
           { label: '二级推广人', value: '2' },
         ],
-        buttonStyle: 'solid',
+        clearable: true,
-        optionType: 'button',
       },
     },
     {
@@ -211,7 +221,10 @@ export function useUserListColumns(): VxeTableGridOptions['columns'] {
       field: 'brokerageEnabled',
       title: '推广资格',
       minWidth: 80,
-      slots: { default: 'brokerageEnabled' },
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.INFRA_BOOLEAN_STRING },
+      },
     },
     {
       field: 'bindUserTime',
@@ -313,4 +326,3 @@ export function useOrderListColumns(): VxeTableGridOptions['columns'] {
     },
   ];
 }
-

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

@@ -5,7 +5,7 @@ import type { MallBrokerageUserApi } from '#/api/mall/trade/brokerage/user';
 import { confirm, DocAlert, Page, useVbenModal } from '@vben/common-ui';
 import { $t } from '@vben/locales';
 
-import { ElMessage, ElSwitch } from 'element-plus';
+import { ElLoading, ElMessage } from 'element-plus';
 
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import {
@@ -69,32 +69,47 @@ function handleOpenOrderList(row: MallBrokerageUserApi.BrokerageUser) {
 
 /** 清除上级推广人 */
 async function handleClearBindUser(row: MallBrokerageUserApi.BrokerageUser) {
-  await confirm(`确定清除"${row.nickname}"的上级推广人吗？`);
+  const loadingInstance = ElLoading.service({
+    text: $t('ui.actionMessage.deleting', [row.nickname]),
+  });
   try {
     await clearBindUser({ id: row.id as number });
-    ElMessage.success('清除成功');
+    ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.nickname]));
     handleRefresh();
-  } catch {
+  } finally {
-    // 清除失败时不做处理
+    loadingInstance.close();
   }
 }
 
 /** 更新推广资格 */
 async function handleBrokerageEnabledChange(
+  newEnabled: boolean,
   row: MallBrokerageUserApi.BrokerageUser,
-) {
+): Promise<boolean | undefined> {
-  const text = row.brokerageEnabled ? '开通' : '关闭';
+  return new Promise((resolve, reject) => {
-  try {
+    const text = newEnabled ? '开通' : '关闭';
-    await updateBrokerageEnabled({
+    confirm({
-      id: row.id as number,
+      content: `你要将${row.nickname}的推广资格切换为【${text}】吗？`,
-      enabled: row.brokerageEnabled as boolean,
+    })
-    });
+      .then(async () => {
-    ElMessage.success(`${text}成功`);
+        // 更新推广资格
-    handleRefresh();
+        const res = await updateBrokerageEnabled({
-  } catch {
+          id: row.id!,
-    // 异常时，需要重置回之前的值
+          enabled: newEnabled,
-    row.brokerageEnabled = !row.brokerageEnabled;
+        });
-  }
+        if (res) {
+          // 提示并返回成功
+          ElMessage.success($t('ui.actionMessage.operationSuccess'));
+          handleRefresh();
+          resolve(true);
+        } else {
+          reject(new Error('更新失败'));
+        }
+      })
+      .catch(() => {
+        reject(new Error('取消操作'));
+      });
+  });
 }
 
 const [Grid, gridApi] = useVbenVxeGrid({
@@ -102,7 +117,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
     schema: useGridFormSchema(),
   },
   gridOptions: {
-    columns: useGridColumns(),
+    columns: useGridColumns(handleBrokerageEnabledChange),
     height: 'auto',
     keepSource: true,
     proxyConfig: {
@@ -145,7 +160,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
     <UserListModal />
     <!-- 推广订单列表 -->
     <OrderListModal />
-    <Grid>
+    <Grid table-title="分销用户列表">
       <template #toolbar-tools>
         <TableAction
           :actions="[
@@ -159,16 +174,6 @@ const [Grid, gridApi] = useVbenVxeGrid({
           ]"
         />
       </template>
-
-      <template #brokerageEnabled="{ row }">
-        <ElSwitch
-          v-model="row.brokerageEnabled"
-          checked-children="有"
-          un-checked-children="无"
-          @change="handleBrokerageEnabledChange(row)"
-        />
-      </template>
-
       <template #actions="{ row }">
         <TableAction
           :drop-down-actions="[