refactor：优化 tenant 租户的实现

apps/web-antd/src/api/system/tenant-package/index.ts

@@ -2,10 +2,9 @@ import type { PageParam, PageResult } from '@vben/request';
 
 import { requestClient } from '#/api/request';
 
+// TODO @芋艿：
 export namespace SystemTenantPackageApi {
-  /**
-   * 租户套餐信息
-   */
+  /** 租户套餐信息 */
   export interface SystemTenantPackage {
     id: number;
     name: string;
@@ -19,13 +18,11 @@ export namespace SystemTenantPackageApi {
   }
 }
 
-/**
- * 租户套餐列表
- */
+/** 租户套餐列表 */
 export function getTenantPackagePage(params: PageParam) {
-  return requestClient.get<
-    PageResult<SystemTenantPackageApi.SystemTenantPackage>
-  >('/system/tenant-package/page', params);
+  return requestClient.get<PageResult<SystemTenantPackageApi.SystemTenantPackage>>('/system/tenant-package/page', {
+    params
+  });
 }
 
 /** 查询租户套餐详情 */
@@ -34,16 +31,12 @@ export function getTenantPackage(id: number) {
 }
 
 /** 新增租户套餐 */
-export function createTenantPackage(
-  data: SystemTenantPackageApi.SystemTenantPackage,
-) {
+export function createTenantPackage(data: SystemTenantPackageApi.SystemTenantPackage) {
   return requestClient.post('/system/TenantPackage/create', data);
 }
 
 /** 修改租户套餐 */
-export function updateTenantPackage(
-  data: SystemTenantPackageApi.SystemTenantPackage,
-) {
+export function updateTenantPackage(data: SystemTenantPackageApi.SystemTenantPackage) {
   return requestClient.put('/system/TenantPackage/update', data);
 }
 
@@ -52,12 +45,14 @@ export function deleteTenantPackage(id: number) {
   return requestClient.delete(`/system/TenantPackage/delete?id=${id}`);
 }
 
-// 获取租户套餐精简信息列表
+/** 获取租户套餐精简信息列表 */
 export function getTenantPackageList() {
-  return requestClient.get('/system/tenant-package/get-simple-list');
+  return requestClient.get<SystemTenantPackageApi.SystemTenantPackage[]>('/system/tenant-package/get-simple-list');
 }
 
 /** 导出租户套餐 */
 export function exportTenantPackage(params: any) {
-  return requestClient.download('/system/TenantPackage/export', params);
+  return requestClient.download('/system/TenantPackage/export', {
+    params
+  });
 }

apps/web-antd/src/api/system/tenant/index.ts

@@ -1,11 +1,9 @@
-import type { PageParam } from '@vben/request';
+import type { PageParam, PageResult } from '@vben/request';
 
 import { requestClient } from '#/api/request';
 
 export namespace SystemTenantApi {
-  /**
-   * 租户信息
-   */
+  /** 租户信息 */
   export interface SystemTenant {
     id?: number;
     name: string;
@@ -19,25 +17,19 @@ export namespace SystemTenantApi {
   }
 }
 
-/**
- * 租户列表
- */
+/** 租户列表 */
 export function getTenantPage(params: PageParam) {
-  return requestClient.get('/system/tenant/page', { params });
+  return requestClient.get<PageResult<SystemTenantApi.SystemTenant>>('/system/tenant/page', { params });
 }
 
 /** 获取租户精简信息列表 */
 export function getSimpleTenantList() {
-  return requestClient.get<SystemTenantApi.SystemTenant[]>(
-    '/system/tenant/simple-list',
-  );
+  return requestClient.get<SystemTenantApi.SystemTenant[]>('/system/tenant/simple-list');
 }
 
 /** 查询租户详情 */
 export function getTenant(id: number) {
-  return requestClient.get<SystemTenantApi.SystemTenant>(
-    `/system/tenant/get?id=${id}`,
-  );
+  return requestClient.get<SystemTenantApi.SystemTenant>(`/system/tenant/get?id=${id}`,);
 }
 
 /** 新增租户 */

apps/web-antd/src/views/system/tenant/data.ts

@@ -3,11 +3,11 @@ import type { OnActionClickFn, VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { SystemTenantApi } from '#/api/system/tenant';
 
 import { z } from '#/adapter/form';
-import { getTenantPackageList } from '#/api/system/tenantPackage';
-import { CommonStatusEnum } from '#/utils/constants';
 import { DICT_TYPE, getDictOptions } from '#/utils/dict';
+import { getTenantPackageList } from '#/api/system/tenant-package';
+import { CommonStatusEnum } from '#/utils/constants';
 
-/** 新增、修改表单 */
+/** 新增/修改的表单 */
 export function useFormSchema(): VbenFormSchema[] {
   return [
     {
@@ -19,16 +19,15 @@ export function useFormSchema(): VbenFormSchema[] {
       },
     },
     {
-      component: 'Input',
       fieldName: 'name',
       label: '租户名称',
+      component: 'Input',
       rules: 'required',
     },
     {
-      component: 'ApiSelect',
       fieldName: 'packageId',
       label: '租户套餐',
-      rules: 'required',
+      component: 'ApiSelect',
       componentProps: {
         api: () => getTenantPackageList(),
         class: 'w-full',
@@ -36,22 +35,23 @@ export function useFormSchema(): VbenFormSchema[] {
         valueField: 'id',
         placeholder: '请选择租户套餐',
       },
-    },
-    {
-      component: 'Input',
-      fieldName: 'contactName',
-      label: '联系人',
       rules: 'required',
     },
     {
+      fieldName: 'contactName',
+      label: '联系人',
       component: 'Input',
-      fieldName: 'contactMobile',
-      label: '联系手机',
+      rules: 'required',
     },
     {
+      fieldName: 'contactMobile',
+      label: '联系手机',
       component: 'Input',
+    },
+    {
       label: '用户名称',
       fieldName: 'username',
+      component: 'Input',
       rules: 'required',
       dependencies: {
         triggerFields: ['id'],
@@ -69,31 +69,30 @@ export function useFormSchema(): VbenFormSchema[] {
       },
     },
     {
-      component: 'InputNumber',
       label: '账号额度',
       fieldName: 'accountCount',
-      rules: 'required',
-      defaultValue: 0,
+      component: 'InputNumber',
       componentProps: {
         class: 'w-full',
+        placeholder: '请输入账号额度',
       },
+      rules: 'required',
     },
     {
-      component: 'DatePicker',
       label: '过期时间',
       fieldName: 'expireTime',
-      rules: 'required',
+      component: 'DatePicker',
       componentProps: {
-        showTime: true,
-        format: 'YYYY-MM-DD HH:mm:ss',
+        format: 'YYYY-MM-DD',
         valueFormat: 'x',
         class: 'w-full',
       },
+      rules: 'required',
     },
     {
-      component: 'Input',
       label: '绑定域名',
       fieldName: 'website',
+      component: 'Input',
       rules: 'required',
     },
     {
@@ -150,11 +149,15 @@ export function useGridFormSchema(): VbenFormSchema[] {
       fieldName: 'createTime',
       label: '创建时间',
       component: 'RangePicker',
+      componentProps: {
+        allowClear: true,
+      }
     },
   ];
 }
 
 /** 列表的字段 */
+const tenantPackageList = await getTenantPackageList();
 export function useGridColumns<T = SystemTenantApi.SystemTenant>(
   onActionClick: OnActionClickFn<T>,
 ): VxeTableGridOptions['columns'] {
@@ -162,17 +165,22 @@ export function useGridColumns<T = SystemTenantApi.SystemTenant>(
     {
       field: 'id',
       title: '租户编号',
-      minWidth: 200,
+      minWidth: 100,
     },
     {
       field: 'name',
       title: '租户名',
-      minWidth: 200,
+      minWidth: 180,
     },
     {
       field: 'packageId',
       title: '租户套餐',
-      minWidth: 200,
+      minWidth: 180,
+      formatter: (row) => {
+        const packageId = row.cellValue;
+        return packageId === 0 ? '系统租户' :
+          tenantPackageList.find((tenantPackage) => tenantPackage.id === packageId)?.name || '-';
+      }
     },
     {
       field: 'contactName',
@@ -182,7 +190,7 @@ export function useGridColumns<T = SystemTenantApi.SystemTenant>(
     {
       field: 'contactMobile',
       title: '联系手机',
-      minWidth: 200,
+      minWidth: 180,
     },
     {
       field: 'accountCount',

apps/web-antd/src/views/system/tenant/index.vue

@@ -1,21 +1,18 @@
 <script lang="ts" setup>
-import type {
-  OnActionClickParams,
-  VxeTableGridOptions,
-} from '#/adapter/vxe-table';
+import type { OnActionClickParams, VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { SystemTenantApi } from '#/api/system/tenant';
 
 import { Page, useVbenModal } from '@vben/common-ui';
-
 import { Button, message } from 'ant-design-vue';
+import { Plus, Download } from '@vben/icons';
+import Form from './modules/form.vue';
 
-import { useVbenVxeGrid } from '#/adapter/vxe-table';
-import { deleteTenant, exportTenant, getTenantPage } from '#/api/system/tenant';
 import { $t } from '#/locales';
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { getTenantPage, deleteTenant, exportTenant } from '#/api/system/tenant';
 import { downloadByData } from '#/utils/download';
 
 import { useGridColumns, useGridFormSchema } from './data';
-import Form from './modules/form.vue';
 
 const [FormModal, formModalApi] = useVbenModal({
   connectedComponent: Form,
@@ -68,20 +65,21 @@ function onActionClick({
   row,
 }: OnActionClickParams<SystemTenantApi.SystemTenant>) {
   switch (code) {
-    case 'delete': {
-      onDelete(row);
-      break;
-    }
     case 'edit': {
       onEdit(row);
       break;
     }
+    case 'delete': {
+      onDelete(row);
+      break;
+    }
   }
 }
 
 const [Grid, gridApi] = useVbenVxeGrid({
   formOptions: {
     schema: useGridFormSchema(),
+    // TODO @芋艿：时间筛选，后续处理；
   },
   gridOptions: {
     columns: useGridColumns(onActionClick),

apps/web-antd/src/views/system/tenant/modules/form.vue

@@ -1,15 +1,13 @@
 <script lang="ts" setup>
 import type { SystemTenantApi } from '#/api/system/tenant';
 
-import { computed, ref } from 'vue';
-
 import { useVbenModal } from '@vben/common-ui';
-
 import { message } from 'ant-design-vue';
 
+import { $t } from '#/locales';
+import { computed, ref } from 'vue';
 import { useVbenForm } from '#/adapter/form';
 import { createTenant, getTenant, updateTenant } from '#/api/system/tenant';
-import { $t } from '#/locales';
 
 import { useFormSchema } from '../data';