This commit is contained in:
yzl 2026-03-08 16:25:18 +08:00
parent ef84a0b097
commit 5562ef1099
6 changed files with 108 additions and 24 deletions

View File

@ -12,7 +12,7 @@ import type {
*
* @returns Promise<RoleListResponse>
*/
export async function getRoleList(): Promise<RoleListResponse> {
export async function getRoleApi(): Promise<RoleListResponse> {
return request.get<RoleListResponse>('/roles/list');
}
@ -21,7 +21,7 @@ export async function getRoleList(): Promise<RoleListResponse> {
* @param params
* @returns Promise<void>
*/
export async function createRole(params: RoleFormParams): Promise<void> {
export async function createRoleApi(params: RoleFormParams): Promise<void> {
return request.post<void>('/roles/create', params);
}
@ -30,7 +30,7 @@ export async function createRole(params: RoleFormParams): Promise<void> {
* @param params ID
* @returns Promise<void>
*/
export async function editRole(params: RoleFormParams): Promise<void> {
export async function editRoleApi(params: RoleFormParams): Promise<void> {
return request.post<void>('/roles/edit', params);
}
@ -39,7 +39,7 @@ export async function editRole(params: RoleFormParams): Promise<void> {
* @param params ID
* @returns Promise<void>
*/
export async function deleteRole(params: DeleteRoleParams): Promise<void> {
export async function deleteRoleApi(params: DeleteRoleParams): Promise<void> {
return request.post<void>('/roles/del', params);
}
@ -48,7 +48,7 @@ export async function deleteRole(params: DeleteRoleParams): Promise<void> {
* @param params ID + ID列表
* @returns Promise<void>
*/
export async function setRolePermission(params: SetRolePermissionParams): Promise<void> {
export async function setRolePermissionApi(params: SetRolePermissionParams): Promise<void> {
return request.post<void>('/roles/setPermission', params);
}
@ -57,6 +57,6 @@ export async function setRolePermission(params: SetRolePermissionParams): Promis
* @param params ID
* @returns Promise<PermissionIdsResponse> ID数组
*/
export async function getRolePermission(params: GetRolePermissionParams): Promise<PermissionIdsResponse> {
export async function getRolePermissionApi(params: GetRolePermissionParams): Promise<PermissionIdsResponse> {
return request.get<PermissionIdsResponse>('/roles/getPermission', { id: params.id });
}

View File

@ -1,5 +1,5 @@
@use './user.scss';
@use './system.scss';
* {
margin: 0;
padding: 0;

View File

@ -0,0 +1,8 @@
.system {
.header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
}

View File

@ -1,8 +1,8 @@
<template>
<div class="menu-list">
<div class="system">
<!-- 缺少通配搜索组件 -->
<div class="menu-action">
<div class="header">
<h4>菜单列表</h4>
<el-button type="primary" :icon="Plus" @click="handleAddMenu">新增菜单</el-button>
</div>
@ -253,15 +253,4 @@ const handleToggleStatus = async (row: any) => {
row.status = row.status === 1 ? 0 : 1
ElMessage.success(`${row.status === 1 ? '启用' : '禁用'}`)
}
</script>
<style scoped lang="scss">
.menu-list {
.menu-action {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
}
</style>
</script>

View File

@ -1,5 +1,92 @@
<template>
<div class="role-list">
<h1>角色列表</h1>
<div class="system">
<!-- 缺少通配搜索组件 -->
<div class="header">
<h4>菜单列表</h4>
<el-button type="primary" :icon="Plus" @click="handleAddRole">新增角色</el-button>
</div>
<div class="table-container">
<el-table :data="roleTree" row-key="id" border highlight-current-row>
<el-table-column prop="name" label="角色名称" />
<el-table-column prop="title" label="角色描述" />
<el-table-column prop="status" label="角色状态">
<template #default="{ row }">
<el-tag size="small" :type="row.status === 1 ? 'success' : 'danger'">
{{ row.status === 1 ? '启用' : '禁用' }}
</el-tag>
</template>
</el-table-column>
<el-table-column prop="created_at" label="创建时间" />
<el-table-column label="操作">
<template #default="{ row }">
<el-button link type="primary" size="small" @click="handleEditMenu(row)">
编辑
</el-button>
<el-button link type="danger" size="small" @click="handleDeleteMenu(row)">
删除
</el-button>
<el-button link size="small" :type="row.status === 1 ? 'warning' : 'success'"
@click="handleToggleStatus(row)">
{{ row.status === 1 ? '禁用' : '启用' }}
</el-button>
</template>
</el-table-column>
</el-table>
</div>
<el-dialog v-model="dialogVisible" :title="dialogType === 'add' ? '新增角色' : '编辑角色'" width="600px"
destroy-on-close>
<el-form>
<el-form-item label="角色名称" prop="name">
<el-input placeholder="请输入角色名称" />
</el-form-item>
<el-form-item label="角色描述" prop="path">
<el-input placeholder="请输入角色描述" />
</el-form-item>
</el-form>
<template #footer>
<el-button @click="() => { { dialogVisible = false, dialogType = 'add' } }">取消</el-button>
<el-button type="primary" @click="handleSubmitRole">确定</el-button>
</template>
</el-dialog>
</div>
</template>
</template>
<script setup lang="ts">
import { Plus } from '@element-plus/icons-vue'
import { createRoleApi, deleteRoleApi, editRoleApi, getRoleApi } from '@/api/modules/role'
const roleTree = ref<any[]>([
{
id: 1,
name: "admin",
title: "平台",
status: 1,
created_at: "2026-02-05 06:12:03"
}
])
//
const dialogVisible = ref(true)
// /
const dialogType = ref<'add' | 'edit'>('add')
onMounted(async () => {
const res = await getRoleApi()
roleTree.value = res || []
})
const handleAddRole = () => {
console.log('新增角色');
}
const handleSubmitRole = () => {
console.log('提交角色');
}
const handleEditRole = (row: any) => {
console.log('编辑角色', row);
}
const handleDeleteRole = (row: any) => {
console.log('删除角色', row);
}
const handleToggleStatus = (row: any) => {
console.log('切换状态状态', row);
}
</script>

View File