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

<script setup>
import {nextTick, onMounted, reactive, ref} from 'vue'
import {ElMessage} from 'element-plus'
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)//角色分页
// 搜索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 market = ref([])
// 选部门
const postiton = ref([])

// 新增角色弹窗
const permissionAddVisible = ref(false)
// 新增角色对象
const addRole = ref({
  roleName: '',
  parentId: null,
  checkedKeys: [],
  grade: '',
  market: ''
})
const addRoleMarket = ref([])

//这是获取用户信息的接口
const adminData = ref({})
const getAdminData = async function () {
  try {
    const result = await API({url: '/admin/userinfo', data: {}})
    adminData.value = result
    console.log('管理员用户信息', adminData.value)
  } catch (error) {
    console.log('请求失败', error)
  }
}
const viewRole = ref([])
const getRolePermission = async function () {
  const result = await request({
    url: '/menu/tree',
    data: {
      "id": adminData.value.roleId
    }
  })
  viewRole.value = collectIds(result.data)
  console.log('result111', viewRole.value);
}

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 searchRole = function () {
  trimJwCode();
  getObj.value.pageNum = 1
  getRoleList()
}
// 重置
const reset = function () {
  admin.value = {}
  role.value.name = ''

  get()
  getRoleList()
}
const RoleArea = ref([])
const getRoleArea = async function () {
  try {
    const result = await request({
      url: '/general/allRoleMarket',
      data: {}
    })
    RoleArea.value = result.data
  } catch (error) {
    console.log('请求失败', error)
  }
}
const getArea = async function () {
  try {
    const result = await request({
      url: '/general/adminMarkets',
      data: {account: adminData.value.account}
    })
    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 openPermissionAddVisible = function () {
  permissionAddVisible.value = true
  getRoles()
  getLists()
}

const closePermissionAddVisible = function () {
  addRole.value = {
    roleName: '',
    parentId: null,
    checkedKeys: [],
    grade: '',
    market: ''
  }
  permissionAddVisible.value = false
  Ref.value.resetFields();
  getRoleList()
}

// 新增角色初始化
const permissionAddInit = function () {
  openPermissionAddVisible()
}

// 表单验证ref
const Ref = ref(null)

// 权限类别
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 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;
};

//给data数据加上disabled属性，控制是否禁用
function processTreeData(data) {
  return data.map(item => ({
    ...item,
    disabled: item.id != null || item.menuName.includes("敏感权限"), //控制权限显示的条件
    children: item.children ? processTreeData(item.children) : []
  }));
}

const handleAddRole = async function () {
  try {
    await new Promise((resolve, reject) => {
      Ref.value.validate((valid) => {
        if (valid) {
          resolve(); // 验证通过，继续执行后续代码
        } else {
          reject(new Error('请检查并完善表单信息')); // 验证失败，抛出错误
        }
      });
    });
    addRole.value.roleName = addRole.value.roleName.replace(/\s+/g, '');
    console.log('去除角色名空格：', addRole.value.roleName);

    // 确保提交时包含所有选中的权限ID（包括父节点）
    const finalCheckedKeys = addRole.value.checkedKeys || [];

    const res = await API({
      url: '/role/add',
      data: {
        "roleName": addRole.value.roleName,
        "menuIds": finalCheckedKeys,
        "priority": addRole.value.grade,
        "fatherId": addRole.value.parentId,
        "market": addRole.value.market
      }
    })
    if (res.code === 200) {
      ElMessage.success('角色' + addRole.value.roleName + '添加成功')
      console.log('成功了，看看addRole', addRole.value)
      console.log('提交的权限ID列表:', finalCheckedKeys);
      closePermissionAddVisible()
    } else {
      ElMessage.error(res.msg)
    }
  } catch (error) {
    console.log('请求失败', error)
    console.log('失败，看看addRole', addRole.value);
  }
}

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

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

const data = ref([])
const getLists = async function () {
  try {
    console.log('addRole.value.roleId', addRole.value.roleId);

    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
    let originalData = res.data.filter(item => item.id !== 9); // 排除权限管理
    // 排除金豆菜单
    data.value = filterGoldenBeanMenus(originalData);

    // data.value = data.value.filter(item => item.id !== 9);
    console.log('看看data', data.value)
    console.log('parentID:', addRole.value.parentId, 'roleId:', roleId)


/*    // 根据地区过滤金豆菜单
    if (addRole.value.market !== '总部') {
      // 非总部地区：过滤掉金豆相关菜单
      originalData = filterGoldenBeanMenus(originalData);
    }
    data.value = originalData; // 更新菜单树数据*/

    if (addRole.value.parentId && addRole.value.parentId !== 2) {
      const result = await API({
        url: '/general/roleMarket',
        data: {id: addRole.value.parentId}
      })
      if (result.code === 200) {
        if (typeof result.data === 'string' && result.data) {
          addRoleMarket.value = result.data.split(',');
          addRole.value.market = ''
        } else if (Array.isArray(result.data)) {
          addRoleMarket.value = result.data
          addRole.value.market = ''
        } else {
          addRoleMarket.value = [];
          addRole.value.market = ''
        }
      } else {
        ElMessage.error('该上级角色无所属地区')
        console.log('该上级角色无所属地区');

      }
      console.log('addRoleMarket.value', addRoleMarket.value);
    } else {
      addRoleMarket.value = RoleArea.value
      console.log('elseRoleArea', RoleArea);

    }

  } catch (error) {
    console.log('请求失败', error)
  }
}

//金豆过滤
const goldenBeanMenuIds = new Set([
  43, 55, 54,       // 财务审核 -> 金豆审核
  41, 47, 46, 48,   // 充值管理 -> 金豆充值
  42, 50, 49, 52, 51, // 消耗管理 -> 金豆消耗
  45, 53            // 客户账户明细 -> 金豆客户账户明细
]);
const filterGoldenBeanMenus = (tree) => {
  return tree
      .filter(item => {
        // 排除金豆相关的顶层菜单
        if (goldenBeanMenuIds.has(item.id)) {
          return false;
        }
        // 递归处理子菜单
        if (item.children && item.children.length > 0) {
          item.children = filterGoldenBeanMenus(item.children);
        }
        return true;
      });
};

const handleMarketChange = () => {
  getLists(); // 重新获取并过滤菜单树
};

const treeRef = ref(null)
// 处理编辑角色权限时的勾选事件
const handleEditRolePermissionCheck = (checkedNodes, checkedInfo) => {
  const {checkedKeys, checkedNodes: allCheckedNodes} = checkedInfo;

  // 判断是否有选中的节点
  if (allCheckedNodes.length === 0) {
    permissionEditRoleObj.value.checkedKeys = [];
    return;
  }

  // 由于设置了 check-strictly="false"，Element Plus 会自动处理父子节点联动
  // 我们只需要使用 checkedKeys，它已经包含了所有必要的节点ID
  permissionEditRoleObj.value.checkedKeys = checkedKeys;

  console.log('编辑角色选中的权限ID:', checkedKeys);
  console.log('选中的节点数量:', allCheckedNodes.length);
};
const handleCheckChange = async (checkedNodes, checkedInfo) => {
  const {checkedKeys, checkedNodes: allCheckedNodes} = checkedInfo;

  // 判断是否有选中的节点
  if (allCheckedNodes.length === 0) {
    addRole.value.checkedKeys = [];
    return;
  }

  // 创建一个Set存储所有需要选中的ID（包括父级）
  const allKeys = new Set(checkedKeys);

  // 遍历所有选中的节点，为每个节点添加其父级
  allCheckedNodes.forEach(node => {
    // 为每个选中的节点单独查找父级
    selectParentNodes(data.value, node.id, allKeys);
  });

  // 将Set转换为数组并更新
  addRole.value.checkedKeys = Array.from(allKeys);
  console.log('新增角色包含所有父级的选中项:', addRole.value.checkedKeys);
};

const selectParentNodes = (treeData, nodeId, checkedKeys) => {
  if (!Array.isArray(treeData)) return false;

  for (const item of treeData) {
    // 先检查子节点
    if (item.children && item.children.length > 0) {
      const foundInChildren = selectParentNodes(item.children, nodeId, checkedKeys);
      if (foundInChildren) {
        // 找到子节点后添加当前节点（父节点）
        checkedKeys.add(item.id);
        return true;
      }
    }

    // 检查当前节点是否为目标节点
    if (item.id === nodeId) {
      return true;
    }
  }

  return false;
};
//点击角色权限菜单树点击展示逻辑
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 permissionEditRoleObj = ref({
  id: null,
  roleName: '',
  market: '',
  parentId: null,
  parentName: '',
  checkedKeys: [],
  grade: '',
});

// 编辑角色弹窗
const permissionEditRoleVisible = ref(false);

const collectIds2 = (tree) => {
  let ids = [];
  tree.forEach((node) => {
    // 如果当前节点没有 children 或 children 为空，说明是叶子节点
    if (!node.children || node.children.length === 0) {
      ids.push(node.id);
    } else {
      // 如果有 children，递归收集子节点的叶子节点
      ids = ids.concat(collectIds2(node.children));
    }
  });
  return ids;
};


// 编辑角色初始化
const permissionEditRoleInit = async function (row) {
  console.log('row', row);
  console.log('row.tree', row.tree);
  permissionEditRoleObj.value = {};
  permissionEditRoleObj.value.id = row.id;
  permissionEditRoleObj.value.roleName = row.roleName;
  permissionEditRoleObj.value.market = row.market;
  permissionEditRoleObj.value.parentId = row.fatherId;
  permissionEditRoleObj.value.parentName = row.fatherName;
  permissionEditRoleObj.value.grade = row.priority;

  try {
    let roleId = permissionEditRoleObj.value.parentId;
    // 如果没有上级角色，设置为管理员的id
    if (permissionEditRoleObj.value.parentId === null || permissionEditRoleObj.value.parentId === undefined) {
      roleId = 2;
    }
    // 调用 /tree 接口，使用上级角色 ID 获取权限列表
    const res = await API({
      url: '/menu/tree',
      data: {id: roleId}
    });
    data.value = res.data;
    data.value = data.value.filter(item => item.id !== 9);
    data.value = filterGoldenBeanMenus(data.value);

    // 收集当前行权限树的叶子节点id（只收集实际选中的叶子节点）
    if (row.tree && row.tree.length > 0) {
      const leafIds = collectIds2(row.tree);
      permissionEditRoleObj.value.checkedKeys = leafIds;
      console.log('编辑角色初始化时的权限列表', permissionEditRoleObj.value.checkedKeys);
    } else {
      permissionEditRoleObj.value.checkedKeys = [];
    }
  } catch (error) {
    console.log('根据上级角色获取权限列表失败', error);
    data.value = [];
    permissionEditRoleObj.value.checkedKeys = [];
  }
  console.log('编辑角色', permissionEditRoleObj.value);
  permissionEditRoleVisible.value = true;

  // 等待DOM更新后手动设置树的选中状态
  await nextTick();
  if (treeRef.value && permissionEditRoleObj.value.checkedKeys.length > 0) {
    treeRef.value.setCheckedKeys(permissionEditRoleObj.value.checkedKeys);
    console.log('手动设置树的选中状态:', permissionEditRoleObj.value.checkedKeys);
  }
};

// 编辑角色提交
const permissionEditRole = async function () {
  try {
    await new Promise((resolve, reject) => {
      Ref.value.validate((valid) => {
        if (valid) {
          resolve();
        } else {
          reject(new Error('请检查并完善表单信息'));
        }
      });
    });

    // 确保提交时包含所有选中的权限ID（包括父节点）
    let finalCheckedKeys = permissionEditRoleObj.value.checkedKeys || [];

    // 为所有选中的节点添加其父节点ID
    const allKeys = new Set(finalCheckedKeys);
    finalCheckedKeys.forEach(nodeId => {
      selectParentNodesForSubmit(data.value, nodeId, allKeys);
    });

    finalCheckedKeys = Array.from(allKeys);

    const res = await API({
      url: '/menu/update',
      data: {
        "id": permissionEditRoleObj.value.id,
        "roleName": permissionEditRoleObj.value.roleName,
        "menuIds": finalCheckedKeys,
        "priority": permissionEditRoleObj.value.grade,
        "fatherId": permissionEditRoleObj.value.parentId,
        "market": permissionEditRoleObj.value.market
      }
    });
    if (res.code === 200) {
      console.log('编辑角色成功', permissionEditRoleObj.value);
      console.log('提交的权限ID列表:', finalCheckedKeys);
      permissionEditRoleVisible.value = false;
      getRoleList();
      ElMessage.success('编辑角色成功');
    } else if (res.code === 0) {
      console.log('角色名重复', permissionEditRoleObj.value);
      ElMessage.error('角色名重复');
    } else {
      console.log('编辑角色失败', res);
      ElMessage.error('编辑角色失败');
    }
  } catch (error) {
    console.log('编辑角色失败', error);
    console.log('失败，看看permissionEditRoleObj', permissionEditRoleObj.value);
  }
};

// 为提交时查找父节点的辅助函数
const selectParentNodesForSubmit = (treeData, nodeId, checkedKeys) => {
  if (!Array.isArray(treeData)) return false;

  for (const item of treeData) {
    // 先检查子节点
    if (item.children && item.children.length > 0) {
      const foundInChildren = selectParentNodesForSubmit(item.children, nodeId, checkedKeys);
      if (foundInChildren) {
        // 找到子节点后添加当前节点（父节点）
        checkedKeys.add(item.id);
        return true;
      }
    }

    // 检查当前节点是否为目标节点
    if (item.id === nodeId) {
      return true;
    }
  }

  return false;
};

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'}
  ],
  checkedKeys: [
    {
      required: true,
      message: '请选择权限列表',
      trigger: 'change', // 选框变化或提交时触发，可根据实际调整
      validator: (rule, value, callback) => {
        if (value && value.length > 0) {
          callback(); // 有选中项，校验通过
        } else {
          callback(new Error('请选择权限列表')); // 未选中，抛出错误提示
        }
      }
    }
  ]
});

const throttledHandleAddRole = _.throttle(handleAddRole, 5000, {
  trailing: false
})

// 挂载
onMounted(async function () {
  await getAdminData()
  await get()
  await getArea()
  await getStore()
  await getRoleList()
  await getRolePermission()
  await getRoleArea()
})

</script>
<template>
  <div>
    <!-- 角色搜索 -->
    <el-card style="margin-bottom: 20px;margin-top:10px">
      <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-column prop="operation" label="操作" width="200px">
            <template #default="scope">
              <el-button type="warning" text @click="permissionEditRoleInit(scope.row)" :disabled="scope.row.id === 2">
                编辑
              </el-button>
            </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="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="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="market" label="所属地区:" required>
          <el-select v-model="addRole.market" placeholder="请选择所属地区" style="width: 220px" clearable @change="handleMarketChange" >
            <el-option v-for="item in addRoleMarket" :key="item" :label="item" :value="item"/>
          </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-strictly="false"
                   @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="throttledHandleAddRole">
          提交
        </el-button>
      </div>
    </template>
  </el-dialog>
  <!-- 編輯角色彈窗 -->
  <el-dialog v-model="permissionEditRoleVisible" title="编辑角色" width="800px" :close-on-click-modal="false">
    <template #footer>
      <el-form ref="Ref" :rules="Rolerules" :model="permissionEditRoleObj" label-width="auto"
               style="max-width: 600px; align-items: center">
        <el-form-item prop="roleName" label="角色名称:" required>
          <el-input v-model="permissionEditRoleObj.roleName" placeholder="请输入角色名称" style="width: 220px"/>
        </el-form-item>
        <el-form-item prop="parentName" label="上级角色:">
          <el-input v-model="permissionEditRoleObj.parentName" placeholder="无上级角色" disabled style="width: 220px">
            <el-option v-for="item in permissionList" :key="item.value" :label="item.label"
                       :value="item.value"></el-option>
          </el-input>
        </el-form-item>
        <el-form-item prop="market" label="地区" required>
          <el-input v-model="permissionEditRoleObj.market" placeholder="请输入所属地区" style="width: 220px" disabled/>
        </el-form-item>
        <el-form-item prop="checkedKeys" label="权限列表:" required>
          <el-tree v-if="data.length > 0" :data="data" show-checkbox node-key="id" ref="treeRef"
                   :props="{ label: 'menuName', children: 'children' }"
                   :default-checked-keys="permissionEditRoleObj.checkedKeys"
                   :check-strictly="false"
                   @check="handleEditRolePermissionCheck">
            <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="permissionEditRoleObj.grade" placeholder="数字1~999" style="width: 220px" />
        </el-form-item> -->
      </el-form>

      <div>
        <el-button @click="permissionEditRoleVisible = false">取消</el-button>
        <el-button type="primary" @click="permissionEditRole">
          提交
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

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


.head-card {
  display: flex;
}

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


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