|
|
@@ -1,31 +1,25 @@
|
|
|
<template>
|
|
|
<div class="system-edit-role-container">
|
|
|
- <el-dialog title="配置权限" v-model="state.isShowDialog" draggable>
|
|
|
+ <el-dialog title="权限配置" v-model="state.isShowDialog" draggable @opened="opened">
|
|
|
<div class="custom-tree-node-container">
|
|
|
- <el-table :data="state.menuTableData" style="width: 100%; margin-bottom: 20px" row-key="id" border
|
|
|
- default-expand-all>
|
|
|
- <el-table-column width="180">
|
|
|
- <template #header>
|
|
|
- <el-checkbox v-model="checkAllMenu" :indeterminate="isIndeterminateMenu"
|
|
|
- @change="handleCheckAllChangeMenu">菜单</el-checkbox>
|
|
|
- </template>
|
|
|
+ <el-table :data="state.menuTableData" stripe row-key="permissionCode" border :expand-row-keys="state.expandRowKeys">
|
|
|
+ <el-table-column width="180" label="菜单">
|
|
|
<template #default="scope">
|
|
|
- <el-checkbox-group v-model="state.systemMenuArr" @change="handleCheckedMenuChange">
|
|
|
- <el-checkbox :label="scope.row.permissionCode">{{ scope.row.pageName }}</el-checkbox>
|
|
|
- </el-checkbox-group>
|
|
|
+ <el-checkbox
|
|
|
+ v-if="scope.row.children"
|
|
|
+ :indeterminate="scope.row.indeterminate"
|
|
|
+ v-model="scope.row.checked"
|
|
|
+ @change="changeRowSelect(scope.row)"
|
|
|
+ >{{ scope.row.pageName }}</el-checkbox
|
|
|
+ >
|
|
|
+ <el-checkbox v-else v-model="scope.row.checked" @change="changeRowSelect(scope.row)">{{ scope.row.pageName }}</el-checkbox>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
- <el-table-column prop="children">
|
|
|
- <template #header>
|
|
|
- <el-checkbox v-model="checkAllBtn" :indeterminate="isIndeterminateBtn"
|
|
|
- @change="handleCheckAllChangeBtn">按钮</el-checkbox>
|
|
|
- </template>
|
|
|
+ <el-table-column prop="children" label="按钮">
|
|
|
<template #default="scope">
|
|
|
<el-checkbox-group v-model="state.systemButtonArr" @change="handleCheckedBtnChange">
|
|
|
- <el-checkbox v-for="(item) in scope.row.buttonArr" :key="item.id"
|
|
|
- :label="item.permissionCode"><span v-if="showSetting">{{ item.permissionCode }}-{{
|
|
|
- item.btnName
|
|
|
- }}</span>
|
|
|
+ <el-checkbox v-for="item in scope.row.buttonArr" :key="item.id" :label="item.permissionCode"
|
|
|
+ ><span v-if="showSetting">{{ item.permissionCode }}-{{ item.btnName }}</span>
|
|
|
<span v-else>{{ item.btnName }}</span>
|
|
|
</el-checkbox>
|
|
|
</el-checkbox-group>
|
|
|
@@ -35,6 +29,7 @@
|
|
|
</div>
|
|
|
<template #footer>
|
|
|
<span class="dialog-footer">
|
|
|
+ <el-button class="default-button"><el-checkbox v-model="state.checkedAll" @change="changeAllSelect">全选</el-checkbox></el-button>
|
|
|
<el-button @click="onCancel" class="default-button">取 消</el-button>
|
|
|
<el-button type="primary" @click="onSubmit">确 定</el-button>
|
|
|
</span>
|
|
|
@@ -44,12 +39,12 @@
|
|
|
</template>
|
|
|
|
|
|
<script setup lang="ts" name="systemEditRole">
|
|
|
-import { reactive, onMounted, ref, computed } from 'vue';
|
|
|
+import { reactive, onMounted, computed } from 'vue';
|
|
|
import { ElMessage } from 'element-plus';
|
|
|
import { storeToRefs } from 'pinia';
|
|
|
import { useUserInfo } from '/@/stores/userInfo';
|
|
|
-import { getMenuList } from "/@/api/system/menu";
|
|
|
-import { getRolePower, setRolePower } from "/@/api/system/roles"
|
|
|
+import { getMenuList } from '/@/api/system/menu';
|
|
|
+import { getRolePower, setRolePower } from '/@/api/system/roles';
|
|
|
|
|
|
// 定义子组件向父组件传值/事件
|
|
|
const emit = defineEmits(['updateList']);
|
|
|
@@ -61,13 +56,9 @@ const state = reactive<any>({
|
|
|
systemMenuArr: <any>[],
|
|
|
systemButtonArr: <any>[],
|
|
|
currentRow: {},
|
|
|
- allMenuArr: <any>[],
|
|
|
- allButtonArr: <any>[],
|
|
|
+ checkedAll: false,
|
|
|
+ expandRowKeys:[]
|
|
|
});
|
|
|
-const checkAllMenu = ref(false)
|
|
|
-const checkAllBtn = ref(false)
|
|
|
-const isIndeterminateMenu = ref(false)
|
|
|
-const isIndeterminateBtn = ref(false);
|
|
|
const storesUserInfo = useUserInfo();
|
|
|
const { userInfos } = storeToRefs(storesUserInfo);
|
|
|
// 打开弹窗
|
|
|
@@ -75,37 +66,51 @@ const openDialog = (row: any) => {
|
|
|
state.currentRow = row;
|
|
|
state.systemMenuArr = <any>[];
|
|
|
state.systemButtonArr = <any>[];
|
|
|
+ const loop = (data: any) => {
|
|
|
+ data.forEach((item: any) => {
|
|
|
+ item.checked = false;
|
|
|
+ if (item.children && item.children.length) {
|
|
|
+ loop(item.children);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ };
|
|
|
+ loop(state.menuTableData);
|
|
|
if (userInfos.value.authBtnList.includes('100205')) {
|
|
|
getRolePower({ roleid: row.id }).then((res: any) => {
|
|
|
state.systemMenuArr = res.result?.systemMenuArr ?? [];
|
|
|
state.systemButtonArr = res.result?.systemButtonArr ?? [];
|
|
|
- // 设置全选状态
|
|
|
- if (state.allButtonArr.length === state.systemButtonArr.length) {
|
|
|
- checkAllBtn.value = true;
|
|
|
- isIndeterminateBtn.value = false;
|
|
|
- } else if (state.systemButtonArr.length !== 0) {
|
|
|
- checkAllBtn.value = false;
|
|
|
- isIndeterminateBtn.value = true;
|
|
|
- } else {
|
|
|
- checkAllBtn.value = false;
|
|
|
- isIndeterminateBtn.value = false;
|
|
|
- }
|
|
|
- if (state.allMenuArr.length === state.systemMenuArr.length) {
|
|
|
- checkAllMenu.value = true;
|
|
|
- isIndeterminateMenu.value = false;
|
|
|
- } else if (state.systemMenuArr.length !== 0) {
|
|
|
- checkAllMenu.value = false;
|
|
|
- isIndeterminateMenu.value = true;
|
|
|
- } else {
|
|
|
- checkAllMenu.value = false;
|
|
|
- isIndeterminateMenu.value = false;
|
|
|
- }
|
|
|
+ const loop = (data: any) => {
|
|
|
+ data.forEach((item: any) => {
|
|
|
+ for (let i of state.systemMenuArr) {
|
|
|
+ if (item.permissionCode === i) {
|
|
|
+ item.checked = true;
|
|
|
+ if (item.children && item.children.length) {
|
|
|
+ loop(item.children);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ };
|
|
|
+ loop(state.menuTableData);
|
|
|
+ state.expandRowKeys = state.systemMenuArr;
|
|
|
state.isShowDialog = true;
|
|
|
});
|
|
|
} else {
|
|
|
ElMessage.warning('您没有获取角色权限的权限');
|
|
|
}
|
|
|
};
|
|
|
+// 检查是否全选
|
|
|
+const opened = () => {
|
|
|
+ const loopMenu = (data: any) => {
|
|
|
+ return data.every((item: any) => {
|
|
|
+ if (item.children && item.children.length) {
|
|
|
+ loopMenu(item.children);
|
|
|
+ }
|
|
|
+ return item.checked;
|
|
|
+ });
|
|
|
+ };
|
|
|
+ state.checkedAll = loopMenu(state.menuTableData);
|
|
|
+};
|
|
|
// 关闭弹窗
|
|
|
const closeDialog = () => {
|
|
|
state.isShowDialog = false;
|
|
|
@@ -114,93 +119,200 @@ const closeDialog = () => {
|
|
|
const onCancel = () => {
|
|
|
closeDialog();
|
|
|
};
|
|
|
-// 保存
|
|
|
-const onSubmit = () => {
|
|
|
- let req = {
|
|
|
- roleId: state.currentRow.id,
|
|
|
- roleCode: state.currentRow.name,
|
|
|
- systemMenuArr: state.systemMenuArr,
|
|
|
- systemButtonArr: state.systemButtonArr
|
|
|
- }
|
|
|
- setRolePower(req).then(() => {
|
|
|
- ElMessage({
|
|
|
- message: '操作成功',
|
|
|
- type: 'success',
|
|
|
- })
|
|
|
- closeDialog();
|
|
|
- emit("updateList")
|
|
|
- }).catch(() => { // 新增失败
|
|
|
- closeDialog();
|
|
|
- })
|
|
|
-};
|
|
|
// 获取所有菜单
|
|
|
const getMenuListApi = () => {
|
|
|
getMenuList().then((res: any) => {
|
|
|
state.menuTableData = res?.result ?? [];
|
|
|
- state.allMenuArr = getAllMenuCode(state.menuTableData);
|
|
|
- state.allButtonArr = getAllButtonCode(state.menuTableData);
|
|
|
- })
|
|
|
-}
|
|
|
-// 获取所有的菜单code集合
|
|
|
-const getAllMenuCode = (arr: any[]) => {
|
|
|
- const newArr = <any>[];
|
|
|
- arr.forEach(v => {
|
|
|
- newArr.push(v.permissionCode);
|
|
|
- if (v.children?.length) {
|
|
|
- newArr.push(...getAllMenuCode(v.children));
|
|
|
- }
|
|
|
});
|
|
|
- return newArr;
|
|
|
-}
|
|
|
-// 获取所有按钮的code集合
|
|
|
-let newArr1 = <any>[];
|
|
|
-const getAllButtonCode = (arr: any) => {
|
|
|
- if (!arr.length) return;
|
|
|
+};
|
|
|
+// 开发环境不显示设置
|
|
|
+const showSetting = computed(() => {
|
|
|
+ return import.meta.env.VITE_MODE_NAME === 'development';
|
|
|
+});
|
|
|
|
|
|
- // 定义一个帮助函数，用于处理每一项数据
|
|
|
- const processItem = (item: any) => {
|
|
|
- for (let i of item.buttonArr) {
|
|
|
- newArr1.push(i.permissionCode)
|
|
|
- }
|
|
|
- if (item.children?.length) {
|
|
|
- getAllButtonCode(item.children)
|
|
|
+// 选择表格(全选)
|
|
|
+const changeAllSelect = (val: any) => {
|
|
|
+ const loop = (data: any) => {
|
|
|
+ data.forEach((item: any) => {
|
|
|
+ item.checked = val;
|
|
|
+ if ('indeterminate' in item) {
|
|
|
+ item.indeterminate = false;
|
|
|
+ }
|
|
|
+ if (item.buttonArr && item.buttonArr.length) {
|
|
|
+ item.buttonArr.forEach((item: any) => {
|
|
|
+ if (val) {
|
|
|
+ state.systemButtonArr.push(item.permissionCode);
|
|
|
+ } else {
|
|
|
+ for (let i in state.systemButtonArr) {
|
|
|
+ if (state.systemButtonArr[i] === item.permissionCode) {
|
|
|
+ state.systemButtonArr.splice(i, 1);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ state.systemButtonArr = Array.from(new Set(state.systemButtonArr));
|
|
|
+ if (item.children && item.children.length) {
|
|
|
+ loop(item.children);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ };
|
|
|
+ loop(state.menuTableData);
|
|
|
+};
|
|
|
+const find = (v: any, list: any[]) => {
|
|
|
+ let data;
|
|
|
+ (list || []).map((i) => {
|
|
|
+ if (i.id === v) {
|
|
|
+ data = i;
|
|
|
+ } else {
|
|
|
+ const child = find(v, i.children);
|
|
|
+ if (child) {
|
|
|
+ data = child;
|
|
|
+ }
|
|
|
}
|
|
|
+ });
|
|
|
+ return data;
|
|
|
+};
|
|
|
+// 选择表格(表格行选择)
|
|
|
+const changeRowSelect = (val: any) => {
|
|
|
+ const loopBtn = (data: any, checked = val.checked) => {
|
|
|
+ data.forEach((item: any) => {
|
|
|
+ if (checked) {
|
|
|
+ state.systemButtonArr.push(item.permissionCode);
|
|
|
+ } else {
|
|
|
+ for (let i in state.systemButtonArr) {
|
|
|
+ if (state.systemButtonArr[i] === item.permissionCode) {
|
|
|
+ state.systemButtonArr.splice(i, 1);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (item.buttonArr && item.buttonArr.length) {
|
|
|
+ loopBtn(item.buttonArr);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ };
|
|
|
+ const loop = (data: any) => {
|
|
|
+ data.forEach((item: any) => {
|
|
|
+ item.checked = val.checked;
|
|
|
+ if (item.children && item.children.length) {
|
|
|
+ loop(item.children);
|
|
|
+ }
|
|
|
+ if (item.buttonArr && item.buttonArr.length) {
|
|
|
+ loopBtn(item.buttonArr);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ };
|
|
|
+ state.systemButtonArr = Array.from(new Set(state.systemButtonArr));
|
|
|
+ if (val.buttonArr && val.buttonArr.length) {
|
|
|
+ loopBtn(val.buttonArr);
|
|
|
}
|
|
|
+ if (val.children && val.children.length) {
|
|
|
+ loop(val.children);
|
|
|
+ if ('indeterminate' in val) {
|
|
|
+ val.indeterminate = false;
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ let checkedLeg = 0;
|
|
|
+ const loop = (data: any) => {
|
|
|
+ data.forEach((item: any) => {
|
|
|
+ if (item.id === val.parentId) {
|
|
|
+ // 获取当前父级下子级选中条数
|
|
|
+ const leg = item.children.length;
|
|
|
+ checkedLeg = item.children.filter((ss: any) => ss.checked).length;
|
|
|
+ // 根据条数改变父级的indeterminate和checked
|
|
|
+ if (checkedLeg === 0) {
|
|
|
+ item.indeterminate = false;
|
|
|
+ item.checked = false;
|
|
|
+ } else if (checkedLeg < leg) {
|
|
|
+ item.indeterminate = true;
|
|
|
+ item.checked = false;
|
|
|
+ } else if (checkedLeg === leg) {
|
|
|
+ item.indeterminate = false;
|
|
|
+ item.checked = true;
|
|
|
+ }
|
|
|
|
|
|
- arr.forEach(processItem);
|
|
|
- return newArr1;
|
|
|
-}
|
|
|
-// 全选菜单
|
|
|
-const handleCheckAllChangeMenu = (val: boolean) => {
|
|
|
- state.systemMenuArr = val ? state.allMenuArr : []
|
|
|
- isIndeterminateMenu.value = false
|
|
|
-}
|
|
|
-const handleCheckedMenuChange = (value: string[]) => {
|
|
|
- const checkedCount = value.length;
|
|
|
- checkAllMenu.value = checkedCount === state.allMenuArr.length
|
|
|
- isIndeterminateMenu.value = checkedCount > 0 && checkedCount < state.allMenuArr.length;
|
|
|
-}
|
|
|
-// 全选按钮
|
|
|
-const handleCheckAllChangeBtn = (val: boolean) => {
|
|
|
- state.systemButtonArr = val ? state.allButtonArr : []
|
|
|
- isIndeterminateBtn.value = false
|
|
|
-}
|
|
|
+ const currentI: any = find(item.parentId, state.menuTableData);
|
|
|
+ if (currentI) {
|
|
|
+ let checkedLeg1 = 0;
|
|
|
+ const leg1 = currentI.children.length;
|
|
|
+ checkedLeg1 = item.children.filter((ss: any) => ss.checked).length;
|
|
|
+ // 根据条数改变父级的indeterminate和checked
|
|
|
+ if (checkedLeg1 === 0) {
|
|
|
+ currentI.indeterminate = false;
|
|
|
+ } else if (checkedLeg < leg1) {
|
|
|
+ currentI.indeterminate = true;
|
|
|
+ } else if (checkedLeg === leg1) {
|
|
|
+ currentI.indeterminate = false;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (item.children && item.children.length) {
|
|
|
+ loop(item.children);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ };
|
|
|
+ loop(state.menuTableData);
|
|
|
+ }
|
|
|
+ // 判断是否全部选择了,改变全选框的样式
|
|
|
+ let flag = true;
|
|
|
+ state.menuTableData.some((item: any) => {
|
|
|
+ if (!item.checked) {
|
|
|
+ flag = false;
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ state.checkedAll = flag;
|
|
|
+};
|
|
|
+// 选择按钮
|
|
|
const handleCheckedBtnChange = (value: string[]) => {
|
|
|
- const checkedCount = value.length;
|
|
|
- checkAllBtn.value = checkedCount === state.allButtonArr.length;
|
|
|
- isIndeterminateBtn.value = checkedCount > 0 && checkedCount < state.allButtonArr.length;
|
|
|
-}
|
|
|
-// 开发环境不显示设置
|
|
|
-const showSetting = computed(() => {
|
|
|
- return import.meta.env.VITE_MODE_NAME === 'development'
|
|
|
-})
|
|
|
+ state.systemButtonArr = value;
|
|
|
+};
|
|
|
+// 点击提交选中的表格
|
|
|
+const handleSelectTable = () => {
|
|
|
+ let selectedCodes = <any>[];
|
|
|
+ const loop = (data: any) => {
|
|
|
+ data.forEach((item: any) => {
|
|
|
+ if (item.checked || item.indeterminate) {
|
|
|
+ selectedCodes.push(item.permissionCode);
|
|
|
+ if (item.children) {
|
|
|
+ loop(item.children);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ };
|
|
|
+ loop(state.menuTableData);
|
|
|
+ return selectedCodes;
|
|
|
+};
|
|
|
+// 保存
|
|
|
+const onSubmit = () => {
|
|
|
+ let req = {
|
|
|
+ roleId: state.currentRow.id,
|
|
|
+ roleCode: state.currentRow.name,
|
|
|
+ systemMenuArr: handleSelectTable(),
|
|
|
+ systemButtonArr: state.systemButtonArr,
|
|
|
+ };
|
|
|
+ setRolePower(req)
|
|
|
+ .then(() => {
|
|
|
+ ElMessage({
|
|
|
+ message: '操作成功',
|
|
|
+ type: 'success',
|
|
|
+ });
|
|
|
+ closeDialog();
|
|
|
+ emit('updateList');
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ // 新增失败
|
|
|
+ closeDialog();
|
|
|
+ });
|
|
|
+};
|
|
|
onMounted(() => {
|
|
|
- getMenuListApi()
|
|
|
-})
|
|
|
+ getMenuListApi();
|
|
|
+});
|
|
|
// 暴露变量
|
|
|
defineExpose({
|
|
|
openDialog,
|
|
|
- closeDialog
|
|
|
+ closeDialog,
|
|
|
});
|
|
|
</script>
|
|
|
|
zhangchong