77 lines
2.0 KiB
Vue
77 lines
2.0 KiB
Vue
<template>
|
|
<div>
|
|
<el-tree
|
|
class="mgb10"
|
|
ref="tree"
|
|
:data="data"
|
|
node-key="id"
|
|
default-expand-all
|
|
show-checkbox
|
|
:default-checked-keys="checkedKeys"
|
|
/>
|
|
<el-button type="primary" @click="onSubmit">保存权限</el-button>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref } from 'vue';
|
|
import { ElTree } from 'element-plus';
|
|
import { menuData } from '@/components/menu';
|
|
|
|
const props = defineProps({
|
|
permissOptions: {
|
|
type: Object,
|
|
required: true,
|
|
},
|
|
});
|
|
|
|
const menuObj = ref({});
|
|
// const data = menuData.map((item) => {
|
|
// if (item.children) {
|
|
// menuObj.value[item.id] = item.children.map((sub) => sub.id);
|
|
// }
|
|
// return {
|
|
// id: item.id,
|
|
// label: item.title,
|
|
// children: item.children?.map((child) => {
|
|
// return {
|
|
// id: child.id,
|
|
// label: child.title,
|
|
// };
|
|
// }),
|
|
// };
|
|
// });
|
|
|
|
const getTreeData = (data) => {
|
|
return data.map((item) => {
|
|
const obj: any = {
|
|
id: item.id,
|
|
label: item.title,
|
|
};
|
|
if (item.children) {
|
|
menuObj.value[item.id] = item.children.map((sub) => sub.id);
|
|
obj.children = getTreeData(item.children);
|
|
}
|
|
return obj;
|
|
});
|
|
};
|
|
const data = getTreeData(menuData);
|
|
const checkData = (data: string[]) => {
|
|
return data.filter((item) => {
|
|
return !menuObj.value[item] || data.toString().includes(menuObj.value[item].toString());
|
|
});
|
|
};
|
|
// 获取当前权限
|
|
const checkedKeys = ref<string[]>(checkData(props.permissOptions.permiss));
|
|
|
|
// 保存权限
|
|
const tree = ref<InstanceType<typeof ElTree>>();
|
|
const onSubmit = () => {
|
|
// 获取选中的权限
|
|
const keys = [...tree.value!.getCheckedKeys(false), ...tree.value!.getHalfCheckedKeys()] as number[];
|
|
console.log(keys);
|
|
};
|
|
</script>
|
|
|
|
<style scoped></style>
|