<template>
|
<div class="role-page" v-loading="loading">
|
<div class="page-head">
|
<el-button link type="primary" @click="goBack">← 返回列表</el-button>
|
<h2 class="title">{{ title }}</h2>
|
</div>
|
|
<el-form label-width="100px" class="main-form">
|
<el-form-item label="角色名称" required>
|
<el-input v-model="form.roleName" placeholder="请输入" maxlength="128" show-word-limit style="max-width: 480px" />
|
</el-form-item>
|
<el-form-item label="备注">
|
<el-input
|
v-model="form.remark"
|
type="textarea"
|
:rows="2"
|
placeholder="请输入"
|
maxlength="512"
|
show-word-limit
|
style="max-width: 480px"
|
/>
|
</el-form-item>
|
<el-form-item label="操作权限" required>
|
<RolePermissionMatrix v-if="menuTree.length" v-model="menuIds" :menu-tree="menuTree" />
|
<p v-else class="muted">加载菜单中…</p>
|
</el-form-item>
|
<el-form-item>
|
<el-button @click="goBack">取消</el-button>
|
<el-button type="primary" :loading="saving" @click="submit">保存</el-button>
|
</el-form-item>
|
</el-form>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import { computed, 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 isCreate = computed(() => route.name === "role-create");
|
const roleId = computed(() => (isCreate.value ? NaN : Number(route.params.id)));
|
|
const title = computed(() => (isCreate.value ? "新增角色" : "编辑角色"));
|
|
const loading = ref(false);
|
const saving = ref(false);
|
const menuTree = ref<MenuNode[]>([]);
|
const menuIds = ref<number[]>([]);
|
|
const form = reactive({
|
roleName: "",
|
remark: "",
|
});
|
|
async function loadTree() {
|
const { data } = await http.get("/sys/menus/tree");
|
menuTree.value = (data.result || []) as MenuNode[];
|
}
|
|
async function loadEdit() {
|
if (isCreate.value) {
|
menuIds.value = [];
|
return;
|
}
|
const uuid = route.query.uuid as string;
|
if (!uuid || Number.isNaN(roleId.value)) {
|
ElMessage.error("缺少参数，请从列表进入编辑");
|
router.replace("/roles");
|
return;
|
}
|
loading.value = true;
|
try {
|
const { data } = await http.get(`/sys/role-manage/${roleId.value}`, { params: { uuid } });
|
const r = data.result;
|
form.roleName = r.roleName || "";
|
form.remark = r.remark || "";
|
menuIds.value = [...(r.menuIds || [])];
|
} catch (e: unknown) {
|
ElMessage.error(e instanceof Error ? e.message : "加载失败");
|
router.replace("/roles");
|
} finally {
|
loading.value = false;
|
}
|
}
|
|
function goBack() {
|
router.push("/roles");
|
}
|
|
async function submit() {
|
if (!form.roleName.trim()) {
|
ElMessage.warning("请填写角色名称");
|
return;
|
}
|
if (menuIds.value.length === 0) {
|
ElMessage.warning("请至少选择一项操作权限");
|
return;
|
}
|
saving.value = true;
|
try {
|
if (isCreate.value) {
|
await http.post("/sys/role-manage", {
|
roleName: form.roleName.trim(),
|
remark: form.remark.trim() || undefined,
|
menuIds: menuIds.value,
|
});
|
ElMessage.success("已创建");
|
} else {
|
const uuid = route.query.uuid as string;
|
await http.put(`/sys/role-manage/${roleId.value}`, {
|
uuid,
|
roleName: form.roleName.trim(),
|
remark: form.remark.trim() || undefined,
|
menuIds: menuIds.value,
|
});
|
ElMessage.success("已保存");
|
}
|
router.push("/roles");
|
} catch (e: unknown) {
|
ElMessage.error(e instanceof Error ? e.message : "保存失败");
|
} finally {
|
saving.value = false;
|
}
|
}
|
|
onMounted(async () => {
|
try {
|
await loadTree();
|
await loadEdit();
|
} catch (e: unknown) {
|
ElMessage.error(e instanceof Error ? e.message : "初始化失败");
|
}
|
});
|
</script>
|
|
<style scoped>
|
.role-page {
|
max-width: 960px;
|
}
|
.page-head {
|
margin-bottom: 20px;
|
}
|
.title {
|
margin: 8px 0 0;
|
font-size: 20px;
|
font-weight: 600;
|
}
|
.main-form {
|
margin-top: 8px;
|
}
|
.muted {
|
color: var(--el-text-color-secondary);
|
font-size: 13px;
|
}
|
</style>
|
