smart-flow/yudao-ui-admin-vben
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat：【mall 商城】分销用户的 form 迁移（ele 100%）

Browse Source
This commit is contained in:
YunaiV
2025-10-10 20:22:33 +08:00
parent 5e66e6bfac
commit b6fee5c05b
12 changed files with 340 additions and 363 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
apps/web-antd/src/api/mall/trade/brokerage/record/index.ts
View File

@@ -5,28 +5,17 @@ import { requestClient } from '#/api/request';
export namespace MallBrokerageRecordApi {
/** 佣金记录 */
export interface BrokerageRecord {
/** 编号 */
id: number;
/** 用户编号 */
userId: number;
/** 用户昵称 */
userNickname: string;
/** 用户头像 */
userAvatar: string;
/** 佣金金额，单位：分 */
price: number;
/** 佣金类型 */
type: number;
/** 关联订单编号 */
orderId: number;
/** 关联订单号 */
orderNo: string;
/** 创建时间 */
createTime: Date;
/** 状态 */
status: number;
/** 结算时间 */
settlementTime: Date;
id: number; // 编号
userId: number; // 用户编号
userNickname: string; // 用户昵称
userAvatar: string; // 用户头像
price: number; // 佣金金额，单位：分
type: number; // 佣金类型
orderId: number; // 关联订单编号
orderNo: string; // 关联订单号
createTime: Date; // 创建时间
status: number; // 状态
settlementTime: Date; // 结算时间
}
}

68
apps/web-antd/src/api/mall/trade/brokerage/user/index.ts
View File

@@ -5,59 +5,45 @@ import { requestClient } from '#/api/request';
export namespace MallBrokerageUserApi {
/** 分销用户 */
export interface BrokerageUser {
/** 编号 */
id: number;
/** 推广员编号 */
bindUserId: number;
/** 推广员绑定时间 */
bindUserTime: Date;
/** 是否启用分销 */
brokerageEnabled: boolean;
/** 分销资格时间 */
brokerageTime: Date;
/** 可提现金额，单位：分 */
price: number;
/** 冻结金额，单位：分 */
frozenPrice: number;
/** 用户昵称 */
nickname: string;
/** 用户头像 */
avatar: string;
id: number; // 编号
bindUserId: number; // 推广员编号
bindUserTime: Date; // 推广员绑定时间
brokerageEnabled: boolean; // 是否启用分销
brokerageTime: Date; // 分销资格时间
price: number; // 可提现金额，单位：分
frozenPrice: number; // 冻结金额，单位：分
nickname: string; // 用户昵称
avatar: string; // 用户头像
}
/** 创建分销用户请求 */
export interface CreateRequest {
/** 用户编号 */
userId: number;
/** 推广员编号 */
bindUserId: number;
export interface BrokerageUserCreateReqVO {
userId: number; // 用户编号
bindUserId: number; // 推广员编号
}
/** 修改推广员请求 */
export interface UpdateBindUserRequest {
/** 用户编号 */
id: number;
/** 推广员编号 */
bindUserId: number;
export interface BrokerageUserUpdateReqVO {
id: number; // 用户编号
bindUserId: number; // 推广员编号
}
/** 清除推广员请求 */
export interface ClearBindUserRequest {
/** 用户编号 */
id: number;
export interface BrokerageUserClearBrokerageUserReqVO {
id: number; // 用户编号
}
/** 修改推广资格请求 */
export interface UpdateBrokerageEnabledRequest {
/** 用户编号 */
id: number;
/** 是否启用分销 */
enabled: boolean;
export interface BrokerageUserUpdateBrokerageEnabledReqVO {
id: number; // 用户编号
enabled: boolean; // 是否启用分销
}
}
/** 创建分销用户 */
export function createBrokerageUser(data: MallBrokerageUserApi.CreateRequest) {
export function createBrokerageUser(
data: MallBrokerageUserApi.BrokerageUserCreateReqVO,
) {
return requestClient.post('/trade/brokerage-user/create', data);
}
@@ -78,19 +64,21 @@ export function getBrokerageUser(id: number) {
/** 修改推广员 */
export function updateBindUser(
data: MallBrokerageUserApi.UpdateBindUserRequest,
data: MallBrokerageUserApi.BrokerageUserUpdateReqVO,
) {
return requestClient.put('/trade/brokerage-user/update-bind-user', data);
}
/** 清除推广员 */
export function clearBindUser(data: MallBrokerageUserApi.ClearBindUserRequest) {
export function clearBindUser(
data: MallBrokerageUserApi.BrokerageUserClearBrokerageUserReqVO,
) {
return requestClient.put('/trade/brokerage-user/clear-bind-user', data);
}
/** 修改推广资格 */
export function updateBrokerageEnabled(
data: MallBrokerageUserApi.UpdateBrokerageEnabledRequest,
data: MallBrokerageUserApi.BrokerageUserUpdateBrokerageEnabledReqVO,
) {
return requestClient.put(
'/trade/brokerage-user/update-brokerage-enable',

63
apps/web-antd/src/api/mall/trade/brokerage/withdraw/index.ts
View File

@@ -5,52 +5,31 @@ import { requestClient } from '#/api/request';
export namespace MallBrokerageWithdrawApi {
/** 佣金提现 */
export interface BrokerageWithdraw {
/** 编号 */
id: number;
/** 用户编号 */
userId: number;
/** 提现金额，单位：分 */
price: number;
/** 手续费，单位：分 */
feePrice: number;
/** 总金额，单位：分 */
totalPrice: number;
/** 提现类型 */
type: number;
/** 用户名称 */
userName: string;
/** 用户账号 */
userAccount: string;
/** 银行名称 */
bankName: string;
/** 银行地址 */
bankAddress: string;
/** 收款码地址 */
qrCodeUrl: string;
/** 状态 */
status: number;
/** 审核备注 */
auditReason: string;
/** 审核时间 */
auditTime: Date;
/** 备注 */
remark: string;
/** 支付转账编号 */
payTransferId?: number;
/** 转账渠道编码 */
transferChannelCode?: string;
/** 转账时间 */
transferTime?: Date;
/** 转账错误信息 */
transferErrorMsg?: string;
id: number; // 编号
userId: number; // 用户编号
price: number; // 提现金额，单位：分
feePrice: number; // 手续费，单位：分
totalPrice: number; // 总金额，单位：分
type: number; // 提现类型
userName: string; // 用户名称
userAccount: string; // 用户账号
bankName: string; // 银行名称
bankAddress: string; // 银行地址
qrCodeUrl: string; // 收款码地址
status: number; // 状态
auditReason: string; // 审核备注
auditTime: Date; // 审核时间
remark: string; // 备注
payTransferId?: number; // 支付转账编号
transferChannelCode?: string; // 转账渠道编码
transferTime?: Date; // 转账时间
transferErrorMsg?: string; // 转账错误信息
}
/** 驳回申请请求 */
export interface RejectRequest {
/** 编号 */
id: number;
/** 驳回原因 */
auditReason: string;
id: number; // 编号
auditReason: string; // 驳回原因
}
}

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

@@ -196,6 +196,7 @@ export function useUserListFormSchema(): VbenFormSchema[] {
{ label: '一级推广人', value: '1' },
{ label: '二级推广人', value: '2' },
],
allowClear: true,
},
},
{

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

@@ -74,7 +74,7 @@ async function handleClearBindUser(row: MallBrokerageUserApi.BrokerageUser) {
duration: 0,
});
try {
await clearBindUser({ id: row.id as number });
await clearBindUser({ id: row.id! });
message.success($t('ui.actionMessage.deleteSuccess', [row.nickname]));
handleRefresh();
} finally {

33
apps/web-ele/src/api/mall/trade/brokerage/record/index.ts
View File

@@ -5,28 +5,17 @@ import { requestClient } from '#/api/request';
export namespace MallBrokerageRecordApi {
/** 佣金记录 */
export interface BrokerageRecord {
/** 编号 */
id: number;
/** 用户编号 */
userId: number;
/** 用户昵称 */
userNickname: string;
/** 用户头像 */
userAvatar: string;
/** 佣金金额，单位：分 */
price: number;
/** 佣金类型 */
type: number;
/** 关联订单编号 */
orderId: number;
/** 关联订单号 */
orderNo: string;
/** 创建时间 */
createTime: Date;
/** 状态 */
status: number;
/** 结算时间 */
settlementTime: Date;
id: number; // 编号
userId: number; // 用户编号
userNickname: string; // 用户昵称
userAvatar: string; // 用户头像
price: number; // 佣金金额，单位：分
type: number; // 佣金类型
orderId: number; // 关联订单编号
orderNo: string; // 关联订单号
createTime: Date; // 创建时间
status: number; // 状态
settlementTime: Date; // 结算时间
}
}

68
apps/web-ele/src/api/mall/trade/brokerage/user/index.ts
View File

@@ -5,59 +5,45 @@ import { requestClient } from '#/api/request';
export namespace MallBrokerageUserApi {
/** 分销用户 */
export interface BrokerageUser {
/** 编号 */
id: number;
/** 推广员编号 */
bindUserId: number;
/** 推广员绑定时间 */
bindUserTime: Date;
/** 是否启用分销 */
brokerageEnabled: boolean;
/** 分销资格时间 */
brokerageTime: Date;
/** 可提现金额，单位：分 */
price: number;
/** 冻结金额，单位：分 */
frozenPrice: number;
/** 用户昵称 */
nickname: string;
/** 用户头像 */
avatar: string;
id: number; // 编号
bindUserId: number; // 推广员编号
bindUserTime: Date; // 推广员绑定时间
brokerageEnabled: boolean; // 是否启用分销
brokerageTime: Date; // 分销资格时间
price: number; // 可提现金额，单位：分
frozenPrice: number; // 冻结金额，单位：分
nickname: string; // 用户昵称
avatar: string; // 用户头像
}
/** 创建分销用户请求 */
export interface CreateRequest {
/** 用户编号 */
userId: number;
/** 推广员编号 */
bindUserId: number;
export interface BrokerageUserCreateReqVO {
userId: number; // 用户编号
bindUserId: number; // 推广员编号
}
/** 修改推广员请求 */
export interface UpdateBindUserRequest {
/** 用户编号 */
id: number;
/** 推广员编号 */
bindUserId: number;
export interface BrokerageUserUpdateReqVO {
id: number; // 用户编号
bindUserId: number; // 推广员编号
}
/** 清除推广员请求 */
export interface ClearBindUserRequest {
/** 用户编号 */
id: number;
export interface BrokerageUserClearBrokerageUserReqVO {
id: number; // 用户编号
}
/** 修改推广资格请求 */
export interface UpdateBrokerageEnabledRequest {
/** 用户编号 */
id: number;
/** 是否启用分销 */
enabled: boolean;
export interface BrokerageUserUpdateBrokerageEnabledReqVO {
id: number; // 用户编号
enabled: boolean; // 是否启用分销
}
}
/** 创建分销用户 */
export function createBrokerageUser(data: MallBrokerageUserApi.CreateRequest) {
export function createBrokerageUser(
data: MallBrokerageUserApi.BrokerageUserCreateReqVO,
) {
return requestClient.post('/trade/brokerage-user/create', data);
}
@@ -78,19 +64,21 @@ export function getBrokerageUser(id: number) {
/** 修改推广员 */
export function updateBindUser(
data: MallBrokerageUserApi.UpdateBindUserRequest,
data: MallBrokerageUserApi.BrokerageUserUpdateReqVO,
) {
return requestClient.put('/trade/brokerage-user/update-bind-user', data);
}
/** 清除推广员 */
export function clearBindUser(data: MallBrokerageUserApi.ClearBindUserRequest) {
export function clearBindUser(
data: MallBrokerageUserApi.BrokerageUserClearBrokerageUserReqVO,
) {
return requestClient.put('/trade/brokerage-user/clear-bind-user', data);
}
/** 修改推广资格 */
export function updateBrokerageEnabled(
data: MallBrokerageUserApi.UpdateBrokerageEnabledRequest,
data: MallBrokerageUserApi.BrokerageUserUpdateBrokerageEnabledReqVO,
) {
return requestClient.put(
'/trade/brokerage-user/update-brokerage-enable',

63
apps/web-ele/src/api/mall/trade/brokerage/withdraw/index.ts
View File

@@ -5,52 +5,31 @@ import { requestClient } from '#/api/request';
export namespace MallBrokerageWithdrawApi {
/** 佣金提现 */
export interface BrokerageWithdraw {
/** 编号 */
id: number;
/** 用户编号 */
userId: number;
/** 提现金额，单位：分 */
price: number;
/** 手续费，单位：分 */
feePrice: number;
/** 总金额，单位：分 */
totalPrice: number;
/** 提现类型 */
type: number;
/** 用户名称 */
userName: string;
/** 用户账号 */
userAccount: string;
/** 银行名称 */
bankName: string;
/** 银行地址 */
bankAddress: string;
/** 收款码地址 */
qrCodeUrl: string;
/** 状态 */
status: number;
/** 审核备注 */
auditReason: string;
/** 审核时间 */
auditTime: Date;
/** 备注 */
remark: string;
/** 支付转账编号 */
payTransferId?: number;
/** 转账渠道编码 */
transferChannelCode?: string;
/** 转账时间 */
transferTime?: Date;
/** 转账错误信息 */
transferErrorMsg?: string;
id: number; // 编号
userId: number; // 用户编号
price: number; // 提现金额，单位：分
feePrice: number; // 手续费，单位：分
totalPrice: number; // 总金额，单位：分
type: number; // 提现类型
userName: string; // 用户名称
userAccount: string; // 用户账号
bankName: string; // 银行名称
bankAddress: string; // 银行地址
qrCodeUrl: string; // 收款码地址
status: number; // 状态
auditReason: string; // 审核备注
auditTime: Date; // 审核时间
remark: string; // 备注
payTransferId?: number; // 支付转账编号
transferChannelCode?: string; // 转账渠道编码
transferTime?: Date; // 转账时间
transferErrorMsg?: string; // 转账错误信息
}
/** 驳回申请请求 */
export interface RejectRequest {
/** 编号 */
id: number;
/** 驳回原因 */
auditReason: string;
id: number; // 编号
auditReason: string; // 驳回原因
}
}

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

@@ -153,6 +153,36 @@ export function useGridColumns(
];
}
/** 创建分销员表单配置 */
export function useCreateFormSchema(): VbenFormSchema[] {
return [
{
fieldName: 'userId',
label: '分销员编号',
component: 'Input',
rules: 'required',
},
{
fieldName: 'bindUserId',
label: '上级推广员编号',
component: 'Input',
rules: 'required',
},
];
}
/** 修改分销用户表单配置 */
export function useUpdateFormSchema(): VbenFormSchema[] {
return [
{
fieldName: 'bindUserId',
label: '上级推广员编号',
component: 'Input',
rules: 'required',
},
];
}
/** 用户列表弹窗搜索表单配置 */
export function useUserListFormSchema(): VbenFormSchema[] {
return [

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

@@ -73,7 +73,7 @@ async function handleClearBindUser(row: MallBrokerageUserApi.BrokerageUser) {
text: $t('ui.actionMessage.deleting', [row.nickname]),
});
try {
await clearBindUser({ id: row.id as number });
await clearBindUser({ id: row.id! });
ElMessage.success($t('ui.actionMessage.deleteSuccess', [row.nickname]));
handleRefresh();
} finally {
@@ -203,7 +203,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
type: 'primary',
link: true,
auth: ['trade:brokerage-user:clear-bind-user'],
ifShow: !!row.bindUserId,
ifShow: row.bindUserId > 0,
onClick: handleClearBindUser.bind(null, row),
},
]"

211
apps/web-ele/src/views/mall/trade/brokerage/user/modules/create-form.vue
View File

@@ -1,9 +1,10 @@
<script lang="ts" setup>
import type { MallBrokerageUserApi } from '#/api/mall/trade/brokerage/user';
import { reactive, ref } from 'vue';
import { ref } from 'vue';
import { useVbenModal } from '@vben/common-ui';
import { DICT_TYPE } from '@vben/constants';
import { IconifyIcon } from '@vben/icons';
import { $t } from '@vben/locales';
import { formatDate, isEmpty } from '@vben/utils';
@@ -12,16 +13,20 @@ import {
ElAvatar,
ElDescriptions,
ElDescriptionsItem,
ElDivider,
ElInput,
ElMessage,
ElTag,
} from 'element-plus';
import { useVbenForm } from '#/adapter/form';
import {
createBrokerageUser,
getBrokerageUser,
} from '#/api/mall/trade/brokerage/user';
import { getUser } from '#/api/member/user';
import { DictTag } from '#/components/dict-tag';
import { useCreateFormSchema } from '../data';
defineOptions({ name: 'BrokerageUserCreateForm' });
@@ -32,9 +37,24 @@ const formData = ref<any>({
bindUserId: undefined,
});
const [Form, formApi] = useVbenForm({
commonConfig: {
componentProps: {
class: 'w-full',
},
formItemClass: 'col-span-2',
labelWidth: 120,
},
layout: 'horizontal',
schema: useCreateFormSchema(),
showDefaultActions: false,
});
const [Modal, modalApi] = useVbenModal({
async onConfirm() {
if (!formData.value) {
await formApi.setValues(formData.value);
const { valid } = await formApi.validate();
if (!valid) {
return;
}
modalApi.lock();
@@ -53,130 +73,119 @@ const [Modal, modalApi] = useVbenModal({
if (!isOpen) {
return;
}
// 重置表单
formData.value = {
userId: undefined,
bindUserId: undefined,
};
await formApi.setValues(formData.value);
// 重置用户信息
user.value = undefined;
bindUser.value = undefined;
},
});
/** 用户信息 */
const userInfo = reactive<{
bindUser: MallBrokerageUserApi.BrokerageUser | undefined;
user: MallBrokerageUserApi.BrokerageUser | undefined;
}>({
bindUser: undefined,
user: undefined,
});
const user = ref<MallBrokerageUserApi.BrokerageUser | undefined>();
const bindUser = ref<MallBrokerageUserApi.BrokerageUser | undefined>();
/** 查询推广员和分销员 */
async function handleGetUser(id: any, userType: string) {
/** 查询分销员和分销员 */
async function handleSearchUser(id: number, userType: string) {
if (isEmpty(id)) {
ElMessage.warning(`请先输入${userType}编号后重试！！！`);
return;
}
if (
userType === '推广员' &&
userType === '分销员' &&
formData.value?.bindUserId === formData.value?.userId
) {
ElMessage.error('不能绑定自己为推广人');
ElMessage.error('不能绑定自己为推广员');
return;
}
try {
const user =
userType === '推广员' ? await getBrokerageUser(id) : await getUser(id);
if (userType === '推广员') {
userInfo.bindUser = user as MallBrokerageUserApi.BrokerageUser;
} else {
userInfo.user = user as MallBrokerageUserApi.BrokerageUser;
}
if (!user) {
ElMessage.warning(`${userType}不存在`);
}
} catch {
const userData =
userType === '分销员' ? await getUser(id) : await getBrokerageUser(id);
if (!userData) {
ElMessage.warning(`${userType}不存在`);
return;
}
if (userType === '分销员') {
user.value = userData as MallBrokerageUserApi.BrokerageUser;
} else {
bindUser.value = userData as MallBrokerageUserApi.BrokerageUser;
}
}
</script>
<template>
<Modal title="创建分销员" class="w-2/5">
<!-- TODO @霖：宽度不够，label 会折行 -->
<div class="mr-2 flex items-center">
分销员编号：
<ElInput
v-model="formData.userId"
placeholder="请输入推广员编号"
class="mx-2 !w-52"
>
<template #append>
<ElButton
type="primary"
@click="handleGetUser(formData?.userId, '分销员')"
<Modal title="创建分销员" class="w-1/3">
<Form>
<template #userId>
<div class="flex items-center gap-2">
<ElInput
v-model="formData.userId"
placeholder="请输入分销员编号"
class="flex-1"
>
<IconifyIcon icon="lucide:search" :size="15" />
</ElButton>
</template>
</ElInput>
上级推广人编号：
<ElInput
v-model="formData.bindUserId"
placeholder="请输入推广员编号"
class="mx-2 !w-52"
>
<template #append>
<ElButton
type="primary"
@click="handleGetUser(formData?.bindUserId, '推广员')"
<template #append>
<ElButton
type="primary"
@click="handleSearchUser(formData.userId, '分销员')"
>
<IconifyIcon icon="lucide:search" :size="15" />
</ElButton>
</template>
</ElInput>
</div>
</template>
<template #bindUserId>
<div class="flex items-center gap-2">
<ElInput
v-model="formData.bindUserId"
placeholder="请输入上级分销员编号"
class="flex-1"
>
<IconifyIcon icon="lucide:search" :size="15" />
</ElButton>
</template>
</ElInput>
</div>
<template #append>
<ElButton
type="primary"
@click="handleSearchUser(formData.bindUserId, '上级分销员')"
>
<IconifyIcon icon="lucide:search" :size="15" />
</ElButton>
</template>
</ElInput>
</div>
</template>
</Form>
<div class="mt-4">
<!-- 展示分销员的信息 -->
<ElDescriptions
title="分销员信息"
class="mt-4"
v-if="userInfo.user"
:column="1"
bordered
>
<ElDescriptionsItem label="头像">
<ElAvatar :src="userInfo.user?.avatar" />
</ElDescriptionsItem>
<ElDescriptionsItem label="昵称">
{{ userInfo.user?.nickname }}
</ElDescriptionsItem>
</ElDescriptions>
<!-- 展示上级推广人的信息 -->
<ElDescriptions
title="上级推广人信息"
class="mt-4"
v-if="userInfo.bindUser"
:column="1"
bordered
>
<ElDescriptionsItem label="头像">
<ElAvatar :src="userInfo.bindUser?.avatar" />
</ElDescriptionsItem>
<ElDescriptionsItem label="昵称">
{{ userInfo.bindUser?.nickname }}
</ElDescriptionsItem>
<ElDescriptionsItem label="推广资格">
<ElTag v-if="userInfo.bindUser?.brokerageEnabled" type="success">
有
</ElTag>
<ElTag v-else>无</ElTag>
</ElDescriptionsItem>
<ElDescriptionsItem label="成为推广员的时间">
{{ formatDate(userInfo.bindUser?.brokerageTime) }}
</ElDescriptionsItem>
</ElDescriptions>
</div>
<!-- 分销员信息展示 -->
<ElDivider v-if="user" />
<ElDescriptions v-if="user" title="分销员信息" :column="1" border>
<ElDescriptionsItem label="头像">
<ElAvatar :src="user?.avatar" />
</ElDescriptionsItem>
<ElDescriptionsItem label="昵称">
{{ user?.nickname }}
</ElDescriptionsItem>
</ElDescriptions>
<!-- 上级推广员信息展示 -->
<ElDivider v-if="bindUser" />
<ElDescriptions v-if="bindUser" title="上级推广员信息" :column="1" border>
<ElDescriptionsItem label="头像">
<ElAvatar :src="bindUser?.avatar" />
</ElDescriptionsItem>
<ElDescriptionsItem label="昵称">
{{ bindUser?.nickname }}
</ElDescriptionsItem>
<ElDescriptionsItem label="分销资格">
<DictTag
:type="DICT_TYPE.INFRA_BOOLEAN_STRING"
:value="bindUser?.brokerageEnabled"
/>
</ElDescriptionsItem>
<ElDescriptionsItem label="成为分销员的时间">
{{ formatDate(bindUser?.brokerageTime) }}
</ElDescriptionsItem>
</ElDescriptions>
</Modal>
</template>
</template>

127
apps/web-ele/src/views/mall/trade/brokerage/user/modules/update-form.vue
View File

@@ -4,39 +4,57 @@ import type { MallBrokerageUserApi } from '#/api/mall/trade/brokerage/user';
import { ref } from 'vue';
import { useVbenModal } from '@vben/common-ui';
import { DICT_TYPE } from '@vben/constants';
import { IconifyIcon } from '@vben/icons';
import { $t } from '@vben/locales';
import { formatDate } from '@vben/utils';
import { formatDate, isEmpty } from '@vben/utils';
import {
ElAvatar,
ElDescriptions,
ElDescriptionsItem,
ElDivider,
ElInput,
ElMessage,
ElTag,
} from 'element-plus';
import { useVbenForm } from '#/adapter/form';
import {
getBrokerageUser,
updateBindUser,
} from '#/api/mall/trade/brokerage/user';
import { DictTag } from '#/components/dict-tag';
import { useUpdateFormSchema } from '../data';
/** 修改分销用户 */
defineOptions({ name: 'BrokerageUserUpdateForm' });
const emit = defineEmits(['success']);
const formData = ref<any>();
const formData = ref<any>({
id: undefined,
bindUserId: undefined,
});
const [Form, formApi] = useVbenForm({
commonConfig: {
componentProps: {
class: 'w-full',
},
formItemClass: 'col-span-2',
labelWidth: 120,
},
layout: 'horizontal',
schema: useUpdateFormSchema(),
showDefaultActions: false,
});
const [Modal, modalApi] = useVbenModal({
async onConfirm() {
if (!formData.value) {
return;
}
// 未查找到合适的上级
if (!bindUser.value) {
ElMessage.error('请先查询并确认推广人');
await formApi.setValues(formData.value);
const { valid } = await formApi.validate();
if (!valid) {
return;
}
modalApi.lock();
@@ -52,10 +70,6 @@ const [Modal, modalApi] = useVbenModal({
},
onOpenChange: async (isOpen: boolean) => {
if (!isOpen) {
formData.value = {
id: 0,
bindUserId: 0,
};
return;
}
const data = modalApi.getData<MallBrokerageUserApi.BrokerageUser>();
@@ -68,8 +82,9 @@ const [Modal, modalApi] = useVbenModal({
id: data.id,
bindUserId: data.bindUserId,
};
await formApi.setValues(formData.value);
if (data.bindUserId) {
await handleGetUser();
await handleSearchUser(data.bindUserId, '上级分销员');
}
} finally {
modalApi.unlock();
@@ -77,60 +92,70 @@ const [Modal, modalApi] = useVbenModal({
},
});
const bindUser = ref<MallBrokerageUserApi.BrokerageUser>();
/** 绑定用户信息 */
const bindUser = ref<MallBrokerageUserApi.BrokerageUser | undefined>();
/** 查询推广员 */
async function handleGetUser() {
if (!formData.value) {
/** 查询分销员 */
async function handleSearchUser(id: number, userType: string) {
if (isEmpty(id)) {
ElMessage.warning(`请先输入${userType}编号后重试！！！`);
return;
}
if (formData.value.bindUserId === formData.value.id) {
if (formData.value?.bindUserId === formData.value?.id) {
ElMessage.error('不能绑定自己为推广人');
return;
}
try {
bindUser.value = await getBrokerageUser(formData.value.bindUserId);
if (!bindUser.value) {
ElMessage.warning('推广员不存在');
}
} catch {
ElMessage.warning('推广员不存在');
const userData = await getBrokerageUser(id);
if (!userData) {
ElMessage.warning(`${userType}不存在`);
return;
}
bindUser.value = userData as MallBrokerageUserApi.BrokerageUser;
}
</script>
<template>
<Modal title="修改上级推广人" class="w-2/5">
<div class="mr-2 flex items-center">
推广员编号：
<ElInput
v-model="formData.bindUserId"
placeholder="请输入推广员编号"
class="mx-2 !w-52"
>
<template #append>
<ElButton type="primary" @click="handleGetUser">
<IconifyIcon icon="lucide:search" :size="15" />
</ElButton>
</template>
</ElInput>
</div>
<Modal title="修改上级推广人" class="w-1/3">
<Form>
<template #bindUserId>
<div class="flex items-center gap-2">
<ElInput
v-model="formData.bindUserId"
placeholder="请输入上级推广员编号"
class="flex-1"
>
<template #append>
<ElButton
type="primary"
@click="handleSearchUser(formData.bindUserId, '上级推广员')"
>
<IconifyIcon icon="lucide:search" :size="15" />
</ElButton>
</template>
</ElInput>
</div>
</template>
</Form>
<!-- 展示上级推广人的信息 -->
<ElDescriptions class="mt-4" v-if="bindUser" :column="1" bordered>
<!-- 上级推广员信息展示 -->
<ElDivider v-if="bindUser" />
<ElDescriptions v-if="bindUser" title="上级推广员信息" :column="1" border>
<ElDescriptionsItem label="头像">
<ElAvatar :src="bindUser.avatar" />
<ElAvatar :src="bindUser?.avatar" />
</ElDescriptionsItem>
<ElDescriptionsItem label="昵称">
{{ bindUser.nickname }}
{{ bindUser?.nickname }}
</ElDescriptionsItem>
<ElDescriptionsItem label="推广资格">
<ElTag v-if="bindUser.brokerageEnabled" type="success">有</ElTag>
<ElTag v-else>无</ElTag>
<ElDescriptionsItem label="分销资格">
<DictTag
:type="DICT_TYPE.INFRA_BOOLEAN_STRING"
:value="bindUser?.brokerageEnabled"
/>
</ElDescriptionsItem>
<ElDescriptionsItem label="成为推广员的时间">
{{ formatDate(bindUser.brokerageTime) }}
<ElDescriptionsItem label="成为分销员的时间">
{{ formatDate(bindUser?.brokerageTime) }}
</ElDescriptionsItem>
</ElDescriptions>
</Modal>
</template>
</template>