forked from lxbfYeaaGbeDLMCi/deShanXiao
62 lines
1.5 KiB
Vue
62 lines
1.5 KiB
Vue
<template>
|
||
<el-descriptions
|
||
title="角色信息"
|
||
style="padding: 15px"
|
||
border
|
||
size="large"
|
||
:column="2">
|
||
<el-descriptions-item>
|
||
<template #label> 角色名 </template>{{ theRoleInfo.name }}
|
||
</el-descriptions-item>
|
||
<el-descriptions-item>
|
||
<template #label>是否启用 </template>
|
||
<el-tag type="success" v-if="theRoleInfo.roleState">启用</el-tag>
|
||
<el-tag type="danger" v-else>禁用</el-tag>
|
||
</el-descriptions-item>
|
||
</el-descriptions>
|
||
<el-row>
|
||
<el-col>
|
||
<label>角色权限：</label>
|
||
<el-tree
|
||
:data="roles"
|
||
:props="treeProps"
|
||
show-checkbox
|
||
node-key="id"
|
||
:default-checked-keys="theRoleInfo.values?.split(',')"
|
||
default-expand-all />
|
||
</el-col>
|
||
</el-row>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
import { systemMenueType } from "@/types/systemMenue";
|
||
import { roleType } from "@/types/role";
|
||
import { ref, onMounted } from "vue";
|
||
import api from "@/lib/request";
|
||
const props = defineProps<{
|
||
data: roleType;
|
||
}>();
|
||
const role = props.data;
|
||
let roles = ref<systemMenueType[]>([]);
|
||
let loading = ref(true);
|
||
let treeProps = { label: "name", children: "children" };
|
||
let theRoleInfo = ref<roleType>({});
|
||
|
||
theRoleInfo.value = { ...props.data };
|
||
|
||
onMounted(async () => {
|
||
let respone = await api().get("/system-menue/list");
|
||
roles.value = respone.data.list;
|
||
loading.value = false;
|
||
});
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
:deep(.el-descriptions__label) {
|
||
display: flex;
|
||
align-items: center;
|
||
.el-icon {
|
||
margin: 0 5px;
|
||
}
|
||
}
|
||
</style>
|