gold-vue/src/views/permissions/permission.vue

<script setup>
import { ref, onMounted, reactive, computed, watch } from 'vue'
import ElementPlus from 'element-plus'
import { ElMessage, ElMessageBox } from 'element-plus'
import axios from 'axios'
import moment from 'moment'
import {InfoFilled, UserFilled} from '@element-plus/icons-vue'
import _ from 'lodash'
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)
// 编辑用户权限弹窗
const userEditVisible = ref(false)
//选地区
const market = ref([])
// 选部门
const postiton = ref([])
// 新增用户对象
const userAddObj = ref({})
// 新增角色对象
const permissionAddObj = ref({})
// 新增角色弹窗
const permissionAddVisible = ref(false)
// 新增用户权限对象，机器码要实现存储多个，addMachineIdInput方法实现
const addAdmin = ref({
  account: '',
  name: '',
  market: [],
  permission: '',
  postiton: '',
  machineIds: [''], // 动态添加的机器码输入框
  machineId: '',
  remark: ''
})
// 新增角色对象
const addRole = ref({
  roleName: '',
  parentId: null,
  checkedKeys: [],
  grade: '',
  market: ''
})
// 新增角色的权限列表
const permissionSelect = ref()
//这是获取用户信息的接口
const adminData = ref({})
const getAdminData = async function () {
  try {
    const result = await API({ url: '/admin/userinfo', data: {} })
    adminData.value = result
    // console.log('请求成功', result)
    console.log('管理员用户信息', adminData.value)
  } catch (error) {
    console.log('请求失败', error)
  }
}

// 编辑用户权限对象
const permissionEditObj = ref({
  checkedKeys: [],
  machineIds: [''],
  machineId: '',
  password: '',
})
const addMachineIdInput = function () {
  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 delObj = ref({})
// 删除角色对象
const delRoleObj = ref({})
const get = async function (val) {
  try {
    if (typeof val === 'number') {
      getObj.value.pageNum = val
    }
    console.log('搜索参数', getObj.value, admin.value)
    const result = await request({
      url: '/permission/getPermission',
      data: {
        ...getObj.value,
        permission: {
          ...admin.value
        }
      }
    })
    tableData.value = result.data.list
    console.log('tableData', tableData.value)
    total.value = result.data.total
  } catch (error) {
    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, '');
  }
}
const search = function () {
  trimJwCode();
  getObj.value.pageNum = 1
  get()
}
const searchRole = function () {
  trimJwCode();
  getObj.value.pageNum = 1
  getRoleList()
}
// 重置
const reset = function () {
  admin.value = {}
}

const getArea = async function () {
  try {
    const result = await request({
      url: '/permission/getmarket',
      data: {}
    })
    market.value = result.data
  } catch (error) {
    console.log('请求失败', error)
  }
}
// 获取部门
const getStore = async function () {
  try {
    const result = await request({
      url: '/permission/getposition',
      data: {}
    })
    postiton.value = result.data
  } catch (error) {
    console.log('请求失败', error)
  }
}

// 打开新增用户权限弹窗
const openUserAddVisible = function () {
  getRoles()
  userAddVisible.value = true
  addAdmin.value = {
    account: '',
    name: '',
    market: '',
    permission: '',
    postiton: '',
    machineId: '',
    machineIds: [''],
    remark: ''
  };

}
// 新增角色弹窗
const openPermissionAddVisible = function () {
  permissionAddVisible.value = true
  getRoles()
  getLists()
}
// 关闭新增用户权限弹窗，并刷新表单
const closeUserAddVisible = function () {
  addAdmin.value = {
    account: '',
    name: '',
    market: '',
    permission: '',
    postiton: '',
    machineId: '',
    machineIds: [''],
    remark: ''
  };
  userAddVisible.value = false;
  // 清除表单验证状态
  Ref.value.resetFields();
}
const closePermissionAddVisible = function () {
  addRole.value = {
    roleName: '',
    parentId: null,
    checkedKeys: [],
    grade: '',
    market: ''
  }
  permissionAddVisible.value = false
  Ref.value.resetFields();
  getRoleList()
}
// 新增用户权限初始化
const userAddInit = function () {
  userAddObj.value = {}
  openUserAddVisible()
}
// 新增角色初始化
const permissionAddInit = function () {
  permissionAddObj.value = {}
  openPermissionAddVisible()
}
//新增用户
const permissionAdd = async function () {
  Ref.value.validate(async (valid) => {
    console.log('addRole', addRole.value)
    console.log('valid', valid)
    if (valid) {
      try {
        addAdmin.value.adminFlag = 1
        addAdmin.value.status1 = 1
        if (addAdmin.value.postiton == '管理员') {
          addAdmin.value.postiton == 1
        }
        const params = {
          "account": addAdmin.value.account,//OA号
          "adminName": addAdmin.value.name,//姓名
          "market": addAdmin.value.market,//地区
          "roleId": addAdmin.value.permission,//权限ID
          "postiton": addAdmin.value.postiton,//职位
          "machineId": addAdmin.value.machineIds[0],//机器码
          "remark": addAdmin.value.remark//备注
        }
        const result = await request({
          url: '/permission/addPermission',
          data: params
        })
        console.log(addAdmin.value)

        if (result.code == 200) {
          ElMessage.success('添加成功')
        } else {
          ElMessage.error(result.msg)
        }

        addAdmin.value = {}
        get()

        closeUserAddVisible()
      } catch (error) {
        console.log('新增用户权限失败', error)

        ElMessage.error('新增用户权限失败')
        closeUserAddVisible()
      }
    } else {
      ElMessage({
        type: 'error',
        message: '请检查输入内容'
      })
    }
  })
}
// 表单验证ref
const Ref = ref(null)
// 使用 _.throttle 并设置 trailing 为 false 实现严格节流，只执行一次
const throttledPermissionAdd = _.throttle(permissionAdd, 5000, {
  trailing: false
})
// 权限类别
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
}
// 关闭编辑用户权限弹窗
const closeUserEditVisible = function () {
  userEditVisible.value = false
}
// 编辑用户权限初始化
const permissionEditInit = async function (row) {
  console.log('row', row)
  permissionEditObj.value = {}
  permissionEditObj.value.id = row.id
  permissionEditObj.value.account = row.account
  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.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/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.machineIds[0],//机器码
        machineIds: permissionEditObj.value.machineIds[1],//机器码
        password: permissionEditObj.value.password,//
        remark: permissionEditObj.value.remark//备注
      }
    });
    console.log('编辑最后提交数据', permissionEditObj.value);
    if (result.code == 200) {
      await ElMessageBox.alert(
        `用户${userName}的权限角色已更改为【${newRole}】`,
        '成功',
        {
          confirmButtonText: '确定',
          type: 'success' // 设置为 success 类型
        }
      );
      get();
    } else {
      ElMessage.error(result.msg)
    }

  } catch (error) {
    console.log('编辑用户权限失败', error)
    ElMessage.error('编辑用户权限失败')
    closeUserEditVisible()
  }
}
const throttledPermissionEdit = _.throttle(permissionEdit, 5000, {
  trailing: false
})
// 删除初始化
const del = function (row) {
  delObj.value = {}
  console.log(row, '删除初始化')
  delObj.value.account = row.account
  delObj.value.id = row.id
}
// 删除权限
const delConfirm = async function () {
  try {
    const result = await request({
      url: '/permission/deleteAdmin',
      data: delObj.value
    })
    console.log('看看删除对象', delObj.value)
    console.log('请求成功1', result)

    ElMessage.success('删除权限成功')
    delObj.value = {}
    get()
  } catch (error) {
    console.log('删除权限失败', error)
    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 {
    await new Promise((resolve, reject) => {
      Ref.value.validate((valid) => {
        if (valid) {
          resolve(); // 验证通过，继续执行后续代码
        } else {
          reject(new Error('请检查并完善表单信息')); // 验证失败，抛出错误
        }
      });
    });
    const res = await API({


      url: '/role/add',
      data: {
        "roleName": addRole.value.roleName,
        "menuIds": addRole.value.checkedKeys,
        "priority": addRole.value.grade,
        "fatherId": addRole.value.parentId,
        "market": addRole.value.market
      }
    })
    console.log('成功了，看看addRole', addRole.value)
    closePermissionAddVisible()
  } catch (error) {
    console.log('请求失败', error)
    console.log('失败，看看addRole', addRole.value);
  }
}
// 禁用启用用户权限
const editStatus = async function (row) {
  try {
    console.log(row)

    permissionEditObj.value = {}
    permissionEditObj.value.id = row.id
    permissionEditObj.value.account = row.account
    permissionEditObj.value.adminStatus = row.adminStatus
    console.log('修改用户权限状态', permissionEditObj.value)

    const result = await request({
      url: '/permission/upadatePermission',
      data: permissionEditObj.value
    })
    console.log('请求成功2', result)
    ElMessage.success(
      permissionEditObj.value.adminStatus == 1 ? '启用成功' : '禁用成功'
    )
    permissionEditObj.value = {}
    get()
  } catch (error) {
    console.log('修改用户权限失败', error)
  }
}


const handlePageSizeChange = function (val) {
  getObj.value.pageSize = val
  get()
}
const handleCurrentChange = function (val) {
  getObj.value.pageNum = val
  get()
}
const handleRolePageSizeChange = (val) => {
  getRoleObj.value.pageSize = val
  getRoleList() // 调用角色管理的查询
}

// 角色管理分页 - 当前页变化
const handleRoleCurrentChange = (val) => {
  getRoleObj.value.pageNum = val
  getRoleList() // 调用角色管理的查询
}

const data = ref([])
const getLists = async function () {
  try {
    let roleId = addRole.value.parentId
    if (addRole.value.parentId === null || addRole.value.parentId === undefined) {
      roleId = 2
    }
    const res = await API({
      url: '/menu/tree',
      data: { id: roleId }
    })
    data.value = res.data
    if (addRole.value.parentId != 2) {
      data.value = data.value.filter(item => item.id !== 9);
    }
    console.log('看看data', data.value)
    console.log('parentID:', addRole.value.parentId, 'roleId:', roleId)
  } catch (error) {
    console.log('请求失败', error)
  }
}
const handleMarketChange = (values) => {
  console.log('values的类型:', typeof values);
  console.log('values的值:', values);
  //判断是否选择了总部
  const hasHeadquarters = values.includes('总部');

  if (hasHeadquarters) {
    // 如果选择了总部，只保留总部
    addAdmin.value.market = ['总部'];
  }
  console.log('看看现在的地区',addAdmin.value.market);
  
};
const includeHq = computed(() => {
  const i = addAdmin.value.market.includes('总部')
  return (item) => i && item != '总部'
})
const EditincludeHq = computed(() => {
  const i = permissionEditObj.value.market.includes('总部')
  return (item) => i && item != '总部'
})
const EdithandleMarketChange = (values) => {
  //判断是否选择了总部
  const hasHeadquarters = values.includes('总部');
  if (hasHeadquarters) {
    // 如果选择了总部，只保留总部
    permissionEditObj.value.market = ['总部'];
  }
  console.log('看看现在的地区',permissionEditObj.value.market);
  
};
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 resetConfirmVisible = ref(false)
// 当前选中的行数据
const currentRow = ref(null)
// 重置密码
const resetPassword = function (row) {
  // 显示确认弹窗
  currentRow.value = row
  resetConfirmVisible.value = true
}

// 确认重置密码
const confirmResetPassword = async function () {
  // 处理markets数据
  if (typeof adminData.value.markets === 'string' && adminData.value.markets) {
    adminData.value.markets = adminData.value.markets.split(',');
  } else {
    adminData.value.markets = [];
  }
  console.log("地区",adminData.value.markets[0])
  // 权限检查
  await getAdminData()
  if (adminData.value.markets.includes(currentRow.value.market) || adminData.value.markets === '总部') {

    console.log('符合条件，可以操作',adminData.value.markets.includes(currentRow.value.market) || adminData.value.markets === '总部');
    const params = {
      account: currentRow.value.account,
    }
    console.log(params);

    // 发送请求
    try {
      const result = await request({
        url: '/admin/reset',
        method: 'post',
        data: params // 直接传递params对象
      });

      if (result.code === 200) { // 使用严格相等运算符
        ElMessage.success('重置密码成功');
        resetConfirmVisible.value = false; // 关闭弹窗
      } else {
        ElMessage.error(result.message || '重置密码失败');
      }
    } catch (error) {
      ElMessage.error('重置密码失败');
      console.error('请求错误:', error);
    }
  } else {
    // console.log("为什么不能重置",adminData.value.markets)
    ElMessage.error('您没有修改' + currentRow.value.market + '地区的用户密码的权限');
    resetConfirmVisible.value = false; // 关闭弹窗
  }
}

// 取消重置密码
const cancelResetPassword = function () {
  resetConfirmVisible.value = false
}

/*//用户密码重置
const resetPassword = function (row) {
  console.log('adminData.value.markets', adminData.value.markets);
  
  // 处理markets数据
  if (typeof adminData.value.markets === 'string' && adminData.value.markets) {
    adminData.value.markets = adminData.value.markets.split(',');
  } else {
    adminData.value.markets = [];
  }
  
  if (adminData.value.markets.includes(row.market)||adminData.value.markets=='总部') {
    console.log('符合条件，可以操作');
     // 用then处理确认，catch处理取消和错误
  ElMessageBox.confirm(
    `确认重置该账号密码？`,
    '提示',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: "warning",
      lockScroll: false
    }
  ).then(async () => {
    // 仅当用户确认时执行
    try {
      const res = await API({
        url: '/admin/reset',
        data: { account: row.account }
      });
      if (res.code === 200) {
        ElMessage.success(res.data);
      }
    } catch (error) {
      ElMessage.error('请求失败: ' + (error.message || error));
    }
  }).catch(() => {
    // 取消操作，可选择性添加日志
    console.log('用户取消了重置密码操作');
  });
  }else{
    ElMessage.error('您没有修改'+row.market+'地区的用户密码的权限')
  }
  
 
}*/

const Rolerules = reactive({
  roleName: [
    { required: true, message: '请输入角色名称', trigger: 'blur' },
    { min: 2, max: 20, message: '角色名称长度应在2-20个字符之间', trigger: 'blur' }
  ],
  market: [
    { required: true, message: '请选择所属地区', trigger: 'change' }
  ],
  grade: [
    { required: true, message: '请输入优先级', trigger: 'blur' },
    { pattern: /^[1-9]\d{0,2}$/, message: '优先级应为1-999的数字', trigger: 'blur' }
  ]
});
// 挂载
onMounted(async function () {
  await getAdminData()
  await get()
  await getArea()
  await getStore()
  await getRoleList()

})


</script>

<template>
  <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>

    <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-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="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 || scope.row.account === adminData.account">
                    修改权限
                  </el-button>
                  <el-popconfirm title="确定将此用户删除吗？" @confirm="delConfirm">
                    <template #reference>
                      <el-button type="danger" text @click="del(scope.row)"
                        :disabled="scope.row.adminStatus === 0 || scope.row.account === adminData.account">
                        删除
                      </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"
                    :disabled="scope.row.account === adminData.account" @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>

          <!-- 分页 -->
          <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>
      </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)"
                    :disabled="scope.row.id === 1 || scope.row.id === 2">
                    删除
                  </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>
      <!-- 居中显示 -->

      <el-form ref="Ref" :model="addAdmin" label-width="auto" style="max-width: 600px; align-items: center">
        <el-form-item prop="account" label="OA号:" required clearable>
          <el-input v-model="addAdmin.account" placeholder="请输入OA号" style="width: 220px" />
        </el-form-item>

        <el-form-item prop="name" label="用户名:" required clearable>
          <el-input v-model="addAdmin.name" placeholder="请输入用户名" style="width: 220px" />
        </el-form-item>

        <el-form-item prop="market" label="所属地区:" required clearable>
          <el-select multiple v-model="addAdmin.market" placeholder="请选择所属地区" style="width: 440px" clearable
            @change="handleMarketChange">
            <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="permission" label="角色名称:" required>
          <el-select v-model="addAdmin.permission" placeholder="请选择角色名称" style="width: 220px" 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="postiton" label="职位:" required>
          <el-input v-model="addAdmin.postiton" placeholder="请输入职位" style="width: 220px" clearable />
        </el-form-item>
        <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="备注">
          <el-input v-model="addAdmin.remark" style="width: 300px" :rows="2" maxlength="100" show-word-limit
            type="textarea" />
        </el-form-item>
      </el-form>

      <div>
        <el-button @click="closeUserAddVisible()">取消</el-button>
        <el-button type="primary" @click="throttledPermissionAdd()">
          提交
        </el-button>
      </div>
    </template>
  </el-dialog>

  <!-- 这是编辑用户权限弹窗 -->
  <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 @change="EdithandleMarketChange">
          <el-option v-for="item in market" :key="item" :label="item" :value="item" :disabled="EditincludeHq(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>
          <el-button type="primary" @click="UseraddMachineIdInput">添加</el-button>
        </div>
      </el-form-item>
    </el-form>
    <div>
    </div>
    <template #footer>
      <div>
        <el-button @click="closeUserEditVisible()">取消</el-button>
        <el-button type="primary" @click="throttledPermissionEdit">
          提交
        </el-button>
      </div>
    </template>
  </el-dialog>

  <!-- 新增角色 -->
  <el-dialog v-model="permissionAddVisible" title="新增角色" width="800px" :close-on-click-modal="false">
    <template #footer>
      <el-form ref="Ref" :rules="Rolerules" :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 v-if="data.length > 0" :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>
          <div v-else style="display: flex; align-items: center; gap: 8px;">
            <span style="color: #999;">暂无数据</span>
          </div>
        </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>
  <!-- 重置密码确认弹窗 -->
  <el-dialog
      v-model="resetConfirmVisible" width="500px" :close-on-click-modal="false" :before-close="cancelResetPassword"
  >
    <el-row>
      <el-col :span="4" style="margin-top: 20px">
        <el-icon class="dialog-icon" color="#10AEFF" size="50">
          <InfoFilled/>
        </el-icon>
      </el-col>
      <el-col :span="20">
        <h3>提示</h3>
        <p class="dialog-title">确认重置该账号密码？</p>
        <p class="dialog-desc">重置后密码为: 123456，请通知用户及时修改</p>
      </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>
      </div>
    </template>
  </el-dialog>

</template>

<style scoped>
.pagination {
  display: flex;
}

.status {
  display: flex;
}

.head-card {
  display: flex;
}

.head-card-element {
  margin-right: 20px;
}

.head-card-btn {
  margin-left: auto;
}

/* 新增样式让弹窗内容居中 */
.el-dialog__body {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.el-dialog__footer {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.permission-cell {
  cursor: pointer;
  color: #409eff;
  /* 蓝色文字，提示可点击 */
}
</style>