feat: 客户管理调试

.vscode/settings.json

@@ -62,7 +62,7 @@
     "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
   "[vue]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
+    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
   },
   // extensions
   "extensions.ignoreRecommendations": true,

apps/web-ele/.env

@@ -1,5 +1,5 @@
 # 应用标题
-VITE_APP_TITLE=Samool Admin
+VITE_APP_TITLE=达川农机局优惠劵平台
 
 # 应用命名空间，用于缓存、store等功能的前缀，确保隔离
 VITE_APP_NAMESPACE=samool-admin

apps/web-ele/components.d.ts

@@ -7,6 +7,7 @@ export {};
 /* prettier-ignore */
 declare module 'vue' {
   export interface GlobalComponents {
+    ElButton: typeof import('element-plus/es')['ElButton']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
   }

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

@@ -0,0 +1,20 @@
+import type { CustomerEntity, PageConfig } from '@vben/types';
+
+import { requestClient } from '#/api/request';
+
+interface CustomerPartialEntity
+  extends Partial<Omit<CustomerEntity, 'usersname' | 'usersphone'>> {
+  usersphone?: string;
+  usersname?: string;
+}
+
+interface CustomerQueryParams extends CustomerPartialEntity, PageConfig {}
+
+/**
+ * 客户信息_列表
+ */
+export async function getCustomerListApi(data: CustomerQueryParams) {
+  return requestClient.post<any>('/api/query/list?pagevalue=17', {
+    ...data,
+  });
+}

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

@@ -0,0 +1,207 @@
+<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();
+
+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 [BaseForm] = useVbenForm({
+  showDefaultActions: false,
+  // 所有表单项共用，可单独在表单内覆盖
+  commonConfig: {
+    // 所有表单项
+    componentProps: {
+      class: 'w-full',
+    },
+  },
+  schema: [
+    {
+      component: 'Input',
+      fieldName: 'userName',
+      label: $t('page.user.table.userName'),
+      componentProps: {
+        placeholder: $t('ui.placeholder.input'),
+        allowClear: true,
+      },
+      rules: z.string().min(1, { message: $t('ui.formRules.required') }),
+    },
+    // {
+    //   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'),
+      componentProps: {
+        placeholder: $t('ui.placeholder.select'),
+        // options: authorityList,
+        options: [],
+      },
+      rules: 'selectRequired',
+    },
+    {
+      component: 'ApiTreeSelect',
+      fieldName: 'orgId',
+      label: $t('page.user.table.orgId'),
+      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,
+        //   }));
+        // },
+      },
+      rules: 'selectRequired',
+    },
+    {
+      component: 'Input',
+      fieldName: 'nickName',
+      label: $t('page.user.table.nickName'),
+      componentProps: {
+        placeholder: $t('ui.placeholder.input'),
+        allowClear: true,
+      },
+      rules: 'required',
+    },
+    {
+      component: 'Input',
+      fieldName: 'email',
+      label: $t('page.user.table.email'),
+      componentProps: {
+        placeholder: $t('ui.placeholder.input'),
+        allowClear: true,
+      },
+      rules: 'required',
+    },
+
+    {
+      component: 'Input',
+      fieldName: 'remark',
+      label: $t('ui.table.remark'),
+      componentProps: {
+        placeholder: $t('ui.placeholder.input'),
+        allowClear: true,
+        type: 'textarea',
+      },
+    },
+  ],
+});
+
+// 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');
+  },
+  onOpenChange(isOpen) {
+    if (isOpen) {
+      // handleUpdate(10);
+    }
+  },
+});
+
+// function setLoading(loading: boolean) {
+//   modalApi.setState({ confirmLoading: loading });
+// }
+</script>
+
+<template>
+  <Modal :title="getTitle">
+    <BaseForm />
+  </Modal>
+</template>

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

@@ -1,5 +1,196 @@
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+import type { VbenFormProps } from '@vben/common-ui';
+
+import type { VxeGridProps } from '#/adapter/vxe-table';
+
+import { Page, useVbenModal } from '@vben/common-ui';
+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';
+
+const formOptions: VbenFormProps = {
+  // 默认展开
+  collapsed: true,
+  // 控制表单是否显示折叠按钮
+  showCollapseButton: true,
+  // 按下回车时是否提交表单
+  submitOnEnter: true,
+  schema: [
+    {
+      component: 'Input',
+      fieldName: 'usersname',
+      label: '用户名称',
+      componentProps: {
+        placeholder: $t('ui.placeholder.input'),
+        allowClear: true,
+      },
+    },
+    {
+      component: 'Input',
+      fieldName: 'usersphone',
+      label: '用户手机号',
+      componentProps: {
+        placeholder: $t('ui.placeholder.input'),
+        allowClear: true,
+      },
+    },
+  ],
+};
+
+const gridOptions: VxeGridProps<any> = {
+  toolbarConfig: {
+    custom: true,
+    export: true,
+    // import: true,
+    refresh: true,
+    zoom: true,
+  },
+  height: 'auto',
+  exportConfig: {},
+  pagerConfig: {},
+  rowConfig: {
+    isHover: true,
+  },
+  stripe: true,
+
+  proxyConfig: {
+    response: {
+      result: 'Data',
+      total: 'Total',
+    },
+    ajax: {
+      query: async ({ page }, formValues) => {
+        return await getCustomerListApi({
+          pageindex: page.currentPage,
+          rows: page.pageSize,
+          ...formValues,
+        });
+      },
+    },
+  },
+
+  columns: [
+    { 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' },
+    {
+      title: '操作',
+      field: 'action',
+      fixed: 'right',
+      slots: { default: 'action' },
+      width: 140,
+    },
+  ],
+};
+
+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();
+}
+
+/* 编辑 */
+// eslint-disable-next-line unused-imports/no-unused-vars
+function handleEdit(row: any) {
+  // console.log('编辑', row);
+  // openDrawer(false, row);
+  modalApi.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}`);
+}
+</script>
 
 <template>
-  <div class="p-2">customer-manage</div>
+  <Page auto-content-height>
+    <Grid table-title="客户信息">
+      <template #toolbar-tools>
+        <el-button type="primary" @click="handleCreate"> 新增 </el-button>
+      </template>
+      <template #action="{ row }">
+        <el-button
+          round
+          @click="() => handleDetail(row)"
+          :icon="MdiDetail"
+          class="!p-8px"
+        />
+        <el-button
+          round
+          @click="() => handleEdit(row)"
+          :icon="MdiEdit"
+          class="!p-8px"
+        />
+      </template>
+    </Grid>
+    <Modal />
+  </Page>
 </template>

packages/@core/preferences/src/config.ts

@@ -73,7 +73,7 @@ const defaultPreferences: Preferences = {
     expandOnHover: true,
     extraCollapse: false,
     hidden: false,
-    width: 224,
+    width: 250,
   },
   tabbar: {
     draggable: true,

packages/constants/src/index.ts

@@ -1,2 +1,4 @@
 export * from './core';
+export * from './user';
+
 export * from '@vben-core/shared/constants';

packages/constants/src/user.ts

@@ -0,0 +1,7 @@
+/**
+ * 用户认证状态
+ */
+export const UserAuthStatus = {
+  AUTHORIZED: 1, // 已认证
+  UNAUTHORIZED: 0, // 未认证
+} as const;

packages/effects/common-ui/src/components/page/page.vue

@@ -85,7 +85,7 @@ onMounted(() => {
       </div>
     </div>
 
-    <div :class="cn('h-full p-4', contentClass)" :style="contentStyle">
+    <div :class="cn('h-full p-3', contentClass)" :style="contentStyle">
       <slot></slot>
     </div>
 

packages/icons/src/iconify/index.ts

@@ -13,3 +13,11 @@ export const MdiGoogle = createIconifyIcon('mdi:google');
 export const MdiQqchat = createIconifyIcon('mdi:qqchat');
 
 export const MdiOnepassword = createIconifyIcon('mdi:onepassword');
+
+export const MdiEdit = createIconifyIcon('mdi:pencil');
+
+export const MdiDelete = createIconifyIcon('mdi:delete');
+
+export const MdiDetail = createIconifyIcon('mdi:eye');
+
+export const MdiPlus = createIconifyIcon('mdi:plus');

packages/types/src/base.ts

@@ -0,0 +1,7 @@
+/** 页码配置 */
+interface PageConfig {
+  pageindex: number;
+  rows: number;
+}
+
+export type { PageConfig };

packages/types/src/index.ts

@@ -1,2 +1,3 @@
+export type * from './base';
 export type * from './user';
 export type * from '@vben-core/typings';

packages/types/src/user.ts

@@ -5,4 +5,49 @@ interface UserInfo extends BasicUserInfo {
   [key: string]: any;
 }
 
-export type { UserInfo };
+/** 客户信息*/
+// CREATE TABLE `users` (
+//   `usersid` varchar(50) NOT NULL COMMENT '用户id',
+//   `usersname` varchar(50) DEFAULT NULL COMMENT '用户名称',
+//   `usersnature` tinyint(2) DEFAULT NULL COMMENT '用户性质',
+//   `userssuperiorid` varchar(50) DEFAULT NULL COMMENT '用户关联上级id',
+//   `usersidcardnumber` varchar(50) DEFAULT NULL COMMENT '用户证件号码',
+//   `usersbankname` varchar(50) DEFAULT NULL COMMENT '用户开户银行名称',
+//   `usersbanknumber` varchar(50) DEFAULT NULL COMMENT '用户开户银行账号',
+//   `usersphone` varchar(50) DEFAULT NULL COMMENT '用户手机号',
+//   `usersemail` varchar(50) DEFAULT NULL COMMENT '用户邮箱',
+//   `usersaddress` varchar(100) DEFAULT NULL COMMENT '用户地址',
+//   `userscontactphone` varchar(50) DEFAULT NULL COMMENT '用户联系手机号',
+//   `userscontactemail` varchar(50) DEFAULT NULL COMMENT '用户联系邮箱',
+//   `userscontactaddress` varchar(50) DEFAULT NULL COMMENT '用户联系地址',
+//   `usersopenid` varchar(50) DEFAULT NULL COMMENT '用户微信openid',
+//   `usersauthstatus` tinyint(2) DEFAULT NULL COMMENT '用户是否实名（0：未认证，1：已认证）',
+//   `usersdate` datetime DEFAULT NULL COMMENT '用户创建时间',
+//   PRIMARY KEY (`usersid`)
+// ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='用户信息';
+
+// const stats = 'usersid,usersname,usersnature,userssuperiorid,usersidcardnumber,usersbankname,usersbanknumber,usersphone,usersemail,usersaddress,userscontactphone,userscontactemail,userscontactaddress,usersopenid,usersauthstatus,usersdate';
+
+/** 用户认证状态 */
+type UserAuthStatusType = 0 | 1;
+
+interface CustomerEntity {
+  usersid: number;
+  usersname: string;
+  usersnature: number;
+  userssuperiorid: string;
+  usersidcardnumber: string;
+  usersbankname: string;
+  usersbanknumber: string;
+  usersphone: string;
+  usersemail: string;
+  usersaddress: string;
+  userscontactphone: string;
+  userscontactemail: string;
+  userscontactaddress: string;
+  usersopenid: string;
+  usersauthstatus: UserAuthStatusType;
+  usersdate: string;
+}
+
+export type { CustomerEntity, UserAuthStatusType, UserInfo };