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

- 添加角色切换按钮

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",

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;
-}
+  children?: DeptRecord[];
-export interface DeptRecord extends DeptCreateRecord {
-  id: number;
 }
 
-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>>) {
-export function queryDepts(params?: ListParams<Partial<DeptRecord>>) {
+//   return queryList(`/api/dept`, params);
-  return queryList(`/api/dept`, params);
+// }
-}

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'

src/api/list.ts

@@ -14,8 +14,8 @@ export interface Pageable {
 }
 
 export interface ListParams<Record> {
-  current: number;
+  page: number;
-  pageSize: number;
+  size: number;
 }
 
 export interface ListRes<Record> {

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);
+}

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);
 }

src/api/user.ts

@@ -31,8 +31,8 @@ export interface CreateRecord {
   phone: string;
   email: string;
   enableState: string;
-  dept: DeptRecord | undefined;
+  deptId: DeptRecord | undefined;
-  roles: RoleRecord[];
+  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);
     },
   });
-}
+}

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-doption>-->
-              <a-space @click="switchRoles">
+<!--              <a-space @click="switchRoles">-->
-                <icon-tag />
+<!--                <icon-tag />-->
-                <span>
+<!--                <span>-->
-                  {{ $t('messageBox.switchRoles') }}
+<!--                  {{ $t('messageBox.switchRoles') }}-->
-                </span>
+<!--                </span>-->
-              </a-space>
+<!--              </a-space>-->
-            </a-doption>
+<!--            </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 switchRoles = async (value: number) => {
-    const res = await userStore.switchRoles();
+    // 切换角色
-    Message.success(res as string);
+    await userStore.switchRoles(value);
+    window.location.reload();
+    // Message.success(res as string);
   };
   const toggleDrawerMenu = inject('toggleDrawerMenu') as () => void;
 </script>

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 = intersection(value, permissions).length > 0;
-
-      const hasPermission = permissionValues.includes(role);
       if (!hasPermission && el.parentNode) {
         el.parentNode.removeChild(el);
       }

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?.permissions ||
-        route.meta?.roles?.includes('*') ||
+        route.meta?.permissions?.includes('*') ||
-        route.meta?.roles?.includes(userStore.role)
+        intersection(route.meta?.permissions, userStore.permissions).length > 0
+        // route.meta?.permissions?.includes(userStore.permissions)
       );
     },
-    findFirstPermissionRoute(_routers: any, role = 'admin') {
+    // TODO 不知道是干嘛的
-      const cloneRouters = [..._routers];
+    // findFirstPermissionRoute(_routers: any, role: string | string[] = 'admin') {
-      while (cloneRouters.length) {
+    //   const cloneRouters = [..._routers];
-        const firstElement = cloneRouters.shift();
+    //   while (cloneRouters.length) {
-        if (
+    //     const firstElement = cloneRouters.shift();
-          firstElement?.meta?.roles?.find((el: string[]) => {
+    //     if (
-            return el.includes('*') || el.includes(role);
+    //       firstElement?.meta?.roles?.find((el: string[]) => {
-          })
+    //         return el.includes('*') || el.includes(role);
-        )
+    //       })
-          return { name: firstElement.name };
+    //     )
-        if (firstElement?.children) {
+    //       return { name: firstElement.name };
-          cloneRouters.push(...firstElement.children);
+    //     if (firstElement?.children) {
-        }
+    //       cloneRouters.push(...firstElement.children);
-      }
+    //     }
-      return null;
+    //   }
-    },
+    //   return null;
+    // },
     // You can add any rules you want
   };
 }

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' });

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);
       }

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 {

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'],
       },
     },
   ],

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: ['*'],
       },
     },
   ],

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'],
       },
     },
   ],

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: ['*'],
       },
     },
   ],

src/router/routes/modules/profile.ts

@@ -19,7 +19,7 @@ const PROFILE: AppRouteRecordRaw = {
       meta: {
         locale: 'menu.profile.basic',
         requiresAuth: true,
-        roles: ['admin'],
+        permissions: ['admin'],
       },
     },
   ],

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'],
       },
     },
   ],

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'],
       },
     },
   ],

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: ['*'],
       },
     },
   ],

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'],
       },
     },
   ],

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

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;

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() {
+    // switchRoles() {
-      return new Promise((resolve) => {
+    //   return new Promise((resolve) => {
-        this.role = this.role === 'user' ? 'admin' : 'user';
+    //     this.permissions = this.permissions === 'user' ? 'admin' : 'user';
-        resolve(this.role);
+    //     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;

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';
 }

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>

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>

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>

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>

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
+        <a-tree-select
-          v-model="createData.dept"
+          v-model="createData.deptId"
-          :options="deptOptions"
+          :field-names="{
-          placeholder="请选择部门 ..."
+            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,
+    deptId: undefined,
-    roles: [],
+    roleIds: [],
   });
 
   const deptOptions = computedAsync<SelectOptionData[]>(async () => {
-    const res = await listDepts();
+    const { data } = await getDeptTree();
-    return res.data.map((item): SelectOptionData => {
+    return data;
-      return {
-        value: { id: item.id },
-        label: item.name,
-      };
-    });
   });
+
   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>

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>

src/views/system/user/index.vue

@@ -278,8 +278,8 @@
       value: '启用',
     },
     {
-      label: '禁用',
+      label: '停用',
-      value: '禁用',
+      value: '停用',
     },
   ]);
   const fetchData = async (

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': '集合编号',

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>
+<!--          <div>-->
-            <icon-location />
+<!--            <icon-location />-->
-            <a-typography-text>{{ userInfo.locationName }}</a-typography-text>
+<!--            <a-typography-text>{{ userInfo.locationName }}</a-typography-text>-->
-          </div>
+<!--          </div>-->
         </a-space>
       </div>
     </a-space>

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();
 

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({
+      if (res.status === 200) {
-        content: res.data,
+        Message.success({
-        duration: 5 * 1000,
+          content: res.data,
-      });
+          duration: 5 * 1000,
+        });
+        await user.logout();
+      }
     }
   };
   const reset = async () => {

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>