fix: 一些基本功能

apps/web-antd/src/views/system/admin/api/index.ts

@@ -0,0 +1,74 @@
+import { requestClient } from '#/api/request';
+
+const prefix = 'admin/';
+/**
+ * 分页查询用户列表
+ * @param data
+ */
+export async function getAdminList(data: any) {
+  return requestClient.get<any>(`${prefix}list`, { params: data });
+}
+/**
+ * 分页查询用户列表
+ * @param data
+ */
+export async function getAdminAccountBalance(data: any = {}) {
+  return requestClient.get<any>(`${prefix}my-balance`, { params: data });
+}
+
+/**
+ * 获取管理员详情
+ * @param id
+ */
+export async function getAdminInfo(id: number) {
+  return requestClient.get<any>(`${prefix}detail`, { params: { id } });
+}
+
+/**
+ * 新增管理员
+ * @param data
+ */
+export async function createAdmin(data: Record<string, any>) {
+  return requestClient.post<any>(`${prefix}create`, data);
+}
+
+/**
+ * 编辑管理员
+ * @param data
+ */
+export async function updateAdmin(data: Record<string, any>) {
+  return requestClient.post<any>(`${prefix}update`, data);
+}
+
+/**
+ * 删除管理员
+ * @param data
+ */
+export async function deleteAdmin(data: Record<string, any>) {
+  return requestClient.post<any>(`${prefix}delete`, data);
+}
+
+/**
+ * 删除管理员
+ * @param id
+ */
+export async function resetPassword(id: number) {
+  return requestClient.post<any>(`${prefix}reset-password`, {
+    id,
+  });
+}
+
+/**
+ * 获取我绑定的银行卡
+ */
+export async function getMyCard() {
+  return requestClient.get<any>(`${prefix}my-card`);
+}
+
+/**
+ * 编辑账户绑定银行卡
+ * @param data
+ */
+export async function saveCard(data: Record<string, any>) {
+  return requestClient.post<any>(`${prefix}save-card`, data);
+}

apps/web-antd/src/views/system/admin/components/modal.vue

@@ -0,0 +1,65 @@
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { message } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+import { createAdmin, updateAdmin } from '#/views/system/admin/api';
+import { modalFormProps } from '#/views/system/admin/config/form';
+
+defineOptions({
+  name: 'FormModelDemo',
+});
+
+const isUpdate = ref(false);
+const gridApi = ref();
+
+const [Form, formApi] = useVbenForm(modalFormProps);
+
+const [Modal, modalApi] = useVbenModal({
+  fullscreenButton: false,
+  draggable: true,
+  onCancel() {
+    modalApi.close();
+  },
+  onConfirm: async () => {
+    formApi.validate().then(async (e: any) => {
+      if (e.valid) {
+        const values = await formApi.getValues();
+        modalApi.setState({ loading: true, confirmLoading: true });
+        const submitApi = isUpdate.value ? updateAdmin : createAdmin;
+        submitApi(values)
+          .then(() => {
+            message.success('保存成功');
+            gridApi.value?.reload();
+            modalApi.close();
+          })
+          .finally(() => {
+            modalApi.setState({ loading: false, confirmLoading: false });
+          });
+      }
+    });
+    await formApi.validateAndSubmitForm();
+  },
+  onOpenChange(isOpen: boolean) {
+    gridApi.value = isOpen ? modalApi.getData()?.gridApi : null;
+    if (isOpen) {
+      const { values, update } = modalApi.getData<Record<string, any>>();
+      if (values) {
+        isUpdate.value = update;
+        formApi.setValues(values);
+      }
+    }
+  },
+});
+</script>
+<template>
+  <Modal
+    :title="`${isUpdate === true ? '编辑' : '新增'}管理员`"
+    class="w-[60%]"
+  >
+    <Form />
+  </Modal>
+</template>

apps/web-antd/src/views/system/admin/config/form.ts

@@ -0,0 +1,172 @@
+import type { VbenFormProps } from '#/adapter/form';
+
+import { z } from '#/adapter/form';
+import { getRoleOption } from '#/views/system/role/api';
+import { getSupplierOption } from '#/views/system/supplier/api';
+
+const defaultPassword = 'Xk123456@';
+
+const supplierId = 7;
+export const modalFormProps: VbenFormProps = {
+  wrapperClass: 'grid-cols-12', // 24栅格,
+  commonConfig: {
+    formItemClass: 'col-span-12',
+    // 所有表单项
+    componentProps: {
+      class: 'w-full',
+    },
+  },
+  // handleSubmit: onSubmit,
+  layout: 'horizontal',
+  schema: [
+    {
+      component: 'VbenInput',
+      fieldName: 'id',
+      label: 'ID',
+      formItemClass: 'col-span-6',
+      dependencies: {
+        show: false,
+        triggerFields: ['id'],
+      },
+    },
+    {
+      component: 'VbenInput',
+      componentProps: {
+        placeholder: '请输入管理员昵称',
+      },
+      fieldName: 'nick_name',
+      label: '昵称',
+      rules: 'required',
+      formItemClass: 'col-span-6',
+    },
+    {
+      component: 'Avatar',
+      fieldName: 'avatar',
+      label: '头像',
+      rules: 'required',
+      formItemClass: 'col-span-6',
+    },
+    {
+      component: 'VbenInput',
+      componentProps: {
+        placeholder: '请输入管理员手机号码',
+      },
+      fieldName: 'phone',
+      label: '手机号',
+      rules: 'required',
+      formItemClass: 'col-span-6',
+    },
+    {
+      component: 'ApiSelect',
+      componentProps: {
+        allowClear: true,
+        filterOption: (input: string, option: any) => {
+          // 自定义过滤逻辑，确保可以根据 name 进行搜索
+          return option?.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
+        },
+        showSearch: true,
+        // 菜单接口转options格式
+        afterFetch: (data: { id: number; name: string }[]) => {
+          return data.map((item: any) => ({
+            label: item.name,
+            value: item.id,
+          }));
+        },
+        api: getRoleOption,
+        placeholder: '请选择',
+      },
+      fieldName: 'role_id',
+      formItemClass: 'col-span-6',
+      label: '角色',
+      rules: 'required',
+    },
+    {
+      component: 'ApiSelect',
+      componentProps: {
+        allowClear: true,
+        filterOption: true,
+        showSearch: true,
+        // 菜单接口转options格式
+        afterFetch: (data: { id: number; name: string }[]) => {
+          return data.map((item: any) => ({
+            label: item.name,
+            value: item.id,
+          }));
+        },
+        api: getSupplierOption,
+        placeholder: '请选择',
+      },
+      dependencies: {
+        show: (values) => {
+          return values.role_id === supplierId;
+        },
+        triggerFields: ['role_id'],
+      },
+      fieldName: 'supplier_id',
+      formItemClass: 'col-span-6',
+      label: '所属供应商',
+      rules: 'required',
+    },
+    {
+      fieldName: 'password',
+      label: '密码',
+      component: 'InputPassword',
+      help: '5-18位数字、字母、特殊字符组成。',
+      componentProps: {
+        placeholder: '请输入密码',
+        allowClear: true,
+      },
+      defaultValue: defaultPassword,
+      rules: z
+        .string()
+        .regex(
+          /^(?=.*[A-Z0-9])(?=.*[!@#$%^&*])[A-Z0-9!@#$%^&*]{5,18}$/i,
+          '密码由5-18位数字、字母、特殊字符组成。',
+        ),
+      dependencies: {
+        if({ id }) {
+          return !id;
+        },
+        triggerFields: ['id'],
+      },
+      formItemClass: 'col-span-6',
+    },
+    {
+      fieldName: 'confirmPassword',
+      label: '确认密码',
+      component: 'InputPassword',
+      componentProps: {
+        placeholder: '请输入确认密码',
+        allowClear: true,
+      },
+      defaultValue: defaultPassword,
+      rules: z
+        .string()
+        .regex(/[\w!@#$%^&*]{5,18}/, '密码由5-18位数字、字母、特殊字符组成。'),
+      dependencies: {
+        if({ id }) {
+          return !id;
+        },
+        triggerFields: ['id', 'confirmPassword'],
+        rules: (values) => {
+          return z
+            .string()
+            .regex(
+              /[\w!@#$%^&*]{5,18}/,
+              '密码由5-18位数字、字母、特殊字符组成。',
+            )
+            .refine(
+              (confirmPassword) => {
+                return confirmPassword === values.password;
+              },
+              {
+                message: '确认密码必须与密码一致',
+              },
+            );
+        },
+      },
+      formItemClass: 'col-span-6',
+    },
+  ],
+  showDefaultActions: false,
+};

apps/web-antd/src/views/system/admin/config/search.ts

@@ -0,0 +1,56 @@
+import type { VbenFormProps } from '#/adapter/form';
+
+import { getRoleOption } from '#/views/system/role/api';
+
+export const formOptions: VbenFormProps = {
+  // 默认展开
+  collapsed: false,
+  schema: [
+    {
+      component: 'VbenInput',
+      componentProps: {
+        placeholder: '输入名称',
+      },
+      defaultValue: '',
+      fieldName: 'nick_name',
+      label: '管理员名称',
+    },
+    {
+      component: 'VbenInput',
+      componentProps: {
+        placeholder: '输入手机号码',
+      },
+      defaultValue: '',
+      fieldName: 'phone',
+      label: '手机号码',
+    },
+    {
+      component: 'ApiSelect',
+      componentProps: {
+        allowClear: true,
+        filterOption: true,
+        showSearch: true,
+        // 菜单接口转options格式
+        afterFetch: (data: { id: number; name: string }[]) => {
+          return data.map((item: any) => ({
+            label: item.name,
+            value: item.id,
+          }));
+        },
+        api: getRoleOption,
+        placeholder: '请选择',
+      },
+      fieldName: 'role_id',
+      label: '角色',
+    },
+  ],
+  // 控制表单是否显示折叠按钮
+  showCollapseButton: true,
+  submitButtonOptions: {
+    content: '查询',
+  },
+  // 是否在字段值改变时提交表单
+  submitOnChange: true,
+  // 按下回车时是否提交表单
+  submitOnEnter: false,
+};

apps/web-antd/src/views/system/admin/config/table.ts

@@ -0,0 +1,86 @@
+import type { VxeGridProps } from '#/adapter/vxe-table';
+
+import { getAdminList } from '#/views/system/admin/api';
+
+interface RowType {
+  id: string;
+  nick_name: string;
+  email: string;
+  avatar: string;
+  roles: { name: string }[];
+  open_id: string;
+  code: string;
+  platform_id: string;
+  phone: string;
+  desc: string;
+  created_at: string;
+}
+
+export const gridOptions: VxeGridProps<RowType> = {
+  checkboxConfig: {
+    highlight: true,
+    labelField: '',
+  },
+  columnConfig: {
+    useKey: true,
+  },
+  rowConfig: {
+    useKey: true,
+  },
+  columns: [
+    { type: 'checkbox', width: 60 },
+    { field: 'id', align: 'left', title: 'ID', width: 100 },
+    { field: 'nick_name', align: 'left', title: '名称' },
+    {
+      field: 'avatar',
+      align: 'left',
+      title: '头像',
+      slots: { default: 'avatar' },
+      width: 130,
+    },
+    { field: 'roles.name', title: '角色' },
+    { field: 'open_id', title: 'Open ID' },
+    { field: 'code', title: '业务推广码' },
+    { field: 'platform.name', title: '所属平台' },
+    { field: 'supplier.name', title: '所属供应商' },
+    { field: 'phone', title: '手机号码' },
+    { field: 'email', title: '邮箱' },
+    { field: 'desc', title: '备注' },
+    { field: 'created_at', title: '注册时间' },
+    { type: 'html', title: '操作', width: 200, slots: { default: 'action' } },
+  ],
+  keepSource: true,
+  pagerConfig: {},
+  proxyConfig: {
+    ajax: {
+      // 请求后端接口方法
+      query: async ({ page }, formValues) => {
+        return await getAdminList({
+          page: page.currentPage,
+          pageSize: page.pageSize,
+          ...formValues,
+        });
+      },
+    },
+  },
+  height: 'auto',
+  border: false,
+  toolbarConfig: {
+    // 是否显示搜索表单控制按钮
+    // @ts-ignore 正式环境时有完整的类型声明
+    search: true,
+    refresh: true, // 刷新
+    print: false, // 打印
+    export: false, // 导出
+    // custom: true, // 自定义列
+    zoom: true, // 最大化最小化
+    slots: {
+      buttons: 'toolbar-buttons',
+    },
+    custom: {
+      // 自定义列-图标
+      icon: 'vxe-icon-menu',
+    },
+  },
+  showOverflow: false,
+};

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

@@ -0,0 +1,153 @@
+<script lang="ts" setup>
+import type { VxeGridListeners } from '#/adapter/vxe-table';
+
+import { ref } from 'vue';
+
+import { Page, useVbenModal } from '@vben/common-ui';
+
+import { Button, Image, message } from 'ant-design-vue';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { TableAction } from '#/components/table-action';
+
+import {deleteAdmin, resetPassword} from './api';
+import FormModalDemo from './components/modal.vue';
+import { formOptions } from './config/search';
+import { gridOptions } from './config/table';
+
+const hasTopTableDropDownActions = ref(false);
+
+const gridEvents: VxeGridListeners<any> = {
+  checkboxChange() {
+    // eslint-disable-next-line no-use-before-define
+    const records = gridApi.grid.getCheckboxRecords();
+    hasTopTableDropDownActions.value = records.length > 0;
+  },
+  checkboxAll() {
+    // eslint-disable-next-line no-use-before-define
+    const records = gridApi.grid.getCheckboxRecords();
+    hasTopTableDropDownActions.value = records.length > 0;
+  },
+};
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions,
+  gridOptions,
+  gridEvents,
+});
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: FormModalDemo,
+});
+
+const showModal = (data = {}, isUpdate = false) => {
+  formModalApi.setData({
+    // 表单值
+    values: data,
+    update: isUpdate,
+    gridApi,
+  });
+  formModalApi.open();
+};
+
+const deleteApi = (row: any) => {
+  let ids = [];
+  if (row) {
+    ids.push(row);
+  } else {
+    ids = gridApi.grid.getCheckboxRecords().map((item) => item.id);
+  }
+  deleteAdmin({ ids }).then(() => {
+    message.success('删除成功!');
+    gridApi.reload();
+  });
+};
+
+const resetPasswordApi = (id: number) => {
+  resetPassword(id).then(() => {
+    message.success('删除成功!');
+    gridApi.reload();
+  });
+};
+</script>
+
+<template>
+  <Page auto-content-height title="管理员管理">
+    <FormModal />
+    <Grid>
+      <template #toolbar-buttons>
+        <TableAction
+          :actions="[
+            {
+              label: '新增',
+              type: 'primary',
+              icon: 'ant-design:plus-outlined',
+              // auth: ['超级管理员', 'sys:user:save'],
+              onClick: showModal.bind(null),
+            },
+          ]"
+          :drop-down-actions="[
+            {
+              label: '删除',
+              icon: 'ant-design:delete-outlined',
+              ifShow: hasTopTableDropDownActions,
+              // auth: ['超级管理员', 'sys:user:save'],
+              popConfirm: {
+                title: '确定删除吗？',
+                confirm: deleteApi.bind(null, false),
+              },
+            },
+          ]"
+        >
+          <template #more>
+            <Button style="margin-left: 16px">
+              批量操作
+              <Icon icon="ant-design:down-outlined" />
+            </Button>
+          </template>
+        </TableAction>
+      </template>
+      <template #avatar="{ row }">
+        <Image :src="row.avatar" height="30" width="30" />
+      </template>
+      <template #toolbar-tools></template>
+      <template #action="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: '编辑',
+              type: 'link',
+              icon: 'uil:edit',
+              size: 'small',
+              // auth: ['admin', 'sys:role:detail'],
+              onClick: showModal.bind(null, row, true),
+            },
+            {
+              label: '删除',
+              type: 'link',
+              icon: 'ant-design:delete-outlined',
+              size: 'small',
+              // auth: ['admin', 'sys:role:detail'],
+              popConfirm: {
+                title: '确定删除吗？',
+                confirm: deleteApi.bind(null, row.id),
+              },
+            },
+          ]"
+          :drop-down-actions="[
+            {
+              label: '重置密码',
+              type: 'link',
+              icon: 'bitcoin-icons:refresh-filled',
+              size: 'small',
+              popConfirm: {
+                title: '确定重置密码吗？',
+                confirm: resetPasswordApi.bind(null, row.id),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>

apps/web-antd/src/views/system/menu/api/index.ts

@@ -0,0 +1,75 @@
+import {requestClient} from '#/api/request';
+
+const prefix = 'menu/';
+
+/**
+ * 分页查询用户列表
+ * @param data
+ */
+export async function getMenuList(data: any) {
+  return requestClient.get<any>(`${prefix}list`, { params: data });
+}
+
+/**
+ * 查询菜单下拉框
+ * @param data
+ */
+export async function getMenuOption(data: any) {
+  return requestClient.get<any>(`${prefix}option`, {
+    params: {
+      ...data,
+      is_select: true,
+    },
+  });
+}
+
+/**
+ * 查询菜单树形下拉框
+ * @param data
+ */
+export async function getMenuTreeOption(data: any) {
+  return requestClient.get<any>(`${prefix}get-tree-option`, data);
+}
+
+/**
+ * 查询菜单树形下拉框
+ */
+export async function getMenuTreeOptionSelect() {
+  return requestClient.get<any>(`${prefix}get-tree-option`, {
+    params: {
+      is_select: true,
+    },
+  });
+}
+
+/**
+ * 获取详情
+ * @param id
+ */
+export async function getMenuInfo(id: number) {
+  return requestClient.get<any>(`${prefix}detail`, { params: { id } });
+}
+
+/**
+ * 新增角色
+ * @param data
+ */
+export async function createMenu(data: Record<string, any>) {
+  return requestClient.post<any>(`${prefix}create`, data);
+}
+
+/**
+ * 编辑角色
+ * @param data
+ */
+export async function updateMenu(data: Record<string, any>) {
+  return requestClient.post<any>(`${prefix}update`, data);
+}
+
+/**
+ * 删除角色
+ * @param data
+ */
+export async function deleteMenu(data: Record<string, any>) {
+  return requestClient.post<any>(`${prefix}delete`, data);
+}

apps/web-antd/src/views/system/menu/components/modal.vue

@@ -0,0 +1,65 @@
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { message } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+import { createMenu, updateMenu } from '../api';
+import { modalFormProps } from '../config/form';
+
+defineOptions({
+  name: 'FormModelDemo',
+});
+
+const isUpdate = ref(false);
+const gridApi = ref();
+
+const [Form, formApi] = useVbenForm(modalFormProps);
+
+const [Modal, modalApi] = useVbenModal({
+  fullscreenButton: false,
+  draggable: true,
+  onCancel() {
+    modalApi.close();
+  },
+  onConfirm: async () => {
+    formApi.validate().then(async (e: any) => {
+      if (e.valid) {
+        const values = await formApi.getValues();
+        modalApi.setState({ loading: true, confirmLoading: true });
+        const submitApi = isUpdate.value ? updateMenu : createMenu;
+        submitApi(values)
+          .then(() => {
+            message.success('保存成功');
+            gridApi.value?.reload();
+            modalApi.close();
+          })
+          .finally(() => {
+            modalApi.setState({ loading: false, confirmLoading: false });
+          });
+      }
+    });
+    await formApi.validateAndSubmitForm();
+  },
+  onOpenChange(isOpen: boolean) {
+    gridApi.value = isOpen ? modalApi.getData()?.gridApi : null;
+    if (isOpen) {
+      const { values, update } = modalApi.getData<Record<string, any>>();
+      if (values) {
+        isUpdate.value = update;
+        formApi.setValues(values);
+      }
+    }
+  },
+});
+</script>
+<template>
+  <Modal
+    :title="`${isUpdate === true ? '编辑' : '新增'}菜单`"
+    class="w-[60%]"
+  >
+    <Form />
+  </Modal>
+</template>

apps/web-antd/src/views/system/menu/config/form.ts

@@ -0,0 +1,180 @@
+import type { VbenFormProps } from '#/adapter/form';
+
+import { getMenuTreeOptionSelect } from '#/views/system/menu/api';
+
+export const modalFormProps: VbenFormProps = {
+  wrapperClass: 'grid-cols-12', // 24栅格,
+  commonConfig: {
+    formItemClass: 'col-span-6',
+    // 所有表单项
+    componentProps: {
+      class: 'w-full',
+    },
+  },
+  // handleSubmit: onSubmit,
+  layout: 'horizontal',
+  schema: [
+    {
+      component: 'VbenInput',
+      fieldName: 'id',
+      label: 'ID',
+      dependencies: {
+        show: false,
+        triggerFields: ['id'],
+      },
+    },
+    {
+      component: 'VbenInput',
+      componentProps: {
+        placeholder: '请输入菜单标题',
+      },
+      fieldName: 'title',
+      label: '菜单标题',
+      rules: 'required',
+    },
+    {
+      component: 'ApiTreeSelect',
+      // 对应组件的参数
+      componentProps: {
+        childrenField: 'children',
+        labelField: 'title',
+        valueField: 'id',
+        // 菜单接口
+        api: getMenuTreeOptionSelect,
+      },
+      defaultValue: 0,
+      fieldName: 'pid',
+      label: '父级菜单',
+      rules: 'required',
+    },
+    {
+      component: 'VbenInput',
+      componentProps: {
+        placeholder: '请输入菜单图标',
+      },
+      fieldName: 'icon',
+      label: '菜单图标',
+      rules: 'required',
+    },
+    // {
+    //   component: 'IconPicker',
+    //   componentProps: {
+    //     placeholder: '请输入菜单图标',
+    //   },
+    //   fieldName: 'icon',
+    //   label: '菜单图标',
+    //   rules: 'required',
+    // },
+    {
+      component: 'VbenInput',
+      componentProps: {
+        placeholder: '请输入路由名称',
+      },
+      fieldName: 'name',
+      label: '路由名称',
+      rules: 'required',
+    },
+    {
+      component: 'VbenInput',
+      componentProps: {
+        placeholder: '请输入访问路由',
+      },
+      fieldName: 'path',
+      label: '访问路由',
+      rules: 'required',
+    },
+    {
+      component: 'InputNumber',
+      componentProps: {
+        placeholder: '请输入排序',
+      },
+      defaultValue: 0,
+      fieldName: 'sort',
+      label: '排序',
+      rules: 'required',
+    },
+    {
+      component: 'RadioGroup',
+      componentProps: {
+        options: [
+          {
+            label: '开启',
+            value: 0,
+          },
+          {
+            label: '关闭',
+            value: 1,
+          },
+        ],
+      },
+      defaultValue: 1,
+      fieldName: 'keep_alive',
+      label: '缓存',
+      rules: 'required',
+    },
+    {
+      component: 'RadioGroup',
+      componentProps: {
+        options: [
+          {
+            label: '展示',
+            value: 0,
+          },
+          {
+            label: '隐藏',
+            value: 1,
+          },
+        ],
+      },
+      defaultValue: 0,
+      fieldName: 'hide_in_menu',
+      label: '是否展示',
+      rules: 'required',
+    },
+    {
+      component: 'RadioGroup',
+      componentProps: {
+        options: [
+          {
+            label: '是',
+            value: 0,
+          },
+          {
+            label: '否',
+            value: 1,
+          },
+        ],
+      },
+      defaultValue: 1,
+      fieldName: 'affix_tab',
+      label: '是否置顶',
+      rules: 'required',
+    },
+    {
+      component: 'VbenInput',
+      componentProps: {
+        placeholder: '请输入组件地址',
+      },
+      defaultValue: 'BasicLayout',
+      fieldName: 'component',
+      label: '组件地址',
+    },
+    {
+      component: 'VbenInput',
+      componentProps: {
+        placeholder: '请输入重定向地址',
+      },
+      fieldName: 'redirect',
+      label: '重定向地址',
+    },
+    {
+      component: 'VbenInput',
+      componentProps: {
+        placeholder: '请输入携带参数',
+      },
+      fieldName: 'query',
+      label: '携带参数',
+    },
+  ],
+  showDefaultActions: false,
+};

apps/web-antd/src/views/system/menu/config/search.ts

@@ -0,0 +1,47 @@
+import type { VbenFormProps } from '#/adapter/form';
+
+export const formOptions: VbenFormProps = {
+  // 默认展开
+  collapsed: false,
+  schema: [
+    {
+      component: 'VbenInput',
+      componentProps: {
+        placeholder: '输入标题',
+      },
+      defaultValue: '',
+      fieldName: 'title',
+      label: '菜单标题',
+    },
+    // {
+    //   component: 'VbenSelect',
+    //   componentProps: {
+    //     allowClear: true,
+    //     filterOption: true,
+    //     showSearch: true,
+    //     options: [
+    //       {
+    //         label: '超管',
+    //         value: 1,
+    //       },
+    //       {
+    //         label: '菜单',
+    //         value: 2,
+    //       },
+    //     ],
+    //     placeholder: '请选择',
+    //   },
+    //   fieldName: 'role_id',
+    //   label: '角色',
+    // },
+  ],
+  // 控制表单是否显示折叠按钮
+  showCollapseButton: true,
+  submitButtonOptions: {
+    content: '查询',
+  },
+  // 是否在字段值改变时提交表单
+  submitOnChange: true,
+  // 按下回车时是否提交表单
+  submitOnEnter: false,
+};

apps/web-antd/src/views/system/menu/config/table.ts

@@ -0,0 +1,97 @@
+import type { VxeGridProps } from '#/adapter/vxe-table';
+
+import { getMenuList } from '../api';
+
+interface RowType {
+  id: string;
+  nick_name: string;
+  email: string;
+  avatar: string;
+  roles: { name: string }[];
+  open_id: string;
+  code: string;
+  platform_id: string;
+  phone: string;
+  desc: string;
+  created_at: string;
+}
+
+export const gridOptions: VxeGridProps<RowType> = {
+  checkboxConfig: {
+    highlight: true,
+    labelField: '',
+  },
+  columnConfig: {
+    useKey: true,
+  },
+  rowConfig: {
+    useKey: true,
+  },
+  columns: [
+    { type: 'checkbox', width: 60 },
+    { width: 60, treeNode: true },
+    { field: 'id', align: 'left', title: 'ID', width: 100 },
+    { field: 'title', align: 'left', title: '菜单名称' },
+    { field: 'icon', title: '图标', slots: { default: 'icon' } },
+    { field: 'path', title: '路由' },
+    { field: 'name', title: '路由Name' },
+    { field: 'component', title: '组件地址' },
+    { field: 'redirect', title: '重定向' },
+    { field: 'keep_alive', title: '页面缓存' },
+    { field: 'hide_in_menu', title: '菜单展示' },
+    { field: 'badge', title: '徽标' },
+    { field: 'badge_type', title: '徽标类型' },
+    { field: 'badge_variants', title: '徽标颜色' },
+    { field: 'iframe_src', title: '引用的页面地址' },
+    { field: 'sort', title: '排序' },
+    { field: 'query', title: '默认参数' },
+    { field: 'created_at', title: '创建时间' },
+    {
+      type: 'html',
+      align: 'right',
+      title: '操作',
+      slots: { default: 'action' },
+      width: 200,
+    },
+  ],
+  treeConfig: {
+    parentField: 'pid',
+    rowField: 'id',
+    transform: true,
+    expandAll: true,
+  },
+  keepSource: true,
+  pagerConfig: {},
+  proxyConfig: {
+    ajax: {
+      // 请求后端接口方法
+      query: async ({ page }, formValues) => {
+        return await getMenuList({
+          page: page.currentPage,
+          pageSize: page.pageSize,
+          ...formValues,
+        });
+      },
+    },
+  },
+  height: 'auto',
+  border: false,
+  toolbarConfig: {
+    // 是否显示搜索表单控制按钮
+    // @ts-ignore 正式环境时有完整的类型声明
+    search: true,
+    refresh: true, // 刷新
+    print: false, // 打印
+    export: false, // 导出
+    // custom: true, // 自定义列
+    zoom: true, // 最大化最小化
+    slots: {
+      buttons: 'toolbar-buttons',
+    },
+    custom: {
+      // 自定义列-图标
+      icon: 'vxe-icon-menu',
+    },
+  },
+  showOverflow: false,
+};

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

@@ -0,0 +1,169 @@
+<script lang="ts" setup>
+import type { VxeGridListeners } from '#/adapter/vxe-table';
+
+import { ref } from 'vue';
+
+import { Page, useVbenModal } from '@vben/common-ui';
+import AuthMenu from '../role/components/auth-menu.vue';
+
+import { Button, message } from 'ant-design-vue';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { TableAction } from '#/components/table-action';
+
+import { deleteMenu } from './api';
+import FormModalDemo from './components/modal.vue';
+import { formOptions } from './config/search';
+import { gridOptions } from './config/table';
+import {Icon} from "#/components/icon";
+
+const hasTopTableDropDownActions = ref(false);
+
+const gridEvents: VxeGridListeners<any> = {
+  checkboxChange() {
+    // eslint-disable-next-line no-use-before-define
+    const records = gridApi.grid.getCheckboxRecords();
+    hasTopTableDropDownActions.value = records.length > 0;
+  },
+  checkboxAll() {
+    // eslint-disable-next-line no-use-before-define
+    const records = gridApi.grid.getCheckboxRecords();
+    hasTopTableDropDownActions.value = records.length > 0;
+  },
+};
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions,
+  gridOptions,
+  gridEvents,
+});
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: FormModalDemo,
+});
+
+const showModal = (data = {}, isUpdate = false) => {
+  formModalApi.setData({
+    // 表单值
+    values: data,
+    update: isUpdate,
+    gridApi,
+  });
+  formModalApi.open();
+};
+
+const deleteApi = (row: any) => {
+  let ids = [];
+  if (row) {
+    ids.push(row);
+  } else {
+    ids = gridApi.grid.getCheckboxRecords().map((item) => item.id);
+  }
+  deleteMenu({ ids }).then(() => {
+    message.success('删除成功!');
+    gridApi.reload();
+  });
+};
+
+const expandAll = () => {
+  gridApi.grid?.setAllTreeExpand(true);
+};
+
+const collapseAll = () => {
+  gridApi.grid?.setAllTreeExpand(false);
+};
+</script>
+
+<template>
+  <Page auto-content-height title="菜单管理">
+    <FormModal />
+    <Grid>
+      <template #toolbar-buttons>
+        <TableAction
+          :actions="[
+            {
+              label: '新增',
+              type: 'primary',
+              icon: 'ant-design:plus-outlined',
+              // auth: ['超级菜单', 'sys:user:save'],
+              onClick: showModal.bind(null),
+            },
+            {
+              label: '展开全部',
+              type: 'primary',
+              // auth: ['超级菜单', 'sys:user:save'],
+              onClick: expandAll.bind(null),
+            },
+            {
+              label: '收起全部',
+              type: 'primary',
+              // auth: ['超级菜单', 'sys:user:save'],
+              onClick: collapseAll.bind(null),
+            },
+          ]"
+          :drop-down-actions="[
+            {
+              label: '删除',
+              icon: 'ant-design:delete-outlined',
+              ifShow: hasTopTableDropDownActions,
+              // auth: ['超级菜单', 'sys:user:save'],
+              popConfirm: {
+                title: '确定删除吗？',
+                confirm: deleteApi.bind(null, false),
+              },
+            },
+          ]"
+        >
+          <template #more>
+            <Button style="margin-left: 16px">
+              批量操作
+              <Icon icon="ant-design:down-outlined" />
+            </Button>
+          </template>
+        </TableAction>
+      </template>
+      <template #icon="{ row }">
+        <Icon :icon="row.icon" />
+      </template>
+      <template #toolbar-tools></template>
+      <template #action="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: '编辑',
+              type: 'link',
+              icon: 'uil:edit',
+              size: 'small',
+              // auth: ['admin', 'sys:role:detail'],
+              onClick: showModal.bind(null, row, true),
+            },
+          ]"
+          :drop-down-actions="[
+            {
+              label: '删除',
+              type: 'link',
+              icon: 'ant-design:delete-outlined',
+              size: 'small',
+              // auth: ['admin', 'sys:role:detail'],
+              popConfirm: {
+                title: '确定删除吗？',
+                confirm: deleteApi.bind(null, row.id),
+              },
+            },
+            {
+              label: '删除',
+              type: 'link',
+              icon: 'ant-design:delete-outlined',
+              size: 'small',
+              // auth: ['admin', 'sys:role:detail'],
+              popConfirm: {
+                title: '确定删除吗？',
+                confirm: deleteApi.bind(null, row.id),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>

apps/web-antd/src/views/system/platform/api/index.ts

@@ -0,0 +1,41 @@
+import { requestClient } from '#/api/request';
+
+/**
+ * 分页查询用户列表
+ * @param data
+ */
+export async function getPlatformList(data: any) {
+  return requestClient.get<any>('platform/list', { params: data });
+}
+
+/**
+ * 获取平台详情
+ * @param id
+ */
+export async function getPlatformInfo(id: number) {
+  return requestClient.get<any>('platform/detail', { params: { id } });
+}
+
+/**
+ * 新增平台
+ * @param data
+ */
+export async function createPlatform(data: Record<string, any>) {
+  return requestClient.post<any>('platform/create', data);
+}
+
+/**
+ * 编辑平台
+ * @param data
+ */
+export async function updatePlatform(data: Record<string, any>) {
+  return requestClient.post<any>('platform/update', data);
+}
+
+/**
+ * 删除平台
+ * @param data
+ */
+export async function deletePlatform(data: Record<string, any>) {
+  return requestClient.post<any>('platform/delete', data);
+}

apps/web-antd/src/views/system/platform/components/modal.vue

@@ -0,0 +1,62 @@
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { message } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+import { createPlatform, updatePlatform } from '#/views/system/platform/api';
+import { modalFormProps } from '#/views/system/platform/config/form';
+
+defineOptions({
+  name: 'FormModelDemo',
+});
+
+const isUpdate = ref(false);
+const gridApi = ref();
+
+const [Form, formApi] = useVbenForm(modalFormProps);
+
+const [Modal, modalApi] = useVbenModal({
+  fullscreenButton: false,
+  draggable: true,
+  onCancel() {
+    modalApi.close();
+  },
+  onConfirm: async () => {
+    formApi.validate().then(async (e: any) => {
+      if (e.valid) {
+        const values = await formApi.getValues();
+        modalApi.setState({ loading: true, confirmLoading: true });
+        const submitApi = isUpdate.value ? updatePlatform : createPlatform;
+        submitApi(values)
+          .then(() => {
+            message.success('保存成功');
+            gridApi.value?.reload();
+            modalApi.close();
+          })
+          .finally(() => {
+            modalApi.setState({ loading: false, confirmLoading: false });
+          });
+      }
+    });
+    await formApi.validateAndSubmitForm();
+  },
+  onOpenChange(isOpen: boolean) {
+    gridApi.value = isOpen ? modalApi.getData()?.gridApi : null;
+    if (isOpen) {
+      const { values, update } = modalApi.getData<Record<string, any>>();
+      if (values) {
+        isUpdate.value = update;
+        formApi.setValues(values);
+      }
+    }
+  },
+});
+</script>
+<template>
+  <Modal :title="`${isUpdate === true ? '编辑' : '新增'}平台`" class="w-[30%]">
+    <Form />
+  </Modal>
+</template>

apps/web-antd/src/views/system/platform/config/form.ts

@@ -0,0 +1,51 @@
+import type { VbenFormProps } from '#/adapter/form';
+
+export const modalFormProps: VbenFormProps = {
+  wrapperClass: 'grid-cols-12', // 24栅格,
+  commonConfig: {
+    formItemClass: 'col-span-12',
+    // 所有表单项
+    componentProps: {
+      class: 'w-full',
+    },
+  },
+  // handleSubmit: onSubmit,
+  layout: 'horizontal',
+  schema: [
+    {
+      component: 'VbenInput',
+      fieldName: 'id',
+      label: 'ID',
+      formItemClass: 'col-span-6',
+      dependencies: {
+        show: false,
+        triggerFields: ['id'],
+      },
+    },
+    {
+      component: 'VbenInput',
+      componentProps: {
+        placeholder: '请输入平台昵称',
+      },
+      fieldName: 'name',
+      label: '平台名称',
+      rules: 'required',
+    },
+    {
+      component: 'Avatar',
+      fieldName: 'logo',
+      label: 'LOGO',
+      rules: 'required',
+    },
+    {
+      component: 'Textarea',
+      componentProps: {
+        placeholder: '请输入平台介绍',
+      },
+      fieldName: 'introduce',
+      label: '平台介绍',
+      rules: 'required',
+    },
+  ],
+  showDefaultActions: false,
+};

apps/web-antd/src/views/system/platform/config/search.ts

@@ -0,0 +1,28 @@
+import type { VbenFormProps } from '#/adapter/form';
+
+// import dayjs from 'dayjs';
+
+export const formOptions: VbenFormProps = {
+  // 默认展开
+  collapsed: false,
+  schema: [
+    {
+      component: 'VbenInput',
+      componentProps: {
+        placeholder: '输入名称',
+      },
+      defaultValue: '',
+      fieldName: 'name',
+      label: '平台名称',
+    },
+  ],
+  // 控制表单是否显示折叠按钮
+  showCollapseButton: true,
+  submitButtonOptions: {
+    content: '查询',
+  },
+  // 是否在字段值改变时提交表单
+  submitOnChange: true,
+  // 按下回车时是否提交表单
+  submitOnEnter: false,
+};

apps/web-antd/src/views/system/platform/config/table.ts

@@ -0,0 +1,73 @@
+import type { VxeGridProps } from '#/adapter/vxe-table';
+
+import { getPlatformList } from '#/views/system/platform/api';
+
+interface RowType {
+  id: string;
+  name: string;
+  logo: string;
+  introduce: string;
+  created_at: string;
+}
+
+export const gridOptions: VxeGridProps<RowType> = {
+  checkboxConfig: {
+    highlight: true,
+    labelField: '',
+  },
+  columnConfig: {
+    useKey: true,
+  },
+  rowConfig: {
+    useKey: true,
+  },
+  columns: [
+    { type: 'checkbox', width: 60 },
+    { field: 'id', align: 'left', title: 'ID', width: 100 },
+    { field: 'name', align: 'left', title: '平台名称' },
+    {
+      field: 'logo',
+      align: 'left',
+      title: 'LOGO',
+      slots: { default: 'logo' },
+      width: 130,
+    },
+    { field: 'introduce', title: '平台介绍' },
+    { field: 'created_at', title: '注册时间' },
+    { type: 'html', title: '操作', slots: { default: 'action' } },
+  ],
+  keepSource: true,
+  pagerConfig: {},
+  proxyConfig: {
+    ajax: {
+      // 请求后端接口方法
+      query: async ({ page }, formValues) => {
+        return await getPlatformList({
+          page: page.currentPage,
+          pageSize: page.pageSize,
+          ...formValues,
+        });
+      },
+    },
+  },
+  height: 'auto',
+  border: false,
+  toolbarConfig: {
+    // 是否显示搜索表单控制按钮
+    // @ts-ignore 正式环境时有完整的类型声明
+    search: true,
+    refresh: true, // 刷新
+    print: false, // 打印
+    export: false, // 导出
+    // custom: true, // 自定义列
+    zoom: true, // 最大化最小化
+    slots: {
+      buttons: 'toolbar-buttons',
+    },
+    custom: {
+      // 自定义列-图标
+      icon: 'vxe-icon-menu',
+    },
+  },
+  showOverflow: false,
+};

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

@@ -0,0 +1,155 @@
+<script lang="ts" setup>
+import type { VxeGridListeners } from '#/adapter/vxe-table';
+
+import { ref } from 'vue';
+
+import { Page, useVbenModal } from '@vben/common-ui';
+
+import { Button, Image, message } from 'ant-design-vue';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { TableAction } from '#/components/table-action';
+
+import { deletePlatform } from './api';
+import FormModalDemo from './components/modal.vue';
+import { formOptions } from './config/search';
+import { gridOptions } from './config/table';
+
+const hasTopTableDropDownActions = ref(false);
+
+const gridEvents: VxeGridListeners<any> = {
+  checkboxChange() {
+    // eslint-disable-next-line no-use-before-define
+    const records = gridApi.grid.getCheckboxRecords();
+    hasTopTableDropDownActions.value = records.length > 0;
+  },
+  checkboxAll() {
+    // eslint-disable-next-line no-use-before-define
+    const records = gridApi.grid.getCheckboxRecords();
+    hasTopTableDropDownActions.value = records.length > 0;
+  },
+};
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions,
+  gridOptions,
+  gridEvents,
+});
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: FormModalDemo,
+});
+
+const showModal = (data = {}, isUpdate = false) => {
+  formModalApi.setData({
+    // 表单值
+    values: data,
+    update: isUpdate,
+    gridApi,
+  });
+  formModalApi.open();
+};
+
+const deleteApi = (row: any) => {
+  let ids = [];
+  if (row) {
+    ids.push(row);
+  } else {
+    ids = gridApi.grid.getCheckboxRecords().map((item) => item.id);
+  }
+  deletePlatform({ ids }).then(() => {
+    message.success('删除成功!');
+    gridApi.reload();
+  });
+};
+</script>
+
+<template>
+  <Page auto-content-height title="平台管理">
+    <FormModal />
+    <Grid>
+      <template #toolbar-buttons>
+        <TableAction
+          :actions="[
+            {
+              label: '新增',
+              type: 'primary',
+              icon: 'ant-design:plus-outlined',
+              // auth: ['超级平台', 'sys:user:save'],
+              onClick: showModal.bind(null),
+            },
+          ]"
+          :drop-down-actions="[
+            {
+              label: '删除',
+              icon: 'ant-design:delete-outlined',
+              ifShow: hasTopTableDropDownActions,
+              // auth: ['超级平台', 'sys:user:save'],
+              popConfirm: {
+                title: '确定删除吗？',
+                confirm: deleteApi.bind(null, false),
+              },
+            },
+          ]"
+        >
+          <template #more>
+            <Button style="margin-left: 16px">
+              批量操作
+              <Icon icon="ant-design:down-outlined" />
+            </Button>
+          </template>
+        </TableAction>
+      </template>
+      <template #logo="{ row }">
+        <Image :src="row.logo" height="30" width="30" />
+      </template>
+      <template #toolbar-tools></template>
+      <template #action="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: '编辑',
+              type: 'link',
+              icon: 'uil:edit',
+              size: 'small',
+              // auth: ['platform', 'sys:role:detail'],
+              onClick: showModal.bind(null, row, true),
+            },
+            {
+              label: '删除',
+              type: 'link',
+              icon: 'ant-design:delete-outlined',
+              size: 'small',
+              // auth: ['platform', 'sys:role:detail'],
+              popConfirm: {
+                title: '确定删除吗？',
+                confirm: deleteApi.bind(null, row.id),
+              },
+            },
+          ]"
+          :drop-down-actions="[
+            // {
+            //   label: '编辑',
+            //   type: 'link',
+            //   icon: 'ant-design:delete-outlined',
+            //   size: 'small',
+            //   // auth: ['platform', 'sys:role:detail'],
+            //   onClick: showModal.bind(null, row, true),
+            // },
+            // {
+            //   label: '删除',
+            //   type: 'link',
+            //   icon: 'ant-design:delete-outlined',
+            //   size: 'small',
+            //   // auth: ['platform', 'sys:role:detail'],
+            //   popConfirm: {
+            //     title: '确定删除吗？',
+            //     confirm: deleteApi.bind(null, row.id),
+            //   },
+            // },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>

apps/web-antd/src/views/system/role/api/index.ts

@@ -0,0 +1,69 @@
+import { requestClient } from '#/api/request';
+
+const prefix = 'role/';
+/**
+ * 分页查询用户列表
+ * @param data
+ */
+export async function getRoleList(data: any) {
+  return requestClient.get<any>(`${prefix}list`, { params: data });
+}
+/**
+ * 分页查询用户列表
+ * @param data
+ */
+export async function getRoleOption(data: any) {
+  return requestClient.get<any>(`${prefix}option`, { params: data });
+}
+
+/**
+ * 获取详情
+ * @param id
+ */
+export async function getRoleInfo(id: number) {
+  return requestClient.get<any>(`${prefix}detail`, { params: { id } });
+}
+
+/**
+ * 查询菜单下拉框
+ * @param data
+ */
+export async function getMenuIdsByRoleIds(data: any) {
+  return requestClient.get<any>(`${prefix}get-menu-ids-by-role-ids`, {
+    params: {
+      role_id: data.id,
+    },
+  });
+}
+
+/**
+ * 编辑角色
+ * @param data
+ */
+export async function saveRoleMenu(data: Record<string, any>) {
+  return requestClient.post<any>(`${prefix}save-role-menu`, data);
+}
+
+/**
+ * 新增角色
+ * @param data
+ */
+export async function createRole(data: Record<string, any>) {
+  return requestClient.post<any>(`${prefix}create`, data);
+}
+
+/**
+ * 编辑角色
+ * @param data
+ */
+export async function updateRole(data: Record<string, any>) {
+  return requestClient.post<any>(`${prefix}update`, data);
+}
+
+/**
+ * 删除角色
+ * @param data
+ */
+export async function deleteRole(data: Record<string, any>) {
+  return requestClient.post<any>(`${prefix}delete`, data);
+}

apps/web-antd/src/views/system/role/components/auth-menu.vue

@@ -0,0 +1,141 @@
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+import { useVbenDrawer } from '@vben/common-ui';
+
+import { Button, message, Tree } from 'ant-design-vue';
+
+import { $t } from '#/locales';
+import { getAllNodeIds, getLeafNodeIds } from '#/util/tool';
+import { getMenuTreeOption } from '#/views/system/menu/api';
+
+import { getMenuIdsByRoleIds, saveRoleMenu } from '../api';
+import {Icon} from "#/components/icon";
+
+const record = ref();
+const treeRef = ref();
+const treeData = ref([]);
+const isExpand = ref(false);
+
+// 勾选的key
+const checkedKeys = ref([]);
+// 提交的勾选的key,会进行特殊处理，包含半勾状态的父节点halfCheckedKeys
+const submitCheckedKeys = ref<any>([]);
+// 所有叶子节点key
+const leafKeys = ref<any>([]);
+// 所有节点key
+const allNodeIds = ref([]);
+// 当前展开的key
+const currentExpandedKeys = ref([]);
+/**
+ * api请求成功回调
+ */
+const handleFetchSuccess = () => {
+  getMenuIdsByRoleIds({
+    id: record.value.id,
+    // appCode: props.appCode,
+  }).then((res: any) => {
+    // 设置的勾选节点只能为叶子节点
+    checkedKeys.value = res.filter((item: any) => {
+      return leafKeys.value.includes(item);
+    });
+    submitCheckedKeys.value = res;
+  });
+};
+const [Drawer, DrawerApi] = useVbenDrawer({
+  onOpenChange(isOpen) {
+    record.value = isOpen ? DrawerApi.getData()?.record : {};
+    if (isOpen) {
+      DrawerApi.setState({
+        loading: true,
+      });
+      getMenuTreeOption({
+        filterByUser: 1,
+      })
+        .then((res) => {
+          treeData.value = res;
+          leafKeys.value = getLeafNodeIds(res);
+          allNodeIds.value = getAllNodeIds(res);
+          handleFetchSuccess();
+        })
+        .finally(() => {
+          DrawerApi.setState({
+            loading: false,
+          });
+        });
+    }
+  },
+  onConfirm() {
+    const menus = submitCheckedKeys.value.map((item: any) => {
+      return item;
+    });
+    DrawerApi.setState({
+      loading: true,
+      confirmLoading: true,
+    });
+    saveRoleMenu({
+      role_id: record.value.id,
+      menu_id: menus,
+    })
+      .then(() => {
+        message.success('保存成功');
+        DrawerApi.close();
+      })
+      .finally(() => {
+        DrawerApi.setState({
+          loading: false,
+          confirmLoading: false,
+        });
+      });
+  },
+});
+/**
+ * 点击复选框触发处理
+ * @param mCheckedKeys
+ */
+const handleCheck = (mCheckedKeys: any, e: any) => {
+  checkedKeys.value = mCheckedKeys;
+  // 提交的时候需要将半选的父节点也提交上
+  submitCheckedKeys.value = [...mCheckedKeys, ...e.halfCheckedKeys];
+};
+// 展开折叠事件
+const handleExpand = (expandedKeys: any) => {
+  currentExpandedKeys.value = expandedKeys;
+};
+// 展开折叠按钮事件
+const handleExpandAndCollapse = () => {
+  isExpand.value = !isExpand.value;
+  currentExpandedKeys.value = isExpand.value ? allNodeIds.value : [];
+};
+defineExpose(DrawerApi);
+</script>
+<template>
+  <div>
+    <Drawer class="w-[60%]" title="授权菜单">
+      <Button type="primary" @click="handleExpandAndCollapse">
+        {{ isExpand ? '折叠' : '展开' }}
+      </Button>
+      <Tree
+        ref="treeRef"
+        v-model:checked-keys="checkedKeys"
+        :expanded-keys="currentExpandedKeys"
+        :field-names="{
+          title: 'title',
+          key: 'id',
+        }"
+        :show-line="true"
+        :tree-data="treeData"
+        checkable
+        style="margin: 20px auto"
+        @check="handleCheck"
+        @expand="handleExpand"
+      >
+        <template #title="{ title, icon }">
+          <Icon :icon="icon" />
+          {{ $t(title) }}
+        </template>
+      </Tree>
+    </Drawer>
+  </div>
+</template>
+

apps/web-antd/src/views/system/role/components/modal.vue

@@ -0,0 +1,62 @@
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { message } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+import { createRole, updateRole } from '#/views/system/role/api';
+import { modalFormProps } from '#/views/system/role/config/form';
+
+defineOptions({
+  name: 'FormModelDemo',
+});
+
+const isUpdate = ref(false);
+const gridApi = ref();
+
+const [Form, formApi] = useVbenForm(modalFormProps);
+
+const [Modal, modalApi] = useVbenModal({
+  fullscreenButton: false,
+  draggable: true,
+  onCancel() {
+    modalApi.close();
+  },
+  onConfirm: async () => {
+    formApi.validate().then(async (e: any) => {
+      if (e.valid) {
+        const values = await formApi.getValues();
+        modalApi.setState({ loading: true, confirmLoading: true });
+        const submitApi = isUpdate.value ? updateRole : createRole;
+        submitApi(values)
+          .then(() => {
+            message.success('保存成功');
+            gridApi.value?.reload();
+            modalApi.close();
+          })
+          .finally(() => {
+            modalApi.setState({ loading: false, confirmLoading: false });
+          });
+      }
+    });
+    await formApi.validateAndSubmitForm();
+  },
+  onOpenChange(isOpen: boolean) {
+    gridApi.value = isOpen ? modalApi.getData()?.gridApi : null;
+    if (isOpen) {
+      const { values, update } = modalApi.getData<Record<string, any>>();
+      if (values) {
+        isUpdate.value = update;
+        formApi.setValues(values);
+      }
+    }
+  },
+});
+</script>
+<template>
+  <Modal :title="`${isUpdate === true ? '编辑' : '新增'}角色`" class="w-[30%]">
+    <Form />
+  </Modal>
+</template>

apps/web-antd/src/views/system/role/config/form.ts

@@ -0,0 +1,53 @@
+import type { VbenFormProps } from '#/adapter/form';
+
+export const modalFormProps: VbenFormProps = {
+  wrapperClass: 'grid-cols-12', // 24栅格,
+  commonConfig: {
+    formItemClass: 'col-span-12',
+    // 所有表单项
+    componentProps: {
+      class: 'w-full',
+    },
+  },
+  // handleSubmit: onSubmit,
+  layout: 'horizontal',
+  schema: [
+    {
+      component: 'VbenInput',
+      fieldName: 'id',
+      label: 'ID',
+      dependencies: {
+        show: false,
+        triggerFields: ['id'],
+      },
+    },
+    {
+      component: 'VbenInput',
+      componentProps: {
+        placeholder: '请输入角色昵称',
+      },
+      fieldName: 'name',
+      label: '昵称',
+      rules: 'required',
+    },
+    {
+      component: 'VbenInput',
+      componentProps: {
+        placeholder: '请输入角色代码',
+      },
+      fieldName: 'value',
+      label: '角色代码',
+      rules: 'required',
+    },
+    {
+      component: 'VbenInput',
+      componentProps: {
+        placeholder: '请输入角色说明',
+      },
+      fieldName: 'desc',
+      label: '角色说明',
+      rules: 'required',
+    },
+  ],
+  showDefaultActions: false,
+};

apps/web-antd/src/views/system/role/config/search.ts

@@ -0,0 +1,35 @@
+import type { VbenFormProps } from '#/adapter/form';
+
+export const formOptions: VbenFormProps = {
+  // 默认展开
+  collapsed: false,
+  schema: [
+    {
+      component: 'VbenInput',
+      componentProps: {
+        placeholder: '输入名称',
+      },
+      defaultValue: '',
+      fieldName: 'name',
+      label: '角色名称',
+    },
+    {
+      component: 'VbenInput',
+      componentProps: {
+        placeholder: '输入角色代码',
+      },
+      defaultValue: '',
+      fieldName: 'value',
+      label: '角色代码',
+    },
+  ],
+  // 控制表单是否显示折叠按钮
+  showCollapseButton: true,
+  submitButtonOptions: {
+    content: '查询',
+  },
+  // 是否在字段值改变时提交表单
+  submitOnChange: true,
+  // 按下回车时是否提交表单
+  submitOnEnter: false,
+};

apps/web-antd/src/views/system/role/config/table.ts

@@ -0,0 +1,73 @@
+import type { VxeGridProps } from '#/adapter/vxe-table';
+
+import { getRoleList } from '#/views/system/role/api';
+
+interface RowType {
+  id: string;
+  nick_name: string;
+  email: string;
+  avatar: string;
+  roles: { name: string }[];
+  open_id: string;
+  code: string;
+  platform_id: string;
+  phone: string;
+  desc: string;
+  created_at: string;
+}
+
+export const gridOptions: VxeGridProps<RowType> = {
+  checkboxConfig: {
+    highlight: true,
+    labelField: '',
+  },
+  columnConfig: {
+    useKey: true,
+  },
+  rowConfig: {
+    useKey: true,
+  },
+  columns: [
+    { type: 'checkbox', width: 60 },
+    { field: 'id', align: 'left', title: 'ID', width: 100 },
+    { field: 'name', align: 'left', title: '名称' },
+    { field: 'value', title: '角色代码' },
+    { field: 'desc', title: '备注' },
+    { field: 'created_at', title: '创建时间' },
+    { type: 'html', title: '操作', slots: { default: 'action' } },
+  ],
+  keepSource: true,
+  pagerConfig: {},
+  proxyConfig: {
+    ajax: {
+      // 请求后端接口方法
+      query: async ({ page }, formValues) => {
+        return await getRoleList({
+          page: page.currentPage,
+          pageSize: page.pageSize,
+          ...formValues,
+        });
+      },
+    },
+  },
+  height: 'auto',
+  border: false,
+  toolbarConfig: {
+    // 是否显示搜索表单控制按钮
+    // @ts-ignore 正式环境时有完整的类型声明
+    search: true,
+    refresh: true, // 刷新
+    print: false, // 打印
+    export: false, // 导出
+    // custom: true, // 自定义列
+    zoom: true, // 最大化最小化
+    slots: {
+      buttons: 'toolbar-buttons',
+    },
+    custom: {
+      // 自定义列-图标
+      icon: 'vxe-icon-menu',
+    },
+  },
+  showOverflow: false,
+};

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

@@ -0,0 +1,159 @@
+<script lang="ts" setup>
+import type { VxeGridListeners } from '#/adapter/vxe-table';
+
+import { ref } from 'vue';
+
+import { Page, useVbenModal } from '@vben/common-ui';
+
+import { Button, Image, message } from 'ant-design-vue';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { TableAction } from '#/components/table-action';
+
+import { deleteRole } from './api';
+import FormModalDemo from './components/modal.vue';
+import { formOptions } from './config/search';
+import { gridOptions } from './config/table';
+import AuthMenu from "#/views/system/role/components/auth-menu.vue";
+
+const hasTopTableDropDownActions = ref(false);
+
+const gridEvents: VxeGridListeners<any> = {
+  checkboxChange() {
+    // eslint-disable-next-line no-use-before-define
+    const records = gridApi.grid.getCheckboxRecords();
+    hasTopTableDropDownActions.value = records.length > 0;
+  },
+  checkboxAll() {
+    // eslint-disable-next-line no-use-before-define
+    const records = gridApi.grid.getCheckboxRecords();
+    hasTopTableDropDownActions.value = records.length > 0;
+  },
+};
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions,
+  gridOptions,
+  gridEvents,
+});
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: FormModalDemo,
+});
+
+const showModal = (data = {}, isUpdate = false) => {
+  formModalApi.setData({
+    // 表单值
+    values: {
+      id: data?.id,
+      name: data?.name,
+      value: data?.value,
+      desc: data?.desc,
+    },
+    update: isUpdate,
+    gridApi,
+  });
+  formModalApi.open();
+};
+
+// 授权菜单
+const authMenuRef = ref();
+const handleAuthMenu = (record: any) => {
+  authMenuRef.value.setData({
+    record,
+  });
+  authMenuRef.value.open();
+};
+const deleteApi = (row: any) => {
+  let ids = [];
+  if (row) {
+    ids.push(row);
+  } else {
+    ids = gridApi.grid.getCheckboxRecords().map((item) => item.id);
+  }
+  deleteRole({ ids }).then(() => {
+    message.success('删除成功!');
+    gridApi.reload();
+  });
+};
+</script>
+
+<template>
+  <Page auto-content-height title="角色管理">
+    <FormModal />
+    <AuthMenu ref="authMenuRef" />
+    <Grid>
+      <template #toolbar-buttons>
+        <TableAction
+          :actions="[
+            {
+              label: '新增',
+              type: 'primary',
+              icon: 'ant-design:plus-outlined',
+              // auth: ['超级角色', 'sys:user:save'],
+              onClick: showModal.bind(null),
+            },
+          ]"
+          :drop-down-actions="[
+            {
+              label: '删除',
+              icon: 'ant-design:delete-outlined',
+              ifShow: hasTopTableDropDownActions,
+              // auth: ['超级角色', 'sys:user:save'],
+              popConfirm: {
+                title: '确定删除吗？',
+                confirm: deleteApi.bind(null, false),
+              },
+            },
+          ]"
+        >
+          <template #more>
+            <Button style="margin-left: 16px">
+              批量操作
+              <Icon icon="ant-design:down-outlined" />
+            </Button>
+          </template>
+        </TableAction>
+      </template>
+      <template #avatar="{ row }">
+        <Image :src="row.avatar" height="30" width="30" />
+      </template>
+      <template #toolbar-tools></template>
+      <template #action="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: '编辑',
+              type: 'link',
+              icon: 'uil:edit',
+              size: 'small',
+              // auth: ['admin', 'sys:role:detail'],
+              onClick: showModal.bind(null, row, true),
+            },
+            {
+              label: '授权菜单',
+              type: 'link',
+              icon: 'arcticons:microsoft-authenticator',
+              size: 'small',
+              // auth: ['admin', 'sys:role:detail'],
+              onClick: handleAuthMenu.bind(null, row),
+            },
+          ]"
+          :drop-down-actions="[
+            {
+              label: '删除',
+              type: 'link',
+              icon: 'ant-design:delete-outlined',
+              size: 'small',
+              // auth: ['admin', 'sys:role:detail'],
+              popConfirm: {
+                title: '确定删除吗？',
+                confirm: deleteApi.bind(null, row.id),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>

apps/web-antd/src/views/system/supplier/api/index.ts

@@ -0,0 +1,49 @@
+import { requestClient } from '#/api/request';
+
+const prefix = 'supplier/';
+/**
+ * 分页查询用户列表
+ * @param data
+ */
+export async function getSupplierList(data: any) {
+  return requestClient.get<any>(`${prefix}list`, { params: data });
+}
+/**
+ * 分页查询用户列表
+ * @param data
+ */
+export async function getSupplierOption(data: any) {
+  return requestClient.get<any>(`${prefix}option`, { params: data });
+}
+
+/**
+ * 获取供应商详情
+ * @param id
+ */
+export async function getSupplierInfo(id: number) {
+  return requestClient.get<any>(`${prefix}detail`, { params: { id } });
+}
+
+/**
+ * 新增供应商
+ * @param data
+ */
+export async function createSupplier(data: Record<string, any>) {
+  return requestClient.post<any>(`${prefix}create`, data);
+}
+
+/**
+ * 编辑供应商
+ * @param data
+ */
+export async function updateSupplier(data: Record<string, any>) {
+  return requestClient.post<any>(`${prefix}update`, data);
+}
+
+/**
+ * 删除供应商
+ * @param data
+ */
+export async function deleteSupplier(data: Record<string, any>) {
+  return requestClient.post<any>(`${prefix}delete`, data);
+}

apps/web-antd/src/views/system/supplier/components/modal.vue

@@ -0,0 +1,62 @@
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { message } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+import { createSupplier, updateSupplier } from '#/views/system/supplier/api';
+import { modalFormProps } from '#/views/system/supplier/config/form';
+
+defineOptions({
+  name: 'FormModelDemo',
+});
+
+const isUpdate = ref(false);
+const gridApi = ref();
+
+const [Form, formApi] = useVbenForm(modalFormProps);
+
+const [Modal, modalApi] = useVbenModal({
+  fullscreenButton: false,
+  draggable: true,
+  onCancel() {
+    modalApi.close();
+  },
+  onConfirm: async () => {
+    formApi.validate().then(async (e: any) => {
+      if (e.valid) {
+        const values = await formApi.getValues();
+        modalApi.setState({ loading: true, confirmLoading: true });
+        const submitApi = isUpdate.value ? updateSupplier : createSupplier;
+        submitApi(values)
+          .then(() => {
+            message.success('保存成功');
+            gridApi.value?.reload();
+            modalApi.close();
+          })
+          .finally(() => {
+            modalApi.setState({ loading: false, confirmLoading: false });
+          });
+      }
+    });
+    await formApi.validateAndSubmitForm();
+  },
+  onOpenChange(isOpen: boolean) {
+    gridApi.value = isOpen ? modalApi.getData()?.gridApi : null;
+    if (isOpen) {
+      const { values, update } = modalApi.getData<Record<string, any>>();
+      if (values) {
+        isUpdate.value = update;
+        formApi.setValues(values);
+      }
+    }
+  },
+});
+</script>
+<template>
+  <Modal :title="`${isUpdate === true ? '编辑' : '新增'}供应商`" class="w-[30%]">
+    <Form />
+  </Modal>
+</template>

apps/web-antd/src/views/system/supplier/config/form.ts

@@ -0,0 +1,87 @@
+import type { VbenFormProps } from '#/adapter/form';
+
+export const modalFormProps: VbenFormProps = {
+  wrapperClass: 'grid-cols-12', // 24栅格,
+  commonConfig: {
+    formItemClass: 'col-span-12',
+    // 所有表单项
+    componentProps: {
+      class: 'w-full',
+    },
+  },
+  // handleSubmit: onSubmit,
+  layout: 'horizontal',
+  schema: [
+    // {
+    //   fieldName: 'baseinfo',
+    //   component: 'Divider',
+    //   label: '基础信息',
+    //   formItemClass: 'col-span-12',
+    //   componentProps: {},
+    //   hideLabel: true,
+    //   renderComponentContent: () => {
+    //     return {
+    //       default: () => {
+    //         return '基础信息';
+    //       },
+    //     };
+    //   },
+    // },
+    {
+      component: 'VbenInput',
+      fieldName: 'id',
+      label: 'ID',
+      formItemClass: 'col-span-6',
+      dependencies: {
+        show: false,
+        triggerFields: ['id'],
+      },
+    },
+    {
+      component: 'Avatar',
+      fieldName: 'logo',
+      label: 'LOGO',
+      rules: 'required',
+    },
+    {
+      component: 'VbenInput',
+      componentProps: {
+        placeholder: '请输入供应商昵称',
+      },
+      fieldName: 'name',
+      label: '供应商名称',
+      rules: 'required',
+    },
+    {
+      component: 'Textarea',
+      componentProps: {
+        placeholder: '请输入供应商介绍',
+      },
+      fieldName: 'introduce',
+      label: '供应商介绍',
+      rules: 'required',
+    },
+    {
+      component: 'Avatar',
+      fieldName: 'open_business_license',
+      label: '营业执照',
+      rules: 'required',
+      formItemClass: 'col-span-6',
+    },
+    {
+      component: 'Avatar',
+      fieldName: 'business_license',
+      label: '生产许可证',
+      rules: 'required',
+      formItemClass: 'col-span-6',
+    },
+    {
+      component: 'Avatar',
+      fieldName: 'product_registration_certificate',
+      label: '产品注册证',
+      formItemClass: 'col-span-6',
+      rules: 'required',
+    },
+  ],
+  showDefaultActions: false,
+};

apps/web-antd/src/views/system/supplier/config/search.ts

@@ -0,0 +1,37 @@
+import type { VbenFormProps } from '#/adapter/form';
+
+// import dayjs from 'dayjs';
+
+export const formOptions: VbenFormProps = {
+  // 默认展开
+  collapsed: false,
+  schema: [
+    {
+      component: 'VbenInput',
+      componentProps: {
+        placeholder: '输入名称',
+      },
+      defaultValue: '',
+      fieldName: 'name',
+      label: '供应商名称',
+    },
+    // {
+    //   component: 'RangePicker',
+    //   componentProps: {
+    //     format: 'YYYY-MM-DD', // 确保格式与你需要的一致
+    //   },
+    //   // defaultValue: [dayjs().startOf('month'), dayjs()],
+    //   fieldName: 'search_time',
+    //   label: '时间范围',
+    // },
+  ],
+  // 控制表单是否显示折叠按钮
+  showCollapseButton: true,
+  submitButtonOptions: {
+    content: '查询',
+  },
+  // 是否在字段值改变时提交表单
+  submitOnChange: true,
+  // 按下回车时是否提交表单
+  submitOnEnter: false,
+};

apps/web-antd/src/views/system/supplier/config/table.ts

@@ -0,0 +1,94 @@
+import type { VxeGridProps } from '#/adapter/vxe-table';
+
+import { getSupplierList } from '#/views/system/supplier/api';
+
+interface RowType {
+  id: string;
+  name: string;
+  logo: string;
+  introduce: string;
+  created_at: string;
+}
+
+export const gridOptions: VxeGridProps<RowType> = {
+  checkboxConfig: {
+    highlight: true,
+    labelField: '',
+  },
+  columnConfig: {
+    useKey: true,
+  },
+  rowConfig: {
+    useKey: true,
+  },
+  columns: [
+    { type: 'checkbox', width: 60 },
+    { field: 'id', align: 'left', title: 'ID', width: 100 },
+    { field: 'name', align: 'left', title: '供应商名称' },
+    {
+      field: 'logo',
+      align: 'left',
+      title: 'LOGO',
+      slots: { default: 'logo' },
+      width: 130,
+    },
+    { field: 'introduce', title: '供应商介绍' },
+    {
+      field: 'open_business_license',
+      align: 'left',
+      title: '营业执照',
+      slots: { default: 'open_business_license' },
+      width: 130,
+    },
+    {
+      field: 'business_license',
+      align: 'left',
+      title: '生产/经营许可证',
+      slots: { default: 'business_license' },
+      width: 130,
+    },
+    {
+      field: 'product_registration_certificate',
+      align: 'left',
+      title: '产品注册证',
+      slots: { default: 'product_registration_certificate' },
+      width: 130,
+    },
+    { field: 'created_at', title: '注册时间' },
+    { type: 'html', title: '操作', slots: { default: 'action' } },
+  ],
+  keepSource: true,
+  pagerConfig: {},
+  proxyConfig: {
+    ajax: {
+      // 请求后端接口方法
+      query: async ({ page }, formValues) => {
+        return await getSupplierList({
+          page: page.currentPage,
+          pageSize: page.pageSize,
+          ...formValues,
+        });
+      },
+    },
+  },
+  height: 'auto',
+  border: false,
+  toolbarConfig: {
+    // 是否显示搜索表单控制按钮
+    // @ts-ignore 正式环境时有完整的类型声明
+    search: true,
+    refresh: true, // 刷新
+    print: false, // 打印
+    export: false, // 导出
+    // custom: true, // 自定义列
+    zoom: true, // 最大化最小化
+    slots: {
+      buttons: 'toolbar-buttons',
+    },
+    custom: {
+      // 自定义列-图标
+      icon: 'vxe-icon-menu',
+    },
+  },
+  showOverflow: false,
+};

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

@@ -0,0 +1,168 @@
+<script lang="ts" setup>
+import type { VxeGridListeners } from '#/adapter/vxe-table';
+
+import { ref } from 'vue';
+
+import { Page, useVbenModal } from '@vben/common-ui';
+
+import { Button, Image, message } from 'ant-design-vue';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { TableAction } from '#/components/table-action';
+
+import { deleteSupplier } from './api';
+import FormModalDemo from './components/modal.vue';
+import { formOptions } from './config/search';
+import { gridOptions } from './config/table';
+
+const hasTopTableDropDownActions = ref(false);
+
+const gridEvents: VxeGridListeners<any> = {
+  checkboxChange() {
+    // eslint-disable-next-line no-use-before-define
+    const records = gridApi.grid.getCheckboxRecords();
+    hasTopTableDropDownActions.value = records.length > 0;
+  },
+  checkboxAll() {
+    // eslint-disable-next-line no-use-before-define
+    const records = gridApi.grid.getCheckboxRecords();
+    hasTopTableDropDownActions.value = records.length > 0;
+  },
+};
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions,
+  gridOptions,
+  gridEvents,
+});
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: FormModalDemo,
+});
+
+const showModal = (data = {}, isUpdate = false) => {
+  formModalApi.setData({
+    // 表单值
+    values: data,
+    update: isUpdate,
+    gridApi,
+  });
+  formModalApi.open();
+};
+
+const deleteApi = (row: any) => {
+  let ids = [];
+  if (row) {
+    ids.push(row);
+  } else {
+    ids = gridApi.grid.getCheckboxRecords().map((item) => item.id);
+  }
+  deleteSupplier({ ids }).then(() => {
+    message.success('删除成功!');
+    gridApi.reload();
+  });
+};
+</script>
+
+<template>
+  <Page auto-content-height title="供应商管理">
+    <FormModal />
+    <Grid>
+      <template #toolbar-buttons>
+        <TableAction
+          :actions="[
+            {
+              label: '新增',
+              type: 'primary',
+              icon: 'ant-design:plus-outlined',
+              // auth: ['超级供应商', 'sys:user:save'],
+              onClick: showModal.bind(null),
+            },
+          ]"
+          :drop-down-actions="[
+            {
+              label: '删除',
+              icon: 'ant-design:delete-outlined',
+              ifShow: hasTopTableDropDownActions,
+              // auth: ['超级供应商', 'sys:user:save'],
+              popConfirm: {
+                title: '确定删除吗？',
+                confirm: deleteApi.bind(null, false),
+              },
+            },
+          ]"
+        >
+          <template #more>
+            <Button style="margin-left: 16px">
+              批量操作
+              <Icon icon="ant-design:down-outlined" />
+            </Button>
+          </template>
+        </TableAction>
+      </template>
+      <template #logo="{ row }">
+        <Image :src="row.logo" height="30" width="30" />
+      </template>
+      <template #open_business_license="{ row }">
+        <Image :src="row.open_business_license" height="30" width="30" />
+      </template>
+      <template #business_license="{ row }">
+        <Image :src="row.business_license" height="30" width="30" />
+      </template>
+      <template #product_registration_certificate="{ row }">
+        <Image
+          :src="row.product_registration_certificate"
+          height="30"
+          width="30"
+        />
+      </template>
+      <template #toolbar-tools></template>
+      <template #action="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: '编辑',
+              type: 'link',
+              icon: 'uil:edit',
+              size: 'small',
+              // auth: ['supplier', 'sys:role:detail'],
+              onClick: showModal.bind(null, row, true),
+            },
+            {
+              label: '删除',
+              type: 'link',
+              icon: 'ant-design:delete-outlined',
+              size: 'small',
+              // auth: ['supplier', 'sys:role:detail'],
+              popConfirm: {
+                title: '确定删除吗？',
+                confirm: deleteApi.bind(null, row.id),
+              },
+            },
+          ]"
+          :drop-down-actions="[
+            // {
+            //   label: '编辑',
+            //   type: 'link',
+            //   icon: 'ant-design:delete-outlined',
+            //   size: 'small',
+            //   // auth: ['supplier', 'sys:role:detail'],
+            //   onClick: showModal.bind(null, row, true),
+            // },
+            // {
+            //   label: '删除',
+            //   type: 'link',
+            //   icon: 'ant-design:delete-outlined',
+            //   size: 'small',
+            //   // auth: ['supplier', 'sys:role:detail'],
+            //   popConfirm: {
+            //     title: '确定删除吗？',
+            //     confirm: deleteApi.bind(null, row.id),
+            //   },
+            // },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>