fix: 客户管理-fix

apps/web-ele/src/api/customer-manage/index.ts

@@ -1,5 +1,7 @@
 import type { CustomerEntity, PageConfig } from '@vben/types';
 
+import { adaptBackendRequest } from '@vben/utils';
+
 import { requestClient } from '#/api/request';
 
 interface CustomerPartialEntity
@@ -13,8 +15,21 @@ interface CustomerQueryParams extends CustomerPartialEntity, PageConfig {}
 /**
  * 客户信息_列表
  */
-export async function getCustomerListApi(data: CustomerQueryParams) {
+export async function getCustomerListApi(params: CustomerQueryParams) {
   return requestClient.post<any>('/api/query/list?pagevalue=17', {
-    ...data,
+    ...params,
   });
 }
+
+/**
+ * 客户信息_详情
+ */
+export async function getCustomerDetailApi(data: { usersid: string }) {
+  return requestClient.post<any>(
+    '/api/query/view?pagevalue=19',
+    {
+      ...adaptBackendRequest(data),
+    },
+    { formatData: true }, // 格式化返回数据
+  );
+}

apps/web-ele/src/views/customer-manage/form.vue

@@ -1,203 +1,189 @@
 <script lang="ts" setup>
 import { computed, ref } from 'vue';
 
-// import { useVbenDrawer } from '@vben/common-ui';
 import { useVbenModal } from '@vben/common-ui';
-import { $t } from '@vben/locales';
 
-// import { notification } from 'ant-design-vue';
 import { useVbenForm, z } from '#/adapter/form';
-// import { authorityList, useOrganizationStore, useUserStore } from '#/store';
-
-// const userStore = useUserStore();
-// const orgStore = useOrganizationStore();
+import { getCustomerDetailApi } from '#/api/customer-manage';
 
 const data = ref();
 
-const getTitle = computed(() =>
-  data.value?.create
-    ? $t('ui.modal.create', { moduleName: $t('page.user.moduleName') })
-    : $t('ui.modal.update', { moduleName: $t('page.user.moduleName') }),
-);
-// const isCreate = computed(() => data.value?.create);
+const getTitle = computed(() => (data.value?.create ? '新增客户' : '编辑客户'));
 
-const [BaseForm] = useVbenForm({
+const [BaseForm, baseFormApi] = useVbenForm({
   showDefaultActions: false,
   // 所有表单项共用，可单独在表单内覆盖
   commonConfig: {
+    labelWidth: 120,
     // 所有表单项
     componentProps: {
       class: 'w-full',
     },
   },
   schema: [
+    // { title: '用户名称', field: 'usersname' },
+    // { title: '用户性质', field: 'usersnature' },
+    // { title: '用户证件号码', field: 'usersidcardnumber' },
+    // { title: '用户开户银行名称', field: 'usersbankname' },
+    // { title: '用户开户银行账号', field: 'usersbanknumber' },
+    // { title: '用户手机号', field: 'usersphone' },
+    // { title: '用户邮箱', field: 'usersemail' },
+    // { title: '用户地址', field: 'usersaddress' },
+    // { title: '用户联系手机号', field: 'userscontactphone' },
+    // { title: '用户联系邮箱', field: 'userscontactemail' },
+    // { title: '用户联系地址', field: 'userscontactaddress' },
     {
       component: 'Input',
-      fieldName: 'userName',
-      label: $t('page.user.table.userName'),
+      fieldName: 'usersname',
+      label: '用户名称',
       componentProps: {
-        placeholder: $t('ui.placeholder.input'),
+        placeholder: '请输入用户名称',
         allowClear: true,
       },
-      rules: z.string().min(1, { message: $t('ui.formRules.required') }),
+      rules: z.string().min(1, { message: '请输入用户名称' }),
     },
-    // {
-    //   component: 'VbenInputPassword',
-    //   fieldName: 'password',
-    //   label: '密码',
-    //   componentProps: {
-    //     passwordStrength: true,
-    //     placeholder: $t('ui.placeholder.input'),
-    //   },
-    //   rules: 'required',
-    // },
     {
-      component: 'Select',
-      fieldName: 'authority',
-      label: $t('page.user.table.authority'),
+      component: 'Input',
+      fieldName: 'usersnature',
+      label: '用户性质',
       componentProps: {
-        placeholder: $t('ui.placeholder.select'),
-        // options: authorityList,
-        options: [],
+        placeholder: '请输入用户性质',
+        allowClear: true,
       },
-      rules: 'selectRequired',
+      rules: z.number().min(1, { message: '请输入用户性质' }),
     },
     {
-      component: 'ApiTreeSelect',
-      fieldName: 'orgId',
-      label: $t('page.user.table.orgId'),
+      component: 'Input',
+      fieldName: 'usersidcardnumber',
+      label: '用户证件号码',
       componentProps: {
-        placeholder: $t('ui.placeholder.select'),
-        api: async () => {
-          // const result = await orgStore.listOrganization(true);
-          // return result.items;
-        },
-        numberToString: true,
-        childrenField: 'children',
-        labelField: 'name',
-        valueField: 'id',
-        // afterFetch: (data: any) => {
-        //   return data.map((item: any) => ({
-        //     label: item.name,
-        //     value: item.id,
-        //   }));
-        // },
+        placeholder: '请输入用户证件号码',
+        allowClear: true,
       },
-      rules: 'selectRequired',
+      rules: z.string().min(1, { message: '请输入用户证件号码' }),
     },
     {
       component: 'Input',
-      fieldName: 'nickName',
-      label: $t('page.user.table.nickName'),
+      fieldName: 'usersbankname',
+      label: '用户开户银行名称',
       componentProps: {
-        placeholder: $t('ui.placeholder.input'),
+        placeholder: '请输入用户开户银行名称',
         allowClear: true,
       },
-      rules: 'required',
+      rules: z.string().min(1, { message: '请输入用户开户银行名称' }),
     },
     {
       component: 'Input',
-      fieldName: 'email',
-      label: $t('page.user.table.email'),
+      fieldName: 'usersbanknumber',
+      label: '用户开户银行账号',
       componentProps: {
-        placeholder: $t('ui.placeholder.input'),
+        placeholder: '请输入用户开户银行账号',
         allowClear: true,
       },
-      rules: 'required',
+      rules: z.string().min(1, { message: '请输入用户开户银行账号' }),
+    },
+    {
+      component: 'Input',
+      fieldName: 'usersphone',
+      label: '用户手机号',
+      componentProps: {
+        placeholder: '请输入用户手机号',
+        allowClear: true,
+      },
+      rules: z.string().min(1, { message: '请输入用户手机号' }),
+    },
+    {
+      component: 'Input',
+      fieldName: 'usersemail',
+      label: '用户邮箱',
+      componentProps: {
+        placeholder: '请输入用户邮箱',
+        allowClear: true,
+      },
+      rules: z.string().min(1, { message: '请输入用户邮箱' }),
+    },
+    {
+      component: 'Input',
+      fieldName: 'usersaddress',
+      label: '用户地址',
+      componentProps: {
+        placeholder: '请输入用户地址',
+        allowClear: true,
+      },
+      rules: z.string().min(1, { message: '请输入用户地址' }),
+    },
+    {
+      component: 'Input',
+      fieldName: 'userscontactphone',
+      label: '用户联系手机号',
+      componentProps: {
+        placeholder: '请输入用户联系手机号',
+        allowClear: true,
+      },
+      rules: z.string().min(1, { message: '请输入用户联系手机号' }),
+    },
+    {
+      component: 'Input',
+      fieldName: 'userscontactemail',
+      label: '用户联系邮箱',
+      componentProps: {
+        placeholder: '请输入用户联系邮箱',
+        allowClear: true,
+      },
+      rules: z.string().min(1, { message: '请输入用户联系邮箱' }),
     },
-
     {
       component: 'Input',
-      fieldName: 'remark',
-      label: $t('ui.table.remark'),
+      fieldName: 'userscontactaddress',
+      label: '用户联系地址',
       componentProps: {
-        placeholder: $t('ui.placeholder.input'),
+        placeholder: '请输入用户联系地址',
         allowClear: true,
-        type: 'textarea',
       },
+      rules: z.string().min(1, { message: '请输入用户联系地址' }),
     },
   ],
 });
 
-// const [Drawer, drawerApi] = useVbenDrawer({
-//   onCancel() {
-//     drawerApi.close();
-//   },
-
-//   async onConfirm() {
-//     console.log('onConfirm');
-
-//     // 校验输入的数据
-//     const validate = await baseFormApi.validate();
-//     if (!validate.valid) {
-//       return;
-//     }
-
-//     // 加载条设置为加载状态
-//     setLoading(true);
-
-//     // 获取表单数据
-//     const values = await baseFormApi.getValues();
-
-//     console.log(getTitle.value, Object.keys(values));
-
-//     try {
-//       // await (data.value?.create
-//       //   ? userStore.createUser(values)
-//       //   : userStore.updateUser(data.value.row.id, values));
-//       // notification.success({
-//       //   message: data.value?.create
-//       //     ? $t('ui.notification.create_success')
-//       //     : $t('ui.notification.update_success'),
-//       // });
-//     } catch {
-//       // notification.error({
-//       //   message: data.value?.create
-//       //     ? $t('ui.notification.create_failed')
-//       //     : $t('ui.notification.update_failed'),
-//       // });
-//     } finally {
-//       // 关闭窗口
-//       drawerApi.close();
-//       setLoading(false);
-//     }
-//   },
-
-//   onOpenChange(isOpen: boolean) {
-//     if (isOpen) {
-//       // 获取传入的数据
-//       data.value = drawerApi.getData<Record<string, any>>();
-
-//       // 为表单赋值
-//       if (data.value.row !== undefined) {
-//         data.value.row.orgId = data.value?.row?.orgId.toString();
-//         baseFormApi.setValues(data.value?.row);
-//       }
-
-//       setLoading(false);
-
-//       console.log('onOpenChange', data.value, data.value?.create);
-//     }
-//   },
-// });
-
 const [Modal, modalApi] = useVbenModal({
   onCancel() {
     modalApi.close();
   },
-  onConfirm() {
-    // console.log('onConfirm');
+  async onConfirm() {
+    // 校验输入的数据
+    const validate = await baseFormApi.validate();
+    if (!validate.valid) {
+      return;
+    }
+
+    modalApi.close();
+    // const values = await baseFormApi.getValues();
+
+    // console.log(Object.keys(values));
   },
-  onOpenChange(isOpen) {
+  async onOpenChange(isOpen) {
     if (isOpen) {
-      // handleUpdate(10);
+      data.value = modalApi.getData();
+
+      if (data.value.create) {
+        return;
+      }
+
+      try {
+        modalApi.setState({ loading: true });
+        const detailData = await getCustomerDetailApi({
+          usersid: data.value.row.usersid,
+        });
+
+        baseFormApi.setValues(detailData);
+      } catch {
+        // console.log(error);
+      }
+
+      modalApi.setState({ loading: false });
     }
   },
 });
-
-// function setLoading(loading: boolean) {
-//   modalApi.setState({ confirmLoading: loading });
-// }
 </script>
 
 <template>

apps/web-ele/src/views/customer-manage/index.vue

@@ -9,7 +9,6 @@ import { MdiDetail, MdiEdit } from '@vben/icons';
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
 import { getCustomerListApi } from '#/api/customer-manage';
 import { $t } from '#/locales';
-import { router } from '#/router';
 
 import CustomerForm from './form.vue';
 
@@ -99,74 +98,26 @@ const gridOptions: VxeGridProps<any> = {
 const [Grid] = useVbenVxeGrid({ gridOptions, formOptions });
 
 const [Modal, modalApi] = useVbenModal({
-  title: $t('abp.oauth.twoFactor.title'),
   fullscreenButton: false,
   closeOnClickModal: false,
   closeOnPressEscape: false,
   connectedComponent: CustomerForm,
-  // onConfirm: onLogin,
-  async onOpenChange(isOpen) {
-    // eslint-disable-next-line no-console
-    console.log('onOpenChange', isOpen);
-    // if (isOpen) {
-    //   const state = modalApi.getData<TwoFactorState>();
-    //   formModel.value = state;
-    //   const { items } = await getTwoFactorProvidersApi({
-    //     userId: state.userId,
-    //   });
-    //   twoFactorProviders.value = items;
-    // }
-  },
 });
 
-// const [Drawer, drawerApi] = useVbenDrawer({
-//   // 连接抽离的组件
-//   connectedComponent: CustomerForm,
-// });
-
-/* 打开模态窗口 */
-// function openDrawer(create: boolean, row?: any) {
-// drawerApi.setData({
-//   create,
-//   row,
-// });
-
-// drawerApi.open();
-// }
-
 /* 创建 */
 function handleCreate() {
-  // console.log('创建');
-  // openDrawer(true);
-  modalApi.open();
+  modalApi.setData({ create: true }).open();
 }
 
 /* 编辑 */
-// eslint-disable-next-line unused-imports/no-unused-vars
 function handleEdit(row: any) {
-  // console.log('编辑', row);
-  // openDrawer(false, row);
-  modalApi.open();
+  modalApi.setData({ row }).open();
 }
 
-/* 删除 */
-// async function handleDelete(row: any) {
-//   console.log('删除', row);
-
-//   try {
-//     // await userStore.deleteUser(row.id);
-
-//     // ElMessage.success($t('ui.notification.delete_success'));
-
-//     await gridApi.reload();
-//   } catch {
-//     // ElMessage.error($t('ui.notification.delete_failed'));
-//   }
-// }
-
 /* 详情 */
 function handleDetail(row: any) {
-  router.push(`/system/users/detail/${row.userName}`);
+  modalApi.setData({ row }).open();
+  // router.push(`/system/users/detail/${row.userName}`);
 }
 </script>
 
@@ -181,13 +132,13 @@ function handleDetail(row: any) {
           round
           @click="() => handleDetail(row)"
           :icon="MdiDetail"
-          class="!p-8px"
+          class="!p-2"
         />
         <el-button
           round
           @click="() => handleEdit(row)"
           :icon="MdiEdit"
-          class="!p-8px"
+          class="!p-2"
         />
       </template>
     </Grid>

packages/effects/request/src/request-client/preset-interceptors.ts

@@ -2,7 +2,7 @@ import type { RequestClient } from './request-client';
 import type { MakeErrorMessageFn, ResponseInterceptorConfig } from './types';
 
 import { $t } from '@vben/locales';
-import { isFunction } from '@vben/utils';
+import { formatBackendJson, isFunction } from '@vben/utils';
 
 import axios from 'axios';
 
@@ -22,6 +22,18 @@ export const defaultResponseInterceptor = ({
     fulfilled: (response) => {
       const { config, data: responseData, status, headers } = response;
 
+      // 格式化请求数据
+      if ((config as any).formatData) {
+        if (isFunction(dataField)) {
+          // TODO
+        } else {
+          const Data = responseData[dataField];
+          if (Data) {
+            responseData[dataField] = formatBackendJson(Data);
+          }
+        }
+      }
+
       // responseContentType
       if (['image/jpeg'].includes(headers['content-type'])) {
         return responseData;

packages/effects/request/src/request-client/request-client.ts

@@ -10,6 +10,10 @@ import { FileDownloader } from './modules/downloader';
 import { InterceptorManager } from './modules/interceptor';
 import { FileUploader } from './modules/uploader';
 
+export interface RequestClientCustomConfig extends RequestClientConfig {
+  formatData?: boolean; // 是否格式化请求数据
+}
+
 class RequestClient {
   public addRequestInterceptor: InterceptorManager['addRequestInterceptor'];
 
@@ -64,7 +68,7 @@ class RequestClient {
    */
   public delete<T = any>(
     url: string,
-    config?: RequestClientConfig,
+    config?: RequestClientCustomConfig,
   ): Promise<T> {
     return this.request<T>(url, { ...config, method: 'DELETE' });
   }
@@ -72,7 +76,10 @@ class RequestClient {
   /**
    * GET请求方法
    */
-  public get<T = any>(url: string, config?: RequestClientConfig): Promise<T> {
+  public get<T = any>(
+    url: string,
+    config?: RequestClientCustomConfig,
+  ): Promise<T> {
     return this.request<T>(url, { ...config, method: 'GET' });
   }
 
@@ -82,7 +89,7 @@ class RequestClient {
   public post<T = any>(
     url: string,
     data?: any,
-    config?: RequestClientConfig,
+    config?: RequestClientCustomConfig,
   ): Promise<T> {
     return this.request<T>(url, { ...config, data, method: 'POST' });
   }
@@ -93,7 +100,7 @@ class RequestClient {
   public put<T = any>(
     url: string,
     data?: any,
-    config?: RequestClientConfig,
+    config?: RequestClientCustomConfig,
   ): Promise<T> {
     return this.request<T>(url, { ...config, data, method: 'PUT' });
   }
@@ -103,7 +110,7 @@ class RequestClient {
    */
   public async request<T>(
     url: string,
-    config: RequestClientConfig,
+    config: RequestClientCustomConfig,
   ): Promise<T> {
     try {
       const response: AxiosResponse<T> = await this.instance({

packages/utils/src/helpers/index.ts

@@ -7,3 +7,43 @@ export * from './merge-route-modules';
 export * from './reset-routes';
 export * from './storage';
 export * from './unmount-global-loading';
+
+/**
+ * 适配后端接口请求
+ * 将 {key: value} 转换为 {`${key}.value`: value}
+ */
+export const adaptBackendRequest = (obj: Record<string, any>) => {
+  const result: Record<string, any> = {};
+  for (const key in obj) {
+    result[`${key}.value`] = obj[key];
+  }
+  return result;
+};
+
+/**
+ * 后端json数据格式化
+ * {
+      "usersid": {
+          "label": "用户id",
+          "disable": false,
+          "value": "1"
+      },
+      "usersname": {
+          "label": "用户名称",
+          "disable": false,
+          "value": "123"
+      },
+   }
+   转换为
+   {
+      usersid: '1',
+      usersname: '123',
+   }
+ */
+export const formatBackendJson = (obj: Record<string, any>) => {
+  const result: Record<string, any> = {};
+  for (const key in obj) {
+    result[key] = obj[key].value;
+  }
+  return result;
+};