feat(@vben/web-antd): 优化部门模块

apps/web-antd/src/adapter/vxe-table.ts

@@ -1,8 +1,16 @@
+import type { Recordable } from '@vben/types';
+
 import { h } from 'vue';
 
+import { IconifyIcon } from '@vben/icons';
+import { $te } from '@vben/locales';
 import { setupVbenVxeTable, useVbenVxeGrid } from '@vben/plugins/vxe-table';
+import { get, isFunction, isString } from '@vben/utils';
 
-import { Button, Image } from 'ant-design-vue';
+import { objectOmit } from '@vueuse/core';
+import { Button, Image, Popconfirm, Switch, Tag } from 'ant-design-vue';
+
+import { $t } from '#/locales';
 
 import { useVbenForm } from './form';
 
@@ -44,6 +52,25 @@ setupVbenVxeTable({
       },
     });
 
+    vxeUI.renderer.add('CellTag', {
+      renderTableDefault({ options, props }, { column, row }) {
+        const value = get(row, column.field);
+        const tagOptions = options ?? [
+          { color: 'success', label: $t('common.enabled'), value: true },
+          { color: 'error', label: $t('common.disabled'), value: false },
+        ];
+        const tagItem = tagOptions.find((item) => item.value === value);
+        return h(
+          Tag,
+          {
+            ...props,
+            ...objectOmit(tagItem ?? {}, ['label']),
+          },
+          { default: () => tagItem?.label ?? value },
+        );
+      },
+    });
+
     // 表格配置项可以用 cellRender: { name: 'CellLink' },
     vxeUI.renderer.add('CellLink', {
       renderTableDefault(renderOpts) {
@@ -55,6 +82,181 @@ setupVbenVxeTable({
         );
       },
     });
+    vxeUI.renderer.add('CellSwitch', {
+      renderTableDefault({ attrs, props }, { column, row }) {
+        const loadingKey = `__loading_${column.field}`;
+        const finallyProps = {
+          checkedChildren: $t('common.enabled'),
+          checkedValue: true,
+          unCheckedChildren: $t('common.disabled'),
+          unCheckedValue: false,
+          ...props,
+          checked: row[column.field],
+          loading: row[loadingKey] ?? false,
+          'onUpdate:checked': onChange,
+        };
+        async function onChange(newVal: any) {
+          row[loadingKey] = true;
+          try {
+            const result = await attrs?.beforeChange?.(newVal, row);
+            if (result !== false) {
+              row[column.field] = newVal;
+            }
+          } finally {
+            row[loadingKey] = false;
+          }
+        }
+        return h(Switch, finallyProps);
+      },
+    });
+    /**
+     * 注册表格的操作按钮渲染器
+     */
+    vxeUI.renderer.add('CellOperation', {
+      renderTableDefault({ attrs, options, props }, { column, row }) {
+        const defaultProps = { size: 'small', type: 'link', ...props };
+        let align = 'end';
+        switch (column.align) {
+          case 'center': {
+            align = 'center';
+            break;
+          }
+          case 'left': {
+            align = 'start';
+            break;
+          }
+          default: {
+            align = 'end';
+            break;
+          }
+        }
+        const presets: Recordable<Recordable<any>> = {
+          delete: {
+            danger: true,
+            text: $t('common.delete'),
+          },
+          edit: {
+            text: $t('common.edit'),
+          },
+        };
+        const operations: Array<Recordable<any>> = (
+          options || ['edit', 'delete']
+        )
+          .map((opt) => {
+            if (isString(opt)) {
+              return presets[opt]
+                ? { code: opt, ...presets[opt], ...defaultProps }
+                : {
+                    code: opt,
+                    text: $te(`common.${opt}`) ? $t(`common.${opt}`) : opt,
+                    ...defaultProps,
+                  };
+            } else {
+              return { ...defaultProps, ...presets[opt.code], ...opt };
+            }
+          })
+          .map((opt) => {
+            const optBtn: Recordable<any> = {};
+            Object.keys(opt).forEach((key) => {
+              optBtn[key] = isFunction(opt[key]) ? opt[key](row) : opt[key];
+            });
+            return optBtn;
+          })
+          .filter((opt) => opt.show !== false);
+
+        function renderBtn(opt: Recordable<any>, listen = true) {
+          return h(
+            Button,
+            {
+              ...props,
+              ...opt,
+              icon: undefined,
+              onClick: listen
+                ? () =>
+                    attrs?.onClick?.({
+                      code: opt.code,
+                      row,
+                    })
+                : undefined,
+            },
+            {
+              default: () => {
+                const content = [];
+                if (opt.icon) {
+                  content.push(
+                    h(IconifyIcon, { class: 'size-5', icon: opt.icon }),
+                  );
+                }
+                content.push(opt.text);
+                return content;
+              },
+            },
+          );
+        }
+
+        function renderConfirm(opt: Recordable<any>) {
+          let viewportWrapper: HTMLElement | null = null;
+          return h(
+            Popconfirm,
+            {
+              /**
+               * 当popconfirm用在固定列中时，将固定列作为弹窗的容器时可能会因为固定列较窄而无法容纳弹窗
+               * 将表格主体区域作为弹窗容器时又会因为固定列的层级较高而遮挡弹窗
+               * 将body或者表格视口区域作为弹窗容器时又会导致弹窗无法跟随表格滚动。
+               * 鉴于以上各种情况，一种折中的解决方案是弹出层展示时，禁止操作表格的滚动条。
+               * 这样既解决了弹窗的遮挡问题，又不至于让弹窗随着表格的滚动而跑出视口区域。
+               */
+              getPopupContainer(el) {
+                viewportWrapper = el.closest('.vxe-table--viewport-wrapper');
+                return document.body;
+              },
+              placement: 'topLeft',
+              title: $t('ui.actionTitle.delete', [attrs?.nameTitle || '']),
+              ...props,
+              ...opt,
+              icon: undefined,
+              onOpenChange: (open: boolean) => {
+                // 当弹窗打开时，禁止表格的滚动
+                if (open) {
+                  viewportWrapper?.style.setProperty('pointer-events', 'none');
+                } else {
+                  viewportWrapper?.style.removeProperty('pointer-events');
+                }
+              },
+              onConfirm: () => {
+                attrs?.onClick?.({
+                  code: opt.code,
+                  row,
+                });
+              },
+            },
+            {
+              default: () => renderBtn({ ...opt }, false),
+              description: () =>
+                h(
+                  'div',
+                  { class: 'truncate' },
+                  $t('ui.actionMessage.deleteConfirm', [
+                    row[attrs?.nameField || 'name'],
+                  ]),
+                ),
+            },
+          );
+        }
+
+        const btns = operations.map((opt) =>
+          opt.code === 'delete' ? renderConfirm(opt) : renderBtn(opt),
+        );
+        return h(
+          'div',
+          {
+            class: 'flex table-operations',
+            style: { justifyContent: align },
+          },
+          btns,
+        );
+      },
+    });
 
     // 这里可以自行扩展 vxe-table 的全局配置，比如自定义格式化
     // vxeUI.formats.add
@@ -63,5 +265,12 @@ setupVbenVxeTable({
 });
 
 export { useVbenVxeGrid };
+export type OnActionClickParams<T = Recordable<any>> = {
+  code: string;
+  row: T;
+};
+export type OnActionClickFn<T = Recordable<any>> = (
+  params: OnActionClickParams<T>,
+) => void;
 
 export type * from '@vben/plugins/vxe-table';

apps/web-antd/src/api/core/dept.ts

@@ -21,34 +21,34 @@ export namespace DeptApi {
   }
 }
 
-// 添加区域
+// 添加部门
 export function createDept(data: DeptApi.Dept) {
-  return requestClient.post(`/api/rest/dept`, data);
+  return requestClient.post(`/rest/dept`, data);
 }
 
-// 更新区域信息
+// 更新部门信息
-export function updateDept(data: DeptApi.DeptRecord) {
+export function updateDept(id: string, data: DeptApi.DeptRecord) {
-  return requestClient.patch(`/api/rest/dept/${data.id}`, data);
+  return requestClient.patch(`/rest/dept/${id}`, data);
 }
 
-// 删除区域
+// 删除部门
 export function removeDept(id: string) {
-  return requestClient.delete(`/api/rest/dept/${id}`);
+  return requestClient.delete(`/rest/dept/${id}`);
 }
 
-// 模糊查询获取区域列表
+// 模糊查询获取部门列表
 export function queryDeptList(data: DeptApi.DeptRecord) {
-  return requestClient.get('/api/rest/dept', { data });
+  return requestClient.get('/rest/dept', { data });
 }
 
-// 获取区域列表
+// 获取部门列表
 export function deptList() {
-  return requestClient.get(`/api/rest/dept`);
+  return requestClient.get(`/rest/dept`);
 }
 
 // 启用状态
 export function enabledDept(id: string) {
-  return requestClient.patch(`/api/rest/dept/toggle/${id}`, id);
+  return requestClient.patch(`/rest/dept/toggle/${id}`, id);
 }
 
 export function getAllDeptTree(id?: number | string) {
@@ -56,7 +56,7 @@ export function getAllDeptTree(id?: number | string) {
 }
 
 // export function getDeptTree(params?: Partial<DeptRecord>) {
-//   return axios.get<DeptRecord[]>(`/api/dept/trees`, {
+//   return axios.get<DeptRecord[]>(`/dept/trees`, {
 //     params,
 //     paramsSerializer: (obj) => {
 //       return qs.stringify(obj);
@@ -64,7 +64,7 @@ export function getAllDeptTree(id?: number | string) {
 //   });
 // }
 // export function listDepts(params?: ListParams<Partial<DeptRecord>>) {
-//   return axios.get<DeptRecord[]>(`/api/dept`, {
+//   return axios.get<DeptRecord[]>(`/dept`, {
 //     params,
 //     paramsSerializer: (obj) => {
 //       return qs.stringify(obj);
@@ -72,5 +72,5 @@ export function getAllDeptTree(id?: number | string) {
 //   });
 // }
 // export function queryDepts(params?: ListParams<Partial<DeptRecord>>) {
-//   return queryList(`/api/dept`, params);
+//   return queryList(`/dept`, params);
 // }

apps/web-antd/src/api/core/index.ts

@@ -2,6 +2,7 @@ export * from './auth';
 export * from './chatflow';
 export * from './dept';
 export * from './menu';
+export * from './role';
 export * from './server';
 export * from './user';
 export * from './workflow';

apps/web-antd/src/api/core/role.ts

@@ -0,0 +1,73 @@
+import { requestClient } from '#/api/request';
+
+export namespace RoleApi {
+  export interface Role {
+    [key: string]: any;
+    name: string;
+    dataScope: string;
+    enabled: boolean;
+    deptId: string;
+    remark?: string;
+    createBy: string;
+    createTime: string;
+    createId: string;
+    // authorities: (number | undefined)[];
+    id: string;
+  }
+
+  export interface RoleListParams {
+    page: number;
+    size: number;
+    sort: string;
+    name?: string;
+    enabled?: boolean;
+    deptId?: string;
+  }
+
+  export interface RoleListRecord extends Role {
+    name: string;
+  }
+}
+
+// 查询所有的角色列表、
+export function queryRoleList(data: RoleApi.RoleListParams) {
+  // return axios.get('/rest/role',data);
+  return requestClient.get<Array<RoleApi.Role>>('/rest/role', { params: data });
+}
+
+// 切换启用状态
+export function enabledRole(id: string) {
+  return requestClient.patch(`/rest/role/${id}/toggle`);
+}
+
+// 删除
+export function removeRole(id: string) {
+  return requestClient.delete(`/rest/role/${id}`);
+}
+
+// 添加
+export function createRole(data: RoleApi.Role) {
+  return requestClient.post(`/rest/role`, data);
+}
+
+// 更新
+export function updateRole(id: any, data: RoleApi.Role) {
+  return requestClient.patch(`/rest/role/${id}`, data);
+}
+
+// 获取详情
+export function getDetail(id: string) {
+  return requestClient.get<RoleApi.Role>(`/rest/role/${id}`);
+}
+
+export const queryMenuList = (data: string) => {
+  return requestClient.get('/rest/menu/tree', {
+    params: {
+      name: data,
+    },
+  });
+};
+
+// export function queryRoles(params?: ListParams<Partial<Role>>) {
+//   return queryList<Role>(`/rest/role/query`, params);
+// }

apps/web-antd/src/router/routes/modules/dept.ts

@@ -1,18 +0,0 @@
-import type { RouteRecordRaw } from 'vue-router';
-
-import { RiDept } from '@vben/icons';
-
-const routes: RouteRecordRaw[] = [
-  {
-    name: 'dept',
-    path: '/dept',
-    component: () => import('#/views/dept/list.vue'),
-    meta: {
-      icon: RiDept,
-      title: '部门管理',
-      order: 5,
-    },
-  },
-];
-
-export default routes;

apps/web-antd/src/router/routes/modules/system.ts

@@ -0,0 +1,46 @@
+import type { RouteRecordRaw } from 'vue-router';
+
+import { EosRole, IconSystem, MdiUser, RiDept } from '@vben/icons';
+
+const routes: RouteRecordRaw[] = [
+  {
+    name: 'system',
+    path: '/system',
+    meta: {
+      icon: IconSystem,
+      title: '系统管理',
+      order: 4,
+    },
+    children: [
+      {
+        name: 'role',
+        path: '/system/role',
+        component: () => import('#/views/role/list.vue'),
+        meta: {
+          icon: EosRole,
+          title: '角色管理',
+        },
+      },
+      {
+        name: 'dept',
+        path: '/system/dept',
+        component: () => import('#/views/dept/list.vue'),
+        meta: {
+          icon: RiDept,
+          title: '部门管理',
+        },
+      },
+      {
+        name: 'user',
+        path: '/system/user',
+        component: () => import('#/views/user/list.vue'),
+        meta: {
+          icon: MdiUser,
+          title: '用户管理',
+        },
+      },
+    ],
+  },
+];
+
+export default routes;

apps/web-antd/src/router/routes/modules/user.ts

@@ -1,18 +0,0 @@
-import type { RouteRecordRaw } from 'vue-router';
-
-import { MdiUser } from '@vben/icons';
-
-const routes: RouteRecordRaw[] = [
-  {
-    name: 'user',
-    path: '/user',
-    component: () => import('#/views/user/index.vue'),
-    meta: {
-      icon: MdiUser,
-      title: '用户管理',
-      order: 4,
-    },
-  },
-];
-
-export default routes;

apps/web-antd/src/views/dept/data.ts

@@ -37,13 +37,13 @@ export function useSchema(): VbenFormSchema[] {
       componentProps: {
         buttonStyle: 'solid',
         options: [
-          { label: $t('common.enabled'), value: 1 },
+          { label: $t('common.enabled'), value: true },
-          { label: $t('common.disabled'), value: 0 },
+          { label: $t('common.disabled'), value: false },
         ],
         optionType: 'button',
       },
-      defaultValue: 1,
+      defaultValue: true,
-      fieldName: 'status',
+      fieldName: 'enabled',
       label: '状态',
     },
     {
@@ -78,8 +78,10 @@ export function useColumns(
       width: 150,
     },
     {
-      cellRender: { name: 'CellTag' },
+      cellRender: {
-      field: 'enable',
+        name: 'CellTag',
+      },
+      field: 'enabled',
       title: '状态',
       width: 100,
     },
@@ -88,6 +90,10 @@ export function useColumns(
       title: '创建时间',
       width: 180,
     },
+    {
+      field: 'remark',
+      title: '备注',
+    },
     {
       align: 'right',
       cellRender: {

apps/web-antd/src/views/dept/list.vue

@@ -100,7 +100,10 @@ const [Grid, gridApi] = useVbenVxeGrid({
     proxyConfig: {
       ajax: {
         query: async (_params) => {
-          return await getAllDeptTree(1);
+          const res = await getAllDeptTree(1);
+          return {
+            items: res,
+          };
         },
       },
     },

apps/web-antd/src/views/role/data.ts

@@ -0,0 +1,127 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { OnActionClickFn, VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { RoleApi } from '#/api';
+
+import { $t } from '#/locales';
+
+export function useFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      component: 'Input',
+      fieldName: 'name',
+      label: '角色名称',
+      rules: 'required',
+    },
+    {
+      component: 'RadioGroup',
+      componentProps: {
+        buttonStyle: 'solid',
+        options: [
+          { label: $t('common.enabled'), value: 1 },
+          { label: $t('common.disabled'), value: 0 },
+        ],
+        optionType: 'button',
+      },
+      defaultValue: 1,
+      fieldName: 'status',
+      label: '状态',
+    },
+    {
+      component: 'Textarea',
+      fieldName: 'remark',
+      label: '备注',
+    },
+    {
+      component: 'Input',
+      fieldName: 'permissions',
+      formItemClass: 'items-start',
+      label: '权限',
+      modelPropName: 'modelValue',
+    },
+  ];
+}
+
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      component: 'Input',
+      fieldName: 'name',
+      label: '角色名称',
+    },
+    { component: 'Input', fieldName: 'id', label: '角色ID' },
+    {
+      component: 'Select',
+      componentProps: {
+        allowClear: true,
+        options: [
+          { label: $t('common.enabled'), value: 1 },
+          { label: $t('common.disabled'), value: 0 },
+        ],
+      },
+      fieldName: 'enabled',
+      label: '状态',
+    },
+    {
+      component: 'Input',
+      fieldName: 'remark',
+      label: '备注',
+    },
+    {
+      component: 'RangePicker',
+      fieldName: 'createTime',
+      label: '创建时间',
+    },
+  ];
+}
+
+export function useColumns<T = RoleApi.Role>(
+  onActionClick: OnActionClickFn<T>,
+  onStatusChange?: (newStatus: any, row: T) => PromiseLike<boolean | undefined>,
+): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'id',
+      title: '角色ID',
+      width: 200,
+    },
+    {
+      field: 'name',
+      title: '角色名称',
+      width: 200,
+    },
+    {
+      cellRender: {
+        attrs: { beforeChange: onStatusChange },
+        name: onStatusChange ? 'CellSwitch' : 'CellTag',
+      },
+      field: 'enabled',
+      title: '角色状态',
+      width: 100,
+    },
+    {
+      field: 'remark',
+      minWidth: 100,
+      title: '备注',
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      width: 200,
+    },
+    {
+      align: 'center',
+      cellRender: {
+        attrs: {
+          nameField: 'name',
+          nameTitle: $t('system.role.name'),
+          onClick: onActionClick,
+        },
+        name: 'CellOperation',
+      },
+      field: 'operation',
+      fixed: 'right',
+      title: '操作',
+      width: 200,
+    },
+  ];
+}

apps/web-antd/src/views/role/list.vue

@@ -0,0 +1,164 @@
+<script lang="ts" setup>
+import type { Recordable } from '@vben/types';
+
+import type {
+  OnActionClickParams,
+  VxeTableGridOptions,
+} from '#/adapter/vxe-table';
+import type { RoleApi } from '#/api';
+
+import { Page, useVbenDrawer } from '@vben/common-ui';
+import { Plus } from '@vben/icons';
+
+import { Button, message, Modal } from 'ant-design-vue';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { enabledRole, queryRoleList, removeRole } from '#/api';
+import { $t } from '#/locales';
+
+import { useColumns, useGridFormSchema } from './data';
+import Form from './modules/form.vue';
+
+const [FormDrawer, formDrawerApi] = useVbenDrawer({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    fieldMappingTime: [['createTime', ['startTime', 'endTime']]],
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useColumns(onActionClick, onStatusChange),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          const res = await queryRoleList({
+            page: page.currentPage,
+            size: page.pageSize,
+            ...formValues,
+          });
+          return {
+            total: res.total,
+            items: res.records,
+          };
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'id',
+    },
+
+    toolbarConfig: {
+      custom: true,
+      export: false,
+      refresh: { code: 'query' },
+      search: true,
+      zoom: true,
+    },
+  } as VxeTableGridOptions<RoleApi.Role>,
+});
+
+function onActionClick(e: OnActionClickParams<RoleApi.Role>) {
+  switch (e.code) {
+    case 'delete': {
+      onDelete(e.row);
+      break;
+    }
+    case 'edit': {
+      onEdit(e.row);
+      break;
+    }
+  }
+}
+
+/**
+ * 将Antd的Modal.confirm封装为promise，方便在异步函数中调用。
+ * @param content 提示内容
+ * @param title 提示标题
+ */
+function confirm(content: string, title: string) {
+  return new Promise((reslove, reject) => {
+    Modal.confirm({
+      content,
+      onCancel() {
+        reject(new Error('已取消'));
+      },
+      onOk() {
+        reslove(true);
+      },
+      title,
+    });
+  });
+}
+
+/**
+ * 状态开关即将改变
+ * @param newStatus 期望改变的状态值
+ * @param row 行数据
+ * @returns 返回false则中止改变，返回其他值（undefined、true）则允许改变
+ */
+async function onStatusChange(newStatus: number, row: RoleApi.Role) {
+  const status: Recordable<string> = {
+    0: '禁用',
+    1: '启用',
+  };
+  try {
+    await confirm(
+      `你要将${row.name}的状态切换为 【${status[newStatus.toString()]}】 吗？`,
+      `切换状态`,
+    );
+    await enabledRole(row.id);
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+function onEdit(row: RoleApi.Role) {
+  formDrawerApi.setData(row).open();
+}
+
+function onDelete(row: RoleApi.Role) {
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting', [row.name]),
+    duration: 0,
+    key: 'action_process_msg',
+  });
+  removeRole(row.id)
+    .then(() => {
+      message.success({
+        content: $t('ui.actionMessage.deleteSuccess', [row.name]),
+        key: 'action_process_msg',
+      });
+      onRefresh();
+    })
+    .catch(() => {
+      hideLoading();
+    });
+}
+
+function onRefresh() {
+  gridApi.query();
+}
+
+function onCreate() {
+  formDrawerApi.setData({}).open();
+}
+</script>
+<template>
+  <Page auto-content-height>
+    <FormDrawer />
+    <Grid table-title="角色列表">
+      <template #toolbar-tools>
+        <Button type="primary" @click="onCreate">
+          <Plus class="size-5" />
+          {{ $t('ui.actionTitle.create', ['角色']) }}
+        </Button>
+      </template>
+    </Grid>
+  </Page>
+</template>

apps/web-antd/src/views/role/modules/form.vue

@@ -0,0 +1,138 @@
+<script lang="ts" setup>
+import type { DataNode } from 'ant-design-vue/es/tree';
+
+import type { Recordable } from '@vben/types';
+
+import type { RoleApi } from '#/api';
+
+import { computed, ref } from 'vue';
+
+import { useVbenDrawer, VbenTree } from '@vben/common-ui';
+import { IconifyIcon } from '@vben/icons';
+
+import { Spin } from 'ant-design-vue';
+
+import { useVbenForm } from '#/adapter/form';
+import { createRole, queryMenuList, updateRole } from '#/api';
+import { $t } from '#/locales';
+
+import { useFormSchema } from '../data';
+
+const emits = defineEmits(['success']);
+
+const formData = ref<RoleApi.Role>();
+
+const [Form, formApi] = useVbenForm({
+  schema: useFormSchema(),
+  showDefaultActions: false,
+});
+
+const permissions = ref<DataNode[]>([]);
+const loadingPermissions = ref(false);
+
+const id = ref();
+const [Drawer, drawerApi] = useVbenDrawer({
+  async onConfirm() {
+    const { valid } = await formApi.validate();
+    if (!valid) return;
+    const values = await formApi.getValues();
+    drawerApi.lock();
+    (id.value ? updateRole(id.value, values) : createRole(values))
+      .then(() => {
+        emits('success');
+        drawerApi.close();
+      })
+      .catch(() => {
+        drawerApi.unlock();
+      });
+  },
+  onOpenChange(isOpen) {
+    if (isOpen) {
+      const data = drawerApi.getData<RoleApi.Role>();
+      formApi.resetForm();
+      if (data) {
+        formData.value = data;
+        id.value = data.id;
+        formApi.setValues(data);
+      } else {
+        id.value = undefined;
+      }
+
+      if (permissions.value.length === 0) {
+        loadPermissions();
+      }
+    }
+  },
+});
+
+async function loadPermissions() {
+  loadingPermissions.value = true;
+  try {
+    const res = await queryMenuList('all');
+    permissions.value = res as unknown as DataNode[];
+  } finally {
+    loadingPermissions.value = false;
+  }
+}
+
+const getDrawerTitle = computed(() => {
+  return formData.value?.id
+    ? $t('common.edit', '角色')
+    : $t('common.create', '角色');
+});
+
+function getNodeClass(node: Recordable<any>) {
+  const classes: string[] = [];
+  if (node.value?.type === 'button') {
+    classes.push('inline-flex');
+    if (node.index % 3 >= 1) {
+      classes.push('!pl-0');
+    }
+  }
+
+  return classes.join(' ');
+}
+</script>
+<template>
+  <Drawer :title="getDrawerTitle">
+    <Form>
+      <template #permissions="slotProps">
+        <Spin :spinning="loadingPermissions" wrapper-class-name="w-full">
+          <VbenTree
+            :tree-data="permissions"
+            multiple
+            bordered
+            :default-expanded-level="2"
+            :get-node-class="getNodeClass"
+            v-bind="slotProps"
+            value-field="id"
+            label-field="meta.title"
+            icon-field="meta.icon"
+          >
+            <template #node="{ value }">
+              <IconifyIcon v-if="value.meta.icon" :icon="value.meta.icon" />
+              {{ $t(value.meta.title) }}
+            </template>
+          </VbenTree>
+        </Spin>
+      </template>
+    </Form>
+  </Drawer>
+</template>
+<style lang="css" scoped>
+:deep(.ant-tree-title) {
+  .tree-actions {
+    display: none;
+    margin-left: 20px;
+  }
+}
+
+:deep(.ant-tree-title:hover) {
+  .tree-actions {
+    display: flex;
+    flex: auto;
+    justify-content: flex-end;
+    margin-left: 20px;
+  }
+}
+</style>

apps/web-antd/src/views/user/index.vue

@@ -1,78 +0,0 @@
-<script setup lang="ts">
-import { ref } from 'vue';
-
-import { getAllDeptTree, queryUserList } from '#/api';
-
-import UserTableView from './user-table-view.vue';
-
-const generateFormModel = () => {
-  return {
-    id: '',
-    username: '',
-    name: '',
-    phone: '',
-    email: '',
-    createdTime: [],
-    enableState: '',
-    deptId: '',
-    page: 1,
-    current: 1,
-    size: 10,
-  };
-};
-const treeData = ref([]);
-
-const renderData = ref([]);
-const formModel = ref(generateFormModel());
-// const deptOptions = ref([]);
-
-const getDeptData = async () => {
-  try {
-    treeData.value = await getAllDeptTree(0);
-  } catch {}
-};
-
-const getUserTableData = async (params: any) => {
-  try {
-    const res = await queryUserList(params);
-    renderData.value = res.records;
-  } catch {}
-};
-
-// 查询
-const search = () => {
-  getUserTableData({
-    // ...pagination,
-    ...formModel.value,
-  });
-};
-
-// const handleSelectDept = (id: any[]) => {
-//   const [deptId] = id;
-//   formModel.value.deptId = deptId;
-//   search();
-// };
-
-const handleSelectUser = (data: any) => {
-  formModel.value = data;
-  search();
-};
-
-getUserTableData({ page: 1, size: 10, current: 1 });
-getDeptData();
-</script>
-
-<template>
-  <div class="px-1">
-    <div class="mt-5 flex flex-col lg:flex-row">
-      <!--      <div class="mr-4 w-full lg:w-1/4">-->
-      <!--        <UserDeptTree :treeData="treeData" @select="handleSelectDept" />-->
-      <!--      </div>-->
-      <div class="w-full">
-        <UserTableView :render-data="renderData" @change="handleSelectUser" />
-      </div>
-    </div>
-  </div>
-</template>
-
-<style scoped></style>

apps/web-antd/src/views/user/user-edit.vue

@@ -1,245 +0,0 @@
-<script lang="ts" setup>
-import { computed, ref } from 'vue';
-
-const props = defineProps({
-  prem: {
-    type: Object,
-    default: () => ({}),
-  },
-  isCreate: Boolean,
-});
-// const emit = defineEmits(['refresh']);
-const modalTitle = computed(() => {
-  return props.isCreate ? '新增用户' : '编辑用户';
-});
-// const checkKeys = ref<number[]>([]);
-
-const CreateRef = ref();
-const open = ref<boolean>(false);
-
-const formData = ref({
-  value: undefined,
-  code: undefined,
-  username: '',
-  nickName: '',
-  password: '',
-  phone: '',
-  email: '',
-  enabled: '',
-  address: '',
-  deptId: undefined,
-  roleIds: [],
-  permissionIds: [],
-  authorities: [],
-});
-
-// const formDifer = ref{};
-
-// 部门数据
-const deptOptions = ref();
-// const getDeptData = async () => {
-//   const res = await getAllDeptTree(0);
-//   deptOptions.value = res.data;
-// };
-// 角色数据
-const roleOptions = ref();
-// const getRoleData = async () => {
-//   const res = await queryRoleList('');
-//   roleOptions.value = res.data.records.filter((item: any) => {
-//     return item.enabled !== false;
-//   });
-// };
-
-// 组件被点击
-const handleClick = () => {
-  // getDeptData();
-  // getRoleData();
-  // const userId = props.prem?.id;
-  // 编辑
-  // if (!props.isCreate && userId) {
-  //   formData.value = props.prem;
-  //   formDifer = { ...props.prem };
-  // }
-  open.value = true;
-};
-
-// 做出只编辑的部分
-// const diffDataForm = (newData: any, oldData: any) => {
-//   const result = {}; // 报错编辑的字段内容
-//   Object.keys(oldData).forEach((key) => {
-//     if (oldData[key] !== newData[key]) {
-//       result[key] = newData[key];
-//     }
-//   });
-//   return result;
-// };
-
-// 提交
-// const handleSubmit = async () => {
-//   const valid = await CreateRef.value?.validate();
-//   if (!valid) {
-//     formData.value.permissionIds = checkKeys.value;
-//     // 新增
-//     if (props.isCreate) {
-//       // formData.value.username = formData.value.email;
-//       const res = await userStore.createUser(formData.value);
-//       if (res.status === 200) {
-//         Message.success({
-//           content: '新建成功',
-//           duration: 5 * 1000,
-//         });
-//       }
-//       CreateRef.value?.resetFields();
-//     } else {
-//       // 编辑
-//       // formDifer = diffDataForm(formData.value, formDifer);
-//       // if (Object.keys(formDifer).length === 0) {
-//       //   Message.success({
-//       //     content: '未编辑',
-//       //     duration: 3 * 1000,
-//       //   });
-//       // } else {
-//       //   formDifer.id = formData.value.id;
-//       //   const res = await userStore.updateUser(formData.value);
-//       //   if (res.status === 200) {
-//       //     Message.success({
-//       //       content: '编辑成功',
-//       //       duration: 5 * 1000,
-//       //     });
-//       //   }
-//       // }
-//       const res = await userStore.updateUser(formData.value);
-//       if (res.status === 200) {
-//         Message.success({
-//           content: '编辑成功',
-//           duration: 5 * 1000,
-//         });
-//       }
-//     }
-//     checkKeys.value = [];
-//     emit('refresh');
-//     setVisible(false);
-//   }
-// };
-
-// 关闭
-const handleCancel = async () => {
-  // checkKeys.value = [];
-  open.value = false;
-};
-</script>
-
-<template>
-  <a-button
-    v-if="props.isCreate"
-    type="primary"
-    :style="{ marginBottom: '10px', marginLeft: '10px' }"
-    @click="handleClick"
-  >
-    新建
-  </a-button>
-  <a-button v-if="!props.isCreate" @click="handleClick"> 编辑 </a-button>
-
-  <a-modal width="700px" v-model:open="open" @cancel="handleCancel">
-    <template #title>{{ modalTitle }}</template>
-    <a-form ref="CreateRef" :model="formData" :style="{ width: '650px' }">
-      <a-form-item
-        field="username"
-        label="用户名"
-        :validate-trigger="['change', 'input']"
-        :rules="[
-          { required: true, message: '用户名不能为空' },
-          {
-            match: /^[a-zA-Z0-9\u4e00-\u9fa5]{1,20}$/,
-            message: '请输入正确格式的用户名',
-          },
-        ]"
-      >
-        <a-input
-          v-if="props.isCreate"
-          v-model="formData.username"
-          placeholder="请输入用户名"
-        />
-
-        <div v-else>{{ formData.username }}</div>
-      </a-form-item>
-      <a-form-item
-        field="email"
-        label="Email"
-        :rules="[
-          {
-            required: true,
-            type: 'email',
-            message: 'Email不能为空',
-          },
-        ]"
-        :validate-trigger="['change', 'input']"
-      >
-        <a-input v-model="formData.email" placeholder="请输入Email" />
-      </a-form-item>
-      <a-form-item
-        field="phone"
-        label="电话"
-        :rules="[
-          { required: true, message: '电话不能为空' },
-          { match: /^1[3-9]\d{9}$/, message: '请输入正确格式的电话' },
-        ]"
-        :validate-trigger="['change', 'input']"
-      >
-        <a-input v-model="formData.phone" placeholder="请输入电话" />
-      </a-form-item>
-      <a-form-item
-        field="password"
-        label="密码"
-        v-if="isCreate"
-        :validate-trigger="['change', 'input']"
-        :rules="[{ required: true, message: '密码不能为空' }]"
-      >
-        <a-input v-model="formData.password" placeholder="请输入密码" />
-      </a-form-item>
-      <a-form-item field="nickName" label="昵称">
-        <a-input v-model="formData.nickName" placeholder="请输入昵称" />
-      </a-form-item>
-
-      <a-form-item field="address" label="地址">
-        <a-input v-model="formData.address" placeholder="请输入地址" />
-      </a-form-item>
-      <a-form-item
-        field="deptId"
-        label="部门"
-        :rules="[{ required: true, message: '部门不能为空' }]"
-        :validate-trigger="['change']"
-      >
-        <a-tree-select
-          v-model="formData.deptId"
-          :field-names="{
-            key: 'id',
-            title: 'name',
-            children: 'children',
-          }"
-          :data="deptOptions"
-          allow-clear
-          placeholder="请选择所属部门"
-        />
-      </a-form-item>
-
-      <a-form-item
-        field="roleIds"
-        label="角色"
-        :rules="[{ required: true, message: '角色不能为空' }]"
-        :validate-trigger="['change']"
-      >
-        <a-select
-          v-model="formData.roleIds"
-          :options="roleOptions"
-          :field-names="{
-            value: 'id',
-            label: 'name',
-          }"
-          placeholder="请选择角色"
-          multiple
-        />
-      </a-form-item>
-    </a-form>
-  </a-modal>
-</template>

apps/web-antd/src/views/user/user-table-view.vue

@@ -1,200 +0,0 @@
-<script setup lang="ts">
-import type { VxeGridListeners, VxeGridProps } from '#/adapter/vxe-table';
-
-import { ref } from 'vue';
-
-import { message } from 'ant-design-vue';
-
-import { useVbenVxeGrid } from '#/adapter/vxe-table';
-import { queryUserList } from '#/api';
-
-import UserEdit from './user-edit.vue';
-
-// import { MOCK_TABLE_DATA } from '../table-data';
-
-interface RowType {
-  id: number;
-  email: string;
-  enableState: boolean;
-  name: string;
-  phone: string;
-  username: string;
-  deptId: number;
-  roleId: number;
-  createTime: string;
-  ceatedBy: string;
-  createId: number;
-}
-
-const emit = defineEmits(['change']);
-
-// const columns = computed(() => [
-//   {
-//     title: '用户名',
-//     field: 'username',
-//   },
-//   {
-//     title: '电话',
-//     field: 'phone',
-//   },
-//   {
-//     title: '邮箱',
-//     field: 'email',
-//   },
-//   {
-//     title: '昵称',
-//     field: 'name',
-//   },
-//   {
-//     title: '地址',
-//     field: 'address',
-//   },
-//   {
-//     title: '是否启用',
-//     field: 'enableState',
-//   },
-//   {
-//     title: '操作',
-//     field: 'operations',
-//   },
-// ]);
-
-const gridEvents: VxeGridListeners<RowType> = {
-  cellClick: ({ row }) => {
-    message.info(`cell-click: ${row.name}`);
-  },
-};
-
-// const props = defineProps({
-//   renderData: {
-//     type: Array,
-//     default: () => []
-//   }
-// })
-
-const gridOptions: VxeGridProps<RowType> = {
-  checkboxConfig: {
-    highlight: true,
-    labelField: 'name',
-  },
-  columns: [
-    {
-      title: '用户名',
-      field: 'username',
-    },
-    {
-      title: '电话',
-      field: 'phone',
-    },
-  ],
-  exportConfig: {},
-  keepSource: true,
-  proxyConfig: {
-    ajax: {
-      query: async () => {
-        const res = await queryUserList({
-          page: 1,
-          size: 10,
-        });
-        return res.records;
-      },
-    },
-  },
-};
-
-const [Grid] = useVbenVxeGrid({ gridEvents, gridOptions });
-
-const generateFormModel = () => {
-  return {
-    id: '',
-    name: '',
-    username: '',
-    phone: '',
-    email: '',
-    createdTime: [],
-    enableState: '',
-    deptId: '',
-    page: 1,
-    current: 1,
-    size: 10,
-  };
-};
-const formModel = ref(generateFormModel());
-
-const selectUser = () => {
-  emit('change', {
-    ...formModel.value,
-  });
-};
-
-// 重置
-const reset = () => {
-  formModel.value = generateFormModel();
-  emit('change', {
-    ...formModel.value,
-  });
-};
-</script>
-
-<template>
-  <div class="px-5">
-    <a-card class="general-card">
-      <a-row>
-        <a-col :flex="1">
-          <a-form
-            :model="formModel"
-            :label-col-props="{ span: 6 }"
-            :wrapper-col-props="{ span: 18 }"
-            label-align="right"
-          >
-            <a-row :gutter="18">
-              <a-col :span="6">
-                <a-form-item field="username" label="用户名">
-                  <a-input
-                    v-model:value="formModel.username"
-                    placeholder="请输入用户名"
-                  />
-                </a-form-item>
-              </a-col>
-              <a-col :span="6">
-                <a-form-item field="phone" label="电话号码">
-                  <a-input
-                    v-model:value="formModel.phone"
-                    placeholder="请输入电话号码"
-                  />
-                </a-form-item>
-              </a-col>
-              <a-col :span="6">
-                <a-form-item field="deptId" label="部门">
-                  <a-input
-                    v-model:value="formModel.deptId"
-                    placeholder="所属部门"
-                  />
-                </a-form-item>
-              </a-col>
-            </a-row>
-          </a-form>
-        </a-col>
-        <a-col flex="86px" style="text-align: right">
-          <a-space :size="18">
-            <a-button type="primary" @click="selectUser"> 查询 </a-button>
-            <a-button @click="reset"> 重置 </a-button>
-          </a-space>
-        </a-col>
-      </a-row>
-      <a-divider style="margin-top: 0" />
-      <a-row>
-        <a-col :span="12">
-          <a-space>
-            <UserEdit :is-create="true" />
-          </a-space>
-        </a-col>
-      </a-row>
-      <div class="vp-raw w-full">
-        <Grid />
-      </div>
-    </a-card>
-  </div>
-</template>
-
-<style scoped></style>

apps/web-antd/vite.config.mts

@@ -10,13 +10,14 @@ export default defineConfig(async () => {
             changeOrigin: true,
             rewrite: (path) => path.replace(/^\/api/, ''),
             // mock代理目标地址
-            target: 'http://localhost:8081/api',
+            // target: 'http://localhost:8081/api',
+            target: 'http://43.139.10.64:8082/api',
             ws: true,
           },
           '/docx': {
             changeOrigin: true,
             rewrite: (path) => path.replace(/^\/docx/, ''),
-            target: 'http://47.112.173.8:6805/static',
+            target: 'http://47.112.173.8:6802/static',
           },
           '/pptx': {
             changeOrigin: true,
@@ -26,7 +27,8 @@ export default defineConfig(async () => {
           '/v1': {
             changeOrigin: true,
             rewrite: (path) => path.replace(/^\/v1/, ''),
-            target: 'http://localhost:8081/v1',
+            // target: 'http://localhost:8081/v1',
+            target: 'http://43.139.10.64:8082/v1',
           },
         },
       },

packages/icons/src/iconify/index.ts

@@ -14,4 +14,6 @@ export const MdiChevron = createIconifyIcon('tabler:chevron-right');
 export const MdiUser = createIconifyIcon('mdi:user');
 export const MageRobot = createIconifyIcon('mage:robot');
 export const RiDept = createIconifyIcon('ri:door-open-line');
+export const EosRole = createIconifyIcon('eos-icons:role-binding-outlined');
+export const IconSystem = createIconifyIcon('icon-park-twotone:system');
 // export const MdiUser = createIconifyIcon('mdi:user');