113 lines
2.7 KiB
Vue
113 lines
2.7 KiB
Vue
<template>
|
|
<div class="container-box">
|
|
<div class="header-bar">
|
|
<h2>权限管理</h2>
|
|
<el-button type="primary" @click="handleAddPermission = true">
|
|
<el-icon><Plus /></el-icon>
|
|
添加权限
|
|
</el-button>
|
|
</div>
|
|
|
|
<el-divider></el-divider>
|
|
|
|
<el-table :data="permissions" style="width: 100%">
|
|
<el-table-column prop="name" label="权限名称" width="180" align="center" />
|
|
<el-table-column prop="code" label="权限代码" width="200" align="center" />
|
|
<el-table-column prop="description" label="权限描述" align="center" />
|
|
<el-table-column prop="type" label="权限类型" width="120" align="center">
|
|
<template #default="scope">
|
|
<el-tag :type="scope.row.type === 'menu' ? 'primary' : 'warning'">
|
|
{{ scope.row.type === "menu" ? "菜单权限" : "功能权限" }}
|
|
</el-tag>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="操作" width="200" align="center" fixed="right">
|
|
<template #default="scope">
|
|
<el-button size="small" @click="handleEdit(scope.row)"
|
|
>编辑</el-button
|
|
>
|
|
<el-button size="small" type="danger" @click="handleDelete(scope.row)"
|
|
>删除</el-button
|
|
>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<div class="pagination-bar">
|
|
<el-pagination
|
|
background
|
|
:current-page="page"
|
|
:page-size="pageSize"
|
|
:total="total"
|
|
@current-change="handlePageChange"
|
|
layout="total, prev, pager, next"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref } from "vue";
|
|
|
|
// const loading = ref(false);
|
|
// const error = ref("");
|
|
const page = ref(1);
|
|
const pageSize = ref(10);
|
|
const total = ref(0);
|
|
|
|
interface Permission {
|
|
id: number;
|
|
name: string;
|
|
code: string;
|
|
description: string;
|
|
type: string;
|
|
}
|
|
|
|
const permissions = ref<Permission[]>([
|
|
{
|
|
id: 1,
|
|
name: "用户管理",
|
|
code: "user:manage",
|
|
description: "用户的增删改查权限",
|
|
type: "menu",
|
|
},
|
|
{
|
|
id: 2,
|
|
name: "角色管理",
|
|
code: "role:manage",
|
|
description: "角色的增删改查权限",
|
|
type: "menu",
|
|
},
|
|
{
|
|
id: 3,
|
|
name: "数据导出",
|
|
code: "data:export",
|
|
description: "数据导出功能权限",
|
|
type: "function",
|
|
},
|
|
]);
|
|
|
|
const handleAddPermission = () => {
|
|
// 添加权限功能
|
|
};
|
|
|
|
const handleEdit = (permission: Permission) => {
|
|
// 编辑权限功能
|
|
};
|
|
|
|
const handleDelete = (permission: Permission) => {
|
|
// 删除权限功能
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.permissions-container {
|
|
padding: 20px;
|
|
}
|
|
|
|
.card-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
</style>
|