feat: 初始化其他页面

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

@@ -0,0 +1,193 @@
+<script lang="ts" setup>
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { useVbenForm, z } from '#/adapter/form';
+import { getCustomerDetailApi } from '#/api/customer-manage';
+
+const data = ref();
+
+const getTitle = computed(() => (data.value?.create ? '新增客户' : '编辑客户'));
+
+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: 'usersname',
+      label: '用户名称',
+      componentProps: {
+        placeholder: '请输入用户名称',
+        allowClear: true,
+      },
+      rules: z.string().min(1, { message: '请输入用户名称' }),
+    },
+    {
+      component: 'Input',
+      fieldName: 'usersnature',
+      label: '用户性质',
+      componentProps: {
+        placeholder: '请输入用户性质',
+        allowClear: true,
+      },
+      rules: z.number().min(1, { message: '请输入用户性质' }),
+    },
+    {
+      component: 'Input',
+      fieldName: 'usersidcardnumber',
+      label: '用户证件号码',
+      componentProps: {
+        placeholder: '请输入用户证件号码',
+        allowClear: true,
+      },
+      rules: z.string().min(1, { message: '请输入用户证件号码' }),
+    },
+    {
+      component: 'Input',
+      fieldName: 'usersbankname',
+      label: '用户开户银行名称',
+      componentProps: {
+        placeholder: '请输入用户开户银行名称',
+        allowClear: true,
+      },
+      rules: z.string().min(1, { message: '请输入用户开户银行名称' }),
+    },
+    {
+      component: 'Input',
+      fieldName: 'usersbanknumber',
+      label: '用户开户银行账号',
+      componentProps: {
+        placeholder: '请输入用户开户银行账号',
+        allowClear: true,
+      },
+      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: 'userscontactaddress',
+      label: '用户联系地址',
+      componentProps: {
+        placeholder: '请输入用户联系地址',
+        allowClear: true,
+      },
+      rules: z.string().min(1, { message: '请输入用户联系地址' }),
+    },
+  ],
+});
+
+const [Modal, modalApi] = useVbenModal({
+  onCancel() {
+    modalApi.close();
+  },
+  async onConfirm() {
+    // 校验输入的数据
+    const validate = await baseFormApi.validate();
+    if (!validate.valid) {
+      return;
+    }
+
+    modalApi.close();
+    // const values = await baseFormApi.getValues();
+
+    // console.log(Object.keys(values));
+  },
+  async onOpenChange(isOpen) {
+    if (isOpen) {
+      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 });
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle">
+    <BaseForm />
+  </Modal>
+</template>

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

@@ -1,5 +1,147 @@
-<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 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({
+  fullscreenButton: false,
+  closeOnClickModal: false,
+  closeOnPressEscape: false,
+  connectedComponent: CustomerForm,
+});
+
+/* 创建 */
+function handleCreate() {
+  modalApi.setData({ create: true }).open();
+}
+
+/* 编辑 */
+function handleEdit(row: any) {
+  modalApi.setData({ row }).open();
+}
+
+/* 详情 */
+function handleDetail(row: any) {
+  modalApi.setData({ row }).open();
+  // router.push(`/system/users/detail/${row.userName}`);
+}
+</script>
 
 <template>
-  <div class="p-2">coupon-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-2"
+        />
+        <el-button
+          round
+          @click="() => handleEdit(row)"
+          :icon="MdiEdit"
+          class="!p-2"
+        />
+      </template>
+    </Grid>
+    <Modal />
+  </Page>
 </template>

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

@@ -123,7 +123,7 @@ function handleDetail(row: any) {
 
 <template>
   <Page auto-content-height>
-    <Grid table-title="客户信息">
+    <Grid table-title="客户列表">
       <template #toolbar-tools>
         <el-button type="primary" @click="handleCreate"> 新增 </el-button>
       </template>

apps/web-ele/src/views/examine-manage/examine-merchant/form.vue

@@ -0,0 +1,193 @@
+<script lang="ts" setup>
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { useVbenForm, z } from '#/adapter/form';
+import { getCustomerDetailApi } from '#/api/customer-manage';
+
+const data = ref();
+
+const getTitle = computed(() => (data.value?.create ? '新增客户' : '编辑客户'));
+
+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: 'usersname',
+      label: '用户名称',
+      componentProps: {
+        placeholder: '请输入用户名称',
+        allowClear: true,
+      },
+      rules: z.string().min(1, { message: '请输入用户名称' }),
+    },
+    {
+      component: 'Input',
+      fieldName: 'usersnature',
+      label: '用户性质',
+      componentProps: {
+        placeholder: '请输入用户性质',
+        allowClear: true,
+      },
+      rules: z.number().min(1, { message: '请输入用户性质' }),
+    },
+    {
+      component: 'Input',
+      fieldName: 'usersidcardnumber',
+      label: '用户证件号码',
+      componentProps: {
+        placeholder: '请输入用户证件号码',
+        allowClear: true,
+      },
+      rules: z.string().min(1, { message: '请输入用户证件号码' }),
+    },
+    {
+      component: 'Input',
+      fieldName: 'usersbankname',
+      label: '用户开户银行名称',
+      componentProps: {
+        placeholder: '请输入用户开户银行名称',
+        allowClear: true,
+      },
+      rules: z.string().min(1, { message: '请输入用户开户银行名称' }),
+    },
+    {
+      component: 'Input',
+      fieldName: 'usersbanknumber',
+      label: '用户开户银行账号',
+      componentProps: {
+        placeholder: '请输入用户开户银行账号',
+        allowClear: true,
+      },
+      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: 'userscontactaddress',
+      label: '用户联系地址',
+      componentProps: {
+        placeholder: '请输入用户联系地址',
+        allowClear: true,
+      },
+      rules: z.string().min(1, { message: '请输入用户联系地址' }),
+    },
+  ],
+});
+
+const [Modal, modalApi] = useVbenModal({
+  onCancel() {
+    modalApi.close();
+  },
+  async onConfirm() {
+    // 校验输入的数据
+    const validate = await baseFormApi.validate();
+    if (!validate.valid) {
+      return;
+    }
+
+    modalApi.close();
+    // const values = await baseFormApi.getValues();
+
+    // console.log(Object.keys(values));
+  },
+  async onOpenChange(isOpen) {
+    if (isOpen) {
+      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 });
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle">
+    <BaseForm />
+  </Modal>
+</template>

apps/web-ele/src/views/examine-manage/examine-merchant/index.vue

@@ -1,5 +1,147 @@
-<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 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({
+  fullscreenButton: false,
+  closeOnClickModal: false,
+  closeOnPressEscape: false,
+  connectedComponent: CustomerForm,
+});
+
+/* 创建 */
+function handleCreate() {
+  modalApi.setData({ create: true }).open();
+}
+
+/* 编辑 */
+function handleEdit(row: any) {
+  modalApi.setData({ row }).open();
+}
+
+/* 详情 */
+function handleDetail(row: any) {
+  modalApi.setData({ row }).open();
+  // router.push(`/system/users/detail/${row.userName}`);
+}
+</script>
 
 <template>
-  <div class="p-2">merchant-examine</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-2"
+        />
+        <el-button
+          round
+          @click="() => handleEdit(row)"
+          :icon="MdiEdit"
+          class="!p-2"
+        />
+      </template>
+    </Grid>
+    <Modal />
+  </Page>
 </template>

apps/web-ele/src/views/examine-manage/examine-order/form.vue

@@ -0,0 +1,193 @@
+<script lang="ts" setup>
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { useVbenForm, z } from '#/adapter/form';
+import { getCustomerDetailApi } from '#/api/customer-manage';
+
+const data = ref();
+
+const getTitle = computed(() => (data.value?.create ? '新增客户' : '编辑客户'));
+
+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: 'usersname',
+      label: '用户名称',
+      componentProps: {
+        placeholder: '请输入用户名称',
+        allowClear: true,
+      },
+      rules: z.string().min(1, { message: '请输入用户名称' }),
+    },
+    {
+      component: 'Input',
+      fieldName: 'usersnature',
+      label: '用户性质',
+      componentProps: {
+        placeholder: '请输入用户性质',
+        allowClear: true,
+      },
+      rules: z.number().min(1, { message: '请输入用户性质' }),
+    },
+    {
+      component: 'Input',
+      fieldName: 'usersidcardnumber',
+      label: '用户证件号码',
+      componentProps: {
+        placeholder: '请输入用户证件号码',
+        allowClear: true,
+      },
+      rules: z.string().min(1, { message: '请输入用户证件号码' }),
+    },
+    {
+      component: 'Input',
+      fieldName: 'usersbankname',
+      label: '用户开户银行名称',
+      componentProps: {
+        placeholder: '请输入用户开户银行名称',
+        allowClear: true,
+      },
+      rules: z.string().min(1, { message: '请输入用户开户银行名称' }),
+    },
+    {
+      component: 'Input',
+      fieldName: 'usersbanknumber',
+      label: '用户开户银行账号',
+      componentProps: {
+        placeholder: '请输入用户开户银行账号',
+        allowClear: true,
+      },
+      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: 'userscontactaddress',
+      label: '用户联系地址',
+      componentProps: {
+        placeholder: '请输入用户联系地址',
+        allowClear: true,
+      },
+      rules: z.string().min(1, { message: '请输入用户联系地址' }),
+    },
+  ],
+});
+
+const [Modal, modalApi] = useVbenModal({
+  onCancel() {
+    modalApi.close();
+  },
+  async onConfirm() {
+    // 校验输入的数据
+    const validate = await baseFormApi.validate();
+    if (!validate.valid) {
+      return;
+    }
+
+    modalApi.close();
+    // const values = await baseFormApi.getValues();
+
+    // console.log(Object.keys(values));
+  },
+  async onOpenChange(isOpen) {
+    if (isOpen) {
+      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 });
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle">
+    <BaseForm />
+  </Modal>
+</template>

apps/web-ele/src/views/examine-manage/examine-order/index.vue

@@ -1,5 +1,147 @@
-<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 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({
+  fullscreenButton: false,
+  closeOnClickModal: false,
+  closeOnPressEscape: false,
+  connectedComponent: CustomerForm,
+});
+
+/* 创建 */
+function handleCreate() {
+  modalApi.setData({ create: true }).open();
+}
+
+/* 编辑 */
+function handleEdit(row: any) {
+  modalApi.setData({ row }).open();
+}
+
+/* 详情 */
+function handleDetail(row: any) {
+  modalApi.setData({ row }).open();
+  // router.push(`/system/users/detail/${row.userName}`);
+}
+</script>
 
 <template>
-  <div class="p-2">order-examine</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-2"
+        />
+        <el-button
+          round
+          @click="() => handleEdit(row)"
+          :icon="MdiEdit"
+          class="!p-2"
+        />
+      </template>
+    </Grid>
+    <Modal />
+  </Page>
 </template>

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

@@ -0,0 +1,193 @@
+<script lang="ts" setup>
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { useVbenForm, z } from '#/adapter/form';
+import { getCustomerDetailApi } from '#/api/customer-manage';
+
+const data = ref();
+
+const getTitle = computed(() => (data.value?.create ? '新增客户' : '编辑客户'));
+
+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: 'usersname',
+      label: '用户名称',
+      componentProps: {
+        placeholder: '请输入用户名称',
+        allowClear: true,
+      },
+      rules: z.string().min(1, { message: '请输入用户名称' }),
+    },
+    {
+      component: 'Input',
+      fieldName: 'usersnature',
+      label: '用户性质',
+      componentProps: {
+        placeholder: '请输入用户性质',
+        allowClear: true,
+      },
+      rules: z.number().min(1, { message: '请输入用户性质' }),
+    },
+    {
+      component: 'Input',
+      fieldName: 'usersidcardnumber',
+      label: '用户证件号码',
+      componentProps: {
+        placeholder: '请输入用户证件号码',
+        allowClear: true,
+      },
+      rules: z.string().min(1, { message: '请输入用户证件号码' }),
+    },
+    {
+      component: 'Input',
+      fieldName: 'usersbankname',
+      label: '用户开户银行名称',
+      componentProps: {
+        placeholder: '请输入用户开户银行名称',
+        allowClear: true,
+      },
+      rules: z.string().min(1, { message: '请输入用户开户银行名称' }),
+    },
+    {
+      component: 'Input',
+      fieldName: 'usersbanknumber',
+      label: '用户开户银行账号',
+      componentProps: {
+        placeholder: '请输入用户开户银行账号',
+        allowClear: true,
+      },
+      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: 'userscontactaddress',
+      label: '用户联系地址',
+      componentProps: {
+        placeholder: '请输入用户联系地址',
+        allowClear: true,
+      },
+      rules: z.string().min(1, { message: '请输入用户联系地址' }),
+    },
+  ],
+});
+
+const [Modal, modalApi] = useVbenModal({
+  onCancel() {
+    modalApi.close();
+  },
+  async onConfirm() {
+    // 校验输入的数据
+    const validate = await baseFormApi.validate();
+    if (!validate.valid) {
+      return;
+    }
+
+    modalApi.close();
+    // const values = await baseFormApi.getValues();
+
+    // console.log(Object.keys(values));
+  },
+  async onOpenChange(isOpen) {
+    if (isOpen) {
+      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 });
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle">
+    <BaseForm />
+  </Modal>
+</template>

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

@@ -1,5 +1,147 @@
-<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 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({
+  fullscreenButton: false,
+  closeOnClickModal: false,
+  closeOnPressEscape: false,
+  connectedComponent: CustomerForm,
+});
+
+/* 创建 */
+function handleCreate() {
+  modalApi.setData({ create: true }).open();
+}
+
+/* 编辑 */
+function handleEdit(row: any) {
+  modalApi.setData({ row }).open();
+}
+
+/* 详情 */
+function handleDetail(row: any) {
+  modalApi.setData({ row }).open();
+  // router.push(`/system/users/detail/${row.userName}`);
+}
+</script>
 
 <template>
-  <div class="p-2">merchant-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-2"
+        />
+        <el-button
+          round
+          @click="() => handleEdit(row)"
+          :icon="MdiEdit"
+          class="!p-2"
+        />
+      </template>
+    </Grid>
+    <Modal />
+  </Page>
 </template>

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

@@ -0,0 +1,193 @@
+<script lang="ts" setup>
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { useVbenForm, z } from '#/adapter/form';
+import { getCustomerDetailApi } from '#/api/customer-manage';
+
+const data = ref();
+
+const getTitle = computed(() => (data.value?.create ? '新增客户' : '编辑客户'));
+
+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: 'usersname',
+      label: '用户名称',
+      componentProps: {
+        placeholder: '请输入用户名称',
+        allowClear: true,
+      },
+      rules: z.string().min(1, { message: '请输入用户名称' }),
+    },
+    {
+      component: 'Input',
+      fieldName: 'usersnature',
+      label: '用户性质',
+      componentProps: {
+        placeholder: '请输入用户性质',
+        allowClear: true,
+      },
+      rules: z.number().min(1, { message: '请输入用户性质' }),
+    },
+    {
+      component: 'Input',
+      fieldName: 'usersidcardnumber',
+      label: '用户证件号码',
+      componentProps: {
+        placeholder: '请输入用户证件号码',
+        allowClear: true,
+      },
+      rules: z.string().min(1, { message: '请输入用户证件号码' }),
+    },
+    {
+      component: 'Input',
+      fieldName: 'usersbankname',
+      label: '用户开户银行名称',
+      componentProps: {
+        placeholder: '请输入用户开户银行名称',
+        allowClear: true,
+      },
+      rules: z.string().min(1, { message: '请输入用户开户银行名称' }),
+    },
+    {
+      component: 'Input',
+      fieldName: 'usersbanknumber',
+      label: '用户开户银行账号',
+      componentProps: {
+        placeholder: '请输入用户开户银行账号',
+        allowClear: true,
+      },
+      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: 'userscontactaddress',
+      label: '用户联系地址',
+      componentProps: {
+        placeholder: '请输入用户联系地址',
+        allowClear: true,
+      },
+      rules: z.string().min(1, { message: '请输入用户联系地址' }),
+    },
+  ],
+});
+
+const [Modal, modalApi] = useVbenModal({
+  onCancel() {
+    modalApi.close();
+  },
+  async onConfirm() {
+    // 校验输入的数据
+    const validate = await baseFormApi.validate();
+    if (!validate.valid) {
+      return;
+    }
+
+    modalApi.close();
+    // const values = await baseFormApi.getValues();
+
+    // console.log(Object.keys(values));
+  },
+  async onOpenChange(isOpen) {
+    if (isOpen) {
+      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 });
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle">
+    <BaseForm />
+  </Modal>
+</template>

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

@@ -1,5 +1,147 @@
-<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 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({
+  fullscreenButton: false,
+  closeOnClickModal: false,
+  closeOnPressEscape: false,
+  connectedComponent: CustomerForm,
+});
+
+/* 创建 */
+function handleCreate() {
+  modalApi.setData({ create: true }).open();
+}
+
+/* 编辑 */
+function handleEdit(row: any) {
+  modalApi.setData({ row }).open();
+}
+
+/* 详情 */
+function handleDetail(row: any) {
+  modalApi.setData({ row }).open();
+  // router.push(`/system/users/detail/${row.userName}`);
+}
+</script>
 
 <template>
-  <div class="p-2">order-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-2"
+        />
+        <el-button
+          round
+          @click="() => handleEdit(row)"
+          :icon="MdiEdit"
+          class="!p-2"
+        />
+      </template>
+    </Grid>
+    <Modal />
+  </Page>
 </template>

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

@@ -0,0 +1,193 @@
+<script lang="ts" setup>
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { useVbenForm, z } from '#/adapter/form';
+import { getCustomerDetailApi } from '#/api/customer-manage';
+
+const data = ref();
+
+const getTitle = computed(() => (data.value?.create ? '新增客户' : '编辑客户'));
+
+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: 'usersname',
+      label: '用户名称',
+      componentProps: {
+        placeholder: '请输入用户名称',
+        allowClear: true,
+      },
+      rules: z.string().min(1, { message: '请输入用户名称' }),
+    },
+    {
+      component: 'Input',
+      fieldName: 'usersnature',
+      label: '用户性质',
+      componentProps: {
+        placeholder: '请输入用户性质',
+        allowClear: true,
+      },
+      rules: z.number().min(1, { message: '请输入用户性质' }),
+    },
+    {
+      component: 'Input',
+      fieldName: 'usersidcardnumber',
+      label: '用户证件号码',
+      componentProps: {
+        placeholder: '请输入用户证件号码',
+        allowClear: true,
+      },
+      rules: z.string().min(1, { message: '请输入用户证件号码' }),
+    },
+    {
+      component: 'Input',
+      fieldName: 'usersbankname',
+      label: '用户开户银行名称',
+      componentProps: {
+        placeholder: '请输入用户开户银行名称',
+        allowClear: true,
+      },
+      rules: z.string().min(1, { message: '请输入用户开户银行名称' }),
+    },
+    {
+      component: 'Input',
+      fieldName: 'usersbanknumber',
+      label: '用户开户银行账号',
+      componentProps: {
+        placeholder: '请输入用户开户银行账号',
+        allowClear: true,
+      },
+      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: 'userscontactaddress',
+      label: '用户联系地址',
+      componentProps: {
+        placeholder: '请输入用户联系地址',
+        allowClear: true,
+      },
+      rules: z.string().min(1, { message: '请输入用户联系地址' }),
+    },
+  ],
+});
+
+const [Modal, modalApi] = useVbenModal({
+  onCancel() {
+    modalApi.close();
+  },
+  async onConfirm() {
+    // 校验输入的数据
+    const validate = await baseFormApi.validate();
+    if (!validate.valid) {
+      return;
+    }
+
+    modalApi.close();
+    // const values = await baseFormApi.getValues();
+
+    // console.log(Object.keys(values));
+  },
+  async onOpenChange(isOpen) {
+    if (isOpen) {
+      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 });
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle">
+    <BaseForm />
+  </Modal>
+</template>

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

@@ -1,5 +1,147 @@
-<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 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({
+  fullscreenButton: false,
+  closeOnClickModal: false,
+  closeOnPressEscape: false,
+  connectedComponent: CustomerForm,
+});
+
+/* 创建 */
+function handleCreate() {
+  modalApi.setData({ create: true }).open();
+}
+
+/* 编辑 */
+function handleEdit(row: any) {
+  modalApi.setData({ row }).open();
+}
+
+/* 详情 */
+function handleDetail(row: any) {
+  modalApi.setData({ row }).open();
+  // router.push(`/system/users/detail/${row.userName}`);
+}
+</script>
 
 <template>
-  <div class="p-2">product-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-2"
+        />
+        <el-button
+          round
+          @click="() => handleEdit(row)"
+          :icon="MdiEdit"
+          class="!p-2"
+        />
+      </template>
+    </Grid>
+    <Modal />
+  </Page>
 </template>

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

@@ -0,0 +1,193 @@
+<script lang="ts" setup>
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { useVbenForm, z } from '#/adapter/form';
+import { getCustomerDetailApi } from '#/api/customer-manage';
+
+const data = ref();
+
+const getTitle = computed(() => (data.value?.create ? '新增客户' : '编辑客户'));
+
+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: 'usersname',
+      label: '用户名称',
+      componentProps: {
+        placeholder: '请输入用户名称',
+        allowClear: true,
+      },
+      rules: z.string().min(1, { message: '请输入用户名称' }),
+    },
+    {
+      component: 'Input',
+      fieldName: 'usersnature',
+      label: '用户性质',
+      componentProps: {
+        placeholder: '请输入用户性质',
+        allowClear: true,
+      },
+      rules: z.number().min(1, { message: '请输入用户性质' }),
+    },
+    {
+      component: 'Input',
+      fieldName: 'usersidcardnumber',
+      label: '用户证件号码',
+      componentProps: {
+        placeholder: '请输入用户证件号码',
+        allowClear: true,
+      },
+      rules: z.string().min(1, { message: '请输入用户证件号码' }),
+    },
+    {
+      component: 'Input',
+      fieldName: 'usersbankname',
+      label: '用户开户银行名称',
+      componentProps: {
+        placeholder: '请输入用户开户银行名称',
+        allowClear: true,
+      },
+      rules: z.string().min(1, { message: '请输入用户开户银行名称' }),
+    },
+    {
+      component: 'Input',
+      fieldName: 'usersbanknumber',
+      label: '用户开户银行账号',
+      componentProps: {
+        placeholder: '请输入用户开户银行账号',
+        allowClear: true,
+      },
+      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: 'userscontactaddress',
+      label: '用户联系地址',
+      componentProps: {
+        placeholder: '请输入用户联系地址',
+        allowClear: true,
+      },
+      rules: z.string().min(1, { message: '请输入用户联系地址' }),
+    },
+  ],
+});
+
+const [Modal, modalApi] = useVbenModal({
+  onCancel() {
+    modalApi.close();
+  },
+  async onConfirm() {
+    // 校验输入的数据
+    const validate = await baseFormApi.validate();
+    if (!validate.valid) {
+      return;
+    }
+
+    modalApi.close();
+    // const values = await baseFormApi.getValues();
+
+    // console.log(Object.keys(values));
+  },
+  async onOpenChange(isOpen) {
+    if (isOpen) {
+      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 });
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle">
+    <BaseForm />
+  </Modal>
+</template>

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

@@ -1,5 +1,147 @@
-<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 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({
+  fullscreenButton: false,
+  closeOnClickModal: false,
+  closeOnPressEscape: false,
+  connectedComponent: CustomerForm,
+});
+
+/* 创建 */
+function handleCreate() {
+  modalApi.setData({ create: true }).open();
+}
+
+/* 编辑 */
+function handleEdit(row: any) {
+  modalApi.setData({ row }).open();
+}
+
+/* 详情 */
+function handleDetail(row: any) {
+  modalApi.setData({ row }).open();
+  // router.push(`/system/users/detail/${row.userName}`);
+}
+</script>
 
 <template>
-  <div class="p-2">supplier-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-2"
+        />
+        <el-button
+          round
+          @click="() => handleEdit(row)"
+          :icon="MdiEdit"
+          class="!p-2"
+        />
+      </template>
+    </Grid>
+    <Modal />
+  </Page>
 </template>

apps/web-ele/src/views/system-manage/data-dictionary/form.vue

@@ -0,0 +1,193 @@
+<script lang="ts" setup>
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { useVbenForm, z } from '#/adapter/form';
+import { getCustomerDetailApi } from '#/api/customer-manage';
+
+const data = ref();
+
+const getTitle = computed(() => (data.value?.create ? '新增客户' : '编辑客户'));
+
+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: 'usersname',
+      label: '用户名称',
+      componentProps: {
+        placeholder: '请输入用户名称',
+        allowClear: true,
+      },
+      rules: z.string().min(1, { message: '请输入用户名称' }),
+    },
+    {
+      component: 'Input',
+      fieldName: 'usersnature',
+      label: '用户性质',
+      componentProps: {
+        placeholder: '请输入用户性质',
+        allowClear: true,
+      },
+      rules: z.number().min(1, { message: '请输入用户性质' }),
+    },
+    {
+      component: 'Input',
+      fieldName: 'usersidcardnumber',
+      label: '用户证件号码',
+      componentProps: {
+        placeholder: '请输入用户证件号码',
+        allowClear: true,
+      },
+      rules: z.string().min(1, { message: '请输入用户证件号码' }),
+    },
+    {
+      component: 'Input',
+      fieldName: 'usersbankname',
+      label: '用户开户银行名称',
+      componentProps: {
+        placeholder: '请输入用户开户银行名称',
+        allowClear: true,
+      },
+      rules: z.string().min(1, { message: '请输入用户开户银行名称' }),
+    },
+    {
+      component: 'Input',
+      fieldName: 'usersbanknumber',
+      label: '用户开户银行账号',
+      componentProps: {
+        placeholder: '请输入用户开户银行账号',
+        allowClear: true,
+      },
+      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: 'userscontactaddress',
+      label: '用户联系地址',
+      componentProps: {
+        placeholder: '请输入用户联系地址',
+        allowClear: true,
+      },
+      rules: z.string().min(1, { message: '请输入用户联系地址' }),
+    },
+  ],
+});
+
+const [Modal, modalApi] = useVbenModal({
+  onCancel() {
+    modalApi.close();
+  },
+  async onConfirm() {
+    // 校验输入的数据
+    const validate = await baseFormApi.validate();
+    if (!validate.valid) {
+      return;
+    }
+
+    modalApi.close();
+    // const values = await baseFormApi.getValues();
+
+    // console.log(Object.keys(values));
+  },
+  async onOpenChange(isOpen) {
+    if (isOpen) {
+      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 });
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle">
+    <BaseForm />
+  </Modal>
+</template>

apps/web-ele/src/views/system-manage/data-dictionary/index.vue

@@ -1,5 +1,147 @@
-<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 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({
+  fullscreenButton: false,
+  closeOnClickModal: false,
+  closeOnPressEscape: false,
+  connectedComponent: CustomerForm,
+});
+
+/* 创建 */
+function handleCreate() {
+  modalApi.setData({ create: true }).open();
+}
+
+/* 编辑 */
+function handleEdit(row: any) {
+  modalApi.setData({ row }).open();
+}
+
+/* 详情 */
+function handleDetail(row: any) {
+  modalApi.setData({ row }).open();
+  // router.push(`/system/users/detail/${row.userName}`);
+}
+</script>
 
 <template>
-  <div class="p-2">data-dictionary</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-2"
+        />
+        <el-button
+          round
+          @click="() => handleEdit(row)"
+          :icon="MdiEdit"
+          class="!p-2"
+        />
+      </template>
+    </Grid>
+    <Modal />
+  </Page>
 </template>

apps/web-ele/src/views/system-manage/menu-manage/form.vue

@@ -0,0 +1,193 @@
+<script lang="ts" setup>
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { useVbenForm, z } from '#/adapter/form';
+import { getCustomerDetailApi } from '#/api/customer-manage';
+
+const data = ref();
+
+const getTitle = computed(() => (data.value?.create ? '新增客户' : '编辑客户'));
+
+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: 'usersname',
+      label: '用户名称',
+      componentProps: {
+        placeholder: '请输入用户名称',
+        allowClear: true,
+      },
+      rules: z.string().min(1, { message: '请输入用户名称' }),
+    },
+    {
+      component: 'Input',
+      fieldName: 'usersnature',
+      label: '用户性质',
+      componentProps: {
+        placeholder: '请输入用户性质',
+        allowClear: true,
+      },
+      rules: z.number().min(1, { message: '请输入用户性质' }),
+    },
+    {
+      component: 'Input',
+      fieldName: 'usersidcardnumber',
+      label: '用户证件号码',
+      componentProps: {
+        placeholder: '请输入用户证件号码',
+        allowClear: true,
+      },
+      rules: z.string().min(1, { message: '请输入用户证件号码' }),
+    },
+    {
+      component: 'Input',
+      fieldName: 'usersbankname',
+      label: '用户开户银行名称',
+      componentProps: {
+        placeholder: '请输入用户开户银行名称',
+        allowClear: true,
+      },
+      rules: z.string().min(1, { message: '请输入用户开户银行名称' }),
+    },
+    {
+      component: 'Input',
+      fieldName: 'usersbanknumber',
+      label: '用户开户银行账号',
+      componentProps: {
+        placeholder: '请输入用户开户银行账号',
+        allowClear: true,
+      },
+      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: 'userscontactaddress',
+      label: '用户联系地址',
+      componentProps: {
+        placeholder: '请输入用户联系地址',
+        allowClear: true,
+      },
+      rules: z.string().min(1, { message: '请输入用户联系地址' }),
+    },
+  ],
+});
+
+const [Modal, modalApi] = useVbenModal({
+  onCancel() {
+    modalApi.close();
+  },
+  async onConfirm() {
+    // 校验输入的数据
+    const validate = await baseFormApi.validate();
+    if (!validate.valid) {
+      return;
+    }
+
+    modalApi.close();
+    // const values = await baseFormApi.getValues();
+
+    // console.log(Object.keys(values));
+  },
+  async onOpenChange(isOpen) {
+    if (isOpen) {
+      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 });
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle">
+    <BaseForm />
+  </Modal>
+</template>

apps/web-ele/src/views/system-manage/menu-manage/index.vue

@@ -1,5 +1,147 @@
-<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 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({
+  fullscreenButton: false,
+  closeOnClickModal: false,
+  closeOnPressEscape: false,
+  connectedComponent: CustomerForm,
+});
+
+/* 创建 */
+function handleCreate() {
+  modalApi.setData({ create: true }).open();
+}
+
+/* 编辑 */
+function handleEdit(row: any) {
+  modalApi.setData({ row }).open();
+}
+
+/* 详情 */
+function handleDetail(row: any) {
+  modalApi.setData({ row }).open();
+  // router.push(`/system/users/detail/${row.userName}`);
+}
+</script>
 
 <template>
-  <div class="p-2">menu-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-2"
+        />
+        <el-button
+          round
+          @click="() => handleEdit(row)"
+          :icon="MdiEdit"
+          class="!p-2"
+        />
+      </template>
+    </Grid>
+    <Modal />
+  </Page>
 </template>

apps/web-ele/src/views/system-manage/operation-logs/form.vue

@@ -0,0 +1,193 @@
+<script lang="ts" setup>
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { useVbenForm, z } from '#/adapter/form';
+import { getCustomerDetailApi } from '#/api/customer-manage';
+
+const data = ref();
+
+const getTitle = computed(() => (data.value?.create ? '新增客户' : '编辑客户'));
+
+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: 'usersname',
+      label: '用户名称',
+      componentProps: {
+        placeholder: '请输入用户名称',
+        allowClear: true,
+      },
+      rules: z.string().min(1, { message: '请输入用户名称' }),
+    },
+    {
+      component: 'Input',
+      fieldName: 'usersnature',
+      label: '用户性质',
+      componentProps: {
+        placeholder: '请输入用户性质',
+        allowClear: true,
+      },
+      rules: z.number().min(1, { message: '请输入用户性质' }),
+    },
+    {
+      component: 'Input',
+      fieldName: 'usersidcardnumber',
+      label: '用户证件号码',
+      componentProps: {
+        placeholder: '请输入用户证件号码',
+        allowClear: true,
+      },
+      rules: z.string().min(1, { message: '请输入用户证件号码' }),
+    },
+    {
+      component: 'Input',
+      fieldName: 'usersbankname',
+      label: '用户开户银行名称',
+      componentProps: {
+        placeholder: '请输入用户开户银行名称',
+        allowClear: true,
+      },
+      rules: z.string().min(1, { message: '请输入用户开户银行名称' }),
+    },
+    {
+      component: 'Input',
+      fieldName: 'usersbanknumber',
+      label: '用户开户银行账号',
+      componentProps: {
+        placeholder: '请输入用户开户银行账号',
+        allowClear: true,
+      },
+      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: 'userscontactaddress',
+      label: '用户联系地址',
+      componentProps: {
+        placeholder: '请输入用户联系地址',
+        allowClear: true,
+      },
+      rules: z.string().min(1, { message: '请输入用户联系地址' }),
+    },
+  ],
+});
+
+const [Modal, modalApi] = useVbenModal({
+  onCancel() {
+    modalApi.close();
+  },
+  async onConfirm() {
+    // 校验输入的数据
+    const validate = await baseFormApi.validate();
+    if (!validate.valid) {
+      return;
+    }
+
+    modalApi.close();
+    // const values = await baseFormApi.getValues();
+
+    // console.log(Object.keys(values));
+  },
+  async onOpenChange(isOpen) {
+    if (isOpen) {
+      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 });
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle">
+    <BaseForm />
+  </Modal>
+</template>

apps/web-ele/src/views/system-manage/operation-logs/index.vue

@@ -1,5 +1,147 @@
-<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 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({
+  fullscreenButton: false,
+  closeOnClickModal: false,
+  closeOnPressEscape: false,
+  connectedComponent: CustomerForm,
+});
+
+/* 创建 */
+function handleCreate() {
+  modalApi.setData({ create: true }).open();
+}
+
+/* 编辑 */
+function handleEdit(row: any) {
+  modalApi.setData({ row }).open();
+}
+
+/* 详情 */
+function handleDetail(row: any) {
+  modalApi.setData({ row }).open();
+  // router.push(`/system/users/detail/${row.userName}`);
+}
+</script>
 
 <template>
-  <div class="p-2">operation-logs</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-2"
+        />
+        <el-button
+          round
+          @click="() => handleEdit(row)"
+          :icon="MdiEdit"
+          class="!p-2"
+        />
+      </template>
+    </Grid>
+    <Modal />
+  </Page>
 </template>

apps/web-ele/src/views/system-manage/role-manage/form.vue

@@ -0,0 +1,193 @@
+<script lang="ts" setup>
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { useVbenForm, z } from '#/adapter/form';
+import { getCustomerDetailApi } from '#/api/customer-manage';
+
+const data = ref();
+
+const getTitle = computed(() => (data.value?.create ? '新增客户' : '编辑客户'));
+
+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: 'usersname',
+      label: '用户名称',
+      componentProps: {
+        placeholder: '请输入用户名称',
+        allowClear: true,
+      },
+      rules: z.string().min(1, { message: '请输入用户名称' }),
+    },
+    {
+      component: 'Input',
+      fieldName: 'usersnature',
+      label: '用户性质',
+      componentProps: {
+        placeholder: '请输入用户性质',
+        allowClear: true,
+      },
+      rules: z.number().min(1, { message: '请输入用户性质' }),
+    },
+    {
+      component: 'Input',
+      fieldName: 'usersidcardnumber',
+      label: '用户证件号码',
+      componentProps: {
+        placeholder: '请输入用户证件号码',
+        allowClear: true,
+      },
+      rules: z.string().min(1, { message: '请输入用户证件号码' }),
+    },
+    {
+      component: 'Input',
+      fieldName: 'usersbankname',
+      label: '用户开户银行名称',
+      componentProps: {
+        placeholder: '请输入用户开户银行名称',
+        allowClear: true,
+      },
+      rules: z.string().min(1, { message: '请输入用户开户银行名称' }),
+    },
+    {
+      component: 'Input',
+      fieldName: 'usersbanknumber',
+      label: '用户开户银行账号',
+      componentProps: {
+        placeholder: '请输入用户开户银行账号',
+        allowClear: true,
+      },
+      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: 'userscontactaddress',
+      label: '用户联系地址',
+      componentProps: {
+        placeholder: '请输入用户联系地址',
+        allowClear: true,
+      },
+      rules: z.string().min(1, { message: '请输入用户联系地址' }),
+    },
+  ],
+});
+
+const [Modal, modalApi] = useVbenModal({
+  onCancel() {
+    modalApi.close();
+  },
+  async onConfirm() {
+    // 校验输入的数据
+    const validate = await baseFormApi.validate();
+    if (!validate.valid) {
+      return;
+    }
+
+    modalApi.close();
+    // const values = await baseFormApi.getValues();
+
+    // console.log(Object.keys(values));
+  },
+  async onOpenChange(isOpen) {
+    if (isOpen) {
+      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 });
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle">
+    <BaseForm />
+  </Modal>
+</template>

apps/web-ele/src/views/system-manage/role-manage/index.vue

@@ -1,5 +1,147 @@
-<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 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({
+  fullscreenButton: false,
+  closeOnClickModal: false,
+  closeOnPressEscape: false,
+  connectedComponent: CustomerForm,
+});
+
+/* 创建 */
+function handleCreate() {
+  modalApi.setData({ create: true }).open();
+}
+
+/* 编辑 */
+function handleEdit(row: any) {
+  modalApi.setData({ row }).open();
+}
+
+/* 详情 */
+function handleDetail(row: any) {
+  modalApi.setData({ row }).open();
+  // router.push(`/system/users/detail/${row.userName}`);
+}
+</script>
 
 <template>
-  <div class="p-2">role-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-2"
+        />
+        <el-button
+          round
+          @click="() => handleEdit(row)"
+          :icon="MdiEdit"
+          class="!p-2"
+        />
+      </template>
+    </Grid>
+    <Modal />
+  </Page>
 </template>

apps/web-ele/src/views/system-manage/user-manage/form.vue

@@ -0,0 +1,193 @@
+<script lang="ts" setup>
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { useVbenForm, z } from '#/adapter/form';
+import { getCustomerDetailApi } from '#/api/customer-manage';
+
+const data = ref();
+
+const getTitle = computed(() => (data.value?.create ? '新增客户' : '编辑客户'));
+
+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: 'usersname',
+      label: '用户名称',
+      componentProps: {
+        placeholder: '请输入用户名称',
+        allowClear: true,
+      },
+      rules: z.string().min(1, { message: '请输入用户名称' }),
+    },
+    {
+      component: 'Input',
+      fieldName: 'usersnature',
+      label: '用户性质',
+      componentProps: {
+        placeholder: '请输入用户性质',
+        allowClear: true,
+      },
+      rules: z.number().min(1, { message: '请输入用户性质' }),
+    },
+    {
+      component: 'Input',
+      fieldName: 'usersidcardnumber',
+      label: '用户证件号码',
+      componentProps: {
+        placeholder: '请输入用户证件号码',
+        allowClear: true,
+      },
+      rules: z.string().min(1, { message: '请输入用户证件号码' }),
+    },
+    {
+      component: 'Input',
+      fieldName: 'usersbankname',
+      label: '用户开户银行名称',
+      componentProps: {
+        placeholder: '请输入用户开户银行名称',
+        allowClear: true,
+      },
+      rules: z.string().min(1, { message: '请输入用户开户银行名称' }),
+    },
+    {
+      component: 'Input',
+      fieldName: 'usersbanknumber',
+      label: '用户开户银行账号',
+      componentProps: {
+        placeholder: '请输入用户开户银行账号',
+        allowClear: true,
+      },
+      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: 'userscontactaddress',
+      label: '用户联系地址',
+      componentProps: {
+        placeholder: '请输入用户联系地址',
+        allowClear: true,
+      },
+      rules: z.string().min(1, { message: '请输入用户联系地址' }),
+    },
+  ],
+});
+
+const [Modal, modalApi] = useVbenModal({
+  onCancel() {
+    modalApi.close();
+  },
+  async onConfirm() {
+    // 校验输入的数据
+    const validate = await baseFormApi.validate();
+    if (!validate.valid) {
+      return;
+    }
+
+    modalApi.close();
+    // const values = await baseFormApi.getValues();
+
+    // console.log(Object.keys(values));
+  },
+  async onOpenChange(isOpen) {
+    if (isOpen) {
+      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 });
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle">
+    <BaseForm />
+  </Modal>
+</template>

apps/web-ele/src/views/system-manage/user-manage/index.vue

@@ -1,5 +1,147 @@
-<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 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({
+  fullscreenButton: false,
+  closeOnClickModal: false,
+  closeOnPressEscape: false,
+  connectedComponent: CustomerForm,
+});
+
+/* 创建 */
+function handleCreate() {
+  modalApi.setData({ create: true }).open();
+}
+
+/* 编辑 */
+function handleEdit(row: any) {
+  modalApi.setData({ row }).open();
+}
+
+/* 详情 */
+function handleDetail(row: any) {
+  modalApi.setData({ row }).open();
+  // router.push(`/system/users/detail/${row.userName}`);
+}
+</script>
 
 <template>
-  <div class="p-2">user-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-2"
+        />
+        <el-button
+          round
+          @click="() => handleEdit(row)"
+          :icon="MdiEdit"
+          class="!p-2"
+        />
+      </template>
+    </Grid>
+    <Modal />
+  </Page>
 </template>