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

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

@@ -150,3 +150,21 @@ export function useGridColumns<T = MallBrokerageUserApi.BrokerageUser>(
     },
   ];
 }
+
+/** 创建分销员表单配置 */
+export function useCreateFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'userId',
+      label: '分销员编号',
+      component: 'InputSearch',
+      rules: 'required',
+    },
+    {
+      fieldName: 'bindUserId',
+      label: '上级推广员编号',
+      component: 'InputSearch',
+      rules: 'required',
+    },
+  ];
+}

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

@@ -15,27 +15,31 @@ import {
 } from '#/api/mall/trade/brokerage/user';
 
 import { useGridColumns, useGridFormSchema } from './data';
+import CreateForm from './modules/create-form.vue';
 import BrokerageOrderListModal from './modules/order-list-modal.vue';
-import BrokerageUserCreateForm from './modules/user-create-form.vue';
 import BrokerageUserListModal from './modules/user-list-modal.vue';
 import BrokerageUserUpdateForm from './modules/user-update-form.vue';
 
 defineOptions({ name: 'TradeBrokerageUser' });
 
-const [OrderListModal, orderListModalApi] = useVbenModal({
+const [CreateFormModal, createFormModalApi] = useVbenModal({
-  connectedComponent: BrokerageOrderListModal,
+  connectedComponent: CreateForm,
-});
+  destroyOnClose: true,
-
-const [UserCreateModal, userCreateModalApi] = useVbenModal({
-  connectedComponent: BrokerageUserCreateForm,
-});
-
-const [UserListModal, userListModalApi] = useVbenModal({
-  connectedComponent: BrokerageUserListModal,
 });
 
 const [UserUpdateModal, userUpdateModalApi] = useVbenModal({
   connectedComponent: BrokerageUserUpdateForm,
+  destroyOnClose: true,
+});
+
+const [OrderListModal, orderListModalApi] = useVbenModal({
+  connectedComponent: BrokerageOrderListModal,
+  destroyOnClose: true,
+});
+
+const [UserListModal, userListModalApi] = useVbenModal({
+  connectedComponent: BrokerageUserListModal,
+  destroyOnClose: true,
 });
 
 /** 刷新表格 */
@@ -43,6 +47,16 @@ function handleRefresh() {
   gridApi.query();
 }
 
+/** 创建分销员 */
+function handleCreate() {
+  createFormModalApi.open();
+}
+
+/** 修改分销员 */
+function handleOpenUpdateForm(row: MallBrokerageUserApi.BrokerageUser) {
+  userUpdateModalApi.setData(row).open();
+}
+
 /** 打开推广人列表 */
 function handleOpenUserList(row: MallBrokerageUserApi.BrokerageUser) {
   userListModalApi.setData(row).open();
@@ -53,16 +67,6 @@ function handleOpenOrderList(row: MallBrokerageUserApi.BrokerageUser) {
   orderListModalApi.setData(row).open();
 }
 
-/** 打开表单：修改上级推广人 */
-function handleOpenUpdateForm(row: MallBrokerageUserApi.BrokerageUser) {
-  userUpdateModalApi.setData(row).open();
-}
-
-/** 创建分销员 */
-function handleCreate() {
-  userCreateModalApi.open();
-}
-
 /** 清除上级推广人 */
 async function handleClearBindUser(row: MallBrokerageUserApi.BrokerageUser) {
   const hideLoading = message.loading({
@@ -149,6 +153,14 @@ const [Grid, gridApi] = useVbenVxeGrid({
       />
     </template>
 
+    <!-- 创建分销员 -->
+    <CreateFormModal @success="handleRefresh" />
+    <!-- 修改分销员 -->
+    <UserUpdateModal @success="handleRefresh" />
+    <!-- 推广人列表 -->
+    <UserListModal />
+    <!-- 推广订单列表 -->
+    <OrderListModal />
     <Grid table-title="分销用户列表">
       <template #toolbar-tools>
         <TableAction
@@ -195,14 +207,5 @@ const [Grid, gridApi] = useVbenVxeGrid({
         />
       </template>
     </Grid>
-
-    <!-- 修改上级推广人表单 -->
-    <UserUpdateModal @success="handleRefresh" />
-    <!-- 推广人列表 -->
-    <UserListModal />
-    <!-- 推广订单列表 -->
-    <OrderListModal />
-    <!-- 创建分销员 -->
-    <UserCreateModal @success="handleRefresh" />
   </Page>
 </template>

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

@@ -0,0 +1,165 @@
+<script lang="ts" setup>
+import type { MallBrokerageUserApi } from '#/api/mall/trade/brokerage/user';
+
+import { ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+import { $t } from '@vben/locales';
+import { formatDate, isEmpty } from '@vben/utils';
+
+import {
+  Avatar,
+  Descriptions,
+  DescriptionsItem,
+  Divider,
+  InputSearch,
+  message,
+  Tag,
+} from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+import {
+  createBrokerageUser,
+  getBrokerageUser,
+} from '#/api/mall/trade/brokerage/user';
+import { getUser } from '#/api/member/user';
+
+import { useCreateFormSchema } from '../data';
+
+defineOptions({ name: 'BrokerageUserCreateForm' });
+
+const emit = defineEmits(['success']);
+
+const formData = ref<any>({
+  userId: undefined,
+  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() {
+    await formApi.setValues(formData.value);
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
+    modalApi.lock();
+    // 提交表单
+    try {
+      await createBrokerageUser(formData.value);
+      // 关闭并提示
+      await modalApi.close();
+      emit('success');
+      message.success($t('ui.actionMessage.operationSuccess'));
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  onOpenChange: async (isOpen: boolean) => {
+    if (!isOpen) {
+      return;
+    }
+    // 重置表单
+    formData.value = {
+      userId: undefined,
+      bindUserId: undefined,
+    };
+    await formApi.setValues(formData.value);
+    // 重置用户信息
+    user.value = undefined;
+    bindUser.value = undefined;
+  },
+});
+
+/** 用户信息 */
+const user = ref<MallBrokerageUserApi.BrokerageUser | undefined>();
+const bindUser = ref<MallBrokerageUserApi.BrokerageUser | undefined>();
+
+/** 查询分销员和分销员 */
+async function handleSearchUser(id: number, userType: string) {
+  if (isEmpty(id)) {
+    message.warning(`请先输入${userType}编号后重试！！！`);
+    return;
+  }
+  if (
+    userType === '分销员' &&
+    formData.value?.bindUserId === formData.value?.userId
+  ) {
+    message.error('不能绑定自己为推广员');
+    return;
+  }
+
+  const userData =
+    userType === '分销员' ? await getUser(id) : await getBrokerageUser(id);
+  if (!userData) {
+    message.warning(`${userType}不存在`);
+    return;
+  }
+  if (userType === '分销员') {
+    user.value = userData as MallBrokerageUserApi.BrokerageUser;
+  } else {
+    bindUser.value = userData as MallBrokerageUserApi.BrokerageUser;
+  }
+}
+</script>
+
+<template>
+  <Modal title="创建分销员" class="w-1/3">
+    <Form>
+      <template #userId>
+        <InputSearch
+          v-model:value="formData.userId"
+          placeholder="请输入分销员编号"
+          @search="handleSearchUser(formData.userId, '分销员')"
+        />
+      </template>
+      <template #bindUserId>
+        <InputSearch
+          v-model:value="formData.bindUserId"
+          placeholder="请输入上级分销员编号"
+          @search="handleSearchUser(formData.bindUserId, '上级分销员')"
+        />
+      </template>
+    </Form>
+
+    <!-- 分销员信息展示 -->
+    <Divider v-if="user" />
+    <Descriptions v-if="user" title="分销员信息" :column="1" bordered>
+      <DescriptionsItem label="头像">
+        <Avatar :src="user?.avatar" />
+      </DescriptionsItem>
+      <DescriptionsItem label="昵称">
+        {{ user?.nickname }}
+      </DescriptionsItem>
+    </Descriptions>
+    <!-- 上级推广员信息展示 -->
+    <Divider v-if="bindUser" />
+    <Descriptions v-if="bindUser" title="上级推广员信息" :column="1" bordered>
+      <DescriptionsItem label="头像">
+        <Avatar :src="bindUser?.avatar" />
+      </DescriptionsItem>
+      <DescriptionsItem label="昵称">
+        {{ bindUser?.nickname }}
+      </DescriptionsItem>
+      <DescriptionsItem label="分销资格">
+        <Tag v-if="bindUser?.brokerageEnabled" color="success"> 有 </Tag>
+        <Tag v-else>无</Tag>
+      </DescriptionsItem>
+      <DescriptionsItem label="成为分销员的时间">
+        {{ formatDate(bindUser?.brokerageTime) }}
+      </DescriptionsItem>
+    </Descriptions>
+  </Modal>
+</template>