huangqizhen
/
gold-vue
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

角色编辑修改

zhangrenyuan/feature-20250728113353-金币前端三期
ZhangYong 3 weeks ago
parent
7a9056ce20
commit
90056f7fc3
2 changed files with 92 additions and 35 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 6
      .env.development
  2. 121
      src/views/permissions/permission.vue

6
.env.development
View File

@ -1,9 +1,11 @@
VITE_API_BASE='https://hwjb.homilychart.com/dev/admin'
# VITE_API_BASE='https://hwjb.homilychart.com/dev/admin'
# 测试环境
# VITE_API_BASE='http://18.143.76.3:10704/'
# VITE_API_BASE='http://192.168.9.52:10705/'
VITE_UPLOAD_URL=http://39.101.133.168:8828/hljw/api/aws/upload
# VITE_API_BASE='http://192.168.9.28:8081/'
# 孙加倍
# sunjiabei
# VITE_API_BASE='http://192.168.9.28:8081/'
# VITE_API_BASE='http://192.168.5.92:8081/'
# zhangyong
VITE_API_BASE='http://192.168.9.62:8081/'

121
src/views/permissions/permission.vue
View File

@ -1,5 +1,5 @@
<script setup>
import { ref, onMounted, reactive, computed, watch } from 'vue'
import { ref, onMounted, reactive, computed, watch, nextTick } from 'vue'
import ElementPlus from 'element-plus'
import { ElMessage, ElMessageBox } from 'element-plus'
import axios from 'axios'
@ -98,6 +98,7 @@ const permissionEditObj = ref({
machineIds: [''],
machineId: '',
password: '',
postiton:''
})
const addMachineIdInput = function () {
if (addAdmin.value.machineIds.length >= 2) {
@ -438,7 +439,7 @@ const permissionEditInit = async function (row) {
// 处理空值或非字符串情况
permissionEditObj.value.market = [];
}
permissionEditObj.value.postiton = row.postiton
permissionEditObj.value.postiton = row.postiton || ''
permissionEditObj.value.roleId = row.roleId
const result = await request({
url: '/role/selectFather',
@ -546,8 +547,8 @@ const editAdminRules = {
{ required: true, message: '请选择所属地区', trigger: 'change' }
],
postiton: [
{ required: true, message: '请输入职位', trigger: 'blur' },
{ max: 20, message: '长度不能超过20位', trigger: 'blur' }
{ required: true, message: '请输入职位', trigger: ['blur', 'change'] },
{ max: 20, message: '长度不能超过20位', trigger: ['blur', 'change'] }
],
machineIds: [
{
@ -692,13 +693,15 @@ const handleAddRole = async function () {
});
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": addRole.value.checkedKeys,
"menuIds": finalCheckedKeys,
"priority": addRole.value.grade,
"fatherId": addRole.value.parentId,
"market": addRole.value.market
@ -707,6 +710,7 @@ const handleAddRole = async function () {
if (res.code == 200) {
ElMessage.success('角色' + addRole.value.roleName + '添加成功')
console.log('成功了，看看addRole', addRole.value)
console.log('提交的权限ID列表:', finalCheckedKeys);
closePermissionAddVisible()
} else {
ElMessage.error(res.msg)
@ -776,7 +780,7 @@ const getLists = async function () {
data: { id: roleId }
})
data.value = res.data
data.value = data.value.filter(item => item.id !== 9);
data.value = data.value.filter(item => item.id !== 9);
console.log('看看data', data.value)
console.log('parentID:', addRole.value.parentId, 'roleId:', roleId)
@ -844,13 +848,30 @@ const EdithandleMarketChange = (values) => {
console.log('看看现在的地区', permissionEditObj.value.market);
};
const treeRef = ref(null)
// 处理编辑角色权限时的勾选事件
const handleEditRolePermissionCheck = (checkedNodes, { checkedKeys }) => {
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;
@ -871,7 +892,7 @@ const handleCheckChange = async (checkedNodes, checkedInfo) => {
// 将Set转换为数组并更新
addRole.value.checkedKeys = Array.from(allKeys);
console.log('包含所有父级的选中项:', addRole.value.checkedKeys);
console.log('新增角色包含所有父级的选中项:', addRole.value.checkedKeys);
};
const selectParentNodes = (treeData, nodeId, checkedKeys) => {
@ -1010,6 +1031,7 @@ const collectIds2 = (tree) => {
// 编辑角色初始化
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;
@ -1018,21 +1040,7 @@ const permissionEditRoleInit = async function (row) {
permissionEditRoleObj.value.parentName = row.fatherName;
permissionEditRoleObj.value.grade = row.priority;
// // 直接使用当前行的权限树数据
// if (row.tree && row.tree.length > 0) {
// // 收集当前行权限树的所有 id
// permissionEditRoleObj.value.checkedKeys = collectIds2(row.tree);
// // 以当前行的权限树数据作为 el-tree 的数据源
// data.value = row.tree;
// } else {
// permissionEditRoleObj.value.checkedKeys = [];
// data.value = [];
// }
try {
let roleId = permissionEditRoleObj.value.parentId;
// 如果没有上级角色，设置为管理员的id
if (permissionEditRoleObj.value.parentId === null || permissionEditRoleObj.value.parentId === undefined) {
@ -1045,9 +1053,12 @@ const permissionEditRoleInit = async function (row) {
});
data.value = res.data;
data.value = data.value.filter(item => item.id !== 9);
// 收集当前行权限树的所有 id
// 收集当前行权限树的叶子节点id（只收集实际选中的叶子节点）
if (row.tree && row.tree.length > 0) {
permissionEditRoleObj.value.checkedKeys = collectIds2(row.tree);
const leafIds = collectIds2(row.tree);
permissionEditRoleObj.value.checkedKeys = leafIds;
console.log('编辑角色初始化时的权限列表', permissionEditRoleObj.value.checkedKeys);
} else {
permissionEditRoleObj.value.checkedKeys = [];
}
@ -1056,10 +1067,15 @@ const permissionEditRoleInit = async function (row) {
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);
}
};
// 编辑角色提交
@ -1075,12 +1091,23 @@ const permissionEditRole = async function () {
});
});
// 确保提交时包含所有选中的权限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": permissionEditRoleObj.value.checkedKeys,
"menuIds": finalCheckedKeys,
"priority": permissionEditRoleObj.value.grade,
"fatherId": permissionEditRoleObj.value.parentId,
"market": permissionEditRoleObj.value.market
@ -1088,6 +1115,7 @@ const permissionEditRole = async function () {
});
if (res.code === 200) {
console.log('编辑角色成功', permissionEditRoleObj.value);
console.log('提交的权限ID列表:', finalCheckedKeys);
permissionEditRoleVisible.value = false;
getRoleList();
ElMessage.success('编辑角色成功');
@ -1104,6 +1132,30 @@ const permissionEditRole = async function () {
}
};
// 为提交时查找父节点的辅助函数
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;
};
@ -1343,7 +1395,7 @@ onMounted(async function () {
</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 type="warning" text @click="permissionEditRoleInit(scope.row)" :disabled="scope.row.id === 2">
编辑
</el-button>
</template>
@ -1509,6 +1561,7 @@ onMounted(async function () {
<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>
@ -1573,9 +1626,11 @@ onMounted(async function () {
<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"
<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="handleEditRolePermissionCheck">
:default-checked-keys="permissionEditRoleObj.checkedKeys"
:check-strictly="false"
@check="handleEditRolePermissionCheck">
<template #default="{ node, data }">
<span>{{ node.label }}</span>
</template>

Write Preview
Loading…
Cancel
Save