From f2c34d42b00dcf3b1aa75971e16bf9bd8dd8ccd2 Mon Sep 17 00:00:00 2001 From: YunaiV Date: Thu, 9 Oct 2025 13:29:18 +0800 Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9A=E3=80=90mall=20=E5=95=86=E5=9F=8E?= =?UTF-8?q?=E3=80=91=E5=88=86=E9=94=80=E7=94=A8=E6=88=B7=E7=9A=84=E8=BF=81?= =?UTF-8?q?=E7=A7=BB=EF=BC=88antd=2030%=EF=BC=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../views/mall/trade/brokerage/user/data.ts | 26 +++- .../views/mall/trade/brokerage/user/index.vue | 129 ++++++++---------- 2 files changed, 76 insertions(+), 79 deletions(-) diff --git a/apps/web-antd/src/views/mall/trade/brokerage/user/data.ts b/apps/web-antd/src/views/mall/trade/brokerage/user/data.ts index 72c89bc7d..0a6c7c4fa 100644 --- a/apps/web-antd/src/views/mall/trade/brokerage/user/data.ts +++ b/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( + onBrokerageEnabledChange?: ( + newEnabled: boolean, + row: T, + ) => PromiseLike, +): 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', diff --git a/apps/web-antd/src/views/mall/trade/brokerage/user/index.vue b/apps/web-antd/src/views/mall/trade/brokerage/user/index.vue index 3d6276e9f..7c8b5df4f 100644 --- a/apps/web-antd/src/views/mall/trade/brokerage/user/index.vue +++ b/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 { + 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, }, ]" /> - - -