diff --git a/frontend/src/api/device/interface/index.ts b/frontend/src/api/device/interface/index.ts
index d3e4d32..60ee9e4 100644
--- a/frontend/src/api/device/interface/index.ts
+++ b/frontend/src/api/device/interface/index.ts
@@ -31,7 +31,7 @@ export namespace Device {
         protocol:string; //通讯协议
         ip: string; //IP地址
         port: number; //端口号
-        encryption: number; //装置是否为加密版本
+        encryptionFlag: number; //装置是否为加密版本
         series?: string| null; //装置识别码（3ds加密）
         devKey?: string| null; //装置秘钥（3ds加密）
         sampleID?: string| null; //样品编号
diff --git a/frontend/src/api/function/functionExample.ts b/frontend/src/api/function/functionExample.ts
index f872cfe..83ff875 100644
--- a/frontend/src/api/function/functionExample.ts
+++ b/frontend/src/api/function/functionExample.ts
@@ -8,6 +8,7 @@ export const functionList : Function.ResFunction[] = [
       'name': '检测计划',
       'code':'route',
       'path':'/plan/planList/index',
+      'component':'planList',
       'icon':'',
       'sort':100,
       'type':0,
@@ -21,6 +22,7 @@ export const functionList : Function.ResFunction[] = [
       name: '台账管理',
       code:'route',
       path:'/machine',
+      'component':'planList',
       icon:'',
       sort:100,
       type:0,
@@ -33,6 +35,7 @@ export const functionList : Function.ResFunction[] = [
                 name: '检测脚本',
                 code:'route',
                 path:'/machine/testScript/index',
+                'component':'planList',
                 icon:'',
                 sort:100,
                 type:1,
@@ -46,6 +49,7 @@ export const functionList : Function.ResFunction[] = [
                   name: '被检设备',
                   code:'route',
                   path:'/plan/planList/index',
+                  'component':'planList',
                   icon:'',
                   sort:100,
                   type:1,
@@ -59,6 +63,7 @@ export const functionList : Function.ResFunction[] = [
                     name: '误差体系',
                     code:'route',
                     path:'/plan/planList/index',
+                    'component':'planList',
                     icon:'',
                     sort:100,
                     type:1,
@@ -72,6 +77,7 @@ export const functionList : Function.ResFunction[] = [
                       name: '检测源',
                       code:'route',
                       path:'/plan/planList/index',
+                      'component':'planList',
                       icon:'',
                       sort:100,
                       type:1,
@@ -86,6 +92,7 @@ export const functionList : Function.ResFunction[] = [
         name: '权限管理',
         code:'route',
         path:'/plan/planList/index',
+        'component':'planList',
         icon:'',
         sort:100,
         type:0,
@@ -98,6 +105,7 @@ export const functionList : Function.ResFunction[] = [
                   name: '用户管理',
                   code:'route',
                   path:'/plan/planList/index',
+                  'component':'planList',
                   icon:'',
                   sort:100,
                   type:0,
@@ -111,6 +119,7 @@ export const functionList : Function.ResFunction[] = [
                     name: '角色管理',
                     code:'route',
                     path:'/plan/planList/index',
+                    'component':'planList',
                     icon:'',
                     sort:100,
                     type:0,
@@ -124,6 +133,7 @@ export const functionList : Function.ResFunction[] = [
                       name: '菜单管理',
                       code:'route',
                       path:'/plan/planList/index',
+                      'component':'planList',
                       icon:'',
                       sort:100,
                       type:0,
@@ -138,6 +148,7 @@ export const functionList : Function.ResFunction[] = [
         name: '系统配置',
         code:'route',
         path:'/plan/planList/index',
+        'component':'planList',
         icon:'',
         sort:100,
         type:0,
@@ -150,6 +161,7 @@ export const functionList : Function.ResFunction[] = [
                   name: '通用配置',
                   code:'route',
                   path:'/plan/planList/index',
+                  'component':'planList',
                   icon:'',
                   sort:100,
                   type:0,
@@ -163,6 +175,7 @@ export const functionList : Function.ResFunction[] = [
                     name: '数据字典',
                     code:'route',
                     path:'/plan/planList/index',
+                    'component':'planList',
                     icon:'',
                     sort:100,
                     type:0,
@@ -176,6 +189,7 @@ export const functionList : Function.ResFunction[] = [
                       name: '报告模版',
                       code:'route',
                       path:'/plan/planList/index',
+                      'component':'planList',
                       icon:'',
                       sort:100,
                       type:0,
@@ -189,6 +203,7 @@ export const functionList : Function.ResFunction[] = [
                         name: '版本注册',
                         code:'route',
                         path:'/plan/planList/index',
+                        'component':'planList',
                         icon:'',
                         sort:100,
                         type:0,
@@ -203,6 +218,7 @@ export const functionList : Function.ResFunction[] = [
         name: '日志管理',
         code:'route',
         path:'/plan/planList/index',
+        'component':'planList',
         icon:'',
         sort:100,
         type:0,
@@ -216,6 +232,7 @@ export const functionList : Function.ResFunction[] = [
         name: '统计分析',
         code:'route',
         path:'/plan/planList/index',
+        'component':'planList',
         icon:'',
         sort:100,
         type:0,
@@ -229,6 +246,7 @@ export const functionList : Function.ResFunction[] = [
         name: '示例',
         code:'route',
         path:'/plan/planList/index',
+        'component':'planList',
         icon:'',
         sort:100,
         type:0,
@@ -241,6 +259,7 @@ export const functionList : Function.ResFunction[] = [
                 name: '普通表格',
                 code:'route',
                 path:'/plan/planList/index',
+                'component':'planList',
                 icon:'',
                 sort:100,
                 type:0,
@@ -254,6 +273,7 @@ export const functionList : Function.ResFunction[] = [
                   name: '表格树',
                   code:'route',
                   path:'/plan/planList/index',
+                  'component':'planList',
                   icon:'',
                   sort:100,
                   type:0,
diff --git a/frontend/src/api/function/index.ts b/frontend/src/api/function/index.ts
index bfb12eb..4cd5244 100644
--- a/frontend/src/api/function/index.ts
+++ b/frontend/src/api/function/index.ts
@@ -2,24 +2,25 @@ import http from "@/api";
 import { ADMIN as rePrefix } from "@/api/config/serviceName";
 import type { Function } from "@/api/function/interface";
 
+
 //获取菜单列表
 export const getFunctionList = (params: Function.ReqFunctionParams) => {
-    return http.post(`${rePrefix}/function/list`, params);
+    return http.post(`/function/list`, params);
   };
   
   //添加菜单列表
-  export const addFunction = (params: Function.ReqFunctionParams) => {
-    return http.post(`${rePrefix}/function/add`,params);
+  export const addFunction = (params: Function.ResFunction) => {
+    return http.post(`/function/add`,params);
   };
   
   //删除菜单列表
   export const deleteFunction = (params: { id: string[] }) => {
-    return http.post(`${rePrefix}/function/delete`, { data: params });
+    return http.post(`/function/delete`, { data: params });
   };
   
   //编辑菜单列表
-  export const updateFunction = (params: Function.ReqFunctionParams) => {
-    return http.post(`${rePrefix}/function/update`, params);
+  export const updateFunction = (params: Function.ResFunction) => {
+    return http.put(`/function/update`, params);
   };
   
   
diff --git a/frontend/src/api/function/interface/index.ts b/frontend/src/api/function/interface/index.ts
index 11374cb..eee77fc 100644
--- a/frontend/src/api/function/interface/index.ts
+++ b/frontend/src/api/function/interface/index.ts
@@ -21,10 +21,11 @@ export namespace Function {
     pids?:string | null;//节点上层所有节点
     name: string;//名称
     code:string;//资源标识
-    path:string;//路径
-    icon?:string | null;//图标
+    path:string;//路由路径
+    component:string ;//组件地址
+    icon?:string;//图标
     sort:number;//排序
-    type:number | null;//资源类型0-菜单、1-按钮、2-公共资源、3-服务间调用资源
+    type:number;//资源类型0-菜单、1-按钮、2-公共资源、3-服务间调用资源
     remark?: string | null;//权限资源描述
     state:number;//权限资源状态
     create_By?:string | null;//创建人
diff --git a/frontend/src/api/index.ts b/frontend/src/api/index.ts
index e459224..99f931c 100644
--- a/frontend/src/api/index.ts
+++ b/frontend/src/api/index.ts
@@ -21,6 +21,7 @@ const config = {
   withCredentials: true,
   // post请求指定数据类型以及编码
   headers: { 'Content-Type': 'application/json;charset=utf-8' }
+  //headers : {'Content-Type': 'multipart/form-data'}
 };
 
 class RequestHttp {
@@ -107,6 +108,16 @@ class RequestHttp {
   download(url: string, params?: object, _object = {}): Promise<BlobPart> {
     return this.service.post(url, params, { ..._object, responseType: "blob" });
   }
+  /**
+   * @description 批量导入专用请求方法
+   */
+  batchImport<T>(url: string, formData: FormData, _object = {}): Promise<ResultData<T>> {
+    return this.service.post(url, formData, {
+      ..._object,
+      headers: { 'Content-Type': 'multipart/form-data' }
+    });
+  }
+
 }
 
 export default new RequestHttp(config);
diff --git a/frontend/src/api/role/interface/index.ts b/frontend/src/api/role/interface/index.ts
index 1fbb63c..14c02e1 100644
--- a/frontend/src/api/role/interface/index.ts
+++ b/frontend/src/api/role/interface/index.ts
@@ -1,15 +1,17 @@
-import type { ReqPage } from '@/api/interface'
+import type { ReqPage, ResPage } from '@/api/interface'
 
 // 角色管理模块
 export namespace Role {
 
-    //资源接口
-    export interface Permission{
-      id: string;     //资源ID
-      name: string;   //资源名称
-      code: string;   //资源代码
-    }
 
+    /**
+     * 用户数据表格分页查询参数
+     */
+    export interface ReqRoleParams extends ReqPage{
+      id: string; // 装置序号用户ID 必填
+      name?: string;     //用户名(别名)
+      code?: string;   //角色代码
+    }
     //角色接口
     export interface RoleBO {
       id: string;     //角色类型ID
@@ -24,15 +26,19 @@ export namespace Role {
       updateTime?: string; // 更新时间
     }
 
-    //角色+资源
-    export interface ReqRoleAndPermission extends RoleBO{
-      permissionList?:Permission[];   //角色权限列表
-    }
+      //角色接口
+      export interface RoleFunctionId {
+        id: string[];     //菜单id
+      }
+
+ /**
+   * 用户表格查询分页返回的对象；
+   */
+ export interface ResRolePage extends ResPage<RoleBO> {
+
+ }
 
-    // 角色+分页
-    export interface ReqRoleParams extends ReqPage,RoleBO {
 
-    }
 
 
 
diff --git a/frontend/src/api/role/role.ts b/frontend/src/api/role/role.ts
index 7ffee36..ff96cfe 100644
--- a/frontend/src/api/role/role.ts
+++ b/frontend/src/api/role/role.ts
@@ -1,5 +1,6 @@
 import type { ResPage } from '@/api/interface'
 import type { Role } from './interface'
+import type { Function } from './../function/interface/index';
 import { ADMIN as rePrefix } from '@/api/config/serviceName'
 import http from '@/api'
 
@@ -8,7 +9,7 @@ import http from '@/api'
  */
 // 获取角色列表
 export const getRoleList = (params: Role.ReqRoleParams) => {
-    return http.get(`/sysRole/list`, params)
+    return http.post(`/sysRole/list`, params)
 
   //  return http.post<ResPage<Role.ResRoleList>>(`/RoleList_Post`, params)
   // return http.post<ResPage<Role.ResRoleList>>(`${rePrefix}/role/list`, params)
@@ -21,17 +22,27 @@ export const addRole = (params: Role.RoleBO) => {
 
 // 编辑角色
 export const editRole = (params: Role.RoleBO) => {
-  return http.put(`/sysRole/edit`, params)
+  return http.put(`/sysRole/update`, params)
 }
 
 // 删除角色
 export const deleteRole = (params: { id: string[] }) => {
-  return http.post(`/sysRole/del`, params)
+  return http.post(`/sysRole/delete`, params)
 }
 
 
-// 编辑角色资源
-export const editRoleAndPermission = (params: Role.ReqRoleAndPermission) => {
-  return http.post(`/role/edit_RoleAndPermission`, params)
+// 获取资源
+export const getFunctionList = () => {
+  return http.get<Function.ResFunction>(`/sysFunction/functionTree`)
 }
 
+
+//获取角色id绑定的菜单
+export const getRoleFunction = (params:Role.RoleBO) => {
+  return http.post(`/sysRole/getFunctionsByRoleId?id=${params.id}`)
+}
+
+//角色分配菜单
+export const assignFunction = (params:Role.RoleBO,param:Role.RoleFunctionId) => {
+  return http.put(`/sysFunction/assignFunctionByRoleId`,{ roleId: params.id,functionIds:param.id })
+}
\ No newline at end of file
diff --git a/frontend/src/components/SelectIcon/index.vue b/frontend/src/components/SelectIcon/index.vue
index 169f5b1..6b67dfd 100644
--- a/frontend/src/components/SelectIcon/index.vue
+++ b/frontend/src/components/SelectIcon/index.vue
@@ -30,9 +30,10 @@
 
 <script  lang='ts' setup name='SelectIcon'>
 import * as Icons from '@element-plus/icons-vue'
+import { computed, ref } from 'vue';
 
 interface SelectIconProps {
-  iconValue: string;
+  iconValue: string| undefined;
   title?: string;
   clearable?: boolean;
   placeholder?: string;
@@ -82,6 +83,7 @@ const iconsList = computed((): { [key: string]: any } => {
   }
   return result
 })
+
 </script>
 
 <style scoped lang='scss'>
diff --git a/frontend/src/styles/index.ts b/frontend/src/styles/index.ts
new file mode 100644
index 0000000..f604164
--- /dev/null
+++ b/frontend/src/styles/index.ts
@@ -0,0 +1,311 @@
+import { isArray } from "@/utils/is";
+import { FieldNamesProps } from "@/components/ProTable/interface";
+
+const mode = import.meta.env.VITE_ROUTER_MODE;
+
+/**
+ * @description 获取localStorage
+ * @param {String} key Storage名称
+ * @returns {String}
+ */
+export function localGet(key: string) {
+  const value = window.localStorage.getItem(key);
+  try {
+    return JSON.parse(window.localStorage.getItem(key) as string);
+  } catch (error) {
+    return value;
+  }
+}
+
+/**
+ * @description 存储localStorage
+ * @param {String} key Storage名称
+ * @param {*} value Storage值
+ * @returns {void}
+ */
+export function localSet(key: string, value: any) {
+  window.localStorage.setItem(key, JSON.stringify(value));
+}
+
+/**
+ * @description 清除localStorage
+ * @param {String} key Storage名称
+ * @returns {void}
+ */
+export function localRemove(key: string) {
+  window.localStorage.removeItem(key);
+}
+
+/**
+ * @description 清除所有localStorage
+ * @returns {void}
+ */
+export function localClear() {
+  window.localStorage.clear();
+}
+
+/**
+ * @description 判断数据类型
+ * @param {*} val 需要判断类型的数据
+ * @returns {String}
+ */
+export function isType(val: any) {
+  if (val === null) return "null";
+  if (typeof val !== "object") return typeof val;
+  else return Object.prototype.toString.call(val).slice(8, -1).toLocaleLowerCase();
+}
+
+/**
+ * @description 生成唯一 uuid
+ * @returns {String}
+ */
+export function generateUUID() {
+  let uuid = "";
+  for (let i = 0; i < 32; i++) {
+    let random = (Math.random() * 16) | 0;
+    if (i === 8 || i === 12 || i === 16 || i === 20) uuid += "-";
+    uuid += (i === 12 ? 4 : i === 16 ? (random & 3) | 8 : random).toString(16);
+  }
+  return uuid;
+}
+
+/**
+ * 判断两个对象是否相同
+ * @param {Object} a 要比较的对象一
+ * @param {Object} b 要比较的对象二
+ * @returns {Boolean} 相同返回 true，反之 false
+ */
+export function isObjectValueEqual(a: { [key: string]: any }, b: { [key: string]: any }) {
+  if (!a || !b) return false;
+  let aProps = Object.getOwnPropertyNames(a);
+  let bProps = Object.getOwnPropertyNames(b);
+  if (aProps.length != bProps.length) return false;
+  for (let i = 0; i < aProps.length; i++) {
+    let propName = aProps[i];
+    let propA = a[propName];
+    let propB = b[propName];
+    if (!b.hasOwnProperty(propName)) return false;
+    if (propA instanceof Object) {
+      if (!isObjectValueEqual(propA, propB)) return false;
+    } else if (propA !== propB) {
+      return false;
+    }
+  }
+  return true;
+}
+
+/**
+ * @description 生成随机数
+ * @param {Number} min 最小值
+ * @param {Number} max 最大值
+ * @returns {Number}
+ */
+export function randomNum(min: number, max: number): number {
+  let num = Math.floor(Math.random() * (min - max) + max);
+  return num;
+}
+
+/**
+ * @description 获取当前时间对应的提示语
+ * @returns {String}
+ */
+export function getTimeState() {
+  let timeNow = new Date();
+  let hours = timeNow.getHours();
+  if (hours >= 6 && hours <= 10) return `早上好 ⛅`;
+  if (hours >= 10 && hours <= 14) return `中午好 🌞`;
+  if (hours >= 14 && hours <= 18) return `下午好 🌞`;
+  if (hours >= 18 && hours <= 24) return `晚上好 🌛`;
+  if (hours >= 0 && hours <= 6) return `凌晨好 🌛`;
+}
+
+/**
+ * @description 获取浏览器默认语言
+ * @returns {String}
+ */
+export function getBrowserLang() {
+  let browserLang = navigator.language ? navigator.language : navigator.browserLanguage;
+  let defaultBrowserLang = "";
+  if (["cn", "zh", "zh-cn"].includes(browserLang.toLowerCase())) {
+    defaultBrowserLang = "zh";
+  } else {
+    defaultBrowserLang = "en";
+  }
+  return defaultBrowserLang;
+}
+
+/**
+ * @description 获取不同路由模式所对应的 url + params
+ * @returns {String}
+ */
+export function getUrlWithParams() {
+  const url = {
+    hash: location.hash.substring(1),
+    history: location.pathname + location.search
+  };
+  return url[mode];
+}
+
+/**
+ * @description 使用递归扁平化菜单，方便添加动态路由
+ * @param {Array} menuList 菜单列表
+ * @returns {Array}
+ */
+export function getFlatMenuList(menuList: Menu.MenuOptions[]): Menu.MenuOptions[] {
+  let newMenuList: Menu.MenuOptions[] = JSON.parse(JSON.stringify(menuList));
+  return newMenuList.flatMap(item => [item, ...(item.children ? getFlatMenuList(item.children) : [])]);
+}
+
+/**
+ * @description 使用递归过滤出需要渲染在左侧菜单的列表 (需剔除 isHide == true 的菜单)
+ * @param {Array} menuList 菜单列表
+ * @returns {Array}
+ * */
+export function getShowMenuList(menuList: Menu.MenuOptions[]) {
+  let newMenuList: Menu.MenuOptions[] = JSON.parse(JSON.stringify(menuList));
+  return newMenuList.filter(item => {
+    item.children?.length && (item.children = getShowMenuList(item.children));
+    return !item.meta?.isHide;
+  });
+}
+
+/**
+ * @description 使用递归找出所有面包屑存储到 pinia/vuex 中
+ * @param {Array} menuList 菜单列表
+ * @param {Array} parent 父级菜单
+ * @param {Object} result 处理后的结果
+ * @returns {Object}
+ */
+export const getAllBreadcrumbList = (menuList: Menu.MenuOptions[], parent = [], result: { [key: string]: any } = {}) => {
+  for (const item of menuList) {
+    result[item.path] = [...parent, item];
+    if (item.children) getAllBreadcrumbList(item.children, result[item.path], result);
+  }
+  return result;
+};
+
+/**
+ * @description 使用递归处理路由菜单 path，生成一维数组 (第一版本地路由鉴权会用到，该函数暂未使用)
+ * @param {Array} menuList 所有菜单列表
+ * @param {Array} menuPathArr 菜单地址的一维数组 ['**','**']
+ * @returns {Array}
+ */
+export function getMenuListPath(menuList: Menu.MenuOptions[], menuPathArr: string[] = []): string[] {
+  for (const item of menuList) {
+    if (typeof item === "object" && item.path) menuPathArr.push(item.path);
+    if (item.children?.length) getMenuListPath(item.children, menuPathArr);
+  }
+  return menuPathArr;
+}
+
+/**
+ * @description 递归查询当前 path 所对应的菜单对象 (该函数暂未使用)
+ * @param {Array} menuList 菜单列表
+ * @param {String} path 当前访问地址
+ * @returns {Object | null}
+ */
+export function findMenuByPath(menuList: Menu.MenuOptions[], path: string): Menu.MenuOptions | null {
+  for (const item of menuList) {
+    if (item.path === path) return item;
+    if (item.children) {
+      const res = findMenuByPath(item.children, path);
+      if (res) return res;
+    }
+  }
+  return null;
+}
+
+/**
+ * @description 使用递归过滤需要缓存的菜单 name (该函数暂未使用)
+ * @param {Array} menuList 所有菜单列表
+ * @param {Array} keepAliveNameArr 缓存的菜单 name ['**','**']
+ * @returns {Array}
+ * */
+export function getKeepAliveRouterName(menuList: Menu.MenuOptions[], keepAliveNameArr: string[] = []) {
+  menuList.forEach(item => {
+    item.meta.isKeepAlive && item.name && keepAliveNameArr.push(item.name);
+    item.children?.length && getKeepAliveRouterName(item.children, keepAliveNameArr);
+  });
+  return keepAliveNameArr;
+}
+
+/**
+ * @description 格式化表格单元格默认值 (el-table-column)
+ * @param {Number} row 行
+ * @param {Number} col 列
+ * @param {*} callValue 当前单元格值
+ * @returns {String}
+ * */
+export function formatTableColumn(row: number, col: number, callValue: any) {
+  // 如果当前值为数组，使用 / 拼接（根据需求自定义）
+  if (isArray(callValue)) return callValue.length ? callValue.join(" / ") : "--";
+  return callValue ?? "--";
+}
+
+/**
+ * @description 处理 ProTable 值为数组 || 无数据
+ * @param {*} callValue 需要处理的值
+ * @returns {String}
+ * */
+export function formatValue(callValue: any) {
+  // 如果当前值为数组，使用 / 拼接（根据需求自定义）
+  if (isArray(callValue)) return callValue.length ? callValue.join(" / ") : "--";
+  return callValue ?? "--";
+}
+
+/**
+ * @description 处理 prop 为多级嵌套的情况，返回的数据 (列如: prop: user.name)
+ * @param {Object} row 当前行数据
+ * @param {String} prop 当前 prop
+ * @returns {*}
+ * */
+export function handleRowAccordingToProp(row: { [key: string]: any }, prop: string) {
+  if (!prop.includes(".")) return row[prop] ?? "--";
+  prop.split(".").forEach(item => (row = row[item] ?? "--"));
+  return row;
+}
+
+/**
+ * @description 处理 prop，当 prop 为多级嵌套时 ==> 返回最后一级 prop
+ * @param {String} prop 当前 prop
+ * @returns {String}
+ * */
+export function handleProp(prop: string) {
+  const propArr = prop.split(".");
+  if (propArr.length == 1) return prop;
+  return propArr[propArr.length - 1];
+}
+
+/**
+ * @description 根据枚举列表查询当需要的数据（如果指定了 label 和 value 的 key值，会自动识别格式化）
+ * @param {String} callValue 当前单元格值
+ * @param {Array} enumData 字典列表
+ * @param {Array} fieldNames label && value && children 的 key 值
+ * @param {String} type 过滤类型（目前只有 tag）
+ * @returns {String}
+ * */
+export function filterEnum(callValue: any, enumData?: any, fieldNames?: FieldNamesProps, type?: "tag") {
+  const value = fieldNames?.value ?? "value";
+  const label = fieldNames?.label ?? "label";
+  const children = fieldNames?.children ?? "children";
+  let filterData: { [key: string]: any } = {};
+  // 判断 enumData 是否为数组
+  if (Array.isArray(enumData)) filterData = findItemNested(enumData, callValue, value, children);
+  // 判断是否输出的结果为 tag 类型
+  if (type == "tag") {
+    return filterData?.tagType ? filterData.tagType : "";
+  } else {
+    return filterData ? filterData[label] : "--";
+  }
+}
+
+/**
+ * @description 递归查找 callValue 对应的 enum 值
+ * */
+export function findItemNested(enumData: any, callValue: any, value: string, children: string) {
+  return enumData.reduce((accumulator: any, current: any) => {
+    if (accumulator) return accumulator;
+    if (current[value] === callValue) return current;
+    if (current[children]) return findItemNested(current[children], callValue, value, children);
+  }, null);
+}
diff --git a/frontend/src/views/authority/resource/components/resourcePopup.vue b/frontend/src/views/authority/resource/components/resourcePopup.vue
index d9a8c6c..26a6fd7 100644
--- a/frontend/src/views/authority/resource/components/resourcePopup.vue
+++ b/frontend/src/views/authority/resource/components/resourcePopup.vue
@@ -1,66 +1,186 @@
 <template>
-    <el-dialog :title="dialogTitle" :model-value="visible" @close="handleCancel" v-bind="dialogSmall">
-      <el-form :model="formData" ref='formRuleRef' :rules='rules'>
-        <el-form-item label="名称" prop="name">
-          <el-input v-model="formData.name" />
+    <el-dialog :title="dialogTitle" :model-value="dialogVisible" @close="close" v-bind="dialogMiddle">
+      <el-form :model="formContent" ref='formRuleRef' :rules='rules' >
+        <el-form-item label="上级菜单" prop="pid" :label-width="100">
+          <el-tree-select
+            v-model="value"
+            :data="data"
+            check-strictly
+            :render-after-expand="false"
+            show-checkbox
+            check-on-click-node
+          
+          />
         </el-form-item>
-        <el-form-item label="路径" prop="path">
-          <el-input v-model="formData.path" />
+        <el-form-item label="名称" prop="name" :label-width="100">
+          <el-input v-model="formContent.name" />
         </el-form-item>
-        <el-form-item label="排序" prop="sort">
-          <el-input-number v-model="formData.sort" />
+        <el-form-item label="图标" prop="icon" :label-width="100">
+          <IconSelect
+          :iconValue="formContent.icon"
+          @update:iconValue="(value) => formContent.icon = value"
+          placeholder="选择一个图标"
+        />
         </el-form-item>
-        <el-form-item label="类型" prop="type">
-          <el-select v-model="formData.type" placeholder="请选择资源类型">
+        <el-form-item label="路由地址" prop="path" :label-width="100">
+          <el-input v-model="formContent.path" />
+        </el-form-item>
+        <el-form-item label="组件地址" prop="component" :label-width="100">
+          <el-input v-model="formContent.component" />
+        </el-form-item>
+        <el-form-item label="排序" prop="sort" :label-width="100">
+          <el-input-number v-model="formContent.sort" />
+        </el-form-item>
+        <el-form-item label="类型" prop="type" :label-width="100">
+          <el-select v-model="formContent.type" placeholder="请选择资源类型">
             <el-option
             v-for="item in dictStore.getDictData('resourceType')"
             :key="item.id"
-            :label="item.label"
+            :label="item.name"
             :value="item.code"
           />
           </el-select>
         </el-form-item>
-        <el-form-item label="描述" prop="remark">
-          <el-input v-model="formData.remark" :rows="2" type="textarea"/>
+        <el-form-item label="描述" prop="remark" :label-width="100">
+          <el-input v-model="formContent.remark" :rows="2" type="textarea"/>
         </el-form-item>
       </el-form>
       <template #footer>
         <div class="dialog-footer">
-          <el-button @click="handleCancel">取 消</el-button>
-          <el-button type="primary" @click="handleSubmit">确 定</el-button>
+          <el-button @click="close()">取 消</el-button>
+          <el-button type="primary" @click="save()">确 定</el-button>
         </div>
       </template>
     </el-dialog>
   </template>
   
   <script lang="ts" setup name="ResourceDialog">
-  import { defineProps, defineEmits,watch,ref, type Ref } from 'vue';
-  import { dialogSmall } from '@/utils/elementBind'
-  import { ElMessage,   FormInstance,   FormItemRule } from 'element-plus'
+  import { defineProps, defineEmits,watch,ref, type Ref, computed } from 'vue';
+  import { dialogMiddle } from '@/utils/elementBind'
+  import { ElMessage, FormInstance, FormItemRule } from 'element-plus'
   import { useDictStore } from '@/stores/modules/dict'
+  import { type Function } from '@/api/function/interface'
+  import {addFunction,updateFunction,} from '@/api/function/index.ts'
+  import IconSelect from '@/components/SelectIcon/index.vue'
+  import { functionList } from '@/api/function/functionExample.ts'
+  const value = ref()
+
+const data = [
+  {
+    value: '1',
+    label: 'Level one 1',
+    children: [
+      {
+        value: '1-1',
+        label: 'Level two 1-1',
+        children: [
+          {
+            value: '1-1-1',
+            label: 'Level three 1-1-1',
+          },
+        ],
+      },
+    ],
+  },
+  {
+    value: '2',
+    label: 'Level one 2',
+    children: [
+      {
+        value: '2-1',
+        label: 'Level two 2-1',
+        children: [
+          {
+            value: '2-1-1',
+            label: 'Level three 2-1-1',
+          },
+        ],
+      },
+      {
+        value: '2-2',
+        label: 'Level two 2-2',
+        children: [
+          {
+            value: '2-2-1',
+            label: 'Level three 2-2-1',
+          },
+        ],
+      },
+    ],
+  },
+  {
+    value: '3',
+    label: 'Level one 3',
+    children: [
+      {
+        value: '3-1',
+        label: 'Level two 3-1',
+        children: [
+          {
+            value: '3-1-1',
+            label: 'Level three 3-1-1',
+          },
+        ],
+      },
+      {
+        value: '3-2',
+        label: 'Level two 3-2',
+        children: [
+          {
+            value: '3-2-1',
+            label: 'Level three 3-2-1',
+          },
+        ],
+      },
+    ],
+  },
+]
   const dictStore = useDictStore()
-  const props = defineProps<{
-    visible: boolean;
-    dialogTitle: string;
-    
-    formData: {
-      id: string;//资源表Id
-      pid:string;//节点（0为根节点）
-      pids?:string;//节点上层所有节点
-      name: string;//名称
-      code:string;//资源标识
-      path:string;//路径
-      icon?:string;//图标
-      sort:number;//排序
-      type:number;//资源类型0-菜单、1-按钮、2-公共资源、3-服务间调用资源
-      remark?: string;//权限资源描述
-      state:number;//权限资源状态
-      create_By?:string;//创建人
-      create_Time?:string;//创建时间
-      update_By?:string;//更新人
-      update_Time?:string;//更新时间
-    };
-  }>();
+ // 定义弹出组件元信息
+ const dialogFormRef = ref()
+ function useMetaInfo() {
+    const dialogVisible = ref(false)
+    const titleType = ref('add')
+    const formContent = ref<Function.ResFunction>({
+      id: '',//资源表Id
+      pid:'',//节点（0为根节点）
+      pids:'',//节点上层所有节点
+      name: '',//名称
+      code:'',//资源标识
+      path:'',//路径
+      component:'',
+      icon:undefined as string | undefined, // 图标
+      sort:100,//排序
+      type:0,//资源类型0-菜单、1-按钮、2-公共资源、3-服务间调用资源
+      remark: '',//权限资源描述
+      state:1,//权限资源状态
+    })
+    return { dialogVisible, titleType, formContent }
+  }
+  
+  const { dialogVisible, titleType, formContent } = useMetaInfo()
+// 清空formContent
+const resetFormContent = () => {
+    formContent.value = {
+      id: '',//资源表Id
+      pid:'',//节点（0为根节点）
+      pids:'',//节点上层所有节点
+      name: '',//名称
+      code:'',//资源标识
+      path:'',//路径
+      component:'',
+      icon:undefined,//图标
+      sort:100,//排序
+      type:0,//资源类型0-菜单、1-按钮、2-公共资源、3-服务间调用资源
+      remark:'',//权限资源描述
+      state:1,//权限资源状态
+    }
+  }
+  
+  let dialogTitle = computed(() => {
+    return titleType.value === 'add' ? '新增菜单' : '编辑菜单'
+  })
+
   
 
   // 定义规则
@@ -70,42 +190,61 @@
           path :[{required:true,trigger:'blur',message:'菜单路径必填!'}],
           type :[{required:true,trigger:'change',message:'菜单类型必选!'}]
   })
-  const emit = defineEmits<{
-    (e: 'update:visible', value: boolean): void;
-    (e: 'submit', data: any): void;
-  }>();
-  
-  const handleCancel = () => {
-    //重置表单内容
-    //取消表单校验状态
-    formRuleRef.value && formRuleRef.value.resetFields()
-    emit('update:visible', false); // 关闭对话框
-  };
-  
-  const handleSubmit = () => {
-      try {
-      formRuleRef.value?.validate((valid: boolean) => {
-      if (valid) {
-          // 将表单数据转为json,发送到后端
-          let confirmFormData = JSON.parse(JSON.stringify(props.formData))
-          emit('submit', props.formData); // 提交表单数据
-          emit('update:visible', false); // 提交后关闭对话框
-      } else {
-        ElMessage.error('表单验证失败！')
-      }
-      }) 
-    }catch (error) {
-    console.error('验证过程中发生错误', error)
-    }
-
+ 
+  // 关闭弹窗
+const close = () => {
+    dialogVisible.value = false
+    // 清空dialogForm中的值
+    resetFormContent()
+    // 重置表单
+    dialogFormRef.value?.resetFields()
   }
   
-  // 当 props.visible 改变时，更新 formData
-  watch(() => props.visible, (newVal) => {
-    if (!newVal) {
-      // 这里可以重置表单数据，如果需要的话
-     
+  // 保存数据
+  const save = () => {
+    try {
+        dialogFormRef.value?.validate(async (valid: boolean) => {
+        if (valid) {
+          if (formContent.value.id) {
+                const result = await updateFunction(formContent.value);
+                if(result.code != 'A0000'){
+                  ElMessage.error({ message: result.message})
+                }else{
+                  ElMessage.success({ message: `${dialogTitle.value}成功！` })
+                }
+            } else {
+                const result = await addFunction(formContent.value);
+               if(result.code != 'A0000'){
+                  ElMessage.error({ message: result.message})
+                }else{
+                  ElMessage.success({ message: `${dialogTitle.value}成功！` })
+                }
+          }
+          close()
+          // 刷新表格
+          await props.refreshTable!()
+        }
+      })
+    } catch (err) {
+      console.error('验证过程中出现错误', err)
     }
-  });
+  }
+  
+  // 打开弹窗，可能是新增，也可能是编辑
+  const open = async (sign: string, data: Function.ResFunction) => {
+    titleType.value = sign
+    dialogVisible.value = true
+    if (data.id) {
+      formContent.value = { ...data }
+    } else {
+      resetFormContent()
+    }
+  }
+  
+  // 对外映射
+  defineExpose({ open })
+  const props = defineProps<{
+    refreshTable: (() => Promise<void>) | undefined;
+  }>()
   </script>
   
\ No newline at end of file
diff --git a/frontend/src/views/authority/resource/index.vue b/frontend/src/views/authority/resource/index.vue
index 35bf05e..352d499 100644
--- a/frontend/src/views/authority/resource/index.vue
+++ b/frontend/src/views/authority/resource/index.vue
@@ -3,64 +3,41 @@
       <ProTable
         ref='proTable'
         :columns='columns'
-        :data='resourceData'
-        @selection-change="handleSelectionChange" 
-        type="selection"
-        :pagination="false"
+        :request-api='getFunctionList'
       >
+         <!-- :data='userData' -->
         <!-- 表格 header 按钮 -->
-        <template #tableHeader>
-          <el-button type='primary' :icon='CirclePlus' @click="openAddDialog">新增</el-button>
-          <el-button type='danger' :icon='Delete' plain :disabled='!multipleSelection.length'  @click="handleDelList"
-                     >
+        <template #tableHeader='scope'>
+          <el-button type='primary' :icon='CirclePlus' @click="openDialog('add')">新增</el-button>
+          <el-button type='danger' :icon='Delete' plain :disabled='!scope.isSelected'
+                     @click='batchDelete(scope.selectedListIds)'>
             批量删除
           </el-button>
         </template>
-        <template>
-        </template>
         <!-- 表格操作 -->
         <template #operation='scope'>
-          <el-button type='primary' link :icon='EditPen' @click="openEditDialog(scope.row)">编辑</el-button>
-          <el-button type='primary' link :icon='Delete'  @click="deleteResource(scope.row)">删除</el-button>
-        </template>
+          <el-button type='primary' link :icon='EditPen' @click="openDialog('edit', scope.row)">编辑</el-button>
+          <el-button type='primary' link :icon='Delete' @click='handleDelete(scope.row)'>删除</el-button>
+          </template>
       </ProTable>
 
        
     </div>
+    <ResourcePopup :refresh-table='proTable?.getTableList' ref='resourcePopup' />
 
   </template>
   <script setup lang='tsx' name='useProTable'>
-  import { defineComponent,ref ,reactive} from 'vue'
+  import { ref ,reactive} from 'vue'
+  import { useHandleData } from '@/hooks/useHandleData'
   import { type Function } from '@/api/function/interface'
   import ProTable from '@/components/ProTable/index.vue'
   import {CirclePlus, Delete, EditPen,HomeFilled} from '@element-plus/icons-vue'
-  import resourceDataList from '@/api/function/functionExample'
   import type { ColumnProps, ProTableInstance } from '@/components/ProTable/interface'
-  import { ElMessage, ElMessageBox, inputEmits } from 'element-plus';
   import { useDictStore } from '@/stores/modules/dict'
-
-
+  import ResourcePopup from './components/resourcePopup.vue'
+  import {deleteFunction,getFunctionList} from '@/api/function/index.ts'
   const dictStore = useDictStore()
-  let multipleSelection = ref<string[]>([]);
-  const resourceData = resourceDataList
-  const dialogFormVisible = ref(false)
-  const isEditMode = ref(false);
-  const dialogTitle = ref('新增菜单')
-  
-  const dialogForm = ref<Function.ResFunction>({
-                              id: '',
-                              pid:'',
-                              pids:'',
-                              name: '',
-                              code:'',
-                              path:'',
-                              icon:'',
-                              sort:100,
-                              type:0,
-                              remark: '',
-                              state:1,
-                              children:[],
-});
+  const resourcePopup = ref()
   // ProTable 实例
   const proTable = ref<ProTableInstance>()
 
@@ -105,102 +82,26 @@
     },
     { prop: 'operation', label: '操作', fixed: 'right',minWidth: 200 },
   ])
-  // 打开 drawer(新增、查看、编辑)
-  // 打开新增对话框
-const openAddDialog = () => {
-  dialogForm.value = {
-    id: '',
-    pid:'',
-    pids:'',
-    name: '',
-    code:'',
-    path:'',
-    icon:'',
-    sort:100,
-    remark: '',
-    state:1,                          
-    children: [],
-  };
-  isEditMode.value = true;
-  dialogTitle.value = '新增菜单';
-  dialogFormVisible.value = true; // 打开对话框
-};
-// 提交表单
-const submitForm = () => { 
-  if (isEditMode.value) {
-    const index = resourceData.value.findIndex((resource: { id: string }) => resource.id === dialogForm.value.id);
-    if (index !== -1) {
-      dialogForm.value.update_Time = formatDate(Date.now()); // 更新为当前时间
-      resourceData.value[index] = { ...dialogForm.value }; // 更新资源
-    }
-  } else {
-   
-    resourceData.value.push({ ...dialogForm.value ,id:Date.now().toString()}); // 新增资源
-  }
-  dialogFormVisible.value = false; // 关闭对话框
-};
-// 打开编辑对话框
-const openEditDialog = (resource: Resource.ResResourceList) => {
-  dialogForm.value = { ...resource }; // 复制资源数据以便编辑
-  isEditMode.value = true; // 设置为编辑模式
-  dialogTitle.value = '编辑菜单';
-  dialogFormVisible.value = true; // 显示对话框
+
  
-};
- //选中
- // 处理选择变化
- const handleSelectionChange = (selection:Resource.ResResourceList[]) => {
-    multipleSelection.value = selection.map(row => row.id); // 更新选中的行
-    
-  };
-  //批量删除
-  const handleDelList =()=>{
-  //   ElMessageBox.confirm(
-  //   `是否删除所选菜单信息？`, // 使用模板字符串来插值
-  //   '温馨提示',
-  //   {
-  //     confirmButtonText: '确定',
-  //     cancelButtonText: '取消',
-  //     type: 'warning',
-  //   }
-  // )
-  //   .then(() => {
-  //     resourceData.value = resourceData.value.filter(item => !multipleSelection.value.includes(item.id));
-  //     multipleSelection.value = []; // Clear selected rows
-  //     ElMessage.success("批量删除成功");
-  //   })
-     
+
+// 打开 drawer(新增、编辑)
+const openDialog = (titleType: string, row: Partial<Function.ResFunction> = {}) => {
+  resourcePopup.value?.open(titleType, row)
+}
+
+  // 删除用户信息
+  const handleDelete = async (params: Function.ResFunction) => {
+    await useHandleData(deleteFunction,  [params.id] , `删除【${params.name}】用户`)
+    proTable.value?.getTableList()
+  }
+
+  // 批量删除用户信息
+  const batchDelete = async (id: string[]) => {
+    await useHandleData(deleteFunction, { id }, '删除所选用户信息')
+    proTable.value?.clearSelection()
+    proTable.value?.getTableList()
   }
-// 删除资源
-const deleteResource = (params: Resource.ResResourceList) => {
-  // ElMessageBox.confirm(
-  //   `是否删除【${params.name}】菜单？`, // 使用模板字符串来插值
-  //   '温馨提示',
-  //   {
-  //     confirmButtonText: '确定',
-  //     cancelButtonText: '取消',
-  //     type: 'warning',
-  //   }
-  // )
-  //   .then(() => {
-  //     resourceData.value = resourceData.value.filter(item => item.id !== params.id); // 过滤掉被删除的资源
-  //     ElMessage({
-  //       type: 'success',
-  //       message: `删除${params.name}成功!`
-  //     })
-  //   })
-};
 
 
-const formatDate = (timestamp: string|number|Date) => {
-  const date = new Date(timestamp);
-  const year = date.getFullYear();
-  const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从 0 开始
-  const day = String(date.getDate()).padStart(2, '0');
-  const hours = String(date.getHours()).padStart(2, '0');
-  const minutes = String(date.getMinutes()).padStart(2, '0');
-  const seconds = String(date.getSeconds()).padStart(2, '0');
-  
-  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
-};
   </script>
\ No newline at end of file
diff --git a/frontend/src/views/authority/role/components/permissionUnit.vue b/frontend/src/views/authority/role/components/permissionUnit.vue
deleted file mode 100644
index 7278e9c..0000000
--- a/frontend/src/views/authority/role/components/permissionUnit.vue
+++ /dev/null
@@ -1,84 +0,0 @@
-<template>
-  <!-- 权限信息弹出框 -->
-  <el-dialog :model-value="dialogVisible" :title="title" v-bind="dialogBig" @close="handleCancel" width="600" draggable>
-    <div>
-      <el-transfer v-model="value" :data="data.permissionList" :titles="['未具备的权限', '已具备的权限']"/>
-    </div>
-    <template #footer>
-      <div class="dialog-footer">
-        <el-button @click="handleCancel">取消</el-button>
-        <el-button type="primary" @click="handleCancel">
-          保存
-        </el-button>
-      </div>
-    </template>
-  </el-dialog>
-
-</template>
-
-<script lang="ts" setup>
-import {ref} from 'vue'
-import {dialogBig} from '@/utils/elementBind'
-import {Role} from '@/api/role/interface'
-
-const {dialogVisible, data} = defineProps<{
-  dialogVisible: boolean;
-  title: string;
-<<<<<<< HEAD
-  data: Role.Permission;
-}>()
-=======
-  data: Role.ResRoleList;
-}>
-()
->>>>>>> bf8c6a1d00bd2c22d1a10896c5e8fc94ab9ed017
-
-// const leftvalue = ref<Role.Permission[]>([])
-// const rightvalue = ref<Role.Permission[]>([])
-
-// const rightvalue = computed<Role.Permission[]>({
-//   get(){
-//     return data.permissionList?.filter(item => item.disabled) || []
-//     },
-//    set: (value: Role.Permission[]) => {
-//     if (data.permissionList) {
-//       for(let i = 0;i<value.length;i++){
-//         for(let j = 0;j<(data.permissionList?.length);j++){
-//           if(value[i].key === data.permissionList[j].key)
-//           {
-//             data.permissionList[j].disabled = value[i].disabled
-//           }
-//         }
-//       }
-//     }
-//    }
-// })
-
-// const leftvalue = computed<Role.Permission[]>({
-//   get(){
-//     return data.permissionList?.filter(item => item.disabled === false) || []
-//     },
-//    set: (value: Role.Permission[]) => {
-//     if (data.permissionList) {
-//       for(let i = 0;i<value.length;i++){
-//         for(let j = 0;j<(data.permissionList?.length);j++){
-//           if(value[i].key === data.permissionList[j].key)
-//           {
-//             data.permissionList[j].disabled = value[i].disabled
-//           }
-//         }
-//       }
-//     }
-//    }
-// })
-
-const value = ref()
-
-const emit = defineEmits<{
-  (e: 'update:visible', value: boolean): void;
-}>();
-
-const handleCancel = () => {
-  emit('update:visible', false)
-}
-</script>
\ No newline at end of file
diff --git a/frontend/src/views/authority/role/components/rolePopup.vue b/frontend/src/views/authority/role/components/rolePopup.vue
index 8d79891..897fb60 100644
--- a/frontend/src/views/authority/role/components/rolePopup.vue
+++ b/frontend/src/views/authority/role/components/rolePopup.vue
@@ -4,7 +4,7 @@
     <div>
 
         <el-form :model="formContent" 
-                  ref='formRuleRef'
+                  ref='dialogFormRef'
                   :rules='rules'
                   >
         <el-form-item label="名称" prop='name' :label-width="100">
@@ -84,7 +84,8 @@ const resetFormContent = () => {
   const formRuleRef = ref<FormInstance>()
   //定义校验规则
   const rules: Ref<Record<string, Array<FormItemRule>>> = ref({
-    name: [{ required: true, message: '名称必填！', trigger: 'blur' }],
+    name: [{ required: true, message: '名称必填！', trigger: 'blur' },
+    { pattern: /^[\u4e00-\u9fa5]{1,20}$/, message: '名称为长度1-20的中文', trigger: 'blur' }],
     code: [{ required: true, message: '编码必填！', trigger: 'blur' }],
   })
 
diff --git a/frontend/src/views/authority/role/components/roleResourcePopup.vue b/frontend/src/views/authority/role/components/roleResourcePopup.vue
new file mode 100644
index 0000000..2007ea6
--- /dev/null
+++ b/frontend/src/views/authority/role/components/roleResourcePopup.vue
@@ -0,0 +1,187 @@
+<template>
+    <!-- 基础信息弹出框 -->
+  <el-dialog :model-value="dialogVisible" :title="dialogTitle"  v-bind="dialogMiddle" @close="close" >
+    <div>
+        <el-form :model="formContent" ref='dialogFormRef'>
+      <el-tree
+        :data="functionList"
+        :props="defaultProps"
+        node-key="id"
+        :expand-on-click-node="false"
+        show-checkbox
+        :default-checked-keys="checkedKeysRef"
+        ref="treeRef"
+      >
+      </el-tree>
+
+      </el-form>
+      </div>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="close()">取消</el-button>
+        <el-button type="primary" @click="save()">
+          保存
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+
+  </template>
+  
+  <script lang="ts" setup>
+  import{  ElMessage, ElTree, type FormInstance,type FormItemRule } from 'element-plus'
+  import type { ProTableInstance } from '@/components/ProTable/interface'
+  import { ref,computed, type Ref, nextTick  } from 'vue'
+  import { Role } from '@/api/role/interface'
+  import {dialogMiddle,dialogSmall} from '@/utils/elementBind'
+  import { useDictStore } from '@/stores/modules/dict'
+  import { type Function } from '@/api/function/interface'
+  import {getRoleFunction,assignFunction} from '@/api/role/role'
+
+  // 保存数据
+  const treeRef = ref<InstanceType<typeof ElTree>>()
+  const functionList = ref<Function.ResFunction[]>([])
+  // 定义一个 ref 来存储已选中的 keys
+  const checkedKeysRef = ref<string[]>([]);
+  // 树形节点配置
+  const defaultProps = {
+    children: 'children',
+    label: 'name',
+  };
+
+ // 定义弹出组件元信息
+ const dialogFormRef = ref()
+ const dialogTitle = ref('授权资源')
+ const { dialogVisible,  formContent } = useMetaInfo()
+
+ function useMetaInfo() {
+    const dialogVisible = ref(false)
+    
+    const formContent = ref<Role.RoleBO>({
+      id: '',    //角色类型ID
+      name: '',   //角色类型名称
+      code: '',  //角色代码
+      type: 2, //角色类型
+      remark:'',  //角色描述
+      state:1,
+    })
+    return { dialogVisible, formContent }
+  }
+  
+  
+
+// 清空formContent
+const resetFormContent = () => {
+    formContent.value = {
+      id: '',    //角色类型ID
+      name: '',   //角色类型名称
+      code: '',  //角色代码
+      type: 2, //角色类型
+      remark:'',  //角色描述
+      state:1,
+    }
+  }
+  
+
+// 关闭弹窗
+const close = () => {
+    dialogVisible.value = false
+    // 清空dialogForm中的值
+    resetFormContent()
+    // 重置表单
+    dialogFormRef.value?.resetFields()
+  }
+  
+  // 保存数据
+  const save = () => {
+    try {
+        dialogFormRef.value?.validate(async (valid: boolean) => {
+        if (valid) {
+          if (formContent.value.id) {
+                // 获取勾选的节点 ID
+                const checkedKeys = treeRef.value?.getCheckedKeys() || [];
+                console.log('获取勾选的节点 ID',checkedKeys);
+                // 将 checkedKeys 转换为字符串数组
+                const checkedKeysAsString: string[] = checkedKeys.map(key => String(key));
+                // 假设 RoleFunctionId 是一个对象，且需要 id 属性
+                const roleFunctionIdObject: Role.RoleFunctionId = {
+                  id: checkedKeysAsString
+                };
+                console.log('roleFunctionIdObject',roleFunctionIdObject);
+                const result = await assignFunction(formContent.value,roleFunctionIdObject);
+                if(result.code != 'A0000'){
+                  ElMessage.error({ message: result.message})
+                }else{
+                  ElMessage.success({ message: `${dialogTitle.value}成功！` })
+                }
+            } 
+          close()
+          // 刷新表格
+          await props.refreshTable!()
+        }
+      })
+    } catch (err) {
+      console.error('验证过程中出现错误', err)
+    }
+  }
+  
+
+ 
+// 打开弹窗，可能是新增，也可能是编辑
+const open = async (sign: string, data: Role.RoleBO, AllFunction: Function.ResFunction[]) => {
+  // 重置树状结构
+  functionList.value = []
+  checkedKeysRef.value = []
+  const result = await getRoleFunction(data);
+  if (result.code === 'A0000') {
+    // 将 result.data 转换为 Function.ResFunction[] 类型
+    const roleFunctions = result.data as Function.ResFunction[];
+    console.log('roleFunctions',roleFunctions)
+    // 获取 AllFunction 中所有层级的 id
+    const allIds = getAllIds(AllFunction);
+    // 匹配 roleFunctions 中的 id 并设置 checkedKeys
+    const checkedKeys = allIds.filter(id => roleFunctions.some(roleFunc => roleFunc.id === id));
+    console.log('checkedKeys',checkedKeys)
+    // 设置 functionList 和 checkedKeys
+    functionList.value = AllFunction;
+    checkedKeysRef.value = checkedKeys;
+
+    // nextTick(() => {
+    //   // 触发一次更新，确保表单中的数据被更新
+    //   dialogFormRef.value?.validate();
+    // });
+  } else {
+    ElMessage.error({ message: result.message });
+  }
+
+  dialogVisible.value = true;
+  if (data.id) {
+    formContent.value = { ...data };
+  } else {
+    resetFormContent();
+  }
+}
+  
+
+const getAllIds = (functions: Function.ResFunction[]): string[] => {
+  const ids: string[] = [];
+
+  const traverse = (func: Function.ResFunction) => {
+    ids.push(func.id);
+    if (func.children && func.children.length > 0) {
+      func.children.forEach(child => traverse(child));
+    }
+  };
+
+  functions.forEach(func => traverse(func));
+
+  return ids;
+};
+
+  // 对外映射
+  defineExpose({ open })
+  const props = defineProps<{
+    refreshTable: (() => Promise<void>) | undefined;
+  }>()
+  
+  </script>
\ No newline at end of file
diff --git a/frontend/src/views/authority/role/index.vue b/frontend/src/views/authority/role/index.vue
index a4730be..aae38c5 100644
--- a/frontend/src/views/authority/role/index.vue
+++ b/frontend/src/views/authority/role/index.vue
@@ -24,41 +24,27 @@
     </ProTable>
   </div>
   <RolePopup :refresh-table='proTable?.getTableList' ref='rolePopup' />
-
+  <RoleResourcePopup :refresh-table='proTable?.getTableList' ref='roleResourcePopup' />
 </template>
 
 <script setup lang='tsx' name='useRole'>
 import { type Role } from '@/api/role/interface'
+import { type Function } from '@/api/function/interface'
 import { useHandleData } from '@/hooks/useHandleData'
 import ProTable from '@/components/ProTable/index.vue'
 import type{  ProTableInstance, ColumnProps } from '@/components/ProTable/interface'
 import { CirclePlus, Delete, EditPen, Share, Download, Upload, View, Refresh } from '@element-plus/icons-vue'
-import { useDictStore } from '@/stores/modules/dict'
-import {getRoleList,deleteRole} from '@/api/role/role'
+import {getRoleList,deleteRole,getFunctionList} from '@/api/role/role'
 import RolePopup from './components/rolePopup.vue'
-import { reactive, ref } from 'vue'
-
-
-const { rolePopupVisible, permissionUnitVisible, rolePopupTitle, permissionUnitTitle, rolePopupData, permissionUnitData } = useCount()
-
-function useCount() {
-  const rolePopupVisible = ref(false)
-  const permissionUnitVisible = ref(false)
-  const rolePopupTitle = ref()
-  const permissionUnitTitle = ref()
-  const rolePopupData = ref<Role.RoleBO>({} as Role.RoleBO)
-  const permissionUnitData = ref<Role.RoleBO>({} as Role.RoleBO)
-  // const permissionUnitData = ref<Role.Permission[]>([])
-  return { rolePopupVisible, permissionUnitVisible, rolePopupTitle, permissionUnitTitle, rolePopupData, permissionUnitData }
-}
-
-const dictStore = useDictStore()
-let openType = ''
+import RoleResourcePopup from './components/roleResourcePopup.vue'
+import { onMounted, reactive, ref } from 'vue'
+import {useDictStore} from '@/stores/modules/dict'
 const rolePopup = ref()
-
+const roleResourcePopup = ref()
+const dictStore = useDictStore()
 // ProTable 实例
 const proTable = ref<ProTableInstance>()
-
+const functionList = ref<Function.ResFunction[]>([])
 // 如果你想在请求之前对当前请求参数做一些操作，可以自定义如下函数：params 为当前所有的请求参数（包括分页），最后返回请求列表接口
 // 默认不做操作就直接在 ProTable 组件上绑定	:requestApi="getUserList"
 const getTableList = (params: any) => {
@@ -69,6 +55,14 @@ const getTableList = (params: any) => {
   return getRoleList(newParams)
 }
 
+
+  // 初始化时获取角色列表
+  onMounted(async () => {
+    const response = await getFunctionList()
+    functionList.value = response.data as unknown as Function.ResFunction[]
+    //console.log(functionList.value)
+  })
+
 // 表格配置项
 const columns = reactive<ColumnProps<Role.RoleBO>[]>([
   { type: 'selection', fixed: 'left', width: 70 },
@@ -94,14 +88,21 @@ const columns = reactive<ColumnProps<Role.RoleBO>[]>([
     prop: 'state',
     label: '状态',
     minWidth: 100,
+    enum: dictStore.getDictData('state'),
+      fieldNames: { label: 'label', value: 'code' },
+      render: scope => {
+        return (
+          <el-tag type={scope.row.state ? 'success' : 'danger'} > {scope.row.state ? '正常' : '删除'} </el-tag>
+        )
+      },
   },
-  { prop: 'operation', label: '操作', fixed: 'right', width: 330 },
+  { prop: 'operation', label: '操作', fixed: 'right', width: 250 },
 ])
 
 // 删除角色信息
 const deleteAccount = async (params: Role.RoleBO) => {
   if (params.id) {
-  await useHandleData(deleteRole, { id:[params.id] }, '删除所选角色信息')
+  await useHandleData(deleteRole, [params.id], '删除所选角色信息')
   proTable.value?.clearSelection()
   proTable.value?.getTableList()
   }
@@ -109,7 +110,7 @@ const deleteAccount = async (params: Role.RoleBO) => {
 
 // 批量删除角色信息
 const batchDelete = async (id: string[]) => {
-  await useHandleData(deleteRole, { id }, '删除所选角色信息')
+  await useHandleData(deleteRole, id , '删除所选角色信息')
   proTable.value?.clearSelection()
   proTable.value?.getTableList()
 }
@@ -117,7 +118,11 @@ const batchDelete = async (id: string[]) => {
 
 // 打开 drawer(新增、查看、编辑)
 const openDrawer = (titleType: string, row: Partial<Role.RoleBO> = {}) => {
-  rolePopup.value?.open(titleType, row)
+    if(titleType==='设置权限'){
+      roleResourcePopup.value?.open(titleType, row,functionList.value)
+     }else{
+       rolePopup.value?.open(titleType, row)
+     }
 }
 </script>
   
\ No newline at end of file
diff --git a/frontend/src/views/authority/user/index.vue b/frontend/src/views/authority/user/index.vue
index c08ed25..2da34f7 100644
--- a/frontend/src/views/authority/user/index.vue
+++ b/frontend/src/views/authority/user/index.vue
@@ -133,7 +133,7 @@
       return (<el-tag type={tagType}>{tagText}</el-tag>);
     }
     },
-    { prop: 'operation', label: '操作', fixed: 'right', width: 330 },
+    { prop: 'operation', label: '操作', fixed: 'right', width: 250 },
   ])
 
 
@@ -195,7 +195,7 @@ const openDialog = (titleType: string, row: Partial<User.ResUser> = {}) => {
 
   // 批量删除用户信息
   const batchDelete = async (id: string[]) => {
-    await useHandleData(deleteUser, { id }, '删除所选用户信息')
+    await useHandleData(deleteUser, id , '删除所选用户信息')
     proTable.value?.clearSelection()
     proTable.value?.getTableList()
   }
diff --git a/frontend/src/views/machine/device/components/devicePopup.vue b/frontend/src/views/machine/device/components/devicePopup.vue
index ccc1fa9..e8fe2f7 100644
--- a/frontend/src/views/machine/device/components/devicePopup.vue
+++ b/frontend/src/views/machine/device/components/devicePopup.vue
@@ -136,8 +136,8 @@
                       
                         <el-row  :gutter="24" >
                         <el-col :span="8">
-                                <el-form-item label='是否加密'  prop='encryption'>
-                                    <el-select v-model="formContent.encryption"  clearable placeholder="请选择是否加密" @change="handleEncryptionChange">
+                                <el-form-item label='是否加密'  prop='encryptionFlag'>
+                                    <el-select v-model="formContent.encryptionFlag"  clearable placeholder="请选择是否加密" @change="handleEncryptionChange">
                                         <el-option label="是" :value="1"></el-option>
                                         <el-option label="否" :value="0"></el-option>
                                     </el-select>
@@ -267,7 +267,7 @@ import { el } from 'element-plus/es/locale'
       protocol: '',
       ip: '',
       port: 0,
-      encryption: 1,
+      encryptionFlag: 1,
       reCheckNum:0,
       state: 1,
     })
@@ -293,7 +293,7 @@ import { el } from 'element-plus/es/locale'
         protocol: '',
         ip: '',
         port: 0,
-        encryption: 1,
+        encryptionFlag: 1,
         reCheckNum:0,
         state: 1,
     }
@@ -326,7 +326,7 @@ import { el } from 'element-plus/es/locale'
     port:[{ required: true, message: '端口号必填！', trigger: 'blur' },
           { pattern: /^\d+$/, message: '端口号格式错误', trigger: 'blur' }],
     manufacturer: [{ required: true, message: '生产厂家必选！', trigger: 'change' }],
-    encryption: [{ required: true, message: '是否加密必选！', trigger: 'change' }],
+    encryptionFlag: [{ required: true, message: '是否加密必选！', trigger: 'change' }],
     protocol: [{ required: true, message: '通讯协议必选！', trigger: 'change' }],
   })
   
@@ -381,7 +381,7 @@ import { el } from 'element-plus/es/locale'
     dialogVisible.value = true
 
 
-    if(data.encryption === 1){
+    if(data.encryptionFlag === 1){
         handleEncryptionChange(1)
     }else{
         handleEncryptionChange(0)
diff --git a/frontend/src/views/machine/device/index.vue b/frontend/src/views/machine/device/index.vue
index 878e4cd..55d8f7a 100644
--- a/frontend/src/views/machine/device/index.vue
+++ b/frontend/src/views/machine/device/index.vue
@@ -169,5 +169,7 @@ const importFile=async ()=>{
   }
   deviceImportExcel.value?.acceptParams(params)
 }
+
+
 </script>
   
\ No newline at end of file
diff --git a/frontend/src/views/system/dictionary/dictTree/index.vue b/frontend/src/views/system/dictionary/dictTree/index.vue
index 3f1e2c9..1865849 100644
--- a/frontend/src/views/system/dictionary/dictTree/index.vue
+++ b/frontend/src/views/system/dictionary/dictTree/index.vue
@@ -83,7 +83,7 @@
   
   // 删除字典类型
   const handleDelete = async (params: Dict.ResDictTree) => {
-    console.log(params)
+    //console.log(params)
     await useHandleData(deleteDictTree, params, `删除【${params.name}】树形字典类型`)
     proTable.value?.getTableList()
   }