feat(permission): 添加权限管理模块

- 添加角色切换按钮
2023-11-24 17:10:28 +08:00 · 2023-11-24 17:10:28 +08:00 · 48fd83ae06
commit 48fd83ae06
parent 2d604e6ed0
39 changed files with 2969 additions and 1689 deletions
--- a/package.json
+++ b/package.json
@ -40,6 +40,7 @@
    "mitt": "^3.0.0",
    "nprogress": "^0.2.0",
    "pinia": "^2.0.23",
+    "pinia-plugin-persistedstate": "^3.2.0",
    "query-string": "^8.0.3",
    "sortablejs": "^1.15.0",
    "vue": "^3.2.40",
--- a/src/api/dept.ts
+++ b/src/api/dept.ts
@ -1,17 +1,18 @@
 import axios from 'axios';
-import { ListParams, queryList } from '@/api/list';
-import qs from "query-string";
+import qs from 'query-string';
+import { ListParams } from '@/api/list';

-export interface DeptCreateRecord {
+export interface DeptRecord {
+  id?: number | undefined;
+  parentId?: number;
  name: string;
-  code: number;
+  code: string;
+  deptSort: number;
  remark: string;
-}
-export interface DeptRecord extends DeptCreateRecord {
-  id: number;
+  children?: DeptRecord[];
 }

-export function create(data: DeptCreateRecord) {
+export function create(data: DeptRecord) {
  return axios.post(`/api/dept`, data);
 }

@ -19,15 +20,18 @@ export function update(data: DeptRecord) {
  return axios.patch(`/api/dept/${data.id}`, data);
 }

-
-export function getDetail(id: number) {
-  return axios.get<DeptRecord>(`/api/dept/${id}`);
-}
-
 export function remove(id: number) {
  return axios.delete(`/api/dept/${id}`);
 }

+export function getDeptTree(params?: Partial<DeptRecord>) {
+  return axios.get<DeptRecord[]>(`/api/dept/trees`, {
+    params,
+    paramsSerializer: (obj) => {
+      return qs.stringify(obj);
+    },
+  });
+}
 export function listDepts(params?: ListParams<Partial<DeptRecord>>) {
  return axios.get<DeptRecord[]>(`/api/dept`, {
    params,
@ -36,7 +40,6 @@ export function listDepts(params?: ListParams<Partial<DeptRecord>>) {
    },
  });
 }
-
-export function queryDepts(params?: ListParams<Partial<DeptRecord>>) {
-  return queryList(`/api/dept`, params);
-}
+// export function queryDepts(params?: ListParams<Partial<DeptRecord>>) {
+//   return queryList(`/api/dept`, params);
+// }
--- a/src/api/interceptor.ts
+++ b/src/api/interceptor.ts
@ -70,6 +70,7 @@ axios.interceptors.response.use(
  },
  (error) => {
    const { response } = error;
+    console.log(response);
    if (
      [50008, 50012, 50014].includes(response.data.code) &&
      response.config.url !== '/api/user/info'
--- a/src/api/list.ts
+++ b/src/api/list.ts
@ -14,8 +14,8 @@ export interface Pageable {
 }

 export interface ListParams<Record> {
-  current: number;
-  pageSize: number;
+  page: number;
+  size: number;
 }

 export interface ListRes<Record> {
--- a/src/api/permission.ts
+++ b/src/api/permission.ts
@ -0,0 +1,68 @@
+import axios from 'axios';
+import { ListParams, queryList } from '@/api/list';
+import qs from 'query-string';
+
+export interface PermissionCreateRecord {
+  module: string;
+  title: string;
+  code: string;
+  remark: string;
+}
+export interface PermissionRecord extends PermissionCreateRecord {
+  id: number | undefined;
+}
+export interface PermissionTreeRecord extends PermissionCreateRecord {
+  id: number;
+  parentId: number;
+  children?: PermissionTreeRecord[];
+}
+
+export function listToTree(nodes: any[]): any[] {
+  const map: { [id: number]: any } = {};
+  const result: any[] = [];
+  nodes.forEach((item) => {
+    map[item.id] = item;
+  });
+  nodes.forEach((item) => {
+    const parent = map[item.parentId];
+    if (parent) {
+      if (!parent.children) {
+        parent.children = [];
+      }
+      parent.children.push(item);
+    } else {
+      result.push(item);
+    }
+  });
+  return result;
+}
+
+export function create(data: PermissionCreateRecord) {
+  return axios.post(`/api/permission`, data);
+}
+
+export function update(data: PermissionRecord) {
+  return axios.patch(`/api/permission/${data.id}`, data);
+}
+
+export function getDetail(id: number) {
+  return axios.get<PermissionRecord>(`/api/permission/${id}`);
+}
+
+export function remove(id: number) {
+  return axios.delete(`/api/permission/${id}`);
+}
+export function list(params?: Partial<PermissionRecord>) {
+  return axios.get<PermissionTreeRecord[]>(`/api/permission/all`, {
+    params,
+    paramsSerializer: (obj) => {
+      return qs.stringify(obj);
+    },
+  });
+}
+
+export function queryPermissions(
+  params?: ListParams<Partial<PermissionRecord>>
+) {
+  return queryList<PermissionRecord>(`/api/permission`, params);
+}
--- a/src/api/role.ts
+++ b/src/api/role.ts
@ -2,11 +2,18 @@ import axios from 'axios';
 import { ListParams, queryList } from '@/api/list';

 export interface RoleCreateRecord {
+  id: number | undefined;
  name: string;
-  level: string;
+  dataScope: string;
+  permissionIds: (number | undefined)[];
+  remark: string;
 }
 export interface RoleRecord extends RoleCreateRecord {
-  id: number;
+  permissions?: [];
+}
+
+export interface RoleListRecord extends RoleRecord {
+  name: string;
 }


@ -28,5 +35,5 @@ export function remove(id: number) {
 }

 export function queryRoles(params?: ListParams<Partial<RoleRecord>>) {
-  return queryList(`/api/role`, params);
+  return queryList<RoleRecord>(`/api/role`, params);
 }
--- a/src/api/user.ts
+++ b/src/api/user.ts
@ -31,8 +31,8 @@ export interface CreateRecord {
  phone: string;
  email: string;
  enableState: string;
-  dept: DeptRecord | undefined;
-  roles: RoleRecord[];
+  deptId: DeptRecord | undefined;
+  roleIds: RoleRecord[];
 }
 export interface SelfRecord {
  username: string;
@ -42,7 +42,7 @@ export interface SelfRecord {
  remark: string;
 }

-export interface UserRecord extends CreateRecord{
+export interface UserRecord extends CreateRecord {
  id: number;
 }

@ -97,6 +97,10 @@ export function selfUpdate(data: UserState) {
  return axios.patch<Res>(`/api/user/self`, data);
 }

+export function switchRole(roleId: number) {
+  return axios.patch<UserState>(`/api/user/self/switch-role/${roleId}`);
+}
+
 export function getUserInfo() {
  return axios.get<UserState>('/api/user/info');
 }
@ -120,4 +124,4 @@ export function queryUserList(params: UserParams) {
      return qs.stringify(obj);
    },
  });
-}
+}
--- a/src/components/navbar/index.vue
+++ b/src/components/navbar/index.vue
@ -144,6 +144,16 @@
          </a-button>
        </a-tooltip>
      </li>
+      <li>
+        <a-tooltip content="切换用户角色">
+          <a-select
+            v-model="defaultRole"
+            :style="{ width: '140px' }"
+            :options="roleOptions as SelectOptionData[]"
+            @change="switchRoles"
+          />
+        </a-tooltip>
+      </li>
      <li>
        <a-dropdown trigger="click">
          <a-avatar
@ -153,14 +163,14 @@
            <img alt="avatar" :src="avatar" />
          </a-avatar>
          <template #content>
-            <a-doption>
-              <a-space @click="switchRoles">
-                <icon-tag />
-                <span>
-                  {{ $t('messageBox.switchRoles') }}
-                </span>
-              </a-space>
-            </a-doption>
+<!--            <a-doption>-->
+<!--              <a-space @click="switchRoles">-->
+<!--                <icon-tag />-->
+<!--                <span>-->
+<!--                  {{ $t('messageBox.switchRoles') }}-->
+<!--                </span>-->
+<!--              </a-space>-->
+<!--            </a-doption>-->
            <a-doption>
              <a-space @click="$router.push({ name: 'Info' })">
                <icon-user />
@ -202,6 +212,7 @@
  import useUser from '@/hooks/user';
  import Menu from '@/components/menu/index.vue';
  import userIcon from '@/assets/images/user-circle.png';
+  import { SelectOptionData } from '@arco-design/web-vue/es/select/interface';
  import MessageBox from '../message-box/index.vue';

  const appStore = useAppStore();
@ -237,6 +248,15 @@
  };
  const refBtn = ref();
  const triggerBtn = ref();
+  const defaultRole = ref(userStore.role?.id);
+  const roleOptions = computed(() => {
+    return userStore.roles?.map((role) => {
+      return {
+        value: role.id,
+        label: role.name,
+      };
+    });
+  });
  const setPopoverVisible = () => {
    const event = new MouseEvent('click', {
      view: window,
@ -256,9 +276,11 @@
    });
    triggerBtn.value.dispatchEvent(event);
  };
-  const switchRoles = async () => {
-    const res = await userStore.switchRoles();
-    Message.success(res as string);
+  const switchRoles = async (value: number) => {
+    // 切换角色
+    await userStore.switchRoles(value);
+    window.location.reload();
+    // Message.success(res as string);
  };
  const toggleDrawerMenu = inject('toggleDrawerMenu') as () => void;
 </script>
--- a/src/directive/permission/index.ts
+++ b/src/directive/permission/index.ts
@ -1,16 +1,15 @@
 import { DirectiveBinding } from 'vue';
 import { useUserStore } from '@/store';
+import { intersection } from 'lodash';

 function checkPermission(el: HTMLElement, binding: DirectiveBinding) {
  const { value } = binding;
  const userStore = useUserStore();
-  const { role } = userStore;
+  const { permissions } = userStore;

  if (Array.isArray(value)) {
    if (value.length > 0) {
-      const permissionValues = value;
-
-      const hasPermission = permissionValues.includes(role);
+      const hasPermission = intersection(value, permissions).length > 0;
      if (!hasPermission && el.parentNode) {
        el.parentNode.removeChild(el);
      }
--- a/src/hooks/permission.ts
+++ b/src/hooks/permission.ts
@ -1,5 +1,6 @@
 import { RouteLocationNormalized, RouteRecordRaw } from 'vue-router';
 import { useUserStore } from '@/store';
+import { intersection } from 'lodash';

 export default function usePermission() {
  const userStore = useUserStore();
@ -7,27 +8,29 @@ export default function usePermission() {
    accessRouter(route: RouteLocationNormalized | RouteRecordRaw) {
      return (
        !route.meta?.requiresAuth ||
-        !route.meta?.roles ||
-        route.meta?.roles?.includes('*') ||
-        route.meta?.roles?.includes(userStore.role)
+        !route.meta?.permissions ||
+        route.meta?.permissions?.includes('*') ||
+        intersection(route.meta?.permissions, userStore.permissions).length > 0
+        // route.meta?.permissions?.includes(userStore.permissions)
      );
    },
-    findFirstPermissionRoute(_routers: any, role = 'admin') {
-      const cloneRouters = [..._routers];
-      while (cloneRouters.length) {
-        const firstElement = cloneRouters.shift();
-        if (
-          firstElement?.meta?.roles?.find((el: string[]) => {
-            return el.includes('*') || el.includes(role);
-          })
-        )
-          return { name: firstElement.name };
-        if (firstElement?.children) {
-          cloneRouters.push(...firstElement.children);
-        }
-      }
-      return null;
-    },
+    // TODO 不知道是干嘛的
+    // findFirstPermissionRoute(_routers: any, role: string | string[] = 'admin') {
+    //   const cloneRouters = [..._routers];
+    //   while (cloneRouters.length) {
+    //     const firstElement = cloneRouters.shift();
+    //     if (
+    //       firstElement?.meta?.roles?.find((el: string[]) => {
+    //         return el.includes('*') || el.includes(role);
+    //       })
+    //     )
+    //       return { name: firstElement.name };
+    //     if (firstElement?.children) {
+    //       cloneRouters.push(...firstElement.children);
+    //     }
+    //   }
+    //   return null;
+    // },
    // You can add any rules you want
  };
 }
--- a/src/layout/default-layout.vue
+++ b/src/layout/default-layout.vue
@ -87,7 +87,7 @@
    appStore.updateSettings({ menuCollapse: val });
  };
  watch(
-    () => userStore.role,
+    () => userStore.permissions,
    (roleValue) => {
      if (roleValue && !permission.accessRouter(route))
        router.push({ name: 'notFound' });
--- a/src/router/guard/permission.ts
+++ b/src/router/guard/permission.ts
@ -45,7 +45,7 @@ export default function setupPermissionGuard(router: Router) {
      if (permissionsAllow) next();
      else {
        const destination =
-          Permission.findFirstPermissionRoute(appRoutes, userStore.role) ||
+          // Permission.findFirstPermissionRoute(appRoutes, userStore.permissions) ||
          NOT_FOUND;
        next(destination);
      }
--- a/src/router/guard/userLoginInfo.ts
+++ b/src/router/guard/userLoginInfo.ts
@ -9,7 +9,7 @@ export default function setupUserLoginInfoGuard(router: Router) {
    NProgress.start();
    const userStore = useUserStore();
    if (isLogin()) {
-      if (userStore.role) {
+      if (userStore.permissions && userStore.permissions.length > 0) {
        next();
      } else {
        try {
--- a/src/router/routes/modules/dashboard.ts
+++ b/src/router/routes/modules/dashboard.ts
@ -19,7 +19,7 @@ const DASHBOARD: AppRouteRecordRaw = {
      meta: {
        locale: 'menu.dashboard.workplace',
        requiresAuth: true,
-        roles: ['*'],
+        permissions: ['*'],
      },
    },

@ -30,7 +30,7 @@ const DASHBOARD: AppRouteRecordRaw = {
      meta: {
        locale: 'menu.dashboard.monitor',
        requiresAuth: true,
-        roles: ['admin'],
+        permissions: ['admin'],
      },
    },
  ],
--- a/src/router/routes/modules/exception.ts
+++ b/src/router/routes/modules/exception.ts
@ -19,7 +19,7 @@ const EXCEPTION: AppRouteRecordRaw = {
      meta: {
        locale: 'menu.exception.403',
        requiresAuth: true,
-        roles: ['admin'],
+        permissions: ['admin'],
      },
    },
    {
@ -29,7 +29,7 @@ const EXCEPTION: AppRouteRecordRaw = {
      meta: {
        locale: 'menu.exception.404',
        requiresAuth: true,
-        roles: ['*'],
+        permissions: ['*'],
      },
    },
    {
@ -39,7 +39,7 @@ const EXCEPTION: AppRouteRecordRaw = {
      meta: {
        locale: 'menu.exception.500',
        requiresAuth: true,
-        roles: ['*'],
+        permissions: ['*'],
      },
    },
  ],
--- a/src/router/routes/modules/form.ts
+++ b/src/router/routes/modules/form.ts
@ -19,7 +19,7 @@ const FORM: AppRouteRecordRaw = {
      meta: {
        locale: 'menu.form.step',
        requiresAuth: true,
-        roles: ['admin'],
+        permissions: ['admin'],
      },
    },
    {
@ -29,7 +29,7 @@ const FORM: AppRouteRecordRaw = {
      meta: {
        locale: 'menu.form.group',
        requiresAuth: true,
-        roles: ['admin'],
+        permissions: ['admin'],
      },
    },
  ],
--- a/src/router/routes/modules/list.ts
+++ b/src/router/routes/modules/list.ts
@ -19,7 +19,7 @@ const LIST: AppRouteRecordRaw = {
      meta: {
        locale: 'menu.list.searchTable',
        requiresAuth: true,
-        roles: ['*'],
+        permissions: ['*'],
      },
    },
    {
@ -29,7 +29,7 @@ const LIST: AppRouteRecordRaw = {
      meta: {
        locale: 'menu.list.cardList',
        requiresAuth: true,
-        roles: ['*'],
+        permissions: ['*'],
      },
    },
  ],
--- a/src/router/routes/modules/profile.ts
+++ b/src/router/routes/modules/profile.ts
@ -19,7 +19,7 @@ const PROFILE: AppRouteRecordRaw = {
      meta: {
        locale: 'menu.profile.basic',
        requiresAuth: true,
-        roles: ['admin'],
+        permissions: ['admin'],
      },
    },
  ],
--- a/src/router/routes/modules/result.ts
+++ b/src/router/routes/modules/result.ts
@ -19,7 +19,7 @@ const RESULT: AppRouteRecordRaw = {
      meta: {
        locale: 'menu.result.success',
        requiresAuth: true,
-        roles: ['admin'],
+        permissions: ['admin'],
      },
    },
    {
@ -29,7 +29,7 @@ const RESULT: AppRouteRecordRaw = {
      meta: {
        locale: 'menu.result.error',
        requiresAuth: true,
-        roles: ['admin'],
+        permissions: ['admin'],
      },
    },
  ],
--- a/src/router/routes/modules/system.ts
+++ b/src/router/routes/modules/system.ts
@ -12,6 +12,36 @@ const SYSTEM: AppRouteRecordRaw = {
    order: 9,
  },
  children: [
+    {
+      path: 'permission',
+      name: 'Permission',
+      component: () => import('@/views/system/permission/index.vue'),
+      meta: {
+        locale: 'menu.system.permission',
+        requiresAuth: true,
+        permissions: ['PERMISSION_QUERY'],
+      },
+    },
+    {
+      path: 'role',
+      name: 'Role',
+      component: () => import('@/views/system/role/index.vue'),
+      meta: {
+        locale: 'menu.system.role',
+        requiresAuth: true,
+        permissions: ['ROLE_QUERY'],
+      },
+    },
+    {
+      path: 'dept',
+      name: 'Dept',
+      component: () => import('@/views/system/dept/index.vue'),
+      meta: {
+        locale: 'menu.system.dept',
+        requiresAuth: true,
+        permissions: ['DEPT_QUERY'],
+      },
+    },
    {
      path: 'user',
      name: 'User',
@ -19,7 +49,7 @@ const SYSTEM: AppRouteRecordRaw = {
      meta: {
        locale: 'menu.system.user',
        requiresAuth: true,
-        roles: ['*'],
+        permissions: ['USER_QUERY'],
      },
    },
  ],
--- a/src/router/routes/modules/user.ts
+++ b/src/router/routes/modules/user.ts
@ -19,7 +19,7 @@ const USER: AppRouteRecordRaw = {
      meta: {
        locale: 'menu.user.info',
        requiresAuth: true,
-        roles: ['*'],
+        permissions: ['*'],
      },
    },
    {
@ -29,7 +29,7 @@ const USER: AppRouteRecordRaw = {
      meta: {
        locale: 'menu.user.setting',
        requiresAuth: true,
-        roles: ['*'],
+        permissions: ['*'],
      },
    },
  ],
--- a/src/router/routes/modules/visualization.ts
+++ b/src/router/routes/modules/visualization.ts
@ -19,7 +19,7 @@ const VISUALIZATION: AppRouteRecordRaw = {
      meta: {
        locale: 'menu.visualization.dataAnalysis',
        requiresAuth: true,
-        roles: ['admin'],
+        permissions: ['admin'],
      },
    },
    {
@ -30,7 +30,7 @@ const VISUALIZATION: AppRouteRecordRaw = {
      meta: {
        locale: 'menu.visualization.multiDimensionDataAnalysis',
        requiresAuth: true,
-        roles: ['admin'],
+        permissions: ['admin'],
      },
    },
  ],
--- a/src/router/typings.d.ts
+++ b/src/router/typings.d.ts
@ -2,7 +2,7 @@ import 'vue-router';

 declare module 'vue-router' {
  interface RouteMeta {
-    roles?: string[]; // Controls roles that have access to the page
+    permissions?: string[]; // Controls roles that have access to the page
    requiresAuth: boolean; // Whether login is required to access the current page (every route must declare)
    icon?: string; // The icon show in the side menu
    locale?: string; // The locale name show in side menu and breadcrumb
--- a/src/store/index.ts
+++ b/src/store/index.ts
@ -1,9 +1,11 @@
 import { createPinia } from 'pinia';
+import piniaPluginPersistedstate from 'pinia-plugin-persistedstate';
 import useAppStore from './modules/app';
 import useUserStore from './modules/user';
 import useTabBarStore from './modules/tab-bar';

 const pinia = createPinia();
+pinia.use(piniaPluginPersistedstate);

 export { useAppStore, useUserStore, useTabBarStore };
 export default pinia;
--- a/src/store/modules/user/index.ts
+++ b/src/store/modules/user/index.ts
@ -2,6 +2,7 @@ import { defineStore } from 'pinia';
 import {
  login as userLogin,
  logout as userLogout,
+  switchRole,
  getUserInfo,
  LoginData,
 } from '@/api/user';
@ -20,7 +21,9 @@ const useUserStore = defineStore('user', {
    createAt: undefined,
    remark: undefined,
    id: undefined,
-    role: '',
+    role: undefined,
+    roles: undefined,
+    permissions: [],
  }),

  getters: {
@ -30,11 +33,16 @@ const useUserStore = defineStore('user', {
  },

  actions: {
-    switchRoles() {
-      return new Promise((resolve) => {
-        this.role = this.role === 'user' ? 'admin' : 'user';
-        resolve(this.role);
-      });
+    // switchRoles() {
+    //   return new Promise((resolve) => {
+    //     this.permissions = this.permissions === 'user' ? 'admin' : 'user';
+    //     resolve(this.permissions);
+    //   });
+    // },
+    async switchRoles(roleId: number) {
+      const res = await switchRole(roleId);
+      this.setInfo(res.data);
+      return res;
    },
    // Set user's information
    setInfo(partial: Partial<UserState>) {
@ -79,6 +87,7 @@ const useUserStore = defineStore('user', {
      }
    },
  },
+  persist: true,
 });

 export default useUserStore;
--- a/src/store/modules/user/types.ts
+++ b/src/store/modules/user/types.ts
@ -1,4 +1,6 @@
-export type RoleType = '' | '*' | 'admin' | 'user' | [];
+import { RoleRecord } from '@/api/role';
+
+export type RoleType = '' | '*' | 'admin' | 'user' | string[];
 export interface UserState {
  username?: string;
  name?: string;
@ -8,5 +10,7 @@ export interface UserState {
  createAt?: string;
  remark?: string;
  id?: number;
-  role: RoleType;
+  role?: RoleRecord;
+  roles?: RoleRecord[];
+  permissions?: string[] | '' | '*' | 'admin' | 'user';
 }
--- a/src/views/system/permission/components/permission-edit.vue
+++ b/src/views/system/permission/components/permission-edit.vue
@ -0,0 +1,120 @@
+<template>
+  <a-button v-if="props.isCreate" type="primary" @click="handleClick">
+    <template #icon><icon-plus /></template>
+    {{ modalTitle }}
+  </a-button>
+  <a-button
+    v-if="!props.isCreate"
+    type="outline"
+    size="small"
+    :style="{ marginRight: '10px' }"
+    @click="handleClick"
+  >
+    {{ modalTitle }}
+  </a-button>
+  <a-modal
+    width="600px"
+    :visible="visible"
+    @ok="handleSubmit"
+    @cancel="handleCancel"
+  >
+    <template #title>{{ modalTitle }}</template>
+    <a-form ref="createEditRef" :model="formData" :style="{ width: '500px' }">
+      <a-form-item
+        field="module"
+        label="权限模块"
+        :validate-trigger="['change', 'input']"
+        :rules="[{ required: true, message: '模块名称不能为空' }]"
+      >
+        <a-input v-model="formData.module" />
+      </a-form-item>
+      <a-form-item
+        field="title"
+        label="权限名"
+        :validate-trigger="['change', 'input']"
+        :rules="[{ required: true, message: '权限名不能为空' }]"
+      >
+        <a-input v-model="formData.title" />
+      </a-form-item>
+      <a-form-item
+        field="code"
+        label="权限编码"
+        :validate-trigger="['change', 'input']"
+        :rules="[{ required: true, message: '权限编码不能为空' }]"
+      >
+        <a-input v-model="formData.code" />
+      </a-form-item>
+      <a-form-item field="remark" label="备注">
+        <a-textarea v-model="formData.remark" placeholder="权限备注" />
+      </a-form-item>
+    </a-form>
+  </a-modal>
+</template>
+
+<script lang="ts" setup>
+  import useVisible from '@/hooks/visible';
+  import { computed, PropType, ref } from 'vue';
+  import { FormInstance } from '@arco-design/web-vue/es/form';
+  import { Message } from '@arco-design/web-vue';
+  import { PermissionRecord, create, update } from '@/api/permission';
+
+  const props = defineProps({
+    prem: {
+      type: Object as PropType<PermissionRecord>,
+    },
+    isCreate: Boolean,
+  });
+
+  const modalTitle = computed(() => {
+    return props.isCreate ? '新增' : '编辑';
+  });
+
+  const { visible, setVisible } = useVisible(false);
+
+  const createEditRef = ref<FormInstance>();
+
+  const formData = ref<PermissionRecord>({
+    id: undefined,
+    module: '',
+    title: '',
+    code: '',
+    remark: '',
+    ...props.prem,
+  });
+
+  const emit = defineEmits(['refresh']);
+  const handleClick = () => {
+    setVisible(true);
+  };
+  const handleSubmit = async () => {
+    const valid = await createEditRef.value?.validate();
+    if (!valid) {
+      if (props.isCreate) {
+        const res = await create(formData.value);
+        if (res.status === 200) {
+          Message.success({
+            content: `${modalTitle.value}成功`,
+            duration: 5 * 1000,
+          });
+        }
+        createEditRef.value?.resetFields();
+      } else {
+        const res = await update(formData.value);
+        if (res.status === 200) {
+          Message.success({
+            content: `${modalTitle.value}成功`,
+            duration: 5 * 1000,
+          });
+        }
+      }
+      emit('refresh');
+      setVisible(false);
+    }
+  };
+  const handleCancel = async () => {
+    createEditRef.value?.resetFields();
+    setVisible(false);
+  };
+</script>
+
+<style scoped></style>
--- a/src/views/system/permission/index.vue
+++ b/src/views/system/permission/index.vue
@ -0,0 +1,383 @@
+<template>
+  <div class="container">
+    <Breadcrumb :items="['menu.system', 'menu.system.permission']" />
+    <a-card class="general-card" :title="$t('menu.list.searchTable')">
+      <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="24">
+              <a-col :span="8">
+                <a-form-item field="module" label="权限模块">
+                  <a-input
+                    v-model="formModel.module"
+                    placeholder="请输入权限名称"
+                  />
+                </a-form-item>
+              </a-col>
+              <a-col :span="8">
+                <a-form-item field="title" label="权限名称">
+                  <a-input
+                    v-model="formModel.title"
+                    placeholder="请输入权限名称"
+                  />
+                </a-form-item>
+              </a-col>
+              <a-col :span="8">
+                <a-form-item field="code" label="权限编码">
+                  <a-input
+                    v-model="formModel.code"
+                    placeholder="请输入权限编码"
+                  />
+                </a-form-item>
+              </a-col>
+            </a-row>
+          </a-form>
+        </a-col>
+        <a-divider style="height: 42px" direction="vertical" />
+        <a-col :flex="'46px'" style="text-align: right">
+          <a-space :size="18">
+            <a-button type="primary" @click="search">
+              <template #icon>
+                <icon-search />
+              </template>
+              {{ $t('searchTable.form.search') }}
+            </a-button>
+            <a-button @click="reset">
+              <template #icon>
+                <icon-refresh />
+              </template>
+              {{ $t('searchTable.form.reset') }}
+            </a-button>
+          </a-space>
+        </a-col>
+      </a-row>
+      <a-divider style="margin-top: 10px" />
+      <a-row style="margin-bottom: 16px">
+<!--        <a-col :span="12">-->
+<!--          <a-space>-->
+<!--            <PermissionEdit-->
+<!--              ref="createRef"-->
+<!--              :is-create="true"-->
+<!--              @refresh="refresh"-->
+<!--            />-->
+<!--          </a-space>-->
+<!--        </a-col>-->
+        <a-col
+          :span="24"
+          style="display: flex; align-items: center; justify-content: end"
+        >
+          <a-tooltip :content="$t('searchTable.actions.refresh')">
+            <div class="action-icon" @click="refresh">
+              <icon-refresh size="18" />
+            </div>
+          </a-tooltip>
+          <a-dropdown @select="handleSelectDensity">
+            <a-tooltip :content="$t('searchTable.actions.density')">
+              <div class="action-icon"><icon-line-height size="18" /></div>
+            </a-tooltip>
+            <template #content>
+              <a-doption
+                v-for="item in densityList"
+                :key="item.value"
+                :value="item.value"
+                :class="{ active: item.value === size }"
+              >
+                <span>{{ item.name }}</span>
+              </a-doption>
+            </template>
+          </a-dropdown>
+          <a-tooltip :content="$t('searchTable.actions.columnSetting')">
+            <a-popover
+              trigger="click"
+              position="bl"
+              @popup-visible-change="popupVisibleChange"
+            >
+              <div class="action-icon"><icon-settings size="18" /></div>
+              <template #content>
+                <div id="tableSetting">
+                  <div
+                    v-for="(item, index) in showColumns"
+                    :key="item.dataIndex"
+                    class="setting"
+                  >
+                    <div style="margin-right: 4px; cursor: move">
+                      <icon-drag-arrow />
+                    </div>
+                    <div>
+                      <a-checkbox
+                        v-model="item.checked"
+                        @change="
+                          handleChange($event, item as TableColumnData, index)
+                        "
+                      >
+                      </a-checkbox>
+                    </div>
+                    <div class="title">
+                      {{ item.title === '#' ? '序列号' : item.title }}
+                    </div>
+                  </div>
+                </div>
+              </template>
+            </a-popover>
+          </a-tooltip>
+        </a-col>
+      </a-row>
+      <a-table
+        row-key="id"
+        show-empty-tree
+        :loading="loading"
+        :columns="(cloneColumns as TableColumnData[])"
+        :data="renderData"
+        :bordered="false"
+        :size="size"
+      >
+        <template #enableState="{ record }">
+          <span v-if="record.enableState === '启用'" class="circle pass"></span>
+          <span v-else class="circle"></span>
+          {{ record.enableState }}
+        </template>
+        <template #operations="{ record }">
+          <PermissionEdit
+            ref="editRef"
+            :prem="record"
+            :is-create="false"
+            @refresh="refresh"
+          />
+<!--          <a-popconfirm-->
+<!--            content="确认删除此用户?"-->
+<!--            type="error"-->
+<!--            @ok="handleDelete(record)"-->
+<!--          >-->
+<!--            <a-button type="outline" size="small" status="danger">-->
+<!--              删除-->
+<!--            </a-button>-->
+<!--          </a-popconfirm>-->
+        </template>
+      </a-table>
+    </a-card>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { computed, ref, watch, nextTick } from 'vue';
+  import { useI18n } from 'vue-i18n';
+  import useLoading from '@/hooks/loading';
+  import {
+    PermissionRecord,
+    listToTree,
+    list,
+    remove,
+    PermissionTreeRecord,
+  } from '@/api/permission';
+  import type { TableColumnData } from '@arco-design/web-vue/es/table/interface';
+  import cloneDeep from 'lodash/cloneDeep';
+  import Sortable from 'sortablejs';
+  import { Message } from '@arco-design/web-vue';
+  import PermissionEdit from './components/permission-edit.vue';
+
+  type SizeProps = 'mini' | 'small' | 'medium' | 'large';
+  type Column = TableColumnData & { checked?: true };
+
+  const generateFormModel = () => {
+    return {
+      module: '',
+      title: '',
+      code: '',
+    };
+  };
+
+  const { loading, setLoading } = useLoading(true);
+  const { t } = useI18n();
+  const renderData = ref<PermissionTreeRecord[]>([]);
+  const formModel = ref(generateFormModel());
+  const cloneColumns = ref<Column[]>([]);
+  const showColumns = ref<Column[]>([]);
+  const size = ref<SizeProps>('medium');
+  const densityList = computed(() => [
+    {
+      name: t('searchTable.size.mini'),
+      value: 'mini',
+    },
+    {
+      name: t('searchTable.size.small'),
+      value: 'small',
+    },
+    {
+      name: t('searchTable.size.medium'),
+      value: 'medium',
+    },
+    {
+      name: t('searchTable.size.large'),
+      value: 'large',
+    },
+  ]);
+  const columns = computed<TableColumnData[]>(() => [
+    {
+      title: t('searchTable.columns.index'),
+      dataIndex: 'id',
+      slotName: 'index',
+    },
+    {
+      title: '权限模块',
+      dataIndex: 'module',
+    },
+    {
+      title: '权限名称',
+      dataIndex: 'title',
+    },
+    {
+      title: '权限编码',
+      dataIndex: 'code',
+    },
+    {
+      title: t('searchTable.columns.operations'),
+      dataIndex: 'operations',
+      slotName: 'operations',
+    },
+  ]);
+
+  const fetchData = async (params?: Partial<PermissionTreeRecord>) => {
+    setLoading(true);
+    try {
+      const res = await list(params);
+      const { data } = res;
+      renderData.value = listToTree(data);
+    } catch (err) {
+      // you can report use errorHandler or other
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const search = () => {
+    fetchData({
+      ...formModel.value,
+    });
+  };
+
+  const refresh = () => {
+    fetchData();
+  };
+
+  fetchData();
+  const reset = () => {
+    formModel.value = generateFormModel();
+  };
+
+  const handleSelectDensity = (
+    val: string | number | Record<string, any> | undefined,
+    e: Event
+  ) => {
+    size.value = val as SizeProps;
+  };
+
+  const handleChange = (
+    checked: boolean | (string | boolean | number)[],
+    column: Column,
+    index: number
+  ) => {
+    if (!checked) {
+      cloneColumns.value = showColumns.value.filter(
+        (item) => item.dataIndex !== column.dataIndex
+      );
+    } else {
+      cloneColumns.value.splice(index, 0, column);
+    }
+  };
+
+  const exchangeArray = <T extends Array<any>>(
+    array: T,
+    beforeIdx: number,
+    newIdx: number,
+    isDeep = false
+  ): T => {
+    const newArray = isDeep ? cloneDeep(array) : array;
+    if (beforeIdx > -1 && newIdx > -1) {
+      // 先替换后面的，然后拿到替换的结果替换前面的
+      newArray.splice(
+        beforeIdx,
+        1,
+        newArray.splice(newIdx, 1, newArray[beforeIdx]).pop()
+      );
+    }
+    return newArray;
+  };
+
+  const popupVisibleChange = (val: boolean) => {
+    if (val) {
+      nextTick(() => {
+        const el = document.getElementById('tableSetting') as HTMLElement;
+        const sortable = new Sortable(el, {
+          onEnd(e: any) {
+            const { oldIndex, newIndex } = e;
+            exchangeArray(cloneColumns.value, oldIndex, newIndex);
+            exchangeArray(showColumns.value, oldIndex, newIndex);
+          },
+        });
+      });
+    }
+  };
+  const handleDelete = async (record: PermissionRecord) => {
+    const res = await remove(record.id as number);
+    if (res.status === 200) {
+      Message.success({
+        content: '删除成功',
+        duration: 5 * 1000,
+      });
+      refresh();
+    }
+  };
+
+  watch(
+    () => columns.value,
+    (val) => {
+      cloneColumns.value = cloneDeep(val);
+      cloneColumns.value.forEach((item, index) => {
+        item.checked = true;
+      });
+      showColumns.value = cloneDeep(cloneColumns.value);
+    },
+    { deep: true, immediate: true }
+  );
+</script>
+
+<script lang="ts">
+  export default {
+    name: 'Permission',
+  };
+</script>
+
+<style scoped lang="less">
+  .container {
+    padding: 0 20px 20px 20px;
+  }
+  :deep(.arco-table-th) {
+    &:last-child {
+      .arco-table-th-item-title {
+        margin-left: 16px;
+      }
+    }
+  }
+  .action-icon {
+    margin-left: 12px;
+    cursor: pointer;
+  }
+  .active {
+    color: #0960bd;
+    background-color: #e3f4fc;
+  }
+  .setting {
+    display: flex;
+    align-items: center;
+    width: 200px;
+    .title {
+      margin-left: 12px;
+      cursor: pointer;
+    }
+  }
+</style>
--- a/src/views/system/role/components/role-edit.vue
+++ b/src/views/system/role/components/role-edit.vue
@ -0,0 +1,182 @@
+<template>
+  <a-button v-if="props.isCreate" type="primary" @click="handleClick">
+    <template #icon><icon-plus /></template>
+    {{ modalTitle }}
+  </a-button>
+  <a-button
+    v-if="!props.isCreate"
+    type="outline"
+    size="small"
+    :style="{ marginRight: '10px' }"
+    @click="handleClick"
+  >
+    {{ modalTitle }}
+  </a-button>
+  <a-modal
+    width="600px"
+    :visible="visible"
+    @ok="handleSubmit"
+    @cancel="handleCancel"
+  >
+    <template #title>{{ modalTitle }}</template>
+    <a-form ref="createEditRef" :model="formData" :style="{ width: '500px' }">
+      <a-form-item
+        field="name"
+        label="角色名"
+        :validate-trigger="['change', 'input']"
+        :rules="[{ required: true, message: '角色名不能为空' }]"
+      >
+        <a-input v-model="formData.name" />
+      </a-form-item>
+      <a-form-item
+        field="dataScope"
+        label="数据权限"
+        :validate-trigger="['change', 'input']"
+        :rules="[{ required: true, message: '数据权限范围不能为空' }]"
+      >
+        <a-select
+          v-model="formData.dataScope"
+          :options="dataScopeOptions"
+          placeholder="请选择用户状态"
+        />
+      </a-form-item>
+      <a-form-item field="remark" label="备注">
+        <a-textarea v-model="formData.remark" placeholder="角色备注" />
+      </a-form-item>
+      <a-form-item field="permissionIds" label="角色权限">
+        <a-tree
+          v-model:checked-keys="checkKeys"
+          :multiple="true"
+          :checkable="true"
+          :default-expand-checked="true"
+          :field-names="{
+            key: 'id',
+            title: 'title',
+            children: 'children',
+          }"
+          :data="permissionOptions"
+        />
+      </a-form-item>
+    </a-form>
+  </a-modal>
+</template>
+
+<script lang="ts" setup>
+  import useVisible from '@/hooks/visible';
+  import { computed, PropType, ref } from 'vue';
+  import { FormInstance } from '@arco-design/web-vue/es/form';
+  import { listToTree, list as listPermissions, PermissionRecord } from "@/api/permission";
+  import { RoleRecord, create, update, getDetail, RoleCreateRecord } from "@/api/role";
+  import { SelectOptionData } from '@arco-design/web-vue/es/select/interface';
+  import { Message } from '@arco-design/web-vue';
+
+  const props = defineProps({
+    prem: {
+      type: Object as PropType<RoleRecord>,
+    },
+    isCreate: Boolean,
+  });
+
+  const dataScopeOptions = computed<SelectOptionData[]>(() => [
+    {
+      label: '本级',
+      value: '本级',
+    },
+    {
+      label: '本级及以下',
+      value: '本级及以下',
+    },
+    {
+      label: '全部',
+      value: '全部',
+    },
+  ]);
+  const modalTitle = computed(() => {
+    return props.isCreate ? '新增' : '编辑';
+  });
+  const { visible, setVisible } = useVisible(false);
+  const checkKeys = ref<number[]>([]);
+  const permissionOptions = ref<any[]>([]);
+  const loadPermissons = async () => {
+    if (!permissionOptions.value.length) {
+      const res = await listPermissions();
+      if (res.status === 200) {
+        const data = listToTree(res.data);
+        if (data.length) {
+          permissionOptions.value = data;
+        }
+      }
+    }
+  };
+
+  const createEditRef = ref<FormInstance>();
+
+  const formData = ref<RoleCreateRecord>({
+    id: undefined,
+    name: '',
+    dataScope: '',
+    permissionIds: [],
+    remark: '',
+  });
+
+  const emit = defineEmits(['refresh']);
+  const handleClick = () => {
+    loadPermissons();
+    const roleId = props.prem?.id;
+    if (!props.isCreate && roleId) {
+      getDetail(roleId).then((res) => {
+        const { id, name, dataScope, permissions, remark } = res.data;
+        if (permissions) {
+          permissions.map((p: PermissionRecord) =>
+            checkKeys.value.push(p.id as number)
+          );
+          formData.value = {
+            ...formData.value,
+            id,
+            name,
+            dataScope,
+            remark,
+          };
+        }
+      });
+    }
+    setVisible(true);
+  };
+
+  const handleSubmit = async () => {
+    const valid = await createEditRef.value?.validate();
+    if (!valid) {
+      formData.value.permissionIds = checkKeys.value;
+      if (props.isCreate) {
+        const res = await create(formData.value);
+        if (res.status === 200) {
+          Message.success({
+            content: `${modalTitle.value}成功`,
+            duration: 5 * 1000,
+          });
+        }
+        createEditRef.value?.resetFields();
+      } else {
+        const res = await update(formData.value);
+        if (res.status === 200) {
+          Message.success({
+            content: `${modalTitle.value}成功`,
+            duration: 5 * 1000,
+          });
+        }
+      }
+      emit('refresh');
+      checkKeys.value = [];
+      permissionOptions.value = [];
+      setVisible(false);
+    }
+  };
+  const handleCancel = async () => {
+    createEditRef.value?.resetFields();
+    checkKeys.value = [];
+    permissionOptions.value = [];
+    setVisible(false);
+  };
+</script>
+
+<style scoped></style>
--- a/src/views/system/role/index.vue
+++ b/src/views/system/role/index.vue
@ -0,0 +1,386 @@
+<template>
+  <div class="container">
+    <Breadcrumb :items="['menu.system', 'menu.system.role']" />
+    <a-card class="general-card" :title="$t('menu.list.searchTable')">
+      <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="16">
+              <a-col :span="8">
+                <a-form-item field="title" label="角色名称">
+                  <a-input
+                    v-model="formModel.title"
+                    placeholder="请输入角色名称"
+                  />
+                </a-form-item>
+              </a-col>
+              <a-col :span="8">
+                <a-form-item field="code" label="角色编码">
+                  <a-input
+                    v-model="formModel.code"
+                    placeholder="请输入角色编码"
+                  />
+                </a-form-item>
+              </a-col>
+            </a-row>
+          </a-form>
+        </a-col>
+        <a-divider style="height: 42px" direction="vertical" />
+        <a-col :flex="'46px'" style="text-align: right">
+          <a-space :size="18">
+            <a-button type="primary" @click="search">
+              <template #icon>
+                <icon-search />
+              </template>
+              {{ $t('searchTable.form.search') }}
+            </a-button>
+            <a-button @click="reset">
+              <template #icon>
+                <icon-refresh />
+              </template>
+              {{ $t('searchTable.form.reset') }}
+            </a-button>
+          </a-space>
+        </a-col>
+      </a-row>
+      <a-divider style="margin-top: 10px" />
+      <a-row style="margin-bottom: 16px">
+        <a-col :span="12">
+          <a-space>
+            <RoleEdit
+              ref="createRef"
+              :is-create="true"
+              @refresh="search"
+            />
+          </a-space>
+        </a-col>
+        <a-col
+          :span="12"
+          style="display: flex; align-items: center; justify-content: end"
+        >
+          <a-tooltip :content="$t('searchTable.actions.refresh')">
+            <div class="action-icon" @click="search">
+              <icon-refresh size="18" />
+            </div>
+          </a-tooltip>
+          <a-dropdown @select="handleSelectDensity">
+            <a-tooltip :content="$t('searchTable.actions.density')">
+              <div class="action-icon"><icon-line-height size="18" /></div>
+            </a-tooltip>
+            <template #content>
+              <a-doption
+                v-for="item in densityList"
+                :key="item.value"
+                :value="item.value"
+                :class="{ active: item.value === size }"
+              >
+                <span>{{ item.name }}</span>
+              </a-doption>
+            </template>
+          </a-dropdown>
+          <a-tooltip :content="$t('searchTable.actions.columnSetting')">
+            <a-popover
+              trigger="click"
+              position="bl"
+              @popup-visible-change="popupVisibleChange"
+            >
+              <div class="action-icon"><icon-settings size="18" /></div>
+              <template #content>
+                <div id="tableSetting">
+                  <div
+                    v-for="(item, index) in showColumns"
+                    :key="item.dataIndex"
+                    class="setting"
+                  >
+                    <div style="margin-right: 4px; cursor: move">
+                      <icon-drag-arrow />
+                    </div>
+                    <div>
+                      <a-checkbox
+                        v-model="item.checked"
+                        @change="
+                          handleChange($event, item as TableColumnData, index)
+                        "
+                      >
+                      </a-checkbox>
+                    </div>
+                    <div class="title">
+                      {{ item.title === '#' ? '序列号' : item.title }}
+                    </div>
+                  </div>
+                </div>
+              </template>
+            </a-popover>
+          </a-tooltip>
+        </a-col>
+      </a-row>
+      <a-table
+        row-key="id"
+        :loading="loading"
+        :pagination="pagination"
+        :columns="(cloneColumns as TableColumnData[])"
+        :data="renderData"
+        :bordered="false"
+        :size="size"
+        @page-change="onPageChange"
+      >
+        <template #enableState="{ record }">
+          <span v-if="record.enableState === '启用'" class="circle pass"></span>
+          <span v-else class="circle"></span>
+          {{ record.enableState }}
+        </template>
+        <template #operations="{ record }">
+          <RoleEdit
+            ref="editRef"
+            :prem="record"
+            :is-create="false"
+            @refresh="search"
+          />
+          <a-popconfirm
+            content="确认删除此用户?"
+            type="error"
+            @ok="handleDelete(record)"
+          >
+            <a-button type="outline" size="small" status="danger">
+              删除
+            </a-button>
+          </a-popconfirm>
+        </template>
+      </a-table>
+    </a-card>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { computed, ref, reactive, watch, nextTick } from 'vue';
+  import { useI18n } from 'vue-i18n';
+  import useLoading from '@/hooks/loading';
+  import { RoleRecord, queryRoles, remove } from '@/api/role';
+  import { Pagination } from '@/types/global';
+  import type { TableColumnData } from '@arco-design/web-vue/es/table/interface';
+  import cloneDeep from 'lodash/cloneDeep';
+  import Sortable from 'sortablejs';
+  import { Message } from '@arco-design/web-vue';
+  import { ListParams } from '@/api/list';
+  import RoleEdit from './components/role-edit.vue';
+
+  type SizeProps = 'mini' | 'small' | 'medium' | 'large';
+  type Column = TableColumnData & { checked?: true };
+  const generateFormModel = () => {
+    return {
+      title: '',
+      code: '',
+    };
+  };
+  
+  const { loading, setLoading } = useLoading(true);
+  const { t } = useI18n();
+  const renderData = ref<RoleRecord[]>([]);
+  const formModel = ref(generateFormModel());
+  const cloneColumns = ref<Column[]>([]);
+  const showColumns = ref<Column[]>([]);
+  const size = ref<SizeProps>('medium');
+  
+  const basePagination: Pagination = {
+    current: 1,
+    pageSize: 10,
+  };
+  const pagination = reactive({
+    ...basePagination,
+  });
+  const densityList = computed(() => [
+    {
+      name: t('searchTable.size.mini'),
+      value: 'mini',
+    },
+    {
+      name: t('searchTable.size.small'),
+      value: 'small',
+    },
+    {
+      name: t('searchTable.size.medium'),
+      value: 'medium',
+    },
+    {
+      name: t('searchTable.size.large'),
+      value: 'large',
+    },
+  ]);
+  const columns = computed<TableColumnData[]>(() => [
+    {
+      title: t('searchTable.columns.index'),
+      dataIndex: 'id',
+      slotName: 'index',
+      width: 80,
+    },
+    {
+      title: '角色名称',
+      dataIndex: 'name',
+    },
+    {
+      title: '类型',
+      dataIndex: 'type',
+    },
+    {
+      title: '数据范围',
+      dataIndex: 'dataScope',
+    },
+    {
+      title: '备注',
+      dataIndex: 'remark',
+    },
+    {
+      title: t('searchTable.columns.operations'),
+      dataIndex: 'operations',
+      slotName: 'operations',
+    },
+  ]);
+  const fetchData = async (
+    params: ListParams<RoleRecord> = { page: 0, size: 10 }
+  ) => {
+    setLoading(true);
+    try {
+      const res = await queryRoles(params);
+      const { data } = res;
+      renderData.value = data.content;
+      pagination.current = data.pageable.pageNumber + 1;
+      pagination.total = data.totalElements;
+      pagination.pageSize = data.size;
+    } catch (err) {
+      // you can report use errorHandler or other
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const search = () => {
+    const { current, pageSize } = basePagination;
+    fetchData({
+      page: current - 1,
+      size: pageSize,
+      ...formModel.value,
+    } as unknown as ListParams<RoleRecord>);
+  };
+  const onPageChange = (current: number) => {
+    fetchData({
+      page: current - 1,
+      size: pagination.pageSize,
+    });
+  };
+  fetchData();
+  const reset = () => {
+    formModel.value = generateFormModel();
+  };
+  const handleSelectDensity = (
+    val: string | number | Record<string, any> | undefined,
+    e: Event
+  ) => {
+    size.value = val as SizeProps;
+  };
+  const handleChange = (
+    checked: boolean | (string | boolean | number)[],
+    column: Column,
+    index: number
+  ) => {
+    if (!checked) {
+      cloneColumns.value = showColumns.value.filter(
+        (item) => item.dataIndex !== column.dataIndex
+      );
+    } else {
+      cloneColumns.value.splice(index, 0, column);
+    }
+  };
+  const exchangeArray = <T extends Array<any>>(
+    array: T,
+    beforeIdx: number,
+    newIdx: number,
+    isDeep = false
+  ): T => {
+    const newArray = isDeep ? cloneDeep(array) : array;
+    if (beforeIdx > -1 && newIdx > -1) {
+      // 先替换后面的，然后拿到替换的结果替换前面的
+      newArray.splice(
+        beforeIdx,
+        1,
+        newArray.splice(newIdx, 1, newArray[beforeIdx]).pop()
+      );
+    }
+    return newArray;
+  };
+  const popupVisibleChange = (val: boolean) => {
+    if (val) {
+      nextTick(() => {
+        const el = document.getElementById('tableSetting') as HTMLElement;
+        const sortable = new Sortable(el, {
+          onEnd(e: any) {
+            const { oldIndex, newIndex } = e;
+            exchangeArray(cloneColumns.value, oldIndex, newIndex);
+            exchangeArray(showColumns.value, oldIndex, newIndex);
+          },
+        });
+      });
+    }
+  };
+  const handleDelete = async (record: RoleRecord) => {
+    const res = await remove(record.id as number);
+    if (res.status === 200) {
+      Message.success({
+        content: '删除成功',
+        duration: 5 * 1000,
+      });
+      search();
+    }
+  };
+  watch(
+    () => columns.value,
+    (val) => {
+      cloneColumns.value = cloneDeep(val);
+      cloneColumns.value.forEach((item, index) => {
+        item.checked = true;
+      });
+      showColumns.value = cloneDeep(cloneColumns.value);
+    },
+    { deep: true, immediate: true }
+  );
+</script>
+
+<script lang="ts">
+  export default {
+    name: 'Role',
+  };
+</script>
+
+<style scoped lang="less">
+  .container {
+    padding: 0 20px 20px 20px;
+  }
+  :deep(.arco-table-th) {
+    &:last-child {
+      .arco-table-th-item-title {
+        margin-left: 16px;
+      }
+    }
+  }
+  .action-icon {
+    margin-left: 12px;
+    cursor: pointer;
+  }
+  .active {
+    color: #0960bd;
+    background-color: #e3f4fc;
+  }
+  .setting {
+    display: flex;
+    align-items: center;
+    width: 200px;
+    .title {
+      margin-left: 12px;
+      cursor: pointer;
+    }
+  }
+</style>
--- a/src/views/system/user/components/user-create.vue
+++ b/src/views/system/user/components/user-create.vue
@ -43,20 +43,38 @@
      >
        <a-input v-model="createData.email" />
      </a-form-item>
+<!--      <a-form-item-->
+<!--        field="dept"-->
+<!--        label="部门"-->
+<!--        :rules="[{ required: true, message: '请选择部门' }]"-->
+<!--        :validate-trigger="['change']"-->
+<!--      >-->
+<!--        <a-select-->
+<!--          v-model="createData.dept"-->
+<!--          :options="deptOptions"-->
+<!--          placeholder="请选择部门 ..."-->
+<!--        />-->
+<!--      </a-form-item>-->
      <a-form-item
-        field="dept"
+        field="deptId"
        label="部门"
        :rules="[{ required: true, message: '请选择部门' }]"
        :validate-trigger="['change']"
      >
-        <a-select
-          v-model="createData.dept"
-          :options="deptOptions"
-          placeholder="请选择部门 ..."
+        <a-tree-select
+          v-model="createData.deptId"
+          :field-names="{
+            key: 'id',
+            title: 'name',
+            children: 'children',
+          }"
+          :data="deptOptions"
+          allow-clear
+          placeholder="请选择父部门 ..."
        />
      </a-form-item>
      <a-form-item
-        field="role"
+        field="roleIds"
        label="角色"
        :rules="[{ type: 'array', minLength: 1, message: '请至少选择一个' }]"
        :validate-trigger="['change', 'input']"
@ -64,9 +82,9 @@
        <a-checkbox-group
          v-for="i in roleOptions"
          :key="i.id"
-          v-model="createData.roles"
+          v-model="createData.roleIds"
        >
-          <a-checkbox :value="i">{{ i.name }}</a-checkbox>
+          <a-checkbox :value="i.id">{{ i.name }}</a-checkbox>
        </a-checkbox-group>
      </a-form-item>
    </a-form>
@ -82,7 +100,7 @@
  import { Message } from '@arco-design/web-vue';
  import { SelectOptionData } from '@arco-design/web-vue/es/select/interface';
  import { computedAsync } from '@vueuse/core';
-  import { listDepts, queryDepts } from '@/api/dept';
+  import { getDeptTree } from '@/api/dept';

  const { visible, setVisible } = useVisible(false);

@ -94,19 +112,15 @@
    phone: '',
    email: '',
    enableState: '',
-    dept: undefined,
-    roles: [],
+    deptId: undefined,
+    roleIds: [],
  });

  const deptOptions = computedAsync<SelectOptionData[]>(async () => {
-    const res = await listDepts();
-    return res.data.map((item): SelectOptionData => {
-      return {
-        value: { id: item.id },
-        label: item.name,
-      };
-    });
+    const { data } = await getDeptTree();
+    return data;
  });
+
  const roleOptions = computedAsync(async () => {
    const res = await queryRoles();
    return res.data.content;
@ -127,12 +141,12 @@
        });
      }
      emit('refresh');
-      await userCreateRef.value?.resetFields();
+      userCreateRef.value?.resetFields();
      setVisible(false);
    }
  };
  const handleCancel = async () => {
-    await userCreateRef.value?.resetFields();
+    userCreateRef.value?.resetFields();
    setVisible(false);
  };
 </script>
--- a/src/views/system/user/components/user-edit.vue
+++ b/src/views/system/user/components/user-edit.vue
@ -15,7 +15,7 @@
      :style="{ width: '360px' }"
    >
      <a-form-item
-        field="name"
+        field="username"
        label="用户名"
        :validate-trigger="['change', 'input']"
        :rules="[{ required: true, message: '用户名不能为空' }]"
@ -87,13 +87,10 @@
    }
  };
  const handleCancel = async () => {
-    await userEditRef.value?.resetFields();
+    userEditRef.value?.resetFields();
    setVisible(false);
  };

-  // defineExpose({
-  //   handleEdit,
-  // });
 </script>

 <style scoped lang="less"></style>
--- a/src/views/system/user/index.vue
+++ b/src/views/system/user/index.vue
@ -278,8 +278,8 @@
      value: '启用',
    },
    {
-      label: '禁用',
-      value: '禁用',
+      label: '停用',
+      value: '停用',
    },
  ]);
  const fetchData = async (
--- a/src/views/system/user/locale/zh-CN.ts
+++ b/src/views/system/user/locale/zh-CN.ts
@ -1,4 +1,7 @@
 export default {
+  'menu.system.permission': '权限管理',
+  'menu.system.role': '角色管理',
+  'menu.system.dept': '部门管理',
  'menu.system.user': '用户管理',
  'menu.list.searchTable': '查询表格',
  'searchTable.form.number': '集合编号',
--- a/src/views/user/info/components/user-info-header.vue
+++ b/src/views/user/info/components/user-info-header.vue
@ -14,18 +14,18 @@
        <a-space :size="18">
          <div>
            <icon-user />
-            <a-typography-text>{{ userInfo.jobName }}</a-typography-text>
+            <a-typography-text>{{ userInfo.username }}</a-typography-text>
          </div>
          <div>
            <icon-home />
            <a-typography-text>
-              {{ userInfo.organizationName }}
+              {{ userInfo.phone }}
            </a-typography-text>
          </div>
-          <div>
-            <icon-location />
-            <a-typography-text>{{ userInfo.locationName }}</a-typography-text>
-          </div>
+<!--          <div>-->
+<!--            <icon-location />-->
+<!--            <a-typography-text>{{ userInfo.locationName }}</a-typography-text>-->
+<!--          </div>-->
        </a-space>
      </div>
    </a-space>
--- a/src/views/user/setting/components/basic-information.vue
+++ b/src/views/user/setting/components/basic-information.vue
@ -84,7 +84,7 @@
  import { FormInstance } from '@arco-design/web-vue/es/form';
  import { UserState } from '@/store/modules/user/types';
  import { selfUpdate } from '@/api/user';
-  import { Message } from "@arco-design/web-vue";
+  import { Message } from '@arco-design/web-vue';

  const userStore = useUserStore();

--- a/src/views/user/setting/components/password-reset.vue
+++ b/src/views/user/setting/components/password-reset.vue
@ -51,6 +51,7 @@
  import { FormInstance } from '@arco-design/web-vue/es/form';
  import { PasswordReSetModel, resetPassword } from '@/api/user';
  import { Message } from '@arco-design/web-vue';
+  import useUser from "@/hooks/user";

  const { t } = useI18n();

@ -59,7 +60,6 @@
    newPassword: '',
    confirmPassword: '',
  });
-
  const checkEquals = (
    value: string | undefined,
    callback: (error?: string) => void
@ -71,16 +71,20 @@
    }
  };

+  const user = useUser();
  const validate = async () => {
    const vali = await formRef.value?.validate();
    if (!vali) {
      // do some thing
      // you also can use html-type to submit
      const res = await resetPassword(formData.value);
-      Message.success({
-        content: res.data,
-        duration: 5 * 1000,
-      });
+      if (res.status === 200) {
+        Message.success({
+          content: res.data,
+          duration: 5 * 1000,
+        });
+        await user.logout();
+      }
    }
  };
  const reset = async () => {
--- a/src/views/user/setting/components/user-panel.vue
+++ b/src/views/user/setting/components/user-panel.vue
@ -14,7 +14,7 @@
            <template #trigger-icon>
              <icon-camera />
            </template>
-            <img v-if="fileList.length" :src="fileList[0].url" />
+            <img v-if="fileList.length" :src="fileList[0].url" alt="" />
          </a-avatar>
        </template>
      </a-upload>
--- a/yarn.lock
+++ b/yarn.lock