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

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

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

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

@@ -5,59 +5,45 @@ import { requestClient } from '#/api/request';
 export namespace MallBrokerageUserApi {
   /** 分销用户 */
   export interface BrokerageUser {
-    /** 编号 */
+    id: number; // 编号
-    id: number;
+    bindUserId: number; // 推广员编号
-    /** 推广员编号 */
+    bindUserTime: Date; // 推广员绑定时间
-    bindUserId: number;
+    brokerageEnabled: boolean; // 是否启用分销
-    /** 推广员绑定时间 */
+    brokerageTime: Date; // 分销资格时间
-    bindUserTime: Date;
+    price: number; // 可提现金额，单位：分
-    /** 是否启用分销 */
+    frozenPrice: number; // 冻结金额，单位：分
-    brokerageEnabled: boolean;
+    nickname: string; // 用户昵称
-    /** 分销资格时间 */
+    avatar: string; // 用户头像
-    brokerageTime: Date;
-    /** 可提现金额，单位：分 */
-    price: number;
-    /** 冻结金额，单位：分 */
-    frozenPrice: number;
-    /** 用户昵称 */
-    nickname: string;
-    /** 用户头像 */
-    avatar: string;
   }
 
   /** 创建分销用户请求 */
-  export interface CreateRequest {
+  export interface BrokerageUserCreateReqVO {
-    /** 用户编号 */
+    userId: number; // 用户编号
-    userId: number;
+    bindUserId: number; // 推广员编号
-    /** 推广员编号 */
-    bindUserId: number;
   }
 
   /** 修改推广员请求 */
-  export interface UpdateBindUserRequest {
+  export interface BrokerageUserUpdateReqVO {
-    /** 用户编号 */
+    id: number; // 用户编号
-    id: number;
+    bindUserId: number; // 推广员编号
-    /** 推广员编号 */
-    bindUserId: number;
   }
 
   /** 清除推广员请求 */
-  export interface ClearBindUserRequest {
+  export interface BrokerageUserClearBrokerageUserReqVO {
-    /** 用户编号 */
+    id: number; // 用户编号
-    id: number;
   }
 
   /** 修改推广资格请求 */
-  export interface UpdateBrokerageEnabledRequest {
+  export interface BrokerageUserUpdateBrokerageEnabledReqVO {
-    /** 用户编号 */
+    id: number; // 用户编号
-    id: number;
+    enabled: boolean; // 是否启用分销
-    /** 是否启用分销 */
-    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',

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

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

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

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

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

@@ -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 {

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

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

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

@@ -5,59 +5,45 @@ import { requestClient } from '#/api/request';
 export namespace MallBrokerageUserApi {
   /** 分销用户 */
   export interface BrokerageUser {
-    /** 编号 */
+    id: number; // 编号
-    id: number;
+    bindUserId: number; // 推广员编号
-    /** 推广员编号 */
+    bindUserTime: Date; // 推广员绑定时间
-    bindUserId: number;
+    brokerageEnabled: boolean; // 是否启用分销
-    /** 推广员绑定时间 */
+    brokerageTime: Date; // 分销资格时间
-    bindUserTime: Date;
+    price: number; // 可提现金额，单位：分
-    /** 是否启用分销 */
+    frozenPrice: number; // 冻结金额，单位：分
-    brokerageEnabled: boolean;
+    nickname: string; // 用户昵称
-    /** 分销资格时间 */
+    avatar: string; // 用户头像
-    brokerageTime: Date;
-    /** 可提现金额，单位：分 */
-    price: number;
-    /** 冻结金额，单位：分 */
-    frozenPrice: number;
-    /** 用户昵称 */
-    nickname: string;
-    /** 用户头像 */
-    avatar: string;
   }
 
   /** 创建分销用户请求 */
-  export interface CreateRequest {
+  export interface BrokerageUserCreateReqVO {
-    /** 用户编号 */
+    userId: number; // 用户编号
-    userId: number;
+    bindUserId: number; // 推广员编号
-    /** 推广员编号 */
-    bindUserId: number;
   }
 
   /** 修改推广员请求 */
-  export interface UpdateBindUserRequest {
+  export interface BrokerageUserUpdateReqVO {
-    /** 用户编号 */
+    id: number; // 用户编号
-    id: number;
+    bindUserId: number; // 推广员编号
-    /** 推广员编号 */
-    bindUserId: number;
   }
 
   /** 清除推广员请求 */
-  export interface ClearBindUserRequest {
+  export interface BrokerageUserClearBrokerageUserReqVO {
-    /** 用户编号 */
+    id: number; // 用户编号
-    id: number;
   }
 
   /** 修改推广资格请求 */
-  export interface UpdateBrokerageEnabledRequest {
+  export interface BrokerageUserUpdateBrokerageEnabledReqVO {
-    /** 用户编号 */
+    id: number; // 用户编号
-    id: number;
+    enabled: boolean; // 是否启用分销
-    /** 是否启用分销 */
-    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',

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

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

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

@@ -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 [

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

@@ -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),
             },
           ]"

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

@@ -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<{
+const user = ref<MallBrokerageUserApi.BrokerageUser | undefined>();
-  bindUser: MallBrokerageUserApi.BrokerageUser | undefined;
+const bindUser = ref<MallBrokerageUserApi.BrokerageUser | undefined>();
-  user: MallBrokerageUserApi.BrokerageUser | undefined;
-}>({
-  bindUser: undefined,
-  user: 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 userData =
-    const user =
+    userType === '分销员' ? await getUser(id) : await getBrokerageUser(id);
-      userType === '推广员' ? await getBrokerageUser(id) : await getUser(id);
+  if (!userData) {
-    if (userType === '推广员') {
-      userInfo.bindUser = user as MallBrokerageUserApi.BrokerageUser;
-    } else {
-      userInfo.user = user as MallBrokerageUserApi.BrokerageUser;
-    }
-
-    if (!user) {
-      ElMessage.warning(`${userType}不存在`);
-    }
-  } catch {
     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">
+  <Modal title="创建分销员" class="w-1/3">
-    <!-- TODO @霖：宽度不够，label 会折行 -->
+    <Form>
-    <div class="mr-2 flex items-center">
+      <template #userId>
-      分销员编号：
+        <div class="flex items-center gap-2">
-      <ElInput
+          <ElInput
-        v-model="formData.userId"
+            v-model="formData.userId"
-        placeholder="请输入推广员编号"
+            placeholder="请输入分销员编号"
-        class="mx-2 !w-52"
+            class="flex-1"
-      >
-        <template #append>
-          <ElButton
-            type="primary"
-            @click="handleGetUser(formData?.userId, '分销员')"
           >
-            <IconifyIcon icon="lucide:search" :size="15" />
+            <template #append>
-          </ElButton>
+              <ElButton
-        </template>
+                type="primary"
-      </ElInput>
+                @click="handleSearchUser(formData.userId, '分销员')"
-      上级推广人编号：
+              >
-      <ElInput
+                <IconifyIcon icon="lucide:search" :size="15" />
-        v-model="formData.bindUserId"
+              </ElButton>
-        placeholder="请输入推广员编号"
+            </template>
-        class="mx-2 !w-52"
+          </ElInput>
-      >
+        </div>
-        <template #append>
+      </template>
-          <ElButton
+      <template #bindUserId>
-            type="primary"
+        <div class="flex items-center gap-2">
-            @click="handleGetUser(formData?.bindUserId, '推广员')"
+          <ElInput
+            v-model="formData.bindUserId"
+            placeholder="请输入上级分销员编号"
+            class="flex-1"
           >
-            <IconifyIcon icon="lucide:search" :size="15" />
+            <template #append>
-          </ElButton>
+              <ElButton
-        </template>
+                type="primary"
-      </ElInput>
+                @click="handleSearchUser(formData.bindUserId, '上级分销员')"
-    </div>
+              >
+                <IconifyIcon icon="lucide:search" :size="15" />
+              </ElButton>
+            </template>
+          </ElInput>
+        </div>
+      </template>
+    </Form>
 
-    <div class="mt-4">
+    <!-- 分销员信息展示 -->
-      <!-- 展示分销员的信息 -->
+    <ElDivider v-if="user" />
-      <ElDescriptions
+    <ElDescriptions v-if="user" title="分销员信息" :column="1" border>
-        title="分销员信息"
+      <ElDescriptionsItem label="头像">
-        class="mt-4"
+        <ElAvatar :src="user?.avatar" />
-        v-if="userInfo.user"
+      </ElDescriptionsItem>
-        :column="1"
+      <ElDescriptionsItem label="昵称">
-        bordered
+        {{ user?.nickname }}
-      >
+      </ElDescriptionsItem>
-        <ElDescriptionsItem label="头像">
+    </ElDescriptions>
-          <ElAvatar :src="userInfo.user?.avatar" />
+    <!-- 上级推广员信息展示 -->
-        </ElDescriptionsItem>
+    <ElDivider v-if="bindUser" />
-        <ElDescriptionsItem label="昵称">
+    <ElDescriptions v-if="bindUser" title="上级推广员信息" :column="1" border>
-          {{ userInfo.user?.nickname }}
+      <ElDescriptionsItem label="头像">
-        </ElDescriptionsItem>
+        <ElAvatar :src="bindUser?.avatar" />
-      </ElDescriptions>
+      </ElDescriptionsItem>
-      <!-- 展示上级推广人的信息 -->
+      <ElDescriptionsItem label="昵称">
-      <ElDescriptions
+        {{ bindUser?.nickname }}
-        title="上级推广人信息"
+      </ElDescriptionsItem>
-        class="mt-4"
+      <ElDescriptionsItem label="分销资格">
-        v-if="userInfo.bindUser"
+        <DictTag
-        :column="1"
+          :type="DICT_TYPE.INFRA_BOOLEAN_STRING"
-        bordered
+          :value="bindUser?.brokerageEnabled"
-      >
+        />
-        <ElDescriptionsItem label="头像">
+      </ElDescriptionsItem>
-          <ElAvatar :src="userInfo.bindUser?.avatar" />
+      <ElDescriptionsItem label="成为分销员的时间">
-        </ElDescriptionsItem>
+        {{ formatDate(bindUser?.brokerageTime) }}
-        <ElDescriptionsItem label="昵称">
+      </ElDescriptionsItem>
-          {{ userInfo.bindUser?.nickname }}
+    </ElDescriptions>
-        </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>
   </Modal>
 </template>

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

@@ -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) {
+    await formApi.setValues(formData.value);
-      return;
+    const { valid } = await formApi.validate();
-    }
+    if (!valid) {
-    // 未查找到合适的上级
-    if (!bindUser.value) {
-      ElMessage.error('请先查询并确认推广人');
       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,59 +92,69 @@ const [Modal, modalApi] = useVbenModal({
   },
 });
 
-const bindUser = ref<MallBrokerageUserApi.BrokerageUser>();
+/** 绑定用户信息 */
+const bindUser = ref<MallBrokerageUserApi.BrokerageUser | undefined>();
 
-/** 查询推广员 */
+/** 查询分销员 */
-async function handleGetUser() {
+async function handleSearchUser(id: number, userType: string) {
-  if (!formData.value) {
+  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);
+  const userData = await getBrokerageUser(id);
-    if (!bindUser.value) {
+  if (!userData) {
-      ElMessage.warning('推广员不存在');
+    ElMessage.warning(`${userType}不存在`);
-    }
+    return;
-  } catch {
-    ElMessage.warning('推广员不存在');
   }
+  bindUser.value = userData as MallBrokerageUserApi.BrokerageUser;
 }
 </script>
 
 <template>
-  <Modal title="修改上级推广人" class="w-2/5">
+  <Modal title="修改上级推广人" class="w-1/3">
-    <div class="mr-2 flex items-center">
+    <Form>
-      推广员编号：
+      <template #bindUserId>
-      <ElInput
+        <div class="flex items-center gap-2">
-        v-model="formData.bindUserId"
+          <ElInput
-        placeholder="请输入推广员编号"
+            v-model="formData.bindUserId"
-        class="mx-2 !w-52"
+            placeholder="请输入上级推广员编号"
-      >
+            class="flex-1"
-        <template #append>
+          >
-          <ElButton type="primary" @click="handleGetUser">
+            <template #append>
-            <IconifyIcon icon="lucide:search" :size="15" />
+              <ElButton
-          </ElButton>
+                type="primary"
-        </template>
+                @click="handleSearchUser(formData.bindUserId, '上级推广员')"
-      </ElInput>
+              >
-    </div>
+                <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="推广资格">
+      <ElDescriptionsItem label="分销资格">
-        <ElTag v-if="bindUser.brokerageEnabled" type="success">有</ElTag>
+        <DictTag
-        <ElTag v-else>无</ElTag>
+          :type="DICT_TYPE.INFRA_BOOLEAN_STRING"
+          :value="bindUser?.brokerageEnabled"
+        />
       </ElDescriptionsItem>
-      <ElDescriptionsItem label="成为推广员的时间">
+      <ElDescriptionsItem label="成为分销员的时间">
-        {{ formatDate(bindUser.brokerageTime) }}
+        {{ formatDate(bindUser?.brokerageTime) }}
       </ElDescriptionsItem>
     </ElDescriptions>
   </Modal>