初始版本，目前线上可用

frontEnd/src/pages/system/role/page/view.vue

@@ -0,0 +1,61 @@
+<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>