diff --git a/apps/web-ele/src/views/mall/trade/brokerage/user/data.ts b/apps/web-ele/src/views/mall/trade/brokerage/user/data.ts index 2386a2e2d..1bdeb63f0 100644 --- a/apps/web-ele/src/views/mall/trade/brokerage/user/data.ts +++ b/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, +): 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', - // TODO @霖:这里会折行 + component: 'Select', componentProps: { options: [ { label: '全部', value: undefined }, { label: '一级推广人', value: '1' }, { label: '二级推广人', value: '2' }, ], - buttonStyle: 'solid', - optionType: 'button', + clearable: true, }, }, { @@ -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'] { }, ]; } - diff --git a/apps/web-ele/src/views/mall/trade/brokerage/user/index.vue b/apps/web-ele/src/views/mall/trade/brokerage/user/index.vue index 17de7862e..ab5977642 100644 --- a/apps/web-ele/src/views/mall/trade/brokerage/user/index.vue +++ b/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, -) { - const text = row.brokerageEnabled ? '开通' : '关闭'; - try { - await updateBrokerageEnabled({ - id: row.id as number, - enabled: row.brokerageEnabled as boolean, - }); - ElMessage.success(`${text}成功`); - handleRefresh(); - } catch { - // 异常时,需要重置回之前的值 - row.brokerageEnabled = !row.brokerageEnabled; - } +): 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) { + // 提示并返回成功 + 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({ - + - - -