<template>
|
<div class="role-page" v-loading="loading">
|
<div class="page-head">
|
<el-button link type="primary" @click="goBack">← 返回列表</el-button>
|
<h2 class="title">角色详情</h2>
|
</div>
|
|
<el-descriptions v-if="!loading" :column="1" border size="small" class="desc">
|
<el-descriptions-item label="角色名称">{{ detail.roleName }}</el-descriptions-item>
|
<el-descriptions-item label="备注">{{ detail.remark || "—" }}</el-descriptions-item>
|
<el-descriptions-item label="创建时间">{{ formatTime(detail.createTime) }}</el-descriptions-item>
|
</el-descriptions>
|
|
<div class="perm-title">操作权限</div>
|
<RolePermissionMatrix v-if="menuTree.length" v-model="menuIds" :menu-tree="menuTree" disabled />
|
<p v-else-if="!loading" class="muted">暂无菜单数据</p>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import { onMounted, reactive, ref } from "vue";
|
import { useRoute, useRouter } from "vue-router";
|
import { ElMessage } from "element-plus";
|
import RolePermissionMatrix from "../components/RolePermissionMatrix.vue";
|
import type { MenuNode } from "../types/sysMenu";
|
import http from "../api/http";
|
|
const route = useRoute();
|
const router = useRouter();
|
|
const loading = ref(false);
|
const menuTree = ref<MenuNode[]>([]);
|
const menuIds = ref<number[]>([]);
|
|
const detail = reactive({
|
roleName: "",
|
remark: "",
|
createTime: "" as string | undefined,
|
});
|
|
function formatTime(v: unknown) {
|
if (v == null || v === "") return "—";
|
const s = String(v);
|
return s.length >= 19 ? s.slice(0, 19).replace("T", " ") : s;
|
}
|
|
function goBack() {
|
router.push("/roles");
|
}
|
|
onMounted(async () => {
|
const uuid = route.query.uuid as string;
|
const id = Number(route.params.id);
|
if (!uuid || Number.isNaN(id)) {
|
ElMessage.error("缺少参数，请从列表进入详情");
|
router.replace("/roles");
|
return;
|
}
|
loading.value = true;
|
try {
|
const [treeRes, detailRes] = await Promise.all([
|
http.get("/sys/menus/tree"),
|
http.get(`/sys/role-manage/${id}`, { params: { uuid } }),
|
]);
|
menuTree.value = (treeRes.data.result || []) as MenuNode[];
|
const r = detailRes.data.result;
|
detail.roleName = r.roleName || "";
|
detail.remark = r.remark || "";
|
detail.createTime = r.createTime;
|
menuIds.value = [...(r.menuIds || [])];
|
} catch (e: unknown) {
|
ElMessage.error(e instanceof Error ? e.message : "加载失败");
|
router.replace("/roles");
|
} finally {
|
loading.value = false;
|
}
|
});
|
</script>
|
|
<style scoped>
|
.role-page {
|
max-width: 960px;
|
}
|
.page-head {
|
margin-bottom: 20px;
|
}
|
.title {
|
margin: 8px 0 0;
|
font-size: 20px;
|
font-weight: 600;
|
}
|
.desc {
|
margin-bottom: 16px;
|
max-width: 560px;
|
}
|
.perm-title {
|
margin-bottom: 10px;
|
font-size: 14px;
|
color: #606266;
|
}
|
.muted {
|
color: var(--el-text-color-secondary);
|
font-size: 13px;
|
}
|
</style>
|
