feat：【mall 商城】分销用户的迁移（antd 30%）

apps/web-antd/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 { fenToYuan } from '@vben/utils';
 
@@ -29,6 +30,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
           { label: '无', value: false },
         ],
       },
+      defaultValue: true,
     },
     {
       fieldName: 'createTime',
@@ -43,7 +45,12 @@ export function useGridFormSchema(): VbenFormSchema[] {
 }
 
 /** 列表的字段 */
-export function useGridColumns(): VxeTableGridOptions['columns'] {
+export function useGridColumns<T = MallBrokerageUserApi.BrokerageUser>(
+  onBrokerageEnabledChange?: (
+    newEnabled: boolean,
+    row: T,
+  ) => PromiseLike<boolean | undefined>,
+): VxeTableGridOptions['columns'] {
   return [
     {
       field: 'id',
@@ -56,11 +63,6 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
       minWidth: 70,
       cellRender: {
         name: 'CellImage',
-        props: {
-          width: 24,
-          height: 24,
-          shape: 'circle',
-        },
       },
     },
     {
@@ -111,7 +113,17 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
       field: 'brokerageEnabled',
       title: '推广资格',
       minWidth: 80,
-      slots: { default: 'brokerageEnabled' },
+      align: 'center',
+      cellRender: {
+        attrs: { beforeChange: onBrokerageEnabledChange },
+        name: 'CellSwitch',
+        props: {
+          checkedValue: true,
+          uncheckedValue: false,
+          checkedChildren: '有',
+          unCheckedChildren: '无',
+        },
+      },
     },
     {
       field: 'brokerageTime',

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

@@ -2,11 +2,10 @@
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { MallBrokerageUserApi } from '#/api/mall/trade/brokerage/user';
 
-import { useAccess } from '@vben/access';
-import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
+import { confirm, DocAlert, Page, useVbenModal } from '@vben/common-ui';
 import { $t } from '@vben/locales';
 
-import { message, Switch } from 'ant-design-vue';
+import { message } from 'ant-design-vue';
 
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import {
@@ -23,92 +22,91 @@ import BrokerageUserUpdateForm from './modules/user-update-form.vue';
 
 defineOptions({ name: 'TradeBrokerageUser' });
 
-const { hasAccessByCodes } = useAccess();
-
-/** 刷新表格 */
-function onRefresh() {
-  gridApi.query();
-}
-
-const [OrderListModal, OrderListModalApi] = useVbenModal({
+const [OrderListModal, orderListModalApi] = useVbenModal({
   connectedComponent: BrokerageOrderListModal,
 });
 
-const [UserCreateModal, UserCreateModalApi] = useVbenModal({
+const [UserCreateModal, userCreateModalApi] = useVbenModal({
   connectedComponent: BrokerageUserCreateForm,
 });
 
-const [UserListModal, UserListModalApi] = useVbenModal({
+const [UserListModal, userListModalApi] = useVbenModal({
   connectedComponent: BrokerageUserListModal,
 });
 
-const [UserUpdateModal, UserUpdateModalApi] = useVbenModal({
+const [UserUpdateModal, userUpdateModalApi] = useVbenModal({
   connectedComponent: BrokerageUserUpdateForm,
 });
 
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
 /** 打开推广人列表 */
-function openBrokerageUserTable(row: MallBrokerageUserApi.BrokerageUser) {
-  UserListModalApi.setData(row).open();
+function handleOpenUserList(row: MallBrokerageUserApi.BrokerageUser) {
+  userListModalApi.setData(row).open();
 }
 
 /** 打开推广订单列表 */
-function openBrokerageOrderTable(row: MallBrokerageUserApi.BrokerageUser) {
-  OrderListModalApi.setData(row).open();
+function handleOpenOrderList(row: MallBrokerageUserApi.BrokerageUser) {
+  orderListModalApi.setData(row).open();
 }
 
 /** 打开表单：修改上级推广人 */
-function openUpdateBindUserForm(row: MallBrokerageUserApi.BrokerageUser) {
-  UserUpdateModalApi.setData(row).open();
+function handleOpenUpdateForm(row: MallBrokerageUserApi.BrokerageUser) {
+  userUpdateModalApi.setData(row).open();
 }
 
 /** 创建分销员 */
-function openCreateUserForm() {
-  UserCreateModalApi.open();
+function handleCreate() {
+  userCreateModalApi.open();
 }
 
 /** 清除上级推广人 */
 async function handleClearBindUser(row: MallBrokerageUserApi.BrokerageUser) {
   const hideLoading = message.loading({
-    content: `正在清除"${row.nickname}"的上级推广人...`,
-    key: 'clear_bind_user_msg',
+    content: $t('ui.actionMessage.deleting', [row.nickname]),
+    duration: 0,
   });
   try {
     await clearBindUser({ id: row.id as number });
-    message.success({
-      content: '清除成功',
-      key: 'clear_bind_user_msg',
-    });
-    onRefresh();
+    message.success($t('ui.actionMessage.deleteSuccess', [row.nickname]));
+    handleRefresh();
   } finally {
     hideLoading();
   }
 }
 
-/** 推广资格：开通/关闭 */
+/** 更新推广资格 */
 async function handleBrokerageEnabledChange(
+  newEnabled: boolean,
   row: MallBrokerageUserApi.BrokerageUser,
-) {
-  const text = row.brokerageEnabled ? '开通' : '关闭';
-  const hideLoading = message.loading({
-    content: `正在${text}"${row.nickname}"的推广资格...`,
-    key: 'brokerage_enabled_msg',
+): Promise<boolean | undefined> {
+  return new Promise((resolve, reject) => {
+    const text = newEnabled ? '开通' : '关闭';
+    confirm({
+      content: `你要将${row.nickname}的推广资格切换为【${text}】吗？`,
+    })
+      .then(async () => {
+        // 更新推广资格
+        const res = await updateBrokerageEnabled({
+          id: row.id!,
+          enabled: newEnabled,
+        });
+        if (res) {
+          // 提示并返回成功
+          message.success($t('ui.actionMessage.operationSuccess'));
+          handleRefresh();
+          resolve(true);
+        } else {
+          reject(new Error('更新失败'));
+        }
+      })
+      .catch(() => {
+        reject(new Error('取消操作'));
+      });
   });
-  try {
-    await updateBrokerageEnabled({
-      id: row.id as number,
-      enabled: row.brokerageEnabled as boolean,
-    });
-    message.success({
-      content: `${text}成功`,
-      key: 'brokerage_enabled_msg',
-    });
-    onRefresh();
-  } catch {
-    // 异常时，需要重置回之前的值
-    row.brokerageEnabled = !row.brokerageEnabled;
-  } finally {
-    hideLoading();
-  }
 }
 
 const [Grid, gridApi] = useVbenVxeGrid({
@@ -116,10 +114,9 @@ const [Grid, gridApi] = useVbenVxeGrid({
     schema: useGridFormSchema(),
   },
   gridOptions: {
-    columns: useGridColumns(),
+    columns: useGridColumns(handleBrokerageEnabledChange),
     height: 'auto',
     keepSource: true,
-    showOverflow: 'tooltip',
     proxyConfig: {
       ajax: {
         query: async ({ page }, formValues) => {
@@ -161,24 +158,11 @@ const [Grid, gridApi] = useVbenVxeGrid({
               type: 'primary',
               icon: ACTION_ICON.ADD,
               auth: ['trade:brokerage-user:create'],
-              onClick: openCreateUserForm,
+              onClick: handleCreate,
             },
           ]"
         />
       </template>
-
-      <template #brokerageEnabled="{ row }">
-        <Switch
-          v-model:checked="row.brokerageEnabled"
-          :disabled="
-            !hasAccessByCodes(['trade:brokerage-user:update-bind-user'])
-          "
-          checked-children="有"
-          un-checked-children="无"
-          @change="handleBrokerageEnabledChange(row)"
-        />
-      </template>
-
       <template #actions="{ row }">
         <TableAction
           :drop-down-actions="[
@@ -186,24 +170,25 @@ const [Grid, gridApi] = useVbenVxeGrid({
               label: '推广人',
               type: 'link',
               auth: ['trade:brokerage-user:user-query'],
-              onClick: openBrokerageUserTable.bind(null, row),
+              onClick: handleOpenUserList.bind(null, row),
             },
             {
               label: '推广订单',
               type: 'link',
               auth: ['trade:brokerage-user:order-query'],
-              onClick: openBrokerageOrderTable.bind(null, row),
+              onClick: handleOpenOrderList.bind(null, row),
             },
             {
               label: '修改上级推广人',
               type: 'link',
               auth: ['trade:brokerage-user:update-bind-user'],
-              onClick: openUpdateBindUserForm.bind(null, row),
+              onClick: handleOpenUpdateForm.bind(null, row),
             },
             {
               label: '清除上级推广人',
               type: 'link',
               auth: ['trade:brokerage-user:clear-bind-user'],
+              ifShow: !!row.bindUserId,
               onClick: handleClearBindUser.bind(null, row),
             },
           ]"
@@ -212,12 +197,12 @@ const [Grid, gridApi] = useVbenVxeGrid({
     </Grid>
 
     <!-- 修改上级推广人表单 -->
-    <UserUpdateModal @success="onRefresh" />
+    <UserUpdateModal @success="handleRefresh" />
     <!-- 推广人列表 -->
     <UserListModal />
     <!-- 推广订单列表 -->
     <OrderListModal />
     <!-- 创建分销员 -->
-    <UserCreateModal @success="onRefresh" />
+    <UserCreateModal @success="handleRefresh" />
   </Page>
 </template>