diff --git a/src/views/permissions/permission.vue b/src/views/permissions/permission.vue
index 47a6e48..0e4c383 100644
--- a/src/views/permissions/permission.vue
+++ b/src/views/permissions/permission.vue
@@ -10,18 +10,30 @@ import request from '@/util/http'
 import API from '@/util/http'
 // 客户明细表格   什么表格？？？？？？？
 const tableData = ref([])
+const roleData = ref([])
 const total = ref(100)
+const roleTotal = ref(100)//角色分页
+const checkTab = ref('admin')
 // 搜索admin
 const admin = ref({
   account: '',
   market: '',
   postiton: ''
 })
+// 角色搜索
+const role = ref({
+  name: ''
+})
 // 搜索对象
 const getObj = ref({
   pageNum: 1,
   pageSize: 10
 })
+// 角色搜索对象
+const getRoleObj = ref({
+  pageNum: 1,
+  pageSize: 10
+})
 // 新增用户权限弹窗
 const userAddVisible = ref(false)
 // 编辑用户权限弹窗
@@ -43,41 +55,48 @@ const addAdmin = ref({
   market: [],
   permission: '',
   postiton: '',
-  machineId: '', // 初始机器码输入框
-  machineIds: [], // 动态添加的机器码输入框
+  machineIds: [''], // 动态添加的机器码输入框
+  machineId: '',
   remark: ''
 })
 // 新增角色对象
 const addRole = ref({
   roleName: '',
-  parentName: '',
+  parentId: null,
   checkedKeys: [],
-  grade: ''
+  grade: '',
+  market: ''
 })
 // 新增角色的权限列表
 const permissionSelect = ref()
+
+
+// 编辑用户权限对象
+const permissionEditObj = ref({
+  checkedKeys: [],
+  machineIds: [''],
+  machineId: '',
+  password: '',
+})
 const addMachineIdInput = function () {
-  if (addAdmin.value.machineIds.length >= 1) {
+  if (addAdmin.value.machineIds.length >= 2) {
     ElMessage.warning('设备数量已达上限')
     return
   }
   addAdmin.value.machineIds.push('')
 }
+const UseraddMachineIdInput = function () {
+  if (permissionEditObj.value.machineIds.length >= 2) {
+    ElMessage.warning('设备数量已达上限')
+    return
+  }
+  permissionEditObj.value.machineIds.push('')
+}
 
-// 编辑用户权限对象
-const permissionEditObj = ref({})
 // 删除权限对象
 const delObj = ref({})
-// 各角色权限列表
-const lists = [
-  { name: '管理员', value: '1', permissions: ['2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20'] },
-  { name: '总部财务', value: '2', permissions: ['2', '3', '4', '5', '6', '7', '8', '9'] },
-  { name: '总部客服', value: '3', permissions: ['2', '3', '4', '5', '6', '7', '8'] },
-  { name: '地区负责人', value: '4', permissions: ['2', '3', '4', '5', '6'] },
-  { name: '地区财务', value: '5', permissions: ['2', '3', '4', '5'] },
-  { name: '客服专员', value: '6', permissions: ['2', '3'] }
-]
-
+// 删除角色对象
+const delRoleObj = ref({})
 const get = async function (val) {
   try {
     if (typeof val === 'number') {
@@ -100,6 +119,48 @@ const get = async function (val) {
     console.log('请求失败', error)
   }
 }
+const getRoleList = async function (val) {
+  try {
+    if (typeof val === 'number') {
+      getObj.value.pageNum = val
+    }
+    console.log('搜索参数', getObj.value, role.value)
+    const result = await request({
+      url: '/role/selectBy',
+      data: {
+        ...getRoleObj.value,
+        roleVo: {
+          roleName: role.value.name
+        }
+      }
+    })
+    roleData.value = result.data.list
+    console.log('roleData', roleData.value)
+    roleTotal.value = result.data.total
+  } catch (error) {
+    console.log('请求失败', error)
+  }
+}
+// 试试D老师的方法
+const formatPermissions = (tree) => {
+  if (!tree || tree.length === 0) return '';
+
+  return tree.map(menu => {
+    const mainMenu = menu.menuName;
+    const subMenus = menu.children?.map(child => child.menuName) || [];
+
+    // 如果有子菜单，显示前2个子菜单名称
+    if (subMenus.length > 0) {
+      const maxSub = Math.min(2, subMenus.length);
+      const subText = subMenus.slice(0, maxSub).join('、');
+      const moreText = subMenus.length > maxSub ? '...' : '';
+      return `${mainMenu}+${subText}${moreText}`;
+    }
+
+    // 没有子菜单时只显示主菜单
+    return mainMenu;
+  }).join('+');
+};
 const trimJwCode = () => {
   if (admin.value.account) {
     admin.value.account = admin.value.account.replace(/\s/g, '');
@@ -110,6 +171,11 @@ const search = function () {
   getObj.value.pageNum = 1
   get()
 }
+const searchRole = function () {
+  trimJwCode();
+  getObj.value.pageNum = 1
+  getRoleList()
+}
 // 重置
 const reset = function () {
   admin.value = {}
@@ -141,6 +207,7 @@ const getStore = async function () {
 
 // 打开新增用户权限弹窗
 const openUserAddVisible = function () {
+  getRoles()
   userAddVisible.value = true
   addAdmin.value = {
     account: '',
@@ -149,7 +216,7 @@ const openUserAddVisible = function () {
     permission: '',
     postiton: '',
     machineId: '',
-    machineIds: [],
+    machineIds: [''],
     remark: ''
   };
 
@@ -157,6 +224,8 @@ const openUserAddVisible = function () {
 // 新增角色弹窗
 const openPermissionAddVisible = function () {
   permissionAddVisible.value = true
+  getRoles()
+  getLists()
 }
 // 关闭新增用户权限弹窗，并刷新表单
 const closeUserAddVisible = function () {
@@ -167,7 +236,7 @@ const closeUserAddVisible = function () {
     permission: '',
     postiton: '',
     machineId: '',
-    machineIds: [],
+    machineIds: [''],
     remark: ''
   };
   userAddVisible.value = false;
@@ -177,6 +246,7 @@ const closeUserAddVisible = function () {
 const closePermissionAddVisible = function () {
   permissionAddVisible.value = false
   Ref.value.resetFields();
+  getRoleList()
 }
 // 新增用户权限初始化
 const userAddInit = function () {
@@ -188,7 +258,7 @@ const permissionAddInit = function () {
   permissionAddObj.value = {}
   openPermissionAddVisible()
 }
-
+//新增用户
 const permissionAdd = async function () {
   Ref.value.validate(async (valid) => {
     console.log('addRole', addRole.value)
@@ -206,7 +276,7 @@ const permissionAdd = async function () {
           "market": addAdmin.value.market,//地区
           "roleId": addAdmin.value.permission,//权限ID
           "postiton": addAdmin.value.postiton,//职位
-          "machineId": addAdmin.value.machineId,//机器码
+          "machineId": addAdmin.value.machineIds[0],//机器码
           "remark": addAdmin.value.remark//备注
         }
         const result = await request({
@@ -246,35 +316,24 @@ const throttledPermissionAdd = _.throttle(permissionAdd, 5000, {
   trailing: false
 })
 // 权限类别
-const permissionList = [
-  {
-    label: '管理员',
-    value: '1'
-  },
-  {
-    label: '总部财务',
-    value: '2'
-  },
-  {
-    label: '总部客服',
-    value: '3'
-  },
-  {
-    label: '地区负责人',
-    value: '4'
-  },
-  {
-    label: '地区财务',
-    value: '5'
-  },
-  {
-    label: '客服专员',
-    value: '6'
+const permissionList = ref([])
+const getRoles = async function () {
+  try {
+    const res = await API({ url: '/role/selectAll' })
+    permissionList.value = res.data.map(item => ({
+      label: item.roleName,
+      value: item.id
+    }))
+
+    console.log('权限列表:', permissionList.value)
+  } catch (error) {
+    console.error('获取权限列表失败:', error)
   }
-]
+}
 
 // 打开编辑用户权限弹窗
 const openUserEditVisible = function () {
+  getRoles()
   userEditVisible.value = true
 }
 // 关闭编辑用户权限弹窗
@@ -282,29 +341,163 @@ const closeUserEditVisible = function () {
   userEditVisible.value = false
 }
 // 编辑用户权限初始化
-const permissionEditInit = function (row) {
+const permissionEditInit = async function (row) {
+  console.log('row', row)
   permissionEditObj.value = {}
   permissionEditObj.value.id = row.id
   permissionEditObj.value.account = row.account
-  permissionEditObj.value.name = row.name
+  permissionEditObj.value.adminName = row.name
+  permissionEditObj.value.remark = row.remark
   permissionEditObj.value.market = row.market
+  permissionEditObj.value.password = ''
+  // 将字符串形式的 market 转换为数组
+  if (typeof row.market === 'string' && row.market) {
+    permissionEditObj.value.market = row.market.split(',');
+  } else {
+    // 处理空值或非字符串情况
+    permissionEditObj.value.market = [];
+  }
   permissionEditObj.value.postiton = row.postiton
-  permissionEditObj.value.permission = row.permission
   permissionEditObj.value.roleId = row.roleId
+  const result = await request({
+    url: '/role/selectFather',
+    data: {
+      id: row.roleId
+    }
+  })
+  console.log('初始查上级权限', result)
+  permissionEditObj.value.parentId = result.data?.fatherId
+  permissionEditObj.value.parentName = result.data?.fatherName
+  console.log('get前', permissionEditObj.value.roleId);
+
+  getUserLists(row.roleId)
+
+  let machineIdsRef = await request({
+    url: '/permission/getPermission',
+    data: {
+      "pageNum": 1,//页码数
+      "pageSize": 1,//页条数
+      "permission": {
+        account: row.account,//OA号
+      }
+    }
+  })
+
+  if (machineIdsRef.data.list[0].machineIds == null || machineIdsRef.data.list[0].machineIds.length == 0) {
+    permissionEditObj.value.machineIds = ['']
+  } else {
+    permissionEditObj.value.machineIds = machineIdsRef.data.list[0].machineIds
+  }
+  permissionEditObj.value.machineId = permissionEditObj.value.machineIds[0]
+  //permissionEditObj.value.permission = row.permission
+
+  permissionEditObj.value.roleName = row.roleName
   console.log('编辑用户权限', permissionEditObj.value)
+  console.log('11111111111111', permissionEditObj.value.machineId)
   openUserEditVisible()
 }
+const collectIds = (tree) => {
+  let ids = [];
+  tree.forEach((node) => {
+    ids.push(node.id);
+    if (node.children && node.children.length > 0) {
+      ids = ids.concat(collectIds(node.children));
+    }
+  });
+  return ids;
+};
+// 定义上级角色提示变量
+const parentRoleTip = ref('');
+//给data数据加上disabled属性，控制是否禁用
+function processTreeData(data) {
+  return data.map(item => ({
+    ...item,
+    disabled: item.id != null || item.menuName.includes("敏感权限"), //控制权限显示的条件
+    children: item.children ? processTreeData(item.children) : []
+  }));
+}
+//根据上级角色控制权限列表,选择角色调整上级角色
+const getUserLists = async function (selectedRoleId) {
+  try {
+    console.log('permissionEditObj.value.roleId:', permissionEditObj.value.roleId)
+    console.log('selectedRoleId', selectedRoleId);
+    permissionEditObj.value.parentId = null;
+    permissionEditObj.value.parentName = '';
+    permissionEditObj.value.checkedKeys = [];
+    parentRoleTip.value = '';
+    const parentRes = await request({
+      url: '/role/selectFather',
+      data: { id: selectedRoleId }  // 用选中的角色ID请求
+    });
+    const parentId = parentRes.data.fatherId;
+    const parentName = parentRes.data.parentName;
+
+    permissionEditObj.value.parentId = parentId;
+    permissionEditObj.value.parentName = parentName;
+    if (parentId == null) {
+      // 无上级角色：显示提示
+      parentRoleTip.value = '该角色无上级角色';
+    }
+
+    let roleId = permissionEditObj.value.roleId
+    if (permissionEditObj.value.parentId === null || permissionEditObj.value.parentId === undefined) {
+      roleId = 2
+    }
+    const res = await API({
+      url: '/menu/tree',
+      data: { id: roleId }
+    })
+    data.value = processTreeData(res.data)
+    permissionEditObj.value.checkedKeys = collectIds(res.data) || [];
+    console.log('看看data', data.value)
+    console.log('看checkedKeys', permissionEditObj.value.checkedKeys)
+    console.log('parentID:', permissionEditObj.value.parentId, 'roleId:', roleId)
+    console.log('permissionEditObj.value.roleId:', permissionEditObj.value.roleId)
+  } catch (error) {
+    console.log('请求失败', error)
+  }
+}
 // 编辑用户权限提交
 const permissionEdit = async function () {
+  const { adminName: userName, roleName: oldRole, roleId: newRoleId } = permissionEditObj.value;
+  const newRole = permissionList.value.find(item => item.value === newRoleId)?.label || '未知角色';
   try {
+    await ElMessageBox.confirm(
+      `确认修改权限角色？\n您正在将【${userName}】的权限角色从【${oldRole}】修改为【${newRole}】\n变更后，该用户的可操作权限将同步更新为新角色配置，涉及数据访问、功能操作等权限变化，请谨慎确认。`,
+      '警告',
+      {
+        confirmButtonText: '确认',
+        cancelButtonText: '取消',
+        type: "warning",
+        lockScroll: false
+      }
+    );
+    closeUserEditVisible();
     const result = await request({
-      url: '/permission/updateAdminRole',
-      data: permissionEditObj.value
-    })
-    console.log('请求成功3', result)
-    ElMessage.success('编辑用户权限成功')
-    get()
-    closeUserEditVisible()
+      url: '/permission/updateAdmin',
+      data: {
+        account: permissionEditObj.value.account,//OA号
+        adminName: permissionEditObj.value.adminName,//姓名
+        market: permissionEditObj.value.market,//地区
+        postiton: permissionEditObj.value.postiton,//职位
+        roleId: permissionEditObj.value.roleId,//角色id
+        machineId: permissionEditObj.value.machineId,//机器码
+        machineIds: permissionEditObj.value.machineIds[1],//机器码
+        password: permissionEditObj.value.password,//
+        remark: permissionEditObj.value.remark//备注
+      }
+    });
+    console.log('编辑最后提交数据', permissionEditObj.value);
+
+    await ElMessageBox.alert(
+      `用户${userName}的权限角色已更改为【${newRole}】`,
+      '成功',
+      {
+        confirmButtonText: '确定',
+        type: 'success' // 设置为 success 类型
+      }
+    );
+    get();
   } catch (error) {
     console.log('编辑用户权限失败', error)
     ElMessage.error('编辑用户权限失败')
@@ -339,20 +532,48 @@ const delConfirm = async function () {
     ElMessage.error('删除权限失败')
   }
 }
+// 删除角色初始化
+const delRole = function (row) {
+  delRoleObj.value = {}
+  console.log(row, '删除初始化')
+  delRoleObj.value.id = row.id
+}
+// 删除角色
+const delRoleConfirm = async function () {
+  try {
+    const result = await request({
+      url: '/role/delete',
+      data: delRoleObj.value
+    })
+    console.log('看看删除角色对象', delRoleObj.value)
+    console.log('请求成功2', result)
+    ElMessage.success('删除权限成功')
+    delRoleObj.value = {}
+    getRoleList()
+  } catch (error) {
+    console.log('删除权限失败', error)
+    ElMessage.error('删除权限失败')
+  }
+}
 const handleAddRole = async function () {
   try {
     const res = await API({
+
+
       url: '/role/add',
       data: {
         "roleName": addRole.value.roleName,
         "menuIds": addRole.value.checkedKeys,
         "priority": addRole.value.grade,
-        "fatherId": addRole.value.parentName
+        "fatherId": addRole.value.parentId,
+        "market": addRole.value.market
       }
     })
     console.log('成功了，看看addRole', addRole.value)
+    closePermissionAddVisible()
   } catch (error) {
     console.log('请求失败', error)
+    console.log('失败，看看addRole', addRole.value);
   }
 }
 // 禁用启用用户权限
@@ -430,6 +651,7 @@ onMounted(async function () {
   await get()
   await getArea()
   await getStore()
+  await getRoleList()
 })
 const handlePageSizeChange = function (val) {
   getObj.value.pageSize = val
@@ -439,264 +661,274 @@ const handleCurrentChange = function (val) {
   getObj.value.pageNum = val
   get()
 }
+const handleRolePageSizeChange = (val) => {
+  getRoleObj.value.pageSize = val
+  getRoleList() // 调用角色管理的查询
+}
 
-const data = [
-  {
-    value: '2',
-    label: '工作台'
-  },
-  {
-    value: '3',
-    label: '财务审核',
-    children: [
-      {
-        value: '11',
-        label: '充值审核'
-      },
-      {
-        value: '13',
-        label: '退款审核'
-      }, {
-        value: '12',//14
-        label: '审核操作'
-      }
-    ]
-  },
-  {
-    value: '4',
-    label: '汇率管理'
-  }, {
-    value: '5',
-    label: '充值管理',
-    children: [
-      {
-        value: '17',
-        label: '新增充值'
-      },
-      {
-        value: '18',
-        label: '金币充值明细'
-      }
-    ]
-  }, {
-    value: '6',
-    label: '消耗管理',
-    children: [
-      {
-        value: '19',
-        label: '新增消耗'
-      },
-      {
-        value: '20',
-        label: '金币消耗明细'
-      }
-    ]
-  }, {
-    value: '7',
-    label: '退款管理',
-    children: [
-      {
-        value: '21',
-        label: '新增退款'
-      },
-      {
-        value: '22',
-        label: '金币退款明细'
-      }
-    ]
-  }, {
-    value: '8',
-    label: '客户账户明细',
-    children: [
-      {
-        value: '23',
-        label: '客户金币明细'
-      },
-      {
-        value: '24',
-        label: '客户金币余额'
-      }
-    ]
-  }, {
-    value: '9',
-    label: '权限管理'
-  }, {
-    value: '100',
-    label: '地区数据',
-    children: [
-      {
-        value: '101',
-        label: '总部'
-      },
-      {
-        value: '102',
-        label: '香港'
-      },
-      {
-        value: '103',
-        label: '新加坡'
-      },
-      {
-        value: '104',
-        label: '马来西亚'
-      },
-      {
-        value: '105',
-        label: '越南'
-      },
-      {
-        value: '106',
-        label: '韩国'
-      }
-    ]
-  }
-]
-const filteredData = ref([...data])
-
-watch(() => addRole.value.parentName, (newValue) => {
-  if (newValue) {
-    const selectedRole = lists.find(role => role.value === newValue)
-    if (selectedRole) {
-      const allowedPermissions = selectedRole.permissions
-      filteredData.value = filterPermissions(data, allowedPermissions)
-    } else {
-      filteredData.value = data
-    }
-  } else {
-    filteredData.value = data
-  }
-})
+// 角色管理分页 - 当前页变化
+const handleRoleCurrentChange = (val) => {
+  getRoleObj.value.pageNum = val
+  getRoleList() // 调用角色管理的查询
+}
 
-const filterPermissions = (permissions, allowedPermissions) => {
-  return permissions.filter(permission => {
-    if (allowedPermissions.includes(permission.value)) {
-      if (permission.children) {
-        permission.children = filterPermissions(permission.children, allowedPermissions)
-      }
-      return true
+const data = ref([])
+const getLists = async function () {
+  try {
+    let roleId = addRole.value.parentId
+    if (addRole.value.parentId === null || addRole.value.parentId === undefined) {
+      roleId = 2
     }
-    return false
-  })
+    const res = await API({
+      url: '/menu/tree',
+      data: { id: roleId }
+    })
+    data.value = res.data
+    console.log('看看data', data.value)
+    console.log('parentID:', addRole.value.parentId, 'roleId:', roleId)
+  } catch (error) {
+    console.log('请求失败', error)
+  }
 }
+
 const includeHq = computed(() => {
   const i = addAdmin.value.market.includes('总部')
   return (item) => i && item != '总部'
 })
 const handleCheckChange = (checkedNodes, { checkedKeys }) => {
   addRole.value.checkedKeys = checkedKeys;
+}
+
+//点击角色权限菜单树点击展示逻辑
+const menuTreeVisible = ref(false);
+const currentRoleMenuTree = ref([]);
+const currentRoleName = ref('');
+const Rolecheckedkeys = ref([])
+const showMenuTree = (treeData, roleName) => {
+  currentRoleMenuTree.value = processTreeData(treeData) || [];
+  console.log('currentRoleMenuTree.value', currentRoleMenuTree.value);
+  Rolecheckedkeys.value = collectIds(treeData)
+  console.log('Rolecheckedkeys', Rolecheckedkeys.value);
+
+  currentRoleName.value = roleName || '权限详情';
+  menuTreeVisible.value = true;
 };
+//用户密码重置
+const resetPassword = async function (row) {
+  try {
+
+    await ElMessageBox.confirm(
+      `确认重置该账号密码？`,
+      '提示',
+      {
+        confirmButtonText: '确认',
+        cancelButtonText: '取消',
+        type: "warning",
+        lockScroll: false
+      }
+    );
+    const res = await API({
+      url: '/admin/reset',
+      data: { account: row.account }
+    })
+    if(res.code==200){
+      ElMessage.success(res.data)
+    }
+  } catch (error) {
+    ElMessage.error('请求失败', error)
+  }
+}
 </script>
 
 <template>
-  <!-- 搜索表单 -->
-  <el-row>
-    <el-col>
-      <el-card style="margin-bottom: 20px">
-        <div class="head-card">
-          <div class="head-card-element">
-            <el-text class="mx-1" size="large">OA号：</el-text>
-            <el-input v-model="admin.account" style="width: 240px" placeholder="请输入OA号" clearable/>
-          </div>
-          <div class="head-card-element" style="margin-left: 50px">
-            <el-text class="mx-1" size="large">所属地区：</el-text>
-            <el-select v-model="admin.market" placeholder="请选择所属地区" style="width: 240px" clearable>
-              <el-option v-for="item in market" :key="item" :label="item" :value="item"/>
-            </el-select>
-          </div>
-          <div class="head-card-element" style="margin-left: 50px">
-            <el-text class="mx-1" size="large">职位名称：</el-text>
-            <el-select v-model="admin.postiton" placeholder="请选择职位名称" style="width: 240px" clearable>
-              <el-option v-for="item in postiton" :key="item" :label="item" :value="item"/>
-            </el-select>
+  <div style="margin-bottom:20px">
+    <el-button-group>
+      <el-button :type="checkTab === 'admin' ? 'primary' : 'default'" @click="checkTab = 'admin'">
+        用户管理
+      </el-button>
+      <el-button :type="checkTab === 'role' ? 'primary' : 'default'" @click="checkTab = 'role'">
+        角色管理
+      </el-button>
+    </el-button-group>
+  </div>
+  <div v-show="checkTab === 'admin'">
+    <!-- 用户搜索和展示 -->
+    <el-row>
+      <el-col>
+        <el-card style="margin-bottom: 20px">
+          <div class="head-card">
+            <div class="head-card-element">
+              <el-text class="mx-1" size="large">OA号：</el-text>
+              <el-input v-model="admin.account" style="width: 240px" placeholder="请输入OA号" clearable />
+            </div>
+            <div class="head-card-element" style="margin-left: 50px">
+              <el-text class="mx-1" size="large">所属地区：</el-text>
+              <el-select v-model="admin.market" placeholder="请选择所属地区" style="width: 240px" clearable>
+                <el-option v-for="item in market" :key="item" :label="item" :value="item" />
+              </el-select>
+            </div>
+            <div class="head-card-element" style="margin-left: 50px">
+              <el-text class="mx-1" size="large">职位名称：</el-text>
+              <el-select v-model="admin.postiton" placeholder="请选择职位名称" style="width: 240px" clearable>
+                <el-option v-for="item in postiton" :key="item" :label="item" :value="item" />
+              </el-select>
+            </div>
+
+            <div class="head-card-btn">
+              <el-button type="success" @click="reset()">重置</el-button>
+              <el-button type="primary" @click="search()">查询</el-button>
+            </div>
           </div>
+        </el-card>
+      </el-col>
+    </el-row>
 
-          <div class="head-card-btn">
-            <el-button type="success" @click="reset()">重置</el-button>
-            <el-button type="primary" @click="search()">查询</el-button>
+    <el-row>
+      <el-col>
+        <el-card>
+          <!-- 展示表单 -->
+          <div class="add-item">
+            <el-button style="color: #048efb; border: 1px solid #048efb" @click="userAddInit()">新增用户</el-button>
           </div>
-        </div>
-      </el-card>
-    </el-col>
-  </el-row>
-
-  <el-row>
-    <el-col>
-      <el-card>
-        <!-- 展示表单 -->
-        <div class="add-item">
-          <el-button style="color: #048efb; border: 1px solid #048efb" @click="userAddInit()">新增用户</el-button>
-          <el-button style="color: #048efb; border: 1px solid #048efb" @click="permissionAddInit()">新增角色</el-button>
-        </div>
 
-        <div>
-          <el-table :data="tableData" style="width: 100% ">
-            <el-table-column type="index" label="序号" width="100px" fixed="left">
-              <template #default="scope">
-                <span>{{
+          <div>
+            <el-table :data="tableData" style="width: 100%" show-overflow-tooltip>
+              <el-table-column type="index" label="序号" width="100px" fixed="left">
+                <template #default="scope">
+                  <span>{{
                     scope.$index + 1 + (getObj.pageNum - 1) * getObj.pageSize
                   }}</span>
-              </template>
-            </el-table-column>
-
-            <el-table-column prop="account" label="OA号"/>
-            <el-table-column prop="name" label="姓名"/>
-            <el-table-column prop="market" label="所属地区"/>
-            <el-table-column prop="postiton" label="职位"/>
-            <el-table-column prop="roleName" label="部门权限">
-            </el-table-column>
-            <el-table-column prop="remark" label="备注"/>
-            <el-table-column prop="operation" label="操作" width="300px" align="center">
-              <template #default="scope">
-                <el-button
-                    type="warning"
-                    text
-                    @click="resetPassword(scope.row)"
-                    :disabled="scope.row.adminStatus === 0"
-                >
-                  重置密码
-                </el-button>
-
-                <el-button type="warning" text @click="permissionEditInit(scope.row)"
-                           :disabled="scope.row.adminStatus === 0">
-                  修改权限
-                </el-button>
-                <el-popconfirm title="确定将此用户删除吗？" @confirm="delConfirm">
-                  <template #reference>
-                    <el-button type="danger" text @click="del(scope.row)" :disabled="scope.row.adminStatus === 0">
-                      删除
-                    </el-button>
-                  </template>
-                  <template #actions="{ confirm, cancel }">
-                    <el-button size="small" @click="cancel">取消</el-button>
-                    <el-button type="primary" size="small" @click="confirm">
-                      确定
-                    </el-button>
-                  </template>
-                </el-popconfirm>
-              </template>
-            </el-table-column>
-            <el-table-column prop="adminStatus" label="状态">
-              <template #default="scope">
-                <el-switch v-model="scope.row.adminStatus" :active-value="1" :inactive-value="0" size="large"
-                           @change="editStatus(scope.row)" style="
+                </template>
+              </el-table-column>
+
+              <el-table-column prop="account" label="OA号" />
+              <el-table-column prop="name" label="姓名" />
+              <el-table-column prop="market" label="所属地区" />
+              <el-table-column prop="postiton" label="职位" />
+              <el-table-column prop="roleName" label="部门权限">
+              </el-table-column>
+              <el-table-column prop="remark" label="备注" />
+              <el-table-column prop="operation" label="操作" width="280px">
+                <template #default="scope">
+                  <el-button type="warning" text @click="resetPassword(scope.row)">
+                    重置密码
+                  </el-button>
+                  <el-button type="primary" text @click="permissionEditInit(scope.row)"
+                    :disabled="scope.row.adminStatus === 0">
+                    修改权限
+                  </el-button>
+                  <el-popconfirm title="确定将此用户删除吗？" @confirm="delRoleConfirm">
+                    <template #reference>
+                      <el-button type="danger" text @click="del(scope.row)" :disabled="scope.row.adminStatus === 0">
+                        删除
+                      </el-button>
+                    </template>
+                    <template #actions="{ confirm, cancel }">
+                      <el-button size="small" @click="cancel">取消</el-button>
+                      <el-button type="primary" size="small" @click="confirm">
+                        确定
+                      </el-button>
+                    </template>
+                  </el-popconfirm>
+                </template>
+              </el-table-column>
+              <el-table-column prop="adminStatus" label="状态">
+                <template #default="scope">
+                  <el-switch v-model="scope.row.adminStatus" :active-value="1" :inactive-value="0" size="large"
+                    @change="editStatus(scope.row)" style="
                     --el-switch-on-color: #13ce66;
                     --el-switch-off-color: #ff4949;
-                  " active-text="启用" inactive-text="禁用" inline-prompt/>
-              </template>
-            </el-table-column>
-          </el-table>
-        </div>
+                  " active-text="启用" inactive-text="禁用" inline-prompt />
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
 
-        <!-- 分页 -->
-        <div class="pagination" style="margin-top: 20px">
-          <el-pagination background :page-size="getObj.pageSize" :page-sizes="[5, 10, 20, 50, 100]"
-                         layout="total, sizes, prev, pager, next, jumper" :total="total"
-                         @size-change="handlePageSizeChange"
-                         @current-change="handleCurrentChange"></el-pagination>
+          <!-- 分页 -->
+          <div class="pagination" style="margin-top: 20px">
+            <el-pagination background :page-size="getObj.pageSize" :page-sizes="[5, 10, 20, 50, 100]"
+              layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handlePageSizeChange"
+              @current-change="handleCurrentChange"></el-pagination>
+          </div>
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
+  <div v-show="checkTab === 'role'">
+    <!-- 角色搜索 -->
+    <el-card style="margin-bottom: 20px">
+      <div class="head-card">
+        <el-text class="mx-1" size="large">角色名称：</el-text>
+        <el-input v-model="role.name" style="width: 240px" placeholder="请输入角色名称" clearable />
+        <div class="head-card-btn">
+          <el-button type="success" @click="reset()">重置</el-button>
+          <el-button type="primary" @click="searchRole()">查询</el-button>
         </div>
-      </el-card>
-    </el-col>
-  </el-row>
+      </div>
+    </el-card>
+    <!-- 展示表单 -->
+    <el-card>
+
+      <div class="add-item">
+        <el-button style="color: #048efb; border: 1px solid #048efb" @click="permissionAddInit()">新增角色</el-button>
+      </div>
+      <div>
+        <el-table :data="roleData" style="width: 100%" show-overflow-tooltip>
+          <el-table-column type="index" label="序号" width="100px" fixed="left">
+            <template #default="scope">
+              <span>{{
+                scope.$index + 1 + (getRoleObj.pageNum - 1) * getRoleObj.pageSize
+              }}</span>
+            </template>
+          </el-table-column>
+
+          <el-table-column prop="roleName" label="角色名称" />
+          <el-table-column prop="fatherName" label="上级角色" />
+          <el-table-column prop="priority" label="优先级" />
+          <el-table-column label="权限范围" show-overflow-tooltip>
+            <template #default="scope">
+              <div class="permission-cell" @click="showMenuTree(scope.row.tree, scope.row.roleName)">
+                {{ formatPermissions(scope.row.tree) }}
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column prop="operation" label="操作" width="200px">
+            <template #default="scope">
+              <el-popconfirm title="确定将此角色删除吗？" @confirm="delRoleConfirm">
+                <template #reference>
+                  <el-button type="danger" text @click="delRole(scope.row)">
+                    删除
+                  </el-button>
+                </template>
+                <template #actions="{ confirm, cancel }">
+                  <el-button size="small" @click="cancel">取消</el-button>
+                  <el-button type="primary" size="small" @click="confirm">
+                    确定
+                  </el-button>
+                </template>
+              </el-popconfirm>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+
+      <!-- 分页 -->
+      <div class="pagination" style="margin-top: 20px">
+        <el-pagination background :page-size="getObj.pageSize" :page-sizes="[5, 10, 20, 50, 100]"
+          layout="total, sizes, prev, pager, next, jumper" :total="roleTotal" @size-change="handleRolePageSizeChange"
+          @current-change="handleRoleCurrentChange"></el-pagination>
+      </div>
+    </el-card>
+  </div>
+  <!-- 角色菜单树展示 -->
+  <el-dialog v-model="menuTreeVisible" :title='`权限详情：${currentRoleName}`' width="600px">
+    <el-tree :data="currentRoleMenuTree" node-key="id" :props="{ label: 'menuName', children: 'children' }"
+      show-checkbox check-strictly :expand-on-click-node="false"
+      :default-expanded-keys="currentRoleMenuTree.map(item => item.id)" :default-checked-keys="Rolecheckedkeys" />
+    <template #footer>
+      <el-button @click="menuTreeVisible = false" type="primary">关闭</el-button>
+    </template>
+  </el-dialog>
   <!-- 新增用户权限 -->
   <el-dialog v-model="userAddVisible" title="新增用户权限" width="800px" :close-on-click-modal="false">
     <template #footer>
@@ -727,16 +959,14 @@ const handleCheckChange = (checkedNodes, { checkedKeys }) => {
         <el-form-item prop="postiton" label="职位:" required>
           <el-input v-model="addAdmin.postiton" placeholder="请输入职称" style="width: 220px"/>
         </el-form-item>
-        <el-form-item prop="machineId" label="机器码:" required>
-          <div style="display: flex; align-items: center; flex-wrap: wrap;">
-            <el-input v-model="addAdmin.machineId" placeholder="请输入机器码"
-                      style="width: 220px; margin-right: 10px;"/>
-            <el-button type="primary" @click="addMachineIdInput">添加</el-button>
+        <el-form-item prop="machineIds" label="机器码:" required>
+          <div style="display: flex; align-items: center; flex-wrap: wrap; gap: 10px;">
             <!-- 动态添加的机器码输入框 -->
             <div v-for="(item, index) in addAdmin.machineIds" :key="index" style="margin-left: 10px;">
               <el-input v-model="addAdmin.machineIds[index]" placeholder="请输入机器码"
                         style="width: 180px; margin-right: 10px;"/>
             </div>
+            <el-button type="primary" @click="addMachineIdInput">添加</el-button>
           </div>
         </el-form-item>
         <el-form-item prop="remark" label="备注">
@@ -755,59 +985,52 @@ const handleCheckChange = (checkedNodes, { checkedKeys }) => {
   </el-dialog>
 
   <!-- 这是编辑用户权限弹窗 -->
-  <el-dialog v-model="permissionEditVisible" title="编辑用户权限" width="800px" :close-on-click-modal="false">
-    <el-descriptions class="margin-top" :column="2" border label-width="200px">
-      <el-descriptions-item>
-        <template #label>
-          <div class="permissionVisible">
-            <el-icon>
-              <UserFilled/>
-            </el-icon>
-            员工OA号
-          </div>
-        </template>
-        {{ permissionEditObj.account }}
-      </el-descriptions-item>
-      <el-descriptions-item>
-        <template #label>
-          <div class="permissionVisible">
-            <el-icon>
-              <User/>
-            </el-icon>
-            员工姓名
-          </div>
-        </template>
-        {{ permissionEditObj.name }}
-      </el-descriptions-item>
-      <el-descriptions-item>
-        <template #label>
-          <div class="permissionVisible">
-            <el-icon>
-              <location/>
-            </el-icon>
-            所属地区
+  <el-dialog v-model="userEditVisible" title="编辑用户权限" width="800px" :close-on-click-modal="false">
+    <el-form ref="Ref" :model="permissionEditObj" label-width="auto" style="max-width: 600px; align-items: center">
+      <el-form-item prop="account" label="用户账号:" clearable>
+        <el-input v-model="permissionEditObj.account" placeholder="请输入OA号" style="width: 220px" disabled />
+      </el-form-item>
+      <el-form-item prop="name" label="用户名称:">
+        <el-input v-model="permissionEditObj.adminName" placeholder="请输入用户名" style="width: 220px" disabled />
+      </el-form-item>
+      <el-form-item prop="market" label="所属地区:" clearable>
+        <el-select multiple v-model="permissionEditObj.market" placeholder="请选择所属地区" style="width: 440px" clearable>
+          <el-option v-for="item in market" :key="item" :label="item" :value="item" :disabled="includeHq(item)" />
+        </el-select>
+      </el-form-item>
+      <el-form-item prop="postiton" label="职位:">
+        <el-input v-model="permissionEditObj.postiton" placeholder="请输入职位" style="width: 220px" clearable />
+      </el-form-item>
+      <el-form-item prop="roleName" label="角色名称:">
+        <el-select v-model="permissionEditObj.roleId" placeholder="请选择角色" style="width: 220px" @change="getUserLists">
+          <el-option v-for="item in permissionList" :key="item.value" :label="item.label"
+            :value="item.value"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item prop="parentName" label="上级角色:">
+        <el-select v-model="permissionEditObj.parentId" placeholder="无上级角色" :disabled="!!parentRoleTip"
+          style="width: 220px">
+          <el-option v-if="parentRoleTip" :key="0" :label="parentRoleTip" :value="null" disabled />
+          <el-option v-else v-for="item in permissionList" :key="item.value" :label="item.label" disabled
+            :value="item.value"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item prop="permissionSelect" label="权限列表:">
+        <el-tree :data="data" :disabled="true" show-checkbox node-key="id"
+          :props="{ label: 'menuName', children: 'children' }" :default-checked-keys="permissionEditObj.checkedKeys">
+        </el-tree>
+      </el-form-item>
+      <el-form-item prop="machineIds" label="机器码:">
+        <div style="display: flex; align-items: center; flex-wrap: wrap; gap: 10px;">
+          <!-- 动态添加的机器码输入框 -->
+          <div v-for="(item, index) in permissionEditObj.machineIds" :key="index" style="margin-left: 10px;">
+            <el-input v-model="permissionEditObj.machineIds[index]" placeholder=""
+              style="width: 180px; margin-right: 10px;" />
           </div>
-        </template>
-        {{ permissionEditObj.market }}
-      </el-descriptions-item>
-      <el-descriptions-item>
-        <template #label>
-          <div class="permissionVisible">
-            <el-icon>
-              <OfficeBuilding/>
-            </el-icon>
-            部门
-          </div>
-        </template>
-        {{ permissionEditObj.postiton }}
-      </el-descriptions-item>
-    </el-descriptions>
-
-    <el-divider>
-      <el-icon>
-        <star-filled/>
-      </el-icon>
-    </el-divider>
+          <el-button type="primary" @click="UseraddMachineIdInput">添加</el-button>
+        </div>
+      </el-form-item>
+    </el-form>
     <div>
     </div>
     <template #footer>
@@ -837,9 +1060,39 @@ const handleCheckChange = (checkedNodes, { checkedKeys }) => {
       </el-col>
     </el-row>
     <template #footer>
-      <div style="align-content: center ; gap: 30px">
-        <el-button @click="cancelResetPassword">取消</el-button>
-        <el-button type="primary" @click="confirmResetPassword">确定</el-button>
+      <el-form ref="Ref" :model="addRole" label-width="auto" style="max-width: 600px; align-items: center">
+        <el-form-item prop="roleName" label="角色名称:" required>
+          <el-input v-model="addRole.roleName" placeholder="请输入用户名" style="width: 220px" />
+        </el-form-item>
+        <el-form-item prop="market" label="所属地区:" required>
+          <el-select v-model="addRole.market" placeholder="请选择所属地区" style="width: 240px" clearable>
+            <el-option v-for="item in market" :key="item" :label="item" :value="item" />
+          </el-select>
+        </el-form-item>
+        <el-form-item prop="parentName" label="上级角色:">
+          <el-select v-model="addRole.parentId" placeholder="请选择上级角色" style="width: 220px" @change="getLists" clearable>
+            <el-option v-for="item in permissionList" :key="item.value" :label="item.label"
+              :value="item.value"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item prop="checkedKeys" label="权限列表:" required>
+          <el-tree :data="data" show-checkbox node-key="id" :props="{ label: 'menuName', children: 'children' }"
+            :checked-keys="addRole.checkedKeys" @check="handleCheckChange">
+            <template #default="{ node, data }">
+              <span>{{ node.label }}</span>
+            </template>
+          </el-tree>
+        </el-form-item>
+        <el-form-item prop="grade" label="优先级:" required>
+          <el-input v-model="addRole.grade" placeholder="数字1~999" style="width: 220px" />
+        </el-form-item>
+      </el-form>
+
+      <div>
+        <el-button @click="closePermissionAddVisible()">取消</el-button>
+        <el-button type="primary" @click="handleAddRole">
+          提交
+        </el-button>
       </div>
     </template>
   </el-dialog>
@@ -881,4 +1134,10 @@ const handleCheckChange = (checkedNodes, { checkedKeys }) => {
   flex-direction: column;
   align-items: center;
 }
+
+.permission-cell {
+  cursor: pointer;
+  color: #409eff;
+  /* 蓝色文字，提示可点击 */
+}
 </style>
\ No newline at end of file